commit 331167dd70e6d27d83f730a02e9f7a8174277fb0
Author: Your Name <you@example.com>
Date:   Wed Sep 4 20:14:51 2024 +0800

    first commit

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..54f01fe
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,15 @@
+FROM nginx:alpine
+
+RUN echo "https://mirrors.tuna.tsinghua.edu.cn/alpine/latest-stable/main" > /etc/apk/repositories && \
+    echo "https://mirrors.tuna.tsinghua.edu.cn/alpine/latest-stable/community" >> /etc/apk/repositories
+
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+ADD dist /app/www
+
+
+RUN chown -R nginx:nginx /app/www
+
+CMD ["nginx", "-g", "daemon off;"]
+
diff --git a/Dockerfile-rc b/Dockerfile-rc
new file mode 100644
index 0000000..9e14fc5
--- /dev/null
+++ b/Dockerfile-rc
@@ -0,0 +1,25 @@
+FROM node:20.12 as builder
+
+
+
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npm install -g increase-memory-limit cross-env
+ENV NODE_OPTIONS=--max_old_space_size=4096
+RUN npm run build
+
+FROM nginx:alpine
+
+
+
+
+RUN mkdir -p /app/www
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+COPY --from=builder /app/dist /app/www/
+WORKDIR /app/www
+RUN chown -R nginx:nginx /app/www
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..809a518
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Charlie Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..54226b6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,78 @@
+<h1 align="center">目录结构</h1>
+
+```
+├── .husky
+│   └── commit-msg           # commit 信息校验
+|   └── pre-commit           # eslint 代码检验
+├── src
+│   ├── api                  # Api ajax 等
+│   ├── assets               # 本地静态资源
+│   ├── layouts              # 封装布局组件
+│   ├── components           # 业务通用组件和基础布局组件
+│   ├── router               # Vue-Router
+│   ├── store                # Pinia
+│   ├── utils                # 工具库
+│   ├── views                # 业务页面入口和常用模板
+│   ├── App.vue              # Vue 模板入口
+│   └── main.js              # Vue 入口 JS
+│   └── app.less             # 全局样式
+│   └── env.d.ts             # 全局公用 TypeScript 类型
+├── build/mock               # mock 服务
+├── mock                     # mock 数据
+├── public                   # 静态文件
+├── scripts                  # 公共执行脚本
+├── tests                    # 单元测试
+├── auto-imports.d.ts        # Vue3 组合式API 类型声明文件
+├── components.d.ts          # 组件自注册类型声明文件
+├── vite.config.js           # Vite 配置文件
+├── tsconfig.json            # TS 配置文件
+├── index.html               # 浏览器渲染入口
+├── README.md                # 简单介绍
+└── package.json             # 项目的依赖
+```
+
+
+#### 有以下这几种情况
+
+```js
+// 使用Avatar组件的，并且传入url是从对象中取的可以使用事件回调
+<Avatar width="60" height="60" :url="props.info.avatar" :name="props.info.nickName"></Avatar>
+// after
+<Avatar width="60" height="60" :url="props.info.avatar" :name="props.info.nickName" @updateUrl="url => props.info.avatar = url"></Avatar>
+```
+
+```js
+// 使用Avatar组件，但是传入的url是单独的一个值的
+<Avatar
+width="90"
+height="90"
+:url="url"
+:name="detailSearch.nickname"
+></Avatar>
+// 使用cdnSource组件包裹
+<cdnSource v-if="url" :defaultUrl="url">
+    <template #cdnSlot="{ cdnUrl }">
+        <Avatar
+        width="90"
+        height="90"
+        :url="cdnUrl"
+        :name="detailSearch.nickname"
+        ></Avatar>
+    </template>
+</cdnSource>
+```
+
+```js
+// 使用van-image组件的
+<van-image class="box-item-img" fit="cover" position="center" :src="item.avatar_url" round @click="handleImgClick(item.avatar_url)" />
+
+// 增加error回调监听，调用全局的handleImgCdnError函数，弟23参数为需要更新的对象以及key值
+<van-image class="box-item-img" fit="cover" position="center" :src="item.avatar_url" round @click="handleImgClick(item.avatar_url)" @error="e => handleImgCdnError(e, item, 'avatar_url')" />
+
+// 也可以用这种方式
+<cdnSource :defaultUrl="avatarUrl ? avatarUrl : defaultAvatar">
+    <template #cdnSlot="{ cdnUrl }">
+        <van-image :src="cdnUrl" round width="70" height="70" />
+    </template>
+</cdnSource>
+```
\ No newline at end of file
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000..8859963
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,85 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const afterAll: typeof import('vitest')['afterAll']
+  const afterEach: typeof import('vitest')['afterEach']
+  const assert: typeof import('vitest')['assert']
+  const beforeAll: typeof import('vitest')['beforeAll']
+  const beforeEach: typeof import('vitest')['beforeEach']
+  const chai: typeof import('vitest')['chai']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const describe: typeof import('vitest')['describe']
+  const effectScope: typeof import('vue')['effectScope']
+  const expect: typeof import('vitest')['expect']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const it: typeof import('vitest')['it']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const suite: typeof import('vitest')['suite']
+  const test: typeof import('vitest')['test']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const vi: typeof import('vitest')['vi']
+  const vitest: typeof import('vitest')['vitest']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
diff --git a/blank/blankTransfer.html b/blank/blankTransfer.html
new file mode 100644
index 0000000..10f8849
--- /dev/null
+++ b/blank/blankTransfer.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>blankTransfer</title>
+  <script src="/web_config.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/blank/blankTransfer/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/build/mock/createMockServer.js b/build/mock/createMockServer.js
new file mode 100644
index 0000000..be82bdd
--- /dev/null
+++ b/build/mock/createMockServer.js
@@ -0,0 +1,130 @@
+/* eslint-disable node/prefer-global/process */
+const { join } = require('node:path')
+const url = require('node:url')
+const chokidar = require('chokidar')
+const signale = require('signale')
+const { match } = require('path-to-regexp')
+const { initMock, getMatchMock } = require('./getMockData')
+const { winPath } = require('./utils')
+const { configBabelRegister } = require('./registerBabel')
+
+let watcher
+function getPaths(cwd) {
+  const winCwd = winPath(cwd)
+  const absMockPath = winPath(join(winCwd, 'mock'))
+  return {
+    absMockPath,
+  }
+}
+
+function parseJson(req) {
+  return new Promise((resolve) => {
+    let body = ''
+    let jsonStr = ''
+    req.on('data', (chunk) => {
+      body += chunk
+    })
+    req.on('end', () => {
+      try {
+        jsonStr = JSON.parse(body)
+      }
+      catch (err) {
+        jsonStr = ''
+      }
+      resolve(jsonStr)
+    })
+  })
+}
+const defaultOptions = {
+  watch: true,
+  cwd: process.cwd(), // 配置需要mock的url
+  mockUrlList: [],
+  // 是否开启mock
+  enable: true,
+}
+function initWatchMockFiles(paths) {
+  // chokidar 在 windows 下使用反斜杠组成的 glob 无法正确 watch 文件变动
+  // ref: https://github.com/paulmillr/chokidar/issues/777
+  const absPagesGlobPath = winPath(join('./mock', '**/*.[jt]s'))
+  watcher = chokidar.watch([...['./mock'], absPagesGlobPath], {
+    ignoreInitial: true,
+  })
+  watcher.on('all', (event, file) => {
+    signale.info(`[${event}] ${file}, reload mock data`)
+    cleanRequireCache(paths)
+  })
+  process.once('SIGINT', () => {
+    watcher.close()
+  })
+}
+function cleanRequireCache(paths) {
+  Object.keys(require.cache).forEach((file) => {
+    if (
+      paths.some((path) => {
+        return winPath(file).includes(path)
+      })
+    )
+      delete require.cache[file]
+  })
+}
+module.exports = function (opts) {
+  const options = Object.assign({}, defaultOptions, opts)
+  const { absMockPath } = getPaths(options.cwd)
+  const paths = [absMockPath]
+  if (options.enable) {
+    // vite热更新时关闭上一个进程
+    if (watcher)
+      watcher.close()
+
+    configBabelRegister(paths, {
+      cwd: options.cwd,
+    })
+    initMock(options)
+    if (options.watch)
+      initWatchMockFiles(paths)
+  }
+
+  return {
+    name: 'vite:mock',
+    enforce: 'pre',
+    configureServer({ middlewares }) {
+      if (!options.enable)
+        return
+
+      const middleware = async (req, res, next) => {
+        const matchMock = getMatchMock(req.url)
+        if (matchMock) {
+          let queryParams = {}
+
+          if (req.url)
+
+            // eslint-disable-next-line node/no-deprecated-api
+            queryParams = url.parse(req.url, true)
+
+          const reqUrl = queryParams.pathname
+          let query = queryParams.query
+          if (reqUrl) {
+            const isGet = req.method && req.method.toUpperCase() === 'GET'
+            if ((isGet && JSON.stringify(query) === '{}') || !isGet) {
+              const urlMatch = match(url, { decode: decodeURIComponent })
+              const params = urlMatch(reqUrl).params
+              if (JSON.stringify(params) !== '{}')
+                query = urlMatch(reqUrl).params || {}
+
+              else
+                query = queryParams.query || {}
+            }
+          }
+          const body = await parseJson(req)
+          res.setHeader('Content-Type', 'application/json;charset=utf-8')
+          res.send = opt => res.end(JSON.stringify(opt))
+          res.json = opt => res.end(JSON.stringify(opt))
+          matchMock.handler({ url: req.url, body, query, headers: req.headers }, res)
+          return
+        }
+        next()
+      }
+      middlewares.use(middleware)
+    },
+  }
+}
diff --git a/build/mock/getMockData.js b/build/mock/getMockData.js
new file mode 100644
index 0000000..553304f
--- /dev/null
+++ b/build/mock/getMockData.js
@@ -0,0 +1,110 @@
+const path = require('node:path')
+const glob = require('glob')
+const { pathToRegexp } = require('path-to-regexp')
+const signale = require('signale')
+const { winPath } = require('./utils')
+
+let _mockconfig = {}
+// eslint-disable-next-line node/prefer-global/process
+const cwd = process.cwd()
+let mockList = []
+// 获取mock文件列表
+function getMockFile() {
+  let mockFiles = glob
+    .sync('mock/**/*.[jt]s', {
+      cwd,
+      ignore: [],
+    })
+    .map(p => path.join(cwd, p))
+  // windows下路径处理
+  mockFiles = mockFiles.map(p => winPath(p))
+
+  return mockFiles
+}
+
+// 获取mock文件数据
+function getMockData(files) {
+  let mockData = {}
+  files.forEach((mockFile) => {
+    try {
+      const m = require(mockFile)
+      mockData = Object.assign(mockData, m.default || m)
+      return mockData
+    }
+    catch (e) {
+      console.error(e)
+      throw e
+    }
+  })
+  return mockData
+}
+
+// mock数据格式化
+function parseMockData(config) {
+  mockList = Object.keys(config).reduce((list, key) => {
+    const handler = config[key]
+    const { method, path } = parseMockUrl(key)
+    const keys = []
+    const re = pathToRegexp(path, keys)
+    list.push({
+      method,
+      path,
+      re,
+      keys,
+      handler: mockHandle(handler),
+    })
+    return list
+  }, [])
+}
+function getMatchMock(url) {
+  return (
+    _mockconfig.mockUrlList.findIndex((whiteUrl) => {
+      if (Object.prototype.toString.call(whiteUrl) === '[object RegExp]')
+        return whiteUrl.test(url)
+
+      else
+        return url.includes(whiteUrl)
+    }) !== -1 && mockList.filter(item => url.includes(item.path)).sort((a, b) => b.path.length - a.path.length)[0]
+  )
+}
+function mockHandle(handler) {
+  if (Object.prototype.toString.call(handler) === '[object Function]')
+    return handler
+
+  return (_, res) => {
+    return res.end(JSON.stringify(handler))
+  }
+}
+
+function parseMockUrl(key) {
+  let method = 'get'
+  let path = key
+  if (/\s+/.test(key)) {
+    const splited = key.split(/\s+/)
+    method = splited[0].toLowerCase()
+    path = splited[1]
+  }
+  return {
+    method,
+    path,
+  }
+}
+
+function initMock(config) {
+  try {
+    _mockconfig = config
+    mockList = []
+    const files = getMockFile()
+    const mockData = getMockData(files)
+    parseMockData(mockData)
+  }
+  catch (e) {
+    signale.warn('init mock failed')
+    signale.fatal(e)
+  }
+}
+
+module.exports = {
+  getMatchMock,
+  initMock,
+}
diff --git a/build/mock/registerBabel.js b/build/mock/registerBabel.js
new file mode 100644
index 0000000..47217ab
--- /dev/null
+++ b/build/mock/registerBabel.js
@@ -0,0 +1,97 @@
+/* eslint-disable node/prefer-global/process */
+const { join, isAbsolute } = require('node:path')
+const { existsSync } = require('node:fs')
+const { winPath } = require('./utils')
+
+let files = null
+
+function initFiles(cwd) {
+  if (files)
+    return
+  files = getConfigPaths(cwd)
+}
+function getConfigPaths(cwd) {
+  const env = process.env.UMI_ENV
+  return [
+    join(cwd, 'config/'),
+    join(cwd, '.umirc.js'),
+    join(cwd, '.umirc.ts'),
+    join(cwd, '.umirc.local.js'),
+    join(cwd, '.umirc.local.ts'),
+    ...(env ? [join(cwd, `.umirc.${env}.js`), join(cwd, `.umirc.${env}.ts`)] : []),
+  ]
+}
+
+function addBabelRegisterFiles(extraFiles, { cwd }) {
+  initFiles(cwd)
+  files = files.concat(...extraFiles)
+}
+function addBabelRegister({ cwd }) {
+  initFiles(cwd)
+  const only = files.map((f) => {
+    const fullPath = isAbsolute(f) ? f : join(cwd, f)
+    return winPath(fullPath)
+  })
+
+  let absSrcPath = join(cwd, 'src')
+  if (!existsSync(absSrcPath))
+    absSrcPath = cwd
+
+  registerBabel({
+    // only suport glob
+    // ref: https://babeljs.io/docs/en/next/babel-core.html#configitem-type
+    only,
+    babelPreset: [
+      require.resolve('@babel/preset-env'),
+      {
+        targets: { browsers: ['last 2 versions'] },
+        loose: false,
+        modules: 'commonjs',
+        exclude: [
+          'transform-typeof-symbol',
+          'transform-unicode-regex',
+          'transform-sticky-regex',
+          'transform-new-target',
+          'transform-modules-umd',
+          'transform-modules-systemjs',
+          'transform-modules-amd',
+          'transform-literals',
+        ],
+      },
+    ],
+    babelPlugins: [
+      [
+        require.resolve('babel-plugin-module-resolver'),
+        {
+          alias: {
+            '@': absSrcPath,
+          },
+        },
+      ],
+    ],
+  })
+}
+function configBabelRegister(files, { cwd }) {
+  addBabelRegisterFiles(files, {
+    cwd,
+  })
+  addBabelRegister({
+    cwd,
+  })
+}
+function registerBabel(opts = {}) {
+  const { only, ignore, babelPreset, babelPlugins } = opts
+  if (!process.env.IS_FROM_UMI_TEST) {
+    require('@babel/register')({
+      presets: [require.resolve('@babel/preset-typescript'), babelPreset],
+      plugins: babelPlugins || [],
+      only,
+      ignore,
+      extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],
+      babelrc: false,
+      cache: false,
+    })
+  }
+}
+
+module.exports = { addBabelRegisterFiles, addBabelRegister, configBabelRegister }
diff --git a/build/mock/utils.js b/build/mock/utils.js
new file mode 100644
index 0000000..be28273
--- /dev/null
+++ b/build/mock/utils.js
@@ -0,0 +1,9 @@
+const slash = require('slash2')
+
+const winPath = function (path) {
+  return slash(path)
+}
+
+module.exports = {
+  winPath,
+}
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..028c459
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,3 @@
+// import antfu from '@antfu/eslint-config'
+
+// export default antfu()
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..09a4c4c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <meta name="theme-color" content="#ffffff" /> -->
+    <meta name="description" content="球帝带" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
+    <link rel="icon" href="/src/assets/svg/Frame 1500.svg" />
+    <script src="/web_config.js"></script>
+    <!-- <script src="https://apis.google.com/js/platform.js"></script>  -->
+    <title>球帝带</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+    <script src="/wasm_exec.js"></script>
+    <!-- <script src="/webPushSdk.produce.min.2.1.6.js"></script> -->
+  </body>
+</html>
diff --git a/k8s.yaml b/k8s.yaml
new file mode 100644
index 0000000..8a83779
--- /dev/null
+++ b/k8s.yaml
@@ -0,0 +1,55 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: mobile
+spec:
+  replicas: 
+  selector:
+    matchLabels:
+      app: mobile
+  template:
+    metadata:
+      labels:
+        app: mobile
+    spec:
+      containers:
+      - name: mobile
+        image: {{image}}
+        ports:
+          - containerPort: 80
+        resources:
+          requests:
+            cpu: "100m"
+            memory: "256Mi"
+          limits:
+            cpu: "4000m"
+            memory: "4096Mi"
+            
+        volumeMounts:
+          - name: config-volume
+            mountPath: /app/www/web_config.js
+            subPath: web_config.js
+            readOnly: true
+      volumes:
+          - name: config-volume
+            configMap:
+              name: mobile-config
+              items:
+                - key: web_config.js
+                  path: web_config.js
+
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: mobile
+  
+spec:
+  selector:
+    app: mobile
+  ports:
+  - protocol: TCP
+    name: mobile
+    port: 80
+    targetPort: 80
+
diff --git a/mock/data.ts b/mock/data.ts
new file mode 100644
index 0000000..b933301
--- /dev/null
+++ b/mock/data.ts
@@ -0,0 +1,20 @@
+import { defineMockData } from 'vite-plugin-mock-dev-server'
+
+// defineMockData，用于在 mock 文件中使用 data.ts 作为共享数据源。
+export default defineMockData('proses', [
+  { prose: '🔖 躲在某一时间，想念一段时光的掌纹;躲在某一地点，想念一个站在来路也站在去路的，让我牵挂的人。' },
+  { prose: '🔖 天空一碧如洗，灿烂的阳光正从密密的松针的缝隙间射下来，形成一束束粗粗细细的光柱，把飘荡着轻纱般薄雾的林荫照得通亮。' },
+  { prose: '🔖 这一次相遇，美得彻骨，美得震颤，美得孤绝，美得惊艳。' },
+  { prose: '🔖 沉默的状态，能让我感觉到呼吸的自由和自己原来就处于的本色位置。' },
+  { prose: '🔖 青春，是一包象征着阳光的向日葵种子，在现在洒下，就会在未来得到收获，那一株株饱含青春的花朵。' },
+  { prose: '🔖 燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?' },
+  { prose: '🔖 毕业了，青春在无形之中离去，我们即将翻开人生的另一页。' },
+  { prose: '🔖 成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合。' },
+  { prose: '🔖 旧时光里的人和事，琐碎而零乱。我的记忆很模糊，好像大部分都成了一种温馨的符号，静静的沉在我心底。' },
+  { prose: '🔖 生活是一部大百科全书，包罗万象;生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。' },
+  { prose: '🔖 毕业了，身边的朋友一个个各奔东西，开始学会自己撑起生命的暖色。' },
+  { prose: '🔖 已经走到尽头的东西，重生也不过是再一次的消亡。就像所有的开始，其实都只是一个写好了的结局。' },
+  { prose: '🔖 下午茶的芬香熏陶着房内的任何一个角落，午后的阳光透过窗帘的间隙洒在木制的桌面上，一份思念随着红茶顺滑至心中。' },
+  { prose: '🔖 这里再不是我们的校园，当我们就此离开我们的青葱岁月。' },
+  { prose: '🔖 很久找你，一直没有找到，微风吹过的时候，我深深的呼吸，才感觉到你也在陪伴着我呼吸。' },
+])
diff --git a/mock/index.ts b/mock/index.ts
new file mode 100644
index 0000000..81d4952
--- /dev/null
+++ b/mock/index.ts
@@ -0,0 +1,5 @@
+import prose from './modules/prose.mock'
+
+export default {
+  ...prose,
+}
diff --git a/mock/modules/prose.mock.ts b/mock/modules/prose.mock.ts
new file mode 100644
index 0000000..7af9bfe
--- /dev/null
+++ b/mock/modules/prose.mock.ts
@@ -0,0 +1,16 @@
+// https://github.com/pengzhanbo/vite-plugin-mock-dev-server
+import { defineMock } from 'vite-plugin-mock-dev-server'
+import proses from '../data'
+
+export default defineMock({
+  url: '/api/project/prose',
+  delay: 300,
+  body: () => {
+    const prose = proses.value[Math.floor(Math.random() * 8)]
+    return {
+      code: 0,
+      data: prose,
+      msg: 'success',
+    }
+  },
+})
diff --git a/mock/modules/prose.ts b/mock/modules/prose.ts
new file mode 100644
index 0000000..8492b71
--- /dev/null
+++ b/mock/modules/prose.ts
@@ -0,0 +1,23 @@
+const list = [
+  { prose: '🔖 躲在某一时间，想念一段时光的掌纹;躲在某一地点，想念一个站在来路也站在去路的，让我牵挂的人。' },
+  { prose: '🔖 天空一碧如洗，灿烂的阳光正从密密的松针的缝隙间射下来，形成一束束粗粗细细的光柱，把飘荡着轻纱般薄雾的林荫照得通亮。' },
+  { prose: '🔖 这一次相遇，美得彻骨，美得震颤，美得孤绝，美得惊艳。' },
+  { prose: '🔖 沉默的状态，能让我感觉到呼吸的自由和自己原来就处于的本色位置。' },
+  { prose: '🔖 青春，是一包象征着阳光的向日葵种子，在现在洒下，就会在未来得到收获，那一株株饱含青春的花朵。' },
+  { prose: '🔖 燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?' },
+  { prose: '🔖 毕业了，青春在无形之中离去，我们即将翻开人生的另一页。' },
+  { prose: '🔖 成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合。' },
+  { prose: '🔖 旧时光里的人和事，琐碎而零乱。我的记忆很模糊，好像大部分都成了一种温馨的符号，静静的沉在我心底。' },
+  { prose: '🔖 生活是一部大百科全书，包罗万象;生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。' },
+  { prose: '🔖 毕业了，身边的朋友一个个各奔东西，开始学会自己撑起生命的暖色。' },
+  { prose: '🔖 已经走到尽头的东西，重生也不过是再一次的消亡。就像所有的开始，其实都只是一个写好了的结局。' },
+  { prose: '🔖 下午茶的芬香熏陶着房内的任何一个角落，午后的阳光透过窗帘的间隙洒在木制的桌面上，一份思念随着红茶顺滑至心中。' },
+  { prose: '🔖 这里再不是我们的校园，当我们就此离开我们的青葱岁月。' },
+  { prose: '🔖 很久找你，一直没有找到，微风吹过的时候，我深深的呼吸，才感觉到你也在陪伴着我呼吸。' },
+]
+
+export default {
+  'GET /api/project/prose': (req, res) => {
+    res.json(list[Math.floor(Math.random() * 8)])
+  },
+}
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..16c3e09
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,49 @@
+user nginx;
+worker_processes auto;
+pcre_jit on;
+error_log /dev/stderr;
+
+
+events {
+    worker_connections 2000;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                  '$status $body_bytes_sent "$http_referer" '
+                  '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /dev/stdout main;
+
+    sendfile on;
+    keepalive_timeout 65;
+    gzip on; # 开启gzip压缩
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6; # 压缩级别
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png text/html;
+
+    server {
+        listen 80;
+        server_name _;
+
+        try_files $uri $uri/ /index.html;
+        root /app/www;
+        index index.html;
+
+        location /apple-app-site-association {
+            add_header Content-Type application/json;
+
+        }
+
+        # 配置Nginx以提供预先压缩的.gz文件（如果存在）
+        location ~* \.(js|css|json|txt|html|ico|svg)(\.gz)?$ {
+            gzip_static on; # 优先提供.gz文件
+            expires max;
+            add_header Cache-Control public;
+        }
+    }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a7bb6a2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,123 @@
+{
+  "name": "vue3-vant-mobile",
+  "type": "module",
+  "version": "1.3.0",
+  "packageManager": "pnpm@7.14.0",
+  "description": "template for Vue3 Vant Mobile",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env MOCK_SERVER_PORT=8086 vite --mode=dev",
+    "local": "cross-env MOCK_SERVER_PORT=8086 vite --mode=localhost",
+    "sit": "cross-env MOCK_SERVER_PORT=8086 vite --mode=sit",
+    "uat": "cross-env MOCK_SERVER_PORT=8086 vite --mode=uat",
+    "prod": "cross-env MOCK_SERVER_PORT=8086 vite --mode=prod",
+    "build": "vite build --mode prod",
+    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
+    "build:local": "vue-tsc --noEmit && vite build --mode localhost",
+    "build:sit": "vite build --mode sit",
+    "build:uat": "vite build --mode uat",
+    "preview": "npm run build && vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest",
+    "prepare": "npx husky install"
+  },
+  "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@fingerprintjs/fingerprintjs": "^4.3.0",
+    "@vant/touch-emulator": "^1.4.0",
+    "@vant/use": "^1.6.0",
+    "@vueuse/core": "^10.7.2",
+    "ant-design-vue": "^4.2.1",
+    "axios": "^1.6.2",
+    "better-scroll": "^2.5.1",
+    "callapp-lib": "^3.5.3",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.4.3",
+    "emoji-mart": "^5.5.2",
+    "html2canvas": "^1.4.1",
+    "js-base64": "^3.7.5",
+    "js-pinyin": "^0.2.5",
+    "jsencrypt": "^3.3.2",
+    "jsqr": "^1.4.0",
+    "llqrcode": "^1.0.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
+    "nativeshare": "^2.1.5",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "qrcode-vue3": "^1.6.8",
+    "recorder-core": "^1.3.23122400",
+    "resize-detector": "^0.3.0",
+    "store": "^2.0.12",
+    "vant": "^4.8.1",
+    "vconsole": "^3.15.1",
+    "video.js": "^8.9.0",
+    "vite-plugin-mock-dev-server": "^1.4.3",
+    "vue": "^3.2.37",
+    "vue-clipboard3": "^2.0.0",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5",
+    "vue-router-better-scroller": "^0.0.0",
+    "vue-virtual-scroller": "^2.0.0-beta.8",
+    "vue3-google-login": "^2.0.26",
+    "vue3-lottie": "^3.3.0",
+    "xgplayer": "^3.0.16"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "2.4.6",
+    "@jlongster/sql.js": "^1.6.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.10.5",
+    "@types/nprogress": "^0.2.3",
+    "@types/store": "^2.0.5",
+    "@unocss/preset-rem-to-px": "^0.58.0",
+    "@vitejs/plugin-legacy": "^5.2.0",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "absurd-sql-optimized": "^0.0.1",
+    "autoprefixer": "^10.4.16",
+    "consola": "^3.2.3",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.56.0",
+    "husky": "^8.0.3",
+    "less": "^4.2.0",
+    "mockjs": "^1.1.0",
+    "open-im-sdk-wasm": "^3.5.2",
+    "pako": "^2.1.0",
+    "postcss-mobile-forever": "^4.0.0",
+    "rollup": "^4.9.1",
+    "rollup-plugin-visualizer": "^5.11.0",
+    "rpc-shooter": "^0.0.14",
+    "squel": "^5.13.0",
+    "terser": "^5.26.0",
+    "typescript": "^5.3.3",
+    "unocss": "^0.58.0",
+    "unplugin-auto-import": "^0.17.2",
+    "unplugin-vue-components": "^0.26.0",
+    "uuid": "^9.0.1",
+    "vite": "^5.0.10",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-image-optimizer": "^1.1.8",
+    "vite-plugin-mock-dev-server": "^1.4.3",
+    "vite-plugin-vconsole": "^2.0.1",
+    "vitest": "^1.1.0",
+    "vue-clipboard3": "^2.0.0",
+    "vue-tsc": "^1.8.25",
+    "worker-loader": "^3.0.8",
+    "worker-plugin": "^5.0.1"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "postcss"
+      ],
+      "allowedVersions": {
+        "rollup": "^4.x"
+      }
+    }
+  }
+}
diff --git a/public/api_client.js b/public/api_client.js
new file mode 100644
index 0000000..f2e8095
--- /dev/null
+++ b/public/api_client.js
@@ -0,0 +1,32 @@
+(function(){var aa="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a},ba=function(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");},ca=ba(this),g=function(a,b){if(b)a:{var c=ca;a=a.split(".");for(var d=0;d<a.length-
+1;d++){var e=a[d];if(!(e in c))break a;c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&aa(c,a,{configurable:!0,writable:!0,value:b})}},h=function(a,b,c){if(null==a)throw new TypeError("The 'this' value for String.prototype."+c+" must not be null or undefined");if(b instanceof RegExp)throw new TypeError("First argument to String.prototype."+c+" must not be a regular expression");return a+""};
+g("String.prototype.endsWith",function(a){return a?a:function(b,c){var d=h(this,b,"endsWith");b+="";void 0===c&&(c=d.length);c=Math.max(0,Math.min(c|0,d.length));for(var e=b.length;0<e&&0<c;)if(d[--c]!=b[--e])return!1;return 0>=e}});g("Object.is",function(a){return a?a:function(b,c){return b===c?0!==b||1/b===1/c:b!==b&&c!==c}});
+g("Array.prototype.includes",function(a){return a?a:function(b,c){var d=this;d instanceof String&&(d=String(d));var e=d.length;c=c||0;for(0>c&&(c=Math.max(c+e,0));c<e;c++){var f=d[c];if(f===b||Object.is(f,b))return!0}return!1}});g("String.prototype.includes",function(a){return a?a:function(b,c){return-1!==h(this,b,"includes").indexOf(b,c||0)}});window.gapi=window.gapi||{};window.gapi.A=(new Date).getTime();/*
+
+ Copyright The Closure Library Authors.
+ SPDX-License-Identifier: Apache-2.0
+*/
+var m=this||self,n="closure_uid_"+(1E9*Math.random()>>>0),da=0,r=function(a){return a};var y=function(a){if(x!==x)throw Error("SafeUrl is not meant to be built directly");this.v=a};y.prototype.toString=function(){return this.v.toString()};var x={};new y("about:invalid#zClosurez");new y("about:blank");var A={},B=function(){if(A!==A)throw Error("SafeStyle is not meant to be built directly");this.s=""};B.prototype.toString=function(){return this.s.toString()};new B;var C={},ea=function(){if(C!==C)throw Error("SafeStyleSheet is not meant to be built directly");this.o=""};ea.prototype.toString=function(){return this.o.toString()};new ea;var fa={},ha=function(){var a=m.trustedTypes&&m.trustedTypes.emptyHTML||"";if(fa!==fa)throw Error("SafeHtml is not meant to be built directly");this.l=a};ha.prototype.toString=function(){return this.l.toString()};new ha;/*
+
+ SPDX-License-Identifier: Apache-2.0
+*/
+new y("about:blank");new y("about:invalid#zClosurez");var ia=[],ja=function(a){console.warn("A URL with content '"+a+"' was sanitized away.")};-1===ia.indexOf(ja)&&ia.push(ja);/*
+ gapi.loader.OBJECT_CREATE_TEST_OVERRIDE &&*/
+var F=window,G=document,ka=F.location,la=function(){},ma=/\[native code\]/,H=function(a,b,c){return a[b]=a[b]||c},na=function(a){a=a.sort();for(var b=[],c=void 0,d=0;d<a.length;d++){var e=a[d];e!=c&&b.push(e);c=e}return b},I=function(){var a;if((a=Object.create)&&ma.test(a))a=a(null);else{a={};for(var b in a)a[b]=void 0}return a},J=H(F,"gapi",{});var K={};K=H(F,"___jsl",I());H(K,"I",0);H(K,"hel",10);var oa=function(){var a=ka.href;if(K.dpo)var b=K.h;else{b=K.h;var c=RegExp("([#].*&|[#])jsh=([^&#]*)","g"),d=RegExp("([?#].*&|[?#])jsh=([^&#]*)","g");if(a=a&&(c.exec(a)||d.exec(a)))try{b=decodeURIComponent(a[2])}catch(e){}}return b},pa=function(a){var b=H(K,"PQ",[]);K.PQ=[];var c=b.length;if(0===c)a();else for(var d=0,e=function(){++d===c&&a()},f=0;f<c;f++)b[f](e)},N=function(a){return H(H(K,"H",I()),a,I())};var O=H(K,"perf",I()),qa=H(O,"g",I()),ra=H(O,"i",I());H(O,"r",[]);I();I();var P=function(a,b,c){var d=O.r;"function"===typeof d?d(a,b,c):d.push([a,b,c])},Q=function(a,b,c){b&&0<b.length&&(b=ta(b),c&&0<c.length&&(b+="___"+ta(c)),28<b.length&&(b=b.substr(0,28)+(b.length-28)),c=b,b=H(ra,"_p",I()),H(b,c,I())[a]=(new Date).getTime(),P(a,"_p",c))},ta=function(a){return a.join("__").replace(/\./g,"_").replace(/\-/g,"_").replace(/,/g,"_")};var ua=I(),U=[],V=function(a){throw Error("Bad hint: "+a);};U.push(["jsl",function(a){for(var b in a)if(Object.prototype.hasOwnProperty.call(a,b)){var c=a[b];"object"==typeof c?K[b]=H(K,b,[]).concat(c):H(K,b,c)}if(b=a.u)a=H(K,"us",[]),a.push(b),(b=/^https:(.*)$/.exec(b))&&a.push("http:"+b[1])}]);var va=/^(\/[a-zA-Z0-9_\-]+)+$/,wa=[/\/amp\//,/\/amp$/,/^\/amp$/],xa=/^[a-zA-Z0-9\-_\.,!]+$/,ya=/^gapi\.loaded_[0-9]+$/,za=/^[a-zA-Z0-9,._-]+$/,Da=function(a,b,c,d,e){var f=a.split(";"),k=f.shift(),t=ua[k],l=null;t?l=t(f,b,c,d):V("no hint processor for: "+k);l||V("failed to generate load url");b=l;c=b.match(Aa);(d=b.match(Ba))&&1===d.length&&Ca.test(b)&&c&&1===c.length||V("failed sanity: "+a);try{a="?";if(e&&0<e.length){c=b=0;for(d={};c<e.length;){var p=e[c++];f=void 0;k=typeof p;f="object"==k&&null!=
+p||"function"==k?"o"+(Object.prototype.hasOwnProperty.call(p,n)&&p[n]||(p[n]=++da)):(typeof p).charAt(0)+p;Object.prototype.hasOwnProperty.call(d,f)||(d[f]=!0,e[b++]=p)}e.length=b;l=l+"?le="+e.join(",");a="&"}if(K.rol){var z=K.ol;z&&z.length&&(l=""+l+a+"ol="+z.length)}}catch(R){}return l},Ga=function(a,b,c,d){a=Ea(a);ya.test(c)||V("invalid_callback");b=Fa(b);d=d&&d.length?Fa(d):null;var e=function(f){return encodeURIComponent(f).replace(/%2C/g,",")};return[encodeURIComponent(a.pathPrefix).replace(/%2C/g,
+",").replace(/%2F/g,"/"),"/k=",e(a.version),"/m=",e(b),d?"/exm="+e(d):"","/rt=j/sv=1/d=1/ed=1",a.g?"/am="+e(a.g):"",a.i?"/rs="+e(a.i):"",a.j?"/t="+e(a.j):"","/cb=",e(c)].join("")},Ea=function(a){"/"!==a.charAt(0)&&V("relative path");for(var b=a.substring(1).split("/"),c=[];b.length;){a=b.shift();if(!a.length||0==a.indexOf("."))V("empty/relative directory");else if(0<a.indexOf("=")){b.unshift(a);break}c.push(a)}a={};for(var d=0,e=b.length;d<e;++d){var f=b[d].split("="),k=decodeURIComponent(f[0]),t=
+decodeURIComponent(f[1]);2==f.length&&k&&t&&(a[k]=a[k]||t)}b="/"+c.join("/");va.test(b)||V("invalid_prefix");c=0;for(d=wa.length;c<d;++c)wa[c].test(b)&&V("invalid_prefix");c=W(a,"k",!0);d=W(a,"am");e=W(a,"rs");a=W(a,"t");return{pathPrefix:b,version:c,g:d,i:e,j:a}},Fa=function(a){for(var b=[],c=0,d=a.length;c<d;++c){var e=a[c].replace(/\./g,"_").replace(/-/g,"_");za.test(e)&&b.push(e)}return b.join(",")},W=function(a,b,c){a=a[b];!a&&c&&V("missing: "+b);if(a){if(xa.test(a))return a;V("invalid: "+b)}return null},
+Ca=/^https?:\/\/[a-z0-9_.-]+\.google(rs)?\.com(:\d+)?\/[a-zA-Z0-9_.,!=\-\/]+$/,Ba=/\/cb=/g,Aa=/\/\//g;ua.m=function(a,b,c,d){(a=a[0])||V("missing_hint");return"https://apis.google.com"+Ga(a,b,c,d)};var X=decodeURI("%73cript"),Ha=/^[-+_0-9\/A-Za-z]+={0,2}$/,Ia=function(a,b){for(var c=[],d=0;d<a.length;++d){var e=a[d],f;if(f=e){a:{for(f=0;f<b.length;f++)if(b[f]===e)break a;f=-1}f=0>f}f&&c.push(e)}return c},Ja=function(){var a=K.nonce;return void 0!==a?a&&a===String(a)&&a.match(Ha)?a:K.nonce=null:G.querySelector?(a=G.querySelector("script[nonce]"))?(a=a.nonce||a.getAttribute("nonce")||"",a&&a===String(a)&&a.match(Ha)?K.nonce=a:K.nonce=null):null:null},La=function(a){if("loading"!=G.readyState)Ka(a);
+else{var b=Ja(),c="";null!==b&&(c=' nonce="'+b+'"');a="<"+X+' src="'+encodeURI(a)+'"'+c+"></"+X+">";G.write(Y?Y.createHTML(a):a)}},Ka=function(a){var b=G.createElement(X);b.setAttribute("src",Y?Y.createScriptURL(a):a);a=Ja();null!==a&&b.setAttribute("nonce",a);b.async="true";(a=G.getElementsByTagName(X)[0])?a.parentNode.insertBefore(b,a):(G.head||G.body||G.documentElement).appendChild(b)},Na=function(a,b,c){Ma(function(){var d=b===oa()?H(J,"_",I()):I();d=H(N(b),"_",d);a(d)},c)},Pa=function(a,b){var c=
+b||{};"function"==typeof b&&(c={},c.callback=b);var d=(b=c)&&b._c;if(d)for(var e=0;e<U.length;e++){var f=U[e][0],k=U[e][1];k&&Object.prototype.hasOwnProperty.call(d,f)&&k(d[f],a,b)}b=[];a?b=a.split(":"):c.features&&(b=c.features);if(!(a=c.h)&&(a=oa(),!a))throw Error("Bad hint: !hint");Oa(b||[],c,a)},Oa=function(a,b,c){var d=!!K.glrp;a=na(a)||[];var e=b.callback,f=b.config,k=b.timeout,t=b.ontimeout,l=b.onerror,p=void 0;"function"==typeof l&&(p=l);var z=null,R=!1;if(k&&!t||!k&&t)throw"Timeout requires both the timeout parameter and ontimeout parameter to be set";
+l=H(N(c),"r",[]).sort();var S=H(N(c),"L",[]).sort(),Ta=K.le||[],L=[].concat(l),sa=function(w,D){if(R)return 0;F.clearTimeout(z);S.push.apply(S,q);var E=((J||{}).config||{}).update;E?E(f):f&&H(K,"cu",[]).push(f);if(D){Q("me0",w,L);try{Na(D,c,p)}finally{Q("me1",w,L)}}return 1};0<k&&(z=F.setTimeout(function(){R=!0;t()},k));var q=Ia(a,S);if(q.length){q=Ia(a,l);var u=H(K,"CP",[]),v=u.length;u[v]=function(w){if(!w)return 0;Q("ml1",q,L);var D=function(M){d||(u[v]=null);sa(q,w)&&(d&&(u[v]=null),pa(function(){e&&
+e();M()}))},E=function(){var M=u[v+1];M&&M()};0<v&&u[v-1]?u[v]=function(){D(E)}:D(E)};if(q.length){var T="loaded_"+K.I++;J[T]=function(w){u[v](w);J[T]=null};a=Da(c,q,"gapi."+T,l,Ta);l.push.apply(l,q);Q("ml0",q,L);b.sync||F.___gapisync?La(a):Ka(a)}else u[v](la)}else sa(q)&&e&&e()},Qa;var Ra=null,Z=m.trustedTypes;if(Z&&Z.createPolicy)try{Ra=Z.createPolicy("gapi#gapi",{createHTML:r,createScript:r,createScriptURL:r})}catch(a){m.console&&m.console.error(a.message)}Qa=Ra;var Y=Qa;var Ma=function(a,b){if(K.hee&&0<K.hel)try{return a()}catch(c){b&&b(c),K.hel--,Pa("debug_error",function(){try{window.___jsl.hefn(c)}catch(d){throw c;}})}else try{return a()}catch(c){throw b&&b(c),c;}};var Sa=J.load;Sa&&H(K,"ol",[]).push(Sa);J.load=function(a,b){return Ma(function(){return Pa(a,b)})};U.unshift(["url",function(a,b,c){!a||b&&""!==b||!a.endsWith(".js")||(a=a.substring(0,a.length-3),b=a.lastIndexOf("/")+1,b>=a.length||(a=a.substr(b).split(":").filter(function(d){return!["api","platform"].includes(d)}),c.features=a))}]);qa.bs0=window.gapi._bs||(new Date).getTime();P("bs0");qa.bs1=(new Date).getTime();P("bs1");delete window.gapi._bs;window.gapi.load("",{callback:window["gapi_onload"],_c:{url:"https://apis.google.com/js/api:client.js",jsl:{ci:{"oauth-flow":{authUrl:"https://accounts.google.com/o/oauth2/auth",proxyUrl:"https://accounts.google.com/o/oauth2/postmessageRelay",disableOpt:!0,idpIframeUrl:"https://accounts.google.com/o/oauth2/iframe",usegapi:!1},debug:{reportExceptionRate:1,forceIm:!1,rethrowException:!0,host:"https://apis.google.com"},enableMultilogin:!0,"googleapis.config":{auth:{useFirstPartyAuthV2:!0},root:"https://content.googleapis.com","root-1p":"https://clients6.google.com"},inline:{css:1},
+disableRealtimeCallback:!1,drive_share:{skipInitCommand:!0},csi:{rate:.01},client:{cors:!1},signInDeprecation:{rate:0},include_granted_scopes:!0,llang:"zh",iframes:{youtube:{params:{location:["search","hash"]},url:":socialhost:/:session_prefix:_/widget/render/youtube?usegapi=1",methods:["scroll","openwindow"]},ytsubscribe:{url:"https://www.youtube.com/subscribe_embed?usegapi=1"},plus_circle:{params:{url:""},url:":socialhost:/:session_prefix::se:_/widget/plus/circle?usegapi=1"},plus_share:{params:{url:""},
+url:":socialhost:/:session_prefix::se:_/+1/sharebutton?plusShare=true&usegapi=1"},rbr_s:{params:{url:""},url:":socialhost:/:session_prefix::se:_/widget/render/recobarsimplescroller"},":source:":"3p",playemm:{url:"https://play.google.com/work/embedded/search?usegapi=1&usegapi=1"},savetoandroidpay:{url:"https://pay.google.com/gp/v/widget/save"},blogger:{params:{location:["search","hash"]},url:":socialhost:/:session_prefix:_/widget/render/blogger?usegapi=1",methods:["scroll","openwindow"]},evwidget:{params:{url:""},
+url:":socialhost:/:session_prefix:_/events/widget?usegapi=1"},partnersbadge:{url:"https://www.gstatic.com/partners/badge/templates/badge.html?usegapi=1"},dataconnector:{url:"https://dataconnector.corp.google.com/:session_prefix:ui/widgetview?usegapi=1"},surveyoptin:{url:"https://www.google.com/shopping/customerreviews/optin?usegapi=1"},":socialhost:":"https://apis.google.com",shortlists:{url:""},hangout:{url:"https://talkgadget.google.com/:session_prefix:talkgadget/_/widget"},plus_followers:{params:{url:""},
+url:":socialhost:/_/im/_/widget/render/plus/followers?usegapi=1"},post:{params:{url:""},url:":socialhost:/:session_prefix::im_prefix:_/widget/render/post?usegapi=1"},signin:{params:{url:""},url:":socialhost:/:session_prefix:_/widget/render/signin?usegapi=1",methods:["onauth"]},rbr_i:{params:{url:""},url:":socialhost:/:session_prefix::se:_/widget/render/recobarinvitation"},share:{url:":socialhost:/:session_prefix::im_prefix:_/widget/render/share?usegapi=1"},plusone:{params:{count:"",size:"",url:""},
+url:":socialhost:/:session_prefix::se:_/+1/fastbutton?usegapi=1"},comments:{params:{location:["search","hash"]},url:":socialhost:/:session_prefix:_/widget/render/comments?usegapi=1",methods:["scroll","openwindow"]},":im_socialhost:":"https://plus.googleapis.com",backdrop:{url:"https://clients3.google.com/cast/chromecast/home/widget/backdrop?usegapi=1"},visibility:{params:{url:""},url:":socialhost:/:session_prefix:_/widget/render/visibility?usegapi=1"},autocomplete:{params:{url:""},url:":socialhost:/:session_prefix:_/widget/render/autocomplete"},
+":signuphost:":"https://plus.google.com",ratingbadge:{url:"https://www.google.com/shopping/customerreviews/badge?usegapi=1"},appcirclepicker:{url:":socialhost:/:session_prefix:_/widget/render/appcirclepicker"},follow:{url:":socialhost:/:session_prefix:_/widget/render/follow?usegapi=1"},community:{url:":ctx_socialhost:/:session_prefix::im_prefix:_/widget/render/community?usegapi=1"},sharetoclassroom:{url:"https://classroom.google.com/sharewidget?usegapi=1"},ytshare:{params:{url:""},url:":socialhost:/:session_prefix:_/widget/render/ytshare?usegapi=1"},
+plus:{url:":socialhost:/:session_prefix:_/widget/render/badge?usegapi=1"},family_creation:{params:{url:""},url:"https://families.google.com/webcreation?usegapi=1&usegapi=1"},commentcount:{url:":socialhost:/:session_prefix:_/widget/render/commentcount?usegapi=1"},configurator:{url:":socialhost:/:session_prefix:_/plusbuttonconfigurator?usegapi=1"},zoomableimage:{url:"https://ssl.gstatic.com/microscope/embed/"},appfinder:{url:"https://workspace.google.com/:session_prefix:marketplace/appfinder?usegapi=1"},savetowallet:{url:"https://pay.google.com/gp/v/widget/save"},
+person:{url:":socialhost:/:session_prefix:_/widget/render/person?usegapi=1"},savetodrive:{url:"https://drive.google.com/savetodrivebutton?usegapi=1",methods:["save"]},page:{url:":socialhost:/:session_prefix:_/widget/render/page?usegapi=1"},card:{url:":socialhost:/:session_prefix:_/hovercard/card"}}},h:"m;/_/scs/abc-static/_/js/k=gapi.lb.zh_CN.8PFwol1E9Vw.O/d=1/rs=AHpOoo-d42IG9Jt_xb6i4iVVzCZXFdBmaQ/m=__features__",u:"https://apis.google.com/js/api:client.js",hee:!0,dpo:!1,le:["scs"],glrp:false},platform:"backdrop blogger comments commentcount community donation family_creation follow hangout health page partnersbadge person playemm playreview plus plusone post ratingbadge savetoandroidpay savetodrive savetowallet sharetoclassroom shortlists signin2 surveyoptin visibility youtube ytsubscribe zoomableimage".split(" "),
+annotation:["interactivepost","recobar","signin2","autocomplete"]}});}).call(this);
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..8ed3b2d
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/openIM.wasm.gzip b/public/openIM.wasm.gzip
new file mode 100644
index 0000000..69616be
Binary files /dev/null and b/public/openIM.wasm.gzip differ
diff --git a/public/sql-wasm.wasm b/public/sql-wasm.wasm
new file mode 100644
index 0000000..18b392e
Binary files /dev/null and b/public/sql-wasm.wasm differ
diff --git a/public/wasm_exec.js b/public/wasm_exec.js
new file mode 100644
index 0000000..e9d82c8
--- /dev/null
+++ b/public/wasm_exec.js
@@ -0,0 +1,652 @@
+// Copyright 2018 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+// @ts-nocheck
+
+;(() => {
+  // Map multiple JavaScript environments to a single common API,
+  // preferring web standards over Node.js API.
+  //
+  // Environments considered:
+  // - Browsers
+  // - Node.js
+  // - Electron
+  // - Parcel
+  // - Webpack
+
+  if (typeof window !== 'undefined') {
+    window.global = window
+  } else if (typeof self !== 'undefined') {
+    self.global = self
+  } else {
+    throw new Error('cannot export Go (neither global, window nor self is defined)')
+  }
+
+  const enosys = () => {
+    const err = new Error('not implemented')
+    err.code = 'ENOSYS'
+    return err
+  }
+
+  if (!global.fs) {
+    let outputBuf = ''
+    global.fs = {
+      constants: {
+        O_WRONLY: -1,
+        O_RDWR: -1,
+        O_CREAT: -1,
+        O_TRUNC: -1,
+        O_APPEND: -1,
+        O_EXCL: -1
+      }, // unused
+      writeSync(fd, buf) {
+        outputBuf += decoder.decode(buf)
+        const nl = outputBuf.lastIndexOf('\n')
+        if (nl != -1) {
+          // console.log(outputBuf.substr(0, nl))
+          outputBuf = outputBuf.substr(nl + 1)
+        }
+        return buf.length
+      },
+      write(fd, buf, offset, length, position, callback) {
+        if (offset !== 0 || length !== buf.length || position !== null) {
+          callback(enosys())
+          return
+        }
+        const n = this.writeSync(fd, buf)
+        callback(null, n)
+      },
+      chmod(path, mode, callback) {
+        callback(enosys())
+      },
+      chown(path, uid, gid, callback) {
+        callback(enosys())
+      },
+      close(fd, callback) {
+        callback(enosys())
+      },
+      fchmod(fd, mode, callback) {
+        callback(enosys())
+      },
+      fchown(fd, uid, gid, callback) {
+        callback(enosys())
+      },
+      fstat(fd, callback) {
+        callback(enosys())
+      },
+      fsync(fd, callback) {
+        callback(null)
+      },
+      ftruncate(fd, length, callback) {
+        callback(enosys())
+      },
+      lchown(path, uid, gid, callback) {
+        callback(enosys())
+      },
+      link(path, link, callback) {
+        callback(enosys())
+      },
+      lstat(path, callback) {
+        callback(enosys())
+      },
+      mkdir(path, perm, callback) {
+        callback(enosys())
+      },
+      open(path, flags, mode, callback) {
+        callback(enosys())
+      },
+      read(fd, buffer, offset, length, position, callback) {
+        callback(enosys())
+      },
+      readdir(path, callback) {
+        callback(enosys())
+      },
+      readlink(path, callback) {
+        callback(enosys())
+      },
+      rename(from, to, callback) {
+        callback(enosys())
+      },
+      rmdir(path, callback) {
+        callback(enosys())
+      },
+      stat(path, callback) {
+        callback(enosys())
+      },
+      symlink(path, link, callback) {
+        callback(enosys())
+      },
+      truncate(path, length, callback) {
+        callback(enosys())
+      },
+      unlink(path, callback) {
+        callback(enosys())
+      },
+      utimes(path, atime, mtime, callback) {
+        callback(enosys())
+      }
+    }
+  }
+
+  if (!global.process) {
+    global.process = {
+      getuid() {
+        return -1
+      },
+      getgid() {
+        return -1
+      },
+      geteuid() {
+        return -1
+      },
+      getegid() {
+        return -1
+      },
+      getgroups() {
+        throw enosys()
+      },
+      pid: -1,
+      ppid: -1,
+      umask() {
+        throw enosys()
+      },
+      cwd() {
+        throw enosys()
+      },
+      chdir() {
+        throw enosys()
+      }
+    }
+  }
+
+  if (!global.crypto) {
+    throw new Error('global.crypto is not available, polyfill required (getRandomValues only)')
+  }
+
+  if (!global.performance) {
+    global.performance = {
+      now() {
+        const [sec, nsec] = process.hrtime()
+        return sec * 1000 + nsec / 1000000
+      }
+    }
+  }
+
+  if (!global.TextEncoder) {
+    throw new Error('global.TextEncoder is not available, polyfill required')
+  }
+
+  if (!global.TextDecoder) {
+    throw new Error('global.TextDecoder is not available, polyfill required')
+  }
+
+  // End of polyfills for common API.
+
+  const encoder = new TextEncoder('utf-8')
+  const decoder = new TextDecoder('utf-8')
+
+  global.Go = class {
+    constructor() {
+      this.argv = ['js']
+      this.env = {}
+      this.exit = (code) => {
+        if (code !== 0) {
+          console.warn('exit code:', code)
+        }
+      }
+      this._exitPromise = new Promise((resolve) => {
+        this._resolveExitPromise = resolve
+      })
+      this._pendingEvent = null
+      this._scheduledTimeouts = new Map()
+      this._nextCallbackTimeoutID = 1
+
+      const setInt64 = (addr, v) => {
+        this.mem.setUint32(addr + 0, v, true)
+        this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true)
+      }
+
+      const getInt64 = (addr) => {
+        const low = this.mem.getUint32(addr + 0, true)
+        const high = this.mem.getInt32(addr + 4, true)
+        return low + high * 4294967296
+      }
+
+      const loadValue = (addr) => {
+        const f = this.mem.getFloat64(addr, true)
+        if (f === 0) {
+          return undefined
+        }
+        if (!isNaN(f)) {
+          return f
+        }
+
+        const id = this.mem.getUint32(addr, true)
+        return this._values[id]
+      }
+
+      const storeValue = (addr, v) => {
+        const nanHead = 0x7ff80000
+
+        if (typeof v === 'number' && v !== 0) {
+          if (isNaN(v)) {
+            this.mem.setUint32(addr + 4, nanHead, true)
+            this.mem.setUint32(addr, 0, true)
+            return
+          }
+          this.mem.setFloat64(addr, v, true)
+          return
+        }
+
+        if (v === undefined) {
+          this.mem.setFloat64(addr, 0, true)
+          return
+        }
+
+        let id = this._ids.get(v)
+        if (id === undefined) {
+          id = this._idPool.pop()
+          if (id === undefined) {
+            id = this._values.length
+          }
+          this._values[id] = v
+          this._goRefCounts[id] = 0
+          this._ids.set(v, id)
+        }
+        this._goRefCounts[id]++
+        let typeFlag = 0
+        switch (typeof v) {
+          case 'object':
+            if (v !== null) {
+              typeFlag = 1
+            }
+            break
+          case 'string':
+            typeFlag = 2
+            break
+          case 'symbol':
+            typeFlag = 3
+            break
+          case 'function':
+            typeFlag = 4
+            break
+        }
+        this.mem.setUint32(addr + 4, nanHead | typeFlag, true)
+        this.mem.setUint32(addr, id, true)
+      }
+
+      const loadSlice = (addr) => {
+        const array = getInt64(addr + 0)
+        const len = getInt64(addr + 8)
+        return new Uint8Array(this._inst.exports.mem.buffer, array, len)
+      }
+
+      const loadSliceOfValues = (addr) => {
+        const array = getInt64(addr + 0)
+        const len = getInt64(addr + 8)
+        const a = new Array(len)
+        for (let i = 0; i < len; i++) {
+          a[i] = loadValue(array + i * 8)
+        }
+        return a
+      }
+
+      const loadString = (addr) => {
+        const saddr = getInt64(addr + 0)
+        const len = getInt64(addr + 8)
+        return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len))
+      }
+
+      const timeOrigin = Date.now() - performance.now()
+      this.importObject = {
+        go: {
+          // Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
+          // may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
+          // function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
+          // This changes the SP, thus we have to update the SP used by the imported function.
+
+          // func wasmExit(code int32)
+          'runtime.wasmExit': (sp) => {
+            sp >>>= 0
+            const code = this.mem.getInt32(sp + 8, true)
+            this.exited = true
+            delete this._inst
+            delete this._values
+            delete this._goRefCounts
+            delete this._ids
+            delete this._idPool
+            this.exit(code)
+          },
+
+          // func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
+          'runtime.wasmWrite': (sp) => {
+            sp >>>= 0
+            const fd = getInt64(sp + 8)
+            const p = getInt64(sp + 16)
+            const n = this.mem.getInt32(sp + 24, true)
+            fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n))
+          },
+
+          // func resetMemoryDataView()
+          'runtime.resetMemoryDataView': (sp) => {
+            sp >>>= 0
+            this.mem = new DataView(this._inst.exports.mem.buffer)
+          },
+
+          // func nanotime1() int64
+          'runtime.nanotime1': (sp) => {
+            sp >>>= 0
+            setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000)
+          },
+
+          // func walltime() (sec int64, nsec int32)
+          'runtime.walltime': (sp) => {
+            sp >>>= 0
+            const msec = new Date().getTime()
+            setInt64(sp + 8, msec / 1000)
+            this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true)
+          },
+
+          // func scheduleTimeoutEvent(delay int64) int32
+          'runtime.scheduleTimeoutEvent': (sp) => {
+            sp >>>= 0
+            const id = this._nextCallbackTimeoutID
+            this._nextCallbackTimeoutID++
+            this._scheduledTimeouts.set(
+              id,
+              setTimeout(
+                () => {
+                  this._resume()
+                  while (this._scheduledTimeouts.has(id)) {
+                    // for some reason Go failed to register the timeout event, log and try again
+                    // (temporary workaround for https://github.com/golang/go/issues/28975)
+                    console.warn('scheduleTimeoutEvent: missed timeout event')
+                    this._resume()
+                  }
+                },
+                getInt64(sp + 8) + 1 // setTimeout has been seen to fire up to 1 millisecond early
+              )
+            )
+            this.mem.setInt32(sp + 16, id, true)
+          },
+
+          // func clearTimeoutEvent(id int32)
+          'runtime.clearTimeoutEvent': (sp) => {
+            sp >>>= 0
+            const id = this.mem.getInt32(sp + 8, true)
+            clearTimeout(this._scheduledTimeouts.get(id))
+            this._scheduledTimeouts.delete(id)
+          },
+
+          // func getRandomData(r []byte)
+          'runtime.getRandomData': (sp) => {
+            sp >>>= 0
+            crypto.getRandomValues(loadSlice(sp + 8))
+          },
+
+          // func finalizeRef(v ref)
+          'syscall/js.finalizeRef': (sp) => {
+            sp >>>= 0
+            const id = this.mem.getUint32(sp + 8, true)
+            this._goRefCounts[id]--
+            if (this._goRefCounts[id] === 0) {
+              const v = this._values[id]
+              this._values[id] = null
+              this._ids.delete(v)
+              this._idPool.push(id)
+            }
+          },
+
+          // func stringVal(value string) ref
+          'syscall/js.stringVal': (sp) => {
+            sp >>>= 0
+            storeValue(sp + 24, loadString(sp + 8))
+          },
+
+          // func valueGet(v ref, p string) ref
+          'syscall/js.valueGet': (sp) => {
+            sp >>>= 0
+            const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16))
+            sp = this._inst.exports.getsp() >>> 0 // see comment above
+            storeValue(sp + 32, result)
+          },
+
+          // func valueSet(v ref, p string, x ref)
+          'syscall/js.valueSet': (sp) => {
+            sp >>>= 0
+            Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32))
+          },
+
+          // func valueDelete(v ref, p string)
+          'syscall/js.valueDelete': (sp) => {
+            sp >>>= 0
+            Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16))
+          },
+
+          // func valueIndex(v ref, i int) ref
+          'syscall/js.valueIndex': (sp) => {
+            sp >>>= 0
+            storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)))
+          },
+
+          // valueSetIndex(v ref, i int, x ref)
+          'syscall/js.valueSetIndex': (sp) => {
+            sp >>>= 0
+            Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24))
+          },
+
+          // func valueCall(v ref, m string, args []ref) (ref, bool)
+          'syscall/js.valueCall': (sp) => {
+            sp >>>= 0
+            try {
+              const v = loadValue(sp + 8)
+              const m = Reflect.get(v, loadString(sp + 16))
+              const args = loadSliceOfValues(sp + 32)
+              const result = Reflect.apply(m, v, args)
+              sp = this._inst.exports.getsp() >>> 0 // see comment above
+              storeValue(sp + 56, result)
+              this.mem.setUint8(sp + 64, 1)
+            } catch (err) {
+              sp = this._inst.exports.getsp() >>> 0 // see comment above
+              storeValue(sp + 56, err)
+              this.mem.setUint8(sp + 64, 0)
+            }
+          },
+
+          // func valueInvoke(v ref, args []ref) (ref, bool)
+          'syscall/js.valueInvoke': (sp) => {
+            sp >>>= 0
+            try {
+              const v = loadValue(sp + 8)
+              const args = loadSliceOfValues(sp + 16)
+              const result = Reflect.apply(v, undefined, args)
+              sp = this._inst.exports.getsp() >>> 0 // see comment above
+              storeValue(sp + 40, result)
+              this.mem.setUint8(sp + 48, 1)
+            } catch (err) {
+              sp = this._inst.exports.getsp() >>> 0 // see comment above
+              storeValue(sp + 40, err)
+              this.mem.setUint8(sp + 48, 0)
+            }
+          },
+
+          // func valueNew(v ref, args []ref) (ref, bool)
+          'syscall/js.valueNew': (sp) => {
+            sp >>>= 0
+            try {
+              const v = loadValue(sp + 8)
+              const args = loadSliceOfValues(sp + 16)
+              const result = Reflect.construct(v, args)
+              sp = this._inst.exports.getsp() >>> 0 // see comment above
+              storeValue(sp + 40, result)
+              this.mem.setUint8(sp + 48, 1)
+            } catch (err) {
+              sp = this._inst.exports.getsp() >>> 0 // see comment above
+              storeValue(sp + 40, err)
+              this.mem.setUint8(sp + 48, 0)
+            }
+          },
+
+          // func valueLength(v ref) int
+          'syscall/js.valueLength': (sp) => {
+            sp >>>= 0
+            setInt64(sp + 16, parseInt(loadValue(sp + 8).length))
+          },
+
+          // valuePrepareString(v ref) (ref, int)
+          'syscall/js.valuePrepareString': (sp) => {
+            sp >>>= 0
+            const str = encoder.encode(String(loadValue(sp + 8)))
+            storeValue(sp + 16, str)
+            setInt64(sp + 24, str.length)
+          },
+
+          // valueLoadString(v ref, b []byte)
+          'syscall/js.valueLoadString': (sp) => {
+            sp >>>= 0
+            const str = loadValue(sp + 8)
+            loadSlice(sp + 16).set(str)
+          },
+
+          // func valueInstanceOf(v ref, t ref) bool
+          'syscall/js.valueInstanceOf': (sp) => {
+            sp >>>= 0
+            this.mem.setUint8(sp + 24, loadValue(sp + 8) instanceof loadValue(sp + 16) ? 1 : 0)
+          },
+
+          // func copyBytesToGo(dst []byte, src ref) (int, bool)
+          'syscall/js.copyBytesToGo': (sp) => {
+            sp >>>= 0
+            const dst = loadSlice(sp + 8)
+            const src = loadValue(sp + 32)
+            if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
+              this.mem.setUint8(sp + 48, 0)
+              return
+            }
+            const toCopy = src.subarray(0, dst.length)
+            dst.set(toCopy)
+            setInt64(sp + 40, toCopy.length)
+            this.mem.setUint8(sp + 48, 1)
+          },
+
+          // func copyBytesToJS(dst ref, src []byte) (int, bool)
+          'syscall/js.copyBytesToJS': (sp) => {
+            sp >>>= 0
+            const dst = loadValue(sp + 8)
+            const src = loadSlice(sp + 16)
+            if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
+              this.mem.setUint8(sp + 48, 0)
+              return
+            }
+            const toCopy = src.subarray(0, dst.length)
+            dst.set(toCopy)
+            setInt64(sp + 40, toCopy.length)
+            this.mem.setUint8(sp + 48, 1)
+          },
+
+          debug: (value) => {
+            console.log(value)
+          }
+        }
+      }
+    }
+
+    async run(instance) {
+      if (!(instance instanceof WebAssembly.Instance)) {
+        throw new Error('Go.run: WebAssembly.Instance expected')
+      }
+      this._inst = instance
+      this.mem = new DataView(this._inst.exports.mem.buffer)
+      this._values = [
+        // JS values that Go currently has references to, indexed by reference id
+        NaN,
+        0,
+        null,
+        true,
+        false,
+        global,
+        this
+      ]
+      this._goRefCounts = new Array(this._values.length).fill(Infinity) // number of references that Go has to a JS value, indexed by reference id
+      this._ids = new Map([
+        // mapping from JS values to reference ids
+        [0, 1],
+        [null, 2],
+        [true, 3],
+        [false, 4],
+        [global, 5],
+        [this, 6]
+      ])
+      this._idPool = [] // unused ids that have been garbage collected
+      this.exited = false // whether the Go program has exited
+
+      // Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
+      let offset = 4096
+
+      const strPtr = (str) => {
+        const ptr = offset
+        const bytes = encoder.encode(str + '\0')
+        new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes)
+        offset += bytes.length
+        if (offset % 8 !== 0) {
+          offset += 8 - (offset % 8)
+        }
+        return ptr
+      }
+
+      const argc = this.argv.length
+
+      const argvPtrs = []
+      this.argv.forEach((arg) => {
+        argvPtrs.push(strPtr(arg))
+      })
+      argvPtrs.push(0)
+
+      const keys = Object.keys(this.env).sort()
+      keys.forEach((key) => {
+        argvPtrs.push(strPtr(`${key}=${this.env[key]}`))
+      })
+      argvPtrs.push(0)
+
+      const argv = offset
+      argvPtrs.forEach((ptr) => {
+        this.mem.setUint32(offset, ptr, true)
+        this.mem.setUint32(offset + 4, 0, true)
+        offset += 8
+      })
+
+      // The linker guarantees global data starts from at least wasmMinDataAddr.
+      // Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
+      const wasmMinDataAddr = 4096 + 8192
+      if (offset >= wasmMinDataAddr) {
+        throw new Error('total length of command line and environment variables exceeds limit')
+      }
+
+      this._inst.exports.run(argc, argv)
+      if (this.exited) {
+        this._resolveExitPromise()
+      }
+      await this._exitPromise
+    }
+
+    _resume() {
+      if (this.exited) {
+        throw new Error('Go program has already exited')
+      }
+      this._inst.exports.resume()
+      if (this.exited) {
+        this._resolveExitPromise()
+      }
+    }
+
+    _makeFuncWrapper(id) {
+      const go = this
+      return function () {
+        const event = { id: id, this: this, args: arguments }
+        go._pendingEvent = event
+        go._resume()
+        return event.result
+      }
+    }
+  }
+})()
diff --git a/public/webPushSdk.produce.min.2.1.6.js b/public/webPushSdk.produce.min.2.1.6.js
new file mode 100644
index 0000000..9d65da0
--- /dev/null
+++ b/public/webPushSdk.produce.min.2.1.6.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.MTpushInterface=e():t.MTpushInterface=e()}(self,(()=>(()=>{var t={452:function(t,e,i){var n;t.exports=(n=i(249),i(269),i(214),i(888),i(109),function(){var t=n,e=t.lib.BlockCipher,i=t.algo,s=[],o=[],r=[],a=[],c=[],u=[],d=[],h=[],l=[],f=[];!function(){for(var t=[],e=0;e<256;e++)t[e]=e<128?e<<1:e<<1^283;var i=0,n=0;for(e=0;e<256;e++){var p=n^n<<1^n<<2^n<<3^n<<4;p=p>>>8^255&p^99,s[i]=p,o[p]=i;var m=t[i],g=t[m],b=t[g],w=257*t[p]^16843008*p;r[i]=w<<24|w>>>8,a[i]=w<<16|w>>>16,c[i]=w<<8|w>>>24,u[i]=w,w=16843009*b^65537*g^257*m^16843008*i,d[p]=w<<24|w>>>8,h[p]=w<<16|w>>>16,l[p]=w<<8|w>>>24,f[p]=w,i?(i=m^t[t[t[b^m]]],n^=t[t[n]]):i=n=1}}();var p=[0,1,2,4,8,16,32,64,128,27,54],m=i.AES=e.extend({_doReset:function(){if(!this._nRounds||this._keyPriorReset!==this._key){for(var t=this._keyPriorReset=this._key,e=t.words,i=t.sigBytes/4,n=4*((this._nRounds=i+6)+1),o=this._keySchedule=[],r=0;r<n;r++)r<i?o[r]=e[r]:(u=o[r-1],r%i?i>6&&r%i==4&&(u=s[u>>>24]<<24|s[u>>>16&255]<<16|s[u>>>8&255]<<8|s[255&u]):(u=s[(u=u<<8|u>>>24)>>>24]<<24|s[u>>>16&255]<<16|s[u>>>8&255]<<8|s[255&u],u^=p[r/i|0]<<24),o[r]=o[r-i]^u);for(var a=this._invKeySchedule=[],c=0;c<n;c++){if(r=n-c,c%4)var u=o[r];else u=o[r-4];a[c]=c<4||r<=4?u:d[s[u>>>24]]^h[s[u>>>16&255]]^l[s[u>>>8&255]]^f[s[255&u]]}}},encryptBlock:function(t,e){this._doCryptBlock(t,e,this._keySchedule,r,a,c,u,s)},decryptBlock:function(t,e){var i=t[e+1];t[e+1]=t[e+3],t[e+3]=i,this._doCryptBlock(t,e,this._invKeySchedule,d,h,l,f,o),i=t[e+1],t[e+1]=t[e+3],t[e+3]=i},_doCryptBlock:function(t,e,i,n,s,o,r,a){for(var c=this._nRounds,u=t[e]^i[0],d=t[e+1]^i[1],h=t[e+2]^i[2],l=t[e+3]^i[3],f=4,p=1;p<c;p++){var m=n[u>>>24]^s[d>>>16&255]^o[h>>>8&255]^r[255&l]^i[f++],g=n[d>>>24]^s[h>>>16&255]^o[l>>>8&255]^r[255&u]^i[f++],b=n[h>>>24]^s[l>>>16&255]^o[u>>>8&255]^r[255&d]^i[f++],w=n[l>>>24]^s[u>>>16&255]^o[d>>>8&255]^r[255&h]^i[f++];u=m,d=g,h=b,l=w}m=(a[u>>>24]<<24|a[d>>>16&255]<<16|a[h>>>8&255]<<8|a[255&l])^i[f++],g=(a[d>>>24]<<24|a[h>>>16&255]<<16|a[l>>>8&255]<<8|a[255&u])^i[f++],b=(a[h>>>24]<<24|a[l>>>16&255]<<16|a[u>>>8&255]<<8|a[255&d])^i[f++],w=(a[l>>>24]<<24|a[u>>>16&255]<<16|a[d>>>8&255]<<8|a[255&h])^i[f++],t[e]=m,t[e+1]=g,t[e+2]=b,t[e+3]=w},keySize:8});t.AES=e._createHelper(m)}(),n.AES)},109:function(t,e,i){var n;t.exports=(n=i(249),i(888),void(n.lib.Cipher||function(t){var e=n,i=e.lib,s=i.Base,o=i.WordArray,r=i.BufferedBlockAlgorithm,a=e.enc,c=(a.Utf8,a.Base64),u=e.algo.EvpKDF,d=i.Cipher=r.extend({cfg:s.extend(),createEncryptor:function(t,e){return this.create(this._ENC_XFORM_MODE,t,e)},createDecryptor:function(t,e){return this.create(this._DEC_XFORM_MODE,t,e)},init:function(t,e,i){this.cfg=this.cfg.extend(i),this._xformMode=t,this._key=e,this.reset()},reset:function(){r.reset.call(this),this._doReset()},process:function(t){return this._append(t),this._process()},finalize:function(t){return t&&this._append(t),this._doFinalize()},keySize:4,ivSize:4,_ENC_XFORM_MODE:1,_DEC_XFORM_MODE:2,_createHelper:function(){function t(t){return"string"==typeof t?v:b}return function(e){return{encrypt:function(i,n,s){return t(n).encrypt(e,i,n,s)},decrypt:function(i,n,s){return t(n).decrypt(e,i,n,s)}}}}()}),h=(i.StreamCipher=d.extend({_doFinalize:function(){return this._process(!0)},blockSize:1}),e.mode={}),l=i.BlockCipherMode=s.extend({createEncryptor:function(t,e){return this.Encryptor.create(t,e)},createDecryptor:function(t,e){return this.Decryptor.create(t,e)},init:function(t,e){this._cipher=t,this._iv=e}}),f=h.CBC=function(){var e=l.extend();function i(e,i,n){var s,o=this._iv;o?(s=o,this._iv=t):s=this._prevBlock;for(var r=0;r<n;r++)e[i+r]^=s[r]}return e.Encryptor=e.extend({processBlock:function(t,e){var n=this._cipher,s=n.blockSize;i.call(this,t,e,s),n.encryptBlock(t,e),this._prevBlock=t.slice(e,e+s)}}),e.Decryptor=e.extend({processBlock:function(t,e){var n=this._cipher,s=n.blockSize,o=t.slice(e,e+s);n.decryptBlock(t,e),i.call(this,t,e,s),this._prevBlock=o}}),e}(),p=(e.pad={}).Pkcs7={pad:function(t,e){for(var i=4*e,n=i-t.sigBytes%i,s=n<<24|n<<16|n<<8|n,r=[],a=0;a<n;a+=4)r.push(s);var c=o.create(r,n);t.concat(c)},unpad:function(t){var e=255&t.words[t.sigBytes-1>>>2];t.sigBytes-=e}},m=(i.BlockCipher=d.extend({cfg:d.cfg.extend({mode:f,padding:p}),reset:function(){var t;d.reset.call(this);var e=this.cfg,i=e.iv,n=e.mode;this._xformMode==this._ENC_XFORM_MODE?t=n.createEncryptor:(t=n.createDecryptor,this._minBufferSize=1),this._mode&&this._mode.__creator==t?this._mode.init(this,i&&i.words):(this._mode=t.call(n,this,i&&i.words),this._mode.__creator=t)},_doProcessBlock:function(t,e){this._mode.processBlock(t,e)},_doFinalize:function(){var t,e=this.cfg.padding;return this._xformMode==this._ENC_XFORM_MODE?(e.pad(this._data,this.blockSize),t=this._process(!0)):(t=this._process(!0),e.unpad(t)),t},blockSize:4}),i.CipherParams=s.extend({init:function(t){this.mixIn(t)},toString:function(t){return(t||this.formatter).stringify(this)}})),g=(e.format={}).OpenSSL={stringify:function(t){var e=t.ciphertext,i=t.salt;return(i?o.create([1398893684,1701076831]).concat(i).concat(e):e).toString(c)},parse:function(t){var e,i=c.parse(t),n=i.words;return 1398893684==n[0]&&1701076831==n[1]&&(e=o.create(n.slice(2,4)),n.splice(0,4),i.sigBytes-=16),m.create({ciphertext:i,salt:e})}},b=i.SerializableCipher=s.extend({cfg:s.extend({format:g}),encrypt:function(t,e,i,n){n=this.cfg.extend(n);var s=t.createEncryptor(i,n),o=s.finalize(e),r=s.cfg;return m.create({ciphertext:o,key:i,iv:r.iv,algorithm:t,mode:r.mode,padding:r.padding,blockSize:t.blockSize,formatter:n.format})},decrypt:function(t,e,i,n){return n=this.cfg.extend(n),e=this._parse(e,n.format),t.createDecryptor(i,n).finalize(e.ciphertext)},_parse:function(t,e){return"string"==typeof t?e.parse(t,this):t}}),w=(e.kdf={}).OpenSSL={execute:function(t,e,i,n){n||(n=o.random(8));var s=u.create({keySize:e+i}).compute(t,n),r=o.create(s.words.slice(e),4*i);return s.sigBytes=4*e,m.create({key:s,iv:r,salt:n})}},v=i.PasswordBasedCipher=b.extend({cfg:b.cfg.extend({kdf:w}),encrypt:function(t,e,i,n){var s=(n=this.cfg.extend(n)).kdf.execute(i,t.keySize,t.ivSize);n.iv=s.iv;var o=b.encrypt.call(this,t,e,s.key,n);return o.mixIn(s),o},decrypt:function(t,e,i,n){n=this.cfg.extend(n),e=this._parse(e,n.format);var s=n.kdf.execute(i,t.keySize,t.ivSize,e.salt);return n.iv=s.iv,b.decrypt.call(this,t,e,s.key,n)}})}()))},249:function(t,e,i){var n;t.exports=(n=n||function(t,e){var n;if("undefined"!=typeof window&&window.crypto&&(n=window.crypto),"undefined"!=typeof self&&self.crypto&&(n=self.crypto),"undefined"!=typeof globalThis&&globalThis.crypto&&(n=globalThis.crypto),!n&&"undefined"!=typeof window&&window.msCrypto&&(n=window.msCrypto),!n&&void 0!==i.g&&i.g.crypto&&(n=i.g.crypto),!n)try{n=i(480)}catch(t){}var s=function(){if(n){if("function"==typeof n.getRandomValues)try{return n.getRandomValues(new Uint32Array(1))[0]}catch(t){}if("function"==typeof n.randomBytes)try{return n.randomBytes(4).readInt32LE()}catch(t){}}throw new Error("Native crypto module could not be used to get secure random number.")},o=Object.create||function(){function t(){}return function(e){var i;return t.prototype=e,i=new t,t.prototype=null,i}}(),r={},a=r.lib={},c=a.Base={extend:function(t){var e=o(this);return t&&e.mixIn(t),e.hasOwnProperty("init")&&this.init!==e.init||(e.init=function(){e.$super.init.apply(this,arguments)}),e.init.prototype=e,e.$super=this,e},create:function(){var t=this.extend();return t.init.apply(t,arguments),t},init:function(){},mixIn:function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e]);t.hasOwnProperty("toString")&&(this.toString=t.toString)},clone:function(){return this.init.prototype.extend(this)}},u=a.WordArray=c.extend({init:function(t,i){t=this.words=t||[],this.sigBytes=i!=e?i:4*t.length},toString:function(t){return(t||h).stringify(this)},concat:function(t){var e=this.words,i=t.words,n=this.sigBytes,s=t.sigBytes;if(this.clamp(),n%4)for(var o=0;o<s;o++){var r=i[o>>>2]>>>24-o%4*8&255;e[n+o>>>2]|=r<<24-(n+o)%4*8}else for(var a=0;a<s;a+=4)e[n+a>>>2]=i[a>>>2];return this.sigBytes+=s,this},clamp:function(){var e=this.words,i=this.sigBytes;e[i>>>2]&=4294967295<<32-i%4*8,e.length=t.ceil(i/4)},clone:function(){var t=c.clone.call(this);return t.words=this.words.slice(0),t},random:function(t){for(var e=[],i=0;i<t;i+=4)e.push(s());return new u.init(e,t)}}),d=r.enc={},h=d.Hex={stringify:function(t){for(var e=t.words,i=t.sigBytes,n=[],s=0;s<i;s++){var o=e[s>>>2]>>>24-s%4*8&255;n.push((o>>>4).toString(16)),n.push((15&o).toString(16))}return n.join("")},parse:function(t){for(var e=t.length,i=[],n=0;n<e;n+=2)i[n>>>3]|=parseInt(t.substr(n,2),16)<<24-n%8*4;return new u.init(i,e/2)}},l=d.Latin1={stringify:function(t){for(var e=t.words,i=t.sigBytes,n=[],s=0;s<i;s++){var o=e[s>>>2]>>>24-s%4*8&255;n.push(String.fromCharCode(o))}return n.join("")},parse:function(t){for(var e=t.length,i=[],n=0;n<e;n++)i[n>>>2]|=(255&t.charCodeAt(n))<<24-n%4*8;return new u.init(i,e)}},f=d.Utf8={stringify:function(t){try{return decodeURIComponent(escape(l.stringify(t)))}catch(t){throw new Error("Malformed UTF-8 data")}},parse:function(t){return l.parse(unescape(encodeURIComponent(t)))}},p=a.BufferedBlockAlgorithm=c.extend({reset:function(){this._data=new u.init,this._nDataBytes=0},_append:function(t){"string"==typeof t&&(t=f.parse(t)),this._data.concat(t),this._nDataBytes+=t.sigBytes},_process:function(e){var i,n=this._data,s=n.words,o=n.sigBytes,r=this.blockSize,a=o/(4*r),c=(a=e?t.ceil(a):t.max((0|a)-this._minBufferSize,0))*r,d=t.min(4*c,o);if(c){for(var h=0;h<c;h+=r)this._doProcessBlock(s,h);i=s.splice(0,c),n.sigBytes-=d}return new u.init(i,d)},clone:function(){var t=c.clone.call(this);return t._data=this._data.clone(),t},_minBufferSize:0}),m=(a.Hasher=p.extend({cfg:c.extend(),init:function(t){this.cfg=this.cfg.extend(t),this.reset()},reset:function(){p.reset.call(this),this._doReset()},update:function(t){return this._append(t),this._process(),this},finalize:function(t){return t&&this._append(t),this._doFinalize()},blockSize:16,_createHelper:function(t){return function(e,i){return new t.init(i).finalize(e)}},_createHmacHelper:function(t){return function(e,i){return new m.HMAC.init(t,i).finalize(e)}}}),r.algo={});return r}(Math),n)},269:function(t,e,i){var n;t.exports=(n=i(249),function(){var t=n,e=t.lib.WordArray;function i(t,i,n){for(var s=[],o=0,r=0;r<i;r++)if(r%4){var a=n[t.charCodeAt(r-1)]<<r%4*2|n[t.charCodeAt(r)]>>>6-r%4*2;s[o>>>2]|=a<<24-o%4*8,o++}return e.create(s,o)}t.enc.Base64={stringify:function(t){var e=t.words,i=t.sigBytes,n=this._map;t.clamp();for(var s=[],o=0;o<i;o+=3)for(var r=(e[o>>>2]>>>24-o%4*8&255)<<16|(e[o+1>>>2]>>>24-(o+1)%4*8&255)<<8|e[o+2>>>2]>>>24-(o+2)%4*8&255,a=0;a<4&&o+.75*a<i;a++)s.push(n.charAt(r>>>6*(3-a)&63));var c=n.charAt(64);if(c)for(;s.length%4;)s.push(c);return s.join("")},parse:function(t){var e=t.length,n=this._map,s=this._reverseMap;if(!s){s=this._reverseMap=[];for(var o=0;o<n.length;o++)s[n.charCodeAt(o)]=o}var r=n.charAt(64);if(r){var a=t.indexOf(r);-1!==a&&(e=a)}return i(t,e,s)},_map:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="}}(),n.enc.Base64)},743:function(t,e,i){var n;t.exports=(n=i(249),n.enc.Utf8)},888:function(t,e,i){var n,s,o,r,a,c,u,d;t.exports=(d=i(249),i(783),i(824),s=(n=d).lib,o=s.Base,r=s.WordArray,a=n.algo,c=a.MD5,u=a.EvpKDF=o.extend({cfg:o.extend({keySize:4,hasher:c,iterations:1}),init:function(t){this.cfg=this.cfg.extend(t)},compute:function(t,e){for(var i,n=this.cfg,s=n.hasher.create(),o=r.create(),a=o.words,c=n.keySize,u=n.iterations;a.length<c;){i&&s.update(i),i=s.update(t).finalize(e),s.reset();for(var d=1;d<u;d++)i=s.finalize(i),s.reset();o.concat(i)}return o.sigBytes=4*c,o}}),n.EvpKDF=function(t,e,i){return u.create(i).compute(t,e)},d.EvpKDF)},824:function(t,e,i){var n,s,o,r;t.exports=(n=i(249),o=(s=n).lib.Base,r=s.enc.Utf8,void(s.algo.HMAC=o.extend({init:function(t,e){t=this._hasher=new t.init,"string"==typeof e&&(e=r.parse(e));var i=t.blockSize,n=4*i;e.sigBytes>n&&(e=t.finalize(e)),e.clamp();for(var s=this._oKey=e.clone(),o=this._iKey=e.clone(),a=s.words,c=o.words,u=0;u<i;u++)a[u]^=1549556828,c[u]^=909522486;s.sigBytes=o.sigBytes=n,this.reset()},reset:function(){var t=this._hasher;t.reset(),t.update(this._iKey)},update:function(t){return this._hasher.update(t),this},finalize:function(t){var e=this._hasher,i=e.finalize(t);return e.reset(),e.finalize(this._oKey.clone().concat(i))}})))},214:function(t,e,i){var n;t.exports=(n=i(249),function(t){var e=n,i=e.lib,s=i.WordArray,o=i.Hasher,r=e.algo,a=[];!function(){for(var e=0;e<64;e++)a[e]=4294967296*t.abs(t.sin(e+1))|0}();var c=r.MD5=o.extend({_doReset:function(){this._hash=new s.init([1732584193,4023233417,2562383102,271733878])},_doProcessBlock:function(t,e){for(var i=0;i<16;i++){var n=e+i,s=t[n];t[n]=16711935&(s<<8|s>>>24)|4278255360&(s<<24|s>>>8)}var o=this._hash.words,r=t[e+0],c=t[e+1],f=t[e+2],p=t[e+3],m=t[e+4],g=t[e+5],b=t[e+6],w=t[e+7],v=t[e+8],_=t[e+9],y=t[e+10],C=t[e+11],S=t[e+12],k=t[e+13],I=t[e+14],T=t[e+15],E=o[0],x=o[1],N=o[2],A=o[3];E=u(E,x,N,A,r,7,a[0]),A=u(A,E,x,N,c,12,a[1]),N=u(N,A,E,x,f,17,a[2]),x=u(x,N,A,E,p,22,a[3]),E=u(E,x,N,A,m,7,a[4]),A=u(A,E,x,N,g,12,a[5]),N=u(N,A,E,x,b,17,a[6]),x=u(x,N,A,E,w,22,a[7]),E=u(E,x,N,A,v,7,a[8]),A=u(A,E,x,N,_,12,a[9]),N=u(N,A,E,x,y,17,a[10]),x=u(x,N,A,E,C,22,a[11]),E=u(E,x,N,A,S,7,a[12]),A=u(A,E,x,N,k,12,a[13]),N=u(N,A,E,x,I,17,a[14]),E=d(E,x=u(x,N,A,E,T,22,a[15]),N,A,c,5,a[16]),A=d(A,E,x,N,b,9,a[17]),N=d(N,A,E,x,C,14,a[18]),x=d(x,N,A,E,r,20,a[19]),E=d(E,x,N,A,g,5,a[20]),A=d(A,E,x,N,y,9,a[21]),N=d(N,A,E,x,T,14,a[22]),x=d(x,N,A,E,m,20,a[23]),E=d(E,x,N,A,_,5,a[24]),A=d(A,E,x,N,I,9,a[25]),N=d(N,A,E,x,p,14,a[26]),x=d(x,N,A,E,v,20,a[27]),E=d(E,x,N,A,k,5,a[28]),A=d(A,E,x,N,f,9,a[29]),N=d(N,A,E,x,w,14,a[30]),E=h(E,x=d(x,N,A,E,S,20,a[31]),N,A,g,4,a[32]),A=h(A,E,x,N,v,11,a[33]),N=h(N,A,E,x,C,16,a[34]),x=h(x,N,A,E,I,23,a[35]),E=h(E,x,N,A,c,4,a[36]),A=h(A,E,x,N,m,11,a[37]),N=h(N,A,E,x,w,16,a[38]),x=h(x,N,A,E,y,23,a[39]),E=h(E,x,N,A,k,4,a[40]),A=h(A,E,x,N,r,11,a[41]),N=h(N,A,E,x,p,16,a[42]),x=h(x,N,A,E,b,23,a[43]),E=h(E,x,N,A,_,4,a[44]),A=h(A,E,x,N,S,11,a[45]),N=h(N,A,E,x,T,16,a[46]),E=l(E,x=h(x,N,A,E,f,23,a[47]),N,A,r,6,a[48]),A=l(A,E,x,N,w,10,a[49]),N=l(N,A,E,x,I,15,a[50]),x=l(x,N,A,E,g,21,a[51]),E=l(E,x,N,A,S,6,a[52]),A=l(A,E,x,N,p,10,a[53]),N=l(N,A,E,x,y,15,a[54]),x=l(x,N,A,E,c,21,a[55]),E=l(E,x,N,A,v,6,a[56]),A=l(A,E,x,N,T,10,a[57]),N=l(N,A,E,x,b,15,a[58]),x=l(x,N,A,E,k,21,a[59]),E=l(E,x,N,A,m,6,a[60]),A=l(A,E,x,N,C,10,a[61]),N=l(N,A,E,x,f,15,a[62]),x=l(x,N,A,E,_,21,a[63]),o[0]=o[0]+E|0,o[1]=o[1]+x|0,o[2]=o[2]+N|0,o[3]=o[3]+A|0},_doFinalize:function(){var e=this._data,i=e.words,n=8*this._nDataBytes,s=8*e.sigBytes;i[s>>>5]|=128<<24-s%32;var o=t.floor(n/4294967296),r=n;i[15+(s+64>>>9<<4)]=16711935&(o<<8|o>>>24)|4278255360&(o<<24|o>>>8),i[14+(s+64>>>9<<4)]=16711935&(r<<8|r>>>24)|4278255360&(r<<24|r>>>8),e.sigBytes=4*(i.length+1),this._process();for(var a=this._hash,c=a.words,u=0;u<4;u++){var d=c[u];c[u]=16711935&(d<<8|d>>>24)|4278255360&(d<<24|d>>>8)}return a},clone:function(){var t=o.clone.call(this);return t._hash=this._hash.clone(),t}});function u(t,e,i,n,s,o,r){var a=t+(e&i|~e&n)+s+r;return(a<<o|a>>>32-o)+e}function d(t,e,i,n,s,o,r){var a=t+(e&n|i&~n)+s+r;return(a<<o|a>>>32-o)+e}function h(t,e,i,n,s,o,r){var a=t+(e^i^n)+s+r;return(a<<o|a>>>32-o)+e}function l(t,e,i,n,s,o,r){var a=t+(i^(e|~n))+s+r;return(a<<o|a>>>32-o)+e}e.MD5=o._createHelper(c),e.HmacMD5=o._createHmacHelper(c)}(Math),n.MD5)},783:function(t,e,i){var n,s,o,r,a,c,u,d;t.exports=(d=i(249),s=(n=d).lib,o=s.WordArray,r=s.Hasher,a=n.algo,c=[],u=a.SHA1=r.extend({_doReset:function(){this._hash=new o.init([1732584193,4023233417,2562383102,271733878,3285377520])},_doProcessBlock:function(t,e){for(var i=this._hash.words,n=i[0],s=i[1],o=i[2],r=i[3],a=i[4],u=0;u<80;u++){if(u<16)c[u]=0|t[e+u];else{var d=c[u-3]^c[u-8]^c[u-14]^c[u-16];c[u]=d<<1|d>>>31}var h=(n<<5|n>>>27)+a+c[u];h+=u<20?1518500249+(s&o|~s&r):u<40?1859775393+(s^o^r):u<60?(s&o|s&r|o&r)-1894007588:(s^o^r)-899497514,a=r,r=o,o=s<<30|s>>>2,s=n,n=h}i[0]=i[0]+n|0,i[1]=i[1]+s|0,i[2]=i[2]+o|0,i[3]=i[3]+r|0,i[4]=i[4]+a|0},_doFinalize:function(){var t=this._data,e=t.words,i=8*this._nDataBytes,n=8*t.sigBytes;return e[n>>>5]|=128<<24-n%32,e[14+(n+64>>>9<<4)]=Math.floor(i/4294967296),e[15+(n+64>>>9<<4)]=i,t.sigBytes=4*e.length,this._process(),this._hash},clone:function(){var t=r.clone.call(this);return t._hash=this._hash.clone(),t}}),n.SHA1=r._createHelper(u),n.HmacSHA1=r._createHmacHelper(u),d.SHA1)},238:function(t,e,i){var n;!function(s,o){"use strict";var r="function",a="undefined",c="object",u="string",d="model",h="name",l="type",f="vendor",p="version",m="architecture",g="console",b="mobile",w="tablet",v="smarttv",_="wearable",y="embedded",C="Amazon",S="Apple",k="ASUS",I="BlackBerry",T="Firefox",E="Google",x="Huawei",N="LG",A="Microsoft",O="Motorola",M="Opera",D="Samsung",R="Sharp",B="Sony",P="Xiaomi",U="Zebra",z="Facebook",F=function(t){for(var e={},i=0;i<t.length;i++)e[t[i].toUpperCase()]=t[i];return e},W=function(t,e){return typeof t===u&&-1!==H(e).indexOf(H(t))},H=function(t){return t.toLowerCase()},j=function(t,e){if(typeof t===u)return t=t.replace(/^\s\s*/,"").replace(/\s\s*$/,""),typeof e===a?t:t.substring(0,350)},L=function(t,e){for(var i,n,s,a,u,d,h=0;h<e.length&&!u;){var l=e[h],f=e[h+1];for(i=n=0;i<l.length&&!u;)if(u=l[i++].exec(t))for(s=0;s<f.length;s++)d=u[++n],typeof(a=f[s])===c&&a.length>0?2===a.length?typeof a[1]==r?this[a[0]]=a[1].call(this,d):this[a[0]]=a[1]:3===a.length?typeof a[1]!==r||a[1].exec&&a[1].test?this[a[0]]=d?d.replace(a[1],a[2]):o:this[a[0]]=d?a[1].call(this,d,a[2]):o:4===a.length&&(this[a[0]]=d?a[3].call(this,d.replace(a[1],a[2])):o):this[a]=d||o;h+=2}},V=function(t,e){for(var i in e)if(typeof e[i]===c&&e[i].length>0){for(var n=0;n<e[i].length;n++)if(W(e[i][n],t))return"?"===i?o:i}else if(W(e[i],t))return"?"===i?o:i;return t},G={ME:"4.90","NT 3.11":"NT3.51","NT 4.0":"NT4.0",2e3:"NT 5.0",XP:["NT 5.1","NT 5.2"],Vista:"NT 6.0",7:"NT 6.1",8:"NT 6.2",8.1:"NT 6.3",10:["NT 6.4","NT 10.0"],RT:"ARM"},q={browser:[[/\b(?:crmo|crios)\/([\w\.]+)/i],[p,[h,"Chrome"]],[/edg(?:e|ios|a)?\/([\w\.]+)/i],[p,[h,"Edge"]],[/(opera mini)\/([-\w\.]+)/i,/(opera [mobiletab]{3,6})\b.+version\/([-\w\.]+)/i,/(opera)(?:.+version\/|[\/ ]+)([\w\.]+)/i],[h,p],[/opios[\/ ]+([\w\.]+)/i],[p,[h,"Opera Mini"]],[/\bopr\/([\w\.]+)/i],[p,[h,M]],[/(kindle)\/([\w\.]+)/i,/(lunascape|maxthon|netfront|jasmine|blazer)[\/ ]?([\w\.]*)/i,/(avant |iemobile|slim)(?:browser)?[\/ ]?([\w\.]*)/i,/(ba?idubrowser)[\/ ]?([\w\.]+)/i,/(?:ms|\()(ie) ([\w\.]+)/i,/(flock|rockmelt|midori|epiphany|silk|skyfire|ovibrowser|bolt|iron|vivaldi|iridium|phantomjs|bowser|quark|qupzilla|falkon|rekonq|puffin|brave|whale|qqbrowserlite|qq|duckduckgo)\/([-\w\.]+)/i,/(weibo)__([\d\.]+)/i],[h,p],[/(?:\buc? ?browser|(?:juc.+)ucweb)[\/ ]?([\w\.]+)/i],[p,[h,"UCBrowser"]],[/microm.+\bqbcore\/([\w\.]+)/i,/\bqbcore\/([\w\.]+).+microm/i],[p,[h,"WeChat(Win) Desktop"]],[/micromessenger\/([\w\.]+)/i],[p,[h,"WeChat"]],[/konqueror\/([\w\.]+)/i],[p,[h,"Konqueror"]],[/trident.+rv[: ]([\w\.]{1,9})\b.+like gecko/i],[p,[h,"IE"]],[/yabrowser\/([\w\.]+)/i],[p,[h,"Yandex"]],[/(avast|avg)\/([\w\.]+)/i],[[h,/(.+)/,"$1 Secure Browser"],p],[/\bfocus\/([\w\.]+)/i],[p,[h,"Firefox Focus"]],[/\bopt\/([\w\.]+)/i],[p,[h,"Opera Touch"]],[/coc_coc\w+\/([\w\.]+)/i],[p,[h,"Coc Coc"]],[/dolfin\/([\w\.]+)/i],[p,[h,"Dolphin"]],[/coast\/([\w\.]+)/i],[p,[h,"Opera Coast"]],[/miuibrowser\/([\w\.]+)/i],[p,[h,"MIUI Browser"]],[/fxios\/([-\w\.]+)/i],[p,[h,T]],[/\bqihu|(qi?ho?o?|360)browser/i],[[h,"360 Browser"]],[/(oculus|samsung|sailfish|huawei)browser\/([\w\.]+)/i],[[h,/(.+)/,"$1 Browser"],p],[/(comodo_dragon)\/([\w\.]+)/i],[[h,/_/g," "],p],[/(electron)\/([\w\.]+) safari/i,/(tesla)(?: qtcarbrowser|\/(20\d\d\.[-\w\.]+))/i,/m?(qqbrowser|baiduboxapp|2345Explorer)[\/ ]?([\w\.]+)/i],[h,p],[/(metasr)[\/ ]?([\w\.]+)/i,/(lbbrowser)/i,/\[(linkedin)app\]/i],[h],[/((?:fban\/fbios|fb_iab\/fb4a)(?!.+fbav)|;fbav\/([\w\.]+);)/i],[[h,z],p],[/safari (line)\/([\w\.]+)/i,/\b(line)\/([\w\.]+)\/iab/i,/(chromium|instagram)[\/ ]([-\w\.]+)/i],[h,p],[/\bgsa\/([\w\.]+) .*safari\//i],[p,[h,"GSA"]],[/headlesschrome(?:\/([\w\.]+)| )/i],[p,[h,"Chrome Headless"]],[/ wv\).+(chrome)\/([\w\.]+)/i],[[h,"Chrome WebView"],p],[/droid.+ version\/([\w\.]+)\b.+(?:mobile safari|safari)/i],[p,[h,"Android Browser"]],[/(chrome|omniweb|arora|[tizenoka]{5} ?browser)\/v?([\w\.]+)/i],[h,p],[/version\/([\w\.\,]+) .*mobile\/\w+ (safari)/i],[p,[h,"Mobile Safari"]],[/version\/([\w(\.|\,)]+) .*(mobile ?safari|safari)/i],[p,h],[/webkit.+?(mobile ?safari|safari)(\/[\w\.]+)/i],[h,[p,V,{"1.0":"/8",1.2:"/1",1.3:"/3","2.0":"/412","2.0.2":"/416","2.0.3":"/417","2.0.4":"/419","?":"/"}]],[/(webkit|khtml)\/([\w\.]+)/i],[h,p],[/(navigator|netscape\d?)\/([-\w\.]+)/i],[[h,"Netscape"],p],[/mobile vr; rv:([\w\.]+)\).+firefox/i],[p,[h,"Firefox Reality"]],[/ekiohf.+(flow)\/([\w\.]+)/i,/(swiftfox)/i,/(icedragon|iceweasel|camino|chimera|fennec|maemo browser|minimo|conkeror|klar)[\/ ]?([\w\.\+]+)/i,/(seamonkey|k-meleon|icecat|iceape|firebird|phoenix|palemoon|basilisk|waterfox)\/([-\w\.]+)$/i,/(firefox)\/([\w\.]+)/i,/(mozilla)\/([\w\.]+) .+rv\:.+gecko\/\d+/i,/(polaris|lynx|dillo|icab|doris|amaya|w3m|netsurf|sleipnir|obigo|mosaic|(?:go|ice|up)[\. ]?browser)[-\/ ]?v?([\w\.]+)/i,/(links) \(([\w\.]+)/i],[h,p]],cpu:[[/(?:(amd|x(?:(?:86|64)[-_])?|wow|win)64)[;\)]/i],[[m,"amd64"]],[/(ia32(?=;))/i],[[m,H]],[/((?:i[346]|x)86)[;\)]/i],[[m,"ia32"]],[/\b(aarch64|arm(v?8e?l?|_?64))\b/i],[[m,"arm64"]],[/\b(arm(?:v[67])?ht?n?[fl]p?)\b/i],[[m,"armhf"]],[/windows (ce|mobile); ppc;/i],[[m,"arm"]],[/((?:ppc|powerpc)(?:64)?)(?: mac|;|\))/i],[[m,/ower/,"",H]],[/(sun4\w)[;\)]/i],[[m,"sparc"]],[/((?:avr32|ia64(?=;))|68k(?=\))|\barm(?=v(?:[1-7]|[5-7]1)l?|;|eabi)|(?=atmel )avr|(?:irix|mips|sparc)(?:64)?\b|pa-risc)/i],[[m,H]]],device:[[/\b(sch-i[89]0\d|shw-m380s|sm-[ptx]\w{2,4}|gt-[pn]\d{2,4}|sgh-t8[56]9|nexus 10)/i],[d,[f,D],[l,w]],[/\b((?:s[cgp]h|gt|sm)-\w+|galaxy nexus)/i,/samsung[- ]([-\w]+)/i,/sec-(sgh\w+)/i],[d,[f,D],[l,b]],[/\((ip(?:hone|od)[\w ]*);/i],[d,[f,S],[l,b]],[/\((ipad);[-\w\),; ]+apple/i,/applecoremedia\/[\w\.]+ \((ipad)/i,/\b(ipad)\d\d?,\d\d?[;\]].+ios/i],[d,[f,S],[l,w]],[/\b((?:ag[rs][23]?|bah2?|sht?|btv)-a?[lw]\d{2})\b(?!.+d\/s)/i],[d,[f,x],[l,w]],[/(?:huawei|honor)([-\w ]+)[;\)]/i,/\b(nexus 6p|\w{2,4}e?-[atu]?[ln][\dx][012359c][adn]?)\b(?!.+d\/s)/i],[d,[f,x],[l,b]],[/\b(poco[\w ]+)(?: bui|\))/i,/\b; (\w+) build\/hm\1/i,/\b(hm[-_ ]?note?[_ ]?(?:\d\w)?) bui/i,/\b(redmi[\-_ ]?(?:note|k)?[\w_ ]+)(?: bui|\))/i,/\b(mi[-_ ]?(?:a\d|one|one[_ ]plus|note lte|max|cc)?[_ ]?(?:\d?\w?)[_ ]?(?:plus|se|lite)?)(?: bui|\))/i],[[d,/_/g," "],[f,P],[l,b]],[/\b(mi[-_ ]?(?:pad)(?:[\w_ ]+))(?: bui|\))/i],[[d,/_/g," "],[f,P],[l,w]],[/; (\w+) bui.+ oppo/i,/\b(cph[12]\d{3}|p(?:af|c[al]|d\w|e[ar])[mt]\d0|x9007|a101op)\b/i],[d,[f,"OPPO"],[l,b]],[/vivo (\w+)(?: bui|\))/i,/\b(v[12]\d{3}\w?[at])(?: bui|;)/i],[d,[f,"Vivo"],[l,b]],[/\b(rmx[12]\d{3})(?: bui|;|\))/i],[d,[f,"Realme"],[l,b]],[/\b(milestone|droid(?:[2-4x]| (?:bionic|x2|pro|razr))?:?( 4g)?)\b[\w ]+build\//i,/\bmot(?:orola)?[- ](\w*)/i,/((?:moto[\w\(\) ]+|xt\d{3,4}|nexus 6)(?= bui|\)))/i],[d,[f,O],[l,b]],[/\b(mz60\d|xoom[2 ]{0,2}) build\//i],[d,[f,O],[l,w]],[/((?=lg)?[vl]k\-?\d{3}) bui| 3\.[-\w; ]{10}lg?-([06cv9]{3,4})/i],[d,[f,N],[l,w]],[/(lm(?:-?f100[nv]?|-[\w\.]+)(?= bui|\))|nexus [45])/i,/\blg[-e;\/ ]+((?!browser|netcast|android tv)\w+)/i,/\blg-?([\d\w]+) bui/i],[d,[f,N],[l,b]],[/(ideatab[-\w ]+)/i,/lenovo ?(s[56]000[-\w]+|tab(?:[\w ]+)|yt[-\d\w]{6}|tb[-\d\w]{6})/i],[d,[f,"Lenovo"],[l,w]],[/(?:maemo|nokia).*(n900|lumia \d+)/i,/nokia[-_ ]?([-\w\.]*)/i],[[d,/_/g," "],[f,"Nokia"],[l,b]],[/(pixel c)\b/i],[d,[f,E],[l,w]],[/droid.+; (pixel[\daxl ]{0,6})(?: bui|\))/i],[d,[f,E],[l,b]],[/droid.+ (a?\d[0-2]{2}so|[c-g]\d{4}|so[-gl]\w+|xq-a\w[4-7][12])(?= bui|\).+chrome\/(?![1-6]{0,1}\d\.))/i],[d,[f,B],[l,b]],[/sony tablet [ps]/i,/\b(?:sony)?sgp\w+(?: bui|\))/i],[[d,"Xperia Tablet"],[f,B],[l,w]],[/ (kb2005|in20[12]5|be20[12][59])\b/i,/(?:one)?(?:plus)? (a\d0\d\d)(?: b|\))/i],[d,[f,"OnePlus"],[l,b]],[/(alexa)webm/i,/(kf[a-z]{2}wi)( bui|\))/i,/(kf[a-z]+)( bui|\)).+silk\//i],[d,[f,C],[l,w]],[/((?:sd|kf)[0349hijorstuw]+)( bui|\)).+silk\//i],[[d,/(.+)/g,"Fire Phone $1"],[f,C],[l,b]],[/(playbook);[-\w\),; ]+(rim)/i],[d,f,[l,w]],[/\b((?:bb[a-f]|st[hv])100-\d)/i,/\(bb10; (\w+)/i],[d,[f,I],[l,b]],[/(?:\b|asus_)(transfo[prime ]{4,10} \w+|eeepc|slider \w+|nexus 7|padfone|p00[cj])/i],[d,[f,k],[l,w]],[/ (z[bes]6[027][012][km][ls]|zenfone \d\w?)\b/i],[d,[f,k],[l,b]],[/(nexus 9)/i],[d,[f,"HTC"],[l,w]],[/(htc)[-;_ ]{1,2}([\w ]+(?=\)| bui)|\w+)/i,/(zte)[- ]([\w ]+?)(?: bui|\/|\))/i,/(alcatel|geeksphone|nexian|panasonic|sony(?!-bra))[-_ ]?([-\w]*)/i],[f,[d,/_/g," "],[l,b]],[/droid.+; ([ab][1-7]-?[0178a]\d\d?)/i],[d,[f,"Acer"],[l,w]],[/droid.+; (m[1-5] note) bui/i,/\bmz-([-\w]{2,})/i],[d,[f,"Meizu"],[l,b]],[/\b(sh-?[altvz]?\d\d[a-ekm]?)/i],[d,[f,R],[l,b]],[/(blackberry|benq|palm(?=\-)|sonyericsson|acer|asus|dell|meizu|motorola|polytron)[-_ ]?([-\w]*)/i,/(hp) ([\w ]+\w)/i,/(asus)-?(\w+)/i,/(microsoft); (lumia[\w ]+)/i,/(lenovo)[-_ ]?([-\w]+)/i,/(jolla)/i,/(oppo) ?([\w ]+) bui/i],[f,d,[l,b]],[/(archos) (gamepad2?)/i,/(hp).+(touchpad(?!.+tablet)|tablet)/i,/(kindle)\/([\w\.]+)/i,/(nook)[\w ]+build\/(\w+)/i,/(dell) (strea[kpr\d ]*[\dko])/i,/(le[- ]+pan)[- ]+(\w{1,9}) bui/i,/(trinity)[- ]*(t\d{3}) bui/i,/(gigaset)[- ]+(q\w{1,9}) bui/i,/(vodafone) ([\w ]+)(?:\)| bui)/i],[f,d,[l,w]],[/(surface duo)/i],[d,[f,A],[l,w]],[/droid [\d\.]+; (fp\du?)(?: b|\))/i],[d,[f,"Fairphone"],[l,b]],[/(u304aa)/i],[d,[f,"AT&T"],[l,b]],[/\bsie-(\w*)/i],[d,[f,"Siemens"],[l,b]],[/\b(rct\w+) b/i],[d,[f,"RCA"],[l,w]],[/\b(venue[\d ]{2,7}) b/i],[d,[f,"Dell"],[l,w]],[/\b(q(?:mv|ta)\w+) b/i],[d,[f,"Verizon"],[l,w]],[/\b(?:barnes[& ]+noble |bn[rt])([\w\+ ]*) b/i],[d,[f,"Barnes & Noble"],[l,w]],[/\b(tm\d{3}\w+) b/i],[d,[f,"NuVision"],[l,w]],[/\b(k88) b/i],[d,[f,"ZTE"],[l,w]],[/\b(nx\d{3}j) b/i],[d,[f,"ZTE"],[l,b]],[/\b(gen\d{3}) b.+49h/i],[d,[f,"Swiss"],[l,b]],[/\b(zur\d{3}) b/i],[d,[f,"Swiss"],[l,w]],[/\b((zeki)?tb.*\b) b/i],[d,[f,"Zeki"],[l,w]],[/\b([yr]\d{2}) b/i,/\b(dragon[- ]+touch |dt)(\w{5}) b/i],[[f,"Dragon Touch"],d,[l,w]],[/\b(ns-?\w{0,9}) b/i],[d,[f,"Insignia"],[l,w]],[/\b((nxa|next)-?\w{0,9}) b/i],[d,[f,"NextBook"],[l,w]],[/\b(xtreme\_)?(v(1[045]|2[015]|[3469]0|7[05])) b/i],[[f,"Voice"],d,[l,b]],[/\b(lvtel\-)?(v1[12]) b/i],[[f,"LvTel"],d,[l,b]],[/\b(ph-1) /i],[d,[f,"Essential"],[l,b]],[/\b(v(100md|700na|7011|917g).*\b) b/i],[d,[f,"Envizen"],[l,w]],[/\b(trio[-\w\. ]+) b/i],[d,[f,"MachSpeed"],[l,w]],[/\btu_(1491) b/i],[d,[f,"Rotor"],[l,w]],[/(shield[\w ]+) b/i],[d,[f,"Nvidia"],[l,w]],[/(sprint) (\w+)/i],[f,d,[l,b]],[/(kin\.[onetw]{3})/i],[[d,/\./g," "],[f,A],[l,b]],[/droid.+; (cc6666?|et5[16]|mc[239][23]x?|vc8[03]x?)\)/i],[d,[f,U],[l,w]],[/droid.+; (ec30|ps20|tc[2-8]\d[kx])\)/i],[d,[f,U],[l,b]],[/(ouya)/i,/(nintendo) ([wids3utch]+)/i],[f,d,[l,g]],[/droid.+; (shield) bui/i],[d,[f,"Nvidia"],[l,g]],[/(playstation [345portablevi]+)/i],[d,[f,B],[l,g]],[/\b(xbox(?: one)?(?!; xbox))[\); ]/i],[d,[f,A],[l,g]],[/smart-tv.+(samsung)/i],[f,[l,v]],[/hbbtv.+maple;(\d+)/i],[[d,/^/,"SmartTV"],[f,D],[l,v]],[/(nux; netcast.+smarttv|lg (netcast\.tv-201\d|android tv))/i],[[f,N],[l,v]],[/(apple) ?tv/i],[f,[d,"Apple TV"],[l,v]],[/crkey/i],[[d,"Chromecast"],[f,E],[l,v]],[/droid.+aft(\w)( bui|\))/i],[d,[f,C],[l,v]],[/\(dtv[\);].+(aquos)/i,/(aquos-tv[\w ]+)\)/i],[d,[f,R],[l,v]],[/(bravia[\w ]+)( bui|\))/i],[d,[f,B],[l,v]],[/(mitv-\w{5}) bui/i],[d,[f,P],[l,v]],[/\b(roku)[\dx]*[\)\/]((?:dvp-)?[\d\.]*)/i,/hbbtv\/\d+\.\d+\.\d+ +\([\w ]*; *(\w[^;]*);([^;]*)/i],[[f,j],[d,j],[l,v]],[/\b(android tv|smart[- ]?tv|opera tv|tv; rv:)\b/i],[[l,v]],[/((pebble))app/i],[f,d,[l,_]],[/droid.+; (glass) \d/i],[d,[f,E],[l,_]],[/droid.+; (wt63?0{2,3})\)/i],[d,[f,U],[l,_]],[/(quest( 2)?)/i],[d,[f,z],[l,_]],[/(tesla)(?: qtcarbrowser|\/[-\w\.]+)/i],[f,[l,y]],[/droid .+?; ([^;]+?)(?: bui|\) applew).+? mobile safari/i],[d,[l,b]],[/droid .+?; ([^;]+?)(?: bui|\) applew).+?(?! mobile) safari/i],[d,[l,w]],[/\b((tablet|tab)[;\/]|focus\/\d(?!.+mobile))/i],[[l,w]],[/(phone|mobile(?:[;\/]| [ \w\/\.]*safari)|pda(?=.+windows ce))/i],[[l,b]],[/(android[-\w\. ]{0,9});.+buil/i],[d,[f,"Generic"]]],engine:[[/windows.+ edge\/([\w\.]+)/i],[p,[h,"EdgeHTML"]],[/webkit\/537\.36.+chrome\/(?!27)([\w\.]+)/i],[p,[h,"Blink"]],[/(presto)\/([\w\.]+)/i,/(webkit|trident|netfront|netsurf|amaya|lynx|w3m|goanna)\/([\w\.]+)/i,/ekioh(flow)\/([\w\.]+)/i,/(khtml|tasman|links)[\/ ]\(?([\w\.]+)/i,/(icab)[\/ ]([23]\.[\d\.]+)/i],[h,p],[/rv\:([\w\.]{1,9})\b.+(gecko)/i],[p,h]],os:[[/microsoft (windows) (vista|xp)/i],[h,p],[/(windows) nt 6\.2; (arm)/i,/(windows (?:phone(?: os)?|mobile))[\/ ]?([\d\.\w ]*)/i,/(windows)[\/ ]?([ntce\d\. ]+\w)(?!.+xbox)/i],[h,[p,V,G]],[/(win(?=3|9|n)|win 9x )([nt\d\.]+)/i],[[h,"Windows"],[p,V,G]],[/ip[honead]{2,4}\b(?:.*os ([\w]+) like mac|; opera)/i,/cfnetwork\/.+darwin/i],[[p,/_/g,"."],[h,"iOS"]],[/(mac os x) ?([\w\. ]*)/i,/(macintosh|mac_powerpc\b)(?!.+haiku)/i],[[h,"Mac OS"],[p,/_/g,"."]],[/droid ([\w\.]+)\b.+(android[- ]x86|harmonyos)/i],[p,h],[/(android|webos|qnx|bada|rim tablet os|maemo|meego|sailfish)[-\/ ]?([\w\.]*)/i,/(blackberry)\w*\/([\w\.]*)/i,/(tizen|kaios)[\/ ]([\w\.]+)/i,/\((series40);/i],[h,p],[/\(bb(10);/i],[p,[h,I]],[/(?:symbian ?os|symbos|s60(?=;)|series60)[-\/ ]?([\w\.]*)/i],[p,[h,"Symbian"]],[/mozilla\/[\d\.]+ \((?:mobile|tablet|tv|mobile; [\w ]+); rv:.+ gecko\/([\w\.]+)/i],[p,[h,"Firefox OS"]],[/web0s;.+rt(tv)/i,/\b(?:hp)?wos(?:browser)?\/([\w\.]+)/i],[p,[h,"webOS"]],[/crkey\/([\d\.]+)/i],[p,[h,"Chromecast"]],[/(cros) [\w]+ ([\w\.]+\w)/i],[[h,"Chromium OS"],p],[/(nintendo|playstation) ([wids345portablevuch]+)/i,/(xbox); +xbox ([^\);]+)/i,/\b(joli|palm)\b ?(?:os)?\/?([\w\.]*)/i,/(mint)[\/\(\) ]?(\w*)/i,/(mageia|vectorlinux)[; ]/i,/([kxln]?ubuntu|debian|suse|opensuse|gentoo|arch(?= linux)|slackware|fedora|mandriva|centos|pclinuxos|red ?hat|zenwalk|linpus|raspbian|plan 9|minix|risc os|contiki|deepin|manjaro|elementary os|sabayon|linspire)(?: gnu\/linux)?(?: enterprise)?(?:[- ]linux)?(?:-gnu)?[-\/ ]?(?!chrom|package)([-\w\.]*)/i,/(hurd|linux) ?([\w\.]*)/i,/(gnu) ?([\w\.]*)/i,/\b([-frentopcghs]{0,5}bsd|dragonfly)[\/ ]?(?!amd|[ix346]{1,2}86)([\w\.]*)/i,/(haiku) (\w+)/i],[h,p],[/(sunos) ?([\w\.\d]*)/i],[[h,"Solaris"],p],[/((?:open)?solaris)[-\/ ]?([\w\.]*)/i,/(aix) ((\d)(?=\.|\)| )[\w\.])*/i,/\b(beos|os\/2|amigaos|morphos|openvms|fuchsia|hp-ux)/i,/(unix) ?([\w\.]*)/i],[h,p]]},K=function(t,e){if(typeof t===c&&(e=t,t=o),!(this instanceof K))return new K(t,e).getResult();var i=t||(typeof s!==a&&s.navigator&&s.navigator.userAgent?s.navigator.userAgent:""),n=e?function(t,e){var i={};for(var n in t)e[n]&&e[n].length%2==0?i[n]=e[n].concat(t[n]):i[n]=t[n];return i}(q,e):q;return this.getBrowser=function(){var t,e={};return e.name=o,e.version=o,L.call(e,i,n.browser),e.major=typeof(t=e.version)===u?t.replace(/[^\d\.]/g,"").split(".")[0]:o,e},this.getCPU=function(){var t={};return t.architecture=o,L.call(t,i,n.cpu),t},this.getDevice=function(){var t={};return t.vendor=o,t.model=o,t.type=o,L.call(t,i,n.device),t},this.getEngine=function(){var t={};return t.name=o,t.version=o,L.call(t,i,n.engine),t},this.getOS=function(){var t={};return t.name=o,t.version=o,L.call(t,i,n.os),t},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return i},this.setUA=function(t){return i=typeof t===u&&t.length>350?j(t,350):t,this},this.setUA(i),this};K.VERSION="1.0.32",K.BROWSER=F([h,p,"major"]),K.CPU=F([m]),K.DEVICE=F([d,f,l,g,b,v,w,_,y]),K.ENGINE=K.OS=F([h,p]),typeof e!==a?(t.exports&&(e=t.exports=K),e.UAParser=K):i.amdO?(n=function(){return K}.call(e,i,e,t))===o||(t.exports=n):typeof s!==a&&(s.UAParser=K);var J=typeof s!==a&&(s.jQuery||s.Zepto);if(J&&!J.ua){var $=new K;J.ua=$.getResult(),J.ua.get=function(){return $.getUA()},J.ua.set=function(t){$.setUA(t);var e=$.getResult();for(var i in e)J.ua[i]=e[i]}}}("object"==typeof window?window:this)},480:()=>{}},e={};function i(n){var s=e[n];if(void 0!==s)return s.exports;var o=e[n]={exports:{}};return t[n].call(o.exports,o,o.exports,i),o.exports}i.amdO={},i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var n={};return(()=>{"use strict";function t(t=(()=>{}),e){null!=window.PushManager||null!=navigator.serviceWorker?"serviceWorker"in navigator?navigator.serviceWorker.register(e||"/sw.produce.min.2.1.6.js").then((function(e){const i=e.installing;i?i.addEventListener("statechange",(function(i){var n;"activated"===(null===(n=i.target)||void 0===n?void 0:n.state)&&t(!0,e)})):t(!0,e)})).catch((function(e){t(!1,e)})):t(!1,"serviceWorker 不支持http"):t(!1,"浏览器不支持订阅推送")}i.d(n,{default:()=>Nt});var e=i(214),s=i.n(e),o=i(269),r=i.n(o),a=i(743),c=i.n(a),u=i(783),d=i.n(u),h=i(452),l=i.n(h);function f(t){return function(t){const e=t.length,i=new Uint8Array(e);for(let n=0,s=e;n<s;++n)i[n]=t.charCodeAt(n);return i}(function(t,e=!1){return e?atob(t):c().stringify(r().parse(t))}((t+"=".repeat((4-t.length%4)%4)).replace(/\-/g,"+").replace(/_/g,"/"),!0))}function p(t){return g((e=t,String.fromCharCode.apply(null,Array.from(new Uint8Array(e)))),!0);var e}function m(t,e){var i,n;"object"==typeof e&&(e=JSON.parse(JSON.stringify(e))),null===(n=null===(i=null===navigator||void 0===navigator?void 0:navigator.serviceWorker)||void 0===i?void 0:i.controller)||void 0===n||n.postMessage({code:t,msg:e})}function g(t,e=!1){return"string"!=typeof t&&(t=JSON.stringify(t)),e?btoa(t):r().stringify(c().parse(t))}function b(t){return c().parse("string"!=typeof t?JSON.stringify(t):t)}function w(t){return d()(t).toString()}function v(t,e,i){i=i||"";const n=function(){let t="";for(let e=0;e<16;e++)t+=Math.floor(16*Math.random()).toString(16);return t}(),o=function(t,e,i="iop203040506aPk!"){return l().encrypt("string"==typeof t?r().parse(t):t,b(e),{iv:b(i)})}(g(i),n).ciphertext;var a,c;return{authorization:g(t+":"+w(t+(a=e,s()(a).toString())+w(o))+":"+n),body:(c=o,f(r().stringify(c))).buffer}}const _={cache:"no-cache",headers:{},redirect:"follow",mode:"cors"};function y(t,e="POST",i,n,s="json"){var o;const r=n||{};const a=Object.assign(_,{method:e});Object.keys(_.headers||{}).length>0&&(a.headers=_.headers);const c=Object.assign(a,r);if(c.method=null===(o=c.method)||void 0===o?void 0:o.toUpperCase(),"GET"===c.method){if(i){let e="";const n=/([?&])_=[^&]*/,s=/\?/;"object"==typeof i&&(e=function(t){let e="";for(const i in t)t.hasOwnProperty(i)&&(e+=i+"="+encodeURIComponent(t[i])+"&");return e.slice(0,-1)}(i)),t=n.test(t)?t.replace(n,"$1"+e):t+(s.test(t)?"&":"?")+e}}else[FormData,ArrayBuffer,Blob].filter((t=>i instanceof t)).length>0?c.body=i:(c.headers=Object.assign({"Content-Type":"application/json"},c.headers),i&&(c.body="string"==typeof i?i:JSON.stringify(i)));return fetch(t,c).then((t=>{const{status:e}=t;if(e>=200&&e<400){let e;switch(s){case"json":e=new Promise((e=>{t.text().then((t=>{try{e(JSON.parse(t))}catch(i){e(t)}}))}));break;case"text":e=t.text();break;case"blob":e=t.blob();break;case"arraybuffer":e=t.arrayBuffer();break;default:e=t.json()}return e}return Promise.reject(t)})).catch((t=>Promise.reject(t)))}const C={get:(t,e,i,n)=>y(t,"GET",e,i,n),post:(t,e,i,n)=>y(t,"POST",e,i,n),put:(t,e,i,n)=>y(t,"PUT",e,i,n),delete:(t,e,i,n)=>y(t,"DELETE",e,i,n),fetch:y,defaults:_},S={uid:"",passwd:""};function k(t,e){return S.uid=t,S.passwd=e,S}function I(t,e,i){if(S.uid&&S.passwd){const n=v(S.uid,S.passwd,i);return C[e](t,n.body,{headers:{Authorization:"Basic "+n.authorization}})}return Promise.reject("uid 或 passwd 为空")}const T=(t,e)=>I(t,"post",e),E="https://conn.webpush.theengagelab.com/v2/",x={subscribeSuccess:E+"subscribe",auth:"https://conn.webpush.theengagelab.com/v1/auth",option:E+"notification_subscribe",tagalias:E+"webdevices",unsubscribe:E+"unsubscribe",safariSubscribe:E+"safari/subscribe"};function N(){var t;const e=(null===(t=mt.data)||void 0===t?void 0:t.website_push_id)||"web.cn.jiguang";return{data:window.safari.pushNotification.permission(e),id:e}}function A(t,e){T(t,{endpoint:e.endpoint,keys:{p256dh:p(e.getKey("p256dh")),auth:p(e.getKey("auth"))}})}const O={SDK_VERSION:"2.1.6",LOG_TAG_PREFIX:"[MTush-P]",REQUEST:{WS_URL:"ws://"+"https://conn.webpush.theengagelab.com".split("//")[1],WS_SUPPORT:!0,WS_HEART_BEAT:5e4,WS_RECONNECT_PERIOD:1e4,WS_RESP_TIMEOUT:3e4,WS_RETRY_TIMES:3,POLLING_URL:"",POLLING_SUPPORT:!1,POLLING_TIME_OUT:15e3},CMD:{INIT:"init",HEART_BEAT:"heartbeat",MESSAGE_RECIVER:"msgrecv",PUSH:"push"},EVENT:{OPEN:"open",MESSAGE:"message",SEND:"send",DISCONNECT:"disconnect",NOT_SUPPORT:"not_supoort"}};var M;function D(t){return"string"!=typeof t||(!t||0==t.length)}function R(){let t=!0;if(window.navigator){if(t=window.navigator.onLine,"boolean"==typeof t)return t;t=!0}return t}!function(t){let e=!1;const i=O.LOG_TAG_PREFIX;t.setDebugMode=function(n){t.d(i,`setDebugMode:${n}`),e=n},t.d=function(t,e){},t.dd=function(t,i){e&&window.console},t.ww=function(t,e){window.console},t.ee=function(t,e){window.console}}(M||(M={}));const B=0,P=1e3,U={INITING:1001,CONFIG_INVALID:1002,INIT_FAILED:1003,INIT_TIME_OUT:1004,NETWORK_ERROR:1005,NOT_SUPPORT:1006};function z(t){let e="";switch(t){case B:e="success";break;case P:e="unknown error";break;case U.INITING:e="initing , please try again later";break;case U.CONFIG_INVALID:e="invalid config";break;case U.INIT_FAILED:e="init failed";break;case U.INIT_TIME_OUT:e="init timeout";break;case U.NETWORK_ERROR:e="network error"}return e}function F(t,e){return{code:t,message:z(t),content:e}}class W{constructor(t){this.success=t.success,this.fail=t.fail}onSuccess(t){this.success&&"function"==typeof this.success&&this.success(t)}onFail(t){this.fail&&"function"==typeof this.fail&&this.fail(t)}}var H;!function(t){t[t.Initial=0]="Initial",t[t.Connecting=1]="Connecting",t[t.Connected=2]="Connected",t[t.Closing=3]="Closing",t[t.Closed=4]="Closed"}(H||(H={}));class j extends class{constructor(){this.sConnectionState=H.Initial}getConnectState(){return this.sConnectionState}}{constructor(t){super(),this.mUrl=t}connect(){M.d("WebSocketConnection",`${location.hostname} try to connect websocket:${this.mUrl}`),this.mWebSocket=new WebSocket(this.mUrl),this.mWebSocket.onopen=this.onOpen.bind(this),this.mWebSocket.onclose=this.onClose.bind(this),this.mWebSocket.onmessage=this.onMessage.bind(this)}disconnect(){this.mWebSocket.close()}onOpen(t){this.onopen(t)}onMessage(t){this.onmessage(t)}onClose(t){this.onclose(t)}sendMessage(t){this.mWebSocket.send(t)}getConnectState(){if(this.mWebSocket)switch(this.mWebSocket.readyState){case WebSocket.CLOSED:this.sConnectionState=H.Closed;break;case WebSocket.CLOSING:this.sConnectionState=H.Closing;break;case WebSocket.CONNECTING:this.sConnectionState=H.Connecting;break;case WebSocket.OPEN:this.sConnectionState=H.Connected}return this.sConnectionState}}const L="ConnectionController";class V{constructor(t=""){this.mAutoDiscon=!0,this.mDataCache="",this.url="",this._onOpen=this._onOpen.bind(this),this._onMessage=this._onMessage.bind(this),this._onClose=this._onClose.bind(this),this.sendMessage=this.sendMessage.bind(this),this.setupConnection=this.setupConnection.bind(this),this.url=t}setupConnection(){O.REQUEST.WS_SUPPORT&&"undefined"!=typeof WebSocket?(this.mConnection=new j(this.url||O.REQUEST.WS_URL),this.mConnection.onopen=this._onOpen,this.mConnection.onmessage=this._onMessage,this.mConnection.onclose=this._onClose,this.mAutoDiscon=!0,M.dd(L,"start connecting"),this.mConnection.connect()):this.onEvent({name:O.EVENT.NOT_SUPPORT})}_isConnect(){return this.mConnection&&(this.mConnection.getConnectState()===H.Connected||this.mConnection.getConnectState()===H.Connecting)}_onOpen(t){M.dd(L,"connection is opened"),this._sendEvent(O.EVENT.OPEN,t.event),this.sendMessage(this.mDataCache)}_onMessage(t){M.d(L,"connection is receive message"),this._sendEvent(O.EVENT.MESSAGE,t.data)}_onClose(t){M.dd(L,"connection close "+(this.mAutoDiscon?"auto":"manually")),this.mAutoDiscon&&this._scheduleReConnect(),this._sendEvent(O.EVENT.DISCONNECT,t)}_sendEvent(t,e){this.onEvent&&this.onEvent({name:t,data:e})}sendMessage(t){D(t)||(this.mConnection.getConnectState()===H.Connected?(this.mConnection.sendMessage(t),this.mDataCache="",this._sendEvent(O.EVENT.SEND,t)):this.mDataCache=t)}_scheduleReConnect(){var t;(t=O.REQUEST.WS_RECONNECT_PERIOD,new Promise((e=>setTimeout(e,t)))).then((()=>{this.mAutoDiscon&&(R()?(M.dd(L,"do reconnect"),this.setupConnection()):this._scheduleReConnect())}))}disconnect(){M.d(L,"disconnect"),this.mAutoDiscon=!1,this._isConnect()&&this.mConnection.disconnect()}reConnect(){M.d(L,"reconnect"),this.mAutoDiscon=!0,this._isConnect()?this.mConnection.disconnect():this.setupConnection()}}class G{constructor(t){this.mInitConfig=t}setCmd(t){return this.mCmd=t,this}setSid(t){return this.mSid=t,this}setUserInfo(t){return this.mUserInfo=t,this}setPushMsgArray(t){return this.mMsgArr=t,this}build(){let t;switch(this.mCmd){case O.CMD.INIT:t=this.mInitConfig.auth;break;case O.CMD.HEART_BEAT:t={r:this.mUserInfo.regid,u:this.mInitConfig.auth.is_temporary};break;case O.CMD.MESSAGE_RECIVER:t={r:this.mUserInfo.regid,m:this.mMsgArr.map((t=>t.msg_id))}}let e=0;this.mSid?e=this.mSid+2:(e=G.sid,G.sid>1e8?G.sid=0:G.sid=G.sid+4);return{cmd:this.mCmd,sid:e,time:Math.round(Date.now()/1e3),body:t?JSON.stringify(t):""}}}G.sid=0;const q="Channel";class K{constructor(){this.mDataCache={},this.mMsgChache={}}init(t){this.mInitConfig=t,this.mConnectionController||(this.mConnectionController=new V(t.webSocketUrl),this.mConnectionController.onEvent=this.onEvent.bind(this)),this.mConnectionController.setupConnection()}onEvent(t){if(M.d(q,"onEvent:"+t.name),t.name==O.EVENT.DISCONNECT){const t=this,e=Object.keys(t.mDataCache);e.length>0&&e.forEach((e=>{const i=t.mDataCache[e];i&&(i.cleanRespTimeout(),delete t.mDataCache[e])}))}if(t.name==O.EVENT.MESSAGE){const e=JSON.parse(t.data),i=e.cmd;M.dd(q,`---<- cmd:${i}, data:${t.data}`),i==O.CMD.HEART_BEAT&&(e.body=JSON.stringify({code:0}));const n=JSON.parse(e.body);if(i==O.CMD.PUSH){const t=this._filterPushArr(e.sid,n.d);if(!(t.length>0))return;e.body=t}const s=this.mDataCache[e.sid+""];s&&(s.cleanRespTimeout(),delete this.mDataCache[e.sid+""],0!==n.code?s.fail&&s.fail(n):s.hook?s.hook(e,s.success):s.success&&s.success(n)),t.data=e}this.onevent(t)}_filterPushArr(t,e){if(!e)return[];const i=e.map((t=>JSON.parse(t)));this.send(O.CMD.MESSAGE_RECIVER,new G(this.mInitConfig).setCmd(O.CMD.MESSAGE_RECIVER).setSid(t).setUserInfo(this.mUserInfo).setPushMsgArray(i).build());const n=i.map((t=>t.msg_id)),s=this.mMsgChache[this.mUserInfo.regid];let o=[];if(s){for(let t=0;t<n.length;t++){const e=n[t];s.indexOf(e)<0?(s.push(e),o.push(i[t])):M.dd(q,"filter repeat msgid:"+e)}this.mMsgChache[this.mUserInfo.regid]=s}else this.mMsgChache[this.mUserInfo.regid]=n,o=i;return o}send(t,e){M.dd(q,`---\x3e- cmd:${t}, data:${JSON.stringify(e)}`),this.mConnectionController.sendMessage(JSON.stringify(e))}updateUserInfo(t){this.mUserInfo=t}stop(){this.mConnectionController&&this.mConnectionController.disconnect()}reConnect(){this.mConnectionController&&this.mConnectionController.reConnect()}}class J{constructor(t){this.mChannel=t,this.mTimes=1}setCmd(t){return this.mCmd=t,this}setData(t){return this.mData=t,this}onSuccess(t){return"function"==typeof t&&(this.success=t),this}onFail(t){return"function"==typeof t&&(this.fail=t),this}onTimeout(t){if("function"==typeof t){this.timeout=t;const e=this;this.respTimeoutTaskId=setTimeout((function(){e.respTimeoutTask()}),O.REQUEST.WS_RESP_TIMEOUT)}return this}addHook(t){return"function"==typeof t&&(this.hook=t),this}respTimeoutTask(){if(this.mTimes<O.REQUEST.WS_RETRY_TIMES){this.mChannel.send(this.mCmd,this.mData),this.mTimes++;const t=this;this.respTimeoutTaskId=setTimeout((function(){t.respTimeoutTask()}),O.REQUEST.WS_RESP_TIMEOUT)}else this.timeout&&this.timeout({rid:this.mRid,data:this.mData,response_timeout:!0}),delete this.mChannel.mDataCache[this.mRid];return this}cleanRespTimeout(){return this.respTimeoutTaskId&&clearTimeout(this.respTimeoutTaskId),this}send(){if(this.mCmd&&this.mData)return this.mRid=this.mData.sid+2+"",this.mChannel.send(this.mCmd,this.mData),this.mChannel.mDataCache[this.mRid]=this,this;M.d("MsgBuilder","send fail，event and data can not empty")}}const $="MTpushInterface.mtPush";class X{constructor(){this.mInitStatu=X.INIT_FAIL,this.mAutoDiscon=!0,this.mIsNeedInit=!1}init(t,e){if(M.setDebugMode(t.debugMode||!1),this.mInitStatu==X.INIT_ING)return void e.onFail(F(U.INITING));const i=t.auth,n=i.is_temporary;!i||D(i.appkey)||D(i.random_str)||D(i.signature)||D(i.user_str)||D(n)||"t"!==n&&"n"!==n||!i.timestamp||"number"!=typeof i.timestamp?e.onFail(F(U.CONFIG_INVALID)):(t.is_temporary=n,R()?(M.dd($,"action:init - sdkVersion:"+O.SDK_VERSION),this.mInitCallback=e,t.sdkVersion=O.SDK_VERSION,this.mInitConfig=t,this.mChannel||(this.mChannel=new K,this.mChannel.onevent=this._addEventListen.bind(this)),this.mInitStatu==X.INIT_SUCC?(this.mIsNeedInit=!0,this.stopPush()):(this.mChannel.init(this.mInitConfig),this.mAutoDiscon=!0),this.mInitStatu=X.INIT_ING):e.onFail(F(U.NETWORK_ERROR)))}_init(){const t=this;new J(this.mChannel).setCmd(O.CMD.INIT).setData(new G(this.mInitConfig).setCmd(O.CMD.INIT).build()).onSuccess((function(e){t.mInitStatu=X.INIT_SUCC,t.mUserInfo=e,t.mInitConfig.getInitInfo&&t.mInitConfig.getInitInfo(e),t.mChannel.updateUserInfo(t.mUserInfo),t.mInitCallback&&(t.mInitCallback.onSuccess(F(B)),t.mInitCallback=void 0),t._startHeartBeat()})).onFail((function(e){t._initFail(F(U.INIT_FAILED,e))})).onTimeout((function(){t._initFail(F(U.INIT_TIME_OUT))})).send()}_initFail(t){this.stopPush(),this.mInitCallback?(M.ww($,"init fail:"+JSON.stringify(t)),this.mInitCallback.onFail(t),this.mInitCallback=void 0):this.mDisconnetFn&&(M.ww($,"invalid reconnect,close"),this.mDisconnetFn())}onMsgReceive(t){this.mMsgReceiveFn=t}onDisconnect(t){this.mDisconnetFn=t}getRegistrationID(){return this.mUserInfo?this.mUserInfo.regid:""}stopPush(){this.mAutoDiscon=!1,G.sid=0,this._stopHearBeat(),this.mChannel&&this.mChannel.stop(),this.mInitStatu=X.INIT_FAIL,this.mUserInfo=null}_addEventListen(t){if(t){if(M.d($,"event:"+t.name),t.name==O.EVENT.NOT_SUPPORT)return this._initFail(F(P,"do not support websocket")),void(this.mInitStatu=X.INIT_FAIL);if(t.name!=O.EVENT.OPEN){if(t.name==O.EVENT.DISCONNECT){if(G.sid=0,this._stopHearBeat(),this.mIsNeedInit&&!this.mAutoDiscon)return M.dd($,"reinit."),this.mChannel.init(this.mInitConfig),this.mIsNeedInit=!1,void(this.mAutoDiscon=!0);if(!this.mUserInfo&&this.mAutoDiscon)return void this._initFail(F(U.NETWORK_ERROR))}if(t.name==O.EVENT.MESSAGE){if(t.data.cmd==O.CMD.PUSH){const e=t.data.body;if(this.mMsgReceiveFn)return void this.mMsgReceiveFn({messages:e})}}}else this._init()}}_startHeartBeat(){this.mHeartTimeOut&&clearTimeout(this.mHeartTimeOut),this.mHeartTimeOut=setTimeout((()=>{this._heartBeat()}),O.REQUEST.WS_HEART_BEAT)}_heartBeat(){const t=this;new J(this.mChannel).setCmd(O.CMD.HEART_BEAT).setData(new G(this.mInitConfig).setCmd(O.CMD.HEART_BEAT).setUserInfo(this.mUserInfo).build()).onSuccess((function(){t._startHeartBeat()})).onFail((function(){t._reconnect()})).onTimeout((function(){t._reconnect()})).send()}_reconnect(){M.ww($,"wrong heartbeat,try reconnect"),this._stopHearBeat(),this.mChannel.reConnect()}_stopHearBeat(){this.mHeartTimeOut&&(clearTimeout(this.mHeartTimeOut),this.mHeartTimeOut=void 0)}_resetHeartBeat(){this.mHeartTimeOut&&(clearTimeout(this.mHeartTimeOut),this._startHeartBeat())}}X.INIT_SUCC="INITSUCC",X.INIT_ING="INITING",X.INIT_FAIL="INITFAIL";const Q=new X,Z={init:function(t){try{Q.init(t,new W(t))}catch(e){M.ww($,"init fail："+e),t.fail(F(P))}},onMsgReceive:function(t){"function"==typeof t&&(M.dd($,"set onMsgReceive"),Q.onMsgReceive(t))},onDisconnect:function(t){"function"==typeof t&&(M.dd($,"set onDisconnect"),Q.onDisconnect(t))},stopPush:function(){M.dd($,"stopPush"),Q.stopPush()},getRegistrationID(){const t=Q.getRegistrationID();return M.dd($,"getRegistrationID:"+t),t},mtpush:Q};function Y(t){return t?` style="color:${t};"`:""}const tt={position:"left",title:"",titleColor:"",text:"",textColor:"",confirm:"",confirmColor:"",confirmBgc:"",cancel:"",cancelColor:"",src:""};function et(t,e=(()=>{}),i=(()=>{})){const n=Object.assign(tt,t);n.position={left:"left:0",center:"left:50%;transform:translate(-50%,0)",right:"right:0"}[t.position]||"left:0";let s=(n.confirmColor?`color:${n.confirmColor};`:"")+(n.confirmBgc?`background-color:${n.confirmBgc};`:"");s=s?` style="${s}"`:"";const o=`<img src="${n.src||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAh1BMVEUAAAAsa/8sbP9FXP8lYf8sa/8sa/8ra/8sa/8ra/8sa/8sa/8sa/8sa/8sa/8sa/8rZf8sa/8sa/8sa/8sa/8sa/8sbP8ra/8sa/8sa/8oav8sa/8maP8sa/8rbP8sa/8sa/8sa/8oaP8rbP8sa/8ra/8ra/8ta/8sav8mav8sa/8ra/8taf/cU0AXAAAALXRSTlMA1tMCBMzQPsgzF76Zc25nCrqsW7e0jnpgTB8cDcXBr4BWEKeiY0Y5KhNqUiIjzI9vAAABjUlEQVRIx+2VW3OCMBCFOZAAIje5iYqKeNf+/9/X3RpKsZlOpn3qjN+D2dnk5OSsD1haJqGU4cUyZmGDsE+m5zsfH/iNoeAOFKvlDFgYChIgsqw5cDSN0Dv8GCKo/ESVZygmvaVfBc/nTxR0zYXIS3yy3QnurWnPG5/PeZA3vr3EiJJdbjzkxdOrUdCWk7BwOvcCIQKv3fDBmv/IKRVfPJYucOChtwA29AyF2LFkTtU1A+SQI6TXprTGAEIqBhraAg+jK4Cq717I70Krx9c543BOq6Y1oce+qWb0EKdTup/PjxXkMWPXCohVLwM40JHi0s4zzRrIH/6ZakmA8ggyuFsacrIg4wCQqmPDpYZHBo5OIDYAj9yF3WeQMf/yALW0j9fHMhq198BZLyDvg6ZNEa56wQooNG0XcPSCFPC/dx2oTPqtl+AlMBFELoxwYyWQMMT/ncPfWdaroTBhhnIoTJBAymvHKU3IgFp96g5Gghpwj02XuMDOSCC2UGTCMiJQiuxqGSLyvZT7XFj/g3cZFxJZ+tXnmgAAAABJRU5ErkJggg=="}"/>\n  <h3${Y(n.titleColor)}>${n.title}</h3>\n  <p class="notic-user-tip-data"${Y(n.textColor)}>${n.text}</p>\n  <div class="button-warp">\n    <span class="web-push-tip-cancel" ${Y(n.cancelColor)}>${n.cancel}</span><span class="confirm" ${s}>${n.confirm}</span>\n  </div>`;!function(t){const e=document.createElement("style");e.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(e)}(".notic-user-tip-warp {\n  width: 378px;\n  min-height: 134px;\n  background: #ffffff;\n  box-shadow: 0px 24px 24px -6px rgba(37, 48, 68, 0.14), 0px 2px 6px 0px rgba(37, 48, 68, 0.12);\n  border-radius: 4px;\n  position: absolute;\n  padding: 20px 20px 20px 72px;\n  top: 0;\n}\n.notic-user-tip-warp.notic-user-tip-warp-hide{display:none}\n.notic-user-tip-warp > img {\n  position: absolute;\n  width: 40px;\n  left: 16px;\n  top: 20px;\n}\n.notic-user-tip-warp > h3 {\n  font-size: 14px;\n  color: #000;\n  line-height: 18px;\n  padding-bottom: 2px;\n  font-weight: bolder;\n}\n.notic-user-tip-warp > .notic-user-tip-data {\n  font-size: 14px;\n  line-height: 22px;\n  color: #666;\n  min-height: 44px;\n  overflow: hidden;\n  padding-bottom: 16px;\n  word-spacing: pre-wrap;\n}\n.notic-user-tip-warp > .button-warp {\n  text-align: right;\n}\n.notic-user-tip-warp > .button-warp > span {\n  display: inline-block;\n  height: 32px;\n  line-height: 32px;\n  border-radius: 3px;\n  padding: 0 16px;\n  margin-left: 8px;\n  color: #cccccc;\n  cursor: pointer;\n}\n.notic-user-tip-warp > .button-warp > .confirm {\n  color: #fff;\n  background: #2c6bff;\n}");const r=document.createElement("div");function a(t=!1){t?r.classList.add("notic-user-tip-warp-hide"):r.classList.remove("notic-user-tip-warp-hide")}return r.className="notic-user-tip-warp notic-user-tip-warp-hide",r.style.cssText=n.position,r.innerHTML=o,document.body.appendChild(r),r.addEventListener("click",(t=>{const n=t.target.classList;n.contains("confirm")&&(e(),a(!0)),n.contains("web-push-tip-cancel")&&(i(),a(!0))})),a}const it=["active_launch","active_terminate"];function nt(t){const e=Number(localStorage.getItem(t)||"0");return isNaN(e)?0:e}function st(t,e="",i=!1){var n,s,o,r;if(mt.data&&mt.userOption){const a=mt;let c=!1;if(t.forEach((t=>{const e=(new Date).getTime()/1e3|0;t.type&&it.includes(t.type)&&(e-nt(t.type)<30&&(c=!0),localStorage.setItem(t.type,e.toString())),t.itime=e,t.msg_id&&(t.msg_id=t.msg_id.toString())})),c)return;const u={platform:"b",uid:null===(n=a.data)||void 0===n?void 0:n.uid,app_key:null===(s=a.userOption)||void 0===s?void 0:s.appkey,channel:e,content:t},d="Basic "+btoa((null===(o=a.data)||void 0===o?void 0:o.uid)+":"+(null===(r=a.data)||void 0===r?void 0:r.passwd));return i?{data:u,Authorization:d}:C.post("https://webpushstat.api.engagelab.cc/v4/web/report",u,{headers:{Authorization:d}})}}function ot(t){return(new Date).getTime()/1e3-nt(t)|0}var rt=i(238),at=i.n(rt);const ct="BCWYct994EyWepYA2QdTQrTz81NBfq5wOGJeqa_M4B-uLIaH5nOky58qfwLK0ou7XSDYjJDQGxAuPxRBM4KxPz4";function ut(){t(((t,e)=>{function i(t,i){1===t&&function(t,e=(()=>{})){t.pushManager?t.pushManager.getSubscription().then((i=>{i||t.pushManager.subscribe({userVisibleOnly:!0,applicationServerKey:f(ct)}).then((()=>{e(!0)})).catch((t=>{}))})).catch((t=>{e(!1,t)})):e(!1)}(e,(t=>{let e=-6,i="消息订阅失败！";t&&(e=0,i="消息订阅成功！")}))}t&&_t(((t,e)=>{var n;1===t?i(t):3===t&&(null===(n=Notification.requestPermission())||void 0===n||n.then((function(t){"granted"===t&&i(1)})))}))}))}const dt={mtPush:{code:0,msg:""},webPush:{code:0,msg:""}};function ht(){return dt.mtPush={INITSUCC:{code:1,msg:"极光推送通道初始化成功！"},INIT_ING:{code:-1,msg:"极光推送通道初始化中，请稍后再试！"},INIT_FAIL:{code:0,msg:"极光推送通道初始化失败或已停止！"}}[Z.mtpush.mInitStatu]||{code:0,msg:""},JSON.parse(JSON.stringify(dt))}function lt(t,e=(()=>{})){const i=t.visit||0,n=t.delay||0,s=Number(window.localStorage.getItem("subscriptionVisit")||0);s>i-1?n>0?setTimeout(e,1e3*n):e():window.localStorage.setItem("subscriptionVisit",(s+1).toString())}function ft(e=(()=>{}),i,n){function s(t,i,n){t<1&&(t=0,i="web推通知不可用"),dt.webPush.code=t,dt.webPush.msg=i,e(t,i,n)}t(((t,e)=>{function o(t,n){1===t?function(t,e,i,n=(()=>{}),s=!1,o={title:"我是测试"}){var r;let a=!1;if("safari"in window&&"pushNotification"in window.safari){a=!0;const t=N();t.data.deviceToken&&T(x.safariSubscribe,{appkey:null===(r=mt.userOption)||void 0===r?void 0:r.appkey,device_token:t.data.deviceToken})}t.pushManager?t.pushManager.getSubscription().then((r=>{r?(n(!0),s&&T(i,{pushInfo:{endpoint:r.endpoint,keys:{p256dh:p(r.getKey("p256dh")),auth:p(r.getKey("auth"))}},pushData:o}),A(i,r)):t.pushManager.subscribe({userVisibleOnly:!0,applicationServerKey:f(e)}).then((t=>{n(!0),A(i,t)})).catch((t=>{}))})).catch((t=>{n(!1,t)})):n(a)}(e,i.VAPIDPublicKey,x.subscribeSuccess,(e=>{let i=-6,o="消息订阅失败！";e&&(i=0,o="消息订阅成功！"),s(t+i,n+o)})):s(t,n)}function r(){!function(t=wt){var e;let i="web.cn.jiguang";const n=mt.userOption,s=((null==n?void 0:n.safari_url)||"https://conn.webpush.theengagelab.com")+"/webpush";function o(){const t=N(),e=t.data;i=t.id,r(e)}function r(e){var n,a;"default"===e.permission?(st([{type:"ntf_status",result:0,manufacturer:bt.browser.name,lang:navigator.language}]),window.safari.pushNotification.requestPermission(s,i,{appkey:null===(n=mt.userOption)||void 0===n?void 0:n.appkey,uid:null===(a=mt.data)||void 0===a?void 0:a.uid.toString(),origin:location.origin},r)):(document.body.removeEventListener("click",o),vt(e.permission,t),"denied"===e.permission?st([{type:"ntf_status",result:2,manufacturer:bt.browser.name,lang:navigator.language}]):st([{type:"ntf_status",result:1,manufacturer:bt.browser.name,lang:navigator.language}]))}if("safari"in window&&"pushNotification"in window.safari)try{o()}catch(t){document.body.addEventListener("click",o)}else st([{type:"ntf_status",result:0,manufacturer:bt.browser.name,lang:navigator.language}]),null===(e=Notification.requestPermission())||void 0===e||e.then((function(e){vt(e,t),"denied"===e?(st([{type:"ntf_status",result:2,manufacturer:bt.browser.name,lang:navigator.language}]),T(x.unsubscribe)):st([{type:"ntf_status",result:1,manufacturer:bt.browser.name,lang:navigator.language}])}))}(((t,e)=>{o(t,e)}))}t?_t(((t,e)=>{3!==t&&setTimeout((()=>{st([{type:"ntf_status",result:t,manufacturer:gt.browser.name,lang:navigator.language}])}),2e3),1===t?o(t,e):3===t?T(x.option,{appkey:n.appkey}).then((t=>{const e=t.subscribe_config||{};if(2===t.subscribe_type){const t=et(e,r);lt(e,(()=>{t()}))}else 3===t.subscribe_type?n.custom?n.custom(r):r():lt(e,r)})):s(t,e)})):s(-2,"ServiceWorker registration failed",e)}),i.swUrl)}function pt(){}const mt={data:null,userOption:null},gt=at()(navigator.userAgent);const bt=at()(navigator.userAgent),wt=(t,e)=>{};function vt(t,e=wt){switch(t){case"granted":e(1,"Notification 可用");break;case"denied":e(2,"Notification 权限已被禁用");break;default:e(3,"Notification 权限还没有确认")}}function _t(t=wt){if("undefined"==typeof Notification)return void t(0,"浏览器不支持 Notification API");vt(Notification.permission,t)}function yt(t,e,i={}){var n;"Notification"in window&&"granted"===Notification.permission&&(null===(n=navigator.serviceWorker)||void 0===n||n.getRegistration().then((function(n){if(null==n?void 0:n.showNotification)null==n||n.showNotification(t,e),i&&i.msg_id&&st([{type:"msg_status",msg_id:i.msg_id,result:3018}],"MTPush");else{const n=new Notification(t,e);i&&i.msg_id&&st([{type:"msg_status",msg_id:i.msg_id,result:3018}],"MTPush"),n.addEventListener("click",(()=>{i&&i.msg_id&&st([{type:"msg_status",msg_id:i.msg_id,result:3002}],"MTPush");const t=i.url||(null==i?void 0:i.engagelab_url);t&&window.open(t)}))}})))}window.addEventListener("unload",(()=>{if(ot("active_launch")>0){const t=st([{type:"active_terminate",duration:ot("active_launch")}],"",!0);t&&m(9999,t)}}));let Ct=()=>{};function St(t,e){"function"==typeof Ct&&Ct({data:t,type:e})}let kt=0;!function t(){setTimeout((()=>{kt<20&&(kt++,navigator.serviceWorker&&(kt=100,navigator.serviceWorker.addEventListener("message",(t=>{var e;t.data.data.engagelab_uid===(null===(e=mt.data)||void 0===e?void 0:e.uid)&&St(t.data,1)}))),t())}),1e3)}(),Z.onMsgReceive((t=>{if(St(t,0),t.messages&&t.messages.length>0){const e=[];t.messages.forEach((t=>{var i;e.push({type:"msg_status",msg_id:t.msg_id,result:3001}),!(i=t.ntf_or_msg)||1!==i&&3!==i||yt(t.title,function(t){var e,i,n;const s={engagelab_appkey:null===(e=mt.userOption)||void 0===e?void 0:e.appkey,engagelab_passwd:null===(i=mt.data)||void 0===i?void 0:i.passwd,engagelab_uid:null===(n=mt.data)||void 0===n?void 0:n.uid,engagelab_mesg_type:"MTPush"},o=Object.assign({},t),r=["content","extras","msg_id","ntf_or_msg","st_web_buttons"];if(void 0!==t.content){if(o.body=t.content,o.tag=t.msg_id,o.data=Object.assign({engagelab_ntf_or_msg:t.ntf_or_msg},s),t.url&&(o.data.engagelab_url=t.url),t.st_web_buttons){const e={},i=[];t.st_web_buttons.forEach((t=>{e[t.id]=t.url;const n={action:t.id,title:t.text};t.icon&&(n.icon=t.icon),i.push(n)})),o.actions=i,o.data.engagelab_action_urls=e}r.forEach((t=>{delete o[t]}))}return o}(t),t)})),st(e,"MTPush")}}));const It={customClickReport(t,e="MTPush"){st([{type:"msg_status",msg_id:t,result:3028}],e="W3Push"!==e?"MTPush":e)},init:function(t){if(t.localTest)return ut(),!1;1===ht().mtPush.code&&mt.data&&n(mt.data);const e="https://conn.webpush.theengagelab.com";mt.userOption=t;const i=t.is_temporary||"n";function n(e){k(e.uid.toString(),e.passwd),mt.data=e;const i=(new Date).getTimezoneOffset()/-60|0;st([{type:"oversea_info",time_zone:i>0?"+"+i:i.toString(),lang:navigator.language,contry:"",os:gt.os.name,os_version:gt.os.version,web_channel:gt.browser.name,web_channel_version:gt.browser.version}]),st([{type:"active_launch"}]),t.canGetInfo&&t.canGetInfo(e),"t"!==t.is_temporary&&function(t,e){ft(e.webPushcallback,{VAPIDPublicKey:t.vapid_pubkey,swUrl:e.swUrl},e)}(e,t)}(function(t,e,i,n="n"){return C.get(t,{user_str:e,appkey:i,is_temporary:n})})(x.auth,t.user_str,t.appkey,i).then((s=>{const o=e.split("//");let r="https:"===o[0]?"wss://":"ws://";r+=o[1];let a=!1;Z.init({webSocketUrl:t.webSocketUrl||r,auth:Object.assign(Object.assign({},s),{is_temporary:i}),success:t.success||pt,fail:t.fail||pt,getInitInfo(t){a||(n(t),a=!0)}})}))},getPushAuthority:ht,getRegistrationID:Z.getRegistrationID,getWebPermission:()=>Notification.permission,mtPush:Z,onMsgReceive:t=>{Ct=t},webPush:{displayNotification:yt,permission:_t,init:ft},setTagsAlias(t){function e(t,e){if(t)throw new Error(e)}if(mt.userOption){const i=mt.userOption;e(!t.tags,"缺少tags属性"),e(!t.alias,"缺少alias属性"),e(!!(t.alias&&t.alias.length>40),"alias最多40个字符"),e(t.alias.length>1e3,"alias一次最多设置1000个"),t.tags.forEach((t=>{e(t.length>40,"tag最多40个字符")})),T(x.tagalias,Object.assign({temporary:"t"===i.is_temporary,appkey:i.appkey},t))}},unSubscribe:()=>T(x.unsubscribe)},Tt={},Et=["webpush_safari_url","msg_id","engagelab_uid","engagelab_appkey","engagelab_passwd"];let xt=0;location.search.slice(1).split("&").forEach((t=>{const e=t.split("=");Et.forEach((t=>{2===e.length&&t===e[0]&&(xt+=1,Tt[t]=e[1])}))})),xt===Et.length&&(m(6666,Object.assign({},Tt)),window.location.href=Tt.webpush_safari_url);const Nt=It})(),n=n.default})()));
\ No newline at end of file
diff --git a/public/web_config.js b/public/web_config.js
new file mode 100644
index 0000000..9bb60c6
--- /dev/null
+++ b/public/web_config.js
@@ -0,0 +1 @@
+window.WEB_CONFIG = {"api_1":"https://uat-im.exchangs.top/manage-api","api_2":"https://uat-im.exchangs.top/chat-api","api_3":"https://uat-im.exchangs.top/chat-server-api","ws_url":"wss://uat-im.exchangs.top","proxy_target":"https://uat-im.exchangs.top","backup_http_addrs":["https://uat-openim.exchangs.top/chat-server-api"]}
\ No newline at end of file
diff --git a/scripts/verifyCommit.js b/scripts/verifyCommit.js
new file mode 100644
index 0000000..1382d39
--- /dev/null
+++ b/scripts/verifyCommit.js
@@ -0,0 +1,18 @@
+import fs from 'node:fs'
+
+const msg = fs.readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim()
+
+const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
+const mergeRe = /^(Merge pull request|Merge branch)/
+
+if (!commitRE.test(msg)) {
+  if (!mergeRe.test(msg)) {
+    console.log('git commit unpass')
+    console.error('git commit error, needs title(scope): desc')
+    // eslint-disable-next-line node/prefer-global/process
+    process.exit(1)
+  }
+}
+else {
+  console.log('git commit pass')
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..ad97d0a
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,316 @@
+<script setup>
+import { onMounted, onBeforeUnmount, onBeforeMount,computed } from 'vue'
+import { AllowType, LoginStatus } from "open-im-sdk-wasm";
+import { localStorage } from '@/utils/local-storage'
+import { storeToRefs } from 'pinia'
+import { useStore } from '@/stores'
+import { useRouter, useRoute } from 'vue-router'
+import { CbEvents } from '@/utils/openIM/constant'
+import { getSDK } from '@/utils/openIM'
+import { useContactStore } from "@/stores/contact";
+import { useGlobalEvent } from '@/utils/useGlobalEvent.js'
+import emitter from '@/utils/events';
+import downloadBanner from '@/views/banner/index.vue'
+// import { sdkInit, reset_sdk } from '@/utils/sdkInit.js'
+import { getFingerIdAndSave, im_config } from '@/utils/tools'
+import { initStore, getConfigInfo, getUserInfo } from '@/utils/imCommon'
+import { updateAppConfig } from '@/utils/cdnUtils';
+import use from "@/use";
+const {useSystem } = use;
+const contactStore = useContactStore();
+const { setNewFriendApplyCount, getAllGroupOwnerOrAdmin,updateNewFriendApply } = contactStore
+const { friendCreateCount, chatList } = storeToRefs(contactStore)
+const IMSDK = getSDK()
+const store = useStore()
+const theme = ref('light')
+const mode = computed(() => store.mode)
+const router = useRouter()
+const route = useRoute()
+
+let timer_searchTime = null
+const getNewfriendApplyCount = async (time) => {
+  //这个方法初始化的时候，一直在执行，如果两个时间间隔太短，就不执行
+  if(timer_searchTime){
+    clearTimeout(timer_searchTime)
+    timer_searchTime=null
+  }
+  timer_searchTime = setTimeout(async() => {
+    clearTimeout(timer_searchTime)
+    timer_searchTime=null
+    let searchTime = !!friendCreateCount.value ? (Number(friendCreateCount.value)) : time
+    const res = await $api.contact.getRespondFriendApplyByTime({
+      time: searchTime || Date.now()
+    })
+    if (res.code != 0) return
+    setNewFriendApplyCount(res.data.count)
+    updateNewFriendApply(res&&res.data&&res.data.count&&res.data.count>0?true:false)
+  }, 1000);
+}
+
+// 全局监听socket文件
+useGlobalEvent({
+  getNewfriendApplyCount
+});
+
+const $api = inject("$api");
+watch(mode, (val) => {
+  if (val === 'dark' || localStorage.get('theme') === 'dark') {
+    theme.value = 'dark'
+    document.querySelector('html')
+      .setAttribute('data-theme', 'dark')
+  }
+  else {
+    theme.value = 'light'
+    document.querySelector('html')
+      .setAttribute('data-theme', 'light')
+  }
+}, { immediate: true })
+
+provide('isRealDark', computed(() => theme.value === 'dark'))
+
+
+const handleNetworkChange = () => {
+  console.log('网络状态', navigator.onLine)
+  if (navigator.onLine === false) {
+    // 如果网络掉线5s后更新状态
+    setTimeout(() => {
+      if (navigator.onLine === false) {
+        networkOnline.value = false
+      }
+    }, 5000)
+  } else {
+    networkOnline.value = true
+  }
+}
+const networkOnline = ref(true)
+const onlyOneTab = ref(true)
+
+const handleStorageChange = async (e) => {
+  let num = Number(localStorage.get('pageInstanceNum')) || 0
+  if (num <= 1) {
+    onlyOneTab.value = true
+  } else {
+    onlyOneTab.value = false
+  }
+  // token发生变化
+  if (e.key === 'token') {
+    if (e.newValue) {
+      // 如果有老值，证明登录过, 那就需要重新登录
+      if (e.oldValue) {
+        // await IMSDK.logout()
+        // await IMSDK.login(im_config)
+        location.reload()
+      } else {
+        // 如果没有老的值，就是新登录的
+        // await sdkInit(false)
+        // router.push('/firstScreen')
+      }
+    } else {
+      // 表示登出
+      location.reload()
+      // const { data } = await IMSDK.getLoginStatus()
+      // if (data !== 1) {
+      //   IMSDK.logout()
+      // }
+    }
+  }
+}
+
+const handleVisibilityChange = (e) => {
+  if(!document.hidden) {
+    console.log('页面可见');
+    if (!onlyOneTab.value) {
+      location.reload(true)
+    }
+  }
+}
+
+const handleErrorChange = (message, source, lineno, colno, error) => {
+  console.error('捕获到全局错误:: ');
+  location.reload(true)
+}
+const setNativeListener = () => {
+  window.addEventListener('offline', handleNetworkChange)
+  window.addEventListener('online', handleNetworkChange)
+  window.addEventListener('storage', handleStorageChange)
+  window.addEventListener('visibilitychange', handleVisibilityChange )
+  // window.addEventListener('error', handleErrorChange )
+}
+
+const removeNativeListener = () => {
+  window.removeEventListener('offline', handleNetworkChange)
+  window.removeEventListener('online', handleNetworkChange)
+  window.removeEventListener('storage', handleStorageChange)
+  window.removeEventListener('visibilitychange', handleVisibilityChange)
+  // window.removeEventListener('error', handleErrorChange)
+}
+
+const uploadRecord = async () => {
+  if (!localStorage.get('visitorId')) {
+    await getFingerIdAndSave()
+  }
+  await $api.user.userReentrantRecord({
+    device_id: localStorage.get('visitorId'),
+    platform: 5, 
+  })
+}
+
+provide('networkOnline', networkOnline)
+
+onMounted(async () => {
+  // 存储设备id防止wss断连
+  sessionStorage.setItem('usePlatformID', useSystem());
+  setNativeListener();
+  emitter.on("SYNC_NEWFRIENDS_COUNT", getNewfriendApplyCount);
+  await getConfigInfo()
+  await loginCheck()
+  setTimeout(async () => {
+    if (!(route.path ==='/firstScreen' || route.path ==='/login')) {
+      await updateAppConfig()
+    }
+  }, 2000);
+})
+
+onBeforeUnmount(() => {
+  removeNativeListener()
+  emitter.off("SYNC_NEWFRIENDS_COUNT", getNewfriendApplyCount);
+})
+
+router.beforeEach(async (to, from, next) => {
+  const IMToken = localStorage.get('im_token')
+  const IMUserID = localStorage.get('user_id')
+  setBodyBackgroundColor(to.path) // 根据路由设置背景色
+  if (to.path === '/firstScreen') {
+    next();
+    return
+  }
+  console.log('to:::', to, from)
+  if (from.path === '/login' || from.path === '/otherLogin' || from.path === '/welcomePage') {
+    const { data } = await IMSDK.getLoginStatus()
+    console.log('beforeEach----', data, IMToken, IMUserID)
+    if (data !== LoginStatus.Logged) {
+      await loginCheck();
+    }
+  }
+  next();
+})
+
+const loginCheck = async () => {
+  const IMToken = localStorage.get('im_token')
+  const IMUserID = localStorage.get('user_id')
+  if (!IMToken || !IMUserID) {
+    // fix 2024-8-12 这个方法会导致sdk 报错暂时注释掉
+    // await IMSDK.getLoginStatus()
+    if (route.path !== '/login' && route.path !== '/otherLogin') { 
+      router.push('/firstScreen');
+    }
+    return;
+  }
+  tryLogin();
+};
+
+const imLoginStatus = ref(false)
+const tryLogin = async () => {
+  try {
+    if (!localStorage.get('visitorId')) {
+      await getFingerIdAndSave()
+    }
+    const params = im_config()
+    await IMSDK.login(params)
+    imLoginStatus.value = true
+    const { data } = await IMSDK.getLoginStatus()
+    // 1没有登录 2登录中 3 登录结束 
+    if (data===3) {
+      await updateAppConfig()
+    }
+    // uploadRecord()
+    console.error('获取登录状态getLoginStatus',data)
+    uploadRecord()
+    // 初始化store
+    initStore();
+    const Token = localStorage.get('token')
+    const IMToken = localStorage.get('im_token')
+    /** 
+     * 解决单点登录
+     * 登录成功 已存新token 但是登录状态未更新 还停留在login页面
+     * 判断是否是登录页面并且已存最新token，如果是就跳转首页
+     */
+  
+  const userInfoRes = await getUserInfo()
+    if ((route.path === '/login' || route.path === '/otherLogin') && IMToken && Token) {
+      // 昵称判断
+      if(!userInfoRes.nickname) {
+        router.push("/welcomePage");
+      } else {
+        router.push('/home');
+      }
+    } else {
+      router.push(route.fullPath);
+    }
+  } catch (error) {
+    console.log('eeeeeeeeee', error)
+    router.push('/firstScreen');
+    imLoginStatus.value = false
+  }
+}
+// const notNeedLoginPages = ['/login', '/otherLogin', '/firstScreen', '/signinAccount', '/otherSignin', '/forgotPassword','/resetPassword','/welcomePage','/setPassword']
+const setBodyBackgroundColor = (to) => {
+  const bodyDom = document.querySelector('body')
+  if(bodyDom){
+    const routeArr = ['/firstScreen']
+    if(routeArr.includes(to)) {
+      bodyDom.style.backgroundColor = '#111217'
+    } else {
+      bodyDom.style.backgroundColor = '#ffffff'
+    }
+  }
+}
+
+// 测试代码-系统
+const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+console.log(userAgent, 'userAgent')
+// fix 修复2024-8-28 注册\登录 页面空白问题
+const notNeedLoginPages = [
+  '/login', '/otherLogin', '/firstScreen', '/signinAccount', 
+  '/otherSignin', '/forgotPassword', '/resetPassword', 
+  '/welcomePage', '/setPassword'
+];
+const include = 'home/dialogue,home/contact,home/my';
+// Function to determine if the component should be rendered
+const shouldRenderComponent = (Component) => {
+  const componentName = Component?.name || '';
+  const isIncludedComponent = include.split(',').includes(componentName);
+  // Return the component if it's in the include list, or if other conditions are met
+  return isIncludedComponent || imLoginStatus.value || notNeedLoginPages.includes(route.path)
+    ? Component
+    : null;
+};
+</script>
+
+<template>
+  <downloadBanner/>
+  <!-- <VanConfigProvider :theme="theme" class="app_main">
+    <router-view v-slot="{ Component }">
+      <keep-alive include="home/dialogue,home/contact,home/my">
+        <component v-if="imLoginStatus || notNeedLoginPages.includes(route.path)" :is="Component" />
+      </keep-alive>
+    </router-view>
+  </VanConfigProvider> -->
+  <!-- fix 2024-8-28 修复登录、注册-空白页面问题 -->
+  <VanConfigProvider :theme="theme" class="app_main">
+    <router-view v-slot="{ Component }">
+      <keep-alive :include="include">
+        <component :is="shouldRenderComponent(Component) ? Component : null" />
+      </keep-alive>
+    </router-view>
+  </VanConfigProvider>
+</template>
+<style lang='less' scoped>
+</style>
+
+<style>
+@import './assets/commonCSS/rootCss.css';
+/* body {
+  background-color: #000 !important;
+} */
+</style>
diff --git a/src/api/avatar.js b/src/api/avatar.js
new file mode 100644
index 0000000..3b642ee
--- /dev/null
+++ b/src/api/avatar.js
@@ -0,0 +1,18 @@
+import request from "./request";
+
+const api = {
+    // 查询头像
+    avatarList: (data) => {
+        return request.post('/v1/user/avatar/list', data, { urlTag: 'api_2' })
+    },
+    // 删除头像
+    avatarDelete: (data) => {
+        return request.post('/v1/user/avatar/delete', data, { urlTag: 'api_2' })
+    },
+    // 添加头像
+    avatarAdd: (data) => {
+        return request.post('/v1/user/avatar/add', data, { urlTag: 'api_2' })
+    },
+}
+
+export default api
\ No newline at end of file
diff --git a/src/api/community.js b/src/api/community.js
new file mode 100644
index 0000000..3187dcc
--- /dev/null
+++ b/src/api/community.js
@@ -0,0 +1,22 @@
+import request from "./request";
+
+const api = {
+    // 商户列表
+    userSubAdminList: (data) => {
+        return request.post('/v1/user/sub_admin/list', data, { urlTag: 'api_2' })
+    },
+    // 商户活动列表
+    communityActivityList: (data) => {
+        return request.post('/v1/community/activity/list', data, { urlTag: 'api_2' })
+    },
+    // 商户活动详情
+    communityActivityGet: (data) => {
+        return request.post('/v1/community/activity/get', data, { urlTag: 'api_2' })
+    },
+    // 商户活动详情
+    activityCheckOnlineStatus: (data) => {
+        return request.post('/v1/community/activity/check_online_status', data, { urlTag: 'api_2' })
+    },
+}
+
+export default api
\ No newline at end of file
diff --git a/src/api/contact.js b/src/api/contact.js
new file mode 100644
index 0000000..495dad5
--- /dev/null
+++ b/src/api/contact.js
@@ -0,0 +1,399 @@
+import request from "./request";
+
+const api = {
+  //通过UserIDs查找用户
+  queryInfoByuserId: data => {
+    return request.post("/v1/user/info/query", data, { urlTag: "api_2" });
+  },
+  //通过Uid查找用户,获取个人公开资料
+  queryUserById: data => {
+    return request.post("/v1/user/public_info/query", data, {
+      urlTag: "api_2"
+    });
+  },
+  //获取个人全部资料
+  getUserById: data => {
+    return request.post("/v1/user/info/query", data, { urlTag: "api_2" });
+  },
+  // 好友添加申请前校验
+  applyAddBefore: data => {
+    return request.post("/v1/friend/check_apply_add_before", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 好友数量校验
+  checkFriendTotal: data => {
+    return request.post("/v1/friend/check_friend_total", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 手机号后缀验证
+  checkFriendPhoneSuffix: data => {
+    return request.post("/v1/friend/check_friend_phone_suffix", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 群内发起好友申请前校验
+  checkAddFriendApplyByGroup: data => {
+    return request.post("/v1/friend/check_add_friend_apply_by_group", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 添加好友邮箱验证
+  checkFriendEmailSuffix: data => {
+    return request.post("/v1/friend/check_friend_email", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 删除面对面匹配输入值
+  deleteMateCode: data => {
+    return request.post("/v1/friend/delete_mate_Code", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 面对面匹配输入值
+  userBindCode: data => {
+    return request.post("/v1/friend/user_bind_code", data, { urlTag: "api_2" });
+  },
+  // 面对面添加好友
+  addFaceFriend: data => {
+    return request.post("/v1/friend/add_friend", data, { urlTag: "api_2" });
+  },
+  // 根据id添加好友
+  addUidFriend: data => {
+    return request.post("/v1/friend/add_friend_by_uin", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 群内根据id添加好友
+  addGroupFriendByUin: data => {
+    return request.post("/v1/friend/add_group_friend_by_uin", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 扫一扫添加好友
+  addScanFriend: data => {
+    return request.post("/v1/friend/add_friend_by_scan", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 面对面好友申请处理
+  applyFriend: data => {
+    return request.post("/v1/friend/respond_friend_apply", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取匹配好友信息
+  getMateUser: params => {
+    return request.get("/v1/friend/get_mate_user", { params });
+  },
+  // 识别图片二维码
+  getQrCode: data => {
+    return request.post("/v1/user/qrcode/get", data, { urlTag: "api_2" });
+  },
+  // 获取用户的最新的二维码
+  getLastestQrCode: data => {
+    return request.post("/v1/user/qrcode/lastest", data, { urlTag: "api_2" });
+  },
+  // 生成的最新的二维码
+  addQrCode: data => {
+    return request.post("/v1/user/qrcode/add", data, { urlTag: "api_2" });
+  },
+  // 获取好友分组列表
+  getFriendsGroupList: () => {
+    return request.get("/v1/friends_group/list", { urlTag: "api_2" });
+  },
+  // 创建好友分组
+  createFriendsGroup: data => {
+    return request.post("/v1/friends_group/create", data, { urlTag: "api_2" });
+  },
+  // 删除好友分组
+  deleteFriendsGroup: data => {
+    return request.post("/v1/friends_group/delete", data, { urlTag: "api_2" });
+  },
+  // 保存分组好友
+  saveFriendsGroup: data => {
+    return request.post("/v1/friends_group/friends_save", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 编辑好友分组名
+  updateFriendsGroup: data => {
+    return request.post("/v1/friends_group/update", data, { urlTag: "api_2" });
+  },
+  // 批量添加好友加入分组
+  batchAddFriends: data => {
+    return request.post("/v1/friends_group/friends_batch_add", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 批量移除分组内好友
+  batchRemoveFriends: data => {
+    return request.post("/v1/friends_group/friends_batch_remove", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取指定分组的好友列表
+  getFriendsGroupListById: data => {
+    return request.post("/v1/friends_group/friends_list", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取好友申请列表
+  getFriendApplyList: data => {
+    return request.post("/v1/friend/get_friend_apply_list", data, {
+      urlTag: "api_2"
+    });
+  },
+  getRespondFriendApplyByTime: data => {
+    return request.post("/v1/friend/get_respond_friend_apply_by_time", data, {
+      urlTag: "api_2"
+    });
+  },
+
+  // // 获取好友申请加自己
+  // getFriendApplyList: (data) => {
+  //   return request.post('/friend/get_friend_apply_list', data, { urlTag: 'api_3' });
+  // },
+  // // 获取自己申请加好友
+  // getSelfFriendApplayList: (data) => {
+  //   return request.post('/friend/get_self_friend_apply_list', data, { urlTag: 'api_3' });
+  // },
+  // 获取管理员或群主是否开启好友验证
+  getVerifyStatus: data => {
+    return request.post("/v1/user/settings/get", data, { urlTag: "api_2" });
+  },
+  // 更改管理员或群主开启好友验证
+  setVerifyStatus: data => {
+    return request.post("/v1/user/settings/update", data, { urlTag: "api_2" });
+  },
+  // 设置群成员信息 群管理员设置
+  setGroupMemberInfoApi: (data) => {
+    return request.post('/v1/group/set_group_member_info', data, { urlTag: 'api_2' });
+  },
+  // 设置群扩展字段里面消息信息 群管理员设置
+  setGroupInfoEx: data => {
+    return request.post("/v1/group/set_group_info_ex", data, {
+      urlTag: "api_2"
+    });
+  },
+  ossPutUrls: data => {
+    return request.post("/v1/user/oss_put_url", data, { urlTag: "api_2" });
+  },
+  awsPutUrls: data => {
+    return request.post("/v1/user/aws_put_url", data, { urlTag: "api_2" });
+  },
+  // 生成邀请链接
+  groupGenerateLink: data => {
+    return request.post("/v1/group/group_generate_link", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 删除链接
+  groupDeleteLink: data => {
+    return request.post("/v1/group/group_delete_link", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 设置链接时间
+  groupLinkTime: data => {
+    return request.post("/v1/group/group_link_time", data, { urlTag: "api_2" });
+  },
+  // 管理邀请链接
+  groupManageLink: data => {
+    return request.post("/v1/group/group_manage_link", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 邀请用户进群 -- 获取群信息
+  groupInviteInfo: data => {
+    return request.post("/v1/group/group_invite_info", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 删除会话消息
+  deleteconversationMsg: data => {
+    return request.post("/v1/msg/delete_conversation_msg", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取申请的进群的待处理 已处理 列表
+  getRecvGroupApplicationList: data => {
+    return request.post("/v1/group/get_recv_group_applicationList", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 群主或管理员处理进群申请 或全部同意
+  groupApplicationResponse: data => {
+    return request.post("/v1/group/group_application_response", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 删除本地聊天记录
+  deleteConversationMsgApi: data => {
+    return request.post("/v1/msg/delete_conversation_msg", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 查询群详情
+  getGroups: data => {
+    return request.post("/v1/group/get_groups", data, { urlTag: "api_2" });
+  },
+  // 根据UserID设置会话选项，包括置顶消息，免打扰，清空聊天记录，加入黑名单等（包括单聊和群聊）
+  setConversationsApi: data => {
+    return request.post("/v1/conversation/set_conversations", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 设置置顶群信息
+  setGroupTopMsg: data => {
+    return request.post("/v1/group/set_group_info_ex", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取置顶群信息
+  getGroupTopMsg: data => {
+    return request.post("/v1/msg/get_top_msg_list_by_msgId", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 设置群聊面具-开关
+  setGroupMask: data => {
+    return request.post("/v1/group/set_group_info_ex", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 发送红包
+  sendRedpkt: data => {
+    return request.post("/v1/envelope/send", data, { urlTag: "api_2" });
+  },
+  // 获取红包领取
+  getAssetFlowDetail: params => {
+    return request.get("/v1/property/get_asset_flow_detail", { params });
+  },
+  // 获取红包领取详情
+  getRedpktgetDetail: data => {
+    return request.post("/v1/envelope/get", data, { urlTag: "api_2" });
+  },
+  // 分页获取已领取所有用户
+  getRedpktgetList: data => {
+    return request.post("/v1/envelope/get_receivers_by_envelope_id", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 发送群公告
+  setGroupNotification: data => {
+    return request.post("/v1/group/send_group_notification", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 群成员信息查询
+  getGroupMemberInfoEx: data => {
+    return request.post(
+      "/v1/group/get_group_members_info_ex",
+      data,
+      { urlTag: "api_2" }
+    );
+  },
+  // 领取红包
+  claimRedpkt: data => {
+    return request.post("/v1/envelope/claim", data, { urlTag: "api_2" });
+  },
+  // 添加转发消息
+  saveTransmitMessage: data => {
+    return request.post("/v1/msg/set_relay_message", data, { urlTag: "api_2" });
+  },
+  // 获取转发消息
+  getTransmitMessage: params => {
+    return request.get("/v1/msg/get_relay_message", { params });
+  },
+  // 添加好友条件校验
+  validateAddFriendByUser: data => {
+    return request.post("/v1/friend/validate_add_friend_by_user", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取群发会话列表
+  getBatchConversationList: data => {
+    return request.post("/v1/batch/get_batch_conversation_list", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 删除群发会话
+  batchDeleteConversation: data => {
+    return request.post("/v1/batch/delete_batch_conversation", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取单个群发会话消息列表
+  getMessageListByBatchConversation: data => {
+    return request.post(
+      "/v1/batch/get_message_list_by_batch_conversation",
+      data,
+      { urlTag: "api_2" }
+    );
+  },
+  // 单个群发会话发消息
+  sendMessageByBatchConversation: data => {
+    return request.post("/v1/batch/send_message_by_batch_conversation", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 创建群发会话
+  createBatchConversation: data => {
+    return request.post("/v1/batch/create_batch_conversation", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 设置阅后即焚
+  setConversationBurnAfterReading: data => {
+    return request.post(
+      "/v1/conversation/set_conversation_burn_after_reading",
+      data,
+      { urlTag: "api_2" }
+    );
+  },
+  // 删除本地消息记录，清除远端焚烧消息
+  burnMsgByClearMsg: data => {
+    return request.post(
+      "/msg/burn_msg_by_clear_msg",
+      data,
+      { urlTag: "api_3" }
+    );
+  },
+  // 删除该用户在本群发送的群消息
+  delGroupMsgByUserId: data => {
+    return request.post(
+      "/msg/delete_msg_by_user_id",
+      data,
+      { urlTag: "api_3" }
+    );
+  },
+  // 获取服务器当前时间
+  getCurrentTime: (data = {}) => {
+    return request.post(
+      "/v1/logger/get_current_time",
+      data,
+      { urlTag: "api_2" }
+    );
+  },
+  // 获取用户群聊数量
+  countJoinedGroups: (data = {}) => {
+    return request.post(
+      "/group/count_joined_groups",
+      data,
+      { urlTag: "api_3" }
+    );
+  },
+  // 获取用户群聊数量
+  friendIsFriend: (data = {}) => {
+    return request.post(
+      "friend/is_friend",
+      data,
+      { urlTag: "api_3" }
+    );
+  },
+};
+
+
+export default api;
diff --git a/src/api/file.js b/src/api/file.js
new file mode 100644
index 0000000..814abca
--- /dev/null
+++ b/src/api/file.js
@@ -0,0 +1,18 @@
+import request from "./request";
+
+const api = {
+  //oss上传地址获取
+  ossPutUrl: data => {
+    return request({
+      method: "post",
+      url: '/v1/user/oss_put_url',
+      data,
+      urlTag: "api_2"
+    });
+  },
+  ossPutUrls: (data) => {
+    return request.post('/v1/user/oss_put_url', data, { urlTag: "api_2" });
+  }
+}
+export default api
+
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..e6fe6b2
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,19 @@
+import login from './login.js'
+import user from './user.js'
+import contact from './contact.js'
+import setting from './setting.js'
+import msg_privateChat from "@/api/msg_privateChat.js";
+import file from './file.js'
+import avatar from './avatar.js'
+import community from './community.js'
+const api = {
+  login,
+  user,
+  contact,
+  setting,
+  msg_privateChat,
+  file,
+  avatar,
+  community,
+}
+export default api
\ No newline at end of file
diff --git a/src/api/line-request.js b/src/api/line-request.js
new file mode 100644
index 0000000..4d2633d
--- /dev/null
+++ b/src/api/line-request.js
@@ -0,0 +1,258 @@
+import axios from "axios";
+import router from "@/router";
+import { showToast, showDialog } from "vant";
+import { useUserStore } from "@/stores/user";
+import { removeAllLocalstorage } from "@/utils/tools";
+import { i18n } from "@/lang/index";
+import use from "@/use";
+const { useEmailLang } = use;
+const { t } = i18n.global;
+let appConfig = sessionStorage.getItem("appConfig")
+  ? JSON.parse(sessionStorage.getItem("appConfig"))
+  : {};
+const { DEV, VITE_APP_PUB_API, VITE_APP_MSG_API } = import.meta.env;
+// @ts-ignore
+const { api_2, api_3, api_1 } = window.WEB_CONFIG;
+const service = axios.create({
+  timeout: 60000, // 请求超时时间毫秒
+  withCredentials: false, // 异步请求携带cookie
+  headers: {
+    // 设置后端需要的传参类型
+    "Content-Type": "application/json"
+  }
+});
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    //给请求头设置token
+    const token = window.localStorage.getItem("token") || "";
+    let globalRequestPrefix = sessionStorage.getItem("globalRequestPrefix")
+    if (config.urlTag === "api_1") {
+      config.headers.Token = token;
+      config.headers.Authorization = token;
+      // console.error('最后的1',window.WEB_CONFIG);
+      if (globalRequestPrefix) {
+        window.WEB_CONFIG.api_1 = globalRequestPrefix + '/manage-api'
+        config.baseURL = globalRequestPrefix + '/manage-api'
+      } else {
+        config.baseURL = DEV ? "/api_1" : api_1;
+      }
+      config.headers.language = useEmailLang();
+    }
+    if (
+      config.url === "/v1/friend/get_mate_user" ||
+      config.url === "/v1/property/get_asset_flow_detail" ||
+      config.url === "/v1/image/get_head_image_list_by_type" ||
+      config.url === "/v1/msg/get_relay_message" ||
+      config.url === "/v1/property/get_asset_flow_detail"
+    ) {
+      config.urlTag = "api_2";
+    }
+    if (config.urlTag === "api_2") {
+      // console.error('最后的2',window.WEB_CONFIG);
+      if (globalRequestPrefix) {
+        window.WEB_CONFIG.api_2 = globalRequestPrefix +'/chat-api'
+        config.baseURL = globalRequestPrefix +'/chat-api'
+      } else {
+        config.baseURL = DEV ? "/api_2" : api_2;
+      }
+      config.headers.token = token;
+      if (config.url === "/v1/user/oss_put_url") {
+        config.headers.operationID = +new Date();
+      }
+      config.headers.language = useEmailLang();
+    }
+    if (config.urlTag === "api_3") {
+      config.headers.Operationid = +new Date();
+      config.headers.operationID = localStorage.getItem("user_id");
+      config.headers.token = localStorage.getItem("im_token");
+      // console.error('最后的3',window.WEB_CONFIG);
+      if (globalRequestPrefix) {
+        window.WEB_CONFIG.api_3 = globalRequestPrefix +'/chat-server-api'
+        config.baseURL = globalRequestPrefix +'/chat-server-api'
+      } else {
+        config.baseURL = DEV ? "/api_3" : api_3;
+      }
+      config.headers.language = useEmailLang();
+    }
+    console.error('线路检测的config',config);
+    return config;
+  },
+  error => {
+    showToast({ position: "top", message: error.message });
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    const { data, request } = response;
+    const { code, msg, detail } = data;
+    const { responseURL } = request;
+    const userStore = useUserStore();
+    if (code === 511) {
+      if (
+        responseURL.includes("/v1/login") ||
+        responseURL.includes("/v1/user/phone_login")
+      ) {
+        showToast({ message: "系统正在维护中" });
+      }
+      return data;
+    }
+    if (code === 401) {
+      removeAllLocalstorage();
+      router.push({ path: "/firstScreen" });
+      return data;
+    }
+    if (code === 1119) {
+      // 登录失效
+      showDialog({
+        title: t("dialog_tip1"),
+        message: "您的账户已在其他设备登录，如非本人操作，请立即修改登录密码！",
+        confirmButtonText: t("know")
+      }).then(() => {
+        removeAllLocalstorage();
+        router.push({ path: "/firstScreen" });
+        return data;
+      });
+      return;
+    }
+    if (code === 200) {
+      // 将组件用的数据返回
+      return data;
+    } else {
+      // 添加好友条件校验返回
+      if (
+        code === 6083 ||
+        code === 6077 ||
+        code === 6018 ||
+        code === 6093 ||
+        code === 6105 ||
+        code === 6106 ||
+        code === 6107 ||
+        code === 6110 ||
+        code === 6102
+      ) {
+        return data;
+      }
+      // 处理业务错误。
+      if (detail && code != 5050 && code !== 500) {
+        if (code === 100003) {
+          return data;
+        }
+        if (code === 100002) {
+          return data;
+        }
+        if (code === 6008 || code === 6005) {
+          showToast({ position: "top", message: t("error_6005") });
+          return {
+            code: code
+          };
+        }
+        if (code === 6011 || code === 6017) {
+          showToast({ position: "top", message: t("error_6011") });
+          return {
+            code: code
+          };
+        }
+        if (code === 6090) {
+          showToast({ position: "top", message: t("error_6090") });
+          return {
+            code: code
+          };
+        }
+        if (code === 6100) {
+          showToast({
+            position: "top",
+            message: t("error_6100", {
+              day: appConfig?.modify_nickName_limit?.day
+            })
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6103) {
+          showToast({
+            position: "top",
+            message: t("error_6103")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6104) {
+          showToast({
+            position: "top",
+            message: t("error_6104")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6108) {
+          showToast({
+            position: "top",
+            message: t("error_6108")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6034) {
+          showToast({
+            position: "top",
+            message: t("friendNumberCatchTopLimit")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6109) {
+          showToast({
+            position: "top",
+            message: t("error_6109")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6035) {
+          showToast({
+            position: "top",
+            message: t("error_6035")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6007 || code === 6087 || code === 6088) {
+          showToast({
+            position: "top",
+            message: t("error_6007")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6078) {
+          showToast({
+            position: "top",
+            message: t("error_6078")
+          });
+          return data;
+        }
+        showToast({ position: "top", message: detail });
+      }
+      return data;
+    }
+  },
+  error => {
+    // // HTTP 状态码
+    // const status = error.response?.status;
+    console.error('处理 HTTP 网络错误',error);
+    return Promise.reject(error);
+  }
+);
+export default service;
diff --git a/src/api/login.js b/src/api/login.js
new file mode 100644
index 0000000..696f4ec
--- /dev/null
+++ b/src/api/login.js
@@ -0,0 +1,189 @@
+// import request from "@/utils/request.js";
+import request from "./request";
+
+const api = {
+  getPubKey: () => {
+    return request.post("/v1/system/auth/get_pub_key", { urlTag: "api_2" });
+  },
+  login: data => {
+    return request.post("/v1/account/login", data, { urlTag: "api_2" });
+  },
+  // 申请设备审核
+  addVerify: data => {
+    return request.post("/v1/account/device/add_verify", data, { urlTag: "api_2" });
+  },
+  // 获取区号
+  getAreaList: data => {
+    return request.post("/v1/area/list", data, { urlTag: "api_2" });
+  },
+  // 搜索区号
+  searchAreaList: data => {
+    return request.post("/v1/area/search", data, { urlTag: "api_2" });
+  },
+  // 检查用户名接口
+  checkAccount: data => {
+    return request.post("/v1/account/check_account", data, { urlTag: "api_2" });
+  },
+  // 发送验证码接口
+  sendCode: data => {
+    return request.post("/v1/account/code/send", data, { urlTag: "api_2" });
+  },
+  // 检查验证码是否正确
+  checkCode: data => {
+    return request.post("/v1/account/code/verify", data, { urlTag: "api_2" });
+  },
+  // 退出登录接口
+  logout: data => {
+    return request.post("/v1/account/logout", data, { urlTag: "api_2" });
+  },
+  // 修改密码接口
+  updatePas: data => {
+    return request.post("/v1/account/password/change", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 第三方登录账号设置密码接口
+  setThirdLoginPas: data => {
+    return request.post("/v1/account/password/add", data, { urlTag: "api_2" });
+  },
+  // // 重置密码接口
+  // resetPas: data => {
+  //   return request.post("/v1/account/password/reset", data, {
+  //     urlTag: "api_2"
+  //   });
+  // },
+  // 新重置密码接口
+  resetPas: data => {
+    return request.post("v1/account/password/reset_with_verify_key", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 注册
+  register: data => {
+    return request.post("/v1/account/register", data, { urlTag: "api_2" });
+  },
+  // 查看用户信息
+  userInfo: data => {
+    return request.post("/v1/user/get", data, { urlTag: "api_2" });
+  },
+  // 获取后台配置的登录注册方式
+  getConfigInfo: data => {
+    return request.post("/v1/config/get", data, { urlTag: "api_2" });
+  },
+  // 获取后台群主配置（章云）
+  getGroupSettings: data => {
+    return request.post("/v1/config/group_settings", data, { urlTag: "api_2" });
+  },
+  // 修改个人资料
+  updateUserInfo: data => {
+    return request.post("/v1/user/update", data, { urlTag: "api_2" });
+  },
+  // 修改个人昵称
+  updateNickname: data => {
+    return request.post("/v1/user/nickname/update", data, { urlTag: "api_2" });
+  },
+  // 设备列表
+  getDeviceList: data => {
+    return request.post("/v1/account/device/list", data, { urlTag: "api_2" });
+  },
+  // 移除设备
+  deleteDevice: data => {
+    return request.post("/v1/account/device/delete", data, { urlTag: "api_2" });
+  },
+  // 设备登录日志列表
+  deviceDetail: data => {
+    return request.post("/v1/account/device/login_log/list", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 账号是否注册
+  isRegister: data => {
+    return request.post("/v1/account/login/is_register", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 绑定手机号
+  bindPhone: data => {
+    return request.post("/v1/user/bind_phone", data, { urlTag: "api_2" });
+  },
+  // 换绑手机号
+  changePhone: data => {
+    return request.post("/v1/user/change_phone", data, { urlTag: "api_2" });
+  },
+  // 绑定邮箱
+  bindEmail: data => {
+    return request.post("/v1/user/bind_email", data, { urlTag: "api_2" });
+  },
+  // 换绑邮箱
+  changeEmail: data => {
+    return request.post("/v1/user/change_email", data, { urlTag: "api_2" });
+  },
+  // 短信码校验
+  verifyCode: data => {
+    return request.post("/v1/account/code/verify", data, { urlTag: "api_2" });
+  },
+  // 用户登录状态
+  userLoginStatus: data => {
+    return request.post("/v1/user/login/status", data, { urlTag: "api_2" });
+  },
+  // 获取用户余额
+  getUserBalance: () => {
+    return request.get("/v1/property/get_balance", { urlTag: "api_2" });
+  },
+  // 获取用户资产流水列表
+  getUserAssetFlow: data => {
+    return request.post("/v1/property/get_asset_flow_list", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 获取用户资产流水详情
+  getUserAssetFlowDetail: params => {
+    return request.get("/v1/property/get_asset_flow_detail", { params });
+  },
+  // 获取红包详情
+  getEnvelope: data => {
+    return request.post("/v1/envelope/get", data, { urlTag: "api_2" });
+  },
+  // 获取APP版本号
+  getVersion: data => {
+    return request.post("/v1/version/get", data, { urlTag: "api_2" });
+  },
+  // 获取当前类别下所有头像信息 type:1群聊头像 2个人头像 3群头像
+  getAllImageByType: params => {
+    return request.get("/v1/image/get_head_image_list_by_type", { params });
+  },
+  // 提出注销申请
+  applicationApply: () => {
+    return request.post(
+      "/v1/account/application/apply",
+      {},
+      { urlTag: "api_2" }
+    );
+  },
+  // 获取申请详情
+  applicationGet: data => {
+    return request.post("/v1/account/application/get", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 撤销注销申请
+  applicationCancel: data => {
+    return request.post("/v1/account/application/cancel", data, {
+      urlTag: "api_2"
+    });
+  },
+  // 创建新的登录二维码
+  generateQrcode: data => {
+    return request.post("/v1/account/auth/generate_qrcode", data, { urlTag: "api_2" });
+  },
+  // 获取二维码登录信息
+  getLoginQrcode: data => {
+    return request.post("/v1/account/auth/get_login_qrcode", data, { urlTag: "api_2" });
+  },
+  // 获取ip 地址和归属地
+  getAddressLocationIp: () => {
+    return request.get('v1/area/search_ip_info', { urlTag: 'api_2' });
+  },  
+};
+
+export default api;
diff --git a/src/api/msg_privateChat.js b/src/api/msg_privateChat.js
new file mode 100644
index 0000000..033c0e1
--- /dev/null
+++ b/src/api/msg_privateChat.js
@@ -0,0 +1,15 @@
+import request from "./request";
+
+const api = {
+  //查询公共用户信息
+  query_public_userInfo:data=>{
+    return request.post('/v1/user/public_info/query',data, { urlTag: 'api_2' });
+  },
+  //查询群在线人数
+  queryGroupMemberOnlineCount:data=>{
+    return request.post('/v1/group/get_group_member_online_count',data, { urlTag: 'api_2' });
+  }
+
+}
+
+export default api
\ No newline at end of file
diff --git a/src/api/request.js b/src/api/request.js
new file mode 100644
index 0000000..2d552c5
--- /dev/null
+++ b/src/api/request.js
@@ -0,0 +1,322 @@
+import axios from "axios";
+import router from "@/router";
+import { showToast, showDialog } from "vant";
+import { useUserStore } from "@/stores/user";
+import { removeAllLocalstorage } from "@/utils/tools";
+import { i18n } from "@/lang/index";
+import use from "@/use";
+const { useEmailLang } = use;
+const { t } = i18n.global;
+let appConfig = sessionStorage.getItem("appConfig")
+  ? JSON.parse(sessionStorage.getItem("appConfig"))
+  : {};
+const { DEV, VITE_APP_PUB_API, VITE_APP_MSG_API } = import.meta.env;
+// @ts-ignore
+const { api_2, api_3, api_1 } = window.WEB_CONFIG;
+// fix 2024-8-15 保留日志打印
+// console.error('api_1',api_1);
+// console.error('api_2',api_2);
+// console.error('api_3',api_3);
+console.error('DEV',DEV);
+
+// const maxSlowCount = 5;
+// let slowCount = 0;
+// const api_2 = 'https://dev-im-m.exchangs.top/chat-api'
+const service = axios.create({
+  // baseURL: DEV ? VITE_APP_PUB_API : api_2, // 所有的请求地址前缀部分
+  timeout: 60000, // 请求超时时间毫秒
+  withCredentials: false, // 异步请求携带cookie
+  headers: {
+    // 设置后端需要的传参类型
+    "Content-Type": "application/json"
+  }
+});
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    // 记录请求开始时间
+    // config.startTime = new Date().getTime();
+    //给请求头设置token
+    const token = window.localStorage.getItem("token") || "";
+    let globalRequestPrefix = sessionStorage.getItem("globalRequestPrefix")
+    if (config.urlTag === "api_1") {
+      config.headers.Token = token;
+      config.headers.Authorization = token;
+      // console.error('最后的1',window.WEB_CONFIG);
+      if (globalRequestPrefix) {
+        window.WEB_CONFIG.api_1 = globalRequestPrefix + '/manage-api'
+        config.baseURL = globalRequestPrefix + '/manage-api'
+      } else {
+        config.baseURL = DEV ? "/api_1" : api_1;
+      }
+      config.headers.language = useEmailLang();
+    }
+    if (
+      config.url === "/v1/friend/get_mate_user" ||
+      config.url === "/v1/property/get_asset_flow_detail" ||
+      config.url === "/v1/image/get_head_image_list_by_type" ||
+      config.url === "/v1/msg/get_relay_message" ||
+      config.url === "/v1/property/get_asset_flow_detail"
+    ) {
+      config.urlTag = "api_2";
+    }
+    if (config.urlTag === "api_2") {
+      // console.error('最后的2',window.WEB_CONFIG);
+      if (globalRequestPrefix) {
+        window.WEB_CONFIG.api_2 = globalRequestPrefix +'/chat-api'
+        config.baseURL = globalRequestPrefix +'/chat-api'
+      } else {
+        config.baseURL = DEV ? "/api_2" : api_2;
+      }
+      config.headers.token = token;
+      if (config.url === "/v1/user/oss_put_url") {
+        config.headers.operationID = +new Date();
+      }
+      config.headers.language = useEmailLang();
+    }
+    if (config.urlTag === "api_3") {
+      config.headers.Operationid = +new Date();
+      config.headers.operationID = localStorage.getItem("user_id");
+      config.headers.token = localStorage.getItem("im_token");
+      // console.error('最后的3',window.WEB_CONFIG);
+      if (globalRequestPrefix) {
+        window.WEB_CONFIG.api_3 = globalRequestPrefix +'/chat-server-api'
+        config.baseURL = globalRequestPrefix +'/chat-server-api'
+      } else {
+        config.baseURL = DEV ? "/api_3" : api_3;
+      }
+      config.headers.language = useEmailLang();
+    }
+    // console.error('config',config);
+    return config;
+  },
+  error => {
+    showToast({ position: "top", message: error.message });
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    const { data, request } = response;
+    const { code, msg, detail } = data;
+    const { responseURL } = request;
+    const userStore = useUserStore();
+    const { setToken } = userStore;
+    if (code === 511) {
+      if (
+        responseURL.includes("/v1/login") ||
+        responseURL.includes("/v1/user/phone_login")
+      ) {
+        showToast({ message: "系统正在维护中" });
+      }
+      return data;
+    }
+    if (code === 401) {
+      // 登录失效
+      // showDialog({
+      //   title: '温馨提示',
+      //   message: '您的账户已在其他设备登录，如非本人操作，请立即修改登录密码！',
+      // }).then(() => {
+      removeAllLocalstorage();
+      router.push({ path: "/firstScreen" });
+      return data;
+    }
+    if (code === 1119) {
+      // 登录失效
+      showDialog({
+        title: t("dialog_tip1"),
+        message: "您的账户已在其他设备登录，如非本人操作，请立即修改登录密码！",
+        confirmButtonText: t("know")
+      }).then(() => {
+        removeAllLocalstorage();
+        router.push({ path: "/firstScreen" });
+        return data;
+      });
+      return;
+    }
+    if (code === 200) {
+      // 将组件用的数据返回
+      return data;
+    } else {
+      // 添加好友条件校验返回
+      if (
+        code === 6083 ||
+        code === 6077 ||
+        code === 6018 ||
+        code === 6093 ||
+        code === 6105 ||
+        code === 6106 ||
+        code === 6107 ||
+        code === 6110 ||
+        code === 6102
+      ) {
+        return data;
+      }
+      // 处理业务错误。
+      if (detail && code != 5050 && code !== 500) {
+        if (code === 100003) {
+          return data;
+        }
+        if (code === 100002) {
+          return data;
+        }
+        if (code === 6008 || code === 6005) {
+          showToast({ position: "top", message: t("error_6005") });
+          return {
+            code: code
+          };
+        }
+        if (code === 6011 || code === 6017) {
+          showToast({ position: "top", message: t("error_6011") });
+          return {
+            code: code
+          };
+        }
+        if (code === 6090) {
+          showToast({ position: "top", message: t("error_6090") });
+          return {
+            code: code
+          };
+        }
+        if (code === 6100) {
+          showToast({
+            position: "top",
+            message: t("error_6100", {
+              day: appConfig?.modify_nickName_limit?.day
+            })
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6103) {
+          showToast({
+            position: "top",
+            message: t("error_6103")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6104) {
+          showToast({
+            position: "top",
+            message: t("error_6104")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6108) {
+          showToast({
+            position: "top",
+            message: t("error_6108")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6034) {
+          showToast({
+            position: "top",
+            message: t("friendNumberCatchTopLimit")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6109) {
+          showToast({
+            position: "top",
+            message: t("error_6109")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6035) {
+          showToast({
+            position: "top",
+            message: t("error_6035")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6007 || code === 6087 || code === 6088) {
+          showToast({
+            position: "top",
+            message: t("error_6007")
+          });
+          return {
+            code: code
+          };
+        }
+        if (code === 6078) {
+          showToast({
+            position: "top",
+            message: t("error_6078")
+          });
+          return data;
+        }
+        if (code === 6001) {
+          showToast({
+            position: "top",
+            message: t("error_6001")
+          });
+          return data;
+        }
+        if (code === 6031) {
+          showToast({
+            position: "top",
+            message: t("error_6031")
+          });
+          return data;
+        }
+        if (code === 6032) {
+          showToast({
+            position: "top",
+            message: t("error_6032")
+          });
+          return data;
+        }
+        showToast({ position: "top", message: detail });
+      }
+      return data;
+    }
+  },
+  error => {
+    // 处理 HTTP 网络错误
+    let message = "";    
+    // HTTP 状态码
+    const status = error.response?.status;
+    switch (status) {
+      case 401:
+        message = t("dialog_tip_token_invaild");
+        removeAllLocalstorage();
+        router.push({ path: "/firstScreen" });
+        // 这里可以触发退出的 action
+        break;
+      case 403:
+        message = t("noPermission");
+        break;
+      case 404:
+        message = t("pageNotFound");
+        break;
+      case 500:
+        message = t("serverError");
+        break;
+      case 502:
+        message = t("databaseError");
+        break;
+      default:
+        message = t("networkError");
+    }
+    showToast({ position: "top", message: message });
+    return Promise.reject(error);
+  }
+);
+
+export default service;
diff --git a/src/api/setting.js b/src/api/setting.js
new file mode 100644
index 0000000..bd1c0bc
--- /dev/null
+++ b/src/api/setting.js
@@ -0,0 +1,38 @@
+import request from "./request";
+
+const api = {
+    // 设置语言
+    setLanguage: (data) => {
+        return request.post('/v1/user/language_preference', data, { urlTag: 'api_2' })
+    },
+    // 解散群
+    dismissGrounp: (data) => {
+        return request.post('/v1/group/dismiss_group', data, { urlTag: 'api_2' })
+    },
+    // 获取群成员列表
+    getGroupMemberList: (data) => {
+        return request.post('/v1/group/get_group_member_list', data, { urlTag: 'api_2' })
+    },
+    // 获取系统聊天背景配置
+    getSysBgSettings: (data) => {
+        return request.post('/v1/chat/get_sys_background_settings', data, { urlTag: 'api_2' })
+    },
+    // 获取用户聊天背景配置
+    getUserBgSettings: (data) => {
+        return request.post('/v1/chat/get_user_background_settings', data, { urlTag: 'api_2' })
+    },
+    // 获取用户配置
+    getUserInfoSettings: (data) => {
+        return request.post('/v1/user/settings/get', data, { urlTag: 'api_2' })
+    },
+    // 设置用户聊天背景
+    setGlobalAppearance: (data) => {
+        return request.post('/v1/chat/set_user_background_settings', data, { urlTag: 'api_2' })
+    },
+    // 设置用户字体大小
+    setGlobalFontSize: (data) => {
+        return request.post('/v1/user/settings/font_size/set', data, { urlTag: 'api_2' })
+    },
+}
+
+export default api
\ No newline at end of file
diff --git a/src/api/typing.ts b/src/api/typing.ts
new file mode 100644
index 0000000..a1936ef
--- /dev/null
+++ b/src/api/typing.ts
@@ -0,0 +1,16 @@
+export interface ResponseBody<T = any> {
+  message?: string
+  code?: number
+  data?: T
+  success: boolean
+}
+
+/** 统一返回结构体 */
+
+export interface PageResult<T = any> {
+  data: T[]
+  current?: number
+  pageSize?: number
+  total?: number
+  success: boolean
+}
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..9d60aa9
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,124 @@
+import request from "./request";
+
+let api = {
+  getPubKey: () => {
+    return request.post('/v1/cipher/get_pub_key');
+  },
+  configGet: () => {
+    return request.post('/v1/user/config/get', { urlTag: 'api_2' });
+  },
+  login: (data) => {
+    return request.post('/v1/user/login', data, { urlTag: 'api_2' });
+  },
+  logout: (data) => {
+    return request.post('/v1/user/logout', data, { urlTag: 'api_2' });
+  },
+  usernameRegister: (data) => {
+    return request.post('/v1/user/create', data, { urlTag: 'api_2' });
+  },
+  phoneRegister: (data) => {
+    return request.post('/v1/user/register', data, { urlTag: 'api_2' });
+  },
+  checkAccount: (data) => {
+    return request.post('/v1/user/check_account', data, { urlTag: 'api_2' });
+  },
+  resetPassword: (data) => {
+    return request.post('/v1/user/reset_password', data, { urlTag: 'api_2' });
+  },
+  resetPasswordByIdentity: (data) => {
+    return request.post('/v1/user/reset_password_by_identity', data, { urlTag: 'api_2' });
+  },
+  verifyCodeSend: (data) => {
+    return request.post('/v1/user/verify_code/send', data, { urlTag: 'api_2' });
+  },
+  verifyCodeCheck: (data) => {
+    return request.post('/v1/user/verify_code/check', data, { urlTag: 'api_2' });
+  },
+  userInfo: (data) => {
+    return request.post('/v1/user/get', data, { urlTag: 'api_2' });
+  },
+  userUpdate: (data) => {
+    return request.post('/v1/user/update', data, { urlTag: 'api_2' });
+  },
+  areaList: () => {
+    return request.post('/v1/user/area/list', { urlTag: 'api_2' });
+  },
+  needVerify: (data) => {
+    return request.post('/v1/user/need_verify', data, { urlTag: 'api_2' });
+  },
+  kycInit: (data) => {
+    return request.post('/v1/user/kyc/init', data, { urlTag: 'api_2' });
+  },
+  kycResult: (data) => {
+    return request.post('/v1/user/kyc/result', data, { urlTag: 'api_2' });
+  },
+  get_maintain: () => {
+    return request.get('/v1/get_maintain', { urlTag: 'api_2' });
+  },
+  // 增用户关系
+  userRelationshipAdd: (data) => {
+    return request.post('/v1/user_relationship/add',data, { urlTag: 'api_2' });
+  },
+  // 收藏与拉黑列表
+  userRelationshipList: (data) => {
+    return request.post('/v1/user_relationship/list',data, { urlTag: 'api_2' });
+  },
+  // 获取两者用户关系
+  getByUserId: (data) => {
+    return request.post('/v1/user_relationship/get_by_userId',data, { urlTag: 'api_2' });
+  },
+  // 拼图验证码校验
+  puzzle_verify: (data) => {
+    return request.post('/v1/user/puzzle_verify',data, { urlTag: 'api_2' });
+  },
+  // 获取用户登录状态
+  getUserStatus: (data) => {
+    return request.post('/v1/user/login/status',data, { urlTag: 'api_2' });
+  },
+  //用户配置资产密码
+  setPayPassword: (data) => {
+    return request.post('/v1/withdrawal/set_password',data, { urlTag: 'api_2' });
+  },
+  //用户校验资产密码
+  checkPayPassword: (data) => {
+    return request.post('/v1/withdrawal/check_password',data, { urlTag: 'api_2' });
+  },
+  //提现申请
+  withdrawApply: (data) => {
+    return request.post('/v1/withdrawal/apply',data, { urlTag: 'api_2' });
+  },
+  //申请记录列表
+  withdrawApplyList: (data) => {
+    return request.post('/v1/withdrawal/apply/list',data, { urlTag: 'api_2' });
+  },
+  //撤销申请
+  withdrawApplyCancel: (data) => {
+    return request.post('/v1/withdrawal/apply/cancel',data, { urlTag: 'api_2' });
+  },
+  //第三方sdk登录
+  sdkLogin: (data) => {
+    return request.post('/v1/account/auth/sdk_login',data, { urlTag: 'api_2' });
+  },
+  //第三方sdk绑定
+  sdkBind: (data) => {
+    return request.post('/v1/account/auth/sdk_bind',data, { urlTag: 'api_2' });
+  },
+  //第三方sdk解绑
+  sdkUnBind: (data) => {
+    return request.post('/v1/account/auth/unbind',data, { urlTag: 'api_2' });
+  },
+  // 获取群主和群管理员标识
+  getMemberIdentification: () => {
+    return request.get('/v1/group/get_group_owner_ids', { urlTag: 'api_2' });
+  },
+  // 账号活跃
+  accountActive: (data) => {
+    return request.post('/v1/account/active',data, { urlTag: 'api_2' });
+  },
+  // 上报用户信息
+  userReentrantRecord: (data) => {
+    return request.post('/v1/user_reentrant_record/insert',data, { urlTag: 'api_2' });
+  },
+}
+
+export default api;
diff --git a/src/app.less b/src/app.less
new file mode 100644
index 0000000..b9db281
--- /dev/null
+++ b/src/app.less
@@ -0,0 +1,157 @@
+body {
+  // 这个可以屏蔽原生的下拉刷新
+  overflow: hidden;
+}
+
+html,body,#app,.app_main {
+  height: 100%;
+  font-size: 1rem;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+[data-theme='dark'] {
+  &,
+  * {
+    color-scheme: dark !important;
+  }
+}
+
+[data-theme='light'] {
+  &,
+  * {
+    color-scheme: light !important;
+  }
+
+  body {
+    background-color: #F8F8FB;
+  }
+}
+.contact-dialog {
+  border-radius: 12px;
+  background: #FFF;
+  box-shadow: 4px 4px 4px 0px rgba(118, 134, 149, 0.10);
+  .item {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 24px 0 16px;
+    cursor: pointer;
+    img {
+      width: 24px;
+      height: 24px;
+      margin-right: 12px;
+    }
+    .txt {
+      color: #11121D;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 400;
+    }
+    .txts {
+      font-size: 0.875rem;
+    }
+    .txt-red {
+      color: #FC5A50;
+    }
+  }
+  .item-small {
+    display: flex;
+    align-items: center;
+    height: 44px;
+    padding: 0 24px 0 16px;
+    cursor: pointer;
+    .txt {
+      color: #11121D;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      height: 22px;
+    }
+    .txt-red {
+      color: #FC5A50;
+    }
+  }
+
+  .van-popover__content {
+    padding: 8px 0 !important;
+  }
+}
+// 去除掉全局导航栏的下划线
+.van-hairline--bottom:after {
+  border-bottom-width: 0;
+}
+
+.wrap-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+
+  .title {
+    height: 38px;
+    font-size: 1rem;
+    color: #1B1B22;
+    padding: 8px 0 8px 24px;
+    font-weight: bold;
+  }
+
+  .avatar-wrap {
+    height: 78px;
+    overflow-x: auto;
+    /* 横向溢出内容显示滚动条 */
+    white-space: nowrap;
+    padding: 12px 0 12px 24px;
+    border-bottom: 0.5px solid #F2F4F5;
+
+    .left-content {
+      display: flex;
+      align-items: center;
+
+      .item-wrap {
+        margin-right: 10px;
+
+        .avatar {
+          text-align: center;
+
+          img {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            margin-bottom: 4px;
+          }
+
+          .name {
+            font-size: 0.75rem;
+            color: #1B1B22;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .special-item-wrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .name {
+          margin-left: 10px;
+          max-width: 80px;
+        }
+      }
+
+    }
+  }
+
+  .content-wrap {
+    padding: 12px 24px;
+    text-overflow: ellipsis;
+    overflow: auto;
+    max-height: 120px;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/Group 625883.png b/src/assets/Group 625883.png
new file mode 100644
index 0000000..368df67
Binary files /dev/null and b/src/assets/Group 625883.png differ
diff --git a/src/assets/Loading.png b/src/assets/Loading.png
new file mode 100644
index 0000000..63ef49e
Binary files /dev/null and b/src/assets/Loading.png differ
diff --git a/src/assets/about.png b/src/assets/about.png
new file mode 100644
index 0000000..6d803bf
Binary files /dev/null and b/src/assets/about.png differ
diff --git a/src/assets/activebg-icon.png b/src/assets/activebg-icon.png
new file mode 100644
index 0000000..dee405f
Binary files /dev/null and b/src/assets/activebg-icon.png differ
diff --git a/src/assets/add.png b/src/assets/add.png
new file mode 100644
index 0000000..6022c82
Binary files /dev/null and b/src/assets/add.png differ
diff --git a/src/assets/animation/anim_guanliyuan.json b/src/assets/animation/anim_guanliyuan.json
new file mode 100644
index 0000000..8eee045
--- /dev/null
+++ b/src/assets/animation/anim_guanliyuan.json
@@ -0,0 +1 @@
+{"nm":"guanliyuan3","ddd":0,"h":18,"w":120,"meta":{"g":"LottieFiles Figma v55"},"layers":[{"ty":0,"nm":"Frame 427321222","sr":1,"st":0,"op":361,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":240},{"s":[9,9],"t":360}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":240},{"s":[100,100],"t":360}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":240},{"s":[9,9],"t":360}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":240},{"s":[0],"t":360}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}},"w":120,"h":18,"refId":"1","ind":1},{"ty":4,"nm":"Rectangle 34624758","sr":1,"st":0,"op":361,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":240},{"s":[60,9],"t":360}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":240},{"s":[100,100],"t":360}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":240},{"s":[60,9],"t":360}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":240},{"s":[0],"t":360}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":240},{"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":360}]}},{"ty":"gf","bm":0,"hd":false,"nm":"","e":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[57.0890007019043,64.39510345458984],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[57.0890007019043,64.39510345458984],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[57.0890007019043,64.39510345458984],"t":240},{"s":[57.0890007019043,64.39510345458984],"t":360}]},"g":{"p":2,"k":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,0.6991766053461561,0.8963808375620375,1,1,0.6664128857874403,1,0.9027315932535658,0,1,1,0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,0.8644598084711561,1,0.9349612551950941,1,0.3581446963572035,0.7304432350420484,1,0,1,1,0],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,0.9012240725779066,0.8765203315042982,1,1,0.44686537564034556,0.9004678684496412,1,0,1,1,0],"t":240},{"s":[0,0.6991766053461561,0.8963808375620375,1,1,0.6664128857874403,1,0.9027315932535658,0,1,1,0],"t":360}]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[5,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[5,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[5,9],"t":240},{"s":[5,9],"t":360}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}}],"ind":2}],"v":"5.7.0","fr":60,"op":360,"ip":0,"assets":[{"nm":"[Asset] Frame 427321222","id":"1","layers":[{"ty":4,"nm":"Union","sr":1,"st":0,"op":361,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.75,6],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.75,6],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.75,6],"t":240},{"s":[2.75,6],"t":360}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":240},{"s":[100,100],"t":360}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9.45],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9.45],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9.45],"t":240},{"s":[9,9.45],"t":360}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":240},{"s":[0],"t":360}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0.34,-0.29],[0.45,0],[0.34,0.29],[0,0.58],[-0.87,0],[0,-0.68]],"o":[[0,0.58],[-0.34,0.29],[-0.45,0],[-0.34,-0.29],[0,-0.68],[0.87,0],[0,0]],"v":[[4.99,0.78],[4.1,2.43],[2.75,2.73],[1.4,2.43],[0.51,0.78],[2.75,0],[4.99,0.78]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0.34,-0.29],[0.45,0],[0.34,0.29],[0,0.58],[-0.87,0],[0,-0.68]],"o":[[0,0.58],[-0.34,0.29],[-0.45,0],[-0.34,-0.29],[0,-0.68],[0.87,0],[0,0]],"v":[[4.99,0.78],[4.1,2.43],[2.75,2.73],[1.4,2.43],[0.51,0.78],[2.75,0],[4.99,0.78]]}],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0.34,-0.29],[0.45,0],[0.34,0.29],[0,0.58],[-0.87,0],[0,-0.68]],"o":[[0,0.58],[-0.34,0.29],[-0.45,0],[-0.34,-0.29],[0,-0.68],[0.87,0],[0,0]],"v":[[4.99,0.78],[4.1,2.43],[2.75,2.73],[1.4,2.43],[0.51,0.78],[2.75,0],[4.99,0.78]]}],"t":240},{"s":[{"c":true,"i":[[0,0],[0.34,-0.29],[0.45,0],[0.34,0.29],[0,0.58],[-0.87,0],[0,-0.68]],"o":[[0,0.58],[-0.34,0.29],[-0.45,0],[-0.34,-0.29],[0,-0.68],[0.87,0],[0,0]],"v":[[4.99,0.78],[4.1,2.43],[2.75,2.73],[1.4,2.43],[0.51,0.78],[2.75,0],[4.99,0.78]]}],"t":360}]}},{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0.19,0],[0,0],[0.07,-0.06],[0.02,-0.09],[0.31,-0.74],[-0.2,-0.58],[0,0],[-0.24,0.66],[0.3,0.68],[0.21,1.97]],"o":[[-0.04,-0.18],[0,0],[0,0],[-0.07,0.06],[-0.34,1.94],[-0.3,0.72],[0.23,0.67],[0,0],[0.2,-0.55],[-0.34,-0.78],[0,0]],"v":[[4.09,3.92],[3.7,3.61],[1.84,3.61],[1.59,3.7],[1.45,3.92],[0.36,7.68],[0.09,9.39],[2.75,11.99],[5.43,9.44],[5.13,7.78],[4.09,3.92]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0.19,0],[0,0],[0.07,-0.06],[0.02,-0.09],[0.31,-0.74],[-0.2,-0.58],[0,0],[-0.24,0.66],[0.3,0.68],[0.21,1.97]],"o":[[-0.04,-0.18],[0,0],[0,0],[-0.07,0.06],[-0.34,1.94],[-0.3,0.72],[0.23,0.67],[0,0],[0.2,-0.55],[-0.34,-0.78],[0,0]],"v":[[4.09,3.92],[3.7,3.61],[1.84,3.61],[1.59,3.7],[1.45,3.92],[0.36,7.68],[0.09,9.39],[2.75,11.99],[5.43,9.44],[5.13,7.78],[4.09,3.92]]}],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0.19,0],[0,0],[0.07,-0.06],[0.02,-0.09],[0.31,-0.74],[-0.2,-0.58],[0,0],[-0.24,0.66],[0.3,0.68],[0.21,1.97]],"o":[[-0.04,-0.18],[0,0],[0,0],[-0.07,0.06],[-0.34,1.94],[-0.3,0.72],[0.23,0.67],[0,0],[0.2,-0.55],[-0.34,-0.78],[0,0]],"v":[[4.09,3.92],[3.7,3.61],[1.84,3.61],[1.59,3.7],[1.45,3.92],[0.36,7.68],[0.09,9.39],[2.75,11.99],[5.43,9.44],[5.13,7.78],[4.09,3.92]]}],"t":240},{"s":[{"c":true,"i":[[0,0],[0.19,0],[0,0],[0.07,-0.06],[0.02,-0.09],[0.31,-0.74],[-0.2,-0.58],[0,0],[-0.24,0.66],[0.3,0.68],[0.21,1.97]],"o":[[-0.04,-0.18],[0,0],[0,0],[-0.07,0.06],[-0.34,1.94],[-0.3,0.72],[0.23,0.67],[0,0],[0.2,-0.55],[-0.34,-0.78],[0,0]],"v":[[4.09,3.92],[3.7,3.61],[1.84,3.61],[1.59,3.7],[1.45,3.92],[0.36,7.68],[0.09,9.39],[2.75,11.99],[5.43,9.44],[5.13,7.78],[4.09,3.92]]}],"t":360}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,1,1],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,1,1],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,1,1],"t":240},{"s":[1,1,1],"t":360}]},"r":2,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}}],"ind":1},{"ty":4,"nm":"路径 6","sr":1,"st":0,"op":361,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.4,2.74],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.4,2.74],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.4,2.74],"t":240},{"s":[2.4,2.74],"t":360}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,-100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,-100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,-100],"t":240},{"s":[100,-100],"t":360}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.82,2.04],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.82,2.04],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.82,2.04],"t":240},{"s":[2.82,2.04],"t":360}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[165.01],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[165.01],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[165.01],"t":240},{"s":[165.01],"t":360}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":240},{"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":360}]}},{"ty":"st","bm":0,"hd":false,"nm":"","lc":1,"lj":1,"ml":4,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":240},{"s":[0],"t":360}]},"w":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1],"t":240},{"s":[1],"t":360}]},"c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.592,0.592,0.592],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.592,0.592,0.592],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.592,0.592,0.592],"t":240},{"s":[0.592,0.592,0.592],"t":360}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3239,0.5612,0.8833],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3239,0.5612,0.8833],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3239,0.5612,0.8833],"t":240},{"s":[0.3239,0.5612,0.8833],"t":360}]},"r":2,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}}],"ind":2},{"ty":4,"nm":"Frame 427321222 Bg","sr":1,"st":0,"op":361,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":240},{"s":[9,9],"t":360}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":240},{"s":[100,100],"t":360}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":240},{"s":[9,9],"t":360}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":240},{"s":[0],"t":360}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":240},{"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":360}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3239,0.5612,0.8833],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3239,0.5612,0.8833],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3239,0.5612,0.8833],"t":240},{"s":[0.3239,0.5612,0.8833],"t":360}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":240},{"s":[100],"t":360}]}}],"ind":3}]}]}
\ No newline at end of file
diff --git a/src/assets/animation/anim_qunzhu.json b/src/assets/animation/anim_qunzhu.json
new file mode 100644
index 0000000..b36b624
--- /dev/null
+++ b/src/assets/animation/anim_qunzhu.json
@@ -0,0 +1 @@
+{"nm":"qunzhu3","ddd":0,"h":18,"w":120,"meta":{"g":"LottieFiles Figma v55"},"layers":[{"ty":0,"nm":"Frame 427321221","sr":1,"st":0,"op":181,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"s":[9,9],"t":180}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"s":[100,100],"t":180}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"s":[9,9],"t":180}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"s":[0],"t":180}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}},"w":120,"h":18,"refId":"1","ind":1},{"ty":4,"nm":"Rectangle 34624758","sr":1,"st":0,"op":181,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":120},{"s":[60,9],"t":180}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"s":[100,100],"t":180}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[60,9],"t":120},{"s":[60,9],"t":180}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"s":[0],"t":180}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[80],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[80],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[80],"t":120},{"s":[80],"t":180}]}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":120},{"s":[{"c":true,"i":[[0,0],[-4.97,0],[0,0],[0,0],[0,0],[0,4.97],[0,0]],"o":[[0,-4.97],[0,0],[0,0],[0,0],[-4.97,0],[0,0],[0,0]],"v":[[0,9],[9,0],[120,0],[120,18],[9,18],[0,9],[0,9]]}],"t":180}]}},{"ty":"gf","bm":0,"hd":false,"nm":"","e":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[58.94660186767578,62.648399353027344],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[58.94660186767578,62.648399353027344],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[58.94660186767578,62.648399353027344],"t":120},{"s":[58.94660186767578,62.648399353027344],"t":180}]},"g":{"p":3,"k":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,1,0.8798775035166273,0.6759669739031324,0.5046470165252686,1,0.6858302313112745,0.8555030781054029,1,1,0.6013575750612745,0.6767837959551344,0,1,0.5046470165252686,0.49535298347473145,1,0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,1,0.7584835249208937,0.7054591137194166,0.5000041127204895,1,0.8573898035311232,0.7540919739031324,1,0.9960952955507765,0.8028549510263929,1,0,1,0.5000041127204895,0.4999958872795105,1,0],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,1,0.7473211246752272,0.9596042591356764,0.4996807277202606,0.9946402865671644,0.7448764401697645,0.8317942577623854,1,1,0.7987045604013929,0.7987045604013929,0,1,0.4996807277202606,0.500319242477417,1,0],"t":120},{"s":[0,1,0.8798775035166273,0.6759669739031324,0.5046470165252686,1,0.6858302313112745,0.8555030781054029,1,1,0.6013575750612745,0.6767837959551344,0,1,0.5046470165252686,0.49535298347473145,1,0],"t":180}]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8.5,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8.5,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8.5,9],"t":120},{"s":[8.5,9],"t":180}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}}],"ind":2}],"v":"5.7.0","fr":60,"op":180,"ip":0,"assets":[{"nm":"[Asset] Frame 427321221","id":"1","layers":[{"ty":4,"nm":"Union","sr":1,"st":0,"op":181,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[4.74,4.81],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[4.74,4.81],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[4.74,4.81],"t":120},{"s":[4.74,4.81],"t":180}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"s":[100,100],"t":180}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"s":[9,9],"t":180}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"s":[0],"t":180}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[-0.15,-0.02],[-0.12,-0.09],[-0.06,-0.14],[0.02,-0.15],[0,0],[0.15,-0.13],[0.2,0],[0,0],[0.15,0.13],[0.03,0.2],[0,0],[-0.05,0.14],[-0.12,0.09],[-0.15,0.02],[-0.14,-0.05],[0,0],[-0.17,0.04],[-0.11,0.13],[0,0],[-0.11,0.05],[-0.12,0],[-0.11,-0.05],[-0.08,-0.09],[0,0],[-0.17,-0.04],[-0.16,0.07]],"o":[[0,0],[0.14,-0.06],[0.15,0.02],[0.12,0.09],[0.06,0.14],[0,0],[-0.03,0.2],[-0.15,0.13],[0,0],[-0.2,0],[-0.15,-0.13],[0,0],[-0.02,-0.15],[0.05,-0.14],[0.12,-0.09],[0.15,-0.02],[0,0],[0.16,0.06],[0.17,-0.04],[0,0],[0.08,-0.09],[0.11,-0.05],[0.12,0],[0.11,0.05],[0,0],[0.12,0.13],[0.17,0.04],[0,0]],"v":[[7.53,1.81],[8.07,1.59],[8.51,1.53],[8.92,1.7],[9.18,2.06],[9.23,2.5],[8.56,6.13],[8.27,6.65],[7.72,6.85],[1.78,6.85],[1.22,6.65],[0.94,6.13],[0.25,2.45],[0.3,2.02],[0.56,1.66],[0.96,1.48],[1.4,1.53],[2.07,1.79],[2.58,1.82],[3.02,1.55],[4.12,0.29],[4.41,0.08],[4.76,0],[5.11,0.07],[5.4,0.28],[6.57,1.59],[7.01,1.86],[7.53,1.81]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[-0.15,-0.02],[-0.12,-0.09],[-0.06,-0.14],[0.02,-0.15],[0,0],[0.15,-0.13],[0.2,0],[0,0],[0.15,0.13],[0.03,0.2],[0,0],[-0.05,0.14],[-0.12,0.09],[-0.15,0.02],[-0.14,-0.05],[0,0],[-0.17,0.04],[-0.11,0.13],[0,0],[-0.11,0.05],[-0.12,0],[-0.11,-0.05],[-0.08,-0.09],[0,0],[-0.17,-0.04],[-0.16,0.07]],"o":[[0,0],[0.14,-0.06],[0.15,0.02],[0.12,0.09],[0.06,0.14],[0,0],[-0.03,0.2],[-0.15,0.13],[0,0],[-0.2,0],[-0.15,-0.13],[0,0],[-0.02,-0.15],[0.05,-0.14],[0.12,-0.09],[0.15,-0.02],[0,0],[0.16,0.06],[0.17,-0.04],[0,0],[0.08,-0.09],[0.11,-0.05],[0.12,0],[0.11,0.05],[0,0],[0.12,0.13],[0.17,0.04],[0,0]],"v":[[7.53,1.81],[8.07,1.59],[8.51,1.53],[8.92,1.7],[9.18,2.06],[9.23,2.5],[8.56,6.13],[8.27,6.65],[7.72,6.85],[1.78,6.85],[1.22,6.65],[0.94,6.13],[0.25,2.45],[0.3,2.02],[0.56,1.66],[0.96,1.48],[1.4,1.53],[2.07,1.79],[2.58,1.82],[3.02,1.55],[4.12,0.29],[4.41,0.08],[4.76,0],[5.11,0.07],[5.4,0.28],[6.57,1.59],[7.01,1.86],[7.53,1.81]]}],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[-0.15,-0.02],[-0.12,-0.09],[-0.06,-0.14],[0.02,-0.15],[0,0],[0.15,-0.13],[0.2,0],[0,0],[0.15,0.13],[0.03,0.2],[0,0],[-0.05,0.14],[-0.12,0.09],[-0.15,0.02],[-0.14,-0.05],[0,0],[-0.17,0.04],[-0.11,0.13],[0,0],[-0.11,0.05],[-0.12,0],[-0.11,-0.05],[-0.08,-0.09],[0,0],[-0.17,-0.04],[-0.16,0.07]],"o":[[0,0],[0.14,-0.06],[0.15,0.02],[0.12,0.09],[0.06,0.14],[0,0],[-0.03,0.2],[-0.15,0.13],[0,0],[-0.2,0],[-0.15,-0.13],[0,0],[-0.02,-0.15],[0.05,-0.14],[0.12,-0.09],[0.15,-0.02],[0,0],[0.16,0.06],[0.17,-0.04],[0,0],[0.08,-0.09],[0.11,-0.05],[0.12,0],[0.11,0.05],[0,0],[0.12,0.13],[0.17,0.04],[0,0]],"v":[[7.53,1.81],[8.07,1.59],[8.51,1.53],[8.92,1.7],[9.18,2.06],[9.23,2.5],[8.56,6.13],[8.27,6.65],[7.72,6.85],[1.78,6.85],[1.22,6.65],[0.94,6.13],[0.25,2.45],[0.3,2.02],[0.56,1.66],[0.96,1.48],[1.4,1.53],[2.07,1.79],[2.58,1.82],[3.02,1.55],[4.12,0.29],[4.41,0.08],[4.76,0],[5.11,0.07],[5.4,0.28],[6.57,1.59],[7.01,1.86],[7.53,1.81]]}],"t":120},{"s":[{"c":true,"i":[[0,0],[0,0],[-0.15,-0.02],[-0.12,-0.09],[-0.06,-0.14],[0.02,-0.15],[0,0],[0.15,-0.13],[0.2,0],[0,0],[0.15,0.13],[0.03,0.2],[0,0],[-0.05,0.14],[-0.12,0.09],[-0.15,0.02],[-0.14,-0.05],[0,0],[-0.17,0.04],[-0.11,0.13],[0,0],[-0.11,0.05],[-0.12,0],[-0.11,-0.05],[-0.08,-0.09],[0,0],[-0.17,-0.04],[-0.16,0.07]],"o":[[0,0],[0.14,-0.06],[0.15,0.02],[0.12,0.09],[0.06,0.14],[0,0],[-0.03,0.2],[-0.15,0.13],[0,0],[-0.2,0],[-0.15,-0.13],[0,0],[-0.02,-0.15],[0.05,-0.14],[0.12,-0.09],[0.15,-0.02],[0,0],[0.16,0.06],[0.17,-0.04],[0,0],[0.08,-0.09],[0.11,-0.05],[0.12,0],[0.11,0.05],[0,0],[0.12,0.13],[0.17,0.04],[0,0]],"v":[[7.53,1.81],[8.07,1.59],[8.51,1.53],[8.92,1.7],[9.18,2.06],[9.23,2.5],[8.56,6.13],[8.27,6.65],[7.72,6.85],[1.78,6.85],[1.22,6.65],[0.94,6.13],[0.25,2.45],[0.3,2.02],[0.56,1.66],[0.96,1.48],[1.4,1.53],[2.07,1.79],[2.58,1.82],[3.02,1.55],[4.12,0.29],[4.41,0.08],[4.76,0],[5.11,0.07],[5.4,0.28],[6.57,1.59],[7.01,1.86],[7.53,1.81]]}],"t":180}]}},{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,-0.44],[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0]],"o":[[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0],[0,0],[0,-0.44],[0,0]],"v":[[8.83,8.3],[0.66,8.3],[0,8.97],[0,8.97],[0.66,9.63],[8.83,9.63],[9.49,8.97],[9.49,8.97],[8.83,8.3]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,-0.44],[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0]],"o":[[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0],[0,0],[0,-0.44],[0,0]],"v":[[8.83,8.3],[0.66,8.3],[0,8.97],[0,8.97],[0.66,9.63],[8.83,9.63],[9.49,8.97],[9.49,8.97],[8.83,8.3]]}],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,-0.44],[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0]],"o":[[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0],[0,0],[0,-0.44],[0,0]],"v":[[8.83,8.3],[0.66,8.3],[0,8.97],[0,8.97],[0.66,9.63],[8.83,9.63],[9.49,8.97],[9.49,8.97],[8.83,8.3]]}],"t":120},{"s":[{"c":true,"i":[[0,0],[0,0],[0,-0.44],[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0]],"o":[[0,0],[-0.44,0],[0,0],[0,0.44],[0,0],[0.44,0],[0,0],[0,-0.44],[0,0]],"v":[[8.83,8.3],[0.66,8.3],[0,8.97],[0,8.97],[0.66,9.63],[8.83,9.63],[9.49,8.97],[9.49,8.97],[8.83,8.3]]}],"t":180}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,0.8627,0.3961],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,0.8627,0.3961],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,0.8627,0.3961],"t":120},{"s":[1,0.8627,0.3961],"t":180}]},"r":2,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}}],"ind":1},{"ty":4,"nm":"路径 6","sr":1,"st":0,"op":181,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.4,2.74],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.4,2.74],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.4,2.74],"t":120},{"s":[2.4,2.74],"t":180}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,-100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,-100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,-100],"t":120},{"s":[100,-100],"t":180}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.73,2.04],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.73,2.04],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.73,2.04],"t":120},{"s":[2.73,2.04],"t":180}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[165.68],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[165.68],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[165.68],"t":120},{"s":[165.68],"t":180}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":120},{"s":[{"c":true,"i":[[0,0],[-0.79,0.64],[-0.06,-0.43],[1.44,-1.7],[0,0]],"o":[[2.02,-0.4],[0.34,-0.27],[0.24,1.83],[0,0],[0,0]],"v":[[0,2.26],[3.77,0.66],[4.67,1.01],[3.49,5.48],[0,2.26]]}],"t":180}]}},{"ty":"st","bm":0,"hd":false,"nm":"","lc":1,"lj":1,"ml":4,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"s":[0],"t":180}]},"w":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1],"t":120},{"s":[1],"t":180}]},"c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.592,0.592,0.592],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.592,0.592,0.592],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.592,0.592,0.592],"t":120},{"s":[0.592,0.592,0.592],"t":180}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1059,0.1059,0.1333],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1059,0.1059,0.1333],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1059,0.1059,0.1333],"t":120},{"s":[0.1059,0.1059,0.1333],"t":180}]},"r":2,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}}],"ind":2},{"ty":4,"nm":"Frame 427321221 Bg","sr":1,"st":0,"op":181,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"s":[9,9],"t":180}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":120},{"s":[100,100],"t":180}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[9,9],"t":120},{"s":[9,9],"t":180}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":120},{"s":[0],"t":180}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":120},{"s":[{"c":true,"i":[[0,-4.97],[0,0],[4.97,0],[0,0],[0,4.97],[0,0],[-4.97,0],[0,0]],"o":[[0,0],[0,4.97],[0,0],[-4.97,0],[0,0],[0,-4.97],[0,0],[4.97,0]],"v":[[18,9],[18,9],[9,18],[9,18],[0,9],[0,9],[9,0],[9,0]]}],"t":180}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1059,0.1059,0.1333],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1059,0.1059,0.1333],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1059,0.1059,0.1333],"t":120},{"s":[0.1059,0.1059,0.1333],"t":180}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":120},{"s":[100],"t":180}]}}],"ind":3}]}]}
\ No newline at end of file
diff --git a/src/assets/animation/line-loading.json b/src/assets/animation/line-loading.json
new file mode 100644
index 0000000..2f0873e
--- /dev/null
+++ b/src/assets/animation/line-loading.json
@@ -0,0 +1 @@
+{"nm":"Frame 427324633","ddd":0,"h":16,"w":16,"meta":{"g":"LottieFiles Figma v64"},"layers":[{"ty":0,"nm":"xinhao-icon-yanchi3 1","sr":1,"st":0,"op":91,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":true,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":60},{"s":[8,8],"t":90}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"s":[100,100],"t":90}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":60},{"s":[8,8],"t":90}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"s":[0],"t":90}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"s":[100],"t":90}]}},"masksProperties":[{"nm":"","inv":false,"mode":"a","x":{"a":0,"k":0},"o":{"a":0,"k":100},"pt":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":90}]}}],"w":16,"h":16,"refId":"1","ind":1}],"v":"5.7.0","fr":60,"op":90,"ip":0,"assets":[{"nm":"[Asset] xinhao-icon-yanchi3 1","id":"1","layers":[{"ty":4,"nm":"Vector","sr":1,"st":0,"op":91,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,5.71],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,5.71],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,5.71],"t":60},{"s":[1.14,5.71],"t":90}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"s":[100,100],"t":90}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[13.71,8],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[13.71,8],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[13.71,8],"t":60},{"s":[13.71,8],"t":90}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"s":[0],"t":90}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"s":[100],"t":90}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,10.29],[1.14,11.43],[0,10.29],[0,1.14],[1.14,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,10.29],[1.14,11.43],[0,10.29],[0,1.14],[1.14,0]]}],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,10.29],[1.14,11.43],[0,10.29],[0,1.14],[1.14,0]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,10.29],[1.14,11.43],[0,10.29],[0,1.14],[1.14,0]]}],"t":90}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":60},{"s":[0.5333,0.5333,0.5333],"t":90}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[10],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[10],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[10],"t":60},{"s":[40],"t":90}]}}],"ind":1},{"ty":4,"nm":"Vector","sr":1,"st":0,"op":91,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,4],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,4],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,4],"t":60},{"s":[1.14,4],"t":90}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"s":[100,100],"t":90}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,9.71],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,9.71],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,9.71],"t":60},{"s":[8,9.71],"t":90}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"s":[0],"t":90}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"s":[100],"t":90}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,6.86],[1.14,8],[0,6.86],[0,1.14],[1.14,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,6.86],[1.14,8],[0,6.86],[0,1.14],[1.14,0]]}],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,6.86],[1.14,8],[0,6.86],[0,1.14],[1.14,0]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,6.86],[1.14,8],[0,6.86],[0,1.14],[1.14,0]]}],"t":90}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":60},{"s":[0.5333,0.5333,0.5333],"t":90}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[10],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[10],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[40],"t":60},{"s":[40],"t":90}]}}],"ind":2},{"ty":4,"nm":"Vector","sr":1,"st":0,"op":91,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,2.29],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,2.29],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1.14,2.29],"t":60},{"s":[1.14,2.29],"t":90}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"s":[100,100],"t":90}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.29,11.43],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.29,11.43],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[2.29,11.43],"t":60},{"s":[2.29,11.43],"t":90}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"s":[0],"t":90}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"s":[100],"t":90}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,3.43],[1.14,4.57],[0,3.43],[0,1.14],[1.14,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,3.43],[1.14,4.57],[0,3.43],[0,1.14],[1.14,0]]}],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,3.43],[1.14,4.57],[0,3.43],[0,1.14],[1.14,0]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,-0.76],[0,0],[0.76,0],[0,0.76],[0,0],[-0.76,0]],"o":[[0.76,0],[0,0],[0,0.76],[-0.76,0],[0,0],[0,-0.76],[0,0]],"v":[[1.14,0],[2.29,1.14],[2.29,3.43],[1.14,4.57],[0,3.43],[0,1.14],[1.14,0]]}],"t":90}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.5333,0.5333,0.5333],"t":60},{"s":[0.5333,0.5333,0.5333],"t":90}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[10],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[40],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[40],"t":60},{"s":[40],"t":90}]}}],"ind":3},{"ty":4,"nm":"xinhao-icon-yanchi3 1 Bg","sr":1,"st":0,"op":91,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":60},{"s":[8,8],"t":90}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":60},{"s":[100,100],"t":90}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[8,8],"t":60},{"s":[8,8],"t":90}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"s":[0],"t":90}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":60},{"s":[100],"t":90}]}},"ef":[],"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[16,0],[16,16],[0,16],[0,0]]}],"t":90}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,1,1],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,1,1],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[1,1,1],"t":60},{"s":[1,1,1],"t":90}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":30},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":60},{"s":[0],"t":90}]}}],"ind":4}]}]}
\ No newline at end of file
diff --git a/src/assets/appearance-footer.png b/src/assets/appearance-footer.png
new file mode 100644
index 0000000..7b7508b
Binary files /dev/null and b/src/assets/appearance-footer.png differ
diff --git a/src/assets/appearance.png b/src/assets/appearance.png
new file mode 100644
index 0000000..c19e441
Binary files /dev/null and b/src/assets/appearance.png differ
diff --git a/src/assets/apple.png b/src/assets/apple.png
new file mode 100644
index 0000000..ed5581e
Binary files /dev/null and b/src/assets/apple.png differ
diff --git a/src/assets/arrow-down-black.svg b/src/assets/arrow-down-black.svg
new file mode 100644
index 0000000..8cf629d
--- /dev/null
+++ b/src/assets/arrow-down-black.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.50522 5.11079C2.77859 4.83742 3.2218 4.83742 3.49517 5.11079L7.71735 9.33297C7.87356 9.48918 8.12683 9.48918 8.28304 9.33297L12.5052 5.11079C12.7786 4.83742 13.2218 4.83742 13.4952 5.11079C13.7685 5.38415 13.7685 5.82737 13.4952 6.10074L8.84872 10.7472C8.38009 11.2158 7.6203 11.2158 7.15167 10.7472L2.50522 6.10074C2.23185 5.82737 2.23185 5.38415 2.50522 5.11079Z" fill="black"/>
+</svg>
diff --git a/src/assets/arrow-down.svg b/src/assets/arrow-down.svg
new file mode 100644
index 0000000..a5595d0
--- /dev/null
+++ b/src/assets/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.50522 5.11079C2.77859 4.83742 3.2218 4.83742 3.49517 5.11079L7.71735 9.33297C7.87356 9.48918 8.12683 9.48918 8.28304 9.33297L12.5052 5.11079C12.7786 4.83742 13.2218 4.83742 13.4952 5.11079C13.7685 5.38415 13.7685 5.82737 13.4952 6.10074L8.84872 10.7472C8.38009 11.2158 7.6203 11.2158 7.15167 10.7472L2.50522 6.10074C2.23185 5.82737 2.23185 5.38415 2.50522 5.11079Z" fill="#C9C9CA"/>
+</svg>
diff --git a/src/assets/arrow-left-black.svg b/src/assets/arrow-left-black.svg
new file mode 100644
index 0000000..c9a3c96
--- /dev/null
+++ b/src/assets/arrow-left-black.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8917 2.50717C11.165 2.78054 11.165 3.22376 10.8917 3.49712L6.66947 7.71931C6.51326 7.87552 6.51326 8.12878 6.66947 8.28499L10.8917 12.5072C11.165 12.7805 11.165 13.2238 10.8917 13.4971C10.6183 13.7705 10.1751 13.7705 9.9017 13.4971L5.25526 8.85068C4.78663 8.38205 4.78663 7.62225 5.25526 7.15362L9.90171 2.50717C10.1751 2.23381 10.6183 2.23381 10.8917 2.50717Z" fill="black"/>
+</svg>
diff --git a/src/assets/arrow-left.svg b/src/assets/arrow-left.svg
new file mode 100644
index 0000000..b1d3328
--- /dev/null
+++ b/src/assets/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8917 2.50717C11.165 2.78054 11.165 3.22376 10.8917 3.49712L6.66947 7.71931C6.51326 7.87552 6.51326 8.12878 6.66947 8.28499L10.8917 12.5072C11.165 12.7805 11.165 13.2238 10.8917 13.4971C10.6183 13.7705 10.1751 13.7705 9.9017 13.4971L5.25526 8.85068C4.78663 8.38205 4.78663 7.62225 5.25526 7.15362L9.90171 2.50717C10.1751 2.23381 10.6183 2.23381 10.8917 2.50717Z" fill="#C9C9CA"/>
+</svg>
diff --git a/src/assets/arrow-right-black.svg b/src/assets/arrow-right-black.svg
new file mode 100644
index 0000000..13c0559
--- /dev/null
+++ b/src/assets/arrow-right-black.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.10835 13.4972C4.83498 13.2239 4.83498 12.7806 5.10835 12.5073L9.33053 8.28509C9.48674 8.12888 9.48674 7.87561 9.33053 7.7194L5.10835 3.49722C4.83498 3.22385 4.83498 2.78064 5.10835 2.50727C5.38171 2.2339 5.82493 2.2339 6.0983 2.50727L10.7447 7.15372C11.2134 7.62235 11.2134 8.38214 10.7447 8.85077L6.0983 13.4972C5.82493 13.7706 5.38171 13.7706 5.10835 13.4972Z" fill="black"/>
+</svg>
diff --git a/src/assets/arrow-right.svg b/src/assets/arrow-right.svg
new file mode 100644
index 0000000..92b7624
--- /dev/null
+++ b/src/assets/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.10835 13.4972C4.83498 13.2239 4.83498 12.7806 5.10835 12.5073L9.33053 8.28509C9.48674 8.12888 9.48674 7.87561 9.33053 7.7194L5.10835 3.49722C4.83498 3.22385 4.83498 2.78064 5.10835 2.50727C5.38171 2.2339 5.82493 2.2339 6.0983 2.50727L10.7447 7.15372C11.2134 7.62235 11.2134 8.38214 10.7447 8.85077L6.0983 13.4972C5.82493 13.7706 5.38171 13.7706 5.10835 13.4972Z" fill="#C9C9CA"/>
+</svg>
diff --git a/src/assets/arrow-up-black.svg b/src/assets/arrow-up-black.svg
new file mode 100644
index 0000000..7e830ed
--- /dev/null
+++ b/src/assets/arrow-up-black.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4948 10.8936C13.2214 11.167 12.7782 11.167 12.5048 10.8936L8.28265 6.67142C8.12644 6.51521 7.87317 6.51522 7.71696 6.67143L3.49478 10.8936C3.22141 11.167 2.7782 11.167 2.50483 10.8936C2.23146 10.6202 2.23146 10.177 2.50483 9.90366L7.15128 5.25721C7.6199 4.78858 8.3797 4.78858 8.84833 5.25721L13.4948 9.90366C13.7681 10.177 13.7681 10.6202 13.4948 10.8936Z" fill="black"/>
+</svg>
diff --git a/src/assets/arrow-up.svg b/src/assets/arrow-up.svg
new file mode 100644
index 0000000..368682c
--- /dev/null
+++ b/src/assets/arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4948 10.8936C13.2214 11.167 12.7782 11.167 12.5048 10.8936L8.28265 6.67142C8.12644 6.51521 7.87317 6.51522 7.71696 6.67143L3.49478 10.8936C3.22141 11.167 2.7782 11.167 2.50483 10.8936C2.23146 10.6202 2.23146 10.177 2.50483 9.90366L7.15128 5.25721C7.6199 4.78858 8.3797 4.78858 8.84833 5.25721L13.4948 9.90366C13.7681 10.177 13.7681 10.6202 13.4948 10.8936Z" fill="#C9C9CA"/>
+</svg>
diff --git a/src/assets/audio-close.svg b/src/assets/audio-close.svg
new file mode 100644
index 0000000..f98b71b
--- /dev/null
+++ b/src/assets/audio-close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7461 5L10.7869 5.00083L10.8311 5.00417L10.7461 5C10.8603 5.00034 10.9733 5.02402 11.0781 5.06959C11.1828 5.11516 11.2772 5.18165 11.3553 5.265L11.3653 5.27583C11.3819 5.29417 11.3986 5.31417 11.4136 5.33417L11.3553 5.265C11.4987 5.41959 11.5787 5.62247 11.5794 5.83333V17.5C11.5794 17.6182 11.5543 17.735 11.5057 17.8427C11.4572 17.9505 11.3863 18.0467 11.2978 18.125L11.3561 18.0683C11.2179 18.2156 11.0312 18.3082 10.8303 18.3292C10.8023 18.3317 10.7742 18.3331 10.7461 18.3333C10.7078 18.3333 10.6694 18.3308 10.6319 18.325H10.6278L10.5553 18.3117C10.4138 18.2785 10.2836 18.2087 10.1778 18.1092L6.84278 15H3.24611C3.042 15 2.845 14.925 2.69247 14.7894C2.53994 14.6538 2.4425 14.4669 2.41861 14.2642L2.41278 14.1667V9.16667C2.41278 8.94565 2.50058 8.73369 2.65686 8.57741C2.81314 8.42113 3.0251 8.33333 3.24611 8.33333H6.84195L10.1778 5.22417L10.1886 5.21417C10.2069 5.1975 10.2269 5.18083 10.2469 5.16583L10.1778 5.22417C10.284 5.12518 10.4141 5.05541 10.5553 5.02167L10.6278 5.00833C10.6645 5.0031 10.7015 5.00031 10.7386 5H10.7461ZM9.91278 7.74917L7.73945 9.77583C7.58521 9.91981 7.38211 9.99992 7.17111 10L4.07945 9.99917V13.3333H7.17111C7.38199 13.3332 7.58508 13.413 7.73945 13.5567L9.91278 15.5833V7.74917ZM16.6186 8.71917L18.3861 10.4858L20.1544 8.71917C20.2313 8.63958 20.3233 8.57609 20.4249 8.53242C20.5266 8.48874 20.636 8.46575 20.7466 8.46479C20.8573 8.46383 20.967 8.48491 21.0694 8.52681C21.1718 8.56872 21.2649 8.63059 21.3431 8.70884C21.4214 8.78708 21.4832 8.88012 21.5251 8.98254C21.567 9.08495 21.5881 9.19468 21.5872 9.30533C21.5862 9.41598 21.5632 9.52533 21.5195 9.627C21.4759 9.72867 21.4124 9.82063 21.3328 9.8975L19.5644 11.665L21.3328 13.4333C21.4124 13.5102 21.4759 13.6022 21.5195 13.7038C21.5632 13.8055 21.5862 13.9148 21.5872 14.0255C21.5881 14.1361 21.567 14.2459 21.5251 14.3483C21.4832 14.4507 21.4214 14.5438 21.3431 14.622C21.2649 14.7002 21.1718 14.7621 21.0694 14.804C20.967 14.8459 20.8573 14.867 20.7466 14.866C20.636 14.8651 20.5266 14.8421 20.4249 14.7984C20.3233 14.7547 20.2313 14.6913 20.1544 14.6117L18.3861 12.8433L16.6194 14.6117C16.4632 14.768 16.2512 14.8559 16.0302 14.856C15.8091 14.8561 15.5971 14.7683 15.4407 14.6121C15.2843 14.4558 15.1964 14.2439 15.1964 14.0228C15.1963 13.8017 15.284 13.5897 15.4403 13.4333L17.2069 11.665L15.4403 9.89833C15.3629 9.82096 15.3014 9.7291 15.2595 9.62799C15.2176 9.52688 15.196 9.4185 15.1959 9.30904C15.1959 9.19959 15.2174 9.09119 15.2593 8.99005C15.3011 8.88891 15.3625 8.79701 15.4399 8.71958C15.5172 8.64216 15.6091 8.58073 15.7102 8.53881C15.8113 8.49688 15.9197 8.47529 16.0292 8.47525C16.1386 8.47521 16.247 8.49673 16.3481 8.53858C16.4493 8.58043 16.5412 8.6418 16.6186 8.71917Z" fill="white" fill-opacity="0.8"/>
+</svg>
diff --git a/src/assets/audio-open.svg b/src/assets/audio-open.svg
new file mode 100644
index 0000000..479aa85
--- /dev/null
+++ b/src/assets/audio-open.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5088 5.45534L18.5871 5.52451C19.4396 6.37475 20.1156 7.38507 20.5764 8.49741C21.0372 9.60975 21.2736 10.8022 21.2721 12.0062C21.2721 14.4395 20.3238 16.6528 18.7754 18.2937L18.5871 18.4878C18.4299 18.6396 18.2194 18.7236 18.0009 18.7217C17.7824 18.7198 17.5734 18.6322 17.4189 18.4777C17.2644 18.3232 17.1768 18.1142 17.1749 17.8957C17.173 17.6772 17.257 17.4667 17.4088 17.3095C18.1063 16.6138 18.6594 15.7872 19.0363 14.8771C19.4133 13.9669 19.6067 12.9913 19.6054 12.0062C19.6067 11.0211 19.4133 10.0454 19.0363 9.1353C18.6594 8.22517 18.1063 7.39852 17.4088 6.70284C17.2593 6.55288 17.1726 6.35164 17.1661 6.14002C17.1596 5.9284 17.234 5.72225 17.374 5.56344C17.514 5.40464 17.7092 5.30509 17.92 5.28501C18.1308 5.26493 18.3413 5.32583 18.5088 5.45534ZM11.2721 5.33951L11.3546 5.34367L11.4246 5.35367C11.4657 5.36232 11.5063 5.37317 11.5463 5.38617C11.6382 5.41755 11.7238 5.46525 11.7988 5.52701L11.8238 5.54784C11.8429 5.56451 11.8604 5.58201 11.8779 5.60034L11.8913 5.61534L11.9154 5.64367L11.8896 5.61451L11.9346 5.66784L11.9396 5.67367L11.9579 5.69867C11.9704 5.71784 11.9829 5.73617 11.9938 5.75534L12.0104 5.78534C12.0337 5.82966 12.0529 5.87596 12.0679 5.92367L12.0804 5.97034C12.097 6.03656 12.1054 6.10457 12.1054 6.17284V17.8395C12.1054 17.9095 12.0971 17.977 12.0804 18.042L12.0679 18.0887C12.0328 18.2034 11.9724 18.3087 11.8913 18.397C11.888 18.4006 11.8846 18.4043 11.8813 18.4078L11.8521 18.4378L11.8404 18.4478H11.8396L11.7979 18.4862C11.7416 18.5312 11.68 18.5692 11.6146 18.5995C11.5328 18.6364 11.4456 18.6597 11.3563 18.6687L11.3313 18.6703C11.3116 18.6719 11.2919 18.6727 11.2721 18.6728H11.2554L11.2521 18.672L11.2721 18.6728H11.2363L11.2521 18.672L11.2146 18.6712C11.1957 18.6699 11.1768 18.6679 11.1579 18.6653L11.1538 18.6645L11.0813 18.6512L11.0754 18.6495L11.0229 18.6353C10.9748 18.6203 10.9282 18.6008 10.8838 18.577L10.8696 18.5687L10.8546 18.5603C10.8046 18.5313 10.7577 18.4972 10.7146 18.4587L10.7038 18.4487L7.36878 15.3395H3.77212C3.568 15.3395 3.371 15.2645 3.21847 15.1289C3.06594 14.9933 2.9685 14.8064 2.94462 14.6037L2.93878 14.5062V9.50617C2.93878 9.28516 3.02658 9.0732 3.18286 8.91692C3.33914 8.76064 3.5511 8.67284 3.77212 8.67284H7.36795L10.7038 5.56367L10.7146 5.55367L10.7429 5.52867L10.7213 5.54784L10.7638 5.51201L10.7988 5.48701C10.8171 5.47451 10.8354 5.46201 10.8546 5.45117L10.8846 5.43451C10.9289 5.41129 10.9752 5.39205 11.0229 5.37701L11.0696 5.36451C11.0735 5.36334 11.0774 5.36223 11.0813 5.36117L11.1538 5.34784C11.1759 5.34473 11.1981 5.3425 11.2204 5.34117L11.2429 5.33951H11.2721ZM10.4388 8.08867L8.26545 10.1153C8.11121 10.2593 7.90811 10.3394 7.69711 10.3395L4.60545 10.3387V13.6728H7.69711C7.90799 13.6727 8.11109 13.7525 8.26545 13.8962L10.4388 15.9228V8.08867ZM15.5621 8.40117L15.6413 8.47034C16.1063 8.93417 16.475 9.48533 16.7263 10.0921C16.9775 10.6989 17.1064 11.3494 17.1054 12.0062C17.1054 13.3062 16.6096 14.4895 15.7971 15.3787L15.6413 15.542C15.4849 15.6984 15.2728 15.7862 15.0517 15.7862C14.8306 15.7862 14.6185 15.6984 14.4621 15.542C14.3057 15.3856 14.2179 15.1736 14.2179 14.9524C14.2179 14.7313 14.3057 14.5192 14.4621 14.3628C14.7721 14.0537 15.018 13.6864 15.1856 13.282C15.3533 12.8775 15.4393 12.444 15.4388 12.0062C15.4393 11.5684 15.3533 11.1348 15.1856 10.7304C15.018 10.3259 14.7721 9.95861 14.4621 9.64951C14.3111 9.49989 14.2229 9.2982 14.2157 9.08572C14.2085 8.87324 14.2828 8.66603 14.4233 8.50652C14.5639 8.34701 14.7601 8.24725 14.9718 8.22767C15.1835 8.20809 15.3947 8.27015 15.5621 8.40117Z" fill="white" fill-opacity="0.8"/>
+</svg>
diff --git a/src/assets/base.css b/src/assets/base.css
new file mode 100644
index 0000000..dcdf0df
--- /dev/null
+++ b/src/assets/base.css
@@ -0,0 +1,243 @@
+@import "./theme.css";
+
+* {
+  padding: 0;
+  margin: 0;
+}
+.firstly_view {
+  background: white;
+  overflow: hidden;
+  height: 100vh;
+}
+.secondary_view {
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background: #a4ccf6;
+  z-index: 2;
+  overflow: hidden;
+}
+.thirdly_view {
+  height: 100vh;
+  position: fixed;
+  background: white;
+  z-index: 3;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+  border-radius: 16px;
+}
+.fourth_view {
+  overflow: hidden;
+}
+.fifth_view {
+  overflow: hidden;
+}
+.thirdly_view_overlay {
+}
+@media screen and (max-width: 750px) {
+  .van_empty {
+    display: none;
+  }
+  .firstly_view {
+  }
+  .secondary_view {
+    width: 100vw;
+  }
+  .thirdly_view {
+    width: 100vw;
+  }
+  .fourth_view {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    background: red;
+    z-index: 4;
+    top: 0;
+    left: 0;
+  }
+  .fifth_view {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    width: 100vw;
+    height: 100vh;
+    /* background: #84e09f; */
+  }
+}
+@media screen and (min-width: 750px) {
+  .firstly_view {
+    width: 375px !important;
+  }
+  
+  .firstly_view::after {
+    z-index: 1;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: var(--van-border-width);
+    background: var(--van-gray-3);
+  }
+  .secondary_view {
+    width: calc(100vw - 375px);
+    overflow: hidden;
+    & > .van-nav-bar__left {
+      background: red;
+    }
+  }
+  .secondary_view .custom-dialog {
+    left: auto;
+    right: calc(50vw - 350px) !important;
+  }
+
+  .thirdly_view {
+    width: 70%;
+    height: 70%;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    display: flex;
+    /* background: #84e09f; */
+    overflow: hidden;
+  }
+  .thirdly_view .custom-dialog {
+    right: calc(50vw - 170px) !important;
+  }
+  .fourth_view {
+    flex: 1;
+    z-index: 4;
+    background: red;
+    border-left: 1px solid #f2f4f5;
+  }
+  .fifth_view {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    z-index: 5;
+    /* background: #84e09f; */
+  }
+
+  .firstly_view_nav {
+    max-width: 375px;
+  }
+  .secondary_view_nav {
+    width: calc(100vw - 375px);
+    left: 375px;
+  }
+  .thirdly_view_nav {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+  .fourth_view_nav {
+    position: absolute;
+    width: 50%;
+    top: 0;
+    left: 50%;
+  }
+  .fifth_view_nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .thirdly_view_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 3;
+  }
+}
+
+/* 全局公用样式 */
+.d-flex {
+  display: flex;
+}
+.flex1 {
+  flex: 1;
+}
+.flex-left {
+  flex: 1;
+  display: flex;
+}
+.flex-right {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.ml-auto {
+  margin-left: auto;
+}
+.al-center {
+  align-items: center;
+}
+.as-end {
+  align-self: end;
+}
+.tac {
+  text-align: center;
+}
+
+/* 文字顏色 */
+.normal-text {
+  color: var(--c-text-color);
+}
+.light-text {
+  color: var(--c-light-text-color);
+}
+.blue-text {
+  color: var(--c-blue-color);
+}
+.yellow-text {
+  color: var(--c-yellow-color);
+}
+.red-text {
+  color: var(--c-red-color);
+}
+.green-text:hover,
+.green-text {
+  color: var(--c-green-color);
+}
+.pink-text {
+  color: var(--c-pink-color);
+}
+.orange-text {
+  color: var(--c-orange-color);
+}
+.light-blue-text {
+  color: var(--c-light-blue-color);
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+/** 滚动条整体部分 */
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+/** 滚动条中的滑块 */
+::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+}
+:deep(.van-nav-bar__left),
+:deep(.van-nav-bar__right) {
+  padding: 0 8px;
+}
diff --git a/src/assets/bind-email.png b/src/assets/bind-email.png
new file mode 100644
index 0000000..de48c65
Binary files /dev/null and b/src/assets/bind-email.png differ
diff --git a/src/assets/bind-phone.png b/src/assets/bind-phone.png
new file mode 100644
index 0000000..cbcf535
Binary files /dev/null and b/src/assets/bind-phone.png differ
diff --git a/src/assets/blank-logo.png b/src/assets/blank-logo.png
new file mode 100644
index 0000000..a653244
Binary files /dev/null and b/src/assets/blank-logo.png differ
diff --git a/src/assets/blank_bg.png b/src/assets/blank_bg.png
new file mode 100644
index 0000000..4042303
Binary files /dev/null and b/src/assets/blank_bg.png differ
diff --git a/src/assets/chanchu.svg b/src/assets/chanchu.svg
new file mode 100644
index 0000000..1cd9fb3
--- /dev/null
+++ b/src/assets/chanchu.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1368">
+<circle id="Ellipse 49" cx="8" cy="8.5" r="8" fill="#FC5A50"/>
+<path id="Vector 464" d="M5 8.5H11" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/src/assets/chatbg.png b/src/assets/chatbg.png
new file mode 100644
index 0000000..d7deac4
Binary files /dev/null and b/src/assets/chatbg.png differ
diff --git a/src/assets/chazhao.png b/src/assets/chazhao.png
new file mode 100644
index 0000000..c242b88
Binary files /dev/null and b/src/assets/chazhao.png differ
diff --git a/src/assets/commonCSS/rootCss.css b/src/assets/commonCSS/rootCss.css
new file mode 100644
index 0000000..4cd74d2
--- /dev/null
+++ b/src/assets/commonCSS/rootCss.css
@@ -0,0 +1,38 @@
+:root{
+    --size-10px:0.625rem;
+    --size-11px:0.6875rem;
+    --size-12px: 0.75rem;
+    --size-13px: 0.8125rem;
+    --size-14px:0.875rem;
+    --size-15px: 0.9375rem;
+    --size-16px: 1rem;
+    --size-17px: 1.0625rem;
+    --size-18px: 1.125rem;
+    --size-19px: 1.1875rem;
+    --size-20px: 1.25rem;
+    --size-21px: 1.3125rem;
+    --size-22px: 1.375rem;
+    --size-23px: 1.4375rem;
+    --size-24px: 1.5rem;
+    --size-25px: 1.5625rem;
+    --size-26px:1.625rem;
+    --size-27px:1.6875rem;
+    --size-28px: 1.75rem;
+    --size-29px: 1.8125rem;
+    --size-30px: 1.875rem;
+    --size-31px: 1.9375rem;
+    --size-32px: 2rem;
+    --size-33px: 2.0625rem;
+    --size-34px: 2.125rem;
+    --size-35px: 2.1875rem;
+    --size-36px: 2.25rem;
+    --size-37px: 2.3125rem;
+    --size-38px: 2.375rem;
+
+    --size-44px: 2.75rem;
+    --size-48px: 3rem;
+    --size-60px: 3.75rem;
+    --size-78px: 4.875rem;
+    --size-96px: 6rem;
+}
+
diff --git a/src/assets/contact-add.svg b/src/assets/contact-add.svg
new file mode 100644
index 0000000..b9a46d4
--- /dev/null
+++ b/src/assets/contact-add.svg
@@ -0,0 +1,5 @@
+<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.24779" y="3.8513" width="20.2966" height="20.2966" rx="6.06667" stroke="#1B1B22" stroke-width="1.86667"/>
+<path d="M14.3945 9.33203V18.6654" stroke="#131415" stroke-width="1.86667" stroke-linecap="round"/>
+<path d="M19.0605 14L9.72721 14" stroke="#131415" stroke-width="1.86667" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/contact-chat.svg b/src/assets/contact-chat.svg
new file mode 100644
index 0000000..8e76853
--- /dev/null
+++ b/src/assets/contact-chat.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8696 6.79986C19.8696 4.72877 18.1896 3.05058 16.1185 3.05078L6.32979 3.05174C4.12082 3.05195 2.33021 4.84272 2.33018 7.05168L2.33008 13.5588C2.33005 15.625 4.00501 17.3 6.07121 17.3V19.05L6.07421 19.117C6.12371 19.7095 6.83021 20.0185 7.30121 19.626L9.7452 17.5895L9.82221 17.5305C10.0335 17.3806 10.2861 17.3001 10.5452 17.3C11.4849 17.3 12.4791 17.2949 13.5001 17.2897C14.2589 17.2858 15.0324 17.2818 15.8094 17.2798C18.0411 17.274 19.8682 15.4721 19.8688 13.2403C19.8692 11.5242 19.8696 9.62107 19.8696 8.29987C20.4531 8.30522 20.9281 8.77422 20.9279 9.35772L20.9266 14.1084C20.9259 16.3161 19.1352 18.1053 16.9275 18.1069L16.6613 18.1071L16.5893 18.1101C16.416 18.1269 16.2539 18.2034 16.1308 18.3265C16.0078 18.4497 15.9314 18.6118 15.9148 18.7851L15.9113 18.8571V19.4481L15.0663 18.7441L14.9583 18.6591C14.5194 18.3291 13.9917 18.1381 13.4433 18.1106L13.3058 18.1071L10.4132 18.107L10.3412 18.1105C10.1557 18.1285 9.98352 18.2149 9.85825 18.3529C9.73298 18.4909 9.66358 18.6706 9.66358 18.857C9.66358 19.0434 9.73298 19.2231 9.85825 19.3611C9.98352 19.4991 10.1557 19.5855 10.3412 19.6035L10.4132 19.607L13.3058 19.6071L13.4028 19.6111C13.6281 19.6286 13.8444 19.7069 14.0288 19.8376L14.1063 19.8966L16.1813 21.6261L16.2343 21.6671C16.7033 21.9956 17.3603 21.6881 17.4083 21.1171L17.4113 21.0501V19.6071C20.1808 19.6029 22.4267 17.3618 22.4272 14.5922L22.4279 9.35712C22.4281 7.94531 21.2814 6.80829 19.8696 6.79986ZM3.82121 7.25009C3.82121 5.7589 5.03008 4.55006 6.52127 4.55009L15.6697 4.5503C17.1608 4.55034 18.3696 5.75916 18.3696 7.25031V13.107C18.3696 14.6009 17.1568 15.8108 15.6629 15.8076C13.9403 15.804 11.804 15.8 10.5452 15.8L10.4077 15.8035L10.2712 15.8135C9.72449 15.8684 9.20674 16.0857 8.78471 16.4375L7.57121 17.448V16.55L7.56771 16.478C7.54981 16.2925 7.46343 16.1202 7.32542 15.9948C7.1874 15.8695 7.00765 15.8 6.82121 15.8L6.51787 15.8C5.02801 15.7994 3.82121 14.5908 3.82121 13.1009V7.25009ZM8.15156 9.2659C7.92652 9.04086 7.62129 8.91443 7.30303 8.91443C6.98477 8.91443 6.67955 9.04086 6.4545 9.2659C6.22946 9.49095 6.10303 9.79617 6.10303 10.1144C6.10303 10.4327 6.22946 10.7379 6.4545 10.963C6.67955 11.188 6.98477 11.3144 7.30303 11.3144C7.62129 11.3144 7.92652 11.188 8.15156 10.963C8.3766 10.7379 8.50303 10.4327 8.50303 10.1144C8.50303 9.79617 8.3766 9.49095 8.15156 9.2659ZM11.9916 9.2659C11.7665 9.04086 11.4613 8.91443 11.143 8.91443C10.8248 8.91443 10.5195 9.04086 10.2945 9.2659C10.0695 9.49095 9.94303 9.79617 9.94303 10.1144C9.94303 10.4327 10.0695 10.7379 10.2945 10.963C10.5195 11.188 10.8248 11.3144 11.143 11.3144C11.4613 11.3144 11.7665 11.188 11.9916 10.963C12.2166 10.7379 12.343 10.4327 12.343 10.1144C12.343 9.79617 12.2166 9.49095 11.9916 9.2659ZM14.983 8.91443C15.3013 8.91443 15.6065 9.04086 15.8316 9.2659C16.0566 9.49095 16.183 9.79617 16.183 10.1144C16.183 10.4327 16.0566 10.7379 15.8316 10.963C15.6065 11.188 15.3013 11.3144 14.983 11.3144C14.6648 11.3144 14.3595 11.188 14.1345 10.963C13.9095 10.7379 13.783 10.4327 13.783 10.1144C13.783 9.79617 13.9095 9.49095 14.1345 9.2659C14.3595 9.04086 14.6648 8.91443 14.983 8.91443Z" fill="black"/>
+</svg>
diff --git a/src/assets/contact-empty.png b/src/assets/contact-empty.png
new file mode 100644
index 0000000..37f45fd
Binary files /dev/null and b/src/assets/contact-empty.png differ
diff --git a/src/assets/contact-frend.svg b/src/assets/contact-frend.svg
new file mode 100644
index 0000000..c12c363
--- /dev/null
+++ b/src/assets/contact-frend.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.584 15.2656L18.584 21.2656" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.584 18.2656L21.584 18.2654" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9763 21.2659H5.37802C5.10872 21.2659 4.85046 21.159 4.66004 20.9687C4.46962 20.7785 4.36264 20.5204 4.36264 20.2514C4.36361 19.0951 4.64715 17.9565 5.18863 16.9346C5.73011 15.9126 6.51314 15.0383 7.46969 14.3875C7.59001 14.3139 7.69367 14.216 7.77404 14.1001C7.85441 13.9843 7.90973 13.853 7.93648 13.7146C7.96323 13.5762 7.96082 13.4337 7.9294 13.2963C7.89798 13.1589 7.83824 13.0295 7.75399 12.9164C6.87144 11.8371 6.39061 10.4854 6.39339 9.09168C6.38733 7.56123 6.95849 6.08465 7.99311 4.95607C9.02774 3.82749 10.4499 3.12973 11.9763 3.00179C13.5027 2.87384 15.0213 3.3251 16.2297 4.26567C17.438 5.20624 18.3257 6.55624 18.4967 8.07717C18.6288 9.25334 18.4967 10.3642 18.0111 11.4675" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/contact-group.svg b/src/assets/contact-group.svg
new file mode 100644
index 0000000..201647a
--- /dev/null
+++ b/src/assets/contact-group.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.30078 20.2C5.53347 20.2 4.10078 18.7673 4.10078 17L4.10078 7C4.10078 5.23269 5.53347 3.8 7.30078 3.8L10.3008 3.8C10.9635 3.8 11.5008 4.33726 11.5008 5L11.5008 19C11.5008 19.6627 10.9635 20.2 10.3008 20.2L7.30078 20.2Z" stroke="#1B1B22" stroke-width="1.6"/>
+<path d="M15.3008 20.2C14.638 20.2 14.1008 19.6627 14.1008 19L14.1008 13C14.1008 12.3373 14.638 11.8 15.3008 11.8L19.3008 11.8C19.9635 11.8 20.5008 12.3373 20.5008 13L20.5008 17C20.5008 18.7673 19.0681 20.2 17.3008 20.2L15.3008 20.2Z" stroke="#1B1B22" stroke-width="1.6"/>
+<path d="M15.3008 9.2C14.638 9.2 14.1008 8.66274 14.1008 8L14.1008 5C14.1008 4.33726 14.638 3.8 15.3008 3.8L17.3008 3.8C19.0681 3.8 20.5008 5.23269 20.5008 7L20.5008 8C20.5008 8.66274 19.9635 9.2 19.3008 9.2L15.3008 9.2Z" stroke="#1B1B22" stroke-width="1.6"/>
+</svg>
diff --git a/src/assets/contact-mass-texting.svg b/src/assets/contact-mass-texting.svg
new file mode 100644
index 0000000..d098e56
--- /dev/null
+++ b/src/assets/contact-mass-texting.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2646 6.08115C9.94232 6.40343 9.4198 6.40342 9.09754 6.08114C8.77533 5.75892 8.77528 5.23653 9.09741 4.91424L11.2349 2.77576C11.6648 2.34565 12.362 2.34557 12.7921 2.77558L14.9292 4.9127C15.2515 5.23494 15.2515 5.7574 14.9292 6.07965C14.607 6.40189 14.0845 6.4019 13.7623 6.07966L12.8385 5.15594V10.4003C12.8385 10.856 12.4691 11.2255 12.0134 11.2255C11.5577 11.2255 11.1882 10.856 11.1882 10.4003V5.1575L10.2646 6.08115ZM15.5261 17.9146C17.2286 17.9146 18.6088 16.5345 18.6088 14.832V13.2452C18.6088 12.7894 18.9783 12.4199 19.4341 12.4199C19.8899 12.4199 20.2594 12.7894 20.2594 13.2452V15.1633C20.2594 17.5955 18.2878 19.5671 15.8556 19.5671H9.44232L5.41351 21.9086C4.67955 22.3351 3.75936 21.8056 3.75936 20.9567V19.5671V13.2428C3.75936 12.7883 4.1278 12.4199 4.5823 12.4199C5.0368 12.4199 5.40525 12.7883 5.40525 13.2428V19.6352C5.40525 19.8084 5.59596 19.9138 5.7426 19.8216L8.23992 18.2522C8.59089 18.0316 8.997 17.9146 9.41154 17.9146H15.5261ZM7.45037 11.8999C7.57722 12.2141 7.88211 12.4198 8.22092 12.4198C8.82608 12.4198 9.2283 11.7936 8.97669 11.2432L8.85008 10.9663C8.08606 9.29511 6.71085 7.98007 5.00715 7.29153L4.77006 7.19571H6.07642C6.53213 7.19571 6.90157 6.82628 6.90157 6.37056C6.90157 5.91484 6.53213 5.54541 6.07642 5.54541H3.05407C2.44594 5.54541 1.95299 6.03847 1.95313 6.6466L1.95379 9.6701C1.95389 10.1258 2.32332 10.4952 2.77901 10.4952C3.23479 10.4952 3.60427 10.1257 3.60427 9.66992V8.36378L4.32683 8.65571C5.71173 9.21524 6.8098 10.3135 7.36905 11.6985L7.45037 11.8999ZM15.7774 12.4198C16.1162 12.4198 16.4211 12.2141 16.548 11.8999L16.6293 11.6985C17.1886 10.3135 18.2866 9.21524 19.6715 8.65571L20.3941 8.36378V9.66992C20.3941 10.1257 20.7636 10.4952 21.2193 10.4952C21.675 10.4952 22.0445 10.1258 22.0446 9.6701L22.0452 6.6466C22.0454 6.03847 21.5524 5.54541 20.9443 5.54541H17.9219C17.4662 5.54541 17.0968 5.91484 17.0968 6.37056C17.0968 6.82628 17.4662 7.19571 17.9219 7.19571H19.2283L18.7769 7.37815C17.2108 8.01107 15.9467 9.21987 15.2444 10.7561L15.0217 11.2432C14.7701 11.7936 15.1723 12.4198 15.7774 12.4198Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/contact-more.svg b/src/assets/contact-more.svg
new file mode 100644
index 0000000..8299614
--- /dev/null
+++ b/src/assets/contact-more.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="11.0508" y="10.5" width="3" height="3" rx="1.5" fill="#1B1B22"/>
+<rect x="17.5508" y="10.5" width="3" height="3" rx="1.5" fill="#1B1B22"/>
+<rect x="4.55078" y="10.5" width="3" height="3" rx="1.5" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/copy.svg b/src/assets/copy.svg
new file mode 100644
index 0000000..84c134f
--- /dev/null
+++ b/src/assets/copy.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7957 3.22682H7.12903C6.64468 3.22682 6.2106 3.44204 5.91719 3.78206H4.6748C5.08123 2.82856 6.02707 2.16016 7.12903 2.16016H11.7957C13.2685 2.16016 14.4624 3.35406 14.4624 4.82682V9.49072C14.4624 10.6137 13.7682 11.5746 12.7855 11.9677V10.7479C13.1571 10.4549 13.3957 10.0007 13.3957 9.49072V4.82682C13.3957 3.94317 12.6794 3.22682 11.7957 3.22682Z" fill="white" fill-opacity="0.55"/>
+<rect x="2.25794" y="5.38099" width="8.93333" height="8.93219" rx="2.13333" stroke="white" stroke-opacity="0.55" stroke-width="1.06667"/>
+</svg>
diff --git a/src/assets/copy1.svg b/src/assets/copy1.svg
new file mode 100644
index 0000000..77361c7
--- /dev/null
+++ b/src/assets/copy1.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0076 2.72682H7.34095C6.8566 2.72682 6.42251 2.94204 6.12911 3.28206H4.88672C5.29314 2.32856 6.23899 1.66016 7.34095 1.66016H12.0076C13.4804 1.66016 14.6743 2.85406 14.6743 4.32682V8.99072C14.6743 10.1137 13.9801 11.0746 12.9974 11.4677V10.2479C13.369 9.95493 13.6076 9.50069 13.6076 8.99072V4.32682C13.6076 3.44317 12.8913 2.72682 12.0076 2.72682Z" fill="#76767A"/>
+<rect x="2.46888" y="4.88099" width="8.93333" height="8.93219" rx="2.13333" stroke="#76767A" stroke-width="1.06667"/>
+</svg>
diff --git a/src/assets/default_empty.svg b/src/assets/default_empty.svg
new file mode 100644
index 0000000..81b0fb2
--- /dev/null
+++ b/src/assets/default_empty.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 129" style="enable-background:new 0 0 128 129;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#CCCAD1;}
+</style>
+<path class="st0" d="M6.3,36.2C16.1,15.9,36.1,1.6,59.7,0v36.5C46.4,38.6,36.3,50.1,36.3,64c0,13.9,10.2,25.4,23.5,27.5V128
+	c-23.6-1.6-43.7-15.9-53.4-36.2h4.4c8.2,0,14.9-6.7,14.9-15V51.2c0-8.3-6.7-15-14.9-15H6.3z M68.3,91.5V128
+	c11.6-0.8,22.3-4.6,31.4-10.7l21,7.4c1.3,0.5,2.5-0.8,2.1-2.1l-7.2-20.5c2.4-3.2,4.4-6.6,6.2-10.3h-4.4c-8.2,0-14.9-6.7-14.9-15
+	V51.2c0-8.3,6.7-15,14.9-15h4.4C111.9,15.9,91.9,1.6,68.3,0v36.5C81.6,38.6,91.7,50.1,91.7,64C91.7,77.9,81.6,89.4,68.3,91.5z
+	 M128,63.9v0.2c0,6.7-1,13.1-2.9,19.1h-7.7c-3.5,0-6.4-2.9-6.4-6.4V51.2c0-3.5,2.9-6.4,6.4-6.4h7.7C127,50.8,128,57.2,128,63.9z
+	 M2.9,83.3C1,77.2,0,70.7,0,64c0-6.7,1-13.2,2.9-19.2h7.7c3.5,0,6.4,2.9,6.4,6.4v25.7c0,3.5-2.9,6.4-6.4,6.4H2.9z"/>
+<path class="st0" d="M63.9,44.7c-10.7,0-19.4,8.7-19.4,19.5s8.7,19.5,19.4,19.5c10.7,0,19.4-8.7,19.4-19.5S74.7,44.7,63.9,44.7z
+	 M53.3,67.2c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2c1.8,0,3.2,1.4,3.2,3.2C56.5,65.8,55.1,67.2,53.3,67.2z M64,67.2
+	c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2c1.8,0,3.2,1.4,3.2,3.2C67.2,65.8,65.8,67.2,64,67.2z M74.7,67.2
+	c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2c1.8,0,3.2,1.4,3.2,3.2C77.9,65.8,76.4,67.2,74.7,67.2z"/>
+</svg>
diff --git a/src/assets/delete-red.svg b/src/assets/delete-red.svg
new file mode 100644
index 0000000..f4b14a2
--- /dev/null
+++ b/src/assets/delete-red.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8" fill="#FC5A50"/>
+<path d="M9 12H15" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/deleteDia.svg b/src/assets/deleteDia.svg
new file mode 100644
index 0000000..fcb33e0
--- /dev/null
+++ b/src/assets/deleteDia.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51562 5.47266V17.2205C5.51562 19.4297 7.30649 21.2205 9.51563 21.2205H14.4845C16.6936 21.2205 18.4845 19.4297 18.4845 17.2205V5.47266H5.51562Z" stroke="white" stroke-width="1.6" stroke-linejoin="round"/>
+<path d="M10.1475 10.8711V14.8711" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8525 10.8711V14.8711" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 5.47266H20" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29492 5.47435L8.96428 4.25326C9.49091 3.29255 10.4994 2.69531 11.595 2.69531H12.419C13.5237 2.69531 14.5391 3.30248 15.0618 4.2757L15.7057 5.47435H8.29492Z" stroke="white" stroke-width="1.6" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/dialog/add.svg b/src/assets/dialog/add.svg
new file mode 100644
index 0000000..dac5cb4
--- /dev/null
+++ b/src/assets/dialog/add.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.1895 15.2031L18.1895 21.2031" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1895 18.2031L21.1895 18.2029" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5818 21.2034H4.98349C4.71419 21.2034 4.45593 21.0965 4.26551 20.9062C4.07509 20.716 3.96811 20.4579 3.96811 20.1889C3.96908 19.0326 4.25262 17.894 4.7941 16.8721C5.33557 15.8501 6.1186 14.9758 7.07516 14.325C7.19548 14.2514 7.29913 14.1535 7.37951 14.0376C7.45988 13.9218 7.5152 13.7905 7.54195 13.6521C7.5687 13.5137 7.56629 13.3712 7.53487 13.2338C7.50345 13.0964 7.44371 12.967 7.35946 12.8539C6.4769 11.7746 5.99608 10.4229 5.99886 9.02918C5.99279 7.49873 6.56396 6.02215 7.59858 4.89357C8.6332 3.76499 10.0554 3.06723 11.5818 2.93929C13.1082 2.81134 14.6268 3.2626 15.8351 4.20317C17.0435 5.14374 17.9312 6.49374 18.1021 8.01467C18.2343 9.19084 18.1021 10.3017 17.6166 11.405" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/dialog/audioPlay.png b/src/assets/dialog/audioPlay.png
new file mode 100644
index 0000000..c335f40
Binary files /dev/null and b/src/assets/dialog/audioPlay.png differ
diff --git a/src/assets/dialog/audioStop.png b/src/assets/dialog/audioStop.png
new file mode 100644
index 0000000..4876aee
Binary files /dev/null and b/src/assets/dialog/audioStop.png differ
diff --git a/src/assets/dialog/chat.svg b/src/assets/dialog/chat.svg
new file mode 100644
index 0000000..49b8e09
--- /dev/null
+++ b/src/assets/dialog/chat.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4945 2.99951L7.5 2.98438C4.73859 2.98438 2.5 5.22295 2.5 7.98437V20.1163C2.5 20.8279 3.33443 21.2121 3.87513 20.7495L6.47665 18.8966L17.4945 18.9117C20.2559 18.9117 22.4945 16.6731 22.4945 13.9117V7.9995C22.4945 5.23808 20.2559 2.99951 17.4945 2.99951ZM17.4945 17.3117C17.4948 17.3117 17.495 17.3117 17.4953 17.3117C19.3727 17.3113 20.8945 15.7892 20.8945 13.9117V7.9995C20.8945 6.12173 19.3723 4.59951 17.4945 4.59951H17.4921L7.5 4.58438C7.49963 4.58438 7.49925 4.58438 7.49888 4.58438C5.62164 4.58498 4.1 6.10698 4.1 7.98437V18.6249L5.54843 17.5933C5.82006 17.3999 6.14536 17.2961 6.47884 17.2966L17.4945 17.3117Z" fill="black"/>
+<path d="M12.5 7.21875V14.7817" stroke="#131415" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M16.5 11L8.5 11" stroke="#131415" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/default1.png b/src/assets/dialog/default1.png
new file mode 100644
index 0000000..a11579a
Binary files /dev/null and b/src/assets/dialog/default1.png differ
diff --git a/src/assets/dialog/down.svg b/src/assets/dialog/down.svg
new file mode 100644
index 0000000..d70e0b8
--- /dev/null
+++ b/src/assets/dialog/down.svg
@@ -0,0 +1,10 @@
+<svg width="41" height="11" viewBox="0 0 41 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2524_98159)">
+<path d="M0.875244 11.0008C6.75318 11.0008 12.4267 8.8437 16.82 4.93861L21.9492 0.590978C23.29 -0.600851 25.5276 0.114368 25.3998 1.90375L25.0552 6.72787C24.8903 9.03681 26.719 11.0008 29.0338 11.0008C20.9999 11.0008 4.5 11.0008 0.875244 11.0008Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2524_98159">
+<rect width="41" height="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/dialog/download.svg b/src/assets/dialog/download.svg
new file mode 100644
index 0000000..c758e45
--- /dev/null
+++ b/src/assets/dialog/download.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.81055 17.3438C7.82642 19.5736 10.1588 21.1332 12.8737 21.1332C15.5886 21.1332 17.9209 19.5736 18.9368 17.3438" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M12.873 2.77734L12.873 14.3694" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M6.17383 9.69922L12.0242 15.5496C12.4928 16.0182 13.2526 16.0182 13.7212 15.5496L19.5716 9.69922" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/dialog/face.svg b/src/assets/dialog/face.svg
new file mode 100644
index 0000000..94bfd8f
--- /dev/null
+++ b/src/assets/dialog/face.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.3" y="3.22578" width="17.3971" height="17.3971" rx="5.2" stroke="#1B1B22" stroke-width="1.6"/>
+<path d="M13.234 3.1451C13.234 7.3601 10.2262 11.1394 10.8927 12.2754C11.5593 13.4114 12.9374 12.2754 13.3923 13.4439C13.8473 14.6125 11.3326 18.6775 9.34242 20.5434" stroke="#1B1B22" stroke-width="1.6"/>
+<circle cx="16.2898" cy="9.10234" r="1.2" fill="#1B1B22"/>
+<circle cx="7.59062" cy="9.10234" r="1.2" fill="#1B1B22"/>
+<path d="M8.99159 16.2191C8.99159 16.2191 10.262 17.106 11.854 17.2469C13.463 17.3893 15.0968 16.7007 15.0968 16.7007" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/dialog/group.svg b/src/assets/dialog/group.svg
new file mode 100644
index 0000000..cfe40b0
--- /dev/null
+++ b/src/assets/dialog/group.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 625834">
+<path id="Vector 3" d="M15.2949 11.2852L15.2949 18.6448" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 4" d="M11.5938 14.9648L18.9536 14.9648" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Rectangle 3463221" d="M12.8164 8.73906C12.1537 8.73906 11.6164 8.2018 11.6164 7.53906L11.6164 2.53906C11.6164 1.87632 12.1537 1.33906 12.8164 1.33906L15.7762 1.33906C17.5436 1.33906 18.9762 2.77175 18.9762 4.53906L18.9762 7.53906C18.9762 8.2018 18.439 8.73906 17.7762 8.73906L12.8164 8.73906Z" stroke="#1B1B22" stroke-width="1.6"/>
+<path id="Rectangle 3463223" d="M7.78516 8.73906C8.4479 8.73906 8.98516 8.2018 8.98516 7.53906L8.98516 2.53906C8.98516 1.87632 8.4479 1.33906 7.78516 1.33906L4.82532 1.33906C3.05801 1.33906 1.62532 2.77175 1.62532 4.53906L1.62532 7.53906C1.62532 8.2018 2.16258 8.73906 2.82532 8.73906L7.78516 8.73906Z" stroke="#1B1B22" stroke-width="1.6"/>
+<path id="Rectangle 3463224" d="M7.78516 11.2648C8.4479 11.2648 8.98516 11.8021 8.98516 12.4648L8.98516 17.4648C8.98516 18.1276 8.4479 18.6648 7.78516 18.6648L4.82532 18.6648C3.05801 18.6648 1.62532 17.2322 1.62532 15.4648L1.62532 12.4648C1.62532 11.8021 2.16258 11.2648 2.82532 11.2648L7.78516 11.2648Z" stroke="#1B1B22" stroke-width="1.6"/>
+</g>
+</svg>
diff --git a/src/assets/dialog/groupChat.png b/src/assets/dialog/groupChat.png
new file mode 100644
index 0000000..5daa48a
Binary files /dev/null and b/src/assets/dialog/groupChat.png differ
diff --git a/src/assets/dialog/mySend.svg b/src/assets/dialog/mySend.svg
new file mode 100644
index 0000000..ad0c01a
--- /dev/null
+++ b/src/assets/dialog/mySend.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8898 5.45373L4.1336 13.2099C3.92532 13.4182 3.58763 13.4182 3.37935 13.2099C3.17107 13.0017 3.17107 12.664 3.37935 12.4557L11.1356 4.69948H5.08981C4.79526 4.69948 4.55648 4.4607 4.55648 4.16615C4.55648 3.87159 4.79526 3.63281 5.08981 3.63281H11.7565C12.4192 3.63281 12.9565 4.17007 12.9565 4.83281V11.4995C12.9565 11.794 12.7177 12.0328 12.4231 12.0328C12.1286 12.0328 11.8898 11.794 11.8898 11.4995V5.45373Z" fill="#A4A4A7"/>
+</svg>
diff --git a/src/assets/dialog/no-data.png b/src/assets/dialog/no-data.png
new file mode 100644
index 0000000..0d70226
Binary files /dev/null and b/src/assets/dialog/no-data.png differ
diff --git a/src/assets/dialog/pic.svg b/src/assets/dialog/pic.svg
new file mode 100644
index 0000000..5e4c8f9
--- /dev/null
+++ b/src/assets/dialog/pic.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="black" fill-opacity="0.6"/>
+<rect x="13.55" y="15.55" width="20.9" height="16.5001" rx="3.30001" stroke="white" stroke-width="1.1"/>
+<path d="M31.276 22.6906L34.4492 26.1484V29.3008C34.4492 30.5158 33.4642 31.5008 32.2492 31.5008H15.6888C15.0052 31.5008 14.3843 31.1026 14.0992 30.4813V28.4423L17.8596 25.0573C18.7566 24.25 20.1364 24.3158 20.9524 25.2049L21.4828 25.7829C22.3111 26.6855 23.7171 26.7376 24.61 25.8989L28.1488 22.5746C29.0417 21.7359 30.4477 21.7881 31.276 22.6906Z" fill="white" stroke="white" stroke-width="0.550001" stroke-linecap="round"/>
+<path d="M19.3258 19.9508C19.3258 20.7102 18.7102 21.3258 17.9508 21.3258C17.1914 21.3258 16.5758 20.7102 16.5758 19.9508C16.5758 19.1914 17.1914 18.5758 17.9508 18.5758C18.7102 18.5758 19.3258 19.1914 19.3258 19.9508Z" fill="white" stroke="white" stroke-width="0.550001"/>
+</svg>
diff --git a/src/assets/dialog/plus.svg b/src/assets/dialog/plus.svg
new file mode 100644
index 0000000..a39dfae
--- /dev/null
+++ b/src/assets/dialog/plus.svg
@@ -0,0 +1,5 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="70" rx="35" fill="#F8F8FB"/>
+<path d="M35 25V45" stroke="#D1D1D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M45 35L25 35" stroke="#D1D1D3" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/qrcode.svg b/src/assets/dialog/qrcode.svg
new file mode 100644
index 0000000..695eed6
--- /dev/null
+++ b/src/assets/dialog/qrcode.svg
@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.81953" y="3.33516" width="8.92599" height="8.92599" rx="3.2" stroke="#1B1B22" stroke-width="1.6"/>
+<rect x="6.9668" y="6.48047" width="2.63227" height="2.63227" rx="1.31613" fill="#1B1B22"/>
+<path d="M3.81953 17.1133C3.81953 15.8983 4.8045 14.9133 6.01953 14.9133H8.38772C9.05046 14.9133 9.58772 15.4505 9.58772 16.1133V18.4815C9.58772 19.6965 8.60275 20.6815 7.38772 20.6815H7.01953C5.25222 20.6815 3.81953 19.2488 3.81953 17.4815V17.1133Z" stroke="#1B1B22" stroke-width="1.6"/>
+<path d="M21.1668 6.90234C21.1668 8.11737 20.1818 9.10234 18.9668 9.10234L16.5986 9.10234C15.9359 9.10234 15.3986 8.56509 15.3986 7.90234L15.3986 5.53415C15.3986 4.31913 16.3836 3.33415 17.5986 3.33415L17.9668 3.33415C19.7341 3.33415 21.1668 4.76684 21.1668 6.53415L21.1668 6.90234Z" stroke="#1B1B22" stroke-width="1.6"/>
+<path d="M21.0898 14.9877V17.6016C21.0898 19.2584 19.7467 20.6016 18.0898 20.6016H15.476" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.2823 17.5547H14.3027C13.1982 17.5547 12.3027 18.4501 12.3027 19.5547V20.4289" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0898 11.8125L15.4284 11.8125" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M14.9316 14.5859L12.0727 14.5859" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M17.2792 14.5859H18.3314" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/recycle.svg b/src/assets/dialog/recycle.svg
new file mode 100644
index 0000000..762e41c
--- /dev/null
+++ b/src/assets/dialog/recycle.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7084 4.88056L13.9004 4.07356C13.9263 4.05584 13.9569 4.04614 13.9883 4.04568C14.0197 4.04522 14.0506 4.05401 14.077 4.07097C14.1034 4.08792 14.1243 4.11229 14.137 4.14102C14.1497 4.16976 14.1537 4.2016 14.1484 4.23256L13.6494 7.21256C13.6458 7.23385 13.6379 7.25419 13.6263 7.27237C13.6147 7.29054 13.5995 7.30617 13.5816 7.31832C13.5638 7.33046 13.5436 7.33887 13.5225 7.34304C13.5013 7.34721 13.4795 7.34704 13.4584 7.34256L10.4954 6.70456C10.4647 6.69798 10.4366 6.68252 10.4147 6.66012C10.3927 6.63772 10.3779 6.60936 10.3719 6.57857C10.3659 6.54777 10.3691 6.5159 10.3811 6.48692C10.3931 6.45794 10.4134 6.43313 10.4394 6.41556L11.8774 5.44256C11.1138 4.51858 10.0312 3.91495 8.84378 3.7512C7.65637 3.58745 6.45076 3.8755 5.46562 4.55833C4.48049 5.24116 3.78764 6.26899 3.52425 7.43834C3.26086 8.60769 3.44613 9.83331 4.04337 10.8726C4.47637 11.6225 5.10487 12.2407 5.86178 12.6613C6.61869 13.082 7.47561 13.2892 8.34108 13.2608C9.20655 13.2325 10.0481 12.9697 10.7759 12.5005C11.5036 12.0312 12.0904 11.3732 12.4734 10.5966C12.5324 10.4783 12.6358 10.3883 12.7611 10.3461C12.8863 10.3039 13.0232 10.313 13.1417 10.3714C13.2603 10.4298 13.3509 10.5328 13.3937 10.6578C13.4366 10.7828 13.4282 10.9197 13.3704 11.0386C12.8651 12.0647 12.0663 12.9175 11.0754 13.4886C10.1167 14.0421 9.01925 14.3087 7.91347 14.2569C6.80768 14.205 5.74002 13.8368 4.83735 13.196C3.93467 12.5552 3.23493 11.6687 2.82124 10.6419C2.40756 9.61513 2.29734 8.49116 2.50366 7.40355C2.70999 6.31595 3.22419 5.31044 3.98518 4.50648C4.74617 3.70252 5.72196 3.13392 6.7966 2.86823C7.87125 2.60253 8.99957 2.65092 10.0475 3.00764C11.0955 3.36436 12.019 4.01441 12.7084 4.88056Z" fill="#0095F6"/>
+</svg>
diff --git a/src/assets/dialog/right-arrow.svg b/src/assets/dialog/right-arrow.svg
new file mode 100644
index 0000000..ece7302
--- /dev/null
+++ b/src/assets/dialog/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.16016 12.2422L9.69569 8.70665C10.0862 8.31613 10.0862 7.68296 9.69569 7.29244L6.16016 3.75691" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/scan.svg b/src/assets/dialog/scan.svg
new file mode 100644
index 0000000..7f7abb7
--- /dev/null
+++ b/src/assets/dialog/scan.svg
@@ -0,0 +1,7 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.30859 9.16536V7.83203C4.30859 5.62289 6.09945 3.83203 8.30859 3.83203H9.64193" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.6426 9.16536V7.83203C20.6426 5.62289 18.8517 3.83203 16.6426 3.83203H15.3092" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.30859 14.9323V16.2656C4.30859 18.4748 6.09945 20.2656 8.30859 20.2656H9.64193" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.6426 14.9323V16.2656C20.6426 18.4748 18.8517 20.2656 16.6426 20.2656H15.3092" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.25586 12H21.7408" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/scans.svg b/src/assets/dialog/scans.svg
new file mode 100644
index 0000000..6cd2871
--- /dev/null
+++ b/src/assets/dialog/scans.svg
@@ -0,0 +1,7 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.60938 9.16536V7.83203C4.60938 5.62289 6.40024 3.83203 8.60937 3.83203H9.94271" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9434 9.16536V7.83203C20.9434 5.62289 19.1525 3.83203 16.9434 3.83203H15.61" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.60938 14.9323V16.2656C4.60938 18.4748 6.40024 20.2656 8.60937 20.2656H9.94271" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9434 14.9323V16.2656C20.9434 18.4748 19.1525 20.2656 16.9434 20.2656H15.61" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.55664 12H22.0416" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/search.svg b/src/assets/dialog/search.svg
new file mode 100644
index 0000000..f76f91d
--- /dev/null
+++ b/src/assets/dialog/search.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.80951 9.16634V7.83301C3.80951 5.62387 5.60037 3.83301 7.80951 3.83301H9.14284" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.1426 9.16634V7.83301C20.1426 5.62387 18.3518 3.83301 16.1426 3.83301H14.8093" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.80951 14.9313V16.2646C3.80951 18.4738 5.60037 20.2646 7.80951 20.2646H9.14284" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.1426 14.9313V16.2646C20.1426 18.4738 18.3518 20.2646 16.1426 20.2646H14.8093" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.75647 12H21.2415" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/dialog/share.svg b/src/assets/dialog/share.svg
new file mode 100644
index 0000000..bdeea1e
--- /dev/null
+++ b/src/assets/dialog/share.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9392 20.6535L22.556 12.5939C22.71 12.4378 22.802 12.1938 22.8004 11.9453C22.8004 11.694 22.7067 11.4638 22.5644 11.3051L13.9191 3.22126C13.6795 2.98163 13.0905 2.95319 12.7587 3.25557C12.5685 3.42898 12.4851 3.75531 12.4851 4.05487V8.06419C7.24877 8.32489 3.61899 12.2002 2.76635 18.3967C2.73989 18.589 2.77452 19.0999 3.22663 19.372C3.6137 19.605 4.19855 19.3709 4.30924 19.2604C6.67201 16.4679 8.40738 15.9701 10.8035 15.8813C11.3153 15.8624 11.8573 15.8621 12.4419 15.8621C12.4511 15.8621 12.4603 15.8621 12.4695 15.8621H12.4851V19.8357C12.4851 20.2397 12.6265 20.5909 12.8981 20.7437C13.187 20.9062 13.6804 20.9043 13.9392 20.6535ZM4.94739 16.2419C5.83408 15.514 6.72639 15.0124 7.68716 14.6904C9.49908 14.0831 11.4611 14.1487 13.3668 14.1741C13.8086 14.18 14.1668 14.5386 14.1668 14.9804V18.138L20.7872 11.9457L14.1668 5.75512V8.90305C14.1668 9.32942 13.8324 9.68086 13.4066 9.70206L12.5687 9.74378C10.3718 9.85315 8.56897 10.7068 7.20744 12.156C6.24472 13.1807 5.46383 14.5466 4.94739 16.2419Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/download.png b/src/assets/download.png
new file mode 100644
index 0000000..6f3839e
Binary files /dev/null and b/src/assets/download.png differ
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
new file mode 100644
index 0000000..c13f569
--- /dev/null
+++ b/src/assets/edit.svg
@@ -0,0 +1,6 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path d="M12.6503 5.12714C13.2361 4.54136 14.1858 4.54136 14.7716 5.12714L14.961 5.31651C15.5468 5.9023 15.5468 6.85205 14.961 7.43784L8.93449 13.4643C8.73571 13.6631 8.48505 13.802 8.21112 13.8652L7.18543 14.1019C6.46535 14.2681 5.82 13.6228 5.98618 12.9027L6.22287 11.877C6.28609 11.6031 6.42501 11.3524 6.6238 11.1536L12.6503 5.12714Z" stroke="white"/>
+<path d="M11.2969 5.77344L14.3147 8.79124" stroke="white"/>
+</g>
+</svg>
diff --git a/src/assets/empety.svg b/src/assets/empety.svg
new file mode 100644
index 0000000..1b675f9
--- /dev/null
+++ b/src/assets/empety.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714467766823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1972" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M209.066667 493.226667h230.4v315.733333h-196.266667c-18.773333 0-34.133333-15.36-34.133333-34.133333v-281.6z" fill="#538FE1" p-id="1973"></path><path d="M172.373333 434.346667c-6.826667-11.093333 0.853333-26.453333 14.506667-26.453334h190.293333c5.973333 0 11.093333 3.413333 14.506667 7.68l48.64 77.653334h-230.4l-37.546667-58.88z" fill="#CAE1FF" p-id="1974"></path><path d="M851.626667 434.346667c6.826667-11.093333-0.853333-26.453333-14.506667-26.453334h-187.733333c-5.973333 0-11.093333 3.413333-14.506667 7.68l-48.64 77.653334h228.693333l36.693334-58.88z" fill="#538FE1" p-id="1975"></path><path d="M439.466667 493.226667h375.466666v281.6c0 18.773333-15.36 34.133333-34.133333 34.133333h-341.333333v-315.733333z" fill="#CAE1FF" p-id="1976"></path><path d="M814.933333 787.626667c0 11.946667-9.386667 21.333333-21.333333 21.333333H439.466667V497.493333c0-2.56 1.706667-4.266667 4.266666-4.266666s4.266667 1.706667 4.266667 4.266666v302.933334H793.6c6.826667 0 12.8-5.973333 12.8-12.8V501.76H588.8c-2.56 0-4.266667-1.706667-4.266667-4.266667s1.706667-4.266667 4.266667-4.266666h226.133333v294.4zM817.493333 227.84c0 2.56-1.706667 4.266667-4.266666 4.266667-5.973333 0-11.946667 0-17.92 0.853333-2.56 0-4.266667-1.706667-4.266667-4.266667s1.706667-4.266667 4.266667-4.266666c5.973333-0.853333 11.946667-0.853333 17.92-0.853334 2.56 0 4.266667 1.706667 4.266666 4.266667z m17.92 0c0-2.56 2.56-4.266667 4.266667-4.266667 3.413333 0 5.973333 0.853333 9.386667 0.853334 2.56 0 4.266667 2.56 3.413333 4.266666 0 2.56-2.56 4.266667-4.266667 3.413334-2.56 0-5.973333-0.853333-8.533333-0.853334-2.56 0.853333-4.266667-0.853333-4.266667-3.413333z m-62.293333 3.413333c0.853333 2.56-0.853333 4.266667-3.413333 5.12-5.973333 0.853333-11.946667 2.56-17.066667 4.266667-2.56 0.853333-4.266667-0.853333-5.12-3.413333-0.853333-2.56 0.853333-4.266667 3.413333-5.12 5.973333-1.706667 11.946667-2.56 17.92-4.266667 1.706667 0 3.413333 0.853333 4.266667 3.413333z m-43.52 11.946667c0.853333 2.56 0 4.266667-2.56 5.12-5.12 2.56-11.093333 4.266667-16.213333 6.826667-1.706667 0.853333-4.266667 0-5.973334-1.706667-0.853333-1.706667 0-4.266667 1.706667-5.973333 5.12-2.56 11.093333-5.12 16.213333-7.68 4.266667 0 5.973333 0.853333 6.826667 3.413333z m-39.253333 19.626667c0.853333 1.706667 0.853333 4.266667-1.706667 5.973333-5.12 3.413333-9.386667 6.826667-14.506667 10.24-1.706667 1.706667-4.266667 0.853333-5.973333-0.853333-1.706667-1.706667-0.853333-4.266667 0.853333-5.973334 5.12-3.413333 9.386667-6.826667 14.506667-10.24 2.56-1.706667 5.12-1.706667 6.826667 0.853334z m-95.573334 5.12c1.706667 1.706667 1.706667 4.266667 0 5.973333l-5.973333 5.973333c-1.706667 1.706667-4.266667 1.706667-5.973333 0-1.706667-1.706667-1.706667-4.266667 0-5.973333l5.973333-5.973333c1.706667-1.706667 4.266667-1.706667 5.973333 0z m59.733334 21.333333c1.706667 1.706667 1.706667 4.266667 0 5.973333l-12.8 12.8c-1.706667 1.706667-4.266667 1.706667-5.973334 0-1.706667-1.706667-1.706667-4.266667 0-5.973333l12.8-12.8c1.706667-1.706667 4.266667-1.706667 5.973334 0z m-397.653334 4.266667c0 2.56-1.706667 4.266667-4.266666 4.266666-5.973333 0-11.946667 0.853333-17.92 0.853334-2.56 0-4.266667-1.706667-4.266667-4.266667s1.706667-4.266667 4.266667-4.266667c5.973333-0.853333 11.946667-0.853333 18.773333-0.853333 0.853333 0 3.413333 1.706667 3.413333 4.266667z m17.92 0.853333c0-2.56 2.56-4.266667 4.266667-4.266667 5.973333 0.853333 11.946667 0.853333 17.92 1.706667 2.56 0 4.266667 2.56 3.413333 5.12 0 2.56-2.56 4.266667-5.12 3.413333-5.973333-0.853333-11.946667-1.706667-17.92-1.706666-0.853333 0-2.56-2.56-2.56-4.266667z m296.96-1.706667c1.706667 1.706667 2.56 4.266667 0.853334 5.973334-3.413333 4.266667-6.826667 8.533333-10.24 13.653333-1.706667 1.706667-4.266667 2.56-5.973334 0.853333-1.706667-1.706667-2.56-4.266667-0.853333-5.973333 3.413333-4.266667 6.826667-9.386667 10.24-13.653333 1.706667-1.706667 4.266667-2.56 5.973333-0.853334z m-360.106666 4.266667c0 2.56-0.853333 4.266667-3.413334 5.12-3.413333 0.853333-5.973333 0.853333-8.533333 1.706667-2.56 0.853333-4.266667-0.853333-5.12-3.413334-0.853333-2.56 0.853333-4.266667 3.413333-5.12 2.56-0.853333 5.973333-0.853333 9.386667-1.706666 1.706667 0 3.413333 1.706667 4.266667 3.413333z m108.373333 3.413333c0.853333-2.56 2.56-3.413333 5.12-3.413333l17.92 5.12c2.56 0.853333 3.413333 3.413333 2.56 5.12-0.853333 2.56-3.413333 3.413333-5.12 2.56-5.973333-1.706667-11.093333-3.413333-17.066667-5.12-2.56 0-4.266667-1.706667-3.413333-4.266667z m42.666667 15.36c0.853333-1.706667 3.413333-2.56 5.973333-1.706666 5.12 2.56 11.093333 5.973333 16.213333 9.386666 1.706667 1.706667 2.56 4.266667 0.853334 5.973334-1.706667 1.706667-4.266667 2.56-5.973334 0.853333-5.12-3.413333-10.24-5.973333-15.36-9.386667-1.706667-0.853333-2.56-3.413333-1.706666-5.12z m261.12 5.973334c1.706667 1.706667 2.56 4.266667 0.853333 5.973333-3.413333 5.12-6.826667 9.386667-10.24 14.506667-1.706667 1.706667-4.266667 2.56-5.973333 0.853333-1.706667-1.706667-2.56-4.266667-0.853334-5.973333 3.413333-5.12 6.826667-10.24 10.24-14.506667 1.706667-1.706667 4.266667-1.706667 5.973334-0.853333z m-76.8 5.12c1.706667 0.853333 2.56 3.413333 1.706666 5.973333-2.56 5.12-5.12 9.386667-7.68 14.506667-0.853333 1.706667-3.413333 2.56-5.973333 1.706666-1.706667-0.853333-2.56-3.413333-1.706667-5.973333 2.56-5.12 5.12-10.24 8.533334-15.36 0.853333-0.853333 3.413333-1.706667 5.12-0.853333zM400.213333 341.333333c1.706667-1.706667 4.266667-1.706667 5.973334 0 4.266667 4.266667 8.533333 8.533333 12.8 13.653334 1.706667 1.706667 0.853333 4.266667-0.853334 5.973333-1.706667 1.706667-4.266667 0.853333-5.973333-0.853333-3.413333-4.266667-7.68-9.386667-11.946667-12.8-1.706667-1.706667-1.706667-4.266667 0-5.973334z m198.826667 17.92c1.706667 0.853333 2.56 3.413333 1.706667 5.973334l-7.68 15.36c-0.853333 2.56-3.413333 3.413333-5.973334 1.706666-2.56-0.853333-3.413333-3.413333-1.706666-5.973333 2.56-5.12 5.12-11.093333 7.68-16.213333 1.706667-1.706667 4.266667-2.56 5.973333-0.853334z m-70.826667 5.12c2.56 0.853333 3.413333 3.413333 2.56 5.12l-5.12 15.36c-0.853333 2.56-3.413333 3.413333-5.12 2.56-2.56-0.853333-3.413333-3.413333-2.56-5.12 1.706667-5.12 3.413333-11.093333 5.12-16.213333 0.853333-0.853333 3.413333-2.56 5.12-1.706667z m-100.693333 11.946667c1.706667-0.853333 4.266667 0 5.973333 1.706667 1.706667 2.56 2.56 5.12 4.266667 8.533333 0.853333 2.56 0 4.266667-2.56 5.973333-2.56 0.853333-4.266667 0-5.973333-2.56-0.853333-2.56-2.56-5.12-4.266667-7.68 0-1.706667 0.853333-4.266667 2.56-5.973333z m153.6 23.04c2.56 0.853333 3.413333 3.413333 2.56 5.12-0.853333 2.56-1.706667 5.973333-2.56 8.533333-0.853333 2.56-2.56 3.413333-5.12 2.56-2.56-0.853333-3.413333-2.56-2.56-5.12 0.853333-2.56 1.706667-5.973333 2.56-8.533333 0-1.706667 2.56-3.413333 5.12-2.56z m-64.853333 5.12c2.56 0.853333 4.266667 2.56 3.413333 5.12-0.853333 5.973333-1.706667 11.093333-2.56 16.213333 0 2.56-2.56 4.266667-4.266667 3.413334-2.56 0-4.266667-2.56-3.413333-4.266667 0.853333-5.12 1.706667-11.093333 2.56-17.066667 0-1.706667 1.706667-3.413333 4.266667-3.413333z m-4.266667 41.813333c2.56 0 4.266667 1.706667 4.266667 4.266667s0.853333 5.973333 0.853333 7.68c0 2.56-0.853333 4.266667-3.413333 5.12-2.56 0-4.266667-0.853333-5.12-3.413333 0-2.56-0.853333-5.12-0.853334-8.533334 0.853333-2.56 2.56-4.266667 4.266667-5.12z" fill="#1B1B22" p-id="1977"></path><path d="M457.386667 255.146667c0.853333-4.266667 6.826667-4.266667 8.533333 0l5.973333 24.746666c0 1.706667 1.706667 2.56 3.413334 3.413334l24.746666 5.973333c4.266667 0.853333 4.266667 6.826667 0 8.533333l-24.746666 5.973334c-1.706667 0-2.56 1.706667-3.413334 3.413333l-5.973333 24.746667c-0.853333 4.266667-6.826667 4.266667-8.533333 0l-5.973334-24.746667c0-1.706667-1.706667-2.56-3.413333-3.413333l-24.746667-5.973334c-4.266667-0.853333-4.266667-6.826667 0-8.533333l24.746667-5.973333c1.706667 0 2.56-1.706667 3.413333-3.413334l5.973334-24.746666z" fill="#FFD761" p-id="1978"></path><path d="M364.373333 209.066667c0.853333 1.706667 2.56 1.706667 3.413334 0l0.853333-5.12c0-0.853333 0.853333-0.853333 0.853333-0.853334l5.12-0.853333c1.706667-0.853333 1.706667-2.56 0-3.413333l-5.12-0.853334c-0.853333 0-0.853333-0.853333-0.853333-0.853333l-0.853333-5.12c-0.853333-1.706667-2.56-1.706667-3.413334 0l-0.853333 5.12c0 0.853333-0.853333 0.853333-0.853333 0.853333l-5.12 0.853334c-1.706667 0.853333-1.706667 2.56 0 3.413333l5.12 0.853333c0.853333 0 0.853333 0.853333 0.853333 0.853334l0.853333 5.12zM517.973333 221.013333c0.853333 1.706667 2.56 1.706667 3.413334 0l0.853333-5.12c0-0.853333 0.853333-0.853333 0.853333-0.853333l5.973334-1.706667c1.706667-0.853333 1.706667-2.56 0-3.413333l-5.12-0.853333c-0.853333 0-0.853333-0.853333-0.853334-0.853334l-0.853333-5.12c-0.853333-1.706667-2.56-1.706667-3.413333 0l-0.853334 5.12c0 0.853333-0.853333 0.853333-0.853333 0.853334l-5.12 0.853333c-1.706667 0.853333-1.706667 2.56 0 3.413333l5.12 0.853334c0.853333 0 0.853333 0.853333 0.853333 0.853333v5.973333z" fill="#1B1B22" p-id="1979"></path><path d="M658.773333 209.066667c0.853333 1.706667 2.56 1.706667 3.413334 0l0.853333-5.12c0-0.853333 0.853333-0.853333 0.853333-0.853334l5.12-0.853333c1.706667-0.853333 1.706667-2.56 0-3.413333l-5.12-0.853334c-0.853333 0-0.853333-0.853333-0.853333-0.853333l-0.853333-5.12c-0.853333-1.706667-2.56-1.706667-3.413334 0l-1.706666 3.413333c0 0.853333-0.853333 0.853333-0.853334 0.853334l-5.12 0.853333c-1.706667 0.853333-1.706667 2.56 0 3.413333l5.12 0.853334c0.853333 0 0.853333 0.853333 0.853334 0.853333l1.706666 6.826667z" fill="#FFD761" p-id="1980"></path></svg>
\ No newline at end of file
diff --git a/src/assets/expand-list-icon.svg b/src/assets/expand-list-icon.svg
new file mode 100644
index 0000000..0e2882b
--- /dev/null
+++ b/src/assets/expand-list-icon.svg
@@ -0,0 +1,8 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.07812 6.08643H16.0781" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M8.07812 10.0864H16.0781" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M8.07812 14.0864H16.0781" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M4.98047 6.08643H4.99047" stroke="#A4A4A7" stroke-width="2" stroke-linecap="round"/>
+<path d="M4.98047 10.0864H4.99047" stroke="#A4A4A7" stroke-width="2" stroke-linecap="round"/>
+<path d="M4.98047 14.0864H4.99047" stroke="#A4A4A7" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/filesvg/CloseShape.svg b/src/assets/filesvg/CloseShape.svg
new file mode 100644
index 0000000..a38dd79
--- /dev/null
+++ b/src/assets/filesvg/CloseShape.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 8C16.75 12.4183 13.1683 16 8.75 16C4.33172 16 0.75 12.4183 0.75 8C0.75 3.58172 4.33172 0 8.75 0C13.1683 0 16.75 3.58172 16.75 8ZM6.28056 4.51019L8.75 6.97962L11.2194 4.51019C11.5012 4.22842 11.958 4.22842 12.2398 4.51019C12.5216 4.79196 12.5216 5.2488 12.2398 5.53056L9.77038 8L12.2398 10.4694C12.5216 10.7512 12.5216 11.208 12.2398 11.4898C11.958 11.7716 11.5012 11.7716 11.2194 11.4898L8.75 9.02038L6.28056 11.4898C5.9988 11.7716 5.54196 11.7716 5.26019 11.4898C4.97842 11.208 4.97842 10.7512 5.26019 10.4694L7.72962 8L5.26019 5.53056C4.97842 5.2488 4.97842 4.79196 5.26019 4.51019C5.54196 4.22842 5.9988 4.22842 6.28056 4.51019Z" fill="#FC5A50"/>
+</svg>
diff --git a/src/assets/filesvg/apk.svg b/src/assets/filesvg/apk.svg
new file mode 100644
index 0000000..e162507
--- /dev/null
+++ b/src/assets/filesvg/apk.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#85C808;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.6,3.5h22L41,14.1v30.3c0,0.6-0.5,1.2-1.2,1.2H8.6c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.4,4.1,7.9,3.5,8.6,3.5z"/>
+<path class="st1" d="M30.6,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2H41L30.6,3.5z"/>
+<path class="st2" d="M30.2,23.2c0.4,0.2,0.6,0.8,0.3,1.2l-1.3,2.3c2.5,1.5,4.2,4.2,4.5,7.2c0.1,0.5-0.4,1-0.9,1H15.4
+	c-0.5,0-0.9-0.4-0.9-1c0.3-2.9,1.9-5.4,4.2-7l-1.5-2.6c-0.2-0.4-0.1-1,0.3-1.2c0.4-0.2,1-0.1,1.2,0.3l1.5,2.6
+	c1.2-0.5,2.5-0.8,3.9-0.8c1.3,0,2.4,0.2,3.6,0.7l1.4-2.4C29.3,23.1,29.8,23,30.2,23.2z M20.2,30.1c-0.5,0-0.9,0.4-0.9,0.9
+	c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C21,30.5,20.6,30.1,20.2,30.1z M28,30.1c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9
+	c0.5,0,0.9-0.4,0.9-0.9C28.9,30.5,28.5,30.1,28,30.1z"/>
+</svg>
diff --git a/src/assets/filesvg/audio.svg b/src/assets/filesvg/audio.svg
new file mode 100644
index 0000000..43b9ec9
--- /dev/null
+++ b/src/assets/filesvg/audio.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF5F5F;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.8,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.8c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.6,4.1,8.1,3.5,8.8,3.5z"/>
+<path class="st1" d="M30.8,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.8,3.5z"/>
+<path class="st2" d="M31.7,20c0-0.2,0-0.3-0.1-0.5c-0.1-0.2-0.2-0.3-0.3-0.4c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0l-11.1,2.1
+	c-0.6,0.1-1,0.6-1,1.2l0,10.6c-0.3-0.1-0.6-0.2-1-0.2c-1.5,0-2.7,1.2-2.7,2.7c0,1.5,1.2,2.7,2.7,2.7s2.7-1.2,2.7-2.7v-10l9.9-1.8
+	v7.2c-0.3-0.1-0.6-0.2-1-0.2c-1.5,0-2.7,1.2-2.7,2.7c0,1.5,1.2,2.7,2.7,2.7c1.5,0,2.7-1.2,2.7-2.7C31.7,33.2,31.7,20,31.7,20z"/>
+</svg>
diff --git a/src/assets/filesvg/code.svg b/src/assets/filesvg/code.svg
new file mode 100644
index 0000000..962d9c7
--- /dev/null
+++ b/src/assets/filesvg/code.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#ACB1C9;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.8,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.8c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.6,4.1,8.1,3.5,8.8,3.5z"/>
+<path class="st1" d="M30.8,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.8,3.5z"/>
+<path class="st2" d="M18.9,33.9c-0.3,0-0.6-0.1-0.8-0.3l-3.9-3.9c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8l3.9-3.9
+	c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.3,0,0.5,0.1c0.1,0.1,0.3,0.1,0.4,0.3c0.1,0.1,0.2,0.2,0.3,0.4
+	s0.1,0.3,0.1,0.5c0,0.2,0,0.3-0.1,0.4c-0.1,0.1-0.1,0.3-0.3,0.4l-3.1,3.1l3.1,3.1c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2,0,0.5-0.1,0.7
+	c-0.1,0.2-0.2,0.4-0.4,0.5C19.4,33.8,19.1,33.9,18.9,33.9z M29.9,33.9c-0.2,0-0.5-0.1-0.6-0.2c-0.2-0.1-0.3-0.3-0.4-0.5
+	c-0.1-0.2-0.1-0.4-0.1-0.7c0-0.2,0.2-0.4,0.3-0.6l3.1-3.1l-3.1-3.1c-0.1-0.1-0.2-0.2-0.3-0.4c-0.1-0.1-0.1-0.3-0.1-0.4
+	c0-0.2,0-0.3,0.1-0.5c0.1-0.1,0.1-0.3,0.3-0.4c0.1-0.1,0.2-0.2,0.4-0.3s0.3-0.1,0.5-0.1c0.2,0,0.3,0,0.4,0.1
+	c0.1,0.1,0.3,0.1,0.4,0.3l3.9,3.9c0.2,0.2,0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8l-3.9,3.9c-0.1,0.1-0.2,0.2-0.4,0.3
+	C30.2,33.9,30.1,33.9,29.9,33.9z M22.1,37c-0.2,0-0.4,0-0.5-0.1c-0.2-0.1-0.3-0.2-0.4-0.4C21,36.4,21,36.2,20.9,36
+	c0-0.2,0-0.4,0-0.5l4.7-14c0.1-0.3,0.3-0.5,0.6-0.7c0.3-0.1,0.6-0.2,0.9-0.1c0.3,0.1,0.5,0.3,0.7,0.6c0.1,0.3,0.2,0.6,0.1,0.9
+	l-4.7,14c-0.1,0.2-0.2,0.4-0.4,0.6S22.3,37,22.1,37z"/>
+</svg>
diff --git a/src/assets/filesvg/deb.svg b/src/assets/filesvg/deb.svg
new file mode 100644
index 0000000..6ed07aa
--- /dev/null
+++ b/src/assets/filesvg/deb.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F8B427;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#FFFFFF;fill-opacity:0.5;}
+</style>
+<path class="st0" d="M9,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H9c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.8,4.1,8.3,3.5,9,3.5z"/>
+<path class="st1" d="M33.4,35.8c-0.1-0.4-1.1-0.8-1.4-1.5c-0.3-0.7-0.1-1.1-0.5-1.4l-0.2-0.1c0.2-0.5,0.2-1.1,0.1-1.9
+	c-0.1-2.1-1-3.4-1.4-4c-0.6-0.7-0.8-1-1.2-1.8c-0.4-0.7-0.9-1.5-0.9-2.5c0-1.1-0.1-2.4-0.6-3.3c-0.5-0.9-1.8-1.9-3.6-1.4
+	c-1.9,0.5-2,2.2-2,3.4c-0.1,1.2,0.5,2.1,0,3.6c-0.5,1.5-1.2,2.1-1.6,2.8c-0.9,1.9-1.1,2.1-1.5,3c-0.5,1.1-0.1,1.7-0.1,1.7l0,0.1
+	c-0.2,0.3-0.2,0.6-0.5,0.7c-0.4,0.2-1.3-0.1-1.6,0.2c-0.3,0.3,0.2,2.2,0,2.6c-0.2,0.4-0.4,0.4-0.4,0.9c0,0.6,0.6,0.5,3.1,1.3
+	c2.4,0.8,2.9,0.6,3.4-0.1c0.1-0.1,0.1-0.2,0.2-0.4c0.7-0.1,1.5-0.1,1.9-0.1c1,0,2.3,0.3,3,0.5c0.1,0.2,0.2,0.5,0.4,0.5
+	c0.5,0.2,1.7,0.2,2.4-0.5c0.7-0.7,2.5-1.6,2.7-1.8C33.1,36.3,33.5,36.1,33.4,35.8z M23.2,22.5c0-0.3-0.2-0.6-0.4-0.6
+	s-0.3,0.3-0.3,0.6c0,0.2,0.1,0.4,0.2,0.4l-0.1,0.1c-0.1-0.2-0.2-0.5-0.3-0.8c0-0.6,0.2-1.1,0.4-1.1c0.2,0,0.5,0.4,0.6,1.1v0.4
+	C23.3,22.6,23.3,22.6,23.2,22.5C23.2,22.6,23.2,22.6,23.2,22.5z M22.6,23.3c0,0,0.1-0.1,0.1-0.2C22.7,23.2,22.6,23.2,22.6,23.3z
+	 M22.9,23.7c0.1,0,0.1-0.1,0.2-0.2c0.2-0.2,0.5-0.4,0.7-0.4h0.1c0.4,0,0.8,0.1,1.4,0.5l0.1,0.1c-0.1,0.1-0.3,0.2-0.5,0.4
+	c-0.4,0.3-0.7,0.5-0.8,0.6c-0.1,0-0.3-0.2-0.6-0.4c-0.3-0.2-0.6-0.5-0.6-0.5C22.9,23.8,22.9,23.8,22.9,23.7z M25.3,22.9l0.1,0.1
+	C25.4,23,25.4,22.9,25.3,22.9z M25.4,21.9c-0.2,0-0.5,0.2-0.5,0.6v0.1c-0.1,0-0.2-0.1-0.3-0.1v-0.4c0-0.3,0.1-0.6,0.3-0.8
+	c0.1-0.2,0.3-0.3,0.5-0.3h0c0.1,0,0.2,0.1,0.4,0.2c0.2,0.2,0.2,0.6,0.2,0.9c0,0.3-0.1,0.6-0.3,0.8l0,0h0c0,0-0.1,0-0.1-0.1
+	c0.1-0.1,0.2-0.2,0.2-0.5C25.8,22.2,25.6,21.9,25.4,21.9z M25.6,23.1c0,0-0.1-0.1-0.1-0.2C25.5,23,25.5,23,25.6,23.1z M25.2,22.9
+	c0,0-0.1-0.1-0.1-0.1C25.1,22.8,25.2,22.9,25.2,22.9z M25.2,22.8c-0.1,0-0.1,0-0.1-0.1C25.1,22.8,25.1,22.8,25.2,22.8z M25.8,23.2
+	c0,0-0.1-0.1-0.1-0.2C25.7,23.1,25.8,23.2,25.8,23.2z M26,23.3l-0.1-0.1C25.9,23.2,25.9,23.3,26,23.3z M25.9,23.3
+	c0,0-0.1-0.1-0.1-0.2C25.8,23.2,25.9,23.2,25.9,23.3z M26.6,35.9c-0.5,0.4-0.8,0.6-1,0.7c-0.5,0.3-1.2,0.5-2,0.4
+	c-0.5-0.1-0.9-0.3-1.3-0.5c-0.1-0.1-0.1-0.3-0.2-0.4c-0.2-0.2-1.3-1.9-2.1-3c0-0.2-0.1-0.4-0.1-0.6c0-1.2,0.4-2.7,0.6-3
+	c0.1-0.1,0.7-1.9,0.8-2.3c0.3-0.7,0.7-1.5,0.9-2c0.1-0.4,0.2-0.7,0.1-0.8c0.2,0.2,1.4,1.1,1.8,1.1c0.4,0,1.7-1.1,2.1-1.6
+	c0,0.2,0.2,0.5,0.4,0.9c0.4,1,0.9,2.9,1.7,3.9c0.1,0.1,0.2,0.3,0.2,0.4c0.3,1.1,0.2,1.9,0.1,3.5c-0.1,0-0.2,0-0.3-0.1
+	c-0.5,0-0.7,0.2-0.7,0.2s0,1.2-0.1,2.3l-0.1,0.1C27.1,35.5,26.8,35.7,26.6,35.9z"/>
+<path class="st2" d="M31,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L31,3.5z"/>
+</svg>
diff --git a/src/assets/filesvg/dmg.svg b/src/assets/filesvg/dmg.svg
new file mode 100644
index 0000000..b680376
--- /dev/null
+++ b/src/assets/filesvg/dmg.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#75ABBC;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st2{fill:#FFFFFF;fill-opacity:0.5;}
+</style>
+<path class="st0" d="M8.6,3.5h22L41,14.1v30.3c0,0.6-0.5,1.2-1.2,1.2H8.6c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.4,4.1,7.9,3.5,8.6,3.5z"/>
+<path class="st1" d="M14.7,32.3c0,1.1,0.9,2,2,2h14.9c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2H16.7C15.6,30.3,14.7,31.2,14.7,32.3z
+	 M27.2,28.7c0,0.2,0.1,0.3,0.3,0.3h4.4c0.2,0,0.3-0.1,0.3-0.3c-0.1-4.2-3.5-7.7-7.8-7.8c-4.5-0.3-8.3,3.3-8.4,7.8
+	c0,0.2,0.1,0.3,0.3,0.3h4.5c0.2,0,0.3-0.1,0.3-0.3c0.1-1.6,1.3-2.9,2.9-2.9C25.7,25.7,27.1,27,27.2,28.7z M28.6,33h-1.3
+	c-0.4,0-0.6-0.3-0.6-0.6c0-0.4,0.3-0.6,0.6-0.6h1.3c0.4,0,0.6,0.3,0.6,0.6C29.2,32.8,28.9,33,28.6,33z M30.8,33
+	c-0.4,0-0.6-0.3-0.6-0.6c0-0.4,0.3-0.6,0.6-0.6c0.3,0,0.6,0.3,0.6,0.6C31.4,32.8,31.2,33,30.8,33z"/>
+<path class="st2" d="M30.6,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2H41L30.6,3.5z"/>
+</svg>
diff --git a/src/assets/filesvg/doc.svg b/src/assets/filesvg/doc.svg
new file mode 100644
index 0000000..d27653a
--- /dev/null
+++ b/src/assets/filesvg/doc.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 49" style="enable-background:new 0 0 48 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#538FE1;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.4,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.4c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.2,4.1,7.7,3.5,8.4,3.5z"/>
+<path class="st1" d="M30.4,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.4,3.5z"/>
+<path class="st2" d="M31.4,36.9c0.9,1,2.5,0.3,2.5-1V22.1c0-0.8-0.6-1.4-1.4-1.4l0,0c-0.8,0-1.4,0.6-1.4,1.4v10.1L25.4,26
+	c-0.6-0.6-1.5-0.6-2.1,0l-5.7,6.2V22.1c0-0.8-0.6-1.4-1.4-1.4l0,0c-0.8,0-1.4,0.6-1.4,1.4v13.8c0,1.3,1.6,1.9,2.5,1l6.8-7.4
+	c0.2-0.2,0.5-0.2,0.7,0L31.4,36.9z"/>
+</svg>
diff --git a/src/assets/filesvg/epub.svg b/src/assets/filesvg/epub.svg
new file mode 100644
index 0000000..30fa1a4
--- /dev/null
+++ b/src/assets/filesvg/epub.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#688BEF;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#FFFFFF;fill-opacity:0.5;}
+</style>
+<path class="st0" d="M9,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H9c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.8,4.1,8.3,3.5,9,3.5z"/>
+<path class="st1" d="M19.8,18.3V5.5h-6.7v12.8c0,0.3,0.4,0.5,0.6,0.4l2.5-1.5c0.1-0.1,0.3-0.1,0.4,0l2.5,1.5
+	C19.4,18.8,19.8,18.6,19.8,18.3z"/>
+<path class="st2" d="M31,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L31,3.5z"/>
+</svg>
diff --git a/src/assets/filesvg/exe.svg b/src/assets/filesvg/exe.svg
new file mode 100644
index 0000000..925d138
--- /dev/null
+++ b/src/assets/filesvg/exe.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 49" style="enable-background:new 0 0 48 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#538FE1;}
+	.st1{clip-path:url(#SVGID_00000067943293045999651180000005941296380038699927_);}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#FFFFFF;fill-opacity:0.5;}
+</style>
+<path class="st0" d="M8.4,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.4c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.2,4.1,7.7,3.5,8.4,3.5z"/>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="15.1" y="18.3" width="18.2" height="18.2"/>
+	</defs>
+	<clipPath id="SVGID_00000145749256945590173450000003517655827947138949_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000145749256945590173450000003517655827947138949_);">
+		<path class="st2" d="M22.7,28.5v6.6l-6.9-1v-5.7H22.7z M22.7,21v6.7h-6.9v-5.8L22.7,21z M32.7,28.5v8l-9.2-1.3v-6.7H32.7z
+			 M32.7,19.6v8.1h-9.2v-6.8L32.7,19.6z"/>
+	</g>
+</g>
+<path class="st3" d="M30.4,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.4,3.5z"/>
+</svg>
diff --git a/src/assets/filesvg/html.svg b/src/assets/filesvg/html.svg
new file mode 100644
index 0000000..acff1d1
--- /dev/null
+++ b/src/assets/filesvg/html.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716800198871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3346" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M354.40128 0c-87.04 0-157.44 70.55872-157.44 157.59872v275.68128H78.72c-21.6576 0-39.36256 17.69984-39.36256 39.36256v236.31872c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.24128v118.08256c0 87.04 70.4 157.59872 157.44 157.59872h472.63744c87.04 0 157.59872-70.55872 157.59872-157.59872V315.0336c0-41.74848-38.9888-81.93024-107.52-149.27872l-29.11744-29.12256L818.87744 107.52C751.5392 38.9888 711.39328 0 669.59872 0H354.4064z m0 78.72h287.20128c28.35456 7.0912 27.99616 42.1376 27.99616 76.8v120.16128c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.07744c39.38816 0 78.87872-0.0256 78.87872 39.36256v512c0 43.32032-35.55328 78.87872-78.87872 78.87872H354.4064c-43.32544 0-78.72-35.5584-78.72-78.87872v-118.08256h393.91744c21.66272 0 39.36256-17.69472 39.36256-39.35744V472.64256c0-21.66272-17.69984-39.36256-39.36256-39.36256H275.68128V157.59872c0-43.32032 35.39456-78.87872 78.72-78.87872zM75.03872 493.59872h22.08256v73.92256H176.7936V493.59872h23.04v175.68256h-23.04V587.6736H97.1264v81.60256h-22.08256V493.59872z m151.68 0h121.92256v20.16256h-49.92v155.52H276.6336v-155.52h-49.92v-20.16256z m148.80256 0h32.64l49.92 143.04256h0.95744l48.96256-143.04256h33.59744v175.68256h-22.07744v-106.56256c0-10.88 0.31744-26.55744 0.95744-47.03744h-0.95744l-52.80256 153.6h-19.2l-52.79744-153.6h-0.96256c1.28 22.4 1.92 38.71744 1.92 48.95744v104.64256h-20.15744V493.59872z m214.07744 0h22.08256v155.52h69.12v20.16256h-91.20256V493.59872z" p-id="3347" fill="#e16531"></path></svg>
\ No newline at end of file
diff --git a/src/assets/filesvg/image.svg b/src/assets/filesvg/image.svg
new file mode 100644
index 0000000..4afe02a
--- /dev/null
+++ b/src/assets/filesvg/image.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 49" style="enable-background:new 0 0 48 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1CA8F8;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.4,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.4c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.2,4.1,7.7,3.5,8.4,3.5z"/>
+<path class="st1" d="M30.4,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.4,3.5z"/>
+<path class="st2" d="M33.9,32.6l-4.1-6.3c-0.1-0.1-0.1-0.2-0.2-0.2c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1
+	c-0.1,0.1-0.2,0.1-0.2,0.2l-2.2,3.4l-4.9-7.9c-0.1-0.1-0.1-0.2-0.2-0.2c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1
+	c-0.1,0.1-0.2,0.1-0.2,0.2L14,32.6c-0.1,0.1-0.1,0.2-0.1,0.3s0,0.2,0.1,0.3c0.1,0.1,0.1,0.2,0.2,0.2c0.1,0.1,0.2,0.1,0.3,0.1h18.9
+	c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.1,0.3-0.2C34,33.2,34,33.1,34,33C34,32.9,34,32.7,33.9,32.6L33.9,32.6L33.9,32.6z M28.4,20.7
+	c0,0.3,0.1,0.6,0.3,0.9c0.2,0.3,0.4,0.5,0.7,0.6c0.3,0.1,0.6,0.2,0.9,0.1c0.3-0.1,0.6-0.2,0.8-0.4c0.2-0.2,0.4-0.5,0.4-0.8
+	s0-0.6-0.1-0.9c-0.1-0.3-0.3-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3C29.2,19.1,28.4,19.8,28.4,20.7L28.4,20.7z"/>
+</svg>
diff --git a/src/assets/filesvg/ipa.svg b/src/assets/filesvg/ipa.svg
new file mode 100644
index 0000000..6de5301
--- /dev/null
+++ b/src/assets/filesvg/ipa.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3F414D;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.8,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.8c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.6,4.1,8.1,3.5,8.8,3.5z"/>
+<path class="st1" d="M30.8,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.8,3.5z"/>
+<path class="st2" d="M31.6,31.9c0,0.1-0.4,1.4-1.3,2.7c-0.8,1.2-1.6,2.3-2.9,2.4c-1.3,0-1.7-0.8-3.1-0.8c-1.4,0-1.9,0.7-3.1,0.8
+	c-1.2,0.1-2.2-1.3-2.9-2.4c-1.6-2.4-2.8-6.7-1.2-9.7c0.8-1.5,2.3-2.4,3.9-2.4c1.2,0,2.3,0.8,3.1,0.8c0.7,0,2.1-1,3.6-0.9
+	c0.6,0,2.3,0.3,3.4,1.9c-0.1,0.1-2,1.2-2,3.7C29.1,30.9,31.5,31.9,31.6,31.9 M26.7,20.9c0.7-0.8,1.1-2,1-3.1c-0.9,0-2.1,0.6-2.8,1.5
+	c-0.6,0.7-1.1,1.9-1,3C25,22.3,26,21.7,26.7,20.9z"/>
+</svg>
diff --git a/src/assets/filesvg/key.svg b/src/assets/filesvg/key.svg
new file mode 100644
index 0000000..31ef940
--- /dev/null
+++ b/src/assets/filesvg/key.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 49" style="enable-background:new 0 0 48 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00A9FA;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.4,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.4c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.2,4.1,7.7,3.5,8.4,3.5z"/>
+<path class="st1" d="M30.4,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.4,3.5z"/>
+<path class="st2" d="M32.6,19.6c0-0.3-0.2-0.5-0.5-0.5H17.8v-1.4c0-0.3,0.2-0.5,0.5-0.5H21c0.2,0.4,0.5,0.6,1,0.6h1.4
+	c0.6,0,1.1-0.5,1.1-1.1c0-0.6-0.5-1.1-1.1-1.1h-1.4c-0.4,0-0.8,0.3-1,0.6h-2.6c-0.7,0-1.4,0.6-1.4,1.4v1.4h-1
+	c-0.3,0-0.5,0.2-0.5,0.5L15.1,27H33L32.6,19.6z M14.4,27.7c0,0.5,0.4,0.9,0.9,0.9h17.5c0.5,0,0.9-0.4,0.9-0.9H14.4z M28.5,37.2h-2.8
+	c-0.6,0-1.1-0.5-1.1-1.1v-6.7c0-0.3-0.2-0.6-0.6-0.6s-0.6,0.2-0.6,0.6v6.7c0,0.6-0.5,1.1-1.1,1.1h-2.8c-0.3,0-0.6,0.2-0.6,0.6v0.1
+	c0,0.3,0.2,0.6,0.6,0.6h9c0.3,0,0.6-0.2,0.6-0.6v-0.1C29.1,37.5,28.8,37.2,28.5,37.2z"/>
+</svg>
diff --git a/src/assets/filesvg/mp3.svg b/src/assets/filesvg/mp3.svg
new file mode 100644
index 0000000..77c6836
--- /dev/null
+++ b/src/assets/filesvg/mp3.svg
@@ -0,0 +1,5 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29102 3.54688H31.252L41.7051 14.1172V44.375C41.7051 45.0222 41.1804 45.5469 40.5332 45.5469H9.29102C8.64381 45.5469 8.11914 45.0222 8.11914 44.375V4.71875C8.11914 4.07155 8.64381 3.54688 9.29102 3.54688Z" fill="#FF5F5F"/>
+<path d="M31.252 3.54688V12.9453C31.252 13.5925 31.7766 14.1172 32.4238 14.1172H41.7051L31.252 3.54688Z" fill="#FFB4B4"/>
+<path d="M32.2217 20.0232C32.2217 19.8499 32.1836 19.6787 32.1099 19.5219C32.0363 19.365 31.929 19.2263 31.7957 19.1155C31.6623 19.0049 31.5062 18.925 31.3385 18.8815C31.1707 18.838 30.9955 18.832 30.8252 18.8639L19.725 20.9449C19.167 21.0493 18.763 21.5365 18.763 22.1042L18.7706 32.7181C18.4664 32.6062 18.1447 32.549 17.8205 32.5492C16.303 32.5492 15.0732 33.7794 15.0732 35.2965C15.0732 36.814 16.3034 38.0438 17.8205 38.0438C19.3376 38.0438 20.5677 36.8136 20.5677 35.2965V25.2839L30.425 23.4359V30.6371C30.1208 30.5251 29.7991 30.468 29.4749 30.4682C27.9574 30.4682 26.7276 31.6984 26.7276 33.2155C26.7276 34.7325 27.9578 35.9627 29.4749 35.9627C30.9919 35.9627 32.2221 34.7325 32.2221 33.2155C32.2217 33.165 32.2217 20.0232 32.2217 20.0232Z" fill="white"/>
+</svg>
diff --git a/src/assets/filesvg/numbers.svg b/src/assets/filesvg/numbers.svg
new file mode 100644
index 0000000..1732e9e
--- /dev/null
+++ b/src/assets/filesvg/numbers.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6BD94D;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M9,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H9c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.8,4.1,8.3,3.5,9,3.5z"/>
+<path class="st1" d="M31,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L31,3.5z"/>
+<path class="st2" d="M34.1,35.7h-3.4c-0.1,0-0.2-0.1-0.2-0.2V25.1c0-0.1,0.1-0.2,0.2-0.2h3.4c0.1,0,0.2,0.1,0.2,0.2v10.5
+	C34.2,35.6,34.2,35.7,34.1,35.7z M29,35.7h-3.4c-0.1,0-0.2-0.1-0.2-0.2V20.9c0-0.1,0.1-0.2,0.2-0.2H29c0.1,0,0.2,0.1,0.2,0.2v14.7
+	C29.2,35.6,29.1,35.7,29,35.7z M34.1,37.7H15.7c-0.2,0-0.4-0.2-0.4-0.4c0-0.2,0.2-0.4,0.4-0.4h18.4c0.2,0,0.4,0.2,0.4,0.4
+	C34.5,37.5,34.3,37.7,34.1,37.7z M24,35.7h-3.4c-0.1,0-0.2-0.1-0.2-0.2v-6.8c0-0.1,0.1-0.2,0.2-0.2H24c0.1,0,0.2,0.1,0.2,0.2v6.8
+	C24.1,35.6,24.1,35.7,24,35.7z M18.9,35.7h-3.4c-0.1,0-0.2-0.1-0.2-0.2v-2.4c0-0.1,0.1-0.2,0.2-0.2h3.4c0.1,0,0.2,0.1,0.2,0.2v2.4
+	C19.1,35.6,19,35.7,18.9,35.7z"/>
+</svg>
diff --git a/src/assets/filesvg/pages.svg b/src/assets/filesvg/pages.svg
new file mode 100644
index 0000000..a04add0
--- /dev/null
+++ b/src/assets/filesvg/pages.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFBC31;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M9.2,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H9.2C8.5,45.5,8,45,8,44.4V4.7C8,4.1,8.5,3.5,9.2,3.5z"/>
+<path class="st1" d="M31.2,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L31.2,3.5z"/>
+<path class="st2" d="M17.7,35.3l-1-1L16,35.5c-0.1,0.2-0.1,0.3,0.1,0.5c0.1,0.1,0.3,0.1,0.5,0.1L17.7,35.3z M29.2,24.9L27,22.8
+	l-8.4,8.5c-0.4,0.4-0.7,0.7-0.9,1.2L16.9,34l1.1,1.1l1.5-0.8c0.5-0.3,0.9-0.6,1.3-1L29.2,24.9z M29.6,24.6l2.4-2.4
+	c0.6-0.6,0.6-1.5,0-2.1c-0.6-0.6-1.5-0.6-2.1,0l-2.4,2.4L29.6,24.6z M34.4,38.2c0-0.3,0.1-0.6,0.1-0.9H15.3v0.9H34.4z"/>
+</svg>
diff --git a/src/assets/filesvg/pdf.svg b/src/assets/filesvg/pdf.svg
new file mode 100644
index 0000000..99f76ac
--- /dev/null
+++ b/src/assets/filesvg/pdf.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F45772;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.8,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.8c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.6,4.1,8.1,3.5,8.8,3.5z"/>
+<path class="st1" d="M30.8,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.8,3.5z"/>
+<path class="st2" d="M32.1,38.6c-2.1,0-3.9-3.6-4.9-5.9c-1.7-0.7-3.5-1.3-5.2-1.7c-1.5,1-4.2,2.6-6.2,2.6c-1.3,0-2.2-0.6-2.5-1.7
+	c-0.3-0.9,0-1.5,0.2-1.9c0.5-0.7,1.6-1.1,3.3-1.1c1.3,0,3,0.2,4.9,0.7c1.2-0.9,2.5-1.9,3.6-2.9c-0.5-2.3-1-6.1,0.3-7.8
+	c0.7-0.8,1.7-1.1,2.9-0.7c1.4,0.4,1.9,1.2,2,1.9c0.6,2.3-2,5.3-3.8,7.1c0.4,1.5,0.9,3.2,1.5,4.7c2.5,1.1,5.5,2.8,5.8,4.6
+	c0.1,0.6-0.1,1.2-0.6,1.7C33.1,38.4,32.6,38.6,32.1,38.6z M30.2,34.7c0.5,1,0.9,1.5,1.1,1.5c0,0,0.1,0,0.2-0.1
+	c0.1-0.1,0.1-0.2,0.1-0.2C31.5,35.6,31.2,35.2,30.2,34.7z M17,30.5c-0.7,0-0.9,0.2-1,0.3c0,0-0.1,0.1,0,0.3c0,0.2,0.2,0.4,0.5,0.4
+	c0.5,0,1.2-0.3,2-0.7C18,30.6,17.4,30.5,17,30.5z M24.2,29.6c0.4,0.1,0.9,0.3,1.3,0.4c-0.2-0.4-0.3-0.8-0.4-1.2
+	C24.8,29.1,24.5,29.4,24.2,29.6z M27.3,20.8c-0.2,0-0.3,0.1-0.4,0.2c-0.3,0.4-0.3,1.3-0.1,2.5c0.8-0.9,1.3-1.7,1.2-2.2
+	c0-0.1-0.1-0.3-0.5-0.4C27.5,20.9,27.4,20.8,27.3,20.8z"/>
+</svg>
diff --git a/src/assets/filesvg/ppt.svg b/src/assets/filesvg/ppt.svg
new file mode 100644
index 0000000..db3db12
--- /dev/null
+++ b/src/assets/filesvg/ppt.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF7861;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.8,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.8c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.6,4.1,8.1,3.5,8.8,3.5z"/>
+<path class="st1" d="M30.8,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.8,3.5z"/>
+<path class="st2" d="M31.4,24.3c0.3,0.3,0.5,0.8,0.5,1.5c0,0.7-0.2,1.2-0.5,1.5c-0.3,0.3-0.9,0.6-1.8,0.7H17c-0.8,0-1.4,0.6-1.4,1.4
+	v6.4c0,0.8,0.6,1.4,1.4,1.4c0.8,0,1.4-0.6,1.4-1.4v-5h11.3c0.1,0,0.1,0,0.2,0c3.1-0.4,4.8-2.2,4.8-5.1s-1.8-4.6-4.8-5.1
+	c-0.1,0-0.1,0-0.2,0H17c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4h12.6C30.5,23.7,31,24,31.4,24.3z"/>
+</svg>
diff --git a/src/assets/filesvg/rar.svg b/src/assets/filesvg/rar.svg
new file mode 100644
index 0000000..c3e09e1
--- /dev/null
+++ b/src/assets/filesvg/rar.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 49" style="enable-background:new 0 0 48 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#576A95;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.4,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.4c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.2,4.1,7.7,3.5,8.4,3.5z"/>
+<path class="st1" d="M30.4,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.4,3.5z"/>
+<path class="st2" d="M22.1,29.4v5.7c0,0.2,0,0.4-0.1,0.5c-0.1,0.2-0.2,0.3-0.3,0.5c-0.3,0.3-0.6,0.4-1,0.4h-2.9
+	c-0.4,0-0.7-0.2-1-0.4c-0.1-0.1-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.5v-5.7H22.1z M20.6,32.6h-2.9v2.9h2.9V32.6z M22,23.7v2.9
+	h-2.9v-2.9H22L22,23.7z M19.2,3.5v2.9h2.9v2.9h-2.9V12h2.9v2.9h-2.9v2.9h2.9v2.9h-2.9v2.9h-2.9v-2.9h2.9v-2.9h-2.9v-2.9h2.9V12h-2.9
+	V9.1h2.9V6.4h-2.9V3.5H19.2L19.2,3.5z"/>
+</svg>
diff --git a/src/assets/filesvg/txt.svg b/src/assets/filesvg/txt.svg
new file mode 100644
index 0000000..572726f
--- /dev/null
+++ b/src/assets/filesvg/txt.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F8B427;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.6,3.5h22L41,14.1v30.3c0,0.6-0.5,1.2-1.2,1.2H8.6c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.4,4.1,7.9,3.5,8.6,3.5z"/>
+<path class="st1" d="M30.6,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2H41L30.6,3.5z"/>
+<path class="st2" d="M14.4,21.7c0-0.7,0.5-1.2,1.2-1.2h7.7c0.7,0,1.2,0.5,1.2,1.2c0,0.7-0.5,1.2-1.2,1.2h-7.7
+	C14.9,22.9,14.4,22.3,14.4,21.7z M14.4,29.3c0-0.7,0.5-1.2,1.2-1.2h17.3c0.7,0,1.2,0.5,1.2,1.2c0,0.7-0.5,1.2-1.2,1.2H15.6
+	C14.9,30.5,14.4,30,14.4,29.3z M15.6,35.8c-0.7,0-1.2,0.5-1.2,1.2c0,0.7,0.5,1.2,1.2,1.2h17.3c0.7,0,1.2-0.5,1.2-1.2
+	c0-0.7-0.5-1.2-1.2-1.2H15.6z"/>
+</svg>
diff --git a/src/assets/filesvg/unknown.svg b/src/assets/filesvg/unknown.svg
new file mode 100644
index 0000000..840917a
--- /dev/null
+++ b/src/assets/filesvg/unknown.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E8E8E9;}
+	.st1{fill:#D1D1D3;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M9,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H9c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.8,4.1,8.3,3.5,9,3.5z"/>
+<path class="st1" d="M31,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L31,3.5z"/>
+<path class="st2" d="M28.8,19c-1.2-0.9-2.7-1.4-4.2-1.4c-1.5,0-3,0.5-4.1,1.4c-1.3,1-2.1,2.5-2.1,4.3c0,0.8,0.6,1.4,1.4,1.4
+	c0.8,0,1.4-0.6,1.4-1.4c0-0.8,0.3-1.5,1-2c0.6-0.5,1.5-0.8,2.4-0.8c0.9,0,1.8,0.3,2.4,0.8c0.6,0.5,1,1.2,1,2c0,1.2-1.2,2.7-3.8,4.3
+	c-0.2,0.1-0.4,0.3-0.5,0.5c-0.1,0.2-0.2,0.5-0.2,0.7v3.3c0,0.8,0.6,1.4,1.4,1.4c0.8,0,1.4-0.6,1.4-1.4v-2.6c2.1-1.4,4.5-3.5,4.5-6.3
+	C30.9,21.5,30.1,20,28.8,19z M25,38.7c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8c-1,0-1.8,0.8-1.8,1.8C23.2,37.9,24,38.7,25,38.7z"/>
+</svg>
diff --git a/src/assets/filesvg/unknownd.svg b/src/assets/filesvg/unknownd.svg
new file mode 100644
index 0000000..64fd680
--- /dev/null
+++ b/src/assets/filesvg/unknownd.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#323238;}
+	.st1{fill:#49494E;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.9,3.5h22l10.5,10.6v30.3c0,0.6-0.5,1.2-1.2,1.2H8.9c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.8,4.1,8.3,3.5,8.9,3.5z"/>
+<path class="st1" d="M30.9,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2h9.3L30.9,3.5z"/>
+<path class="st2" d="M28.7,19c-1.2-0.9-2.7-1.4-4.2-1.4c-1.5,0-3,0.5-4.1,1.4c-1.3,1-2.1,2.5-2.1,4.3c0,0.8,0.6,1.4,1.4,1.4
+	c0.8,0,1.4-0.6,1.4-1.4c0-0.8,0.3-1.5,1-2c0.6-0.5,1.5-0.8,2.4-0.8c0.9,0,1.8,0.3,2.4,0.8c0.6,0.5,1,1.2,1,2c0,1.2-1.2,2.7-3.8,4.3
+	c-0.2,0.1-0.4,0.3-0.5,0.5c-0.1,0.2-0.2,0.5-0.2,0.7v3.3c0,0.8,0.6,1.4,1.4,1.4c0.8,0,1.4-0.6,1.4-1.4v-2.6c2.1-1.4,4.5-3.5,4.5-6.3
+	C30.8,21.5,30,20,28.7,19z M24.9,38.7c1,0,1.8-0.8,1.8-1.8c0-1-0.8-1.8-1.8-1.8c-1,0-1.8,0.8-1.8,1.8C23.1,37.9,23.9,38.7,24.9,38.7
+	z"/>
+</svg>
diff --git a/src/assets/filesvg/video.svg b/src/assets/filesvg/video.svg
new file mode 100644
index 0000000..0842b39
--- /dev/null
+++ b/src/assets/filesvg/video.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#688BEF;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#FFFFFF;fill-opacity:0.5;}
+</style>
+<path class="st0" d="M8.6,3.5h22L41,14.1v30.3c0,0.6-0.5,1.2-1.2,1.2H8.6c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.4,4.1,7.9,3.5,8.6,3.5z"/>
+<path class="st1" d="M8.8,6.8c0,0.2,0,0.5,0.1,0.7C9,7.7,9.1,7.9,9.3,8.1c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1
+	c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.6-0.4c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.9-0.5-1.2
+	c-0.3-0.3-0.8-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5C8.9,5.9,8.8,6.4,8.8,6.8z M8.8,13.8c0,0.2,0,0.5,0.1,0.7c0.1,0.2,0.2,0.4,0.4,0.6
+	s0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1c0.2,0,0.5,0,0.7-0.1s0.4-0.2,0.6-0.4c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7
+	c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.8-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5C8.9,12.9,8.8,13.4,8.8,13.8z M8.8,20.9
+	c0,0.2,0,0.5,0.1,0.7c0.1,0.2,0.2,0.4,0.4,0.6c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1c0.2,0,0.5,0,0.7-0.1
+	c0.2-0.1,0.4-0.2,0.6-0.4c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.8-0.5-1.2-0.5
+	c-0.5,0-0.9,0.2-1.2,0.5C8.9,19.9,8.8,20.4,8.8,20.9z M8.8,27.9c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.5,0.8,0.6c0.3,0.1,0.7,0.2,1,0.1
+	c0.3-0.1,0.7-0.2,0.9-0.5c0.2-0.2,0.4-0.6,0.5-0.9c0.1-0.3,0-0.7-0.1-1c-0.1-0.3-0.4-0.6-0.6-0.8c-0.3-0.2-0.6-0.3-1-0.3
+	c-0.2,0-0.5,0-0.7,0.1c-0.2,0.1-0.4,0.2-0.6,0.4C9.1,26.8,9,27,8.9,27.2C8.8,27.4,8.7,27.6,8.8,27.9z M8.8,34.9c0,0.2,0,0.5,0.1,0.7
+	C9,35.8,9.1,36,9.3,36.1c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.6-0.4
+	c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.8-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5
+	C8.9,34,8.8,34.4,8.8,34.9z M8.8,41.9c0,0.2,0,0.5,0.1,0.7C9,42.8,9.1,43,9.3,43.2c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1
+	c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.6-0.4c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.9-0.5-1.2
+	c-0.3-0.3-0.8-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5C8.9,41,8.8,41.4,8.8,41.9z M36,20.9c0,0.2,0,0.5,0.1,0.7c0.1,0.2,0.2,0.4,0.4,0.6
+	c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.6-0.4c0.2-0.2,0.3-0.4,0.4-0.6
+	c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.8-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5C36.1,19.9,36,20.4,36,20.9
+	L36,20.9z M36,27.9c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.5,0.8,0.6c0.3,0.1,0.7,0.2,1,0.1c0.3-0.1,0.7-0.2,0.9-0.5
+	c0.2-0.2,0.4-0.6,0.5-0.9c0.1-0.3,0-0.7-0.1-1c-0.1-0.3-0.4-0.6-0.6-0.8c-0.3-0.2-0.6-0.3-1-0.3c-0.2,0-0.5,0-0.7,0.1
+	c-0.2,0.1-0.4,0.2-0.6,0.4c-0.2,0.2-0.3,0.4-0.4,0.6C36,27.4,36,27.6,36,27.9L36,27.9z M36,34.9c0,0.2,0,0.5,0.1,0.7
+	c0.1,0.2,0.2,0.4,0.4,0.6c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.6-0.4
+	c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7c0-0.2,0-0.5-0.1-0.7c-0.1-0.2-0.2-0.4-0.4-0.6c-0.2-0.2-0.4-0.3-0.6-0.4
+	c-0.2-0.1-0.4-0.1-0.7-0.1c-0.5,0-0.9,0.2-1.2,0.5C36.1,34,36,34.4,36,34.9L36,34.9z M36,41.9c0,0.2,0,0.5,0.1,0.7
+	c0.1,0.2,0.2,0.4,0.4,0.6c0.2,0.2,0.4,0.3,0.6,0.4c0.2,0.1,0.4,0.1,0.7,0.1c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.6-0.4
+	c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.8-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5
+	C36.1,41,36,41.4,36,41.9L36,41.9z"/>
+<path class="st1" d="M20.2,18.7l10.6,7.2v0c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.3-0.1,0.4
+	c-0.1,0.1-0.2,0.2-0.3,0.3l-10.6,7.3c-0.1,0.1-0.3,0.1-0.4,0.1c-0.1,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.2-0.3-0.3
+	c-0.1-0.1-0.1-0.3-0.1-0.4V19.4c0-0.1,0-0.3,0.1-0.4c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.3-0.1,0.4-0.1
+	C19.9,18.6,20.1,18.6,20.2,18.7z"/>
+<path class="st2" d="M30.6,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2H41L30.6,3.5z"/>
+</svg>
diff --git a/src/assets/filesvg/xls.svg b/src/assets/filesvg/xls.svg
new file mode 100644
index 0000000..60e2a02
--- /dev/null
+++ b/src/assets/filesvg/xls.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 49" style="enable-background:new 0 0 49 49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00C08B;}
+	.st1{fill:#FFFFFF;fill-opacity:0.5;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8.6,3.5h22L41,14.1v30.3c0,0.6-0.5,1.2-1.2,1.2H8.6c-0.6,0-1.2-0.5-1.2-1.2V4.7C7.4,4.1,7.9,3.5,8.6,3.5z"/>
+<path class="st1" d="M30.6,3.5v9.4c0,0.6,0.5,1.2,1.2,1.2H41L30.6,3.5z"/>
+<path class="st2" d="M22.2,28.8l-6.7-6.7c-0.6-0.6-0.6-1.5,0-2c0.6-0.6,1.5-0.6,2,0l6.7,6.7l6.7-6.7c0.6-0.6,1.5-0.6,2,0
+	c0.6,0.6,0.6,1.5,0,2l-6.7,6.7l6.7,6.7c0.6,0.6,0.6,1.5,0,2s-1.5,0.6-2,0l-6.7-6.7l-6.7,6.7c-0.6,0.6-1.5,0.6-2,0
+	c-0.6-0.6-0.6-1.5,0-2L22.2,28.8z"/>
+</svg>
diff --git a/src/assets/friend-chat.svg b/src/assets/friend-chat.svg
new file mode 100644
index 0000000..8f1edb1
--- /dev/null
+++ b/src/assets/friend-chat.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0508 2.75C16.761 2.74994 17.4438 3.02469 17.956 3.5167C18.4682 4.00871 18.7702 4.67982 18.7988 5.3895L18.8008 5.5V6.4995L19.5508 6.5L19.6613 6.502C20.3514 6.5298 21.0058 6.81628 21.4944 7.30449C21.983 7.7927 22.27 8.44689 22.2983 9.137L22.3008 9.25V15.557L22.2988 15.6675C22.271 16.3576 21.9845 17.012 21.4963 17.5006C21.0081 17.9892 20.3539 18.2762 19.6638 18.3045L19.5508 18.307H19.0113V19.75L19.0083 19.817C18.9603 20.388 18.3033 20.6955 17.8343 20.367L17.7813 20.326L15.7063 18.5965L15.6288 18.5375C15.4444 18.4068 15.2281 18.3285 15.0028 18.311L14.9058 18.307H10.3928L10.3208 18.3035C10.1353 18.2855 9.9631 18.1991 9.83782 18.0611C9.71255 17.9231 9.64315 17.7434 9.64315 17.557C9.64315 17.3706 9.71255 17.1909 9.83782 17.0529C9.9631 16.9149 10.1353 16.8285 10.3208 16.8105L10.3928 16.807H14.9058L15.0433 16.8105C15.5917 16.838 16.1194 17.029 16.5583 17.359L16.6663 17.444L17.5113 18.148V17.557L17.5148 17.485C17.5314 17.3117 17.6078 17.1496 17.7308 17.0264C17.8539 16.9032 18.016 16.8267 18.1893 16.81L18.2613 16.807H19.5508L19.6328 16.8045C19.9352 16.7845 20.2201 16.6554 20.4344 16.4411C20.6487 16.2268 20.7778 15.9419 20.7978 15.6395L20.8008 15.557V9.25L20.7983 9.168C20.7783 8.86558 20.6492 8.58071 20.4349 8.36641C20.2206 8.1521 19.9357 8.02295 19.6333 8.003L19.5508 8L18.8008 7.9995V13.25C18.8008 13.9603 18.5261 14.643 18.0341 15.1552C17.5421 15.6675 16.871 15.9695 16.1613 15.998L16.0508 16H10.5248C10.2657 16.0001 10.0131 16.0806 9.80178 16.2305L9.72478 16.2895L7.28078 18.326C6.80978 18.7185 6.10328 18.4095 6.05378 17.817L6.05078 17.75V16H5.05078C4.36003 16 3.69457 15.7401 3.18671 15.2719C2.67885 14.8037 2.36579 14.1615 2.30978 13.473L2.30278 13.3605L2.30078 13.25V5.5C2.30072 4.78975 2.57547 4.10702 3.06748 3.59478C3.55949 3.08255 4.2306 2.78054 4.94028 2.752L5.05078 2.75H16.0508ZM16.0508 4.25H5.05078C4.73342 4.24995 4.42793 4.37062 4.19626 4.58752C3.96459 4.80442 3.8241 5.10132 3.80328 5.418L3.80078 5.5V13.25C3.80073 13.5674 3.9214 13.8729 4.1383 14.1045C4.3552 14.3362 4.65211 14.4767 4.96878 14.4975L5.05078 14.5H6.80078C6.98722 14.5 7.16698 14.5695 7.30499 14.6948C7.443 14.8202 7.52938 14.9924 7.54728 15.178L7.55078 15.25V16.148L8.76428 15.1375C9.18632 14.7857 9.70407 14.5683 10.2508 14.5135L10.3873 14.5035L10.5248 14.5H16.0508C16.3681 14.5 16.6736 14.3794 16.9053 14.1625C17.137 13.9456 17.2775 13.6487 17.2983 13.332L17.3008 13.25V5.5C17.3008 5.33585 17.2684 5.1733 17.2056 5.02165C17.1428 4.86999 17.0507 4.73219 16.9347 4.61612C16.8186 4.50004 16.6808 4.40797 16.5291 4.34515C16.3775 4.28233 16.2149 4.25 16.0508 4.25ZM6.55078 8C6.8823 8 7.20024 8.1317 7.43466 8.36612C7.66909 8.60054 7.80078 8.91848 7.80078 9.25C7.80078 9.58152 7.66909 9.89946 7.43466 10.1339C7.20024 10.3683 6.8823 10.5 6.55078 10.5C6.21926 10.5 5.90132 10.3683 5.6669 10.1339C5.43248 9.89946 5.30078 9.58152 5.30078 9.25C5.30078 8.91848 5.43248 8.60054 5.6669 8.36612C5.90132 8.1317 6.21926 8 6.55078 8ZM10.5508 8C10.8823 8 11.2002 8.1317 11.4347 8.36612C11.6691 8.60054 11.8008 8.91848 11.8008 9.25C11.8008 9.58152 11.6691 9.89946 11.4347 10.1339C11.2002 10.3683 10.8823 10.5 10.5508 10.5C10.2193 10.5 9.90132 10.3683 9.6669 10.1339C9.43248 9.89946 9.30078 9.58152 9.30078 9.25C9.30078 8.91848 9.43248 8.60054 9.6669 8.36612C9.90132 8.1317 10.2193 8 10.5508 8ZM14.5508 8C14.8823 8 15.2002 8.1317 15.4347 8.36612C15.6691 8.60054 15.8008 8.91848 15.8008 9.25C15.8008 9.58152 15.6691 9.89946 15.4347 10.1339C15.2002 10.3683 14.8823 10.5 14.5508 10.5C14.2193 10.5 13.9013 10.3683 13.6669 10.1339C13.4325 9.89946 13.3008 9.58152 13.3008 9.25C13.3008 8.91848 13.4325 8.60054 13.6669 8.36612C13.9013 8.1317 14.2193 8 14.5508 8Z" fill="black"/>
+</svg>
diff --git a/src/assets/group-check.svg b/src/assets/group-check.svg
new file mode 100644
index 0000000..749538c
--- /dev/null
+++ b/src/assets/group-check.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.5" cy="8" r="8" fill="#0095F6"/>
+<path d="M4.96484 8.51172L6.61476 10.1616C7.00528 10.5522 7.63845 10.5522 8.02897 10.1616L12.0359 6.1547" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/hongbao.svg b/src/assets/hongbao.svg
new file mode 100644
index 0000000..ee6d4a0
--- /dev/null
+++ b/src/assets/hongbao.svg
@@ -0,0 +1,26 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 427319473">
+<g id="Group 427319455">
+<path id="Rectangle 34624120" d="M0 27C0 12.0883 12.0883 0 27 0C41.9117 0 54 12.0883 54 27C54 41.9117 41.9117 54 27 54C12.0883 54 0 41.9117 0 27Z" fill="url(#paint0_linear_4189_63297)"/>
+<g id="Group 6">
+<rect id="Rectangle 32" x="14.4" y="12.3008" width="25.2" height="30.45" rx="4.2" fill="#D73C1D"/>
+<rect id="Rectangle 34" x="14.4" y="12.3008" width="25.2" height="30.45" rx="4.2" fill="url(#paint1_linear_4189_63297)"/>
+<path id="Rectangle 33" d="M14.4 17.5477C14.4 15.2281 16.2804 13.3477 18.6 13.3477H35.4C37.7196 13.3477 39.6 15.2281 39.6 17.5477V24.6619C31.5643 28.1605 22.4357 28.1605 14.4 24.6619V17.5477Z" fill="#F0CA61"/>
+<path id="Rectangle 34_2" d="M14.4 15.45C14.4 13.1304 16.2804 11.25 18.6 11.25H35.4C37.7196 11.25 39.6 13.1304 39.6 15.45V22.5643C31.5643 26.0628 22.4357 26.0628 14.4 22.5643V15.45Z" fill="#FBE6BB"/>
+<ellipse id="Ellipse 2" cx="27.5198" cy="25.8205" rx="4.88599" ry="5.13695" fill="#D4573F"/>
+<circle id="Ellipse 3" cx="27.686" cy="25.5696" r="4.88599" fill="#FB540D"/>
+<path id="&#239;&#191;&#165;" d="M25.4032 23.1992H26.37L27.5199 25.4477L28.6698 23.1992H29.6365L28.2083 25.77H29.1824V26.2241H27.952L27.9447 26.2314V26.8613H29.1824V27.3153H27.9447V28.4286H27.0951V27.3153H25.8646V26.8613H27.0951V26.2314L27.0878 26.2241H25.8646V25.77H26.8314L25.4032 23.1992Z" fill="#FBE6BB"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4189_63297" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E43021"/>
+<stop offset="1" stop-color="#E85D4B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4189_63297" x1="27" y1="12.3008" x2="27" y2="42.7508" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBE3B5"/>
+<stop offset="1" stop-color="#F0D98A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/addFriend.png b/src/assets/img/addFriend.png
new file mode 100644
index 0000000..d48975d
Binary files /dev/null and b/src/assets/img/addFriend.png differ
diff --git a/src/assets/img/banner-logo.png b/src/assets/img/banner-logo.png
new file mode 100644
index 0000000..bb40739
Binary files /dev/null and b/src/assets/img/banner-logo.png differ
diff --git a/src/assets/img/filed.svg b/src/assets/img/filed.svg
new file mode 100644
index 0000000..90def14
--- /dev/null
+++ b/src/assets/img/filed.svg
@@ -0,0 +1,4 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="60" height="60" rx="16" fill="#F6F6F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0417 21.4965H40.6016C42.7547 21.4965 44.5 23.2553 44.5 25.4241V38.0724C44.5 40.2412 42.7547 42 40.6022 42H20.3978C18.2448 41.9994 16.5 40.2412 16.5 38.0724V22.0712C16.5 19.8229 18.3089 18 20.5408 18H25.8193C26.6125 18 27.3763 18.3006 27.9567 18.8412L29.9043 20.6552C30.4847 21.1959 31.2485 21.4965 32.0417 21.4965ZM21.7975 27.0961C21.2702 26.9318 20.7096 27.226 20.5453 27.7533C20.381 28.2806 20.6752 28.8412 21.2025 29.0055C27.2572 30.8923 33.7428 30.8923 39.7975 29.0055C40.3248 28.8412 40.619 28.2806 40.4547 27.7533C40.2904 27.226 39.7298 26.9318 39.2025 27.0961C33.5352 28.8621 27.4648 28.8621 21.7975 27.0961Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/img/msg_Vector.svg b/src/assets/img/msg_Vector.svg
new file mode 100644
index 0000000..796d5c7
--- /dev/null
+++ b/src/assets/img/msg_Vector.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5182 3.24656C22.0429 1.68099 20.5518 0.189845 18.9862 0.71462L1.44726 6.59364C0.0389723 7.06569 -0.381579 8.85389 0.668686 9.90416L2.47563 11.7111C2.77498 12.0104 3.23037 12.0889 3.6126 11.9069L13.1387 7.37166C13.6458 7.13022 14.1043 7.77949 13.7072 8.17666L6.32418 15.5597L12.3286 21.5641C13.3789 22.6144 15.1671 22.1938 15.6391 20.7855L21.5182 3.24656Z" fill="#0095F6"/>
+<path d="M6.3273 15.5556V20.1399C6.3273 20.5171 6.72912 20.7585 7.06215 20.5813L9.86283 19.0912L6.3273 15.5556Z" fill="#0095F6"/>
+</svg>
diff --git a/src/assets/img/msg_audio_start.svg b/src/assets/img/msg_audio_start.svg
new file mode 100644
index 0000000..0822e3a
--- /dev/null
+++ b/src/assets/img/msg_audio_start.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 20 20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m10 0c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm3.6 11.6-3.7 2.4c-1.2.8-2.9-.1-2.9-1.6v-4.8c0-1.5 1.7-2.4 2.9-1.6l3.6 2.4c1.2.8 1.2 2.4.1 3.2z" fill="#1b1b22" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/msg_audio_start1.svg b/src/assets/img/msg_audio_start1.svg
new file mode 100644
index 0000000..f5fcf04
--- /dev/null
+++ b/src/assets/img/msg_audio_start1.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M13.6,11.6L9.9,14C8.7,14.8,7,13.9,7,12.4V7.6
+	C7,6.1,8.7,5.2,9.9,6l3.6,2.4C14.7,9.2,14.7,10.8,13.6,11.6z"/>
+</svg>
diff --git a/src/assets/img/msg_camera.svg b/src/assets/img/msg_camera.svg
new file mode 100644
index 0000000..5529562
--- /dev/null
+++ b/src/assets/img/msg_camera.svg
@@ -0,0 +1,4 @@
+<svg width="63" height="61" viewBox="0 0 63 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.0888672" width="63" height="60" rx="16" fill="#F8F8FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.1847 22.0637L44.4798 22.4399C45.9284 22.6845 46.9819 23.9261 46.9631 25.3935V37.7431C46.9631 40.8359 44.4559 43.3406 41.3631 43.3406H20.6195C17.5267 43.3406 15.0195 40.8333 15.0195 37.7406V25.3935C15.0195 23.9261 16.073 22.6845 17.5216 22.4399L19.8167 22.0637C21.0771 21.8567 22.1495 20.9914 22.6198 19.8062L23.2218 18.3012C23.6921 17.1536 24.7832 16.4199 26.006 16.4199H35.9954C37.2371 16.4199 38.3282 17.1536 38.7797 18.3012L39.3817 19.8062C39.8708 20.9914 40.9243 21.8567 42.1847 22.0637ZM38.4599 26.1648C38.4222 26.0895 38.3846 26.0331 38.3658 26.0143L38.3282 25.9955C38.3846 26.0519 38.4222 26.1083 38.4599 26.1648ZM28.6209 39.8226C29.3734 40.0296 30.1636 40.1613 30.9913 40.1613C35.7885 40.1613 39.6827 36.2294 39.6827 31.3758C39.6827 26.5222 35.7885 22.5904 30.9913 22.5904C29.2418 22.5904 27.6239 23.1172 26.2506 24.0202C25.9684 24.2459 25.6486 24.4905 25.3476 24.7162C23.4851 26.3341 22.3 28.7045 22.3 31.3758C22.3 34.5739 23.9931 37.3582 26.5328 38.9008C27.2476 39.2771 27.9813 39.5781 28.6209 39.8226ZM30.9551 38.0513C34.6394 38.0513 37.6262 35.0645 37.6262 31.3801C37.6262 27.6958 34.6394 24.709 30.9551 24.709C27.2707 24.709 24.2839 27.6958 24.2839 31.3801C24.2839 35.0645 27.2707 38.0513 30.9551 38.0513Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/img/msg_close.svg b/src/assets/img/msg_close.svg
new file mode 100644
index 0000000..cd9bf11
--- /dev/null
+++ b/src/assets/img/msg_close.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.01">
+<rect width="24" height="24" fill="#6A6A6A"/>
+<rect x="1.97266" y="1.97559" width="20.0486" height="20.0486" rx="10.0243" stroke="#979797" stroke-width="0.75"/>
+<rect x="1.9726" y="3.46094" width="20.0486" height="17.0774" rx="2.625" stroke="#979797" stroke-width="0.75"/>
+<rect x="3.46094" y="1.97559" width="16.5834" height="20.0486" rx="2.625" stroke="#979797" stroke-width="0.75"/>
+</g>
+<path d="M17.2986 6.69635C17.2986 6.69635 6.69198 17.3029 6.69198 17.3029" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M17.2985 17.3033C17.2985 17.3033 6.69186 6.69668 6.69186 6.69668" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/img/msg_copy.svg b/src/assets/img/msg_copy.svg
new file mode 100644
index 0000000..f6edbeb
--- /dev/null
+++ b/src/assets/img/msg_copy.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.75" y="7.73389" width="12.5" height="12.5" rx="2.25" stroke="#1B1B22" stroke-width="1.5"/>
+<rect x="7.75" y="3.73389" width="12.5" height="12.5" rx="2.25" fill="white" stroke="#1B1B22" stroke-width="1.5"/>
+</svg>
diff --git a/src/assets/img/msg_delete.svg b/src/assets/img/msg_delete.svg
new file mode 100644
index 0000000..29dd5b5
--- /dev/null
+++ b/src/assets/img/msg_delete.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.51558 5.47412V17.222C5.51558 19.4312 7.30644 21.222 9.51558 21.222H14.4844C16.6936 21.222 18.4844 19.4311 18.4844 17.222V5.47412H5.51558Z" stroke="#1B1B22" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M10.1473 10.8701V14.8701" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8527 10.8701V14.8701" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 5.47412H20" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29462 5.47435L8.96398 4.25326C9.49061 3.29255 10.4991 2.69531 11.5947 2.69531H12.4187C13.5234 2.69531 14.5388 3.30248 15.0615 4.2757L15.7054 5.47435H8.29462Z" stroke="#1B1B22" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/msg_delete_blue.svg b/src/assets/img/msg_delete_blue.svg
new file mode 100644
index 0000000..7ddaa15
--- /dev/null
+++ b/src/assets/img/msg_delete_blue.svg
@@ -0,0 +1,7 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.20312 7.5791V22.5225C7.20312 24.7316 8.99399 26.5224 11.2031 26.5224H18.8035C21.0127 26.5224 22.8035 24.7316 22.8035 22.5224V7.5791H7.20312Z" stroke="#0095F6" stroke-width="2" stroke-linejoin="round"/>
+<path d="M12.7772 14.0703V18.882" stroke="#0095F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.2304 14.0703V18.882" stroke="#0095F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.37891 7.579H24.6255" stroke="#0095F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5469 7.57927L11.5254 5.79428C12.052 4.83356 13.0604 4.23633 14.156 4.23633H15.8718C16.9765 4.23633 17.9919 4.84349 18.5146 5.81672L19.4614 7.57927H10.5469Z" stroke="#0095F6" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/img/msg_failed.svg b/src/assets/img/msg_failed.svg
new file mode 100644
index 0000000..12637ec
--- /dev/null
+++ b/src/assets/img/msg_failed.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 12C22.5 17.5228 18.0228 22 12.5 22C6.97715 22 2.5 17.5228 2.5 12C2.5 6.47715 6.97715 2 12.5 2C18.0228 2 22.5 6.47715 22.5 12ZM12.5 5.99297C12.9418 5.99297 13.3 6.35114 13.3 6.79297V12.9875C13.3 13.4294 12.9418 13.7875 12.5 13.7875C12.0582 13.7875 11.7 13.4294 11.7 12.9875V6.79297C11.7 6.35114 12.0582 5.99297 12.5 5.99297ZM12.4998 17.9782C13.1625 17.9782 13.6998 17.4409 13.6998 16.7782C13.6998 16.1154 13.1625 15.5782 12.4998 15.5782C11.8371 15.5782 11.2998 16.1154 11.2998 16.7782C11.2998 17.4409 11.8371 17.9782 12.4998 17.9782Z" fill="#FC5A50"/>
+</svg>
diff --git a/src/assets/img/msg_forward.svg b/src/assets/img/msg_forward.svg
new file mode 100644
index 0000000..2258ea5
--- /dev/null
+++ b/src/assets/img/msg_forward.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12.2578" r="8.25" stroke="#1B1B22" stroke-width="1.5"/>
+<path d="M8.77254 12.4943L10.9274 14.5693C11.0864 14.7224 11.3394 14.7178 11.4927 14.5589L15.6611 10.2391" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/img/msg_pause.svg b/src/assets/img/msg_pause.svg
new file mode 100644
index 0000000..f7ac5ce
--- /dev/null
+++ b/src/assets/img/msg_pause.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10.3779" r="10" fill="white"/>
+<rect x="6" y="6.37793" width="3" height="8" rx="1.5" fill="#0095F6"/>
+<rect x="11" y="6.37793" width="3" height="8" rx="1.5" fill="#0095F6"/>
+</svg>
diff --git a/src/assets/img/msg_pause1.svg b/src/assets/img/msg_pause1.svg
new file mode 100644
index 0000000..982708f
--- /dev/null
+++ b/src/assets/img/msg_pause1.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 20 20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m10 0c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm-1 12.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5v-5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5zm5 0c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5v-5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5z" fill="#1b1b22" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/msg_pic.svg b/src/assets/img/msg_pic.svg
new file mode 100644
index 0000000..0debc04
--- /dev/null
+++ b/src/assets/img/msg_pic.svg
@@ -0,0 +1,4 @@
+<svg width="63" height="61" viewBox="0 0 63 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.0888672" width="63" height="60" rx="16" fill="#F8F8FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.4 18.89H20.6C18.3909 18.89 16.6 20.6809 16.6 22.89V37.29L16.6 37.2999V36.8411L22.0697 31.9175C23.3743 30.7432 25.3814 30.839 26.5682 32.1322L27.3398 32.9729C28.5446 34.2857 30.5896 34.3616 31.8884 33.1416L37.0358 28.3064C38.3345 27.0864 40.3796 27.1622 41.5844 28.475L45.4 32.6327V22.89C45.4 20.6809 43.6091 18.89 41.4 18.89ZM20.6 41.29L20.5601 41.2898H41.4399L41.4 41.29H20.6ZM20.6 17.29C17.5072 17.29 15 19.7973 15 22.89V37.29C15 40.3828 17.5072 42.89 20.6 42.89H41.4C44.4928 42.89 47 40.3828 47 37.29V22.89C47 19.7972 44.4928 17.29 41.4 17.29H20.6ZM22.2 26.8898C23.5255 26.8898 24.6 25.8153 24.6 24.4898C24.6 23.1644 23.5255 22.0898 22.2 22.0898C20.8745 22.0898 19.8 23.1644 19.8 24.4898C19.8 25.8153 20.8745 26.8898 22.2 26.8898Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/img/msg_quote.svg b/src/assets/img/msg_quote.svg
new file mode 100644
index 0000000..37c9204
--- /dev/null
+++ b/src/assets/img/msg_quote.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12.0527" r="8.25" stroke="#1B1B22" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2824 9.47391C10.3543 9.3966 10.4736 9.39453 10.5515 9.46574L10.9284 9.81037C11.0102 9.88518 11.0161 10.0122 10.9428 10.0954C10.722 10.3464 10.2961 10.8523 10.1968 11.1283C10.1108 11.3674 10.0579 11.5871 10.0272 11.7829C10.0996 11.7694 10.1742 11.7623 10.2505 11.7623C10.9183 11.7623 11.4597 12.3037 11.4597 12.9715C11.4597 13.6393 10.9183 14.1807 10.2505 14.1807C9.58273 14.1807 9.04137 13.6393 9.04137 12.9715C9.04137 12.9715 9.01148 11.5032 9.39713 10.7246C9.67412 10.1654 10.0773 9.69474 10.2824 9.47391Z" fill="#1B1B22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7835 9.47391C13.8554 9.3966 13.9747 9.39453 14.0526 9.46574L14.4295 9.81037C14.5113 9.88518 14.5172 10.0122 14.4439 10.0954C14.2231 10.3464 13.7972 10.8523 13.6979 11.1283C13.6119 11.3674 13.559 11.5871 13.5283 11.7829C13.6007 11.7694 13.6753 11.7623 13.7516 11.7623C14.4194 11.7623 14.9608 12.3037 14.9608 12.9715C14.9608 13.6393 14.4194 14.1807 13.7516 14.1807C13.0838 14.1807 12.5425 13.6393 12.5425 12.9715C12.5425 12.9715 12.5126 11.5032 12.8982 10.7246C13.1752 10.1654 13.5783 9.69474 13.7835 9.47391Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/img/msg_read.svg b/src/assets/img/msg_read.svg
new file mode 100644
index 0000000..a9f13ed
--- /dev/null
+++ b/src/assets/img/msg_read.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.69775L2.41421 8.11197C2.80474 8.50249 3.4379 8.50249 3.82843 8.11197L8.77817 3.16222" stroke="#0095F6" stroke-linecap="round"/>
+<path d="M6.30334 8.33447L11.2531 3.38473" stroke="#0095F6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/img/msg_recording.svg b/src/assets/img/msg_recording.svg
new file mode 100644
index 0000000..cb3904c
--- /dev/null
+++ b/src/assets/img/msg_recording.svg
@@ -0,0 +1,14 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.01">
+<rect y="0.257812" width="30" height="30" fill="#6A6A6A"/>
+<rect x="2.25" y="2.50781" width="25.4983" height="25.4983" rx="12.7491" stroke="#979797" stroke-width="0.5"/>
+<rect x="2.25" y="4.36523" width="25.4983" height="21.7842" rx="1.75" stroke="#979797" stroke-width="0.5"/>
+<rect x="4.10699" y="2.50781" width="21.1668" height="25.4983" rx="1.75" stroke="#979797" stroke-width="0.5"/>
+</g>
+<rect x="10.6717" y="3.90234" width="8.65658" height="15.7174" rx="4.32829" stroke="#1B1B22" stroke-width="2"/>
+<path d="M23.2112 15.5098C23.2112 20.0447 19.5349 23.721 15 23.721C10.465 23.721 6.78876 20.0447 6.78876 15.5098" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+<path d="M15 23.7217V26.9842" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+<path d="M17.5143 26.984C17.5143 26.984 15.8381 26.984 12.4857 26.984" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+<path d="M10.9176 9.95801C10.9176 9.95801 14.5903 9.95801 14.5903 9.95801" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+<path d="M10.9176 13.8535C10.9176 13.8535 14.5903 13.8535 14.5903 13.8535" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/img/msg_redPkt.svg b/src/assets/img/msg_redPkt.svg
new file mode 100644
index 0000000..8a267de
--- /dev/null
+++ b/src/assets/img/msg_redPkt.svg
@@ -0,0 +1,4 @@
+<svg width="63" height="61" viewBox="0 0 63 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.828125" width="63" height="60" rx="16" fill="#F8F8FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44 42.9279C44 45.1756 42.3226 46.998 40.2514 46.998H22.7498C20.6786 46.998 19 45.1756 19 42.9279V19.7988C21.9031 23.1332 26.561 25.2961 31.8118 25.2961C36.703 25.2961 41.0776 23.4202 44 20.4693V42.9279ZM31.8118 23.4936C25.8827 23.4936 20.8618 20.8742 19.0774 17.2424C19.429 15.3913 20.9392 13.998 22.7498 13.998H40.2514C42.3214 13.998 44 15.8205 44 18.0668V18.1764C41.8685 21.3125 37.2197 23.4936 31.8118 23.4936ZM35.6588 29.4158C36.0319 29.0427 36.0319 28.4378 35.6588 28.0647C35.2857 27.6915 34.6807 27.6915 34.3076 28.0647L31.4997 30.8726L28.6924 28.0648C28.3193 27.6917 27.7144 27.6916 27.3413 28.0647C26.9681 28.4378 26.9681 29.0428 27.3412 29.4159L30.3608 32.436H27.5C26.9723 32.436 26.5446 32.8637 26.5446 33.3914C26.5446 33.9191 26.9723 34.3468 27.5 34.3468H30.5442V35.9085H27.5C26.9723 35.9085 26.5446 36.3363 26.5446 36.8639C26.5446 37.3916 26.9723 37.8194 27.5 37.8194H30.5442V40.5163C30.5442 41.044 30.972 41.4717 31.4997 41.4717C32.0273 41.4717 32.4551 41.044 32.4551 40.5163V37.8194H35.5C36.0277 37.8194 36.4554 37.3916 36.4554 36.8639C36.4554 36.3363 36.0277 35.9085 35.5 35.9085H32.4551V34.3468H35.5C36.0277 34.3468 36.4554 33.9191 36.4554 33.3914C36.4554 32.8637 36.0277 32.436 35.5 32.436H32.6386L35.6588 29.4158Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/img/msg_share.svg b/src/assets/img/msg_share.svg
new file mode 100644
index 0000000..3e15328
--- /dev/null
+++ b/src/assets/img/msg_share.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6234 12.6797C17.6234 16.043 14.8969 18.7695 11.5336 18.7695C8.17024 18.7695 5.44373 16.043 5.44373 12.6797C5.44373 9.31636 8.17024 6.58984 11.5336 6.58984" stroke="#1B1B22" stroke-width="1.28" stroke-linecap="round"/>
+<path d="M18.6312 5.58105L11.843 12.3693" stroke="#1B1B22" stroke-width="1.28" stroke-linecap="round"/>
+<path d="M18.9562 9.58887L18.9562 6.05684C18.9562 5.61501 18.5981 5.25684 18.1562 5.25684L14.6242 5.25684" stroke="#1B1B22" stroke-width="1.28" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/img/msg_share_white.svg b/src/assets/img/msg_share_white.svg
new file mode 100644
index 0000000..d12af3b
--- /dev/null
+++ b/src/assets/img/msg_share_white.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4235 12.6797C17.4235 16.043 14.6969 18.7695 11.3336 18.7695C7.97029 18.7695 5.24377 16.043 5.24377 12.6797C5.24377 9.31636 7.97029 6.58984 11.3336 6.58984" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M18.4313 5.58105L11.643 12.3693" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M18.7563 9.58887L18.7563 6.05684C18.7563 5.61501 18.3981 5.25684 17.9563 5.25684L14.4243 5.25684" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/img/msg_shares.svg b/src/assets/img/msg_shares.svg
new file mode 100644
index 0000000..6f559aa
--- /dev/null
+++ b/src/assets/img/msg_shares.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0216 19.965L20.7609 12.726C20.8992 12.5858 20.9818 12.3666 20.9805 12.1435C20.9805 11.9178 20.8962 11.711 20.7684 11.5685L13.0035 4.30777C12.7883 4.09255 12.2592 4.06701 11.9613 4.33859C11.7904 4.49434 11.7155 4.78745 11.7155 5.0565V8.65757C7.01237 8.89172 3.7522 12.3724 2.98638 17.9379C2.96261 18.1107 2.99372 18.5696 3.39979 18.814C3.74745 19.0232 4.27275 18.813 4.37216 18.7137C6.49434 16.2056 8.05301 15.7584 10.2051 15.6787C10.6648 15.6617 11.1516 15.6614 11.6767 15.6614C11.685 15.6614 11.6932 15.6614 11.7015 15.6614H11.7155V19.2304C11.7155 19.5933 11.8425 19.9088 12.0864 20.0459C12.346 20.1919 12.7891 20.1902 13.0216 19.965ZM4.94533 16.0026C5.74174 15.3488 6.54319 14.8983 7.40613 14.609C9.03354 14.0636 10.7958 14.1225 12.5074 14.1453C12.9042 14.1506 13.2259 14.4727 13.2259 14.8695V17.7056L19.1722 12.1438L13.2259 6.58362V9.41101C13.2259 9.79396 12.9256 10.1096 12.5431 10.1287L11.7906 10.1661C9.81742 10.2644 8.19814 11.0311 6.97525 12.3327C6.11057 13.2531 5.40918 14.4799 4.94533 16.0026Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/img/msg_unread.svg b/src/assets/img/msg_unread.svg
new file mode 100644
index 0000000..cde22ff
--- /dev/null
+++ b/src/assets/img/msg_unread.svg
@@ -0,0 +1,20 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2653_79671)">
+<rect x="3" y="3" width="30" height="30" rx="15" fill="#1B1B22"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4448 18C26.4448 22.4183 22.8631 26 18.4448 26C16.9774 26 14.2949 26 12.4434 26C11.3388 26 10.4448 25.1046 10.4448 24.0001C10.4448 22.0725 10.4448 19.2673 10.4448 18C10.4448 13.5817 14.0265 10 18.4448 10C22.8631 10 26.4448 13.5817 26.4448 18Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="14.3747" cy="18" r="1.16653" fill="white"/>
+<circle cx="18.4449" cy="18" r="1.16653" fill="white"/>
+<circle cx="22.515" cy="18" r="1.16653" fill="white"/>
+<defs>
+<filter id="filter0_d_2653_79671" x="0" y="0" width="38" height="38" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.284315 0 0 0 0 0.283927 0 0 0 0 0.320482 0 0 0 0.165483 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2653_79671"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2653_79671" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/img/open-en.png b/src/assets/img/open-en.png
new file mode 100644
index 0000000..a5f1b33
Binary files /dev/null and b/src/assets/img/open-en.png differ
diff --git a/src/assets/img/open.png b/src/assets/img/open.png
new file mode 100644
index 0000000..e276b85
Binary files /dev/null and b/src/assets/img/open.png differ
diff --git a/src/assets/img/receive.png b/src/assets/img/receive.png
new file mode 100644
index 0000000..aef7dfc
Binary files /dev/null and b/src/assets/img/receive.png differ
diff --git a/src/assets/img/red-package.png b/src/assets/img/red-package.png
new file mode 100644
index 0000000..4f77bd4
Binary files /dev/null and b/src/assets/img/red-package.png differ
diff --git a/src/assets/img/unclaimed.png b/src/assets/img/unclaimed.png
new file mode 100644
index 0000000..dea8437
Binary files /dev/null and b/src/assets/img/unclaimed.png differ
diff --git a/src/assets/info.svg b/src/assets/info.svg
new file mode 100644
index 0000000..777b644
--- /dev/null
+++ b/src/assets/info.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714464839239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4112" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z m0 785.066667c-196.266667 0-358.4-162.133333-358.4-358.4S315.733333 153.6 512 153.6s358.4 162.133333 358.4 358.4-162.133333 358.4-358.4 358.4z" fill="#1B1B22" p-id="4113"></path><path d="M512 588.8c17.066667 0 34.133333-17.066667 34.133333-34.133333V290.133333c0-17.066667-17.066667-34.133333-34.133333-34.133333s-34.133333 17.066667-34.133333 34.133333V554.666667c0 17.066667 17.066667 34.133333 34.133333 34.133333zM512 665.6c-29.866667 0-51.2 21.333333-51.2 51.2 0 25.6 21.333333 51.2 51.2 51.2s51.2-21.333333 51.2-51.2-21.333333-51.2-51.2-51.2z" fill="#1B1B22" p-id="4114"></path></svg>
\ No newline at end of file
diff --git a/src/assets/language.svg b/src/assets/language.svg
new file mode 100644
index 0000000..e18bfab
--- /dev/null
+++ b/src/assets/language.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714464844990" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4255" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M866.133333 571.733333c-29.866667 170.666667-174.933333 298.666667-354.133333 298.666667-25.6 0-51.2-4.266667-76.8-8.533333l17.066667-21.333334c8.533333-12.8 25.6-25.6 42.666666-29.866666l25.6-8.533334c38.4-17.066667 72.533333-46.933333 89.6-85.333333v-4.266667c29.866667-72.533333 4.266667-153.6-59.733333-200.533333-29.866667-21.333333-72.533333-29.866667-106.666667-25.6l-21.333333 4.266667c-42.666667 0-76.8-25.6-81.066667-64-8.533333-55.466667-46.933333-102.4-98.133333-115.2l-25.6-8.533334C285.866667 213.333333 392.533333 153.6 512 153.6h38.4l-17.066667 21.333333c-21.333333 29.866667-34.133333 64-34.133333 102.4 0 64 34.133333 123.733333 93.866667 149.333334l17.066666 8.533333c29.866667 12.8 59.733333 21.333333 89.6 21.333333h8.533334c38.4 0 81.066667 17.066667 106.666666 51.2l51.2 64zM622.933333 170.666667c128 42.666667 226.133333 157.866667 243.2 294.4-38.4-46.933333-98.133333-72.533333-157.866666-72.533334h-8.533334c-21.333333 0-42.666667-4.266667-59.733333-12.8l-17.066667-8.533333c-34.133333-17.066667-55.466667-51.2-55.466666-89.6 0-21.333333 8.533333-42.666667 21.333333-59.733333l34.133333-51.2z m-469.333333 341.333333c0-51.2 12.8-102.4 29.866667-145.066667l38.4 12.8c29.866667 4.266667 46.933333 25.6 51.2 55.466667 8.533333 76.8 76.8 128 153.6 119.466667l21.333333-4.266667c21.333333-4.266667 42.666667 4.266667 64 12.8 38.4 25.6 51.2 72.533333 34.133333 115.2v4.266667c-8.533333 21.333333-29.866667 42.666667-51.2 51.2l-25.6 8.533333c-29.866667 12.8-51.2 29.866667-68.266666 55.466667l-29.866667 42.666666c-128-55.466667-217.6-183.466667-217.6-328.533333zM512 938.666667c234.666667 0 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667z" fill="#1B1B22" p-id="4256"></path></svg>
\ No newline at end of file
diff --git a/src/assets/login/avatar-hint.svg b/src/assets/login/avatar-hint.svg
new file mode 100644
index 0000000..20cfcae
--- /dev/null
+++ b/src/assets/login/avatar-hint.svg
@@ -0,0 +1,93 @@
+<svg width="111" height="90" viewBox="0 0 111 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15290_143353)">
+<rect opacity="0.4" y="-0.226562" width="90.0003" height="90" rx="45" fill="#E8E8E8"/>
+<g opacity="0.8">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4546 18.866C25 20.3745 20.013 23.5943 16.3472 28.3032C15.2601 29.6996 14.2026 31.5021 12.0875 35.1073L-4.6117 63.5702C-6.72681 67.1753 -7.78437 68.9779 -8.47299 70.6081C-13.2282 81.8653 -9.82958 94.9129 -0.18667 102.42C1.20976 103.507 3.01232 104.564 6.61745 106.679L6.61763 106.68C10.2226 108.795 12.0252 109.852 13.6553 110.541C24.9126 115.296 37.9602 111.897 45.467 102.254C46.5541 100.858 47.6117 99.0555 49.7267 95.4505L49.7268 95.4503L66.426 66.9874C68.5411 63.3823 69.5986 61.5797 70.2873 59.9495C75.0425 48.6923 71.6439 35.6447 62.0009 28.1379C60.6045 27.0508 58.802 25.9933 55.1969 23.8782L55.1968 23.8781C51.5917 21.763 49.7891 20.7055 48.1589 20.0169C47.5869 19.7752 47.0102 19.5546 46.4299 19.3548C40.8384 15.4315 38.665 12.4609 37.0967 9.45704C36.4292 8.17859 34.6206 8.07363 33.8769 9.3093C31.7051 12.918 30.3893 15.3825 30.4546 18.866Z" fill="#E1E1E1"/>
+<g filter="url(#filter0_ii_15290_143353)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4546 18.866C25 20.3745 20.013 23.5943 16.3472 28.3032C15.2601 29.6996 14.2026 31.5021 12.0875 35.1073L-4.6117 63.5702C-6.72681 67.1753 -7.78437 68.9779 -8.47299 70.6081C-13.2282 81.8653 -9.82958 94.9129 -0.18667 102.42C1.20976 103.507 3.01232 104.564 6.61745 106.679L6.61763 106.68C10.2226 108.795 12.0252 109.852 13.6553 110.541C24.9126 115.296 37.9602 111.897 45.467 102.254C46.5541 100.858 47.6117 99.0555 49.7267 95.4505L49.7268 95.4503L66.426 66.9874C68.5411 63.3823 69.5986 61.5797 70.2873 59.9495C75.0425 48.6923 71.6439 35.6447 62.0009 28.1379C60.6045 27.0508 58.802 25.9933 55.1969 23.8782L55.1968 23.8781C51.5917 21.763 49.7891 20.7055 48.1589 20.0169C47.5869 19.7752 47.0102 19.5546 46.4299 19.3548C40.8384 15.4315 38.665 12.4609 37.0967 9.45704C36.4292 8.17859 34.6206 8.07363 33.8769 9.3093C31.7051 12.918 30.3893 15.3825 30.4546 18.866Z" fill="#E1E1E1"/>
+</g>
+<path d="M26.811 24.9463V24.9463C23.8517 26.5495 21.3062 28.8196 19.376 31.5769L18.3734 33.0091" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M16.5217 35.8035L16.8042 35.3664" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<g filter="url(#filter1_ddd_15290_143353)">
+<path d="M58.4322 69.7302C59.4641 66.2989 64.2073 66.002 65.659 69.2777C65.659 69.2777 74.4366 65.309 77.9979 71.4664C81.2196 77.0366 75.8376 83.6191 71.7571 88.2165C64.0257 96.9272 39.1495 104.927 39.1495 104.927L24.3486 99.4448C24.3486 99.4448 37.0315 93.1544 45.1855 88.1734C51.1386 84.5367 54.612 79.2482 56.0184 76.738C56.5417 75.804 56.9078 74.7992 57.2161 73.7739L58.4322 69.7302Z" fill="url(#paint0_linear_15290_143353)"/>
+</g>
+<path d="M61.8707 75.0617C62.581 73.4191 64.6856 72.9447 66.0319 74.1238C66.5234 74.5543 67.1572 74.7871 67.8106 74.7772L69.2325 74.7557C71.7848 74.7171 73.7917 76.9272 73.5078 79.464C73.3231 81.1148 72.1909 82.5053 70.6119 83.0209L69.2699 83.4591C67.1966 84.1361 64.9196 83.6529 63.3 82.1921L62.1448 81.1504C60.895 80.0231 60.5033 78.2243 61.1712 76.6795L61.8707 75.0617Z" fill="#D9D9D9"/>
+<g opacity="0.5">
+<path d="M73.0118 70.9909L72.4386 70.8671C71.4664 70.6572 70.4567 70.7 69.5059 70.9914V70.9914" stroke="white" stroke-width="0.750008" stroke-linecap="round"/>
+<path d="M67.8552 71.2904L68.1108 71.2413" stroke="white" stroke-width="0.750008" stroke-linecap="round"/>
+</g>
+</g>
+<g opacity="0.5">
+<path d="M27.3217 69.275C32.4214 72.2675 37.2628 70.9005 40.6175 67.3576C41.9376 65.9634 41.3492 63.789 39.6933 62.8174L33.28 59.054L26.8667 55.2906C25.2108 54.319 23.0253 54.8663 22.4583 56.7006C21.0167 61.3648 22.2223 66.2826 27.3217 69.275Z" fill="url(#paint1_linear_15290_143353)"/>
+<rect width="6.27605" height="11.2968" rx="3.13803" transform="matrix(0.862475 0.5061 -0.506109 0.86247 33.5342 37.1562)" fill="#777777"/>
+<rect width="6.27605" height="11.2968" rx="3.13803" transform="matrix(0.862475 0.5061 -0.506109 0.86247 47.1533 45.4141)" fill="#777777"/>
+<g opacity="0.5">
+<mask id="mask0_15290_143353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="21" y="54" width="21" height="17">
+<path d="M27.3217 69.275C32.4214 72.2675 37.2628 70.9005 40.6175 67.3576C41.9376 65.9634 41.3492 63.789 39.6933 62.8174L33.28 59.054L26.8667 55.2906C25.2108 54.319 23.0253 54.8663 22.4583 56.7006C21.0167 61.3648 22.2223 66.2826 27.3217 69.275Z" fill="url(#paint2_linear_15290_143353)"/>
+</mask>
+<g mask="url(#mask0_15290_143353)">
+<ellipse cx="27.9159" cy="67.2227" rx="8.15235" ry="5.24738" transform="rotate(28.7232 27.9159 67.2227)" fill="#C7C7C7"/>
+</g>
+</g>
+</g>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.9013 44.8205C99.9711 45.8404 107.341 40.1181 108.362 32.0395C109.382 23.9609 103.668 16.5851 95.5985 15.5653C87.5287 14.5455 80.1592 20.2678 79.1383 28.3464C78.7744 31.2255 79.266 34.0154 80.4149 36.4601L77.464 42.3479C77.279 42.717 77.6036 43.136 78.0068 43.0485L84.4679 41.6452C86.5298 43.3231 89.0707 44.4628 91.9013 44.8205Z" fill="#1B1B22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.0478 42.9801C100.182 42.9801 106.776 36.379 106.776 28.2362C106.776 20.0933 100.182 13.4922 92.0478 13.4922C83.9138 13.4922 77.3199 20.0933 77.32 28.2362C77.32 31.1382 78.1575 33.8445 79.6038 36.1258L77.4144 42.3371C77.2772 42.7265 77.6517 43.1015 78.0407 42.9641L84.2749 40.7619C86.531 42.1679 89.1946 42.9801 92.0478 42.9801Z" fill="white" stroke="#1B1B22" stroke-width="0.843698"/>
+<path d="M99.4854 34.7195L96.5182 34.7195C96.3967 34.7195 96.2917 34.6753 96.2033 34.5869C96.1149 34.4984 96.0707 34.3935 96.0707 34.2719L96.0707 26.5474C96.0707 26.4259 96.1149 26.3209 96.2033 26.2325C96.2917 26.1441 96.3967 26.0999 96.5182 26.0999L99.4854 26.0999C99.6069 26.0999 99.7119 26.1441 99.8003 26.2325C99.8887 26.3209 99.9329 26.4259 99.9329 26.5474L99.9329 34.2719C99.9329 34.3935 99.8887 34.4984 99.8003 34.5869C99.7119 34.6753 99.6069 34.7195 99.4854 34.7195ZM99.85 22.9007L99.85 24.9064C99.85 25.028 99.8058 25.1329 99.7174 25.2213C99.629 25.3097 99.5241 25.3539 99.4025 25.3539C98.6277 25.3539 97.8525 25.3468 97.0775 25.3501C96.5707 25.3521 96.1518 24.9503 96.1505 24.4435C96.1491 23.9292 96.1536 23.4148 96.1536 22.9007C96.1536 22.7791 96.1978 22.6741 96.2862 22.5857C96.3746 22.4973 96.4796 22.4531 96.6011 22.4531L99.4025 22.4531C99.524 22.4531 99.629 22.4973 99.7174 22.5857C99.8058 22.6741 99.85 22.7791 99.85 22.9007Z" fill="#1B1B22"/>
+<path d="M88.6742 29.8078L88.6742 34.2668C88.6742 34.3884 88.63 34.4934 88.5416 34.5818C88.4532 34.6702 88.3482 34.7144 88.2267 34.7144H84.9943C84.8728 34.7144 84.7678 34.6702 84.6794 34.5818C84.591 34.4934 84.5468 34.3884 84.5468 34.2668L84.5468 23.3929C84.5468 23.2713 84.591 23.1663 84.6794 23.0779C84.7678 22.9895 84.8728 22.9453 84.9943 22.9453H88.2267C88.3482 22.9453 88.4532 22.9895 88.5416 23.0779C88.63 23.1663 88.6742 23.2713 88.6742 23.3929L88.6742 26.9567C89.3041 26.2716 90.1108 25.929 91.0943 25.929C92.0779 25.929 92.8901 26.2495 93.531 26.8904C94.172 27.5314 94.4925 28.4652 94.4925 29.6918L94.4925 34.2502C94.4925 34.3718 94.4483 34.4768 94.3599 34.5652C94.2714 34.6536 94.1665 34.6978 94.0449 34.6978H90.796C90.6744 34.6978 90.5694 34.6536 90.481 34.5652C90.3926 34.4768 90.3484 34.3718 90.3484 34.2502L90.3484 29.8078C90.3484 29.2 90.0666 28.8961 89.503 28.8961C88.9505 28.8961 88.6742 29.2 88.6742 29.8078Z" fill="#1B1B22"/>
+<defs>
+<filter id="filter0_ii_15290_143353" x="-13.6028" y="2.4375" width="86.0199" height="110.234" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-6"/>
+<feGaussianBlur stdDeviation="3.31875"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_15290_143353"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-4.50001" dy="-2.25"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_15290_143353" result="effect2_innerShadow_15290_143353"/>
+</filter>
+<filter id="filter1_ddd_15290_143353" x="13.0986" y="57.9844" width="77.1327" height="61.9453" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.25"/>
+<feGaussianBlur stdDeviation="5.62501"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15290_143353"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6.00001"/>
+<feGaussianBlur stdDeviation="4.50001"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_15290_143353" result="effect2_dropShadow_15290_143353"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1.5" dy="3"/>
+<feGaussianBlur stdDeviation="1.875"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_15290_143353" result="effect3_dropShadow_15290_143353"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_15290_143353" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_15290_143353" x1="56.9195" y1="74.1498" x2="63.4476" y2="96.038" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="#DBDBDB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_15290_143353" x1="33.28" y1="59.054" x2="27.2924" y2="69.2578" gradientUnits="userSpaceOnUse">
+<stop stop-color="#717171"/>
+<stop offset="1" stop-color="#737373"/>
+</linearGradient>
+<linearGradient id="paint2_linear_15290_143353" x1="33.28" y1="59.054" x2="27.2924" y2="69.2578" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B6B6B"/>
+<stop offset="1" stop-color="#B2B2B2"/>
+</linearGradient>
+<clipPath id="clip0_15290_143353">
+<rect width="90.0003" height="90" rx="45" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/login/bg-login-guge.svg b/src/assets/login/bg-login-guge.svg
new file mode 100644
index 0000000..3e990b2
--- /dev/null
+++ b/src/assets/login/bg-login-guge.svg
@@ -0,0 +1,7 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.00561523 24.3594C0.00561523 11.1076 10.7483 0.359375 24 0.359375C37.2518 0.359375 47.9944 11.1076 47.9944 24.3594C47.9944 37.6111 37.2518 48.3594 24 48.3594C10.7483 48.3594 0.00561523 37.6111 0.00561523 24.3594Z" fill="#222229"/>
+<path d="M17.6069 24.3576C17.6069 23.6432 17.7288 22.9579 17.9444 22.3157L14.1588 19.4844C13.3982 20.9961 13.0032 22.6653 13.0056 24.3576C13.0056 26.1089 13.42 27.7609 14.1569 29.2271L17.9407 26.3911C17.72 25.7358 17.6073 25.0491 17.6069 24.3576Z" fill="#EBB61F"/>
+<path d="M24.2557 17.8595C25.8401 17.8595 27.2716 18.4089 28.3966 19.3089L31.6695 16.1091C29.6754 14.4094 27.1188 13.3594 24.2556 13.3594C19.81 13.3594 15.9887 15.8485 14.1587 19.4861L17.9462 22.3175C18.8181 19.7243 21.3044 17.8595 24.2557 17.8595Z" fill="#EA4335"/>
+<path d="M24.2556 30.8564C21.3034 30.8564 18.8172 28.9916 17.9443 26.3984L14.1587 29.2298C15.9878 32.8674 19.809 35.3565 24.2556 35.3565C26.9988 35.3565 29.6182 34.403 31.5851 32.6152L27.9907 29.8945C26.9772 30.5198 25.7004 30.8564 24.2547 30.8564" fill="#34A853"/>
+<path d="M34.9945 24.3591C34.9945 23.7094 34.8914 23.0091 34.7386 22.3594H24.2554V26.6092H30.2891C29.9882 28.0586 29.167 29.1724 27.9923 29.8971L31.5857 32.6178C33.6511 30.7409 34.9945 27.9452 34.9945 24.3591Z" fill="#4285F4"/>
+</svg>
diff --git a/src/assets/login/email.svg b/src/assets/login/email.svg
new file mode 100644
index 0000000..b6d1447
--- /dev/null
+++ b/src/assets/login/email.svg
@@ -0,0 +1,5 @@
+<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8237 14.9297H14.1508H16.7393L24.6615 21.9632L23.9817 23.2182H5.33958L4.05835 22.643L11.8237 14.9297Z" fill="#E8E8E9"/>
+<rect x="25.4475" y="6.72562" width="16.68" height="22.08" rx="2.64" transform="rotate(90 25.4475 6.72562)" stroke="#A4A4A7" stroke-width="1.92"/>
+<path d="M22.6913 9.36719L17.4364 13.6596C15.6693 15.1031 13.1304 15.1031 11.3633 13.6596L6.1084 9.36719" stroke="#A4A4A7" stroke-width="1.92" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/login/head-portrait.svg b/src/assets/login/head-portrait.svg
new file mode 100644
index 0000000..5c3fbcb
--- /dev/null
+++ b/src/assets/login/head-portrait.svg
@@ -0,0 +1,7 @@
+<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24" cy="24.3594" r="24" fill="#F7F7F7"/>
+<mask id="path-2-inside-1_15171_140909" fill="white">
+<path d="M23.6004 25.0373C20.0004 25.0373 17.0719 22.1059 17.0719 18.5024C17.0719 14.8989 19.9862 11.9531 23.6004 11.9531C27.2147 11.9531 30.129 14.8846 30.129 18.4881C30.129 22.0916 27.2004 25.0373 23.6004 25.0373ZM32.7995 28.8012C36.2387 31.6301 33.0684 35.9481 28.6153 35.9481H18.5817C14.122 35.9481 10.9537 31.6206 14.4032 28.7941C16.4316 27.132 19.3694 25.8381 23.6004 25.8381C27.8375 25.8381 30.7747 27.1357 32.7995 28.8012Z"/>
+</mask>
+<path d="M32.7995 28.8012L31.5799 30.2841L32.7995 28.8012ZM23.6004 23.1173C21.0626 23.1173 18.9919 21.0473 18.9919 18.5024H15.1519C15.1519 23.1645 18.9383 26.9573 23.6004 26.9573V23.1173ZM18.9919 18.5024C18.9919 15.9493 21.0565 13.8731 23.6004 13.8731V10.0331C18.9158 10.0331 15.1519 13.8484 15.1519 18.5024H18.9919ZM23.6004 13.8731C26.1498 13.8731 28.209 15.9404 28.209 18.4881H32.049C32.049 13.8287 28.2796 10.0331 23.6004 10.0331V13.8731ZM28.209 18.4881C28.209 21.0384 26.1328 23.1173 23.6004 23.1173V26.9573C28.2681 26.9573 32.049 23.1447 32.049 18.4881H28.209ZM28.6153 34.0281H18.5817V37.8681H28.6153V34.0281ZM23.6004 27.7581C27.4105 27.7581 29.9122 28.9124 31.5799 30.2841L34.0192 27.3184C31.6372 25.3591 28.2645 23.9181 23.6004 23.9181V27.7581ZM15.6201 30.2792C17.2921 28.9092 19.7957 27.7581 23.6004 27.7581V23.9181C18.9432 23.9181 15.5712 25.3548 13.1863 27.309L15.6201 30.2792ZM18.5817 34.0281C16.936 34.0281 15.6728 33.2229 15.1438 32.3962C14.8913 32.0016 14.8331 31.6566 14.8732 31.3843C14.9112 31.1267 15.066 30.7333 15.6201 30.2792L13.1863 27.309C12.0157 28.2681 11.273 29.4756 11.0742 30.8244C10.8776 32.1584 11.2434 33.4253 11.9093 34.4659C13.2169 36.5095 15.7677 37.8681 18.5817 37.8681V34.0281ZM28.6153 37.8681C31.4254 37.8681 33.9743 36.5125 35.2831 34.4722C35.9496 33.4332 36.3169 32.168 36.1229 30.8348C35.9266 29.4866 35.1869 28.2788 34.0192 27.3184L31.5799 30.2841C32.1318 30.738 32.2855 31.1308 32.3229 31.3879C32.3625 31.6599 32.3038 32.0046 32.051 32.3988C31.5211 33.2247 30.2583 34.0281 28.6153 34.0281V37.8681Z" fill="#1B1B22" fill-opacity="0.4" mask="url(#path-2-inside-1_15171_140909)"/>
+</svg>
diff --git a/src/assets/login/iphone.svg b/src/assets/login/iphone.svg
new file mode 100644
index 0000000..1f9ed22
--- /dev/null
+++ b/src/assets/login/iphone.svg
@@ -0,0 +1,5 @@
+<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7.30103" y="5.28125" width="14.198" height="13.6775" rx="1.2" fill="#E8E8E9"/>
+<path d="M13.2077 22.5625H15.6077" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92" stroke-linecap="round"/>
+<rect x="6.36771" y="4.31938" width="16.08" height="22.08" rx="2.64" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92"/>
+</svg>
diff --git a/src/assets/login/return-icon.svg b/src/assets/login/return-icon.svg
new file mode 100644
index 0000000..a32cca0
--- /dev/null
+++ b/src/assets/login/return-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723877754263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6185" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M473.6 857.6c-12.8 0-21.333333-4.266667-29.866667-12.8l-251.733333-251.733333c-42.666667-42.666667-42.666667-115.2 0-157.866667l251.733333-251.733333c17.066667-17.066667 42.666667-17.066667 59.733334 0s17.066667 42.666667 0 59.733333l-251.733334 251.733333c-8.533333 8.533333-8.533333 25.6 0 34.133334l251.733334 251.733333c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 12.8-21.333333 17.066667-29.866667 17.066667z" fill="#1B1B22" p-id="6186"></path></svg>
\ No newline at end of file
diff --git a/src/assets/login/sg-login.svg b/src/assets/login/sg-login.svg
new file mode 100644
index 0000000..66468ea
--- /dev/null
+++ b/src/assets/login/sg-login.svg
@@ -0,0 +1,4 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.905518" y="0.359375" width="48" height="48" rx="24" fill="#538FE1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7463 13.9609H29.0662C30.6719 13.9609 31.9782 15.2672 31.9782 16.8729V31.8487C31.9782 33.4544 30.6719 34.7607 29.0662 34.7607H20.7463C19.1406 34.7607 17.8344 33.4544 17.8344 31.8487V16.8729C17.8344 15.2672 19.1406 13.9609 20.7463 13.9609ZM23.3061 30.3608C22.8643 30.3608 22.5061 30.719 22.5061 31.1608C22.5061 31.6027 22.8643 31.9608 23.3061 31.9608H26.5061C26.948 31.9608 27.3061 31.6027 27.3061 31.1608C27.3061 30.719 26.948 30.3608 26.5061 30.3608H23.3061Z" fill="white"/>
+</svg>
diff --git a/src/assets/login/sg-wjmm.svg b/src/assets/login/sg-wjmm.svg
new file mode 100644
index 0000000..31d2670
--- /dev/null
+++ b/src/assets/login/sg-wjmm.svg
@@ -0,0 +1,6 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24.3999" cy="24.3594" r="24" fill="#F7F7F7"/>
+<rect x="17.301" y="14.2812" width="14.198" height="13.6775" rx="1.2" fill="#E8E8E9"/>
+<path d="M23.2078 31.5625H25.6078" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92" stroke-linecap="round"/>
+<rect x="16.3677" y="13.3194" width="16.08" height="22.08" rx="2.64" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92"/>
+</svg>
diff --git a/src/assets/login/sg-yxwjmm.svg b/src/assets/login/sg-yxwjmm.svg
new file mode 100644
index 0000000..d9c8b69
--- /dev/null
+++ b/src/assets/login/sg-yxwjmm.svg
@@ -0,0 +1,6 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24.3999" cy="24.3594" r="24" fill="#F7F7F7"/>
+<path d="M21.8237 23.9297H24.1508H26.7393L34.6615 30.9632L33.9817 32.2182H15.3396L14.0583 31.643L21.8237 23.9297Z" fill="#E8E8E9"/>
+<rect x="35.4475" y="15.7256" width="16.68" height="22.08" rx="2.64" transform="rotate(90 35.4475 15.7256)" stroke="#A4A4A7" stroke-width="1.92"/>
+<path d="M32.6913 18.3672L27.4364 22.6596C25.6693 24.1031 23.1304 24.1031 21.3633 22.6596L16.1084 18.3672" stroke="#A4A4A7" stroke-width="1.92" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/login/wj-password.svg b/src/assets/login/wj-password.svg
new file mode 100644
index 0000000..55c40dc
--- /dev/null
+++ b/src/assets/login/wj-password.svg
@@ -0,0 +1,7 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="24.314" cy="24.3594" r="24" fill="#F7F7F7"/>
+<rect x="14.7139" y="19.5625" width="19.2" height="15.6" rx="4.8" fill="#E8E8E9"/>
+<rect x="15.6739" y="20.5225" width="17.28" height="13.68" rx="3.84" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92"/>
+<path d="M24.314 25.5625V29.1625" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92" stroke-linecap="round"/>
+<path d="M29.1139 21.3625V18.3625C29.1139 15.7115 26.9649 13.5625 24.3139 13.5625V13.5625C21.6629 13.5625 19.5139 15.7115 19.5139 18.3625V21.3625" stroke="#1B1B22" stroke-opacity="0.4" stroke-width="1.92"/>
+</svg>
diff --git a/src/assets/login/yx-login.svg b/src/assets/login/yx-login.svg
new file mode 100644
index 0000000..e622bca
--- /dev/null
+++ b/src/assets/login/yx-login.svg
@@ -0,0 +1,4 @@
+<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.905518" y="0.359375" width="48" height="48" rx="24" fill="#FA9837"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9053 16.8594C16.6962 16.8594 14.9053 18.6502 14.9053 20.8594V27.8618C14.9053 30.071 16.6962 31.8618 18.9053 31.8618H30.9053C33.1145 31.8618 34.9053 30.071 34.9053 27.8618V20.8594C34.9053 18.6502 33.1145 16.8594 30.9053 16.8594H18.9053ZM18.8749 20.0791C18.4986 19.8476 18.0059 19.9649 17.7743 20.3412C17.5427 20.7175 17.6601 21.2102 18.0363 21.4418L23.4882 24.7967C24.3881 25.3505 25.5232 25.3505 26.4231 24.7967L31.8749 21.4418C32.2512 21.2102 32.3685 20.7175 32.137 20.3412C31.9054 19.9649 31.4126 19.8476 31.0363 20.0791L25.5845 23.4341C25.1989 23.6714 24.7124 23.6714 24.3267 23.4341L18.8749 20.0791Z" fill="white"/>
+</svg>
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..428745f
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/logo1.png b/src/assets/logo1.png
new file mode 100644
index 0000000..eee2dd7
Binary files /dev/null and b/src/assets/logo1.png differ
diff --git a/src/assets/mine-avatar.png b/src/assets/mine-avatar.png
new file mode 100644
index 0000000..a946ca1
Binary files /dev/null and b/src/assets/mine-avatar.png differ
diff --git a/src/assets/mine-avatar.svg b/src/assets/mine-avatar.svg
new file mode 100644
index 0000000..859d26d
--- /dev/null
+++ b/src/assets/mine-avatar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714465929252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1829" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0c283.733333 0 512 228.266667 512 512S795.733333 1024 512 1024 0 795.733333 0 512 230.4 0 512 0z" fill="#3D3D46" fill-opacity=".7" opacity=".7" p-id="1830"></path><path d="M731.733333 379.733333c-2.133333-4.266667-2.133333-10.666667 0-17.066666 14.933333-25.6 25.6-53.333333 29.866667-74.666667 4.266667-14.933333-12.8-25.6-25.6-17.066667-27.733333 14.933333-68.266667 27.733333-108.8 14.933334-36.266667-19.2-78.933333-29.866667-123.733333-29.866667-149.333333 0-273.066667 121.6-273.066667 273.066667V938.666667c81.066667 53.333333 177.066667 83.2 281.6 83.2 96 0 187.733333-27.733333 264.533333-72.533334V529.066667c0-55.466667-17.066667-106.666667-44.8-149.333334z m-172.8 23.466667c6.4-6.4 14.933333-10.666667 23.466667-10.666667s17.066667 4.266667 23.466667 10.666667c6.4 6.4 10.666667 14.933333 10.666666 23.466667 0 4.266667 0 8.533333-2.133333 12.8s-4.266667 8.533333-6.4 10.666666c-2.133333 2.133333-6.4 6.4-10.666667 6.4-4.266667 2.133333-8.533333 2.133333-12.8 2.133334s-8.533333 0-12.8-2.133334-8.533333-4.266667-10.666666-6.4c-2.133333-2.133333-6.4-6.4-6.4-10.666666-2.133333-4.266667-2.133333-8.533333-2.133334-12.8-2.133333-8.533333 0-17.066667 6.4-23.466667z m-157.866666 0c6.4-6.4 14.933333-10.666667 23.466666-10.666667s17.066667 4.266667 23.466667 10.666667c6.4 6.4 10.666667 14.933333 10.666667 23.466667s-4.266667 17.066667-10.666667 23.466666c-6.4 6.4-14.933333 10.666667-23.466667 10.666667s-17.066667-4.266667-23.466666-10.666667c-6.4-6.4-10.666667-14.933333-10.666667-23.466666s4.266667-17.066667 10.666667-23.466667z m102.4 281.6c-96 0-147.2-64-155.733334-142.933333-2.133333-10.666667 8.533333-21.333333 19.2-21.333334h270.933334c10.666667 0 21.333333 8.533333 19.2 21.333334-6.4 78.933333-57.6 142.933333-153.6 142.933333z" fill="#FFFFFF" p-id="1831"></path></svg>
\ No newline at end of file
diff --git a/src/assets/mine-top.png b/src/assets/mine-top.png
new file mode 100644
index 0000000..6cd92ba
Binary files /dev/null and b/src/assets/mine-top.png differ
diff --git a/src/assets/more.svg b/src/assets/more.svg
new file mode 100644
index 0000000..6d504b4
--- /dev/null
+++ b/src/assets/more.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 18.5C11.25 19.3284 11.9216 20 12.75 20C13.5784 20 14.25 19.3284 14.25 18.5C14.25 17.6716 13.5784 17 12.75 17C11.9216 17 11.25 17.6716 11.25 18.5ZM12.75 13.5C11.9216 13.5 11.25 12.8284 11.25 12C11.25 11.1716 11.9216 10.5 12.75 10.5C13.5784 10.5 14.25 11.1716 14.25 12C14.25 12.8284 13.5784 13.5 12.75 13.5ZM12.75 7C11.9216 7 11.25 6.32843 11.25 5.5C11.25 4.67157 11.9216 4 12.75 4C13.5784 4 14.25 4.67157 14.25 5.5C14.25 6.32843 13.5784 7 12.75 7Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/no-data.png b/src/assets/no-data.png
new file mode 100644
index 0000000..e4597b1
Binary files /dev/null and b/src/assets/no-data.png differ
diff --git a/src/assets/notDisturb.svg b/src/assets/notDisturb.svg
new file mode 100644
index 0000000..7b9a2bc
--- /dev/null
+++ b/src/assets/notDisturb.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97374 5.70843C8.92735 4.54303 10.3769 3.79922 12.0002 3.79922C13.3793 3.79922 14.702 4.34707 15.6772 5.32226C16.6523 6.29745 17.2002 7.62009 17.2002 8.99922V12.9992C17.2002 13.2114 17.2845 13.4149 17.4345 13.5649L18.8142 14.9446C19.0616 15.1923 19.2005 15.529 19.2002 15.8792C19.2002 16.1763 19.102 16.4505 18.9364 16.6711L20.0729 17.8076C20.5255 17.2934 20.8 16.6187 20.8002 15.8799C20.8009 15.1052 20.4933 14.3617 19.9459 13.8135L18.8002 12.6678V8.99922C18.8002 7.19575 18.0838 5.46614 16.8085 4.19089C15.5333 2.91565 13.8037 2.19922 12.0002 2.19922C9.93518 2.19922 8.08516 3.11969 6.83804 4.57273L7.97374 5.70843ZM7.14247 7.13989L5.93128 5.9287C5.46369 6.85105 5.2002 7.89436 5.2002 8.99922V12.6678L4.05416 13.8139C3.50679 14.3619 3.1996 15.105 3.2002 15.8796C3.2004 17.4921 4.50765 18.7992 6.1202 18.7992H8.28456C8.65194 20.5138 10.1759 21.7992 12.0002 21.7992C13.8244 21.7992 15.3485 20.5138 15.7158 18.7992H17.8802C18.1606 18.7992 18.4318 18.7597 18.6885 18.6859L17.2018 17.1992H6.1202C5.39118 17.1992 4.8002 16.6075 4.8002 15.8785C4.79989 15.5283 4.93876 15.1923 5.18623 14.9446L6.56588 13.5649C6.71591 13.4149 6.8002 13.2114 6.8002 12.9992V8.99922C6.8002 8.34409 6.92135 7.71725 7.14247 7.13989ZM12.0002 20.1992C11.0674 20.1992 10.2702 19.6187 9.95017 18.7992H14.0502C13.7302 19.6187 12.933 20.1992 12.0002 20.1992Z" fill="#76767A"/>
+<path d="M4.2124 5.34375L18.7732 19.9045" stroke="#76767A" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/notDisturb1.svg b/src/assets/notDisturb1.svg
new file mode 100644
index 0000000..fad1254
--- /dev/null
+++ b/src/assets/notDisturb1.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.38 14.423L19.946 13.8576L19.9457 13.8573L19.38 14.423ZM6.12 18.043V18.843V18.043ZM4.62 14.423L4.05432 13.8573L4.05396 13.8576L4.62 14.423ZM6 13.043L6.56569 13.6087C6.71572 13.4586 6.8 13.2551 6.8 13.043H6ZM18 13.043H17.2C17.2 13.2551 17.2843 13.4586 17.4343 13.6087L18 13.043ZM15 18.043H15.8C15.8 17.6011 15.4418 17.243 15 17.243V18.043ZM9 18.043V17.243C8.55817 17.243 8.2 17.6011 8.2 18.043H9ZM18.814 14.9883C19.0614 15.2361 19.2003 15.5721 19.2 15.9223L20.8 15.9237C20.8007 15.149 20.4935 14.4058 19.946 13.8576L18.814 14.9883ZM19.2 15.923C19.2 16.652 18.609 17.243 17.88 17.243V18.843C19.4927 18.843 20.8 17.5356 20.8 15.923H19.2ZM17.88 17.243H6.12V18.843H17.88V17.243ZM6.12 17.243C5.39098 17.243 4.8 16.652 4.8 15.923H3.2C3.2 17.5356 4.50733 18.843 6.12 18.843V17.243ZM4.8 15.9223C4.79969 15.5721 4.93856 15.2361 5.18604 14.9883L4.05396 13.8576C3.50651 14.4058 3.19932 15.149 3.2 15.9237L4.8 15.9223ZM5.18569 14.9887L6.56569 13.6087L5.43432 12.4773L4.05432 13.8573L5.18569 14.9887ZM6.8 13.043V9.04297H5.2V13.043H6.8ZM6.8 9.04297C6.8 6.17109 9.12812 3.84297 12 3.84297V2.24297C8.24446 2.24297 5.2 5.28743 5.2 9.04297H6.8ZM12 3.84297C13.3791 3.84297 14.7018 4.39082 15.677 5.36601L16.8083 4.23464C15.5331 2.9594 13.8035 2.24297 12 2.24297V3.84297ZM15.677 5.36601C16.6521 6.3412 17.2 7.66384 17.2 9.04297H18.8C18.8 7.2395 18.0836 5.50989 16.8083 4.23464L15.677 5.36601ZM17.2 9.04297V13.043H18.8V9.04297H17.2ZM17.4343 13.6087L18.8143 14.9887L19.9457 13.8573L18.5657 12.4773L17.4343 13.6087ZM15 17.243H9V18.843H15V17.243ZM8.2 18.043C8.2 20.1417 9.90132 21.843 12 21.843V20.243C10.785 20.243 9.8 19.258 9.8 18.043H8.2ZM12 21.843C14.0987 21.843 15.8 20.1417 15.8 18.043H14.2C14.2 19.258 13.215 20.243 12 20.243V21.843Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/notice-logo.png b/src/assets/notice-logo.png
new file mode 100644
index 0000000..ead65ef
Binary files /dev/null and b/src/assets/notice-logo.png differ
diff --git a/src/assets/notice.svg b/src/assets/notice.svg
new file mode 100644
index 0000000..9e71ca3
--- /dev/null
+++ b/src/assets/notice.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4 14.38L19.9661 13.8147L19.9657 13.8143L19.4 14.38ZM6.14002 18V18.8V18ZM4.64002 14.38L4.07433 13.8143L4.07398 13.8147L4.64002 14.38ZM6.02002 13L6.58571 13.5657C6.73573 13.4157 6.82002 13.2122 6.82002 13H6.02002ZM18.02 13H17.22C17.22 13.2122 17.3043 13.4157 17.4543 13.5657L18.02 13ZM15.02 18H15.82C15.82 17.5582 15.4618 17.2 15.02 17.2V18ZM9.02002 18V17.2C8.57819 17.2 8.22002 17.5582 8.22002 18H9.02002ZM18.834 14.9453C19.0815 15.1931 19.2203 15.5291 19.22 15.8793L20.82 15.8807C20.8207 15.106 20.5135 14.3628 19.9661 13.8147L18.834 14.9453ZM19.22 15.88C19.22 16.609 18.629 17.2 17.9 17.2V18.8C19.5127 18.8 20.82 17.4927 20.82 15.88H19.22ZM17.9 17.2H6.14002V18.8H17.9V17.2ZM6.14002 17.2C5.411 17.2 4.82002 16.609 4.82002 15.88H3.22002C3.22002 17.4927 4.52735 18.8 6.14002 18.8V17.2ZM4.82002 15.8793C4.81971 15.5291 4.95858 15.1931 5.20606 14.9453L4.07398 13.8147C3.52653 14.3628 3.21934 15.106 3.22002 15.8807L4.82002 15.8793ZM5.20571 14.9457L6.58571 13.5657L5.45433 12.4343L4.07433 13.8143L5.20571 14.9457ZM6.82002 13V9H5.22002V13H6.82002ZM6.82002 9C6.82002 6.12812 9.14814 3.8 12.02 3.8V2.2C8.26448 2.2 5.22002 5.24446 5.22002 9H6.82002ZM12.02 3.8C13.3991 3.8 14.7218 4.34786 15.697 5.32304L16.8283 4.19167C15.5531 2.91643 13.8235 2.2 12.02 2.2V3.8ZM15.697 5.32304C16.6722 6.29823 17.22 7.62087 17.22 9H18.82C18.82 7.19653 18.1036 5.46692 16.8283 4.19167L15.697 5.32304ZM17.22 9V13H18.82V9H17.22ZM17.4543 13.5657L18.8343 14.9457L19.9657 13.8143L18.5857 12.4343L17.4543 13.5657ZM15.02 17.2H9.02002V18.8H15.02V17.2ZM8.22002 18C8.22002 20.0987 9.92134 21.8 12.02 21.8V20.2C10.805 20.2 9.82002 19.215 9.82002 18H8.22002ZM12.02 21.8C14.1187 21.8 15.82 20.0987 15.82 18H14.22C14.22 19.215 13.235 20.2 12.02 20.2V21.8Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/pull-refresh-arrow-down.svg b/src/assets/pull-refresh-arrow-down.svg
new file mode 100644
index 0000000..c077b54
--- /dev/null
+++ b/src/assets/pull-refresh-arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3007 3.82612C13.3007 3.3843 12.9425 3.02612 12.5007 3.02612C12.0589 3.02612 11.7007 3.3843 11.7007 3.82612L11.7007 18.6743L5.36178 12.3354C5.04936 12.023 4.54283 12.023 4.23041 12.3354C3.91799 12.6478 3.91799 13.1543 4.23041 13.4668L11.228 20.4644C11.931 21.1673 13.0707 21.1673 13.7736 20.4644L20.7709 13.4671C21.0833 13.1547 21.0833 12.6481 20.7709 12.3357C20.4585 12.0233 19.952 12.0233 19.6396 12.3357L13.3007 18.6746L13.3007 3.82612Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/pull-refresh-arrow-up.svg b/src/assets/pull-refresh-arrow-up.svg
new file mode 100644
index 0000000..93fe88f
--- /dev/null
+++ b/src/assets/pull-refresh-arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8007 20.1917C12.8007 20.6335 12.4425 20.9917 12.0007 20.9917C11.5589 20.9917 11.2007 20.6335 11.2007 20.1917L11.2007 5.34352L4.86178 11.6824C4.54936 11.9949 4.04283 11.9949 3.73041 11.6824C3.41799 11.37 3.41799 10.8635 3.73041 10.5511L10.728 3.55342C11.431 2.85048 12.5707 2.85048 13.2736 3.55343L20.2709 10.5508C20.5833 10.8632 20.5833 11.3697 20.2709 11.6821C19.9585 11.9945 19.452 11.9945 19.1396 11.6821L12.8007 5.34324L12.8007 20.1917Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/qrcode.svg b/src/assets/qrcode.svg
new file mode 100644
index 0000000..dafdbca
--- /dev/null
+++ b/src/assets/qrcode.svg
@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.40938" y="3.33516" width="8.92599" height="8.92599" rx="3.2" stroke="white" stroke-opacity="0.55" stroke-width="1.6"/>
+<rect x="6.55664" y="6.48047" width="2.63227" height="2.63227" rx="1.31613" fill="white" fill-opacity="0.55"/>
+<path d="M3.40938 17.1133C3.40938 15.8983 4.39435 14.9133 5.60937 14.9133H7.97757C8.64031 14.9133 9.17757 15.4505 9.17757 16.1133V18.4815C9.17757 19.6965 8.19259 20.6815 6.97757 20.6815H6.60937C4.84206 20.6815 3.40938 19.2488 3.40938 17.4815V17.1133Z" stroke="white" stroke-opacity="0.55" stroke-width="1.6"/>
+<path d="M20.7566 6.90234C20.7566 8.11737 19.7717 9.10234 18.5566 9.10234L16.1884 9.10234C15.5257 9.10234 14.9884 8.56509 14.9884 7.90234L14.9884 5.53415C14.9884 4.31913 15.9734 3.33415 17.1884 3.33415L17.5566 3.33415C19.324 3.33415 20.7566 4.76684 20.7566 6.53415L20.7566 6.90234Z" stroke="white" stroke-opacity="0.55" stroke-width="1.6"/>
+<path d="M20.6787 14.9877V17.6016C20.6787 19.2584 19.3356 20.6016 17.6787 20.6016H15.0649" stroke="white" stroke-opacity="0.55" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.8722 17.5547H13.8926C12.788 17.5547 11.8926 18.4501 11.8926 19.5547V20.4289" stroke="white" stroke-opacity="0.55" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.6787 11.8125L15.0172 11.8125" stroke="white" stroke-opacity="0.55" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M14.5205 14.5859L11.6616 14.5859" stroke="white" stroke-opacity="0.55" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M16.8681 14.5859H17.9203" stroke="white" stroke-opacity="0.55" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/qrcode1.svg b/src/assets/qrcode1.svg
new file mode 100644
index 0000000..67c6a1d
--- /dev/null
+++ b/src/assets/qrcode1.svg
@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.62031" y="3.33516" width="8.92599" height="8.92599" rx="3.2" stroke="#76767A" stroke-width="1.6"/>
+<rect x="6.76758" y="6.48047" width="2.63227" height="2.63227" rx="1.31613" fill="#76767A"/>
+<path d="M3.62031 17.1133C3.62031 15.8983 4.60529 14.9133 5.82031 14.9133H8.1885C8.85125 14.9133 9.3885 15.4505 9.3885 16.1133V18.4815C9.3885 19.6965 8.40353 20.6815 7.1885 20.6815H6.82031C5.053 20.6815 3.62031 19.2488 3.62031 17.4815V17.1133Z" stroke="#76767A" stroke-width="1.6"/>
+<path d="M20.9676 6.90234C20.9676 8.11737 19.9826 9.10234 18.7676 9.10234L16.3994 9.10234C15.7366 9.10234 15.1994 8.56509 15.1994 7.90234L15.1994 5.53415C15.1994 4.31913 16.1844 3.33415 17.3994 3.33415L17.7676 3.33415C19.5349 3.33415 20.9676 4.76684 20.9676 6.53415L20.9676 6.90234Z" stroke="#76767A" stroke-width="1.6"/>
+<path d="M20.8906 14.9877V17.6016C20.8906 19.2584 19.5475 20.6016 17.8906 20.6016H15.2768" stroke="#76767A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0831 17.5547H14.1035C12.9989 17.5547 12.1035 18.4501 12.1035 19.5547V20.4289" stroke="#76767A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.8906 11.8125L15.2292 11.8125" stroke="#76767A" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M14.7324 14.5859L11.8735 14.5859" stroke="#76767A" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M17.08 14.5859H18.1322" stroke="#76767A" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/quill.snow.css b/src/assets/quill.snow.css
new file mode 100644
index 0000000..86a553f
--- /dev/null
+++ b/src/assets/quill.snow.css
@@ -0,0 +1,949 @@
+/*!
+ * Quill Editor v1.3.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+ol li:not(.ql-direction-rtl),
+ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+ol li.ql-direction-rtl,
+ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-image {
+  display: block;
+  max-width: 100%;
+}
+.ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-bg-black {
+  background-color: #000;
+}
+.ql-bg-red {
+  background-color: #e60000;
+}
+.ql-bg-orange {
+  background-color: #f90;
+}
+.ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-bg-green {
+  background-color: #008a00;
+}
+.ql-bg-blue {
+  background-color: #06c;
+}
+.ql-bg-purple {
+  background-color: #93f;
+}
+.ql-color-white {
+  color: #fff;
+}
+.ql-color-red {
+  color: #e60000;
+}
+.ql-color-orange {
+  color: #f90;
+}
+.ql-color-yellow {
+  color: #ff0;
+}
+.ql-color-green {
+  color: #008a00;
+}
+.ql-color-blue {
+  color: #06c;
+}
+.ql-color-purple {
+  color: #93f;
+}
+.ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-size-small {
+  font-size: 0.75em;
+}
+.ql-size-large {
+  font-size: 1.5em;
+}
+.ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-align-center {
+  text-align: center;
+}
+.ql-align-justify {
+  text-align: justify;
+}
+.ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type=file],
+.ql-snow .ql-toolbar input.ql-image[type=file] {
+  display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #06c;
+}
+@media (pointer: coarse) {
+  .ql-snow.ql-toolbar button:hover:not(.ql-active),
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+    color: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #444;
+  }
+}
+.ql-snow {
+  box-sizing: border-box;
+}
+.ql-snow * {
+  box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+  display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+  visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+  position: absolute;
+  transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow .ql-stroke {
+  fill: none;
+  stroke: #444;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+  fill: none;
+  stroke: #444;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: #444;
+}
+.ql-snow .ql-empty {
+  fill: none;
+}
+.ql-snow .ql-even {
+  fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+  opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+  display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-snow h1 {
+  font-size: 2em;
+}
+.ql-snow h2 {
+  font-size: 1.5em;
+}
+.ql-snow h3 {
+  font-size: 1.17em;
+}
+.ql-snow h4 {
+  font-size: 1em;
+}
+.ql-snow h5 {
+  font-size: 0.83em;
+}
+.ql-snow h6 {
+  font-size: 0.67em;
+}
+.ql-snow a {
+  text-decoration: underline;
+}
+.ql-snow blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-snow code,
+.ql-snow pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-snow pre {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-snow code {
+  font-size: 85%;
+  padding: 2px 4px;
+}
+.ql-snow pre.ql-syntax {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-snow img {
+  max-width: 100%;
+}
+.ql-snow .ql-picker {
+  color: #444;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+  background-color: #fff;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #ccc;
+  z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+  width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+  padding: 4px 0px;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+  margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+  border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+  border: 1px solid transparent;
+  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+  border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 0px;
+}
+.ql-snow .ql-tooltip {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 5px #ddd;
+  color: #444;
+  padding: 5px 12px;
+  white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+  content: "Visit URL:";
+  line-height: 26px;
+  margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type=text] {
+  display: none;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  height: 26px;
+  margin: 0px;
+  padding: 3px 5px;
+  width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+  display: inline-block;
+  max-width: 200px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+  border-right: 1px solid #ccc;
+  content: 'Edit';
+  margin-left: 16px;
+  padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: 'Remove';
+  margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+  line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+  display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type=text] {
+  display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: 'Save';
+  padding-right: 0px;
+}
+.ql-snow .ql-tooltip[data-mode=link]::before {
+  content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode=formula]::before {
+  content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode=video]::before {
+  content: "Enter video:";
+}
+.ql-snow a {
+  color: #06c;
+}
+.ql-container.ql-snow {
+  border: 1px solid #ccc;
+}
diff --git a/src/assets/qunzu-3.svg b/src/assets/qunzu-3.svg
new file mode 100644
index 0000000..2f07882
--- /dev/null
+++ b/src/assets/qunzu-3.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0319 13.7089C12.7061 13.3831 12.2989 13.3017 11.8916 13.2202C10.9245 12.9785 9.79802 12.8962 9.06432 11.8687C9.04876 11.8469 9.03235 11.8255 9.01932 11.8021C8.9482 11.6744 8.76804 11.176 9.52969 10.2066C10.4255 9.06631 10.507 7.27454 10.2627 5.88993C10.0183 4.5053 8.79662 3.60938 7.41197 3.60938C6.10882 3.60938 4.88712 4.5053 4.6428 5.88993C4.39841 7.27454 4.47987 9.06631 5.37581 10.2066C6.18416 11.2354 5.93168 11.7338 5.87459 11.8214C5.8682 11.8312 5.86082 11.8404 5.85363 11.8496C5.04063 12.8952 3.98683 12.977 3.01378 13.2202C2.60653 13.3017 2.28077 13.4645 1.95502 13.7089C1.29882 14.1776 1.10117 14.9969 1.05162 15.6081C1.01509 16.0587 1.39727 16.3967 1.84932 16.3967H13.0562C13.5082 16.3967 13.8905 16.0591 13.8601 15.608C13.819 14.9968 13.6412 14.1776 13.0319 13.7089Z" fill="#C6C6CE"/>
+<path d="M18.1623 13.7089C17.7551 13.3831 17.3571 13.304 17.022 13.2202C16.0447 12.9759 13.7641 11.3469 14.6601 10.2066C15.556 9.06631 15.6375 7.27454 15.3931 5.88993C15.1488 4.5053 13.927 3.60938 12.5424 3.60938C11.9723 3.60938 11.4021 3.77229 10.9134 4.17952C11.2393 4.66823 11.4836 5.15681 11.565 5.72698C11.7138 6.62013 11.9308 8.6015 11.0969 10.2416C10.9416 10.5471 10.7778 10.9204 10.8643 11.252C10.9478 11.5718 11.2336 11.7567 11.5551 11.8337C11.8415 11.9024 12.1337 11.9438 12.298 11.9985C12.7867 12.1613 13.2754 12.3243 13.7641 12.6501C14.997 13.5405 15.1931 15.1221 15.1758 15.9902C15.1715 16.2067 15.34 16.3967 15.5565 16.3967H18.1865C18.6386 16.3967 19.0208 16.0591 18.9905 15.608C18.9493 14.9968 18.7716 14.1776 18.1623 13.7089Z" fill="#D8D8DF"/>
+</svg>
diff --git a/src/assets/readed.svg b/src/assets/readed.svg
new file mode 100644
index 0000000..9f359fc
--- /dev/null
+++ b/src/assets/readed.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9955 3.04247L7.00098 3.02734C4.23957 3.02734 2.00098 5.26592 2.00098 8.02734V20.1593C2.00098 20.8709 2.83541 21.2551 3.37611 20.7924L5.97762 18.9395L16.9955 18.9546C19.7569 18.9546 21.9955 16.7161 21.9955 13.9547V8.04247C21.9955 5.28105 19.7569 3.04247 16.9955 3.04247ZM16.9955 17.3546C16.9957 17.3546 16.996 17.3546 16.9962 17.3546C18.8737 17.3542 20.3955 15.8322 20.3955 13.9547V8.04247C20.3955 6.16469 18.8732 4.64248 16.9955 4.64248H16.9931L7.00098 4.62734C7.0006 4.62734 7.00023 4.62734 6.99985 4.62734C5.12262 4.62795 3.60098 6.14995 3.60098 8.02734V18.6679L5.04941 17.6363C5.32104 17.4428 5.64633 17.3391 5.97982 17.3395L16.9955 17.3546Z" fill="white"/>
+<path d="M7.99854 11.3398L9.8652 13.2065C10.307 13.6483 11.0234 13.6483 11.4652 13.2065L15.9985 8.67318" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/recvMsgOpt.svg b/src/assets/recvMsgOpt.svg
new file mode 100644
index 0000000..0c18fea
--- /dev/null
+++ b/src/assets/recvMsgOpt.svg
@@ -0,0 +1,11 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4602_63855)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6198 11.7008L13.198 11.3232L12.8974 11.0542L12.0219 10.2707L11.844 10.1114C11.8304 10.0657 11.8234 10.0178 11.8234 9.96926V7.56437C11.8234 6.74025 11.496 5.94989 10.9132 5.36715C10.3305 4.78441 9.54015 4.45703 8.71603 4.45703C7.86379 4.45703 7.09168 4.80013 6.53029 5.35573L5.78411 4.68791C6.52946 3.92827 7.56771 3.45703 8.71603 3.45703C9.80537 3.45703 10.8501 3.88977 11.6204 4.66004C12.3906 5.43032 12.8234 6.47503 12.8234 7.56437V9.76216L13.5069 10.4456C13.8396 10.7787 14.0263 11.23 14.0259 11.7008C14.0259 11.8153 14.015 11.9274 13.9943 12.0359L13.6198 11.7008ZM13.5138 12.9479L12.7666 12.2791C12.6296 12.4012 12.4491 12.4754 12.2512 12.4754H10.5191H6.91177H5.18084C4.75305 12.4754 4.40625 12.1281 4.40625 11.7003C4.40607 11.4948 4.48756 11.2977 4.63278 11.1523L5.46225 10.3228C5.55602 10.229 5.6087 10.1019 5.6087 9.96926V7.56437C5.6087 7.06243 5.72771 6.58828 5.93906 6.16861L5.17389 5.48379C4.81471 6.09397 4.6087 6.80511 4.6087 7.56437V9.76215L3.92546 10.4454C3.59275 10.7785 3.40584 11.2304 3.40625 11.7012C3.40625 12.6813 4.20076 13.4753 5.18084 13.4753H6.46618C6.69454 14.5072 7.61486 15.279 8.71544 15.279C9.81602 15.279 10.7363 14.5072 10.9647 13.4753H12.2512C12.7452 13.4753 13.192 13.2735 13.5138 12.9479ZM9.91979 13.4753H7.51109C7.70722 13.9472 8.17258 14.279 8.71544 14.279C9.2583 14.279 9.72366 13.9472 9.91979 13.4753Z" fill="#D1D1D3"/>
+<path d="M4.13672 5.20312L13.8258 13.8747" stroke="#D1D1D3" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4602_63855">
+<rect width="12" height="13" fill="white" transform="translate(2.90625 2.95703)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/reset.css b/src/assets/reset.css
new file mode 100644
index 0000000..7e0a6fe
--- /dev/null
+++ b/src/assets/reset.css
@@ -0,0 +1,12 @@
+:root:root {
+  --van-nav-bar-height:56px;
+  --van-nav-bar-icon-color:#1B1B22;
+  --van-nav-bar-arrow-size:14px;
+  --van-nav-bar-text-color:#1B1B22;
+  --van-nav-bar-title-font-size:1rem;
+  --van-padding-md: 1rem;
+}
+.search {
+  display: none !important;
+}
+
diff --git a/src/assets/right-small.svg b/src/assets/right-small.svg
new file mode 100644
index 0000000..c8be030
--- /dev/null
+++ b/src/assets/right-small.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66211 9.67969L7.31376 7.02804C7.60665 6.73514 7.60665 6.26027 7.31376 5.96738L4.66211 3.31573" stroke="white" stroke-opacity="0.35" stroke-width="1.125" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/right-small1.svg b/src/assets/right-small1.svg
new file mode 100644
index 0000000..2519fc8
--- /dev/null
+++ b/src/assets/right-small1.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.1875 12.2422L9.72303 8.70665C10.1136 8.31613 10.1136 7.68296 9.72303 7.29244L6.1875 3.75691" stroke="#D1D1D3" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/right-small2.svg b/src/assets/right-small2.svg
new file mode 100644
index 0000000..b2038dc
--- /dev/null
+++ b/src/assets/right-small2.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.39844 12.2422L9.93397 8.70665C10.3245 8.31613 10.3245 7.68296 9.93397 7.29244L6.39844 3.75691" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/right.svg b/src/assets/right.svg
new file mode 100644
index 0000000..3b589b9
--- /dev/null
+++ b/src/assets/right.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.18652 12.2422L9.72206 8.70665C10.1126 8.31613 10.1126 7.68296 9.72206 7.29244L6.18652 3.75691" stroke="white" stroke-opacity="0.35" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/s_file.svg b/src/assets/s_file.svg
new file mode 100644
index 0000000..efa8686
--- /dev/null
+++ b/src/assets/s_file.svg
@@ -0,0 +1,7 @@
+<svg width="63" height="61" viewBox="0 0 63 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.316406" y="0.832031" width="62" height="60" rx="16" fill="#F6F6F6"/>
+<rect x="0.566406" y="1.08203" width="61.5" height="59.5" rx="15.75" stroke="#545454" stroke-opacity="0.0476125" stroke-width="0.5"/>
+<rect x="17.3164" y="19.832" width="28" height="22" rx="5" stroke="#76767A" stroke-width="2"/>
+<path d="M23.6184 32.1056L17.7734 36.4893C17.4902 36.7017 17.3404 37.0479 17.3795 37.3997L17.7176 40.4425C17.7738 40.9489 18.2019 41.332 18.7114 41.332H43.8164C44.3687 41.332 44.8164 40.8843 44.8164 40.332V31.7158C44.8164 31.4687 44.725 31.2304 44.5597 31.0468L42.3721 28.6161C41.2448 27.3636 39.3074 27.285 38.0823 28.442L33.0529 33.192C32.0366 34.1518 30.4921 34.2825 29.329 33.5071L27.0825 32.0094C26.0241 31.3039 24.6359 31.3424 23.6184 32.1056Z" fill="#76767A"/>
+<circle cx="23.8164" cy="26.332" r="2.5" fill="#76767A"/>
+</svg>
diff --git a/src/assets/s_image.svg b/src/assets/s_image.svg
new file mode 100644
index 0000000..c1d86ab
--- /dev/null
+++ b/src/assets/s_image.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.832031" width="60" height="60" rx="16" fill="#F6F6F6"/>
+<rect x="0.25" y="1.08203" width="59.5" height="59.5" rx="15.75" stroke="#545454" stroke-opacity="0.0476125" stroke-width="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5417 22.3285H40.1016C42.2547 22.3285 44 24.0873 44 26.2561V38.9044C44 41.0732 42.2547 42.832 40.1022 42.832H19.8978C17.7448 42.8314 16 41.0732 16 38.9044V22.9032C16 20.655 17.8089 18.832 20.0408 18.832H25.3193C26.1125 18.832 26.8763 19.1326 27.4567 19.6733L29.4043 21.4873C29.9847 22.0279 30.7485 22.3285 31.5417 22.3285ZM21.2975 27.9281C20.7702 27.7638 20.2096 28.058 20.0453 28.5853C19.881 29.1126 20.1752 29.6732 20.7025 29.8375C26.7572 31.7243 33.2428 31.7243 39.2975 29.8375C39.8248 29.6732 40.119 29.1126 39.9547 28.5853C39.7904 28.058 39.2298 27.7638 38.7025 27.9281C33.0352 29.6941 26.9648 29.6941 21.2975 27.9281Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/safe.svg b/src/assets/safe.svg
new file mode 100644
index 0000000..1963a5d
--- /dev/null
+++ b/src/assets/safe.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66235 5.94246C3.63302 5.30494 4.12466 4.71626 4.82717 4.61772C7.18084 4.2876 9.25965 3.68063 10.8087 2.86497C11.5658 2.46631 12.6131 2.46631 13.3703 2.86497C14.9193 3.68063 16.9981 4.2876 19.3518 4.61772C20.0543 4.71626 20.5459 5.30494 20.5166 5.94246L20.1843 13.1672C19.7952 16.2958 17.5653 20.2009 12.3251 21.5293C12.1713 21.5683 12.0077 21.5683 11.8539 21.5293C6.61366 20.2009 4.3838 16.2958 3.99465 13.1672L3.66235 5.94246Z" stroke="#1B1B22" stroke-width="1.6" stroke-linejoin="round"/>
+<path d="M9.00586 11.6953L11.0617 13.7512L15.1734 9.63947" stroke="#1B1B22" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/search-icon.svg b/src/assets/search-icon.svg
new file mode 100644
index 0000000..e929d41
--- /dev/null
+++ b/src/assets/search-icon.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3044 11.0528C18.3044 14.9299 15.1614 18.073 11.2842 18.073C7.4071 18.073 4.26406 14.9299 4.26406 11.0528C4.26406 7.17566 7.4071 4.03262 11.2842 4.03262C15.1614 4.03262 18.3044 7.17566 18.3044 11.0528ZM16.71 17.7515C15.2284 18.9531 13.3404 19.673 11.2842 19.673C6.52345 19.673 2.66406 15.8136 2.66406 11.0528C2.66406 6.292 6.52345 2.43262 11.2842 2.43262C16.045 2.43262 19.9044 6.292 19.9044 11.0528C19.9044 13.1812 19.133 15.1295 17.8545 16.6333L21.0823 19.8611C21.3947 20.1735 21.3947 20.68 21.0823 20.9924C20.7699 21.3049 20.2633 21.3049 19.9509 20.9924L16.71 17.7515Z" fill="#A4A4A7"/>
+</svg>
diff --git a/src/assets/shanchu.png b/src/assets/shanchu.png
new file mode 100644
index 0000000..de35880
Binary files /dev/null and b/src/assets/shanchu.png differ
diff --git a/src/assets/shouqi.svg b/src/assets/shouqi.svg
new file mode 100644
index 0000000..3f23c40
--- /dev/null
+++ b/src/assets/shouqi.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="11" viewBox="0 0 22 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2357">
+<rect id="Rectangle 3463" x="0.5" y="0.5" width="21" height="10" rx="5" fill="#F8F8FB"/>
+<path id="Rectangle 2548" d="M13.8281 6.76758L11.7068 4.64626C11.3163 4.25573 10.6831 4.25573 10.2926 4.64626L8.17127 6.76758" stroke="#A4A4A7" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/src/assets/shouyebeijing.png b/src/assets/shouyebeijing.png
new file mode 100644
index 0000000..04cc712
Binary files /dev/null and b/src/assets/shouyebeijing.png differ
diff --git a/src/assets/star.svg b/src/assets/star.svg
new file mode 100644
index 0000000..0e34acf
--- /dev/null
+++ b/src/assets/star.svg
@@ -0,0 +1,12 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.17982 3.99219C2.06253 4.06913 2.09604 4.18882 2.09604 4.29995C2.09604 6.45432 2.09604 8.60869 2.09604 10.7631C2.09604 10.8657 2.05415 10.9939 2.1882 11.0623C3.026 10.6519 3.80516 10.1475 4.60108 9.67733C4.70162 9.62604 4.76864 9.532 4.80215 9.42086C4.87756 8.16414 4.86918 6.91597 4.80215 5.65926C4.76026 5.49682 4.64297 5.39424 4.5173 5.3002C4.29109 5.13776 4.03975 5.00953 3.79679 4.87274C3.26059 4.58207 2.76629 4.18882 2.17982 3.99219Z" fill="#51B8F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.75151 14.3389C7.86042 14.4073 7.96934 14.5954 8.14527 14.4415C8.23743 13.484 8.22905 12.518 8.14527 11.5519C8.06987 11.3468 7.90231 11.2442 7.73475 11.1501C6.87181 10.6628 6.02562 10.1413 5.17106 9.6455C5.02864 9.56001 4.89458 9.44033 4.71028 9.53437C3.85571 9.95327 3.05979 10.4662 2.23874 10.9535C2.20523 10.9706 2.20523 11.0219 2.18848 11.0646C4.04003 12.1504 5.89158 13.2447 7.75151 14.3389Z" fill="#00A6F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.68473 5.53343C4.81878 5.55053 4.92769 5.48214 5.04499 5.4223C5.95819 4.89225 6.86302 4.34511 7.77623 3.81507C7.92704 3.72103 8.0946 3.62699 8.15325 3.43891C8.22865 2.47286 8.23703 1.51537 8.14487 0.549321C8.00244 0.429634 7.91028 0.55787 7.80975 0.617714C6.92167 1.13921 6.02522 1.6436 5.14552 2.19074C4.16529 2.79773 3.11803 3.31067 2.17969 3.98605C2.22158 4.10574 2.33049 4.13993 2.42265 4.19978C3.17668 4.64433 3.9307 5.08888 4.68473 5.53343Z" fill="#83C9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14621 14.4326C8.47295 14.2445 8.80807 14.065 9.1432 13.8855C10.7434 12.9365 12.3352 11.979 13.9354 11.0301C13.9773 10.8163 13.8014 10.7736 13.6757 10.7052C13.3741 10.5342 13.0893 10.3376 12.7793 10.1752C12.3269 9.93578 11.9247 9.58527 11.422 9.45703C11.2628 9.45703 11.1372 9.54252 11.0031 9.61946C10.4921 9.90158 9.99776 10.2094 9.49507 10.5086C9.01753 10.7907 8.50646 11.0044 8.08756 11.3891C8.07918 11.4062 8.0708 11.4319 8.06243 11.449C8.05405 12.3124 8.05405 13.1759 8.05405 14.0393C8.05405 14.1761 8.01216 14.33 8.14621 14.4326Z" fill="#0090E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3972 9.54103C12.2685 9.97703 13.0979 10.4985 13.9273 11.02C14.0111 10.9431 13.9944 10.8405 13.9776 10.7379C13.9776 8.5237 13.9692 6.30094 13.9692 4.07818C13.5503 3.97559 13.3074 4.22351 13.1063 4.53983C13.1398 4.89034 12.7125 4.95019 12.6874 5.29215C12.6287 5.08697 12.5366 4.95873 12.3523 4.93309C12.0674 4.98438 11.7825 5.05277 11.6653 5.37764C11.6234 5.7367 11.2464 5.92478 11.2547 6.30094C11.2212 7.22424 11.2464 8.14754 11.2464 9.07083C11.2464 9.24181 11.2715 9.40425 11.3972 9.54103Z" fill="#00A6F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9851 4.08155C13.9851 3.93621 13.8511 3.91056 13.7757 3.85072C11.899 2.74789 10.0307 1.65361 8.15402 0.550781C8.01997 0.670468 8.06186 0.841449 8.06186 0.986784C8.06186 1.84169 8.06186 2.70515 8.06186 3.56005C8.07024 3.5857 8.07862 3.6028 8.087 3.6199C8.98345 4.22688 9.93855 4.73128 10.8685 5.28697C10.9523 5.33826 11.0444 5.35536 11.145 5.32971C11.2874 5.27842 11.3377 5.14163 11.3879 5.04759C11.4131 5.25277 11.4382 5.45795 11.7398 5.4323C11.8823 5.13308 12.1755 5.10744 12.4268 4.9963C12.075 4.56029 12.653 4.51755 12.6949 4.23543C12.829 4.42351 12.9044 4.63724 13.1557 4.58594C13.3819 4.32947 13.6584 4.16704 13.9851 4.08155Z" fill="#51B8F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.71808 9.53441C4.84375 9.6028 4.96942 9.66264 5.08672 9.73103C6.08371 10.3038 7.07232 10.8766 8.06093 11.4494L8.05255 11.4238C8.22011 11.2528 8.21173 11.039 8.21173 10.8253C8.21173 8.60255 8.21173 6.38834 8.21173 4.16558C8.21173 3.95185 8.20335 3.72958 8.05255 3.55859C6.888 4.14848 5.77372 4.81531 4.68457 5.53343C4.69295 6.86709 4.70133 8.19219 4.71808 9.53441Z" fill="#AFDAF9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.45447 11.2435C9.4347 10.6792 10.4149 10.115 11.3952 9.55077C11.3952 8.41373 11.3952 7.26816 11.3952 6.13113C11.3784 5.82336 10.9763 5.63528 11.1354 5.27622C10.7836 5.17363 10.5071 4.93426 10.1887 4.76328C9.47659 4.37002 8.81473 3.88272 8.05232 3.56641C8.05232 6.18242 8.04395 8.80699 8.04395 11.423C8.21151 11.4316 8.32042 11.3119 8.45447 11.2435Z" fill="#82C9F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7197 5.43087C12.8202 5.05471 13.0799 4.86663 13.3983 4.71274C13.2894 4.6529 13.214 4.6187 13.147 4.57596C12.904 4.48192 12.8537 4.20835 12.6694 4.01172C12.5521 4.37078 12.3343 4.59306 11.9824 4.69564C12.1248 4.83243 12.3175 4.84953 12.4181 4.99486C12.5186 5.13165 12.6108 5.27698 12.7197 5.43087Z" fill="#FAFCFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.61701C12.0233 5.49732 11.7887 5.48877 11.7384 5.42893C11.5457 5.35199 11.4954 5.12971 11.3614 4.98438C11.286 5.07841 11.2106 5.17245 11.1352 5.26649C11.1017 5.42038 10.909 5.40328 10.8252 5.56571C11.0933 5.6683 11.2106 5.93332 11.3949 6.1214C11.4619 5.90768 11.5708 5.72814 11.7803 5.61701Z" fill="#F7FBFE"/>
+</svg>
diff --git a/src/assets/svg/Frame 1500.svg b/src/assets/svg/Frame 1500.svg
new file mode 100644
index 0000000..29864cd
--- /dev/null
+++ b/src/assets/svg/Frame 1500.svg	
@@ -0,0 +1,8 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 1500">
+<g id="Group 1">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M1.97506 8.75607C4.22227 4.08954 8.85357 0.787455 14.2891 0.429688V8.79561C11.1963 9.26096 8.82506 11.9297 8.82506 15.1523C8.82506 18.3749 11.1963 21.0436 14.2891 21.509V29.8661C8.85361 29.5083 4.22233 26.2063 1.97511 21.5398H2.98062C4.88146 21.5398 6.42239 19.9989 6.42239 18.098V12.1978C6.42239 10.297 4.88146 8.75607 2.98062 8.75607H1.97506ZM23.0856 27.6615C21.0809 28.9158 18.7533 29.7017 16.2558 29.8661V21.5032C19.3302 21.0219 21.6822 18.3618 21.6822 15.1523C21.6822 11.9428 19.3302 9.28266 16.2558 8.80139V0.429688C21.6913 0.787456 26.3226 4.08953 28.5698 8.75604H27.5645C25.6637 8.75604 24.1227 10.297 24.1227 12.1978V18.098C24.1227 19.9988 25.6637 21.5398 27.5645 21.5398H28.5698C28.3342 22.0291 28.0723 22.5035 27.786 22.961L30.007 29.2552C30.1445 29.6448 29.7693 30.02 29.3797 29.8825L23.0856 27.6615ZM27.5645 10.7228H29.3476C29.7857 12.1174 30.0221 13.6013 30.0229 15.1403L30.0229 15.1479L30.0229 15.1555C30.0221 16.6945 29.7856 18.1784 29.3476 19.573H27.5645C26.7498 19.573 26.0894 18.9126 26.0894 18.098V12.1978C26.0894 11.3832 26.7498 10.7228 27.5645 10.7228ZM2.98062 19.5731H1.1973C0.766053 18.2 0.530165 16.7405 0.522217 15.227V15.0688C0.530165 13.5553 0.766043 12.0958 1.19727 10.7228H2.98062C3.79527 10.7228 4.45567 11.3832 4.45567 12.1978V18.098C4.45567 18.9127 3.79527 19.5731 2.98062 19.5731Z" fill="#1B1B22"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M15.2725 19.6484C17.7577 19.6484 19.7724 17.6337 19.7724 15.1484C19.7724 12.6632 17.7577 10.6484 15.2725 10.6484C12.7872 10.6484 10.7725 12.6632 10.7725 15.1484C10.7725 17.6337 12.7872 19.6484 15.2725 19.6484ZM12.8138 15.8859C13.2211 15.8859 13.5513 15.5557 13.5513 15.1484C13.5513 14.741 13.2211 14.4108 12.8138 14.4108C12.4064 14.4108 12.0762 14.741 12.0762 15.1484C12.0762 15.5557 12.4064 15.8859 12.8138 15.8859ZM15.2722 15.8859C15.6795 15.8859 16.0097 15.5557 16.0097 15.1484C16.0097 14.741 15.6795 14.4108 15.2722 14.4108C14.8649 14.4108 14.5347 14.741 14.5347 15.1484C14.5347 15.5557 14.8649 15.8859 15.2722 15.8859ZM18.4681 15.1484C18.4681 15.5557 18.1379 15.8859 17.7306 15.8859C17.3233 15.8859 16.9931 15.5557 16.9931 15.1484C16.9931 14.741 17.3233 14.4108 17.7306 14.4108C18.1379 14.4108 18.4681 14.741 18.4681 15.1484Z" fill="#6898E6"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/svg/Group56.svg b/src/assets/svg/Group56.svg
new file mode 100644
index 0000000..53e5a14
--- /dev/null
+++ b/src/assets/svg/Group56.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 56">
+<path id="Rectangle 2547" d="M3.93945 10L7.47499 13.5355C7.86551 13.9261 8.49868 13.9261 8.8892 13.5355L16.6674 5.75736" stroke="#0095F6" stroke-width="2" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/src/assets/svg/Group625882.svg b/src/assets/svg/Group625882.svg
new file mode 100644
index 0000000..c8aff28
--- /dev/null
+++ b/src/assets/svg/Group625882.svg
@@ -0,0 +1,8 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 625882">
+<g id="Group 2">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M25.8265 0.179688C15.8811 0.834589 7.40724 6.8832 3.29573 15.4312H5.13337C8.61108 15.4312 11.4303 18.2537 11.4303 21.7354V32.5425C11.4303 36.0242 8.61108 38.8467 5.13337 38.8467H3.29618C7.40786 47.3942 15.8815 53.4424 25.8265 54.0973V38.7091C20.2215 37.8432 15.9302 32.9928 15.9302 27.1389C15.9302 21.2851 20.2215 16.4347 25.8265 15.5688V0.179688ZM29.4247 54.0971V38.7088C35.0287 37.842 39.3189 32.992 39.3189 27.1389C39.3189 21.2858 35.0287 16.4359 29.4247 15.5691V0.179849C39.369 0.835585 47.8418 6.8839 51.953 15.4312H50.1113C46.6336 15.4312 43.8143 18.2537 43.8143 21.7354V32.5425C43.8143 36.0242 46.6336 38.8467 50.1113 38.8467H51.9526C51.5218 39.7421 51.0432 40.6101 50.5201 41.4473L54.5843 52.9783C54.8358 53.6918 54.1494 54.379 53.4367 54.1272L41.9197 50.0586C38.2522 52.3561 33.9938 53.7958 29.4247 54.0971ZM54.6091 27.485C54.5752 30.1854 54.1456 32.7903 53.3757 35.2443H50.1113C48.6208 35.2443 47.4126 34.0347 47.4126 32.5425V21.7354C47.4126 20.2432 48.6208 19.0336 50.1113 19.0336H53.376C54.1457 21.4873 54.5752 24.0919 54.6091 26.7919V27.485ZM0.637451 27.1385C0.637451 24.3147 1.07014 21.5922 1.87277 19.0336H5.13337C6.62382 19.0336 7.83206 20.2432 7.83206 21.7354V32.5425C7.83206 34.0347 6.62381 35.2443 5.13337 35.2443H1.87307C1.07025 32.6854 0.637451 29.9626 0.637451 27.1385Z" fill="white"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M35.7138 27.1405C35.7138 31.6169 32.089 35.2458 27.6177 35.2458C23.1463 35.2458 19.5216 31.6169 19.5216 27.1405C19.5216 22.664 23.1463 19.0352 27.6177 19.0352C32.089 19.0352 35.7138 22.664 35.7138 27.1405ZM27.6145 28.4899C28.3598 28.4899 28.9639 27.8851 28.9639 27.139C28.9639 26.3929 28.3598 25.7881 27.6145 25.7881C26.8693 25.7881 26.2652 26.3929 26.2652 27.139C26.2652 27.8851 26.8693 28.4899 27.6145 28.4899ZM23.1205 28.4901C23.8657 28.4901 24.4699 27.8853 24.4699 27.1392C24.4699 26.3931 23.8657 25.7883 23.1205 25.7883C22.3753 25.7883 21.7712 26.3931 21.7712 27.1392C21.7712 27.8853 22.3753 28.4901 23.1205 28.4901ZM33.464 27.139C33.464 27.8851 32.8599 28.4899 32.1147 28.4899C31.3694 28.4899 30.7653 27.8851 30.7653 27.139C30.7653 26.3929 31.3694 25.7881 32.1147 25.7881C32.8599 25.7881 33.464 26.3929 33.464 27.139Z" fill="#6898E6"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/svg/Union.svg b/src/assets/svg/Union.svg
new file mode 100644
index 0000000..6fac039
--- /dev/null
+++ b/src/assets/svg/Union.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M8.73047 15.1575C12.4418 15.1575 15.4505 12.1489 15.4505 8.4375C15.4505 4.72615 12.4418 1.7175 8.73047 1.7175C5.01912 1.7175 2.01047 4.72615 2.01047 8.4375C2.01047 12.1489 5.01912 15.1575 8.73047 15.1575ZM8.73047 16.4375C13.1487 16.4375 16.7305 12.8558 16.7305 8.4375C16.7305 4.01922 13.1487 0.4375 8.73047 0.4375C4.31219 0.4375 0.730469 4.01922 0.730469 8.4375C0.730469 12.8558 4.31219 16.4375 8.73047 16.4375ZM8.73047 3.63344C9.08393 3.63344 9.37047 3.91998 9.37047 4.27344V9.2291C9.37047 9.58256 9.08393 9.8691 8.73047 9.8691C8.37701 9.8691 8.09047 9.58256 8.09047 9.2291V4.27344C8.09047 3.91998 8.37701 3.63344 8.73047 3.63344ZM8.73148 13.2169C9.26168 13.2169 9.69148 12.7871 9.69148 12.2569C9.69148 11.7267 9.26168 11.2969 8.73148 11.2969C8.20129 11.2969 7.77148 11.7267 7.77148 12.2569C7.77148 12.7871 8.20129 13.2169 8.73148 13.2169Z" fill="#1B1B22" fill-opacity="0.26"/>
+</svg>
diff --git a/src/assets/svg/apply-withdraw.svg b/src/assets/svg/apply-withdraw.svg
new file mode 100644
index 0000000..eb25387
--- /dev/null
+++ b/src/assets/svg/apply-withdraw.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C5.79086 3 4 4.79086 4 7V17C4 19.2091 5.79086 21 8 21H16C18.2091 21 20 19.2091 20 17V7C20 4.79086 18.2091 3 16 3H8ZM8 5C6.89543 5 6 5.89543 6 7V17C6 18.1046 6.89543 19 8 19H16C17.1046 19 18 18.1046 18 17V7C18 5.89543 17.1046 5 16 5H8Z" fill="#1B1B22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11H13C13.5523 11 14 10.5523 14 10C14 9.44772 13.5523 9 13 9H9ZM9 13C8.44772 13 8 13.4477 8 14C8 14.5523 8.44772 15 9 15H15C15.5523 15 16 14.5523 16 14C16 13.4477 15.5523 13 15 13H9Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/arrow-r.svg b/src/assets/svg/arrow-r.svg
new file mode 100644
index 0000000..cc6c60e
--- /dev/null
+++ b/src/assets/svg/arrow-r.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.10932 13.4997C4.83596 13.2263 4.83596 12.7831 5.10932 12.5097L9.3315 8.28753C9.48771 8.13132 9.48771 7.87805 9.3315 7.72184L5.10932 3.49966C4.83596 3.22629 4.83596 2.78308 5.10932 2.50971C5.38269 2.23635 5.8259 2.23635 6.09927 2.50971L10.7457 7.15616C11.2143 7.62479 11.2143 8.38459 10.7457 8.85322L6.09927 13.4997C5.8259 13.773 5.38269 13.773 5.10932 13.4997Z" fill="black"/>
+</svg>
diff --git a/src/assets/svg/avatar-bg.svg b/src/assets/svg/avatar-bg.svg
new file mode 100644
index 0000000..2241c43
--- /dev/null
+++ b/src/assets/svg/avatar-bg.svg
@@ -0,0 +1,8 @@
+<svg width="168" height="168" viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_8072_95569" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="168" height="168">
+<rect width="168" height="168" rx="84" fill="#FFEDD0"/>
+</mask>
+<g mask="url(#mask0_8072_95569)">
+<rect width="168" height="168" rx="84" fill="#F5F5F5"/>
+</g>
+</svg>
diff --git a/src/assets/svg/banner-close.svg b/src/assets/svg/banner-close.svg
new file mode 100644
index 0000000..42d7184
--- /dev/null
+++ b/src/assets/svg/banner-close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7071 7.20711C19.0976 6.81658 19.0976 6.18342 18.7071 5.79289C18.3166 5.40237 17.6834 5.40237 17.2929 5.79289L12 11.0858L6.70711 5.79289C6.31658 5.40237 5.68342 5.40237 5.29289 5.79289C4.90237 6.18342 4.90237 6.81658 5.29289 7.20711L10.5858 12.5L5.29289 17.7929C4.90237 18.1834 4.90237 18.8166 5.29289 19.2071C5.68342 19.5976 6.31658 19.5976 6.70711 19.2071L12 13.9142L17.2929 19.2071C17.6834 19.5976 18.3166 19.5976 18.7071 19.2071C19.0976 18.8166 19.0976 18.1834 18.7071 17.7929L13.4142 12.5L18.7071 7.20711Z" fill="#1C1C1C"/>
+</svg>
diff --git a/src/assets/svg/banner-logo.svg b/src/assets/svg/banner-logo.svg
new file mode 100644
index 0000000..3c222aa
--- /dev/null
+++ b/src/assets/svg/banner-logo.svg
@@ -0,0 +1,9 @@
+<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="47" height="47" rx="8" fill="url(#pattern0_11607_226426)"/>
+<defs>
+<pattern id="pattern0_11607_226426" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_11607_226426" transform="translate(-1.07252 -2.22892) scale(0.00911017)"/>
+</pattern>
+<image id="image0_11607_226426" width="590" height="1280" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk4AAAUACAYAAACxrN1nAAAACXBIWXMAAA7EAAAOxAGVKw4bAAGW4UlEQVR4nOzdd5gc5ZXo/2+lzt2TNEFhNMoJSYAywiQBIi0OYJIxzjjsdVh77fVvvXs33PXGu969Xnu9DuuAjSMsNgZjm2SMCcJkEEhCOY1Gk2c6d6XfH9VvTc8otS0MSJzP88yDmOlQXd1ddeq85z2v5vu+jxBCCCGEOCb91d4AIYQQQogThQROQgghhBB1ksBJCCGEEKJOEjgJIYQQQtRJAichhBBCiDpJ4CSEEEIIUScJnIQQQggh6iSBkxBCCCFEnSRwEkIIIYSokwROQgghhBB1ksBJCCGEEKJOEjgJIYQQQtRJAichhBBCiDpJ4CSEEEIIUScJnIQQQggh6iSBkxBCCCFEnSRwEkIIIYSokwROQgghhBB1ksBJCCGEEKJOEjgJIYQQQtRJAichhBBCiDpJ4CSEEEIIUScJnIQQQggh6iSBkxBCCPF78H1/3P97njfud67rHnL72r9PvP/Evx+L53lH3K6Jz/2HpLb7d93+E5Xmvx5epRBCCPEHogImwzDG/b729Kpp2mHvp2naYf/m+/5hf3+4x3BdF03TME3z99j635/neej66y//IoGTEEII8XuoJ7g52ilW/W1i8KQyN79PUFL7mK8E3/fxPC/Mfum6jq7rr9jzvxokcBJCCCF+T+oUWjtUpWnaIdknZWKW5nCBTr2BkwpaNE0Lb3u0LNYryXXdI+6DE93rL8f2B6DGkw8Xg6o0quI4Tng713WPOA5d+/sjjR2rCN/zvHGPWygUDtm2ifcBsG07/He5XB73t1dyfFwIIU5kKhgyDAPTNDEMIzz2Oo4z7niq6/q4Y78KciYO69UT+Kjb1dZWqWzPxLqjw/0cL9u2w3OfOtepxz1ZgyaQjNPLQqUp1fiy2qWVSgXLsg65ulBfmkgkEn45KpUKkUjkdx4zdl03/KLYto1lWYdsW+3Ye21K1TCMcV/Oia9DCCHEkVUqFXRdD4+ZnueRy+UolUr4vk8sFsO2bTRNIx6Pk0gkxt1/Yrbpdx1mcxxn3PG6WCxSqVRwXRfP8yiXy0e9//FmpeLxOPF4nFgsFv5OBU9Hy7qd6CRwOg6HC3JU1G2a5iFBCXDEoEhF7FB/pK4CM03Twi9QqVQiGo3iOE54BQSExYMTn9+2bTzPIxqNjtt+3/eJRCJ1bYcQQrxejYyMsGnTJjZu3MgzzzzDxo0b2bNnD7lcjkqlQjKZZMqUKcybN49FixaxdOlSlixZwowZMyiVShiGEV7w1g711RvUeJ5HX18fu3btoru7m1wuR7lcxrbtP/hFsK7rJBIJWltbmT59Op2dncTjcaD+4vYTkQROx+FYHwzP89i8eTPbt2+nWCyi6zrpdJo5c+Ywe/ZsbNvG931M00TX9XGPd6xxanXbcrmM4zhEIhGKxSKDg4NMnz4dXdfHZaBqg7yhoSG6u7vZv38/+XyeQqFAQ0MDixYtYtasWcDJPT4thBAvhy9+8Yts2LCBX//61+zbtw8gPOaqC1CV2VflFM3NzSxZsoRFixbxj//4j0SjUaLR6LhjPxz5InuiPXv2sHHjRg4cOEAmk6Grq4uGhgZc1z1kBOLlViqV2LNnDwcOHCCRSLBgwQLmzp1LKpUKEwgnIwmcjlPteLEKNMrlMnv37uULX/gCTz/9NM8++yyjo6MAtLa2snLlSlatWsWnP/3pMMWpMk6GYYRB09GuPNTf9u7dy4c+9CF++9vf0tLSQj6fp6Wlhf/5n/9h1qxZ44byPM/j2Wef5cc//jG/+tWvePzxx8Px97a2Ns4880zWrVvHOeecw5IlS165nSiEEK9Rqoa0NgN/yy238MUvfpHf/OY34ZBcqVQCghEDleEHxhV5RyIRSqVSOIzV1NTE9ddfz5//+Z/T1tYWPv7Ei+jawu/af3uexze+8Q00TWP9+vVMnz4dTdM4ePAgjY2NOI5z1NcWj8cZGhoKy0YsywpHLHzfP2bgpbYzn8/z/PPP88ILL9DV1cUFF1xw2NvVvq6Jw4wnkhNzq19jdF0f9wF9+umn+c53vsN//dd/hV+qtrY2KpUKfX193HXXXfzmN7/Btm3e+c53MnPmzHEf0pGREZqamsYNr02ccQHBUN2Pf/xjHnzwQbLZLIODg7iuSzabPWzm6IknnuCrX/0q//M//8Pw8DCappHJZLBtm97eXn784x/z2GOPceDAAaZPn05DQ8MrtQuFEOI1J5/Pk0wmwxN8T08P//zP/8yPfvQjuru7aWxsZHh4OAyaTNMklUqRTCaJxWJhPWuhUAhrn9Qx3fd9BgYG+O///m82bNjAJz7xCS677DISiQSaplEoFA6piarleR4bNmwgHo+zbt06pk6dyt13381tt93Gr371K4rFYpgFOxLLsrAsi9bWVmbMmMF5553HVVddxcKFC4/YXLOWOi8lEgmmT5/OyMgIhUKBwcFBmpubx1241253bV3YiejE3fLXgNroX30ISqUSjz32GF/60pfQdZ158+ZxzTXX8MY3vpHh4WG+/e1vc+eddzI4OMi//uu/ctZZZzF37lwgqDd66qmnuOuuu0gmk3z84x8Hjlww+NJLL/FP//RPZLNZFi9ezO7du8nlcqTTacrlMtFoNNyu/v5+7rzzTr797W9j2zbLli3jT/7kT5g7dy69vb3cdttt3H777XR3d3P//fezbNkyrrzyyldkPwohxGtR7YSfX//613zrW9/iW9/6FgDJZJJsNks0GmXGjBmsWbOG5cuXc9ppp7Fw4UISiQSJRIJcLsfOnTvZt28fDz74IBs2bOCpp54KRyFKpRIbNmzgr/7qrzhw4ADve9/7sCzrqEETBBfFe/bsIZPJMHXqVH7961/zuc99jgceeIBKpVLX61PZtF27drFr1y527NhBqVTi3e9+d3heOhZ1cT558mSGhoZ46qmn2Lt3L83NzePKPWrreE/4xpm+OG62bfuO4/i+7/s9PT3+pEmTfMMw/Fgs5v/iF78Ib+P7vj84OOi/613v8jVN81OplH/dddf5vu/7nuf5u3fv9k855RQf8AH/U5/6lO+6bvh33/f9YrEYPt4111zjA/7cuXP9//mf//GnT5/uA/7MmTP9UqkU3tf3fT+bzfrNzc0+4CeTSf/RRx8Nt9n3fX/fvn3+Nddc40ciET8Wi/kf+MAH/sB7TQghXvvK5bI/MDDgv//97w+Pn5MnT/YBf86cOf4nP/lJ/6GHHvIrlYrv+374X3Vf3/d913V9x3H8SqXi9/b2+t/4xjf8t7zlLeF5oKGhwQf82bNn+3feeafv+75fKpV83x879tf+23VdP5fL+d///vf93/72t77jOP773ve+8NzR1NTkT5o0ydd1/ag/0WjUTyQSfiQS8Q3D8AF/1qxZ/re//e2690/t6923b5//9a9/3X/wwQcP2WbP88Jzkuu6485PJxrJOB0HVXytrkps22bfvn1omobrulx//fXMmDEDCMZzNU2jqamJhQsXEo1GyeVyZLNZKpUKmqYRiUTC7FIikcA0TYrFItFoNEx3qnH2H/3oR9xzzz2k02kuvvhiOjs7wwhebZf6/3K5zMaNG3Ech8bGRtasWcOpp56KYRhks1nS6TRTp05lyZIl/PCHPySdTh8zxSuEEK8Huq4Tj8dZsWIFd999N7t27cJ1Xc455xz+8i//krPOOotoNIrv+/T397Njxw66u7sZGBggn8+TSqXo6uqiq6uL2bNn09rayrXXXsu6des4/fTT+fKXv8zBgwcxDIMzzzyTRYsWAYQznQ/H931s22ZkZIREIoHv+zzzzDNAUGM1Ojpady++QqGApmm0tLTQ39/Prl272Lx5c91ZIdM0w/OWGqJUtm7dSiwWY+rUqeOG7HRdr2so8LVKAqfjYFlW+Obbtk00GmX58uXcdtttNDY20t/fz/z58wHGFX4nk8nwAzRlypSwpUAsFuPUU0+lp6cHXdc544wzwvHu2pkWzzzzDP/5n//J4OAgV111FX/8x39Me3t7WHBYKBTCD32lUiEajbJmzRruvPNOIpEIhmGEX8p0Ok2pVCIWi5HJZLAsi2w2S2tr66uwR4UQ4rVFNbW88cYbcV2Xr371qyxdupS///u/Z/Lkyfi+zwMPPMDtt9/OU089xbZt2+jt7Q3rXi3LIpPJEIvFOOecc3jzm9/MxRdfTFdXF3/2Z3/GrFmz+NznPsfChQv567/+azo6OoCxIbAjrXHnOE54QW7bNrt27cIwjDAosSzrmMXhlmVRLpfxfZ9KpRKeo3K5XN1DabXF3pFIJLy4t22bxx9/nEQiQSwWo7W1dVzN7Yk8VCeB03Hyq7PpamdcnH766SSTyXEfWvXh2rNnD/fff384c+7UU08NiwAbGxv52te+xujoKKlUatyMOr86cy+bzfLDH/6QDRs20NDQwPnnn8+CBQvo7++nWCyGVxm1hXcqA7V69epwO1XRoq7rxGIxduzYwb333ovrunR0dLB27do/+L4TQojXOk3TKBaLxONx3vnOd3LhhRfS2tpKJpNh37593HnnneExWRWJQxBwxeNxisUiAwMDAPzgBz9gw4YNPPTQQ6xfv57LLruM6667jrPPPpt4PM6kSZPGdQCvpX6v/u26LslkMgxWhoaGxnUkr80EHUkulwufq1wuh/fNZrN1zXrza+pvVd9A1S3drxa/7927l+nTp9Pa2jquT5Xvn7h9niRwepmoDt0qowRjwUu5XCYej5PP5/n617/Oo48+Srlc5vzzz+fcc88Nb6+apamgyzTN8KpCTRd98MEHuf322/E8j+uvv55zzjkHCHozqaxUbe+m2oDO9/3wcdUVSywWo1gs8s1vfpP77rsPz/O48MILD5lOKoQQr0e+7xOPx6lUKsTjcWbPnk2lUqGnp4fPfvaz3H777fT09GAYRpidUt27VWCiaRoNDQ0MDw+zY8cOvvrVr3L//ffT0NDAqlWrwqEsdQz3j7FOnTrXqE7hKmBRGap6uoYDYQ9BILy92o56Zr2pshSV6VL9A/1qA+XGxkZ6e3vD81PtY6pRmBORBE7H4Wjr8tQOrUWjUUqlEj/4wQ/4/Oc/Tz6fp6uri8985jPhUJ5agkUNmylqzSNd1+nt7eWb3/wmmzZtYtasWfzxH/8xCxYsAAiH+hQ1qw7G+mWoNZRgbBpqsVjkq1/9Kl/+8pfJ5/OsWLGCSy65hJkzZ/6B9poQQoxXm32oNxNRT+ainsdVw10Tj+G12RQYf4wvlUrk83luvfVWBgcHw/XnLMvitNNOY9myZTQ1NdHY2Mjg4CCbNm3i4YcfDkcRSqUS27Zt44477qCrq4vOzs7wOD+xtqg2IKqtq/V9n2g0Gq72oIKYVCqFbduUy+VjDoepi+faIEsN89WrdpFhtU35fD78m+M4pFIpdF0fd347UYMmkMDpuNS+8aq9veqWqj6w2WyWWCzGF7/4Rb71rW+RzWaZO3cuH/vYxzj33HPxPG9cQzSVIVKRuWpKVi6X+cEPfsC9995LOp3mne98J/PmzQufWz3f4a4Wah+r9ktZKBT42te+xhe+8AVGRkaYM2cOH/7wh7nooov+wHtOCCHGggI1hKNOvioQqF3EtnbxWnXfiUtbwVj2H8aO0ep3tU0lVUZ+Yp+hiY+ltqk2QFClFJ/5zGf493//d/bt28e6deu46KKLuOSSS1iyZEkYJJTLZSqVCs899xxf//rX+dGPfoTruqxcuZL3ve99dHZ2jlu/FMaG4iZmfWq30zCMcMkWldHK5XJhjasasTiW2h5Uaqiu3qCmNsiq7dlkGEa4cPyCBQuYNm1a+Bzq9UnG6XVKZXLUF1J9YNSXzXEc0uk0t9xyC1/+8pfZvn07DQ0NfPjDH+b9739/eBsVgatx9NqxZdWP4+DBg9x8882Mjo6yatUqPvrRj2JZVngFEovFwoNDbQFe7Rd/4tXHD37wg3C72tra+PjHP84111xDJBI57ILBQgjxh1B7bFJDPoqqI1VU8HCkoaTD1QZNXKfzSP+uNTELpY6j6liaSqX4xCc+QSQSYdOmTVx//fWsXbs2rPExDIOhoSEaGhrwPI8zzzyThQsXMmvWLIaGhvjABz7AnDlzgGCEoPZ4q2nauAveia9d/T2RSGAYBsVikUQiwcjISPh6/OpyXseizjcqU6TrOpFIJHwNR6OCJRhb57RcLtPe3k40GmXRokW0tbWFBe/17PcTgQROx2nilY3q+JpMJjEMg6985Sv83//7f9m+fTvz58/nYx/7GFddddW4RR2VeDzOAw88wM9//nMAPvGJT9De3k65XOY73/kOTz/9NAAzZ87klltuCVfczufzHDx4MDxAJBIJ/uIv/oJ4PM4NN9wQtioYGRmhoaGBUqnErbfeyp//+Z/T29vLrFmz+PSnP831118fBmCWZR02zX2iXykIIV6bisViGCT51ZUUameVua5LpVIJj5lqfbfaNiwqw6IyH7XZfwguRNUC6KrWs57FzFUQpS5M1XPYts173vMeyuUyTU1N2LbNj3/8Y37+85+zYcMGBgcHueCCC1i6dCnr1q1j5cqV/OVf/iXDw8OkUqlw1nM8Hj9kiZXDFWfXBk5qu3O5HJFIhOXLl3PXXXeFReOu644rVj/aa9N1nUKhAEBXVxcLFy6sK+iqnVluWRb5fJ58Ph9u27Jly8JzSe1Q5O+yiPFrkQROx6E22wRjxdfJZJJischNN93E17/+dbZv387ChQv58Ic/zNVXX01LS8u4KB+CL/S+ffv4sz/7Mx5//HEymQzxeJy/+Iu/IBqNMjIyEh4UfvnLX/LDH/5w3La0trbS19cHwL59+/j6179ONptl7dq1TJkyBd/3aWhoIJvNctNNN/GVr3yF3t5e1qxZww033MBll10WFqnXfjnV66rNqgkhxMtBHU/Usk+5XC4MaBKJBF1dXeGJdnBwkMHBwXDGVjKZpKurK3ysXC7H4OBgWK+jaRqzZ88OT+LZbJb+/v6wYNuyLCZPnhwGV7WZenW8U0N6KnCqDaBqgxf1+N/85jf53Oc+x/79+8MA63vf+x7f+973uOaaa/j0pz/NokWLyGQy45YdqT2u1g5nTRwpqL2dqnXau3cvy5Yt4wMf+AA9PT08/vjjFIvFcLuPRj2+KuhuamoK+0upvx/r/SuVSmGXc7Xu3aRJk6hUKmFvQsdxwmSBOo+cyAvJS+D0MqgtIlQF1z/96U/5u7/7O7q7u5kzZw4f//jHufbaa0mn0+Ht1TpIqpC7qakp/FKXy2UOHjxIoVCgoaGBaDTKtGnTwoK/RCJBJpPB933K5TKZTCZcf862bRKJRNhbSn1Abdvmrrvu4itf+QobN25k1qxZ3HDDDbz73e8mHo+H4+xqhoR6TROd6FNJhRCvDbXDPLlcLjzxuq6LbdvA2DEon88zNDQEjLVTUTOWVa3o6OgoxWIxHO4rFothYKT+nsvlwmN1Y2MjyWQyHIZTJg7vqQBKZbLUNqnyikgkQjabDe/rui7xeJx0Oh0Ge2pb1SK6qg7pSHVFKlMzcZtq/75w4UKefvpp9u7dy0UXXURfXx+33HILmzdvpre3l2KxeNT9r547k8kwZcoUzj33XN7xjnewZs2acfv+SHzfHxc0vfTSS0SjUVpbW4lEIofM9K4d2juRzx8SOB2H2oi5Nq36ne98h2984xv09PTQ0tLCOeecw8KFC+nt7eX5559H0zTa2trCIEh1F9d1nQsuuCAcs37Xu95FKpUC4N3vfjdXXnll+EFMpVJhartYLLJ9+3b+z//5P+zZs4cFCxbwt3/7t6TTac4888xwW7///e/zta99jY0bNxKPx7nyyitZvHgxw8PDbNu2LewnpVofdHZ2hunwiR/yE/lDL4R4bamduRaNRsfNCKsdwlJZHtu2w6yFysyoIEPNIFa9idQxVP09EomEf1fBWe3fJ/5bBWG1BeLqNqo+1XVd0uk0b3/728nn83z1q19l165dlEolfN/n+uuv59Of/nS4/lvtMNjEgKlUKoUjF0djGAbt7e1EIhGefPJJzj//fN7+9rfzxje+kR07doRDeEcTi8XCyUmZTIa2traw+fHo6CiZTOao91dGRkbYvHkzAwMDdHR0hJmm2myZOnfVdg8/UWn+sXJx4ohqC6hVv6VcLsfZZ5/Npk2bwvHcWCxGR0cHrusyMjISXmmoVam///3vs3jx4vCqqKenB9M0mTp16iEz4WB8qwMVvL3wwgtcdtll7N69m2XLlvHkk0+GmaxKpcL+/fu5/PLLeeGFF8IlBBzHCcfls9kskUgkXKolFovx3HPPkUqlDukFBRI4CSFeHo7jYNt2ePGWSqXCOpnTTjstvN3WrVsZGBggkUiEs8lOOeUUYrEYvu9z4MABDh48OG6WcVdXVxgI9PT00N3dHRY9e55Ha2sr06ZNC2egqYBG/btYLIarLcD4rM/EoSY1iy6bzfLv//7v/PM//zOlUonzzjuPv/qrv+Lss88+JLtUO3lH1TvVPs+R2inU/nvLli08+uij6LrOtGnTWLhwIZVKhYaGhrqWXVHLeqVSKcrlMoVCIVxkWNU9HUmpVGJgYICtW7cyMjJCZ2cnZ5xxBplMZtx+VturXnculwsD2hORZJyOgwqaVICiPvz9/f1hQFIsFimVSuzatQsYa9+fy+XCsfLW1lY0TQtn2HV1dR3SWAyCD/jELuW2bYe3Ub0yCoUCg4ODNDc3UywWw5RvX18f0WiUSZMmsX//fqLRKH19feG0V9d1yefzYe3V0dLEQgjxclDHntbWVgYHB6lUKmQyGZLJZHjcURd5nudRKBTCIa/arFQmk6FYLDIyMoKmaUSjUZqbm4EgQInH4zQ1NZHNZsOi8OnTp4d/r61dUgFUPB4ft60T2wHAWAClsjfpdJqPfOQjtLW1cfvtt/MP//APnH766Yet6and/tq16SbWmR7t37NnzyYWi7F582Z27tzJ1q1bwzYNf+j14NS5r729nVNOOYXOzs4wIFL78HB1TCdy0ASScTpuKtOkUralUol/+Zd/wTTNsNYonU7jui7ZbDYMSiqVShjUfPKTnzzkS1jb4RsOTWuqbJe63eDgID/4wQ/CRXtvvPFGLMsKC/Rs2+bf/u3fgOBg0N3dHW6XaZphXUG5XCYWi9HU1MR1111HIpEIM1tH63cihBDHw/O8cNZc7eLpirowrZ1xp2bI1U7Bh/FF57W9ntTQXm2HbeVwwcqxVCqV8PnV0J9aeiSbzZLL5Zg8eTIQnBvUuqQv1zBV7aiHaspZLpcpFothrdcfUlNTU9h8OZ1Oj8vMHav7+YlMAqfjMHEIrXYWQe0XVQUctbc/XK+l2t/Xpo1rWwAcrjFabbG5qn1SmS2VBtY0bVx69HArX6vUqtr22j5V6gBUWyx5sn4phBCvDNW1+0jBRL2lAYc7HtVzjJpYd1PPcx1O7fFcFaSrgEa1QFBF1Gq7Xo5eeUfrjF5b9/WHUnt+qX1eOLnLOSRwEkII8aqamFk/Wr84dfHoOE44eUX9vvZ0VjupZWLZgfqZ+Pi/68leXVzWZpqAsOC6tgRDBRm1U/NfDrUz/l6ti1m1f1U906u5La8ECZyEEEKckI5VQnCsZosTA63fValUCmfxqec7UsCgZvAdbpmYl1ttcfkf0smcVToaKQ4XQgjxqlCZmtrgp3aoZ+KadROHgWpratTvVbbqcIvV1ja0fDlqjWKx2LiWBqqGSr0e1TZBbe/ECUUvl9osWm0m7Q8d2KimzGpfvl4CKck4CSGEeFX8PrWSE7NERytEfiVmA6vp/Gp7VMA3sba1dlterrVAJxa/K2rduFdrvdGTfWmuk3cQUgghxGvaxMV8J17Hq5qZWrUZqNp149TtVdZH3fZwj61O7MdLdQhXzTZVBqa2UaZaqF1loGD8Gm/HQ83SU3VftbVi9aw193Kq3ce1PZtORpJxEkIIIYSok2SchBBCCCHqJIGTEEIIIUSdJHASQgghhKiTBE5CCCGEEHWSwEkIIYQQok4SOAkhhBBC1EkCJyGEEEKIOkngJIQQQghRJwmchBBCCCHqJIGTEEIIIUSdJHASQgghhKiTBE5CCCGEEHWSwEkIIYQQok4SOAkhhBBC1EkCJyGEEEKIOkngJIQQQghRJwmchBBCCCHqJIGTEEIIIUSdJHASQgghhKiTBE5CCCGEEHWSwEkIIYQQok4SOAkhhBBC1EkCJyGEEEKIOpn+q70FQgghhBAnCG3K1C6JnYQQQggh6mAWCoVXexuEEEIIIU4IpqZpr/Y2CCGEEEKcEExfBuqEEEIIIeoiGSchhBBCiDqZvqSchBBCCCHqIhknIYQQQog6SQNMIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ1MfImdhBBCCCHqIVGTEEIIIUSdJHASQgghhKiTBE5CCCGEEHUy0bxXexteZcfbOV0aiAohhBCvF5JxEkIIIYSok/lqb8CrTzJGQgghhKiPZJyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJPUOB1v5/TX/axEIYQQ4vVDMk5CCCGEEHV6XQROkUgEwzBwXRfP89A0DU0LZtOZhobrVPBcG0MHXfPBd9Hw0PAwDQ3fc8B3sUydYiFHxDKwKyXSqQSapqHrOoZhoOvB7vR9H98/3v5QQgghhHitOekDp1gsRqFQoFQqYZomhmGEQY3ruhiGgWVZmKaJ7/vjfgdQKBTQNA3f94nH4zQ3NxOLxSiXy+zbtw/P8yiXy7iui+u6VCoVNE0jEongOM6r+dKFEEII8TI76QOnkZERPM8jkUgQjUbDjJNpmtWAyAN8bLtCoZDH9z1SqSSmaTA4NICua0ya1IJtV+ju3k/3gf309/cxaVILc+bMDjNXlUoFCAI1z/OoVCrE4/FX8ZULIYQQ4uV20heHm6ZJPB7H8zxGRkbQdZ1EIoHv+9i2zcjwEO1t7cyePZspU6Ywb948ZsyYwbZt27jjjjtYuXIl69evZ+/evezatYvnnnuOAwcOkM1mOdBzgHSmgXQ6TalUwnVdkskk5XKZQqFALBZ7tV++EEIIIV5GJ33gFIlE8H2fQqGAYRhkMhkKhQK5XI5UKsXaM1axevVqzj33XObPn09n51QAbrrpO3zzW19n7rzZvO36a9F1ndHRUbZs2cLjjz/Offfdx/3334/jONi2jWEYOI5DsVgkEokQj8fJZrNEIpFXeQ8IIYQQ4uVy0gdO5XIZXdexLItoNEqxWGR4eJh58+bxpje9iQ//rw/S0dGBZRm4ro/rjtU/OY5Db28vnudhWQZNTQ2sWbOK008/nXXr1vHcc8/xr5/7f2zatAnXdclkMhSLRRzHkWE6IYQQ4iR00gdO0WgUAM/zyGaz+L7PypUrec973sN1111HLGpiWQYAjuNgGAamqZNMJmlpaSGZTBKNBoXi+XyQTYpGLU45ZSHz58+nWLK55ZZbePzxx/F9n0gkQqVSoVwuh/VOQgghhDg5nPTF4WqmnOu6aJrGkiVL+PjHP8773vdu0ukYkYiJ6/o4joeu65hmsEuKxSKjo6O4rovqLBDMtguCLNf1MU2dd7/77Xz4wx9m8eLF5HI5IpEImUwmnGknhBBCiJPHSRg4+eN+8tksyXgcu1xmcns7n/zTP+Hqq67A0MGxXWCUSrEbU9exMMAl+NE0zIiGZjigOXgeRKMRfB9KJdANFx8H34XLLrmQv/+7v+O8c87hYM8BkvE4iViMQi6H4zjEYrEweDMMI+wjZds2Q4MDZFIpYpEIxXweQ9OwDAOnUsHUdUzdIBaJ4lRsIqaFazvkszlSiSSaD+ViEc9xwue0y2XKxSKGphMxLTQfLMMkYlrY5QqWEcHQTAzNxHcJnydqRSgVijSkM3iOi+e4WIaJU3FJJdI4FRen4uI5PvFoAs3Xqz+A56P5YOoGhqbjux6e44LnY+oG2ZFRUokkOho6Gq7tYGg6nhMMh/q+j+cFgaumaWHAqfaT53nh33Vdx/O8cUGp4zg4jkOlUiEajaDrGpoGruugaVAo5Mce19fxPQ3TiOG5J+HHXwghxB/UST9U19raysGDB2lra+P9738/69evR9fBtl0sy8B3bOKpNHhgV8D1wbLAsixKpRK2beO4DngmmgaGAare23EdcA10XWPhwoW8613v4sCBA2zatAnTNJk1axYHDh4MhwCBMAhQNVezZ57Kzp07Gc2OkklnSCaTuK6LbdsUi0VKpTKGYRCLxYhEIsRiMXK5HAMDAwA0NTWRy+UYHBwMZxBGIhHK5QoDAwNomoZlWSQSCZLJJLpukMvlwj5VKjuWz+cpl8vkcjk8zwuL3SORSDhDMB6PMzQ0FNaNlUolYrHIuKxeMNQ51hPLsiwsy6JSqTA0NEQikQj3QyaTYXh0BNM0wxYOvu+H93FdNwyWaplm8LHVNI1yOdg/yWSSfD7P4OBguA3RaBRN00gmk8TjcQqFAqZhUqlUKBaL1X0gQ6lCCCHqd9IHTo7joOs6a9as4brrrqOhIY1tB40qLSuOa2YA8LQyWBoxKwIeZIwE5KAlOgmLGFhBAOWigR7BwwTDBMcDNJqbM1x99ZVs2rSJ3t5eBgcH6e7uxqgGDapvlG3bYRbF932efe5pNE3j9NOWsWbNGtra2mhsbCSTyeC6Lg8//DAvvPACO3bsZO++vbS1toWZmUsvvRQfJwxaAEwjCGSy2Ww41Lh3716GhoaJxWIYhkE0avGGN7yBmTNnsm3b1jAosm0bz/MoFAocOHCA7du3k07H2d+9n0Q8QTqdxLIMHKdCJBI8VrFYJBaLEY1GqVQqVCqV6pCniWmaZLNZZsyYwdq1aymXy8TjcbZs2cITTzyBbdvEEvFxGSW1n/L5PIVCgVQqha7rYfsIILyN6skV/K2CpkFzczORSIRSqYRhGJRKJTzPo1QqUSqViMeCDu+2bQf1aLY0KRVCCFG/kz5wGh4eJp1Ok06n2bx5M90H9jFz5kxaW1uoVBz0CHh46JqOGbEo5ktsfXErTz31FIlEgq1bt/LiM8/QOXsq6cZGfIKRPNuzsXSLSESnWLR58cUXGR0dZe/evUQiERoaGigWixiGgW3bWJYVdizXdZ1yuYzneUybNo0rrriCt1//DhYsWIBlWcRiwdtSLNq85S1v4bHHHuPnP/8F3/ve9yiVSgAkk0ne+ta3cuVb34xhBE04fR+06uv2fbBtjzvuuIOnn36a++67n5deeonBoUEWn7KYG2+8kVWrVtHe3jxuf5VKDqZpUigU6O7u5itf+SoPPvggW7dupaenh2g0iuM4uG6ReDyOpgXDbCogjMViYTDjeR7pdJqLLrqIv/zLvySTCYLU7373u2EvLMcLgr6xhqTBPlJd2gcGBohGo0QikTA4NAyDSqVCPp8nFothWRbZ7CjTpk3jxhtvZPr06WEG7V//9V+rkwKCLKJaIkfXg+A53GFCCCFEHU76wCkej2OaJnfffTd33303LZOauOaaa/jUpz6FZZloRcAAzApPPf9bfvTTO/jZvQ+yaftBjMYWvnvP3WyqFFi5dApvvfxNvGH5CmJWDDMbgxgQgZtuuokvf/nL5HI5hoeHgSDTlUqlcGpm1dm2jWma6LpOpVKhoaGBj370o6xfv55FixaFhee+D5WySzxuEY83cvHFF3HqqacSi0W5886fsWPHDjKZDA0NDRiGFs7c0zQNqp3MPc/HdspcceWbOP+C81i8eDHf/va3+fkvfk65XKKrazrt7c14ftCywTSD2YWxePCRyDQkiESn86lPfZKVK1dw0003cfc9d5NOp4hGI+TzeaJRk0QiSi6XCzM8sVgsfH2VStCN3XFsmpszatPwfY+engOUy2XQg+VpEok4lUqFUqkUDvM5jk06nULTNHK5LKMjIwA0NDaSSCTIZNIUiyUaGhroPdiDpmlcfPHFLF68AIDR0Rz/+I//WH3MoKu7Y7th1q1SqWBaUuckhBCifid94OS6Lueddx6xWIy9e/fy4qaN/Md//AczZ87kuuuuCffA0088wd//6z9z70MP45oJmpunMXv2bEazgzz77LM89cDt7Nm6nfw73smb/uhNEAuCnOef38RXvvIVXnrpJc477zzmzp1LPp/nu9/9Lp7nEUskwhodx3GIRqO4rkskEmH16tW8973vpbm5sbqtPr29vTz77LNYZpRzzjkHCGYGTpvWwdvf/nYOHuxly0tbwsJp3/fDx8/lcmzduh3P85gzZw4NDWlc16exMcNFF12E67o888wz7Nmzh76+PnwfdB3i8SilUoWtW7eiaRqTJk2qrskXYcqUNi6//HJGRkZ46qmnwiDNtm2y2SzZbJaGhgZaWlrwPI9cLke5XCYSiZBOp8Phv+B1QLkcZLTS6TRtbW3YrkOhUAhnMSaTSdra2sjlcuTzefr6+sKhy1QqBQQZO9WPS9cN8vk8yVSKjo6O6tqBLqapMzIyQnNzM4ZhcPBgL0BYWJ5IJMKhPyGEEKJeJ33gZNs2H/rQh3jDG9YA8J2bv8vHP/5xfvOb33DVVVdhAr27dvH1b/2YO+7ZxdR5V7D6gmuIT1oQDBe1NPDU4w/x1EM/5MHHN+GVf8GCzlOZv2gO+D6PPfYYu3fv5k/+5E/4xCc+QUtLI1u37uChhx5icHAQt1q7A4RBTrFYpLm5mWuvvZZ0Oh1u60svvcTXvvY1fvKTn6DrOgsWLODbN91Mc3MwxLV48WL+6I8u48477wizV5oWzB4sl8v86lf38R//8UV2797N+eefz7p167j00ktJJBI0Nae56OIL+Z/bVnHPPfeA5qHpwTb5vs9dd93JP/zDPzA8PMzKlSt517vew0UXXYjtuKQzcc5bdw6LfriAxx57DMMwWLx4MdOnT+cTf/ontLS0YJomu3bt4oknnuDxxx/n2WefZdeuXTQ1NVEqF9B08DzQDZg9ZybrL7qA2bNn87brb2Dbtm08//zz/OxnP+PJJ59k165d+L5Pa2sr7373u5k/fz5Llixh8uTJAPT09PD888+zZcsW7rvvPnbu3MnKlSu58cYbmTKlg2g0CGpbWlr4+Mc/xq5du/j2t29mZGQEK2KETUqDYUEZqxNCCFG/kz5w6urqYv78+VQqHpGITiaTwTAMBgcHgxOn5/PUU09x7733kslkuOSSS5g0cx49WQvP89i5cyerVq1i8awo3/nPf+Duu+/miTeez/xZ0yAWo7+/n+Hh4WqGpwFNg3nzZtHW1kZfXx8eY9PqFdu2aWpq4sILLxw3PPf888/z05/+lJ07dzJ58mQ2bNjA7bffzrvedQO2HWz/WWedxZw5c9i1a3c4rAVBo89YLMbw8DBbt27FdV16e3u56qqrwudtbGykvb2dlpYWotFoOLNQ07SwuHvHjh10d3fT2dnFihUraGlpAmDevHksWLCAp556is7OTj796U9z5ZVvxnFdTDN4DXPmzOKCC9axa9cevvGNb3DTTTeFQUrwGn0iEZMlS5bwrne9i3POOQvXg5kzO7nwwvOYPHkyg4ODPPfccyxfvpwPfvCDvO1tbwtrvpTZs7s488zVlMsun/3sZ/nKV77CaaedxnXXXYXvB5k71Yz0He94O8888xy33fYT9uzZQ0NDY5ipsywLH+m1JYQQon4nfYFHW1tbOC0dCBfeTSaTQYFx1OHmx37Jlt5RVqy7nJZpS+jtL5GOWxi+TXMmwXD/AWw3yRuvejd60zT+5Vs30x8t4EdsotFoONVd1zVcF8pllwULFoT1TIqa7RWPx2lvbw+zTaVSCU2D3/72t/T09NDc3BzOBHvwwQfxfYhEgsdJpVK0t7ejaVT7FQUz9XzfJ5lMsm/fHiZNaiabzfLiiy+yZ88eIAhaTFNn3rx5lMvl6nR8A/Dw/WC5mD179tDa2koikeAnP7mNhoY0juPh+8EQ16RJk7Asi89+9rNcceWbQQPD0Ni7dw+PPvpIOPTV2TmV//W/PsQ555xFqVQglUpUC7uDIbt0OsmcObOCNg16kPPxXJ9rr7mKZaefimlodE2fxrveeQPxmInvQV9vPzd969v8+7/9P4qFEhpgGhof//jHaWtrY9OmF/ja174e7hfDCGbi3Xffr7j11lurzUstDMPAMIww4BRCCCF+Fyd9xsk0TZLJBNU2Sui6juu6FItFotEofbl++vv7STU309zczI4dO+gb8Wmd4vDss8+ybPmp7N/zErpXYNbkWFi3k8vliLhj2SSVVTEM0PUgi1MoFIjG42Fw43leuAxL7VIssViMYjHopRSPx8nlcjQ0NLB48WL27dsXDHHpY7dtaGjAtu1wZp5aSNg0TQzDwPM8nJrmkkHrhaBvk8q0xGKxanYm2G6VsXIch9HRUTKZDLlcjsbGxupj66RSKd7whjewatUqdD3Ikm3ZsoUbbriBvXv38id/8idcddVVzJkzh3Q6zeWXX85dd91Vs2+CN2Hr1q1885vfZHR0lA984EMsWXJKODNwxYoVPPzwwzzxxBN88pOfxPd9MpkMzz33HI8//jgXXHAB+/fvZ+bMmZhmkEH0PI9nnnkGXQ8ycrNmzSISMcnn83zyk5/kwIED5PPFcH+r3lCGYWA7knESQghRv5M+cApOkMG/g+7fUXRdD5ohmjrJWJRCtQljMplkb/8QvUPDpKfEKdFH0e9l1O2n0TKJJ5vRdZNyqQCOSzQapVAoEIlEsCwrDG40jXCavOpPpIIH1UNIBVL5fIlkMgl4aFowxLR27Vre8Y53MHPmTH7zm99gWlAuuWHX7JGRkWrzyfFT/4NZbQkcJ4euBz2Npk6diu/7YcYtm82G9VHVPYRpmqRSqbDVQDKZZNasWZhmsByNYWjYthv2ZGpvb8f3g8Bpx45d7Nq1h2KxyDe+8S3uuusXNDU1MTIywvDwMK7rk88X8f2xocq9e/dz6623sWPHDiZPnsr8+fOJREzKZZt4PE5vby+FQoHnn3+emTNnMnv2bG644QY+8YlPsHTpUhobM9i2W132RiOVSrFnzy42b95MsVgkEgleWy4/SqFQqHYUj1Zfj1sNLIvhcJ4QQghRr5M+cMrn84yOBsGNaZpEIpFqZ+0yvh9kQRKJBMND3YyOjrJo0Vo6KzYt0ybT3NxMqZznlFNOoTkaYXj/doaGhpg2pwWAiBEJA5ggeAnaAKhp9YZhULaDYEAFPb7vUyqVGB0dpbu7m7lzuvB9n3g8zhlnnMHdd9/L9OnTedvb3oZlGcyfPx+gGtBEGRnJsXv3bjzPC2foqUyTZVnkcrmwU/oZZ5yBaZrBtH+gUCixb98+8vl8uH9Ul+8DBw6Ew3ozZ85kxYoVpFIpymUbwwh6UKkZbpZlUKk4RCImzz//PJqmhcGSCuocx2HSpEnhto8VyAftD4aHh9E0jZ07d4bZN7WYcrFY5G1vexvXX389Z599dhgIeR4MDg5SKlWIxSK4bjDcpvp0maZJQ0MDAK7nhu930PfJDoPWIMjVw7YHQgghRL1O+sCpUCgwPDzM9OlTgOCkrGka8Xgcz/NJagbvvOAyNj/6DZ66/36mtS9hescSBgYMyJtMbkqTTkTJ9b3Ekw9uIO1pvHndeXTFm9GcoObIMAyGhoYwjKDmZ2SkSF9fX7CECIQBk+r47fs+Bw8e5L777mNG1w0MDAzQ0dHB+vXreeihhxgaGmLLli3MmTOH9vZWHMcjGrNAg4cffpje3t5wiRHTDDImIyMj5HIFZs+eTWdnJytXruSGG26gUCiFdV0vvfQSmzZtCoI63Qrnk7muGwZuqVSGpUuXcsEF6wHCTNXmTS/x5BNPs2TJEvAhYpnYFZ8zzzyTL3zhC+zfv583v/nNrF+/PmyGOTIywhe/+MVqli8o2lZLq3ieR0tLCy0tTeGyLRAMSba0NPHOd97AueeeGzSpBO69916+9a1vkc/n+cQnPsGZZ55Z7Qul4ThBoJpIJNB0H88PhkIbGxuJJ6I0NKY50H2QSMTE81zAHDdUKoQQQtTrpA+cBgYG2LFjB1OnTqFQKPLII48wPDzMlClTgroa2+XKK6/k7od28q2b7uLnP/85q89JEp/URTqdJp/Ps3vHVjY/fT/PPfYYZ6w6hauvvhotmYRCISwy37x5M/v3H2Tq1HYGBgY4cOAAlUqFWCJR7bTthp2rY7EYQ0ND/PjHP+bqq95Me3s7tm3T3t7O3/7t37J7927a2towDKM6HKXj+7B7915uvvlm+vv7mTx5chiA6HpQ67N27Vq+8pWv0NDQQCQSob29PdwPIyNZHnroIbZs2RIO7SmmabJ8+XI+97nP0draTiqVorW1FYBIxKS7u4e77rqLp58JlofZsWMPs2ZNxzQ11qxZw/ve9z7279/PW97yFs4991ySyTgA3/jGt3Bdt7o8inouI1w+RTXKhCB4q1QqwTIssRhTpkypPn/QbPN73/set912G5dddhnTpk0L19Hz/GCWYu3j6JqObgY1TJ/5zGfYvHkzX//vb4bNSYNeTsEGqborIYQQoh6vi8Dp+9//Pk8//TTFYpHbb7+d1tZWzjzzTBzHA1JEMimuvuZs9vQ8yVPPfJn7B25l1qzTgqGqSoGdu7ZSLh9g1Zp23vH2ZcxZ0AwkKelx5s6dy7Rp03jhhRf40pe+RHNzM8VikW3bto0VIFeDBLUobSwWo1Kp8PTTT/O5z32OD33oQ0ybNg2Ajo4O4vE4yWQynOYPwRBgPp8nGrOIRM1qH6ax2iX13xkzZpFKJcL7lcs2e/fu5e5f3svtP7mD0ZEcyUQ6DDQgGD6LRqOsWXNG2N0boK9vgGKhzB133MEvf/lLNDR6enq49dZbufzyy1m4cC6WafCXf/FX1Zls6gHhuede5Gd3/pxyyQZfx7E9TFNHA3TNRMPAdXyGhoaAscL2pqYmHMdh165dzJs3j0qlQjKZ5CMf+Qgf+tCHmDVrFi0tLVQqlaBuTDNoaGggnU5TLpfZtWsX06dPJ2IFWaw3v+nNPDPjGb7z7e9Wu53Hq3VNWrhQsRBCCFGvkz5wikaj3HbbbRSLRVKpFJ7vcOWVV/KmN70JwwhO5KWSy8UXXcys+XP5P5/9B376s18wMvJ0MMstEaFcybNu3Wl88Mb3c8kF64lgMDxQoLEpwfr167jvvgv46U9/ype+9CVGR0eZO3cuff19dE3vIl8dGlSF4oVCgVgsRiwWI5fL8a//+q/kcjmuuOIKzjjjDCKRSDVoMqtDXgYDAwO0tbUyb948brzxRp599ln6+/vDITEgzCDF43Fc1w87eL/wwgvcc889/OD7P2Lv3r3EYjEaGxvHBU4qWNI0KJWCYS/bDtbf++EPbuGnP/0p3d3dTJkyhaGhIb70pS8xMjLCO97xDubMmY1ladWWBUEQ9sQTT/If//Ef/OxnPwsXAA4Cx+B5agvlE4mgVYFhBDMRk8kke/bs4bbbbmPq1KnMnDmTSCTCqaeeSqVS4be//S2VSoULLrggaGdgaLS0tBCPx9m9axcPPfQQU6ZMYeHChRi6gesFXcLVcjCxmFrapYxhGDVF8kIIIcSxaU3N7Sd2QxtfTWWbWLMSvCxN80mlUixbfhoXX3wxK1euZMaMGTQ2NqKh4XveuAaVo6Oj7N+/n1tvvZV//Md/ZO3atXz5y1+msbExLHYGwpO97ToMDg7S09PDnj17uOuuu7jjjjsYHBiu9g2yqveY0KG6ZrtdN+ijtHDhQpYvX05nZyeu6zIyMsLDDz+Mpml84hOf4Pzzz+b//b//5HOf+xye59Ha2sqUKVPC7t9AOAym1opTXbjVUiO6rofLnTQ2jjWDDPaVhuu6FAoFRkdHyefzZLPZsU2uWaRYFdufd955dHR00NjYyODgIBs3bmTLli2Mjo5WhxpdWlpawr5Vtm0zMDBAX18f2WyWpqYmOjs7yWQyFAoF+vr66OvrA4JZgeeccw7t7e2Uy2Wee+45tm7dimVZtLa2kkwmKZVKDAwMcPDgwXDR37a2Njo6OmhoaMB1XQYGBuju7mZoaAjbtsNeTqo1hRBCCFGvk/5y23Ec+vr6aGlp4YILLmDWzFl4vodWDWRql0PRNI1MJkMsFmP69OlkMhlWr17NnDlzwoyOVw20VG2MaZi0tbbR1tpGOp3mnnvuCae/W5ZVHQ48MjXDK5/P88wzz/DCCy+EM+/K5TKZTIa+vj5yuRw/+clSNmzYQE9PD8lkEsdxOHDgQFh8rgJAFSSpuir1+iAI+EZHRykWi3R3d4dBVW3w5Hketm2HdUS1Xc9VDyrVI+qnP/1p2I5BNe2sVCrhMKXneQwMDDA6OhoGZo7jhM85MDBAqVQKWzb4frB8jLrdd77zHdLpNIYRrElXqVSIRCL09/eHMwsrlUrY06pcLnPgwAF6e3vD4VFVY6baD0zM0gkhhBD1OukDp2QyyYHubh55eAOPPvIYM2bMQNd0iqUi8eqwjeokrQIilU1RHbZrMzoq0FJFz6VKULOkodHd3c0Tjz9FX+8A06dPZ2RkBF0/+i7OZrNYloVpmjiOQ7EYNGq0LItUKhWc9B2HJ598ku3bt5PP50mn08RisbA+pzbwUc0da2fwQRAQqWEp1QA0m80e0pBTBV9qX0xcLkY9n23bYSuEUqlELpdD13Wi0WgwJFoN3iYGS2obVU2Tes1q6DAeD2qQVMZMFYd7nhf22lK1Yuo2mqaFgZp6fapwXmWW1GtRr1VtiwoshRBCiHqc9IGT7/uk0mk2bdrEF77wBVLpBG984xuJx+KUK2VikWh4W5WlUU0SVTADYwGTok7S8Vg8/F0+n6e/vx+qmY1CoUAqlTnq9iUSiTAwUV29VdDheR6WZdHW3o7v+xQKhfC5J3Yirw2Qah+vdiiqNsAwTTPMnqmAqjbQUv+v7q8es7YflZrRp5aWUbdRGR4VWKnnVbMKJ26bqj9Sj69aN4TryVWDWvXcKug5XDZMBXwqk+c4zrjnVI+jtlmG6oQQQvwuTvrAqVAokck0YlkWzz77LP/x+S9i6BaXXnYx0UiUUqkSntA1zUDXqWYpTHxfIxKJjTs5VypOTSYG0KBQLBCxYsycMZtFixaxdetWSqUKiUTqmNungqRgLTkzXE9N/b5YLIYF1EExtBH0h/J9YrFY2Nxy4tprKksWjUbDf6sgUAUPalZZbUZGqR3OUkFjbfCknkM1t1RZOxWImKYZdiJXz68yULXbqLqYq8yPykypOqRisRhmAVXGCAgzSapAvnabaoOr2iHM2iyc2vaJ2TQhhBDiaE76wEmdnNWJ9vHHH+ef/umf6O3r4YYbbiAWi1RvB67rjTsBqzqjYLZYsPSI6mKt7lOxKyTiwfT/OXNms3z5cu6//35GR0fDwOFoauuS1PBX7QleZZRUS4NYLBYGUSprpB6n9jVPzBypv6tMVm22qDYjUxto1D7e4R7rSAvlqn0e9lqqZqgm3l71tKqt0VLbpQIxtX0Th9gU9ffa/ah+VE1TbTCl9mttRk8IIYSo14kfOB0ymy78A0C4yC1AU1MLvu/y1FNPUSqVGBwY5vq3vY329nYMQ6sO3QQnd9M0w35Kug6eNz7rtHPnTnbt2oUViTBt2jQaGhpoa5vEihWr6OqayZYtW6pZjiM0WNRUwDNW71MbYNQWoKuMlBo6Uyf+0dHRccNfh1M7hHe4uqfaDEztmnYqc1QbSKr/1j6fyiKpDFHt2nmqWLu27qr2b2qpGZWVUoFPbSAZi8XCYcnazJgK+lRR+OGCu9r9VVsDpobyNE0b15ZBCCGEOJYTP3A6BpWRMAyDQqFAuVwkFouxe/du/vqv/5qf33UXV199NW9+85vp6GgDtHBpEDVLrFZ//yBPPPEE3/nOd/jZz35GvlBg4cKFLFu2jI9+9KNMmzaNyZMns2XLlmqjS/uo26eGi1QwUBsA1NYAWZaF67rh0JbKZtXWXtUGCBOzSMrEYEkFPrVBycT2BbWB1eGoYa/a4Ks2WFIBW+1Qn9puNTSnCuRVfVPtgrwqaFLZq9rhyYn7rHaI8XBBqArI1N+kj5MQQojfxYnfx6luh3+Zuq5TLBaZPn06a9asYe3atXR1dfHoo4/y5S9/mauuuoqLL76YkZERHnjgAR577DF27Ngx7uRfm+EAFawceShLCCGEECem133gpIqt1ewt3/dpaGgAYN++fZimybRp0xgZGcFxHKLRKKVSKcyOqKGlicNlEjgJIYQQJ5/XUeB0eJ4XTJlXvYNGR0eBoP9T7UyuoaEhEokEyWSSQqEQNla0rKC4/NCM0+t6twohhBAnpdd94OT73ri+TdFo0NdJ1ewUi8VwZpaqM3Jdl1QqVe1yXQkDpomzzSYWUgshhBDixPa6r4yNVBtglsvlap8kt5plCoKeRCI5bjaabTuARqUSrAdXW1wsWSYhhBDi5Pa6D5yGh4dJJBLh7Ds1fR0Iu0uXSiU0TQvXZFN9lA5X21RLsk1CCCHEyeX1Ezj5+mF/nclkxk1bnzidXk15r+0fBMG09kgkgmN7h880aWPNFoUQQghxcjh8NPE6UyqVwsV+1RpnqjeRWuYECBejVcGTbQc9mg6XWZJskxBCCHHyed0XhwshhBBC1EsyTkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBJCCCGEqJMETkIIIYQQdZLASQghhBCiThI4CSGEEELUSQInIYQQQog6SeAkhBBCCFEnCZyEEEIIIeokgZMQQgghRJ0kcBKvDF8//A+gaRqapgHgeR6e5wFgGAaapqHrOpVKBYBoNIrneTiOg67r4f1838f3/fFPOeH/hRBCiONlvtobIITneWGQo4IoTdPC33meh2kGH9VyuYzv+1iWha7rOI4zLmjyfX/cYwghhBAvJwmcxCtD8w77a8MwxmWZdD3IQnmeh+u6RKNRHMchEomg6zqlUinMQqmgSdf1MDulgqjaHyGEEOLlIoGTeFU5jgOMZZpU4KT4vh8GS6ZphtknlU3SdR3f96lUKmEAph6ndihPCCGEeDlI4CReVZrGuADHdZ0w+wSg6xaGYaDrOp7nhZmlYrFYDZCCIMmyzHFDfOoxah/rCFvwh3ppQgghTkISOIlXle/7uK4b/ltljEzTxDRNRkZGSSaTRKNRstkspmliGAaO45BMJrEsE9d1sW173HCfCrCEEEKIl5METuIVcvhaI1XDpOqVTNMkFouRSCSIRCKcfvrpTJkyhf7+AX7zm99QLpexLItYLEZnZyeLFi0km83S39/PwMAA2WyWUqlEuVzGdV1isdgr/DqFEEKczCRwEq+q0dFRYrEYra2tzJo1i1NPPZXTTz+dhQsX0t7eTjwep6EhyS9+cR/79u1j8+bNOI6DZVm0t7fzjW98A9/3cRyH4eFhdu3axbPPPsuTTz7Jzp07efbZZ1/tlyiEEOIkIoGTOC6u6xKJRPB9H9u2q/VGFhAMveVyWRKJBIlEEs/zyGZHKJVKxGIxMpkM5687l3POOYf169czc+ZMTNPA98cqjzQN8GFKRwcHDxwgYlqYukGlXCEWiaJrPoZpEIsapJLtTJvazplrV+M4Lo7j8PTTT3Pvvffy85//nG3btlEulwHCrFWxZIfbbhgG8Xgcx3GwbTvMhgkhhBCKBE7iuCSTSXK5HL7vE4lE8DwP27aBIKhqamqiXC7T19dHuVwmnU6yatUqzj//fJYvX86qlStpbGwkFosA4DheWPRdr6DlwNjtVcG5ruusXbuG008/nauvvprHHnuMe++9lw0bNtDd3U02myXT0IxlBQXotm1j2/a4nlGGYbx8O0sIIcQJTwIncVxy2QK+r5FIxsPZbmqWm5oh57ouyWScpUsXs379ei699FJOPW0JiXjikDltpjnWjsBxPEzj6M3txxpfVrNTVYahASa27RKPR1mwYB4LFszj/PPPZ8OGDdx1111s2LCB3Xv2UyqViEQiRCIRyuUyxWIRy7KwLKuOWXlCCCFeTyRwEsdF0zTi8Tie55DP59F1nXg8jioGHxoaYtasWfzRH13Ktddey2mnnYaug+sFM+nUbDhN0zAMY1yGxzT1I9WUj3v+4OfQ4EnXg8d0XT/MHk2bNoW3vvUKVq5cyY4dO/ivL3+Nxx9/nH379pFIJIhGo2G2SrVAEEIIIRQJnMRxsSwL3/cpFAoYhkEmk6FYLFIo5Ekmk1x00YVcddVVXHLJJSSTCWynQkSPYOgGpXKJeDQCGNQumxgEUjr1dRMIbgsqePLDNgTq/oahkUiMn13X1dXJtGlTmDlrLt/73ve45ZZb2LlzJ7Ztk0gk8H2ffD4fDtsJIYQQIIGTOE6qIDwSiRCNRikWiwwNDjJ7zmze+MY38pnP/H8kEgni8SgQ1B65nouhG8SiMTzPqQY7Y8utBN3AwXV9jN+h1ulI1HBh7fp1KsPV1TWFD37wg8yfP5/vfve73HfffRw8eJBUKhUGhUIIIYQigZM4LpZlBcGI5lEoFPA8j1WrV/POd76Da665hubmzLjbm0bwkXNch1KpRDqZAIJC8kqlgmFY1eaV1TqlY8QtaoHg2maXtf+vZsupmX4TZbMlmppSXHHF5bS0tNDS0sL9999PX19f2GhTCCGEUCRwEsfFcZxgFpwBpmmyePFiPvaxj3HFFZcDQd0RANr4RXdNwySVTFGpBIXZY/VNtUN2cKyEk1qfbuIad0ptawTXdcPaJfW7dDpGpeJjGBrnnLOW+fPn09nZyXe/+112795NIpH4/XeOEEKIk44ETuKoDMOgVCqRSCRwXTcMUsrlMvF4HJdyUA+UK3DBBRfw2c9+ltNOW0qpVCEWi9TUKWlB0dGEQCgSMQGPsYBJFWPr6DW14b7mVX/8cT+6rmbijc88eZ4/LphSy7jUUre1TD9sfzC5o4U///8+RefUqfz5n/852XyOaDRKNBrDdd2wc7mhW1QqFTT9eIfyJt5/wg7yjzSrsPp77TgzYkd6fO2VKYr/nZ9FG7+/dP/4hnKP91Uefc7na8gRP0dH8Aq9/8fvWN+/Y3w+XuXPvzgxSeAkjqpcLpNMJimVSjiOQyKRCAMS1fyyUCjwxje+kY985CPMmzcP34dYLBLUKBknznpxjhMcLC3L4MILL8QwDP7lX/8vu3fvplQqk06nw6DRMqtDgq/yNgshhHhlnTAXTOLVo4qr1bBVLpdD13U0TaO3t5ezzz6bP/7jP+ass84kkYjhumqx3XrCCp1X82NYm6UKgrxg26d1dvD2G97G29/+dmbNmkW5XMJ1nbBdgevZeP4rUP+keUe4+vU4/nxJzeNP/Hmt8rXxP6I+R3qfT7T3/+X2en/94vciGSdxVJFIhFKphGmaWJZFPp8P64pKpRKnnHIKN954I+eeeza+HwyRmaYeNK80X/txeW1RuRrOCwrCdUxT573vfS+5XI6hoSEGBgZIJII+VbZtU6lUXr0NF0II8ap47Z/ZxKvONE0MwyCbzYYNLx3Hobm5mb/5m7/hrLPOAsB1vbHib1Pn95vJf7wZqN/1/kHmxvMcVAYnqIUK/j1pUiNXXvkWLrroIqLRKMPDQ/i+RyRiYRyjq/nL6ohXwv5x/hyv43t+9W7V/ePr436Od/t+5+ef8CNebdoxfv7Qn3/xeiTffXFUQYsAI+ygHY/HKRaLxGIxrrvuOv7oj/6IpqYGIOi/pLJMJ1r7I03TxnUJV4XkjuNx2mlLueGGGzjjjDOwLItCoSBtCoQQ4nVKAidxVCqgcF2XaDSK53mYpslZZ53F+9///nCoy/cJgwnfh0rFrrPzd70mXuOrK8rjywH4uATdx7Vq0buH7wezBx3HwXGD4bi1a9dwww3Xs2LFMnzfpVQqvToLAL/stRgnyJW4r/+OM8Neo6/jVfNKZyJPFK/31y9+HxI4iaOKRqNh8GTbNiMjI8ycOZMrrriCWbM6sayx4CFoLRB0HYhGD99w8rVGQ8P13HEdwlUQpes6sWiMXD6HYWisX7+eM844g1gsFs4oFEII8foixeHiqHRdZ3h4mOnTp3PgwAFc1+X666/nrW+9MrxN7eK6rhv0RKo32+S6bvV5zHGF2mrUzAd0PchmBcNnGslkimy2J1w2JdgGH8/zwv9Xwd6RGmOG9/GD5V88L2jOGSz34uP7wX09fFLJFJ4HDQ0NXH/99WzdupUf3/YT0ul0fS/yqCbuqPFXu6Zphtkvywq6qqvFlNva2hgdGQqDvkgkQltbG7Nnz2b27Nm0tbWRTCbDruzZbJbe3l527tzJtm3b6OnpAU1jZGSEVCpFe3s7xWKZ/v5+DMOgoaGBQqGIaZphDy/TNMOFmROJBP19PSxcuJCdO3eSSCTG3dayrGMOafro4VI4KrMJatg3eL9rnzMaiQNBm4xakUgE13XJ5bKUikVWr1nDxo0ba4LbI2Xnjp41DBaJdnEcB9cNAmzTNIlGo+HECU3TqFQqmKZJJBJhaCh4T6ZNm8bw8PBRH/8PLZGIs3/fPjqnT0fXdQ4ePBBmjtUkB4BSqcSCBQt47rmN+L5PR0cHxWKRY/ZBerWpLOQxsq+xWIxKpUKlUqku3h3MkFXfKzVrOJ8vYhgGhUKBhoYGSqXyUR9XvD5J4CSOSh1QBgcH8TyPCy+8kHXr1mGaUC57RCM6nudXszSEfZtsOzh5HivzNDbcNZbV0nU97PhdKNrE41aYBSoWi+RyubCNwMjICOl0Ouw+rtSuSzcxm1Srdn288fcNAqjR7GjYvwlg4cKFXHjhhWze/BLbt28nmUz9Hnu1fkNDQ7S1tWEYBiMjI8RiMRKJBKOjo2zbupVUKsHKlSu57LLLOOuss5g9ezbpdDoMRCbu/3I5yBoODAyQy+W4+bvf5cknn+TZZ59l+7ZtRKLx8PkGBwcxDLO6BE6w30zTRNd1KpUKnufx8Y9/nIsuuojR0VGi0Wj4PKpL/JGWulGKpQq2bZPL5ejr62PXrl289FKwb3t7e0kkkgwPD2NZFolEgpGREUqlEqlUioaGBkZGh8Z1pG9sbKTr1FP55Cc/SaVSIZNRS/4c/sRajdOOaNOmTRw8eJDt27eza9cuent7KRQK5PN5crkcyWQyrIcrl8vous7kyZMpFovs3r2bhoaGoz/BH5jjOEydNo3rr7+e1atXo2k+sVgsnCmr3teRkRESiQRf+9rXefzxx7Ftm1KpRCwWf1W3/3g5jhO0D6k2r9V1nWg0SqXiVxcT18IZwkFgFUx6qd03QkwkgZM4qkKhQDKZZHR0lObmZi655BJOP30pANGojkYQLKlFeXU9+HewPtyxa4BcV2V6CA9qnhcUZQcz+IITrypSB8Jsh2EYtLS0VH8XrEtnWcFJXmUuJtYh+f7YmTI4MBrVA6jq5zQ+Q9WQCU58pZJTXcxYZ+XK1axc+Vu6u7t/5/35u4pEIlQqFXzfrw4R2mSzJTo7p7Fs2TI++ad/SmtrK+3t7cRiE4cOjXA/qixgNGrR1jaJ1tZJuK7H4qWn8Nxzz3Hfvb/il7/8JU899RQHDx4gkQgCQs9zcV0NzwsCEzWEaegWngtz587l/PPPDycF1DY99bwgW3g0tfk1z/coFSsMDQ3R29vLyMgI//3f3+CZZ57h4MGDmKZBPBElmYpjGAZDwwMkEokwG2TbNqZp0NraynnnnXfIOom/j4suugDP86hUgu3asmULDz30EPfddx8bN24kl8thWRapVApd18OgPhqNEo+/AkHHETMuwZ4dGBigvb2d+fPncsklF4XD6T5+OExt6AauGwQSv/rVr3jyycepVNRQdLhmUp3P+yo5wvY0NTWFmSbbtpk6dTLTp08nm80GdYqmRiQSwbE9IpEIpmnS2NjI448/Sff+/TQ1N1cf6TX++sUrSgIncVSqFYFqeLljxw5uuulmcrkczc3NTJncxsyZM5k6dWp4UFYn2XrS/OpxIchuBc9F9SrRp1x22bdvH5s3b66uLZfGNE0qlQrd3d08+uhjTJ06lba2tnGBw8TlVWAs83S4RYFVRmlsSDAIrArFMnv37uXFFzfT399PLBZjeHiYQqEQHHCdY6QsjlM0GsUwDGzbDrN/s2bN4oorruC6665jckfHuO7sNRMDq8NKh49cNC1oGWGYMVatXMWihYtZtWoVN910E3fffTfFYplMJkM+nw/vUxuMqiv12r+rCQKGEQS7uj5+ew67HdXN8/wgwEskYiQSk+no6MBxHFavPoMHHniAO+64gwceeIBt27YTjUZpaGggmUwChNkBlVXI5/M4joPvH2Z254QTnXaMMk+VsYvHozQ0pOns7GTp0qVccskl9PT08J//+WW2bNnC8PAw8Xg8nHUJ0NzcTC6XO/oO+ANTw3KapmFZZrhPHNcmYgXDm4ZuYBha+DkbHR1F182w7ciJ7MCBA3heEBRNnz6dD33oA7z//e8nkYiNu53nBd8Jx3HJZrP8zd/8H+68805GRkZepS0Xr2USOImjsqxgTTbLssjlcvzoRz/iRz/6EeVymVQqRSoZY+nSpaxbt46zzz6bOXNmYxhaNQPk1pV1AqonOr9aU+Lz4osv8vTTT/PLu++lp6eHvr5+du7YSVNzc1gLs3//ft7znvdw2mmnsXLlSpYsWcLChQuZMmXKYTIdHpp26Ik0aNRphdugMlQDA0Ns376db3/nu2zdupVt27aRy+XCoatisUg2mw1P3n8otm1XW0Dk8X2X1atX88EPfpBzzjmHRCIWhqae54X7b8z44FDVgcHYUGaukMcwDFKpBOeffx6TJk1i/vz53HHHHfz2scdobeuoBpZatTbEq/6/Uc2sWGFwpmkc8n4fK+MEwYnZ0HRqZzSZho5ZDcAuveRClp1+Kme9YS233nIbDzzwAD3d3TQ2NmJXF27WNK0aZOpEIhGi0Si+f7jnH78m4rFCe7XP1L41DY0pk9uZMrkd27Zpbe3gtttu49Zbb+XAgQM0NjaSTqcpl8sMDw8fNoB/JUWjVphl1bRqpkkDUwu2K2IFFxue76FrY++vpvm8LJ3pX2kTMkEdHR2USiUKhRz5fBYgDJps28UwNXRNB81D03QsyyCTyTA8PMiePbtoaGh6VV6GeG2TwEkclRoGicVi+L5PX19fWLg7ODiI51bYuHEjDz30EG9+85u5+uqrWb16dbUB5rEnbfq+HxZoAuzatYfbb7+du+66i5deeolyxWFkZATTtIhEoyQSCXK5HJ7nMTAwwL5Clh07dvCzn/2M6dOnc84553DRRRexcuVyJk+efMwC8drhPwgCilwux+23384tt9zCk089w8DAAJ7rEo3Fqt3Rg8La5ubmQ4qUX26NjY3s27uXeCLGZZddxnvf+14uuuhCAIrFMol4UFekXqPKqqnu7iobo34m7ot0KihwVyfOU09dwpQpUwDYsmULjuNUh0nNI9Z91NaQ1WbuamujjsR27GC7tOCx/QmRbbFYJJlM0tHRxjXXXMOUydNIJpPcc889FAoF9LDfVvAZUu9jJBKpI2g7NjUBwXVdXNcdtx8ty+Kss9bQ0dFBU1MTN998M7t27Qpru7xjpdteAZ7nUSwWwy73vu+ja/q498X1qot3mzqGYRCLxTAM45D34kTU39+PruvYtk2hUAiL4WF8kK9revgdMIxgOLqxsfGE60cnXhkSOImjUsuQQDAkoobK1BIsk1oa6enpYf/+/dx6663hLKIzzzyjrgV+Vc1MuVzm8ccf57vf/T4//vGPOXiwj1QyRSQWDWfLxePxMNuUTKSDmoU57eTzeQYGBnjhhRfYs2cPL7zwAldc8WYuvvhiurq6MIxgKOJwJ3H1O88LXl+hUOKOO37G1//7mzzy6CO0tbfT1NSEZUWIRCJh0azvaVTKf/hhDLV+3urVq/nIRz7CWWedGdSj+A7xeBTbtsOhVHWiUyf7Y538/Op0SM8PivJt2yaVTNHa2sLVV19NIpHgP/7jiwwNDYVF+0qQvfPDTOHR9u3RWOMyMv4hszGTySSO44Sv6dzz3kA0ZmFaOrfeeiuRSCLMCgW1SDb5fD6c5WZZE7dhYjBTX3ATvA+1jxXcz7Z15s6dwQc+8AEikQhf+9rX2LlzJw0NDWHm6dWkZpPp1RjB8zz0asf7MFDQDYzqDXxcdCN478rlcjjs+to1PoM4USKRqNYJlsJjDQQBe1CrNz54guCzHUysiFIqybJK4lASOImjUsMgpVIpnA6v6jbi8Tg7d+5k8uTJtLa2smPHDn7yk58wb948TjnlFBobj12cq+pS7r77bj7/+c/z0EOPkEwm6ZzWSTabDad4q7qmcrlMpVIhnQqGy/bv3080GqWlpQVd1xkaGuLXv/41e/bs4uGHH+Yb3/gGAJqmHzbzpOo/1HDTxo0bufnmm3n00UfpaO8gXyxUr1id6lBdcEXuOj7FYpFI9A/7FdqzZw9LTz2Vd7zjHaxevTrcZ5GIhc/YrLXaoEmprdc6XHATtGPwMHSDaCRKNBKlYgfDsnPnzubGG2/kpz+9s9qSYiQcqqt9Prc6VAZj+/L3oYqVJ26f49jhaywWi0QiMc44YzUDAwNs2bKFjS9sxrKs8HNSLhO2Czg0aDrM8x4jpTCxFm7i3ywrmF3a3t7M1VdfzZ49e7j11lspFovjshuvFlUUfbjX6XkemqGN2++q7YNhHv5C40SjZuqqGXVjC3obYaDk44ffD7UvisUixWIRTXsVmtyK1zwJnMQE4w+w2dFhli5dymWXXUYqlSKfz4a9anp6etixYwePPPJb0qk0XdPnsHvPbr590/dZtHAJb3nLH4UHJV0fK/4GHccG0wTd8PnmTf/Nl770VbZs3s60hnYsK87Bg71Y8RS9ZY9Yw2ySTTOY1DSDhswkNMtkvz2MNtKPkd/JYM9WyA6R0CMk9BRWMs7IYJH773+EN111Jf/0T//EisWnQQXQQPNhNOpgYpDQPTzPRdNMeg8O8dWvfJNnn3mRTKaBSsXG9xwMM8KMGdM4++yzwyE63zeCQK5S4e/+7u+YNGlSNcCsVIfygtlemuoTdIRZT6CFiyfHYjFsO5g9qPohWabJtddcwxsvvxzTMNCAaMSsziAcq1+pVJxxDTkL+Qrbtm1j//79RCIRYrEYM2bMYOq0dkDNgNQxGKug1jSNaLXmxfd9kokYX/jiv/PRj36Unfdvo71jKrFYjN27d9M5rYu+vj4qlbGsm6aNDReGQ4fVv6kZl08//Rzz58/HNC1s2yadjFb3wtgsPNeFil0kHo/XLOHjh32HDMPiDW9Yy0c+8r/4xMf/jMHBQTo6OhgeHsb1bKIRk0I+SyzadJh+YhOCZw1eemkbs2bNCoKMiksqlcR1PSIRPZwlqHqVuW6QqVBDgxoeEcvD92BG1xT++EPvZ/u2Ldxzz300ZjKUy5VwIoFarqhSqVQDOwvLMsnn89WTdDDDy7KsccGoyiZWKpUwUFXBoudp1b+5YVCvsodqFqapa+AFIYGpG9XQwMMydEDDdcAwgv0fj6TANdAMg4gZqwm+/TAAM00TzQiGLmPRGIVCIZzdWCpWwkkTQSbZpqmpCcepMDo6GraVgCBbGY0lKZfLlMvlMLOsWl5AMKtXTVBRdXoqc6RpGslENLygCfpsBW9ruVQmkUjgug6mblAulWhra6NcKgQzgbVgH/i+hq5pUJ1coPqKNTY04Hseuhm8P21tbRw8eJCpU6cxODiIrhN+B8XrjwRO4qiampq49NJLufHGG5k2bcq4mqF8Ps9PfvITMulmHnvsMYrFIpl0hv7+fh577DEuv/yP0A11Eh0LHHw/CJp8H37+y5/z05/+lH379tHQ0EC5XCabDU6akzo6WLt6OS0d82hrm0s01o7vmXi6Rj4Jmu4ytO8psr3b2fnCs+x58SVKAyNhTyfHdXn++ee5+eabSb8jyfz5c6E6Cc7ExJuQ3ldDjmqmmK7rJJNJPvaxj3HJJRdy2mmn1dxax3E8nnn2WX7yk5+wc+fOoNN4te+NVi20rR0KOBw1zFRbh6ROEq7rMn/+fFatWkVLS9O4GWrqgK1pWjhcp2kaxWKZe++9l5/f9Usef/xx9u3bF5ygolFmz57NRRdfyLXXXsusWTPC9+Jw1JX5tGnTWLFiBZs3vUQul6+2mbCOedJQ93dcp3oCrbB9+3Y+//nPV0/swRDf9GldTJkyhVNOWciiRYuYMWMqhgExIyjgVcH2xOxHY2Mjq1atYsmSJTz66KMUi0GjTs8OavKCeqyj7nog6Gv1zW9+k+3bt5PL5YhG4kyePJm2tmC26BlrV9PZ2Uk8Hq3OvNKqmSZr3LapoHHy5MmsXbuWJx5/qjq7TiOTyeA4Thg4NDU14bouhUKB0dEysViM1tZWUqkUsVgszOyq57FtO8yAqKn1pVKp2gjVIplMkkgkKBaL5PP5MFAul8tHnFWpqEyLbftYlkY6ncZ1XQ72HiSZSGIYBo2NjbS3t5FKpYKZpoUCA4N9DA0NhZMkKpUKiUSCTCZT3cbgOxyLxRgZGUHTfBobG9F1nZGREYrFAvF4nIHBoPmqKqpX310VLDU2NgYBWakUBlj5fJ7BwUFGRkYYGgwuVBoaGqqfx7F+Y5qmkc1mmTJlCvF4PAxMi8Ui8Xi0+v5ZhzTPLZftMDCluqh5LBajUi4zMjKC53nEYjFM0zzhZx2K348ETuKoRkZG6OrqYtKkSYBqExCcMJLJJNdeey2+Z7Bp0yZ6ewdoamriwIED/OY3vyGfL5DOBCfAQ4YKNNi1cx9f/q9v8ZtfP4WGTmNLM/uK/RhN7SxcsY7OGauZNnUN8VQ7WiJF3oeKGxSGGwUD3fOZPKWNaZOhqW2ARNPz7Nz8MCM9z+HZO4lZHv09fdzy/ZvpnDqD2Yvnols+PiUSlPHx8fwEuh7FcTx2797Njh07qo3/ggP4rFldXHrppSxYMGfcATaoidJZvvx0Fi5cyKZNm6pX06mw03Q9Qx0qQKodRjQMIyzmXb9+PcuXL6/Zh0GX6kgkUj3p6XgeRKtDho88vIGbvvUd7r33XkZGR2jINIYZiGeeeYa9e/cyOpLjXe9+B7Nnzz7qrMfgyruR888/n+ee3cg999xPIpEgHo/XvVafruvomk4iEaNYLPKb3/yGvXv3omnB7DdTt4jH48ydO5u1a9dy8cUXBcvaxM1x+6V2qLFcLoeB4Pr163nxxRcZHh4mlUphO+VqwFDfoS0atXjsscd48MEHg5ooM8iAmabJ5MmTWbNmDRdeeCGXXHoRjY0ZPE+tiegd9vVPmhT0Orv9J3ewdetWLCsSFtgHfcCCE7dqWZBIJFi4cCFnnHEGp59+OnPmzKGzs5OWlhYiEb36el0GBgY4cOAA27Zt4+mnn+bRRx9l8+bN5HI5BgcLxOMJotFoNWNnV/uSHbuyWdM00H2saj1ib28vtm0za+ZMli1bxgc+8AEmTZpER0cHmUwGTfcpFAr09/cyPDzMj370IzZu3Mhzz22kv78fN+mHwV+wvqWJbY/N9szlcuTzeZqbm5g5cybzF86js7OTRYsWMXfuXDo6Okin0+FjAGGPrnK5TC6X4+DBg+zevZuenh5+/asH2bRpEwcOHCCfz4f1lxAMVZ9yyilce+21GGZwgXHOOedUM7NBEbjaB+piRQXGF198MTNmzMBHD2v5vvnNb5LLBa0uVDd/8fokgZM4qunTp3PaaaeN65FUGwQZhsEZZ5xBR0cH+/f3hBmJ/fv3UyqVyDSMNQFUNTJBB/Ayd911F48++mjQvyceJ5/Pk06nWbJ6NcvPPo9UwzwqpTS255PN5nHwMaPBCct3g6ELJ5slbkVob2+n/ZxmZkyO8Ntf97Nv9040TSOTSdO9/yC//OUvWbVqFW84YxWu52HowTp1taeW3t5e+vr6xhXEX3TRRZx66hJ83x03+29sX8Ds2bPDJTjULCbQwlqoo1EzyWoLudWBOpVKcfnll9PYmKFScQ4JBtTt1e9ffPFFfvjDH/Lggw/iOA5z58xlYGCw2qAxSaVSYe/evXz7298m05DiM5/5/45Y+1T7u9NOO41ly5Zxzz3347ou8Xic0ZFcdcjlyK8p/He1fikaDa7yLcsimUwRjUYpVxtePvLII+zcuZOBgX6SySSrVi8bt5yOmqWnll9RGa9169bxve99j4MHD4YZDRWk1KtcLhOPx+no6MB1fEZHRxkdHWXPnj1s2ryJHTt2EI1ZXHHFm8NAV9P8cUGd7wcn0kgkwpIlS5g9ezY7d+4Ml++IRCKk02my2SzDI8NMmTyF5cuX89GPfoTOzk46OztJJNQwaTBcWSzaYfapvb2NKVPaWL78VN70pjdx8OBB+vv7+bd/+zceffRRdu7aRTqVJpPJhNmZWCxW18w+27bDYd5sNsspp5zC1Vdfzbp161i0aBGRiEVNg3/i8Wg1A+oxb948nnzySX7849u544472Le3G8MwSKfTjI6OUi6XSafT+L4frj6wdOlSLrjgfE477TTe9JY3hhNNJk4mUcOjlmUQi0VIp5NMmtTMjBnTWbZsGY7jcOnFl/Hwww9z11138cgjj9DX10cmkyEeDzJws2bN4sYbb6SxKcPo6GhYd6myvLXDysGxycCyTC655BLe+MbLQQuGMPft6+ahhx7iueeeD4dqa2sIxeuLvOviqJLJJA0NDdh2taYhFgkPFuqqq6Ojg8bGxnBYIZVKhUWZqlFiUEagVbMI8MLGTfzwhz/AdW1aJmUYGB7B8XXmnnkpM859E6Upp5OvJLEdH02zKZsFfEqgB4FTGwZaxKKit9Jf0KDcRDptkl5kML08RM7czeCOnUyKN+EkDB589Hm+d8vPWbJiJVEziVUoB4UdFqAFwVyhUAizGZqm4ThO2KdJZXlATbWPVE9wHosXLw5PDq77u01Brz14q5Ocmvo+ZcoUVqxYUdP9O7iP2o7aoT2AJ554il//+tfVpVniZLM5IKjT6evrxzRNGhoaOdDTw49vu511513AqtXLwseCQzODjuvQ3tbOqaeeWv0c2NUeSeODvSO+PrRgBpNm4vv+uNl5pVIJ07Boa2sjmx2hv7+fX/3qVyxYsIDFSxaEwysT95Oa3ej7PgsWLGDq1Kk8//zzYf3NkWb5HYnanuHhYUrFoP6oqSno3+N5Hr/97W/50Y9+xBve8AZaW1uqn41KuP9rH8P3gz5BixYt4tFHH6VcDj43iUSCcrlMoZBn7pw5XHfddVx22WXMXzC3umzL2P01HUwdzAlBuqoBi8VNumZMZeq0yfzN3/4ld999Nzff/D2ee+458vlcNQjR8TzVnLX2PVL7ZSywrH0Pz1i7mnPPO5vLLr2cadM6xm5D8Fn3fdWkNqgzampq4pxzzqGtrYNkMsnN3/kew8PDxGLxMMCAIDjVNI0VK5bz7ne/m8suu4wpU9rwq7V/Ph5eTbCtEXS6VzP/gtv44WfKsoJhzLnzZjJjxgxmz55NLBbjjjvuqAaqQZCezWZpaMiga9DYMDZZpbbkQGU2g7qp4D0Y67Ae7PNkMkmhUAgnrKhVDlRTWPH68jJ0OhEns9mzZ9PR0YFlGeOKjxU1401dfakhHDVcdTi27XLvvffyxBNPVP8/6Io9c+ZMVqxYQVNTU1g3EY1GiUajxGKxsIu2KhJVJ9KgY7NJqRR0Sl66dClLlizBMAzK5TKNjY2UR0Z44IEH2L59e1AYqmlQM8tGTUFWdRCq7YFaNkMFU2O9fMa6b8+fPx8IAgEVWNRb/zB+YWMvPNnous6iRYtIJuPVBXOD4EgN4dXyPDh4sI8NGzawe/duUqkgmzM6OgoEw0GqFqqlpYWW5hZ6enp44IEHwgV5J5oYEC1cuJDOzs5wjTrLsmqCrSPXSoHqPq+Nq8vyPI9yuVztUq2Hn6Ndu3axYcMGhoaGwu2ozQDW7reg03jQEToejx8yc6peqlBb1Q4p2WyWqVOnUiwVeeSRR9iyZUv4N1WDVJuxqP1+nH766eGFRDCtvcTg4CCzZ8/mgx/8IB/84AdZtWoZDQ3pMGhyHA/HcfE81YXdo1gs4zjB+zMxiWYYOnPnzuUDH/gAn/zkJzn99NPJ5XIUCoVwqOxYVP2bWsD4sssu4y1veQtTpnSMu536rNcWrkMQEFmWxdKli3nrW9/KmWeeGS49o5aiUev6zZ8/n3e84x1cffXVTJnSBgQ9pCAIhnQtGNb1fT8MkiAInjzfC28HQRBlO3Z1tq/GGWecwXXXXcfy5cspFAsMDAxUh9Q9DAMch2oPtuAxVfAzcY3Ksf3iYdsuxaId/k3tI8MwZJjudU4CJ3FUXV1dxGJBnZLKMKmmmLVLpajhCHWwVlOxJ2ZTdF2nu7ubX/zyLjzPx67o5EYsou1LmLXqAzS33UAlewaR7EKidgdlJ0u+so9SYT9OeZioHaehkkFzEviVGMMlB1e3SaaLxCIjOE6FaHMHHXMuZsrCsyhUIvhGA0Yszv49e7nnF7+mbANGBKqNAGszYqq5oaplyuVyOI5X0zFbDzM8akZZZ2dnmOlQtU21fZWOpvY2qmGlWiJi6dKl4T6bSAV5rhvcf9/ebp5/7gXKlQqZTAOGYZHJNIbvVzyexPc1hoaGcF2XkZFRfvWrscCpdjtq/20aZvgaZ86cGWbDVKBxJOqzUbHHbqOCXTVzzLKs6syv4POTyWTwfI8dO3aQy+XC96O2OenhpvjPmDGjupJ9Kdxf9WYCSqVgplrEitHY0MykSZNIpVJhYDQyMkI6lWZ4eDjMatV+9msbjgbbGDzuaaedVs2uaTiOTT6fY/r0Tm644Qauv/56Jk9pxfX86meruq/NoHO1ro8FKvF4dFyBt+cRBla+D+VyEdPUedObLuc973kXpyxeiOvZOO5Y76aj81D1Wr7vM3NmF21tk9B0sB23ppf7mOA1B/dTS7oALF68mPXr1wfBZrGAYejjstBveMMbuPTSS2loSFIuu+RyJQzdAnR8NDwfPB80zajORtXRNTP80TBwPR/X8wEdywwuqGzHxbTg3PPO5sILL6SttS3swzTWg47wYifIFLvjjknq/bRttyZINMK1MhOJRHgBpz77km16/ZLASRxVe3t7eOA2q52F1dVaOHOqWiypsgbqqrT2oFp7kOrt7eXZZ5+tFsAGRc6TJk1i+vTp4WNkMhqVSnBlr5bQqC0WVYGDmuJdLBbHrXLe2trK6aefHk7jbmhoIJfLce+99zIwkAfbh2rgo05+42tWghN8sD1j05/DgKDiEImYeB60trbQ1NREOp0OM0ZqZtex1NY11W6DZVl0dXUBVIdd1BBCZNz+NIxgCG94eJi+vj4MPTjhDwwMUCqVSKVSjI6O4vt+dXq2G2bx9u3bd0jQVBsQqN+XK2UaGhro6OgIAxnVtPRYgin76qRkh0NsKgBTNUmVSiVYld4w2bdvX7XVQSW8n9o2FbTWBpNtbcGML7UY8lhjzmNuHrFY8PlTWZHR0VEGBwcplUphl/rW1lZ0XWf79u1hJhIIM4MQZF7Uc3oedHUF2bl4PB7u8zPPPJOrrrqK9vYWymUbw9Cqn62x7VELXKtgKlh8dyxgCtZxHAvQotFoWBT9lre8hQsvvJCGhoZx23Y0KjOq3lN1n7ELibHngvGfi2B7g4sp23ZJJGKsWLGC6dOnh5/PfD6Ppml0dHSwdOlSpk8PutIXi0VSqVh1gkb12FDNOA0NDfHsc89y9z13c/c9d7PxhY1kc8FyKYY+1uzVx0ct7g1B7dWUKVOYPHkyyWQyrPXK5UphoBa8P2PF6hOLvNVry+eLZLN5RkcL5HIlhoaGwjUQ1X5SF5Ti9UdqnMRRdXV1hUWawYF7LMtUuxiuGo5QyxuY5lghOIwtbeI4DnfddRe6ZlIulzAMB80oklp0AX7TqThOkljZJl3qp1kvMQyUi2UqZZ9JDa0Yg0VSiRZGbYOsb1NwS2QyKZrsbcRiMforLkalgVxpKi2z3kpj56MU+zaSjJRpSVV44cUNdB/YQmfHjOp1bgZdDwIy27bDad2RSDDsWBtI1P5b1UDoOuRyBebNm8fPfvYzUqlMOPvNcRx07ehfMRVEJBKJaufrCrFYjHw+z9SpU8OTvzp5TSwIV32Genp6OHjwIE1NTdUapxiaFszAq+2+bZpG2OSwt7eXnp4eZs2aFb43ahp32D+o+t7pejDVXg29NDY0E4lEgi7q1TXhgizI+PqicGjFh1QqdUj2sVKpkEqlaG5uZu/evSQSQSdw1X8KguBAfc4m1hQBnHLKKRw8eDAs0FdDvPXwAU03icSC2xvVLFi5XEYDNENnaGQYw4ywv7sH1wuCV9t1MM0Iqs2Gmkavghv8YJHf4eFhstks8+fP51Of+hQzZk4HTXUiH1vP0bbdajZTo7u7hzvuuIOXXnoJgDVr1nD++eczaVLzuG0PAjg/rMPLZDK87W1v44knnuCBBx6gra2NwYFgvbxsNjvuc6Q+S0F2xQT06jT9ePWiRA8vmII2DGPva237DF0PirdVo8j5C+Zy1tln8utf/xrHcUgk4gwPD9He3saqVSvD525oTOH5oKNRLDpEIha6Ac899yKf//znufPOO6vfwwitra1cfvnl/O///b9JJOJhF/dS0SEWN8O151zX541vfCNf/OIX8TyXSCTC/v3dnHnmG9C0YH/9y//9Jy655KLqVujVIHTsmKa+13/zN3/DL37xC1LpBlzXpVgsksvliMfjYb1jLpeT4vDXKXnXxVHVXlXVHnR/l1lLwX1VpqYSrhkVNMoLCrBbWlrGdcEeGhqi4oxSdINC3WgkuDIeHhggO1KBaBONU5rxMLHtPPv37wfAJsW0ruawIV8mk6HQO7Y0SFCgWzjOvTKemklYexWrafXV2kzcj7V9nYLhIvX7sdvUPu7Ygsp2mA0MrqCD4bRgmC6O7/uMjIwQjVo0NjbieR65XO6ww4m1AcrEbVPZxpdrHTZVF+f7Y72XVMaoHr5POAmhtu5NDb8eLxWAqh5Kx3pPJwYmnueRyWRYsWIFLS0t4xp61lJB00MPPcKtt97K3XffTX9/P57ncffdd7NhwwauvfZali9fXl0HUq21NjaMbBhG2H/qscceY3BwkGMNKtRmUFQ938GDB3n++RfYtm0bhUKBzs5OTjllIQsXLgw/Y0da4sSyLNLpNPF4UByuatjUDD8VWKpMll3xw+GwkZE8jz32GE8++SSDg4PV/WWyectmIpEIV199NaeffhqOEwy9xWKH1r3VNseEIBMbFKYHt1GB/sT3St1fKZVK5HI5evsGwgsJlVFUzyNevyRwEkeVTCbDA0xt1uP3DZzUlVupVCISiaBpI6RSSZIdi/EadQYHnqF7y/1s/fVXGBoaYsa572ftmouJRlLs3LWLF+79OtlsluSsRZyx7k1kJs1j//497Hzw6wwPDxNtWYYeuZpE80I8z6N50gz6XtqA7tkYmsZQHvJZD48YOmr9MZ/x65D9btRyH7VDicEQmo5/jPhCBUi1gYjqkzV+CC381yGP4ThOsESGHixREgyD2UCQgRkYGCAej7J48SIMw2D79u1ks6O0tLSEJ92JwdLhimaDK/JIWPz/cizJEY1Gq0v4eNWFpIOi8d+lfqRQKIQzvdTw38tVf6JXh4ZU4D1xaHXsdmNDXME/gnXfbNtm0qRJXHzJelomNYW3V/vOsoIslcpA3X///dxyyy10d3eHEyJefPFFDMNg5cqVrF4dZG3K5QqxWGRczZNhwJTJkzl16ek88vAG9u/fj2Ud/XtqmpHwdWmaxr593Xz3u9/lzjvu4oUXXkDXdbq6ujj3vLO57rrrWLFiWRhEBBnB8R9wyzJoaWkhmUyGEz62bdvGr371K9797ndTrgQNM9V7FLHiYfG/6qDf29uLYZhYVvDZbW5qYd68+aTTGQxjrF2DapEw9vllXKlA0BqkUA2sg/eoXLLxXDBqznwTP/+eR9jYs1iqjBvC1PWxZqwvx+dfnJgkcBJHNXEmXT0Fz0ei6o1KpRK2E9QlBDNexrILjuMwODhId3c3ruuyZcsWTj/1HOKxDMPDw2zbtg03myVqpjizWuswPDzMSy+9RLm3FyZFmbd0gFhjMPOrsbExyEZU6xpc2z1qUfPv43AZJ133w6GuY+0TdRKpLYQOFhyuLzNmmibNzc3ouk4+VySZTFZrOYICXtd1Wbp0KR/84AcxTZP/+q//4oEHfhVu++ECJ7Vt1Fxdq6FLFUjU0wDzWFSxvWEEQ4SlUjmctVcPTQuyCupxVOD0cs16CpdW0YKu2vW8bt+HSsUOa92amppYs2YN0ejYa6oNTFXWZ3h4mEcffZSenh4mTZpEY2MjxWKR0dHRsC5wwYIFNDQ0hHV7hhEUzOdywZqKpWKFXC532BmwR97esTYAL7zwArfddhtPPvF0+Hl46umnGB4ZZNasWSxffvpRZ6NB0NU9EomQz+d58cUX8f2gKWZ/fz/5QjbsUea6Lrlscdy2GoZBU1MTsViMVCrFVVddxemnn87SpUuZM2dWGDCpAKo2I1sbOKmZb2ro2XWdmgDx2PvDdd1w2Hz86xvLbP6ubS/EyUMCJ3FURxuS+X0OHLquV4d7ADRiTieRcgN+2cAtapQdg1w0hRubjq7rNGcWokWaKRDFjzcS75xCbniYVHsay7KJeGWaExYtHbM54CcwpkzGyiQxI2U03SZaKaD5JrYXRSOCZ8ZxjRRWOQEGYAbBBRx/EPD7GJsd54Yz89Rw2P79+8edHCaq7WTe0tKEYWhhYbymFatF8yOsXr2ad73rnbz1rVdimhCNRojFg47Zqs0CHPkKWiNYq03NyAu2t/7g5miCejiTSCRYxLlYLNLc3Exzc/Ox71x18ODBsJi/VC78HhknlXk8lBo2NE2Tzs7OauCogT8+kzNx36kO3FbEoGVSE9OnT69Z986vfv49XEfHMoNJBjt37GbL5q3omkkykWZwYBjDMIjHkvQe7Oe/vvQVbr3ltnAWoqoRC1oPeCQSCdLpdJi1CbbpSK/NI8i0ji+237tnP7t37SUWizF16lRKpRJ9fX30HOhl60vbyeeLpFKJQ4LHie1BgHC9vJaWFqLRKNlsNrwYsKygY/zMma0sXLiQBQsW0N7eTltbG1OmTKGzs5PW1hZGR3NkMqma5xl7OeN3efAH3QDT0sOh20gkUi0mr13WiNqlIse9BvX+1s6eHV8QP765q3h9ksBJHFWhUDjk5P27pKonTtuOx+NhDYTv++RyOXQtHl7Zd3R0kFi9msWJLLZt0zDjfDo6OsiXK3R1ddFwwQX4vo8dT4SFxB0dHaxduzaoS0h2MnXqVLTqrK+BgYFxU8YTiURYTHvMdFCd1JIQQfBjhDUWvn/sIcDaDJ4aXlAtCYKrdbUfD39/dXBvaGggnU7Te3CQcrkczjJcsmQJ73nPe3jrW9+KqmNdv349uhHMmKzt/n24QnilUChy8OBByuVycDV/mLYAvw/VB0j92zAMurq6mD59et2PsWfPnrAIPpsba7B5tKCzXiqLlUqlWLx4cXV4GQzNwPXcYAHdCTRtbJsikQgtLS3VzND4pXWCuiT1PHDgwAFyuVzYd2toaIhMJhMudzQyMkJPT0+YAVNBczAhwwnWbhsaCjOgambZ0Uwcdu/r6wvfExUop1IpSqUS/f39DA8PV7dPTSY4tJGmugBwXZfGxkZyuRy79+wGgtmGK1as4Nxzz2X69OmcddZZNDY2HPI+BcNxPplMqlrHFsxi1bSxjF4kYoWz/8b2/diaj4fLjgdB0Fhbgon3V+9fuNC2549rh1E7OeHlHBIWJxYJnMRRBVPZD51V97tSB/lkMklzc3Mw08v2ScZTuGWLQu8DDLV6xFIzsZpW0rl0SRAg6S7DJZOhkk68cSYZ8x00x1M4dp6oHsUuR2iJR0nOCYrL9xgeRlMLhZE+DPsgo3t3YFDEMW1Kuk1skk2izQVK4PpgWRxvtkmtRRZkTyJhDyDP86r9aI5srDZmfP+oSqXC888/H2akdF07pPC4umeBIAiaP38+fX0DjIwOoWGwcOFC/vRP/5T169eTSsUol13KlSKZTIoLL7yQ2bNnV2vYxmbR1b5X4XvnewwPD9Pd3U2xWCSdTlPRnJelQFw9p5oS39zczCmnnMKMGTPGbdOR2LbP7t27gwWmq4vpqn15XEGTrwc/WhDIdnR0sGLFinHLgvieFtZeq2BTZZX27t0bBk6ZTNCx2jA0NM0ftziw547NSBwZGQl/Xy6XwzohtXCvZVnhPjFNs1rLBp6noesmlhUNg57gb/X1EdPQwqJtNTM2FoszMjKC7/vBGnVadTFp3ULXAE0Li8SDz+LY2njBELWLYWrh+nKpZIo1a9Zw3duuYdmyZSxYsIBYLILrldG0YFjV9WoCy+rMQ9dzMXSDSAR87HAIVjdUwKM+H4cvuh8LbI6cVTycsBdbze+CbdNels+9OLHJ1ABxVMG6a4EjNUmsh7q9YRhhZ2sIDlC5fI7BwcGwP1OxWAz7/KgThGEY4xpxqtuVy+WwN5Aa8srlckFhZ7HI8PDwuFkwyWSSVCo1Nq3nZVCbcQImZJyOTt1WXcHWdg/ft29fTT3Fkbtzq4Bj8eLFdHR04HkejY2NnHXWWVx11VtpblYn7mDfQ7CkxIIF88L6ksO9t7V9uvL5PENDQ+HQmtrXxysWi4173S0tLXR1dRGPxw/b7HIi27YZGBigXCmH2/RyznpSzT47OjqYM2cGQNjJuzbboqh9NzAwgOu6lMvlsBN9bZ8wRdeDrtaaRhhkOY5DLpcLlzsqFouMjIygaVr4fk3sYq0K6jVtrMt6PX22gmGssa9CqVSiUCiEkxbU8klBI1in2ndt7LNYW+szMROtLgBSqRQrVqzg+uuv513vehennbY0CJpcH6PapdMn+Hd1sZVxLStczw06hVdnjlqmhWUee5h4Yn+yI80WnSgotvfDrFltk9iJvxevTxI4iarD9QiGzVu2oOlBR1/X8/AB2/FACzr94gcHt0KhQDweoVwu4Hk2lmWGj+c4XrXnjU6l4rFu3bqghkVzyUayDKcPMLrxIaxtzzCtNEinp+MYJnnLIGvaVKw8Vqwfu7KTRCaHYwyjW4AVo9CYZJdfIp9pI2smaCzbTHNG6HT2s+vhW+l2DhBpipF3CtjlAtetO5/TJk/H1qL4kViw5IPm4GPj+WUM08HzxhaR9T0d1wHfDzoZgzox2PhUqq/P58UXt5BMZqhUbGzbCTtio3nBzyGCK2DfC7IOoBabTVAoFIPs2Z493HvffRimDrpfnakFrl/d/8FKWrhucDK4+uprmTVrVjBUV8pz18/v5FcP3I/tuKBBxS6FzRZrL5qDE7BGkD1ww397noPruUSsCN/93neoVMpkMmmGBkewLAvTNKlUxh5T1ZEc+irBdWxiUQvXKaHhELHAc0s4bpF4wqRQzGJaGhdcuI73vu/dANUAshJsh2sTZNccHLcEOIDDo488wc4d+2jINJPPl0glM4wMZ3+nwnVd98OCY8+ziccjeH4Zzy8zMjLIwoXz+PSnPxXut7EGmGPNEzXNZ2hoBNPUOdgzyF0/uwddi2LoMQ72DFIpe3hucB9dN2uGjwmHUCdPnkIul8e2HaZN62RgYJD+/gHS6QyWFaFQKBKPJ4hEopRKZUzTwnYKVOw8kYhBsZirDmf55HKj4cLcnufh2P7YV9yH4LNs4OOBHvz4GqQySTTDwHY8NN3EcX3KFYemlmYGhgaJJszgrpqHj4emGWha0AdK0wx8D+KxJJ6r4bkatu0Qjyf40z/9U66//vpxzT6DruoAJvgWtq2Bb4Jv4rtRclmHgb48T/x2I3//d59jy6bdaEQAs/p9HBsw8bxqJkrTiEZSOLaGZSbwPQPLjOO6PtFofKw1gQZo4wu8VQDvOJWwma1qHOt5PrpuVJt9Bpk3x5bM0+uVDNWJo9q7dy/lsk00aoXrpamrVMdxiZgGsVg0nCWjrqrVkgTBNOmxmpNIxKSrq4sLL7yQL37xi6SakuGMm82bN5NpX0rDpKDPkG7plG0bw/IxDB3NB9dxcW0bCwOjOsVYNaXDc6qL7Y6ya9cutm7diuM4lErB7KbOyVNYs2YNESsSBiuGfmiRa1DHoodXuIZBELT4oBZO9XHC4aD+/n6GhobI5XLBsiGeF3ZzPl4bNmxg9erVpNJBLZJlWkHBsueEy6EE9WEGixYt4q1vfSu9vb08//zz7Nmzh//9v/83H/rQh3jb295GIhHDtoPtV++lmmav/r82U6brOho63Qe62b59O8PDw1iWFbYkCNoIHKr2ZKQWTVZLb6j7qRqcgYEhhoeHaW9v581vfjNve9vbaGtrq5lZF3SDV9nGcqWawaku/vr0008zMjISZuxUzU9tLcuxqBlgpmli2zaDg4M4jkNraytr167lve99L2vXrg1vH41a4efadfwwm6TqxbZv386+ffsAws9CNpultbUJu+KGQ1yu62LoOpWKj65rZDIZJk+eTPeBbgYHB0mn0+G6ja7rMmfOHNauXcukSZPCYUArEnTo9z2NQqFAIpFk165d/OxnP2NgYKDuRqB/KJZlsWzZMhYtWoRlBUOZqnEmMC6jbFkGB7r72Lp1Kxs3bmTHjh08/PDDDA4O4nkeK1asYNEpC6oBl1PX5AQVDKmsUZCdrsZNNTV9tZ95tVLByMgI6UxjmMkzDCNcrDk4Lhg47ss7Q1ecGCRwElXqDDM+67Rnzz6Gh0dpa2upFmy64UnWsgw8NyjctCwr7KdjGAae7+D5zrgTl+ME902nk1x22SX88IffZzSXJWUm6R/cx/NP30vr5Emc3qiTiTWSt+MYWgKvEsO3NVzfx///2bvvODmv8mz819OnzzZtU+/VlqzibnAFuRsMmPIaU5LQQvISEgfCS0LyhpQfhJAQbHriBAw2tl8wxTa2ZEluclMvVq8rbS/TZ572++OZc3Z2LVuPi7ysdH35CFmr3dlnZlc719znPvdxg6qGp6hQVA1KIQdTs+GUh2AaNtIRDV2HX8LOLevQeXgbEokIivksfDuC85ZfgvPPvQgKgLKdRzQSrd5jHwo0+L5SrQhochzAyCUsQNPED2tFPloHDx6sOQIl6FGpncL8Rvz617/GjTfeiHPOWSzfpqmaPBwVCI6aAIJQes0118C2bdxzzz3Ytm0bnn32WfkD/6abbpJTqgHRszayR0S8cpcBSgGefPJJbN68WTau2xVPHrFzouNaatU+cWezWTQ3N8t+MCA432zOnDm47LLLcPXVV2PKlEkAIIMBoCISGW5gt8xo9e/LcN0KVj/+GIYyA9WdV558/IFwzeHHj3chGo0iHo/DNE0kEglEo1G0trZi4cKF+NCHPoSLL74IijJ8zA4AlEplRKPDhwMbhgHLMpDJ5PDUU09h7969sCwLjuOgu7sbx44dw4QJ9Sd8vIJt9MC0aVOxfPky7Nr1EjKZIbS1tWFwcAD9A/1oa23DypXvxMc//nHMnj1d3kapOs+pXA76f+KxKB5++DFs3boVhUKh5vtP7DJ49cfj9TnRJoigtKXrGpYsWYzp04eb/cWmieFRAsG1HT16FF/72r9gzZo1ONbRif7+fjQ0NKC3rxcTJjTCihiyx2y4ojjq35dSfZsi/j2q8HwHvu/C911U7NKonXRiDIg/okrZ0NAgX5CJ7/tyuQTLisC27WrlSsFrGftApw8GJ3pVnZ2d6OzsREtLEJyGK0rBk4iqBluvRYVJnIdmWvrLKi5i2B8QnB7/7ne/G3d+9zvQExEk02lky2U8//zz0CLNmLv4QiSTSQwVbPgI+pE0TYNuVisl5WDruqe6MEwNkUQCpp/H8eNH8cJzz2Hv3r1QTRPRaBRDuX5MnjwZ1113HSZMmFC9/ooMTp7nQauGJdd14diO3MZcLBaDScUGqoe2Bq+iPV9MbNaxYcMG6LqOeDyOQqEgZ8m8kZlXwtatW/HCCy9g7ty5iMUiqNgVmIYJTdWCvo/K8DERjuOhubkJH/7wh7Fw4UJs27YN27ZtQ19fH44fP47+/n40NzfJ4AuceHJ5bS9OLp/F2rVrsW/fPkQiCZimiUI+OL5D7Ix8NcFjFlSCzjrrLNxxxx1yZ2NwxIyDyZMno6mpUT6Riid70TcWiURkOBHvo6oqfvGLX8gGetEXpqq1hwKf/PFta2vBX//1X2NgYEA2ykciETQ0BAf+1j62tU+sotdHUYYHg/o+sGnTJqxduxaFYkH2Kx0+fBhbt27F4sULZeO2GJAKfzhApdMJnHfeeXj++eexYeMGHDhwAD586JqOuXPnYvny5Zg8eXL1eoLHJxobfuKOx6OAHwSQgwcPyh16byWxS632V2Njo9zFpmnDB1ML4ufEkSNHsGbNGuzevRtNjc2YPHmyrACtOHeZPLuxdgjpyb7GYuODruuyoji8tDy8VCe+tqJqfu655+KDH/wg7rn3Phmod+/ahVg86M+MxWIwTRODg4Nv3oNH4waDE72qfD6PI0eOYPHihdXgpFR/AA4/iWzduhXd3d3BgbiGiqHMAKY3T0cymQQwfDgpELzCU1UV6XQaH/nIR/DUuhexb98+RKMV1DXpOHJkDdavOYKo0Ydps89FQm+B49aj4lmwfQ+27sEwPRiWDSNaRsJVYcGG7fWjt2MvNm14HNs3PAk734sJiTSGeo8hGYnh3dffjKuuuK5aSXERi2sAygAMKAiqSHV1dYjH4zjW0SWPjNi1axeOHDmK6dMnwTIN+WpVVUyoWvC6ev369fJJKpvNIhqNysOH3+iQSEXR8P/+3y8xceJEXHPNyqC3wvGg6yoUKCMalIOjOHxYloELLzwfF154PgAEIx9qlpIE17WhqoZcigiWUHT5RF6pVPCLX/wCTz/9dLDLKxYMXhTN4eVyecSTj1D7Z7GcInbqXXjhhfJtYj6S+G+xPCeeLIP7FLyvpgVb8AuFYOlv9+79+Na37kQmM4hIxISqKrDtCgxTg+vZCM5WA15+NMjIoGhXKlh89qJXbBoWc5xq74eqqtCrgyc9RUE0Goy32Lt3Hx785a+xYcOLiFgmFCX4WnR2HcPTTz+Nq666Ci2tjcHnrfbQBWtGDhw3CBBXveMyeH4FDz74IDo6OpDNZtHa2oorr7oUCxbOgRXRACUI8nrN4yi+z/r6hrB582b09fUikYhXQ+QrhVv/ZY9H8Gd/uDdPUarVGzGme2SF8mUUvKynT9OCa3ZdD7o68lDj4a9PsKRWLpdRKpUwlBmAqqoYGhrCokWLcOmll8rQODwH60T3SzRxidsN+vVM04CqKi/b7DK8k9SR4duyLLztbRdj8uSJ+PuvfhW2baOjowOf+9znsGPHS9VNJwPVs/jiJ34c6LTG4ESvqre3Fxs2bMCll16KRGL43LrglT2w8cVN+OUvf4lDhw7Jg349z8OCBQuQSiVHhCZBPEmdddZZ+OM//mP84z/+I3bt3YHG1pag36mrC2vXrsWWnZ245NKbEY0lYMVS0BWg4pXgOBXAt+ErFRTKHo53d+DQ0W04uGsTDh/cDLeYh2Wa8nyxpRdchPe///2YMCHYURYMJjTgeA4M1aj+8PQwffp0zJo1Cx1HO+UT+RNPPIFVq1bhmmuuRltbc7XCEGy99n0fjqti//79KJVKiMfjsCxrRJ/NG5VKpbB69Wq0t7diyZIlaG9vBTC8Tbt2RxoAGWZET5CY0gxAnrUmQoD4/UQ7jsrlMjKZDP71X/8VmzdvRl1dHQzDwNDQEBLxNADIr/Xor2st0b8ijDyWZnjSem11UtwHUfULqj3B/YvFItix4yXceeed2Lx5Mww9InetBdeiyZEEYdTuKqwdZSCGS9Y+XiMrHcqIqmJf3wBWrVqFRx99FJ2dnWhtbZOjGwDgxRdfxLp163DDjdfBsgw5q6t2FxwATJo0CR/+8Idx/vnnY2hoCKlUCvF4HK2trXKwpJh8L5bFg4pJ8Pg8//zz2Lp1q9wNGGZn3alQ+/0khl6KkD98tIkHVRXfCyomTZqEK6+8EvF4HENDQygWi7j44otx2WWX4dprr4VhaDVhJ9wSeG1/km3bGBwclAcrC7X/Tmu/FtOnT5fRTNM0FAoFFIvBxo3geCAfpdLYPL40thicaJSRvU6JRAJbtmzBE088gfb2dlQqFWiahsHBfvT39+NXv/w11qxZA9spIxI1kc8XMGPGDFx77bUvK6PLV9kYfuJ8z8234OiR4/juD7+Jnt6jSNcnENVd9B5che4DL6B3/3q0T1yAKbPmoaW9DbGUBcWwUXb7UCqVsHdzJ3q7unHoyE4M9h2DrtpIWoCheFB8DyuvuAQf+9iHsXjxXNn/EPzgFmfBiWUpFXPnzsWypSuwccNmOdxu3/59+K//+i/s27cPS5cuxcSJ7dB1HbF4BJqm4amnn0VnZyfi8TgqlYocylksFsM1h59wx93w10FRgmng69Y9iR/96L9w883vwvz5c+E6PjTz5cMqaw9lrq3oiIqPCCuiUXv08Rm14cD3fTRPaEU8lkTESlQ/lyrn8xjm8GTlV6vYAHjZ56j9GEVRananKS9raFYUBQqCA2H379+P//rP/8bP730Ahh6RUyXE95MIJGGJ8BI0yA83G4ut/uLxEg3BYjlXVMd8X8Hhw0fwy1/+Er/4xS9w+PBhqKoqm4sdx0Fdug779+/HT3/6UzS3NOGSSy6pVm4V+L4DRQkeG1GhNE0T8+fPPcEyqlutLg1Pta4NiVu3bsX9D/wcL+3aMbxhQj6I3inqbxo5gXzk5/Pgei5273kJ/f2DaGioG/FxwdwncYSJi6lTJ+Pv/u4r6O/vR3//IAYHBzF79uxqaAy+J2w72BxQqVTkPKtRn7j6b2p46G3wIibY+dvV1YV8Po+6utTwldTMLRMDT8XjalSDtTikWFF82HYZtl2u9vlF35yHkcYVBid6VZqm4cEHH8QLL7wA13XR2dlZDVAlZDIZwFNQLBXR1tYCRVGQz+exaNEiXHHFFQBOPKFXnM0FAPEE8NnPfhauksO3/uPryGazMONRaJqGZDyNoaEhDGV2YuuufYCqQDF9qBEPrtsHFItAMQVdUeH6WcRiMViGh1JhAIriYXJbO2699Va85703AwCKhRKi8WCQYMkuwDIs2SfheT5aW5sxd+5c1NXVwbaDbceTJ03Gli1b8Mwzz6C+vh7RaCTYTaYEFY4JzW3o7urC5ClT0NPTg2QyKWdMpdPpULOIXk2lUkF7ezsOHDiAf/3Xf4WmKZgx489GHAchqlsiPIjt8rVPKqIyBQw/UYjdkbWTlH3fkzOzfN/HV7/6VXz+85/Hpk1bZCVLURRks1mk0+mTVtVqg5rodRp9xEzttYr5OKqqwfPE7K9gDsOhQ4fwzW9+E/feey8qFbt6W5D3qba3LOy5ZLUDSMWsntHXLpZvat8u5icVCiU89dRT+P73v49t27YhlQyWe8V9zWSCw5SPHj2Chx56COcsXYxZs2Zh4sS2aiVWlQFXVJTE4yC+ruLfjagiia978HGm3IywceNGrFq1Cl1dXZg8aSqy2WzoytubqfZz2raNHTt24MCBA6irO6dmHIYnX5yIr704f6/2uB0xUFT8fe0LgTCN2eL7wPM8FAoFDA4OVqepp6rXOfLxFaG0dgCmmNsllrtt25bLt29CUZnGIS0aTXxlrC+CxpAfTMOFMvonQHXOkC92WHmy5B0En2CPfqVSwvTp0+A4Do4dO4YVK1bgf//v/43ly5cO31JNQ6/4PXi16cNxFUTjKs5efBamTZ+K7uPd2PfSfqhOBS11EZh+Frrbg/pIHk7+EKLaAEpde9GU0KE6eeiVHkS0AtJRFYpTwlBPD+qiSbzv5vfgL2//C1x3wxWA4gBKBYYpKkwqNM1C8CpZgTh7TdNUTJ82E5VKBRs3bkS5XBoxfNP3/eryjQpVUaHrBgrV3XOieVk8+Yr/fqNEgDCM4Cy3HTt2Yvv2HWhsbMK0aVOqVQQFfnWaMxQFanUJLxgcCDn/SVQ25JEU8KHWTI0OPnx44ramGWif2IYZM2aip6cXBw8elAEt+HsNs+fMxDXXXitvu1QujdwmLmbkaBqUmgqKVn0C9KszdXxfCb4NVTV4PwVQVAWKqqC7ux8/v+8BfPUf/gEPPfwwHNdFNBaDogb3AYqCUrmEdF0duru70NbWho/9wceq1QJVfi+fqORS+5baZbraao9YtqutTPT29uLQoUP49Kc+i5/99B50dBxDIp6UgclxgsfIsizk83mk02kYhoH165/F4UNHMHnyVLS3twa1Gk1HMJFajFBQoWk6HMeVfwcEX1fx94qiBv8GFQWFYgHf+c738c//39fQ29uPVLoOhWIBumHAcV3oho5zli7D299+CQAxS2p4AKzjDC+nr1//HJ555hn5vVupVGBZwUTyxsZGfOQjH5WbPBQFwbhKZXgEiapq6Ovrx89+ei8qZRuFQhEKVLieg1mzZqGhob46Db0Ay4pg+CSC4D6PrEwCmUwWkYiFQqGEp59+BjNmzJC9lkHw8qs/i4KvX19fPzZu3IgXnn+xOn9peNJ6uVxGsVDC5MlTsHjJWdWfa5A/y9Sa0STDYcqHrqsolyv48Y9/jEOHDo3od1OUsTnjksYWK070qlzXDY5HcWxkMhl5AG2pVILjOGhubsbevXsBAJdffjk++clP4pJLgh/Qtdu3X4koitTX1+Oaa67BxLY2PPLII/jNb36DnTv3wrQMVCoeUl5QEUgmk7KBNJfNorW+CUODOWQyOdTV1eHCCy/EFZdehutvuAbLli8BUHy1Ty8FFRmgoSGFP/zDP0SxWMQPfvADVCq2bFYe7msowbaDJ1LlDTZ/hyGesE3TRH9/P1atWoVMJoNnnnkGn/jkx5FMJqFrugxDjhs0C4+eUTWaUhMbxCvnim3LvhtVBbK5At72tovhecEhvy++uAFAsKNO13Ukk8lg2c8KPpeozPhv4CBAx/FQLgdDSL///e/jueeewwsvvIhMJoNoNFqdzVWqLomZckK12NkpDsFNxBMn/Vwnq5iVy2VEIhFZ3eju7sazzz6Lhx56COvXr8fQYB6Dg4Py34VYQgpCji+nbYvt65qm4bHHHkNfXx+uueYafOh/3YJEIiE/XiwD1i5DnWg6t+M4cBwHL+3ehf/8z//EL/7fg+jv74emBRU3XddRLBbl59Q0Ebogv0/K5TI0VVTSgmGUw5VAyH9vtcutpVIJ0agB1/Vh2x50bXhXmniMRP9XsVhEY2MjDh06hPvuuw91dXW49dYPYerUqfIYmtqvg1g6ry2S1dWlsHnzVtx9993Yu3cvGhvrsXjxYmiaVp3KHixNi4DX1NSA8847D4+vXosdO3cgnUrLa4rH4+jv78d9992H5pYmrFz5jlf8ngiWUYerXaLa5/vDE8wty4LNIZhnJAYnCojdMqN6bsrlsjzk0/OCc6uC4GCjqakJ+VwGc+fOxWWXXYYPfvCDOP/882EYWnWL9om+vUbevq/YcH0XcFQ0NbbiiiuuxtyZi7HinAuxY8tWrF79O3nw6NHjfVAGk0iUo9CdOFJGIzKDO9FUX4/Zs5bj4guvwMqV12H58nNgmKiWWVQEU6Zrz3YzZIHNrpbcNS3os3F9Be0Tm/HZP/kMli5bgq9/7Rvo6elBV1cX+vp6YVkROQQyGo0iV8i/aV+CEwkOcA2W+4IlBBfd3T1YtWo1XnxxA/bs2YVFixbhggsuqDbkJ6BrwROf6/lyx5WmDT8h+X5wSKrjOHjsd6tx9OhRtLW14qqrrkIqHey8Cw6k1WQQGh4qOdw7UiqV0FDfjMGBHKJRVy6Vua4jKy8nCya6rqBScZHJZNDd3Y29e/di8+bN2Lx5Mw4dOoSenl65vCKWCUVFLxKJYGhoqKb/REFDQwPS6TR6e/oRsWInWM4Z2TekvqzSOlJHx3EcO3YMW7duxaZNm7Bnzx4cO3YMnZ2dyGQySCbScghr0KvlQhyjIypz4vgY27YRjweH565atQoHDhzAnr27MH/+fCxfvhyzZs1CKpWUXyexTCUCk+v6KBTy6OnpQUdHB/r6+vC1r38dL774InxfQUtLC7LZLCqVCpLJFDRNr4YLC4VCAUeOHENdXV3wIkDTEbHEEUbBmX/B4E8X6XQdCoUCSqUS8vl89f7FEIvF0dfXh0gkgmg0OONRwfCBvOVyGdlMHj3dwbTzurpgjlQ8nkBXZw/+80d34eDBg7j++utx3nnnVUeD+PLxqq3yFAvBUUo/+clPsGbNGqxZuxoNDQ04dOgI5s6dj0jEhKYZKJUqiEYt2LaLSiWPZCKO8869ANdffz1M08Thw4cBVIf1mhZyuRwefvgR9Pb2YcOLm/HBD90Cy7IQj8cRjUZhGJrsqYOiwHGDjx0YGEJdXQPq6xtRLpdRqVSqu1tPPoSTTj9KfUMLV2nPZP7IJ5LRwUlRFMRiMXR3dyOdTuPCCy+ApmkYGBjApEmTsGjhfCxevBgrVqyQzZ/BUsDLZwQFvFF/qjYF+1pQ9q7dTey4OHRwL/bu3YvnnnsO3/nOD1CquCgVfBh6Am1tbfiLv/kg5s2bh/nzliKZqBu+W14wZTqYnVgbnAwA1vAflZFN1JWKU321H1z7oYMd2LVrF5555hns378ftu0gk8lg//79OHbsGFT91FecRI8GAHnUiai65HNDqKuvx9SpUzF37lzMmzcP8+bNw7Rp09DY2IiGhgb5JD40NIRDhw5h586d2LFjB44dO4b9ew9i//79mDVrJj73uc/hxpuuRzodvEq3bRumZeA3v3kI3/veD/Dss8/Cth25ZKmqKnLZDJYuWyaPorAsS86yEtu7X83g4OCIQAZAnvFWqVQQiURrdtc5smk7mAEVNONHo1EUCnkYhoFMZhC5XA7nn38+CoXCCT7/yO9J13n1yc/5fF5eT9Abg2pwiAa7DAezI3bY2bYj+8fEBgERDGzbhqIMz7/KZDIolQtob2/HrFmzMH36dEyaNAkTJ05ES0sLkslk9b4FvTmdnZ3Yv38/Nm/ejC1btqC3txeGaVaf9OOwbRulUrBUahhmMC6h2tszefIkTJkyBf39/chms1BVsVnDqm6rjyGVSuHo0Q4cP35cVprEkFPx9Vi8+Gz09/fLMws9Nwj1lmUF4RFB5em5556XpwmIgNTV1QUfLubPn4+lS5eivb0dl176tur3dFCV6+rqwp49e7DrpT04fvw4Dh8+jMHBQQwO9UPXdcyePbt6n3LVSqyB+vp6WWWMRYPq3bFjx3Ds+DGkU+nq94tfnU5uyLMwU6kUFNVDLBZDOp1GKpWSZyf6XhDQh7IZAMGLlueeew6+78tdqsFOvVf//qbTE4PTmW50cBKU4R4HUeKePXs2vvSlL+Hmm2+GZVX7ZUZ9WO3W+JGn25+4pO3DqS4ZGYA/fIaa/DAluIannngSn/nMn6KvaxCaaiJipXHOOefg/l99p7r+oMIue/ChwjSHj3gZfp70Rl3v8HWJvqSRM5dUlMtl6Hr1iaNkIxq1oKrArl37cOed38H999+PfLFw4sfvTSKaUMXOM7EMIypADQ31yOfzyGQyctdiNBpFLBaDYRjV5RtteKJ79diJUqkULG8YQQ+OYRhYsWIFbr753fjABz6AltZGlMs2XtywAV//+tfxm988VK2yBUdOqKoKwzDgOA5SqRTy+Xz1rL0oSqXSiOb1V5NO1aNSqcjrgeLJIy8Mw5DBBRC9cZBfr2AzQkFOaI9EItD1oCE7mUzK+zWSKLtVv0f9V2/eHxoaQjKZRDKZlEuC4nBpx3GQSqRGzMESzfrBrrkgeAwNDSEWC44WEodOJ5NJVCoVZDIZWZ0T99uyLPnvZmBgQFbTxIyr2iCtm0GVL5fLByMxYknoui5HRSQSCWSzWRm484VstQoUqz6eqpz4H4lEZNiyLBOu68rePcMwUSqVkEgkUCwWoaoq4vE47OrjIHahFQrBCIZcroDGxsaaJdTgcfY8txogg6nbFbsUVMCsGCKRCDRNHxGcc7kcotGorCqiusRoRYIjewb6M7KqGPShudXjfBKIRCLo6+uTj1lQfTXk90sul4PnObKCXLvjV/zSDF1uZrFtu3ock4JSKWgBMAxODj8TcamOXpU4U6xYLOLAgQNYs2YNLrnkEkye3IpCoYKIZcgnMdGwKYQ5oV6BEkzhdh3A16Fpw83kngd4ftAjUldXh3K5jEKhAMsEyqWh4BywbDb4gWtFYJjVJSp3uNn5ZK8Kho/2gKyiiOrT8E4qBWo1NFUqHnbs2IEtW7bgaMdR1NfsADoVRDgRfUei2iP+7vDhw9B1HZZlyZlBxWIRx48fh23bmDRpkjwiQiz56bqOWCwW7AB0PEyYMAFDQ0PYtGkTbLuChoYGXHPtSnR2duKrX/0qXnjhBXlsi20H1blIJIJisQjf9+XZbsDIkROvNqZA6O7ulqHONE34cGU1TWz5F1Ofg9EMZbnLLZibFZEjG8rlMlw3uK1SqYRYLDZyS36taqA72XlnEydOlIMZRVgyDAONjY2Ix+Po6eoZ0VAutrJrWjCSQB5TU+2LiUaDg2ZzuRwsy8Ls2bNRKBSQzWbl10gstzmug0kTJ8m3B+es+TJ0WJaFbD6LfD4PTQv6zeCroyqoFblLzLZtGRqGw7hbc2BzRfY4ieqaaZrVmWZluK5brVYF1bRisQi9+m/cdV1ZhQMgp72L23Kc4OBry4pVD9INvl/SdUGALJcqyGaz8LzhXi5VVdHW1iZnqgU9W8Nfm2w2i3g8jnw+XzO7zEc+n0c+X5DT/EX4i0ajyOeL1eXLoIoZicTkhgfx+NZ+3/rV66zdJSse3+Df5vDRR3TmYHCiE6u+Is/nM3Ibbn9/Px577DEsX74cH//4RxGLmWLaEABRCcCoitNJPo9nBPvcxGDiathxAXiah+B/Dvy4goKag58oQYtryOX6oKcHEU82VD8XoCguoAaf04MCx9WhawB8QJU9XKhW04LepNo5LLX9MJ7nVK8/eMJWq02iBw8exOOPP47du3ejob7hDbRAhyOHBboANBW6pkExgx4y3wNaW9tkaMjl8nIbe11dPWKxGHp6emR1KBoN+pccx0Eulw9GBEBDuWyjUgn61rZs2YLvfe972LR5g2xED5ZrE9VX4UGQFdWIVLIOpVIJphGRVTFNN6qVC/+kFadYLCHvp9htKZ7IPM+DovrV27Vl+BC7pQYGBgA/WBYTR/wElSoPQ0ODoyqIIytNouJ4snERuVxw+K9pmojHhweoDg4OoaenF6lEcsQLhOFKmycbiYOwVJFhTiwXOY6DffsOyFBsmhFYljVieS+TyVQrbgoMIwjywWMTLIlHozH5hO84DhxbhM3hpTpV1RFMVrdhRSLB7rJiacTk7OHjSEQl0R4x2kFRIL/utUtVfjVolcuV6i45QzZViyWxRCKBdDpdrSwW5YssAOjp7pNft/r6eujiEGsnCFeZTK764iaoRCWTCblZIl/KQ1O9YEcmfBnoDcOUod5xnOrOWAORiIVkovp3ng9dM0ct5aryxZ+mVYdmuo7sUdM0DUNDQ8PVsurGETrzMDjRq2psbERfXx+ampqQTqdx8MABPPLII7jggvNx1lnz5U4dYGQD8XDfyknmyIx6F7HNGQqgQg3OqUMwfVgcuquqqnwVXi4BliWClwIXXnXpT0HY9qNSqTSij0bsEgpe+apyqcRxPGzbtg2PPfYYOo51YNbMWegb6H9Nj+drVSwWEYvFoKkGSqWS7JsRFYX+/uDzi10+QPDELqYci52AYulB3DdxLpvniFlJUdTX12NoaBBbtmxBx7EjOHz4MBoaGyGmd4u+luDVuSOrJ2JHk1jKEgF09Lb+ExFLIOIJTNfVEctRas3SnKg6ia+RaZrQVFNuVhAVQ/E4iGsNnDg4+SeZQN3Q0IBSqSTvp2ma0HUdiUTwBO5UbBmQguNuLNkgL5Z4xMwh0W9UO1wznU7LCouoNomKRu0utdoJ4+Lr6fs+iuWCnBvlui4sy5JLXWIHYrBE68hQPXo+lJi6Lj5vbVO/qLCZpiWri7UVPfH9NLy8FrzgENUnOQagKAKT+HzB7dfV1clqTzabhRgPoijBvz/Lsqpfa10+xrUbBURfnesGH5/JZGqCqCn7t8plGwMDA7DM6IhZZ+LxrT2fMagaBo9vpRogxTgK3/flOXX5/KndGEK/v9jjRK+q9hDM2mnT1157LX70o+9BVYYH09U+4YltvK9MPGG9enYX35ybN2/FNddcj3w+D8uyUCk7ePvb34577/0xLEssDdUu83mjnrRf6Qny5K8YverQ5V/+8tf453/+/7B//34MDQVLhKr+1g8YJCKiscM6I72q2h4V8cq0XC5j8+bN+O53fwgAsloj3idsY/B4s2/fPrz0UnDIpzi7jYiIziwMTnRSoopUW97fs2cPvve971UnbAcHXYqKVPDf7kmm6qr4/fr2817hV7XRXA22pg8ODaBSCcr/tSetExHRmeH36ZmLfg+JLdYAZMOqOFNr//79+PrXv47NmzfLvxdqewjGs9pjU+bPn4/JkybLcPiKO7aIiOi0xeBEoYg+p9ENkvfeex/uvvtn2LNn34hdTJFIpBqe1FG/xsrr+/ye5wDw4LouLrzwQpx//vnwPBvFYh6p1MmP9CAiotMLgxOdlNjVIw74FduMxSC/u+++G9/73vdw5EjHiNPC34xDbsda7Wns7e0tWLx4sdxdFI/Hx/jqiIjorcbgRK9KhB+x9Ca2Kovtx40NE9Db04977rkHd955J158cQOKxaDn6cTnOL3ZFajacBamGf31fX7DMODDw7Ll52D6jKnVuUJcqiMiOtNwjhO9KtHfJGbAiDk14vyqAwcOYNasWTjacRjf+MY3AABtbW1ob28bMeV3PKs902vx4sU455xzcKyjkz1ORERnIFac6FWJgXm6rstzzsRUZ8MwkEyncKTjKJKpOqTS9fj3b30bf/CHn8Cq1Wvleb0+AM8PftW+rbY+JHqnXitxCCkw3Mg+eonwRG87wT2tTiAe+XEAZFDUdR0tLS244IIL5FIlERGdWRic6A0ZPgMqL6f0vvjii/jnf/5n/Pu/3yEP7VWU4Jfr+vB9wPM9lCtlOQ1Y7NgDIM/7CtMjVSgURhybMHx0x/BtnWgysAhFfs3BwrUfI6aFi4nK4jZUFZg3bx5mzJhxWvRwERHRa8OlOnpDyuUK4vE4XNdDpRKcHp7JZPDEE0/g2LFj0HUdS5YswTnnLEY0akHTlOA8O0WFZVrytJXaHqra3Xknq0FFo1a10uRWj3kJblEEpdqeLADySAkgOOtL11Ts3r0Px44fRXNzM+bMmSMHW4ojKIJz64J5Tp4LnLVoMZYtW4adO3cimU6/SY8kERGNB1o0mvjKWF8EjV+154gFZ3ZVkEgkEIlE0NPTg1/96lfo6+tDKpVEc3MLotEIFCWo8nieD88bPj+r9siW2uU3AOjq6sZPfvLTmvPSPEybNg3vf//N8lqCqpAmK05iYKeoFgW3Dbiuh0KhiMHBQfyfL/0N/u3f/g3f+/53sX79enR3d8N1PUSjEaRSKQDDISyomAGpVAy5XAHr1q2Dd5pNRyciolfHihO9IfF4HAMDA4hEIohEIsjlcigWxQGgKurr6/Hoo4/ixRdfxGWXXYb3ve99uPjii5FKxeA4Coya7f7iuJbXUnEqlUrygNlAELoqFUceAAoAqqpX51ABu3fvxkMPPYS1a9di44Yt6OvrQ6FQwAvPb8TmTVuRSqVw1tkLcc455+B973sfJk6ciFSyDpGIDl0PwtPChYtQX9+Anr7eU/CoEhHR7ysGJ3pDxInsQNA/FI1GUS6XkcvlYJomYrEYXNdFV1cXHnjgATz33HM4//zzcfXVV+Pcc8/FpIkt8oDg2snj4sR5o3pC/CupDVq1J7xblgXLsmTlanAwgx07duDpp5/Gk08+iY0bN+Lo0aOIRZMwDAPt7e3QdR3ZbAY9PT1Yv3499u3bh3vuuQfnnnsuli87FxdddBEWLVqEeDyKqVOnYu7cueh5msGJiOhMwuBEb0ipWEE0GoPr2bDtoMcpEonIc+uOHD6CxqYmTJo0CcViEXv37sWePXvwxBNPYObMmfhfH7oFs2fPxrx581BXVwdgePSBaZonrTiJJTjBMAwoigLHcVAul9Hb24tdu3Zh7donsGbNGuzYsQO5XA6xWAxtbW1wbAXlchkDA0PQNA2RiInGxiZUKmUc6+hEqVTCQP8QHl+9Fvfccw/OOutsnH322Zg6dSpisdipe2CJiOj3EoMTvSGGYaBcLsNHEHYqlYrckea6LppbWuC6Lvr6+uB5HpLJJHRdR39/P44fP471zzyB1tZWLFiwAOeeey4uuOACnHXWWWhsbAwC0Um2/IueKE3TZF/TwYMH8dxzL2Dr1q14+OGH0dvbi/7+Qfi+j0gkgqamJlQqFQwNDcH3dMRiMUQiEVQqFVQqFRiGAU3TYJomTNOEZVkolUrYsWMHNm/egubmZtTV1WH7ju2ob2h4ix5pIiL6faDUN7Swu5XGjAhZtZWjZDKJadOmYcqUKZg7dy6mT5+Ow4cP47//+79x5MgRRKNReJ6HWbNm4fbbb0d/fz8OHDiAl156CXv37kVXVxdKpRIAjOiXIiIieqMYnGhMaZomRwWIKpXrutA0DZZlyQqQoijo6elBJBJBOp1GsVhEOp1Gf38/NE0bMadJnKunaRqnexMR0ZuKwYnGlKqqcoClCEgiPAFB9amvrw+xWKy6Ky6oUOVyOXieh0gkMmLgpZjZJIZTiplMREREbwb2ONGY8n1fLqf5vg/HcWTFyTAMZLNZGaIcx0GlUkEkEkEikQAAOQW8tmoldumJJnEiIqI3C4MTjSkRksSEb2A4QPm+D8MwZCVK7NoT/y0GbwKQQam28sQjUYiI6M3G4ERjqnZpTlVVGIYh5y+JAKWqKmzbBhD0RJXLwRl30WhUVpxGTxoXamdDERERvVEMTjSmDMOA4wRTvsUynTi+xfM86Loum71FP5TrunJMgJg47nneiMN7a6tPREREbxYGJxpT5XJZDrs8EXFunZjR5HkeLMuCaZrIZrNyhpM4vFe8X+2yHxER0ZuFu+qIiIiIQmIDCBEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYWkj/UFEBGdqTzFf0Mfr/rKm3QlRBQWK05EREREIbHiREQ0VlgxIhp3WHEiIiIiCokVJyKiMcJXrkTjD//dEhEREYXEihMR0Vjx3+BrV8V7c66DiEJjxYmIiIgoJAYnIqJTxHEcuK4L0zRhWRZc14XnedA0Da7rQlF9OG4FjluBovryz65nQ9MV2E4Znu9A1QBNV+T76IYKK2JAURR4ngff96HrOnRdh+/78DxWoohOFS7VERGdInV1dSgUCqhUKlDV4HWqoijwfR+KoiCRSKBUKsG2bfi+D9/35fsAQCQSkUHIdV04jiM/VlVVaJoGVVWhKAps2waAEW+vVCpjc8eJTmNKfUPLGxtdS0REJ6SqKorFIhRFgWmaUBRFhh7f95HP5wAAhmEgEolA13UZkMTHjw5UIigBQKlUhq7rUBRFfoy4jUqlAtM0x+BeE53eGJyIiE6R2uoQALiuK98GAJZljqgkjQ5IiURCvl0sy1UqFZRKJZTLZcTjCWiaBiBYFvQ8D6qqysAlPg8RvXm4VEdEdIooigLDMOD7vlyOE0HH9324TiWoRhkaDMNAOp1GW1sbJk6ciPr6etTX18tgValUkMlk0N3djWPHjqG/vx99/UOwbRuqqsIwhnueRB8Ve52I3nwMTkREp4joMfJ9H67rynAjKkwD/f2YNm0azj77bCxcuBCzZ8/GjBkz0NbWhkQiAcuyZI+T4zjI5/Po7u7G8ePH0d/fj0cfexwHDhzAwYMHUSwWYVmWDEzlchmGYYzxI0B0+uFSHRHRKaTruqwCAcGSmmmaaGhowFmL5mPx4sW4+OKLMX/+fDQ1NcEwgoqUKBYpSvBL8Dwgl8uhWCzi8JFj2LhxI1avXo2NGzeiu7sbnufBMAxomiYbxonozcPgRER0ipxoycwwDMyaNQvLly/Hu991A6ZMmYIpU6ZA11X4PuB5PjRtOCn5fvBrdIByXR8+FOTzRbz00kt4+OGH8cgjj2DXrl1wHAeWZcmGcSJ682jRaOIrY30RRETjkq9jeByeMvxLCV6PurYDXdOgqQoq5TIUxcOiRQvwoQ9+ALd9+FYsWXI26uvroKpBIlIUyP8WRGDyfU82e9u2DV3XoKoeTENFe1szFiyYgymTJ8FzffR0d6O/rw8RKwLP9eA6LjRVhWkY8D0fruNC13T44OtmoteKwYmI6HUToWlUAKkGJ00Nqk22bSORSGDx4rOxcuVKvO1tb8O0adNgGCdvM3Vdd8TOPAA1IwmGd+3FYjHU1dWjvq4RrutiYGAA2WwWiqJA13U5dNN13eHb4qY7oteMzeFERK/bq+9aMwwdxWIRpmli7ty5uP7663Hddddh1qwZoT+D2IUHBEt/YhZUMHoA1REGKlRVR3t7O5pWNsup47975DGUSiUZriqVCnzfh2EYwfIhxxUQvWasOBERvW6vEDyqFSdU5zJNnToVK1euxPXXX4d58+YACHqURi/LnYiYGi6W6US1yHGc6tKeCkURU8JVGIaGZDKFaDSKo0c7MDQ0hFwuP2IMAitORK8fK05ERG8WZWQFqlAooLGxEUuWLMHll1+O+fPnAwDKZRu6HmaZzoemqTXLdAqGhrIol8sYHByE69pob29HOp2GaZoolSpQVRMTJkzAxRdfjIMHDiObzaK3txeu68AwTDlQU1VVuD7nPBG9VgxORESniOd5mDJlCs477zwsWLAAqhqEJtd1YVknn7EkKlKeF1SKDh8+jCeeeAJ79+7FwMAAGhrqcNlll+Giiy6qHttiwvcBTVPQ3NyESy+9FPv378eRI0eQz+flkh0HYxK9fgxORESnSH19PZYtW4Zzz1uOhsY0gKBnScxqOhnHcWEYGorFIjzPw/79+3H//ffj2Wefheu6mD17NqZNm4GlS5fLYZfBDrzg9zlzZ+Hc85Zjz5492LZtG0qlsjySJehxOmV3nei0pZ78XYiI6PWYMGECFixYgNmzZ0NRgErFga4HwSWfz5/043U9CFiWZSGZjCOZTKJUKqFUKiGRSCCXyyESiSAajQIIlvYE3wcSiRhmzZqFGTNmwDRN2RyuKApc1z01d5roNMeKExHR6+Q4TlDpqfY2KYpanRIeHK8yd95sLF5ylgw2tYMtTTNYVuvu7kFnZycKhQJmzJiBlpYJKJUqsCxTDsPUNBWu66OlpQVXXXUV4vE46uvrMWXyNBTyJXQe78bkyW3y9n3fk1WlefPmYNbsaWjZ2IJSqSyPYhEHChPRa8PgRET0Ool5Sj4gg4joH1IUBbNmzcKECRNkoBE74/L5PI4dO4Y9e/Zh79692LNnD8rlMi6//HKsXLkS8XgcniduD1DVIHRNnjwZK1euRH19PY4fP46tW7ZjYGAAM2bMQHNzM6yI9rLrsywLdXV1SCaTME2zuhtPGTHmgIjCY3AiInqdNF2BovrwXL86Y2m42qPrOubPn4+Wlhb5/iI4VSoVHDp0CF/96lfR0dGBgYEB1NfXo729HVdddRUMQ8PgYAaVSgXlchnJZBLJZBKFQgFdXV1Yt24dVq9ejYgVR0PDIUyZMgVz5szBxEktIz4PAEQiEbS0tKGhsQ6mpaFUUhGMcNLgn2QOFRG9HIMTEdEbILb3C2JSt2maaGlpQTweq44VGBlmfN9HR0cH+vr64Ps+HMfBsWPHsHXrVqiqip07d2LHjh1wHAdTp07FJZdcgmXLliGdTiOXy2FoaAgDbgb9/f146aWX0NvbK4OTuC4gaEafMGEC0uk0NE2DoihwHDf4ezaHE71mDE5ERG9AbXBSVRW+70PXdViWBcuyqsO5PQCabMyORqNoamrCnNnzsAd7UCwW4To+tm3dgf/3wC+Rz+exZcsWdHR0AADi8Th279qL+rpGNDU2o7FhAuKxJPL5EioVB8eOHUdXVzdsex4MQ4Oi1IY5Bel0HNFoVFbCymV7RFWKiMLjrjoiotepNjSJICKORBHb/gGMmNotNDc3Y9asWVBVFcViEcViEfv27cPjjz+O1atX4/kXnpc77wYHB7Fq1SqsWrUKlmXh7LPPRmtrK6LRKAzDQHd3Nw4ePIhsNjvi+sQ1maYpr8EwDIYmojeAwYmI6HUaHZYAVA/SteF5zssCiviz5zlIpRK4+OKL0dTUBE3TYJqmbBp3HAeTJ01GLBaTu+C6urrwu9/9Dj09PZgzZw4mTJggK1hdXV3Ys2cP+vr6TvC5PHldnucxOBG9QQxORESvU21gqg0qruvCcZxq75In3157zpxlWZg+fTosy5LzlVRVRWNjIy677DL86Z/+KWbNmoVCoQBFUWAYBg4ePIjBwUG0tLQgmUyiXC7Dtm309/fj+PHjyGQyI2Y5ic/lui5sO5hYLncCchwB0evC4ERE9DrVLtP5vg/P86HrBhRFRzZbwNBgFqViBYCo/Djw/AoMU4Vpapg8eQomT54C1/WgaTp03YDjuFiwYCFuuOFGXHLJ21BXV4/BwSHEYnEUCkVs2bIVdXX1mDRpMtrbW6FpClRVwaFDB7Fr167qYMtg7pPtOjBME8e7ulEo5RFPJFAo5eDBgWFxHAHR68HgRET0Oo2u2oiqk3j7wYMH0d/fD2C4z0lVVChQ4MNHLBZM9m5vb5fhq1wOhlTW19ejtbUV6XQauq5DVVUUCgXs378f2WwWixYtkhUv3/dh2zay2SyGhobgeR40TYOmafB8D4ODgxgcHES5XJbXysnhRK8PgxMR0Rt0op4h3/dH7IxTFAVBu5EKQIHn+Ugk4pg3by4mTGhCLpeF6zooFgs4fPgQBgb6MX/+PLS3t8H3PeTzOXR3d2Hjxg04cuQwFiyYj8mTJ2H27FlYsGAB5syZg7q6OtnLBAAKNPT1DeDwoaPo6x2A43hQVV1+fiJ67TiOgIjoDRAN2id6286dO3H48GEsX7EEhmHIKo+qApqqQTNVTJs2DU1NTXBdF8lkEp7nYd++fdiyZQsWLlyISZMmYevWrbBtG8lkEr7vw3VdTJ06FR/4wAfgOA4ikQja29sxe85MNDU1QdeHXxN3dHRg//79GBoaGnF9RPT6MDgREZ0Cvu/j6NGj2LdvH/r7B9HSMkEOoASqwUUB2ie2Ytr0KYjFI4DiwfVs9PR2Yd/+PTjv/BVYdNYC9PZ1Q9d1tLe3Y9asWZg7bzaaW5pw83veBQDQdR3RqDXi8zuOA03XceRwBw4fPopSqQLX9WDbDuCr1evg5HCi14rBiYjodaqtNtXuVBO/ZzIZbN26Fdu3b0cqdQGiUUN8pLyNVCqF6dOno66uDn19fTBNE6lUCpqmoampCVdccQWmTp2KRCKBadOmIZlMYtKkiXBdD8lkfMT11I4c0DQNHR3HsWvXLnR1dcHzPHmEi+yNOvUPEdFph8GJiOhNJMKU7/vwPQ+bNm3CunXr0NzcjLlzZ8MwjBGjCaJRC2efvQhXXnk5+vr60N7ejunTp+Occ85BJGJiyZKzMXPmdBiGgVgsVr39YBaU5wU/wh3HgWEEoUzXg7dVKg7WrFmHF17YgL6+fiiKikrZgWN7MM0IKpUKVG6sI3rNGJyIiN5kIjxpmoaDBw9i48aNWLZsGSZNakddXd2IHqNIJIJly5YhFovBMAzMnj0b8XgchmHAcRzouo50Oi0bvrPZLJLJJEzTlLchhlpqmgbHcWDbLg4fPownn3wS27dvRzablaFLVVUYhoFisQhV4yBMotdKi0YTXxnriyAiGo9OtJuudiim53pIpdLo7OzCkSNHMWFCI2bMmCHnNYmqUyQSwcSJE9He3g7LsmQQEn/vuq683eD8OwWe50FRfAA+HMeF67rVHioVWzZvx+OPr8Ejv3sUjuPCsT1ksznZnO66DjRNBbhYR/SaMTgREZ0ifnWKuG1XgqCj+kgmk5gwYQIMwxgxQLN2ovfoXW/i72oF7+tVK006NE2D6/rYufMlPPLI7/Doo49icGioOheqAtu2ZdVq+EYYnIheKy7VERG92fygUqTrCsrlMlRVwfHjx/Hww79DQ0MT5syZg1gsVq0aDQcisdwm1PZCnfDT+AoUJfj7QqGEPbv3Yc2aNVi37gns3PkSNN2EbdvDoUnxaj7WhwIu1RG9VgxORESniGVZsG0bkYgFx3Fw8OBBHD16VP597U48EaJql/pqQ1NwpIs34uNET1N3dy+2b9+Op59aj+eeew5Hj3YgGo1icCgrz87zfR/MSURvHIMTEdHrJpa6qonEH10dUqEoGlRVg2lqKJVK0DUT0Wgcvg94HqBVG7RrK01CMOlbhaq+vBrluj4GBoZw9OhRbNywGevXr8eWLVvR2dkJ1/VhGIY8PBiKByjACVqyiOg1YnAiIjpFyuUyPM8LApOuI5FIIJlMytEBWs2utkrFQblclpWkIDAFQcz3lWqvlI1isYiBgQFkMhls2bIF+/fvx+ZNW3HgwAEUCkX4ftAsns1mZVM5MDwiYeTcqbf8ISEa9xiciIhOEdu2YZomyuUiAKChoR6RSETOYgrex0VnZyd27dqFgwcPolwuI5lMIplMorm5GaqqwnEcZLNZ9Pf3o6enB8ePH0dfXx+OHjlWfVsvKpUKdN0M3t/24NgeFO3lR8EERG8Vjysleq0YnIiIThFFURCLxeA4FSiKgmg0KgdgAkFo6unpwYYNG/Cb3/wGTz/9NDKZDJqbm9Ha2grTNGFZFlRVRblcRj6fRz6fRyaTQS6Xg2OLnicVpmmiWCyjWCxCgRb0V7nB50XNbr0gtLHURPR6MTgREb1uo5qGlFHb/VUfhVIemqFDURTYrotkOo1INI7evgx27NiBtWvX4tFHH8WBAwdQLpeD6tL+Qzh46CgikcirfvZCofCyt+lm0Afl+GUEG+6GRx4oCkeFE71RDE5ERKeIpmnwfb+6sy6CVCoFz/OwffsO7NixAw8++CD279+PgwcPolgsQtf14eGZ1bPliOj3C4MTEdEpInbC2baNSqWCTCaDF198EYcPH8YLL7yAl156CaVSSZ41N9wM7svAdbLbJ6K3llLf0MLFbiKiU8BxHMTjcTjO8I65dDoNy7LQ0dGBRCIxIvx4njdiavjoCeKjMTgRvfVYcSIiOkXECAFxsG6lUsHAwAAsy0I8HpfjAXzfh+u6cgimGEcgzpYjot8fDE5ERKdIJBKRQyhN00Q0GpVhyDAMFIvBmAIxLVws1YnK08kqSierSBHRm4/BiYjoFDEMA7Zty+NSRBByHEf2NYnRBGIquKg8EdHvJwYnIqJTxHVdaFowU8nzPDiOA1VV5e45MdxSVJhUVZW/67rO5nCi30NsDiciIiIKifP2iYiIiEJicCIiIiIKicGJiIiIKCQGJyIiIqKQGJyIiIiIQmJwIiIiIgqJwYmIiIgopDN+ACbn8xIREb12Z2rl5Uy930RERESv2RlfcWJ2JCIiej3OzDUbpgYiIiKikM74ipPKk/qIiIheuzP0jGlWnIiIiIhCYnAiIiIiConBiYiIiCikM6LHyfd9KIoCVVXheR4cx4GiKDAMA57nwfd9+H7Q7KSqKjRNg6ZpUFUVpVJpjK+eiIjorWeaJlzXheM48rlS0zToug5VVVEsVuSfAcB1XbiuC03TYJomKpXKGN+DU0Opb2g5rdujdV2HbdtwHAeqqsI0Tei6Dt/34bouPC/YTinCk+M48v1d10VDQ8MY3wMiIqK3nigciMKD+AUEz5mjg5Wu6zAMA67rolKpyEB1ujntg5PrujAMA5qmwXVd2LYtU7HnedA0FYZhIBqNwrIsaJomA5TruigWi2N9F4iIiN5yorIkVmEURYFt2yiVSqhUKvA8H4ZhwLIsKIoiCw+iSOG67ljfhVPi9IyDNXRdh6ZpAADbtlEulxGJRDB16lS0tbXhnHOWIBKJIJVKIZ1OIx6PwzAMKEqwzzKVSo3l5RMREY2JSqWCSqWCXC6HoaEhdHd34+jRo+jo6EBfXx/6+voxMDCATCaDeDwuA5TrurL95XR02gcn0zSRzWZh2zZSqRTmzp2LxYsX4/zzz8f8+fPR2tIEXddhWRYikYisTglDQ0NjePVERERjQzwXKooiA1GxWEQmk0GhUMBDDz+KZ599Fs8++ywymQxUVUU0GkW5XEahUIBlWWN8D06N036prlAoQFEUtLe34+KLL8ZVV12FZcuWYdKkSYjFLLjVRnFRYRK/i7Ss69x4SEREZ57aopGiBH+2bQfFYhGVSgXZXBEHDx7EunXr8Oijj2Lr1q0oFAqIxWKIRqOwbXvsLv4UOu2Dk6IoWLx4Md7xjnfgsssuw8KFCxGPmwCAQsFGLKqPeN/RTudyIxER0Ss50XMiAHieB8/zoKg6VBXo7R3C6tWrcd999+GZZ55BPp9HLBY7bXuET/vgdM455+Dd73433vOe96C5uR6OA5TLFUQiJjTtxBPjR48nICIiOlOJ58PRQcoHYNtBNcpxXGzevBn33nsvfvWrX2Hvnj2oP013pWvRaOIrY30Rb4Tr+LDMCLLZYH21ri6NbDYLHzYWLJyHr/z1/8GFF5yH1tYJ1ZDkwTJ1aKryisfsiKW7V0rbREREZ4pXej5UAKiqD01ToKlAOp3CtGlTUC4V8fzzz8IwgtUd0zSQz+cQjUbhOA4qlQri8fi43XU37oOTAhWKokA3NBiGgUIhj3K5jMWLz8KNN96I8849D01NTYhEIvILr6rqKyZoIiIiCk8EK8MwEYvFoGkaotEotm7bDtu2EY/H4TgOAEWOOKhd2Rlvxv2uOjHgMhqz4Ps+BgfzaG5uxuWXX473vOc9mNjWjmg0CiAoN9YuvTE0ERERvX7iZI7g+VVBKpXA8uXLYVkWXtywCS+99BIcx0EkEkGlYsshmuM1NAGnwVl1qqrKYZalUgmWZWHFihW4/PLLMXPGTBmagOF12vGcdImIiH5f1O5Ed93geTWVSmHOnDm48cYb0dTUhFwuN2KApjjJY7wav1deJc7FcV0XuVwOEyZMwKWXXoqzzjprxPt5njeiwsTgRERE9MbUtsBoWvDfpmmisbERV199NebPny+njSuKIgPUeO1vAk6D4OQ4DgzDkEFo1qxZWLZsGZqammA7tjyLTlVVBiciIqI32ehVHFUFotEIpk+fjnPPPRfpdFqee2dZFkzTHNcznsZ9cBJc10V9fT2WLFmCmTNnQqk2oZ1wJwB3zBEREb1pPM+D7wdDMqv1CkSjUSxfvhyTJk2SU8hd1x33z8HjPjjVHixYX1+PuXPnoqmpCY7rQIEyYv1VVJ/ExxEREdHrI55TFUWpruoEM52CtwGGYWDGjBlobm6W59gVCgXYtg3TNMfwyt+Y0yI4CTNmzMCiRYugqgp0TYcPf8T71TajjefGNCIiorH2SrvUa59eLcvCZZddhnw+D03TEI/Hoes6yuXyW3mpb6pxP45AfLE0TYOu69A0DcxEREREY0vTFJimiWg0KnuRPc+TIwnGq9MiOCmKAg3BAMygr2msr4qIiOjMpqpBxSmRSMA0TRmcRs9UHG/G75VX1Z4pJypORERENPYMw5DLc2Lmoqg6jVfj98qrardBju7U58gBIiKisaMowXKdoiiymVxMGx+vTqvgNOLtGN9fGCIiovEsGE/gy9A03pfohPF/D/Dy8OT7CEYRgMGJiIhoLAQznYIqk/hd1/URfx6Pxn1wGl1V4vIcERHR2FOU4cKGCEriyJXx/Fw97oMTMPyFGT4HByNmOBHR61P7qjCbzQIA8vk8gOC4o5OpPY9KNIaO5jjOiAO4R3/+Ey3Hu677srePPsJh9CvdE11b7d/VXisPAid6Eyg+fNgAPADB83OpVAJ8FQrG70aucT+OgIhOHVVVZYh47LHH0N/fj0Qigfe+972y5P5qane5apo2IpD4vg/btmEYhqwc1/ZCBDPZhl/biY8VfRLiYzzPw9atW/HQQw8BAC688EJceOGF0HX9hOFJ3KamaSNOaR/9uU6HXgwievMxOBHRq3JdF7quY+3atXj++ecxf/583HLLLaE+tlKpyErw6IO2FUWBZVkA8LKwZNu2DF2isnWisydd10WlUsGWLVtw1113wXEcaJqGs88+G3V1dScMP7W3Vxvsam97vG+XJqJThz8ZiCiUTCaDzs5OZDIZAOGW6kzThGEYUFX1ZUtmYmnM9/0Ry2RAMPtF0HVdVo9qb0OEJFVV5ayYRCIBy7JeFnpc15VLguL2HMeRYUks/QnckUtEr4QVJyJ6VWJJLh6PI5lMIh6PAwh33mOlUpGHeYoDucVxC6LaU3vgp+M4I5YAXdeFpmnwPA+u68pA5XkeFEWB67qwLAtXX301kskkVFXF2WefjVQqJZcBa29TVLJGH/mgqqr8XKJCRkR0IgxORHRSoudH9CmVy2W5zPZqTNNEpVJBd3c3Dhw4gCNHjsBxHLS3t2PSpEmYM2fOiFPSRcAplUo4fPgwjh07hv7+friui0WLFmHu3Lno6upCd3c3mpub0dzcDABIp9Ooq6uDrutoamqSt9fR0YGenh60t7ejubkZ+/fvx5YtW2BZFtra2tDU1IT29nZYliUnGzM0EdGrYXAiolAcx4Ft2yOWuE6mUqlg1apVeOihh7Br1y709/fDtm2k02m0tLTgAx/4AM477zy0t7fL0JLL5bBmzRqsW7cOq1evlstoc+fOxcyZM7F//3709/fj7LPPxte//nXYto2tW7fib//2bwEAX/jCF3DhhRciEongG9/4BrZs2YLm5mbMmTMHu3fvxpYtW2R/1cqVK/HOd74TF1xwgaw2CexzIqITYXAiopMSc1fEMpY4sPNkAerJJ5/Ej3/8Y6xevRrTp0/HpZdeCkVRsGPHDmzfvh1/8zd/g7//+7/HddddJ/ugdu3ahfvvvx8PPvggzjrrLFxwwQVwHAe7du3Cs88+i6GhIUQiETiOg1wuh0Qigbq6OvT09KBSqcjDvsvlMhRFQS6XQ1dXFzo7O5FMJnHZZZehXC5j7dq1uOOOO6DrOqZPn46JEye+7D4TEY3G4EREJ2XbNlzXRTQaRbFYBPDK502JylF/fz9+8IMf4IUXXsCll16KL37xi1i0aBEURUFXVxe++tWvYu3atbjzzjvR2NiIiy66CB0dHfjpT3+KZ599FhdddBH+7u/+DkuWLIHv+8jlcrjzzjvxox/9SAajaDQKACgWizAMA57nwbZt2cOkqiqy2Sxs28bHP/5xXHXVVWhqasLg4CDuuusu/OQnP8HDDz+M5cuXY+LEiXBdV1aZxvt5WkR0arAOTUSvSOxiMwxD9iKJ3We1y1iO48idcYqiwLZt7Nq1C9u2bUNzczPe9a53YeHChXLUQGtrKz772c+iqakJx44dw4YNG+Tn27NnDxRFwfLly7FkyRKUy2Vks1kkk0lcddVVmDx5MvL5PJLJpPz84oDv2nlQQiqVwowZM7Bw4ULU19dDURTU19dj6dKl0HV9xK6+0eMSiIhGY3AioldUO5DSdV2Uy2U5hkCEpdolPAByXtOuXbugKAoaGhqwcOHCEU3XrutixowZmDx5MorFInbu3IlKpYJisYh9+/YhkUjg3HPPBQBYloVUKgUAmDFjBpqbm0fsgDvRNYvfxS66pqYmTJs2TQYlAJg5c+aIKpW49tG3Q0RUi8GJiF5RbQjRdR2WZclxBGIgpaIoMnDYti3Pperq6oJhGCiVSohEIrJ6ZZomNE2DruuIRCKIx+Py48RAy7q6OqTTabksKG5b13VEo9HhoxtOcJ21vwNBg7rruiNGHriuK+/TiYITj1sholfC4EREr0qEkEqlgnK5jFKpJAdKjg4aotpkmibS6TQ8z0O5XIau61BVFfl8HoVCQYaorq4uAMFymmmaiEajSKfTKJVKOHDgAKLRKDzPw+DgIAzDQLFYRDablXOdTsayLHlt4v3FES+iGlV7AKnA4EREr4TBiYhCKZfLcvK2qBiNDh2apsnq0ZQpU6CqKnp6erBt2zZ4nod4PI5YLAbP87Bp0yZ0dHRAVVVMmjQJiqLIfqTu7m6sWbMGR48ehaqqqKurQ6lUwqpVq7Bv3z65s08YfUiw+F3sBhRLcrUBrzb0MSgRUVjcVUdEr0pUnCKRCOrr66GqKg4ePAjHcdDY2CjnHfm+j3w+D8dxMH36dFxzzTX4n//5H6xfvx4///nP0dTUhOXLl8PzPBw4cAD3338/bNvGggULcOGFF8LzPCSTSVx99dU4evQotm/fju9+97u4/PLL0djYiBdffBFr1qxBqVRCMpl8xcBTG55830elUpHTx8W0cdEfJfqzRvczsb+JiF4JgxMRnZTv+yiVShgcHMSBAwfwD//wD9i6dSsikQiAoN9JDMdsaWnBRz7yEVxzzTX4yEc+gnw+j8cffxy5XA7Tpk2D53lwHAe/+c1v0NTUhKVLl+K8886Tx7PccMMNeOGFF/Dss8/it7/9LX77299C0zQ4joOpU6diypQpKBQKKJfLI66vNkjVVpZqRwzU/t3o4FVbpSIieiUMTkR0Ur29vWhvb8fmzZvR3NyM9evXI5FIoK+vD8lkErlcDuVyGa7rYsKECfLj3vnOd0JVVdx77714/vnnsWnTJjmwct68efjABz6AG2+8Eb7vwzRNeJ6HhoYGfO1rX8MDDzyAdevWoVAoIJ/P47rrrsPFF1+M//iP/8Bvf/tbOe0bAHK5HEzTHHEsDBCMNzAMA9FoVDaTixAViUTkaIRCoYBisYhYLMb5TUT0qhiciOikJkyYgNtuuw033XQTGhsbkcvlZCgR59F5nodSqQRN0zBz5kxomgbXdfH2t78d55xzDg4fPoz9+/ejUCigvb0d06ZNw4QJE0bMY1JVFeVyGaZp4kMf+hBuueUWFItFDA0NYeLEiRgYGEA+n0ckEkFbW5tcdjv33HPx7W9/G67rYsGCBbKf6fOf/zyuv/56NDQ0oLW1FcBwZcmyLNx5550olUqYOHEiYrEYAIw4r44BiohGY3AiolckzqUTYUjsmhut9lw30Sxu2zYMw5BzlMSynNiNJ45YqQ0qfX19uPfee/Hoo49i6tSp+Kd/+ickk0kZrp5//nls374dlmWhtbV1RMBZvHjxy65nwoQJsgImApP4mFQqhYULF464H682H4qICGBwIqJXoevDPyJEBclxHBiGMSIoiblItTOdamc7iTPkTNOUt+k4jpyjJIhlvN7eXhw4cAA/+clPMHHiRLS0tKCrqwv33Xcfent7cfnll+PSSy+VHydmMYldf+JzFItFOdLA87yXfW4xG0r0O40e0ln7ZyIigMGJiF6FmHVk27YcXCnChKjqKIoit/uPHk0ABHOTDMOQbxfN2rXjDESosSwLF110Efbu3YtHH30Ud9xxB1RVhWEYsG0bpVIJixYtwpVXXonGxkYZbnzfh2VZ8vaBoMIkzrITwy7FdYvqk7iu0RWm0Q3lREQCgxMRvSIRLEQoqVU7hqC20lSrdueaqEiJ0QCu646oDonbmTJlCj71qU/hwgsvxKpVq9Db24tCoYB0Oo2zzz4bl1xyCebOnTuiCbw2+IjrqD0uRoQ427Zl0BP3QYwlEB9bWz0jIhqNwYmIXtHo3iXR8yQqRsBwaBGBQ1VVOI4je4VqA0htyBKN4GLZT0zzNgwDTU1NuPzyy3HZZZfJkDV6GS6fzyMajcrbEyFIfL7a/iyhdvBlbbVq9Bl1DE1E9EoYnIjoFYlAIgKHmNYtluRql9lE9QkYDh+jB1SODiSWZcmlNdd1ZSVIzHQSoai2YVtUscSZeaJPqXYSeKVSGVElG93jVFuFGh3suERHRK9m3P+EEL0Io8+ayufzY3RFRKeXEwWJ2gbw2sqTeHttKKn9dSLifWsrQ7XHqYjbqf3v2msSZ8/V/v3opcXa6xx9e6/0eYjo5ESf4isdWxSJREacNVlfX4+hoSH5wmc8GvfBSTSOApBD7ACMaEYlIiKiU6N2TEltX6MIVAMDA7LiK5bjxUDa8WjcByexW8Z1XfT19aGnpwdA8IrVBw/uJCIiOlVOVKWt3S2bz+exb98+GZjK5TJisdiII5PGm3EfnESytW0b3d3dOHjwIHK5EhQoL1u+IyIiojfH6OW52s0fYnn++PHj2Llz54jgJMaEjFfjPjgBwe4Z3/cxODiIvXv34vjx4wAATeXwOiIiolPtRIUK3/exd+9eHD58eMSO21caXzJejN8rr+G6rjwva+fOndi5cyeKpeJYXxYREdFpr7avSfy5Uqmgp6cHGzZsQCaTkUNygWCFaDwb98FJDLkTxyps27YNzz33HI4dOwbbGd9fHCIiovGgdudsuVxGLpfDxo0b8dRTT6FSqUDXdTkmRJxXOV6N3yuvErNiTNOE67o4cvgwXnrpJRw/fhzZbHasL4+IiOi0VhuafN+HbdsoFovYunUrtm3bJif2i+A03ueladFo4itjfRFvhO8FB5E6btB4Zpgmjh7tgG27OOecZdB1HYZhQlEA13PhY9TAu2rpsPaLTkREdKY70RBb8XYAcLzhMx09BI3hUBR0dfdi67bt+PPP/yVURYeum3Icgeu6UFAdlquMz+fbcT85XGx59OHJCcOFQgEbN27ET3/6U9x2262wLAuWZUBTtREjCny8eurlMDwiIjqTjX4erA1SuhZECMd1AACqpmJwaBBr167FPffc89Zd5Fts3Acn8UUVx0KI6aQ7duxALpfDtGlTcM4552DevHnQ9SDl+vChKioUnPxICFagiIjoTDX6ObH2z57vQVVUGaAymRw2vLgJq1atwpo1a2Cakbf0Wt8q4z44aZoWnGjuBeHJNE1Eo1EUCnkcOXIE3/3ud3HNNddAURTMnTsXuq7C8z04rgNd019xeJfruvL2iIiIzjS1IwZEEaH2TEjP8wAVUBUVvX29eHz1Wvzyl7/E+vXrT+s5iuM+OImBW4qiwHVdOI4DwzAQi8WgqiqefuoZVCoOKpUKLr30UsyfPx/pdBq6UV2X9QHfB0R+UpTg/zRdh1b9eyIiojONUtPKIvuAq392XB+6rmNgcAAH9h/CCy+8gF/96ld48sknkc8XkUqlTtsVG6W+oWVc3zPfqx654tlyi2MwtTRIxpVKBQCQSiWwePFiXH755VixYgVmzpqOlpYWOLY3YkeA+O9x3PBPRET0hrmuD1WtPUA7+L1UqiCfz6OvvwcbN27E2jVP4Pnnn8f+/ftRKpUQicRgGEbNvKZRKzt+9QlWGZ9VqXEfnAQxgGv07rh0OoXBwUFkhoZgWhbmzJmFJUuWYNGiRZgyZQqWLFlSbR63oOv6iDN2iIiIzlSGYYxYzXEcB4VCAT09Pejt7cXvfvc77N69Gy+99BJ6e3uhaQaSyaQ8WuVlgek0Me6Dk6Zp8sgVXdeh6zo8z4PjOHBdF5VKGel0GpqmIZ/PI5/PQlEU1NXVobGxEZMnT0Z9fT1aW1vR1NSEWCwGTdO4o46IiM5oote3WCwil8shk8mgq6sL+/fvx5EjRwAAhUIBmqYhHo9DUTTYti0/TteNMb4Hp8a4D07hnSF3k4iIaEyd3oUHdvIQERERhTTud9WF90oJmJUoIiKi1+70riy9ElaciIiIiEI6gypOJ+adoYmZiIjojThTKy9n6v0mIiIies3OnIqT/woZcZwO4CIiIhpTZ+jzKitORERERCGdORWnV0jATI5ERESvw2leWXolzA1EREREITE4EREREYXE4EREREQUEoMTERERUUgMTkREREQhMTgRERERhcTgRERERBQSgxMRERFRSAxORERERCExOBERERGFxOBEREREFBKDExEREVFIDE5EREREITE4EREREYXE4EREREQUkj7WF3Cq6boOx3FQqVSgaRoikQg8z4PjONA0DbZtQ1EUADjh767rjtm1ExERjRXDMFAul+H7PizLgmEYcF0XlUoFnucBADRNg6qqUBQFiqKgUqnA932Ypinf53Sj1De0+GN9EaeS7/tQVRWRSASu6yKbzUJRFBmgLMuC67pwHEeGJFVVoes6VFU9bb/wREREr0YUEVzXhW3b8DwPqqrCNE3oug7P8+D7vnz+1HVdBqZyuQxN08b4Hpwap31wchwHjuPI8GQYBhRFQblcRqFQgOM4MAxDpmlVVWWiFt8IREREZxrHcWBZlgxAtVWlQqEA0zRhGAZ0XYdt23BdF5ZlQVVVFIvF0zY4nfapIB6PQ9M0FAoFFAoFqGrQ1tXU1ITly5fjlltuQTweR0NDA5qamlBXV4doNApd16EoChzHGeN7QERE9NYTS3XZbBaDg4Po7u7Gnj17sHHjRuzevRt79uxBpVKBoiiIx+MoFArIZDJQFAWGYYz15Z8yp33FKZvNoqGhAa7rolgsYu7cubjllltwww03YNasmdi4cRPy+Tz6+/vR29uLoaEhWYnyfZ8VJyIiOiOJ5bhIJILm5mZMmjQJ7e3tmDBhApLJJH71q1/hN7/5DR5++GH09PQgmUwimUzKqpRt22N9F06J0z441dXV4eDBg5gxYwZuu+023HDDDaivr8fatWtx9913Y/v27bBtG+VyWa7hapo2ovxIRER0plFVVba7iGJCXV0dZs+ejRkzZuD222+HZVnYunUrfvrTn2Lt2rUYGhqSPcKna9XptA9OQ0NDeOc734lPfvKTWLp0KdatW4d/+7d/w6ZNm5BOp1EqlaBpGnRdl+uxYtedCFFERERnmkKhgHg8jmg0Cs/zkM/nUalUYFkWotEocrkcbr/9drz//e/HwMAA7rvvPtx33304fvw42traMDAwMNZ34ZQ47YPTihUr8O///u9QVRVf/OIX8dhjj8H3/RNul/R9X/4u/pvBiYiIzkRiV53nefA8D7quyxE/pVIJqVQKncePY9bs2fjyl7+MK6+8Evfeey+++c1v4vjx44jH42N8D04NLRpNfGWsL+KNcF0XiUQCuVwOlmXBcRyYpomBgQGcf/75+OlPf4oNGzbgC1/4AlavXi0rS2J3nQhIwPCOAUVRoKqqbCQnIiI6U4nnRACy2CACVCKZRLFYxC9+8Qs4joM/+qM/QmNjI373u98BAKLRqJylWF9fj/7+fqTTaZTL5XH7HDvug5MYZKkoCorFIurq6jA4OIilS5fiK1/5Cjo7O3HHHXfg2WefRSKRgGmasG1bzneqDU5EREQUjqqqyGazsCwLsVgMu3fvRjKZxBVXXAFd17F161YUCgUYhiFbX1zXhaIocibUeDQ+r7qGrusol8swTRMAUC6XkU6n8Yd/+IdYsmQJ/vM//xOrV69GsViEqqool8sjhnoRERHRaycawIvFIgDg0MGD+P73v4/9+/fj85//PJYsWSKbyg3DQKVSQTQalSd5jFfjPjiJ5Tnf9xGLxdDb24srr7wSN910E77//e/jt7/9LUzTRENDA0qlkhxqWdvHRERERK+N7/tIJBIAgHw+j+aWFmzfvh3f+MY3YNs2br31VrS2tqJSqcAwDNi2LXuLGZzGkGhYE9PB6+rq8P73vx/9/f34j//4D9i2jVgsJitNqVRKNrqJyhMRERG9NuK5VDSB67oOy7Lw3HPP4Zvf/CZuuOEGrFixQj7fep4H13XHdWgCToPgVCwWYRgGfN9HsVjE5ZdfjoULF+JHP/oR+vv7EYvFUCqVUC6XEYlE4DiO/O/xur5KREQ01lzXlTMQTdOUz62GYeC+++6Tz8mpVAqO48jBmKLXabwa98lBVI3Ebrh3vvOd6O3txc9//nOk02k4jgPbtkeUE1VVhaZpPMCXiIjodVJVVYah2hUcwzAwNDSEu+66C5dccgmmTJkiz4V1HEdOJB+vxn1wEoO5VFVFLBbDnDlzsGvXLhw9ehSlUkmOFRCNaZqmIR6Po1gsjuvES0RENJY0TYOqqojH4/A8D+VyWY76AYCf/OQnmDVrFtrb2+G6rlwd0jRtXPcYj/vg5Dg2fN9DpVLGxIntWLZsKe66679QV5cG4MsmtHK5DAByZ52oOhGNKV99Y79ofOPXn8YxUTWq3Tnnuq4sUgwNDWHdunW48cYbUSqVZHAa70WL0+JfnjiJORaLQVEUFAqFl5UOiYiI6K1TLpdRqVQQiUQQiUTgeR583x8xUHM8Gr9XXiW+CLquI5VKQdM0ZDKZcT2VlIiIaLwrlUoolUpIJBJygrgwnp+fx++V1xDlwkQiAcPQUSgU5HRSIiIieuv5vo9KpYJYLAbTNOXOOlF5Gq/0sb6AN4PneXI7pKYBtm3LY1iIfq8p43dnCb0J+PWn05joebIsC77vyx11ovI0Xp+jT4uKk6IocF1Xlv5Ek9p4TrRERETjmRg7oGmabCCvrTyNV+M+OCmK8rKtjWKa+HieE0FERDSe+b4vxwWJ9hlRhRrPu9pPm+Ak0qvvB18sVVVZcSIiIhojruuOOG6lttDB4DSGfN+HbdtQFEUGJV3Xx/2cCDozRCIR2LYtf5DUzkMBIOePOY4D0zRh2zaSyaQ8sFr8EkNeRR+BqLaKoXPiB5g4YFOM6yiXS4jFogB85HJZqKoCTVOhqgpKpSIUBXBdB45jQ1EAw9ChaSp834PrBuV227blNYjbFv/+bNuW1V9xwHbtbhpxm5VKGY5jw/NcKAoQjUZQLBbgeS4KhTxUVYGiAL7vQdc1AD4MQ4fnuVBVBbZdgee5ME1Dvp+4L77vAfAB+LDtCiqVcs37DC/vR6NRFItFWJYlZ84oioJIJALXdUf8sFdVFaVSSd5W7efWNBWapsprCl7T+XBdB67ryGvxPFceUWGapnxFLhpqxc8xTdPkY1j7glB8jxD9vhLfz+L7VlVVZLNZRCIRVCqVsb68123cByei8ay/vx+WZckAJV6ViaOCkskkgOBJUtM02LaNXC4HVVXR0NCAaDQqA1WxWISmaTBNc8QLCfHCQlVV2LYNwzAQj8ehKAqamprQ398P13XR1taGcrmMwcFBGIaBuro6eXuiubNYLKJcLkPTNCQSCSiKgmg0Cl3X5aaMVColw4aoBovfRagTJXzxwkdVVaTTacRiMeTzeZRKJdTX1yOZTCKRSMhAJk4CsG0b5XJZ3n8RyERoEyFUPKaVSgWWZaGpqQnRaBS+7yMWiyGXy+H888/HbbfdhrPOOgulYhGO4yCVSsmDwUV4FU2totk1kUggFovBsixks1kZHrPZLBzHQTqdHjEuxTCMEWHHNE0kk0lUKhV5koHrujBNU05irv26ibAbj8ehaRpyudxb/w1LRKfHrjqi8Uo84du2DSA4QkiUtROJBFzXRalUgq4H/1RFkLFtG11dXTJIiGqFqEqIKoUIEpZlQVVVFAoFWdHyPA89PT2IRqOwLAtdXV3QNA1/9Vd/hQkTJuCv//qvkcvl5KGdqqrCNE0AQRjLZrNIpdLy3Edx5IJ4ghcVE3HfAMhGUVGdAoJgUSwWZUVM13X4vo9SqSSbSEXwEhU1RVFgmiYGBwcRi8Wgqip0XZfDb8VMNwCygpTJZDA0NATLsgAAvb29SKfr8NGPfhTvec+NeOSR1dixYwe6u7uRTCbhOI58bMWZXCLslctlZLNZxGJRVCoVzJw5E5/85CfR2dmJu+66S4bbWCyGSqWCbDYLAIjH4/K8riAoechms0gkErAsC8VqcAOAQqEgv+6GYchqoXiMxXFTRPTWYnAiGkN1dXXI5/Nyuq6qqsjn83AcR1YdotEoYrEYCoWCLHknEglks1lZwYhGo/I4IVGZEct0tRUTEUqAoOIRiQShIp/PIx6PY+LEiXjXu94ll9ZaW1vhOA4KhQLK5TJM05TD7CKRCHK5vAw2wRw1Q16/CCyO44zoZ6gt32cyQ2htbUUymcTQ0NCIwFgoFGRgqz0VQFTQHMdBIpGQlbBYLIZUKiX/3rZtuYwowuHg4KAMgCK07t69G7t3H8C2bdvkfVFVFalUSlbxxO2IECmWIEWVbeHChfjABz6ABx98EI7jyOXUYrEI0zSRSqVkBUksmwJAJBJFPB6XYVhUAgcHB2WYKhQKyOVySKVS8igL3/cRiURQKBTe4u9YImJwIhpDmcwQACASsaCqCiqVMjRNhWlGZT9PED6CJbZ0OoXjx49Xw0sEkUgUfX19MmQoiiIrMENDQ3KZDQAqlQpM04RpmrLypKqKPMlcnHLe2Ngol4FEVSsWi6GxsRGO42BwcFAuKdVWxQYHB+XSmaIoyOVyiMVicop/bVXMcRzEYjHU1dWhv79fLu2JYFEoFJBMJuV5V6VSSS4XRiIR6LqOoaEhOY1YLPmJKlexWJTLf/l8HoODg7AsSwaTzs5OtLe3Y3BwCN/4xjfw85//HHv27EEkEkFjYyMGBgbgeZ78mEqlIpcQM5kMNE1DW1sbCoU8uru7kclk0NrahHQ6jf6+PiRTKdTV1WFwcFAu+Ykqk2EY8r709vZU/2zKMzeBoGdK01QMDQ1WlwXjiEQsDA4OoL6+HoCPbDYDTeOPcKK3Gv/VEY0hEXRE8Ghvb8eFF16IhQsXyrc/+uijWL9+PaZMmYILLrgAv/3tb2UfzZHDhzFl6lScffbZmDt3Ltra2lCpVLBlyxY8//zz6OzshKIoSKfTKJVKctlM9BqVyyWk02nMmDEDK1askH08nufh6quvRjQaxd69e7Fnzx709PTA9300NTVh2bJlOOecczBhQjNyuRx2796NJ554Avv27oVhmkin07K6JSpctaeiq6qKlpYWXHzxRfjZz36GhoYGXHDBBVi8eDH6+/vx4x//GD09PSjk85gxcybmz5+PBQsWoKWlBYVCAdu2bcP69esxNDQETdMwceJE9Pb2ovP4cbS1t+Piiy/Gueeei0QigUwmg8cffxzPPvss5s2bh4ULF+JXv/qVbASfMGECli9fjkKhgHw+j6GhIeSyWcyaPRtz5szB3LlzMXnyZBQKBezbtw9PP/00du/ejd7eXsycOQOXXXYZmpqaMDCQRWtrKz76sY+hVCrh6aefRlNTEw4fPgzLsrBkyRKcc845mDVrFlzXxeHDh7Fz50688MILyOfzSCaT6OrqwqJFi7Bs2TI88cQT8DwP119/PZYvX47BwUHccccdsnG9dgmUiN46DE5EY0hUeQqFAhYsWIBPfvKTuOaaa9DY2IhYLArfB2644QY8/vjjmDhxIubPn499+/Zh69atyOfzmDZ9Om6//XZcf/31qK+vRywWLN0dOdKJfD6Pz33uc3jmmWeQz+dlAzoQLO1pmoZJkybi6NGjmD17Nu644w7kcjm0tjYBAH7wgx/A93387Gc/wze/+U10dXbinKVL8alPfQrXX389Wloa4bpAsRgsD27atAk/+tGP8Mgjj8jPV7tzRgQm0XM1bdo0fOlLX8LMmTOxaNEiLFy4EO3tzejpGcCuXbuwZs0atLe34/bbb8fll1+OCRMmIJmMwnGAY8eOoa+vD5/5zGfw3HPPyWbzBQsX4s/+7M+wcuVKNDU1oVKpwPM8rFy5EuvWrcOsWbMwe/ZsHD16FE8//TTi8QSuuuoq/M3f/A3+7//9v/jxj3+MbDaLZcuX40/+5E9w3XXXQdd1JBIRVCpBP9LWrVvx3e9+F/fffz9uuOEG3H777SiVSqirS2DBggW444474Lou/uzP/gw//vGPUV9fj/e85z342Mc+hlmzZiGZTEDTgKGhPPbt24df/OIX+O53v4tKpYJkMomLL74YX/7yl3HHHXfg6quvxsyZMzFhQj06OrqwevVqbNmyRS7RGYb5Fn/HEhF31RGNIbG0VFdXh5tuugm33XYbenp6cPPNNyOVSqOlpQUPP/wwVqxYgXe84x2YNGkS+vv7USwWEYlE8Md//Mf40Ic+hGPHjmHlypWwrARmz16AH/zgB2hra8PXv/51zJs3T+76Gp535qNQKKCjowORSARPPvkk3vve9+ITn/gEOjq6sHXrTrzvfe/D+973Pnzzm9/Enj17MHPWLHzmM5/Brbfeio0bN+K88y5CU1MzzjvvPNx///1YsWIF3vve92LKlClyfILoGRI9TrXN3Q0NDWhrm4Arr7wSS5cuxb333ot3veu9+MIXvoDnn38eiqLgU5/6FG655RYcOHAAV1xxBXQ9glmzZuFHP/oR2tvb8fWvfx3Tpk3D4OAgGhoa8N73vhcf+9iHceTIEVxyySWYPHkyFi9ejLVr1+KKK67ARRddBMuykMlk4HkeCoUCHMdBY2NKhthp06bh2muvxa23vh933XUXVq5cCU010d7ejh/+8Ic499xz8YEPfABtbW34n//5H9x000344he/iFyuhKeeegrXX389br75ZqxevRq+7+PSSy/FH//xH2P69On44he/CNO00NY2Ge9///thmib+9E//FGeffbbczZfNZtHS0ogPf/jDmD59On74wx/i5ptvwd///d9j+/btcgkxFouN5bcu0RmLFSeiMeT7gOf5aGlpxZ//+V9g9+49eP/7P4B8Po+GhkYUCgV84xv/ig0bNuKnP/1vDA7mYVkRGIaJs846G5/5zGewbt063H777di2bRsmTpyI48eP46677kJnZyf+/d//HZ/+9KfxiU98QjZli4ZjMQYhn8/DdV08/fQzaGlpget68DwfTz31NACgoaEBjuNi3rz5uO22D+OBB36BL33pS+jv74eu6+js7MSXv/xlHD16FF/60pewZ88e3P4XfyGbrMXuNNHYLhrWRYP0xIkT8cEPfhDPPfccNE2TDdBLlizB5z73Wdx77wP4p3/6J2zfvh11dXXIZrP43ve+h/7+fnzzm9/A0qVL0dPTg8mTJ+NTn/oUdu3ah5tuugmlUgkAkM/n8a1vfQubN2/Gf//3j2SPl6ZpiEYjsq/IMHQoClCplLFixXLkciXcddd/4ciRI6hvqIfj2PjWt/4djY0NWLJkCVpamnHs2DE8//zz1f6uCLq6urBhwwY5EiEajeLP//zPkU6n8bGPfQxPPvkkmpub0dXZieeeew633XYr7rrrLnz5y1/Cu971LhSLeRiGBt8HJk5sw3ve8z5s27YNvb29sCwLiqJURxRoKJcr4/qEeaLxiv/qiMaQZVnQdR0XXHABotEonnrqKQwMDKCvrw+Dg4Ny6/v27duxc+deWTHSdR3nn38+HMfBI488gr1798rdX6qqoqenB6tXr0ZHRwfmzp2LSZMmyapPqVSSvUbFYlEOeRSjBsTuL9Gj1NPTg6amJlx//fUol208+OCD6O7uhuM4chDnwMAAHnnkEXR0dODCCy/EpMmTUSwWT3r/HQfYtGkTjhw5IneoidECixcvRk/PADZs2IBDhw7Bsiw5IyqXy2HDhg3o6urBu971LrS0tGDJkiWoq6vDPffcg76+PkQiEbm7rqOjA1u2bMHBg0dRLBblLCvx354HZLNZqKqKXC6HY8eOIZGI4KMf/SgWLFgAIBh62dfXh3/8x3/Epz71KezcuRO5XE6GQUWBbAAHgmXY6dOnY9KkSbKfSQTWxqYmqKqKw4cP48iRI5g8eTLmz58vB18qCrBq1Srs2LEDg4ODchyDbduyGZ6IxgYrTkRjqFAowPM8zJs3r1r1eVoOVRT9OQDQ0dGBI0eOYOLEichms3IJKBo1sX79ehQKBTQ3N8tt+Y7joK+vD1u3bsXb3vY2tLa2Ys+ePdA0DeVyGclkEuVyecQ0bzFUUnxeRVFQV1eH48ePo66uDueddx6KxSKeeOIJOZjRNE1UKhXEYjHs3bsXXV1dmDdvHurr6zEwMCB39L0SXQdefPFFHDt2TA6LFLOSVqxYgUgkgoULF+KP/uiPkEgk5FiAcrksg9SKFStw/PhxNDY2wjRVPPXUU6ivr5f3Z8KECXBdF52dnTh27BimTZsG13WRy+XkzkBVhRyF0HH0KB588EEkk0n8yZ98GjfddBN2796NLVu2YNWqVXjqqadw6NAhtLS0yBlbwWMIOejSdV04joO6ujo0NDSgv78fN954I0zTlDOhgp16WTQ1NaG1tRWTJ0/G0089hXw+DwB48smn0d3dDVVVEY1GAQC27UBVtREzu4jorcXgRDSGbNtGXV0dDMOArmsYHBxELpdDPB5HqVRCKpVCLpeTh2Mmk1G5ZT9YegsGOcZiMcTjcfT39484lqOrqwupVELOQIpEIgCCJ/hyuTzimBbROC6mlAOQQax2+rio0tTOS2pqasLg4CAymYw8HiTskSBHjhyB4zgycIglxYkTJyKZjOL888/HsmXLkE6n0d3djbq6OqRSKeTzeRw6dAjFYhF1dXWYOnUqAMj5VgMDA3JXn+d5yOVyKJfLiMfjsj/IcRzkcjl4HoYDiqJg7dq12Lp1K374wx/ive99L97+9rfLCePbtm3DPffcg+/ceScam5rgOE41hEIOHxWBt7W1FZGIjubmZtxyyy2YOnUqenp6kEqlYJomfN9Ff38/du/ejWg0iilTp6KhoQEAkMvlZPAU96F2GOh4Pl2eaDxjcCIaQ2IS+M6dO6HrwMKFC/HwQw/BMAw0NjbKUNPQ0IB4PA7bDpaFYrEYOjo6AACpVAoHDx5EuVyWYwByuRwSiQSmTZuGYrEsJ1KL8FM7U0gcS6LrOmKxmFwKEz1CTU1NKBQKOHz4MObMmYPW1lYcPHgQ8Xhc7pQTx7CIo0pey2BGUT0SVS9d16FpGjKZDDZt2obvfOc7eOyxx0YcbeJ5ntyWP3PmTHR0dGDv3r3I5Uo466yzsHfvXrS1tcmhl+VyGZMnT0Zzc7M8Z873fTltPDhvzkMmk5FVogMHDiCXy+Gll17CX/7lX2LBggVYuXIlbrvtNnz5y1/Gnj178OKLL8plTU2DrIaJgaC5XA65XAm/+tWv8LWvfQ2apqG/v1+eTxiLBTOpotEodu/ejWQyjUKhhHLZlY+t4zhwnOGzN0XPWO0wUyJ667DOSzTGMpkMXnzxRZRKLt797ndjxsyZGBoaQm9vLzqOHkVDQwMuu+wyzJkzp/okGvS4BEtvwCWXXAJN09Bx9KjsW3JdFy0tLVi8ePGI3hoRlkRwEEeliEAlAkmxWESlUoFt2/IYk5deegmRiIaLLrpI9jWJ6dzd3d1YuHAhZs+ejT179mBwcDBURcTzgFgsJpcLxXEjruvi2WefxZIli1BfX4/9+/Zhz549cF0X2WwWpVIJ8+fPx+23314dY9COzZs3w7Is3HbbbVAUBUePHkVvby96e3rQ0tKCK6+8EvPnz5Xn/WmaJnvMFCXoScpkMmhqasL/+l//C1/4whcABJWfTCaDnTt34tvf/jbuu+8+TJgwARdccAEAyIGWQBAC8/k8CoUCisUijhw5Al3XMXfuXPT09GDnjh3yvlqWhY6jR3HrrbfiD/7gDzB37lwZRg1DkxU7TdPkkSviDL7R09iJ6K3D4EQ0hsQ4gs7OTvz617/G9OnT8clPfhKLFy9GIpHAnLlz8e53vxtXXnklUqm43KnV19eHdevWYdu2XXjPe96Da6+9Fum6Ohk+Zs+ejZUrV0JVVTzwwAPyTDpx2K047FcsjYkn5Ewmg3w+j1Qqhfnz56O5ubm6lOXh8ccfx/79R/De974XF1xwgfx40zQxf/58fPSjH0W5XMbdd98tA9rJqCrksmTwZ1U2xD/++OM4erQTV111Fa697jo0NjbKHqfm5mZcfvnl+PM//9+IRCLIZrN48skn8cADD2DOnDn42Mc+hnPPPRfxeBwzZs7E9ddfj6VLl8K2g96j+vp6JBKJEQ3stUfSLFu2DH/xF39RPZYmgtbWVsTjcXR3deHo0aOwbRvpdBpAsJzZ39+PctlFQ0MDZs+ejaamJpRKJXR2duKhhx7CWWedhY985CNoa2+Hbdvo6+tDuVzG+265BX/4h3+IBQsWwbZdDA4OVjcFoNpkrkDT9BFN8+L8Op5TRzQ2uFRHNIZE1aCrqwv//M//jPb2dvz5n/8p3vGOd6CzsxOxWAwTJkzACy+8gHXrnsLkyZPlAbR79uzBXXfdha997R/g+/8b6XQavb29KBaLuOmmm/AHf/BxbNq0Gb/+9a/R29ODyVOmwLZtuXvOsix5HIqmabLSpGkaZs6cicsuuwy2bWPdunXo7+/HQ7/9LR665hp8+tN/hHz+T/HLX/4Se/bswcSJE/H2t78dH/vYrXjssbW499575Tl14kn+lfh+8Bjk83lYliWPjREVtR/96Ef4y7/8S0SjUfzrv/4rjhw5gra2Nlx++eX45Cc/iYcffgwPPvigbLr+9re/jWnTpuEf//H/YsOGLejq6kIikcCkSZPw3HPPYevWrUgmkzAMA729vUilUtXDcoOz+wzDwMGDB7F371687W1vw/e//33ce++9eOGFFzBp0iS8+93vxp/8yZ9A13Xcf//9iMVi6O/vx9DQEHRdw9KlS3HjjTfi8OHDeO6559Dd3Y1/+Zd/waWXXoq/+qu/gud52L17N0qlEs4++2z80R/9AQzDwH333Ye9e/Zg+owZqKurg6ZBHiNTW4mrPStP7EIkorfWuA9OolG29ge0WHJg8yT9vqtUKqivr4fv+9i0aRM+8YlP4IYbbsBFF12ERCKBrq4uPPDAA7jzzjvx8MMPo76+HocPH0Z9fT1KpRLuvvtu2LaNT3ziE/je9+6AbfswTQU9PYP4xS9+ic9//vNwHAdNEybIs+Oy2aycZSR6fMT5b6qq4m//9m/xmc98Bt/4xv8HRQE+/ek/xc9+9jMkUykZXj7xiU/guuveiUymiFQqiuPHe/HNb34bd999N0qlEhRFQTQalf1LIqAZhoFcLoeGhgbZW+Q4LurrG5DL5eXBxoZholKx8b3vfR+ZTBaf+MQn8LOf3Y1SyYZpGjh+vBM/+cnd+Lu/+zuUSmWUSsHn2bFjJz7+8T/Atddei8svvxx1dfU4evQo/vM//wsPPfQQfvazn2HKlKno6upGfX0DSqUSIpEoCoUyEokkSqUyDMPEt771HxgayuCzn/0sLr74EnlGnmlq2LhxC/7xH/8Je/fuq077TiGbzeGv/ur/4IMf/CC++tW/xfHjvbjpppswODiEl17ahVtv/TA+/elP41/+5WtQVSCTCQLqhg0v4v/8n7/GqlWr0NzSgt7eXiSTSWQyRcTjCRmMRPVOjjqABk3VALDqRPRWU+obWsZ1d6GiQAana665Bv/1Xz/EjBmz5aGlAMMT/f6qHTnQ3NyMfD6PgYEBtLe3y0GRQ0ND8H0f69evR319PS655BJ5MK44WHfmzJmYNm2a3DXX2dmJbdu2yRcWoi9K7MYSu80Mw4DjONWqi4f+/n6Yponm5mbo/z97fx4kWXrXd6Of56y5Z9bWe8++z2ikYdAuIfG+klhsMGAQxkvIECwmbAjblwDCvmHL9sXY2MB1EGa5WCwBxGvJGCOxSTBCAqF9HY1m1Yymu6eX2iv3k2d97h+nnlNZ1VVd1V1dU1Xdv89ETlZnnjz7Oc/3/FbHYWJigq985StFO5DRaEStVuOOO+6gXq9z/PjxwiV19uxZlpeXAQqXl3EDjosp4x47duwYtVqNr33tawRBQL1eL1x1JjPPBLnfcccdHD9+vJjvhQsXePzxx6nX60UslmVZTE5O0ul0WFle5t777qPb7VKpVDh37hzVapW/+Zu/oVKp8OY3v5mlpSVqtRoA999/P08//TSj0YiJiQnm5+ep1WocP36c22+/vWjfsrS0xPnz57l48SJBEFAul3Ech+Xl5dUMulKxHp/73OeKNjeVSoXTp09zyy23UKlUiKKI0WjEc889y8LCAlEUFf0EK5UK99//AJ/73Oe2ttjp1SgLJcJJONj85//8n3nkkUd4+9vfvu7zw2zYOPQWJ0E4zFQqFYbDIa985Sv59//+36O15qd+6qf4wuc/T2tiAtu2GQ6HvP3tb2dmZoannnqqKB0QRRFHjhxhdnaWz3/uc3z1q1/F87yiflEYhkxMTBR1kWDtZmXewzAsMuxMVp1lWXQ6HaIo4syZM5RKJWZmZoo0+H6/z5NPPlnE//T7fYbDIZZlFa4kE3QOa819jWgrlUqMRiMuXbq0Gpidt1/RWhetUHzfJ8syJicnWVhY4DOf+QyNRqMIcI+iqMhgMxlqjz76KO9+97vpdrv8i3/xLzh//nyxP5Ik4Y1vfCOnTp3iE5/4BFEUUa1WAVaz975UfBbHcWEl+8oTT3D+/PnCejYcDonjmFKpxMTEBEEQoLWmXq8XQeftlRWqtRpHjx4tyh+MRiOefPJJnnvuOZrNZrEf4zivgWWEa61WZ3l5mY997GPU6/XLTxgtYamCsN+IcBKEfcT3fVZWVvjqV7/K3Nwc3/Vd38U73/lO5ubmipT+173udfzYj/0YcRzze7/3e1y8eHG12KNXWEiAdWKltjpwG2sVsGntH8/zCpFiBI7BVBO3LKsQDKYUgsHERE2sijwjZiC3OiVJUpQ6MDE7tm0XlhjP8wiCoKgNValUippVZv6NRgOtNWmaEgRBUSNqZmaGXq9HrVaj1+vx7LPPcvHiRb7927+dv//3/z7vec976HQ6zMzM8Mgjj/AjP/IjxHHM+9//frrdbuHunJqawnGcdZmExnU5NTXFaDQqhOHExASWZRWNmV3XJQgCHMdZdfuVOHb8ON1ut2grYwL6jaA07jbbtqlUmkW80mg0Io4TarUaSZIUAlMQhIOFCCdB2Ee63S61Wo12u80v/dIvUa/X+YEf+AG+5Vu+hTDM6y+dOnWKY8eO8Xu/93s89thjhSAxKe+NRqNot2IwFcCNpWcjxlU3XmQRKIo3GguUqSNlqoQbt994wLJxB5r5AkVFa+MKNILOuNTMvE0sonllWVa4sYxAqdfrhSgzDYNN5W8Tz9hsNul2u/zar/0aJ06c4F/9q3/Fd3/3d7O8vEy5XGZycpJms8l73/veIi7MlGQwYszUuSqXy8RxXIhCs1xT/8lsT5Zlq0UsNdVqlV6vR6fTodFoYFkWaZoWlkGzzVmWrROWZn96nk+tVi+W6Xke/X5/zVUnliZBODCIcBKEfcRYX6rVKl/+8pf5qZ/6Kd7xjndw9913MzMzQ5ZlfOELX+CjH/0oH/rQh1BKceTIkaJ/mRFNpv3GuNiBzeMIxi1QrVYLrXXh+gKKliBGlBiryXjhTNO0d1zwmO0xcUrGamKEhgkON+tkxIqpXh6GYRHfZARfmqaMRqPi90aoGEzRTNN/7zOf+Qw/8iM/wrd8y7fwwAMPcPr0aS5cuMDFixf58pe/zGOPPUav2+W+++8v6lCZ7TbuMiP6jHvOLFcpVYgrU3uq2+0yHA6p1WqF5U4phe/7xbaMW/qMKDLLiOO8N50pEwFrvQTNfhEE4WAhwkkQ9hHTOLZcLuP7Pi+88AK/9mu/RqVSoVKpEARB0XjWcRxarRaDwYAoimi1WkW8k6kyHUVR4XIzaeuwJqA2xjoZUWLWxQzyxlpigruNIKhUKoVFygguI9iMm898BxTfG4ywMoLMCBGz/PFCmGmaFgHTRrwBhSh0HIder8fU1FThLms0Gly8eJH3vOc91Gq1oiWMqQpeqVQ4dfo0/X6fudlZJlfddKZAqLF4AetincIwLASiEX/D4ZCJiYmiX5/ZBnMMTEah2X/jLW3MvsuDy22yLA+kr1arKKWKzMdwtGZFFAThYCD2X0HYR0wANOSiZmJionD1LC0tEUURYRhSLpdpNBqrhRZDjh49ymAwWGcdMvMwQsRk7BmX2Lj1wvzGvMYFi6lKbWJyPM8jyzIGg0EhikysUrPZxPf9dZYtsw6+7xexQabA5mg0IoqiIsvPxDIZ4Wea35rWK8blaKaHtUa6WZatpu53i/XqdDpYlkW1WiUIAgaDQSF2XNel0WgwHA6ZnZ3lzrvuKhoUG0GXpilpmlIqlYrthDwWzFidTLxVHMcsLCwU7jSzDWZ5JtDe7Huzzzc2SI6iqNjWcffjuOtVEISDw6EvR2DqwpRKJV7zmtfwp3/6fqam8iq/w+Fwe1O3xA4IgiAIwlWT6aTIXB3PnoW1noq/+Iu/yPHjx/nO7/zOwh1+2Dn0qsFkshh3Rrs94MEHH1ztVp5uPwNBEARBEK4aE8+40cVvYgWVUpw6dYoLFy5QLpcLq7ZxXx9WDr1wUkoVKc3z8/NcunSJt73tbaysrKyLrRAEQRAE4fqxsUvHuEvauNTvuecennjiiWJ6oMhUPawcemUxrnhXVlZ45plneNOb3gSstSkQBEEQBOH6YuInDY7jFBmlWZbx8MMPU6/XefzxxwsvkMki3a6P5UHm8K75KlprBoMBk5OTrKys8NGPfpSf+Imf4PWvfz1f/OIXtxdP0rJAEARBEK6aLNNFHPF4qyTT//KHfuiHeO6553j++eexbbvINB2v/XYYOfQWJ1M92aQB/83f/A1pmvKud73rUPtQBUEQBOEgMz7Gjpc4UUpxzz338G3f9m184AMfKHpqmgxT3/eLEh6HkUMvnEzvq16vh+M4nD17lj/5kz/hzW9+M29729v2e/UEQRAE4YbExCmZTgTGRXf77bfzAz/wA5w9e5Y//uM/xnXdolaame4wN/k99MKp3+/TarWK1gxBEPBbv/VbVCoV3vWud+336gmCIAjCDYmpjG8sScZdd//99/Oud72L97///Tz55JNUq1W6nU7Ri3I0Gq1r9XTYsMvl2rv3eyV2g0lvNMXkPM+j0+lw5swZfuInfoJer8cTTzxBv99nZmaGlZUV0jRlenq66DullFpX+dhUNTYF7QRBEAThZsN13csKshqxlCQJExMTXLp4kXK5zIkTJzh39ixv/oZv4Gd+5md4/vnn+bEf+7HCLWd6QI7HQh1WDr1wMmrXtG8wEfvdbpd+v88//af/lJWVFT7zmc+wsrLC6dOncRyHS5cukWVZEahm2kiY1EqTSnmYA9gEQRAE4VrpdrvAWuX8cUOCZVlcvHiR+x94gCiKOHvmDG9561t597vfTZZlvPvd72Z2dna/Vn1POfSVw4Gi6WiWZYWqHQwGnDp1il/+5V/m5MmT/MEf/AH/5b/8F3rdLkePHQNY18dqYw8vw2H2wwqCIAjCtVKtVhmNRoRhWBgVxls1NRoNVlZWaK+sFKJpamqK//bf/hu//du/Tb1e3+9N2BNuCOFkTH/G4mRZFoPBANu2qVar/NzP/RzveMc7+OM//mN+5Vd+pSjGValUiKKoaGS6sVHpeLNSQRAEQbiZSJKELMtwHGe1IXXu0QmCgDiOicKQEydP8s53vpMf+ZEfYTQa8e/+3b/jT/7kTzh9+jQrKyv7vQl7wqEXTsbN5jhOUe59vLBWHMecOnWK7/u+7+O7v/u7CcOQxx57jA984AN86lOf4siRGZIkIYoi0jQtSseb12GubioIgiAI14ppam2y5eI4RilFvV6n2Wzy2te+jne+8508+OCDfP7zn+dXfuVX+PjHP140yb5RPTaHXjiN974xf493Kfd9n/m5ORzX5R3veAf/4B/8A1772tfS7/d58skn+V//6330ej2WlpZYWloquqmbju6HudaEIAiCIFwrpqecUopqtcrRo0e5++67efDBB7nlllt4y1veyvnz53nve9/LH/3RH/HSSy/RarVoNpucOXOGZrO535uwJ9wQwskEcJsq4eZAG9ddq9Wi3+8zNzdHvV7nNa95DX/rb/0t3vKWt3D33XeRpilhGBKGYWF5Gm9cKAiCIAg3GyaWybZtXNfFtm3SNGUwGNDv93nPe36DD3/4wzz91FM0mk1arRbtdpskSZiZmSmCy280Dr1wMow3DTSuO631um7NjUaDUqnE0tISURRx5MgRTpw4zuTkJCdOnOD48eM0m01c1y1Mk1KOQBAEQbgZMSUDRqMRS0tLzM7OcvHiRc6fP8/i4iJRFGPbNtPT03S7XUajEbVajSAI0Frjed4+b8HecMMIJ0EQBEEQhL1GzCmCIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAnCIUZrTZZl2LaNZVkkSYLWuvjbtu3iM4A4jsmyDMdxUEph2zZRFKGUolwuk2UZcRzjeV7xO/OZ1hqlFGmaopTCsiwsyyKKIgCyLEMpheu6RFFEmqbFsgyWZRWfA9i2TZqmxbakaYplWevmN/5vs23Auvn7vl9sc5IkAOs+H41GxXqYbbIsC6UUYRji+36xbZ7nFeskCIKwEWf7SQRBOMgYcaSUolQqEccxYRjieR5BEFAqlfB9vxAdo9FonTgqlUpEUVR8ZllWISZc1yUMQyzLwnXdQnAA66ZXSgG5uDHix3XdQsyMRqPi32Zay7IKEWOEnNYa3/exbZvhcFjM0wgt83vzcl2XNE0LYWfbdjH/JEkYDod4nldMF4Yh5XIZgCiK8H0fgDAMC6Fo5iUIgrAZIpwE4RCjtcZxHKIoWidqHMdhamqKI0eOFIInTVOSJKHdbrOyskIURTiOg2VZhUgCGI1GWJbFxMQEExMTnD9/niAIiuVZllVYiozVylifjOCwbbuYJo7jQkgZq49Z1zRNC0uWUoosy6hWq5TLZcIwLESMWaYRV2Z5xupkRJNt28V6aq3xPK/4zLZtGo0GJ06cIAgCLly4UIgv27ZxHKf4nVnfOI5f1uMpCMLBR1x1gnCIMQO9ESTGsjMzM8PMzAxaa5aXl5mfn6fT6QBw9OhRjh07VoiR4XBIs9nklltuQWtdCKdSqcTk5CRxHDMcDgnDcJ0Lzli6jCsvjuPCVWbcbsblZcTbaDQqLEgbRcm4xanRaKyz+pj5hWHIaDQiiqLiM+OSU0qtW484jnEchyRJivXwPI9qtVpYteI4RilVrLPWet28BUEQNiIWJ0E4xFiWVbjMjHAwoimKIi5cuMDKygpKKTzPo1Qqcfr0aRqNBrVajV6vh+d5NBoN6vU6ruvi+34hbIIgIIoiXNelVqsVLj0jSsatVsYiZKxbo9GISqVSWHWCIEBrTbVaLeZtBIzBWHtMnJGxKgHFNhhRYyxZxtI1LtKMizCOY9I0LURSFEXMzs4yHA4Li5nruvT7fXzfp1wuFwLKrJ8gCMI4IpwE4RBjgrONePB9n4mJCTzP48yZM2itKZVKRezT8vIyruty+vRpjhw5wmg04siRI4WFZ3JykkajwcLCQjHPiYkJarUatVqNIAgYDAYsLy8XFqFWq0W1WqVUKqG1JgxDhsNhIdh832dqaqqw7kxOTtLpdJifny8sVybWyWAEWJZl+L5fLL9UKpFlGf1+n16vx2g0IgxDsiyjXC7TbDapVqvYtl1MB3m8U6/XAyisUAD1ep3JyUlWVlYol8tMTEwQxzGj0YhLly69zEdTEITDgAgnQTjEmNgeIzIqlQq+7zMajeh2u0X80XhwdafTodlscvLkSebm5gqBZF7GAuQ4DtVqlVarhWVZBEGA53nUajWSJKHT6VCv15mamipccXEc47ouk5OTWJbFysoKtVqNY8eOkaYpvV6vcMkZV994vJT5zogyy7JoNpvF/EwQfL1ep1arcf78ecIwxHEcJicnabVaRSyX4zg0m00ajQb9fp/BYECpVOLYsWOFS7FcLnPy5Ek8zyuEned51Ot1tNbMzs7u27EVBOFgIsJJEA4xZvDfGNMzGo0K0WTbdpGOPzk5SRiGRbZdlmWcP38egKmpKebm5kiShCiKCpEShiELCwt0Oh1OnTrFHXfcQaVSKQSY53m0223m5+cJgoBWq8Utt9zCzMwMy8vL2LaN7/v0ej1mZ2dJkqQINodcoI2XBxgXTcaK5DgOly5d4uLFi7iuyy233MLx48dZXl4mjmNKpRKtVguACxcu0G63KZVKNJtNpqamKJfLBEFQlDgw7sVxl+P58+eJ45hKpcI999zD1NSUCCdBEC5DgsMF4RBjygUYEWRcVibAO47jIvbIxPtAntVm3FWj0aiw0oz/plQqkaYpCwsLRFFEo9Gg2+3SbrcL116r1cJxHFZWVkjTlEqlQrfbLURVvV4vYqLm5+fp9XpFLSkTi2RexuIEFOJJKUWj0eDMmTMEQUCtVsOyLObn5xkMBhw7dqwQTo1GgxdffJEoiiiVSti2XbjzzDYZa5pxBZqaU4uLi4WoCoKAbrdLqVTahyMqCMJBRyxOgnCIMRlhxjVlBEelUilqMRnr07g7qlwurwuONoLCCJg4jul2u0xOTq6LPTJ/j5cFmJyc5K677kJrTa1WK0SKEWMmhslktxnBZBjPXhuff5Zl1Ot1yuUyURQxGAyoVCpF0c7RaMTExEQhiIxL0livzLKNIDLbZwLFwzAsMv/GSxpszAgUBEEYR4STIBxixqt5G5fTcDikWq1SrVYLy5IpgBkEQRFA3e12GY1GwJoFyoiOcrlMtVotljNuETI1jyAXPYuLi1y4cIEoivA8j+FwiOu6eJ5HFEVUq9VC4BkRYwTKeCVyI5bGY506nU6RNWiKeo5XBzcCxwjHWq1WBIQrpYiiqMgKNNMZSqXSOisX5Ba88VpOgiAIG5E7gyAcYowogrXSBIuLiyilOH36NI7jYNt2EddUqVQ4efIklUqFxcXFwj03ntYfBEFRK8mInfHUfpMBZ6xDxsplsu2iKKJcLnPkyJEihmhcnBjBNL4NprXKeIsVE4cEMDk5SalUotvtFsKw2WzS6/XQWjMcDgmCgEajgeM4hGEIwMmTJ2k0GkVxT7NcY3Eaty6Z+k9me0U4CYKwGWJxEoRDTJZleJ7HYDAoLEGdTqcQFpOTk0UJAcdxOH78OFNTU7TbbbrdbmGpybKMWq3G0aNHC0uNETimuOR4lXAA3/eZnZ3l5MmTxXK01kxNTdFsNte5zYzby1iaxotbjluZjLvN1Ifq9/vMzs7ieR5HjhxhZWUF13WLQPBLly7hOA7D4ZDZ2Vnq9TrHjx8vajCZOlH9fr9wUZZKpUJImW0z1rFxi5rneS/vwRQE4VAgwkkQDjHj8UNAEdO0uLhImqbcc889hRXJxPFcuHCBixcvFgUmkyRheXmZer2O53m0Wi2CIEApxXA4XOdaM73uzLKXlpZoNpscPXqUmZmZwiU3OzvLxYsXCyuYCQofb7QLay5A85nJ4jM1lwCWl5c5duwYx44dY2pqqsgcXFpaotvtUq/X6ff7XLp0qYizMkHkL730UrHOxvK2uLhYFOI0/ezM9hjiOC5cfoIgCOOoicmj0s1SEA4xpinveAA4UFhiqtUqlUqlcGG12+0iI86446IootlsFq44E0RusuRgrb9cpVIhy7LCHWasVr7vF9arKIqKOk2m6rgpTWDEFVAEehsLUJqmRQHLwWBQWL9MLz0TwG3qVJnCmyb+adxNZ9xtDz74IIPBgLNnzzIcDmk0Gussao1Gg+Xl5SLeylQur1ar6wScIAgCiMVJEA49G4O/TZaZKVhpilWa+J1x9xVQtFgxvejGRUwQBFiWheM4hbvNiK3xuKHxlibmt6Yq+Gg0KmpLGUuQ+Z2JrQIKi5gpj2B+b2KdzLxNvzzjDuz1ejSbTW699VaCIODMmTOFJcvUmTLlBsYtZyZmy9SU8n2/EI6mGfK4FUoQBAHE4iQIB5rxWCBYC27eWO/oZsXET5kK49PT00U2YRiGVCoVlpeXmZubYzgcFqLSVDk3rsP9Yvz4jQfMy/EVhIOLWJx2yfjNThCuN+OVtMfZmJl2s2KEk+lFl2VZUWYgyzLm5uYIgqCI8RrPlDsIWXMbyyFs/Pd4DS1BuFq2O3/kHnJtiHDaJVIkT9hLTCr/xkw0EGsErBeQYRiuq5QOay5DWF/eAA6OcIK1Y7nxOMsxFnbDdq5mOb+uDRFOu+Qg3HyFGxdTW8kgN7r1jBfUHP/MxEt5nldco2bfme8OAuOV0s37+D1FLE7Cbjgo5/mNhginXWLqyQjCXiAp8VdmYw0oY50zRS1NsPfG8gcHpTq4sZgZ8TfemHmjIBSEq2U74W0yZoWrQ4TTLmm32/u9CsINzLi1RJ4eL8eIoCzLiiDx8b5044JpPIPPCKqDghF7RkiZauomk1AQroX9fjC4URHhtEskuE7YS64kmLYKHL9ZMeLDWHCMxWbcDWb250aX2H4xLoxNqxfzb6Ao+SAI18J2Mbgyfl0bIpx2icQgCC8nG8sR3OwYd5uxLpn4pfGmwQYT+zTuFtvv5I7tjqfcX4TdsN3DgTx4XRsinHaJDGDCfrCx/s945phxW23sC7ex0S5QVPc2qfrGKqOUKmocJUlSxN4MBgPK5XLRI2+8GKap6h2GIb7vFxluwDpBM17wUilFHMeUSqXCVWWqf5v2MeVymTiO0VoThiHlcnmdMHJdt1gP03vOrLOx4ADrXHVwMDJitxu45P4i7AYRRnuDCCdBOMQYYWREyUZXlGmHorUuKm67rluUOTDNdE1RSKVUIYLGq4BrrXFdtxBXRpC4rlvE42xcD9PCxIgw08B3vN0KgOd5ReuV8Uy4KIrwPK+wFFUqlcJ1ZYTSuKXJiLs4jgnDsNh2QRCE64ncVQThEGOsLkYojYsXY60wAqNcLhfiJY7jy5rujltnzO9LpVIhjEy2l+M4RFFU9KMz1qfxHnlAIdKMWBoXTmZeSZIU8y+VSsU0ZptgrcWKsTyNRiOUUpeVGjDCybIsXNfFdd0DYVUSBOHGwi6Xa+/e75UQBOHaGM8gM6JjvJii6SE37roLw5A0TQtLj5mPsSiNByabvnHmBTAxMVEsyzTwveuuu4r+eOOp/sayZTCfmeWMu+3Mepr1NsLIiKrTp08D0Ov1CpeecTMaq9O4S1AQBGEvEIuTIBxiNrrHjGvMuKyyLMNxnMIKZFxcJtus1+vhOE4hmoB1lioTRG2Eie/7TE5O0u/3ieOYudlZWhMThXWn2+0Wy/M8j+Xl5aKpsJn3eOxUmqZUKhWAQtAZa9dgMAAo3HSVSmVder4Rg0aImfmZZY3HWAmCIFwvRDgJwiFm3LpkLC61Wg3P8xgMBoWFJ47josmtKdo6HA6ZnJwEchEThmHhAoNcZJlecCaGyLjATPzSqdOnC8ETxzGu61KtVhkOhwwGg8I6laZpIdqAQvCUSqXCfVepVNBaEwQBjuPQaDRwXZfhcAiwLnbJ9/3iMyPwzDJ836dUKuF5HqPR6OU8HIIg3ASIcBKEQ46x0Bj3VavVol6v0+l0uPXWWwnDkE6nw3A4xHVdms0mvu+Tpilf/epX6Xa7pGnK5OQkMzMzVKtVPM/D8zzOnz9Pr9cjjmPq9ToTExPMzMxQKpUolUr0er2i+vDU1BT1ep3JyUmCIMDzPJ588kk6nQ5JktBqtZiZmSmWb9s2/X6f5eVlZmdnGQ6HhaXq2LFjNBoNHMchCAJGoxHVapX5+XnSNKVWq+H7PnfccQdBEJAkCcPhkNnZWdrtNmEYAhQCSxAE4XohMU6CcIgZD9o2MUfHjh1jamoKpRTnz58nDENqtVrx2dLSEr1eD6UUx48fZzAYoJTi9OnTtFotlpeXuXTpEr1ej1OnTjEcDhmNRoVLTClFu90mCAKCIGAwGHDvvfcCsLi4SLfbpdfr0Ww2mZqaKixSRpilacrs7Cznzp2j2WwWVi8j7E6ePMnU1BQrKyssLCwUgnBycpKlpSWGwyGnTp1iZmaGp59+moWFBZRS1Go1ILdCWZZVWLMEQRCuJ2JxEoRDjMk+M0HRSZJQLpcJgoCnnnoKpRS+7+M4TiE0jEsujmNOnDgBUAiYF154gaWlJWzbLmKMTp48SZqmLCws0Ov1mJycZDQacenSpSI2Kk1Ter0eKysrRbyR1ppbb721cBceP36cLMt4/vnni9isF154gePHj3P8+HEuXbqE53kcPXqUJ598sgg0HwwG1Ov1InDcxGIFQVBk3J0/f57BYIDv++syBwVBEK43IpwE4RBjArdhrUqwES3jAiKKouLdBGCHYVjUcTIZbCZQ27IsRqNRUb/J87xC7Jjp0zRdF+ht5meEUxAERWFLE9PU6XQYjUZF+QJTrqBWq1GtVvF9H9d1161bHMcEQVAEiZsaT/V6nSNHjpBlGcvLy3Q6nSJA3gi68RILgiAI1wMRToJwiDEZcOMp+EY4mQw2467aWLrAWHBMvJIpLVCv14vq4MPhsAg8L5fLRcB1EAQARdae+XtjdXCzfNd1i6riSZIUAexxHDMYDIjjGN/38TyPJEmKGlNm2WEYFpl8QRBw8eJFut0u09PT1Ot1pqenieOYlZUV5ubmCtEnMU6CIFxvRDgJwiEmTdOiJpKx7Iy3YDGB4yY2afyz8UKZo9GIdrtdBFcb0WVqKK2srABQqVSwbZtSqVRkz5lK48bKZX5rhJJZhllXszxTwsB1XYIgKDLkkiShWq0WcViO41CpVIqK5ZVKBcdxaLfbLC0t4TgOtVqNU6dO0Wq1aLfbRcFMEyQuCIJwvdj/9uCCIFwzxu02XsPJiCfzPVCk/JuSBcY6ZApimnimWq1W9H5L05SpqSmOHj3K9PQ0WmtGo1Hx+8XFxaJYpSlZYJZpyhOMVxXv9XpUq1UmJiYK116lUuHYsWNFRfDhcEiSJBw9enSdsGs2m0Xwd7Va5cSJE5w+fboQR+12u2jRYtq0SCkCQRD2ArE4CcIhxrjdxlusmHYq5t8mjsi0SAEK95lx0Q0GA4IgoFqtFpl2nucVImdjdtqRI0dwXZeLFy8W/epM/JMRUePFN4fDIYuLi5w8eZLTp0/T6/XWtYG5cOECaZqSJAkLCwtMTExw2223FRl59Xq9iKsy8U6Tk5OsrKwwMzNTWLiMsDOuSOlVJwjC9UbKEQjCIWbcDWZEkREqpuClsQiZSt5GVPi+TxRFdDodBoNB4WozdaBqtRrtdpv5+Xk6nU6RwWdEWaVSodfrkSQJrusW9aCM69BxHMrlMktLS4RhWFi5PM+jXC4XffCWlpaYn58vBGAQBNi2TbVaLQpumt54Jrg8DEMsy+LIkSMcPXqUcrlMFEUsLS0VrkYT0C4IgnA9UROTR+XOIgiHlPHGuSawulKpFFW2jesujmOOHDnCxYsXiwDvRqNRtFEJgqCwFLVaLaIoIggCXNcFKESIcb+ZulG2bTMcDpmYmCjqQRlhZkRPr9ejVCoVpQVKpRLlcpkkSQormAkCH4+PGs/GMyUSyuVy0SrGxFsZS5NZdhiGRcNfQRCE640IJ0EQBEEQhB0ij2SCIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsENEOAmCIAiCIOwQEU6CIAiCIAg7RISTIAiCIAjCDhHhJAiCIAiCsEOkH4EgCPuGaQuzFVL5WxCEg4ZYnARBEARBEHaICCdBEARBEIQdIq46QRD2DXHFCYJw2BCLkyAIgiAIwg4Ri5MgCPvGdhan7YLHBUEQXm7E4iQIgiAIgrBDRDgJgiAIgiDsEHHVCYKwb4grThCEw4ZYnARBEARBEHaICCdBEARBEIQdIsJJEARBEARhh4hwEgRBEARB2CEinARBEARBEHaICCdBEARBEIQdIsJJEARBEARhh4hwEgRBEARB2CEinARBEARBEHaICCdBEARBEIQdIsJJEARBEARhh4hwEgRBEARB2CEinARBEARBEHaICCdBEARBEIQdIsJJEARBEARhhzj7vQKCIBxeVOZjZ1BKYwBemsxvKY1BhpslpCxR9UukvTuIooj2TIBt2+hhSj3QHA+6tIiplHzubFX5ulrKLfWMiXKG67qsJFXi0KPTjZif6/BMb5GndcYXWxUUJbw4xbGrtFWJOANcG8uycJM+NiGWSgEIbRcAvbrevh7mf2SVl3N3CYJwAyDCSRCEPcN1XdI0JcsyfN9HqRFxrweZS6MxyS3TLe4/Ms0tt53kdMXl1PAStXgRX/dRSlHyZkjjEkePudx1p8uthEwP+iy25zn/0gKO46Azje3Y2J5LTEaapmitUZba780XBOEGRE1MHtXbTyYIgnA5VloGIHYCUCmODrE1ONEEAIv1LlprJgILRys0EZYe8U12wttmKnzH0dNUKhWgRTAYEEZdfNuhbLmgFMvuJGGaEOkYy7I4SgLAbBTxtVTzXy4+y3PtkEFkoSsNIiy01pTt3NKU6Xz6wCqTKge9qqX8LARAY7+Me0sQhBsBsTgJgrBnZFmG4zgoBVEYUam63Hb6JI9OlXlF0ye9tES/30enCq01pVKJkudDmBCNRmR27rKzbYcsy9BRjNYaz/OoOx6vf/3rGT35Nc5eXGZk26hsbdlRFOG4EsYpCML1RYSTIAjXTODlsU1TQf7e93wSwLUXAHCs+0jjlGG2wp12yjdVVvguu8KjWR2npzgzWUYphZO1cLFIkpBOEtArB+iSZipcxo8sLD0k0zEvTaf4vk9rVOKOEAqlpCLARSsLDWTKyl+rtziNg6XtIsjJSXNBFYvBSRCEq0SEkyAIe4ZSimQ4xHIsbjt9Gw+eXuKEexw1gHa7TTqVCxilU5TO0HFMkiYoR+H7PnZi4WBjaYc4SUjTlNFoRL+fEA5jPvnUc5xbgWGcoMsltMotVwCe55Fl2ZVWTxAE4aoR4SQIwjXjrsYKjRwLW0MtzE04lxo+ADqMwHb4O3bCPyiVeVM8RTlJSQcz2FGFqfhrjMo2UZryoqryPBlPxxnn5/rMhwN0uU6z2eRN7iSvaNR4CMVoNOI9nOfj/Xm+2nXp+A2SconEKRNpnYurLMAnw7Jy4ZStxjJZaGwN9mrsU4z7cu8yQRAOOSKcBEHYM9I0ZWJyktunfI4dbcLoRYbDIZ7WVCoVQs+jF484d/4cf3NukS/2hpwHRh4EnkPiVQjDkN4gZKE6iXPiJJVKhYujizz7whyZ56JclYulZIR2HCzLQmmFzjRIYp0gCNcZyaoTBOGaUTp3tWWr6Wol8timRfuVAPjZ5/iOr/P5eydCHliBqbm35vWZ6iELbkLi3cr/8/RX+Y3BPMNBip8o/NRFRQmOVaVXzrP2mmEIVkhmB0Q2DK0aALV4Ca01faeG5ZaJsowsy6i5AVa4VscpsnzQ+XOirdey6mJLgpwEQbg6xOIkCMKeUavZfP3Xfz1ff2KOiafm0W2f0WhEmqY4ZYfPP/4452YX6fsJaB/H8XEtFzLwHG/b+dt2LnwcxyEjz+IzL1uJuUkQhOuPCCdBEK6ZyLJA27hpLlIGvkIpRTPoUYvgkeMpf/tVzzFzT5tOM0aVPsTypSazSZ3Ph0f4f9vQK7vcuWjjKpfOZI9+eUCvPMLxLdxBFTeFXlnjZVBKQ8oJKGsA2ieOMsh8Ek+hdYyjUiw7o5LEuFZMlqzWa1KQAqlySBRoZWOLrV0QhGtAhJMgCHuCUoq77nJotVoo1aHZBPu2W5ioTNM+2+Urn/8KvegoAL7tY1l58cokScACy7LylwbQWIC16hq0LAu0he056NTFdV201jiej2VnpIMeWRziiidOEITrjAgnQRCuGT9NgIRuyUNrzbGgBSoh8Obp+SmPPJhRzpawFl2oRyRvPMdyfI5L/+ebeX72LOXGIugq56cVVmrTCiq4gwoL9RZ2/VXYr34zWVqhGnl4KdjWMgDKy7PlZoK8REHTsUjTlIobkQ0ucPGrnyFcegHLyetLoZ0NgeLG3CTuPEEQrg4RToIgXBfUakxR/q5RSjEzM0OajsBK191tkiQhjmMsy4PVNilFjzll4fs+tVaL+179athEOA1WhdORYZz3wvMckiSh6sX05p9jtPQ8i52zQPzy7gRBEG54RDgJgnDNJHYuTKZH+fugFBM7iphpAKacDq72AIdsFIGTEUfw+czlaw2PZuyQaE1oxWil6ZVzUWVldRqpR33kE2SnGegKAwVedgsAs6t3rvmGTZqC60KSwXQ5IY0mmXefpGvN06ALKgSV122ydS64/Cz/d6KkjpMgCFeHNHISBGHPcF0X3/fBskjTDMcHz4MgCPLec1oX70qpIktuzfqkVl+svtS6V5pCHEMYQhCkxHGMUipf7mopA0EQhOuJWJwE4SZGjaXsm1Yl5n3j95tRTnNLU6RPkSkIVRtSKCUZ1QheYJaHGkdhMcJVNRj1ySJ41eQp3pskjEoxSvtYfS8XQnVN11VQ9WlXayh9F1maotQIHJvAPk+qoJLdjlIwwRKdYQd3+g6CTKMDhU5bqPQ8jJ6lqnugQafTpBaEXg+AIMuD0j3V29X2C4Jw8yEWJ0EQ9owwhCiKzB/ggp93Y8F1beI4zmsu2TbOatVvx/PAcRgOhwyHw2JeURQVlqgwDBkMhiRJsppRl1upTGaemU4QBOF6IxYnQRCuHZXHDCV2QmxB4A3yz9MWZPDiE4r+nUdwJzqEYcgl636+oI/wO/ef4cXX1il/sYMVuziOl9dVGqwwmWU40XlK0Z+w+KcLKNchVH1iFWB5mpgMO72TauUBBt/wd1DuCewIVOxTLsXEwQWy4QCV2mgrV2mplZFarFUPV8PLt0UQBGEHiHASBGHPePZZzXA4ZGqqRtBu8+KLL/JiOCBJpjn9wAP0nvoCWZihlca2HdIkr/4dxzFhp8PS0leJdUao+lilDG0nJMM+XhXuv+9usizDdSziOI+BAmi32wwGAxxxswmCsAeIcBIE4ZoprWb7r5TzP5w0v6VMjQag4EuzNh9afITK/SM+34THL9zJMM2wfJeTr1J87mszJE/28S928Z0yZe2hbJuLjYgoGuDWMizL4pZOF5UoktBnFLaonrqNo/e9lo5bBkuhM5gASsMzDGefRA2WKOGRrq5nZOeWMXRugXLILWOa0su1qwRBuEEQ4SQIwp7Rbqd89rOfZaKpWbYj0vQ2XNdDrcYzPfLII5zrnqE/v8BgMCBVIa6r0Fpj2zZhGOJ5HnEcMxpFOK7iyJEjHLvzTo4ePcrAcfISlgosCxYXF7l06VJeRdxxII32excIgnCDIcJJEIRrZrja08QmAO1TGTUoJVDmEgALgzq/+3iNyVtvY+qho0RHc8vUsSVI4wz9yhpxNSE8UWZwZg7mYkqdiMrQwrYdRrECMuYma8QNH/fEnXDHN5Le8UZGE2WSoIcXx5SUjR+kzJ77G8K5v6apu6AUKXmj4MTOBZSdutgZ2Kqbf67E4iQIwtUhwkkQhD3DsiyG588TzZZo3jdF6qQkSUKWuZRKJXpxzG233Uajdj/DYxeY/8qzDJ+/QNYLUErh+z6J0kxNTTDzwJ1M3PUK3OkH6do1ut0uJadUZM+NRiPm5+fpdjrMlK28Mrny9nkPCIJwo6EmJo9Kzq4gCNfE0MkrmvhpipuBndSwM8CdA0DZTYJI4bSOc/o1D3P8/14hnqnxNUejtebEMEIpxchxUUrhZCnWIMJeCQlHKeXaFKln02vGKMcm0Q5ZUqY0bGAPT0B4Fyeqx1DzA5752Gc4/9R7UKMFfCcvcxDRJLVAW7nFyUnK2Bk4qg1AvJp1JwiCsFPE4iQIwp5hWRZKwfLyMr2nnqJ3usdM+R6c6SZRFGHbNlmWrVUP1xmOZVGtVimXLEaxXlePybIslG2vzldRrdVYmF9g8akznD93jjgMKa9m02VZJpXqBEG47ohwEgThmmmMcotNZnfJLBiV2/kXyQkAatEsdWVTGjbRT18ksUukvQ4nX+GTnvZYTFdIvBjtZVh2hlLgoBgkZdA+fqmRNwROh6RZiMoyyhlYFY8KZ7AuBqw8fY4Ljz9DOLdIlSUcLyVVKamTFVl1KnOwNdiEYEGCaceSvaz7SxCEw48IJ0EQ9ow0TcG2KZVKpGnKwsICF7+0SEMfY8o9RWWmjnIhVnlV8CxLSXUudBzbY3l5GQDtxTiuhes4eBboUT7vL33+83TPLBMvL+OR98bTpHk1cscmSa+8foIgCFeLCCdBEK6ZyqoyGVouCSmpFQBgYWFpSMsV2llG5szngdqRh34mggsXcL845Pa3vpZw2ic+DmHTIXAykiSh1PNIE8WE7eK6LqljY1s2qj1CvdDBfWqepYU5+i+cJ4s1rVRTdh1s7ZKmmtDVYNlkOgNt4yc2lgbLzrPpQiaAVQuUIAjCVSDCSRCEPSPLstX+cdnq3w6O4zAYrHD2bJcn3ncWbqlTvb9F467jVI5OUC6XqVglbM8lzSAIApb6PTqdDsHFZbLnlvGeXqCzMkJVJrCUi2VZZGkGWYpG5w2DM3HDCYJw/ZGsOkEQrpnIzi1OpTivj4SVW3BGDqAdkqiC7/v4zK+67fJo7UE2g1IuXqxxlIXtdXC8FNe3ccslnFoN2/eIGBJGQ0b9DmF/SDx0sRIfldXzAHF3CVtDKcxyV186iVKKXi3vRZdlJcCmHJOvn3cOgD63AeDrwcu4twRBuBEQi5MgCHuG7/ukaUqYhHm5ASfPokvTFNt20FqTZilpFBHGI/QwJesoUtclsxSjrI+yMhxS7AxUZqO0Bq3zrLk0hfyfWJYFei2NLs/Y28eNFwThhkRNTBzflcVJ7TIrRe9zH04l9jZBuGnZ7f1H7h/Czcyux2+9y3ohapdPRte4fKlyIgiCIAiCsEOc3Sq2w/7Atd8WL0EQDi9y/xCEXbBbi9E+LV8sToIgCIIgCDtEgsP33WYmj6yCsF/s9nlXnjwFYT/Z7fh9beOvXPeCIAiCIAg7xNmtYst2aTHZb+WW7bfBZ78NXoIgXDNS7UC4mdn9+L3fA+C1LX+/dYsgCIIgCMKhwdF6d4pP77KQyS4Xv2v2W+8ehDUQBEEQhKvlWsZvpdbcPLvVH7uto7ZdVuxW6+e8613v2tWCt3N1je+kzbD2WTekIlwEQRAE4aqxrzFUZztdsOP57LFw2mo9nbe//f/e3YK3WfJ2O2i3O3C3inW3879eJ4AgCIIgXA2HZXzaaj3UNspnW/2wy8rjeps6TlsKJ9d1d7fgfRZO27FrV+QhOTEFQRCEm4v9Hp+uZv6bTXvQhdOWrro4jne14O3iyw+6cNI63dPlb4/E5wvCfrHXpn5BuJGxrJ2PX3sinHa89M3Z7vLPtugS7uxeuBxsV93289/vO99+L18Qbl52ffXJ5SsIWzI+/m4unHb++02/v6a12jmOs3mNcCfTya5mbOkru/r0NppOW/vsqtPX5uPc8fy3Q2LTBeHQIpevsJ/s+fi0HfbOLU7j61Kst9rO47Nd2ttexzhtPv9dW5zUbjXfvscI7a8rUR5ZBWH/kKtPOMzsd4zttXiUxj/bztW39zFO23y/VYxTtssQnzQLi41TSq37GyBNUyzLKr67THVuIYjN77ePUdr+e8uyigOUZRlpmqK1RmtdmOLG53M1Kn33el5qDwuCIAhXz25j9LYTJmmabjquG7IkQSlVjLFmXM2yjCzLivF13e/1mD6Is8vmvXHaK7GdR2tbtktu2+LRatcWJ9fzCqFhdtr4y3GcYkcWK7O6zCzL1inO61kYa3yeRiyNY9t28d1mvxEEQRCEg8yuI5S3q7O4Oj5vNTaPGyTMWKqUwrZtbNtepw1upHHVSZLdxTjpMeGxmdgxgsWoVqNKzY4eF06b+UCvVzmBcdVsPt9MUG1UvVtF1Rfz2dXaCYIgCMK18XJJkY3jp2Hj+Lhx3N4omMy/N3p4zGebTXsQcbaKGt8pehNL0jhGmJkdP/4y1qhxrlYwbTedZVmFSBsXUZuJtM1Mktv5YEU4CYIgCPvBrtPxryYsZcwNt1EYWZaFbduXTbvZWLudIDrIgsng3H333buaQboqjMZ36PiO7ff7pGlKFEWEYYipG+U4zqbC6XqTpuk6M6LjOPi+j+d5OI5DrVa7onDarkCoCCdBEARhP9hr4TQ+pqdpSpIkpGlajKtBEKz73MQUG1fduMdpK8PFYUR1e4NdbcH4gTMq0/wNEAQBWZYRRRHD4ZBut0uv1yMIAuI4xvO8fD5blmTfXbplEASUSiVqtRr1ep1qtUqpVCqEU6lUumw529WeWLf8K34rCIIgCHvDy2GXGY9ZNkYII6iGwyGj0Yhut0u322U0GhUJYRu9NVsFgY9/v900BwW1vNLZ1dhvbbKh4ztgPGstTVOGwyHtdpulpSV6vR6j0ejylbqOO6tcLlOv15mamqLValEqldaZFKMouuLvJcZJEARBOIjsebGcTcb1jYaFOI4ZDof0ej263S79fp/hcEgcx8VYu5lXZ7NlbDftQUF1uv1djf16G2EBa+LDmO+SJGEwGDAcDnnqqafyFblGi9N2PPzww/i+T7lcxrZtsiwjSZLCj7qZu3CzrIGtEOEkCIIg7Ad7nVU37moz7xsDu03YTZZl9Pt9FhYWWFhYoNfrXbaczSxJh1M4dXZncdotKysdzp8/z9zcHLAWU2TbNp7nEQTBFX8/nvJoYqkcx+HUqVPcdttthStwa6SOkiAIgiBcLVrrYow1Boksy1hZWWFxcZGLFy8W2fOe56GUIlmt/eS6Lmm6Fvd0pfet2C9htbuUuutAvV5nenoarTXdbpcgCAorz3A43HbHmBimNE2J45hSqcT09DTT09M7EE2CIAiCIFwLRgQppYrYJsdxaLVa+L5PFEV0Oh1Go9G6gpjj8dCHkX0XTuVymZmZGbzVQpqDwQDIlWQURdtmtZnKpuZAtFotTp06RaPRWBfVLwiCIAjC9WNjAWszDnueh+d5nDhxAq01YRiSJEnRRWQt0z3//WEoQTDO7hq9XAe01vi+T6vVKlSqicgfD+LeCmNV0lpTrVaZmZmh2WxiWZaIJkEQBEHYIxzHKSxOphtHkiREUUSapkxNTTE1NUW1WiXLsqIckamvuJGNWfkHlX0XTkmSkGUZruvSarWYmJgoAshN/NKVXq7rEoZ5v7zp6WmmpqawLIs4jg/8zhcEQRCEw4rJlh9PuDJWJcgNG5OTk0xNTeE4TiGcTKLWlcbogzx+77twMiilqNVqTE9PF2Jou1IAkGfshWGI7/tMT09TqVTWZfEJgiAIgnD9MVYmI6CMeLJtu/D61Go1pqamqFQqwJpbbrP2LIeFfRdOZieawLFWq0WlUikOwnYv4zdtNBo0Go3iAO62lYwgCIIgCFtjSvoYI8W4scO45mzbLgpQu65bxDdtFdN0GATUvgsnE4dkdmSlUqFcLq8z910JEyPVaDTwPI8oior0x902MBYEQRAEYXOiKEJrXdRoHB+3x61QrutSLpfxPK9o37JdjcSDzL6vueNYZFlSvGxbcfToDLatyLJkB1anFMuC6elJtE5RSmPbijSNcV2bvE7TlV7C/mLt8iUIgiBshmVZRRVvz/OKmOJqtbqujICJOTIWpDRNi3Zk283fCKFxl5vxJPl+mTCMsSyHZnMCx/FIkjybLsvWt3Mxvx1n43i/ke2+v96YfbbvI89mViWTUbeTHTHuTxUEQRAEIUcpxdTUVFFM2nVdLMsqaiuZsdO8jBstTVP6/f6ulz/e2Hd8OePfHUb2XW1sViHUlHDfqXDyPK84GOPz2UlwuSAIgiDciMRxzGAwII5jXNfFdd0ihGVmZoYkSUjTtBgrx0NmTDD3bjBjuCmMaYSbqTB+WNl34WTYKJxc192xIvV9f9Nmgof5wNw8bOdKFVerIAjCtWBKAIw34zVj5dzc3LqYJFOTKYoikiS5bjHC431hHccRi9P1ZDygzLbtomL4TjLrTNHMjfM7zAdGEARBEHZDkiRFwhXknTpqtRq2bVOpVArLTxAERT1FY3QwNZeuByakRoTTdcJYhczONBlxO41x2niwt+riLAiCIAg3E0YYJUlCrVYjiiJ+53d+h1//9V/H9308z6NarZKmKUEQAHnRylKphO/7120dYC2w+kZg34sdGbEzHphm1OlOMBkBsF7BinASBEEQbmYqlQphGDIajXAch+XlZf7gD/6AD37wg3S7Xb7/+7+f2267jUajwWAwKNxzJg5pt2wscrnx34eVfbc4bRQ7xgK1U2U63hxw47wEQRAE4WZlMBgUNZbCMOT222/ne77ne5iamuLnf/7n+aM/+iPOnTuHZVl4nrepEeJ6cNiF0kb2XThtLNluCmR5nrcj8WMC2gBc1yVN0yIQ7npVDzfuQ2MRG29QaJoaOo5DFEWXNSc2J67JUAjDEK31lk0OBUEQBGEnlEqlomyAqdNk4oQty6LZbNLv90mShHK5zHA45Du/8zv5pV/6JWq1Gj/xEz/B7/7u79LtdimXy0UHD9PvdbdkWVb0nrUsi1KpVMQmj2fOb6zDtNXnBuP22/i63mw1/30XTgcdc4CNIDInpDno4zt1vD+PcTkeP36cubk55ubmqNfr1Gq14nfXM/hOEARBuLkIw5BGowFAEARF5lqSJERRxLPPPkur1eLIkSMsLS3xla98hbNnz3LPPffw7ne/G8uy+PVf/3V++Zd/mfn5eVzXLYSWma9wOfse4wQH24w3XhDMWLDCMCysSiad0yhroKiZYVkWTzzxBP/zf/5PqtUq3/u938upU6cKoWXUtyAIgiBcLXEcUy6Xi1Zjvu+TZVnxcP7AAw/w1FNP8Yd/+Id85CMf4ZlnnmFxcZE0TYnjmOnpac6ePctv/uZvcvLkSb7ne76HRqPBcDgkDMP93rwDy4EQTgeZvGy8T5IkhanOpFWGYVhYlkzJeWNtMn3zfuVXfoX3vve9WJZFpVLh+7//+/E8j+FwSL1eZzQa7fMWCoIgCIeR8VARpVTxUF8ul+l0Ovzqr/4qv/Vbv8WnP/1pjh07xm233cbtt99OuVymXq8XQqrdbnPx4kWSJKHZbDIajQiC4Lpl1t1o7Ltw2qpHDRyMAO/xGCyTrlkqlQrXnIl5MrFVxvLkui7nzp3jL/7iLwiCgCAI+PCHP8x3fud3cuuttzI/P1/U1hAEQRCEq8V4QUqlEmEYkiQJ9XqdS5cu8Yd/+If883/+z5mcnOQf/aN/xN/+23+b+++/nzvuuAOlFC+88ALf8R3fweTkJG9/+9t5+9vfTqlUotPpYFlWEfMkXM6+C6fNOEj1HpRSReDc5OQkkPuSu90ulUplXeVVE/DteR5hGPLJT36Sc+fO8ba3vY2nnnqKJ554gq985SvceuutRYFPQRAEQbgWTOC1KTlQrVYJw5D3ve99/Ot//a+59dZb+dEf/VH+8T/+x8UDf7Va5bHHHuNnf/ZnuXTpEn/v7/09/sk/+Sd8/dd/PUmSEATBVZUEuhmR4PBtMFkGrusyOzvL7OwsruviOE6hxk2RMSP4HMdhYWGB97///Wit+d7v/V7e+c53Mjc3x5/+6Z+ytLTE5OQkaZru89YJgiAIhxWTdRaGIUopXNflL//yL/nN3/xNkiTh53/+5/mhH/ohZmZmikKYH/nIR/iFX/gF/uqv/opv+7Zv44d/+Id5zWtew2g0Io5jqtUqAFEU7fPWHVwOhHA6yAHSpuHhM888w0/+5E/ykz/5kzzzzDNUKpXChWcCyMdZWlriE5/4BEeOHOEd73gH3/qt30qWZXzyk59kdnaWUqnEYDDYp60SBEEQDjumALTv+9TrdXq9Hr//+7/Pk08+yU//9E8X7rcLFy6QZRlRFPGbv/mb/Nmf/Rnf9m3fxi/8wi/w0EMP0e126ff7xHFctDETr8jW7LtwMiZBEyNkKpYat9dW9RrMy7KsdX3qxt18OxFkJrDO+IqNEDLB3qb+xK/92q/xv//3/+b9738/v/d7v1cIH9u2iaKI6elp5ubmGA6HlEolfu/3fo/BYMA3f/M3U6lUuPfee3nTm97Ec889x+c+9zkAsTgJgiAI14xt20WCkdaa5557jg9+8IM89NBDvOtd7yrGQNd1qVQqpGnK8ePH+cEf/EF+8Rd/kXq9TpqmRU87z/NI0xTXdYsq4oPBYF0lcc/ziON4R6688RZoZqwe7+ox/v14eM5mn298H/9+r14aNn3tu3Dab4zLLUmSQsiYrDnP86jX67z44os89thjTE5O0mq1+PM//3POnj1Lo9Eo0j5HoxGtVotjx44xNzfHl7/8Zfr9Pt/yLd+C1pp6vc4b3vAGhsMhH/rQh5ibmytipgRBEAThWjCWoSiKeOaZZ+h2uzzyyCNMTU0Vosj3feI4ZmJign/5L/8l/+bf/Bump6fJsoxyuVwkKvX7fbrdLlEU4ThO0SDYlDgw3hXHcW7qOoQ3vXAyzYRNdty4Gs6yjDAM+cQnPsGlS5f48R//cf7ZP/tnnD17lo9//OOFe65SqaxL3fzoRz/KF7/4RW677Tbe+ta3kqYp1WqVb//2b+fo0aN84hOf4Pnnn6dUKu3bdguCIAiHGyNijJfkqaeeYjQa8da3vpVSqYTjOKRpimVZRRD50aNHOX36NEEQFJ8NBgPSNKVSqXDs2DF83+fixYvMz88XhZ2Npcd4aQ5yiM1ec9MLJ1NCwFQDBwoLlGmh8sEPfpAkSXjDG97Aq1/9avr9Pn/2Z39WZDCYmk2O49But/nYxz5GkiT83b/7d3Fdl8FgwHA45NSpUzz00EOsrKzwuc99jk6ns89bLwiCIBxWjMfDhJQsLi4C8MADDxCGYSGazLtlWczNzTE7O0utVqNarRYJTUZkdbtd3ve+9/HOd76TT37yk+val9m2XcRBeZ63n5u+rxzIcgQvJyYrwcRJGZOkibv69Kc/zWOPPcbrX/96Xve61xEEAY8++igf/vCHefzxx7nlllsK/6/jOLz44ot88pOfpNPp0G63+f3f//0iKA9yodbr9fjLv/xLvuM7voOJiYn93HxBEAThkDLe5B4o4o5MjO54NXFjUdJaE8cxvu8zGAwIw5BSqVQIq2q1yuLiIl/+8pf56le/ylve8hYgr1Jeq9WKsBYTD3UzctMLJ+OzNSdflmW4rovruoxGIx5//HGiKOKRRx5hcXGRIAh45JFHeP755/niF7/IHXfcUah9rTVf+MIXePbZZwH4xCc+wXve8x5c1y38y81mE611kV0nwkkQBEHYDSaZ6vjx4wB8+ctf5lWvehVKKaIoKoKdh8Mhtm3jeR4rKytUq1WCICjCUiAXX5cuXUIpxdTUVBEobmKaNv77ZuSmF06wPvvORP8nSUK73eaP//iP6ff7fOADH+AjH/kIcRzT6/VYXl7mve99L+94xzsKVd/tdvnwhz9MkiT8w3/4D7ntttt4xStewXA4ZDQaMRwO8X2fP//zP+cDH/gA733ve3n3u9+9fxsuCIIgHGpMOzDbtnnlK19JpVLhscce43u+53sol8tFOEmpVCIIgsJaZDpfOI5DuVwu6hO+9NJLfPKTn8R1XV71qlcVccDjmXaO4xThKTcjN+dWb2A8VdK47IbDIfPz83zsYx/jvvvu41WvehWe5xUmz1qtxoc+9CEGgwG+71Or1XjppZf48z//c8Iw5Ed/9Ed5/etfT6/Xo9frcfz4cUajUfHbP/qjP+IDH/iACCdBEAThmjDxTUopPM/jgQceoNls8vnPf56lpSVOnjxZJC0lSVKMYUYAmVIGaZoW1qjnnnuOp59+mltuuYXbb7+9aCNmmglblkWpVLqpLU7bBodvV+dgt4z3qjPmRsuyCMNwRwW4THD3eAHKq4n2932farVaqG8Tj+R5Hr/zO79DGIb88A//MD/3cz/Hf//v/51f/dVf5T/9p//ED/zADwDwvve9rwi8+7M/+zPa7TZveMMbuOWWW4oTa2JiguFwSKfToVarce+99/Loo4/ywgsv8Nd//ddUKhWiKCqy7CRrQRAEQdgJpjeq1ppjx47xPd/zPVy6dImf/dmfLQpkhmFIGIaUy+Wi9pMpueP7PouLi0xMTNDv9/kP/+E/0Ov1+Omf/ukiADxN02Je482Ed8J4GIwZpzerz7Td5xvf97Mt24HNqnu5REO73abT6RAEAXEcF7Wb5ubm+NCHPkSj0eCBBx7g+PHjRU2MEydOcP/991Mul/kf/+N/YFkWURTxf/7P/yFNU77ru76LEydO0Ol0yLKM0WiEZVm4rkuWZdxzzz287nWvA+BXf/VXWV5epl6vF9M5jkMQBOsKewqCIAjCOK7rkqYpURQxHA6p1+t813d9F69+9av57d/+bX7jN36DS5cuMTMzg+d5XLx4kV6vR6VSKRr6JknCqVOnuHDhAv/1v/5XPvvZz/LGN76Rt771rfu9eQeWAzkyX41o2q3AarVa1Ot1yuUySiniOCaOY4IgwHVdvvVbv5X7778f27YZDocMh0OUUtx///1867d+K57n0ev1mJ2dpdfr8XVf93W86U1vKrLszIltBFG73abRaPCN3/iN3Hvvvfi+XyhnI5yMaVUsToIgCMJWGEuQ8VBEUcQ3fMM38MM//MOcOHGCn/mZn+FXf/VX+fKXv4xlWRw5coSpqSls22ZhYYGTJ0/iOA5f/OIX+Y//8T/ya7/2azz00EP8+I//OLfffvt+b96m7KelqViHTqdzxdF5u5W8HoO7UqowA0Luqnr66aeZm5tjO22ndco999zDqVOnCnfbeHn47QiCoDBZGlOiMV/+xV/8BVNTUzz88MPrKoubWKgvfelLhGHIa1/7WhzH4WMf+xjlcplHHnlkXXXVMAyp1WpAXpl1YmKCXq/HY489xokTJ3jkkUcYjUbF9psinBtTTQVBEATBYEoLVKtVsiyj1+sxNTXFYDDggx/8ID/+4z9OEATce++9fOd3fiff+I3fyOnTp/F9H601X/rSl/jUpz7F+973Pp566ikeffRR/u2//bd80zd9E0EQ7Hr8UcouxrEsy3jppZc4c+ZMETeVT7Pe/bZVi5XNXHh7zVYqQnW73V0pn+0Eyk6E13gRSrh64XT33Xdz+vTpIvp/s144W5FlGaVSqbA2pWnKYDCg0WgAUCqVGA6HpGlaxCCNRiOUUpRKJXzfZ2VlBc/zitL0xp9sTgJjdXIchyRJyLKMWq1WbO9oNCIIAur1OoPBgCRJKJVKYnESBEEQtmT8Idt13aK0QL1eJ4oiPv3pT/Oe97yHP/3TPyWKIur1ejFu2bbN+fPn0VrTarX45m/+Zn7wB3+QV77ylUUs0m7Hd7AuE04vvvhi4ZEZNw5sJpy2i3Pa8zFyi+07EFl11zPIfHyeO9mpxtplRJOppGqCtYfDYVEgrN/vF4IpCAIg7w+ktS6mg9wiZQqNjUajwp0XRRHVapVer8fc3BwTExPrUklNXJPpG2RONkEQBEHYiCmFEwRBMb6YFiqu6/L2t7+du+66i7/zd/4OH/3oR/nMZz7D/Pw8CwsLdLtdXve61/GGN7yBb/7mb+bVr341rVaLfr/PaDQqmgLvluspcPbD6rQZB0I4bcZOd/RuD4hpl2LUrQkQN0HdSil838dxnKJfj8lgMEXAyuVyESBuhI6JhQKKFE7IMyCazWZhxRp3yZlqrp7nFSJMEARBELYiSRJs2yZJEpIkKbLRtdY8++yznDx5ku/7vu/ju7/7u+l2u/i+j+/7RFFEGIa0Wi0sy6Lb7XLx4kXq9TqNRqOYdjdsFE3XOl7vt1DayL4Hh19ph7wcrioTg1Qul6lWq0WxShPYbdxrw+GQSqVSNPRN0xTXdYuy9UmSFOtrmiJWq9WiK7XruliWRafTKcSZUqqo3GpZFrVaDa01/X6/sGQJgiAIwmb4vs9wOATyDLvhcFg8qFuWxZ133kkURUXykiliORgMyLKMSqXCysoKi4uLWJZFo9EojAL1ev26ruuNNJ7tOsZpt1iWQxiGVKtVut0ulUqFLMv41Kc+Vfhrt2N6eppXvvKVRX2JRqNRCI/tD9buXGH6YAnhg0F241wggiAcQqyb48asDvitVuu1OKUsy3jhhRd48cUXi95447HIm8U2jZfk2cxNt/sYrGtj3y1O4wUwzQ5L0/SyopZbYZryjjfqNb8XBEEQBGF/MK46I2DGPTOHeYw+EMLJBEGbOCITK7RT4WRexjw5fnAEQRAEQdgfzNicZRlxHBctzjYb3w9aLNNW7LtwAgqTnWkYaGKIdiJ+tNZF5VRzQMxvD8tBEARBEIQbDeMFMslPJv5qszIDW/37Sux1S7itOBBZdaZwpXk3gWsbd/BmmCaHpty8bdukaSqiSRAEQRD2GWMYGQ6HxHFc9LvbTtxcjzF8r3TAgRFOYRjiOA5RFNHr9Yo2JdthXHu9Xo+JiQkcxykOyGH2oR5qbpLATEEQBOHKGGtTr9crSieMVw4302z8zU7nvR/su6vOuNRMRe0oiuj3+1ctnLrdblGtG6R4pCAIgiDsJ1mWFQWljXAyCWAbx/fD5CXad+FkMAHecRwzGo2KHb4dRnQFQUAcx+tim0Q4CYIgCML+YMZxM0abMJqdju8HlT131Y3voM0DwvKdWq1W6XQ6nDt3rmi0u9NYJcdxGI1GzM7O4nkezWazCBjfuLzx3j65yNrd9h30OhqCIAiCsBeY/rBa66I0kAmVsSyraCU2OzvLcDgspnccZ934vpM6Tua7g8CeW5xMhWzTnmS8eaDpg2NMeZ1Oh06nU2TIbQwi2+xlpomiiHa7TbvdXvf7jcsbjUaEYViUPxAEQRAE4epJkoQwDBmNRkUje9O8NwgCtNa0221WVlZIkqQQU1v1rzsowmg7XjaLkxFQZocZdWoCw5eXl1lYWCga6TqOsyNXm1GvcRzT7XYLq9PU1FTRhw4oajyNVyu9Hg0MBUEQBOFmxIy/JtDbjO2QG03a7Tbz8/P0+/1iunHBtJlQ2qqR70ESVXsunKIoKnq+wVpVbyOm0jRleXmZS5cu0el0sCwL3/cLE992VqGNhTNXVlaKXnFTU1OFADNqd3w98gj/g3MwBEEQBOEwYQwScHnXjpdeeomVlZViXDeNiM0YbdhYnmCnomm/xNSeCydTIdRYfsZ702itWVhYYm5ujna7TZZluK67LnhsJ3WcTLsV13WJoojl5WVc10VrzeTkZDHteOVSYFUlSwC5IAiCIFwtlmURx3HRyN4YKlZWVuh0OiwvL69ram/GajPdVvHPWwmo8Wn2kz0XTmYHGbecbdvEcUy/32c4HHLhwqWibpPruoXIMkJoJ/OP45g0TbFtu+j+vLS0VMRUVatVqtUqjuMUivdKZd8FQRAEQbgySqnC2KGUYjQasby8zOzsLMvLy1iWU8Qam3JBruuuG3s3BoXvxFiy2d8vJ3sunMb9mSYlsdfrsby8TLfbpd8fFkFl19ouZTxuyfxt3HZpmlKv15mcnKRerxcFMkHKFQiCIAjCtWLG0CRJ6Pf7rKys0G63GQwGq8YMt8igG2+rZjLqDotrbiOq2+3uaUK9sTaZIpXLy8u02+0iCt+2c6uSibQfb9Ybx/G2MU4bRdfGHnfGElUul2m1WkxOTtJoNApr1g5qbAqCIAiCsIHRaES/32dpaYl2u11k0tm2vdoJJMH3/WJ627aJoogkSSiXy+tCdzYrR7CRgxIwrs6efemKwmm7FTNCJcuyQriYADGtdWH1SZJkXeDYTnfOdsvfymo0Lp7GI/2NO8/zPGzbptForKs5YV6mT95OqpcLgiAIwo2GKUydpmkRy2ReaZrSbreBrcfp8X6zm1mXxpsAX+ndcFAsTs7jjz9+xQm2W9GNwmJjbQYTt2ReW7nhrnWHbPzduILdbD211oWIsyyLbrd7xflJyQJBEAThZmWzsdkUvRzvN7fZtFv9+0rj/UF308EOYpy2iwMyxSY3e5nvgS2/N+zVzjJCzcQ+GevTeMC6mW6z104C1AVBEATh5Wa78Xm3HpMkSYr5XGmcN1zp35vFNF3N91dazsuN43nermaw1e+N5ccc2PEdvx272SkbK5JuLAE/7rYbF04H9QAJgiAIwmZsVn17nN2OX+Pj+8ZxdSfLulrhtNV3W81/v3DG+7ltxnYrO26xMe/jO9UEfY/7Osen2S6eabvlb3YwrzQfsy5GRI274jY7sHEcX3H5giAIgnAjsp142Sx5azsxtJ37brea4OVgW4vTToLDzXQ7UYoblepWpsRr2TkbrU2wvgnhxuUrpda54jabZrcWOUEQBEE4jGzmCryaMgI7EU5X8/1BwdnO1LdTNvN7KqXW7fiNqYdXct1drx1lxNRGS5hhvHfOZgLreu0fQRAEQThMGIvSVmPo9RJOG7+7luDxlxNnY1T81bJVxL1532gFGnfbmdpLV5rXTpe/Uzfd+LRwuaLeeGAPwkESBEEQhI3sdYzTVvPbafD2lcbScW2w0/U8KOOxczVR91c6SFdjOTKfmWKXV2KnO2qrwLWdxlLtF2LREgRBEK6F3Y5l19Ozsxkbx/eN013t9weFq2q5slms0k4j3/darIxbk65Gye63cDlIIk4QBEEQdsr1HP8P01jo7JUpb7ef7/T7ccZF02E6CIIgCIJw2NhpjNNO/73VZweNbYXTVhlxm8UL7XQnXM2OOQw7URAEQRBuNq62dMDVWqgO6vh/VTFOuxFLVzvty8V+L3+/XYWCIAjCzclexEhdS0bcfo/DV8uOLU5biaWrTU/c7nNBEARBEPae6y2cdhN6cxANK1txVa66nbBfwknimwRBEARh57zcwmkn0x2G8XvHWXXbxTpdafrtpr0ebBRNklUnCIIgCHvHduP/dh6pnc7voHFVMU6Gl7Mm0niT3o2fX2m9rmb+wv6xsfHy+AWntT6wdTwMB12Y7zWOWgRg2TkJwPFBAMBCxQfg6KCPZccEfkZIRpyeQilFLe2iibFcRRAEOK0GcZThBHU8z+O8P4fv+5w4qymVSrQrT5LZCte6g3AE4SihUqkwcmYByML78xXyv4pNAmTYGdjR6dU1zc+vFJfUgtRdAsBL/JdhL+0fe31+OmGKwiG2J/P7tHcBrTXl4TRaa7rNmIwAN46x44xSll/Ty+UKAPVuCMCorEk9mzjzyLKMqZHGdV0iLqFtiyS9j0TbBOT3har7BC4WKm1AVqHrVgGwCbF1AmqtsLKdgcVqT1adt9CyVzc72eXt5aBf/9utX4bpxWqBdoDVGovKrHeSF6tevX7I1jpxKFyU55FlCqIE33Jw1TJxHHOhfgSAE/FFAEJ9AoBSGoAVEjv5cXfjIziOQ5TOE8cxWbWM0iUIK7i4OFl+gGJ/bm2ltU2rdxyATm1pF3vn2rnu5QiuN+PNgeHyBsG7PTEP+vbfLIxnUWz1tHIYudHPr60qCW8UwFprLNvC0utHqjRN8TyPURSxvNQhWmpz7Ngx6tN1ut0upVKzOCfiOCbJAhy7SqlUIooilLsh+0YpFApQKDW+/1en2/D5jX58tmO32++6LgqHlLwLRBpFxfFyXZc0HWE5+d+uBV6aD8CmY0Wj0SCOY0IVkKYpmc7Isow0zfLr38vPkSRJ0JaF4zoopbAtmyxOcfKDuXY8V/9j3cM9q+dEPsXa/9dNtie8HIaF3bD++jCv8f2yuedIKQVa5degcrC0Jo5jlJVg2za2ba/rCrIVaZrmx9O2sSyL2HHQqQWWhdJbtWDZWWuWveTAC6fNfKhGMEk8043BlQbfG0E83cgkzJBa4Orc6++o/Mm+lubHLfHyJ9pl7whKuSiV4cQZqYpRShEom6Ta4LMvvYq/Oh/w4mCWW8pH+am5DjPVJk+0lrAsi1uD11PKUi56y9i2zaS2sW2FynILgs5Wow7SOrBmcdCFoFptRo7CAZQW4XQ96DR7uYWo20XZDp1KFaVcVmJFlsVMhQmEisRSBCrjrJ83Va+ledeIM/4i2tM4iU85a1CKmziJpmzFKCui74REtias9FG6ipNp/EwxNWqitWZkaSJ7RFWvWqxJ8hXT5s1aHftNM/dcsKWFzr68ie2NxLbn9xbCyd7wvbkNK5tVy5SFjaLCRWzbplN5iERrZvoDFIowsolGPqn3AOgSTlZZnW8bMuitPj/ZOkArDyqaVEEYTpBlGSfjFSw742I1A5WiiLE1+IkNWMxPnAdt4yfe9dhNV82hEE5ZlhVuG9u2UUrlTzeralU4vJi2O+YJ1BzrzdyzwsFkMwuOeXccp7h2tV7vgnUcB8v3ePL8eZ544g7OdC4wr7u0O3N8tjXPG958H7ZrF424LcvC932SJCFNUyq+T5ysWZrW3tcsDkpt+J7N11O4NsbvzUpZ6+7XWZbh+37uhlcazwbfd/JrPll76LVtG1e5WLFVWJuyLMNSOrda2BaWZZElmiiK0IkmSZNiLBi/V6jLLCTb/PsGP/7XKpzGvx83UOT72gIslAbXcRkMBgziAQCDwQDP89Cexvd9oigCbUOWP0BZOn+PV5VZvVIhSRKCICBME9K0hOvmIjdJEpSyCyuyKrZHbXh/+VGf+tRn9vSR/npsmLkQbdvGcZyrEk5isTjYZFmWD6CrsUzjx1UGtYOPlyZYmtWnUMishNSCtn00/97OY6AiXSHLMo5FZ3IR5dSIOcJfqAf4f/58QLvnEHoWPWcZrTWVuMEbT1f4wYdf4pSbkowCVLBArXkRO4Owczu+79Pz2/lyozsASJ0BqBBtLE6rz85KBatrvGqZUutjXoRrIyAXtspewo5DvCBBWRm6pFBlj5XAQ6cVlJUPiA00fhJQCTsArGQPMLQ1fXcAVhdKL+VCKrgPLwXi/HzJnNxla6/GUFnxycJ9a2vws/z4ZliAQ6YUaIdMZaTKIVPGRZxbmLLVW4t9kw8PWq1a6DbEOBUmO5WsjqH5frMsp7jWdWbRc+/m/U9HfKg7QbcLvX5IkoTotENJJdQYAtC1j5IqyKzV+dhzeCmUU0WawFDXKZdrHD82xa23wg9WLnDbxBDi/P4xssoA2KsxWX03P571aO/2zZXYc4vT9Uh3tCyrCB7OVejak4oIo8ONsUgkSX4BK6VwnLVkTzm+BxulzDP++BPp2nVvLIrmqdV1XWzbpjeKWO4t8ZdffoZ2u84DrzjJS23oLGc8/PBxshV4/PPLPK4fp3rnSaZbTVTmF8uwbZssyza3dJnXhvUa//fG74Vrw7Gd1ViWFN9xqNVKKCujnw4ZDAa4fpVRnBGOhqvWqJQqMZ5KcsvEqkvXtm0sx8VatVCNRiP6vSETtdzKFIYDHMfBt5I8FiaOieMY3/fHLBHG4rTeIrH+IWx9DM9Nf/S3sTip1Wt3vRdgzar4la98hS89MeSs/TrK5TLlso/r+qSxwtMRldXg7syubRBOA7wU3DDF9yqUdJ04zrh4cZnZWYtXTz7OzKtPUPM3XN+XWYz3dO9syYEXTrAWIB6GIUEQoHWeaVMqlcQqccgxx3U0GmFZFuVyGd/PB8hxkSwcTAKnCUAz6oNKGDqa2AZv9UEHO8RVFnZcybOsyqdJ05TfiF7JC+dXuLTwOd7x4N18633wkY98hE77FI824a2Tn+MTc5/g52Z/lLvrLv+28hUmZ07TCe7KLVLTKfaoTdPKLRe2swLayW+r2kVjk1rJ6o06Qa/Gslg6xsocrFURlh7spM0Dz93dFdI05Vy1xEKpxZngFbwwgk+HsLwE516KSGJNZHmUy4rpGtzegNuOw6M+vD79IJ7jcaFc52xY56vPfSvP9+GJVDPsQ29e46AoVbpMVercX7K4qwlH71xkquSwFIbU4pDj0dcA8ngZ7aBVHtuUx7RpRiq3LDrklqk14XSTnwDKHv9HEftXoFdfJrZY2WitSDWkmea/Lr+WpVLAu45/ja+702GymovZXjrCtm2aQZ4NF+tFMqpkOnfDWWRYGtwsxfP7jKwlFpOAD7z0Gj7/+Wf54+Q+Wr07eJv3lwCkqgnJBHacW54864U93jFXZtfCaa8tAuP+1TiO6ff7hfXJ9/3rYtES9pcwDOn1ejiOg+u6lEolgENRjmC78/9GP7/WPQEW1qaxGCfXxdbkrpNVRqMRFy+OeOKJJ3jLIw/y6KMn8HV+fZfLZUYjqB2t8da3vpXf/ajL888nvJC+QL1eB3LB47ouyTBD2etjm9YeoI2lIV9Lxp5YlVJj673HO2if2evzM8syPM/D9z36/T5PP3ORz1xw+GwcE46gVK6SJhCqhMFA054dsZSFnG1ErJTP8tArelSrVQaWxUuX2nzh8RZfWVzhxXKEYzXwsylsDd3+PPPBeZaHPheqk9y29BlunW5x9113rY9xuiz2ZXOLxdrb3o5/hyerDkBdvj9McDhr17heXW6WaZaWAsrlMvfeey93326hR7MkSUKcQalUYqKU+9Ji3dhUOJUtxSjsk+iUW07cwqum4OLF4wxnL7C8DGp64/3lJrE4bTfwjdfvGc+iMi66JMl9rIPBgMXFRYIgoF6vUyqVdjSo3ugD142A53kopeh0OsRxjGVZ1Go1XNctXD3m3EjTdF1A+X678m7288tXXWwNqaNJkpTY97BtG7+9kE/gZIRhyERqUYo15WiOLMv4u40p3vQKm7/10KfwtMfXvDew1JxiebjAoHSK2+yvEjsx/+3rIxYWFnhwOuVYfBZNjI4T0kGM71UZ+nXiOMYt9dBxgg4reJ5HpiDVGcrKb9wmu05l+X3GWs3Gy1S86XbdKOz1+XmuNsnUxO38yrDBx77QZ+nMLE3L4+E7FnjlCY9vcDImaym+P2AwGPB0t8eXllP+euluPrAwzRe+dB9veP0xvvY0fP7zS0ynintm7udtj3ya2ydtXpmBJqDrxrzYX+IrT0/zxTmLD59/B9ZFi3d68I23ZJzwBnS7XbzqBKPRCMjdfyb2SVu5ZcXN8pCAPALOXsu6vEYO+vW/bQywySrUFihrrGjD6ucWZJnGdVx0ZhNnGs8rgRXT6fQ5EvSYrvp8u/9FsvMZw8kG3XCApzRupCiHs2RZRtnLs+qqq5aoXlYjpkqUTaJUxgn/Kay+xTfor6ddu8RfJC6LPrhORJZluFZARIdKnHubApaJshStpne1f/RGC9sO2XeL03idpo3lBdI0xbZt2u02y8vLJElCs9mk2Wzm/vHrYJHY6zpQu30iOejCYLfrp7XG8zxarRaWZREEAfPz88WxNtOY5ZjkgPGimfvJQT9+27Hb9c+/V8WDjvnMZDxFWYjjOJS9Mq5KIM4txadPn+bEiRPo7M/W1XrauF7Hjh2j2WxyvLyIShKSJKVSKoHrkSZjSSJZhmtZWK67en5k12VQO+jHd7/v37Zt87WvfY1Pn72V+fkV7rr9dh68xebE6Vu4rZpwtJthp8toPaBWq3H30WN4ukG43OLSBXj2i0/yl3+pWWg7TE5O8qb7be4/DtVbXkE9C6isJCRpRtl3OD1xmubk3Uz3IHkJnn12xJNPfpUTgcXdx/vrYl+LWMkw2GYLrsx+H/+9Xv56y9x4tas1S9NWv9vM0FFkzHoOtqOpe3XCMETbq5YmnT/IWJaFhbVmAV6dV5IkeSyb7xOGFLGvJkOz6fpFXS9lW+x291/r9bPjlivXuuCdrJjZaUY4GUtCHMcEQcDKygqDwYBGo8Hk5CTVavW6DZwHPcbrsD/R7ATXdYvXwsICvV6vuABrtdplQskEBqdpeuBdeQf9+G3HdusfK4/IdtHkN01HdylFIQ2VH5uvlL+el8I6IxsiD0LrUWwbVhTYPrwteBAPD5U6aJURWhVCC+zkOE4aszI8xfMaPpveTWpB4oHnwYMdmHRBqUU8f4GUS5ApSlZEllnoVOMqC0WWxzHpPDZCqwys3PK0k+3b7f456Ox2/YfOMf6mN+KZC0tU6hX+X7d9jofvTvDtFZIk4VLtNKn2SFDYtsW9+lkesG1ePelzpnSCH1YPcu6FWaYm5viOVw/5/rv+AheLrPMwOk6YWb3On09P0+hl3NP8X7y2ZfOm9E4+PVD89+cjdPMevnHyWer1OpG2SdBYClSWYVur2ZWr9wk7GxcKNukhP/67HX+NxUVpC9CXOS6tcRdZ4aqzyLDIlMXF5gpJy+XshE0lHuGrDnUSGrpB2HX4gvsWvtyGJyKIY3Aj8DTUABREFgwU9Pzb0RrcGM6NTvFMyeX8CFYu/S0cB5Zd8H34htqI+71l7h9dwsosutZuHxyu7Xf7HhxuBsMsy2t3uK6LZVlEUcRoNGJxcbGwPkxOTlKr1YC1p9r9fuITdocRRZZlFYJYKcVoNGJubi43t/v+ahXi3E1ngsalZMH+s2bZWbU4ZWvXZpqmrKys8KXn5vjqxTyOLSXKW27YeauFt33z5fM0MVJKKV544RIffvElznQ6eJU6ys2zuC5ZNg/eUuGOu2s0pkqQeWTDkExn6Awsa7zGDxSxLuvqwez/wHfYGa/XdOrUCU6ezHCcCwTDgCiKiNwI2/VwnLx+02AwyM8T26fRaHD77TB/qcLp5mnuu6+Jb/t0FpdxdYRn2XS7XcrlMp7nEccxURTh+z4TExPceecU3rkXiKIIz/MolUoM4qRYL42+7DhvHQt1Y7LT7VufG7v+r2I+SgF603vvmrdIF5anpaUlHvvKX/FU/whfDicBqDLAR1PDIklDUjejT0LXO5InfZBnUZKdZH7e5ZPPfwnHcVjx8us5KX0N/+4GD51eLYNxja628S2/FnYtnK7H742VqSi7Hsf0ej06nQ6j0WidpQlYl7p+o5/4NzpKqUIQOY5Do9HAtm0WFxdpt9vMz88zMTFBq9XKA4KTpEhDN6UMhP2jlEW4WjNCYykLK7aBKvN+i/MDn//vE7dw7txF6sNZjnoBUw7YDJhJZql5MUeTE7jKpaPuQIW3UQ4dyiFUa8skJHQqj1K3l5hOepSilCzMGAxC/qD2AH/0gsuPODZvrtco1XskYR87U3g4uKsWMLBRGhKdJxxgDXL/g5O7DJQ62BbLg46lwU0Cjg173K4naOoBYXeCUXAPtm3zsPV5snjIRfskoW6ybL05z57lOZrRc7x1+fUELz7LfbdHnA5eBdF9uKMhy9MPkKYprWOfpa1GLLsu2nU4MnwDVmpjE1IuPUtYupXltIlvXcS3FENSPNdG6xjsCCfOe6JllhFMq+5kyqv/3r4tyEHmeo1/G4WTtSpIMiOSdF5tXVsKbam8qKWy8ZMWbtSgFCpcKtiWRaozPm8/zAfb8P6Xnufo0aO8s/QRms0mdtklzBJSVSWOY26N+yRJwoI/JMsymgn4toPiIp6v6bSWWVQRK9zH+X6Tv7r4Gl6wppk8cp47KsOiTtQ1b/e1uur2W3iMCyetc7XZ6/Vot9sMBgMmJiZoNptUq9VccY5ZG8zvhcOLOfbG9eY4DpVKhVarBcDKykohkqrV6rpqwZZl7agfkrB3aFYbNadJ8Zl54lxZWeGrX82YnJzkG1/7Jl5xCqpAGqWkWUy9mmAFX1yNc2TT6/qWWxxOn36IRD8EQBhBksBfLcPHP36ep58+z6tuvw+vmotp13VxUgdbj98rxrOpxOJ0PXGdPIEjCAKSJCnu46ao7cb4VfNwbK0KW99fi3NN07SIebQsi+FwSHWiynA4JAzDdTE1kMc7pmlKFEVFrT+t8+bAo1GIUlvU+WL9+SBcLpzGs2WL11ifx41WJ9OL0nwWhvDSS3PUajVe85o63zLzLVSrLtqFbpCQWQ6WBSeDCK01C6slaOpRHj+U264SsmrMbDpk4E1xvg+zH2S11tMsd93VKlzuu9nya2HPY5x2Og8T09Ttdul0OmRZRqPRYGpqCs9bzYBZtTRsDEzb7bJ3w14Hf+/3jf3lWD8jgoy71sQ2mQSAJElYWloijmMajQau6xYugpth/+wlu13/nn2ExClhJS9SSmzcFGztsOCXeXJYQTstjt9S5x8e/xq3+RlJbxGtNfONap79FltkjoVvx1juJaJySlyZoO0cR2VtvpG/puS42E4uhNpWSDZVI2m9loXH53hpNmSx36KcVfEtG+WU0HG86qaxscjyVGpWK4RbfVQG2lq1Wq+WN9ir/bPX7HeT89QNGJZjOuoO+k6LtPoF0jRluFoeaD7T4Fj0vTIQ4Wc93GREPc17FS5VYaXWJnDvJkkaOF4ISYJjX6RaiclmU8qqxGTVwbZsWt5n8wfs5ARu7yHSNEJrn4qV4iQBdhriYRNmAY4N1mrWpF61OGmVBylrSqvbf2WLxX4f/71e/k7mPy6cbKy8RpbWpEoRZ0dJNJTSMpN2GyfrkmUZ5/xXMD94kaabcefxY7zJ+nPiYczzjUdBB9w1nMV1Xc5VciH9muXcvT+yywSkjEqLKKXIwhot4O7hWbTWfOr4owznFpkdTJH6J1GjZ3a5/df2u323OAGFtSEIArrdblFyYGZmhlKptC5yf1wwmSfb/WS/XZ17zcsRAzfe78o8fZpg8RMnTjA7O0u73S5qxoz3tTN/7xcH/fhtx/USvrCWYWdEcL8foNQEpRKrMSo9dJZRqeQlA8IwpDJ2zDdzvTuOw6A/wHYUlUoFlanVmBpoNpsEcwOUWl/WJE1T0Lnrd7fpIwf9+O73+hlLUB6bmodRGMuT53l4sVdYhS3LwrEcXOUWx1Hr/DdRFJGma/f0KMpdqabSvHHTm3IlptehUvG60iQmvs62bUolF4L+rrZvv/fvyxWDvJXFabPRdbPrtLh3Z2r177wum1/yKJUgDVKGwyE08nuBndjr5peuWqwzlRGnMdrPj2Ocpvi+z6g7QClFo5HXhwqCPsPhkOYuPe27cNXtr/AwQaS9Xp/5+fkipmlmZopGo0Ycx6vW1PFUZfNvfR0srRLjsN9szIwbF8ONRgPIT/BOp8OlS5eYmZmh2Wyua80i7A8tZ0g66qGsGRLAdhbQVkDs3kbCiFYwxzFdo6LOkZR8AqvFQCm8MMZPFdAEXSP0HELbptbLqPXAbcyiXc2yP0NmHaMSVbBCi6Z6CrubcEt1gI7nuFRr8EwdvilYymMl7BaJb1OzZtGZRqVH8n5kdt6EVCV5ckli57Ev9q6DS29uqq5LIwFl9cn0EbrOXZQdmyRNsZMYO86wUUzZL0HmYCd5PZ+h55Mq8PtQo0FiWXQmQfUTPBT1tJVbm+tniLIMmwksWxOmp/JEETXBgIQSGisKGThlLDumVHIZRF1KtkUWQKiOAdBM2wAEbh7bVE7y47/brLr9ZnuL0ZW/N54ujS769tkZefAaa/fmonzAmGtMKcV0P+BIpcy52jSJFVHVYe6WDaFsu3j9Hg/HMLSOQS2jpAOiJMXNjhGHMTM6JbUSOvV8OU5SxrXK2GkMKdjuBFGS0a9GKKWIQ0giF8ca0CiNUPEhDQ7fLWmasrS0xPLyMpDXbTGBwKPRaFuLwu7X/3BfODc6w+EQz/M4duwYpVKJdrvN4uIiWZYxPb274mfC9WDNGrxZHab8by773GTgmCzJJKGIZTM6+mrLjaxf5loG0OXL3STWRbguKKVAb3jHnANjlgq1VuV9q5jVrZJ/ruqzLY//1r87TOzWlbf29VgNJzX2xSY/3zhPE/c0/v2VFnu1SV1Xmn73rsrtl70Z+/7IPp4912q1ipID49lTws2LCTQ1leJHoxGdTodut0upVCrKUwj7w8ZB70qJG5uJF69sAyHO6hOvpz3KFthuC2WvxjRaEalrkWoLJ3XRyialitYTQHTZPLdy+wl7hEqojyo0Qjg6Ws4L2aoMhcNA3w3aYXlVDFe8OdwUKpGPo338DPysh6/LeBbYqoeyMjIrj28Mk7vIsozIvjXPvLXaeXaX08MqdVHq9k3PK9Ps90bPud3+HL+6PaD0mhUKKBIpjBDWKs+wU0rhoOhVe5QrZRpxm6NZh0aW1+ALXQitKpHjMevDg4O8cGUtHRGnMe3qiMyJsSmjsAvL2NoxXP9ANi54lVrN7NtlDafx5V0t+25xMsHAJgtjvNDheFbG3iE314PMxvNCKVVk1qVpKoPjPmNuZNuJp8u+X83QMXFq5ngmSf4UaNrr4G62zM2faDeKpu3WA8TidD3Y8vgXFqcx69JYZtZm994tz5dNj+vlFs7x8wvWlnGjWpy2Y7vN22hxGrMbFd+vv2Y3fyi50sPKunlsepyucH1e4UFsq8+ujkMqnFqtVmGuHw6HRfq5SUndjv3accLLg1J5EGkYhrTbbYIgwPO8ovXOfp+/NzvjN8WNrrqNT4nrXtpGWTFZNsS1fUpWRC0dUE1sqgmk1InSARYarBGZUsTKwo5ssG1SDeChVLz5/JUpyCnCaS/ReISqxcCFoQcrzhRVEnSWUU5DWunzAJQShxQfrcuk+Aw9CKwKqQup5RPYEyy70HYnyewM7BC0ZnqUZ1gnztn83V7BxWVgTbHi3LqlaLtZhNP2639ld7e92qtOaQVqa+GEpbBTha00NppU5dHBVb1ADYu2cyuzVpneqsVJp7l1qsSIiQQUIZbKSOwGie3gOAlpqnBXbxmmzpbRwsXYb+VxzCrL37UN2tYopccE+LVzza66/T5xTBVYgHa7zcrKCnEcMz09TaPRII6v3IRThNONjeu6dLtdlpaWGAwGuK5bFMQslUrbnh/CXrPRxL7ZQMaGf68+vaLwfL8oRWJM8uZm5nke8WotnvGnXcNWT6DrlisWp5eFdcd8E8vEuJhZb3W6fD5bWRjWfa4vP+duRuG0PTszOW3Mqlv7a6NV7/K4wfHvd2JxuvycuPz4jF+35r5grunt7gFXx5V/v6Vw2uVSd02SJHiex/T0dNGrrNvtFimorruJrV64aQiCgHa7Ta/Xo1QqFRl1pi3PjX/jO9hs+cS/hcjZeNPUWcZoNKJsL3NnIyY+GnGiNII0Q6EpZYpYKzKlyCyFpfNaMo4FqOyydVm/Hlcb4SFcNSrGsTq4dhvPmaCkV8C2SajQtytETl6KYMUvg/bxEoWbgmstUAOSdJqEGp4acASYGiWkacqoWiZVcL6liFGMrAmyLGOm+xBx5uKmEbcHZ1Hqjnw1Nh571LbWhBuB7e5/O98HCeCgV7PM1zx4GoxFmTysSJFhqxRbpTjxMZx4mnqScDw5w6R+Aa01M9ndNJIukbKZLcGAPGbZ0hG2tihHzTxj3klAJVcUTkrlMU3jm7KVSLtarnUe+25xAop2GxMTE3kV0dVGr1mWcfr06Sv+VixONzbz8/MMBoNCNBnrpLE0SUmC/Wbno9N6i8HaU6RlWRw5coRHHpmgvmRz220lKlQIgt5l89/qaXNz8YZYnF5mttzPatXatInVYKt5bDfv7X5nlrn5+lx5WTcK225fcR2Y/6+/LjaKlXGL02bLygXrxmt26/PiarZh3Hq98btr5dC66kwdJxMkPjk5ied5LCwssLy8jFKKVqtV9DAzZfmBokXH7tjtY8lu60DttkTfbtnfOlZpmq6rFWKagXY6HVZWVuj1etRqNSYmJopehUrlMXBKqatOWReuL1qb4nf2uuD9dfVfrLVED1OkUKmULAVb+VQcn3DlArfUfCZbZSAgGrWxbVCpws18hp6PpSxs5eDaLiUbbMLVFh0U1eRN+57xorlXfBfhtCtKVRftJ3ST2+lnLoPyUey0TxR3qSiH+igvTGlbPWynh7IC4jQmScrAMXwPHDvAUpMMQqA8QRyG2H4bnSS0slLe8N2ZxXEcml6YJxHEDZR1H0kyLI6l1hrHtHRJNQqbdMsYN9b9+7Cy+3IE5vcW48LJ7CCdrT7gaLCsjJLlkKYxOk1oNmoEfoOvLQf81aBM95bXUB/dS7lc5twstP1bcdM+dgwZFsq2UHEZK40pE+KREilNqmxMz8DiWK7GPFmWlWfYp+D7HkpRtFIaz7a7VrbrVXnNrrq9PrHGb3Cm+mipVKLRaKCUotvtotRarzLTnyyvDFsiDMN9Xf/dW6z2+8Ld3+X7vr8uviUvhtpjYWGBlZUVZmZmqFQq+L6/Wil463pBwn5wuaVnHFMdeqOQsSwLpfVY7ZjNs+AsZaFZL7ryF5f9zdi8incRTnvKaDQqSoY4Tn5cbWwc7WBpC9BFJfl4FGHpEMuyVq/nKoPz+TzyHpVAn9Wix/nD0WiQex4S7KIvneM46+r7jZ83Jvs2yzSKDKWcYpr176z790Flz1vqFN+rsdfa55slaJlK7QqH227zefrpNh//eI/uiyl31M/gOA7PrLw6D6XQSWFxMlnQ+d/J6kPvldfPPFivCSXW+h1aVh7UvisOqavO3PwMjuNQLufVXY0w6vf7pGnK5OQk9Xq9OAhS5+nwY1qtGOtRr9djaWmJIAjwfZ+pqSlc18X3/XX97Axy/PcXUyrCPPiYwGBYG8TG7/1rlqj8GTdN8wHQIaCW9lF2fmwTy8FNbDwFWabprSXZYGmwAWVFq6Lp8vUq3AZ7teECAI5VxRlN0+rPUu80OLJwBs/zGHhNUu8InWqFngXLbj4Wn0hDmtkKje45guArHJ98CxU7wYmXqI9OUQkvYWchkV2mF02h1WvIyhBV8uM8VfkaDha63YbB8yj16jXhdJ3iXg4Su9+e3V0BG9uaWWq1rZJtoy34pw8/zR/2lvn07J188VxEqdLI79OqQxhXuTub59YEpjOLMIzplqdRTsbIfSq/b2QTuXRZrVSOyu8HyrxjF+10kiRZ7ReS98uzXBf2uMf7gXXVrWXSrD1NGquT4zicOnWqCBjPsgzXdWk0GiRJkgeVroqs/UMsTrshTdMiAaDX6xUxTc1mkyNHjlCpVIonjI09Cw9Cr0Jh80J1hlwUj/WyKixLG9KJx2JgzPw2xsOYY573IjMiLBdaG88NI5zE4rS3mB5yWZZRKkGtVisegOZ7Q/q9Ch1s2n5uQUqdLkkppO5oGo0Gup/fA3JrRP6wnKYpnU6Hs7NdBu2UxFHEVQff93HLs0zWm3iex+TkJLB2XmjW7gs2YCnnhnfVbce2m7eNxWn8IWjtJ6ulPrC5/fbbeat7P60VmJ+HMM77zo5il7Nn2zDKBe+4p2Dcja+3ibQYD8Ux9wNzvlyfOo/buTK3EE7b1Ura64HJDH5mOcaKZGIlzMVhGj+urKwUlaR3IprEVXewl2/i1vr9PouLiwyHQyqVClNTU0xMTBRm+/FzxAzCxm0r7CeXB4PCenFrYpzMC0Bp0AoiNz//KmkGpPg6P54pU2gbnLSHJiZxVn/ruGh7tXlvVgV665Y3/rcIp72nHEecjPosTjzIhQr8enI/587BX56BixdDCBcBiHxQKqGe1Dg2cSsPPOzyirtg+QUou3cxe3yKv3Dg4+ffyAsvtPnLQYtLl4a01OxqTIvG8zxOOY9y+rRP7RGYPAYxS5DmMW3KGq/hpbCURWYMGYdUOG03/m5f63AbZaLG/xgTThjLD2idX5v5VFlhdVIq45XDT3BfNeQflF5DeiRF6wvYts3/Sh7mvWeeI3USzrnwiswmVApvNCT1bDq2h23Z1KxcGJkyTpa16oJddbFiOatFcn1838e2VwvkZtZ18jgdUlfdeFfr8Res+UWbzSa2bTM3N8fKygpRFHH06FFarRZJklxx/iKcDvbytdZ0u13m5+fzbtfNJkePHqVarRaxT+YC2cziJMHh+4t5mhxn3DK0WQySmWZ9K4X1FidULmk2syQBZFkeJLox+FwsTi8vYRQViRrPPQcfeOEZZmdnmau+hnK5zNEjJ7FtSMoQxxDNdZidnWWxvcRXPlvjwcnbsG2bdrvNRz8aoZ88S7vdZuHY/8WRIxVubd1BlkGW5Q9X3fNdHn88IVjqryaL+JfFOJlzDnWF435IhNN2bL/+1xjjdNky1u8/WHPFx3GMSvLzIE1zg0fFgzAMqdUqZFlumSyXy0RxXsDWdd382s3WrE/j76ZhpUn0MB0kkiSfxvO8Ikh8d+yRcNpri9O4hWl8meazOI7xfb9wz5lWDGEYSsuNGwRzATSbzaLkgNaaIAiKdhwbj/N4ax5h/zDidVywGNHkOA5xPCJJKGISDeZ4xvbqg09igwIrs8gUpLpBCnj2Sn7Nu6O8YvjQQmubMIDhKF114653BQovHwMLFlouI+3QWwGr8lW+4UTMqx55iYcna3ydHWO7MbGn6dgp54Yuj1/UfPzZiE++tMLvp3eQpbfDixb48L1Om/vf7HDn3XPce1eNuxZCsAdEasj8qMeZlyI+f67J31w4yRfPDPAnq1juqkjHQo3V9tJGPR1itjuftx+/t5n/6vdbTbYmNFeFjVKgVfEw1LNuQ1c1WVInc11I+ozSlEzDyHUItMVLAVysxviOTdzX+ArqcZ4hna4eLnPUMuNAWN0srfJlZVrT7fVYWgS0Ra3WAL33GeFbuuqu9YfXi7Wnxst3gsmsMHFPk5OTVCoVwjDE87zCzXMlxOJ0sJdv2zbVahXXdfE8j3K5XMRM5LEs9rqnSfMEYt530pZH2DtMDNJmwsm2bZIkIU0pyoiMJwOY3+fva8G9G+Oaxt8hn1cc50+0SvlY1ubTbfZ7sThdX+r1OuVySqkEzSa88aE38vrbWxw7buHM9tD9xSKwN1Oa6elpHj3eonQKqufhtz6ZQil3zxw7Dm+//34efhjCGMJwNv9tHJM5Ga1Wi0emTzLzQBP3a5A+D8/OB7hubtHIdAJqNXlkSxfd4bI47XVW3dr5v7nFaTPhpLM14ZSmKZ7n0R9GJElC1c8zJutO3k7t+ZcuMDsLHbdD3fGJhkO062HbUb5tq0HgiTYPUMaDtPruUhhQlpeXWVjIH8AqlUqeZZ3uz/irXnzxxV0dmb22SO22TsV+L1+Cl4W9ZL/Pv1TVAKjpJTQJmpgsy1hRR1mwTvP/+f/9KRfS49RvfYR77oFSCTINFRusyERSbI1t5/dSpcB187/n5+HMmZeYnZ3lXbc9yTv+r7cwMTFBGgaUXAudhECGrUGx3pVvKiObd0tdef/I9XtllFLrMl03Woe3Oz8/8ZVlnnrqKaYnG7zxtV/PZKtOFgU4rkalMYoMVEKRBGAsEau/T6K1jM5xd605bjf68dvt+Lfb8c0LKwC45Q5aawZZSOgpFoYTPDlb5nf/7EkW9e2MvNNYTXBWsyNTlZcRcjI/v07VCDujMIGlulwc5CQBK9SEi89Til7kdQ9N89bX3819UxZHo/ldbf+1suuyy/stXLZjr08sQbiZKa6vItZpdRBTeezRK17xCoZnU85dnGV21iKOQzQxFbuNChPsbaTTeIyTsTSarNupqSle8YpXrLnxswyKmk/G5b+323+zs5Zhtf6zzbKxNuPRRx/l9ttvp1JyaNXKJFGw6n7NiMME17myRdmIpXHRZNZhJ8sXdocRzOOeH5P5ftJucO+998JigxeXYjrzEam9mgRmzaO1xtXVVeE02CCcKqB9bLtOFEU03JST09Pcd2KK1zw8yW23QTnJINrb7dtKP6gzZ86IxWkPly8XrrCX7Pf5l1kuSin8bISjFWS5O26kKgzsBoFd4/EXF3lxdoXBYEQUjLC1omJFxHFMz5vedv1NwcMsy0iSBN/3OXr0KDMzdd58fIWyaxMEASqL8RwLkghlaawMNvazE4vT9WVjpXZgndVnu/0X+Xnij2sr0jAmGvXxbYXrKdIoRmszIK8/bms91dZbujZam27047ffFqfYKqG1pmxFWDpBx1FenNStMcpKJG6VuXbEYjvI3XqujWeBzwiAIM1jnRxCIF21LkKiXFLl4PoNwjDEtTKajqauekyVE+p06PV6RBO372r7r5V9z6rbLfu9/vu9fOHmZr/Pv3VP+Hos41HlrpNKBe6+e5pTd0/nVqAkN3NXrNwE3/OuPP88fqlIsiHLclO/beeuOzuwieN4NRhdkSURSq+23lB5UOmGNV73Lpfv7tnKNbeTczOK8oE2VbnQ9TwPlSV5hXBl2oCw5bu1GnuzcbnXox3HYWCvt3G7+ZvMWYXCtmx0lscdJ1lIarlEOqJSqXCyWs9rrylQKbjZCKUUET5gXF8bhZNFEEK9XqHsQRVwQ42luziWQ6vVYmGfjrE6e/bsoZbk+22REoT9ZL/P/7afWwTczMXO7LyqdwYWKRYhYdzFsxNKHjjKQiXgaBcXlyzLCK0rlxNxHIcoioqCd47jFMHGaZrSdY6TZRm+7+GgiJMABwvLZtM6L5myQDus1kXEyuIrLl/uH9uz1n/wcjfZ9haLeDUzM8VB4bo2aRQTx3FRGBe96s7VDpm1+r4qnGw2P34bW/zcqOx1KMt28w/dAK01XuLi4OFnbl6gUifYtibxYyA1MeBYERArnEihlEtUymsxKlJsnWDqRSV2RqogLXkkscZYHJ04wU2hvOqKH7h72+R9y6y6G/3EutG3TxCuxH4/kXqeh6MgTUO0TnHJC9pFSS6GEnd7V1mapkX27Xh7l9zF4xLH+eBpylp4rkeSRuuq0q9f37Uu67tN977Z2ShQtspq3Iooiv7/7d3NbtvGGgbgd34okopjpzktkEV2Adpdu+kiN1AU3fbOsiiK7gp03Ssouil6B0UX3RdFCpyT5hxZNkXOz1mQMyJpyZIt05Tp9wkMxZIo0uLfzDffzCDP87oH5qqEtRUSqZrBDlUzTt86ylR/nFj3Btty+GzbHuo69PsJEWbnHIwzyFTd2x3eQ2ug8iWcs7DN+ZuJGZLZDImQsHadHyfg49yGQB1h9gKonIOUCt6LdY9c52GbntdillyzdYcbrOA0dBvy2Af+2OsnOsTQx+/LywsAQOVzWChUTejdCw+HHFIUsB5xzLVVcgrjZ1jJ+n25/O/u7dfrvyP04ArRpwQXEMYjEQ5WOigp6y7pVYlU6zhbnRMAvIaABIRfp6Sz4HSn+knZu76/p3mOJEkgPLCyHrYygJCQXsJVDqppxHGhwNQ8hv3Xv/2wwHQzh35PqTfQWsNoBZQKtsl5qlwFqwCjLCxmsM1cdBVyKJfCIwWERar/U+ciQgAuTAwNwDtAWJiLc+g8hdAa3goYlcEnGibLkAgJUb077Au4paPvVXeoY98+oocsRoGwznHqT9pdj/hr4hxTla3gxQxpquCr/ZKz2zfk0LuuHhuqHhQ3zGcIb+N6Tk5OsFqthvvjCcDN85rapJRYLpeQEEiSBDpN633e7GN1g3Ha2oWmdiSEhhOaVLXW8LY1p6hbR4tloiGT+hpQrkooJ5CIegqVXU5OTuC1xMWqRLmySLSGUhrGGBhjMRu2pW57r7o///xz1F51Y/cKIqJD1DcmIyWsBMJ4dBIO0gGJt0gsIJvxlKyQsKIeKBwAEnt9jtNOfvN8lbKZPdSJbi+suFivVxaNQ/j+na/eH7J5DHvH924T4fcdnSJpYDYMjOnrH8TzrDmvRXhcD1egHGJkqUjr8QSkSyFtCmW7TW9OXtSRpyYXss5RVICve5WoXbMED+ToI06MGBEds3Ytf93yJZpmlfbjxvcdfH5vqRFemVur/z7ReR+N4+r3390vovt0/23ceyNbj8CP3h6LJ3j3sfnvvuedaC4W3SbY9trGOQJGz3FixIno4Xq6qmt+VhpYaWBUmPxKAD6DcArwKWxTE7XSNZGpOqFbHVhhlGK58fltkaaAkaYj4UOEIeyPJpct7L84Dlf3cR1p4pRLY1K2ifiKEl5YQNTjMwkPwGtIl3XeL2AAYeBk3YRuZAZAAWIGCQXIBMppSADSAd5pQBgIXw9VIEWIPDUjX16JWN6P0XvVjb1+Irq9q3kl8RXUyby9GmKMOIXf72b917zjsBXQoK5GBHuhpG2vrz9hqE2jfbQjSq1Q8joe1Otlid77WteHdY/XeqnQEaDz2b3rxljlBzbVEdGt/ftJfQmRXkB5AQgD5W0zLss5vALqIJSr8yBQ1a83k3n+T//rsA3o1Tj7EaZtkaXw/LaIFN0T1Z0z4+pwpeH6r+IzwDri1M99ovulmzlPbIwEqeZ3CUDDQNXnaDMWV4g4e+EBGJyV5wAsvLhcf6gE4AVUc2pKh3hgeOkAGHjp63GexLDDEWwzesSJiB6udY6DiLXJ9b/mPfEdQP/Vu89x2lDD3bjUtggG3a8dw0FseWZr7hPdq/7wD+3rAa78rCPOaKJJ8fy/sh9bZ2j7tbBwCEAxx2mYzyei4Yimpqg8oLyGsnVOgxNAJYBKOTgBuCayozygnIJyshllfHOO0r6M6EaMXOzl040oxTnNmNt0VLwM+7/eT/V4W6rpoaVjBEo0vbDC45XeWzQKL+ucJi+6+0V5B+VLQFgo1+Q2AbAegNFN71sF558DAJwsYKWBU5edzxdmBuU04OuhC8KI/1bU4zzN/Dj7n011RHRr7Vyl7uz07efWNUOBVj4UDj+/t41UvTG3YsPzDFmMrJfDtB4ZfP3ctme6y9MYrkSOOxHo+vdur9rm1ZC/tOvz4zVlQ25T63pz38Tff//NkA4RERHRHpgZSURERLSn0XOciIiI6PEZuvxxaA711kl+r9+s3ZiDRERERPftrnMk98WIExEREd07RpyIiIiI7gkjTkRERPRoPNSIE3vVEREREe3p4IjT0E11Q0e02NRIRERTNHaL0LEPkH3b5RlxIiIiItrTwcnhQ2NEiIiI6OZ4/xzGwU11Q2NTHRER0c1NvaluLIw4ERERTRDvn8NgxOnI/34iIqLbYMRpGIw4ERERTRDvn8NgrzoiIiKiPU2+qe7Y/z4iIqIhjN1Ut8uhI3sf+vm3xYgTERER0Z5YcCIiIiLaE5PDiYiIJuih3z+PdfuZ40RERDRBzHEa5v7PiBMREdEEPfT757FuP3OciIiIiPbEghMRERHRno4+x4noEEIIOOdgrYX3HlJKaF23UDvnOm3oQghIWdclvPfx59D1P2S7/v5DcxSG/n7GXv8ux/79WmuRZRkAwBjTWadSCs65zra01yeEOPocm6kb+vgY+vp43TG0z7ofbY4T0SFCYUkpdeU1KWXnwi+EuHKibVqO6LEwxqCqKjjn4JyDlDLezDbdlMLNjIUmuivbjqUxjzEWnGjSQq04FJC8951Ik1Iq/r9/EnrvYy17KGNHHB778ruMvX1DL79LqDgIIZAkCWazGbz3qKpq47b0z6WxI3pEQ2DBiSbNWgtrLQBAa40kSeLzoQbdbpK776aGY7+xTn35XcbevrELTmmawhiD1WoFa208J4wxUErFpu27Xi/djaELrvdVML4u6jQG5jjRpDnnoJSKJ1i4+APrprl2PlO/uW7bjYHoMbi8vIQQAkoppGkKrTXKsoznVb/C0b/B8f4yrrEL3rvc5PgI773JNjHHiegWlFKxua6qqtjkAABVVSHP83hytZvz2gWtIY0dcXjsy+8y9vaNHXE7OTmBtRar1QoXFxew1qKqKmRZhtPTUywWi06h6S7WSXdnKhGn/jrHbgpmwYkmLTTJee+htUaapri8vMQff/yB33//HW/evIG1FsaYTu5TOCGHznE69hvr1JffZeztG7vgVBRFrEjM53N89NFHePXqFV6/fo3PP/8cr169ir1RQ+I40dDG7nwgFosFG6NpssJwBM45zGYzAMBvv/2Gb7/9Ft9//z3m83ksOA0dXSJ6iEKhqN3J4sWLF/jkk0/w448/dgpObNqelrGH89g1HMFYBfWjP8pDzsm2H6LrGGMwm806Y8788ssv+OGHHwDUNeqyLDuFpvaNgOgxC73qjDExagsAb9++xa+//opvvvkGZ2dnyLIM3ntkWYayLON5R+M69P7ZLhBv+rmP7dv22j7r3/X5t/1+2FRHkzabzVAUBYQQyPMc79+/x9u3b2GtxbNnz7BcLmNNup0cznwNom7Eod2BQkqJPM/x119/4d27dzEXqigKKKWgtUZRFKx80CSx4ESTFoYbCEniQgg8efIEaZri/fv3MRLVHn+GXamJauHcmc1msbkuDPFxcXGBly9fxuhDkiQxKqWUQlmWLDjRJPGopkkLuU1CCBRFgdPTU3zxxRf48ssv48U+SZJYqGKEiWgtnBPGmNisnSQJXrx4gU8//RRfffUVnj59iqqqkCRJbMprN+sRTY04Pz9n9ZomK/T0CXkXz58/h3MOP//8M3766Sd89913nVp0P/LE6BM9ZqFpLgwW++GHH+Ljjz/G69ev8dlnn+Hrr7+G1hqLxQJ5nneavPtz2RFNBQtONGnhoh8u5lpraK2xWq2wXC5xcnISC079SX/DPHdEj1WaphBCoKoqFEUBYwyEEDg7O8N8Po8DZBpjkCQJiqJAkiRxgEwWnGiKWHCiSWsnfEsp49QR8/kcWZahKIpON2sATA4navzzzz/I8xx5niNNUwDAYrHA+fk5AOCDDz6IFQwpJYqiQJZlWK1W0Fqz4ESTxIITTV6SJLGpTkoZc54WiwXm83kn0tQeyC/UpIkeqzzPUZZljCylaRonytZaQ0qJ5XIJ732c1y7LMlxeXmI+n2+cDJjooRPL5fLagtPYc9WMvf5dmANDRESP0UO/f++ybfuZwEFERES0JxaciIiIiPbEghMRERHRnnaOUPbQexXdxySERERE1PXQ74/btp8RJyIiIqI9seBEREREtCcWnIiIiIj29H+4lQecH6MrcwAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/src/assets/svg/bofang.svg b/src/assets/svg/bofang.svg
new file mode 100644
index 0000000..6491b67
--- /dev/null
+++ b/src/assets/svg/bofang.svg
@@ -0,0 +1,6 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#167;&#134;&#233;&#162;&#145;-&#230;&#146;&#173;&#230;&#148;&#190;">
+<circle id="Ellipse 302" cx="16.5" cy="16.4531" r="15.5" fill="black" fill-opacity="0.4" stroke="white"/>
+<path id="Polygon 10" d="M21.3523 15.2131C22.3068 15.7642 22.3068 17.142 21.3523 17.6931L15.1477 21.2753C14.1932 21.8264 13 21.1375 13 20.0353L13 12.8709C13 11.7687 14.1932 11.0798 15.1477 11.6309L21.3523 15.2131Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/svg/check-in.svg b/src/assets/svg/check-in.svg
new file mode 100644
index 0000000..b4fe1e5
--- /dev/null
+++ b/src/assets/svg/check-in.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12C0 5.37258 5.37258 0 12 0H20V6C20 11.5228 15.5228 16 10 16H0V12Z" fill="#57C732"/>
+<path d="M5.95929 8L8.31631 10.357C8.57666 10.6174 8.99877 10.6174 9.25912 10.357L14.4446 5.17157" stroke="white" stroke-width="1.33333" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/check_all.svg b/src/assets/svg/check_all.svg
new file mode 100644
index 0000000..e3f545e
--- /dev/null
+++ b/src/assets/svg/check_all.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.28129 10.6641C6.06124 10.6641 5.84989 10.5781 5.69231 10.4245L2.87981 7.68234C2.80046 7.605 2.73712 7.51278 2.69342 7.41096C2.64971 7.30913 2.62648 7.1997 2.62507 7.0889C2.62221 6.86513 2.70836 6.64939 2.86457 6.48914C3.02078 6.32889 3.23425 6.23726 3.45802 6.2344C3.68179 6.23155 3.89753 6.3177 4.05778 6.47391L6.2241 8.58609L11.0288 2.94516C11.0999 2.85837 11.1875 2.78663 11.2867 2.73413C11.3858 2.68163 11.4944 2.64943 11.6061 2.6394C11.7179 2.62937 11.8305 2.64172 11.9374 2.67573C12.0443 2.70974 12.1433 2.76472 12.2287 2.83746C12.3141 2.9102 12.3841 2.99924 12.4347 3.09937C12.4853 3.1995 12.5154 3.30871 12.5232 3.42061C12.5311 3.5325 12.5166 3.64485 12.4805 3.75107C12.4444 3.85729 12.3875 3.95525 12.3132 4.03922L6.92254 10.3673C6.84779 10.4554 6.75577 10.5272 6.65216 10.5782C6.54855 10.6292 6.43556 10.6585 6.3202 10.6641H6.28129ZM17.3438 10.6875C15.121 10.6875 13.3125 8.87906 13.3125 6.65625C13.3125 4.43344 15.121 2.625 17.3438 2.625C19.5666 2.625 21.375 4.43344 21.375 6.65625C21.375 8.87906 19.5666 10.6875 17.3438 10.6875ZM17.3438 4.3125C16.8802 4.3125 16.4271 4.44996 16.0417 4.70749C15.6562 4.96503 15.3558 5.33107 15.1784 5.75934C15.0011 6.1876 14.9546 6.65885 15.0451 7.11349C15.1355 7.56814 15.3587 7.98575 15.6865 8.31353C16.0143 8.64131 16.4319 8.86453 16.8865 8.95497C17.3412 9.0454 17.8124 8.99899 18.2407 8.82159C18.669 8.6442 19.035 8.3438 19.2925 7.95837C19.5501 7.57294 19.6875 7.1198 19.6875 6.65625C19.6869 6.03486 19.4397 5.43911 19.0003 4.99972C18.5609 4.56033 17.9652 4.31318 17.3438 4.3125ZM17.3438 21.375C15.121 21.375 13.3125 19.5666 13.3125 17.3438C13.3125 15.1209 15.121 13.3125 17.3438 13.3125C19.5666 13.3125 21.375 15.1209 21.375 17.3438C21.375 19.5666 19.5666 21.375 17.3438 21.375ZM17.3438 15C16.8802 15 16.4271 15.1375 16.0417 15.395C15.6562 15.6525 15.3558 16.0186 15.1784 16.4468C15.0011 16.8751 14.9546 17.3463 15.0451 17.801C15.1355 18.2556 15.3587 18.6733 15.6865 19.001C16.0143 19.3288 16.4319 19.552 16.8865 19.6425C17.3412 19.7329 17.8124 19.6865 18.2407 19.5091C18.669 19.3317 19.035 19.0313 19.2925 18.6459C19.5501 18.2604 19.6875 17.8073 19.6875 17.3438C19.6869 16.7224 19.4397 16.1266 19.0003 15.6872C18.5609 15.2478 17.9652 15.0007 17.3438 15ZM6.65629 21.375C4.43348 21.375 2.62504 19.5666 2.62504 17.3438C2.62504 15.1209 4.43348 13.3125 6.65629 13.3125C8.8791 13.3125 10.6875 15.1209 10.6875 17.3438C10.6875 19.5666 8.8791 21.375 6.65629 21.375ZM6.65629 15C6.19274 15 5.7396 15.1375 5.35417 15.395C4.96875 15.6525 4.66834 16.0186 4.49095 16.4468C4.31356 16.8751 4.26714 17.3463 4.35758 17.801C4.44801 18.2556 4.67123 18.6733 4.99901 19.001C5.32679 19.3288 5.74441 19.552 6.19905 19.6425C6.65369 19.7329 7.12494 19.6865 7.55321 19.5091C7.98147 19.3317 8.34751 19.0313 8.60505 18.6459C8.86258 18.2604 9.00004 17.8073 9.00004 17.3438C8.99936 16.7224 8.75221 16.1266 8.31282 15.6872C7.87343 15.2478 7.27768 15.0007 6.65629 15Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/check_all_active.svg b/src/assets/svg/check_all_active.svg
new file mode 100644
index 0000000..a55ba87
--- /dev/null
+++ b/src/assets/svg/check_all_active.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.28129 10.6641C6.06124 10.6641 5.84989 10.5781 5.69231 10.4245L2.87981 7.68234C2.80046 7.605 2.73712 7.51278 2.69342 7.41096C2.64971 7.30913 2.62648 7.1997 2.62507 7.0889C2.62221 6.86513 2.70836 6.64939 2.86457 6.48914C3.02078 6.32889 3.23425 6.23726 3.45802 6.2344C3.68179 6.23155 3.89753 6.3177 4.05778 6.47391L6.2241 8.58609L11.0288 2.94516C11.0999 2.85837 11.1875 2.78663 11.2867 2.73413C11.3858 2.68163 11.4944 2.64943 11.6061 2.6394C11.7179 2.62937 11.8305 2.64172 11.9374 2.67573C12.0443 2.70974 12.1433 2.76472 12.2287 2.83746C12.3141 2.9102 12.3841 2.99924 12.4347 3.09937C12.4853 3.1995 12.5154 3.30871 12.5232 3.42061C12.5311 3.5325 12.5166 3.64485 12.4805 3.75107C12.4444 3.85729 12.3875 3.95525 12.3132 4.03922L6.92254 10.3673C6.84779 10.4554 6.75577 10.5272 6.65216 10.5782C6.54855 10.6292 6.43556 10.6585 6.3202 10.6641H6.28129ZM17.3438 10.6875C15.121 10.6875 13.3125 8.87906 13.3125 6.65625C13.3125 4.43344 15.121 2.625 17.3438 2.625C19.5666 2.625 21.375 4.43344 21.375 6.65625C21.375 8.87906 19.5666 10.6875 17.3438 10.6875ZM17.3438 4.3125C16.8802 4.3125 16.4271 4.44996 16.0417 4.70749C15.6562 4.96503 15.3558 5.33107 15.1784 5.75934C15.0011 6.1876 14.9546 6.65885 15.0451 7.11349C15.1355 7.56814 15.3587 7.98575 15.6865 8.31353C16.0143 8.64131 16.4319 8.86453 16.8865 8.95497C17.3412 9.0454 17.8124 8.99899 18.2407 8.82159C18.669 8.6442 19.035 8.3438 19.2925 7.95837C19.5501 7.57294 19.6875 7.1198 19.6875 6.65625C19.6869 6.03486 19.4397 5.43911 19.0003 4.99972C18.5609 4.56033 17.9652 4.31318 17.3438 4.3125ZM17.3438 21.375C15.121 21.375 13.3125 19.5666 13.3125 17.3438C13.3125 15.1209 15.121 13.3125 17.3438 13.3125C19.5666 13.3125 21.375 15.1209 21.375 17.3438C21.375 19.5666 19.5666 21.375 17.3438 21.375ZM17.3438 15C16.8802 15 16.4271 15.1375 16.0417 15.395C15.6562 15.6525 15.3558 16.0186 15.1784 16.4468C15.0011 16.8751 14.9546 17.3463 15.0451 17.801C15.1355 18.2556 15.3587 18.6733 15.6865 19.001C16.0143 19.3288 16.4319 19.552 16.8865 19.6425C17.3412 19.7329 17.8124 19.6865 18.2407 19.5091C18.669 19.3317 19.035 19.0313 19.2925 18.6459C19.5501 18.2604 19.6875 17.8073 19.6875 17.3438C19.6869 16.7224 19.4397 16.1266 19.0003 15.6872C18.5609 15.2478 17.9652 15.0007 17.3438 15ZM6.65629 21.375C4.43348 21.375 2.62504 19.5666 2.62504 17.3438C2.62504 15.1209 4.43348 13.3125 6.65629 13.3125C8.8791 13.3125 10.6875 15.1209 10.6875 17.3438C10.6875 19.5666 8.8791 21.375 6.65629 21.375ZM6.65629 15C6.19274 15 5.7396 15.1375 5.35417 15.395C4.96875 15.6525 4.66834 16.0186 4.49095 16.4468C4.31356 16.8751 4.26714 17.3463 4.35758 17.801C4.44801 18.2556 4.67123 18.6733 4.99901 19.001C5.32679 19.3288 5.74441 19.552 6.19905 19.6425C6.65369 19.7329 7.12494 19.6865 7.55321 19.5091C7.98147 19.3317 8.34751 19.0313 8.60505 18.6459C8.86258 18.2604 9.00004 17.8073 9.00004 17.3438C8.99936 16.7224 8.75221 16.1266 8.31282 15.6872C7.87343 15.2478 7.27768 15.0007 6.65629 15Z" fill="#538FE1"/>
+</svg>
diff --git a/src/assets/svg/close-down.svg b/src/assets/svg/close-down.svg
new file mode 100644
index 0000000..9741711
--- /dev/null
+++ b/src/assets/svg/close-down.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.21289 10.3438L11.4555 14.5864C12.2366 15.3674 13.5029 15.3674 14.284 14.5864L18.5266 10.3438" stroke="#76767A" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/close-gray.svg b/src/assets/svg/close-gray.svg
new file mode 100644
index 0000000..b864088
--- /dev/null
+++ b/src/assets/svg/close-gray.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.714 8.46284C17.0394 8.1374 17.0394 7.60976 16.714 7.28432C16.3886 6.95889 15.8609 6.95889 15.5355 7.28432L12 10.8198L8.4645 7.28432C8.13906 6.95889 7.61143 6.95889 7.28599 7.28432C6.96055 7.60976 6.96055 8.1374 7.28599 8.46284L10.8215 11.9983L7.28592 15.5339C6.96048 15.8593 6.96048 16.387 7.28592 16.7124C7.61136 17.0378 8.139 17.0378 8.46443 16.7124L12 13.1768L15.5356 16.7124C15.861 17.0379 16.3886 17.0379 16.7141 16.7124C17.0395 16.387 17.0395 15.8593 16.7141 15.5339L13.1785 11.9983L16.714 8.46284Z" fill="#1B1B22"/>
+</g>
+</svg>
diff --git a/src/assets/svg/close-white.svg b/src/assets/svg/close-white.svg
new file mode 100644
index 0000000..3c1fb80
--- /dev/null
+++ b/src/assets/svg/close-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724839487531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18776" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M755.2 332.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 452.266667 332.8 268.8c-17.066667-12.8-46.933333-12.8-64 0-12.8 17.066667-12.8 46.933333 0 64l179.2 179.2-179.2 179.2c-17.066667 17.066667-17.066667 42.666667 0 59.733333 17.066667 17.066667 42.666667 17.066667 59.733333 0l179.2-179.2 179.2 179.2c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733333L571.733333 512l183.466667-179.2z" fill="#ffffff" p-id="18777"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/community-active.svg b/src/assets/svg/community-active.svg
new file mode 100644
index 0000000..22e614d
--- /dev/null
+++ b/src/assets/svg/community-active.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.30299 25.0387C10.2855 26.3634 12.6164 27.0705 15.0008 27.0705C18.1969 27.0673 21.2612 25.7964 23.5213 23.5365C25.7814 21.2767 27.0527 18.2126 27.0563 15.0165C27.0566 12.6321 26.3498 10.3011 25.0253 8.31839C23.7008 6.33568 21.8181 4.79026 19.6153 3.87758C17.4125 2.9649 14.9885 2.72594 12.6498 3.19094C10.3112 3.65593 8.16296 4.80399 6.47682 6.48992C4.79068 8.17585 3.64236 10.3239 3.17707 12.6625C2.71178 15.0011 2.95044 17.4251 3.86284 19.6281C4.77525 21.831 6.32044 23.7139 8.30299 25.0387ZM19.2004 12.8999C19.0387 12.9001 18.8793 12.863 18.7343 12.7914C18.5894 12.7199 18.463 12.6159 18.3649 12.4874C18.1309 12.1848 17.8569 11.9153 17.5504 11.6864C17.3358 11.5156 17.1966 11.2677 17.1625 10.9955C17.1283 10.7234 17.2021 10.4488 17.3678 10.2303C17.5336 10.0118 17.7783 9.86684 18.0495 9.82642C18.3208 9.78599 18.5971 9.8533 18.8194 10.0139C19.2711 10.3587 19.6746 10.7622 20.0194 11.2139C20.1029 11.3237 20.164 11.4488 20.1992 11.5821C20.2343 11.7154 20.2429 11.8544 20.2244 11.991C20.2059 12.1277 20.1606 12.2593 20.0912 12.3785C20.0218 12.4976 19.9296 12.6019 19.8199 12.6854C19.6419 12.8219 19.4246 12.8971 19.2004 12.8999ZM10.5587 19.4599C11.7368 20.638 13.3347 21.2998 15.0007 21.2998C16.6664 21.2983 18.2633 20.6359 19.441 19.4581C20.6188 18.2804 21.2812 16.6834 21.2827 15.0178C21.2827 14.7394 21.1721 14.4723 20.9752 14.2754C20.7783 14.0785 20.5112 13.9678 20.2327 13.9678C19.9543 13.9678 19.6872 14.0785 19.4903 14.2754C19.2934 14.4723 19.1828 14.7394 19.1828 15.0178C19.1828 15.845 18.9375 16.6535 18.478 17.3412C18.0184 18.029 17.3653 18.565 16.6011 18.8815C15.837 19.198 14.9961 19.2808 14.1849 19.1195C13.3737 18.9581 12.6285 18.5598 12.0436 17.975C11.4588 17.3901 11.0605 16.6449 10.8991 15.8337C10.7377 15.0225 10.8206 14.1816 11.1371 13.4175C11.4536 12.6533 11.9896 12.0002 12.6774 11.5406C13.3651 11.0811 14.1736 10.8358 15.0007 10.8358C15.2792 10.8358 15.5463 10.7252 15.7432 10.5283C15.9401 10.3314 16.0508 10.0643 16.0508 9.78584C16.0508 9.50736 15.9401 9.24029 15.7432 9.04338C15.5463 8.84646 15.2792 8.73584 15.0007 8.73584C13.3347 8.73584 11.7368 9.39769 10.5587 10.5758C9.3806 11.7539 8.71875 13.3517 8.71875 15.0178C8.71875 16.6839 9.3806 18.2818 10.5587 19.4599Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/community.svg b/src/assets/svg/community.svg
new file mode 100644
index 0000000..302b2fb
--- /dev/null
+++ b/src/assets/svg/community.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0008 27.0705C12.6164 27.0705 10.2855 26.3634 8.30299 25.0387C6.32044 23.7139 4.77525 21.831 3.86284 19.6281C2.95044 17.4251 2.71178 15.0011 3.17707 12.6625C3.64236 10.3239 4.79068 8.17585 6.47682 6.48992C8.16296 4.80399 10.3112 3.65593 12.6498 3.19094C14.9885 2.72594 17.4125 2.9649 19.6153 3.87758C21.8181 4.79026 23.7008 6.33568 25.0253 8.31839C26.3498 10.3011 27.0566 12.6321 27.0563 15.0165C27.0527 18.2126 25.7814 21.2767 23.5213 23.5365C21.2612 25.7964 18.1969 27.0673 15.0008 27.0705ZM15.0008 5.06098C13.0318 5.06098 11.107 5.64486 9.46984 6.73878C7.83266 7.83271 6.55664 9.38754 5.80314 11.2067C5.04963 13.0258 4.85248 15.0275 5.23661 16.9587C5.62075 18.8899 6.56891 20.6638 7.96122 22.0561C9.35352 23.4484 11.1274 24.3966 13.0586 24.7807C14.9898 25.1648 16.9915 24.9677 18.8106 24.2142C20.6298 23.4607 22.1846 22.1846 23.2785 20.5475C24.3724 18.9103 24.9563 16.9855 24.9563 15.0165C24.9535 12.377 23.9038 9.84636 22.0374 7.97995C20.1709 6.11353 17.6403 5.06376 15.0008 5.06098ZM19.2004 12.8999C19.0387 12.9001 18.8793 12.863 18.7343 12.7914C18.5894 12.7199 18.463 12.6159 18.3649 12.4874C18.1309 12.1848 17.8569 11.9153 17.5504 11.6864C17.3358 11.5156 17.1966 11.2677 17.1625 10.9955C17.1283 10.7234 17.2021 10.4488 17.3678 10.2303C17.5336 10.0118 17.7783 9.86684 18.0495 9.82642C18.3208 9.78599 18.5971 9.8533 18.8194 10.0139C19.2711 10.3587 19.6746 10.7622 20.0194 11.2139C20.1029 11.3237 20.164 11.4488 20.1992 11.5821C20.2343 11.7154 20.2429 11.8544 20.2244 11.991C20.2059 12.1277 20.1606 12.2593 20.0912 12.3785C20.0218 12.4976 19.9296 12.6019 19.8199 12.6854C19.6419 12.8219 19.4246 12.8971 19.2004 12.8999ZM10.5587 19.4599C11.7368 20.638 13.3347 21.2998 15.0007 21.2998C16.6664 21.2983 18.2633 20.6359 19.441 19.4581C20.6188 18.2804 21.2812 16.6834 21.2827 15.0178C21.2827 14.7394 21.1721 14.4723 20.9752 14.2754C20.7783 14.0785 20.5112 13.9678 20.2327 13.9678C19.9543 13.9678 19.6872 14.0785 19.4903 14.2754C19.2934 14.4723 19.1828 14.7394 19.1828 15.0178C19.1828 15.845 18.9375 16.6535 18.478 17.3412C18.0184 18.029 17.3653 18.565 16.6011 18.8815C15.837 19.198 14.9961 19.2808 14.1849 19.1195C13.3737 18.9581 12.6285 18.5598 12.0436 17.975C11.4588 17.3901 11.0605 16.6449 10.8991 15.8337C10.7377 15.0225 10.8206 14.1816 11.1371 13.4175C11.4536 12.6533 11.9896 12.0002 12.6774 11.5406C13.3651 11.0811 14.1736 10.8358 15.0007 10.8358C15.2792 10.8358 15.5463 10.7252 15.7432 10.5283C15.9401 10.3314 16.0508 10.0643 16.0508 9.78584C16.0508 9.50736 15.9401 9.24029 15.7432 9.04338C15.5463 8.84646 15.2792 8.73584 15.0007 8.73584C13.3347 8.73584 11.7368 9.39769 10.5587 10.5758C9.3806 11.7539 8.71875 13.3517 8.71875 15.0178C8.71875 16.6839 9.3806 18.2818 10.5587 19.4599Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/svg/contact-active.svg b/src/assets/svg/contact-active.svg
new file mode 100644
index 0000000..84c48f8
--- /dev/null
+++ b/src/assets/svg/contact-active.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5016 15.0567C11.0016 15.0567 8.1544 12.2067 8.1544 8.70326C8.1544 5.19984 10.9877 2.33594 14.5016 2.33594C18.0155 2.33594 20.8488 5.18594 20.8488 8.68936C20.8488 12.1928 18.0016 15.0567 14.5016 15.0567ZM23.4452 18.716C26.7889 21.4663 23.7066 25.6644 19.3772 25.6644H9.62225C5.28648 25.6644 2.2062 21.4571 5.5599 18.7091C7.53194 17.0932 10.3881 15.8352 14.5016 15.8352C18.621 15.8352 21.4766 17.0968 23.4452 18.716Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/contact.svg b/src/assets/svg/contact.svg
new file mode 100644
index 0000000..4a8b5de
--- /dev/null
+++ b/src/assets/svg/contact.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721875283526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8450" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 85.333333C384 85.333333 281.6 192 281.6 320c0 85.333333 46.933333 162.133333 115.2 200.533333 34.133333 21.333333 72.533333 29.866667 115.2 29.866667s81.066667-12.8 115.2-29.866667c68.266667-38.4 115.2-115.2 115.2-200.533333C742.4 187.733333 640 85.333333 512 85.333333z m0 396.8c-89.6 0-162.133333-72.533333-162.133333-162.133333 0-93.866667 72.533333-166.4 162.133333-166.4s162.133333 72.533333 162.133333 162.133333c0 93.866667-72.533333 166.4-162.133333 166.4zM840.533333 686.933333c-51.2-42.666667-115.2-76.8-200.533333-93.866666-38.4-8.533333-81.066667-12.8-128-12.8s-89.6 4.266667-128 12.8c-85.333333 17.066667-149.333333 51.2-200.533333 93.866666-123.733333 102.4-8.533333 256 149.333333 256h358.4c157.866667 0 273.066667-153.6 149.333333-256z m-25.6 123.733334c-21.333333 29.866667-64 59.733333-123.733333 59.733333H332.8c-59.733333 0-102.4-29.866667-119.466667-59.733333-8.533333-12.8-8.533333-25.6-8.533333-34.133334s4.266667-21.333333 25.6-38.4c59.733333-46.933333 149.333333-89.6 285.866667-89.6 132.266667 0 221.866667 42.666667 281.6 89.6 17.066667 17.066667 25.6 29.866667 25.6 38.4 4.266667 8.533333 0 21.333333-8.533334 34.133334z" fill="#76767a" p-id="8451"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/delay-detection.svg b/src/assets/svg/delay-detection.svg
new file mode 100644
index 0000000..ab1324f
--- /dev/null
+++ b/src/assets/svg/delay-detection.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723443370046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6054" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 85.333333c234.666667 0 426.666667 192 426.666667 426.666667s-192 426.666667-426.666667 426.666667S85.333333 746.666667 85.333333 512c0-119.466667 51.2-234.666667 136.533334-315.733333 12.8-8.533333 29.866667-8.533333 42.666666 4.266666 12.8 12.8 8.533333 29.866667 0 42.666667C187.733333 311.466667 145.066667 409.6 145.066667 512c0 200.533333 162.133333 366.933333 366.933333 366.933333 200.533333 0 366.933333-162.133333 366.933333-366.933333 0-187.733333-149.333333-345.6-337.066666-362.666667v132.266667c0 17.066667-12.8 29.866667-29.866667 29.866667-17.066667 0-29.866667-12.8-29.866667-29.866667V115.2c0-17.066667 12.8-29.866667 29.866667-29.866667zM337.066667 311.466667l217.6 166.4c25.6 17.066667 25.6 55.466667 4.266666 76.8s-59.733333 21.333333-76.8-4.266667l-170.666666-213.333333c-8.533333-17.066667 8.533333-34.133333 25.6-25.6z" fill="#1B1B22" p-id="6055"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/delete.svg b/src/assets/svg/delete.svg
new file mode 100644
index 0000000..9eb6b9b
--- /dev/null
+++ b/src/assets/svg/delete.svg
@@ -0,0 +1,7 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.43359 6.38281V20.7554C6.43359 22.9645 8.22445 24.7553 10.4336 24.7553H17.5639C19.7731 24.7553 21.5639 22.9645 21.5639 20.7553V6.38281H6.43359Z" stroke="#1B1B22" stroke-width="2" stroke-linejoin="round"/>
+<path d="M11.8372 12.6797V17.3464" stroke="#1B1B22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.1615 12.6797V17.3464" stroke="#1B1B22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66602 6.38021H23.3327" stroke="#1B1B22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.67578 6.38284L10.599 4.69857C11.1257 3.73786 12.1341 3.14062 13.2297 3.14062H14.7862C15.8909 3.14062 16.9063 3.74779 17.429 4.72101L18.3217 6.38284H9.67578Z" stroke="#1B1B22" stroke-width="2" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/svg/download.svg b/src/assets/svg/download.svg
new file mode 100644
index 0000000..b613342
--- /dev/null
+++ b/src/assets/svg/download.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4.22656V14.2266" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M5 15.2266V17.2266C5 18.3311 5.89543 19.2266 7 19.2266H17C18.1046 19.2266 19 18.3311 19 17.2266V15.2266" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7.99976 11.1404L11.207 14.3476C11.5975 14.7381 12.2306 14.7381 12.6212 14.3476L15.8284 11.1404" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/duanxin.svg b/src/assets/svg/duanxin.svg
new file mode 100644
index 0000000..4021978
--- /dev/null
+++ b/src/assets/svg/duanxin.svg
@@ -0,0 +1,5 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="a-icon_youjianyouxiang 1">
+<path id="Vector" d="M20.6772 4H5.5105C3.12717 4 1.17717 5.93917 1.17717 8.33333L1.17712 17.6667C1.17712 20.0608 3.11629 22 5.51046 22H20.6771C23.0713 22 25.0105 20.0608 25.0105 17.6667L25.0105 8.33333C25.0105 5.93917 23.0713 4 20.6772 4ZM22.8438 17.6667C22.8438 18.8583 21.8688 19.8333 20.6771 19.8333H5.51046C4.31879 19.8333 3.34379 18.8583 3.34379 17.6667L3.34383 8.33333C3.34383 7.14167 4.31883 6.16667 5.5105 6.16667H20.6772C21.8688 6.16667 22.8438 7.14167 22.8438 8.33333L22.8438 17.6667ZM20.1355 7.39083L13.9497 10.9225C13.408 11.2258 12.7688 11.2258 12.238 10.9225L6.05217 7.39083C5.52133 7.09833 4.8605 7.27167 4.568 7.79167C4.2755 8.31167 4.45967 8.98333 4.96883 9.27583L11.1547 12.8075C11.7505 13.1433 12.4222 13.3167 13.083 13.3167C13.7438 13.3167 14.4155 13.1433 15.0113 12.8075L21.1972 9.27583C21.7172 8.98333 21.9013 8.3225 21.598 7.8025C21.5306 7.67787 21.4388 7.56805 21.3282 7.47955C21.2175 7.39104 21.0902 7.32565 20.9538 7.28726C20.8174 7.24887 20.6747 7.23825 20.5342 7.25605C20.3936 7.27384 20.258 7.31967 20.1355 7.39083Z" fill="#49494E"/>
+</g>
+</svg>
diff --git a/src/assets/svg/edit-remark.svg b/src/assets/svg/edit-remark.svg
new file mode 100644
index 0000000..ef79801
--- /dev/null
+++ b/src/assets/svg/edit-remark.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6932 5.1291C13.279 4.54331 14.2288 4.54331 14.8146 5.1291L15.0039 5.31847C15.5897 5.90425 15.5897 6.854 15.0039 7.43979L8.97746 13.4663C8.77867 13.6651 8.52802 13.804 8.25409 13.8672L7.2284 14.1039C6.50832 14.2701 5.86297 13.6247 6.02914 12.9046L6.26584 11.8789C6.32906 11.605 6.46798 11.3544 6.66677 11.1556L12.6932 5.1291Z" stroke="#A4A4A7"/>
+<path d="M11.3398 5.77539L14.3576 8.79319" stroke="#A4A4A7"/>
+</svg>
diff --git a/src/assets/svg/error-img.svg b/src/assets/svg/error-img.svg
new file mode 100644
index 0000000..a22b8e9
--- /dev/null
+++ b/src/assets/svg/error-img.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724222225695" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5877" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M785.066667 149.333333H238.933333c-98.133333 0-179.2 81.066667-179.2 179.2v362.666667c0 46.933333 17.066667 85.333333 46.933334 119.466667l12.8 12.8c34.133333 29.866667 76.8 51.2 123.733333 51.2h541.866667c98.133333 0 179.2-81.066667 179.2-179.2V332.8c0-102.4-81.066667-183.466667-179.2-183.466667z m110.933333 354.133334l-51.2-55.466667c-34.133333-38.4-93.866667-38.4-128-4.266667l-153.6 145.066667c-29.866667 29.866667-76.8 34.133333-110.933333 8.533333L384 546.133333c-29.866667-21.333333-72.533333-21.333333-102.4 4.266667L128 665.6V332.8c0-64 51.2-110.933333 110.933333-110.933333h541.866667c64 0 110.933333 51.2 110.933333 110.933333v170.666667z" fill="#E8E8E9" p-id="5878"></path><path d="M285.866667 375.466667m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z" fill="#E8E8E9" p-id="5879"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/error-line.svg b/src/assets/svg/error-line.svg
new file mode 100644
index 0000000..ce4db7d
--- /dev/null
+++ b/src/assets/svg/error-line.svg
@@ -0,0 +1,6 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.3535 11.9297C4.30588 11.9297 4.78207 12.4059 4.78207 13.3583V16.2154C4.78207 17.1678 4.30588 17.644 3.3535 17.644C2.40112 17.644 1.92493 17.1678 1.92493 16.2154V13.3583C1.92493 12.4059 2.40112 11.9297 3.3535 11.9297Z" fill="#FC5A50"/>
+<path d="M10.4964 7.63672C11.4488 7.63672 11.925 8.11291 11.925 9.06529V16.2081C11.925 17.1605 11.4488 17.6367 10.4964 17.6367C9.54406 17.6367 9.06787 17.1605 9.06787 16.2081V9.06529C9.06787 8.11291 9.54406 7.63672 10.4964 7.63672Z" fill="#FC5A50"/>
+<path d="M17.6393 3.35938C18.5916 3.35938 19.0678 3.83557 19.0678 4.78795V16.2165C19.0678 17.1689 18.5916 17.6451 17.6393 17.6451C16.6869 17.6451 16.2107 17.1689 16.2107 16.2165V4.78795C16.2107 3.83557 16.6869 3.35938 17.6393 3.35938Z" fill="#FC5A50"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.65742 4.73106C8.04795 4.34054 8.04795 3.70737 7.65742 3.31685C7.2669 2.92632 6.63373 2.92632 6.24321 3.31685L4.8562 4.70386L3.46919 3.31685C3.07867 2.92632 2.4455 2.92632 2.05498 3.31685C1.66445 3.70737 1.66445 4.34054 2.05498 4.73106L3.44199 6.11807L2.05498 7.50508C1.66445 7.8956 1.66445 8.52877 2.05498 8.91929C2.4455 9.30982 3.07867 9.30982 3.46919 8.91929L4.8562 7.53228L6.24321 8.91929C6.63373 9.30982 7.2669 9.30982 7.65742 8.91929C8.04795 8.52877 8.04795 7.8956 7.65742 7.50508L6.27041 6.11807L7.65742 4.73106Z" fill="#FC5A50"/>
+</svg>
diff --git a/src/assets/svg/event-close.svg b/src/assets/svg/event-close.svg
new file mode 100644
index 0000000..4496512
--- /dev/null
+++ b/src/assets/svg/event-close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6568 7.75853C18.0473 7.368 18.0473 6.73484 17.6568 6.34431C17.2663 5.95379 16.6331 5.95379 16.2426 6.34431L12 10.5869L7.7574 6.34431C7.36688 5.95379 6.73371 5.95379 6.34319 6.34431C5.95266 6.73484 5.95266 7.368 6.34319 7.75853L10.5858 12.0011L6.3431 16.2438C5.95258 16.6343 5.95258 17.2675 6.3431 17.658C6.73363 18.0485 7.36679 18.0485 7.75732 17.658L12 13.4153L16.2427 17.658C16.6332 18.0485 17.2664 18.0485 17.6569 17.658C18.0474 17.2675 18.0474 16.6343 17.6569 16.2438L13.4142 12.0011L17.6568 7.75853Z" fill="white" fill-opacity="0.8"/>
+</svg>
diff --git a/src/assets/svg/examine.svg b/src/assets/svg/examine.svg
new file mode 100644
index 0000000..a8d6017
--- /dev/null
+++ b/src/assets/svg/examine.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<path d="M5 3H19" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M5 21.0625H19" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7 3.0625V7.10125C7 7.70882 7.27618 8.28344 7.75061 8.66299L10.0478 10.5008C11.0486 11.3014 11.0486 12.8236 10.0478 13.6242L7.75061 15.462C7.27618 15.8416 7 16.4162 7 17.0237V21.0625" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M17 3.0625V7.10125C17 7.70882 16.7238 8.28344 16.2494 8.66299L13.9522 10.5008C12.9514 11.3014 12.9514 12.8236 13.9522 13.6242L16.2494 15.462C16.7238 15.8416 17 16.4162 17 17.0237V21.0625" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9.62475 15.0625H14.718C15.2208 15.0625 15.7051 15.2519 16.0746 15.5929L16.3566 15.8532C16.7667 16.2318 17 16.7646 17 17.3228V19.0625C17 20.1671 16.1046 21.0625 15 21.0625H9C7.89543 21.0625 7 20.1671 7 19.0625V17.495C7 16.8387 7.32198 16.2242 7.86158 15.8506L8.48633 15.4181C8.82081 15.1866 9.21794 15.0625 9.62475 15.0625Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/svg/facebook-login.svg b/src/assets/svg/facebook-login.svg
new file mode 100644
index 0000000..818ac60
--- /dev/null
+++ b/src/assets/svg/facebook-login.svg
@@ -0,0 +1,4 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.25" width="47.5" height="47.5" rx="23.75" stroke="black" stroke-opacity="0.1" stroke-width="0.5"/>
+<path d="M21.6608 34.5L21.6307 24.9546H17.8125V21.1364H21.6307V18.75C21.6307 15.2072 23.8247 13.5 26.9847 13.5C28.4987 13.5 29.7997 13.6126 30.1791 13.6632V17.3654L27.987 17.3664C26.2684 17.3664 25.9357 18.183 25.9357 19.3814V21.1364H30.9375L29.0284 24.9546H25.9357V34.5H21.6608Z" fill="#39579A"/>
+</svg>
diff --git a/src/assets/svg/form-login.svg b/src/assets/svg/form-login.svg
new file mode 100644
index 0000000..d72cf75
--- /dev/null
+++ b/src/assets/svg/form-login.svg
@@ -0,0 +1,23 @@
+<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10423_106172)">
+<mask id="mask0_10423_106172" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="41" height="41">
+<path d="M2.01302 5.80831C1.30038 5.09567 0.900024 4.12912 0.900024 3.1213V0.695312H40.9V40.6953H38.474C37.4662 40.6953 36.4997 40.295 35.787 39.5823L2.01302 5.80831Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10423_106172)">
+<path d="M2.01302 5.80831C1.30038 5.09567 0.900024 4.12912 0.900024 3.1213V0.695312H40.9V40.6953H38.474C37.4662 40.6953 36.4997 40.295 35.787 39.5823L2.01302 5.80831Z" fill="url(#paint0_linear_10423_106172)"/>
+<path d="M16.5672 1.03906H29.3026C31.1767 1.03906 32.7415 1.03906 33.9822 1.20474C35.2911 1.38147 36.4748 1.76989 37.4247 2.71979C38.3746 3.66968 38.7612 4.85153 38.938 6.16224C39.1036 7.40299 39.1036 12.1903 39.1036 14.0643V14.9003C39.1036 15.3153 38.9388 15.7133 38.6453 16.0068C38.3519 16.3002 37.9539 16.4651 37.5389 16.4651C37.1239 16.4651 36.7259 16.3002 36.4324 16.0068C36.139 15.7133 35.9741 15.3153 35.9741 14.9003V14.1711C35.9741 12.1608 35.9723 7.58524 35.836 6.57643C35.7072 5.61365 35.4826 5.20314 35.2101 4.93069C34.9395 4.65824 34.529 4.43365 33.5644 4.30479C32.5574 4.1704 31.2061 4.16672 29.194 4.16672H16.6758C14.6656 4.16672 13.3143 4.1704 12.3055 4.30479C11.3427 4.43365 10.9322 4.65824 10.6598 4.93069C10.3873 5.20314 10.1627 5.61365 10.0338 6.57643C9.89946 7.58524 9.89578 7.86164 9.89578 9.87189V14.0452C9.89578 16.0554 9.89946 17.4066 10.0338 18.4154C10.1627 19.3782 10.3873 19.7906 10.6598 20.0612C10.9322 20.3336 11.3427 20.5582 12.3055 20.6871C13.3143 20.8214 14.6656 20.8251 16.6758 20.8251H29.2048C29.6198 20.8251 30.0178 20.99 30.3112 21.2834C30.6047 21.5769 30.7696 21.9749 30.7696 22.3899C30.7696 22.8049 30.6047 23.2029 30.3112 23.4963C30.0178 23.7898 29.6198 23.9546 29.2048 23.9546H16.5691C14.6932 23.9546 13.1303 23.9546 11.8895 23.7889C10.5788 23.6122 9.39689 23.2256 8.44699 22.2757C7.49708 21.324 7.10864 20.1403 6.93192 18.8333C6.76624 17.5907 6.76624 16.0278 6.76624 14.1538V9.76511C6.76624 7.8911 6.76624 7.40299 6.93192 6.16224C7.10864 4.85153 7.49708 3.66968 8.44699 2.71979C9.39689 1.76989 10.5788 1.38147 11.8895 1.20658C13.1303 1.03906 14.6932 1.03906 16.5672 1.03906Z" fill="#538FE1"/>
+<path d="M19.6807 28.0469H26.1879" stroke="#538FE1" stroke-width="3.06816" stroke-linecap="round"/>
+<rect x="30.4482" y="15.0828" width="8.81336" height="13.1126" rx="2.79448" stroke="#538FE1" stroke-width="3.00944"/>
+<path d="M21.7977 12.0336V10.1706C21.7977 9.31076 22.3709 8.73754 23.2308 8.73754C24.0906 8.73754 24.6639 9.31076 24.6639 10.1706V12.0336C25.5237 12.4635 26.0969 13.4667 26.0969 14.4698C26.0969 16.0462 24.8072 17.3359 23.2308 17.3359C21.6544 17.3359 20.3647 16.0462 20.3647 14.4698C20.3647 13.4667 20.9379 12.4635 21.7977 12.0336Z" fill="#538FE1"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_10423_106172" x1="23.5658" y1="17.5808" x2="18.3943" y2="22.937" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9D9D9" stop-opacity="0"/>
+<stop offset="1" stop-opacity="0.16"/>
+</linearGradient>
+<clipPath id="clip0_10423_106172">
+<rect width="40" height="40" fill="white" transform="translate(0.900024 0.695312)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svg/fuzhi.svg b/src/assets/svg/fuzhi.svg
new file mode 100644
index 0000000..3ef94be
--- /dev/null
+++ b/src/assets/svg/fuzhi.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/&#229;&#164;&#141;&#229;&#136;&#182;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.67038 3.22658H12.337C13.2207 3.22658 13.937 3.94292 13.937 4.82658V9.49048C13.937 10.0004 13.6985 10.4547 13.3268 10.7477V11.9674C14.3095 11.5744 15.0037 10.6135 15.0037 9.49048V4.82658C15.0037 3.35382 13.8098 2.15991 12.337 2.15991H7.67038C6.56841 2.15991 5.62257 2.82832 5.21615 3.78182H6.45854C6.75194 3.4418 7.18603 3.22658 7.67038 3.22658ZM4.93229 5.91571H9.59896C10.4826 5.91571 11.199 6.63205 11.199 7.51571V12.1812C11.199 13.0649 10.4826 13.7812 9.59896 13.7812H4.93229C4.04864 13.7812 3.33229 13.0649 3.33229 12.1812V7.51571C3.33229 6.63205 4.04864 5.91571 4.93229 5.91571ZM2.26562 7.51571C2.26562 6.04295 3.45953 4.84904 4.93229 4.84904H9.59896C11.0717 4.84904 12.2656 6.04295 12.2656 7.51571V12.1812C12.2656 13.654 11.0717 14.8479 9.59896 14.8479H4.93229C3.45953 14.8479 2.26562 13.654 2.26562 12.1812V7.51571Z" fill="#1B1B22"/>
+</g>
+</svg>
diff --git a/src/assets/svg/google-login.svg b/src/assets/svg/google-login.svg
new file mode 100644
index 0000000..0d216f0
--- /dev/null
+++ b/src/assets/svg/google-login.svg
@@ -0,0 +1,7 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.25" width="47.5" height="47.5" rx="23.75" stroke="black" stroke-opacity="0.1" stroke-width="0.5"/>
+<path d="M18.1072 23.9983C18.1072 23.2839 18.229 22.5985 18.4447 21.9563L14.659 19.125C13.8984 20.6367 13.5034 22.306 13.5059 23.9983C13.5059 25.7496 13.9203 27.4015 14.6571 28.8678L18.4409 26.0318C18.2203 25.3765 18.1076 24.6897 18.1072 23.9983Z" fill="#FBBC05"/>
+<path d="M24.7561 17.5001C26.3405 17.5001 27.7721 18.0495 28.8971 18.9496L32.17 15.7498C30.1759 14.0501 27.6193 13 24.7561 13C20.3105 13 16.4892 15.4891 14.6592 19.1268L18.4467 21.9581C19.3186 19.3649 21.8049 17.5001 24.7561 17.5001Z" fill="#EA4335"/>
+<path d="M24.7561 30.497C21.8039 30.497 19.3177 28.6323 18.4448 26.0391L14.6592 28.8704C16.4883 32.508 20.3095 34.9971 24.7561 34.9971C27.4993 34.9971 30.1187 34.0437 32.0856 32.2558L28.4912 29.5351C27.4777 30.1604 26.2008 30.497 24.7552 30.497" fill="#34A853"/>
+<path d="M35.495 23.9997C35.495 23.35 35.3919 22.6497 35.239 22H24.7559V26.2498H30.7896C30.4887 27.6992 29.6674 28.813 28.4928 29.5377L32.0862 32.2584C34.1515 30.3815 35.495 27.5858 35.495 23.9997Z" fill="#4285F4"/>
+</svg>
diff --git a/src/assets/svg/gou.svg b/src/assets/svg/gou.svg
new file mode 100644
index 0000000..c22e465
--- /dev/null
+++ b/src/assets/svg/gou.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.93896 10L7.4745 13.5355C7.86502 13.9261 8.49819 13.9261 8.88871 13.5355L16.6669 5.75736" stroke="#538FE1" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/guanbi.svg b/src/assets/svg/guanbi.svg
new file mode 100644
index 0000000..5bc2fbf
--- /dev/null
+++ b/src/assets/svg/guanbi.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 110">
+<path id="Line 41" d="M5.05026 5.05078L14.9498 14.9503" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+<path id="Line 42" d="M14.9497 5.05078L5.05024 14.9503" stroke="#1B1B22" stroke-width="2" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/src/assets/svg/hi.svg b/src/assets/svg/hi.svg
new file mode 100644
index 0000000..c78824f
--- /dev/null
+++ b/src/assets/svg/hi.svg
@@ -0,0 +1,6 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3569 34.968C26.1601 35.688 33.8809 29.1273 34.6016 20.3144C35.3224 11.5015 28.7703 3.77361 19.967 3.05363C11.1638 2.33366 3.44305 8.89427 2.72228 17.7072C2.4654 20.848 3.13231 23.8511 4.49566 26.4482L1.57637 32.9768C1.39335 33.3861 1.76556 33.8251 2.19872 33.7108L9.14078 31.8792C11.458 33.6006 14.269 34.7154 17.3569 34.968Z" fill="#1B1B22"/>
+<path d="M4.08249 26.2471C4.12702 26.1005 4.10182 25.9415 4.01413 25.8158C2.38313 23.4778 1.37409 20.6638 1.23899 17.6028C0.860001 9.01577 7.50615 1.7487 16.0824 1.37019C24.6586 0.991672 31.9191 7.64496 32.2981 16.2319C32.6771 24.8189 26.031 32.086 17.4547 32.4645C14.4456 32.5973 11.5999 31.8649 9.15607 30.4876C9.02362 30.4129 8.8644 30.4026 8.72341 30.4595L2.04423 33.1558C2.0373 33.1586 2.03308 33.1592 2.03119 33.1593C2.02917 33.1595 2.02749 33.1594 2.02574 33.159C2.02184 33.1583 2.01508 33.1556 2.00804 33.1491C2.00101 33.1427 1.99765 33.1361 1.99643 33.132C1.99588 33.1301 1.99559 33.1283 1.9956 33.1261C1.9956 33.1241 1.99585 33.1196 1.99806 33.1124L4.08249 26.2471Z" fill="white" stroke="#1B1B22" stroke-linejoin="round"/>
+<path d="M26.6056 20.9282L23.5736 22.0184C23.4494 22.063 23.3259 22.0564 23.203 21.9986C23.0802 21.9407 22.9965 21.8497 22.9518 21.7255L20.1137 13.8322C20.069 13.708 20.0756 13.5845 20.1335 13.4617C20.1913 13.3388 20.2824 13.2551 20.4066 13.2104L23.4386 12.1203C23.5628 12.0756 23.6863 12.0822 23.8091 12.14C23.9319 12.1979 24.0157 12.2889 24.0603 12.4131L26.8985 20.3064C26.9431 20.4306 26.9365 20.5541 26.8787 20.677C26.8208 20.7998 26.7298 20.8835 26.6056 20.9282ZM22.6358 8.71716L23.3727 10.7667C23.4174 10.8909 23.4108 11.0144 23.3529 11.1373C23.295 11.2601 23.204 11.3438 23.0798 11.3885C22.2881 11.6732 21.4933 11.9507 20.7026 12.2387C20.1855 12.4271 19.6098 12.1703 19.4222 11.653C19.2319 11.1279 19.0474 10.6007 18.8585 10.0753C18.8138 9.95111 18.8204 9.82759 18.8783 9.70477C18.9362 9.58195 19.0272 9.49821 19.1514 9.45355L22.014 8.42427C22.1382 8.37961 22.2617 8.3862 22.3845 8.44406C22.5074 8.50191 22.5911 8.59295 22.6358 8.71716Z" fill="#101218"/>
+<path d="M13.7547 19.8866L15.393 24.443C15.4377 24.5672 15.4311 24.6907 15.3732 24.8136C15.3154 24.9364 15.2243 25.0201 15.1001 25.0648L11.7971 26.2524C11.6729 26.2971 11.5494 26.2905 11.4266 26.2326C11.3038 26.1748 11.22 26.0837 11.1754 25.9595L7.18007 14.848C7.1354 14.7237 7.142 14.6002 7.19985 14.4774C7.25771 14.3546 7.34875 14.2708 7.47296 14.2262L10.7759 13.0386C10.9002 12.9939 11.0237 13.0005 11.1465 13.0583C11.2693 13.1162 11.353 13.2072 11.3977 13.3315L12.7071 16.9732C13.0991 16.0416 13.7975 15.3952 14.8025 15.0338C15.8075 14.6725 16.7553 14.7015 17.6457 15.121C18.5362 15.5404 19.2067 16.3769 19.6574 17.6303L21.3323 22.2883C21.3769 22.4126 21.3703 22.5361 21.3125 22.6589C21.2546 22.7817 21.1636 22.8655 21.0394 22.9101L17.7195 24.1038C17.5952 24.1485 17.4717 24.1419 17.3489 24.084C17.2261 24.0262 17.1423 23.9352 17.0977 23.8109L15.4655 19.2715C15.2421 18.6504 14.8425 18.4434 14.2666 18.6505C13.702 18.8535 13.5314 19.2655 13.7547 19.8866Z" fill="#101218"/>
+</svg>
diff --git a/src/assets/svg/hongbao-small.svg b/src/assets/svg/hongbao-small.svg
new file mode 100644
index 0000000..21b4945
--- /dev/null
+++ b/src/assets/svg/hongbao-small.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 427319480">
+<g id="Group 6">
+<rect id="Rectangle 32" x="1.00012" width="13.4194" height="16" rx="2.06452" fill="#D73C1D"/>
+<path id="Rectangle 34" d="M1.00012 2.06451C1.00012 0.924313 1.92444 0 3.06464 0H12.3852C13.5254 0 14.4497 0.924315 14.4497 2.06452V5.82293C10.1484 7.62875 5.30148 7.62875 1.00012 5.82293V2.06451Z" fill="#E85D4B"/>
+<circle id="Ellipse 3" cx="7.96797" cy="6.96711" r="2.32258" fill="#FFE99D"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/svg/incineration-picture.svg b/src/assets/svg/incineration-picture.svg
new file mode 100644
index 0000000..758eb01
--- /dev/null
+++ b/src/assets/svg/incineration-picture.svg
@@ -0,0 +1,22 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_4540_120185)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.9418 0.467738C32.528 6.39961 36.0634 13.1691 40.6586 15.4055C40.7342 15.4423 40.8244 15.4263 40.8818 15.3649C42.3303 13.8178 42.6932 11.1355 42.2448 8.67304C42.21 8.48191 42.4412 8.34763 42.5865 8.47657C51.536 16.4172 53.9754 25.1497 54.491 35.6846H54.5005C54.5005 48.9366 43.7577 59.6794 30.5057 59.6794C17.2541 59.6794 6.51152 48.9372 6.51089 35.6858H6.49951C6.49951 26.734 8.93564 22.5377 13.8015 14.1561C14.2366 13.4065 14.6912 12.6234 15.1653 11.8005C15.2676 11.6229 15.5723 11.6905 15.6059 11.8926C16.0231 14.4011 18.4109 17.3746 21.0229 19.6118C21.1493 19.72 21.3433 19.6343 21.35 19.4681C21.5458 14.6168 22.7247 5.42183 30.6411 0.352001C30.7547 0.279286 30.907 0.337483 30.9418 0.467738Z" fill="url(#paint0_linear_4540_120185)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8027 16.3546C31.8041 20.0294 33.9882 24.1857 36.821 25.5982C36.8962 25.6357 36.9868 25.6197 37.0431 25.5572C37.8779 24.6303 38.1162 23.0875 37.8999 21.6292C37.8714 21.437 38.104 21.301 38.2482 21.4311C43.7184 26.3684 45.2196 31.7983 45.5395 38.3351H15.4531C15.4531 32.7231 16.9804 30.0924 20.0308 24.8379C20.2608 24.4417 20.4995 24.0306 20.7468 23.6021C20.8493 23.4247 21.1696 23.494 21.2191 23.6928C21.5867 25.1666 22.9444 26.8499 24.4427 28.1585C24.568 28.2679 24.7619 28.183 24.7695 28.0168C24.9102 24.9571 25.6966 19.3762 30.5024 16.2392C30.6153 16.1655 30.7672 16.2245 30.8027 16.3546ZM45.5469 38.3375C45.5469 46.6452 38.8121 53.38 30.5044 53.38C22.1966 53.38 15.4618 46.6452 15.4618 38.3375H45.5469Z" fill="#EBEFF4"/>
+<defs>
+<filter id="filter0_i_4540_120185" x="6.49951" y="0.320312" width="49.001" height="59.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.179397 0 0 0 0 0.314293 0 0 0 0 0.792562 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_4540_120185"/>
+</filter>
+<linearGradient id="paint0_linear_4540_120185" x1="30.5" y1="0.320312" x2="30.5" y2="59.6794" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2E9F1"/>
+<stop offset="1" stop-color="#D0D9E6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/svg/incineration-video.svg b/src/assets/svg/incineration-video.svg
new file mode 100644
index 0000000..acffe88
--- /dev/null
+++ b/src/assets/svg/incineration-video.svg
@@ -0,0 +1,24 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_4676_88921)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.9418 0.467738C32.528 6.39961 36.0634 13.1691 40.6586 15.4055C40.7342 15.4423 40.8244 15.4263 40.8818 15.3649C42.3303 13.8178 42.6932 11.1355 42.2448 8.67304C42.21 8.48191 42.4412 8.34763 42.5865 8.47657C51.536 16.4172 53.9754 25.1497 54.491 35.6846H54.5005C54.5005 48.9366 43.7577 59.6794 30.5057 59.6794C17.2541 59.6794 6.51152 48.9372 6.51089 35.6858H6.49951C6.49951 26.734 8.93564 22.5377 13.8015 14.1561C14.2366 13.4065 14.6912 12.6234 15.1653 11.8005C15.2676 11.6229 15.5723 11.6905 15.6059 11.8926C16.0231 14.4011 18.4109 17.3746 21.0229 19.6118C21.1493 19.72 21.3433 19.6343 21.35 19.4681C21.5458 14.6168 22.7247 5.42183 30.6411 0.352001C30.7547 0.279286 30.907 0.337483 30.9418 0.467738Z" fill="url(#paint0_linear_4676_88921)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8027 16.3546C31.8041 20.0294 33.9882 24.1857 36.821 25.5982C36.8962 25.6357 36.9868 25.6197 37.0431 25.5572C37.8779 24.6303 38.1162 23.0875 37.8999 21.6292C37.8714 21.437 38.104 21.301 38.2482 21.4311C43.7184 26.3684 45.2196 31.7983 45.5395 38.3351H15.4531C15.4531 32.7231 16.9804 30.0924 20.0308 24.8379C20.2608 24.4417 20.4995 24.0306 20.7468 23.6021C20.8493 23.4247 21.1696 23.494 21.2191 23.6928C21.5867 25.1666 22.9444 26.8499 24.4427 28.1585C24.568 28.2679 24.7619 28.183 24.7695 28.0168C24.9102 24.9571 25.6966 19.3762 30.5024 16.2392C30.6153 16.1655 30.7672 16.2245 30.8027 16.3546ZM45.5469 38.3375C45.5469 46.6452 38.8121 53.38 30.5044 53.38C22.1966 53.38 15.4618 46.6452 15.4618 38.3375H45.5469Z" fill="#EBEFF4"/>
+<circle cx="30" cy="30" r="15.5" fill="black" fill-opacity="0.4" stroke="white"/>
+<path d="M34.8451 28.7592C35.8016 29.3099 35.8016 30.6901 34.8451 31.2408L28.6182 34.8263C27.6637 35.376 26.4719 34.687 26.4719 33.5855L26.4719 26.4145C26.4719 25.313 27.6637 24.624 28.6182 25.1737L34.8451 28.7592Z" fill="white"/>
+<defs>
+<filter id="filter0_i_4676_88921" x="6.49951" y="0.320312" width="49.001" height="59.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.179397 0 0 0 0 0.314293 0 0 0 0 0.792562 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_4676_88921"/>
+</filter>
+<linearGradient id="paint0_linear_4676_88921" x1="30.5" y1="0.320312" x2="30.5" y2="59.6794" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2E9F1"/>
+<stop offset="1" stop-color="#D0D9E6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/svg/incineration.svg b/src/assets/svg/incineration.svg
new file mode 100644
index 0000000..77a2628
--- /dev/null
+++ b/src/assets/svg/incineration.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1878 2.9087C12.6946 4.68023 13.7406 6.63833 15.0891 7.354C15.1634 7.39343 15.2551 7.37771 15.3081 7.31244C15.6317 6.91441 15.7564 6.31814 15.7216 5.71699C15.7104 5.52305 15.9511 5.38655 16.0922 5.52011C18.633 7.92531 19.3437 10.5706 19.4987 13.7367L19.5016 13.7367C19.5016 17.8788 16.1437 21.2367 12.0016 21.2367C7.85946 21.2367 4.50159 17.8788 4.50159 13.7367L4.49805 13.7367C4.49805 10.9386 5.2595 9.62699 6.78041 7.00719C6.83548 6.91231 6.89156 6.81573 6.94863 6.71729C7.05141 6.54 7.41397 6.60371 7.49531 6.7918C7.7496 7.37984 8.25893 8.00279 8.82753 8.52596C8.94997 8.63862 9.14381 8.55341 9.15412 8.38735C9.24927 6.85407 9.69383 4.30284 11.8887 2.79541C11.9999 2.71908 12.1507 2.77907 12.1878 2.9087Z" fill="url(#paint0_linear_9641_51783)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1462 7.8758C12.4676 8.93972 13.0919 10.0861 13.8908 10.5402C13.9639 10.5818 14.0564 10.566 14.1056 10.4978C14.2457 10.3035 14.3184 10.0447 14.3336 9.77063C14.3443 9.57665 14.5941 9.43958 14.7311 9.57725C16.1895 11.042 16.6072 12.6525 16.7009 14.5667H7.29688C7.29688 12.8343 7.76248 12.0108 8.69247 10.4086C8.79534 10.2314 9.19937 10.2857 9.30481 10.4614C9.45584 10.7131 9.66684 10.9662 9.90046 11.195C10.0193 11.3115 10.2131 11.2266 10.2268 11.0608C10.3051 10.1109 10.611 8.66798 11.8471 7.76628C11.956 7.68682 12.1072 7.74672 12.1462 7.8758ZM16.7027 14.5683C16.7027 17.1651 14.5976 19.2701 12.0009 19.2701C9.40415 19.2701 7.29907 17.1651 7.29907 14.5683H16.7027Z" fill="url(#paint1_linear_9641_51783)"/>
+<defs>
+<linearGradient id="paint0_linear_9641_51783" x1="11.9998" y1="2.76172" x2="11.9998" y2="21.2367" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD706"/>
+<stop offset="1" stop-color="#FF3D00"/>
+</linearGradient>
+<linearGradient id="paint1_linear_9641_51783" x1="11.9998" y1="7.73047" x2="11.9998" y2="19.2701" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD500"/>
+<stop offset="1" stop-color="#FFD500" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/svg/list_hook.svg b/src/assets/svg/list_hook.svg
new file mode 100644
index 0000000..57ab35c
--- /dev/null
+++ b/src/assets/svg/list_hook.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.93896 10.002L7.4745 13.5375C7.86502 13.928 8.49819 13.928 8.88871 13.5375L16.6669 5.75931" stroke="#538FE1" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/loading.png b/src/assets/svg/loading.png
new file mode 100644
index 0000000..61f4417
Binary files /dev/null and b/src/assets/svg/loading.png differ
diff --git a/src/assets/svg/logo-active.svg b/src/assets/svg/logo-active.svg
new file mode 100644
index 0000000..26e5b8d
--- /dev/null
+++ b/src/assets/svg/logo-active.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.65003 9.42582C5.42859 5.73251 9.09403 3.11909 13.396 2.83594V9.45714C10.9481 9.82544 9.07145 11.9376 9.07145 14.4881C9.07145 17.0386 10.9481 19.1508 13.396 19.5191V26.1334C9.09403 25.8502 5.4286 23.2368 3.65004 19.5435H4.44571C5.95012 19.5435 7.1697 18.3239 7.1697 16.8195V12.1498C7.1697 10.6454 5.95012 9.42582 4.44571 9.42582H3.65003ZM20.3579 24.3885C18.7713 25.3812 16.9291 26.0033 14.9525 26.1334V19.5146C17.3858 19.1337 19.2472 17.0283 19.2472 14.4881C19.2472 11.948 17.3858 9.84262 14.9525 9.46171V2.83594C19.2545 3.11909 22.9199 5.73252 24.6984 9.42582H23.9028C22.3984 9.42582 21.1788 10.6454 21.1788 12.1498V16.8195C21.1788 18.3239 22.3984 19.5435 23.9028 19.5435H24.6984C24.5119 19.9308 24.3047 20.3062 24.0781 20.6684L25.8359 25.6499C25.9447 25.9582 25.6478 26.2551 25.3394 26.1463L20.3579 24.3885ZM23.9028 10.9824H25.314C25.6605 12.0856 25.8477 13.2594 25.8485 14.4768L25.8485 14.4846L25.8485 14.4925C25.8477 15.7099 25.6605 16.8837 25.314 17.9869H23.9028C23.258 17.9869 22.7353 17.4643 22.7353 16.8195V12.1498C22.7353 11.5051 23.258 10.9824 23.9028 10.9824ZM4.44571 17.9869H3.03445C2.68766 16.8828 2.50049 15.7079 2.5 14.4895V14.4798C2.50049 13.2614 2.68766 12.0865 3.03445 10.9824H4.44571C5.09046 10.9824 5.61313 11.5051 5.61313 12.1498V16.8195C5.61313 17.4643 5.09046 17.9869 4.44571 17.9869Z" fill="#1B1B22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1758 18.0488C16.1428 18.0488 17.7373 16.4543 17.7373 14.4873C17.7373 12.5203 16.1428 10.9258 14.1758 10.9258C12.2088 10.9258 10.6143 12.5203 10.6143 14.4873C10.6143 16.4543 12.2088 18.0488 14.1758 18.0488ZM12.2301 15.071C12.5524 15.071 12.8138 14.8097 12.8138 14.4873C12.8138 14.1649 12.5524 13.9036 12.2301 13.9036C11.9077 13.9036 11.6464 14.1649 11.6464 14.4873C11.6464 14.8097 11.9077 15.071 12.2301 15.071ZM14.1758 15.071C14.4982 15.071 14.7595 14.8097 14.7595 14.4873C14.7595 14.1649 14.4982 13.9036 14.1758 13.9036C13.8534 13.9036 13.5921 14.1649 13.5921 14.4873C13.5921 14.8097 13.8534 15.071 14.1758 15.071ZM16.7052 14.4873C16.7052 14.8097 16.4439 15.071 16.1215 15.071C15.7991 15.071 15.5378 14.8097 15.5378 14.4873C15.5378 14.1649 15.7991 13.9036 16.1215 13.9036C16.4439 13.9036 16.7052 14.1649 16.7052 14.4873Z" fill="#538FE1"/>
+</svg>
diff --git a/src/assets/svg/logo-black-cn.svg b/src/assets/svg/logo-black-cn.svg
new file mode 100644
index 0000000..263d3df
--- /dev/null
+++ b/src/assets/svg/logo-black-cn.svg
@@ -0,0 +1,11 @@
+<svg width="219" height="55" viewBox="0 0 219 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.40377 16.2587C7.44859 7.85963 15.7841 1.91624 25.5672 1.2717V16.33C19.9999 17.1675 15.7315 21.9713 15.7315 27.7721C15.7315 33.5729 19.9999 38.3768 25.5672 39.2142V54.257C15.7839 53.6125 7.44819 47.6688 3.40348 39.2694H5.21059C8.6321 39.2694 11.4058 36.4957 11.4058 33.0742V22.4539C11.4058 19.0324 8.63209 16.2587 5.21058 16.2587H3.40377ZM41.4025 50.2889C37.7937 52.5468 33.6033 53.9616 29.1073 54.2573V39.2037C34.641 38.3372 38.8744 33.549 38.8744 27.7721C38.8744 21.9952 34.641 17.207 29.1073 16.3406V1.27148C38.8918 1.9149 47.2288 7.85868 51.2741 16.2587H49.4631C46.0416 16.2587 43.2679 19.0324 43.2679 22.4539V33.0742C43.2679 36.4957 46.0416 39.2694 49.4631 39.2694H51.2744C50.85 40.1506 50.3785 41.0048 49.863 41.8286L53.8605 53.1574C54.108 53.8586 53.4327 54.5339 52.7314 54.2865L41.4025 50.2889ZM49.4631 19.7988H52.6742C53.4365 22.226 53.8597 24.8033 53.8882 27.4753V28.0534C53.8597 30.7252 53.4366 33.3023 52.6744 35.7293H49.4631C47.9967 35.7293 46.808 34.5406 46.808 33.0742V22.4539C46.808 20.9875 47.9967 19.7988 49.4631 19.7988ZM5.21059 35.7293H2.0035C1.2138 33.2149 0.788086 30.5394 0.788086 27.7644C0.788086 24.9891 1.21387 22.3134 2.00368 19.7988H5.21058C6.67695 19.7988 7.86566 20.9875 7.86566 22.4539V33.0742C7.86566 34.5406 6.67694 35.7293 5.21059 35.7293Z" fill="#1B1B22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3383 35.8641C31.8118 35.8641 35.4383 32.2376 35.4383 27.7641C35.4383 23.2906 31.8118 19.6641 27.3383 19.6641C22.8648 19.6641 19.2383 23.2906 19.2383 27.7641C19.2383 32.2376 22.8648 35.8641 27.3383 35.8641ZM22.913 29.0915C23.6462 29.0915 24.2406 28.4971 24.2406 27.7639C24.2406 27.0308 23.6462 26.4364 22.913 26.4364C22.1799 26.4364 21.5855 27.0308 21.5855 27.7639C21.5855 28.4971 22.1799 29.0915 22.913 29.0915ZM27.3382 29.0915C28.0714 29.0915 28.6657 28.4971 28.6657 27.7639C28.6657 27.0308 28.0714 26.4364 27.3382 26.4364C26.605 26.4364 26.0106 27.0308 26.0106 27.7639C26.0106 28.4971 26.605 29.0915 27.3382 29.0915ZM33.0909 27.7639C33.0909 28.4971 32.4965 29.0915 31.7633 29.0915C31.0301 29.0915 30.4358 28.4971 30.4358 27.7639C30.4358 27.0308 31.0301 26.4364 31.7633 26.4364C32.4965 26.4364 33.0909 27.0308 33.0909 27.7639Z" fill="#6898E6"/>
+<path d="M205.952 16.7163H212.277L212.288 21.6263H215.374L215.375 25.2409H212.289L212.322 30.663C212.326 31.1449 212.336 31.4662 212.351 31.6269C212.366 31.7875 212.38 31.898 212.394 31.9582C212.461 32.2594 212.627 32.5004 212.894 32.6812C213.156 32.8418 213.667 32.9221 214.428 32.9221H215.354L215.395 37.4104C214.519 37.4505 213.755 37.4806 213.101 37.5007C212.467 37.5208 211.945 37.5309 211.534 37.5309C209.806 37.5309 208.529 37.3401 207.704 36.9585C206.894 36.5569 206.371 35.8239 206.135 34.7596C206.059 34.4182 206.003 34.0266 205.966 33.5848C205.946 33.1229 205.93 32.5406 205.918 31.8377L205.871 25.2409H203.588L203.587 21.6263H205.963L205.952 16.7163Z" fill="black"/>
+<path d="M193.149 21.1743C195.515 21.1743 197.346 21.4555 198.644 22.0177C199.941 22.58 200.753 23.5941 201.079 25.0601C201.168 25.4617 201.225 25.9035 201.25 26.3855C201.27 26.8474 201.287 27.3394 201.3 27.8615C201.305 27.8816 201.299 27.9016 201.283 27.9217C201.287 27.9418 201.292 27.9619 201.296 27.982L201.326 35.0607C201.33 35.2615 201.329 35.4423 201.323 35.6029C201.334 35.7435 201.353 35.874 201.38 35.9945C201.429 36.2154 201.525 36.4162 201.668 36.597C201.806 36.7576 201.988 36.9283 202.214 37.109L202.219 37.4103H195.585L195.241 35.7234C194.402 36.4865 193.507 37.0388 192.554 37.3801C191.617 37.7014 190.491 37.8621 189.174 37.8621C187.672 37.8621 186.418 37.5408 185.411 36.8982C184.4 36.2355 183.774 35.3619 183.533 34.2775C183.377 33.5747 183.359 32.8015 183.48 31.9581C183.618 31.0946 184.075 30.3315 184.854 29.6688C185.405 29.1869 186.174 28.8053 187.161 28.5242C188.163 28.2229 189.15 28.0322 190.119 27.9518C192.033 27.7711 193.329 27.5402 194.008 27.259C194.686 26.9779 194.962 26.5562 194.837 25.9939C194.766 25.6726 194.535 25.4216 194.145 25.2408C193.772 25.04 193.297 24.9396 192.721 24.9396C191.301 24.9396 190.572 25.4517 190.532 26.4758H184.36C184.398 24.6083 185.138 23.2628 186.58 22.4395C188.018 21.596 190.207 21.1743 193.149 21.1743ZM190.063 33.2534C190.148 33.6349 190.373 33.906 190.737 34.0667C191.123 34.2273 191.573 34.3077 192.087 34.3077C193.074 34.3077 193.811 33.9663 194.297 33.2835C194.783 32.6007 194.983 31.6469 194.896 30.4219C194.201 30.7231 193.35 30.9641 192.341 31.1448C191.968 31.2251 191.648 31.3155 191.383 31.4159C191.133 31.4962 190.935 31.5766 190.788 31.6569C190.421 31.8577 190.189 32.1087 190.092 32.41C190.015 32.7112 190.005 32.9923 190.063 33.2534Z" fill="black"/>
+<path d="M163.456 15.7222H169.875L169.901 23.6142C170.557 22.7708 171.274 22.1583 172.053 21.7768C172.828 21.3751 173.74 21.1743 174.789 21.1743C178.163 21.1743 180.18 22.6603 180.84 25.6324C180.916 25.9738 180.976 26.3353 181.02 26.7168C181.059 27.0783 181.078 27.49 181.078 27.9518L181.144 37.4103H174.725L174.661 29.0664C174.667 28.725 174.648 28.4539 174.603 28.2531C174.579 28.0522 174.558 27.9117 174.541 27.8314C174.286 26.6867 173.573 26.1144 172.4 26.1144C171.516 26.1144 170.874 26.3754 170.476 26.8976C170.094 27.3996 169.906 28.2229 169.914 29.3676L169.973 37.4103H163.555L163.456 15.7222Z" fill="black"/>
+<path d="M151.585 21.1743C153.95 21.1743 155.901 21.6663 157.436 22.6503C158.992 23.6343 159.957 24.9697 160.332 26.6566C160.372 26.8373 160.4 27.008 160.415 27.1687C160.451 27.3293 160.476 27.49 160.491 27.6506H153.98C153.979 27.5502 153.967 27.4498 153.944 27.3494C153.943 27.249 153.933 27.1586 153.915 27.0783C153.812 26.6164 153.561 26.2248 153.16 25.9035C152.755 25.5621 152.244 25.3914 151.627 25.3914C150.845 25.3914 150.249 25.6224 149.837 26.0843C149.441 26.5261 149.173 27.0783 149.033 27.741C148.887 28.3836 148.824 29.0262 148.844 29.6688C148.863 30.3114 148.918 30.8335 149.007 31.2352C149.364 32.8417 150.252 33.645 151.671 33.645C153.091 33.645 153.925 32.8618 154.173 31.2954H160.653C160.406 33.4241 159.503 35.0507 157.942 36.1752C156.382 37.2998 154.295 37.8621 151.683 37.8621C149.276 37.8621 147.271 37.3099 145.668 36.2054C144.06 35.0808 143.058 33.6249 142.661 31.8376C142.339 30.3918 142.306 29.0362 142.559 27.7711C142.829 26.4859 143.348 25.3513 144.117 24.3673C144.902 23.3632 145.921 22.58 147.174 22.0177C148.428 21.4555 149.898 21.1743 151.585 21.1743Z" fill="black"/>
+<path d="M119.383 15.7222H129.319C132.323 15.7222 134.796 16.3447 136.739 17.5898C138.682 18.8348 139.923 20.6723 140.463 23.1021C140.927 25.1906 140.903 27.4398 140.389 29.8495C139.896 32.2593 138.696 34.1269 136.789 35.4523C134.899 36.7576 132.38 37.4103 129.233 37.4103H119.482L119.383 15.7222ZM128.469 20.7827H126.679L126.719 32.3497H128.571C129.682 32.3497 130.571 32.1388 131.238 31.7171C131.906 31.2954 132.41 30.7432 132.752 30.0604C133.094 29.3776 133.314 28.6547 133.412 27.8916C133.51 27.1285 133.532 26.3955 133.479 25.6927C133.426 24.9898 133.35 24.4175 133.252 23.9757C133.002 22.8511 132.504 22.0479 131.76 21.5659C131.035 21.0839 129.938 20.8229 128.469 20.7827Z" fill="black"/>
+<path d="M95.3667 15.7222H105.303C108.306 15.7222 110.779 16.3447 112.722 17.5898C114.665 18.8348 115.907 20.6723 116.447 23.1021C116.911 25.1906 116.886 27.4398 116.372 29.8495C115.879 32.2593 114.679 34.1269 112.773 35.4523C110.882 36.7576 108.363 37.4103 105.216 37.4103H95.4651L95.3667 15.7222ZM104.452 20.7827H102.663L102.703 32.3497H104.554C105.665 32.3497 106.554 32.1388 107.222 31.7171C107.889 31.2954 108.394 30.7432 108.736 30.0604C109.078 29.3776 109.298 28.6547 109.396 27.8916C109.493 27.1285 109.516 26.3955 109.462 25.6927C109.409 24.9898 109.333 24.4175 109.235 23.9757C108.985 22.8511 108.488 22.0479 107.743 21.5659C107.019 21.0839 105.922 20.8229 104.452 20.7827Z" fill="black"/>
+<path d="M80.4886 15.1499C82.484 15.1499 84.2615 15.5114 85.821 16.2343C87.4011 16.9572 88.7065 17.9714 89.7371 19.2767C90.7838 20.5619 91.4991 22.068 91.8829 23.795C92.1596 25.0401 92.2453 26.3052 92.14 27.5904C92.0348 28.8757 91.7699 30.0906 91.3454 31.2352C90.9165 32.3598 90.3431 33.3438 89.6254 34.1872L92.1867 36.6874L89.0941 39.8502L86.0863 36.8681C85.147 37.2697 84.2323 37.5509 83.3423 37.7115C82.4773 37.8923 81.5511 37.9826 80.5637 37.9826C77.5191 37.9826 75.0089 37.2396 73.0329 35.7536C71.0775 34.2676 69.8076 32.2092 69.223 29.5785C68.7678 27.5302 68.7163 25.6325 69.0687 23.8854C69.4165 22.1182 70.1037 20.582 71.1302 19.2767C72.1567 17.9714 73.4639 16.9572 75.0519 16.2343C76.6604 15.5114 78.4726 15.1499 80.4886 15.1499ZM76.4197 28.9158C76.6651 30.0203 77.1334 30.924 77.8244 31.6268C78.5155 32.3297 79.4164 32.6811 80.5273 32.6811C80.7536 32.6811 80.9548 32.661 81.131 32.6209C81.3073 32.5807 81.4812 32.5305 81.653 32.4703L79.1668 30.0303L82.2285 26.8675L84.6021 29.217C84.688 28.956 84.7634 28.5543 84.828 28.0121C84.8882 27.4499 84.9064 26.8374 84.8826 26.1747C84.8793 25.512 84.8152 24.8995 84.6902 24.3372C84.418 23.1122 83.9078 22.1584 83.1595 21.4756C82.4317 20.7928 81.5124 20.4514 80.4016 20.4514C79.4141 20.4514 78.6126 20.7326 77.997 21.2949C77.3975 21.8371 76.9468 22.5399 76.645 23.4034C76.3432 24.2669 76.1782 25.1907 76.15 26.1747C76.1379 27.1386 76.2278 28.0523 76.4197 28.9158Z" fill="black"/>
+</svg>
diff --git a/src/assets/svg/logo-black-us.svg b/src/assets/svg/logo-black-us.svg
new file mode 100644
index 0000000..f8dd042
--- /dev/null
+++ b/src/assets/svg/logo-black-us.svg
@@ -0,0 +1,7 @@
+<svg width="181" height="55" viewBox="0 0 181 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.31786 16.2586C8.36275 7.85946 16.6984 1.91605 26.4817 1.27165V16.3299C20.9144 17.1674 16.646 21.9712 16.646 27.772C16.646 33.5728 20.9144 38.3767 26.4817 39.2142V54.257C16.6982 53.6126 8.36227 47.6689 4.31751 39.2693H6.12504C9.54655 39.2693 12.3202 36.4957 12.3202 33.0741V22.4538C12.3202 19.0323 9.54655 16.2586 6.12504 16.2586H4.31786ZM42.3166 50.2888C38.7079 52.5467 34.5177 53.9615 30.0218 54.2572V39.2036C35.5555 38.3371 39.7888 33.549 39.7888 27.772C39.7888 21.9951 35.5555 17.2069 30.0218 16.3405V1.27148C39.8061 1.91503 48.1429 7.85874 52.1881 16.2586H50.3775C46.956 16.2586 44.1823 19.0323 44.1823 22.4538V33.0741C44.1823 36.4957 46.956 39.2693 50.3775 39.2693H52.1885C51.7642 40.1505 51.2927 41.0045 50.7772 41.8283L54.7748 53.1573C55.0223 53.8586 54.347 54.5339 53.6457 54.2864L42.3166 50.2888ZM50.3775 19.7987H53.5882C54.3543 22.2377 54.7779 24.8284 54.8027 27.5144V28.0143C54.7779 30.7 54.3544 33.2904 53.5884 35.7292H50.3775C48.9112 35.7292 47.7225 34.5405 47.7225 33.0741V22.4538C47.7225 20.9874 48.9112 19.7987 50.3775 19.7987ZM6.12504 35.7292H2.91754C2.12786 33.2149 1.70215 30.5393 1.70215 27.7643C1.70215 24.9891 2.12794 22.3133 2.91777 19.7987H6.12504C7.5914 19.7987 8.78012 20.9874 8.78012 22.4538V33.0741C8.78012 34.5405 7.5914 35.7292 6.12504 35.7292Z" fill="#1B1B22"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2533 35.8643C32.7268 35.8643 36.3533 32.2378 36.3533 27.7643C36.3533 23.2908 32.7268 19.6643 28.2533 19.6643C23.7798 19.6643 20.1533 23.2908 20.1533 27.7643C20.1533 32.2378 23.7798 35.8643 28.2533 35.8643ZM23.8285 29.0918C24.5616 29.0918 25.156 28.4975 25.156 27.7643C25.156 27.0311 24.5616 26.4368 23.8285 26.4368C23.0953 26.4368 22.5009 27.0311 22.5009 27.7643C22.5009 28.4975 23.0953 29.0918 23.8285 29.0918ZM28.2536 29.0918C28.9868 29.0918 29.5812 28.4975 29.5812 27.7643C29.5812 27.0311 28.9868 26.4368 28.2536 26.4368C27.5204 26.4368 26.9261 27.0311 26.9261 27.7643C26.9261 28.4975 27.5204 29.0918 28.2536 29.0918ZM34.0063 27.7643C34.0063 28.4975 33.4119 29.0918 32.6788 29.0918C31.9456 29.0918 31.3512 28.4975 31.3512 27.7643C31.3512 27.0311 31.9456 26.4368 32.6788 26.4368C33.4119 26.4368 34.0063 27.0311 34.0063 27.7643Z" fill="#6898E6"/>
+<path d="M147.302 11.949H153.416V13.6684H159.224C159.249 13.6684 159.262 13.6556 159.262 13.6302V11.949H165.356V13.6684H170.858V11.949H176.972V13.6684H179.035C180.028 13.6684 180.525 14.1587 180.525 15.1394V18.9412H176.972V20.9472H170.896C170.871 20.9472 170.858 20.9344 170.858 20.909V18.9412H165.356V20.9472H159.262V18.9412H153.416V20.909C153.416 20.9344 153.403 20.9472 153.378 20.9472H147.302V18.9412H145.468C144.615 18.9412 144.055 18.5464 143.787 17.7567C143.762 17.6294 143.749 17.5338 143.749 17.4702V13.6684H147.302V11.949ZM144.093 21.8833H176.532C177.679 21.8833 178.659 22.3927 179.474 23.4116C179.946 24.0867 180.181 24.7808 180.181 25.494V28.8755H174.087V27.1561H150.187V28.8755H144.093V21.8833ZM158.918 27.7675H165.356V30.1937H175.138C176.602 30.1937 177.806 30.7923 178.748 31.9895C179.258 32.7283 179.513 33.5625 179.513 34.4922V35.9442C179.513 38.899 178.545 40.8986 176.609 41.943L171.89 38.2176C172.348 37.9119 172.673 37.4534 172.864 36.8421C172.915 36.6128 172.941 36.4218 172.941 36.2689V35.9633C172.902 35.5175 172.686 35.2946 172.291 35.2946H165.356V42.3442H158.918V35.2946H153.282C152.34 35.2946 151.677 35.7659 151.295 36.7084C151.232 36.9376 151.2 37.2178 151.2 37.5489V40.7776H144.762V34.4922C144.762 32.811 145.532 31.5374 147.073 30.6713C147.761 30.3529 148.449 30.1937 149.136 30.1937H158.918V27.7675Z" fill="#0E0E0E"/>
+<path d="M120.881 12.0444H127.319V13.4009H139.584C140.374 13.4009 140.858 13.6683 141.036 14.2032C141.1 14.3943 141.131 14.6108 141.131 14.8528V18.3298H108.673C107.998 18.3298 107.495 17.9987 107.164 17.3364C107.1 17.1835 107.068 17.018 107.068 16.8397V13.4009H120.881V12.0444ZM112.437 19.0176H118.512C118.588 19.1195 118.824 19.7117 119.219 20.7943C119.397 21.24 119.492 21.4629 119.505 21.4629H128.694C128.72 21.4502 128.924 20.9407 129.306 19.9346C129.522 19.336 129.65 19.0303 129.688 19.0176H135.763V19.0367C135.585 19.4824 135.273 20.2912 134.827 21.4629H137.865C139.024 21.4629 140.023 21.8195 140.864 22.5328C141.717 23.3606 142.144 24.3604 142.144 25.5322V29.0665H135.706V26.5638H112.494V29.0665H106.056V21.4629H113.373V21.4438C113.258 21.1636 112.946 20.3549 112.437 19.0176ZM120.881 27.3089H127.319V30.0217H135.61C137.406 30.0217 138.839 30.7604 139.909 32.2378C140.176 32.6072 140.399 33.0593 140.577 33.5943C140.73 34.0782 140.807 34.696 140.807 35.4474V37.2241C140.807 38.3067 140.539 39.2555 140.004 40.0707C139.826 40.4018 139.482 40.8094 138.973 41.2934C138.374 41.8028 137.839 42.0957 137.368 42.1722L132.84 38.5614C133.846 38.1156 134.349 37.447 134.349 36.5555V36.479C134.349 35.6894 133.77 35.2946 132.611 35.2946H127.319V42.3441H120.881V35.2946H115.627C114.735 35.2946 114.169 35.5811 113.927 36.1543C113.876 36.3071 113.85 36.4599 113.85 36.6128V41.2934H107.431C107.406 41.2934 107.393 41.2806 107.393 41.2551V35.4474C107.393 34.1228 107.692 33.053 108.291 32.2378C109.361 30.7604 110.794 30.0217 112.589 30.0217H120.881V27.3089Z" fill="#0E0E0E"/>
+<path d="M98.9486 11.968H99.025C99.8147 11.968 100.483 12.3565 101.031 13.1334C101.248 13.5537 101.356 13.9612 101.356 14.3561C101.356 14.7764 101.235 15.1967 100.993 15.617H101.833C102.763 15.617 103.317 15.8016 103.495 16.171C103.648 16.413 103.725 16.776 103.725 17.26V20.8707C103.725 20.8962 103.712 20.9089 103.687 20.9089H95.3761V35.7913C95.3761 38.5678 94.7711 40.5355 93.5612 41.6946C93.0262 42.204 92.4531 42.5861 91.8418 42.8408C91.6889 42.9172 91.517 42.9873 91.3259 43.051L87.2758 38.8098L87.2185 38.7334C87.9063 38.5041 88.3902 38.1348 88.6704 37.6253C89.0016 37.1541 89.1671 36.0142 89.1671 34.2056V20.9089H85.0788C84.5693 20.9089 83.9134 20.9153 83.111 20.928C82.7035 20.928 82.3277 20.7815 81.9839 20.4886C81.6527 20.1829 81.4872 19.8072 81.4872 19.3614V15.6361H89.1671V12.0253H95.3761V15.6361H96.9427V15.617C96.7007 15.2349 96.5797 14.8082 96.5797 14.337C96.5797 13.7129 96.8089 13.1589 97.2674 12.6749C97.7514 12.2036 98.3118 11.968 98.9486 11.968ZM67.2734 12.331H78.7743C79.6404 12.331 80.1562 12.5348 80.3218 12.9423C80.4491 13.1589 80.5128 13.4072 80.5128 13.6874V17.6038H76.9594V24.3668H78.2394C79.08 24.3668 79.5958 24.5515 79.7869 24.9208C79.9397 25.1374 80.0161 25.4876 80.0161 25.9716V29.6396H76.9594V36.4026H78.6024C79.5194 36.4026 80.0607 36.5618 80.2263 36.8802C80.4173 37.0967 80.5128 37.4024 80.5128 37.7972V38.485H80.5319C81.3343 38.1029 81.9711 37.4852 82.4424 36.6319C82.7735 35.9059 82.9391 35.1736 82.9391 34.4349V29.2384H87.7152V33.2695C87.7152 35.4092 87.677 36.479 87.6006 36.479C87.6006 36.8102 87.4095 37.4661 87.0274 38.4468C86.6454 39.2492 86.1932 39.9051 85.671 40.4146C85.2125 40.8858 84.7476 41.2424 84.2764 41.4844C83.9707 41.6245 83.8052 41.6946 83.7797 41.6946C82.0603 40.0516 80.9713 39.0199 80.5128 38.5996V41.6946H69.203C68.528 41.6946 68.0504 41.5481 67.7702 41.2552C67.439 40.9367 67.2734 40.5929 67.2734 40.2235V36.4026H70.846V29.6396H69.2794C68.7572 29.6396 68.3114 29.3594 67.9421 28.799C67.8275 28.5698 67.7702 28.296 67.7702 27.9776V24.405C67.7702 24.3795 67.7829 24.3668 67.8084 24.3668H70.846V17.6038H68.7827C68.2732 17.6038 67.8275 17.33 67.4454 16.7823C67.3308 16.5276 67.2734 16.3175 67.2734 16.1519V12.331ZM81.6209 22.1698H86.3397C86.3652 22.1698 86.4607 22.5519 86.6263 23.3161C86.6517 23.367 87.0147 24.8954 87.7152 27.9011H82.9964C82.9582 27.9011 82.8245 27.3662 82.5952 26.2964C81.9839 23.7873 81.6591 22.4118 81.6209 22.1698ZM102.999 22.1698V22.1889C102.184 25.6786 101.732 27.5827 101.642 27.9011H96.9045V27.882C97.745 24.3031 98.1972 22.3991 98.2609 22.1698H102.999ZM96.9045 29.2384H101.681V34.454C101.681 35.9441 102.247 37.1477 103.381 38.0647C103.648 38.2558 103.909 38.4086 104.164 38.5232V38.5423L100.821 41.6946C99.4708 41.1469 98.4137 40.1025 97.6495 38.5614C97.1528 37.568 96.9045 36.3262 96.9045 34.8361V29.2384Z" fill="#0E0E0E"/>
+</svg>
diff --git a/src/assets/svg/logo-cn.svg b/src/assets/svg/logo-cn.svg
new file mode 100644
index 0000000..0d7855e
--- /dev/null
+++ b/src/assets/svg/logo-cn.svg
@@ -0,0 +1,7 @@
+<svg width="201" height="55" viewBox="0 0 201 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5084 15.4651C9.62177 6.90455 18.0991 0.847061 28.0485 0.190691V15.603C22.4414 16.4708 18.1486 21.3284 18.1486 27.1907C18.1486 33.0531 22.4414 37.9106 28.0485 38.7784V54.1906C18.0992 53.5343 9.62183 47.4768 5.50844 38.9163H7.34861C10.828 38.9163 13.6486 36.0895 13.6486 32.6025V21.7789C13.6486 18.2919 10.828 15.4651 7.34861 15.4651H5.5084ZM31.6485 38.7785V54.1907C36.5351 53.8684 41.0665 52.2432 44.9003 49.6585L53.762 52.7923C54.3059 52.9847 54.8298 52.4597 54.6379 51.9145L51.5853 43.2449C52.5812 41.8928 53.4546 40.4445 54.1889 38.9163H52.3486C48.8692 38.9163 46.0486 36.0895 46.0486 32.6025V21.7789C46.0486 18.2919 48.8692 15.4651 52.3486 15.4651H54.1889C50.0755 6.90449 41.598 0.846931 31.6485 0.190674V15.603C37.2557 16.4706 41.5486 21.3282 41.5486 27.1907C41.5486 33.0532 37.2557 37.9108 31.6485 38.7785ZM56.8486 27.1384V27.2429C56.8433 30.0525 56.4108 32.7616 55.6126 35.3085H52.3486C50.8575 35.3085 49.6486 34.097 49.6486 32.6025V21.7789C49.6486 20.2844 50.8575 19.0729 52.3486 19.0729H55.6126C56.4108 21.6198 56.8433 24.3289 56.8486 27.1384ZM4.08472 35.3085C3.2816 32.7458 2.84863 30.0189 2.84863 27.1907C2.84863 24.3625 3.28158 21.6356 4.08469 19.0729H7.34861C8.8398 19.0729 10.0487 20.2844 10.0487 21.7789V32.6025C10.0487 34.097 8.8398 35.3085 7.34861 35.3085H4.08472Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.8282 35.4507C34.3501 35.4507 38.0159 31.7769 38.0159 27.2451C38.0159 22.7133 34.3501 19.0396 29.8282 19.0396C25.3064 19.0396 21.6406 22.7133 21.6406 27.2451C21.6406 31.7769 25.3064 35.4507 29.8282 35.4507ZM25.3513 28.5484C26.0969 28.5484 26.7013 27.9426 26.7013 27.1954C26.7013 26.4482 26.0969 25.8425 25.3513 25.8425C24.6057 25.8425 24.0013 26.4482 24.0013 27.1954C24.0013 27.9426 24.6057 28.5484 25.3513 28.5484ZM29.8513 28.5484C30.5969 28.5484 31.2013 27.9426 31.2013 27.1954C31.2013 26.4482 30.5969 25.8425 29.8513 25.8425C29.1058 25.8425 28.5014 26.4482 28.5014 27.1954C28.5014 27.9426 29.1058 28.5484 29.8513 28.5484ZM35.7014 27.1954C35.7014 27.9426 35.0969 28.5484 34.3514 28.5484C33.6058 28.5484 33.0014 27.9426 33.0014 27.1954C33.0014 26.4482 33.6058 25.8425 34.3514 25.8425C35.0969 25.8425 35.7014 26.4482 35.7014 27.1954Z" fill="#6898E6"/>
+<path d="M162.443 10.1807H169.126V12.0603H175.475C175.503 12.0603 175.517 12.0463 175.517 12.0185V10.1807H182.179V12.0603H188.194V10.1807H194.877V12.0603H197.132C198.218 12.0603 198.761 12.5963 198.761 13.6683V17.8243H194.877V20.0172H188.235C188.207 20.0172 188.194 20.0033 188.194 19.9754V17.8243H182.179V20.0172H175.517V17.8243H169.126V19.9754C169.126 20.0033 169.112 20.0172 169.084 20.0172H162.443V17.8243H160.438C159.505 17.8243 158.893 17.3927 158.6 16.5295C158.573 16.3903 158.559 16.2858 158.559 16.2162V12.0603H162.443V10.1807ZM158.935 21.0405H194.396C195.649 21.0405 196.721 21.5974 197.612 22.7113C198.128 23.4492 198.385 24.208 198.385 24.9876V28.6842H191.723V26.8046H165.597V28.6842H158.935V21.0405ZM175.141 27.4729H182.179V30.1252H192.872C194.473 30.1252 195.789 30.7796 196.819 32.0883C197.376 32.8958 197.654 33.8078 197.654 34.8242V36.4114C197.654 39.6415 196.596 41.8274 194.48 42.969L189.321 38.8966C189.823 38.5625 190.178 38.0612 190.386 37.3929C190.442 37.1423 190.47 36.9335 190.47 36.7664V36.4323C190.428 35.945 190.192 35.7013 189.76 35.7013H182.179V43.4076H175.141V35.7013H168.98C167.95 35.7013 167.226 36.2164 166.808 37.2467C166.738 37.4974 166.704 37.8037 166.704 38.1657V41.6951H159.665V34.8242C159.665 32.9863 160.508 31.5941 162.192 30.6473C162.944 30.2992 163.696 30.1252 164.448 30.1252H175.141V27.4729Z" fill="white"/>
+<path d="M132.503 10.2852H139.541V11.7679H152.949C153.812 11.7679 154.341 12.0603 154.536 12.6451C154.606 12.8539 154.641 13.0906 154.641 13.3552V17.1561H119.158C118.42 17.1561 117.87 16.7941 117.508 16.0701C117.439 15.903 117.404 15.722 117.404 15.5271V11.7679H132.503V10.2852ZM123.272 17.9079H129.914C129.997 18.0193 130.255 18.6667 130.686 19.8502C130.881 20.3375 130.986 20.5811 131 20.5811H141.045C141.073 20.5672 141.296 20.0103 141.713 18.9104C141.95 18.256 142.089 17.9219 142.131 17.9079H148.772V17.9288C148.577 18.4161 148.236 19.3002 147.749 20.5811H151.069C152.336 20.5811 153.429 20.971 154.348 21.7506C155.281 22.6556 155.748 23.7486 155.748 25.0295V28.8931H148.709V26.1572H123.335V28.8931H116.297V20.5811H124.296V20.5602C124.17 20.2539 123.829 19.3698 123.272 17.9079ZM132.503 26.9717H139.541V29.9373H148.605C150.568 29.9373 152.135 30.7448 153.304 32.3599C153.596 32.7636 153.84 33.2579 154.035 33.8427C154.202 34.3717 154.286 35.047 154.286 35.8684V37.8107C154.286 38.9941 153.993 40.0314 153.408 40.9225C153.214 41.2844 152.838 41.73 152.281 42.2591C151.626 42.816 151.042 43.1362 150.526 43.2197L145.577 39.2726C146.677 38.7853 147.227 38.0543 147.227 37.0797V36.9962C147.227 36.133 146.593 35.7014 145.326 35.7014H139.541V43.4077H132.503V35.7014H126.76C125.785 35.7014 125.166 36.0146 124.901 36.6412C124.846 36.8082 124.818 36.9753 124.818 37.1424V42.2591H117.801C117.773 42.2591 117.759 42.2451 117.759 42.2173V35.8684C117.759 34.4205 118.086 33.2509 118.74 32.3599C119.91 30.7448 121.476 29.9373 123.439 29.9373H132.503V26.9717Z" fill="white"/>
+<path d="M107.475 10.2019H107.559C108.422 10.2019 109.153 10.6266 109.751 11.4758C109.988 11.9353 110.106 12.3808 110.106 12.8124C110.106 13.2719 109.974 13.7314 109.71 14.1908H110.629C111.645 14.1908 112.251 14.3927 112.445 14.7965C112.613 15.061 112.696 15.4578 112.696 15.9869V19.934C112.696 19.9618 112.682 19.9758 112.654 19.9758H103.57V36.2446C103.57 39.2798 102.908 41.4309 101.586 42.6979C101.001 43.2548 100.374 43.6725 99.706 43.951C99.5389 44.0345 99.351 44.1111 99.1421 44.1807L94.7146 39.5444L94.652 39.4608C95.4038 39.2102 95.9329 38.8065 96.2392 38.2495C96.6012 37.7344 96.7822 36.4883 96.7822 34.5113V19.9758H92.3129C91.756 19.9758 91.039 19.9827 90.1618 19.9966C89.7163 19.9966 89.3056 19.8365 88.9296 19.5163C88.5676 19.1822 88.3866 18.7714 88.3866 18.2841V14.2117H96.7822V10.2646H103.57V14.2117H105.282V14.1908C105.018 13.7731 104.885 13.3067 104.885 12.7916C104.885 12.1093 105.136 11.5037 105.637 10.9746C106.166 10.4595 106.779 10.2019 107.475 10.2019ZM72.8486 10.5987H85.4211C86.3678 10.5987 86.9317 10.8215 87.1127 11.267C87.2519 11.5037 87.3215 11.7752 87.3215 12.0815V16.3628H83.437V23.7558H84.8363C85.7552 23.7558 86.3191 23.9577 86.5279 24.3615C86.695 24.5982 86.7785 24.981 86.7785 25.5101V29.5199H83.437V36.9129H85.2331C86.2355 36.9129 86.8273 37.087 87.0083 37.4351C87.2171 37.6717 87.3215 38.0059 87.3215 38.4375V39.1893H87.3424C88.2196 38.7717 88.9157 38.0964 89.4309 37.1636C89.7929 36.37 89.9739 35.5694 89.9739 34.7619V29.0813H95.195V33.4879C95.195 35.827 95.1532 36.9965 95.0697 36.9965C95.0697 37.3585 94.8608 38.0755 94.4431 39.1476C94.0254 40.0247 93.5312 40.7417 92.9603 41.2987C92.4591 41.8138 91.9509 42.2036 91.4358 42.4682C91.1016 42.6213 90.9206 42.6979 90.8928 42.6979C89.0132 40.9019 87.8228 39.7741 87.3215 39.3146V42.6979H74.958C74.22 42.6979 73.6979 42.5378 73.3916 42.2176C73.0296 41.8695 72.8486 41.4936 72.8486 41.0898V36.9129H76.754V29.5199H75.0415C74.4707 29.5199 73.9834 29.2136 73.5796 28.601C73.4543 28.3504 73.3916 28.051 73.3916 27.703V23.7976C73.3916 23.7697 73.4056 23.7558 73.4334 23.7558H76.754V16.3628H74.4985C73.9416 16.3628 73.4543 16.0634 73.0366 15.4648C72.9113 15.1863 72.8486 14.9566 72.8486 14.7756V10.5987ZM88.5328 21.3541H93.6913C93.7191 21.3541 93.8235 21.7718 94.0045 22.6072C94.0324 22.6629 94.4292 24.3336 95.195 27.6194H90.0365C89.9947 27.6194 89.8485 27.0347 89.5979 25.8651C88.9296 23.1223 88.5746 21.6187 88.5328 21.3541ZM111.902 21.3541V21.375C111.011 25.1899 110.517 27.2714 110.42 27.6194H105.24V27.5985C106.159 23.6862 106.654 21.6047 106.723 21.3541H111.902ZM105.24 29.0813H110.461V34.7827C110.461 36.4117 111.081 37.7274 112.32 38.7299C112.613 38.9387 112.898 39.1058 113.176 39.2311V39.252L109.522 42.6979C108.046 42.0992 106.89 40.9575 106.055 39.2729C105.512 38.1869 105.24 36.8294 105.24 35.2004V29.0813Z" fill="white"/>
+</svg>
diff --git a/src/assets/svg/logo-us.svg b/src/assets/svg/logo-us.svg
new file mode 100644
index 0000000..c8d80b9
--- /dev/null
+++ b/src/assets/svg/logo-us.svg
@@ -0,0 +1,11 @@
+<svg width="248" height="55" viewBox="0 0 248 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9645 15.4651C15.0778 6.90455 23.5552 0.847061 33.5046 0.190691V15.603C27.8975 16.4708 23.6047 21.3284 23.6047 27.1907C23.6047 33.0531 27.8975 37.9106 33.5046 38.7784V54.1906C23.5552 53.5343 15.0779 47.4768 10.9645 38.9163H12.8047C16.2841 38.9163 19.1047 36.0895 19.1047 32.6025V21.7789C19.1047 18.2919 16.2841 15.4651 12.8047 15.4651H10.9645ZM37.1045 38.7785V54.1907C41.9911 53.8684 46.5226 52.2432 50.3564 49.6585L59.218 52.7923C59.762 52.9847 60.2859 52.4597 60.0939 51.9145L57.0414 43.2449C58.0373 41.8928 58.9107 40.4445 59.6449 38.9163H57.8047C54.3253 38.9163 51.5047 36.0895 51.5047 32.6025V21.7789C51.5047 18.2919 54.3253 15.4651 57.8047 15.4651H59.645C55.5315 6.90449 47.054 0.846931 37.1045 0.190674V15.603C42.7118 16.4706 47.0047 21.3282 47.0047 27.1907C47.0047 33.0532 42.7118 37.9108 37.1045 38.7785ZM62.3047 27.1384V27.2429C62.2994 30.0525 61.8668 32.7616 61.0686 35.3085H57.8047C56.3135 35.3085 55.1047 34.097 55.1047 32.6025V21.7789C55.1047 20.2844 56.3135 19.0729 57.8047 19.0729H61.0687C61.8668 21.6198 62.2994 24.3289 62.3047 27.1384ZM9.54077 35.3085C8.73765 32.7458 8.30469 30.0189 8.30469 27.1907C8.30469 24.3625 8.73764 21.6356 9.54074 19.0729H12.8047C14.2959 19.0729 15.5047 20.2844 15.5047 21.7789V32.6025C15.5047 34.097 14.2959 35.3085 12.8047 35.3085H9.54077Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2843 35.4507C39.8062 35.4507 43.4719 31.7769 43.4719 27.2451C43.4719 22.7133 39.8062 19.0396 35.2843 19.0396C30.7624 19.0396 27.0967 22.7133 27.0967 27.2451C27.0967 31.7769 30.7624 35.4507 35.2843 35.4507ZM30.8074 28.5484C31.553 28.5484 32.1574 27.9426 32.1574 27.1954C32.1574 26.4482 31.553 25.8425 30.8074 25.8425C30.0618 25.8425 29.4573 26.4482 29.4573 27.1954C29.4573 27.9426 30.0618 28.5484 30.8074 28.5484ZM35.3074 28.5484C36.053 28.5484 36.6574 27.9426 36.6574 27.1954C36.6574 26.4482 36.053 25.8425 35.3074 25.8425C34.5618 25.8425 33.9574 26.4482 33.9574 27.1954C33.9574 27.9426 34.5618 28.5484 35.3074 28.5484ZM41.1574 27.1954C41.1574 27.9426 40.553 28.5484 39.8075 28.5484C39.0619 28.5484 38.4574 27.9426 38.4574 27.1954C38.4574 26.4482 39.0619 25.8425 39.8075 25.8425C40.553 25.8425 41.1574 26.4482 41.1574 27.1954Z" fill="#6898E6"/>
+<path d="M232.933 14.9561H240.103L240.116 20.5219H243.614L243.615 24.6195H240.117L240.154 30.7658C240.158 31.3122 240.169 31.6764 240.187 31.8585C240.204 32.0406 240.22 32.1658 240.235 32.2341C240.311 32.5756 240.5 32.8487 240.802 33.0536C241.099 33.2357 241.679 33.3268 242.542 33.3268H243.591L243.637 38.4146C242.645 38.4601 241.778 38.4943 241.037 38.517C240.319 38.5398 239.727 38.5512 239.26 38.5512C237.301 38.5512 235.854 38.3349 234.919 37.9024C234.001 37.4471 233.409 36.6162 233.14 35.4097C233.054 35.0227 232.991 34.5788 232.949 34.078C232.926 33.5544 232.908 32.8943 232.894 32.0975L232.841 24.6195H230.253L230.252 20.5219H232.945L232.933 14.9561Z" fill="white"/>
+<path d="M218.419 20.01C221.101 20.01 223.177 20.3287 224.648 20.9661C226.119 21.6035 227.039 22.7531 227.408 24.4149C227.51 24.8702 227.574 25.371 227.602 25.9173C227.625 26.4409 227.644 26.9986 227.659 27.5905C227.664 27.6133 227.658 27.636 227.64 27.6588C227.645 27.6816 227.65 27.7043 227.655 27.7271L227.689 35.7515C227.693 35.9791 227.692 36.184 227.686 36.3661C227.698 36.5255 227.719 36.6734 227.749 36.81C227.805 37.0604 227.914 37.2881 228.076 37.4929C228.233 37.6751 228.439 37.8685 228.695 38.0734L228.701 38.4149H221.18L220.79 36.5027C219.84 37.3677 218.824 37.9937 217.745 38.3807C216.683 38.745 215.406 38.9271 213.913 38.9271C212.211 38.9271 210.789 38.5629 209.648 37.8344C208.502 37.0832 207.792 36.0929 207.519 34.8637C207.342 34.0669 207.322 33.1905 207.459 32.2344C207.615 31.2555 208.134 30.3905 209.016 29.6393C209.641 29.0929 210.512 28.6604 211.631 28.3417C212.768 28.0003 213.886 27.784 214.985 27.6929C217.155 27.4881 218.624 27.2263 219.392 26.9076C220.161 26.5889 220.475 26.1108 220.333 25.4734C220.252 25.1092 219.991 24.8246 219.549 24.6198C219.125 24.3921 218.587 24.2783 217.934 24.2783C216.325 24.2783 215.498 24.8588 215.452 26.0198H208.457C208.499 23.9027 209.338 22.3775 210.973 21.4442C212.602 20.4881 215.085 20.01 218.419 20.01ZM214.921 33.7027C215.017 34.1352 215.272 34.4425 215.686 34.6246C216.122 34.8068 216.632 34.8978 217.215 34.8978C218.335 34.8978 219.17 34.5108 219.721 33.7368C220.272 32.9629 220.498 31.8816 220.399 30.4929C219.612 30.8344 218.647 31.1076 217.503 31.3124C217.08 31.4035 216.718 31.5059 216.417 31.6198C216.134 31.7108 215.909 31.8019 215.743 31.8929C215.327 32.1206 215.064 32.4051 214.953 32.7466C214.866 33.0881 214.855 33.4068 214.921 33.7027Z" fill="white"/>
+<path d="M184.761 13.8293H192.037L192.066 22.7757C192.81 21.8196 193.623 21.1253 194.506 20.6928C195.385 20.2375 196.418 20.0098 197.608 20.0098C201.432 20.0098 203.719 21.6944 204.467 25.0635C204.553 25.4505 204.621 25.8602 204.67 26.2928C204.715 26.7025 204.737 27.1692 204.737 27.6928L204.811 38.4147H197.535L197.462 28.9562C197.469 28.5692 197.448 28.2619 197.397 28.0342C197.37 27.8066 197.346 27.6472 197.326 27.5562C197.037 26.2586 196.229 25.6098 194.899 25.6098C193.897 25.6098 193.17 25.9058 192.718 26.4976C192.285 27.0667 192.073 28.0001 192.081 29.2976L192.148 38.4147H184.873L184.761 13.8293Z" fill="white"/>
+<path d="M171.303 20.01C173.985 20.01 176.196 20.5677 177.936 21.6832C179.7 22.7986 180.794 24.3124 181.219 26.2246C181.265 26.4295 181.296 26.623 181.313 26.8051C181.354 26.9872 181.383 27.1694 181.4 27.3515H174.019C174.017 27.2377 174.004 27.1238 173.978 27.01C173.976 26.8962 173.965 26.7937 173.945 26.7027C173.829 26.1791 173.543 25.7352 173.089 25.371C172.63 24.984 172.051 24.7905 171.351 24.7905C170.465 24.7905 169.789 25.0523 169.322 25.5759C168.874 26.0767 168.57 26.7027 168.41 27.4539C168.246 28.1824 168.174 28.9108 168.196 29.6393C168.218 30.3677 168.28 30.9596 168.381 31.4149C168.786 33.236 169.793 34.1466 171.402 34.1466C173.011 34.1466 173.956 33.2588 174.238 31.4832H181.583C181.303 33.8962 180.279 35.7401 178.51 37.0149C176.741 38.2897 174.376 38.9271 171.415 38.9271C168.686 38.9271 166.413 38.3011 164.596 37.049C162.774 35.7742 161.637 34.1238 161.187 32.0978C160.823 30.4588 160.785 28.9222 161.072 27.4881C161.378 26.0311 161.967 24.745 162.838 23.6295C163.728 22.4913 164.883 21.6035 166.304 20.9661C167.725 20.3287 169.391 20.01 171.303 20.01Z" fill="white"/>
+<path d="M134.8 13.8293H146.063C149.468 13.8293 152.272 14.535 154.474 15.9464C156.677 17.3578 158.084 19.4407 158.696 22.1952C159.222 24.5627 159.194 27.1123 158.612 29.844C158.053 32.5757 156.693 34.6928 154.531 36.1952C152.388 37.6749 149.533 38.4147 145.965 38.4147H134.912L134.8 13.8293ZM145.099 19.5659H143.071L143.116 32.6781H145.215C146.474 32.6781 147.482 32.4391 148.239 31.9611C148.995 31.483 149.567 30.857 149.955 30.083C150.343 29.309 150.592 28.4895 150.703 27.6245C150.814 26.7594 150.839 25.9285 150.779 25.1318C150.718 24.335 150.632 23.6863 150.521 23.1854C150.238 21.9106 149.674 21.0001 148.83 20.4537C148.009 19.9074 146.765 19.6115 145.099 19.5659Z" fill="white"/>
+<path d="M107.574 13.8293H118.838C122.242 13.8293 125.046 14.535 127.248 15.9464C129.451 17.3578 130.858 19.4407 131.47 22.1952C131.997 24.5627 131.968 27.1123 131.386 29.844C130.827 32.5757 129.467 34.6928 127.306 36.1952C125.163 37.6749 122.307 38.4147 118.739 38.4147H107.686L107.574 13.8293ZM117.874 19.5659H115.845L115.891 32.6781H117.989C119.249 32.6781 120.257 32.4391 121.013 31.9611C121.77 31.483 122.342 30.857 122.73 30.083C123.117 29.309 123.366 28.4895 123.477 27.6245C123.588 26.7594 123.614 25.9285 123.553 25.1318C123.493 24.335 123.407 23.6863 123.295 23.1854C123.012 21.9106 122.448 21.0001 121.604 20.4537C120.783 19.9074 119.54 19.6115 117.874 19.5659Z" fill="white"/>
+<path d="M90.7099 13.1807C92.9719 13.1807 94.9868 13.5904 96.7547 14.4099C98.5458 15.2294 100.026 16.379 101.194 17.8587C102.38 19.3156 103.191 21.0229 103.626 22.9807C103.94 24.392 104.037 25.8262 103.918 27.2831C103.798 28.74 103.498 30.1172 103.017 31.4148C102.531 32.6896 101.881 33.8051 101.067 34.7612L103.971 37.5953L100.465 41.1807L97.0554 37.8002C95.9906 38.2555 94.9537 38.5742 93.9448 38.7563C92.9643 38.9612 91.9144 39.0636 90.795 39.0636C87.3438 39.0636 84.4982 38.2213 82.2583 36.5368C80.0417 34.8522 78.6021 32.5189 77.9394 29.5368C77.4234 27.2148 77.3651 25.0636 77.7645 23.0831C78.1588 21.0799 78.9378 19.3384 80.1014 17.8587C81.265 16.379 82.7469 15.2294 84.5469 14.4099C86.3703 13.5904 88.4246 13.1807 90.7099 13.1807ZM86.0975 28.7855C86.3757 30.0376 86.9065 31.062 87.6899 31.8587C88.4732 32.6555 89.4945 33.0538 90.7538 33.0538C91.0103 33.0538 91.2384 33.0311 91.4382 32.9855C91.6379 32.94 91.8352 32.8831 92.0299 32.8148L89.2115 30.049L92.6823 26.4636L95.3729 29.127C95.4703 28.8311 95.5557 28.3758 95.629 27.7612C95.6972 27.1238 95.7179 26.4294 95.6908 25.6782C95.6871 24.927 95.6145 24.2327 95.4728 23.5953C95.1642 22.2067 94.5858 21.1254 93.7376 20.3514C92.9126 19.5774 91.8705 19.1904 90.6113 19.1904C89.4919 19.1904 88.5833 19.5091 87.8855 20.1465C87.2059 20.7612 86.695 21.5579 86.3529 22.5368C86.0107 23.5156 85.8237 24.5628 85.7917 25.6782C85.778 26.7709 85.8799 27.8067 86.0975 28.7855Z" fill="white"/>
+</svg>
diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg
new file mode 100644
index 0000000..7823d43
--- /dev/null
+++ b/src/assets/svg/logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721875302837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8791" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M874.666667 738.133333c42.666667-64 64-145.066667 64-226.133333 0-234.666667-192-426.666667-426.666667-426.666667S85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667c81.066667 0 162.133333-25.6 226.133333-64l183.466667 59.733333c12.8 4.266667 21.333333-8.533333 17.066667-17.066667M166.4 627.2c-8.533333-34.133333-17.066667-72.533333-17.066667-115.2s8.533333-81.066667 17.066667-115.2h12.8c17.066667 0 29.866667 12.8 29.866667 29.866667v170.666666c0 17.066667-12.8 29.866667-29.866667 29.866667h-12.8z m311.466667 243.2c-119.466667-12.8-221.866667-81.066667-277.333334-179.2 42.666667-12.8 81.066667-51.2 81.066667-93.866667v-170.666666c0-46.933333-34.133333-85.333333-76.8-98.133334C256 230.4 358.4 162.133333 477.866667 149.333333v170.666667c-89.6 17.066667-157.866667 98.133333-157.866667 192s68.266667 170.666667 157.866667 187.733333v170.666667zM384 512c0-68.266667 55.466667-128 128-128 68.266667 0 128 55.466667 128 128 0 68.266667-55.466667 128-128 128s-132.266667-55.466667-128-128z m375.466667 302.933333c-17.066667-8.533333-38.4-4.266667-55.466667 4.266667-46.933333 29.866667-98.133333 46.933333-157.866667 55.466667v-170.666667c89.6-17.066667 157.866667-93.866667 157.866667-187.733333s-68.266667-170.666667-157.866667-187.733334v-170.666666c119.466667 12.8 221.866667 81.066667 277.333334 179.2-42.666667 12.8-76.8 51.2-76.8 98.133333V597.333333c0 46.933333 38.4 85.333333 81.066666 93.866667-4.266667 4.266667-8.533333 8.533333-8.533333 12.8-8.533333 17.066667-12.8 38.4-4.266667 55.466667l29.866667 85.333333-85.333333-29.866667z m93.866666-187.733333h-17.066666c-17.066667 0-29.866667-12.8-29.866667-29.866667v-170.666666c0-17.066667 12.8-29.866667 29.866667-29.866667h12.8c12.8 34.133333 21.333333 72.533333 21.333333 115.2 0 38.4-4.266667 76.8-17.066667 115.2z" fill="#76767a" p-id="8792"></path><path d="M610.133333 507.733333c0 12.8-12.8 25.6-25.6 25.6s-25.6-12.8-25.6-25.6 12.8-25.6 25.6-25.6 25.6 8.533333 25.6 25.6z m-170.666666 25.6c12.8 0 25.6-12.8 25.6-25.6s-12.8-25.6-25.6-25.6-25.6 12.8-25.6 25.6 12.8 25.6 25.6 25.6z m72.533333 0c12.8 0 25.6-12.8 25.6-25.6s-12.8-25.6-25.6-25.6-25.6 12.8-25.6 25.6 8.533333 25.6 25.6 25.6z" fill="#76767a" p-id="8793"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/merchant_default_avatar.svg b/src/assets/svg/merchant_default_avatar.svg
new file mode 100644
index 0000000..846ea7e
--- /dev/null
+++ b/src/assets/svg/merchant_default_avatar.svg
@@ -0,0 +1,5 @@
+<svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.46094" y="0.5" width="55" height="55" rx="27.5" fill="#F2F4F5"/>
+<rect x="1.46094" y="0.5" width="55" height="55" rx="27.5" stroke="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6446 38.3255C21.3808 41.0618 25.092 42.599 28.9616 42.599C32.8301 42.5953 36.5391 41.0569 39.2746 38.3215C42.01 35.586 43.5484 31.877 43.5521 28.0085C43.5521 27.3617 43.2952 26.7414 42.8378 26.284C42.3805 25.8267 41.7602 25.5698 41.1134 25.5698C40.4666 25.5698 39.8463 25.8267 39.389 26.284C38.9316 26.7414 38.6747 27.3617 38.6747 28.0085C38.6747 29.9295 38.105 31.8075 37.0377 33.4048C35.9704 35.0021 34.4535 36.247 32.6786 36.9822C30.9038 37.7174 28.9508 37.9097 27.0667 37.5349C25.1825 37.1601 23.4518 36.2351 22.0934 34.8767C20.735 33.5183 19.8099 31.7876 19.4352 29.9034C19.0604 28.0193 19.2527 26.0663 19.9879 24.2915C20.7231 22.5166 21.968 20.9996 23.5653 19.9324C25.1626 18.8651 27.0405 18.2954 28.9616 18.2954C29.6084 18.2954 30.2287 18.0385 30.686 17.5811C31.1434 17.1238 31.4003 16.5035 31.4003 15.8567C31.4003 15.2099 31.1434 14.5896 30.686 14.1323C30.2287 13.6749 29.6084 13.418 28.9616 13.418C25.092 13.418 21.3808 14.9552 18.6446 17.6914C15.9083 20.4277 14.3711 24.1388 14.3711 28.0085C14.3711 31.8781 15.9083 35.5893 18.6446 38.3255ZM37.6327 22.8351C37.9693 23.0013 38.3397 23.0875 38.7151 23.0871C39.2358 23.0806 39.7406 22.9058 40.1539 22.5889C40.4087 22.3949 40.6229 22.1526 40.7841 21.8759C40.9453 21.5991 41.0504 21.2934 41.0934 20.976C41.1365 20.6586 41.1166 20.3359 41.0348 20.0262C40.9531 19.7166 40.8112 19.426 40.6173 19.1712C39.8166 18.1221 38.8793 17.1847 37.8301 16.3841C37.3139 16.011 36.6721 15.8546 36.0421 15.9485C35.4121 16.0424 34.8438 16.3791 34.4588 16.8865C34.0738 17.394 33.9026 18.0319 33.9818 18.6639C34.0611 19.296 34.3844 19.8719 34.8828 20.2686C35.5948 20.8001 36.2312 21.426 36.7745 22.129C37.0024 22.4273 37.2961 22.6689 37.6327 22.8351Z" fill="#1B1B22" fill-opacity="0.1"/>
+</svg>
diff --git a/src/assets/svg/mine-active.svg b/src/assets/svg/mine-active.svg
new file mode 100644
index 0000000..e38ba01
--- /dev/null
+++ b/src/assets/svg/mine-active.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5013 14.0651C26.5013 11.5895 25.7302 9.29392 24.4151 7.40553C24.8126 6.34356 24.9063 5.23883 24.9158 3.86401C24.9243 2.6448 23.5551 1.96738 22.4814 2.545C21.7602 2.933 20.9462 3.28044 19.926 3.56506C18.3874 2.81767 16.66 2.39846 14.8346 2.39846C8.39131 2.39846 3.16797 7.62181 3.16797 14.0651C3.16797 20.5085 8.39131 25.7318 14.8346 25.7318C21.278 25.7318 26.5013 20.5085 26.5013 14.0651ZM11.7419 17.4325C11.3775 17.068 10.7865 17.068 10.422 17.4325C10.0575 17.797 10.0575 18.388 10.422 18.7524C12.8589 21.1893 16.8098 21.1893 19.2467 18.7524C19.6111 18.388 19.6111 17.797 19.2467 17.4325C18.8822 17.068 18.2912 17.068 17.9267 17.4325C16.2188 19.1404 13.4498 19.1404 11.7419 17.4325Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/mine.svg b/src/assets/svg/mine.svg
new file mode 100644
index 0000000..0e73384
--- /dev/null
+++ b/src/assets/svg/mine.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721875458331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9041" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M866.133333 268.8c12.8-38.4 17.066667-76.8 17.066667-128 0-42.666667-51.2-68.266667-89.6-46.933333-25.6 17.066667-55.466667 29.866667-93.866667 38.4-59.733333-25.6-119.466667-42.666667-187.733333-42.666667-234.666667 0-426.666667 187.733333-426.666667 426.666667 0 234.666667 192 426.666667 426.666667 426.666666s426.666667-192 426.666667-426.666666c0-93.866667-29.866667-174.933333-72.533334-247.466667zM512 874.666667c-196.266667 0-358.4-162.133333-358.4-358.4 0-196.266667 162.133333-358.4 358.4-358.4 55.466667 0 110.933333 12.8 157.866667 34.133333 17.066667 8.533333 34.133333 8.533333 46.933333 4.266667 38.4-8.533333 68.266667-21.333333 93.866667-38.4 0 38.4-4.266667 64-12.8 89.6-8.533333 21.333333-4.266667 42.666667 8.533333 64 38.4 59.733333 64 128 64 204.8 0 196.266667-162.133333 358.4-358.4 358.4z" fill="#76767a" p-id="9042"></path><path d="M396.8 635.733333c-12.8-12.8-34.133333-12.8-46.933333 0s-12.8 34.133333 0 46.933334c89.6 89.6 234.666667 89.6 324.266666 0 12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0-64 64-166.4 64-230.4 0z" fill="#76767a" p-id="9043"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/more-login.svg b/src/assets/svg/more-login.svg
new file mode 100644
index 0000000..6d4a0b1
--- /dev/null
+++ b/src/assets/svg/more-login.svg
@@ -0,0 +1,6 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.25" width="47.5" height="47.5" rx="23.75" stroke="black" stroke-opacity="0.1" stroke-width="0.5"/>
+<rect x="23" y="22.5" width="3" height="3" rx="1.5" fill="#76767A"/>
+<rect x="29.5" y="22.5" width="3" height="3" rx="1.5" fill="#76767A"/>
+<rect x="16.5" y="22.5" width="3" height="3" rx="1.5" fill="#76767A"/>
+</svg>
diff --git a/src/assets/svg/msg_user_default.svg b/src/assets/svg/msg_user_default.svg
new file mode 100644
index 0000000..869a3e5
--- /dev/null
+++ b/src/assets/svg/msg_user_default.svg
@@ -0,0 +1,10 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="60" rx="30" fill="#5F97E3"/>
+<circle opacity="0.9" cx="30" cy="22" r="12" fill="#E8EDF9"/>
+<mask id="mask0_1447_33154" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="60" height="60">
+<rect width="60" height="60" rx="30" fill="#5F97E3"/>
+</mask>
+<g mask="url(#mask0_1447_33154)">
+<path d="M0 67.6602C0 51.0916 13.4315 37.6602 30 37.6602C46.5685 37.6602 60 51.0916 60 67.6602V68.6602H0V67.6602Z" fill="#E8EDF9"/>
+</g>
+</svg>
diff --git a/src/assets/svg/my-edit.svg b/src/assets/svg/my-edit.svg
new file mode 100644
index 0000000..9bbccb5
--- /dev/null
+++ b/src/assets/svg/my-edit.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8012 3.95965L11.9914 4.14981C12.3591 4.51753 12.3591 5.11373 11.9914 5.48146L11.3642 6.10858L9.84243 4.58677L10.4695 3.95965C10.8373 3.59192 11.4335 3.59192 11.8012 3.95965ZM9.08818 5.34102L4.4181 10.0111C4.29331 10.1359 4.20611 10.2932 4.16642 10.4652L3.7706 12.1804L5.48582 11.7846C5.65778 11.7449 5.81512 11.6577 5.93991 11.5329L10.61 6.86282L9.08818 5.34102ZM11.3642 7.61707L6.69416 12.2871C6.42801 12.5533 6.09242 12.7393 5.72567 12.8239L4.01045 13.2198C3.24238 13.397 2.55401 12.7086 2.73125 11.9405L3.12707 10.2253C3.21171 9.85858 3.39771 9.523 3.66386 9.25685L9.7153 3.2054C10.4996 2.42112 11.7712 2.42112 12.5554 3.2054L12.7456 3.39556C13.5299 4.17984 13.5299 5.45142 12.7456 6.2357L12.1185 6.86282L12.1186 6.86299L11.3644 7.61723L11.3642 7.61707Z" fill="#76767A"/>
+</svg>
diff --git a/src/assets/svg/my-location.svg b/src/assets/svg/my-location.svg
new file mode 100644
index 0000000..943353d
--- /dev/null
+++ b/src/assets/svg/my-location.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.98071 17.4235C2.98071 21.5451 4.61803 25.498 7.53247 28.4124C10.4469 31.3268 14.3997 32.9642 18.5214 32.9642C22.643 32.9642 26.5959 31.3268 29.5103 28.4124C32.4247 25.498 34.0621 21.5451 34.0621 17.4235C34.0621 15.3827 33.6601 13.3618 32.8791 11.4763C32.0981 9.59085 30.9534 7.87765 29.5103 6.43457C28.0672 4.99149 26.354 3.84677 24.4685 3.06578C22.5831 2.28478 20.5622 1.88281 18.5214 1.88281C16.4806 1.88281 14.4597 2.28478 12.5742 3.06578C10.6887 3.84677 8.97556 4.99149 7.53247 6.43457C6.08939 7.87765 4.94467 9.59085 4.16368 11.4763C3.38268 13.3618 2.98071 15.3827 2.98071 17.4235Z" fill="#E8E8E9"/>
+<path d="M25.0035 15.4744C25.0035 11.8428 22.0629 8.89844 18.4352 8.89844C14.8078 8.89844 11.8672 11.8428 11.8672 15.4744C11.8672 18.3445 15.9685 23.82 17.6893 25.991C18.0748 26.4774 18.7956 26.4774 19.1811 25.9911C20.902 23.82 25.0035 18.3445 25.0035 15.4744ZM15.8683 15.4742C15.8683 14.0528 17.0189 12.9008 18.4383 12.9008C19.8578 12.9008 21.0086 14.0528 21.0086 15.4742C21.0086 16.8955 19.8578 18.0475 18.4383 18.0475C17.0189 18.0475 15.8683 16.8955 15.8683 15.4742Z" fill="#1B1B22" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/svg/my-pause-icon.svg b/src/assets/svg/my-pause-icon.svg
new file mode 100644
index 0000000..bcd3e04
--- /dev/null
+++ b/src/assets/svg/my-pause-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="4" width="4" height="16" rx="2" fill="white" fill-opacity="0.8"/>
+<rect x="15" y="4" width="4" height="16" rx="2" fill="white" fill-opacity="0.8"/>
+</svg>
diff --git a/src/assets/svg/my-play-icon.svg b/src/assets/svg/my-play-icon.svg
new file mode 100644
index 0000000..2e06d39
--- /dev/null
+++ b/src/assets/svg/my-play-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.59338 20.7257C7.14148 21.5801 5.31014 20.5331 5.31014 18.8481V5.1506C5.31014 3.46566 7.14148 2.4186 8.59338 3.2728L20.2357 10.121C21.6683 10.9631 21.6683 13.034 20.2357 13.8763L8.59338 20.7257Z" fill="white" fill-opacity="0.8"/>
+</svg>
diff --git a/src/assets/svg/network-check.svg b/src/assets/svg/network-check.svg
new file mode 100644
index 0000000..ab836b5
--- /dev/null
+++ b/src/assets/svg/network-check.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4108 18.1257C10.1811 18.7668 10.5466 19.4677 11.2039 19.6463C11.8435 19.82 12.4993 19.4269 12.6479 18.7808L15.8822 4.69248C15.9196 4.52966 15.8212 4.36645 15.6599 4.32316C15.5039 4.28129 15.3415 4.36615 15.2869 4.51828L10.4108 18.1257Z" fill="#1B1B22"/>
+<path d="M2.23591 9.19527C5.35119 6.08009 9.58427 4.76452 13.6437 5.24854L13.0902 6.81162C9.61625 6.50158 6.03506 7.67612 3.37585 10.3352C3.06098 10.65 2.55078 10.65 2.23591 10.3352C1.92104 10.0204 1.92104 9.51006 2.23591 9.19527Z" fill="#1B1B22"/>
+<path d="M5.29215 12.8228C7.13072 10.9842 9.53605 10.0581 11.9458 10.0445L11.3658 11.6819C9.56705 11.8263 7.80819 12.5866 6.43209 13.9627C6.11722 14.2775 5.60653 14.2775 5.29215 13.9627C4.97728 13.648 4.97728 13.1376 5.29215 12.8228Z" fill="#1B1B22"/>
+<path d="M15.6933 10.7903L15.3361 12.3959C16.144 12.7735 16.9007 13.2958 17.5678 13.9627C17.8827 14.2775 18.3929 14.2775 18.7077 13.9627C19.0226 13.648 19.0226 13.1376 18.7077 12.8228C17.8153 11.9302 16.789 11.2527 15.6933 10.7903Z" fill="#1B1B22"/>
+<path d="M16.7609 5.99414L16.4072 7.58395C17.9437 8.1783 19.3837 9.09539 20.624 10.3352C20.9384 10.65 21.4491 10.65 21.764 10.3352C22.0784 10.0204 22.0784 9.51006 21.764 9.19527C20.2988 7.73017 18.5862 6.66313 16.7609 5.99414Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/next.svg b/src/assets/svg/next.svg
new file mode 100644
index 0000000..52e6c1b
--- /dev/null
+++ b/src/assets/svg/next.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.92871 19L15.8684 13.0603C16.4932 12.4355 16.4932 11.4224 15.8684 10.7976L9.92871 4.85786" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/pack-up.svg b/src/assets/svg/pack-up.svg
new file mode 100644
index 0000000..585d2f7
--- /dev/null
+++ b/src/assets/svg/pack-up.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.40039 10.3438L10.643 14.5864C11.4241 15.3674 12.6904 15.3674 13.4715 14.5864L17.7141 10.3438" stroke="#76767A" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/pause-icon.svg b/src/assets/svg/pause-icon.svg
new file mode 100644
index 0000000..79c82ce
--- /dev/null
+++ b/src/assets/svg/pause-icon.svg
@@ -0,0 +1,17 @@
+<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_10638_145352)">
+<path d="M21.4835 52.8142C17.8537 54.9503 13.2754 52.3326 13.2754 48.1203V13.8765C13.2754 9.66415 17.8537 7.04649 21.4835 9.182L50.5894 26.3024C54.1707 28.4077 54.1707 33.5849 50.5894 35.6908L21.4835 52.8142Z" fill="white" fill-opacity="0.3"/>
+</g>
+<defs>
+<filter id="filter0_d_10638_145352" x="-8" y="-7" width="76" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10638_145352"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10638_145352" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/svg/phone-call-black.svg b/src/assets/svg/phone-call-black.svg
new file mode 100644
index 0000000..485e018
--- /dev/null
+++ b/src/assets/svg/phone-call-black.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.88596 5.23005C4.62469 6.49713 4.62378 8.32276 5.12991 9.93277C5.72289 11.8191 7.0527 13.7948 8.61728 15.3651C10.7831 17.5383 13.649 19.1962 15.9848 19.1962C17.255 19.1962 19.5289 18.3264 19.1736 16.6947C18.8931 15.4026 16.6301 13.1934 15.328 14.485C14.8267 14.9823 15.0089 15.691 14.5636 16.1825C13.2373 17.649 10.5232 15.2643 9.61723 14.356C8.71821 13.4537 6.30321 10.7408 7.7582 9.41549C8.22242 8.99263 8.93133 9.02616 9.38225 8.57782C10.2076 7.70484 9.48915 6.4194 8.77981 5.73129C8.05549 5.02864 6.74449 4.36629 5.88596 5.23005ZM10.5331 9.68949C10.1173 10.1245 9.57077 10.4675 8.98531 10.6144C9.24462 11.6173 10.0423 12.5158 10.7504 13.2264C11.4492 13.9269 12.3212 14.6841 13.3018 14.954C13.3987 14.3272 13.7578 13.7889 14.2012 13.3491C16.4529 11.1155 20.1825 13.8006 20.7371 16.3547C21.3248 19.0557 18.3163 20.7962 15.9848 20.7962C13.0227 20.7962 9.76968 18.788 7.48391 16.4945C5.7919 14.7963 4.29349 12.6073 3.60355 10.4126C2.91168 8.21171 3.00186 5.85789 4.75151 4.10177C6.25609 2.58847 8.52328 3.2533 9.89387 4.58287C11.256 5.90428 12.004 8.15016 10.5331 9.68949Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/phone-call.svg b/src/assets/svg/phone-call.svg
new file mode 100644
index 0000000..a557926
--- /dev/null
+++ b/src/assets/svg/phone-call.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9845 20C13.3355 20 10.2761 18.167 8.05029 15.9336C4.79371 12.6651 2.394 7.6045 5.3183 4.66993C7.62155 2.35264 12.1851 6.80632 9.95441 9.14063C9.09504 10 8.54888 9.78518 8.29666 10.0108C7.81846 10.4463 8.55556 12.1611 10.1834 13.7949C11.8127 15.4284 13.5334 16.1332 13.9703 15.6494C14.1973 15.3994 13.8203 14.8574 14.7643 13.9209C16.8616 11.8404 19.6919 15.3165 19.9551 16.5283C20.4313 18.7157 17.7538 20 15.9845 20Z" fill="white"/>
+</svg>
diff --git a/src/assets/svg/pre.svg b/src/assets/svg/pre.svg
new file mode 100644
index 0000000..39776e7
--- /dev/null
+++ b/src/assets/svg/pre.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0713 5L8.13159 10.9397C7.50675 11.5645 7.50675 12.5776 8.13159 13.2024L14.0713 19.1421" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/qrcode-login.svg b/src/assets/svg/qrcode-login.svg
new file mode 100644
index 0000000..e775879
--- /dev/null
+++ b/src/assets/svg/qrcode-login.svg
@@ -0,0 +1,20 @@
+<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10411_106084)">
+<mask id="mask0_10411_106084" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="41" height="41">
+<path d="M2.01302 5.80831C1.30038 5.09567 0.900024 4.12912 0.900024 3.1213V0.695312H40.9V40.6953H38.474C37.4662 40.6953 36.4997 40.295 35.787 39.5823L2.01302 5.80831Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10411_106084)">
+<path d="M2.01302 5.80831C1.30038 5.09567 0.900024 4.12912 0.900024 3.1213V0.695312H40.9V40.6953H38.474C37.4662 40.6953 36.4997 40.295 35.787 39.5823L2.01302 5.80831Z" fill="url(#paint0_linear_10411_106084)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.4121 1.17546C40.0996 0.863026 39.6759 0.6875 39.234 0.6875H24.234C24.0151 0.687238 23.7982 0.730137 23.5959 0.813743C23.3935 0.89735 23.2096 1.02003 23.0547 1.17475C22.8998 1.32948 22.7769 1.51323 22.693 1.71549C22.6092 1.91775 22.566 2.13455 22.566 2.3535V17.3535C22.566 17.7959 22.7418 18.2201 23.0546 18.533C23.3674 18.8458 23.7916 19.0215 24.234 19.0215H39.234C39.6761 19.021 40.0998 18.845 40.4122 18.5322C40.7246 18.2195 40.9 17.7955 40.9 17.3535V2.3535C40.9 1.91165 40.7245 1.4879 40.4121 1.17546ZM36.7327 4.0215C37.1929 4.0215 37.566 4.3946 37.566 4.85484V14.8542C37.566 15.3144 37.1929 15.6875 36.7327 15.6875H26.7334C26.2731 15.6875 25.9 15.3144 25.9 14.8542V4.85483C25.9 4.3946 26.2731 4.0215 26.7334 4.0215H36.7327ZM18.7455 22.842C18.4327 22.5292 18.0084 22.3535 17.566 22.3535H2.56603C2.34707 22.3535 2.13027 22.3967 1.92801 22.4805C1.72575 22.5644 1.54201 22.6873 1.38728 22.8422C1.23255 22.9971 1.10987 23.181 1.02627 23.3833C0.942661 23.5857 0.899763 23.8026 0.900024 24.0215V39.0215C0.900024 39.2403 0.943118 39.4569 1.02684 39.659C1.11057 39.8612 1.23328 40.0448 1.38799 40.1995C1.54269 40.3542 1.72635 40.477 1.92847 40.5607C2.1306 40.6444 2.34724 40.6875 2.56603 40.6875H17.566C18.0081 40.6875 18.432 40.512 18.7448 40.1997C19.0575 39.8873 19.2335 39.4635 19.234 39.0215V24.0215C19.234 23.5791 19.0583 23.1549 18.7455 22.842ZM4.23403 25.6875H15.9V37.3535H4.23403V25.6875ZM18.7448 1.17534C18.432 0.862962 18.0081 0.6875 17.566 0.6875H2.56603C2.12417 0.6875 1.70042 0.863026 1.38799 1.17546C1.23328 1.33016 1.11057 1.51382 1.02684 1.71595C0.943118 1.91808 0.900024 2.13472 0.900024 2.3535V17.3535C0.900024 17.7955 1.07549 18.2195 1.38786 18.5322C1.70024 18.845 2.12399 19.021 2.56603 19.0215H17.566C18.0082 19.021 18.4322 18.8451 18.7449 18.5324C19.0576 18.2197 19.2335 17.7957 19.234 17.3535V2.3535C19.2335 1.91147 19.0575 1.48772 18.7448 1.17534ZM15.0667 4.0215C15.5269 4.0215 15.9 4.3946 15.9 4.85484V14.8542C15.9 15.3144 15.5269 15.6875 15.0667 15.6875H5.06736C4.60712 15.6875 4.23403 15.3144 4.23403 14.8542V4.85483C4.23403 4.3946 4.60712 4.0215 5.06736 4.0215H15.0667ZM32.566 35.6895H27.566V27.3555H31.7327C32.1929 27.3555 32.566 27.7286 32.566 28.1888V35.6895ZM32.566 35.6895H35.0667C35.5269 35.6895 35.9 35.3164 35.9 34.8561V33.1888C35.9 32.7286 36.2731 32.3555 36.7334 32.3555H40.0667C40.5269 32.3555 40.9 32.7286 40.9 33.1888V39.8561C40.9 40.3164 40.5269 40.6895 40.0667 40.6895H33.3994C32.9391 40.6895 32.566 40.3164 32.566 39.8561V35.6895ZM27.566 27.3555H23.3994C22.9391 27.3555 22.566 26.9824 22.566 26.5221V23.1888C22.566 22.7286 22.9391 22.3555 23.3994 22.3555H26.7327C27.1929 22.3555 27.566 22.7286 27.566 23.1888V27.3555ZM27.566 35.6895H23.3994C22.9391 35.6895 22.566 36.0626 22.566 36.5228V39.8561C22.566 40.3164 22.9391 40.6895 23.3994 40.6895H26.7327C27.1929 40.6895 27.566 40.3164 27.566 39.8561V35.6895ZM36.7334 27.3555C36.2731 27.3555 35.9 26.9824 35.9 26.5221V23.1888C35.9 22.7286 36.2731 22.3555 36.7334 22.3555H40.0667C40.5269 22.3555 40.9 22.7286 40.9 23.1888V26.5221C40.9 26.9824 40.5269 27.3555 40.0667 27.3555H36.7334ZM8.39937 34.0235C7.93914 34.0235 7.56604 33.6504 7.56604 33.1901V29.8568C7.56604 29.3966 7.93914 29.0235 8.39937 29.0235H11.7327C12.1929 29.0235 12.566 29.3966 12.566 29.8568V33.1901C12.566 33.6504 12.1929 34.0235 11.7327 34.0235H8.39937ZM12.5664 13.1901H7.56637C7.10613 13.1901 6.73303 12.817 6.73303 12.3568V7.35677C6.73303 6.89653 7.10613 6.52344 7.56637 6.52344H12.5664C13.0266 6.52344 13.3997 6.89653 13.3997 7.35677V12.3568C13.3997 12.817 13.0266 13.1901 12.5664 13.1901ZM29.2334 13.1901H34.2334C34.6936 13.1901 35.0667 12.817 35.0667 12.3568V7.35677C35.0667 6.89653 34.6936 6.52344 34.2334 6.52344H29.2334C28.7731 6.52344 28.4 6.89653 28.4 7.35677V12.3568C28.4 12.817 28.7731 13.1901 29.2334 13.1901Z" fill="#538FE1"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_10411_106084" x1="23.5658" y1="17.5808" x2="18.3943" y2="22.937" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9D9D9" stop-opacity="0"/>
+<stop offset="1" stop-opacity="0.16"/>
+</linearGradient>
+<clipPath id="clip0_10411_106084">
+<rect width="40" height="40" fill="white" transform="translate(0.900024 0.695312)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svg/qrcodereflesh.svg b/src/assets/svg/qrcodereflesh.svg
new file mode 100644
index 0000000..d435cca
--- /dev/null
+++ b/src/assets/svg/qrcodereflesh.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.307 4.57978L14.499 3.77278C14.5249 3.75506 14.5555 3.74536 14.5869 3.7449C14.6183 3.74444 14.6492 3.75323 14.6756 3.77019C14.7021 3.78714 14.723 3.81151 14.7356 3.84024C14.7483 3.86898 14.7523 3.90082 14.747 3.93178L14.248 6.91178C14.2444 6.93307 14.2366 6.95341 14.2249 6.97159C14.2133 6.98976 14.1981 7.00539 14.1802 7.01754C14.1624 7.02968 14.1423 7.03809 14.1211 7.04226C14.0999 7.04642 14.0781 7.04626 14.057 7.04178L11.094 6.40378C11.0633 6.3972 11.0353 6.38174 11.0133 6.35934C10.9914 6.33694 10.9765 6.30858 10.9705 6.27779C10.9645 6.24699 10.9678 6.21512 10.9798 6.18614C10.9918 6.15716 11.012 6.13235 11.038 6.11478L12.476 5.14178C11.7125 4.21779 10.6298 3.61417 9.44241 3.45042C8.255 3.28667 7.04939 3.57472 6.06426 4.25755C5.07912 4.94038 4.38627 5.96821 4.12288 7.13756C3.85949 8.30691 4.04476 9.53253 4.642 10.5718C5.075 11.3217 5.7035 11.9399 6.46041 12.3606C7.21732 12.7812 8.07424 12.9884 8.93971 12.96C9.80518 12.9317 10.6467 12.6689 11.3745 12.1997C12.1023 11.7304 12.689 11.0724 13.072 10.2958C13.131 10.1775 13.2345 10.0875 13.3597 10.0453C13.485 10.0031 13.6218 10.0122 13.7404 10.0706C13.8589 10.129 13.9495 10.232 13.9923 10.357C14.0352 10.482 14.0268 10.6189 13.969 10.7378C13.4638 11.7639 12.665 12.6167 11.674 13.1878C10.7153 13.7413 9.61788 14.0079 8.5121 13.9561C7.40631 13.9042 6.33866 13.536 5.43598 12.8952C4.53331 12.2544 3.83356 11.3679 3.41988 10.3411C3.0062 9.31435 2.89597 8.19037 3.1023 7.10277C3.30862 6.01517 3.82283 5.00965 4.58382 4.2057C5.34481 3.40174 6.32059 2.83314 7.39524 2.56744C8.46988 2.30175 9.59821 2.35014 10.6462 2.70686C11.6941 3.06358 12.6176 3.71363 13.307 4.57978Z" fill="#538FE1"/>
+</svg>
diff --git a/src/assets/svg/radio-check.svg b/src/assets/svg/radio-check.svg
new file mode 100644
index 0000000..48d6624
--- /dev/null
+++ b/src/assets/svg/radio-check.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8" fill="#0095F6"/>
+<path d="M8.46484 12.5156L10.1148 14.1655C10.5053 14.5561 11.1384 14.5561 11.529 14.1655L15.5359 10.1586" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/redPackage.svg b/src/assets/svg/redPackage.svg
new file mode 100644
index 0000000..6a44eb0
--- /dev/null
+++ b/src/assets/svg/redPackage.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.275208" width="13.4194" height="16" rx="2.06452" fill="#D73C1D"/>
+<path d="M0.275208 2.06451C0.275208 0.924313 1.19952 0 2.33972 0H11.6603C12.8005 0 13.7248 0.924315 13.7248 2.06452V5.82293C9.42345 7.62875 4.57656 7.62875 0.275208 5.82293V2.06451Z" fill="#E85D4B"/>
+<circle cx="7.24299" cy="6.96711" r="2.32258" fill="#FFE99D"/>
+</svg>
diff --git a/src/assets/svg/retransmission.svg b/src/assets/svg/retransmission.svg
new file mode 100644
index 0000000..5110ec3
--- /dev/null
+++ b/src/assets/svg/retransmission.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9995 3.5C14.2839 3.5 16.4256 4.40637 18.0089 5.98966L18.7967 6.82209L18.798 5.20057C18.798 4.71217 19.1888 4.38277 19.6483 4.35028C20.1174 4.35028 20.4985 4.73017 20.4985 5.20057C20.4985 9.29035 20.4948 9.08635 20.4985 9.02493C20.4977 9.29302 20.3273 9.56048 20.213 9.66104C20.0569 9.79837 19.8561 9.87406 19.6483 9.87393H15.8239C15.3561 9.89206 14.9407 9.49765 14.9407 9.02429C14.9407 8.55615 15.3509 8.15632 15.8239 8.17464H17.7322C17.4281 7.84307 17.1264 7.5086 16.8068 7.19178C15.856 6.241 14.6446 5.59351 13.3258 5.3312C12.0071 5.06888 10.6401 5.20351 9.39788 5.71807C8.15563 6.23262 7.09386 7.104 6.34684 8.22199C5.59981 9.33999 5.20109 10.6544 5.20109 11.999C5.20109 13.3436 5.59981 14.658 6.34684 15.776C7.09386 16.894 8.15563 17.7654 9.39788 18.2799C10.6401 18.7945 12.0071 18.9291 13.3258 18.6668C14.6446 18.4045 15.856 17.757 16.8068 16.8062C17.1282 16.5001 17.6806 16.5069 17.9944 16.8207C18.3082 17.1345 18.315 17.6869 18.0089 18.0083C17.0207 18.997 15.8039 19.7267 14.4664 20.1328C13.1288 20.5389 11.7117 20.6087 10.3407 20.3362C8.96965 20.0637 7.687 19.4572 6.60637 18.5705C5.52574 17.6838 4.68051 16.5443 4.14555 15.2529C3.61059 13.9614 3.40242 12.558 3.5395 11.1669C3.67657 9.77574 4.15466 8.43991 4.93139 7.27772C5.70812 6.11554 6.75951 5.16287 7.99242 4.50414C9.22533 3.84541 10.6017 3.50095 11.9995 3.50127V3.5Z" fill="#1B1B22" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/svg/scan-success.svg b/src/assets/svg/scan-success.svg
new file mode 100644
index 0000000..2f02f8c
--- /dev/null
+++ b/src/assets/svg/scan-success.svg
@@ -0,0 +1,4 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.9" cy="26.6953" r="22" fill="#538FE1" fill-opacity="0.1"/>
+<path d="M17.1774 28.1016L22.8545 33.7787C23.2989 34.2231 24.0194 34.2231 24.4638 33.7787L36.6228 21.6198" stroke="#538FE1" stroke-width="3" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/svg/shanchu2.svg b/src/assets/svg/shanchu2.svg
new file mode 100644
index 0000000..f3d97cc
--- /dev/null
+++ b/src/assets/svg/shanchu2.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1368">
+<circle id="Ellipse 49" cx="8" cy="8" r="8" fill="#E8E8E9"/>
+<path id="Vector 464" d="M5 8H11" stroke="#D1D1D3" stroke-width="2" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/src/assets/svg/share.svg b/src/assets/svg/share.svg
new file mode 100644
index 0000000..b95ad40
--- /dev/null
+++ b/src/assets/svg/share.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4284 24.4659L26.051 14.782C26.2408 14.5945 26.3542 14.3013 26.3523 14.0027C26.3523 13.7008 26.2368 13.4242 26.0613 13.2335L15.4036 3.52048C15.1082 3.23257 14.3821 3.19839 13.9731 3.56171C13.7385 3.77006 13.6358 4.16217 13.6358 4.52209V9.33944C7.18047 9.65268 2.70572 14.309 1.6546 21.7543C1.62198 21.9853 1.66467 22.5992 2.22203 22.9262C2.6992 23.2062 3.4202 22.9249 3.55666 22.7921C6.46944 19.4368 8.60879 18.8386 11.5626 18.732C12.1936 18.7092 12.8618 18.7089 13.5825 18.7089C13.5938 18.7089 13.6052 18.7089 13.6165 18.7089H13.6358V23.4833C13.6358 23.9688 13.8101 24.3908 14.1449 24.5742C14.5011 24.7695 15.1093 24.7673 15.4284 24.4659ZM4.34335 19.1652C5.43646 18.2906 6.53649 17.688 7.72092 17.301C10.0396 16.5436 12.5576 16.6573 14.9904 16.6839C15.3872 16.6882 15.7089 17.01 15.7089 17.4068V21.4435L23.8705 14.0031L15.7089 6.565V10.5774C15.7089 10.9607 15.408 11.2765 15.0252 11.2951L13.7389 11.3575C11.0305 11.4889 8.80799 12.5146 7.12952 14.2559C5.9427 15.4871 4.98002 17.1283 4.34335 19.1652Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/shouji.svg b/src/assets/svg/shouji.svg
new file mode 100644
index 0000000..249910c
--- /dev/null
+++ b/src/assets/svg/shouji.svg
@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="shouji 1">
+<path id="Vector" d="M18.1999 0H7.80004C5.79294 0 4.1601 1.63285 4.1601 3.63995V22.3597C4.1601 24.3668 5.79294 25.9996 7.80004 25.9996H18.1999C20.207 25.9996 21.8399 24.3668 21.8399 22.3597V3.63995C21.8399 1.63285 20.207 0 18.1999 0ZM19.7599 22.3597C19.7599 23.22 19.0601 23.9197 18.1999 23.9197H7.80004C6.93984 23.9197 6.2401 23.2199 6.2401 22.3597V3.63995C6.2401 2.77974 6.93986 2.07997 7.80004 2.07997H18.1999C19.0602 2.07997 19.7599 2.77974 19.7599 3.63995V22.3597Z" fill="#49494E"/>
+<path id="Vector_2" d="M11 20H15V22H11V20Z" fill="#49494E"/>
+</g>
+</svg>
diff --git a/src/assets/svg/success.svg b/src/assets/svg/success.svg
new file mode 100644
index 0000000..95442d7
--- /dev/null
+++ b/src/assets/svg/success.svg
@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 32C8 45.2548 18.7452 56 32 56C45.2548 56 56 45.2548 56 32C56 18.7452 45.2548 8 32 8C18.7452 8 8 18.7452 8 32ZM29.8835 36.4274C29.493 36.8179 28.8598 36.8179 28.4693 36.4274L23.8075 31.7656C23.1065 31.0646 21.97 31.0646 21.269 31.7656C20.5681 32.4664 20.5679 33.6026 21.2685 34.3037L27.0609 40.1003C28.2321 41.2724 30.1319 41.2729 31.3038 40.1015L43.8894 27.5211C44.5938 26.817 44.5939 25.6753 43.8897 24.971C43.1856 24.2669 42.044 24.2669 41.3399 24.971L29.8835 36.4274Z" fill="#07C160"/>
+</svg>
diff --git a/src/assets/svg/transfer-page-logo.svg b/src/assets/svg/transfer-page-logo.svg
new file mode 100644
index 0000000..58b4987
--- /dev/null
+++ b/src/assets/svg/transfer-page-logo.svg
@@ -0,0 +1,4 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4553 16.9794C8.02571 7.46768 17.445 0.737131 28.4999 0.00783194V17.1326C22.2698 18.0968 17.5 23.4941 17.5 30.0079C17.5 36.5216 22.2698 41.9189 28.4999 42.8831V60.0077C17.445 59.2785 8.02577 52.548 3.45535 43.0363H5.49998C9.36598 43.0363 12.5 39.8955 12.5 36.021V23.9947C12.5 20.1202 9.36598 16.9794 5.49998 16.9794H3.4553ZM32.4998 42.8831V60.0078C37.9294 59.6497 42.9644 57.8439 47.2241 54.972L57.0704 58.4541C57.6748 58.6678 58.2569 58.0845 58.0436 57.4788L54.6519 47.8459C55.7585 46.3435 56.7289 44.7342 57.5447 43.0363H55.5C51.634 43.0363 48.5 39.8955 48.5 36.021V23.9947C48.5 20.1202 51.634 16.9794 55.5 16.9794H57.5448C52.9742 7.46761 43.5548 0.736987 32.4998 0.0078125V17.1326C38.7301 18.0966 43.5 23.494 43.5 30.0079C43.5 36.5217 38.7301 41.9191 32.4998 42.8831ZM60.5 29.9498V30.0659C60.4941 33.1876 60.0135 36.1978 59.1266 39.0276H55.5C53.8432 39.0276 52.5 37.6815 52.5 36.021V23.9947C52.5 22.3342 53.8432 20.9881 55.5 20.9881H59.1267C60.0135 23.8179 60.4941 26.828 60.5 29.9498ZM1.87343 39.0276C0.981069 36.1802 0.5 33.1503 0.5 30.0078C0.5 26.8654 0.981056 23.8355 1.87339 20.9881H5.49998C7.15686 20.9881 8.50002 22.3342 8.50002 23.9947V36.021C8.50002 37.6815 7.15686 39.0276 5.49998 39.0276H1.87343Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4777 39.1877C35.502 39.1877 39.5751 35.1057 39.5751 30.0704C39.5751 25.0351 35.502 20.9531 30.4777 20.9531C25.4534 20.9531 21.3804 25.0351 21.3804 30.0704C21.3804 35.1057 25.4534 39.1877 30.4777 39.1877ZM25.5033 31.5185C26.3318 31.5185 27.0034 30.8454 27.0034 30.0152C27.0034 29.1849 26.3318 28.5119 25.5033 28.5119C24.6749 28.5119 24.0033 29.1849 24.0033 30.0152C24.0033 30.8454 24.6749 31.5185 25.5033 31.5185ZM30.5034 31.5185C31.3318 31.5185 32.0034 30.8454 32.0034 30.0152C32.0034 29.1849 31.3318 28.5119 30.5034 28.5119C29.675 28.5119 29.0034 29.1849 29.0034 30.0152C29.0034 30.8454 29.675 31.5185 30.5034 31.5185ZM37.0034 30.0152C37.0034 30.8454 36.3318 31.5185 35.5035 31.5185C34.675 31.5185 34.0034 30.8454 34.0034 30.0152C34.0034 29.1849 34.675 28.5119 35.5035 28.5119C36.3318 28.5119 37.0034 29.1849 37.0034 30.0152Z" fill="#6898E6"/>
+</svg>
diff --git a/src/assets/svg/up-icon-straight.svg b/src/assets/svg/up-icon-straight.svg
new file mode 100644
index 0000000..8ab1737
--- /dev/null
+++ b/src/assets/svg/up-icon-straight.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="8" viewBox="0 0 33 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5638 7.99991L0.750001 8.00004L2.65163 7.98424C5.79959 7.95809 8.81121 6.69596 11.0372 4.46994L14.4425 1.06464C15.6141 -0.106929 17.5136 -0.106926 18.6852 1.06465L22.0911 4.47062C24.3167 6.69623 27.3277 7.95833 30.4751 7.98492L32.2501 7.99991L16.5638 7.99991Z" fill="#EDEDED"/>
+</svg>
diff --git a/src/assets/svg/vector-icon.svg b/src/assets/svg/vector-icon.svg
new file mode 100644
index 0000000..09dac33
--- /dev/null
+++ b/src/assets/svg/vector-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.777 11.6374L17.4974 12.2174C18.334 14.0629 18.4524 15.5457 17.8142 16.1839C17.2142 16.784 15.8358 16.7114 14.127 15.9894C13.385 15.676 12.6121 15.2583 11.8301 14.7528C12.8153 13.9825 13.7863 13.1036 14.6888 12.1574C15.5462 12.504 16.5556 12.3121 17.2287 11.6749C18.0777 10.8712 18.2185 9.52952 17.5507 8.57163C19.755 5.1789 20.247 2.25436 18.808 0.815411C17.7588 -0.234017 15.9025 -0.271574 13.5808 0.709017C12.626 1.1124 11.6281 1.67106 10.6269 2.35523C9.62565 1.67116 8.62792 1.1124 7.67299 0.70911C5.35132 -0.27148 3.49485 -0.23383 2.4457 0.815505C2.02565 1.23565 1.57066 1.99971 1.63697 3.30304C0.883127 3.73995 0.374756 4.55495 0.374756 5.48703C0.374756 7.03021 1.82202 8.23589 3.33011 7.97213C3.53837 8.31993 3.75703 8.66141 3.9858 8.99608C3.30164 9.99737 2.74288 10.9952 2.3395 11.9501C1.35891 14.2718 1.39665 16.1282 2.4458 17.1773C3.62789 18.3592 5.7707 18.2648 8.47928 16.9114C9.17947 16.5616 9.90091 16.1313 10.6247 15.6364C11.6264 16.3209 12.6246 16.88 13.5801 17.2836C15.9019 18.2643 17.7582 18.2266 18.8073 17.1773C19.9082 16.0767 19.8974 14.1093 18.777 11.6374ZM15.583 10.9264C15.0367 10.9264 14.5923 10.482 14.5923 9.93574C14.5923 9.38944 15.0367 8.94504 15.583 8.94504C16.1292 8.94504 16.5736 9.38944 16.5736 9.93574C16.5737 10.482 16.1292 10.9264 15.583 10.9264ZM14.1273 2.00326C15.8362 1.28136 17.2145 1.20877 17.8145 1.80883C18.2559 2.25024 18.3399 3.11451 18.051 4.24261C17.7855 5.27939 17.2343 6.4605 16.4415 7.69987C15.551 7.35614 14.5106 7.59077 13.85 8.28326C13.0839 9.08629 12.9743 10.3498 13.594 11.2692C12.6545 12.2458 11.6416 13.1426 10.6242 13.9081C8.77387 12.5142 7.10643 10.8467 5.71359 8.99552C7.1076 7.14459 8.77563 5.47674 10.6266 4.08273C11.5141 4.75117 12.399 5.52121 13.2502 6.37237L14.2436 5.37904C13.4625 4.59794 12.6515 3.87959 11.8324 3.23842C12.6139 2.73351 13.386 2.31636 14.1273 2.00326ZM1.77961 5.48703C1.77961 4.87048 2.28115 4.36895 2.89769 4.36895C3.51424 4.36895 4.01577 4.87048 4.01577 5.48703C4.01577 6.10358 3.51424 6.60511 2.89769 6.60511C2.28115 6.60511 1.77961 6.10358 1.77961 5.48703ZM4.5957 7.35137C5.10219 6.88964 5.42063 6.22486 5.42063 5.48712C5.42063 4.14202 4.36258 3.03967 3.03509 2.96803C3.04595 2.54189 3.14448 2.10357 3.43903 1.80893C4.039 1.20886 5.41754 1.28154 7.12631 2.00336C7.86761 2.31645 8.63972 2.73351 9.42101 3.23842C7.73011 4.56217 6.19389 6.09812 4.87002 7.78894C4.77648 7.6444 4.68503 7.49853 4.5957 7.35137ZM7.85141 15.6547C5.81914 16.6704 4.12853 16.8732 3.43922 16.1838C2.83925 15.5838 2.91193 14.2055 3.63365 12.4966C3.94675 11.7552 4.36399 10.983 4.86899 10.2015C6.192 11.8925 7.72754 13.4284 9.41792 14.7521C8.88819 15.0948 8.36315 15.399 7.85141 15.6547Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/svg/warn.svg b/src/assets/svg/warn.svg
new file mode 100644
index 0000000..2fe8172
--- /dev/null
+++ b/src/assets/svg/warn.svg
@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56 32C56 45.2548 45.2548 56 32 56C18.7452 56 8 45.2548 8 32C8 18.7452 18.7452 8 32 8C45.2548 8 56 18.7452 56 32ZM31.9996 20C30.693 20 29.6516 21.0922 29.7138 22.3973L30.3235 35.2018C30.3661 36.0965 31.1039 36.8 31.9996 36.8C32.8953 36.8 33.6331 36.0965 33.6757 35.2018L34.2855 22.3973C34.3476 21.0922 33.3062 20 31.9996 20ZM31.9996 43.8C33.3251 43.8 34.3996 42.7255 34.3996 41.4C34.3996 40.0745 33.3251 39 31.9996 39C30.6741 39 29.5996 40.0745 29.5996 41.4C29.5996 42.7255 30.6741 43.8 31.9996 43.8Z" fill="#FC5A50"/>
+</svg>
diff --git a/src/assets/svg/xinhao-timeout.svg b/src/assets/svg/xinhao-timeout.svg
new file mode 100644
index 0000000..e87a385
--- /dev/null
+++ b/src/assets/svg/xinhao-timeout.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725271370609" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13755" id="mx_n_1725271370611" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M147.2 582.4c51.2 0 70.4 25.6 70.4 70.4v147.2c0 51.2-25.6 70.4-70.4 70.4-51.2 0-70.4-25.6-70.4-70.4v-147.2c-6.4-44.8 19.2-70.4 70.4-70.4zM512 364.8c51.2 0 70.4 25.6 70.4 70.4v364.8c0 51.2-25.6 70.4-70.4 70.4-51.2 0-70.4-25.6-70.4-70.4V441.6c0-51.2 19.2-76.8 70.4-76.8z m364.8-217.6c51.2 0 70.4 25.6 70.4 70.4v582.4c0 51.2-25.6 70.4-70.4 70.4-51.2 0-70.4-25.6-70.4-70.4V217.6c0-44.8 25.6-70.4 70.4-70.4z m-512 70.4c19.2-19.2 19.2-51.2 0-70.4s-51.2-19.2-70.4 0L224 217.6 153.6 147.2c-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4l70.4 70.4-76.8 70.4c-19.2 19.2-19.2 51.2 0 70.4 25.6 19.2 57.6 19.2 76.8 0l70.4-70.4 70.4 70.4c19.2 19.2 51.2 19.2 70.4 0 19.2-19.2 19.2-51.2 0-70.4L294.4 288l70.4-70.4z" fill="#fc5a50" p-id="13756"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svg/xinhao-yanchi1.svg b/src/assets/svg/xinhao-yanchi1.svg
new file mode 100644
index 0000000..1e2738b
--- /dev/null
+++ b/src/assets/svg/xinhao-yanchi1.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28556 9.64453C3.04746 9.64453 3.42841 10.0255 3.42841 10.7874V13.0731C3.42841 13.835 3.04746 14.216 2.28556 14.216C1.52365 14.216 1.1427 13.835 1.1427 13.0731V10.7874C1.1427 10.0255 1.52365 9.64453 2.28556 9.64453Z" fill="#57C732"/>
+<path d="M7.99991 6.21094C8.76182 6.21094 9.14277 6.59189 9.14277 7.35379V13.0681C9.14277 13.83 8.76182 14.2109 7.99991 14.2109C7.23801 14.2109 6.85706 13.83 6.85706 13.0681V7.35379C6.85706 6.59189 7.23801 6.21094 7.99991 6.21094Z" fill="#57C732"/>
+<path d="M13.7141 2.78906C14.4761 2.78906 14.857 3.17001 14.857 3.93192V13.0748C14.857 13.8367 14.4761 14.2176 13.7141 14.2176C12.9522 14.2176 12.5713 13.8367 12.5713 13.0748V3.93192C12.5713 3.17001 12.9522 2.78906 13.7141 2.78906Z" fill="#57C732"/>
+</svg>
diff --git a/src/assets/svg/xinhao-yanchi2.svg b/src/assets/svg/xinhao-yanchi2.svg
new file mode 100644
index 0000000..1d899f4
--- /dev/null
+++ b/src/assets/svg/xinhao-yanchi2.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28556 9.64453C3.04746 9.64453 3.42841 10.0255 3.42841 10.7874V13.0731C3.42841 13.835 3.04746 14.216 2.28556 14.216C1.52365 14.216 1.1427 13.835 1.1427 13.0731V10.7874C1.1427 10.0255 1.52365 9.64453 2.28556 9.64453Z" fill="#FA9837"/>
+<path d="M7.99991 6.21094C8.76182 6.21094 9.14277 6.59189 9.14277 7.35379V13.0681C9.14277 13.83 8.76182 14.2109 7.99991 14.2109C7.23801 14.2109 6.85706 13.83 6.85706 13.0681V7.35379C6.85706 6.59189 7.23801 6.21094 7.99991 6.21094Z" fill="#FA9837"/>
+<path d="M13.7141 2.78906C14.4761 2.78906 14.857 3.17001 14.857 3.93192V13.0748C14.857 13.8367 14.4761 14.2176 13.7141 14.2176C12.9522 14.2176 12.5713 13.8367 12.5713 13.0748V3.93192C12.5713 3.17001 12.9522 2.78906 13.7141 2.78906Z" fill="#E8E8E9"/>
+</svg>
diff --git a/src/assets/svg/xinhao-yanchi3.svg b/src/assets/svg/xinhao-yanchi3.svg
new file mode 100644
index 0000000..a770363
--- /dev/null
+++ b/src/assets/svg/xinhao-yanchi3.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28556 9.64453C3.04746 9.64453 3.42841 10.0255 3.42841 10.7874V13.0731C3.42841 13.835 3.04746 14.216 2.28556 14.216C1.52365 14.216 1.1427 13.835 1.1427 13.0731V10.7874C1.1427 10.0255 1.52365 9.64453 2.28556 9.64453Z" fill="#FC5A50"/>
+<path d="M7.99991 6.21094C8.76182 6.21094 9.14277 6.59189 9.14277 7.35379V13.0681C9.14277 13.83 8.76182 14.2109 7.99991 14.2109C7.23801 14.2109 6.85706 13.83 6.85706 13.0681V7.35379C6.85706 6.59189 7.23801 6.21094 7.99991 6.21094Z" fill="#E8E8E9"/>
+<path d="M13.7146 2.78906C14.4765 2.78906 14.8575 3.17001 14.8575 3.93192V13.0748C14.8575 13.8367 14.4765 14.2176 13.7146 14.2176C12.9527 14.2176 12.5718 13.8367 12.5718 13.0748V3.93192C12.5718 3.17001 12.9527 2.78906 13.7146 2.78906Z" fill="#E8E8E9"/>
+</svg>
diff --git a/src/assets/svg/xinhao-yanchi4.svg b/src/assets/svg/xinhao-yanchi4.svg
new file mode 100644
index 0000000..d69f955
--- /dev/null
+++ b/src/assets/svg/xinhao-yanchi4.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28556 9.14453C3.04746 9.14453 3.42841 9.52548 3.42841 10.2874V12.5731C3.42841 13.335 3.04746 13.716 2.28556 13.716C1.52365 13.716 1.1427 13.335 1.1427 12.5731V10.2874C1.1427 9.52548 1.52365 9.14453 2.28556 9.14453Z" fill="#A4A4A7"/>
+<path d="M7.99991 5.71094C8.76182 5.71094 9.14277 6.09189 9.14277 6.85379V12.5681C9.14277 13.33 8.76182 13.7109 7.99991 13.7109C7.23801 13.7109 6.85706 13.33 6.85706 12.5681V6.85379C6.85706 6.09189 7.23801 5.71094 7.99991 5.71094Z" fill="#E8E8E9"/>
+<path d="M13.7141 2.28906C14.4761 2.28906 14.857 2.67001 14.857 3.43192V12.5748C14.857 13.3367 14.4761 13.7176 13.7141 13.7176C12.9522 13.7176 12.5713 13.3367 12.5713 12.5748V3.43192C12.5713 2.67001 12.9522 2.28906 13.7141 2.28906Z" fill="#E8E8E9"/>
+</svg>
diff --git a/src/assets/svg/xinhao-yanchi5.svg b/src/assets/svg/xinhao-yanchi5.svg
new file mode 100644
index 0000000..5fb38a5
--- /dev/null
+++ b/src/assets/svg/xinhao-yanchi5.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28556 9.64453C3.04746 9.64453 3.42841 10.0255 3.42841 10.7874V13.0731C3.42841 13.835 3.04746 14.216 2.28556 14.216C1.52365 14.216 1.1427 13.835 1.1427 13.0731V10.7874C1.1427 10.0255 1.52365 9.64453 2.28556 9.64453Z" fill="#E8E8E9"/>
+<path d="M7.99991 6.21094C8.76182 6.21094 9.14277 6.59189 9.14277 7.35379V13.0681C9.14277 13.83 8.76182 14.2109 7.99991 14.2109C7.23801 14.2109 6.85706 13.83 6.85706 13.0681V7.35379C6.85706 6.59189 7.23801 6.21094 7.99991 6.21094Z" fill="#E8E8E9"/>
+<path d="M13.7141 2.78906C14.4761 2.78906 14.857 3.17001 14.857 3.93192V13.0748C14.857 13.8367 14.4761 14.2176 13.7141 14.2176C12.9522 14.2176 12.5713 13.8367 12.5713 13.0748V3.93192C12.5713 3.17001 12.9522 2.78906 13.7141 2.78906Z" fill="#E8E8E9"/>
+</svg>
diff --git a/src/assets/svg/youjiantou.svg b/src/assets/svg/youjiantou.svg
new file mode 100644
index 0000000..4087087
--- /dev/null
+++ b/src/assets/svg/youjiantou.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 427319405">
+<path id="Rectangle 2547" opacity="0.4" d="M6.09766 12.2422L9.98674 8.3531C10.182 8.15784 10.182 7.84126 9.98674 7.64599L6.09766 3.75691" stroke="#1B1B22" stroke-width="1.2" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/src/assets/svg/zuanshi.svg b/src/assets/svg/zuanshi.svg
new file mode 100644
index 0000000..08098b5
--- /dev/null
+++ b/src/assets/svg/zuanshi.svg
@@ -0,0 +1,14 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 1" fill-rule="evenodd" clip-rule="evenodd" d="M0.10283 3.99219C-0.0312173 4.08012 0.00708197 4.21691 0.00708197 4.34393C0.00708197 6.80612 0.00708197 9.26831 0.00708197 11.7305C0.00708197 11.8478 -0.0407921 11.9943 0.112405 12.0725C1.06989 11.6035 1.96035 11.027 2.86995 10.4896C2.98485 10.431 3.06145 10.3235 3.09975 10.1965C3.18592 8.76024 3.17635 7.33373 3.09975 5.89746C3.05187 5.71181 2.91783 5.59457 2.77421 5.48709C2.51569 5.30145 2.22844 5.15489 1.95077 4.99856C1.33798 4.66636 0.773068 4.21691 0.10283 3.99219Z" fill="#51B8F8"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 2" fill-rule="evenodd" clip-rule="evenodd" d="M6.46999 15.8155C6.59445 15.8937 6.71894 16.1086 6.92 15.9328C7.02532 14.8385 7.01575 13.7344 6.92 12.6303C6.83382 12.3958 6.64233 12.2786 6.45083 12.1711C5.46463 11.6142 4.49757 11.0181 3.52094 10.4514C3.35817 10.3537 3.20497 10.217 2.99433 10.3244C2.01769 10.8032 1.10808 11.3894 0.169754 11.9464C0.131454 11.9659 0.131454 12.0245 0.112305 12.0734C2.22834 13.3142 4.34438 14.5649 6.46999 15.8155Z" fill="#00A6F6"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 3" fill-rule="evenodd" clip-rule="evenodd" d="M2.96663 5.75263C3.11983 5.77217 3.2443 5.69401 3.37835 5.62561C4.42201 5.01984 5.45609 4.39452 6.49974 3.78874C6.67209 3.68126 6.86359 3.57379 6.93061 3.35883C7.01678 2.25475 7.02636 1.16045 6.92104 0.0563686C6.75826 -0.0804198 6.65294 0.0661392 6.53804 0.134533C5.52311 0.73054 4.49861 1.30701 3.49325 1.93232C2.373 2.62604 1.17614 3.21227 0.10376 3.98415C0.151634 4.12094 0.276107 4.16002 0.38143 4.22842C1.24317 4.73649 2.1049 5.24456 2.96663 5.75263Z" fill="#83C9F9"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 4" fill-rule="evenodd" clip-rule="evenodd" d="M6.921 15.9209C7.29442 15.7059 7.67741 15.5007 8.0604 15.2955C9.88919 14.211 11.7084 13.1167 13.5372 12.0322C13.5851 11.7879 13.384 11.739 13.2404 11.6609C12.8957 11.4655 12.5701 11.2407 12.2159 11.0551C11.6988 10.7815 11.2392 10.3809 10.6648 10.2344C10.4828 10.2344 10.3392 10.3321 10.186 10.42C9.60195 10.7424 9.03703 11.0942 8.46255 11.4362C7.91678 11.7586 7.33272 12.0029 6.85398 12.4425C6.8444 12.4621 6.83483 12.4914 6.82525 12.5109C6.81568 13.4978 6.81568 14.4846 6.81568 15.4714C6.81568 15.6277 6.7678 15.8036 6.921 15.9209Z" fill="#0090E9"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 5" fill-rule="evenodd" clip-rule="evenodd" d="M10.6373 10.3367C11.6331 10.835 12.581 11.431 13.5289 12.027C13.6246 11.939 13.6055 11.8218 13.5863 11.7045C13.5863 9.17397 13.5767 6.63361 13.5767 4.09326C13.098 3.97601 12.8203 4.25936 12.5905 4.62087C12.6288 5.02146 12.1405 5.08986 12.1118 5.48068C12.0448 5.24619 11.9395 5.09963 11.7288 5.07032C11.4033 5.12894 11.0777 5.2071 10.9437 5.57839C10.8958 5.98875 10.4649 6.20371 10.4745 6.63361C10.4362 7.68884 10.4649 8.74406 10.4649 9.79928C10.4649 9.99469 10.4937 10.1803 10.6373 10.3367Z" fill="#00A6F6"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 6" fill-rule="evenodd" clip-rule="evenodd" d="M13.5946 4.08994C13.5946 3.92384 13.4414 3.89453 13.3552 3.82614C11.2105 2.56573 9.07528 1.31509 6.93052 0.0546875C6.77732 0.191475 6.8252 0.386888 6.8252 0.552988C6.8252 1.53005 6.8252 2.51688 6.8252 3.49394C6.83477 3.52325 6.84435 3.54279 6.85392 3.56233C7.87843 4.25604 8.96996 4.83251 10.0328 5.4676C10.1285 5.52622 10.2338 5.54576 10.3487 5.51645C10.5115 5.45783 10.569 5.3015 10.6264 5.19402C10.6551 5.42852 10.6839 5.66301 11.0285 5.6337C11.1913 5.29173 11.5264 5.26242 11.8137 5.1354C11.4115 4.6371 12.0722 4.58824 12.1201 4.26581C12.2733 4.48077 12.3594 4.72503 12.6467 4.66641C12.9052 4.37329 13.2212 4.18765 13.5946 4.08994Z" fill="#51B8F8"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 7" fill-rule="evenodd" clip-rule="evenodd" d="M3.00412 10.3258C3.14774 10.4039 3.29136 10.4723 3.42541 10.5505C4.56482 11.2051 5.69464 11.8597 6.82447 12.5144L6.8149 12.4851C7.00639 12.2896 6.99682 12.0454 6.99682 11.8011C6.99682 9.26075 6.99682 6.73016 6.99682 4.18981C6.99682 3.94554 6.98724 3.69151 6.8149 3.49609C5.484 4.17027 4.21055 4.93237 2.96582 5.7531C2.9754 7.27732 2.98497 8.79176 3.00412 10.3258Z" fill="#AFDAF9"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 8" fill-rule="evenodd" clip-rule="evenodd" d="M7.2741 12.2779C8.39435 11.6331 9.51461 10.9882 10.6349 10.3433C10.6349 9.04384 10.6349 7.73458 10.6349 6.43509C10.6157 6.08335 10.1561 5.86839 10.338 5.45803C9.9359 5.34078 9.61993 5.0672 9.25609 4.87179C8.44223 4.42234 7.68582 3.86542 6.81451 3.50391C6.81451 6.49371 6.80493 9.49329 6.80493 12.4831C6.99643 12.4929 7.1209 12.3561 7.2741 12.2779Z" fill="#82C9F9"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 9" fill-rule="evenodd" clip-rule="evenodd" d="M12.1487 5.63364C12.2636 5.20373 12.5605 4.98878 12.9243 4.81291C12.7998 4.74451 12.7137 4.70543 12.6371 4.65658C12.3594 4.5491 12.3019 4.23644 12.0913 4.01172C11.9572 4.42208 11.7083 4.67612 11.3062 4.79337C11.4689 4.9497 11.6891 4.96924 11.804 5.13534C11.9189 5.29167 12.0243 5.45777 12.1487 5.63364Z" fill="#FAFCFE"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132; 10" fill-rule="evenodd" clip-rule="evenodd" d="M11.0754 5.85193C11.3531 5.71514 11.085 5.70537 11.0275 5.63698C10.8073 5.54904 10.7499 5.29501 10.5967 5.12891C10.5105 5.23638 10.4243 5.34386 10.3382 5.45134C10.2999 5.62721 10.0796 5.60767 9.98389 5.79331C10.2903 5.91055 10.4243 6.21344 10.635 6.4284C10.7116 6.18413 10.836 5.97895 11.0754 5.85193Z" fill="#F7FBFE"/>
+</g>
+</svg>
diff --git a/src/assets/theme.css b/src/assets/theme.css
new file mode 100644
index 0000000..ad09189
--- /dev/null
+++ b/src/assets/theme.css
@@ -0,0 +1,6 @@
+:root {
+  --c-text-color: #1B1B22;
+  --c-yellow-color: #FA9837;
+  --c-blue-color: #0095F6;
+  --c-red-color: #EA6558;
+}
diff --git a/src/assets/toTop.svg b/src/assets/toTop.svg
new file mode 100644
index 0000000..3c70541
--- /dev/null
+++ b/src/assets/toTop.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.78355 8.11462L3.33521 12.2296C2.13307 13.3417 2.91991 15.3509 4.55753 15.3509H7.60656V20.0573C7.60656 21.1541 8.49569 22.0432 9.59249 22.0432H14.5089C15.6057 22.0432 16.4949 21.1541 16.4949 20.0573V16.8259L14.8993 15.2304C14.8964 15.2702 14.8949 15.3104 14.8949 15.3509V20.0573C14.8949 20.2704 14.7221 20.4432 14.5089 20.4432H9.59249C9.37935 20.4432 9.20656 20.2704 9.20656 20.0573V15.3509C9.20656 14.4673 8.49022 13.7509 7.60656 13.7509H4.55753C4.48757 13.7509 4.45816 13.7332 4.44256 13.7219C4.41914 13.705 4.39044 13.6727 4.3713 13.6239C4.35216 13.575 4.35131 13.5318 4.35703 13.5035C4.36084 13.4847 4.37036 13.4516 4.42172 13.4041L8.91578 9.24685L7.78355 8.11462ZM15.8279 13.8962C16.0309 13.8029 16.2568 13.7509 16.4949 13.7509H19.4426C19.5125 13.7509 19.5419 13.7332 19.5575 13.7219C19.5809 13.705 19.6096 13.6727 19.6288 13.6239C19.6479 13.575 19.6488 13.5318 19.6431 13.5035C19.6392 13.4847 19.6297 13.4516 19.5784 13.4041L12.262 6.63622C12.1141 6.49938 11.8858 6.49939 11.7379 6.63622L10.0912 8.15952L8.95897 7.02729L10.6514 5.4617C11.4126 4.75756 12.5873 4.75756 13.3485 5.46168L20.6649 12.2296C21.867 13.3416 21.0802 15.3509 19.4426 15.3509H17.2826L15.8279 13.8962Z" fill="white"/>
+<path d="M5.59375 7L18.0247 19.4309" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M5.79102 2.78516H18.209" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/toTop1.svg b/src/assets/toTop1.svg
new file mode 100644
index 0000000..d1c562b
--- /dev/null
+++ b/src/assets/toTop1.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_4602_69838" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3485 5.41872C12.5873 4.71459 11.4126 4.7146 10.6514 5.41873L3.33521 12.1866C2.13307 13.2987 2.91991 15.308 4.55753 15.308H7.60656V20.0143C7.60656 21.1111 8.49569 22.0002 9.59249 22.0002H14.5089C15.6057 22.0002 16.4949 21.1111 16.4949 20.0143V15.308H19.4426C21.0802 15.308 21.867 13.2987 20.6649 12.1866L13.3485 5.41872Z"/>
+</mask>
+<path d="M10.6514 5.41873L9.56488 4.24421V4.24421L10.6514 5.41873ZM13.3485 5.41872L14.435 4.24418V4.24418L13.3485 5.41872ZM3.33521 12.1866L2.2487 11.0121H2.2487L3.33521 12.1866ZM7.60656 15.308H9.20656C9.20656 14.4243 8.49022 13.708 7.60656 13.708V15.308ZM16.4949 15.308V13.708C15.6112 13.708 14.8949 14.4243 14.8949 15.308H16.4949ZM20.6649 12.1866L21.7514 11.0121V11.0121L20.6649 12.1866ZM11.7379 6.59325C11.8858 6.45642 12.1141 6.45642 12.262 6.59325L14.435 4.24418C13.0606 2.97276 10.9393 2.97278 9.56488 4.24421L11.7379 6.59325ZM4.42172 13.3612L11.7379 6.59325L9.56488 4.24421L2.2487 11.0121L4.42172 13.3612ZM4.55753 13.708C4.48757 13.708 4.45816 13.6902 4.44256 13.679C4.41914 13.6621 4.39044 13.6298 4.3713 13.5809C4.35216 13.532 4.35131 13.4888 4.35703 13.4605C4.36084 13.4417 4.37036 13.4087 4.42172 13.3612L2.2487 11.0121C-0.0219984 13.1127 1.46425 16.908 4.55753 16.908V13.708ZM7.60656 13.708H4.55753V16.908H7.60656V13.708ZM9.20656 20.0143V15.308H6.00656V20.0143H9.20656ZM9.59249 20.4002C9.37935 20.4002 9.20656 20.2274 9.20656 20.0143H6.00656C6.00656 21.9947 7.61204 23.6002 9.59249 23.6002V20.4002ZM14.5089 20.4002H9.59249V23.6002H14.5089V20.4002ZM14.8949 20.0143C14.8949 20.2274 14.7221 20.4002 14.5089 20.4002V23.6002C16.4894 23.6002 18.0949 21.9947 18.0949 20.0143H14.8949ZM14.8949 15.308V20.0143H18.0949V15.308H14.8949ZM19.4426 13.708H16.4949V16.908H19.4426V13.708ZM19.5784 13.3612C19.6297 13.4087 19.6392 13.4417 19.6431 13.4605C19.6488 13.4888 19.6479 13.532 19.6288 13.5809C19.6096 13.6298 19.5809 13.6621 19.5575 13.679C19.5419 13.6902 19.5125 13.708 19.4426 13.708V16.908C22.5358 16.908 24.0221 13.1126 21.7514 11.0121L19.5784 13.3612ZM12.262 6.59325L19.5784 13.3612L21.7514 11.0121L14.435 4.24418L12.262 6.59325Z" fill="white" mask="url(#path-1-inside-1_4602_69838)"/>
+<path d="M5.79102 2.74219H18.209" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/tupian.png b/src/assets/tupian.png
new file mode 100644
index 0000000..c4ec114
Binary files /dev/null and b/src/assets/tupian.png differ
diff --git a/src/assets/typeface.svg b/src/assets/typeface.svg
new file mode 100644
index 0000000..10d6240
--- /dev/null
+++ b/src/assets/typeface.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.30146" y="3.50313" width="17.3971" height="17.3971" rx="5.2" stroke="#1B1B22" stroke-width="1.6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0002 8.43823C7.55837 8.43823 7.2002 8.7964 7.2002 9.23823C7.2002 9.68006 7.55837 10.0382 8.0002 10.0382H11.1999L11.1999 15.9355C11.1999 16.3773 11.5581 16.7355 11.9999 16.7355C12.4417 16.7355 12.7999 16.3773 12.7999 15.9355L12.7999 10.0382H16.0002C16.442 10.0382 16.8002 9.68006 16.8002 9.23823C16.8002 8.7964 16.442 8.43823 16.0002 8.43823H8.0002Z" fill="#1B1B22"/>
+</svg>
diff --git a/src/assets/zhiding.png b/src/assets/zhiding.png
new file mode 100644
index 0000000..20b2d98
Binary files /dev/null and b/src/assets/zhiding.png differ
diff --git a/src/blank/blankTransfer/App.vue b/src/blank/blankTransfer/App.vue
new file mode 100644
index 0000000..ed78f24
--- /dev/null
+++ b/src/blank/blankTransfer/App.vue
@@ -0,0 +1,163 @@
+<script setup>
+// import { storeToRefs } from 'pinia'
+// import { useUserStore } from "../../stores/user";
+import { onMounted } from 'vue'
+const $api = inject('$api')
+
+
+let timeoutId;
+
+const handleVisibilityChange = () => {
+  if (document.hidden || document.webkitHidden) {
+    clearTimeout(timeoutId);
+    timeoutId = null;
+    // loading.value = false
+  }
+}
+
+const handlePageChange = () => {
+  clearTimeout(timeoutId);
+  timeoutId = null;
+  // loading.value = false
+}
+const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+const downloadApp = () => {
+  const ios_download_url = "https://prod-im-m-cdn.xxabc3.info/banner/transferPage"
+  // const ios_download_url = "https://uat-im-m.exchangs.top/banner/transferPage"
+  const android_download_url = window.location.origin
+  const ios_url_scheme = "privatechat://"
+  const android_url_scheme = "privatechat://com.neway.im"
+
+  if (/iPad|iPhone|iPod|Mac/.test(userAgent)) {
+    if (/Safari|Chrome/.test(userAgent)) {
+      location.href = ios_download_url
+    } else {
+      location.href = ios_url_scheme
+      timeoutId = setTimeout(() => {
+      console.log('ios唤起失败--');
+      onLoad('ios')
+      }, 1500);
+    }
+  } else if (/android/i.test(userAgent)) {
+    location.href = android_url_scheme
+    timeoutId = setTimeout(() => {
+      console.log('android唤起失败--');
+      onLoad('android')
+    }, 1500);
+  }
+}
+
+onMounted(() => {
+  document.querySelector('.download-banner')?.remove()
+  document.addEventListener('visibilitychange', handleVisibilityChange, false);
+  document.addEventListener('webkitvisibilitychange', handleVisibilityChange, false);
+  window.addEventListener('pagehide', handlePageChange, false);
+  // 安卓自动唤起或下载安装包
+  if(/android/i.test(userAgent)){
+    downloadApp()
+  }
+  console.log('onMounted--------------');
+})
+// const loading = ref(true)
+// 下载安装包
+const onLoad = async(type) => {
+  // 获取系统配置并存储
+  const configRes = await $api.getConfigInfo();
+  if (configRes.code != 0) return;
+  let urlList = []
+  let url = ''
+  console.log('下载安装包--', urlList,configRes);
+
+  urlList = configRes.data?.download_banner?.[type] || []
+  if(urlList.length > 0) { 
+    // 生成一个随机整数 随机下载链接
+    let randomInt = Math.floor(Math.random() * urlList.length);
+    // 获取随机整数对应的下载链接
+    url = urlList[randomInt].url
+    if(type === 'ios') {
+      window.location.href = url
+    }else{
+      window.open(url)
+    }
+    // 关闭加载状态
+    let timer = setTimeout(() => {
+      clearTimeout(timer)
+      // loading.value = false
+    },2000)
+  }
+}
+
+const isIosShowBtn = computed(() => {
+  return /iPad|iPhone|iPod|Mac|Macintosh|Mac OS X/.test(userAgent)
+})
+</script>
+<template>
+  <div class="blank-transfer">
+    <div class="blank-transfer-content">
+      <img class="logo" src="@/assets/blank-logo.png" alt="">
+      <div class="ios-btn" @click="downloadApp" v-if="isIosShowBtn">
+        <img class="apple" src="@/assets/apple.png" alt="">
+        <div class="btn-text">QDDchat APP</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="less">
+* {
+  padding: 0;
+  margin: 0;
+}
+</style>
+<style scoped lang="less">
+.blank-transfer{
+  height: 100%;
+  width: 100%;
+  // background-color: #1B1B22;
+  /* 设置背景图 */
+  background-image: url('../../assets/blank_bg.png');
+  
+  /* 设置背景图的其他属性，如大小、位置等 */
+  background-size: cover; /* 覆盖整个容器 */
+  background-position: center; /* 图片居中 */
+  background-repeat: no-repeat; /* 不重复 */
+  position: absolute;
+  z-index: 99999;
+  &-content {
+    text-align: center;
+    // transform: translate(0,40%);
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .logo {
+      width: 144px;
+      height: 144px;
+    }
+    .ios-btn {
+      width: 240px;
+      height: 40px;
+      border-radius: 16px;
+      background-color: #1B1B22;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .apple{
+        width: 20px;
+        height: 20px;
+      }
+      .btn-text {
+        font-size: 16px;
+        color: #fff;
+        margin-left: 8px;
+        font-family: PingFang SC;
+        font-weight: 500;
+      }
+    }
+    .loading {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+</style>
diff --git a/src/blank/blankTransfer/api.js b/src/blank/blankTransfer/api.js
new file mode 100644
index 0000000..15649cb
--- /dev/null
+++ b/src/blank/blankTransfer/api.js
@@ -0,0 +1,11 @@
+import request from "./request"
+
+
+let api = {
+  // 获取后台配置的登录注册方式
+  getConfigInfo: data => {
+    return request.post("/v1/config/get", data, { urlTag: "api_2" });
+  },
+}
+
+export default api
diff --git a/src/blank/blankTransfer/main.js b/src/blank/blankTransfer/main.js
new file mode 100644
index 0000000..dcac125
--- /dev/null
+++ b/src/blank/blankTransfer/main.js
@@ -0,0 +1,8 @@
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import api from './api'
+// 导入pinia本地存储
+const app = createApp(App)
+app.provide('$api', api)
+app.mount('#app')
diff --git a/src/blank/blankTransfer/request.js b/src/blank/blankTransfer/request.js
new file mode 100644
index 0000000..7907a96
--- /dev/null
+++ b/src/blank/blankTransfer/request.js
@@ -0,0 +1,139 @@
+import axios from "axios";
+import { showToast } from "vant";
+import { i18n } from "@/lang/index";
+
+
+const useEmailLang = () => {
+  let navLang = 'us'
+    if (navigator.language === 'zh-CN') {
+      navLang = 'zh-cn'
+    } else if (navigator.language === 'en') {
+      navLang = 'us'
+    } else if (navigator.language === 'zh-TW') {
+      navLang = 'zh-hant-cn'
+    } else if (navigator.language === 'vi') {
+      navLang = 'vi' // 越南
+    } else if (navigator.language === 'th') {
+      navLang = 'th' // 泰语
+    } else if (navigator.language === 'id') {
+      navLang = 'id' // 印尼
+    } else if (navigator.language === 'pt-BR') {
+      navLang = 'pt-br' // 巴西
+    }
+  let configLang = ''
+  if (localStorage.getItem('language') === 'zh-cn') {
+    configLang = 'zh-cn'
+  } else if (localStorage.getItem('language') === 'us') {
+    configLang = 'us'
+  } else if (localStorage.getItem('language') === 'zh-hant-cn') {
+    configLang = 'zh-hant-cn'
+  } else if (localStorage.getItem('language') === 'vi-VN') {
+    configLang = 'vi' // 越南
+  } else if (localStorage.getItem('language') === 'th') {
+    configLang = 'th' // 泰语
+  } else if (localStorage.getItem('language') === 'id') {
+    configLang = 'id' // 印尼
+  } else if (localStorage.getItem('language') === 'pt-br') {
+    configLang = 'pt-br' // 巴西
+  }
+  const language = configLang || navLang;
+  console.log('navigator.language',language);
+  return language
+}
+
+let appConfig = sessionStorage.getItem("appConfig")
+  ? JSON.parse(sessionStorage.getItem("appConfig"))
+  : {};
+
+const { DEV, VITE_APP_PUB_API, VITE_APP_MSG_API } = import.meta.env;
+// @ts-ignore
+const { api_2, api_3, api_1 } = window.WEB_CONFIG;
+// const api_2 = 'https://dev-im-m.exchangs.top/chat-api'
+const service = axios.create({
+  // baseURL: DEV ? VITE_APP_PUB_API : api_2, // 所有的请求地址前缀部分
+  // baseURL: DEV ? '/chat-api' : api_2,
+  timeout: 60000, // 请求超时时间毫秒
+  withCredentials: false, // 异步请求携带cookie
+  headers: {
+    // 设置后端需要的传参类型
+    "Content-Type": "application/json"
+    // 'Origin': 'wp'
+    // 'X-Requested-With': 'XMLHttpRequest',
+  }
+});
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    //给请求头设置token
+    const token = window.localStorage.getItem("token") || "";
+    if (config.urlTag === "api_2") {
+      config.baseURL = DEV ? "/api_2" : api_2;
+      config.headers.token = token;
+      config.headers.language = useEmailLang();
+    }
+    return config;
+  },
+  error => {
+    showToast({ position: "top", message: error.message });
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    const { data, request } = response;
+    const { code, msg, detail } = data;
+    const { responseURL } = request;
+    if (code === 511) {
+      if (
+        responseURL.includes("/v1/login") ||
+        responseURL.includes("/v1/user/phone_login")
+      ) {
+        showToast({ message: "系统正在维护中" });
+      } else {
+      }
+      return data;
+    }
+    if (code === 401) {
+      return data;
+    }
+    if (code === 0) {
+      // 将组件用的数据返回
+      return data;
+    } else {
+      showToast({ position: "top", message: detail });
+      return data;
+    }
+  },
+  error => {
+    // 处理 HTTP 网络错误
+    let message = "";
+    // HTTP 状态码
+    const status = error.response?.status;
+    switch (status) {
+      case 401:
+        message = t("dialog_tip_token_invaild");
+        // 这里可以触发退出的 action
+        break;
+      case 403:
+        message = "没有权限,请获取权限后登录";
+        break;
+      case 404:
+        message = "页面不存在";
+        break;
+      case 500:
+        message = "服务器故障";
+        break;
+      case 502:
+        message = "数据库查询错误";
+        break;
+      default:
+        message = "网络连接错误";
+    }
+    showToast({ position: "top", message: message });
+    return Promise.reject(error);
+  }
+);
+
+export default service;
diff --git a/src/components/ABPPInput.vue b/src/components/ABPPInput.vue
new file mode 100644
index 0000000..45dc30c
--- /dev/null
+++ b/src/components/ABPPInput.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { ref, defineProps } from 'vue'
+import IconTriangle from './icons/IconTriangle.vue'
+import IconEyeShow from './icons/IconEyeShow.vue'
+import IconEyeHide from './icons/IconEyeHide.vue'
+import IconRemove from './icons/IconRemove.vue'
+import IconRemoveBG from './icons/IconRemoveBG.vue'
+import SelectAreaCode from '@/components/selectAreaCode.vue'
+
+const props = defineProps({
+  type: String,
+  modelValue: String,
+  placeholder: String,
+  columns: Array,
+  prepend: String | Number,
+  autocomplete: String,
+  isfoucus: Boolean,
+  maxlength: String
+})
+
+const emits = defineEmits(['update:modelValue', 'update:prepend', 'abpBlur','onClear'])
+
+const showPicker = ref(false)
+
+const onBlur = () => {
+  emits('abpBlur', props.modelValue)
+}
+const onFocus = () => {
+  if (inputType.value !== '') return
+
+  inputType.value = props.type
+}
+
+const onLeft = () => {
+  showPicker.value = false
+}
+
+const onSelect = (row) => {
+  emits('update:prepend', row.areaCode)
+}
+const onClear = (row) => {
+  props.modelValue = ''
+  emits('onClear', '')
+}
+const inputType = ref('')
+
+onMounted(async ()=> {
+   await nextTick()
+   if(props.isfoucus){
+        onFocus()
+    }
+})
+
+</script>
+
+<template>
+  <div class="wp-input" :class="columns ? 'wp-input-prepend' : ''">
+    <span class="wp-input-label">
+      <slot></slot>
+    </span>
+    <input 
+      class="wp-input-input" 
+      :type="inputType" 
+      :placeholder="placeholder || ''" 
+      :value="modelValue" 
+      :maxlength="maxlength"
+      :autocomplete="type === 'password'?'new-password':'off'"
+      @input="$emit('update:modelValue', $event.target.value)"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+    <!-- <div v-if="columns" class="prepend" @click="$router.push('/user/selectAreaCode')"><span class="prepend-value">{{ prepend }}</span> <IconTriangle /> </div> -->
+    <div v-if="columns" class="prepend" @click="showPicker = true"><span class="prepend-value">{{ prepend }}</span> <IconTriangle /></div>
+    <div class="wp-input-append">
+      <IconRemoveBG v-show="modelValue !== ''" class="wp-input-remove" @click="onClear"></IconRemoveBG>
+      <div v-if="type === 'password'" class="wp-input-eye">
+        <IconEyeShow v-show="inputType === 'text'" @click="inputType = 'password'"></IconEyeShow>
+        <IconEyeHide v-show="inputType === '' ? type === 'password' : inputType === 'password'" @click="inputType = 'text'"></IconEyeHide>
+      </div>
+    </div>
+  </div>
+  <SelectAreaCode v-if="showPicker" @onLeft="onLeft" :columns="columns" @onSelect="onSelect" />
+</template>
+
+<style scoped>
+.wp-input {
+  position: relative;
+}
+.wp-input-label {
+  position: absolute;
+  left: 16px;
+  padding: 0 4px;
+  background-color: #fff;
+  color: var(--40, #A4A4A7);
+  font-family: PingFang SC;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  top: -6px;
+  font-size: 12px; /* ui说这个不跟随系统字体大小变化 */
+}
+.wp-input-input {
+  width: 100%;
+  height: 50px;
+  padding-left: 20px;
+  padding-right: 80px;
+  border: 1px solid #E8E8E9;
+  line-height: 50px;
+  background-color: #FFFFFF;
+  outline: none;
+  border-radius: 10px;
+}
+.wp-input-input::placeholder {
+  color: var(--20, #D1D1D3);
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+}
+.wp-input-prepend .prepend {
+  display: flex;
+  position: absolute;
+  left: 20px;
+  top: 16px;
+  width: 60px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 1.125rem;
+}
+.wp-input-prepend .prepend .prepend-value {
+  font-size: 0.875rem;
+}
+.wp-input-prepend .prepend svg {
+  width: 18px;
+  height: 18px;
+}
+.wp-input.wp-input-prepend .wp-input-input {
+  padding-left: 80px;
+}
+.wp-input-append {
+  position: absolute;
+  right: 20px;
+  top: 0;
+  display: flex;
+  height: 50px;
+}
+.wp-input-remove {
+  width: 18px;
+  height: 18px;
+  margin-top: 16px;
+}
+.wp-input-eye {
+  width: 20px;
+  height: 20px;
+  margin-top: 15px;
+  margin-left: 15px;
+}
+</style>
diff --git a/src/components/ABPPInput1.vue b/src/components/ABPPInput1.vue
new file mode 100644
index 0000000..05b1b39
--- /dev/null
+++ b/src/components/ABPPInput1.vue
@@ -0,0 +1,161 @@
+<script setup>
+    import { ref, defineProps } from 'vue'
+    import IconTriangle from './icons/IconTriangle.vue'
+    import IconEyeShow from './icons/IconEyeShow.vue'
+    import IconEyeHide from './icons/IconEyeHide.vue'
+    import IconRemove from './icons/IconRemove.vue'
+    import IconRemoveBG from './icons/IconRemoveBG.vue'
+    import SelectAreaCode from '@/components/selectAreaCode.vue'
+    const props = defineProps({
+      type: String,
+      modelValue: String,
+      placeholder: String,
+      columns: Array,
+      prepend: String,
+      autocomplete: String,
+    })
+    const emits = defineEmits(['update:modelValue','abpBlur','onClear','onSelectClick'])
+    const showPicker = ref(false)
+
+    const onBlur = () => {
+      emits('abpBlur', props.modelValue)
+    }
+    const onFocus = () => {
+      if (inputType.value !== '') return
+      inputType.value = props.type
+    }
+    
+    const onLeft = () => {
+      showPicker.value = false
+      emits('onSelectClick',showPicker.value)
+    }
+    
+    const onSelect = (row) => {
+      emits('update:prepend', row.areaCode)
+    }
+
+    const onClear = (row) => {
+      props.modelValue = ''
+      emits('onClear', '')
+    }
+    const inputType = ref('')
+
+    // icon 点击之后打开弹框发送事件出去
+    const onSelectClick = (val) => {
+      showPicker.value = true
+      emits('onSelectClick',showPicker.value)
+    }
+    </script>
+    
+    <template>
+      <div class="wp-input" :class="columns ? 'wp-input-prepend' : ''">
+        <span class="wp-input-label">
+          <slot></slot>
+        </span>
+        <input 
+          class="wp-input-input" 
+          :type="inputType" 
+          :placeholder="placeholder || ''" 
+          :value="modelValue" 
+          :autocomplete="type === 'password'?'new-password':'off'"
+          @input="$emit('update:modelValue', $event.target.value)"
+          @blur="onBlur"
+          @focus="onFocus"
+        />
+        <div v-if="columns" class="prepend" @click="onSelectClick"><span class="prepend-value">{{ prepend }}</span> <IconTriangle /> </div>
+    
+        <div class="wp-input-append">
+          <IconRemoveBG v-show="modelValue !== ''" class="wp-input-remove" @click="onClear"></IconRemoveBG>
+          <div v-if="type === 'password'" class="wp-input-eye">
+            <IconEyeShow v-show="inputType === 'text'" @click="inputType = 'password'"></IconEyeShow>
+            <IconEyeHide v-show="inputType === '' ? type === 'password' : inputType === 'password'" @click="inputType = 'text'"></IconEyeHide>
+          </div>
+        </div>
+        <SelectAreaCode v-if="showPicker" @onLeft="onLeft" :columns="columns" @onSelect="onSelect" />
+      </div>
+    </template>
+    
+    <style scoped>
+    .wp-input {
+      position: relative;
+      min-width: 375px;
+      max-width: 750px;
+    }
+    .wp-input-label {
+      position: absolute;
+      left: 16px;
+      top: -14px;
+      padding: 0 4px;
+      background-color: #fff;
+      color: var(--40, #A4A4A7);
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      top: -6px;
+      font-size: 12px; /* ui说这个不跟随系统字体大小变化 */
+    }
+    .wp-input-input {
+      width: 100%;
+      height: 50px;
+      padding-left: 20px;
+      padding-right: 80px;
+      border-bottom: 1px solid #F2F4F5;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      line-height: 50px;
+      background-color: #FFFFFF;
+      outline: none;
+      /* border-radius: 10px; */
+    }
+    .wp-input-input::placeholder {
+      color: var(--20, #D1D1D3);
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px; /* 100% */
+    }
+    .wp-input-prepend .prepend {
+      display: flex;
+      position: absolute;
+      left: 20px;
+      top: 16px;
+      width: 60px;
+      height: 18px;
+      line-height: 18px;
+      font-size: 1.125rem;
+      border-right: 1px solid #E8E8E9;
+    }
+    .wp-input-prepend .prepend .prepend-value {
+      font-size: 0.875rem;
+    }
+    .wp-input-prepend .prepend svg {
+      width: 18px;
+      height: 18px;
+    }
+    .wp-input.wp-input-prepend .wp-input-input {
+      /* padding-left: 80px; */
+      padding-left: 90px;
+    }
+    .wp-input-append {
+      position: absolute;
+      right: 20px;
+      top: 0;
+      display: flex;
+      height: 50px;
+    }
+    .wp-input-remove {
+      width: 18px;
+      height: 18px;
+      margin-top: 16px;
+    }
+    .wp-input-eye {
+      width: 20px;
+      height: 20px;
+      margin-top: 15px;
+      margin-left: 15px;
+    }
+    </style>
+    
\ No newline at end of file
diff --git a/src/components/ABPPInput2.vue b/src/components/ABPPInput2.vue
new file mode 100644
index 0000000..9c0c8b2
--- /dev/null
+++ b/src/components/ABPPInput2.vue
@@ -0,0 +1,172 @@
+<script setup>
+import { ref, defineProps } from 'vue'
+import IconTriangle from './icons/IconTriangle.vue'
+import IconEyeShow from './icons/IconEyeShow.vue'
+import IconEyeHide from './icons/IconEyeHide.vue'
+import IconRemove from './icons/IconRemove.vue'
+import IconRemoveBG from './icons/IconRemoveBG.vue'
+import SelectAreaCode from '@/components/selectAreaCode.vue'
+
+
+const props = defineProps({
+  type: String,
+  modelValue: String,
+  placeholder: String,
+  columns: Array,
+  prepend: String,
+  autocomplete: String,
+})
+
+const emits = defineEmits(['update:modelValue', 'update:prepend', 'abpBlur','onClear'])
+
+const showPicker = ref(false)
+const onPickerConfirm = (data) => {
+  emits('update:prepend', data.selectedValues[0])
+  showPicker.value = false
+}
+const onBlur = () => {
+  emits('abpBlur', props.modelValue)
+}
+const onFocus = () => {
+  if (inputType.value !== '') return
+
+  inputType.value = props.type
+}
+
+const onLeft = () => {
+  showPicker.value = false
+}
+
+const onSelect = (row) => {
+  emits('update:prepend', row.areaCode)
+}
+const onClear = (row) => {
+  props.modelValue = ''
+  emits('onClear', '')
+}
+const inputType = ref('')
+
+</script>
+
+<template>
+  <div class="wp-input" :class="columns ? 'wp-input-prepend' : ''">
+    <span class="wp-input-label">
+      <slot></slot>
+    </span>
+    <input 
+      class="wp-input-input" 
+      :type="inputType" 
+      :placeholder="placeholder || ''" 
+      :value="modelValue" 
+      :autocomplete="type === 'password'?'new-password':'off'"
+      @input="$emit('update:modelValue', $event.target.value)"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+    <!-- <div v-if="columns" class="prepend" @click="$router.push('/user/selectAreaCode')"><span class="prepend-value">{{ prepend }}</span> <IconTriangle /> </div> -->
+    <div v-if="columns" class="prepend" @click="showPicker = true"><span class="prepend-value">{{ prepend }}</span> <IconTriangle /> </div>
+
+    <div class="wp-input-append">
+      <IconRemoveBG v-show="modelValue !== ''" class="wp-input-remove" @click="onClear"></IconRemoveBG>
+      <div v-if="type === 'password'" class="wp-input-eye">
+        <IconEyeShow v-show="inputType === 'text'" @click="inputType = 'password'"></IconEyeShow>
+        <IconEyeHide v-show="inputType === '' ? type === 'password' : inputType === 'password'" @click="inputType = 'text'"></IconEyeHide>
+      </div>
+    </div>
+<!-- 
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
+        :columns-field-names="{ text:'area_code', value: 'area_code' }"
+      >
+        <template #option="option">
+          {{ option.area_name }}
+          {{ option.area_code }}
+        </template>
+      </van-picker>
+    </van-popup> -->
+  </div>
+  
+    
+  <SelectAreaCode v-if="showPicker" @onLeft="onLeft" :columns="columns" @onSelect="onSelect" />
+</template>
+
+<style scoped>
+.wp-input {
+  position: relative;
+}
+.wp-input-label {
+  position: absolute;
+  left: 16px;
+  top: -14px;
+  padding: 0 4px;
+  background-color: #fff;
+  color: var(--40, #A4A4A7);
+  font-family: PingFang SC;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  top: -6px;
+  font-size: 12px; /* ui说这个不跟随系统字体大小变化 */
+}
+.wp-input-input {
+  width: 100%;
+  height: 50px;
+  padding-left: 20px;
+  padding-right: 70px;
+  border: none;
+  line-height: 50px;
+  background-color: #FFFFFF;
+  outline: none;
+  border-radius: 10px;
+}
+.wp-input-input::placeholder {
+  color: var(--20, #D1D1D3);
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px; /* 100% */
+}
+.wp-input-prepend .prepend {
+  display: flex;
+  position: absolute;
+  left: 20px;
+  top: 16px;
+  width: 50px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 1.125rem;
+  border-right: 1px solid #E8E8E9;
+}
+.wp-input-prepend .prepend .prepend-value {
+  font-size: 0.875rem;
+}
+.wp-input-prepend .prepend svg {
+  width: 18px;
+  height: 18px;
+}
+.wp-input.wp-input-prepend .wp-input-input {
+  padding-left: 80px;
+}
+.wp-input-append {
+  position: absolute;
+  right: 20px;
+  top: 0;
+  display: flex;
+  height: 50px;
+}
+.wp-input-remove {
+  width: 18px;
+  height: 18px;
+  margin-top: 16px;
+}
+.wp-input-eye {
+  width: 20px;
+  height: 20px;
+  margin-top: 15px;
+  margin-left: 15px;
+}
+</style>
diff --git a/src/components/CheckBox/index.vue b/src/components/CheckBox/index.vue
new file mode 100644
index 0000000..bf99a75
--- /dev/null
+++ b/src/components/CheckBox/index.vue
@@ -0,0 +1,50 @@
+<script setup >
+import { number } from 'echarts';
+import { useAttrs ,defineProps,reactive,nextTick,useSlots}  from 'vue'
+const attrs = useAttrs()
+const slots = useSlots()
+
+const props = defineProps({
+  sizeW: number,
+  sizeH: number,
+})
+</script>
+
+<template>
+  <van-checkbox>
+    <template v-for="(key,index) in Object.keys(slots)" :key=index #[key]>
+        <slot :name="key" />
+    </template>
+    <template #icon="props">
+      <div class="select" :style="{width: sizeW + 'px',height: sizeH + 'px'}" :class="{ 'select-bg': props.checked }">
+        <IconRadioTick2 v-if="props.checked" />
+      </div>
+    </template>
+  </van-checkbox>
+
+</template>
+
+<style lang="less" scoped>
+  .select {
+    display: flex;
+    margin-right: 4px;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border-radius: 50%;
+    border: 1px solid #d9d9d9;
+  }
+
+  .select-bg {
+    background-color: #0095f6;
+    border: none;
+  }
+  :deep(.van-checkbox__icon) {
+    height: auto;
+  }
+  :deep(.van-checkbox__label) {
+    margin-left: 2px;
+    color: #00000066;
+    font-size: 0.75rem;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/CustomEdit/index.vue b/src/components/CustomEdit/index.vue
new file mode 100644
index 0000000..b4961a2
--- /dev/null
+++ b/src/components/CustomEdit/index.vue
@@ -0,0 +1,284 @@
+<template>
+  <div  ref="inputRef" class="custom_rich_input placeholderDiv"  style="white-space: pre-wrap;"  id="groupSendInput" :class="{ 'needsclick': !input }"
+    :placeholder="placeholder ?? $t('placeholder.typingMessage')" @input="onInput" :contenteditable="!disable"  @keydown="handle_send_message_keyDown"
+    @compositionstart="compositStart"
+    @compositionend="compositEnd"
+    >
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onUpdated, onMounted, toRefs, ref } from 'vue'
+import { base64toFile, createFileMessage } from '@/utils/sendMessage.js'
+import { useUserStore } from "@/stores/user.js"
+import { showToast } from "vant"
+import { storeToRefs } from "pinia"
+import usePasteImg from '@/use/usePasteImg'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disable: {
+    type: Boolean,
+    default: false
+  },
+  input: {
+    type: String,
+    default: ''
+  },
+})
+
+
+usePasteImg({
+  targetId: 'groupSendInput',
+  parseOk: (url) => {
+    emit('parseimg', url)
+  }
+})
+const userStore = useUserStore()
+const { appConfig } = storeToRefs(userStore)
+const { input, placeholder, disable } = toRefs(props);
+const emit = defineEmits(["update:input", 'change', 'triggerAt', 'parseimg','handle_send_message_keyDown']);
+const previewUrl = ref('')
+
+const inputRef = ref(null);
+let latestHtml = "";
+let cursorPos;
+
+const atUserNames = ref([])
+
+onUpdated(() => {
+  latestHtml = input.value;
+});
+
+// 输入框变化
+const onInput = () => {
+  let content = inputRef.value?.innerHTML;
+  const lLen = latestHtml.length
+  const cLen = content.length
+
+  // 预先写上去了，群聊没有配置相关文字限制，后续不用就删
+  // if (checkTextSize(content)) {
+  //   content = inputRef.value?.innerHTML.substring(0, 10)
+  //   updateInnerHTML(inputRef.value?.innerHTML.substring(0, 10))
+  //   setTimeout(() => {
+  //     // 设置光标在最后
+  //     setRange()
+  //   })
+  //   return
+  // }
+
+  emit('change', content, latestHtml)
+  const aIdx = content.lastIndexOf('@')
+  const userName = latestHtml.slice(aIdx)
+  const isDel = lLen > cLen
+  const isAtName = atUserNames.value.includes(userName)
+  // 表示正在删除 而且有@的
+  if (isAtName && isDel && aIdx !== -1) {
+    content = content.slice(0, aIdx)
+    updateInnerHTML(content)
+    setTimeout(() => {
+      // 设置光标在最后
+      setRange()
+    })
+  }
+  if (content !== latestHtml) {
+    emit("update:input", content)
+  }
+  latestHtml = content;
+
+  const selection = window.getSelection();
+  const range = selection.getRangeAt(0);
+  const previousChar = range.startContainer.textContent.charAt(range.startOffset - 1);
+  if (previousChar === '@' && !isDel) {
+    emit('triggerAt')
+  }
+};
+
+const checkTextSize = (content) => {
+  const limitSize = appConfig.value.burn_after_reading.group_chat.message_length
+  if (!limitSize || appConfig.value.burn_after_reading.group_chat.status !== 1) return false
+  return content.length > limitSize
+}
+
+const clear = () => {
+  inputRef.value.innerHTML = ""
+  atUserNames.value = []
+}
+
+const updateInnerHTML = (val) => {
+  inputRef.value.innerHTML = val
+}
+
+const addUserName = (name) => {
+  atUserNames.value = Array.from(new Set([...atUserNames.value, name]))
+}
+
+// 把剪切板内容设置到输入内容前面
+const insertAtCursor = (nodes) => {
+  if (!cursorPos) return;
+  const selection = window.getSelection();
+  const range = cursorPos.cloneRange();
+
+  range.deleteContents();
+  nodes.forEach((node) => {
+    range.insertNode(node);
+    range.setStartAfter(node);
+  });
+  range.collapse(false);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  onInput();
+};
+
+const deletePreviousChar = () => {
+  if (!cursorPos) return;
+  const range = cursorPos.cloneRange();
+  const previousChar = range.startContainer.textContent.charAt(range.startOffset - 1);
+  if (previousChar === "@") {
+    range.setStart(range.startContainer, range.startOffset - 1);
+    range.deleteContents();
+  }
+}
+
+const updateCursorPosition = () => {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    cursorPos = selection.getRangeAt(0);
+  }
+}
+
+const onSelectionChange = () => {
+  if (inputRef.value === document.activeElement) {
+    updateCursorPosition();
+  }
+};
+
+// 设置光标位置  这里是到最后
+const setRange = () => {
+  const range = document.createRange();
+  range.selectNodeContents(inputRef.value);
+  range.collapse(false);
+  let sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+
+const lock = ref(false)
+// 中文输入开始
+const compositStart = (e) => {
+  lock.value = false
+  setRange()
+}
+// 输入中文结束时
+const compositEnd = (e) => {
+  lock.value = true
+  onInput()
+}
+const pc_or_mobile_flag = ref(false)
+const handle_send_message_keyDown = (event) => {
+  const keyCode = event.keyCode || event.which || event.charCode;
+  //组合键 Enter+Ctrl或者Enter+Alt进行换行
+  if((event.ctrlKey||event.altKey)&&keyCode === 13){
+    inputRefRange()
+    return 
+  }
+  if (keyCode === 13&&!pc_or_mobile_flag.value) {
+    event.preventDefault(); //阻止回车键默认行为，内容为空时，不允许按空格
+    if(!event.shiftKey && props.input.length){
+      emit('handle_send_message_keyDown')
+    }
+    return false
+  }
+};
+const inputRefRange = () => { 
+  var range = document.createRange();
+  //返回用户当前的选区
+  var sel =  window.getSelection();
+  //获取当前光标位置
+  
+  var content = inputRef.value.innerHTML
+
+
+  setTimeout(() => {
+    var offset = sel.focusOffset
+    console.log('offsetoffsetoffset----:',offset)
+    console.log(content.slice(0,offset),content.slice(offset))
+    inputRef.value.innerHTML = content.slice(0,offset)+'\n'+content.slice(offset)
+    if(!inputRef.value.innerHTML)inputRef.value.innerHTML = '\n'
+    console.log(inputRef.value.innerHTML,'11111111111111111')
+    //设置光标为当前位置
+    console.log('inputRef.value.childNodes[0]',inputRef.value.childNodes[0])
+    console.log('offset+1',offset+1)
+    range.setStart(inputRef.value.childNodes[0], offset+1);
+    //使得选区(光标)开始与结束位置重叠
+    range.collapse(false);
+    //移除现有其他的选区
+    sel.removeAllRanges();
+    //加入光标的选区
+    sel.addRange(range);
+  }, 0);
+}
+onMounted(() => {
+  document.addEventListener('selectionchange', onSelectionChange);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('selectionchange', onSelectionChange);
+});
+
+defineExpose({
+  inputRef,
+  insertAtCursor,
+  deletePreviousChar,
+  updateInnerHTML,
+  addUserName,
+  clear
+});
+</script>
+
+<style lang="less" scoped>
+.custom_rich_input {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  color: rgb(50, 50, 51);
+  font-size: 1rem;
+  transition: all 0.3s;
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  cursor: text;
+  min-height: 30px;
+  max-height: 160px;
+  user-select: auto;
+  // fix safari input
+  -webkit-user-select: auto;
+
+  :deep(.face_el) {
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.placeholderDiv:empty::before{
+    color:lightgrey;
+    content:attr(placeholder);
+}
+.needsclick {
+  &::before {
+    position: absolute;
+    content: attr('placeholder');
+    color: rgb(169, 169, 169);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar/index.vue b/src/components/NavBar/index.vue
new file mode 100644
index 0000000..f59e2ff
--- /dev/null
+++ b/src/components/NavBar/index.vue
@@ -0,0 +1,71 @@
+<script setup >
+import { useAttrs ,defineProps,reactive,nextTick,useSlots}  from 'vue'
+const attrs = useAttrs()
+const slots = useSlots()
+//views_grade 设置当前视图级别 值为 firstly_view secondary_view thirdly_view fourth_view fifth_view
+const props = defineProps(['views_grade', 'forceShowArrow'])
+
+const nav_ref = ref()
+//当前屏幕宽度
+const screen_width = ref(0)
+//是否显示箭头
+const isShow_arrow =ref(false)
+
+//对应视图设置
+const views = reactive({
+  firstly_view:()=>{
+      nav_ref.value.$el.classList.add('firstly_view_nav')
+  },
+  secondary_view:()=>{
+    //控制返回箭头显示
+    const get_width = ()=>window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    isShow_arrow.value = props.forceShowArrow || get_width() <= 750;
+    window.addEventListener('resize', function() {
+      screen_width.value = get_width()
+      isShow_arrow.value = props.forceShowArrow || screen_width.value <= 750;
+    });
+    //添加对应
+    nav_ref.value.$el.classList.add('secondary_view_nav')
+  },
+  thirdly_view: ()=>{
+    nav_ref.value.$el.classList.add('thirdly_view_nav')
+
+  },
+  fourth_view:()=>{
+    nav_ref.value.$el.classList.add('fourth_view_nav')
+  },
+  fifth_view:()=>{
+    nav_ref.value.$el.classList.add('fifth_view_nav')
+  },
+})
+//初始化级别
+onMounted(()=>{
+  try{
+    views[props.views_grade]()
+  }catch (e) {
+      console.warn(e)
+      console.log("views_grade:",props.views_grade)
+  }
+})
+//执行对应级别
+</script>
+
+<template>
+  <van-nav-bar
+    ref = nav_ref
+    v-bind="attrs"
+    fixed
+    :left-arrow="isShow_arrow"
+  >
+    <template v-for="(key,index) in Object.keys(slots)" :key=index #[key]>
+        <slot :name="key" />
+    </template>
+  </van-nav-bar>
+
+</template>
+
+<style scoped>
+:deep(.van-icon) {
+  font-size: 1.25rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/applyDialog/index.vue b/src/components/applyDialog/index.vue
new file mode 100644
index 0000000..8e438d3
--- /dev/null
+++ b/src/components/applyDialog/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="dialog-wrap">
+    <van-dialog className="custom-dialog" v-model:show="visible" :title="$t('dialog_tip1')">
+      <template #default>
+        <div class="content">
+          <van-field v-model="inputVal" label="" type="textarea" autosize show-word-limit rows="3" maxlength="50"
+            :placeholder="$t('remarkStrHint')" />
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button 
+            class="btn" 
+            type="default" 
+            @click="handleCancel"
+          >{{ t("cancel") }}</van-button>
+          <div class="line"></div>
+          <van-button
+            class="btn btn1"
+            type="default"
+            @click="handleSubmit"
+          >{{ t("confirm") }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from "vue-i18n";
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  remark: {
+    type: String,
+    default: ''
+  },
+})
+const emit = defineEmits(['update:modelValue', 'getList'])
+const inputVal = ref('')
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+watch(() => visible.value, () => {
+  inputVal.value = props.remark
+})
+
+const handleCancel = () => {
+  emit('update:modelValue', false)
+  inputVal.value = ''
+}
+const handleSubmit = () => {
+  emit('getList', inputVal.value)
+}
+</script>
+
+<style scoped lang="less">
+.dialog-wrap {
+  :deep(.van-dialog) {
+    padding: 22px 0 0 0;
+
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 18px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 0 16px;
+
+      .content {
+        margin-bottom: 76px;
+        height: 64px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .btn1 {
+      color: #0095F6 !important;
+    }
+
+    .diable-btn {
+      opacity: 0.4 !important;
+    }
+  }
+
+  :deep(.van-cell) {
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: rgba(28, 5, 5, 0.03);
+    padding: 13.5px 12px 4px;
+
+    .van-field__control {
+      height: 21px;
+      color: #1B1B22;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+
+  :deep(.van-field__word-limit) {
+    color: #1B1B2266;
+    font-size: 0.75rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/avatar/index.vue b/src/components/avatar/index.vue
new file mode 100644
index 0000000..2acbdaf
--- /dev/null
+++ b/src/components/avatar/index.vue
@@ -0,0 +1,85 @@
+<template>
+    <van-image
+        class="vant_img"
+        v-if="props.url"
+        round
+        :width="props.width"
+        :height="props.height"
+        :src="props.url"
+        :show-error="false"
+        @error="handleError"
+    />
+    <div v-else :style="styles" class="avatar" :class="{group: isGroup}">
+        <img v-if="isGroup" src="/src/assets/dialog/groupChat.png" :width="props.width" :height="props.height" alt="">
+        <span v-else>{{ nameHandle(props.name) }}</span>
+    </div>
+</template>
+<script setup>
+import { defineProps, onMounted } from "vue"
+import { getAvatarColor, switchCdnLoadSource } from "@/utils/tools"
+import defaultAvatar from "@/assets/mine-avatar.png";
+
+const emits = defineEmits(['updateUrl'])
+const props = defineProps({
+    width: {
+        type: String,
+        default: ''
+    },
+    height: {
+        type: String,
+        default: ''
+    },
+    url: {
+        type: String,
+        default: ''
+    },
+    isGroup: {
+        type: Boolean,
+        default: false
+    },
+    name: {
+        type: String,
+        default: ''
+    },
+    defaultAvatarStr: {
+        type: String,
+        default: ''
+    },
+})
+const styles = ref({})
+onMounted(() => {
+    styles.value = {
+        width: props.width + 'px',
+        height: props.height + 'px',
+        backgroundColor: getAvatarColor(props.name),
+        borderRadius: '50%'
+    }
+})
+const nameHandle = (name) => {
+    let nameFirst = (name.length && name[0]) || ''
+    let rgx = /^[a-zA-Z]+$/
+    if (nameFirst && rgx.test(nameFirst)) {
+        nameFirst = nameFirst.toUpperCase()
+    }
+    return nameFirst
+}
+const handleError = async () => {
+    const validUrl = await switchCdnLoadSource(props.url)
+    const resUrl = validUrl || (props.defaultAvatarStr || defaultAvatar)
+    emits('updateUrl', resUrl)
+}
+</script>
+<style lang="less" scoped>
+.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-weight: 700;
+}
+.group {
+    img {
+        border-radius: 50%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/bindactionSheet/index.vue b/src/components/bindactionSheet/index.vue
new file mode 100644
index 0000000..4876570
--- /dev/null
+++ b/src/components/bindactionSheet/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <van-action-sheet v-model:show="props.show" :actions="props.actions" :cancel-text="$t('cancel')"
+    :title="$t('pleaseBindTip1') + $t('phoneNumber') + $t('orStr') + $t('email')" close-on-click-action
+    :closeable="false" @cancel="cancel" @select="selectClick" />
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { ref, onMounted, reactive, computed, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from "vue-i18n"
+import { useUserStore } from "@/stores/user";
+const router = useRouter()
+const userStore = useUserStore()
+const { t } = useI18n()
+const { userInfo, appConfig } = storeToRefs(userStore)
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  actions: {
+    type: Array,
+    default: () => ([
+      // { type: 'phone', name: t('bindPhone'), color: '#0095F6' },
+      // { type: 'email', name: t('bind_email'), color: '#0095F6' },
+      // { type: 'logout', name: t('confirmExit'), color: '#FC5A50' },
+    ])
+  }
+})
+const emits = defineEmits(['close'])
+
+const title = ref('')
+
+const cancel = () => {
+  emits('close')
+}
+const selectClick = (item) => {
+  if (item.type === 'email') {
+    router.push({ path: '/home/my/security/bindEmail' })
+  } else if (item.type === 'phone') {
+    router.push({ path: '/home/my/security/bindPhone' })
+  } else if (item.type === 'logout') {
+    emits('logout')
+  }
+}
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/components/cdnSource/index.vue b/src/components/cdnSource/index.vue
new file mode 100644
index 0000000..6c4a716
--- /dev/null
+++ b/src/components/cdnSource/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="cdn-source-wrapper">
+    <slot name="cdnSlot" :cdnUrl="checkedUrl"></slot>
+  </div>
+</template>
+<script setup>
+import { ref, onBeforeMount, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user"
+import { checkImgUrlLoadSuccess, checkVideoUrlLoadSuccess, switchCdnLoadSource } from "@/utils/tools"
+
+const userStore = useUserStore()
+const { appConfig } = storeToRefs(userStore)
+const emits = defineEmits(['updateSourceUrl'])
+const props = defineProps({
+  defaultUrl: {
+    type: String,
+    default: ''
+  },
+  // 资源的类型 图片image 视频 video
+  sourceType: {
+    type: String,
+    default: 'image'
+  },
+  source: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// 用来存检查过的url
+const checkedUrl = ref('')
+watch(() => props.defaultUrl, (val) => {
+  checkedUrl.value = val
+})
+
+onBeforeMount(async () => {
+  // 如果是默认图片，就直接使用默认图片，这个图片是全局的
+  if (!props.defaultUrl || props.defaultUrl.endsWith('groupChat.png')) {
+    checkedUrl.value = props.defaultUrl
+    return
+  }
+  // let failUrl = props.defaultUrl.replace('https://openim-priv-tmp.s3.ap-northeast-1.amazonaws.com', 'https://openim-priv-tmp.s3.ap-northeast-1.amazonaws.cm')
+  // console.log('source::::', props)
+  // failUrl = failUrl.replace('https://openim-priv.oss-cn-shenzhen.aliyuncs.com', 'https://openim-priv.oss-cn-shenzhen.aliyuncs.cm')
+  // // console.log('onBeforeMount::::', failUrl)
+  // const needCheckUrl = failUrl
+  const needCheckUrl = props.defaultUrl
+
+  // 图片类型，先检查图片url是否能正常访问，能正常访问就展示
+  if (props.sourceType === 'image') {
+    const successImg = await checkImgUrlLoadSuccess(needCheckUrl)
+    if (successImg) {
+      checkedUrl.value = needCheckUrl
+      return
+    }
+    // 不能正常访问就找到可以正常访问的url
+    checkedUrl.value = await switchCdnLoadSource(props.defaultUrl) || ''
+    // 把真实的图片地址更新(不推荐这么搞，有时间再改)
+    if (props.source) {
+      props.source.pictureElem.sourcePicture.url = checkedUrl.value
+      props.source.pictureElem.snapshotPicture.url = checkedUrl.value
+      props.source.pictureElem.bigPicture.url = checkedUrl.value
+    }
+    emits('updateSourceUrl', checkedUrl.value)
+  }
+
+  // 视频类型，检查图片的snapshot，跟图片一样
+  if (props.sourceType === 'video') {
+    // 这里是对视频的截图做处理
+    const successVideoSnapShot = await checkImgUrlLoadSuccess(needCheckUrl)
+    if (successVideoSnapShot) {
+      checkedUrl.value = needCheckUrl
+    } else {
+      checkedUrl.value = await switchCdnLoadSource(props.defaultUrl, 'video') || ''
+    }
+    let validVideoUrl = ''
+    if (props.source) {
+      if (props.source.videoElem) {
+        // 对真实视频做处理
+        const videoUrl = props.source.videoElem.videoUrl
+        const successVideo = await checkVideoUrlLoadSuccess(videoUrl)
+        // 如果视频正常，就不处理
+        if (!successVideo) {
+          validVideoUrl = await switchCdnLoadSource(videoUrl, 'video') || ''
+          props.source.videoElem.videoUrl = validVideoUrl
+        } else {
+          validVideoUrl = videoUrl
+        }
+      }
+      const { customVideoUrl } = props.source
+      if (customVideoUrl) {
+        const successVideo = await checkVideoUrlLoadSuccess(customVideoUrl)
+        if (!successVideo) {
+          validVideoUrl = await switchCdnLoadSource(customVideoUrl, 'video')
+        } else {
+          validVideoUrl = videoUrl
+        }
+      }
+    }
+    
+    emits('updateSourceUrl', checkedUrl.value, validVideoUrl)
+  }
+})
+
+</script>
+<style scoped lang="less">
+</style>
\ No newline at end of file
diff --git a/src/components/chart/dark.js b/src/components/chart/dark.js
new file mode 100644
index 0000000..32d7b0d
--- /dev/null
+++ b/src/components/chart/dark.js
@@ -0,0 +1,179 @@
+const contrastColor = 'rgba(255, 255, 255, 0.65)'
+const backgroundColor = 'transparent'
+const axisCommon = function () {
+  return {
+    axisLine: {
+      lineStyle: {
+        color: contrastColor,
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#484753',
+      },
+    },
+    splitArea: {
+      areaStyle: {
+        color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)'],
+      },
+    },
+    minorSplitLine: {
+      lineStyle: {
+        color: '#20203B',
+      },
+    },
+  }
+}
+
+const colorPalette = [
+  '#4992ff',
+  '#7cffb2',
+  '#fddd60',
+  '#ff6e76',
+  '#58d9f9',
+  '#05c091',
+  '#ff8a45',
+  '#8d48e3',
+  '#dd79ff',
+]
+const theme = {
+  color: colorPalette,
+  backgroundColor,
+  axisPointer: {
+    lineStyle: {
+      color: '#817f91',
+    },
+    crossStyle: {
+      color: '#817f91',
+    },
+    label: {
+      // TODO Contrast of label backgorundColor
+      color: '#fff',
+    },
+  },
+  legend: {
+    textStyle: {
+      color: contrastColor,
+    },
+  },
+  textStyle: {
+    color: contrastColor,
+  },
+  title: {
+    textStyle: {
+      color: 'red',
+    },
+    subtextStyle: {
+      color: 'rgba(255, 255, 255, 0.65)',
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: contrastColor,
+    },
+  },
+  dataZoom: {
+    borderColor: '#71708A',
+    textStyle: {
+      color: contrastColor,
+    },
+    brushStyle: {
+      color: 'rgba(135,163,206,0.3)',
+    },
+    handleStyle: {
+      color: '#353450',
+      borderColor: '#C5CBE3',
+    },
+    moveHandleStyle: {
+      color: '#B0B6C3',
+      opacity: 0.3,
+    },
+    fillerColor: 'rgba(135,163,206,0.2)',
+    emphasis: {
+      handleStyle: {
+        borderColor: '#91B7F2',
+        color: '#4D587D',
+      },
+      moveHandleStyle: {
+        color: '#636D9A',
+        opacity: 0.7,
+      },
+    },
+    dataBackground: {
+      lineStyle: {
+        color: '#71708A',
+        width: 1,
+      },
+      areaStyle: {
+        color: '#71708A',
+      },
+    },
+    selectedDataBackground: {
+      lineStyle: {
+        color: '#87A3CE',
+      },
+      areaStyle: {
+        color: '#87A3CE',
+      },
+    },
+  },
+  visualMap: {
+    textStyle: {
+      color: contrastColor,
+    },
+  },
+  timeline: {
+    lineStyle: {
+      color: contrastColor,
+    },
+    label: {
+      color: contrastColor,
+    },
+    controlStyle: {
+      color: contrastColor,
+      borderColor: contrastColor,
+    },
+  },
+  calendar: {
+    itemStyle: {
+      color: backgroundColor,
+    },
+    dayLabel: {
+      color: contrastColor,
+    },
+    monthLabel: {
+      color: contrastColor,
+    },
+    yearLabel: {
+      color: contrastColor,
+    },
+  },
+  timeAxis: axisCommon(),
+  logAxis: axisCommon(),
+  valueAxis: axisCommon(),
+  categoryAxis: axisCommon(),
+
+  line: {
+    symbol: 'circle',
+  },
+  graph: {
+    color: colorPalette,
+  },
+  gauge: {
+    title: {
+      color: contrastColor,
+    },
+  },
+  candlestick: {
+    itemStyle: {
+      color: '#FD1050',
+      color0: '#0CF49B',
+      borderColor: '#FD1050',
+      borderColor0: '#0CF49B',
+    },
+  },
+}
+
+theme.categoryAxis.splitLine.show = false
+
+export default theme
diff --git a/src/components/chart/index.vue b/src/components/chart/index.vue
new file mode 100644
index 0000000..c4c7a74
--- /dev/null
+++ b/src/components/chart/index.vue
@@ -0,0 +1,64 @@
+<script setup >
+import * as echarts from 'echarts'
+import { debounce } from 'lodash-es'
+import { addListener, removeListener } from 'resize-detector'
+import dark from './dark'
+
+const props = defineProps({
+  option: Object,
+})
+
+echarts.registerTheme('dark-chart', dark)
+
+const chartDom = ref()
+let chart  = null
+const isRealDark = inject('isRealDark', ref(false))
+function resizeChart() {
+  chart?.resize()
+}
+
+const resize = debounce(resizeChart, 300)
+
+function disposeChart() {
+  if (chartDom.value)
+    removeListener(chartDom.value, resize)
+
+  chart?.dispose()
+  chart = null
+}
+
+function initChart() {
+  disposeChart()
+  if (chartDom.value) {
+    // init echarts
+    chart = echarts.init(chartDom.value, isRealDark.value ? 'dark-chart' : undefined)
+    chart.setOption(props.option)
+    addListener(chartDom.value, resize)
+  }
+}
+
+watch(isRealDark, () => {
+  initChart()
+}, {
+  flush: 'post',
+})
+
+onMounted(() => {
+  watch(() => props.option, () => {
+    chart?.setOption(props.option)
+  }, {
+    deep: true,
+    flush: 'post',
+  })
+
+  initChart()
+})
+
+onUnmounted(() => {
+  disposeChart()
+})
+</script>
+
+<template>
+  <div ref="chartDom" />
+</template>
diff --git a/src/components/chart/typing.ts b/src/components/chart/typing.ts
new file mode 100644
index 0000000..08a54d9
--- /dev/null
+++ b/src/components/chart/typing.ts
@@ -0,0 +1,15 @@
+export interface SeriesDataItem {
+  x: any
+  y: any
+}
+
+export interface RadarDataItem {
+  label: string
+  name: string
+  value: string | number
+}
+
+export interface RadarIndicatorItem {
+  name: string
+  max: number
+}
diff --git a/src/components/codeInput/index.vue b/src/components/codeInput/index.vue
new file mode 100644
index 0000000..cc41f0c
--- /dev/null
+++ b/src/components/codeInput/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="validate">
+    <label :for="id" class="validate_label">
+      <div class="validate_item"
+        v-for="(item,index) in prop.len"
+        :key="item"
+        :class="{active:hold && lastItem === index, focus: hold}"
+      >
+        {{ prop.inputType === 'password' && val[index] ? '*' : val[index] }}
+        <div class="holder"></div>
+      </div>
+    </label>
+    <input
+      class="validate_inp"
+      type="text"
+      :id="id"
+      @focus="focus"
+      @blur="blur"
+      v-model="val"
+      :maxlength="prop.len"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch, onMounted } from "vue";
+
+// 验证码长度 默认值为
+const prop = defineProps({
+  len: {
+    type: Number,
+    default: 4
+  },
+  inputType: {
+    type: String,
+    default: 'text'
+  }
+})
+console.log(prop.inputType, 'vvv')
+// 接收两个事件
+//  finish 当前值长度 === 验证码长度
+//  change 当前值修改
+const emit = defineEmits(["finish", "change",'handleCodeClose'])
+// id全局唯一 防止重复使用随机数生成
+// 这里比较有意思 单独说一下
+// Math.random() 生成0-1的随机数
+// 将他们转成String类型, 并且使用split进行切割 取出后半部分小数
+// 将取出的数字再转换为 Number类型 调用Number.toString(16) 将他转为16进制数字 这时候随机id就搞定了
+const id = ref(Number(String(Math.random()).split(".")[1]).toString(16))
+
+// input绑定值
+const val = ref("")
+// 根据值长度进行计算当前应该被选中框的下标
+const lastItem = computed(() => {
+  return val.value.toString().length
+})
+// input是否为聚焦状态
+const hold = ref(false)
+// 观察值的改变并且抛出 "finish", "change" 事件
+watch([val], () => {
+  const isNonNumeric = /\D/.test(val.value); // 使用正则表达式 /\D/ 来匹配非数字字符
+  if (isNonNumeric) {
+    val.value = ''
+    return;
+  }
+  emit("change", val.value)
+  if (lastItem.value >= prop.len) {
+    emit("finish",val.value)
+  }
+})
+// 聚焦状态下 修改hold为true
+const focus = () => {
+  hold.value = true
+}
+// 失焦状态下 修改hold为false
+const blur = () => {
+  hold.value = false
+}
+
+onMounted(() => {
+  focus()
+  setTimeout(() => {
+    document.querySelector('.validate_inp')?.focus()
+  }, 1000)
+})
+
+const handleCodeClose = () => {
+  // 关闭弹窗的时候 清空input
+  val.value = ''
+}
+defineExpose({handleCodeClose})
+</script>
+
+<style lang="less" scoped>
+// 给input 定位出屏幕外
+.validate_inp{
+  position: fixed;
+  top: -520px;
+  left: -520px;
+}
+.validate {
+  display: flex;
+  justify-content: center;
+}
+.validate_label {
+  display: flex;
+  align-items: center;
+
+  .validate_item {
+    cursor: text;
+    display: flex;
+    width: 52px;
+    height: 60px;
+    font-size: 2.25rem;
+    border: none;
+    color: #0095F6;
+    background: #F2F4F5;
+    margin-right: 17px;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+    border-radius: 10px;
+    font-weight: 500;
+    .holder{
+      width: 2px;
+      height: 50%;
+      background: #0095F6;
+      animation: holderSnick 600ms infinite alternate;
+      display: none;
+    }
+    // 获取焦点的通用状态
+    &.focus{
+      border-color: #93b2e8;
+    }
+    // 当前为应该输入的框的状态
+    &.active {
+      border-color: #1963e8;
+      // 展示光标
+      .holder{
+        display: block;
+      }
+    }
+  }
+}
+
+// 光标动画
+@keyframes holderSnick {
+  0%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+</style>
+
diff --git a/src/components/commonDialog/index.vue b/src/components/commonDialog/index.vue
new file mode 100644
index 0000000..fb05eae
--- /dev/null
+++ b/src/components/commonDialog/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="dialog-wrap">
+    <van-dialog className="custom-dialog" v-model:show="visible" :title="title">
+      <template #default>
+        <div class="content">
+          {{ content }}
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn" :class="footerClass">
+          <van-button class="btn" type="default" @click="handleCancel">{{ okText }}</van-button>
+          <div class="line"></div>
+          <van-button class="btn btn1" type="default" @click="handleSubmit">{{ cancelText }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  content: {
+    type: String,
+    default: ''
+  },
+  okText: {
+    type: String,
+    default: defaultOkText
+  },
+  cancelText: {
+    type: String,
+    default: defaultCancelText
+  },
+  footerClass: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:modelValue', 'onOk', 'onCancel'])
+const inputVal = ref('')
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+watch(() => visible.value, () => {
+  inputVal.value = props.remark
+})
+
+const handleCancel = () => {
+  emit('update:modelValue', false)
+  emit('onCancel')
+}
+const handleSubmit = () => {
+  emit('onOk')
+}
+</script>
+<script>
+import { i18n } from '@/lang/index'
+const { t } = i18n.global
+
+const defaultCancelText = t('cancel')
+const defaultOkText = t('determine')
+</script>
+<style scoped lang="less">
+.dialog-wrap {
+  :deep(.van-dialog) {
+    padding: 24px 0 0 0;
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 16px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 0 16px !important;
+
+      .content {
+        margin-bottom: 22px;
+        // height: 64px;
+        font-size: 0.875rem;
+        color: #76767A;
+        text-align: center;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 48px;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 48px;
+      background: #F5F8FF;
+    }
+
+    .btn1 {
+      color: #0095F6 !important;
+    }
+    .diable-btn {
+      opacity: 0.4 !important;
+    }
+  }
+
+  :deep(.van-cell) {
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: rgba(28, 5, 5, 0.03);
+    padding: 13.5px 12px;
+
+    .van-field__control {
+      height: 21px;
+      color: #1B1B22;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+}</style>
\ No newline at end of file
diff --git a/src/components/commonFooter/ChatFooterAction.vue b/src/components/commonFooter/ChatFooterAction.vue
new file mode 100644
index 0000000..9cd439f
--- /dev/null
+++ b/src/components/commonFooter/ChatFooterAction.vue
@@ -0,0 +1,79 @@
+<template>
+  <div ref="target" class="bg-[#F0F2F6]">
+    <van-grid class="px-3 py-3" :border="false" :column-num="4">
+      <van-grid-item v-for="action in actionList" :key="action.type" clickable :icon="action.icon" :text="action.text"
+        @click="clickAction(action)" />
+    </van-grid>
+    <van-uploader v-show="false" ref="uploaderRef" :accept="uploadChooseOptions.accept"
+      :capture="uploadChooseOptions.capture" :preview-image="false" multiple max-count="9"
+      :after-read="afterReadFile" />
+    <div class="dac"></div>
+  </div>
+</template>
+
+<script setup>
+import image from '@/assets/img/msg_pic.svg'
+import camera from '@/assets/img/msg_camera.svg'
+// import redPkt from '@/assets/img/msg_redPkt.svg'
+import { onClickOutside } from '@vueuse/core'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const actionList = [
+  {
+    text: t('picture'),
+    icon: image,
+    type: 0,
+  },
+  {
+    text: t('video'),
+    icon: camera,
+    type: 1,
+  },
+]
+const emit = defineEmits(['closeActionBar', 'getFile']);
+
+const uploadChooseOptions = reactive({
+  accept: '*',
+  capture: undefined
+})
+const target = ref(null)
+const uploaderRef = ref()
+
+onClickOutside(target, () => emit('closeActionBar'), {
+  ignore: ['.van-overlay', '.van-action-sheet__content']
+})
+
+const clickAction = ({ type }) => {
+  console.log(type);
+  uploadChooseOptions.accept = type === 0 ? 'image/*' : 'video/*'
+  // if (type === 1) {
+  //   uploadChooseOptions.capture = type === 1 ? 'camera' : 'camcorder'
+  // }
+  nextTick(() => uploaderRef.value?.chooseFile())
+
+  // emit('closeActionBar')
+}
+
+const afterReadFile = (data) => {
+  if (!Array.isArray(data)) {
+    data = [data]
+  }
+  data.map(item => {
+    emit('getFile', item)
+  })
+}
+
+</script>
+
+<style lang='less' scoped>
+:deep(.van-icon__image) {
+  width: 48px;
+  height: 48px;
+}
+
+:deep(.van-grid-item__content) {
+  background: none;
+  padding: 6px 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/commonFooter/emoji.vue b/src/components/commonFooter/emoji.vue
new file mode 100644
index 0000000..7f645b5
--- /dev/null
+++ b/src/components/commonFooter/emoji.vue
@@ -0,0 +1,49 @@
+<script setup>
+import data from '@emoji-mart/data'
+import { Picker } from 'emoji-mart'
+import { ref, onMounted, defineProps } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+const { msg } = defineProps(['msg'])
+
+const emoji_ref = ref()
+
+onMounted(async () => {
+  const lang = await import('@emoji-mart/data/i18n/zh.json')
+  //表情插件初始化
+  new Picker({
+    data,
+    // locale: "zh",
+    i18n: lang.default,
+    searchPosition: "none",
+    parent: emoji_ref.value,
+    set: "",
+    onEmojiSelect: e => {
+      // msg.textElem.content += e.native
+      emit('onEmojiselect', e.native)
+    }
+  })
+})
+const emit = defineEmits(['closeEmoji', 'onEmojiselect']);
+
+onClickOutside(emoji_ref, () => emit('closeEmoji'), {
+})
+
+</script>
+
+<template>
+  <div class="emoji" ref="emoji_ref">
+
+  </div>
+</template>
+
+<style scoped>
+.emoji {
+  width: 100vw;
+  height: 300px;
+  padding: 10px 0;
+
+  .search {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/commonFooter/index.vue b/src/components/commonFooter/index.vue
new file mode 100644
index 0000000..59a81c4
--- /dev/null
+++ b/src/components/commonFooter/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="chat_footer" class="privateChat_footer">
+    <van-field v-model.trim="messageContent" rows="1" :autosize="{ maxHeight: 160, minHeight: 30 }" label=""
+      type="textarea" placeholder="" class="msg_txt" @keydown="handleSendMessage">
+      <template #left-icon>
+        <div class="icon_recording" @click="recorderOpen">
+          <img src="@/assets/img/msg_recording.svg" alt="">
+        </div>
+      </template>
+    </van-field>
+    <van-icon name="smile-o" @click="handleSwitchEmoji" />
+    <img v-show="messageContent" class="icon_send" @click="switchTextMessage" :src="send" alt="">
+    <van-icon name="add-o" v-show="!messageContent" @click="clickAddBtn" />
+  </div>
+  <emoji v-show="showEmoji" @closeEmoji="closeEmoji" @onEmojiselect="handleEmojiSelect"></emoji>
+  <ChatFooterAction v-show="showActionBar" @closeActionBar="closeActionBar" @getFile="getFile" />
+</template>
+
+<script setup>
+import send from '@/assets/img/msg_Vector.svg'
+import emoji from './emoji.vue'
+import ChatFooterAction from './ChatFooterAction.vue';
+// import { useThrottleFn } from '@vueuse/core';
+// import useConversationStore from '@/store/modules/conversation';
+import { feedbackToast } from '@/utils/common';
+import emitter from "@/utils/events";
+// import { checkIsSafari } from '@/utils/common';
+import useCreateNomalMessage from './useCreateNomalMessage'
+import useCreateFileMessage from './useCreateFileMessage'
+// import { IMSDK } from '@/utils/imCommon';
+import { useI18n } from "vue-i18n"
+
+
+const emit = defineEmits(['sendMessageContent']);
+const props = defineProps({
+  sendMemberList: {
+    type: Array,
+    default: () => ([])
+  },
+})
+const inputRef = ref();
+const { t } = useI18n()
+// const conversationStore = useConversationStore();
+
+// message
+const messageContent = ref('')
+
+const { createFileMessage } = useCreateFileMessage()
+
+const { switchNomalMessage } = useCreateNomalMessage({
+  messageContent,
+});
+
+const showAtPop = ref(false)
+//是否展示表情包
+const showEmoji = ref(false)
+
+// const inputChange = useThrottleFn(() => {
+//   if (conversationStore.storeCurrentConversation.conversationType !== 1) {
+//     return;
+//   }
+//   IMSDK.typingStatusUpdate({ recvID: conversationStore.storeCurrentConversation.userID, msgTip: 'yes' })
+// }, 2000)
+
+const handleSendMessage = () => {
+
+}
+
+const recorderOpen = () => {
+
+}
+const handleEmojiSelect = (val) => {
+  // inputRef.value.updateInnerHTML(msg_info.textElem.content)
+}
+//处理表情与媒体切换
+const handleSwitchEmoji = () => {
+  showEmoji.value = !showEmoji.value
+}
+const switchTextMessage = async () => {
+  const message = await switchNomalMessage();
+  if (message) {
+    emit('sendMessageContent', message)
+  }
+}
+
+// action bar
+const showActionBar = ref(false)
+
+const closeActionBar = () => {
+  showActionBar.value = false
+}
+const clickAddBtn = () => {
+  showActionBar.value = !showActionBar.value
+  showEmoji.value = false
+}
+
+const closeEmoji = () => {
+  showEmoji.value = false
+}
+
+const getFile = async (uploadData) => {
+  let messageType = 105;
+  if (uploadData.file?.type.includes('image')) {
+    messageType = 102
+  }
+  if (uploadData.file?.type.includes('video')) {
+    messageType = 104
+  }
+  const { error, message, buffer, snapBuffer } = await createFileMessage(uploadData.file, messageType)
+  if (error || !message) {
+    feedbackToast({ error, message: error })
+    return;
+  }
+  console.log(uploadData, 'ccc')
+  // emit('sendMessageContent', {message, buffer, snapBuffer})
+}
+
+</script>
+
+<style lang='less' scoped>
+.privateChat_footer {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.van-button__content) {
+  width: max-content;
+}
+
+.msg_txt {
+  background: #f5f6fa;
+  border-radius: 10px;
+  padding: 4px;
+  font-size: 1rem;
+  align-items: center;
+}
+
+.van-icon {
+  padding: 0 6px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/commonFooter/useCreateFileMessage.js b/src/components/commonFooter/useCreateFileMessage.js
new file mode 100644
index 0000000..8648fc4
--- /dev/null
+++ b/src/components/commonFooter/useCreateFileMessage.js
@@ -0,0 +1,117 @@
+import { getPicInfo, getMediaDuration, getVideoSnshot } from "@/utils/common";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { showFailToast } from "vant";
+import { useI18n } from "vue-i18n"
+
+export default function useCreateFileMessage() {
+  const IMSDK = getSDK()
+  const { t } = useI18n();
+
+  const getFileData = (data) => {
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader();
+      reader.onload = function () {
+        resolve(reader.result);
+      };
+      reader.readAsArrayBuffer(data);
+    });
+  };
+
+  const getFileType = (name) => {
+    const idx = name.lastIndexOf(".");
+    return name.slice(idx + 1);
+  };
+
+  const getImageMessage = async (file) => {
+    const { width, height } = await getPicInfo(file);
+    const { data: { url } } = await IMSDK.uploadFile({
+      name: file.name,
+      contentType: file.type,
+      uuid: IMSDK.createuuid(),
+      file,
+      size: file.size
+    })
+
+    const baseInfo = {
+      uuid: IMSDK.createuuid(),
+      type: getFileType(file.name),
+      size: file.size,
+      width,
+      height,
+      url: file.url,
+    };
+    const options = {
+      sourcePicture: baseInfo,
+      bigPicture: baseInfo,
+      snapshotPicture: baseInfo,
+      sourcePath: "",
+      file,
+    };
+    return (await IMSDK.createImageMessageByFile(options)).data;
+  };
+
+  const getVideoMessage = async (
+    file,
+    snapShotFile
+  ) => {
+    const { width, height } = await getPicInfo(snapShotFile);
+    const options = {
+      videoFile: file,
+      snapshotFile: snapShotFile,
+      videoPath: "",
+      duration: await getMediaDuration(URL.createObjectURL(file)),
+      videoType: getFileType(file.name),
+      snapshotPath: "",
+      videoUUID: IMSDK.createuuid(),
+      videoUrl: "",
+      videoSize: file.size,
+      snapshotUUID: IMSDK.createuuid(),
+      snapshotSize: snapShotFile.size,
+      snapshotUrl: URL.createObjectURL(snapShotFile),
+      snapshotWidth: width,
+      snapshotHeight: height,
+      snapShotType: getFileType(file.name),
+    };
+    return (await IMSDK.createVideoMessageByFile(options)).data;
+  };
+
+  const createFileMessage = async (
+    file,
+    messageType,
+    duration
+  ) => {
+    let snapShotFile = undefined;
+    if (messageType === 104) {
+      try {
+        snapShotFile = await getVideoSnshot(URL.createObjectURL(file));
+      } catch (error) {
+        showFailToast(t("messageTip.generateImageFailed"));
+        console.error("get video snapShotFile failed: " + error);
+        return {
+          error: "get video snapShotFile failed",
+        };
+      }
+    }
+    switch (messageType) {
+      case 102:
+        return {
+          message: await getImageMessage(file),
+          buffer: await getFileData(file),
+        };
+      case 104:
+        return {
+          message: await getVideoMessage(file, snapShotFile),
+          buffer: await getFileData(file),
+          snapBuffer: await getFileData(snapShotFile),
+        };
+      default:
+        return {
+          error: "message type error",
+        };
+    }
+  };
+
+  return {
+    createFileMessage,
+  };
+}
diff --git a/src/components/commonFooter/useCreateNomalMessage.js b/src/components/commonFooter/useCreateNomalMessage.js
new file mode 100644
index 0000000..0156f69
--- /dev/null
+++ b/src/components/commonFooter/useCreateNomalMessage.js
@@ -0,0 +1,39 @@
+import { feedbackToast } from "@/utils/common";
+import { getCleanText } from "@/utils/imCommon";
+import { getSDK } from "@/utils/openIM";
+const IMSDK = getSDK()
+
+export default function useCreateNomalMessage({
+  messageContent,
+}) {
+
+  const getCleanTextWithBr = () => {
+    let text = messageContent.value;
+    text = text.replace(/<div>/g, "\n").replace(/<\/div>/g, "");
+    return getCleanText(text);
+  };
+
+  const getTextMessage = async () => {
+    const formattedText = messageContent.value;
+    console.log(formattedText);
+
+    return (await IMSDK.createTextMessage(formattedText)).data;
+  };
+
+  const switchNomalMessage = async () => {
+    let message = await getTextMessage();
+    if (!message) {
+      feedbackToast({
+        error: "create message failed",
+        message: "create message failed",
+      });
+      return;
+    }
+    return message;
+  };
+
+  return {
+    switchNomalMessage,
+    getCleanText,
+  };
+}
diff --git a/src/components/commonFooter/useSendMessage.js b/src/components/commonFooter/useSendMessage.js
new file mode 100644
index 0000000..4d8b6e7
--- /dev/null
+++ b/src/components/commonFooter/useSendMessage.js
@@ -0,0 +1,58 @@
+// import useConversationStore from "@/stores/modules/conversation";
+import { useMessageStore } from "@/stores/modules/message";
+// import useUserStore from "@/store/modules/user";
+import emitter from "@/utils/events";
+import { getSDK } from "@/utils/openIM";
+const IMSDK = getSDK()
+// const conversationStore = useConversationStore();
+// const userStore = useUserStore();
+
+export default function useSendMessage() {
+  const messageStore = useMessageStore();
+  const { pushNewMessage } = messageStore;
+  const sendMessage = async ({
+    recvID,
+    groupID,
+    message,
+    // fileArrayBuffer,
+    // snpFileArrayBuffer,
+    needOpreateMessage
+  }) => {
+    needOpreateMessage =
+      needOpreateMessage ?? inCurrentConversation(recvID || groupID);
+
+    if (needOpreateMessage) {
+      pushNewMessage(message);
+      emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false);
+      // updateFrequentContacts();
+    }
+    const options = {
+      recvID: recvID,
+      groupID: groupID,
+      message,
+      // fileArrayBuffer,
+      // snpFileArrayBuffer
+    };
+    try {
+      const { data: successMessage } = await IMSDK.sendMessage(options);
+      // updateOneMessage(successMessage, true);
+    } catch (error) {
+      console.error(error);
+
+      // updateOneMessage({
+      //   ...message,
+      //   status: 3
+      // });
+    }
+  };
+
+  const inCurrentConversation = sourceID =>
+    sourceID
+      ? conversationStore.storeCurrentConversation.userID === sourceID ||
+        conversationStore.storeCurrentConversation.groupID === sourceID
+      : true;
+
+  return {
+    sendMessage
+  };
+}
diff --git a/src/components/commonInput/index.vue b/src/components/commonInput/index.vue
new file mode 100644
index 0000000..b5bc88e
--- /dev/null
+++ b/src/components/commonInput/index.vue
@@ -0,0 +1,278 @@
+<script setup>
+import { ref, defineProps,onMounted } from 'vue'
+import IconTriangle from '../icons/IconTriangle.vue'
+import IconEyeShow from '../icons/IconEyeShow.vue'
+import IconEyeHide from '../icons/IconEyeHide.vue'
+import IconRemove from '../icons/IconRemove.vue'
+import IconRemoveBG from '../icons/IconRemoveBG.vue'
+import SelectAreaCode from '@/components/selectAreaCode.vue'
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const props = defineProps({
+  type: String, // 类型 phone email password
+  className: String,
+  value: String, // 输入框值
+  modelValue: String,
+  placeholder: String, // 提示文字
+  columns: Array, // 区号数据
+  prepend: String | Number,
+  autocomplete: String, // 自动完成
+  isfoucus: Boolean, // 获取焦点
+  maxlength: [String, Number], // 最大长度，可以是 String 或 Number
+  codeTime: Number, // 验证码倒计时时间
+  codeSendStatus: { // 验证码发送状态
+    type: String,
+    default: 'unsent'
+  },
+  codeText: {
+    type: String,
+    default: 'defaultCodeText'
+  },
+  disabledCodeSend: {
+    type: Boolean,
+    default: true
+  }
+})
+const imCodeText = ref(t('getVerifyCode'))
+const inputMaxlength = computed(() => props.type === 'code' ? 6 : props.maxlength)
+
+// Define computed property for the div class
+const computedDivClass = computed(() => {
+  return [
+    'wp-input', // Base class
+    props.className, // Additional class from props
+    props.columns ? 'wp-input-prepend' : '' // Conditional class based on columns
+  ].filter(Boolean); // Filter out empty strings
+});
+
+const emits = defineEmits(['update:modelValue', 'update:prepend', 'abpBlur','onClear','onCodeSend','onCodeFinish'])
+
+const showPicker = ref(false)
+
+const onBlur = () => {
+  emits('abpBlur', props.modelValue)
+}
+const onFocus = () => {
+  if (inputType.value !== '') return
+
+  inputType.value = props.type
+}
+
+const onLeft = () => {
+  showPicker.value = false
+}
+
+const onSelect = (row) => {
+  emits('update:prepend', row.areaCode)
+}
+const onClear = (row) => {
+  emits('onClear', '')
+}
+const inputType = ref('')
+
+onMounted(async ()=> {
+   await nextTick()
+   if(props.isfoucus){
+        onFocus()
+    }
+    // if (props.type==='code') {
+    //   inputType.value ='number'
+    // }
+    // 如果 props.codeText 还未设置，则使用国际化文本作为默认值
+    if (props.codeText === 'defaultCodeText') {
+      imCodeText.value = t('getVerifyCode')
+    } else {
+      imCodeText.value = props.codeText
+    }
+})
+
+const onCodeFinish = () => {
+  emits('onCodeFinish')
+  if (props.codeText) {
+    console.error('props.codeText',props.codeText);
+    imCodeText.value = t("reget")
+  }
+}
+
+// 获取验证码
+const onCodeSend = () => {
+  // 判断手机或邮箱输入框是否有值
+  if(props.disabledCodeSend) return
+  if(props.codeSendStatus === 'sended') return
+  console.log('onCodeSend',1);
+  
+  emits('onCodeSend')
+ }
+ const countDown = ref(null);
+// 验证码倒计时-开始
+ const start = () => {
+  countDown.value.start();
+};
+// 验证码倒计时-重置
+const reset = () => {
+  countDown.value.reset();
+};
+const handleInput = (event) => {
+  let value = event.target.value;
+  emits('update:modelValue', value);
+};
+defineExpose({
+  start,
+  reset
+})
+</script>
+
+<template>
+  <div :class="computedDivClass">
+    <input 
+      class="wp-input-input" 
+      :type="inputType || type" 
+      :placeholder="placeholder || ''" 
+      :value="modelValue"  
+      :maxlength="inputMaxlength"
+      :autocomplete="type === 'password'?'new-password':'off'"
+      @input="handleInput"
+      @blur="onBlur"
+      @focus="onFocus"
+      :class="{
+        'wp-input-padding-max': type === 'code' && codeSendStatus !== 'sended',
+        'wp-input-padding-min': type === 'code' && codeSendStatus === 'sended',
+      }"
+    />
+    <!-- 区号展示 -->
+    <div v-if="columns" class="prepend" @click="showPicker = true"><span class="prepend-value">{{ prepend }}</span> <IconTriangle /></div>
+    <!-- 清除按钮 -->
+    <div class="wp-input-append" :class="{'wp-input-code-prepend': type == 'code'}">
+      <IconRemoveBG v-show="modelValue !== ''" class="wp-input-remove" @click="onClear"></IconRemoveBG>
+      <!-- 密码 -->
+      <div v-if="type === 'password'" class="wp-input-eye">
+        <IconEyeShow v-show="inputType === 'text'" @click="inputType = 'password'"></IconEyeShow>
+        <IconEyeHide v-show="inputType === '' ? type === 'password' : inputType === 'password'" @click="inputType = 'text'"></IconEyeHide>
+      </div>
+      <!-- 验证码按钮 -->
+      <div class="wp-input-code" v-if="type === 'code'" @click="onCodeSend">
+        <span class="code-text" :class="{'code-text-disabled': disabledCodeSend}" v-if="codeSendStatus !== 'sended'">{{ imCodeText }}</span> 
+        <span v-show="codeSendStatus === 'sended'">
+          <van-count-down
+            ref="countDown"
+            millisecond
+            :time="codeTime * 1000"
+            :auto-start="false"
+            format="sss"
+            @finish="onCodeFinish"
+            class="my-count-down"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <!-- 手机区号弹窗 -->
+  <SelectAreaCode v-if="showPicker" @onLeft="onLeft" :columns="columns" @onSelect="onSelect" />
+</template>
+
+<style scoped>
+.wp-input {
+  position: relative;
+}
+.wp-input-label {
+  position: absolute;
+  left: 16px;
+  padding: 0 4px;
+  background-color: #fff;
+  color: var(--40, #A4A4A7);
+  font-family: PingFang SC;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  top: -6px;
+  font-size: 12px; /* ui说这个不跟随系统字体大小变化 */
+}
+.wp-input-input {
+  width: 100%;
+  height: 54px;
+  padding-left: 20px;
+  padding-right: 80px;
+  border: none;
+  /* line-height: 54px; */
+  background-color: #F6F6F6;
+  outline: none;
+  border-radius: 16px;
+}
+.wp-input-padding-max {
+  padding-right: 144px;
+}
+.wp-input-padding-min {
+  padding-right: 114px;
+}
+.wp-input-input::placeholder {
+  color: var(--20, #D1D1D3);
+  font-family: PingFang SC;
+  font-size:var(--size-16px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+.wp-input-prepend .prepend {
+  display: flex;
+  position: absolute;
+  left: 20px;
+  top: 16px;
+  width: 60px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 1.125rem;
+}
+.wp-input-prepend .prepend .prepend-value {
+  font-size: 0.875rem;
+}
+.wp-input-prepend .prepend svg {
+  width: 18px;
+  height: 18px;
+}
+.wp-input.wp-input-prepend .wp-input-input {
+  padding-left: 80px;
+}
+.wp-input-append {
+  position: absolute;
+  right: 16px;
+  top: 0;
+  display: flex;
+  height: 50px;
+  align-items: center;
+}
+.wp-input-remove {
+  width: 16px;
+  height: 16px;
+  /* margin-top: 20px; */
+}
+.wp-input-eye {
+  width: 20px;
+  height: 20px;
+  /* margin-top: 15px; */
+  margin-left: 15px;
+}
+.wp-input-code {
+  padding: 12px;
+  min-width: 72px;
+  background-color: #FFFFFF;
+  border-radius: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 4px 0 0 16px;
+}
+.code-text {
+  font-size:var(--size-16px);
+  color: #538FE1;
+}
+.my-count-down {
+  color:#969799;
+  font-size:12px
+}
+.wp-input-code-prepend {
+  right: 4px;
+}
+.code-text-disabled {
+  color: #969799;
+}
+</style>
diff --git a/src/components/commonLottie/index.vue b/src/components/commonLottie/index.vue
new file mode 100644
index 0000000..8027e00
--- /dev/null
+++ b/src/components/commonLottie/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="common-lottie-wrap"
+    v-if="props.isGroup"
+    :style="{ marginLeft: props.marginLeft + 'px' }"
+  >
+    <div class="box1">
+      <Vue3Lottie
+        :animationData="animationPath"
+        :height="props.height"
+        :width="props.width"
+      ></Vue3Lottie>
+      <div
+        v-if="props.isShowTitle"
+        class="special-title-name"
+        :style="{
+          bottom: props.bottom + 'px',
+          left: props.left + 'px'
+        }"
+      >
+        <div
+          :class="{
+            'group-title-names': props.isGroup === 'group',
+            'admin-title-names': props.isGroup === 'admin'
+          }"
+        >
+          {{
+            `${props.isGroup === "group" ? $t("groupOwner") : $t("groupAdmin")}`
+          }}
+        </div>
+        <div
+          :class="{
+            'group-title-name': props.isGroup === 'group',
+            'admin-title-name': props.isGroup === 'admin'
+          }"
+          >{{ setNameTruncationOmit(props.showName) }}</div
+        >
+      </div>
+    </div>
+    <div class="box2" v-if="isSearchPage">
+      <div class="groupNickName-box" v-if="props.itemOrigin?.groupNickName">
+        <span> {{ $t("gmiTitle") }}</span>
+        <span> {{ props.itemOrigin?.groupNickName }}</span>
+      </div>
+      <div class="nickname-box" v-if="props.itemOrigin?.nickname">
+        <span> {{ $t("nicknames") }}: </span>
+        <span> {{ props.itemOrigin?.nickname }}</span>
+      </div>
+      <div class="nickname-box" v-if="showGroupRemark">
+        <span> {{$t('group_remark')}}: </span>
+        <span> {{ groupRemark || '-' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Vue3Lottie } from "vue3-lottie";
+import { defineComponent, ref, onMounted } from "vue";
+import groupLottie from "../../assets/animation/anim_qunzhu.json";
+import adminLottie from "../../assets/animation/anim_guanliyuan.json";
+import lineDetectionLottie from "../../assets/animation/line-loading.json"; // 线路检测加载动画
+const props = defineProps({
+  isShowTitle: {
+    type: Boolean,
+    default: true
+  },
+  isSearchPage: {
+    type: Boolean,
+    default: false
+  },
+  showGroupRemark: {
+    type: Boolean,
+    default: false
+  },
+  itemOrigin: {
+    type: Object,
+    default: () => {}
+  },
+  isGroup: {
+    type: String,
+    default: ""
+  },
+  width: {
+    type: Number,
+    default: 160
+  },
+  height: {
+    type: Number,
+    default: 22
+  },
+  showName: {
+    type: String,
+    default: ""
+  },
+  bottom: {
+    type: Number,
+    default: 0
+  },
+  left: {
+    type: Number,
+    default: 30
+  },
+  marginLeft: {
+    type: Number,
+    default: 6
+  },
+  isOmit: {
+    type: Boolean,
+    default: true
+  },
+});
+const animationPath = computed(() => {
+  if (props.isGroup === "group") {
+    return groupLottie;
+  }
+  if (props.isGroup === "admin") {
+    return adminLottie;
+  }
+  if (props.isGroup === "line-loading") {
+    return lineDetectionLottie;
+  }
+});
+
+const groupRemark = computed(() => {
+  if(!props.itemOrigin?.ex)return ''
+  if(!JSON.parse(props.itemOrigin.ex || '{}')?.remark)return ''
+  const remark = JSON.parse(props.itemOrigin.ex || '{}').remark?.value
+  return remark
+})
+console.log(`props.itemOrigin `, props.itemOrigin);
+
+// 名称过长时，截断并且添加省略号
+const setNameTruncationOmit = (name) => {
+  let length = 9
+  if(name && name.length > length && props.isOmit) {
+    return name.substring(0, length) + '...';
+  }
+  return name;
+}
+</script>
+
+<style scoped lang="less">
+.common-lottie-wrap {
+  position: relative;
+  margin-left: 10px;
+  width: 100%;
+  .box1 {
+    position: relative;
+    margin-top: 8px;
+    // width: 100%;
+  }
+  .box2 {
+    color: rgba(118, 118, 122, 1);
+    font-size: 0.75rem;
+  }
+  .special-title-name {
+    position: absolute;
+    left: 30px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    width: 200%;
+    // text-overflow: ellipsis;
+    // overflow: hidden;
+    // max-width: calc(100vw - 220px);
+    // width: calc(100% - 60px);
+    // white-space: nowrap;
+  }
+
+  .group-title-name {
+    color: rgba(252, 90, 80, 1);
+    font-size: 1rem;
+    // vertical-align: -1px;
+  }
+  .group-title-names {
+    color: rgba(124, 73, 26, 1);
+    margin-right: 5px;
+    font-size: 0.75rem;
+    width: max-content;
+  }
+  .admin-title-names {
+    color: rgba(63, 111, 177, 1);
+    margin-right: 5px;
+    font-size: 0.75rem;
+    min-width: max-content;
+  }
+  .admin-title-name {
+    color: rgba(250, 152, 55, 1);
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: calc(100vw - 150px);
+  }
+}
+.lottie-animation-container {
+  margin: 0 !important;
+}
+</style>
diff --git a/src/components/commonPay/index.vue b/src/components/commonPay/index.vue
new file mode 100644
index 0000000..afea725
--- /dev/null
+++ b/src/components/commonPay/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="dialog-wrap">
+   
+    <!-- 绑定手机号 -->
+    <van-dialog v-if="!isWithdraw && !userInfo.phone" className="custom-dialog" v-model:show="visible" :title="$t('bindPhone')">
+      <template #default>
+        <div class="content">
+          {{ $t('bind_phone_please') }}
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleCancel">{{ $t('delay_bind') }}</van-button>
+          <div class="line"></div>
+          <van-button class="btn btn1" type="default" @click="handleSubmit">{{ $t('determine') }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+
+     <!-- 绑定支付密码 -->
+     <div v-if="isWithdraw || (!userInfo.has_property_pwd&&userInfo.phone)">
+      <van-dialog className="custom-dialog" v-model:show="visible" :title="$t('dialog_tip1')">
+        <template #default>
+          <div class="content">
+            {{ $t('payTip') }}
+          </div>
+        </template>
+        <template #footer>
+          <div class="dialog-btn">
+            <van-button class="btn" type="default" @click="handleCancel">{{ $t('cancel') }}</van-button>
+            <div class="line"></div>
+            <van-button class="btn btn1" type="default" @click="handleSubmit">{{ $t('go_to_settings') }}</van-button>
+          </div>
+        </template>
+      </van-dialog>
+    </div>
+  </div>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from "vue-i18n";
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  isWithdraw: { // 提现是否设置支付密码判断
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:modelValue', 'getList'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+const handleCancel = () => {
+  emit('update:modelValue', false)
+}
+const handleSubmit = () => {
+  emit('getList', false)
+}
+</script>
+<style scoped lang="less">
+.dialog-wrap {
+  :deep(.van-dialog) {
+    padding: 24px 0 0 0 !important;
+
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 20px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 0 24px !important;
+
+      .content {
+        margin-bottom: 24px;
+        // height: 64px;
+        font-size: 0.875rem;
+        color: rgba(27, 27, 34, 0.6);
+        text-align: left !important;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 48px;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 48px;
+      background: #F5F8FF;
+    }
+
+    .btn1 {
+      color: #0095F6 !important;
+    }
+
+    .diable-btn {
+      opacity: 0.4 !important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/commonPayStep/index.vue b/src/components/commonPayStep/index.vue
new file mode 100644
index 0000000..60e1d62
--- /dev/null
+++ b/src/components/commonPayStep/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="custom-action-sheet">
+    <van-action-sheet v-model:show="visible" title="请输入支付密码">
+      <div class="title-wrap">
+        <div class="title">提现</div>
+        <div class="count" v-if="inputCount > 0">{{ inputCount }}</div>
+      </div>
+      <CodeInput :inputType="'password'" :len="6" class="pay-input" @change="handleCodeChange"></CodeInput>
+    </van-action-sheet>
+  </div>
+</template>
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from "vue-i18n";
+import { CodeInput } from "@/components/index.js";
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  inputCount: {
+    type: Number,
+    default: 0
+  }
+})
+const emit = defineEmits(['update:modelValue', 'getList'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+const handleCancel = () => {
+  emit('update:modelValue', false)
+}
+const handleCodeChange = (val) => {
+  if (val.length === 6) {
+    emit('getList', val)
+  }
+}
+</script>
+<style lang="less" scoped>
+.custom-action-sheet {
+  :deep(.van-action-sheet__header) {
+    line-height: 60px;
+    font-weight: 400;
+  }
+  :deep(.van-action-sheet__content) {
+    padding-bottom: 50px;
+  }
+  :deep(.van-action-sheet__close) {
+    left: 0 !important;
+    right: revert;
+  }
+  .title-wrap {
+    height: 90px;
+    padding: 0 9px;
+    .title {
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 400;
+      height: 22px;
+      text-align: center;
+      color: rgba(118, 118, 122, 1);
+    }
+    .count {
+      font-family: PingFang SC;
+      font-size: 2.25rem;
+      font-weight: 600;
+      height: 50px;
+      text-align: center;
+      color: rgba(0, 0, 0, 1);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/commonPreview/index.vue b/src/components/commonPreview/index.vue
new file mode 100644
index 0000000..5a30cd0
--- /dev/null
+++ b/src/components/commonPreview/index.vue
@@ -0,0 +1,515 @@
+<template>
+  <van-overlay
+    :show="visible"
+    z-index="1000"
+    class-name="special-overlay"
+  >
+    <div
+      class="detailContainer"
+      @click="handeStopPropagation"
+      v-if="visible"
+      >
+      <van-swipe
+        class="muli-swipe"
+        :loop="false"
+        :show-indicators="false"
+        :initial-swipe="props.initialSwipe"
+      >
+        <van-swipe-item
+          class="dc-box"
+          v-for="(item, index) in msgList"
+          style="height: 100%;"
+          :key="item.id"
+        >
+          <template v-if="time !== -1">
+            <img
+              v-if="!item.type.startsWith('video')"
+              class="dc-box-img"
+              :src="item.url"
+              @error="handleError(item, index)"
+            />
+            <!-- 视频组件 -->
+            <video
+              class="video-class vjs-big-play-centered"
+              v-if="item.type.startsWith('video')"
+              controlslist="nofullscreen nodownload noremoteplayback noplaybackrate foobar"
+              x-webkit-airplay=""
+              webkit-playsinline=""
+              playsinline=""
+              controls
+              ref="videoEle"
+              disablePictureInPicture
+              :poster="item.snapshotUrl"
+              @error="handleError(item, index)"
+              @play="handlePlay"
+              @pause="handlePause"
+              @ended="handleEnded"
+            >
+              <source :src="item.url" />
+            </video>
+          </template>
+          <template v-else>
+            <div class="timeout">{{ $t('messageTimeOut') }}</div>
+          </template>
+        </van-swipe-item>
+      </van-swipe>
+      <!-- 下载 -->
+      <div class="download"  v-if="!timeCount">
+        <van-button
+          @click="handleDownLoad"
+          class="btn"
+          size="small"
+          :icon="defaultDownload"
+          round
+          type="default"
+          >{{ $t('download')}}</van-button
+        >
+      </div>
+      <!-- 关闭 -->
+      <div class="close-btn" @click="showCancle">
+        <van-button
+          class="btn"
+          size="small"
+          :icon="closeBtn"
+          round
+          type="default"
+          ></van-button>
+      </div>
+      <!-- 焚烧倒计时 -->
+      <div
+        class="incineration-countdown"
+        v-if="time === -1"
+      >
+        <van-circle
+          :rate="0"
+          :speed="100"
+          :size="32"
+          :color="gradientColor"
+          layer-color="#2e2e2e"
+        >
+          <img
+            class="incineration-svg"
+            src="@/assets/svg/incineration.svg"
+            alt=""
+          />
+          <div class="time">
+            <van-count-down
+              ref="countDown"
+              :auto-start="false"
+              :time="0"
+            />
+          </div>
+        </van-circle>
+      </div>
+      <div
+        class="incineration-countdown"
+        v-if="timeCount > 0 && !isShowBurnTime"
+      >
+        <van-circle
+          v-model:current-rate="currentRate"
+          :rate="rate"
+          :speed="100"
+          :size="32"
+          :color="gradientColor"
+          layer-color="#2e2e2e"
+        >
+          <img
+            class="incineration-svg"
+            src="@/assets/svg/incineration.svg"
+            alt=""
+          />
+          <div class="time">
+            <van-count-down
+              ref="countDown"
+              :auto-start="autoCountdown"
+              :time="timeDown"
+              @change="onCounDown"
+            />
+          </div>
+        </van-circle>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+import { useAttrs, computed, ref, watch, nextTick,onMounted } from "vue";
+import defaultDownload from "@/assets/svg/download.svg";
+import closeBtn from "@/assets/svg/close-white.svg";
+const attrs = useAttrs();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  images: {
+    type: Array,
+    default: () => []
+  },
+  currentId: {
+    type: String,
+    default: ""
+  },
+  initialSwipe: {
+    type: Number,
+    default: 0
+  },
+  time: {
+    type: Number,
+    default: 0
+  },
+  // 原来配置真实的焚毁时间，只有群聊的时候需要传
+  defaultTime: {
+    type: Number,
+    default: 0
+  },
+  currentType: {
+    type: String,
+    default: "image"
+  },
+  isCurrentSend: {
+    type: Boolean,
+    default: false
+  },
+  previewType: {
+    type: String,
+    default: '' // private 私聊 group 群聊 '' 其他
+  }
+});
+// 是否超过 20%
+const isMorethan = ref(false);
+const videoEle = ref(null);
+const countDown = ref(null);
+const msgList = ref([]);
+const timeCount = ref(0);
+const isShowBurnTime = ref(false);
+const currentBurnType = ref("");
+const emit = defineEmits(["update:modelValue", "getList"]);
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  }
+});
+const handlePlay = () => {
+  console.error("视频开始播放");
+  // isVideoPlaying.value = true;
+};
+const handlePause = (event) => {
+  // isVideoPlaying.value = true;
+};
+const handleEnded = (event) => {
+  // isVideoPlaying.value = false;
+};
+
+const autoCountdown = computed(() => {
+  // 如果是图片，点开都会倒计时
+  if (currentBurnType.value === 'image') return true
+  // 如果是视频，如果是私聊点开不倒计时，需要视频播放完成
+  // 如果是群聊，需要直接倒计时
+  return props.previewType !== '' && props.previewType === 'group'
+})
+
+watch(
+  () => visible.value,
+  newVal => {
+    if (visible.value) {
+      console.log('props:::', props)
+      msgList.value = props.images;
+      timeCount.value = props.time;
+      isShowBurnTime.value = props.isCurrentSend;
+      currentBurnType.value = props.currentType;
+      if (props.time > 0) {
+        setTimeout(() => {
+          // 群聊的时候需要设置倒计时百分百
+          // if (props.previewType === 'group') {
+          //   const consumedTime = props.defaultTime - props.time
+          //   const activeRate = Math.floor((consumedTime / props.defaultTime) * 100)
+          //   console.log('activeRate:::1111', activeRate)
+          //   currentRate.value = activeRate
+          //   rate.value = activeRate
+          // }
+          // console.log('11111111111', currentRate.value, props)
+          // 监听开始播放
+          videoEle.value?.length > 0 &&
+            videoEle.value[0]?.addEventListener("play", handlePlay);
+          // 监听播放结束事件
+          videoEle.value?.length > 0 &&
+            videoEle.value[0]?.addEventListener("ended", () => {
+              console.log("播放结束");
+              // 视频播放结束后，如果是别人的，在群聊中的话直接焚毁，自己的可以随便播放（产品设计如此），如果是私聊，需要视频播放完完成再焚毁
+              if (!props.isCurrentSend) {
+                if (props.previewType === 'group') {
+                  emit("burnImageOrVideo", props.currentId);
+                } else {
+                  countDown.value.start();
+                }
+              }
+            });
+
+          // // 监听播放进度
+          videoEle.value?.length > 0 &&
+            videoEle.value[0]?.addEventListener("timeupdate", () => {
+              // console.log("监听播放进度", videoEle.value[0],  video.currentTime);
+              let timeDisplay;
+              let duration;
+              //用秒数来显示当前播放进度
+              timeDisplay = videoEle.value[0]?.currentTime;
+              duration = videoEle.value[0]?.duration;
+              if (timeDisplay > duration * 0.2) {
+                isMorethan.value = true;
+                console.log("已超过总时长的20%");
+              }
+            });
+        }, 0);
+      }
+    }
+  }
+);
+onUnmounted(() => {
+  videoEle.value = null;
+});
+// 焚烧时长
+const currentRate = ref(0);
+const totalTime = computed(() => {
+  return timeCount.value * 1000;
+});
+const timeDown = computed(() => {
+  return timeCount.value * 1000;
+});
+const rate = ref(0); // 进度条
+watch(
+  () => rate.value,
+  (val) => {
+    if (rate.value == 100) {
+      // 焚毁图片或视频
+      emit("burnImageOrVideo", props.currentId);
+    }
+  }
+);
+const showCancle = (event) => {
+  // 如果是当前用户发的，不需要提示，这里设置时间为0表示不焚毁
+  if (props.currentType === 'video'){
+  emit("getList", false, (props.isCurrentSend || !isMorethan.value) ? 0 : props.time, props.currentId);
+ }  else {
+  emit("getList", false, props.isCurrentSend ? 0 : props.time, props.currentId);
+ }
+ // -1表示已经过期，关闭的时候需要直接销毁
+ if (props.time === -1) {
+  emit("burnImageOrVideo", props.currentId)
+ }
+};
+const handleDownLoad = event => {
+  event.preventDefault();
+  event.stopPropagation();
+  const arr = props.images.filter(item => item.id === props.currentId);
+  // 创建一个 <a> 元素
+  const link = document.createElement("a");
+  link.href = arr[0].url;
+  // 设置下载文件名
+  link.download = "";
+  // 触发点击事件以下载图片
+  link.click();
+  link.remove();
+};
+const handleError = (item, index) => {
+  let url = item.url
+    .replace(/oss(.+?)\.com\//gm, "s3-accelerate.amazonaws.com/")
+    .replace(/\?.*/g, "");
+  props.images[index].url = url;
+};
+const gradientColor = {
+  "0%": "#FF4E01",
+  "100%": "#FF8901"
+};
+const onCounDown = t => {
+  // 计算进度条
+  let time = ((totalTime.value - t.total) / totalTime.value) * 100;
+  rate.value = Math.ceil(time);
+};
+// 阻止默认行为
+const handeStopPropagation = event => {
+  if (props.previewType==='private' || props.previewType==='group' ) {
+    return
+  } else {
+    // 需要阻止事件冒泡
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+// 用于计算视频的高度，并动态设置 close-btn 的 top 值。
+const updateCloseButtonPosition = () => {
+  nextTick(() => {
+    const videoEle = document.querySelector('video');
+    const closeBtn = document.querySelector('.close-btn');
+    if (videoEle && closeBtn) {
+      const videoHeight = videoEle.clientHeight;
+      console.error('videoHeight',videoHeight);
+      let h = (videoHeight / 2) > 60 ? 60 : videoHeight / 2;
+      closeBtn.style.top = `${Math.floor(h)}px`; // Adjust the value as needed
+    }
+  });
+};
+watch(msgList, () => {
+  updateCloseButtonPosition(); // Update position when msgList changes
+});
+onMounted(() => {
+  updateCloseButtonPosition();
+  window.addEventListener('resize', updateCloseButtonPosition); // Update on resize
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', updateCloseButtonPosition);
+});
+</script>
+
+<style scoped lang="less">
+:deep(.van-swipe) {
+  width: 100%;
+}
+
+:deep(.van-swipe-item) {
+  height: auto;
+}
+
+.dc-box-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.special-overlay {
+  top: 0 !important;
+  background: black;
+}
+
+.timeout {
+  display: flex;
+  justify-content: center;
+  color: #76767A;
+}
+
+.muli-swipe {
+  // height: 300px;
+  // margin-top: 40%;
+}
+
+.detailContainer {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 999999999;
+
+  :deep(.van-swipe__track) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.dc-box-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.active-class {
+  padding-top: 120px !important;
+}
+
+.download {
+  position: absolute;
+  right: 20px;
+  bottom: 30px;
+
+  :deep(.van-button--default) {
+    background: #ffffff21;
+    color: white;
+    border-color: #ffffff21;
+  }
+}
+.close-btn {
+  position: absolute;
+  left: 20px;
+  top: 30px;
+  :deep(.van-icon__image) {
+    width: 24px;
+    height: 24px;
+  }
+  :deep(.van-button--default) {
+    background: #ffffff21;
+    color: white;
+    border-color: #ffffff21;
+  }
+}
+.video-class {
+  width: 100%;
+  height: 100%;
+}
+
+.video-player::-webkit-media-controls {
+  display: none !important;
+}
+
+.video-player::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+
+.video-player::-webkit-media-controls-panel {
+  display: none !important;
+}
+
+@media screen and (min-width: 750px) {
+  .van-overlay {
+    width: calc(100% - 375px);
+    left: 375px !important;
+  }
+  .detailContainer {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .dc-box-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .van-swipe {
+    width: 100%;
+  }
+  .video-class {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.incineration-countdown {
+  position: absolute;
+  top: 24px;
+  right: 16px;
+  width: 111px;
+  height: 40px;
+  padding: 4px;
+  border-radius: 26px;
+  background-color: #191b21b2;
+  .incineration-svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .time {
+    position: absolute;
+    top: 50%;
+    left: 66px;
+    transform: translate(-50%, -50%);
+    font-size: 0.875rem;
+    :deep(.van-count-down) {
+      color: #dfdfdf;
+    }
+  }
+}
+</style>
diff --git a/src/components/customAvatar/index.vue b/src/components/customAvatar/index.vue
new file mode 100644
index 0000000..2b0120d
--- /dev/null
+++ b/src/components/customAvatar/index.vue
@@ -0,0 +1,195 @@
+<script setup>
+import axios from 'axios'
+import { useI18n } from "vue-i18n"
+import { onMounted, inject, watchEffect } from "vue"
+import { showToast } from 'vant'
+import { handleImgCdnError, uploadFileByOss } from "@/utils/tools"
+
+const props = defineProps({
+  isCustom: {
+    type: Boolean,
+    default: false
+  },
+  activeImage: {
+    type: String,
+    default: ''
+  },
+  list: {
+    type: Array,
+    default: []
+  }
+})
+
+const emits = defineEmits(['update:activeImage', 'delete', 'afterUploaded'])
+const { t } = useI18n()
+const $api = inject("$api");
+const activeUrl = ref(props.activeImage)
+const addConfirmShow = ref(false)
+const addActions = ref([
+  { type: 'add', name: t('upload'), color: '#0095F6' },
+])
+console.log('activeUrl',props.activeImage);
+
+const handleImgClick = (url) => {
+  emits('update:activeImage', url)
+  activeUrl.value = url
+}
+const onDelete = (item, idx) => {
+  emits('delete', item, idx)
+}
+
+const afterRead = async (fileObj) => {
+  // 此时可以自行将文件上传至服务器
+  const file = fileObj.file
+  addConfirmShow.value = false
+  upLoadFile(file)
+}
+
+const upLoadFile = async (file) => {
+  const { access_url } = await uploadFileByOss(file)
+  if (access_url) {
+    emits('afterUploaded', access_url)
+  }
+}
+
+const onUpload = () => {
+  let num = 0
+   props.list.forEach(i => {
+    if(i.status === 2 || i.status === 1) {
+      num = num + 1
+    }
+  })
+
+  if(num >= 10) {
+    return showToast(t('error_6094'))
+  }
+  addConfirmShow.value = true
+}
+
+const showList = computed(() => {
+  return props.list.filter(i => i.status === 1 || i.status === 2)
+})
+</script>
+
+<template>
+  <div class="custom-avatar">
+    <div class="box-item">
+      <div v-for="(item, idx) in showList" :key="idx">
+        <div class="avtar-item" :class="activeUrl === item.avatar_url ? 'active' : ''" v-if="item.status === 1 || item.status === 2">
+          <van-image class="box-item-img" fit="cover" position="center" :src="item.avatar_url" round @click="handleImgClick(item.avatar_url)" @error="e => handleImgCdnError(e, item, 'avatar_url')" />
+          <div v-if="isCustom && item.status === 2" class="delete" @click="onDelete(item, idx)">
+            <img src="@/assets/delete-red.svg" alt="">
+          </div>
+          <div v-if="isCustom && item.status === 1" class="examine">
+            <img src="@/assets/svg/examine.svg" alt="">
+          </div>
+        </div>
+      </div>
+      <div v-if="isCustom" class="avtar-item add-item" @click="onUpload">
+        <div class="box-item-img"></div>
+      </div>
+      <!-- 补齐布局最后一行居中的空数据 -->
+      <div class="avtar-item add-item" v-for="(i,idx) in 3" :key="idx">
+      </div>
+    </div>
+  </div>
+  <van-action-sheet v-model:show="addConfirmShow" :cancel-text="$t('cancel')" close-on-click-action :closeable="false" teleport="body">
+    <van-uploader class="cus-uploader" :after-read="afterRead" :max-count="1">
+      <div class="upload-btn">{{ $t('upload') }}</div>
+    </van-uploader>
+  </van-action-sheet>
+
+</template>
+
+<style lang="less" scoped>
+.custom-avatar {
+  display: block;
+  // padding: 0 0 0 24px;
+  width: 100%;
+  padding: 0 16px 68px 16px;
+  .box-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: space-between;
+    .avtar-item {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      // margin-right: 16px;
+      // margin-bottom: 12px;
+      width: 66px;
+      height: 66px;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      margin: 0 4px 30px 4px;
+      .box-item-img {
+        width: 60px;
+        height: 60px;
+      }
+        
+      &.active {
+        border-color: var(--c-blue-color);
+      }
+
+      &.add-item {
+        .box-item-img {
+          position: relative;
+          border-radius: 50%;
+          background: #F2F2F2;
+          &::before,
+          &::after {
+            content: '';
+            position: absolute;
+            width: 30px;
+            height: 4px;
+            border-radius: 4px;
+            background: #D4D5D6;
+            top: 50%;
+            left: 50%;
+          }
+
+          &::before {
+            transform: translate(-50%, -50%);
+          }
+
+          &::after {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(90deg);
+          }
+        }
+      }
+    }
+    .delete {
+      position: absolute;
+      top: -5px;
+      right: -5px;
+    }
+    .examine {
+      width: 60px;
+      height: 60px;
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      border-radius: 50%;
+      background-color: #00000099;
+      img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+.upload-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 60px;
+  color: var(--c-blue-color);
+}
+</style>
diff --git a/src/components/deleteDialog/index.vue b/src/components/deleteDialog/index.vue
new file mode 100644
index 0000000..25fe431
--- /dev/null
+++ b/src/components/deleteDialog/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="dialog-wrap">
+    <van-dialog className="custom-dialog" v-model:show="visible" title="温馨提示">
+      <template #default>
+        <div class="content">
+          {{ remark }}
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleCancel">取消</van-button>
+          <div class="line"></div>
+          <van-button class="btn btns" type="default" @click="handleDelete">删除</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, ref, watch } from 'vue'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  remark: {
+    type: String,
+    default: '是否确认删除好友'
+  },
+})
+const emit = defineEmits(['update:modelValue', 'getList'])
+const inputVal = ref('')
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const handleCancel = () => {
+  emit('update:modelValue', false)
+  inputVal.value = ''
+}
+const handleDelete = () => {
+  emit('getList')
+}
+</script>
+
+<style scoped lang="less">
+.dialog-wrap {
+  :deep(.van-dialog) {
+    padding: 27px 0 0 0;
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 18px;
+    }
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 0;
+      .content {
+        color: #76767A;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        margin-bottom: 30px;
+        height: 20px;
+      }
+    }
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+    .btns {
+      color: #FC5A50 !important;
+    }
+  }
+  :deep(.van-cell) {
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: rgba(28, 5, 5, 0.03);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/emptyData/index.vue b/src/components/emptyData/index.vue
new file mode 100644
index 0000000..563db9c
--- /dev/null
+++ b/src/components/emptyData/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="empty-list">
+    <van-empty :image="noData" image-size="96" :description="description || $t('createdGroup')" />
+  </div>
+</template>
+<script setup>
+import noData from '@/assets/dialog/no-data.png'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+})
+</script>
+<style scoped lang="less">
+.empty-list {
+  margin: 0 auto 22px auto;
+
+  :deep(.van-empty) {
+    padding: 0;
+  }
+
+  :deep(.van-empty__description) {
+    margin-top: 22px;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+}
+@media screen and (min-width: 750px) {
+  .empty-list {
+    margin: 177px auto 22px auto;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/groupDialog/index.vue b/src/components/groupDialog/index.vue
new file mode 100644
index 0000000..66f6900
--- /dev/null
+++ b/src/components/groupDialog/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="dialog-wraps">
+    <van-dialog className="custom-dialog" v-model:show="visible" :title="dialogObj.type === 'add' ? $t('newGroups') : $t('modifyGroupName')">
+      <template #default>
+        <div class="content">
+          <van-field v-model="dialogObj.inputVal" label="" maxlength="15" :placeholder="$t('groupNames')" />
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleCancel">{{ $t('cancel') }}</van-button>
+          <div class="line"></div>
+          <van-button class="btn btn1" :class="{ 'diable-btn': !dialogObj.inputVal }" type="default"
+            :disabled="!dialogObj.inputVal" @click="handleSubmit">{{ $t('confirm') }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, reactive, watch } from 'vue'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  dialogObj: {
+    type: Object,
+    default: () => ({
+      inputVal: '',
+      type: '',
+      id: ''
+    })
+  },
+})
+const dialogObj = reactive({
+  inputVal: '',
+  type: '',
+  id: ''
+})
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+watch(() => visible.value, () => {
+  const { inputVal, type, id } = props.dialogObj
+  dialogObj.inputVal = inputVal
+  dialogObj.type = type
+  dialogObj.id = id
+})
+const emit = defineEmits(['update:modelValue', 'getVal'])
+const handleCancel = () => {
+  emit('update:modelValue', false)
+  dialogObj.inputVal = ''
+  dialogObj.type = ''
+  dialogObj.id = ''
+}
+const handleSubmit = () => {
+  emit('getVal', dialogObj)
+}
+</script>
+<style scoped lang="less">
+.dialog-wraps {
+  :deep(.van-dialog) {
+    padding: 22px 0 0 0;
+
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 18px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 0 16px;
+
+      .content {
+        margin-bottom: 20px;
+        height: 64px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .btn1 {
+      color: #0095F6 !important;
+    }
+
+    .diable-btn {
+      opacity: 0.4 !important;
+    }
+  }
+
+  :deep(.van-cell) {
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: rgba(28, 5, 5, 0.03);
+    padding: 13.5px 12px;
+
+    .van-field__control {
+      height: 21px;
+      color: #1B1B22;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/header/headerNavbar.vue b/src/components/header/headerNavbar.vue
new file mode 100644
index 0000000..95e1ee2
--- /dev/null
+++ b/src/components/header/headerNavbar.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="header">
+        <div class="icon">
+            <van-icon name="arrow-left" @click="goBack()" />
+        </div>
+        <div class="title">
+            {{ prop.title }}
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineProps } from 'vue'
+import { useRoute } from 'vue-router';
+import { onMounted } from 'vue';
+const router = useRouter();
+const prop = defineProps({
+    title: {
+        type: String,
+        default: ''
+    }
+})
+onMounted(() => {
+})
+const goBack = () => {
+    router.back()
+}
+</script>
+<style scoped lang="less">
+.header {
+    min-width: 375px;
+    height: 48px;
+    flex-shrink: 0;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .icon {
+        position: absolute;
+        left: 10px;
+
+        .van-icon {
+            font-size: 1.25rem;
+        }
+    }
+
+    .title {
+        color: #1B1B22;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 1.125rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        /* 133.333% */
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/icons/IconEyeHide.vue b/src/components/icons/IconEyeHide.vue
new file mode 100644
index 0000000..94dd4fb
--- /dev/null
+++ b/src/components/icons/IconEyeHide.vue
@@ -0,0 +1,9 @@
+<template>
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.52881 7.09473C3.75542 7.53004 4.09878 7.93387 4.53659 8.29267C5.76411 9.29872 7.73415 9.95089 9.95518 9.95089C12.1762 9.95089 14.1462 9.29872 15.3737 8.29267C15.8116 7.93387 16.1549 7.53004 16.3815 7.09473" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7324 9.95117L12.4716 12.71" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.7227 9.00586L16.7422 11.0255" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.17188 11.0255L5.19149 9.00586" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.43018 12.71L8.16939 9.95117" stroke="#1B1B22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconEyeShow.vue b/src/components/icons/IconEyeShow.vue
new file mode 100644
index 0000000..8986524
--- /dev/null
+++ b/src/components/icons/IconEyeShow.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8642 9.48873C15.3426 5.7729 13.0419 3.90234 9.95657 3.90234C6.87123 3.90234 4.57235 5.7729 3.04985 9.49076C2.98866 9.64152 2.95703 9.80484 2.95703 9.97002C2.95703 10.1352 2.98866 10.2985 3.04985 10.4493C4.57144 14.1651 6.87215 16.0357 9.95657 16.0357C13.0428 16.0357 15.3417 14.1651 16.8642 10.4473C16.9254 10.2965 16.957 10.1332 16.957 9.968C16.957 9.80282 16.9254 9.6395 16.8642 9.48873ZM9.95657 14.696C7.58164 14.696 5.79038 13.4151 4.47743 10.7308C4.24261 10.2507 4.24258 9.68728 4.47735 9.20718C5.7903 6.52217 7.58159 5.24207 9.95657 5.24207C12.3326 5.24207 14.1241 6.52326 15.4364 9.20817C15.6708 9.68771 15.6709 10.2504 15.4368 10.73C14.1258 13.4156 12.3335 14.696 9.95657 14.696Z" fill="#1B1B22" stroke="#1B1B22" stroke-width="0.4"/>
+<circle cx="9.95703" cy="9.90234" r="2" stroke="#1B1B22" stroke-width="2"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconRadioTick.vue b/src/components/icons/IconRadioTick.vue
new file mode 100644
index 0000000..d1b524f
--- /dev/null
+++ b/src/components/icons/IconRadioTick.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="5" fill="#131415"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.76492 3.35738C7.96018 3.55265 7.96018 3.86923 7.76492 4.06449L4.91996 6.90944C4.60754 7.22186 4.10101 7.22186 3.78859 6.90944L2.23434 5.35519C2.03908 5.15992 2.03908 4.84334 2.23434 4.64808C2.4296 4.45282 2.74618 4.45282 2.94144 4.64808L4.21286 5.91949C4.29096 5.9976 4.4176 5.9976 4.4957 5.91949L7.05781 3.35738C7.25307 3.16212 7.56965 3.16212 7.76492 3.35738Z" fill="white"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconRadioTick2.vue b/src/components/icons/IconRadioTick2.vue
new file mode 100644
index 0000000..f7e0040
--- /dev/null
+++ b/src/components/icons/IconRadioTick2.vue
@@ -0,0 +1,3 @@
+<template>
+<svg t="1724308337955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11823" data-spm-anchor-id="a313x.manage_type_myprojects.0.i12.770b3a811yoyH9" width="16" height="16"><path d="M221.866667 482.133333c17.066667-17.066667 42.666667-17.066667 59.733333 0l149.333333 149.333334L768 302.933333c17.066667-17.066667 42.666667-17.066667 59.733333 0 17.066667 17.066667 17.066667 42.666667 0 59.733334l-332.8 332.8c-34.133333 34.133333-85.333333 34.133333-119.466666 0l-149.333334-149.333334c-21.333333-21.333333-21.333333-46.933333-4.266666-64z" fill="#ffffff" p-id="11824"></path></svg>
+</template>
diff --git a/src/components/icons/IconRemove.vue b/src/components/icons/IconRemove.vue
new file mode 100644
index 0000000..10e55e7
--- /dev/null
+++ b/src/components/icons/IconRemove.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4922 6.3848C13.4922 6.3848 6.42116 13.4559 6.42116 13.4559" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M13.4921 13.4551C13.4921 13.4551 6.42108 6.38405 6.42108 6.38405" stroke="#A4A4A7" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconRemoveBG.vue b/src/components/icons/IconRemoveBG.vue
new file mode 100644
index 0000000..44c5a49
--- /dev/null
+++ b/src/components/icons/IconRemoveBG.vue
@@ -0,0 +1,5 @@
+<template>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.53056 4.51019L8 6.97962L10.4694 4.51019C10.7512 4.22842 11.208 4.22842 11.4898 4.51019C11.7716 4.79196 11.7716 5.2488 11.4898 5.53056L9.02038 8L11.4898 10.4694C11.7716 10.7512 11.7716 11.208 11.4898 11.4898C11.208 11.7716 10.7512 11.7716 10.4694 11.4898L8 9.02038L5.53056 11.4898C5.2488 11.7716 4.79196 11.7716 4.51019 11.4898C4.22842 11.208 4.22842 10.7512 4.51019 10.4694L6.97962 8L4.51019 5.53056C4.22842 5.2488 4.22842 4.79196 4.51019 4.51019C4.79196 4.22842 5.2488 4.22842 5.53056 4.51019Z" fill="#D1D1D3"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconSearchArea.vue b/src/components/icons/IconSearchArea.vue
new file mode 100644
index 0000000..2c70e1c
--- /dev/null
+++ b/src/components/icons/IconSearchArea.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.9175" cy="12.6777" r="7.5" stroke="#CCCCCD" stroke-width="2"/>
+<path d="M17.4175 18.1777L19.5388 20.2991" stroke="#CCCCCD" stroke-width="2" stroke-linecap="round"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconTriangle.vue b/src/components/icons/IconTriangle.vue
new file mode 100644
index 0000000..63df9e3
--- /dev/null
+++ b/src/components/icons/IconTriangle.vue
@@ -0,0 +1,5 @@
+<template>
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6776 12.1535C10.2842 12.5623 9.62985 12.5623 9.23645 12.1535L7.25636 10.0957C6.64503 9.46042 7.09527 8.40234 7.97693 8.40234L11.9371 8.40234C12.8188 8.40234 13.269 9.46042 12.6577 10.0957L10.6776 12.1535Z" fill="#131415"/>
+</svg>
+</template>
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..5c51dd1
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,21 @@
+// charts
+export { default as Chart } from './chart/index.vue'
+export { default as AppNavBar } from './NavBar/index.vue'
+export { default as AppPopup } from './popup/index.vue'
+export { default as CodeInput } from './codeInput/index.vue'
+export { default as TipDialog } from './tipDialog/index.vue'
+export { default as DeleteDialog } from './deleteDialog/index.vue'
+export { default as CommonDialog } from './commonDialog/index.vue'
+export { default as ApplyDialog } from './applyDialog/index.vue'
+export { default as GroupDialog } from './groupDialog/index.vue'
+export { default as EmptyData } from './emptyData/index.vue'
+export { default as CommonPreview } from './commonPreview/index.vue'
+export { default as RedPacKDialog } from './redPacKDialog/index.vue'
+export { default as LogJump } from './logJump/index.vue'
+export { default as AppCheckBox } from './CheckBox/index.vue'
+export { default as TransmitDataDialog } from './transmitDataDialog/index.vue'
+export { default as CommonFooter } from './commonFooter/index.vue'
+export { default as CommonPay } from './commonPay/index.vue'
+export { default as CommonPayStep } from './commonPayStep/index.vue'
+export { default as CommonLottie } from './commonLottie/index.vue'
+export { default as CommonInput } from './commonInput/index.vue'
\ No newline at end of file
diff --git a/src/components/logJump/index.vue b/src/components/logJump/index.vue
new file mode 100644
index 0000000..f5df758
--- /dev/null
+++ b/src/components/logJump/index.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { ref, defineProps } from 'vue'
+import { useUserStore } from "@/stores/user.js";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const isSelfMsg = computed(() => userInfo.value.userID === val.sendID);
+const val = useAttrs()
+const { t } = useI18n()
+const props = defineProps({
+  logData: Object,
+  msgBorder: Boolean
+})
+const emits = defineEmits(['onJump'])
+const onJump = (logData) => {
+  emits('onJump',logData)
+}
+</script>
+
+<template>
+  <div class="log-jump" :class="msgBorder ? 'msg-border-r' : 'msg-border-l'" @click="onJump(logData)">
+    <div>
+      <div class="top">
+        <div class="title">聊天记录</div>
+        <div class="msg-num">
+          <span>{{ logData.count > 999 ? `999+` : logData.count }}</span>
+        </div>
+      </div>
+      <div v-for="(item,index) in logData.summaryList" :key="index" class="msg-content">{{item}}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.log-jump {
+  padding: 10px 12px;
+  background: #FFFFFF;
+  width: 199px;
+
+  .top {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      font-size: 1rem;
+      color: #1B1B22;
+    }
+
+    .msg-num {
+      padding: 2px 8px;
+      border-radius: 17px;
+      background-color: #F8F8FB;
+
+      span {
+        color: #1B1B2299;
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  .msg-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #76767A;
+    font-size: 0.875rem;
+    margin-bottom: 2px;
+  }
+}
+
+.msg-border-l {
+  border-radius: 0px 10px 10px 10px;
+}
+
+.msg-border-r {
+  border-radius: 10px 0px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-width: 40%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/pasteImgDialog/index.js b/src/components/pasteImgDialog/index.js
new file mode 100644
index 0000000..34c60cb
--- /dev/null
+++ b/src/components/pasteImgDialog/index.js
@@ -0,0 +1,39 @@
+import { createApp } from 'vue'
+import PasteImgDialog from "./index.vue"
+
+let app = null;
+let div = null;
+const pasteImgDialog = {
+  show: function(props) {
+    if (div) {
+      pasteImgDialog.hide(div)
+    }
+    const { previewUrl, okText, cancelText, customClass, ok, cancel } = props
+    div = document.createElement('div')
+    document.body.appendChild(div)
+    app = createApp(PasteImgDialog, {
+      previewUrl,
+      okText,
+      cancelText,
+      customClass,
+      modelValue: true,
+      onOk() {
+        ok && ok()
+        app.unmount(div);
+        div.remove();
+      },
+      onCancel() {
+        cancel && cancel()
+        app.unmount(div);
+        div.remove();
+      }
+    })
+    app.mount(div)
+  },
+  hide: function(props) {
+    app.unmount(div)
+    div.remove(div)
+  }
+}
+  
+export default pasteImgDialog
diff --git a/src/components/pasteImgDialog/index.vue b/src/components/pasteImgDialog/index.vue
new file mode 100644
index 0000000..2757853
--- /dev/null
+++ b/src/components/pasteImgDialog/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="pasteimg-wrapper" :class="[customClass]" v-if="visible">
+    <div class="parimg-con">
+      <div class="img-wrapper">
+        <img :src="previewUrl" alt="">
+      </div>
+    </div>
+    <div class="pasteimg-footer van-hairline--top">
+      <van-button type="default" @click="handleCancel">{{ cancelText }}</van-button>
+      <van-button type="default" class="van-hairline--left" @click="handleOk">{{ okText }}</van-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  previewUrl: {
+    type: String,
+    default: ''
+  },
+  okText: {
+    type: String,
+    default: defaultOkText
+  },
+  cancelText: {
+    type: String,
+    default: defaultCancelText
+  },
+  customClass: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:modelValue', 'ok', 'cancel'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const handleCancel = () => {
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+const handleOk = () => {
+  emit('ok')
+}
+</script>
+<script>
+import { i18n } from '@/lang/index'
+const { t } = i18n.global
+
+const defaultCancelText = t('cancel')
+const defaultOkText = t('determine')
+</script>
+<style scoped lang="less">
+.pasteimg-wrapper {
+  z-index: 1000;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 320px;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+
+
+  .parimg-con {
+    overflow: auto;
+    padding: 24px;
+    
+    .img-wrapper {
+      height: 272px;
+      overflow: hidden;
+      border-radius: 12px;
+      border: 1px solid rgba(0, 0, 0, 0.03);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+
+  .pasteimg-footer {
+    overflow: hidden;
+    user-select: none;
+    display: flex;
+    justify-content: space-between;
+    height: 60px;
+
+    button {
+      font-size: 16px;
+      height: 60px;
+      flex: 1;
+      margin: 0;
+      border: 0;
+      border-radius: 0;
+
+      &:last-child {
+        color: #538FE1;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/popup/index.vue b/src/components/popup/index.vue
new file mode 100644
index 0000000..3d8f479
--- /dev/null
+++ b/src/components/popup/index.vue
@@ -0,0 +1,43 @@
+<script setup >
+import { useAttrs} from 'vue'
+const attrs = useAttrs()
+
+//取消
+const handleCancel = ()=>{
+  //弹窗消失
+  attrs['onUpdate:show'](false)
+}
+</script>
+
+<template>
+  <van-popup :round="true" 	 :close-on-popstate=true v-bind="attrs" position="bottom"	 	 >
+
+    <div class="popup-box">
+        <slot></slot>
+        <div class="footer" @click="handleCancel">
+          取消
+        </div>
+    </div>
+    <template #overlay-content>
+      <slot name="overlay-content"></slot>
+    </template>
+  </van-popup>
+
+</template>
+
+<style scoped lang="less">
+.popup-box{
+  display: flex;
+  flex-direction: column;
+  color: rgba(27, 27, 34, 1);
+  font-size: 1rem;
+  background: rgba(248, 248, 251, 1);
+  text-align: center;
+  line-height: 60px;
+  .footer{
+    height: 60px;
+    margin-top: 10px;
+    background: white;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/redPacKDialog/index.vue b/src/components/redPacKDialog/index.vue
new file mode 100644
index 0000000..d447000
--- /dev/null
+++ b/src/components/redPacKDialog/index.vue
@@ -0,0 +1,237 @@
+
+<template>
+  <div class="red-popup">
+    <van-popup v-model:show="visible" :style="{ padding: '64px 0 20px 0' }">
+      <div class="pop_center">
+        <div class="avatar">
+          <Avatar width="60" height="60" :url="props.info.avatar" :name="props.info.nickName" @updateUrl="url => props.info.avatar = url"></Avatar>
+        </div>
+        <div class="send_name"><span>{{ props.info.nickName + $t('send_envelope_x') }}</span></div>
+        <div class="send_status"><span>{{ getStatusText }}</span></div>
+        <div v-if="showOpen && !loading" class="title" @click="claimRedpkt"><img :src="openImg" alt=""></div>
+        <div class="detail" @click="router.push({path:`/home/dialogue/redpktDetail`,query: {id: props.info.envelopeId,}})"><span>查看领取详情</span><van-icon name="arrow" /></div>
+      </div>
+    </van-popup>
+    
+  </div>
+</template>
+<script setup>
+import { onMounted, computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from 'pinia'
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useI18n } from "vue-i18n"
+import openCh from "@/assets/img/open.png"
+import openEn from "@/assets/img/open-en.png"
+import { useMessageStore } from '@/stores/modules/message';
+const messageStore = useMessageStore();
+const { pushRedPackageMessage } = messageStore;
+const { storeHistoryMessageList } = storeToRefs(messageStore);
+const { t } = useI18n()
+const $api = inject("$api");
+const router = useRouter()
+const IMSDK = getSDK()
+const openImg = ref('')
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  info: {
+    type: Object,
+    default: () => ({})
+  },
+})
+const emit = defineEmits(['update:modelValue', 'getList'])
+const loading = ref(false)
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+onMounted(() => {
+  // console.log(props.info);
+  openImg.value = localStorage.getItem('language') === 'zh-cn' ? openCh : openEn
+})
+const handleCancel = () => {
+  emit('update:modelValue', false)
+}
+const handleSubmit = () => {
+  emit('getList', inputVal.value)
+}
+// 打开红包
+const claimRedpkt = async () => {
+  loading.value = true
+  const res = await $api.contact.claimRedpkt({envelopeId: props.info.envelopeId})
+  loading.value = false
+  if (res.code === 0) {
+    const localExStr = { status: 1 };
+    //标记红包我已经领取
+    await IMSDK.setMessageLocalEx({
+      conversationID: groupChatConfig.value.conversationID,
+      clientMsgID:  props.info.clientMsgID,
+      localEx: JSON.stringify(localExStr)
+    });
+    //保存领取红包消息到本地
+    sendGetEnvelopeMessage(res.data)
+    router.push({path:`/home/dialogue/redpktDetail`,query: {id: props.info.envelopeId,}})
+  }
+}
+const showOpen = computed(() => {
+  if (props.info.type === 2 && props.info.status === 1 && (userInfo.value.userID === props.info.personalUserId)) {
+    return true
+  } else if ((props.info.type === 1 || props.info.type === 3) && (props.info.status === 1 || props.info.status === 2)) {
+    return true
+  } else {
+    return false
+  }
+})
+// 中间文本显示
+const getStatusText = computed(() => {
+  if (props.info.type === 1 || props.info.type === 3) {
+    if (props.info.status === 1 || props.info.status === 2) {
+      return props.info.remark
+    } else if (props.info.status === 3) {
+      return t('envelope_get_completed')
+    } else if(props.info.status === 4) {
+      if (props.info.receivers && props.info.receivers.length) {
+        return t('send_envelope_back_some')
+      } else {
+        return t('send_envelope_back_all')
+      }
+    }
+    
+  } else if (props.info.type === 2) {
+    if (props.info.status === 1) {
+      return `${t("envelope_x_can_get", {name: props.info.personalName})}`
+    } else if (props.info.status === 2) {
+      // return props.info.personalName + t('get')
+    } else if (props.info.status === 4) {
+      return t('send_envelope_back_all')
+    } else if (props.info.status === 3) {
+      return props.info.personalName + t('get')
+    }
+  }
+})
+//保存领取红包消息到本地
+const sendGetEnvelopeMessage = async(data) => {
+  let groupID = data.groupId || "";
+  if(groupID) {
+    let receiver = data.receivers && data.receivers[0]
+     let packageInfo = {
+      id: data.envelopeId,
+      type: data.type,
+      groupId: data.groupId ? (+data.groupId) : 0,
+      userId: data.userId,
+      avatar: data.avatar,
+      nickName: data.nickName,
+      receiverUserId: receiver.userId,
+      receiverAvatar: receiver.avatar,
+      receiverNickName: receiver.nickName,
+      amount: data.totalAmount,
+      isMax: false,
+      receiveTime: data.receivedTime,
+      lastAmountOver: (data.receivedAmount == data.totalAmount &&
+          data.totalAmount > 0),
+    }
+    // 创建红包领取消息
+    const msg = await createGetRedPackageMessage(packageInfo)
+    // 插入消息到本地
+    pushRedPackageMessage(msg)
+    await IMSDK.insertGroupMessageToLocalStorage({
+        message: msg,
+        groupID: groupID,
+        senderID: userInfo.value.userID
+      });
+  } 
+}
+// 领取红包消息
+const createGetRedPackageMessage = async(msgElem) => {
+  const { data } = await IMSDK.createCustomMessage({
+    data: JSON.stringify({
+      customType: 1004,
+      data: msgElem
+    }),
+    extension: "",
+    description: ""
+  });
+  return data
+}
+</script>
+<style scoped lang="less">
+.pop_center {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 30px;
+  div {
+    span {
+      color: #FCF0BC;
+    }
+  }
+  .send_name {
+    font-size: 0.875rem;
+    margin: 10px 0 20px 0;
+  }
+  .detail {
+    position: absolute;
+    bottom: 0;
+    span {
+      color: #FCF0BC;
+      font-size: 0.875rem;
+    }
+    :deep(.van-icon) {
+      color: #FCF0BC;
+      font-size: 0.75rem;
+    }
+  }
+}
+.red-popup {
+  :deep(.van-popup) {
+    background: url('../../assets/img/red-package.png');
+    width: 314px;
+    height: 500px;
+  }
+  .avatar {
+    margin-bottom: 5px;
+  }
+  .title {
+    position: absolute;
+    bottom: 42px;
+    width: 80px;
+    height: 80px;
+    transition: all 0.3s ease;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+    .title:active {
+        transform: scale(0.9) translateY(-5px); /* 当按钮被点击时放大0.9倍并向下平移8像素 */
+    }
+}
+.send_status {
+  width: 100%;
+  height: 150px;
+  text-align: center;
+  // white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  span {
+    width: 100%;
+    height: 100%;
+    word-wrap: break-word;
+    overflow: hidden; /* 隐藏超出部分 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+}
+  
+</style>
\ No newline at end of file
diff --git a/src/components/selectAreaCode.vue b/src/components/selectAreaCode.vue
new file mode 100644
index 0000000..241d610
--- /dev/null
+++ b/src/components/selectAreaCode.vue
@@ -0,0 +1,294 @@
+<template>
+  <!-- 注册-手机号-选择地区 -->
+  <div class="area-code">
+    <div class="area-code-wrap">
+      <div class="area-code-header">
+        <van-search
+          v-model="areaVal"
+          show-action
+          :placeholder="$t('searchAreaCode')"
+          clearable
+          @search="onSearch"
+          @cancel="onCancel"
+        />
+      </div>
+      <div class="area-code-content">
+        <div class="register-area">
+          <van-index-bar :sticky-offset-top="0" :index-list="indexList">
+            <template v-for="item in dataList" :key="item.type">
+              <van-index-anchor :index="item.type" >
+                <template #default>
+                  <span>{{item.type}}</span>
+                </template>
+              </van-index-anchor>
+              <van-cell
+                v-for="(data, i) in item.list"
+                :key="data.cityId"
+                @click="clickFn(data, i)"
+                :border="false"
+              >
+                <template #title>
+                  <div class="custom-title">
+                    <div class="custom-title-l">{{ `${data.name}(${data.nameEn})` }}</div>
+                    <div class="custom-title-r">{{ data.areaCode }}</div>
+                  </div>
+                </template>
+              </van-cell>
+            </template>
+            <!-- <div class="index-sort" v-if="isShow">{{indexValue}}</div> -->
+          </van-index-bar>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, inject, onMounted, defineProps, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import IconSearchArea from "@/components/icons/IconSearchArea.vue";
+import pinyin from "js-pinyin";
+import use from "@/use";
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const router = useRouter();
+const route = useRoute();
+const $api = inject("$api");
+let areaVal = ref();
+
+const props = defineProps({
+  columns: Array,
+});
+
+const emits = defineEmits(["onLeft", "onSelect"]);
+
+const clickFn = (d, i) => {
+  emits("onLeft");
+  emits("onSelect", d);
+};
+const dataList = ref([]);
+const areaArr = ref([]);
+const indexList = ref([]);
+areaArr.value = props.columns;
+watch(
+  () => areaVal.value,
+  (newVal, oldVal) => {
+    console.log(newVal, props.columns);
+    let reArr = [];
+    reArr = props.columns.filter((item) => {
+      return (
+        item.name.indexOf(newVal) !== -1 || item.areaCode.indexOf(newVal) !== -1
+      );
+    });
+
+    areaArr.value = reArr.length > 0 ? reArr : areaArr.value;
+    dataList.value = filterCity(areaArr.value);
+    console.log(dataList.value, "dataList");
+    indexList.value = dataList.value.map((item) => item.type);
+  }
+);
+onMounted(() => {
+  areaArr.value = props.columns;
+  dataList.value = filterCity(areaArr.value);
+  indexList.value = dataList.value.map((item) => item.type);
+  console.log(dataList.value);
+});
+const onSearch = () => {};
+const onCancel = () => {
+  areaVal.value = "";
+  emits("onLeft");
+};
+
+// 分组函数
+const filterCity = (list) => {
+  list.forEach((el) => {
+    el.pinyin = pinyin.getFullChars(el.name);
+  });
+  let letterArray = [];
+  for (let i = 65; i < 91; i++) {
+    letterArray.push(String.fromCharCode(i));
+  }
+  let newCities = [];
+  letterArray.forEach((item) => {
+    newCities.push({
+      type: `${item}`,
+      list: list.filter(
+        (item1) => item1.pinyin.substring(0, 1).toUpperCase() === `${item}`
+      ),
+    });
+  });
+  newCities = newCities.filter((item) => item.list.length);
+  console.log(newCities);
+  return newCities;
+};
+
+// 点击索引栏
+const isShow = ref(false)
+const indexValue = ref('')
+let timer 
+const onIndexSelect = (index) => {
+  indexValue.value = index
+  isShow.value = true
+  timer = setTimeout(() => {
+    // isShow.value = false
+    clearTimeout(timer);
+  }, 1000);
+
+}
+</script>
+
+<style lang="less" scoped>
+.area-code {
+  width: 100%;
+  height: 100vh;
+  background-color: #00000066;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  .area-code-wrap {
+      position: fixed;
+      // left: 0;
+      background-color: #fff;
+      z-index: 9999999;
+      top: 8%;
+      left: 50%;
+      transform: translate(-50%, 0);
+      height: 100vh;
+      border-radius: 16px;
+      width: 100%;
+      overflow: hidden;
+      .area-code-header {
+      }
+      .area-code-content {
+        height: calc(100% - 128px);
+        overflow: auto;
+          .searchBtn-box {
+            margin-bottom: 5px;
+            padding: 0 4.26667vw;
+            span {
+              margin-left: 12px;
+            }
+          }
+          .register-area {
+            position: relative; 
+            width: 100%; 
+            height: 100%;
+          }
+
+          .checkActive {
+            /* margin-top: 10px; */
+            margin-right: 5px;
+            width: 20px;
+            height: 20px;
+
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .cancel-box {
+            color: #a4a4a7;
+            font-size: 1rem;
+            font-weight: 400;
+            float: left;
+            margin-top: 10px;
+            margin-left: 10px;
+          }
+
+          .search-box {
+            width: 88%;
+            height: 36px;
+          }
+
+          .success {
+            color: #5f97e3;
+          }
+
+          .select {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            /* margin-right: 4px; */
+            border-radius: 50%;
+            border: 1px solid #d9d9d9;
+            margin-right: 14px;
+          }
+
+          .select-bg {
+            background-color: #5f97e3;
+            border: none;
+          }
+          .search-area {
+            vertical-align: middle;
+          }
+          :deep(.van-field__body) {
+            height: 36px !important;
+            .van-field__control {
+              height: auto;
+              padding-left: 0;
+            }
+          }
+          .van-cell:after {
+            transform: scale(1.5, 0.5);
+          }
+        }
+    }
+  }
+:deep(.van-nav-bar__left) {
+  .van-icon {
+    color: #1b1b22;
+  }
+}
+:deep(.van-index-anchor--sticky) {
+  background-color: #f7f8fa;
+}
+:deep(.van-index-bar__sidebar) {
+  // left: calc(50% +150px);
+  // right: calc(50% - 190px) !important;
+}
+:deep(.van-index-anchor) {
+  color: #1B1B2299;
+  font-weight: 400;
+  left: 0 !important;
+  top: -8% !important;
+}
+.index-sort {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: fixed;
+  right: 28px;
+  top: 126px;
+  font-size: 24px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #538FE1;
+
+}
+@media screen and (min-width: 750px) { /* PC 端样式 */
+  :deep(.van-index-anchor) {
+  }
+  .area-code-wrap {
+    max-width: 375px;
+  }
+}
+.custom-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  color: #1b1b22;
+  .custom-title-r {
+    margin-right: 12px;
+  }
+}
+</style>
diff --git a/src/components/tipDialog/index.vue b/src/components/tipDialog/index.vue
new file mode 100644
index 0000000..fd85071
--- /dev/null
+++ b/src/components/tipDialog/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="dialog-wrap">
+    <van-dialog v-model:show="visible" title="温馨提示">
+      <template #default>
+        <div class="content">
+          {{ resultMsg }}
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleCancel">返回</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  resultMsg: {
+    type: String,
+    default: '你不能添加自己到联系人'
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const handleCancel = () => {
+  emit('update:modelValue', false)
+}
+</script>
+
+<style scoped lang="less">
+.dialog-wrap {
+  :deep(.van-dialog) {
+    padding: 20px 0 0 0;
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 18px;
+    }
+    .van-dialog__content {
+      height: 44px;
+      border-bottom: 0.5px solid #F2F4F5;
+      .content {
+        color: #76767A;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 21px;
+        /* 150% */
+        margin-bottom: 23px;
+      }
+    }
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .btn {
+      color: #0095F6 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/transmitDataDialog/index.vue b/src/components/transmitDataDialog/index.vue
new file mode 100644
index 0000000..616e3b3
--- /dev/null
+++ b/src/components/transmitDataDialog/index.vue
@@ -0,0 +1,461 @@
+<template>
+  <div class="dialog-wrap">
+    <van-dialog className="custom-dialog" v-model:show="visible">
+      <slot></slot>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleCancel">{{
+      t("cancel")
+    }}</van-button>
+          <div class="line"></div>
+          <van-button class="btn btn1" type="default" @click="handleSubmit">{{
+      t("determine")
+            }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { computed, ref, watch } from "vue";
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/stores/user.js";
+import { showToast,showLoadingToast,closeToast } from "vant";
+import { useContactStore } from "@/stores/contact";
+import { parseMsg, toJsonNoOrigin, toJsonNoQuoteMsg } from "@/utils/tools";
+import { createFileObject } from "@/utils/fileUtils";
+const $api = inject("$api");
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { groupChatConfig, privateChatConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { contactList } = storeToRefs(contactStore)
+const IMSDK = getSDK();
+const { t } = useI18n();
+const router = useRouter()
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  content: {
+    type: String,
+    default: ""
+  },
+  footerClass: {
+    type: String,
+    default: ""
+  }
+});
+const emit = defineEmits(["update:modelValue", "onOk", "onCancel"]);
+const inputVal = ref("");
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  }
+});
+/**
+ * 合并转发消息
+ * 参考[createMergerMessage]
+ * [messageList] 被选中的消息
+ * [serverID] 服务器存储消息的ID
+ * [title] 摘要标题
+ * [summaryList] 摘要内容
+ * [count] 消息条数
+ */
+const createTransmitMessage = async (msgElem) => {
+  const { data } = await IMSDK.createCustomMessage({
+    data: JSON.stringify({
+      customType: 1100,
+      data: msgElem
+    }),
+    extension: "",
+    description: ""
+  });
+  return data
+};
+const handleCancel = () => {
+  emit("update:modelValue", false);
+  emit("onCancel");
+};
+const sendGroupShare = async () => {
+  let messageList = [];
+  let hiddenSource = 0;
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    messageList = groupChatConfig.value.msg.sort((a, b) => a.sendTime - b.sendTime);
+    hiddenSource = groupChatConfig.value.hiddenSource;
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    messageList = privateChatConfig.value.msg.sort((a, b) => a.sendTime - b.sendTime);
+    hiddenSource = privateChatConfig.value.hiddenSource;
+  }
+  let msgJsonList = [];
+  let summaryList = [];
+  let addCount = 0;
+  //合并转发
+  if (hiddenSource === 1) {
+    // 隐藏消息来源
+    msgJsonList = messageList.map(item => {
+      if (addCount < 3) {
+        summaryList.push(parseMsg(item, false, false, false, contactList.value));
+        addCount++;
+      }
+      return toJsonNoOrigin(item);
+    });
+  } else if (hiddenSource === 2) {
+    msgJsonList = messageList.map(item => {
+      if (addCount < 3) {
+        summaryList.push(parseMsg(item, false, false, true, contactList.value));
+        addCount++;
+      }
+      return toJsonNoQuoteMsg(item);
+    });
+  }
+  let newMsg = "";
+  if (msgJsonList.length <= 3) {
+    const elem = {
+      count: msgJsonList.length,
+      summaryList: summaryList,
+      messageList: JSON.stringify(msgJsonList)
+    };
+    newMsg = await createTransmitMessage(elem);
+  } else {
+    const json = JSON.stringify(msgJsonList);
+    ///上传json到后台得到serverID
+    const resp = await $api.contact.saveTransmitMessage({ content: json });
+    if (resp.code === 0) {
+      const elem = {
+        count: msgJsonList.length,
+        summaryList: summaryList,
+        serverID: resp.data?.relay_id
+      };
+      newMsg = await createTransmitMessage(elem);
+    } else {
+      showToast(resp.msg);
+      return false;
+    }
+  }
+  await sendMultiMsg(chatDataList.value, newMsg, false);
+};
+
+const isMultipleChoice = computed(() => groupChatConfig.value.isMultipleChoice);
+const chatDataList = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    return groupChatConfig.value.chatDataList
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    return privateChatConfig.value.chatDataList
+  }
+});
+const isMultipleChoices = computed(() => privateChatConfig.value.isMultipleChoice);
+const sendSingleShare = async () => {
+  //逐条转发
+  let selectMessageList = []
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    selectMessageList = groupChatConfig.value.msg;
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    selectMessageList = privateChatConfig.value.msg;
+  }
+  if (selectMessageList.length > 0) {
+    selectMessageList.forEach(async item => {
+      const data = await createMsgByMsg(item);
+      const newMsg = data["msg"];
+      const sendUseNoOSS = data["sendUseNoOSS"];
+      if (newMsg) {
+        await sendMultiMsg(chatDataList.value, newMsg, sendUseNoOSS);
+      }
+    });
+  }
+};
+const createMsgByMsg = async message => {
+  let newMsg = "";
+  let sendUseNoOSS = false;
+  let content = "";
+  // 打开showLoadingToast
+  const toast = showLoadingToast({
+    duration: 0,
+    forbidClick: true,
+    message: '发送中',
+  });
+  if (message.contentType === 101) {
+    content = message.textElem.content;
+    if (content) {
+      newMsg = await IMSDK.createTextMessage(content);
+    }
+  } else if (message.contentType === 106) {
+    // @消息
+    content = parseMsg(message, false, false, false, contactList.value);
+    if (content) {
+      newMsg = await IMSDK.createTextMessage(content);
+    }
+  } else if (message.contentType === 102) {
+    // 图片
+    console.log(message, "--图片-");
+    const file = message.pictureElem
+    const sourcePicture = message.pictureElem?.sourcePicture;
+    const bigPicture = message.pictureElem?.bigPicture;
+    const snapshotPicture = message.pictureElem?.snapshotPicture;
+    if (sourcePicture && bigPicture && snapshotPicture) {
+      newMsg = await IMSDK.createImageMessage({
+        sourcePicture: sourcePicture,
+        bigPicture: bigPicture,
+        snapshotPicture: snapshotPicture
+      });
+      sendUseNoOSS = true;
+    }
+  } else if (message.contentType === 103) {
+    // 语音
+    newMsg = await IMSDK.createTextMessage(`[${t('voice')}]`);
+  } else if (message.contentType === 104) {
+    // 视频
+    const videoElem = message.videoElem;
+    if (videoElem) {
+      newMsg = await IMSDK.createVideoMessage(videoElem);
+      sendUseNoOSS = true;
+    } else {
+      console.log("Transmit_createMsgByMsg", "videoElem is null");
+    }
+  } else if (message.contentType === 105) {
+    // 文件
+    const fileElem = message.fileElem;
+    if (fileElem) {
+      newMsg = await IMSDK.createFileMessage(fileElem);
+      sendUseNoOSS = true;
+    } else {
+      console.log("Transmit_createMsgByMsg", "fileElem is null");
+    }
+  } else if (message.contentType === 114) {
+    // 引用回复
+    const content = message.quoteElem?.text;
+    if (content) {
+      newMsg = await IMSDK.createTextMessage(content);
+    }
+  } else if (message.contentType === 110) {
+    // 自定义
+    const val = JSON.parse(message.customElem.data);
+    if (val.customType === 1003) {
+      newMsg = await IMSDK.createTextMessage(
+        `[${t('envelope')}${val.data?.remark}]`);
+    }
+    if (val.customType === 1100) {
+      const elem = val.data;
+      newMsg = {
+        data: await createTransmitMessage(elem)
+      };
+    }
+  }
+  // 隐藏 Loading
+  closeToast();
+  return { msg: newMsg.data, sendUseNoOSS: sendUseNoOSS };
+};
+const handleSubmit = async () => {
+  let type = ''
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    type = groupChatConfig.value.type;
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    type = privateChatConfig.value.type;
+  }
+  if (type === "single") {
+    // 逐条转发
+    await sendSingleShare();
+  } else if (type === "group") {
+    //合并转发
+    await sendGroupShare();
+  }
+};
+const sendMultiMsg = async (dataList, newMsg, sendUseNoOSS) => {
+  dataList.forEach(async item => {
+    try {
+      if ("conversationID" in item) {
+        await sendMsg(
+          newMsg,
+          item.conversationType === 1,
+          sendUseNoOSS,
+          item.userID,
+          item.groupID,
+          item.showName
+        );
+        emit("update:modelValue", false);
+        router.push('/home/dialogue')
+        return
+      }
+      if ("groupID" in item) {
+        await sendMsg(
+          newMsg,
+          false,
+          sendUseNoOSS,
+          "",
+          item.groupID,
+          item.groupName
+        );
+        emit("update:modelValue", false);
+        router.push('/home/dialogue')
+        onRemove()
+        return
+      }
+      if ("userID" in item) {
+        await sendMsg(newMsg, true, sendUseNoOSS, item.userID, "", "");
+        emit("update:modelValue", false);
+        router.push('/home/dialogue')
+        onRemove()
+        return
+      }
+    } catch (e) {
+      showToast(e);
+    }
+  });
+};
+const sendMsg = async (
+  message,
+  isSingleChat,
+  sendUseNoOSS,
+  userID,
+  groupID,
+  groupName
+) => {
+  try {
+    if (sendUseNoOSS) {
+      await IMSDK.sendMessageNotOss({
+        message: message,
+        recvID: userID,
+        groupID: groupID,
+        offlinePushInfo: createByData(message, isSingleChat, groupName)
+      });
+    } else {
+      await IMSDK.sendMessage({
+        message: message,
+        recvID: userID,
+        groupID: groupID,
+        offlinePushInfo: createByData(message, isSingleChat, groupName)
+      });
+    }
+  } catch (e) {
+
+  }
+};
+const createByData = (message, isSingleChat, groupName = "") => {
+  let title = "";
+  let desc = "";
+  if (isSingleChat) {
+    title = message.senderNickname ?? "-";
+    desc = getMsgContentTipText(message, false);
+  } else {
+    title = groupName ?? "-";
+    desc = getMsgContentTipText(message);
+  }
+  return {
+    title: title,
+    desc: desc,
+    iOSBadgeCount: true,
+    iOSPushSound: "+1"
+  };
+};
+///超过36个字符部分，使用...代替
+const getMsgContentTipText = (msg, showSendName = true) => {
+  let text = parseMsg(msg, true, true, true, contactList.value);
+  text = subCharacter(text, 36, 36, 32, "...");
+  return text;
+};
+///对文本进行裁剪
+const subCharacter = (text, maxLength, start = 0, end, endStr, charactersLength) => {
+  const characters = text;
+  if ((charactersLength ? charactersLength : characters.length) > maxLength) {
+    return characters.substring(start, end) + endStr;
+  } else {
+    return text;
+  }
+};
+
+// 数据清空
+const onRemove = () => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    setGroupChatConfig({})
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    setPrivateChatConfig({})
+  }
+}
+</script>
+<style scoped lang="less">
+.dialog-wrap {
+  :deep(.van-dialog) {
+    padding: 12px 0 0 0;
+
+    .van-dialog__header {
+      color: #1b1b22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 16px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #f2f4f5;
+
+      .content {
+        margin-bottom: 22px;
+        // height: 64px;
+        font-size: 0.875rem;
+        color: #76767a;
+        text-align: center;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 48px;
+    }
+
+    .btn {
+      color: #1b1b22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #fff !important;
+      border-color: #fff !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 48px;
+      background: #f5f8ff;
+    }
+
+    .btn1 {
+      color: #0095f6 !important;
+    }
+
+    .diable-btn {
+      opacity: 0.4 !important;
+    }
+  }
+
+  :deep(.van-cell) {
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: rgba(28, 5, 5, 0.03);
+    padding: 13.5px 12px;
+
+    .van-field__control {
+      height: 21px;
+      color: #1b1b22;
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/src/components/verifyButton.vue b/src/components/verifyButton.vue
new file mode 100644
index 0000000..af698fd
--- /dev/null
+++ b/src/components/verifyButton.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div class="btn">
+            <span @click="getCodeClick" :class="[verifyCodeForm.status  !== 'sended'?'lingheigth-avtive': '']">{{ verifyCodeForm.text }} </span>
+            <span v-show="verifyCodeForm.status === 'sended'">
+                <!-- <span> -->
+                    <van-count-down
+                        ref="countDown"
+                        millisecond
+                        :time="60000"
+                        :auto-start="false"
+                        format="sss"
+                        @finish="onFinish"
+                        style="color:#969799;font-size:0.75rem"
+                        />
+                <!-- </span> -->
+                <!-- <span>s</span> -->
+            </span>
+        </div>
+    </div>
+</template>
+<script setup>
+
+</script>
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/virtualList/index.js b/src/components/virtualList/index.js
new file mode 100644
index 0000000..6fbb2d5
--- /dev/null
+++ b/src/components/virtualList/index.js
@@ -0,0 +1,3 @@
+import VirtualList from './virtual-list';
+
+export default VirtualList;
diff --git a/src/components/virtualList/item.jsx b/src/components/virtualList/item.jsx
new file mode 100644
index 0000000..2d408bc
--- /dev/null
+++ b/src/components/virtualList/item.jsx
@@ -0,0 +1,101 @@
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+  ref,
+} from "vue";
+import { ItemProps, SlotProps } from "./props";
+
+const useResizeChange = (
+  props,
+  rootRef,
+  emit
+) => {
+  let resizeObserver = null;
+  const shapeKey = computed(() =>
+    props.horizontal ? "offsetWidth" : "offsetHeight"
+  );
+
+  const getCurrentSize = () => {
+    return rootRef.value ? rootRef.value[shapeKey.value] : 0;
+  };
+
+  // tell parent current size identify by unqiue key
+  const dispatchSizeChange = () => {
+    const { event, uniqueKey, hasInitial } = props;
+    emit(event, uniqueKey, getCurrentSize(), hasInitial);
+  };
+
+  onMounted(() => {
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        dispatchSizeChange();
+      });
+      rootRef.value && resizeObserver.observe(rootRef.value);
+    }
+  });
+
+  onUpdated(() => {
+    dispatchSizeChange();
+  });
+
+  onUnmounted(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  });
+};
+
+export const Item = defineComponent({
+  name: "VirtualListItem",
+  props: ItemProps,
+  emits: ["itemResize"],
+  setup(props, { emit }) {
+    const rootRef = ref(null);
+    useResizeChange(props, rootRef, emit);
+    return () => {
+      const {
+        tag: Tag,
+        component: Comp,
+        extraProps = {},
+        index,
+        source,
+        scopedSlots = {},
+        uniqueKey,
+      } = props;
+      const mergedProps = {
+        ...extraProps,
+        source,
+        index,
+      };
+      return (
+        <Tag key={uniqueKey} ref={rootRef}>
+          <Comp {...mergedProps} scopedSlots={scopedSlots} />
+        </Tag>
+      );
+    };
+  },
+});
+
+export const Slot = defineComponent({
+  name: "VirtualListSlot",
+  props: SlotProps,
+  emits: ["slotResize"],
+  setup(props, { slots, emit }) {
+    const rootRef = ref(null);
+    useResizeChange(props, rootRef, emit);
+
+    return () => {
+      const { tag: Tag, uniqueKey } = props;
+
+      return (
+        <Tag ref={rootRef} key={uniqueKey}>
+          {slots.default?.()}
+        </Tag>
+      );
+    };
+  },
+});
diff --git a/src/components/virtualList/props.js b/src/components/virtualList/props.js
new file mode 100644
index 0000000..b49b7da
--- /dev/null
+++ b/src/components/virtualList/props.js
@@ -0,0 +1,155 @@
+/**
+ * props declaration for default, item and slot component
+ */
+export const VirtualProps = {
+  dataKey: {
+    type: [String, Function],
+    required: true,
+  },
+  dataSources: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  dataComponent: {
+    type: [Object, Function],
+    required: true,
+  },
+
+  keeps: {
+    type: Number,
+    default: 30,
+  },
+  extraProps: {
+    type: [Object,Function],
+  },
+  estimateSize: {
+    type: Number,
+    default: 50,
+  },
+
+  direction: {
+    // 'vertical' | 'horizontal'
+    type: String,
+    default: 'vertical', // the other value is horizontal
+  },
+  start: {
+    type: Number,
+    default: 0,
+  },
+  offset: {
+    type: Number,
+    default: 0,
+  },
+  topThreshold: {
+    type: Number,
+    default: 0,
+  },
+  bottomThreshold: {
+    type: Number,
+    default: 0,
+  },
+  pageMode: {
+    type: Boolean,
+    default: false,
+  },
+  rootTag: {
+    type: String,
+    default: 'div',
+  },
+  wrapTag: {
+    type: String,
+    default: 'div',
+  },
+  wrapClass: {
+    type: String,
+    default: 'wrap',
+  },
+  wrapStyle: {
+    type: Object,
+  },
+  itemTag: {
+    type: String,
+    default: 'div',
+  },
+  itemClass: {
+    type: String,
+    default: '',
+  },
+  itemClassAdd: {
+    type: Function,
+  },
+  itemStyle: {
+    type: Object,
+  },
+  headerTag: {
+    type: String,
+    default: 'div',
+  },
+  headerClass: {
+    type: String,
+    default: '',
+  },
+  headerStyle: {
+    type: Object,
+  },
+  footerTag: {
+    type: String,
+    default: 'div',
+  },
+  footerClass: {
+    type: String,
+    default: '',
+  },
+  footerStyle: {
+    type: Object,
+  },
+  itemScopedSlots: {
+    type: Object,
+  },
+};
+
+export const ItemProps = {
+  index: {
+    type: Number,
+  },
+  event: {
+    type: String,
+  },
+  tag: {
+    type: String,
+  },
+  horizontal: {
+    type: Boolean,
+  },
+  source: {
+    type: Object,
+  },
+  component: {
+    type: [Object, Function],
+  },
+  uniqueKey: {
+    type: [String, Number],
+  },
+  extraProps: {
+    type: Object,
+  },
+  scopedSlots: {
+    type: Object,
+  },
+};
+
+export const SlotProps = {
+  event: {
+    type: String,
+  },
+  uniqueKey: {
+    type: String,
+  },
+  tag: {
+    type: String,
+  },
+  horizontal: {
+    type: Boolean,
+  },
+};
diff --git a/src/components/virtualList/virtual-list.jsx b/src/components/virtualList/virtual-list.jsx
new file mode 100644
index 0000000..48dfd25
--- /dev/null
+++ b/src/components/virtualList/virtual-list.jsx
@@ -0,0 +1,438 @@
+import {
+  defineComponent,
+  onActivated,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from "vue";
+import Virtual from "./virtual";
+import { Item, Slot } from "./item";
+import { VirtualProps } from "./props";
+
+const EVENT_TYPE = {
+  ITEM: "itemResize",
+  SLOT: "slotResize"
+}
+
+const SLOT_TYPE = {
+  HEADER: "thead", // string value also use for aria role attribute
+  FOOTER: "tfoot"
+}
+
+// interface Range {
+//   start: number;
+//   end: number;
+//   padFront: number;
+//   padBehind: number;
+// }
+
+export default defineComponent({
+  name: "VirtualList",
+  props: VirtualProps,
+  setup(props, { emit, slots, expose }) {
+    const isHorizontal = props.direction === "horizontal";
+    const directionKey = isHorizontal ? "scrollLeft" : "scrollTop";
+    const range = ref(null);
+    const root = ref(null);
+    const shepherd = ref(null);
+    let virtual;
+
+    /**
+     * watch
+     */
+    watch(
+      () => props.dataSources.length,
+      () => {
+        virtual.updateParam("uniqueIds", getUniqueIdFromDataSources());
+        virtual.handleDataSourcesChange();
+      }
+    );
+    watch(
+      () => props.keeps,
+      (newValue) => {
+        virtual.updateParam("keeps", newValue);
+        virtual.handleSlotSizeChange();
+      }
+    );
+    watch(
+      () => props.start,
+      (newValue) => {
+        scrollToIndex(newValue);
+      }
+    );
+    watch(
+      () => props.offset,
+      (newValue) => scrollToOffset(newValue)
+    );
+
+    /**
+     * methods
+     */
+    // get item size by id
+    const getSize = (id) => {
+      return virtual.sizes.get(id);
+    };
+    const getOffset = () => {
+      if (props.pageMode) {
+        return (
+          document.documentElement[directionKey] || document.body[directionKey]
+        );
+      } else {
+        return root.value ? Math.ceil(root.value[directionKey]) : 0;
+      }
+    };
+    // return client viewport size
+    const getClientSize = () => {
+      const key = isHorizontal ? "clientWidth" : "clientHeight";
+      if (props.pageMode) {
+        return document.documentElement[key] || document.body[key];
+      } else {
+        return root.value ? Math.ceil(root.value[key]) : 0;
+      }
+    };
+    // return all scroll size
+    const getScrollSize = () => {
+      const key = isHorizontal ? "scrollWidth" : "scrollHeight";
+      if (props.pageMode) {
+        return document.documentElement[key] || document.body[key];
+      } else {
+        return root.value ? Math.ceil(root.value[key]) : 0;
+      }
+    };
+    const emitEvent = (offset, clientSize, scrollSize, evt) => {
+      emit("scroll", evt, virtual.getRange());
+
+      if (
+        virtual.isFront() &&
+        !!props.dataSources.length &&
+        offset - props.topThreshold <= 0
+      ) {
+        emit("totop");
+      } else if (
+        virtual.isBehind() &&
+        offset + clientSize + props.bottomThreshold >= scrollSize
+      ) {
+        emit("tobottom");
+      }
+    };
+    const onScroll = (evt) => {
+      const offset = getOffset();
+      const clientSize = getClientSize();
+      const scrollSize = getScrollSize();
+
+      // iOS scroll-spring-back behavior will make direction mistake
+      if (offset < 0 || offset + clientSize > scrollSize + 1 || !scrollSize) {
+        return;
+      }
+
+      virtual.handleScroll(offset);
+      emitEvent(offset, clientSize, scrollSize, evt);
+    };
+
+    const getUniqueIdFromDataSources = () => {
+      const { dataKey, dataSources = [] } = props;
+      return dataSources.map((dataSource) =>
+        typeof dataKey === "function"
+          ? dataKey(dataSource)
+          : dataSource[dataKey]
+      );
+    };
+    const onRangeChanged = (newRange) => {
+      range.value = newRange;
+    };
+    const installVirtual = () => {
+      virtual = new Virtual(
+        {
+          slotHeaderSize: 0,
+          slotFooterSize: 0,
+          keeps: props.keeps,
+          estimateSize: props.estimateSize,
+          buffer: Math.round(props.keeps / 3), // recommend for a third of keeps
+          uniqueIds: getUniqueIdFromDataSources(),
+        },
+        onRangeChanged
+      );
+
+      // sync initial range
+      range.value = virtual.getRange();
+    };
+    // set current scroll position to a expectant index
+    const scrollToIndex = (index) => {
+      // scroll to bottom
+      if (index >= props.dataSources.length - 1) {
+        scrollToBottom();
+      } else {
+        const offset = virtual.getOffset(index);
+        scrollToOffset(offset);
+      }
+    };
+    // set current scroll position to a expectant offset
+    const scrollToOffset = (offset) => {
+      if (props.pageMode) {
+        document.body[directionKey] = offset;
+        document.documentElement[directionKey] = offset;
+      } else {
+        if (root.value) {
+          root.value[directionKey] = offset;
+        }
+      }
+    };
+    // get the real render slots based on range data
+    // in-place patch strategy will try to reuse components as possible
+    // so those components that are reused will not trigger lifecycle mounted
+    const getRenderSlots = () => {
+      const slots = [];
+      const { start, end } = range.value;
+      const {
+        dataSources,
+        dataKey,
+        itemClass,
+        itemTag,
+        itemStyle,
+        extraProps,
+        dataComponent,
+        itemScopedSlots,
+      } = props;
+      for (let index = start; index <= end; index++) {
+        const dataSource = dataSources[index];
+        dataSource.showName  = setRemark(dataSource)
+        if (dataSource) {
+          const uniqueKey =
+            typeof dataKey === "function"
+              ? dataKey(dataSource)
+              : dataSource[dataKey];
+          const internalExtraProps =
+            typeof extraProps === "function"
+              ? extraProps(dataSource)
+              : extraProps;
+          const internalDataComponent =
+            typeof dataComponent === "function"
+              ? dataComponent(dataSource)
+              : dataComponent;
+          if (typeof uniqueKey === "string" || typeof uniqueKey === "number") {
+            slots.push(
+              <Item
+                index={index}
+                tag={itemTag}
+                event={EVENT_TYPE.ITEM}
+                horizontal={isHorizontal}
+                uniqueKey={uniqueKey}
+                source={dataSource}
+                extraProps={internalExtraProps}
+                component={internalDataComponent}
+                scopedSlots={itemScopedSlots}
+                style={itemStyle}
+                class={`${itemClass}${
+                  props.itemClassAdd ? " " + props.itemClassAdd(index) : ""
+                }`}
+                onItemResize={onItemResized}
+              />
+            );
+          } else {
+            console.warn(
+              `Cannot get the data-key '${dataKey}' from data-sources.`
+            );
+          }
+        } else {
+          console.warn(`Cannot get the index '${index}' from data-sources.`);
+        }
+      }
+      return slots;
+    };
+    /**
+     * 获取当前用是否有设置好友备注
+     * @param {*} val 
+     * @returns 
+     */
+    const setRemark = (val) =>{
+      let remark = val.showName
+      //获取会话列表的时候判断是否可以获取到好友列表
+      const contactList_json = JSON.parse(sessionStorage.getItem('contactList')||'[]')||[]
+      if(contactList_json&&contactList_json.length>0){
+        const remarkList = contactList_json.filter(item=>val.userID===item.userID)
+        if(remarkList&&remarkList[0]){
+          if(remarkList[0].remark&&remarkList[0].remark!=val.showName)remark = remarkList[0].remark
+        }
+      }
+      return remark
+    }
+    // event called when each item mounted or size changed
+    const onItemResized = (id, size) => {
+      virtual.saveSize(id, size);
+      emit("resized", id, size);
+    };
+
+    // event called when slot mounted or size changed type: SLOT_TYPE
+    const onSlotResized = (type, size, hasInit) => {
+      if (type === SLOT_TYPE.HEADER) {
+        virtual.updateParam("slotHeaderSize", size);
+      } else if (type === SLOT_TYPE.FOOTER) {
+        virtual.updateParam("slotFooterSize", size);
+      }
+
+      if (hasInit) {
+        virtual.handleSlotSizeChange();
+      }
+    };
+
+    // set current scroll position to bottom
+    const scrollToBottom = () => {
+      if (shepherd.value) {
+        const offset =
+          shepherd.value[isHorizontal ? "offsetLeft" : "offsetTop"];
+        scrollToOffset(offset);
+
+        // check if it's really scrolled to the bottom
+        // maybe list doesn't render and calculate to last range
+        // so we need retry in next event loop until it really at bottom
+        setTimeout(() => {
+          if (getOffset() + getClientSize() < getScrollSize()) {
+            scrollToBottom();
+          }
+        }, 3);
+      }
+    };
+
+    // when using page mode we need update slot header size manually
+    // taking root offset relative to the browser as slot header size
+    const updatePageModeFront = () => {
+      if (root.value) {
+        const rect = root.value.getBoundingClientRect();
+        const { defaultView } = root.value.ownerDocument;
+        const offsetFront = isHorizontal
+          ? rect.left + defaultView.pageXOffset
+          : rect.top + defaultView.pageYOffset;
+        virtual.updateParam("slotHeaderSize", offsetFront);
+      }
+    };
+
+    // get the total number of stored (rendered) items
+    const getSizes = () => {
+      return virtual.sizes.size;
+    };
+
+    /**
+     * life cycles
+     */
+    onBeforeMount(() => {
+      installVirtual();
+    });
+
+    // set back offset when awake from keep-alive
+    onActivated(() => {
+      scrollToOffset(virtual.offset);
+    });
+
+    onMounted(() => {
+      // set position
+      if (props.start) {
+        scrollToIndex(props.start);
+      } else if (props.offset) {
+        scrollToOffset(props.offset);
+      }
+
+      // in page mode we bind scroll event to document
+      if (props.pageMode) {
+        updatePageModeFront();
+        document.addEventListener("scroll", onScroll, {
+          passive: false,
+        });
+      }
+    });
+
+    onUnmounted(() => {
+      virtual.destroy();
+      if (props.pageMode) {
+        document.removeEventListener("scroll", onScroll);
+      }
+    });
+
+    /**
+     * public methods
+     */
+    expose({
+      scrollToBottom,
+      getSizes,
+      getSize,
+      getOffset,
+      getScrollSize,
+      getClientSize,
+      scrollToOffset,
+      scrollToIndex,
+    });
+
+    return () => {
+      const {
+        pageMode,
+        rootTag: RootTag,
+        wrapTag: WrapTag,
+        wrapClass,
+        wrapStyle,
+        headerTag,
+        headerClass,
+        headerStyle,
+        footerTag,
+        footerClass,
+        footerStyle,
+      } = props;
+      const { padFront, padBehind } = range.value;
+      const paddingStyle = {
+        padding: isHorizontal
+          ? `0px ${padBehind}px 0px ${padFront}px`
+          : `${padFront}px 0px ${padBehind}px`,
+      };
+      const wrapperStyle = wrapStyle
+        ? Object.assign({}, wrapStyle, paddingStyle)
+        : paddingStyle;
+      const { header, footer } = slots;
+
+      return (
+        <RootTag ref={root} onScroll={!pageMode && onScroll}>
+          {/* header slot */}
+          {header && (
+            <Slot
+              class={headerClass}
+              style={headerStyle}
+              tag={headerTag}
+              event={EVENT_TYPE.SLOT}
+              uniqueKey={SLOT_TYPE.HEADER}
+              onSlotResize={onSlotResized}
+            >
+              {header()}
+            </Slot>
+          )}
+
+          {/* main list */}
+          <WrapTag class={wrapClass} style={wrapperStyle}>
+            {getRenderSlots()}
+          </WrapTag>
+
+          {/* footer slot */}
+          {footer && (
+            <Slot
+              class={footerClass}
+              style={footerStyle}
+              tag={footerTag}
+              event={EVENT_TYPE.SLOT}
+              uniqueKey={SLOT_TYPE.FOOTER}
+              onSlotResize={onSlotResized}
+            >
+              {footer()}
+            </Slot>
+          )}
+
+          {/* an empty element use to scroll to bottom */}
+          <div
+            ref={shepherd}
+            style={{
+              width: isHorizontal ? "0px" : "100%",
+              height: isHorizontal ? "100%" : "0px",
+            }}
+          />
+        </RootTag>
+      );
+    };
+  },
+});
diff --git a/src/components/virtualList/virtual.js b/src/components/virtualList/virtual.js
new file mode 100644
index 0000000..866e4e6
--- /dev/null
+++ b/src/components/virtualList/virtual.js
@@ -0,0 +1,333 @@
+/**
+ * virtual list core calculating center
+ */
+const DIRECTION_TYPE = {
+  FRONT: "FRONT", // scroll up or left
+  BEHIND: "BEHIND", // scroll down or right
+};
+const CALC_TYPE = {
+  INIT: "INIT",
+  FIXED: "FIXED",
+  DYNAMIC: "DYNAMIC",
+};
+const LEADING_BUFFER = 2;
+
+export default class Virtual {
+  constructor(param, callUpdate) {
+    this.init(param, callUpdate);
+  }
+
+  init(param, callUpdate) {
+    // param data
+    this.param = param;
+    this.callUpdate = callUpdate;
+
+    // size data
+    this.sizes = new Map();
+    this.firstRangeTotalSize = 0;
+    this.firstRangeAverageSize = 0;
+    this.lastCalcIndex = 0;
+    this.fixedSizeValue = 0;
+    this.calcType = CALC_TYPE.INIT;
+
+    // scroll data
+    this.offset = 0;
+    this.direction = "";
+
+    // range data
+    this.range = Object.create(null);
+    if (param) {
+      this.checkRange(0, param.keeps - 1);
+    }
+
+    // benchmark test data
+    // this.__bsearchCalls = 0
+    // this.__getIndexOffsetCalls = 0
+  }
+
+  destroy() {
+    this.init(null, null);
+  }
+
+  // return current render range
+  getRange() {
+    const range = Object.create(null);
+    range.start = this.range.start;
+    range.end = this.range.end;
+    range.padFront = this.range.padFront;
+    range.padBehind = this.range.padBehind;
+    return range;
+  }
+
+  isBehind() {
+    return this.direction === DIRECTION_TYPE.BEHIND;
+  }
+
+  isFront() {
+    return this.direction === DIRECTION_TYPE.FRONT;
+  }
+
+  // return start index offset
+  getOffset(start) {
+    return (
+      (start < 1 ? 0 : this.getIndexOffset(start)) + this.param.slotHeaderSize
+    );
+  }
+
+  updateParam(key, value) {
+    if (this.param && key in this.param) {
+      // if uniqueIds change, find out deleted id and remove from size map
+      if (key === "uniqueIds") {
+        this.sizes.forEach((v, key) => {
+          if (!value.includes(key)) {
+            this.sizes.delete(key);
+          }
+        });
+      }
+      this.param[key] = value;
+    }
+  }
+
+  // save each size map by id
+  saveSize(id, size) {
+    this.sizes.set(id, size);
+
+    // we assume size type is fixed at the beginning and remember first size value
+    // if there is no size value different from this at next comming saving
+    // we think it's a fixed size list, otherwise is dynamic size list
+    if (this.calcType === CALC_TYPE.INIT) {
+      this.fixedSizeValue = size;
+      this.calcType = CALC_TYPE.FIXED;
+    } else if (
+      this.calcType === CALC_TYPE.FIXED &&
+      this.fixedSizeValue !== size
+    ) {
+      this.calcType = CALC_TYPE.DYNAMIC;
+      // it's no use at all
+      delete this.fixedSizeValue;
+    }
+
+    // calculate the average size only in the first range
+    if (
+      this.calcType !== CALC_TYPE.FIXED &&
+      typeof this.firstRangeTotalSize !== "undefined"
+    ) {
+      if (
+        this.sizes.size <
+        Math.min(this.param.keeps, this.param.uniqueIds.length)
+      ) {
+        this.firstRangeTotalSize = [...this.sizes.values()].reduce(
+          (acc, val) => acc + val,
+          0
+        );
+        this.firstRangeAverageSize = Math.round(
+          this.firstRangeTotalSize / this.sizes.size
+        );
+      } else {
+        // it's done using
+        delete this.firstRangeTotalSize;
+      }
+    }
+  }
+
+  // in some special situation (e.g. length change) we need to update in a row
+  // try goiong to render next range by a leading buffer according to current direction
+  handleDataSourcesChange() {
+    let start = this.range.start;
+
+    if (this.isFront()) {
+      start = start - LEADING_BUFFER;
+    } else if (this.isBehind()) {
+      start = start + LEADING_BUFFER;
+    }
+
+    start = Math.max(start, 0);
+
+    this.updateRange(this.range.start, this.getEndByStart(start));
+  }
+
+  // when slot size change, we also need force update
+  handleSlotSizeChange() {
+    this.handleDataSourcesChange();
+  }
+
+  // calculating range on scroll
+  handleScroll(offset) {
+    this.direction =
+      offset < this.offset ? DIRECTION_TYPE.FRONT : DIRECTION_TYPE.BEHIND;
+    this.offset = offset;
+
+    if (!this.param) {
+      return;
+    }
+
+    if (this.direction === DIRECTION_TYPE.FRONT) {
+      this.handleFront();
+    } else if (this.direction === DIRECTION_TYPE.BEHIND) {
+      this.handleBehind();
+    }
+  }
+
+  // ----------- public method end -----------
+
+  handleFront() {
+    const overs = this.getScrollOvers();
+    // should not change range if start doesn't exceed overs
+    if (overs > this.range.start) {
+      return;
+    }
+
+    // move up start by a buffer length, and make sure its safety
+    const start = Math.max(overs - this.param.buffer, 0);
+    this.checkRange(start, this.getEndByStart(start));
+  }
+
+  handleBehind() {
+    const overs = this.getScrollOvers();
+    // range should not change if scroll overs within buffer
+    if (overs < this.range.start + this.param.buffer) {
+      return;
+    }
+
+    this.checkRange(overs, this.getEndByStart(overs));
+  }
+
+  // return the pass overs according to current scroll offset
+  getScrollOvers() {
+    // if slot header exist, we need subtract its size
+    const offset = this.offset - this.param.slotHeaderSize;
+    if (offset <= 0) {
+      return 0;
+    }
+
+    // if is fixed type, that can be easily
+    if (this.isFixedType()) {
+      return Math.floor(offset / this.fixedSizeValue);
+    }
+
+    let low = 0;
+    let middle = 0;
+    let middleOffset = 0;
+    let high = this.param.uniqueIds.length;
+
+    while (low <= high) {
+      // this.__bsearchCalls++
+      middle = low + Math.floor((high - low) / 2);
+      middleOffset = this.getIndexOffset(middle);
+
+      if (middleOffset === offset) {
+        return middle;
+      } else if (middleOffset < offset) {
+        low = middle + 1;
+      } else if (middleOffset > offset) {
+        high = middle - 1;
+      }
+    }
+
+    return low > 0 ? --low : 0;
+  }
+
+  // return a scroll offset from given index, can efficiency be improved more here?
+  // although the call frequency is very high, its only a superposition of numbers
+  getIndexOffset(givenIndex) {
+    if (!givenIndex) {
+      return 0;
+    }
+
+    let offset = 0;
+    let indexSize = 0;
+    for (let index = 0; index < givenIndex; index++) {
+      // this.__getIndexOffsetCalls++
+      indexSize = this.sizes.get(this.param.uniqueIds[index]);
+      offset =
+        offset +
+        (typeof indexSize === "number" ? indexSize : this.getEstimateSize());
+    }
+
+    // remember last calculate index
+    this.lastCalcIndex = Math.max(this.lastCalcIndex, givenIndex - 1);
+    this.lastCalcIndex = Math.min(this.lastCalcIndex, this.getLastIndex());
+
+    return offset;
+  }
+
+  // is fixed size type
+  isFixedType() {
+    return this.calcType === CALC_TYPE.FIXED;
+  }
+
+  // return the real last index
+  getLastIndex() {
+    return this.param.uniqueIds.length - 1;
+  }
+
+  // in some conditions range is broke, we need correct it
+  // and then decide whether need update to next range
+  checkRange(start, end) {
+    const keeps = this.param.keeps;
+    const total = this.param.uniqueIds.length;
+
+    // datas less than keeps, render all
+    if (total <= keeps) {
+      start = 0;
+      end = this.getLastIndex();
+    } else if (end - start < keeps - 1) {
+      // if range length is less than keeps, corrent it base on end
+      start = end - keeps + 1;
+    }
+
+    if (this.range.start !== start) {
+      this.updateRange(start, end);
+    }
+  }
+
+  // setting to a new range and rerender
+  updateRange(start, end) {
+    this.range.start = start;
+    this.range.end = end;
+    this.range.padFront = this.getPadFront();
+    this.range.padBehind = this.getPadBehind();
+    this.callUpdate(this.getRange());
+  }
+
+  // return end base on start
+  getEndByStart(start) {
+    const theoryEnd = start + this.param.keeps - 1;
+    const truelyEnd = Math.min(theoryEnd, this.getLastIndex());
+    return truelyEnd;
+  }
+
+  // return total front offset
+  getPadFront() {
+    if (this.isFixedType()) {
+      return this.fixedSizeValue * this.range.start;
+    } else {
+      return this.getIndexOffset(this.range.start);
+    }
+  }
+
+  // return total behind offset
+  getPadBehind() {
+    const end = this.range.end;
+    const lastIndex = this.getLastIndex();
+
+    if (this.isFixedType()) {
+      return (lastIndex - end) * this.fixedSizeValue;
+    }
+
+    // if it's all calculated, return the exactly offset
+    if (this.lastCalcIndex === lastIndex) {
+      return this.getIndexOffset(lastIndex) - this.getIndexOffset(end);
+    } else {
+      // if not, use a estimated value
+      return (lastIndex - end) * this.getEstimateSize();
+    }
+  }
+
+  // get the item estimate size
+  getEstimateSize() {
+    return this.isFixedType()
+      ? this.fixedSizeValue
+      : this.firstRangeAverageSize || this.param.estimateSize;
+  }
+}
diff --git a/src/directive/click-outside.js b/src/directive/click-outside.js
new file mode 100644
index 0000000..2ae6afe
--- /dev/null
+++ b/src/directive/click-outside.js
@@ -0,0 +1,21 @@
+export default {
+  mounted(el, binding) {
+    el.handler = function (e) {
+      // 点击范围在绑定的元素范围内，不执行指令操作
+      if (e.target.className === 'add-img') {
+        return
+      }
+      if (el.contains(e.target)) return
+      if (typeof binding.value === 'function') {
+        // 绑定给指令的如果是一个函数，那么将回调并指定this
+        binding.value.apply(this, arguments)
+      }
+    }
+    // 监听全局的点击事件
+    document.addEventListener('click', el.handler)
+  },
+  // 解除事件绑定
+  beforeUnmount(el) {
+    document.removeEventListener('click', el.handler)
+  }
+}
diff --git a/src/directive/index.js b/src/directive/index.js
new file mode 100644
index 0000000..4887b6c
--- /dev/null
+++ b/src/directive/index.js
@@ -0,0 +1,9 @@
+import clickoutside from "./click-outside"
+import longPress from "./long-press"
+
+const directive = {
+  longPress,
+  clickoutside
+}
+
+export default directive
diff --git a/src/directive/long-press.js b/src/directive/long-press.js
new file mode 100644
index 0000000..4ce8b2a
--- /dev/null
+++ b/src/directive/long-press.js
@@ -0,0 +1,41 @@
+const longPress = {
+  mounted(el, binding) {
+    let pressTimer = null
+    const start = (e) => {
+      if (e.type === 'click' && e.button !== 0) {
+        return
+      }
+
+      if (pressTimer === null) {
+        pressTimer = setTimeout(() => {
+          binding.value()
+        }, binding.arg || 1000) // 设置默认长按时间为 1000 毫秒
+      }
+    }
+
+    const cancel = () => {
+      if (pressTimer !== null) {
+        clearTimeout(pressTimer)
+        pressTimer = null
+      }
+    }
+
+    el.addEventListener('touchstart', start)
+    el.addEventListener('click', cancel)
+    el.addEventListener('touchend', cancel)
+    el.addEventListener('touchcancel', cancel)
+    el.addEventListener('touchmove', cancel)
+
+    el._pressStart = start
+    el._pressCancel = cancel
+  },
+  unmounted(el) {
+    el.removeEventListener('touchstart', el._pressStart)
+    el.removeEventListener('click', el._pressCancel)
+    el.removeEventListener('touchend', el._pressCancel)
+    el.removeEventListener('touchcancel', el._pressCancel)
+    el.removeEventListener('touchmove', el._pressCancel)
+  }
+}
+
+export default longPress
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..058e692
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  // eslint-disable-next-line ts/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/src/lang/id.js b/src/lang/id.js
new file mode 100644
index 0000000..212e6c5
--- /dev/null
+++ b/src/lang/id.js
@@ -0,0 +1,1792 @@
+// 印尼语
+export default {
+  checkTopMessage:'Periksa pesan',
+  unsupportedVideoFormat: "Tidak mendukung format video ini",
+  welcome: "Selamat datang di OpenIM",
+  phoneNumber: "Nomor Telepon",
+  plsEnterPhoneNumber: "Silakan masukkan nomor telepon Anda",
+  password: "Kata Sandi",
+  plsEnterPassword: "Silakan masukkan kata sandi Anda",
+  plsEnterPassword6_15: "Kata sandi (6-15 karakter alfanumerik)",
+  account: "Akun",
+  plsEnterAccount: "Silakan masukkan akun Anda",
+  plsEnterAccount6_15: "Nama pengguna (6-15 karakter alfanumerik)",
+  forgetPassword: "Lupa kata sandi",
+  createAccount: "Buat akun",
+  verificationCodeLogin: "Login dengan kode verifikasi",
+  login: "Masuk",
+  noAccountYet: "Belum punya akun?",
+  loginNow: "Masuk sekarang",
+  registerNow: "Daftar sekarang",
+  lockPwdErrorHint: "Kesalahan %s kali",
+  newUserRegister: "Pendaftaran pengguna baru",
+  verificationCode: "Kode verifikasi",
+  verificationSuccessful: "Verifikasi berhasil",
+  sendVerificationCode: "Kirim kode verifikasi",
+  verification_code1: "Silakan masukkan kode verifikasi",
+  correct_email_address: "Silakan masukkan alamat email yang benar",
+  Resend: "Kirim ulang",
+  bind_email: "Ikatan email",
+  email_verification: "Verifikasi email",
+  login_details: "Detail login",
+  verification_code: "Silakan masukkan kode verifikasi email",
+  email_verification_code: "Kode verifikasi email",
+  currently_bound_email: "Email yang saat ini terikat:",
+  text_email: "Jika email Anda tidak lagi digunakan, harap segera ganti",
+  remove_this_device: "Apakah Anda yakin ingin menghapus perangkat ini?",
+  remove_this_device1:
+    "Apakah Anda yakin ingin menghapus perangkat ini? Setelah dihapus, Anda perlu memverifikasi login lagi saat menggunakan perangkat ini",
+  go_to_settings: "Buka pengaturan",
+  go_to_binding: "Buka ikatan",
+  date_of_birth: "Tanggal lahir",
+  confidential: "Rahasia",
+  year: "Tahun",
+  not_perfection: "Belum sempurna",
+  old_password: "Kata sandi lama",
+  myCreatedGroup: "Grup yang saya buat",
+  myManageGroup: "Grup yang saya kelola",
+  myJoinGroup: "Grup yang saya ikuti",
+  please_enter_old_password: "Silakan masukkan kata sandi lama",
+  trusted_device: "Perangkat terpercaya",
+  change_email_address: "Ganti alamat email",
+  current_device: "Perangkat saat ini",
+  remove_device: "Hapus perangkat",
+  current_device_records: "Berikut adalah semua catatan login perangkat Anda",
+  text_device: "Manajemen Perangkat Masuk",
+  verification_time: "Waktu verifikasi:",
+  text_device1:
+    "Berikut adalah semua perangkat masuk Anda. Klik untuk melihat detail dan catatan masuk perangkat ini.",
+  change_the_binding: "Ganti ikatan",
+  resendVerificationCode: "Kirim ulang kode verifikasi",
+  verificationCodeTimingReminder:
+    "Dapatkan ulang kode verifikasi dalam %s detik",
+  defaultVerificationCode: "(Kode verifikasi default: %s)",
+  plsEnterVerificationCode: "Silakan masukkan kode verifikasi Anda",
+  invitationCode: "Kode undangan",
+  device_list: "Daftar perangkat",
+  plsEnterInvitationCode: "Silakan masukkan kode undangan Anda %s",
+  optional: "Opsional",
+  nextStep: "Langkah berikutnya",
+  plsEnterRightPhone: "Silakan masukkan nomor telepon yang benar",
+  enterVerificationCode: "Masukkan kode verifikasi ponsel",
+  setPassword: "Atur kata sandi",
+  plsConfirmPasswordAgain: "Harap konfirmasi kata sandi Anda lagi",
+  text_password2: "Silakan konfirmasi kata sandi masuk lagi",
+  please_enter_new_password_again: "Silakan masukkan kata sandi baru Anda lagi",
+  confirmPassword: "Konfirmasi kata sandi",
+  wrongPasswordFormat: "Format kata sandi salah",
+  plsCompleteInfo: "Harap lengkapi informasi pribadi Anda",
+  plsEnterYourNickname: "Silakan masukkan nama panggilan Anda",
+  pleaseEnterYourUsername: "Silakan masukkan nama pengguna Anda",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "Masukkan nama pengguna Anda untuk membantu kami mengidentifikasi akun Anda",
+  text_1:
+    "Akun ini belum terikat email, jadi pemulihan kata sandi tidak didukung untuk sementara waktu",
+  setInfo: "Atur informasi",
+  loginPwdFormat: "6-20 karakter alfanumerik",
+  passwordLogin: "Masuk dengan kata sandi",
+  contacts: "Kontak",
+  workbench: "Bengkel",
+  mine: "Saya",
+  me: "Saya",
+  draftText: "Draf",
+  everyone: "Semua orang",
+  you: "Anda",
+  groupAc: "Pengumuman Grup",
+  createGroupNtf: "%s telah membuat obrolan grup ",
+  editGroupInfoNtf: "%s mengedit info grup",
+  quitGroupNtf: "%s keluar dari obrolan grup",
+  invitedJoinGroupNtf: "%s mengundang %s untuk bergabung dalam obrolan grup",
+  kickedGroupNtf: "%s ditendang dari obrolan grup oleh %s",
+  joinGroupNtf: "%s bergabung dengan obrolan grup",
+  dismissGroupNtf: "%s membubarkan obrolan grup",
+  transferredGroupNtf: "%s mentransfer hak administrasi grup kepada %s",
+  muteMemberNtf: "%s dibisukan oleh %s selama %s",
+  muteCancelMemberNtf: "%s pembisuan telah dibatalkan oleh %s",
+  muteGroupNtf: "%s mengaktifkan pembisuan grup",
+  muteCancelGroupNtf: "%s membatalkan pembisuan grup",
+  friendAddedNtf:
+    "Kamu sudah menjadi teman, sekarang kamu bisa mulai chatting.",
+  openPrivateChatNtf: "Mode penghapusan pesan sudah diaktifkan",
+  closePrivateChatNtf: "Mode penghapusan pesan sudah dinonaktifkan",
+  memberInfoChangedNtf: "%s telah mengedit informasi anggota grup sendiri",
+  unsupportedMessage: "Jenis pesan ini belum didukung",
+  picture: "Gambar",
+  video: "Video",
+  voice: "Pesan suara",
+  safety: "Keamanan",
+  location: "Lokasi",
+  file: "File",
+  carte: "Kartu nama",
+  emoji: "Emoji kustom",
+  chatRecord: "Riwayat obrolan",
+  revokeMsg: "Membatalkan pesan",
+  aRevokeBMsg: "%s Membatalkan pesan dari %s",
+  blockedByFriendHint: "Pesan telah dikirim tetapi ditolak oleh penerima",
+  sendFriendVerification: "Verifikasi tambahan",
+  removedFromGroupHint: "Anda telah dikeluarkan dari grup",
+  groupDisbanded: "Grup sudah dibubarkan",
+  createdGroup: "Anda belum membuat grup",
+  search: "Cari",
+  newGroups: "Buat grup baru",
+  groupNames: "Silakan masukkan nama grup",
+  synchronizing: "Menyinkronkan",
+  syncFailed: "Gagal menyinkronkan",
+  connecting: "Menghubungkan",
+  connectionFailed: "Gagal menghubungkan",
+  top: "Atas",
+  cancelTop: "Batalkan atas",
+  markHasRead: "Tandai sudah dibaca",
+  delete: "Hapus",
+  nPieces: "%s pesan",
+  online: "Online",
+  offline: "Offline",
+  phoneOnline: "Telepon",
+  pcOnline: "Komputer",
+  webOnline: "Web",
+  webMiniOnline: "Mini Web",
+  upgradeFind: "Ditemukan versi baru",
+  upgradeVersion: "Versi baru ditemukan %s, versi Anda saat ini adalah %s",
+  upgradeDescription: "Deskripsi pembaruan:",
+  upgradeIgnore: "Abaikan",
+  upgradeLater: "Nanti",
+  upgradeNow: "Sekarang",
+  upgradeNever: "Jangan pernah",
+  inviteYouCall: "%s mengundang Anda untuk melakukan %s",
+  rejectCall: "Tolak",
+  acceptCall: "Terima",
+  callVoice: "Panggilan suara",
+  callVideo: "Panggilan video",
+  sentSuccessfully: "Berhasil dikirim",
+  copySuccessfully: "Berhasil disalin",
+  binding_successful: "Berhasil terikat",
+  day: "hari",
+  hour: "jam",
+  hours: "jam",
+  minute: "menit",
+  seconds: "detik",
+  cancel: "Batal",
+  determine: "Tentukan",
+  failed_to_load: "Gagal memuat",
+  failed_to_load1: "Gagal memuat. Silakan coba lagi nanti",
+  removal_failed: "Gagal menghapus",
+  toolboxAlbum: "Album",
+  toolboxCall: "Panggilan video",
+  toolboxCamera: "Kamera",
+  toolboxCard: "Kartu",
+  toolboxFile: "Berkas",
+  toolboxLocation: "Lokasi",
+  send: "Kirim",
+  holdTalk: "Tahan untuk berbicara",
+  releaseToSend: "Lepaskan untuk mengirim",
+  releaseToSendSwipeUpToCancel:
+    "Lepaskan untuk mengirim, geser ke atas untuk membatalkan",
+  liftFingerToCancelSend: "Angkat jari untuk membatalkan pengiriman",
+  callDuration: "Durasi panggilan %s",
+  cancelled: "Dibatalkan",
+  cancelledByCaller: "Dibatalkan oleh penelepon",
+  rejectedByCaller: "Ditolak oleh penelepon",
+  callTimeout: "Waktu panggilan habis",
+  rejected: "Ditolak",
+  forwardMaxCountHint:
+    "Saat ini hanya mendukung paling banyak dua puluh pesan yang diteruskan~",
+  typing: "Sedang mengetik...",
+  addSuccessfully: "Berhasil ditambahkan",
+  addFailed: "Gagal menambahkan",
+  setSuccessfully: "Berhasil diatur",
+  callingBusy:
+    "Anda sudah dalam panggilan dan tidak dapat melakukan operasi ini!",
+  groupCallHint:
+    "Grup saat ini sedang dalam panggilan. Apakah Anda yakin ingin bergabung dengan panggilan saat ini?",
+  joinIn: "Bergabung",
+  menuCopy: "Salin",
+  menuDel: "Hapus",
+  menuForward: "Teruskan",
+  menuReply: "Balas",
+  menuMulti: "Multi-pilihan",
+  menuRevoke: "Tarik kembali",
+  menuAdd: "Tambahkan",
+  nMessage: "%s pesan baru",
+  plsSelectLocation: "Silakan pilih lokasi",
+  groupAudioCallHint: "%s orang sedang dalam panggilan suara",
+  groupVideoCallHint: "%s orang sedang dalam panggilan video",
+  reEdit: "Edit ulang",
+  playSpeed: "Kecepatan pemutaran",
+  download: "Unduh",
+  download1: "Unduh sekarang",
+  nicknames: "Nama panggilan pengguna",
+  downloadAPP: "Unduh aplikasi",
+  private_chat: "Obrolan pribadi",
+  googleMap: "Peta Google",
+  check_for_updates: "Periksa pembaruan",
+  appleMap: "Peta Apple",
+  baiduMap: "Peta Baidu",
+  amapMap: "Peta Amap",
+  signature: "Tanda tangan",
+  please_enter_user_nickname: "Silakan masukkan nama panggilan pengguna",
+  set_characters: "Harap atur 4-15 karakter",
+  personalized_signature:
+    "Silakan masukkan tanda tangan pribadi (batas karakter 6-50)",
+  tencentMap: "Peta Tencent",
+  offlineMeetingMessage: "Anda menerima pesan undangan rapat offline",
+  offlineMessage: "Anda memiliki pesan baru offline",
+  offlineCallMessage: "Anda menerima pesan undangan panggilan offline",
+  logoutHint: "Apakah Anda yakin ingin keluar?",
+  myInfo: "Informasi saya",
+  workingCircle: "Lingkaran kerja",
+  accountSetup: "Pengaturan akun",
+  aboutUs: "Tentang kami",
+  about: "Tentang",
+
+  bgColor: "Warna latar belakang",
+
+  logout: "Keluar",
+  qrcode: "Kode QR",
+  qrcodeHint:
+    "Pindai kode QR di bawah ini untuk menambahkan saya sebagai teman",
+  favoriteFace: "Wajah favorit",
+  favoriteManage: "Kelola",
+  favoriteCount: "Total %s emotikon favorit",
+  favoriteDel: "Hapus (%s)",
+  hasRead: "Telah dibaca",
+  unread: "Belum dibaca",
+  nPersonUnRead: "%s orang belum dibaca",
+  allRead: "Semua sudah dibaca",
+  messageRecipientList: "Daftar penerima pesan",
+  hasReadCount: "Dibaca (%s)",
+  unreadCount: "Belum dibaca (%s)",
+  newFriend: "Teman baru",
+  newFriendList: "Daftar permintaan pertemanan",
+  newGroup: "Obrolan grup baru",
+  myFriend: "Teman saya",
+  myGroup: "Grup saya",
+  addManager: "Tambahkan manajer",
+  privateSetting: "Pengaturan pribadi",
+  add: "Tambah",
+  scan: "Pindai",
+  scanHint: "Pindai kartu nama kode QR",
+  addFriend: "Tambah Teman",
+  addFriendHint: "Cari dan tambahkan dengan ID",
+  createGroup: "Buat Obrolan Grup",
+  createGroupHint: "Buat obrolan grup, gunakan OpenIM sepenuhnya",
+  addGroup: "Tambahkan Grup",
+  addGroupHint: "Tanyakan kepada administrator atau anggota grup untuk ID",
+  searchIDAddFriend: "Cari ID untuk Tambah Teman",
+  searchIDAddGroup: "Cari ID untuk Tambah Grup",
+  searchIDIs: "ID: %s",
+  searchPhoneIs: "Nomor telepon: %s",
+  searchEmailIs: "Surel: %s",
+  searchNicknameIs: "Nama panggilan: %s",
+  searchGroupNicknameIs: "Nama panggilan grup: %s",
+  noFoundUser: "Tidak dapat menemukan pengguna ini",
+  noFoundGroup: "Tidak dapat menemukan obrolan grup ini",
+  joinGroupDate: "Tanggal Bergabung",
+  joinGroupMethod: "Metode Bergabung",
+  byInviteJoinGroup: "%s mengundang masuk grup",
+  byIDJoinGroup: "Cari ID grup",
+  byQrcodeJoinGroup: "Kode QR grup",
+  groupID: "ID Grup",
+  setAsAdmin: "Atur sebagai Admin",
+  setMute: "Atur Senyap",
+  organizationInfo: "Informasi Organisasi",
+  organization: "Organisasi",
+  department: "Departemen",
+  position: "Posisi",
+  personalInfo: "Info Pribadi",
+  viewDynamics: "Lihat Dinamika",
+  audioAndVideoCall: "Panggilan Audio dan Video",
+  sendMessage: "Kirim Pesan",
+  avatar: "Avatar",
+  name: "Nama",
+  nickname: "Nama Panggilan",
+  gender: "Jenis Kelamin",
+  englishName: "Nama Inggris",
+  birthDay: "Tanggal Lahir",
+  tel: "Telepon Kantor",
+  mobile: "Nomor Ponsel",
+  email: "Surel",
+  man: "Pria",
+  woman: "Wanita",
+  friendSetup: "Pengaturan Teman",
+  setupRemark: "Atur Catatan",
+  recommendToFriend: "Rekomendasikan ke Teman",
+  addToBlacklist: "Tambahkan ke Daftar Hitam",
+  unfriend: "Membatalkan hubungan pertemanan",
+  areYouSureDelFriend: "Apakah Anda yakin ingin menghapus teman?",
+  areYouSureAddBlacklist:
+    "Apakah Anda yakin ingin menambahkan teman ke daftar hitam?",
+  remark: "Catatan",
+  save: "Simpan",
+  saveSuccessfully: "Berhasil disimpan",
+  saveFailed: "Gagal disimpan",
+  groupVerification: "Verifikasi obrolan grup",
+  friendVerification: "Verifikasi teman",
+  email_address: "Masukkan alamat email",
+  sendEnterGroupApplication: "Kirim permohonan bergabung ke grup",
+  sendToBeFriendApplication: "Kirim permohonan menjadi teman",
+  sendSuccessfully: "Berhasil dikirim",
+  reset_successful: "Berhasil direset",
+  bind_new_email: "Ikatan email baru",
+  Login_failed: "Gagal masuk",
+  successful_home: "Berhasil mendaftar",
+  sendFailed: "Gagal dikirim",
+  canNotAddFriends: "Pengguna ini telah mengatur tidak dapat ditambahkan!",
+  mutedAll: "Semua dibisukan",
+  tenMinutes: "10 menit",
+  oneHour: "1 jam",
+  twelveHours: "12 jam",
+  oneDay: "1 hari",
+  custom: "Kustom",
+  unmute: "Batalkan diam",
+  youMuted: "Anda telah dibisukan",
+  groupMuted: "Dibisukan di grup",
+  notDisturbMode: "Mode jangan ganggu",
+  allowRing: "Nada notifikasi pesan baru",
+  allowVibrate: "Getaran pesan baru",
+  forbidAddMeToFriend: "Larang tambahkan saya sebagai teman",
+  blacklist: "Daftar hitam buku alamat",
+  unlockSettings: "Buka pengaturan",
+  changePassword: "Ubah kata sandi",
+  clearChatHistory: "Hapus riwayat obrolan",
+  confirmClearChatHistory:
+    "Apakah Anda yakin ingin menghapus semua riwayat obrolan?",
+  languageSetup: "Pengaturan bahasa",
+  language: "Bahasa",
+  english: "Inggris",
+  setting_up: "Mengatur...",
+  chinese: "Cina Sederhana",
+  traditional_chinese: "Cina Tradisional",
+  followSystem: "Ikuti sistem",
+  blacklistEmpty: "Daftar hitam kosong",
+  remove: "Hapus",
+  removeFriend: "Hapus teman",
+  fingerprint: "Sidik jari",
+  gesture: "Gestur",
+  biometrics: "Pengenalan Biometrik",
+  plsEnterPwd: "Silakan masukkan kata sandi",
+  plsEnterOldPwd: "Silakan masukkan kata sandi lama",
+  plsEnterNewPwd: "Silakan masukkan kata sandi baru",
+  plsConfirmNewPwd: "Silakan konfirmasi kata sandi baru",
+  reset: "Reset",
+  oldPwd: "Kata sandi lama",
+  newPwd: "Kata sandi baru",
+  confirmNewPwd: "Konfirmasi kata sandi baru:",
+  plsEnterConfirmPwd: "Silakan masukkan kata sandi konfirmasi",
+  twicePwdNoSame: "Kata sandi yang dimasukkan dua kali tidak sama",
+  twicePwd: "Kata sandi baru tidak cocok, silakan setel ulang",
+  changedSuccessfully: "Berhasil diubah",
+  deleteSuccessfully: "Berhasil dihapus",
+  checkNewVersion: "Periksa versi baru",
+  noAddGround: "Belum ada teman yang ditambahkan ke grup",
+  chatContent: "Konten obrolan",
+  topContacts: "Kontak teratas",
+  messageNotDisturb: "Mode tidak mengganggu pesan",
+  messageNotDisturbHint: "Terima pesan tanpa gangguan",
+  burnAfterReading: "Membakar setelah dibaca",
+  timeSet: "Pengaturan waktu",
+  setChatBackground: "Atur latar belakang obrolan",
+  fontFace: "Font",
+  fontSize: "Ukuran font",
+  little: "Kecil",
+  standard: "Standar",
+  big: "Besar",
+  thirtySeconds: "30 detik",
+  fiveMinutes: "5 menit",
+  clearAll: "Bersihkan semua",
+  clearSuccessfully: "Berhasil membersihkan",
+  groupChatSetup: "Pengaturan obrolan grup",
+  viewAllGroupMembers: "Lihat semua anggota grup (%s)",
+  groupManage: "Kelola grup",
+  myGroupMemberNickname: "Nama saya dalam grup ini",
+  topChat: "Obrolan teratas",
+  muteAllMember: "Diamkan semua anggota",
+  exitGroup: "Keluar dari obrolan grup",
+  dismissGroup: "Bubar obrolan grup",
+  dismissGroupHint:
+    "Semua anggota grup akan keluar dari obrolan ini dan tidak bisa mengirim atau menerima pesan",
+  quitGroupHint:
+    "Anda tidak akan menerima pesan dari obrolan grup setelah keluar.",
+  joinGroupSet: "Pengaturan masuk ke grup",
+  allowAnyoneJoinGroup: "Izinkan siapa pun bergabung dengan grup",
+  inviteNotVerification: "Undangan anggota grup tidak perlu diverifikasi",
+  needVerification: "Diperlukan pengiriman pesan verifikasi",
+  addMember: "Tambah",
+  delMember: "Hapus",
+  groupOwner: "Pemilik grup",
+  groupAdmin: "Admin grup",
+  notAllowSeeMemberProfile: "Tidak diizinkan melihat profil anggota grup lain",
+  notAllAddMemberToBeFriend:
+    "Tidak diizinkan menambahkan anggota grup menjadi teman",
+  transferGroupOwnerRight: "Transfer hak kepemilikan grup",
+  groupName: "Nama grup",
+  groupAcPermissionTips:
+    "Hanya pemilik grup dan administrator yang dapat mengedit",
+  plsEnterGroupAc: "Silakan masukkan pengumuman grup",
+  edit: "Edit",
+  publish: "Terbitkan",
+  groupMember: "Anggota grup",
+  selectedPeopleCount: "Dipilih (%s)",
+  confirmSelectedPeople: "Konfirmasi (%s/%s)",
+  confirm: "Konfirmasi",
+  log_in_time: "Waktu login:",
+  log_in_time1: "Waktu login",
+  login_IP: "IP login:",
+  confirmTransferGroupToUser:
+    "Yakin ingin mentransfer kepemilikan grup ke: %s?",
+  removeGroupMember: "Hapus anggota grup",
+  searchNotResult: "Tidak ada hasil pencarian",
+  groupQrcode: "Kode QR grup",
+  groupQrcodeHint:
+    "Pindai kode QR di bawah untuk bergabung dengan obrolan grup",
+  approved: "Disetujui",
+  accept: "Terima",
+  reject: "Tolak",
+  friendGrouping: "Pengelompokan teman",
+  waitingForVerification: "Menunggu verifikasi dari pihak lain",
+  rejectSuccessfully: "Penolakan berhasil",
+  rejectFailed: "Penolakan gagal",
+  applyJoin: "Minta bergabung",
+  enterGroup: "Masuk ke obrolan grup",
+  applyReason: "Alasan permintaan: %s",
+  invite: "Undang",
+  sourceFrom: "Sumber: %s",
+  byMemberInvite: "Undangan",
+  bySearch: "Melalui pencarian",
+  byScanQrcode: "Pindai kode QR",
+  iCreatedGroup: "Saya yang membuat",
+  iJoinedGroup: "Saya yang bergabung",
+  nPerson: "{count} orang",
+  searchNotFound: "Tidak ditemukan hasil terkait",
+  searchNotFoundMember: "Tidak ditemukan pengguna terkait",
+  organizationStructure: "Struktur organisasi",
+  recentConversations: "Percakapan terbaru",
+  selectAll: "Pilih semua",
+  plsEnterGroupNameHint:
+    "Beri nama grup untuk memudahkan pencarian selanjutnya",
+  completeCreation: "Selesaikan pembuatan",
+  sendCarteConfirmHint: "Yakin ingin mengirimkan kontak ini ke obrolan ini?",
+  sentSeparatelyTo: "Kirimkan secara terpisah ke:",
+  sentTo: "Kirimkan ke:",
+  leaveMessage: "Pesan",
+  mergeForwardHint: "[Penggabungan Lanjutan] Total %s pesan",
+  mergeForward: "Gabungkan Lanjutan",
+  quicklyFindChatHistory: "Cari Riwayat Obrolan Cepat",
+  notFoundChatHistory: "Tidak ditemukan konten terkait %s",
+  globalSearchAll: "Semua",
+  globalSearchContacts: "Kontak",
+  globalSearchGroup: "Grup",
+  globalSearchChatHistory: "Riwayat Obrolan",
+  globalSearchChatFile: "Berkas",
+  relatedChatHistory: "%s catatan obrolan terkait",
+  seeMoreRelatedContacts: "Lihat lebih banyak kontak terkait",
+  seeMoreRelatedGroup: "Lihat lebih banyak grup terkait",
+  seeMoreRelatedChatHistory: "Lihat lebih banyak riwayat obrolan terkait",
+  seeMoreRelatedFile: "Lihat lebih banyak dokumen terkait",
+  publishPicture: "Terbitkan Gambar",
+  publishVideo: "Terbitkan Video",
+  mentioned: "Disebutkan: %s",
+  comment: "Komentar",
+  like: "Suka",
+  reply: "Balas",
+  rollUp: "Gulung",
+  fullText: "Teks Lengkap",
+  selectAssetsFromCamera: "Pilih dari Kamera",
+  selectAssetsFromAlbum: "Pilih dari Album",
+  whoCanWatch: "Siapa yang Bisa Melihat",
+  remindWhoToWatch: "Ingatkan Siapa yang Melihat",
+  public: "Publik",
+  everyoneCanSee: "Semua orang bisa melihat",
+  partiallyVisible: "Sebagian Terlihat",
+  visibleToTheSelected: "Terlihat bagi yang dipilih",
+  partiallyInvisible: "Sebagian Tak Terlihat",
+  invisibleToTheSelected: "Tak Terlihat bagi yang dipilih",
+  private: "Pribadi",
+  onlyVisibleToMe: "Hanya terlihat oleh saya",
+  selectVideoLimit: "Durasi tidak boleh lebih dari 15 detik",
+  selectContactsLimit: "Minimal pilih satu kontak",
+  message: "Pesan",
+  commentedYou: "Memberi komentar pada Anda: %s",
+  likedYou: "Menyukai Anda",
+  mentionedYou: "Mentioned Anda",
+  replied: "Membalas",
+  detail: "Detail",
+  totalNPicture: "Total %s gambar",
+  noDynamic: "Tidak ada dinamika",
+  callRecords: "Catatan Panggilan",
+  allCall: "Semua Panggilan",
+  missedCall: "Panggilan Tidak Terjawab",
+  incomingCall: "Panggilan Masuk",
+  outgoingCall: "Panggilan Keluar",
+  microphone: "Mikrofon",
+  speaker: "Pemancar suara",
+  hangUp: "Tutup",
+  pickUp: "Angkat",
+  waitingCallHint: "Sedang menelepon...",
+  waitingVoiceCallHint: "Menunggu lawan bicara menjawab...",
+  invitedVoiceCallHint: "Undang Anda untuk panggilan suara...",
+  waitingVideoCallHint: "Menunggu lawan bicara menerima undangan",
+  invitedVideoCallHint: "Undang Anda untuk panggilan video...",
+  waitingToAnswer: "Menunggu untuk menjawab",
+  invitedYouToCall: "Undang Anda untuk bicara",
+  calling: "Sedang menelepon",
+  nPeopleCalling: "%s orang sedang menelepon",
+  whoInvitedVoiceCallHint: "%s mengundang Anda untuk panggilan suara",
+  whoInvitedVideoCallHint: "%s mengundang Anda untuk panggilan video",
+  plsInputMeetingSubject: "Silakan masukkan topik pertemuan",
+  meetingStartTime: "Waktu mulai",
+  meetingDuration: "Durasi pertemuan",
+  enterMeeting: "Masuk ke pertemuan",
+  meetingNo: "Nomor pertemuan",
+  yourMeetingName: "Nama Anda",
+  plsInputMeetingNo: "Silakan masukkan nomor pertemuan",
+  plsInputYouMeetingName: "Silakan masukkan nama Anda",
+  meetingSubjectIs: "Topik pertemuan: %s",
+  meetingStartTimeIs: "Waktu mulai: %s",
+  meetingDurationIs: "Durasi pertemuan: %s",
+  meetingHostIs: "Pembawa acara: %s",
+  meetingNoIs: "Nomor pertemuan: %s",
+  meetingMessageClickHint:
+    "Klik pesan ini untuk langsung bergabung ke pertemuan",
+  meetingMessage: "Pesan pertemuan",
+  openMeeting: "Pertemuan belum selesai",
+  didNotStart: "Belum dimulai",
+  started: "Telah dimulai",
+  meetingInitiatorIs: "Pertemuan video yang diinisiasi oleh %s",
+  meetingDetail: "Detail pertemuan",
+  meetingOrganizerIs: "Penyelenggara: %s",
+  updateMeetingInfo: "Perbarui informasi pertemuan",
+  cancelMeeting: "Batal pertemuan",
+  videoMeeting: "Pertemuan video",
+  joinMeeting: "Gabung ke pertemuan",
+  bookAMeeting: "Jadwalkan pertemuan",
+  quickMeeting: "Pertemuan cepat",
+  confirmTheChanges: "Konfirmasi perubahan",
+  invitesYouToVideoConference:
+    "%s mengundang Anda untuk bergabung ke konferensi video",
+  over: "Selesai",
+  meetingMute: "Suarakan",
+  meetingUnmute: "Buka suara",
+  meetingCloseVideo: "Tutup video",
+  meetingOpenVideo: "Buka video",
+  meetingEndSharing: "Akhiri berbagi",
+  meetingShareScreen: "Berbagi Layar",
+  meetingMembers: "Anggota(%s)",
+  settings: "Pengaturan",
+  leaveMeeting: "Tinggalkan Rapat",
+  endMeeting: "Akhiri Rapat",
+  leaveMeetingConfirmHint: "Yakin ingin meninggalkan rapat?",
+  endMeetingConfirmHit: "Yakin ingin mengakhiri rapat?",
+  meetingSettings: "Pengaturan Rapat",
+  allowMembersOpenMic: "Izinkan anggota membuka mikrofon sendiri",
+  allowMembersOpenVideo: "Izinkan anggota membuka video",
+  onlyHostShareScreen: "Hanya tuan rumah yang dapat berbagi layar",
+  onlyHostInviteMember: "Hanya tuan rumah yang dapat mengundang anggota rapat",
+  defaultMuteMembers: "Anggota masuk dalam rapat dalam keadaan diam",
+  pinThisMember: "Pasang anggota ini di paling atas",
+  unpinThisMember: "Lepas pin",
+  allSeeHim: "Semua melihat dia",
+  cancelAllSeeHim: "Batalkan semua melihat dia",
+  muteAll: "Diamkan semua",
+  unmuteAll: "Batalkan diam semua",
+  members: "Anggota",
+  screenShare: "Berbagi Layar",
+  screenShareHint: "Sedang berbagi layar.",
+  meetingClosedHint:
+    "Rapat telah ditutup atau koneksi terputus, yakin ingin meninggalkan?",
+  meetingIsOver: "Rapat sudah selesai!",
+  networkError: "Kesalahan jaringan, silakan coba lagi nanti!",
+  shareSuccessfully: "Berbagi berhasil!",
+  notFoundMinP: "Belum menemukan aplikasi mini yang dipublikasikan",
+  notSendMessageNotInGroup:
+    "Tidak dapat mengirim pesan dalam obrolan grup yang sudah keluar",
+  whoModifyGroupName: "{name} telah mengubah nama obrolan grup menjadi ",
+  accountWarn: "Peringatan!",
+  accountException:
+    "Akun Anda telah masuk di perangkat lain, silakan segera ubah kata sandi Anda.",
+  tagGroup: "Tag",
+  issueNotice: "Berikan pemberitahuan",
+  createTagGroup: "Buat Grup Tag",
+  plsEnterTagGroupName: "Silakan masukkan nama tag",
+  tagGroupMember: "Anggota Tag",
+  completeEdit: "Selesai Mengedit",
+  finish: "Selesai",
+  emptyTagGroup: "Grup tag kosong",
+  confirmDelTagGroupHint: "Yakin ingin menghapus grup tag ini?",
+  editTagGroup: "Edit Tag",
+  newBuild: "Buat Baru",
+  receiveMember: "Terima Anggota",
+  emptyNotification: "Pemberitahuan kosong",
+  notificationReceiver: "%s penerima: %s",
+  sendAnother: "Kirim yang lain",
+  confirmDelTagNotificationHint:
+    "Yakin ingin menghapus catatan pemberitahuan ini?",
+  contentNotBlank: "Konten tidak boleh kosong",
+  plsEnterDescription: "Silakan masukkan teks deskripsi",
+  gifNotSupported: "Gambar gif tidak didukung",
+  register: "Daftar",
+  hk: "Tradisional",
+  RegisterSuccess: "Pendaftaran Berhasil",
+  LoginSuccess: "Login Berhasil",
+  init_validate_1: "Nama pengguna terdiri dari 6-15 huruf dan angka",
+  init_validate_10: "Nomor ponsel atau kata sandi salah, silakan coba lagi",
+  init_validate_5: "Kata sandi harus terdiri dari 6-15 huruf dan angka, silakan atur ulang kata sandi",
+  init_validate_2: "Kata sandi tidak cocok, silakan atur ulang",
+  init_validate_3:
+    "Kata sandi harus terdiri dari 6-15 huruf dan angka, silakan atur ulang kata sandi",
+  init_validate_6: "Kata sandi harus terdiri dari 6-15 huruf dan angka",
+  init_validate_4: "Pendaftaran berhasil, akan kembali ke halaman login",
+  init_hint_1: "6-15 digit atau huruf",
+  init_hint_2: "Konfirmasi kata sandi login",
+  init_hint_3: "Kata sandi login",
+  username: "Nama Pengguna",
+  to_modify: "Ubah",
+  confirm_password: "Konfirmasi Kata Sandi",
+  notification_settings: "Pengaturan Notifikasi",
+  init_text_1: "Pendaftaran dan login menunjukkan persetujuan Anda terhadap",
+  init_text_2: "《Perjanjian Layanan Pengguna》",
+  init_text_3: "dan",
+  init_text_4: "《Kebijakan Privasi》",
+  init_text_5: "Perjanjian Layanan dan Kebijakan Privasi",
+  init_text_6:
+    "Untuk melindungi hak-hak dan kepentingan hukum Anda, harap baca dan setujui perjanjian berikut",
+  refuse: "Menolak",
+  refuse_continue: "Setuju dan Lanjutkan",
+  forget_password: "Lupa Kata Sandi?",
+  register_user: "Daftar Pengguna",
+  gotoLogin: "Masuk",
+  gotoRegister: "Buat Akun Baru",
+  enterGroupCheck: "Masuk ke Pengajuan Grup",
+  openPhotoError_1: "Tidak dapat membaca file yang dipilih",
+  openPhotoError_2: "Gagal mengunggah file",
+  openPhotoError_3: "Tidak dapat membaca informasi file",
+  agreeAll: "Setuju Semua",
+  whatCanManagerDo: "Hak Pengelolaan Grup",
+  changeGroupName: "Ubah Nama Grup",
+  deleteMemberMessage: "Hapus Pesan Anggota Grup",
+  chatPrivate: "Obrolan Pribadi Terenkripsi dengan Anggota Grup",
+  memberMute: "Bisukan Anggota Grup",
+  deleteMember: "Hapus Anggota",
+  changeNotice: "Tambah/Ubah/Hapus Pengumuman Grup",
+  checkInGroup: "Periksa dalam Grup",
+  setAdmin: "Atur sebagai Admin",
+  deleteAdmin: "Hapus Admin",
+  deleteAdminTitle: "Anda yakin ingin menghapus administrator ini?",
+  deleteAdminDetail:
+    "Dengan menghapus anggota ini dari admin, dia tidak akan dapat mengelola pesan grup.",
+  deleteSuccess: "Berhasil dihapus",
+  mobile_web_page: "Akses halaman web ponsel",
+  deleteMemberTitle: "Anda yakin ingin menghapus anggota ini?",
+  deleteMemberDetail:
+    "Dengan menghapus anggota ini dari grup ini, dia tidak akan dapat mengirim atau menerima pesan.",
+  deleteSelf: "Tidak dapat menghapus diri sendiri",
+  handled: "Ditangani",
+  unhandle: "Belum Ditangani",
+  noCheck: "Tidak ada permintaan yang ditangani saat ini~",
+  success: "Berhasil",
+  nameLenth: "Silakan atur 1-15 karakter",
+  editNickname: "Edit nama panggilan grup",
+  text_password: "Silakan atur kata sandi login baru",
+  quit: "Keluar",
+  waitAMoment: "Saya akan mempertimbangkannya",
+  editWarningTitle:
+    "Apakah Anda yakin ingin keluar dari pengeditan nama panggilan grup?",
+  editWarningDetail:
+    "Perubahan nama panggilan grup Anda belum disimpan, apakah Anda ingin melanjutkan dan keluar?",
+  editGroupAvatar: "Edit avatar grup ini",
+  myGroupAvatar: "Avatar grup saya",
+  inviteLink: "Undangan tautan",
+  inviteTips:
+    "Semua pengguna yang telah menginstal aplikasi ini akan dapat bergabung dengan obrolan grup Anda melalui tautan ini",
+  inviteLinkCopy: "Tautan undangan telah disalin",
+  shareLink: "Bagikan tautan",
+  manageLink: "Kelola tautan undangan",
+  copyLink: "Salin tautan",
+  deleteLink: "Hapus tautan",
+  deleteLinkTipsTitle: "Anda yakin ingin mencabut tautan ini?",
+  deleteLinkTipsDetail:
+    "Anda yakin ingin mencabut tautan undangan ini? Setelah dicabut, orang lain tidak akan bisa bergabung dengan grup menggunakan tautan ini.",
+  linkManage: "Kelola tautan",
+  openManage:
+    "Setelah diaktifkan, persetujuan dari pemilik grup atau admin diperlukan untuk bergabung dengan grup",
+  timeValid: "Batas waktu yang valid",
+  linkInvalidTips:
+    "Tautan undangan akan kedaluwarsa setelah tanggal ini, dan tidak akan dapat diakses lagi",
+  valid: "Valid dalam",
+  dayValid: "hari",
+  forever: "Selamanya",
+  foreverValid: "Selamanya valid",
+  attendTips:
+    "Permintaan bergabung telah dikirim. Setelah diulas oleh admin, Anda akan dapat bergabung dengan grup.",
+  memberCountLimit: "Jumlah anggota grup telah mencapai batas",
+  linkIsOut: "Tautan undangan telah kadaluarsa",
+  requestAttend: "Minta bergabung dengan obrolan grup",
+  needCheck: "Grup ini memerlukan persetujuan admin untuk dapat bergabung",
+  countLimit: "Jumlah admin telah mencapai batas",
+  openLock:
+    "Setelah keluar dari aplikasi, waktu yang ditentukan harus diatasi dengan solusi pengunci",
+  closeLock: "Tidak memerlukan verifikasi saat aplikasi dimulai",
+  checkTips:
+    "Harap periksa apakah izin wajah atau sidik jari Anda telah diaktifkan~",
+  face: "Penguncian Wajah",
+  finger: "Penguncian Sidik Jari",
+  gestureLock: "Penguncian Pola",
+  closed: "Belum Dinyalakan",
+  opened: "Telah dibuka",
+  lanchProtect: "Perlindungan saat mulai",
+  noProtect: "Tidak perlu dilindungi",
+  lockSetting: "Pengaturan kunci",
+  drawLine: "Gambar pola kunci",
+  drawOldLine: "Gambar pola sandi gestur lama Anda",
+  drawNewLine: "Gambar pola sandi gestur baru Anda",
+  setGesturePassword: "Atur sandi gestur",
+  checkGesturePassword: "Periksa sandi gestur",
+  needJoinPoint: "Tolong sambungkan setidaknya 4 titik, silakan gambar ulang",
+  noFriendAdd: "Tidak ada teman yang bisa ditambahkan",
+  noFriendDelete: "Tidak ada teman yang bisa dihapus",
+  noVerify: "Verifikasi diperlukan saat menambahkan saya",
+  drawAgain: "Silakan gambar lagi",
+  checkSuccessful: "Verifikasi berhasil",
+  notInCommon: "Tidak konsisten dengan gambar sebelumnya, silakan gambar ulang",
+  changeGesturePassword: "Ubah sandi gestur",
+  toChange: "Untuk mengubah",
+  change: "Ubah",
+  openSuccess: "Berhasil membuka",
+  closeSuccess: "Berhasil menutup",
+  hasBeenMember: "Sudah menjadi anggota grup, tidak perlu bergabung lagi",
+  joinGroup: "Gabung dalam obrolan grup",
+  checking: "Sedang dicek oleh administrator",
+  noUnlock: "Tidak dapat membuka kunci?",
+  inputGesture: "Silakan masukkan sandi gestur",
+  faceDetect: "Harap lakukan pengenalan wajah",
+  fingerDetect: "Harap lakukan pengenalan sidik jari",
+  tryUnlocking: "Coba ini: Tidak bisa membuka kunci?",
+  countRemain: "Kesalahan gestur, Anda masih bisa memasukkan %s kali",
+  reLoginUnlock: "Masuk kembali untuk membuka kunci",
+  selectVerityType: "Silakan pilih jenis verifikasi ",
+  currentTypeNotSupport: "Jenis saat ini tidak mendukung",
+  //-------------
+  updateNewVersion: "Ditemukan versi baru",
+  updateOkUpdate: "Perbarui sekarang",
+  updateOpenDownloadFailed: "Gagal membuka unduhan",
+  updateCurrentIsNew: "Saat ini sudah versi terbaru",
+  newVersionNotFound:
+    "Tautan versi terbaru tidak ditemukan, Anda dapat mengunjungi halaman web untuk mengunduh",
+  openUrlFailed: "Tautan tidak valid",
+  qmvMsgNotExit: "[Konten yang dirujuk tidak ada]",
+  qmvMsgNotSupport: "[Konten yang dirujuk tidak mendukung tampilan]",
+  dataError: "Kesalahan parsing data",
+  userNotBindEmail: "Pengguna tidak terikat dengan surel",
+  userNotRegister: "Pengguna tidak terdaftar",
+  checkError: "Gagal memeriksa",
+  csvTitle: "Pengaturan Obrolan",
+  csvSetTopMsg: "Pin obrolan",
+  csvSetOptMsg: "Diamkan pesan",
+  csvSetDisableMsg: "Blokir pesan",
+  csvClearMsg: "Hapus riwayat obrolan",
+  csvClearLocal: "Hanya hapus riwayat obrolan lokal",
+  csvClearUser: "Hapus riwayat obrolan lokal dan %s",
+  csvSetErrorTip: "Gagal mengatur, silakan periksa koneksi internet",
+  gmiTitle: "Nama Grup:",
+  gmiSetTalk: "Pesan pribadi terenkripsi",
+  gmiSetMute: "Atur larangan percakapan grup",
+  gmiDeleteUser: "Keluar dari grup ini",
+  gmiMuteTo: "Dilarang bicara sampai ",
+  gmiError1:
+    "Informasi anggota tidak ditemukan, mungkin telah dikeluarkan dari obrolan grup",
+  gmiError2:
+    "Informasi anggota grup Anda tidak ditemukan, Anda mungkin telah dikeluarkan dari obrolan grup",
+  gmiError3: "Apakah Anda yakin ingin menghapus pengguna ini?",
+  gmiError4:
+    "Mengeluarkan anggota ini dari grup akan menghentikan kemampuan untuk mengirim dan menerima pesan",
+  gmiError5: "Anda tidak memiliki izin untuk menghapus administrator ini",
+  gmiError6: "Anda tidak memiliki izin untuk menghapus anggota ini",
+  gmiError7: "Larangan bicara telah dicabut",
+  gmiError8:
+    "Anda tidak memiliki izin untuk membatalkan larangan bicara administrator ini",
+  gmiError9:
+    "Anda tidak memiliki izin untuk membatalkan larangan bicara anggota ini",
+  gmiError10:
+    "Anda tidak memiliki izin untuk melarang bicara administrator ini",
+  gmiError11: "Anda tidak memiliki izin untuk melarang bicara anggota ini",
+  gmiError12: "Larangan bicara dicabut",
+  gmiGroupOwnerNotFound: "Gagal memuat informasi grup",
+  smmvTitle: "Durasi Larangan Bicara",
+  smmvMuteTime: "Pilih Durasi Larangan Bicara",
+  smmvMuteTime_10m: "10 menit",
+  smmvMuteTime_1hour: "1 jam",
+  smmvMuteTime_12hour: "12 jam",
+  smmvMuteTime_1day: "1 hari",
+  smmvMuteTime_30day: "30 hari",
+  smmvMuteTime_7day: "7 hari",
+  egnpTitle: "Edit Nama Obrolan Grup",
+  egnpSetGroupName: "Silakan atur nama grup",
+  egnpSetTextDesc: "Silakan atur 1-15 karakter",
+  egnpSetTitleNoPermission:
+    "Anda tidak memiliki izin untuk mengubah nama obrolan grup",
+  egnpSetFailed: "Gagal mengubah, silakan coba lagi nanti",
+  setGroupNameHint: "Silakan atur nama grup",
+  givTitle: "Edit Nama Obrolan Grup",
+  givGroupName: "Nama Grup",
+  givGroupFace: "Foto Grup",
+  gmsvTitle: "Kelola Grup",
+  gmsvSetManager: "Atur Administrator",
+  gmsvToSet: "Atur Sekarang",
+  gmsvFindMsg: "Cari Riwayat Obrolan",
+  gmsvFindMsgDesc:
+    "Dinyalakan, anggota yang baru masuk akan melihat pesan terbaru",
+  gmsvMute: "Bisukan Semua Anggota",
+  gmsvMuteDesc:
+    "Dinyalakan, hanya pemilik grup dan administrator yang dapat berbicara",
+  gmsvApply: "Konfirmasi Masuk Grup",
+  gmsvApplyDesc:
+    "Dinyalakan, masuk grup memerlukan konfirmasi dari pemilik grup atau administrator",
+  gmsvSetManagerTip: "Hanya pemilik grup yang bisa mengatur administrator",
+  gmsvSetMuteTipOn: "Semua anggota telah dibisukan",
+  gmsvSetNuteTipOff: "Pembisuan semua anggota telah dibatalkan",
+  gmsvApplyTipOn: "Konfirmasi masuk grup telah diaktifkan",
+  gmsvApplyTipOff: "Konfirmasi masuk grup telah dinonaktifkan",
+  gmsvFindGroupErr: "Gagal mendapatkan informasi grup",
+  gmsvFindMsgOn: "Pencarian riwayat obrolan telah diaktifkan",
+  gmsvFindMsgOff: "Pencarian riwayat obrolan telah dinonaktifkan",
+  gmsvSetFailed: "Gagal mengatur",
+  gsvTitle: "Detail Grup",
+  gsvGroupId: "ID Grup",
+  gsvGroupMember: "Anggota Grup",
+  gsvGroupMemberValue: "Total {num} orang",
+  gsvGroupNotification: "Pengumuman Grup",
+  gsvMyName: "Nama Panggilan Saya di Grup Ini",
+  gsvMyFace: "Foto Profil Saya di Grup Ini",
+  gsvGroupManager: "Manajemen Grup",
+  gsvGroupApply: "Konfirmasi Masuk Grup",
+  gsvFindMsg: "Cari Riwayat Obrolan",
+  gsvSetTop: "Pin ke Atas",
+  gsvSetOpt: "Mode Diam Pesan",
+  gsvDeleteMsg: "Hapus Riwayat Obrolan",
+  gsvDeleteLocal: "Hanya Hapus Riwayat Obrolan Lokal",
+  gsvDeleteAllMsg: "Hapus Riwayat Obrolan Lokal dan Semua Anggota",
+  gsvDeleteOtherMsg: 'Menghapus catatan obrolan lokal dan dari pihak lain',
+  gsvGroupDelete: "Anda yakin ingin membubarkan obrolan grup ini?",
+  gsvOutGroup: "Anda yakin ingin keluar dari obrolan grup ini?",
+  gsvNoNotification: "Belum ada pengumuman",
+  gsvClearSuccess: "Berhasil membersihkan",
+  gsvClearFailed: "Gagal membersihkan, silakan coba lagi nanti",
+  cvAllPeople: "Semua Orang",
+  cvVideo: "[Video]",
+  cvPicture: "[Gambar]",
+  cvFile: "[Berkas]",
+  cvVoice: "[Suara]",
+  cvNotSupportMsg: "Pesan tidak didukung saat ini",
+  cvSendMsgErrorNoPermission:
+    "Anda tidak dapat mengirim pesan kepada mereka karena pengaturan izin mereka",
+  cvSendMsgPnMute: "Dibisukan, tidak dapat mengirim pesan",
+  cvCopyMsg: "Tersalin ke papan klip",
+  cvCopyMsgNotSupport: "Pesan tidak didukung saat ini",
+  cvdeleteLocal: "Hapus dari lokal",
+  cvdeleteLocalAndServer: "Hapus dari lokal dan server",
+  cvdeleteLocalAndServerUser: "Hapus dari lokal dan {name}",
+  cvClearMsgTip: "Pesan percakapan telah dibersihkan",
+  cvGroupCreateSuccess: "Pembuatan obrolan grup berhasil",
+  cvGroupCreateSuccessTip1:
+    "Selamat! Anda berhasil membuat grup. Klik tombol di bawah ini untuk mengundang teman-teman ke dalam grup",
+  cvGroupCreateSuccessGo: "Undang Teman",
+  cvGroupNotification: "Pengumuman Grup:",
+  sendMsg: "Kirim Pesan",
+  cvOnlineCount: "{count} orang online",
+  cvUserCount: "Total {count} orang",
+  cvNotAtUser:
+    "Belum ada anggota kelompok yang tersedia. @ Oh, pergilah dan tambahkan anggota sekarang",
+  all: "Semua",
+  clCloseConversation: "Lipat Percakapan Terpasang",
+  clOpenConversation: "Percakapan Terpasang",
+  clNoConversation: "Belum ada percakapan baru~",
+  clTitle: "Percakapan",
+  clDelete: "Percakapan ini akan dihapus",
+  clDeleteDesc: "Menghapus percakapan ini akan menghapus riwayat obrolan lokal",
+  clDeleteSel: "Anda belum memilih percakapan",
+  clDeleteSel1: "Percakapan ini akan dihapus",
+  clDeleteSel2: "Percakapan ini akan dihapus",
+  clDeleteDesc2:
+    "Menghapus percakapan ini akan menghapus riwayat obrolan lokal",
+  homeItem0: "Percakapan",
+  homeItem1: "Kontak",
+  homeItem2: "Profil Saya",
+  exitTip: "Klik lagi tombol kembali untuk keluar",
+  mineSigEmpty: "Pengguna ini malas, belum ada tanda tangan~",
+  uaProtocol: "Perjanjian Layanan Pengguna",
+  savSearchTip: "Cari cepat isi percakapan",
+  savMedia: "Gambar/Video",
+  searchEmptyTip: "Tidak ada catatan percakapan terkait ditemukan",
+  savSearchMsg: "catatan percakapan terkait",
+  savConversation: "Percakapan",
+  savMsg: "Riwayat Obrolan",
+  savConversationNotFound: "Percakapan tidak ditemukan",
+  savMsgNotFound: "Informasi ini tidak ditemukan",
+  samTitle: "Media",
+  samTimeFormat: "MMM yyyy",
+  notSupportType: "Tipe tidak didukung",
+  media: "Media",
+  openUrl: "Buka Tautan",
+  lkAddGroupUrl: "Tambahkan ke Obrolan Grup",
+  lkAddOtherUrl: "Tautan Eksternal, bisa dibuka dengan browser default",
+  lkUnknowUrl: "Tautan tidak dikenali",
+  openUrlFailed1: "Gagal membuka tautan",
+  yszcTitle: "Kebijakan Privasi",
+  slsmTitle: "Deklarasi Hukum",
+
+  ctmRemove: "Hapus",
+  ctmOkRemove: "Konfirmasi Hapus",
+  ctmTopMsgCount: "Total {count} pesan",
+  ctmEmptyText: "Tidak ada pesan terpasang",
+  recordTimeShort: "Waktu rekaman terlalu singkat",
+  sendCodeExceErr: "Gagal mengirim kode verifikasi, silakan coba lagi nanti",
+  bindEmailExecErr: "Gagal mengikat email, silakan coba lagi nanti",
+  ctmSuccess: "Berhasil dipasang",
+  ctmRemoveSuccess: "Berhasil menghapus pesan terpasang",
+  ctmMsgNotFound: "Pesan ini tidak ditemukan",
+  cvFirstTip: "Pesan dan panggilan dalam percakapan ini dienkripsi end-to-end",
+  clearGroupNotification: "Pengumuman grup telah dibersihkan",
+  publicGroupNotification: " Terbitkan Pengumuman",
+  dialog_tip1: " Tips Hangat",
+  deleteGroups:
+    " Setelah grup dihapus, tidak dapat dikembalikan lagi. Apakah Anda yakin ingin menghapus grup ini?",
+  dialog_tip_token_invaild: " Sesi login telah berakhir, harap login kembali",
+  notify_new_msg_title: "Anda menerima pesan baru",
+  notify_new_msg_msg: "Isi pesan: .....",
+  dataError1: "Kesalahan Data",
+  groupApply: " Permintaan bergabung grup",
+  muteLate: "Setelah ini, pembisuan akan dihapus",
+  groupMuteing: "Pembisuan grup sedang berlangsung",
+  modifyGroupName: "Ubah Nama Grup",
+  groupMemberNotFound: "Informasi anggota grup tidak ditemukan",
+  deleteGround: "Hapus Grup",
+  bindEmailTipTitle: "Ikatan Email",
+  bindEmailTipContent: "Untuk keamanan akun Anda, harap ikat email Anda",
+  bindEmailTipOk: "Ikatan Sekarang",
+  bindEmailTipCancle: "Tidak Sekarang",
+  alreadyBeOwner:
+    "Anda telah memilih sebagai pemilik grup, Anda memiliki hak pengelolaan tertinggi",
+  managerApplying: "Sedang dalam proses verifikasi sebagai administrator",
+  quote: "Kutip",
+  request_exception: "Permintaan bermasalah",
+  clearMsg: "Hapus Pesan",
+  pressToSay: "Tekan untuk Berbicara",
+  slideToCancelSend: "Geser ke atas untuk Membatalkan Kirim",
+  releaseToEnd: "Lepaskan untuk Selesai",
+  releaseToCancelSend: "Lepaskan jari untuk Membatalkan Kirim",
+  invalidVoiceMessage: "Pesan suara tidak valid",
+  hit: "Pukulan",
+  downloadingCache: "Mengunduh cache...",
+  unableToRecognize: "Tidak dapat dikenali",
+  scanResult: "Hasil Pemindaian",
+  register_fail:
+    " Registrasi gagal, silakan periksa koneksi internet Anda dan coba lagi",
+  skip: " Lewati",
+  toUse: " Gunakan Sekarang",
+  sideToSide: " Enkripsi End-to-End",
+  design: " Desain",
+  guide1: " Kirim pesan, transmisi terenkripsi, hanya untuk dibaca sendiri",
+  guide2: " Berkomunikasi dengan lebih bebas sesuai gaya Anda sendiri",
+  guide3: " Platform komunikasi aman yang dibangun di sekitar Anda",
+  inputGroupAc: " Masukkan pengumuman grup (0-500 karakter)",
+  clickToEnjoy:
+    " Klik tautan untuk menyimpan, atau salin teks ini, buka aplikasi [Nama Aplikasi] dan Anda dapat bergabung dengan obrolan grup.",
+  createOK: "Berhasil dibuat",
+  noPravcy: "Anda tidak memiliki izin untuk membuat obrolan grup",
+  groupNumberToTop: "Batas jumlah grup telah tercapai",
+  createFail: "Gagal membuat, silakan coba lagi nanti",
+  create: "Buat",
+  uploadGroupAvatar: "Unggah Foto Grup",
+  useNewPassword:
+    "Password berhasil diubah, segera kembali ke halaman login",
+  error_14: "Server bermasalah (14)",
+  error_500: "Server bermasalah (500)",
+  error_1000: "Token tanda tangan pengguna tidak valid",
+  error_1001: "Parameter salah",
+  error_1002: "Versi saat ini sudah yang terbaru",
+  error_6001: "Nama pengguna ini sudah terdaftar",
+  error_6003: "Password harus terdiri dari 6-15 karakter huruf dan angka",
+  error_6004: "Kesalahan verifikasi nama pengguna",
+  error_6005: "Kata sandi tidak benar, silakan coba lagi",
+  error_6006: "Jumlah percobaan password hari ini telah melebihi batas",
+  error_6007: "Pengguna tidak ditemukan",
+  error_6008: "Password lama salah, silakan masukkan kembali",
+  error_6009:
+    "Password lama sama dengan password baru, silakan masukkan kembali",
+  error_6010: "Pengambilan kode verifikasi terlalu sering",
+  error_6011: "Kode verifikasi salah, silakan coba lagi",
+  error_6012: "Kode verifikasi telah kedaluwarsa",
+  error_6013: "Jumlah percobaan gagal kode verifikasi terlalu banyak",
+  error_6014: "Kode verifikasi telah digunakan",
+  error_6015: "Email tidak ditemukan",
+  error_6016: "Email telah diikat oleh pengguna lain, silakan masukkan kembali",
+  error_6017: "Kode verifikasi tidak ada",
+  error_6018: "Akun ini telah diblokir",
+  error_http_11: "Koneksi jaringan time out",
+  error_http_12: "Koneksi jaringan time out",
+  error_http_13: "Koneksi jaringan time out",
+  error_http_14: "Kesalahan sertifikat jaringan",
+  error_http_15: "Permintaan data bermasalah",
+  error_http_16: "Permintaan dibatalkan",
+  error_http_17: "Koneksi jaringan time out",
+  error_http_18: "Kesalahan internal dalam permintaan jaringan",
+  error_sdk_err_1002: "Tidak memiliki izin untuk melakukan operasi ini",
+  error_sdk_err: "Operasi gagal",
+  search_hine_1: "Masukkan konten pencarian",
+  str_no_data: "Tidak ada data saat ini",
+  str_no_net: "Tidak ada koneksi internet",
+  download_not_support_type: "Tipe tidak didukung",
+  download_save_at: "File disimpan di: ",
+  download_not_url: "Tautan unduhan tidak ditemukan",
+  download_file_success: "Berhasil disimpan, Anda dapat melihatnya di galeri",
+  download_failed_file: "Gagal menyimpan file",
+  download_failed: "Unduhan gagal",
+  loading_failed_retry: "Gagal memuat, klik untuk mencoba lagi",
+  loading_ing: "Memuat...",
+  str_online_later_minute: "Menit yang lalu online",
+  str_online_later_hour: "Jam yang lalu online",
+  str_online_later_llg: "Belum online dalam waktu yang lama",
+  str_online_later_yesterday: "Online kemarin",
+  str_yesterday: "kemarin",
+  str_online_later_near: "Online baru-baru ini",
+  str_minute: "menit",
+  clean_notice: "Bersihkan pengumuman",
+  clean_notice_1: "Anda yakin ingin mengosongkan pengumuman grup?",
+  publish_notice: "Terbitkan pengumuman",
+  publish_notice_remind:
+    "Menerbitkan pengumuman ini akan memberi peringatan kepada semua anggota grup",
+  quit_edit: "Keluar dari pengeditan",
+  quit_the_edit: "Keluar dari pengeditan ini?",
+  continue_edit: "Lanjutkan pengeditan",
+  publish_success: "Berhasil diterbitkan",
+  face_success: "Pembukaan kunci wajah berhasil diaktifkan",
+  finger_success: "Pembukaan kunci sidik jari berhasil diaktifkan",
+  groupDismissed: "Grup ini telah dibubarkan",
+  hasOut: "Telah kadaluarsa",
+  otherLoginStyle: "Metode Login Lainnya",
+  otherRegisterStyle: "Metode Registrasi Lainnya",
+  hasAccount: "Sudah punya akun? Login disini",
+  mobileCode: "Kode Verifikasi Ponsel",
+  codeSendTo: "Kode verifikasi telah dikirim ke",
+  inputNumber: "Masukkan nomor ponsel",
+  bindPhone: "Ikatan Nomor Ponsel",
+  bindPhoneSuccess: "Nomor ponsel berhasil diikat",
+  bindPhoneTipChange:
+    "Jika nomor ponsel Anda sudah tidak digunakan, harap segera ganti",
+  please_input_email: "Masukkan alamat email",
+  findPassByEmailTip: "Reset password melalui email",
+  findPassByPhoneTip: "Reset password melalui nomor ponsel",
+  resetPass: "Reset password",
+  current_bind_phone: "Nomor ponsel terikat saat ini:",
+  reget: "Dapatkan ulang",
+  getVerifyCode: "Dapatkan Kode Verifikasi",
+  alreadyRegister: "Nomor ponsel ini sudah terdaftar",
+  alreadyRegister2: "Alamat email ini sudah terdaftar",
+  netErrorRetry: "Koneksi bermasalah, klik untuk memuat ulang halaman~",
+  newPhoneNumber: "Nomor ponsel baru",
+  addFriendText1: "Tambahkan sebagai teman",
+  qrSaveFail: "Gagal menyimpan QR Code",
+  qrSavePhoto: "QR Code telah disimpan di galeri",
+  userId: "ID Pengguna:",
+  addMeToFriend: "Tambahkan saya sebagai teman",
+  validTime: "Berlaku hingga",
+  clickRefresh: "Klik untuk memperbarui",
+  qrUseCount: "QR Code ini berlaku {count} kali",
+  share: "Bagikan",
+  savePhoto: "Simpan Foto",
+  iAm: "Saya adalah",
+  addFriendSuccessful: "Berhasil menambahkan teman",
+  addFriendFaceToFace: "Tambahkan teman secara langsung",
+  faceToFace: "Tambahkan teman secara langsung",
+  inputSameKey:
+    "Berikut adalah teman-teman yang sudah memasukkan nomor yang sama",
+  sameKeyAddFriend:
+    "Tambahkan teman dengan memasukkan nomor yang sama dengan teman",
+  self: "Diri sendiri",
+  age: "tahun",
+  confirmAddFriend: "Konfirmasi menambahkan sebagai teman",
+  inputUserId: "Masukkan ID pengguna",
+  myQr: "Kode QR saya",
+  back: "Kembali",
+  canNotAddSelf: "Anda tidak dapat menambahkan diri sendiri ke daftar kontak",
+  notExsit: "Pengguna ini tidak ada",
+  searchUserId: "Cari ID pengguna:",
+  remarkInfo: "Mohon tambahkan informasi verifikasi",
+  applyRemark: "Tambahkan Catatan",
+  last4Number: "Masukkan 4 digit terakhir nomor ponsel login pengguna lain",
+  checkLast4Number: "Verifikasi 4 digit terakhir nomor ponsel",
+  addFriendApply: "Permohonan Menambahkan Teman",
+  friendNumberCatchTopLimit: "Jumlah teman Anda telah mencapai batas atas",
+  friendNumberCatchTopLimitCurrentDay:
+    "Pembatasan penambahan teman telah tercapai untuk hari ini",
+  codeInvalid: "Kunci tidak valid atau sudah kedaluwarsa, silakan coba lagi",
+  shareFail: "Gagal berbagi",
+  error_1003: "Silakan coba lagi nanti",
+  error_6033: "Kunci tidak valid atau sudah kedaluwarsa, silakan coba lagi",
+  error_6034: "Jumlah teman telah mencapai batas atas",
+  error_6035: "Pembatasan penambahan teman telah tercapai untuk hari ini",
+  error_6036: "Nomor ponsel pengguna ini kosong",
+  error_6037: "Verifikasi nomor ponsel gagal",
+  error_6040: "Grup sudah ada",
+  error_6050: "Kode QR sudah kedaluwarsa",
+  error_6051: "Penggunaan kode QR pada hari ini telah mencapai batas atas",
+  error_6052: "Penggunaan kode QR telah mencapai batas atas",
+  error_6053:
+    "Penggunaan fitur Pindai Sekali Sudah mencapai batas atas hari ini",
+  error_6054: "Pengguna sudah menambahkan Anda sebagai teman",
+  error_6055: "Kunci tidak valid atau sudah kedaluwarsa, silakan coba lagi",
+  error_6066: "Saldo akun tidak mencukupi",
+  error_6067: "Angpau sudah habis",
+  error_6068: "Angpau sudah kedaluwarsa",
+  error_6069: "Tidak dapat menerima angpau eksklusif",
+  error_6070: "Angpau sudah diterima, tidak dapat menerima lagi",
+  deletedByFriendHint: "Anda belum menjadi teman mereka",
+  deletedByFriendHint1: "Anda belum menjadi teman mereka,",
+  deletedByFriendHint2: "Tambahkan teman",
+  deletedByFriendHint3: "lanjutkan percakapan",
+  gotoAddFriend: "Tambahkan teman",
+  addFriendGotoGroup: "Undang teman masuk grup",
+  notContacts: "Belum ada kontak",
+  notContactsFound: "Tidak ada teman yang ditemukan untuk {name}",
+  remarkStr: "Catatan",
+  remarkStrHint: "Masukkan catatan, 0-50 karakter",
+  deleteConfirm: "Apakah Anda yakin ingin menghapus teman?",
+  deleteFriend: "Hapus Teman",
+  searchContact: "Cari Kontak",
+  notGroupTip: "Belum bergabung dalam obrolan grup",
+  notAddFriend: "Belum menambahkan teman baru",
+  friendApplyAdd: "Permintaan Pertemanan",
+  addSuccess: "Berhasil ditambahkan",
+  hasSelectFriend: "Teman sudah dipilih",
+  myBalance: "Saldo Saya",
+  revokeMsgTip: "Batalkan Pesan",
+  error_10050: "Operasi gagal (rekaman tidak ditemukan)",
+  set_manager_tip_1:
+    "Anda telah memilih menjadi pemilik grup, Anda memiliki otoritas manajemen tertinggi",
+  envelope: "Amplop Merah",
+  uidStr: "ID Pengguna",
+  showGetDetail: "Lihat Detail Penerimaan",
+  waitOtherEnter: "Menunggu pihak lain untuk bergabung",
+  isFriend2SExit: "Telah menjadi teman, keluar otomatis dalam 2 detik",
+  sendRedPacket: "Kirim Angpau",
+  redPacketNumber: "Jumlah Angpau",
+  ge: "buah",
+  total: "Total",
+  eachNumber: "Jumlah Setiap",
+  selectUser: "Pilih Pengguna",
+  number: "Jumlah",
+  redPacketType: "Tipe Angpau",
+  checkVerity: "Verifikasi Keamanan",
+  balance: "Saldo Akun",
+  sendTo: "Kode Verifikasi SMS telah dikirim ke",
+  pin: "Angpau Lucky Draw",
+  putong: "Angpau Biasa",
+  zhuanshu: "Angpau Eksklusif",
+  dajidali: "Selamat menarik angpau, semoga beruntung besar!",
+  redPacketInfo: "Detail Angpau",
+  best: "Yang Paling Beruntung",
+  saveToAccount: "Disimpan ke Akun",
+  minuteOut: "Angpau Habis dalam Menit",
+  hourOut: "Angpau Habis dalam Jam",
+  showDetail: "Lihat Detail",
+  maxMemberNumber:
+    "Jumlah Angpau tidak boleh melebihi jumlah anggota grup saat ini",
+  sended: "Dikirim",
+  get: "Telah Diterima",
+  waiting: "Menunggu pengguna untuk mengambil",
+  gong: "Angpau sebanyak",
+  envelope_get_over: "Angpau telah diambil habis oleh",
+  envelope_get: "Telah diambil oleh",
+  de: "",
+  envelope_get_message: "Pesan Mengambil Angpau",
+  bind_phone_please: "Untuk keamanan akun Anda, silakan ikat nomor ponsel Anda",
+  delay_bind: "Tunda mengikat",
+  send_envelope_x: "Angpau Dikirim",
+  send_envelope_back_all:
+    "Angpau ini tidak diambil dalam 24 jam\n dan telah dikembalikan",
+  envelope_x_can_get: "Hanya {name} yang dapat diambil",
+  envelope_get_completed: "Sayangnya, angpau telah diambil habis",
+  send_envelope_back_some:
+    "Angpau ini tidak diambil dalam 24 jam\n dan sebagian telah dikembalikan",
+  envelope_x_personal: "Angpau Eksklusif untuk %s",
+  envelope_normal: "Angpau Biasa",
+  login_out_of_date: "Login telah kedaluwarsa, silakan login kembali",
+  get_envelope_completed: "Telah diambil habis",
+  x_is_personal: "Eksklusif",
+  error_6072: "Jumlah maksimum untuk satu angpau telah tercapai",
+  error_6073: "Jumlah untuk satu angpau tidak boleh kurang dari 0.01",
+  error_6074: "Fitur Angpau telah dinonaktifkan",
+  distroyAccount: "Menghapus Akun",
+  inComing: "Pemasukan",
+  outGoing: "Pengeluaran",
+  balance_order_detail: "Detail Saldo",
+  type: "Tipe",
+  payType: "Metode Pembayaran",
+  orderNo: "Nomor Pesanan",
+  time: "Waktu",
+  itemDataNotSupport: "Versi saat ini belum mendukung fitur ini",
+  manager_change_account: "Penyesuaian oleh Admin",
+  groupEnvelope: "Angpau Grup",
+  accountPay: "Pembayaran Saldo",
+  paySuccess: "Pembayaran Berhasil",
+  groupEnvelopePersonal: "Angpau Grup - Eksklusif",
+  groupEnvelopeNormal: "Angpau Grup - Biasa",
+  changeAccount: "Penyesuaian Akun",
+  groupEnvelopeRandom: "Angpau Grup - Acak",
+  groupEnvelopeAllBack: "Angpau Grup - Pengembalian Penuh",
+  groupEnvelopeSomeBack: "Angpau Grup - Pengembalian Sebagian",
+  distroyTips:
+    "Untuk memastikan keamanan akun Anda,\nkami akan melakukan verifikasi berikut sebelum Anda menonaktifkan akun.",
+  safeStatus: "Akun dalam keadaan aman",
+  safeTips:
+    "Pastikan akun Anda tidak mengalami perubahan kata sandi, pergantian nomor telepon/surel, atau risiko pencurian akun.",
+  strikeBalance: "Penyelesaian Saldo Akun",
+  strikeTips:
+    "Setelah menonaktifkan akun, semua data saldo angpau Anda akan dihapus dan tidak dapat dipulihkan.",
+  dataDelete: "Penghapusan Data Akun",
+  deleteTips:
+    "Setelah menonaktifkan akun, semua data di bawah akun tersebut akan dihapus dan tidak dapat dipulihkan. Data termasuk riwayat obrolan, grup yang diikuti, dan hubungan pertemanan.",
+  applyDistroy: "Ajukan Penghapusan Akun",
+  distroyConform: "Apakah Anda yakin ingin menonaktifkan akun?",
+  distroyConformTips:
+    "Setelah nonaktif, Anda akan keluar dari sesi login. Harap berhati-hati!",
+  distroy: "Konfirmasi Nonaktif",
+  submitSuccess: "Berhasil Mengirimkan",
+  submitted: "Permohonan penghapusan Anda telah diajukan!",
+  helpWord:
+    "Platform akan memproses permohonan Anda dalam {day} hari kerja dan menghapus semua data Anda. Jika Anda membutuhkan bantuan, silakan hubungi kami melalui situs web resmi.",
+  know: "Saya Mengerti",
+  revoke: "Batalkan Permohonan",
+  revokeSuccess: "Berhasil Membatalkan",
+  recover: "Apakah Anda yakin ingin membatalkan permohonan?",
+  toNormal: "Setelah dibatalkan, status akun akan kembali normal.",
+  beRecover: "Konfirmasi Pemulihan",
+  recoverSuccess: "Berhasil Dipulihkan",
+  redPackageCountTip:
+    "Jumlah total angpau perlu lebih dari atau sama dengan 0.01",
+  closeAccount: "Nonaktifkan Akun",
+  recoverAccount: "Pulihkan Akun",
+  recoverAccountTipTitle: "Apakah Anda yakin ingin memulihkan akun?",
+  recoverAccountTipDesc: "Setelah dipulihkan, status akun akan kembali normal.",
+  recoverAccountTipOk: "Konfirmasi Pemulihan",
+  closingAccount: "Akun dalam proses penonaktifan",
+  closingAccountEndTime: ", perkiraan selesai dalam {num} hari kerja",
+  error_6079: "Anda tidak lagi berada dalam obrolan grup, tidak dapat menerima",
+  error_6075: "Permohonan duplikat",
+  error_6076: "Tidak ada catatan permohonan penonaktifan ditemukan",
+  error_6077: "Penonaktifan dalam proses peninjauan",
+  error_6078:
+    "Pengguna tidak ditemukan atau telah dinonaktifkan, harap periksa kembali",
+  error_video_pre_err: "Kesalahan dalam pembuatan file, gagal memuat data.",
+  err_upload_file: "Upload gagal, silakan coba lagi nanti",
+  err_msg_send_failed: "Pengiriman pesan gagal, silakan coba lagi nanti",
+  error_red_package_tip1: "Angpau telah kedaluwarsa",
+  net_error_no_net:
+    "Jaringan tidak tersedia, harap periksa pengaturan jaringan Anda",
+  error_6081: "Pengiriman gagal, silakan coba lagi nanti",
+  atTip: "Ada yang menyebut Anda",
+  groupChatError: "Gagal memuat konten, klik untuk mencoba lagi",
+  legalNotice: "Pemberitahuan Hukum",
+  timeoutLock: "Kunci Waktu Habis",
+  reTry: "Coba Lagi",
+  sysNotify: "Pemberitahuan Sistem",
+  exit_group_tip: "Keluar dari obrolan grup",
+  group_mute_ing: "Obrolan grup ini sedang dibisukan",
+  w_edit_group_notification: "Mengedit pemberitahuan grup",
+  removeGroupNotice: "Hapus pemberitahuan grup",
+  messageNotify: "Pemberitahuan Pesan",
+  groupEnterLimit:
+    "Jumlah teman yang diundang untuk masuk ke grup telah mencapai batas maksimum, harap periksa",
+  tipAllGroupMember: "Beritahu semua anggota grup",
+  openPhotoPermission: "Buka izin akses 'Foto'",
+  gotoSettings: "Buka Pengaturan",
+  notSet: "Belum Diatur",
+  openCameraPermission: "Buka izin penggunaan 'Kamera'",
+  openMicrophonePermission: "Buka izin penggunaan 'Mikrofon'",
+  selectMaxCountTip: "Pilih maksimal %s orang setiap kali",
+  getVideoImageFailed: "Gagal mendapatkan gambar pratinjau video",
+  error_6086: "Nama pengguna telah digunakan",
+  error_6085: "Format nama pengguna salah",
+  error_6087: "Nomor telepon tidak ada",
+  error_6088: "Email tidak ada",
+  unRecard: "Tidak dapat merekam:",
+  hasCreateGroup: "Membuat percakapan kelompok",
+  joinGroupForLink: "Join group chat through link",
+  be: "disebut",
+  moveoutGroup: "Keluar dari obrolan grup",
+  groupOwnerChangeTo: "Pemilik grup telah berubah menjadi",
+  changeGroupNameTo: "Ubah nama grup menjadi",
+  disbandedGroup: "Membubarkan obrolan grup",
+  bannedFromSpeaking: "Dilarang berbicara",
+  gagWasLifted: "Pembungkaman telah dicabut",
+  initiatedGroupGag: "Memulai pembungkaman grup",
+  shutDownGroupGag: "Menutup pembungkaman grup",
+  target: "Target",
+  groupSizeUpperLimit: "Jumlah anggota grup mencapai batas atas",
+  topUpperLimit: "Puncak mencapai batas atas",
+  topMessageRepeate: "Pesan puncak sudah diulang",
+  userHasReadMessage: "Pengguna ini sudah membaca pesan ini",
+  placeholder: {
+    allMuted:
+      "Pemilik grup atau administrator telah mengaktifkan pembungkaman global",
+    groupDisbanded: "Grup ini telah dibubarkan",
+    groupBanned: "Grup ini telah dilarang",
+    singleBanned: "Anda telah dibungkam",
+    search: "Cari",
+    pleaseInput: "Silakan masukkan",
+    sec: "detik",
+    groupNoticePlaceholder: "Silakan masukkan pengumuman grup..",
+    inputPassword: "Silakan masukkan kata sandi",
+    confirmPassword: "Silakan konfirmasi kata sandi",
+    inputPhoneNumber: "Silakan masukkan nomor telepon",
+    select: "Pilih",
+    userOrGroupIDInput: "Silakan masukkan {type}",
+    writeMessage: "Masukkan pesan...",
+    inputGroupName: "Silakan masukkan nama grup",
+    typingMessage: "Ketik pesan di sini",
+    inputName: "Silakan masukkan nama panggilan Anda"
+  },
+  withoutQualification:
+    "Pengguna ini tidak memenuhi syarat untuk menambahkan teman",
+  error_6084: "Verifikasi email gagal",
+  emailCheck: "Verifikasi dengan email",
+  phoneCheck: "Verifikasi dengan nomor telepon",
+  checkEmail: "Verifikasi alamat email",
+  inputOtherEmail:
+    "Silakan masukkan alamat email yang digunakan untuk login oleh pihak lain",
+  groupMask: "Topeng Obrolan Grup",
+  groupMaskDescription: "Atur nama dan avatar grup ini",
+
+  pleaseBind:
+    "Untuk keamanan akun Anda dan untuk menghindari pembatasan fungsi menambahkan teman, silakan bind",
+  orStr: "atau",
+  andStr: "dan",
+  confirmExit: "Konfirmasi Keluar",
+  pleaseBindTip1: "Untuk keamanan akun Anda, silakan bind",
+  skin_item_user_name: "张娜娜",
+  skin_item_msg1: "Halo, mendapatkan balasan tepat waktu",
+  skin_item_msg2: "Baiklah, pesan diterima",
+  appearance: "Tampilan",
+  bubbleBgColor: "Warna Balon Percakapan",
+  chatBackground: "Latar Belakang Percakapan",
+  moreSettings: "Pengaturan Lainnya",
+  highPerformanceModel: "Mode Bersih",
+  highPerformanceModelDesc: "Aktifkan untuk tidak menampilkan efek tampilan",
+  skinPreview: "Pratinjau Tampilan",
+  defaultText: "Default",
+  fontSizePreview: "Pratinjau ukuran font, geser slider di bawah ini untuk menyesuaikan ukuran font. Setelah diatur, semua teks halaman akan berubah ukurannya.",
+  changedText: "Oke, sudah diubah",
+  imageAlpha: "Transparansi Gambar",
+  min: "Minimum",
+  max: "Maksimum",
+  backgroundColor: "Warna Latar Belakang",
+  changeSaveTip:
+    "Anda telah mengubah pengaturan, apakah ingin menyimpan dan kembali?",
+  saveAndBack: "Simpan dan Kembali",
+  changeAvatar: "Ganti Avatar",
+  appFontSize: "Ukuran Font Aplikasi",
+  appFontSizeTip:
+    "Pratinjau ukuran font, geser slider di bawah untuk mengatur ukuran font. Setelah diatur, akan mengubah ukuran font untuk semua teks di dalam aplikasi.",
+  maskDesc:
+    "Aktifkan untuk memungkinkan anggota grup mengatur nama dan avatar grup ini",
+  groupMaskOpenTip: " %s Topeng Obrolan Grup %s",
+  groupMaskOpenTipNew:" Topeng Obrolan Grup",
+  open: "Buka",
+  close: "Tutup",
+  groupMaskOpenMsgErrorTip: "Peringatan Pemutaran Fungsi Topeng Obrolan Grup",
+  maskOpen: "Topeng Obrolan Grup telah dibuka",
+  maskClose: "Topeng Obrolan Grup telah ditutup",
+  transmit: "Meneruskan",
+  multiSelect: "Pilih Banyak",
+  singleShareMsg: "Meneruskan Pesan Satu Per Satu",
+  groupShareMsg: "Gabung Meneruskan",
+  notGroupFound: "Tidak ditemukan obrolan grup terkait {name}",
+  rememberPassword: "Ingat Kata Sandi",
+  mobileLogin: "Masuk dengan Ponsel",
+  emailLogin: "Masuk dengan Email",
+  recentConversation: "Percakapan Terbaru",
+  selectContact: "Pilih Kontak",
+  selectGroup: "Pilih Obrolan Grup",
+  noGroup: "Tidak ada obrolan grup",
+  notSelectMessage: "Anda belum memilih pesan",
+  hiddenMsg: "Sembunyikan Pesan",
+  hiddenMsgTip: "Apakah Anda ingin menyembunyikan sumber pesan?",
+  yes: "Ya",
+  no: "Tidak",
+  mergeMessageList: "Gabungkan Daftar Pesan Meneruskan",
+  singleMlCount: "【Meneruskan Satu Per Satu】Total %s pesan",
+  notFoundUser: "Pengguna tidak ditemukan",
+  notFoundGroup: "Grup tidak ditemukan",
+  selectAt: "Pilih orang yang ingin di {'@'}",
+  welcomeToQDDChat: "Selamat datang di QDDChat",
+  choiceYourAvatar: "Pilih avatar Anda",
+  hasSelect: "Telah dipilih",
+  groupChat: "Obrolan Grup",
+  groupMember1: "Anggota Grup",
+  groupSendMsg: "Kirim Pesan Grup",
+  msgNotSupportTransmit: "Pesan tidak mendukung pengiriman",
+  bindGoogle: "Ikatan Google",
+  bindFacebook: "Ikatan Facebook",
+  unbind: "Lepas ikatan",
+  accountSettings: "Pengaturan Akun",
+  thirdPartyAccountBinding: "Pengikatan Akun Pihak Ketiga",
+  otherSettings: "Pengaturan Lainnya",
+  groupChatLoadFailed: "Gagal memuat informasi obrolan grup",
+  addGroupSend: "Mulai Mengirim ke Grup",
+  groupSendNoData: "Belum ada catatan pesan grup",
+  removeBinding: "Hapus Ikatan",
+  unBindToastPart1:
+    "Setelah menghapus ikatan, Anda tidak dapat lagi menggunakan",
+  unBindToastPart2: "masuk akun, ingin melanjutkan penghapusan?",
+  noOpPermission: "Tidak ada izin yang dapat dioperasikan",
+  bindingPhoneOrEmail:
+    "Untuk keamanan data akun Anda, harap ikat nomor telepon atau email terlebih dahulu sebelum melepaskan ikatan.",
+  unbindingSuccess: "Lepas ikatan berhasil",
+  unbindingFair: "Lepas ikatan gagal",
+  showAll: "Lihat Semua",
+  allCount: "Semua Total {num}",
+  bindingPhoneOrEmailSetPassword:
+    "Untuk keamanan data akun Anda, harap ikat nomor telepon atau email terlebih dahulu sebelum mengatur kata sandi.",
+  recoverSuccessLoginAgain: "Pemulihan berhasil, silakan login kembali",
+  createGroupSend: "Buat Kiriman Grup",
+  groupSend: "Kirim Grup",
+  notSelect: "Anda belum memilih",
+  confirmDeleteTitle: "Konfirmasi menghapus pengiriman grup yang dipilih?",
+  totalGe: "Total %s",
+  sendTotalGe: "Kirim ke ({num})",
+  uploadFailed: "Unggahan gagal",
+  selectMax: "Jumlah pilihan mencapai batas maksimum",
+  newFriendApply: "Anda memiliki teman baru, klik untuk melihat",
+  notSupportLoginStyle:
+    "Sementara tidak didukung, silakan gunakan cara login lain",
+  error_6091: "Jumlah pemilih melebihi batas maksimum",
+  error_6092: "ID pesan sudah ada",
+  pay_password: "Kata Sandi Pembayaran",
+  pleaseEnter: "Silakan masukkan",
+  loadingPage: "Halaman sedang dimuat",
+  payTip:
+    "Anda belum mengatur kata sandi pembayaran, harap selesaikan pengaturannya sebelum melanjutkan.",
+  deleteRedPackageErrTip: "Pesan redaksi tidak dapat dicabut",
+  applyIconTip:
+    "Permohonan telah diajukan, setelah disetujui Anda dapat mengganti avatar",
+  applyIconProgress: "Lihat Proses Permohonan",
+  applyRecord: "Catatan Permohonan",
+  repealWithdrawApply: "Apakah Anda yakin ingin mencabut permohonan penarikan?",
+  withdrawNotes: "Catatan Penarikan",
+  inReview: "Sedang Direview",
+  passTheAudit: "Lulus Audit",
+  rejectedPayment: "Pembayaran Ditolak",
+  revoked: "Dicabut",
+  undone: "Batal",
+  withdrawalQuantity: "Jumlah Penarikan",
+  withdrawal: "Penarikan",
+  withdrawalBack: "Penarikan Dikembalikan",
+  update_tip1: "Jika tidak dapat diperbarui,",
+  update_tip2: "Silakan unduh dari situs web resmi",
+  update_ing: "Memperbarui",
+  update_install: "Pasang Sekarang",
+  installFailed: "Instalasi Gagal, silakan coba lagi nanti",
+  installNotFoundFile:
+    "File instalasi tidak ditemukan, silakan coba lagi nanti",
+  error_6093: "Cara login tidak didukung",
+  error_6094: "Jumlah avatar telah mencapai batas maksimum",
+  deleteIcon: "Apakah Anda ingin menghapus avatar ini?",
+  balanceWithdraw: "Penarikan Saldo",
+  canBalanceWithdraw: "Saldo yang Dapat Ditarik",
+  inputPayPassword: "Masukkan Kata Sandi Pembayaran",
+  withdrawalSuccess: "Penarikan Berhasil",
+  personIcon: "Avatar Personal",
+  groupIcon: "Avatar Grup",
+  error_6096:
+    "Jangan atur kata sandi pembayaran dengan angka berulang atau berurutan",
+  forgetPayPassword: "Lupa Kata Sandi Pembayaran",
+  downloadFailedTip: "Pengunduhan Gagal, silakan coba lagi nanti",
+  error_6097: "Saldo tidak mencukupi",
+  notSet2: "Tidak diatur",
+  passed: "Diterima",
+  headRejected: "Ditolak",
+  readDeleteTime: "Waktu Penghapusan Pesan",
+  readDeleteTimeTitle: "Waktu Penghapusan",
+  error_6090: "Akun Telah Terikat",
+  retracted_h5: "Ditarik kembali",
+  message_h5: "pesan dari",
+  inputRemark: "Silakan masukkan catatan Anda",
+  authFailed: "Gagal otorisasi",
+  userNullError: "Jumlah pengguna tidak normal",
+  community: "Komunitas",
+  join:
+    "Bergabung dengan obrolan grup, menjelajah lebih banyak aktivitas komunitas～",
+  posteviews: "Belum ada aktivitas yang dipublikasikan～",
+  views: "kali dilihat",
+  ended: "Aktivitas telah berakhir",
+  configError: "Kesalahan konfigurasi, tidak dapat dibuka sementara",
+  burnMsgOpen: "{name} mengatur pesan dibaca {time} setelah dibakar",
+  burnMsgClose:
+    "{name} mematikan pembacaan dan pembakaran, pesan tidak lagi otomatis terbakar",
+  burnMsgNotify: "Notifikasi baca dan bakar",
+  homeItem3: "Komunitas",
+  messageTimeOut: "Pesan telah kedaluwarsa",
+  burnContentTip:
+    "Pesan sedang terbakar, apakah Anda ingin keluar dan membakar dengan sekali klik?",
+  cancelLater: "Saya akan cek nanti",
+  burnConfirm: "Bakar segera",
+  setNickNameTimes: ", nama panggilan hanya dapat diubah sekali dalam %s hari",
+  voiceSendErrTip1: "Hanya mendukung pengiriman suara dari %s-%s detik",
+  textSendErrTip1: "Input maksimum %s karakter",
+  pictureSendErrTip1: "Hanya mendukung pengiriman gambar dari %s-%sM",
+  videoSendErrTip1: "Hanya mendukung pengiriman video dari %s-%sM",
+  your: "Anda",
+  joinCommunity:
+    "Bergabung dengan obrolan grup, menjelajah lebih banyak aktivitas komunitas～",
+  noActivity: "Belum ada aktivitas yang dipublikasikan～",
+  views: "kali dilihat",
+  ended: "Aktivitas telah berakhir",
+  errorLink: "Tidak dapat temukan tautan",
+  set_payment_password: "Harap atur kata sandi pembayaran 6 digit",
+  unset_payment_password:
+    "Mohon jangan atur kata sandi pembayaran yang berulang atau berurutan",
+  Confirm_Payment_Password: "Konfirmasi Kata Sandi Pembayaran",
+  Please_confirm_payment_password:
+    "Silakan masukkan kembali untuk mengonfirmasi kata sandi pembayaran ",
+  error_6100:
+    "Maaf, Anda hanya bisa mengubah nama panggilan pribadi Anda sekali setiap {day}hari",
+  viewDetailed: "Lihat informasi detail anggota grup",
+  inviter: "Pengundang",
+  lastLoginTime: "Waktu login terakhir",
+  DeleteThisUsersgroup: "Hapus pesan obrolan grup pengguna ini dalam grup ini",
+  AddGroupMembers: "Tambahkan anggota grup tanpa persetujuan verifikasi",
+  error_6103: "Pengguna ini adalah anggota biasa dan tidak memiliki izin",
+  error_6104: "Orang yang ditambahkan tidak ada dalam grup",
+  error_6108: "Akun bermasalah",
+  group_remark: "Catatan Grup",
+  input_group_remark: "Mohon masukkan konten catatan",
+  await_accepting: "Permintaan otorisasi perangkat baru telah dikirim",
+  apply_tips: "Perangkat ini tidak dipercaya atau tidak lulus tinjauan, Apakah Anda ingin mengirim informasi perangkat untuk mengajukan permohonan otorisasi?",
+  apply_send: "Kirim permohonan",
+  apply_ttl: "Otorisasi Masuk Perangkat",
+  group_limit500: "Maksimum 500 orang per grup",
+  select_group: "Pilih grup teman",
+  cantfind: "Tidak dapat menemukan kontak terkait dengan {name}",
+  error_6109: "Jumlah teman pengguna telah mencapai batas",
+  error_6106: "Harap tunggu sampai perangkat diterima sebelum masuk",
+  selectGroups: 'Pilih Grup',
+  group_member_info: "Informasi Anggota Grup",
+  join_time: "Waktu Bergabung",
+  inviter_user: "Pengundang",
+  last_login_time: "Waktu Login Terakhir",
+  sync_group_avatar: 'Apakah Anda ingin mengubah avatar grup secara bersamaan?',
+  invite_fail: 'akun {usernames} bermasalah!',
+  enterAndCtrl:'Enter untuk mengirim / Enter+Ctrl untuk baris baru',
+  enterAndCtrlIOS:'Enter untuk mengirim / Enter+control untuk baris baru',
+  scanLogin: 'Masuk dengan Pindai Kode QR',
+  formLogin: 'Masuk dengan Sandi',
+  scanText: 'Masuk menggunakan aplikasi Qudi Dai dengan Pindai Kode QR',
+  scanSubText: 'Gunakan aplikasi Qudi Dai untuk masuk dengan Pindai Kode QR',
+  qrcodeExpired: 'Kode QR telah kedaluwarsa',
+  expiredTime10: 'Kode QR berlaku selama 10 menit',
+  reflesh: 'Klik untuk segarkan',
+  scanSuccess: 'Pindai berhasil',
+  confromLogin: 'Harap konfirmasi masuk',
+  onlineStatus: "Status Online:",
+  networkDiagnostic: "Diagnostik Jaringan",
+  "setPaymentPassword": "Harap atur kata sandi pembayaran 6 digit",
+  "unSetPaymentPassword":
+      "Mohon jangan atur kata sandi pembayaran yang berulang atau berurutan",
+  "verifyPassword": "Verifikasi kata sandi pembayaran",
+  "confirmPaymentPassword": "Konfirmasi kata sandi pembayaran",
+  "verifyCurrentPassword": "Silakan verifikasi kata sandi pembayaran saat ini",
+  "reInsetPaymentPassword":
+      "Silakan masukkan kembali kata sandi pembayaran untuk konfirmasi",
+  "paymentPasswordDifferent":
+      "Kata sandi tidak cocok, silakan masukkan kembali",
+  "getPaymentPasswordWay": "Silakan pilih cara mendapatkan kembali kata sandi",
+  "selectFriendGroup": "Pilih Grup Teman",
+  "selectGroups": "Pilih Grup",
+  "eachGroupLimitNumber": "Batas maksimum anggota per grup adalah {p} orang",
+  "selectChatLimitNumber": "Anda hanya bisa memilih hingga {p} percakapan",
+  "deviceID": "ID perangkat：",
+  "groupChatRemark": "Catatan obrolan grup",
+  "pleaseEnterRemarks": "Silakan masukkan konten catatan",
+  "groupMembershipInfo": "Informasi keanggotaan grup",
+  "error_6102": "Maksimum 500 orang per kelompok",
+  "distroyed": "Dinonaktifkan",
+  "forbiddened": "Diblokir",
+  "addGroupMemberWithoutApply":
+      "Tambah anggota grup tanpa persetujuan verifikasi",
+  "error_6109": "Jumlah teman pengguna ini telah mencapai batas maksimum.",
+  "apply_ttl": "Otorisasi Masuk Perangkat",
+  "apply_tips":
+      "Perangkat ini tidak dapat dipercaya atau tidak lulus audit, apakah Anda ingin mengirim informasi perangkat untuk meminta otorisasi?",
+  "apply_send": "Kirim permintaan",
+  "device_auth_send": "Permintaan otorisasi perangkat telah dikirim",
+  "using_trusted_device":
+      "Login menggunakan perangkat ini berisiko, silakan gunakan perangkat terpercaya untuk login",
+  "account_closed": "Akun telah ditutup",
+  "google_code": "Kode Verifikasi Google",
+  "input_google_code": "Silakan masukkan Kode Verifikasi Google",
+  "inviterUser": "Pengundang",
+  "lastLoginTime": "Waktu Login Terakhir",
+  "error_6105": "Perangkat tidak dipercaya, harap ajukan permohonan",
+  "error_6106": "Harap tunggu sampai perangkat diverifikasi sebelum masuk",
+  "error_6107": "Perangkat tidak lulus verifikasi",
+  "hasDetailInfoPermission": "Lihat informasi detail anggota grup",
+  "editUserHeaderWithGroupHeader":
+      "Apakah Anda ingin mengubah avatar obrolan grup sekaligus?",
+  "darkModel": "Mode Gelap",
+  "darkModelSetDesc":
+      "Ikuti sistem untuk mengaktifkan atau menonaktifkan mode gelap",
+  "whiteModel": "Mode Terang",
+  "fileNotFound": "Tidak dapat menemukan file",
+  "openFileInApp": "Pratinjau file",
+  "openFileOtherApp": "Buka dengan aplikasi lain",
+  "openByBrowser": "Unduh dengan browser",
+  "pauseDownload": "Jeda unduhan",
+  "resumeDownload": "Lanjutkan unduhan",
+  "downloadFailed": "Unduhan gagal",
+  "downloading": "Mengunduh",
+  "notdownloaded": "Belum diunduh",
+  "cancelDownloading":
+      "File sedang diunduh, apakah Anda ingin membatalkan unduhan?",
+  "failedToDownload":
+      "Gagal mengunduh file, apakah Anda ingin mengunduh ulang?",
+  "cancelDownload": "Batalkan unduhan",
+  "sending": "Mengirim",
+  "fileTypeNotSupported": "Tidak mendukung unggah format file ini",
+  "fileSizeOut": "Ukuran file melebihi batas",
+  "restrict": "Membatasi",
+  "getWithPhone": "Dapatkan kembali dengan nomor telepon",
+  "getWithEmail": "Dapatkan kembali dengan alamat email",
+  "fileSize": "Ukuran file",
+  "whetherDownloadFile": "Apakah ingin mengunduh file",
+  "downloadFailedTip1": "Download gagal, harap periksa jaringan dan coba lagi",
+  "downloadQueueTip": "Ditambahkan ke antrian download, menunggu untuk diunduh",
+  "notSupportTransmitTip": "Pesan ini saat ini tidak dapat diteruskan",
+  "voiceSize": "Ukuran file audio tidak boleh melebihi 100MB.",
+  "wordSize": "Ukuran file dokumen tidak boleh melebihi 100MB.",
+  "apkSize": "Ukuran file paket instalasi tidak boleh melebihi 300MB.",
+  "zipSize": "Ukuran file zip tidak boleh melebihi 300MB.",
+  "groupDeleteUserTip":
+      "Hapus pengguna ini bersama dengan pesan yang dikirim pengguna ini di grup",
+  "nPersonRead": "{p} orang telah membaca",
+  "darkModeEnabled":
+      "Mode gelap diaktifkan, restart aplikasi untuk menerapkan perubahan",
+  "darkModeOff":
+      "Mode gelap dinonaktifkan, restart aplikasi untuk menerapkan perubahan",
+  "otherUser": "Pengguna lain",
+  "selectMsgDeleteTime": "Pilih waktu penyimpanan",
+  "selectMsgDeleteTimeTip":
+      "Riwayat obrolan akan dihapus secara otomatis setelah melewati batas waktu penyimpanan. Lanjutkan?",
+  "msgSaveTime": "Waktu penyimpanan riwayat obrolan",
+  "msgSaveTimeDesc":
+      "Membersihkan otomatis catatan obrolan yang melebihi batas waktu",
+  "hasTimeDeleteMsgPermission":
+      "Konfigurasi waktu penyimpanan pesan obrolan grup",
+  "accountAbnormal": "Pengecualian akun, undangan gagal!",
+  "onlyBrowser": "Hanya mendukung tampilan browser",
+  "cancelSendSuccess": "Pengiriman dibatalkan berhasil",
+  "allStr1": "Global",
+  "modelStr1": "Mode siang dan malam",
+  "atMaxCountTip": "@ paling banyak {p} orang",
+  "transmitTo": "Kirim ke",
+  "moreActions": "Aksi lainnya",
+  "refreshing": "Segarkan",
+  "openInBrowser": "Buka di peramban",
+  "coverFlow": "Alur sampul",
+  "checkNet": "Pemeriksaan Jaringan",
+  "autoChangeServer": "Pindah ke Server Optimal dengan Sekali Klik",
+  "serverLine": "Garis Server",
+  "timeOut": "Waktu Habis",
+  "serverLineChange": "Ganti Garis Server",
+  "netCheck": "Diagnostik Jaringan",
+  "netDelayCheck": "Pengecekan Keterlambatan Jaringan",
+  "netDelay1Check": "Keterlambatan Internet",
+  "msgDelay1Check": "Keterlambatan Pesan",
+  "imgDelay1Check": "Keterlambatan Gambar",
+  "netLine": "Garis Jaringan",
+  "reCheck": "Cek Ulang",
+  "netChecking": "Sedang memeriksa jaringan",
+  "locationAddr": "Alamat Lokasi",
+  "selectPerfectLineTip": "Kami telah memilih garis terbaik untuk Anda",
+  "selectPerfectLineTip2":
+      "Saat ini sudah merupakan garis terbaik, tidak perlu pindah",
+  "selectPerfectLineTipNoNet":
+      "Tidak dapat mengidentifikasi garis terbaik, harap periksa koneksi internet dan coba lagi",
+  "changing": "Sedang mengganti",
+  "changeSuccess": "Berhasil mengganti",
+  "waitAnswer": "Menunggu untuk dijawab",
+  "callFinish": "Panggilan Berakhir",
+  "autoChanging":
+      "Sedang mengganti secara otomatis, harap tunggu sebentar lagi",
+  "fileSizeConnotZero": "Ukuran file tidak boleh nol",
+  "confirmLogin": "Konfirmasi masuk",
+  "toolboxAudioCall": "Panggilan suara",
+  "requestTimeOut": "Waktu permintaan habis, coba lagi nanti",
+  "error_6115": "Kode QR sudah kedaluwarsa",
+  "groupNotFound": "Grup tidak ditemukan",
+  "userNotFound": "Pengguna tidak ditemukan",
+  "microphoneOpen": "Mikrofon terbuka",
+  "speakerOpen": "Pembicara terbuka",
+  "voiceWithYou": "Undang Anda untuk panggilan suara",
+  "callInterceptor": "Panggilan terputus",
+  "startCallError": "Kesalahan memulai panggilan",
+  "callHungUp": "Panggilan ditutup",
+  "callRemoteHungUp": "Panggilan dari pihak lain ditutup",
+  "callReceiverError": "Kesalahan menerima panggilan",
+  "starting": "Memulai",
+  "startTimeOut": "Waktu habis saat memulai panggilan suara",
+  "callWaitReceiver": "Menunggu pihak lain menerima",
+  "callRemoteNotAccept": "Pihak lain tidak menerima panggilan",
+  "callStartSendError": "Gagal memulai panggilan suara",
+  "notAccept": "Tidak menerima",
+  "callAccepting": "Menerima panggilan",
+  "call": "Panggilan",
+  "callDoing": "Sibuk, dibatalkan",
+  "netBad": "Kualitas jaringan buruk saat ini",
+  "netDown": "Jaringan terputus",
+  "onCalling": "Sedang menelepon",
+  "error_1303": "Anda belum menjadi teman dari pihak lain",
+  "remoteAccountError": "Akun pihak lain bermasalah",
+  "userOnlineStatus": "Status online",
+  "error_100008": "Pengguna ini tidak memenuhi syarat untuk menjadi administrator",
+  "callTimeLimit": "Batas waktu panggilan {p} menit setiap kali",
+  "notLoginOnline": "Belum pernah login",
+  "callRemoteDoing": "Sedang sibuk",
+  "exitLoginIng": "Sedang keluar",
+  "usePhoneRecovery": "Gunakan nomor telepon untuk pemulihan",
+  "useEmailRecovery": "Gunakan email untuk pemulihan",
+  "otherRecoveryMethods": "Metode pemulihan lainnya",
+  "emailAddress": "Alamat email",
+  "phoneErrorOrNotExist": "Nomor telepon salah atau tidak ada",
+  "phoneNotExist": "Nomor telepon tidak ada",
+  "verificationCodeFailure": "Gagal mendapatkan kode verifikasi, silakan coba lagi",
+  verificationCodeSent: "Kode verifikasi telah dikirim",
+  hiWelcomeLogin: "Hai~ Selamat datang di login",
+  otherLoginMethods: "Metode login lainnya",
+  usernamePhoneEmail: "Nama Pengguna/Nomor Telepon/Email",
+  "error_1303": "Anda belum menjadi teman dari pihak lain",
+  "remoteAccountError": "Akun pihak lain bermasalah",
+  "userOnlineStatus": "Status online",
+  "error_100008":
+      "Pengguna ini tidak memenuhi syarat untuk menjadi administrator",
+  "callTimeLimit": "Batas waktu panggilan %s menit setiap kali",
+  "notLoginOnline": "Belum pernah login",
+  "callRemoteDoing": "Sedang sibuk",
+  "exitLoginIng": "Sedang keluar",
+  "searchAreaCode": "Cari negara/wilayah",
+  "otherFindStyle": "Metode pemulihan lainnya",
+  "welcome": "Selamat datang masuk",
+  "fileReadError": "Terjadi kesalahan saat membaca file",
+  "docPreviewError": "File tidak dapat dipratinjau",
+  "docPreviewUseOther":
+      "Jika karena alasan jaringan atau ketidakcocokan perangkat, file tidak dapat dipratinjau, Anda bisa menggunakan",
+  "netTimeOut": "Waktu koneksi jaringan habis",
+  "docReadError": "Tidak dapat membaca file, harap periksa apakah format file sudah benar",
+  "errorDetail": "Detail kesalahan",
+  ip: "IP",
+  imageLoadingRoute: "Rute pemuatan gambar",
+  networkChecking: "Memeriksa jaringan...",
+  noPermission: "Tidak memiliki izin, silakan masuk setelah mendapatkan izin",
+  pageNotFound: "Halaman tidak ditemukan",
+  serverError: "Kesalahan server",
+  databaseError: "Kesalahan kueri database",
+  networkError: "Kesalahan koneksi jaringan"
+};
diff --git a/src/lang/index.js b/src/lang/index.js
new file mode 100644
index 0000000..2eb3edd
--- /dev/null
+++ b/src/lang/index.js
@@ -0,0 +1,140 @@
+// vue-i18n所需要引入的
+import { createI18n } from "vue-i18n";
+// 本地的文件夹
+import enLocale from "./us";
+import zhLocale from "./zh-cn";
+import zhhantLocale from "./zh-hant-cn";
+import viVnLocale from "./vi";
+import thTHLocale from "./th";
+import idIDLocale from "./id";
+import ptBRLocale from "./pt-br";
+// vant所需要引入的
+import { Locale } from "vant";
+//vant中的文件夹  需要的语言和本地的语言保持一致
+import enUS from "vant/lib/locale/lang/en-US";
+import zhCN from "vant/lib/locale/lang/zh-CN";
+import zhTW from "vant/lib/locale/lang/zh-TW";
+import viVn from "vant/lib/locale/lang/vi-VN";
+import thTH from "vant/lib/locale/lang/th-TH";
+import idID from "vant/lib/locale/lang/id-ID";
+import ptBR from "vant/lib/locale/lang/pt-BR";
+const messages = {
+  us: {
+    ...enUS,
+    ...enLocale,
+  },
+  "zh-cn": {
+    ...zhCN,
+    ...zhLocale,
+  },
+  "zh-hant-cn": {
+    ...zhTW,
+    ...zhhantLocale,
+  },
+  "vi-VN": {
+    ...viVn,
+    ...viVnLocale,
+  },
+  th: {
+    ...thTH,
+    ...thTHLocale,
+  },
+  id: {
+    ...idID,
+    ...idIDLocale,
+  },
+  "pt-br": {
+    ...ptBR,
+    ...ptBRLocale,
+  },
+};
+// 更新vant组件库本身的语言变化，支持国际化
+const vantLocales = (lang) => {
+  console.log(lang, "langlanglanglang", navigator.language);
+  if (lang === "us") {
+    Locale.use("en-US", enUS);
+  } else if (lang === "zh-cn") {
+    Locale.use("zh-CN", zhCN);
+  } else if (lang === "zh-hant-cn") {
+    Locale.use("zh-TW", zhTW);
+  } else if (lang === "vi-VN" || lang === "vi" || lang === "vi-BR") {
+    Locale.use("vi-VN", viVn);
+  } else if (lang === "th") {
+    Locale.use("th-TH", thTH);
+  } else if (lang === "id") {
+    Locale.use("id-ID", idID);
+  } else if (lang === "pt-br") {
+    Locale.use("pt-BR", ptBR);
+  }
+};
+// 获取浏览器的语言
+let lang = "us";
+console.log("navigator.language", navigator.language);
+if (
+  navigator.language === "zh-CN" ||
+  navigator.language === "zh-SG" ||
+  navigator.language === "zh-Hans" ||
+  navigator.language === "zh-BR"
+) {
+  lang = "zh-cn";
+  document.title = "球帝带";
+} else if (
+  navigator.language === "en" ||
+  navigator.language === "en-GB" ||
+  navigator.language === "en-US" ||
+  navigator.language === "en-CA" ||
+  navigator.language === "en-AU" ||
+  navigator.language === "en-BR"
+) {
+  lang = "us";
+  document.title = "QDDchat";
+} else if (
+  navigator.language === "zh-TW" ||
+  navigator.language === "zh-Hant" ||
+  navigator.language === "zh-HK" ||
+  navigator.language === "zh-MO"
+) {
+  lang = "zh-hant-cn";
+  document.title = "球帝帶";
+} else if (
+  navigator.language === "vi" ||
+  navigator.language === "vi-VN" ||
+  navigator.language === "vi-BR"
+) {
+  lang = "vi-VN";
+  document.title = "QDDchat";
+} else if (
+  navigator.language === "th" ||
+  navigator.language === "th-TH" ||
+  navigator.language === "th-TH" ||
+  navigator.language === "th-TH-u-ca-buddhist" ||
+  navigator.language === "th-BR"
+) {
+  lang = "th";
+  document.title = "QDDchat";
+} else if (
+  navigator.language === "id" ||
+  navigator.language === "id-ID" ||
+  navigator.language === "id-BR"
+) {
+  lang = "id";
+  document.title = "QDDchat";
+} else if (navigator.language === "pt-BR" || navigator.language === "pt") {
+  lang = "pt-br";
+  document.title = "QDDchat";
+}
+localStorage.setItem("language", lang);
+const language = localStorage.getItem("language") || lang;
+const i18n = createI18n({
+  //Not available in legacy mode 解决报错问题的配置项！！！
+  legacy: false,
+  // 全局注册 $t方法
+  globalInjection: true,
+  //设置初始化语言
+  locale: language,
+  // 设置备用语言
+  fallbackLocale: "us",
+  messages,
+});
+
+export { i18n, vantLocales };
diff --git a/src/lang/pt-br.js b/src/lang/pt-br.js
new file mode 100644
index 0000000..2945905
--- /dev/null
+++ b/src/lang/pt-br.js
@@ -0,0 +1,1831 @@
+// 巴西语
+export default {
+  checkTopMessage:'Verificar mensagens',
+  unsupportedVideoFormat: "Formato de vídeo não suportado",
+  welcome: "Bem-vindo ao OpenIM",
+  phoneNumber: "Número de telefone",
+  plsEnterPhoneNumber: "Por favor, insira seu número de telefone",
+  password: "Senha",
+  plsEnterPassword: "Por favor, insira sua senha",
+  plsEnterPassword6_15: "Senha (6-15 caracteres alfanuméricos)",
+  account: "Conta",
+  plsEnterAccount: "Por favor, insira sua conta",
+  plsEnterAccount6_15: "Nome de usuário (6-15 caracteres alfanuméricos)",
+  forgetPassword: "Esqueceu a senha",
+  createAccount: "Criar conta",
+  verificationCodeLogin: "Login com código de verificação",
+  login: "Login",
+  noAccountYet: "Ainda não tem uma conta?",
+  loginNow: "Entrar agora",
+  registerNow: "Registrar agora",
+  lockPwdErrorHint: "Erro %s vezes",
+  newUserRegister: "Registro de novo usuário",
+  verificationCode: "Código de verificação",
+  verificationSuccessful: "Verificação bem-sucedida",
+  sendVerificationCode: "Enviar código de verificação",
+  verification_code1: "Por favor, insira o código de verificação",
+  correct_email_address: "Por favor, insira um endereço de e-mail correto",
+  Resend: "Reenviar",
+  bind_email: "Vincular e-mail",
+  email_verification: "Verificação de e-mail",
+  login_details: "Detalhes de login",
+  verification_code: "Por favor, insira o código de verificação do e-mail",
+  email_verification_code: "Código de verificação do e-mail",
+  currently_bound_email: "E-mail atualmente vinculado:",
+  text_email: "Se o seu e-mail não estiver mais em uso, por favor, atualize-o",
+  remove_this_device: "Tem certeza de que deseja remover este dispositivo?",
+  remove_this_device1:
+    "Tem certeza de que deseja remover este dispositivo? Após a remoção, você precisará verificar o login novamente ao usar este dispositivo",
+  go_to_settings: "Ir para configurações",
+  go_to_binding: "Ir para vinculação",
+  date_of_birth: "Data de nascimento",
+  confidential: "Confidencial",
+  year: "Anos",
+  not_perfection: "Não perfeito",
+  old_password: "Senha antiga",
+  myCreatedGroup: "Grupos que criei",
+  myManageGroup: "Grupos que gerencio",
+  myJoinGroup: "Grupos que participei",
+  please_enter_old_password: "Por favor, insira a senha antiga",
+  trusted_device: "Dispositivo confiável",
+  change_email_address: "Alterar e-mail",
+  current_device: "Dispositivo atual",
+  remove_device: "Remover dispositivo",
+  current_device_records:
+    "Aqui estão todos os registros de login neste dispositivo",
+  text_device: "Gerenciamento de dispositivos de login",
+  verification_time: "Tempo de verificação:",
+  text_device1:
+    "Aqui estão todos os seus dispositivos de login. Clique para ver os detalhes e registros de login deste dispositivo.",
+  change_the_binding: "Alterar a ligação",
+  resendVerificationCode: "Reenviar código de verificação",
+  verificationCodeTimingReminder:
+    "Obter código de verificação novamente em %s segundos",
+  defaultVerificationCode: "(Código de verificação padrão: %s)",
+  plsEnterVerificationCode: "Por favor, insira seu código de verificação",
+  invitationCode: "Código de convite",
+  device_list: "Lista de dispositivos",
+  plsEnterInvitationCode: "Por favor, insira seu código de convite %s",
+  optional: "Opcional",
+  nextStep: "Próximo passo",
+  plsEnterRightPhone: "Por favor, insira um número de telefone correto",
+  enterVerificationCode: "Digite o código de verificação do celular",
+  setPassword: "Definir senha",
+  plsConfirmPasswordAgain: "Por favor, confirme sua senha novamente",
+  text_password2: "Por favor, confirme a senha de login novamente",
+  please_enter_new_password_again: "Por favor, insira a nova senha novamente",
+  confirmPassword: "Confirmar senha",
+  wrongPasswordFormat: "Formato de senha incorreto",
+  plsCompleteInfo: "Por favor, complete suas informações pessoais",
+  plsEnterYourNickname: "Por favor, insira seu apelido",
+  pleaseEnterYourUsername: "Por favor, insira seu nome de usuário",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "Insira seu nome de usuário para nos ajudar a identificar sua conta",
+  text_1:
+    "Esta conta não está vinculada a um e-mail, portanto, a recuperação de senha não é suportada temporariamente",
+  setInfo: "Configurar informações",
+  loginPwdFormat: "6-20 dígitos alfanuméricos",
+  passwordLogin: "Login de senha",
+  contacts: "Contatos",
+  workbench: "Bancada de trabalho",
+  mine: "Meu",
+  me: "Eu",
+  draftText: "Rascunho",
+  everyone: "Todos",
+  you: "Você",
+  groupAc: "Anúncio do grupo",
+  createGroupNtf: "%s criou um grupo de bate-papo",
+  editGroupInfoNtf: "%s editou as informações do grupo",
+  quitGroupNtf: "%s saiu do grupo de bate-papo",
+  invitedJoinGroupNtf: "%s convidou %s para o grupo de bate-papo",
+  kickedGroupNtf: "%s foi removido do grupo de bate-papo por %s",
+  joinGroupNtf: "%s entrou no grupo de bate-papo",
+  dismissGroupNtf: "%s dissolveu o grupo de bate-papo",
+  transferredGroupNtf: "%s transferiu a administração do grupo para %s",
+  muteMemberNtf: "%s foi silenciado por %s por %s",
+  muteCancelMemberNtf: "%s teve o silenciamento cancelado por %s",
+  muteGroupNtf: "%s ativou o silenciamento do grupo",
+  muteCancelGroupNtf: "%s desativou o silenciamento do grupo",
+  friendAddedNtf: "Vocês agora são amigos e podem começar a conversar.",
+  openPrivateChatNtf: "Chat privado destrutivo ativado",
+  closePrivateChatNtf: "Chat privado destrutivo desativado",
+  memberInfoChangedNtf: "%s editou as informações de membro do grupo",
+  unsupportedMessage: "Tipo de mensagem não suportado no momento",
+  picture: "Imagem",
+  video: "Vídeo",
+  voice: "Voz",
+  safety: "Segurança",
+  location: "Localização",
+  file: "Arquivo",
+  carte: "Cartão de visita",
+  emoji: "Emoji personalizado",
+  chatRecord: "Registro de chat",
+  revokeMsg: "Retirou uma mensagem",
+  aRevokeBMsg: "%s retirou uma mensagem de %s",
+  blockedByFriendHint:
+    "A mensagem foi enviada, mas foi recusada pelo destinatário",
+  sendFriendVerification: "Verificação de amigo enviada",
+  removedFromGroupHint: "Você foi removido do grupo",
+  groupDisbanded: "O grupo foi dissolvido",
+  createdGroup: "Você ainda não criou grupos",
+  search: "Buscar",
+  newGroups: "Novo grupo",
+  groupNames: "Por favor, insira o nome do grupo",
+  synchronizing: "Sincronizando",
+  syncFailed: "Falha na sincronização",
+  connecting: "Conectando",
+  connectionFailed: "Falha na conexão",
+  top: "Fixar no topo",
+  cancelTop: "Cancelar fixação",
+  markHasRead: "Marcar como lido",
+  delete: "Excluir",
+  nPieces: "%s mensagens",
+  online: "Online",
+  offline: "Offline",
+  phoneOnline: "Celular",
+  pcOnline: "Computador",
+  webOnline: "Web",
+  webMiniOnline: "Mini Web",
+  upgradeFind: "Nova versão encontrada",
+  upgradeVersion:
+    "Detectada uma nova versão disponível %s, sua versão atual é %s",
+  upgradeDescription: "Descrição da atualização:",
+  upgradeIgnore: "Ignorar",
+  upgradeLater: "Atualizar mais tarde",
+  upgradeNow: "Atualizar agora",
+  upgradeNever: "Não atualizar",
+  inviteYouCall: "%s convida você para %s",
+  rejectCall: "Rejeitar",
+  acceptCall: "Aceitar",
+  callVoice: "Chamada de voz",
+  callVideo: "Chamada de vídeo",
+  sentSuccessfully: "Enviado com sucesso",
+  copySuccessfully: "Copiado com sucesso",
+  binding_successful: "Vinculado com sucesso",
+  day: "dia",
+  hour: "hora",
+  hours: "horas",
+  minute: "minuto",
+  seconds: "segundos",
+  cancel: "Cancelar",
+  determine: "Determinar",
+  failed_to_load: "Falha ao carregar",
+  failed_to_load1: "Falha ao carregar. Por favor, tente novamente mais tarde",
+  removal_failed: "Falha ao remover",
+  toolboxAlbum: "Álbum",
+  toolboxCall: "Chamada de vídeo",
+  toolboxCamera: "Câmera",
+  toolboxCard: "Cartão",
+  toolboxFile: "Arquivo",
+  toolboxLocation: "Localização",
+  send: "Enviar",
+  holdTalk: "Segure para falar",
+  releaseToSend: "Solte para enviar",
+  releaseToSendSwipeUpToCancel:
+    "Solte para enviar, deslize para cima para cancelar",
+  liftFingerToCancelSend: "Levante o dedo para cancelar o envio",
+  callDuration: "Duração da chamada %s",
+  cancelled: "Cancelado",
+  cancelledByCaller: "Cancelado pelo chamador",
+  rejectedByCaller: "Rejeitado pelo chamador",
+  callTimeout: "Tempo limite de chamada",
+  rejected: "Rejeitado",
+  forwardMaxCountHint:
+    "Atualmente, só é possível encaminhar até vinte mensagens~",
+  typing: "Digitando...",
+  addSuccessfully: "Adicionado com sucesso",
+  addFailed: "Falha ao adicionar",
+  setSuccessfully: "Configurado com sucesso",
+  callingBusy: "Você já está em uma chamada e não pode realizar esta operação!",
+  groupCallHint:
+    "O grupo atual está em uma chamada. Você tem certeza de que deseja participar desta chamada?",
+  joinIn: "Participar",
+  menuCopy: "Copiar",
+  menuDel: "Excluir",
+  menuForward: "Encaminhar",
+  menuReply: "Responder",
+  menuMulti: "Seleção múltipla",
+  menuRevoke: "Revogar",
+  menuAdd: "Adicionar",
+  nMessage: "%s novas mensagens",
+  plsSelectLocation: "Por favor, selecione uma localização",
+  groupAudioCallHint: "%s pessoas estão em uma chamada de áudio",
+  groupVideoCallHint: "%s pessoas estão em uma chamada de vídeo",
+  reEdit: "Reeditar",
+  playSpeed: "Velocidade de reprodução",
+  download: "Baixar",
+  download1: "Baixar agora",
+  nicknames: "Apelidos de usuário",
+  downloadAPP: "Baixar aplicativo",
+  private_chat: "Chat privado",
+  googleMap: "Mapa do Google",
+  check_for_updates: "Verificar atualizações",
+  appleMap: "Mapa da Apple",
+  baiduMap: "Mapa Baidu",
+  amapMap: "Mapa Amap",
+  signature: "Assinatura",
+  please_enter_user_nickname: "Por favor, insira o apelido do usuário",
+  set_characters: "Por favor, defina de 4 a 15 caracteres",
+  personalized_signature:
+    "Por favor, insira uma assinatura personalizada (limite de 6 a 50 caracteres)",
+  tencentMap: "Mapa Tencent",
+  offlineMeetingMessage: "Você recebeu um convite de reunião offline",
+  offlineMessage: "Você tem uma nova mensagem offline",
+  offlineCallMessage: "Você recebeu um convite de chamada offline",
+  logoutHint: "Tem certeza de que deseja fazer logout?",
+  myInfo: "Minhas informações",
+  workingCircle: "Círculo de trabalho",
+  accountSetup: "Configuração da conta",
+  aboutUs: "Sobre nós",
+  about: "Sobre",
+  bgColor: "Cor do fundo",
+
+  logout: "Sair",
+  qrcode: "Código QR",
+  qrcodeHint: "Escaneie o código QR abaixo para me adicionar como amigo",
+  favoriteFace: "Rosto favorito",
+  favoriteManage: "Gerenciar",
+  favoriteCount: "%s emojis favoritos",
+  favoriteDel: "Excluir (%s)",
+  hasRead: "Lido",
+  unread: "Não lido",
+  nPersonUnRead: "%s pessoas não leram",
+  allRead: "Tudo lido",
+  messageRecipientList: "Lista de destinatários da mensagem",
+  hasReadCount: "Lido (%s)",
+  unreadCount: "Não lido (%s)",
+  newFriend: "Novo amigo",
+  newFriendList: "Lista de solicitações de amigos",
+  newGroup: "Novo grupo",
+  myFriend: "Meus amigos",
+  myGroup: "Meus grupos",
+  addManager: "Adicionar gerente",
+  privateSetting: "Configuração privada",
+  add: "Adicionar",
+  scan: "Escanear",
+  scanHint: "Escanear cartão de visita QR",
+  addFriend: "Adicionar amigo",
+  addFriendHint: "Adicionar por ID de usuário",
+  createGroup: "Criar grupo",
+  createGroupHint: "Criar grupo para usar o OpenIM",
+  addGroup: "Adicionar grupo",
+  addGroupHint: "Perguntar ao administrador ou membros do grupo pelo ID",
+  searchIDAddFriend: "Buscar ID para adicionar amigo",
+  searchIDAddGroup: "Buscar ID para adicionar grupo",
+  searchIDIs: "ID: %s",
+  searchPhoneIs: "Número de telefone: %s",
+  searchEmailIs: "E-mail: %s",
+  searchNicknameIs: "Apelido: %s",
+  searchGroupNicknameIs: "Apelido do grupo: %s",
+  noFoundUser: "Não foi possível encontrar este usuário",
+  noFoundGroup: "Não foi possível encontrar este grupo",
+  joinGroupDate: "Data de entrada no grupo",
+  joinGroupMethod: "Método de entrada no grupo",
+  byInviteJoinGroup: "Convidado por %s",
+  byIDJoinGroup: "Pesquisar ID do grupo",
+  byQrcodeJoinGroup: "QR do grupo",
+  groupID: "ID do grupo",
+  setAsAdmin: "Definir como administrador",
+  setMute: "Definir como silenciado",
+  organizationInfo: "Informações da organização",
+  organization: "Organização",
+  department: "Departamento",
+  position: "Cargo",
+  personalInfo: "Informações pessoais",
+  viewDynamics: "Ver dinâmicas",
+  audioAndVideoCall: "Chamada de áudio e vídeo",
+  sendMessage: "Enviar mensagem",
+  avatar: "Avatar",
+  name: "Nome",
+  nickname: "Apelido",
+  gender: "Gênero",
+  englishName: "Nome em inglês",
+  birthDay: "Data de nascimento",
+  tel: "Telefone",
+  mobile: "Celular",
+  email: "E-mail",
+  man: "Masculino",
+  woman: "Feminino",
+  friendSetup: "Configurações de amigo",
+  setupRemark: "Configurar observação",
+  recommendToFriend: "Recomendar a um amigo",
+  addToBlacklist: "Adicionar à lista negra",
+  unfriend: "Terminar amizade",
+  areYouSureDelFriend: "Tem certeza de que deseja excluir o amigo?",
+  areYouSureAddBlacklist:
+    "Tem certeza de que deseja adicionar o amigo à lista negra?",
+  remark: "Observação",
+  save: "Salvar",
+  saveSuccessfully: "Salvo com sucesso",
+  saveFailed: "Falha ao salvar",
+  groupVerification: "Verificação do grupo",
+  friendVerification: "Verificação do amigo",
+  email_address: "Por favor, insira o endereço de e-mail",
+  sendEnterGroupApplication: "Enviar solicitação de entrada no grupo",
+  sendToBeFriendApplication: "Enviar solicitação para ser amigo",
+  sendSuccessfully: "Enviado com sucesso",
+  reset_successful: "Redefinido com sucesso",
+  bind_new_email: "Vincular novo e-mail",
+  Login_failed: "Falha no login",
+  successful_home: "Registrado com sucesso",
+  sendFailed: "Falha ao enviar",
+  canNotAddFriends: "Este usuário está configurado para não ser adicionado!",
+  mutedAll: "Mudo para todos",
+  tenMinutes: "10 minutos",
+  oneHour: "1 hora",
+  twelveHours: "12 horas",
+  oneDay: "1 dia",
+  custom: "Personalizado",
+  unmute: "Desativar mudo",
+  youMuted: "Você foi silenciado",
+  groupMuted: "Mudo de grupo ativado",
+  notDisturbMode: "Modo Não Perturbe",
+  allowRing: "Som de notificação de nova mensagem",
+  allowVibrate: "Vibração de nova mensagem",
+  forbidAddMeToFriend: "Proibir adição como amigo",
+  blacklist: "Lista negra do catálogo de endereços",
+  unlockSettings: "Desbloquear configurações",
+  changePassword: "Alterar senha",
+  clearChatHistory: "Limpar histórico de bate-papo",
+  confirmClearChatHistory:
+    "Tem certeza de que deseja limpar todo o histórico de bate-papo?",
+  languageSetup: "Configurações de idioma",
+  language: "Idioma",
+  english: "Inglês",
+  setting_up: "Configurando...",
+  chinese: "Chinês Simplificado",
+  traditional_chinese: "Chinês Tradicional",
+  followSystem: "Seguir sistema",
+  blacklistEmpty: "Lista negra vazia",
+  remove: "Remover",
+  removeFriend: "Remover amigo",
+  fingerprint: "Impressão digital",
+  gesture: "Gesto",
+  biometrics: "Biometria",
+  plsEnterPwd: "Por favor, insira a senha",
+  plsEnterOldPwd: "Por favor, insira a senha antiga",
+  plsEnterNewPwd: "Por favor, insira a nova senha",
+  plsConfirmNewPwd: "Por favor, confirme a nova senha",
+  reset: "Resetar",
+  oldPwd: "Senha antiga",
+  newPwd: "Nova senha",
+  confirmNewPwd: "Confirmar nova senha:",
+  plsEnterConfirmPwd: "Por favor, insira a senha de confirmação",
+  twicePwdNoSame: "As senhas inseridas não são iguais",
+  twicePwd: "As novas senhas não correspondem, por favor, redefina",
+  changedSuccessfully: "Alterado com sucesso",
+  deleteSuccessfully: "Excluído com sucesso",
+  checkNewVersion: "Verificar nova versão",
+  noAddGround: "Ainda não foram adicionados amigos ao grupo",
+  chatContent: "Conteúdo do chat",
+  topContacts: "Contatos principais",
+  messageNotDisturb: "Não perturbar mensagens",
+  messageNotDisturbHint: "Receber mensagens sem ser notificado",
+  burnAfterReading: "Autodestruição",
+  timeSet: "Configuração de tempo",
+  setChatBackground: "Definir fundo do chat",
+  fontFace: "Tipo de letra",
+  fontSize: "Tamanho da fonte",
+  little: "Pequeno",
+  standard: "Padrão",
+  big: "Grande",
+  thirtySeconds: "30 segundos",
+  fiveMinutes: "5 minutos",
+  clearAll: "Limpar tudo",
+  clearSuccessfully: "Limpeza concluída com sucesso",
+  groupChatSetup: "Configuração do chat em grupo",
+  viewAllGroupMembers: "Ver todos os membros do grupo (%s)",
+  groupManage: "Gerenciar grupo",
+  myGroupMemberNickname: "Meu apelido no grupo",
+  topChat: "Chat fixado",
+  muteAllMember: "Silenciar todos os membros",
+  exitGroup: "Sair do grupo",
+  dismissGroup: "Encerrar o grupo",
+  dismissGroupHint:
+    "Todos os membros serão removidos deste grupo e não poderão mais enviar ou receber mensagens",
+  quitGroupHint: "Você não receberá mais mensagens deste grupo depois de sair.",
+  joinGroupSet: "Configuração de entrada no grupo",
+  allowAnyoneJoinGroup: "Permitir que qualquer pessoa entre no grupo",
+  inviteNotVerification:
+    "Convites de membros do grupo não precisam de verificação",
+  needVerification: "É necessário enviar uma mensagem de verificação",
+  addMember: "Adicionar",
+  delMember: "Remover",
+  groupOwner: "Proprietário do grupo",
+  groupAdmin: "Administrador do grupo",
+  notAllowSeeMemberProfile:
+    "Não permitir ver o perfil de outros membros do grupo",
+  notAllAddMemberToBeFriend:
+    "Não permitir adicionar membros do grupo como amigos",
+  transferGroupOwnerRight: "Transferir direitos de proprietário do grupo",
+  groupName: "Nome do grupo",
+  groupAcPermissionTips:
+    "Apenas o proprietário do grupo e administradores podem editar",
+  plsEnterGroupAc: "Por favor, insira o anúncio do grupo",
+  edit: "Editar",
+  publish: "Publicar",
+  groupMember: "Membros do grupo",
+  selectedPeopleCount: "Selecionado (%s)",
+  confirmSelectedPeople: "Confirmar (%s/%s)",
+  confirm: "Confirmar",
+  log_in_time: "Hora do login:",
+  log_in_time1: "Hora do login",
+  login_IP: "IP do login:",
+  confirmTransferGroupToUser:
+    "Confirmar a transferência da propriedade do grupo para: %s?",
+  removeGroupMember: "Remover membro do grupo",
+  searchNotResult: "Nenhum resultado encontrado na pesquisa",
+  groupQrcode: "QR Code do grupo",
+  groupQrcodeHint:
+    "Escanear o QR code abaixo para entrar imediatamente no chat do grupo",
+  approved: "Aprovado",
+  accept: "Aceitar",
+  reject: "Rejeitar",
+  friendGrouping: "Agrupamento de amigos",
+  waitingForVerification: "Aguardando verificação do outro lado",
+  rejectSuccessfully: "Rejeição bem sucedida",
+  rejectFailed: "Falha ao rejeitar",
+  applyJoin: "Aplicar para entrar",
+  enterGroup: "Entrar no chat do grupo",
+  applyReason: "Motivo da aplicação: %s",
+  invite: "Convidar",
+  sourceFrom: "Fonte: %s",
+  byMemberInvite: "Convite de membro",
+  bySearch: "Por busca",
+  byScanQrcode: "Escanear QR code",
+  iCreatedGroup: "Eu criei",
+  iJoinedGroup: "Eu entrei",
+  nPerson: "{count} pessoa(s)",
+  searchNotFound: "Nenhum resultado encontrado na pesquisa",
+  searchNotFoundMember: "Nenhum usuário relacionado encontrado",
+  organizationStructure: "Estrutura da organização",
+  recentConversations: "Conversas recentes",
+  selectAll: "Selecionar todos",
+  plsEnterGroupNameHint:
+    "Escolha um nome para o grupo para facilitar buscas futuras",
+  completeCreation: "Concluir criação",
+  sendCarteConfirmHint: "Confirmar o envio deste contato para este chat?",
+  sentSeparatelyTo: "Enviar separadamente para:",
+  sentTo: "Enviar para:",
+  leaveMessage: "Deixar mensagem",
+  mergeForwardHint: "[Encaminhar em conjunto] %s mensagens no total",
+  mergeForward: "Encaminhar em conjunto",
+  quicklyFindChatHistory: "Encontrar histórico de conversas rapidamente",
+  notFoundChatHistory: "Não foi encontrado nenhum conteúdo relacionado a %s",
+  globalSearchAll: "Todos",
+  globalSearchContacts: "Contatos",
+  globalSearchGroup: "Grupos",
+  globalSearchChatHistory: "Histórico de conversas",
+  globalSearchChatFile: "Arquivos",
+  relatedChatHistory: "%s conversas relacionadas",
+  seeMoreRelatedContacts: "Ver mais contatos relacionados",
+  seeMoreRelatedGroup: "Ver mais grupos relacionados",
+  seeMoreRelatedChatHistory: "Ver mais histórico de conversas relacionadas",
+  seeMoreRelatedFile: "Ver mais arquivos relacionados",
+  publishPicture: "Publicar imagem",
+  publishVideo: "Publicar vídeo",
+  mentioned: "Mencionado: %s",
+  comment: "Comentário",
+  like: "Curtir",
+  reply: "Responder",
+  rollUp: "Recolher",
+  fullText: "Texto completo",
+  selectAssetsFromCamera: "Selecionar da câmera",
+  selectAssetsFromAlbum: "Selecionar do álbum",
+  whoCanWatch: "Quem pode ver",
+  remindWhoToWatch: "Lembre quem assistir",
+  public: "Público",
+  everyoneCanSee: "Todos podem ver",
+  partiallyVisible: "Parcialmente visível",
+  visibleToTheSelected: "Visível para os selecionados",
+  partiallyInvisible: "Parcialmente invisível",
+  invisibleToTheSelected: "Invisível para os selecionados",
+  private: "Privado",
+  onlyVisibleToMe: "Apenas visível para mim",
+  selectVideoLimit: "A duração não pode exceder 15 segundos",
+  selectContactsLimit: "Selecione pelo menos um contato",
+  message: "Mensagem",
+  commentedYou: "Comentou em você: %s",
+  likedYou: "Gostou de você",
+  mentionedYou: "Mencionou você",
+  replied: "Respondeu",
+  detail: "Detalhes",
+  totalNPicture: "Total de %s imagens",
+  noDynamic: "Nenhuma dinâmica",
+  callRecords: "Registro de chamadas",
+  allCall: "Todas as chamadas",
+  missedCall: "Chamadas perdidas",
+  incomingCall: "Recebidas",
+  outgoingCall: "Realizadas",
+  microfone: "microfone",
+  "alto-falante": "alto-falante",
+  desligar: "desligar",
+  atender: "atender",
+  esperandoChamada: "esperando chamada...",
+  esperandoChamadaVoz: "à espera da resposta do outro lado...",
+  conviteChamadaVoz: "convidou você para uma chamada de voz...",
+  esperandoChamadaVideo: "à espera da resposta do outro lado...",
+  conviteChamadaVideo: "convidou você para uma chamada de vídeo...",
+  esperandoResposta: "à espera da resposta",
+  convidouParaChamada: "convidou você para uma chamada",
+  chamando: "em chamada",
+  nPessoasChamando: "%s pessoas em chamada",
+  quemConvidouChamadaVoz: "%s convidou você para uma chamada de voz",
+  quemConvidouChamadaVideo: "%s convidou você para uma chamada de vídeo",
+  plsInputMeetingSubject: "Por favor, insira o assunto da reunião",
+  meetingStartTime: "Hora de início",
+  meetingDuration: "Duração da reunião",
+  enterMeeting: "Entrar na reunião",
+  meetingNo: "Número da reunião",
+  yourMeetingName: "Seu nome",
+  plsInputMeetingNo: "Por favor, insira o número da reunião",
+  plsInputYouMeetingName: "Por favor, insira seu nome",
+  meetingSubjectIs: "Assunto da reunião: %s",
+  meetingStartTimeIs: "Hora de início: %s",
+  meetingDurationIs: "Duração da reunião: %s",
+  meetingHostIs: "Anfitrião: %s",
+  meetingNoIs: "Número da reunião: %s",
+  meetingMessageClickHint:
+    "Clique nesta mensagem para entrar na reunião diretamente",
+  meetingMessage: "Mensagem da reunião",
+  openMeeting: "Reunião em andamento",
+  didNotStart: "Não iniciada",
+  started: "Iniciada",
+  meetingInitiatorIs: "Reunião em vídeo iniciada por %s",
+  meetingDetail: "Detalhes da reunião",
+  meetingOrganizerIs: "Organizador: %s",
+  updateMeetingInfo: "Atualizar informações da reunião",
+  cancelMeeting: "Cancelar reunião",
+  videoMeeting: "Reunião de vídeo",
+  joinMeeting: "Entrar na reunião",
+  bookAMeeting: "Agendar reunião",
+  quickMeeting: "Reunião rápida",
+  confirmTheChanges: "Confirmar alterações",
+  invitesYouToVideoConference: "%s convida você para uma conferência de vídeo",
+  over: "Encerrar",
+  meetingMute: "Mudo",
+  meetingUnmute: "Desmutar",
+  meetingCloseVideo: "Fechar vídeo",
+  meetingOpenVideo: "Abrir vídeo",
+  meetingEndSharing: "Encerrar compartilhamento",
+  meetingShareScreen: "Compartilhar tela",
+  meetingMembers: "Membros(%s)",
+  settings: "Configurações",
+  leaveMeeting: "Sair da reunião",
+  endMeeting: "Encerrar reunião",
+  leaveMeetingConfirmHint: "Tem certeza de que deseja sair da reunião?",
+  endMeetingConfirmHit: "Tem certeza de que deseja encerrar a reunião?",
+  meetingSettings: "Configurações da reunião",
+  allowMembersOpenMic: "Permitir que os membros desmutem-se",
+  allowMembersOpenVideo: "Permitir que os membros ativem o vídeo",
+  onlyHostShareScreen: "Somente o host pode compartilhar a tela",
+  onlyHostInviteMember: "Somente o host pode convidar membros",
+  defaultMuteMembers: "Membros entram na reunião em modo mudo",
+  pinThisMember: "Fixar este membro",
+  unpinThisMember: "Desafixar este membro",
+  allSeeHim: "Todos veem ele",
+  cancelAllSeeHim: "Cancelar todos veem ele",
+  muteAll: "Silenciar todos",
+  unmuteAll: "Desmutar todos",
+  members: "Membros",
+  screenShare: "Compartilhamento de tela",
+  screenShareHint: "Compartilhando tela.",
+  meetingClosedHint:
+    "A reunião foi encerrada ou a conexão foi perdida. Tem certeza de que deseja sair?",
+  meetingIsOver: "A reunião já terminou!",
+  networkError: "Erro de rede. Por favor, tente novamente mais tarde!",
+  shareSuccessfully: "Compartilhamento realizado com sucesso!",
+  notFoundMinP: "Aplicativo Mini Programa não encontrado",
+  notSendMessageNotInGroup:
+    "Não é possível enviar mensagens em grupos dos quais você saiu",
+  whoModifyGroupName: "{name} modificou o nome do grupo para ",
+  accountWarn: "Aviso!",
+  accountException:
+    "Sua conta foi acessada em outro dispositivo. Por favor, altere sua senha imediatamente.",
+  tagGroup: "Tag",
+  issueNotice: "Emitir Aviso",
+  createTagGroup: "Criar Grupo de Tag",
+  plsEnterTagGroupName: "Por favor, insira o nome da tag",
+  tagGroupMember: "Membro do Grupo de Tag",
+  completeEdit: "Concluir edição",
+  finish: "Finalizar",
+  emptyTagGroup: "Grupo de tag vazio",
+  confirmDelTagGroupHint:
+    "Tem certeza de que deseja excluir este grupo de tag?",
+  editTagGroup: "Editar Tag",
+  newBuild: "Novo",
+  receiveMember: "Membro Receptor",
+  emptyNotification: "Nenhuma notificação",
+  notificationReceiver: "%s destinatários: %s",
+  sendAnother: "Enviar outro",
+  confirmDelTagNotificationHint:
+    "Tem certeza de que deseja excluir este registro de notificação?",
+  contentNotBlank: "O conteúdo não pode estar em branco",
+  plsEnterDescription: "Por favor, insira o texto da descrição",
+  gifNotSupported: "GIF não é suportado",
+  register: "Registrar",
+  hk: "Tradicional",
+  RegisterSuccess: "Registro realizado com sucesso",
+  LoginSuccess: "Login realizado com sucesso",
+  init_validate_1:
+    "O nome de usuário deve ter entre 6 e 15 caracteres alfanuméricos",
+  init_validate_10:
+    "Número de telefone ou senha incorretos, por favor, tente novamente",
+  init_validate_5: "A senha deve ter de 6 a 15 caracteres, incluindo letras e números. Por favor, redefina a senha.",
+  init_validate_2: "As senhas não coincidem, por favor, insira novamente",
+  init_validate_3:
+    "A senha deve conter entre 6 e 15 caracteres alfanuméricos. Por favor, defina uma nova senha",
+  init_validate_6: "A senha deve conter entre 6 e 15 caracteres alfanuméricos",
+  init_validate_4:
+    "Registro realizado com sucesso, você será redirecionado para a página de login",
+  init_hint_1: "6-15 dígitos ou letras",
+  init_hint_2: "Confirmar senha de login",
+  init_hint_3: "Senha de login",
+  username: "Nome de usuário",
+  to_modify: "Modificar",
+  confirm_password: "Confirmar senha",
+  notification_settings: "Configurações de notificação",
+  init_text_1: "Ao registrar e fazer login, você concorda com",
+  init_text_2: "o Contrato de Serviço do Usuário",
+  init_text_3: " e ",
+  init_text_4: "a Política de Privacidade",
+  init_text_5: "do Contrato de Serviço do Usuário e da Política de Privacidade",
+  init_text_6:
+    "Para proteger seus direitos legais, por favor, leia e concorde com os seguintes termos",
+  refuse: "Recusar",
+  refuse_continue: "Concordar e continuar",
+  forget_password: "Esqueceu a senha?",
+  register_user: "Registrar conta",
+  gotoLogin: "Entrar",
+  gotoRegister: "Criar uma nova conta",
+  enterGroupCheck: "Solicitação de entrada no grupo",
+  openPhotoError_1: "Falha ao carregar o arquivo selecionado",
+  openPhotoError_2: "Falha ao fazer upload do arquivo",
+  openPhotoError_3: "Falha ao ler as informações do arquivo",
+  agreeAll: "Concordar com tudo",
+  whatCanManagerDo: "Permissões de gerenciamento de grupo",
+  changeGroupName: "Alterar nome do grupo",
+  deleteMemberMessage: "Excluir mensagem de membro do grupo",
+  chatPrivate: "Conversa privada criptografada com membros do grupo",
+  memberMute: "Silenciar membro do grupo",
+  deleteMember: "Remover membro",
+  changeNotice: "Publicar/Alterar/Excluir aviso do grupo",
+  checkInGroup: "Verificar entrada no grupo",
+  setAdmin: "Definir como administrador",
+  deleteAdmin: "Remover administração",
+  deleteAdminTitle: "Tem certeza de que deseja remover este administrador?",
+  deleteAdminDetail:
+    "Ao remover este membro como administrador, ele não poderá gerenciar as mensagens do grupo",
+  deleteSuccess: "Remoção bem-sucedida",
+  mobile_web_page: "Acessar página da web móvel",
+  deleteMemberTitle: "Tem certeza de que deseja remover este membro?",
+  deleteMemberDetail:
+    "Ao remover este membro do grupo, ele não poderá enviar nem receber mensagens",
+  deleteSelf: "Você não pode remover a si mesmo",
+  handled: "Processado",
+  unhandle: "Aguardando",
+  noCheck: "Nenhuma solicitação para processar no momento",
+  success: "Operação bem-sucedida",
+  nameLenth: "Por favor, defina entre 1 e 15 caracteres",
+  editNickname: "Editar apelido do grupo",
+  text_password: "Por favor, defina uma nova senha de login",
+  quit: "Sair",
+  waitAMoment: "Aguarde um momento",
+  editWarningTitle:
+    "Tem certeza de que deseja sair da edição do apelido do grupo?",
+  editWarningDetail:
+    "As alterações no apelido do grupo não foram salvas. Deseja continuar e sair?",
+  editGroupAvatar: "Editar avatar do grupo",
+  myGroupAvatar: "Meu avatar de grupo",
+  inviteLink: "Link de convite",
+  inviteTips:
+    "Qualquer usuário que tenha este aplicativo instalado poderá ingressar em seu grupo através deste link de convite",
+  inviteLinkCopy: "Link de convite copiado",
+  shareLink: "Compartilhar link",
+  manageLink: "Gerenciar link de convite",
+  copyLink: "Copiar link",
+  deleteLink: "Excluir link",
+  deleteLinkTipsTitle: "Tem certeza de que deseja revogar este link?",
+  deleteLinkTipsDetail:
+    "Tem certeza de que deseja revogar este link de convite? Uma vez revogado, outros não poderão ingressar no grupo através deste link.",
+  linkManage: "Gerenciamento de link",
+  openManage:
+    "Depois de ativado, é necessário a confirmação do administrador ou proprietário do grupo para ingressar no grupo",
+  timeValid: "Limite de tempo válido",
+  linkInvalidTips:
+    "O link de convite expirará após esta data e não poderá mais ser acessado",
+  valid: "Válido internamente",
+  dayValid: "Válido por dias",
+  forever: "Para sempre",
+  foreverValid: "Válido permanentemente",
+  attendTips:
+    "A solicitação de entrada foi enviada. Após a aprovação do administrador, você poderá ingressar no grupo",
+  memberCountLimit: "O limite de membros deste grupo foi alcançado",
+  linkIsOut: "O link de convite expirou",
+  requestAttend: "Solicitar entrada no grupo",
+  needCheck: "A entrada neste grupo requer aprovação do administrador",
+  countLimit: "O número máximo de administradores foi atingido",
+  openLock:
+    "Após sair do aplicativo, será necessário usar uma solução de desbloqueio após o tempo limite",
+  closeLock: "Não é necessário autenticação ao iniciar o aplicativo",
+  checkTips:
+    "Verifique se as permissões de rosto ou impressão digital estão ativadas~",
+  face: "Desbloqueio facial",
+  finger: "Desbloqueio por impressão digital",
+  gestureLock: "Desbloqueio por senha de gestos",
+  closed: "Desativado",
+  opened: "Aberto",
+  lanchProtect: "Proteção ao iniciar",
+  noProtect: "Sem proteção necessária",
+  lockSetting: "Configuração de desbloqueio",
+  drawLine: "Desenhar padrão de desbloqueio",
+  drawOldLine: "Desenhar seu padrão de desbloqueio antigo",
+  drawNewLine: "Desenhar seu novo padrão de desbloqueio",
+  setGesturePassword: "Definir senha de gestos",
+  checkGesturePassword: "Verificar senha de gestos",
+  needJoinPoint: "Pelo menos conecte 4 pontos, por favor, desenhe novamente",
+  noFriendAdd: "Não há amigos para adicionar",
+  noFriendDelete: "Não há amigos para remover",
+  noVerify: "É necessário verificação ao me adicionar",
+  drawAgain: "Por favor, desenhe novamente",
+  checkSuccessful: "Verificação bem-sucedida",
+  notInCommon:
+    "Incompatível com o último padrão desenhado, por favor, desenhe novamente",
+  changeGesturePassword: "Alterar senha de gestos",
+  toChange: "Ir para alteração",
+  change: "Alterar",
+  openSuccess: "Abertura bem-sucedida",
+  closeSuccess: "Fechamento bem-sucedido",
+  hasBeenMember: "Já é membro do grupo, não precisa se juntar novamente",
+  joinGroup: "entrar no grupo",
+  checking: "Verificação do administrador em andamento",
+  noUnlock: "Não é possível desbloquear?",
+  inputGesture: "Por favor, insira o desbloqueio de gestos",
+  faceDetect: "Por favor, faça o reconhecimento facial",
+  fingerDetect: "Por favor, faça o reconhecimento de impressão digital",
+  tryUnlocking: "Tente o seguinte: não é possível desbloquear?",
+  countRemain: "Padrão incorreto, você ainda pode tentar %s vezes",
+  reLoginUnlock: "Desbloqueio ao fazer login novamente",
+  selectVerityType: "Por favor, selecione o tipo de verificação ",
+  currentTypeNotSupport: "O tipo atual não suporta",
+  //-------------
+  updateNewVersion: "Nova versão encontrada",
+  updateOkUpdate: "Atualizar agora",
+  updateOpenDownloadFailed: "Falha ao abrir o download",
+  updateCurrentIsNew: "Atualização mais recente já instalada",
+  newVersionNotFound:
+    "Link para a versão mais recente não encontrado. Você pode visitar o site para baixar",
+  openUrlFailed: "Link inválido",
+  qmvMsgNotExit: "[Conteúdo citado não existe]",
+  qmvMsgNotSupport: "[Conteúdo citado não é suportado]",
+  dataError: "Erro na análise dos dados",
+  userNotBindEmail: "Usuário não vinculou o e-mail",
+  userNotRegister: "Usuário não registrado",
+  checkError: "Erro ao verificar",
+  csvTitle: "Configurações de bate-papo",
+  csvSetTopMsg: "Fixar conversa no topo",
+  csvSetOptMsg: "Silenciar notificações",
+  csvSetDisableMsg: "Bloquear mensagens",
+  csvClearMsg: "Limpar histórico de conversas",
+  csvClearLocal: "Limpar apenas o histórico de conversas local",
+  csvClearUser: "Limpar o histórico de conversas local e de %s",
+  csvSetErrorTip: "Falha ao configurar, por favor, verifique a conexão de rede",
+  gmiTitle: "Apelido do grupo:",
+  gmiSetTalk: "Conversa privada criptografada",
+  gmiSetMute: "Definir silêncio no grupo",
+  gmiDeleteUser: "Remover do grupo",
+  gmiMuteTo: "Silenciado até ",
+  gmiError1:
+    "Informações do membro não encontradas, possivelmente removido do grupo",
+  gmiError2:
+    "Informações do membro do grupo não encontradas, você pode ter sido removido do grupo",
+  gmiError3: "Tem certeza de que deseja remover este usuário?",
+  gmiError4:
+    "Remover este membro do grupo impedirá a troca de mensagens entre vocês",
+  gmiError5: "Você não tem permissão para remover este administrador",
+  gmiError6: "Você não tem permissão para remover este membro",
+  gmiError7: "Silenciamento removido",
+  gmiError8:
+    "Você não tem permissão para remover o silenciamento deste administrador",
+  gmiError9: "Você não tem permissão para remover o silenciamento deste membro",
+  gmiError10: "Você não tem permissão para silenciar este administrador",
+  gmiError11: "Você não tem permissão para silenciar este membro",
+  gmiError12: "Silenciamento removido",
+  gmiGroupOwnerNotFound: "Falha ao carregar informações do grupo",
+  smmvTitle: "Duração do silenciamento",
+  smmvMuteTime: "Selecione a duração do silenciamento",
+  smmvMuteTime_10m: "10 minutos",
+  smmvMuteTime_1hour: "1 hora",
+  smmvMuteTime_12hour: "12 horas",
+  smmvMuteTime_1day: "1 dia",
+  smmvMuteTime_30day: "30 dias",
+  smmvMuteTime_7day: "7 dias",
+  egnpTitle: "Editar nome do grupo",
+  egnpSetGroupName: "Por favor, defina o nome do grupo",
+  egnpSetTextDesc: "Por favor, defina entre 1 e 15 caracteres",
+  egnpSetTitleNoPermission:
+    "Você não tem permissão para modificar o nome do grupo",
+  egnpSetFailed: "Falha ao modificar, por favor, tente novamente mais tarde",
+  setGroupNameHint: "Por favor, defina o nome do grupo",
+  givTitle: "Editar nome do grupo",
+  givGroupName: "Nome do grupo",
+  givGroupFace: "Foto do grupo",
+  gmsvTitle: "Gerenciar grupo",
+  gmsvSetManager: "Definir administradores",
+  gmsvToSet: "Ir para configurações",
+  gmsvFindMsg: "Procurar histórico de mensagens",
+  gmsvFindMsgDesc:
+    "Quando ativado, os novos membros poderão ver as mensagens recentes",
+  gmsvMute: "Silenciar todos",
+  gmsvMuteDesc:
+    "Quando ativado, apenas o proprietário do grupo e os administradores podem enviar mensagens",
+  gmsvApply: "Confirmação de entrada no grupo",
+  gmsvApplyDesc:
+    "Quando ativado, a entrada no grupo requer confirmação do proprietário ou administradores",
+  gmsvSetManagerTip:
+    "Apenas o proprietário do grupo pode definir administradores",
+  gmsvSetMuteTipOn: "Silenciamento global ativado",
+  gmsvSetNuteTipOff: "Silenciamento global desativado",
+  gmsvApplyTipOn: "Confirmação de entrada no grupo ativada",
+  gmsvApplyTipOff: "Confirmação de entrada no grupo desativada",
+  gmsvFindGroupErr: "Falha ao obter informações do grupo",
+  gmsvFindMsgOn: "Pesquisa de histórico de mensagens ativada",
+  gmsvFindMsgOff: "Pesquisa de histórico de mensagens desativada",
+  gmsvSetFailed: "Falha ao definir",
+  gsvTitle: "Detalhes do grupo",
+  gsvGroupId: "ID do grupo",
+  gsvGroupMember: "Membros do grupo",
+  gsvGroupMemberValue: "Total de {num} pessoas",
+  gsvGroupNotification: "Aviso do grupo",
+  gsvMyName: "Meu apelido neste grupo",
+  gsvMyFace: "Minha foto neste grupo",
+  gsvGroupManager: "Gerenciamento do grupo",
+  gsvGroupApply: "Confirmação de entrada no grupo",
+  gsvFindMsg: "Procurar histórico de mensagens",
+  gsvSetTop: "Fixar",
+  gsvSetOpt: "Silenciar notificações",
+  gsvDeleteMsg: "Excluir histórico de mensagens",
+  gsvDeleteLocal: "Limpar apenas o histórico de mensagens local",
+  gsvDeleteAllMsg:
+    "Limpar o histórico de mensagens local e de todos os membros",
+  gsvDeleteOtherMsg: 'Limpar os registros de conversa locais e do outro usuário',
+  gsvGroupDelete: "Tem certeza de que deseja dissolver este grupo?",
+  gsvOutGroup: "Tem certeza de que deseja sair deste grupo?",
+  gsvNoNotification: "Nenhum aviso disponível",
+  gsvClearSuccess: "Limpeza concluída",
+  gsvClearFailed: "Falha ao limpar, por favor, tente novamente mais tarde",
+  cvAllPeople: "Todos",
+  cvVideo: "[Vídeo]",
+  cvPicture: "[Imagem]",
+  cvFile: "[Ficheiro]",
+  cvVoice: "[Voz]",
+  cvNotSupportMsg: "Mensagem não suportada",
+  cvSendMsgErrorNoPermission:
+    "Devido às configurações de permissão da outra parte, você não pode enviar mensagens para ela",
+  cvSendMsgPnMute: "Silenciado, incapaz de enviar mensagens",
+  cvCopyMsg: "Copiado para a área de transferência",
+  cvCopyMsgNotSupport: "Mensagem não suportada",
+  cvdeleteLocal: "Excluir localmente",
+  cvdeleteLocalAndServer: "Excluir localmente e no servidor",
+  cvdeleteLocalAndServerUser: "Excluir localmente e em {name}",
+  cvClearMsgTip: "Mensagens da conversa foram limpas",
+  cvGroupCreateSuccess: "Grupo criado com sucesso",
+  cvGroupCreateSuccessTip1:
+    "Parabéns pela criação do grupo. Clique no botão abaixo para convidar amigos para o grupo",
+  cvGroupCreateSuccessGo: "Convidar amigos para o grupo",
+  cvGroupNotification: "Aviso do grupo:",
+  sendMsg: "Enviar mensagem",
+  cvOnlineCount: "{count} pessoas online",
+  cvUserCount: "Total de {count} pessoas",
+  cvNotAtUser:
+    "Ainda não há membros do grupo disponíveis. @ Oh, vai adicionar membros agora",
+  all: "Todos",
+  clCloseConversation: "Ocultar conversa fixada",
+  clOpenConversation: "conversas fixadas",
+  clNoConversation: "Sem conversas recentes",
+  clTitle: "Conversas",
+  clDelete: "Esta conversa será excluída",
+  clDeleteDesc:
+    "Ao excluir esta conversa, o histórico de mensagens local será removido",
+  clDeleteSel: "Você não selecionou nenhuma conversa",
+  clDeleteSel1: "Esta conversa será excluída",
+  clDeleteSel2: "Estas conversas serão excluídas",
+  clDeleteDesc2:
+    "Ao excluir estas conversas, o histórico de mensagens local será removido",
+  homeItem0: "Conversas",
+  homeItem1: "Contatos",
+  homeItem2: "Meu perfil",
+  exitTip: "Pressione novamente para sair",
+  mineSigEmpty: "Este usuário não configurou uma assinatura ainda",
+  uaProtocol: "Termos de Serviço do Usuário",
+  savSearchTip: "Pesquisa rápida de conteúdo da conversa",
+  savMedia: "Imagens/Vídeos",
+  searchEmptyTip: "Nenhuma conversa encontrada",
+  savSearchMsg: "mensagens relacionadas",
+  savConversation: "Conversa",
+  savMsg: "Histórico de conversa",
+  savConversationNotFound: "Conversa não encontrada",
+  savMsgNotFound: "Mensagem não encontrada",
+  samTitle: "Mídia",
+  samTimeFormat: "Mês de yyyy",
+  notSupportType: "Tipo não suportado",
+  media: "Mídia",
+  openUrl: "Abrir link",
+  lkAddGroupUrl: "Link para entrar no grupo",
+  lkAddOtherUrl: "Link externo, pode ser aberto no navegador padrão",
+  lkUnknowUrl: "Link desconhecido",
+  openUrlFailed1: "Falha ao abrir o link",
+  yszcTitle: "Política de Privacidade",
+  slsmTitle: "Declaração jurídica",
+
+  ctmRemove: "Remover",
+  ctmOkRemove: "Confirmar remoção",
+  ctmTopMsgCount: "{count} mensagens",
+  ctmEmptyText: "Nenhuma mensagem fixada",
+  recordTimeShort: "Tempo de gravação muito curto",
+  sendCodeExceErr:
+    "Falha ao enviar o código de verificação, tente novamente mais tarde",
+  bindEmailExecErr: "Falha ao vincular o e-mail, tente novamente mais tarde",
+  ctmSuccess: "Fixação bem-sucedida",
+  ctmRemoveSuccess: "Remoção da mensagem fixada com sucesso",
+  ctmMsgNotFound: "Esta mensagem não existe",
+  cvFirstTip:
+    "As mensagens e chamadas nesta conversa estão protegidas com criptografia de ponta a ponta",
+  clearGroupNotification: "A notificação do grupo foi limpa",
+  publicGroupNotification: " Publicar notificação",
+  dialog_tip1: " Dica",
+  deleteGroups:
+    " Após a exclusão do grupo, ele não poderá ser recuperado. Tem certeza de que deseja excluir este grupo?",
+  dialog_tip_token_invaild: " A sessão expirou, por favor faça login novamente",
+  notify_new_msg_title: "Você recebeu uma nova mensagem",
+  notify_new_msg_msg: "Conteúdo da mensagem: .....",
+  dataError1: "Erro de dados",
+  groupApply: " pedidos de entrada no grupo",
+  muteLate: "Desativar mudo após",
+  groupMuteing: "Mudo de grupo ativado",
+  modifyGroupName: "Modificar nome do grupo",
+  groupMemberNotFound: "Membro do grupo não encontrado",
+  deleteGround: "Excluir grupo",
+  bindEmailTipTitle: "Vincular E-mail",
+  bindEmailTipContent:
+    "Por motivos de segurança da sua conta, por favor vincule o seu e-mail",
+  bindEmailTipOk: "Vincular agora",
+  bindEmailTipCancle: "Não vincular agora",
+  alreadyBeOwner:
+    "Você selecionou o dono do grupo, que já possui os mais altos privilégios de gerenciamento",
+  managerApplying: "Aplicação de gerente em andamento",
+  quote: "Citar",
+  request_exception: "Exceção na solicitação",
+  clearMsg: "Limpar mensagens",
+  pressToSay: "Pressione para falar",
+  slideToCancelSend: "Deslize para cancelar o envio",
+  releaseToEnd: "Solte para finalizar",
+  releaseToCancelSend: "Solte o dedo para cancelar o envio",
+  invalidVoiceMessage: "Mensagem de voz inválida",
+  hit: "Atingir",
+  downloadingCache: "Baixando cache...",
+  unableToRecognize: "Incapaz de reconhecer",
+  scanResult: "Resultado da digitalização",
+  register_fail:
+    "Falha no registro. Verifique sua conexão de rede e tente novamente",
+  skip: "Pular",
+  toUse: "Usar agora",
+  sideToSide: "Fim a fim",
+  design: "Design",
+  guide1:
+    "Envie mensagens, transmita-as criptografadas e leia apenas para você",
+  guide2: "Comunique-se de forma mais livre, seguindo o seu próprio estilo",
+  guide3: "Construa uma plataforma de comunicação segura em torno de você",
+  inputGroupAc:
+    "Por favor, insira o anúncio do grupo (limite de caracteres 0-500)",
+  clickToEnjoy:
+    "Clique no link para salvar ou copie este trecho e abra o aplicativo para se juntar ao grupo.",
+  createOK: "Criado com sucesso",
+  noPravcy: "Você não tem permissão para criar grupos",
+  groupNumberToTop: "Limite máximo de grupos alcançado",
+  createFail: "Falha ao criar. Por favor, tente novamente mais tarde",
+  create: "Criar",
+  uploadGroupAvatar: "Enviar avatar do grupo",
+  useNewPassword:
+    "Senha alterada com sucesso, retornando para a página de login",
+  error_14: "Servidor com erro (14)",
+  error_500: "Servidor com erro (500)",
+  error_1000: "Token de assinatura do usuário inválido",
+  error_1001: "Erro nos parâmetros",
+  error_1002: "A versão atual já é a mais recente",
+  error_6001: "Este nome de usuário já está registrado",
+  error_6003: "A senha deve conter de 6 a 15 caracteres alfanuméricos",
+  error_6004: "Erro na verificação do nome de usuário",
+  error_6005: "Senha incorreta, por favor, tente novamente",
+  error_6006: "Limite de tentativas de senha excedido hoje",
+  error_6007: "Usuário não existe",
+  error_6008: "Senha antiga incorreta, por favor, insira novamente",
+  error_6009:
+    "A senha antiga é igual à nova senha, por favor, insira novamente",
+  error_6010: "Obtenção frequente de código de verificação",
+  error_6011: "Código de verificação incorreto, por favor, tente novamente",
+  error_6012: "Código de verificação expirado",
+  error_6013: "Muitas falhas na verificação de código",
+  error_6014: "Código de verificação já utilizado",
+  error_6015: "O email não existe",
+  error_6016:
+    "O email já está vinculado a outra pessoa, por favor, insira novamente",
+  error_6017: "Código de verificação não existe",
+  error_6018: "Esta conta foi banida",
+  error_6019: "Número de telefone já vinculado a outra pessoa",
+  error_6020: "Endereço de email já vinculado a outra pessoa",
+  error_6021: "Endereço de email incorreto, por favor, insira novamente",
+  error_6022: "Número de telefone incorreto, por favor, insira novamente",
+  error_6023:
+    "Esta conta foi banida e não suporta a recuperação de senha temporariamente",
+  error_6024:
+    "Esta conta não está vinculada a um endereço de email e não suporta a recuperação de senha temporariamente",
+  error_6025:
+    "Esta conta não está vinculada a um número de telefone e não suporta a recuperação de senha temporariamente",
+  error_6026:
+    "Número de telefone já vinculado a outra pessoa, por favor, insira novamente",
+  error_6030: "O servidor não está configurado para enviar emails",
+  error_6031: "Por favor, insira um número de telefone correto",
+  error_6032: "Por favor, insira um endereço de email correto",
+  error_100002: "Limite máximo de mensagens fixadas atingido",
+  error_100003: "Esta mensagem já está fixada",
+  error_api: "Erro na solicitação",
+  error_http: "Erro na solicitação de rede",
+  error_http_11: "Tempo limite de conexão de rede excedido",
+  error_http_12: "Tempo limite de conexão de rede excedido",
+  error_http_13: "Tempo limite de conexão de rede excedido",
+  error_http_14: "Erro no certificado de rede",
+  error_http_15: "Erro nos dados da solicitação",
+  error_http_16: "Solicitação cancelada",
+  error_http_17: "Tempo limite de conexão de rede excedido",
+  error_http_18: "Erro interno na solicitação de rede",
+  error_sdk_err_1002: "Operação sem permissão",
+  error_sdk_err: "Operação falhou",
+  search_hine_1: "Por favor, insira o conteúdo da pesquisa",
+  str_no_data: "Sem dados disponíveis",
+  str_no_net: "Sem conexão de rede",
+  download_not_support_type: "Formato não suportado",
+  download_save_at: "Arquivo salvo em: ",
+  download_not_url: "Link de download não reconhecido",
+  download_file_success: "Salvo com sucesso, você pode encontrar no álbum",
+  download_failed_file: "Falha ao salvar o arquivo",
+  download_failed: "Falha no download",
+  loading_failed_retry: "Falha ao carregar, clique para tentar novamente",
+  loading_ing: "Carregando...",
+  str_online_later_minute: "minutos atrás",
+  str_online_later_hour: "horas atrás",
+  str_online_later_llg: "Muito tempo sem conexão",
+  str_online_later_yesterday: "Online ontem",
+  str_yesterday: "ontem",
+  str_online_later_near: "Recentemente online",
+  str_minute: "minutos",
+  clean_notice: "Limpar avisos",
+  clean_notice_1: "Tem certeza de que deseja limpar os avisos do grupo?",
+  publish_notice: "Publicar aviso",
+  publish_notice_remind:
+    "Publicar este aviso irá notificar todos os membros do grupo",
+  quit_edit: "Sair da edição",
+  quit_the_edit: "Sair desta edição?",
+  continue_edit: "Continuar editando",
+  publish_success: "Publicado com sucesso",
+  face_success: "Desbloqueio facial ativado com sucesso",
+  finger_success: "Desbloqueio por impressão digital ativado com sucesso",
+  groupDismissed: "Este grupo foi dissolvido",
+  hasOut: "Expirado",
+  otherLoginStyle: "Outras formas de login",
+  otherRegisterStyle: "Outras formas de registro",
+  hasAccount: "Já tem uma conta? Faça login",
+  mobileCode: "Código de verificação do celular",
+  codeSendTo: "Código enviado para",
+  inputNumber: "Por favor, insira o número de telefone",
+  bindPhone: "Vincular número de telefone",
+  bindPhoneSuccess: "Número de telefone vinculado com sucesso",
+  bindPhoneTipChange:
+    "Se o seu número de telefone mudou, por favor, atualize-o imediatamente",
+  please_input_email: "Por favor, insira o endereço de email",
+  findPassByEmailTip: "Recuperar senha por email",
+  findPassByPhoneTip: "Recuperar senha por telefone",
+  resetPass: "Redefinir senha",
+  current_bind_phone: "Número de telefone vinculado atualmente:",
+  reget: "Reenviar",
+  getVerifyCode: "Obter código de verificação",
+  alreadyRegister: "Este número de telefone já está registrado",
+  alreadyRegister2: "Este endereço de email já está registrado",
+  netErrorRetry: "Houve um erro de rede, clique para recarregar a página~",
+  newPhoneNumber: "Novo número de telefone",
+  addFriendText1: "Adicionar como amigo",
+  qrSaveFail: "Falha ao salvar o código QR",
+  qrSavePhoto: "O código QR foi salvo na galeria",
+  userId: "ID do usuário:",
+  addMeToFriend: "Adicionar-me como amigo",
+  validTime: "Válido até",
+  clickRefresh: "Clique para atualizar",
+  qrUseCount: "Este código QR é válido por {count} usos",
+  share: "Compartilhar",
+  savePhoto: "Salvar imagem",
+  iAm: "Eu sou",
+  addFriendSuccessful: "Amigo adicionado com sucesso",
+  addFriendFaceToFace: "Adicionar amigo pessoalmente",
+  faceToFace: "Adicionar amigo pessoalmente",
+  inputSameKey: "Aqui estão os amigos que já digitaram o mesmo número",
+  sameKeyAddFriend: "Adicionar amigo que digitou o mesmo número",
+  self: "Próprio(a)",
+  age: "anos",
+  confirmAddFriend: "Confirmar adição como amigo",
+  inputUserId: "Por favor, insira o ID do usuário",
+  myQr: "Meu código QR",
+  back: "Voltar",
+  canNotAddSelf: "Você não pode adicionar a si mesmo aos contatos",
+  notExsit: "Este usuário não existe",
+  searchUserId: "Pesquisar ID do usuário:",
+  remarkInfo: "Por favor, forneça informações de verificação na observação",
+  applyRemark: "Observação",
+  last4Number:
+    "Por favor, insira os últimos 4 dígitos do número de telefone de login do outro usuário",
+  checkLast4Number: "Verificar os últimos 4 dígitos do número de telefone",
+  addFriendApply: "Pedido de adição como amigo",
+  friendNumberCatchTopLimit: "Você atingiu o limite máximo de amigos",
+  friendNumberCatchTopLimitCurrentDay:
+    "Você atingiu o limite máximo de adições de amigos hoje",
+  codeInvalid: "Chave inválida ou expirada, por favor, inicie novamente",
+  shareFail: "Falha ao compartilhar",
+  error_1003: "Por favor, tente novamente mais tarde",
+  error_6033: "Chave inválida ou expirada, por favor, inicie novamente",
+  error_6034: "Limite máximo de amigos atingido",
+  error_6035: "Limite máximo de adições de amigos hoje atingido",
+  error_6036: "O número de telefone deste usuário está vazio",
+  error_6037: "Falha na verificação dos últimos dígitos do número de telefone",
+  error_6040: "Grupo já existe",
+  error_6050: "O código QR expirou",
+  error_6051: "Limite máximo de uso do código QR atingido hoje",
+  error_6052: "Limite máximo de uso do código QR atingido",
+  error_6053: "Limite máximo de uso da função de scanner hoje atingido",
+  error_6054: "O usuário já adicionou você como amigo",
+  error_6055: "Chave inválida ou expirada, por favor, inicie novamente",
+  error_6066: "Saldo insuficiente na conta",
+  error_6067: "Todos os envelopes vermelhos foram distribuídos",
+  error_6068: "O envelope vermelho expirou",
+  error_6069: "Não é possível receber o envelope vermelho exclusivo",
+  error_6070:
+    "Você já recebeu o envelope vermelho, não é possível recebê-lo novamente",
+  deletedByFriendHint: "Você ainda não é amigo dele(a)",
+  deletedByFriendHint1: "Você ainda não é amigo dele(a),",
+  deletedByFriendHint2: "Adicionar como amigo",
+  deletedByFriendHint3: "Continuar conversando",
+  gotoAddFriend: "Adicionar como amigo",
+  addFriendGotoGroup: "Convidar amigo para grupo",
+  notContacts: "Sem contatos",
+  notContactsFound: "Não foi encontrado nenhum amigo relacionado com {name}",
+  remarkStr: "Observação",
+  remarkStrHint: "Por favor, insira uma observação, de 0 a 50 caracteres",
+  deleteConfirm: "Tem certeza de que deseja excluir este amigo?",
+  deleteFriend: "Excluir amigo",
+  searchContact: "Pesquisar contato",
+  notGroupTip: "Você ainda não participa de nenhum grupo",
+  notAddFriend: "Você ainda não adicionou novos amigos",
+  friendApplyAdd: "Pedido de amigo",
+  addSuccess: "Adicionado com sucesso",
+  hasSelectFriend: "Amigos selecionados",
+  myBalance: "Meu saldo",
+  revokeMsgTip: "Revogar mensagem",
+  error_10050: "Operação falhou (registro não encontrado)",
+  set_manager_tip_1:
+    "Você selecionou o dono do grupo, que já tem os mais altos privilégios de gerenciamento",
+  envelope: "Envelope vermelho",
+  uidStr: "ID do usuário",
+  showGetDetail: "Ver detalhes de recebimento",
+  waitOtherEnter: "Aguardando a entrada do outro usuário",
+  isFriend2SExit: "Tornou-se amigo, saindo automaticamente em 2 segundos",
+  sendRedPacket: "Enviar envelope vermelho",
+  redPacketNumber: "Número de envelopes vermelhos",
+  ge: "unidades",
+  total: "Total",
+  eachNumber: "Quantidade por envelope",
+  selectUser: "Selecionar usuário",
+  number: "Número",
+  redPacketType: "Tipo de envelope vermelho",
+  checkVerity: "Verificação de segurança",
+  balance: "Saldo da conta",
+  sendTo: "O código de verificação por SMS foi enviado para",
+  pin: "Envelope vermelho da sorte",
+  putong: "Envelope vermelho normal",
+  zhuanshu: "Envelope vermelho exclusivo",
+  dajidali: "Feliz Ano Novo! Boa sorte e sucesso!",
+  redPacketInfo: "Detalhes do envelope vermelho",
+  best: "Melhor sorte",
+  saveToAccount: "Salvo na conta",
+  minuteOut: "Esgotado em minutos",
+  hourOut: "Esgotado em horas",
+  showDetail: "Ver detalhes",
+  maxMemberNumber:
+    "O número de envelopes vermelhos não pode exceder o número atual de membros do grupo",
+  sended: "Enviado",
+  get: "Recebido",
+  waiting: "Aguardando o usuário receber",
+  gong: "envelopes vermelhos no total",
+  envelope_get_over: "dos envelopes vermelhos foram recebidos",
+  envelope_get: "recebeu",
+  de: "de",
+  envelope_get_message: "Mensagem de recebimento de envelope vermelho",
+  bind_phone_please:
+    "Por favor, vincule seu número de telefone para garantir a segurança da sua conta",
+  delay_bind: "Vincular mais tarde",
+  send_envelope_x: "Envelopes vermelhos enviados",
+  send_envelope_back_all:
+    "Este envelope vermelho não foi recebido após 24 horas\nFoi reembolsado",
+  envelope_x_can_get: "Apenas {name} pode ser recebido",
+  envelope_get_completed: "Você está atrasado, o envelope vermelho acabou",
+  send_envelope_back_some:
+    "Este envelope vermelho não foi completamente recebido após 24 horas\nParte foi reembolsada",
+  envelope_x_personal: "Envelope vermelho exclusivo para %s",
+  envelope_normal: "Envelope vermelho normal",
+  login_out_of_date: "A sessão expirou, faça login novamente",
+  get_envelope_completed: "Todos os envelopes vermelhos foram recebidos",
+  x_is_personal: "Exclusivo",
+  error_6072: "O valor máximo por envelope vermelho foi atingido",
+  error_6073: "O número de envelopes vermelhos não pode ser inferior a 0.01",
+  error_6074: "A função de envelope vermelho foi desativada",
+  distroyAccount: "Encerrar conta",
+  inComing: "Entrada",
+  outGoing: "Saída",
+  balance_order_detail: "Detalhes do saldo",
+  type: "Tipo",
+  payType: "Método de pagamento",
+  orderNo: "Número do pedido",
+  time: "Tempo",
+  itemDataNotSupport: "Esta versão atualmente não é suportada",
+  manager_change_account: "Ajuste de conta pelo administrador",
+  groupEnvelope: "Envelope vermelho de grupo",
+  accountPay: "Pagamento com saldo",
+  paySuccess: "Pagamento bem-sucedido",
+  groupEnvelopePersonal: "Envelope vermelho de grupo - Exclusivo",
+  groupEnvelopeNormal: "Envelope vermelho de grupo - Normal",
+  changeAccount: "Ajuste de conta",
+  groupEnvelopeRandom: "Envelope vermelho de grupo - Sorteio",
+  groupEnvelopeAllBack: "Envelope vermelho de grupo - Reembolso total",
+  groupEnvelopeSomeBack: "Envelope vermelho de grupo - Reembolso parcial",
+  distroyTips:
+    "Para garantir a segurança da sua conta,\nvamos realizar as seguintes verificações antes de encerrar sua conta",
+  safeStatus: "Conta em estado seguro",
+  safeTips:
+    "Certifique-se de que sua conta não está sujeita a atividades sensíveis, como mudança de senha, troca de número de telefone/email, ou risco de roubo de conta.",
+  strikeBalance: "Liquidação de ativos da conta",
+  strikeTips:
+    "Após encerrar sua conta, todos os dados do saldo de envelopes vermelhos serão excluídos e não podem ser recuperados.",
+  dataDelete: "Exclusão de dados da conta",
+  deleteTips:
+    "Após encerrar sua conta, todos os dados associados à sua conta serão excluídos permanentemente, incluindo histórico de conversas, participação em grupos e relacionamentos de amigos.",
+  applyDistroy: "Solicitar encerramento da conta",
+  distroyConform: "Tem certeza de que deseja encerrar sua conta?",
+  distroyConformTips:
+    "Você será desconectado após o encerramento. Por favor, proceda com cuidado!",
+  distroy: "Confirmar encerramento",
+  submitSuccess: "Enviado com sucesso",
+  submitted: "Sua solicitação de encerramento foi enviada!",
+  helpWord:
+    "A plataforma levará até {day} dias úteis para processar sua solicitação e excluir todos os seus dados. Se precisar de ajuda, entre em contato conosco através do nosso site oficial.",
+  know: "Entendi",
+  revoke: "Revogar solicitação",
+  revokeSuccess: "Revogação bem-sucedida",
+  recover: "Tem certeza de que deseja revogar a solicitação?",
+  toNormal: "Após a revogação, o status da conta voltará ao normal",
+  beRecover: "Confirmar recuperação",
+  recoverSuccess: "Recuperação bem-sucedida",
+  redPackageCountTip:
+    "O total de envelopes vermelhos não pode ser inferior a 0.01",
+  closeAccount: "Encerrar conta",
+  recoverAccount: "Recuperar conta",
+  recoverAccountTipTitle: "Tem certeza de que deseja recuperar sua conta?",
+  recoverAccountTipDesc:
+    "Após a recuperação, o status da conta voltará ao normal",
+  recoverAccountTipOk: "Confirmar recuperação",
+  closingAccount: "Sua conta está em processo de encerramento",
+  closingAccountEndTime: ", previsto para ser concluído em {num} dias úteis",
+  error_6079: "Você não está mais no grupo, não é possível receber",
+  error_6075: "Solicitação duplicada",
+  error_6076: "Nenhum registro de solicitação de encerramento encontrado",
+  error_6077: "Conta em processo de encerramento",
+  error_6078: "Usuário não existe ou já foi encerrado, por favor, verifique",
+  error_video_pre_err: "Erro ao gerar arquivo, falha ao carregar dados",
+  err_upload_file: "Falha ao carregar, por favor, tente novamente mais tarde",
+  err_msg_send_failed:
+    "Falha ao enviar mensagem, por favor, tente novamente mais tarde",
+  error_red_package_tip1: "Envelope vermelho expirado",
+  net_error_no_net:
+    "Sem conexão de rede, por favor, verifique suas configurações de rede",
+  error_6081: "Falha ao enviar, por favor, tente novamente mais tarde",
+  atTip: "Alguém mencionou você",
+  groupChatError: "Falha ao carregar o conteúdo, clique para tentar novamente",
+  legalNotice: "Aviso legal",
+  timeoutLock: "Bloqueio por tempo esgotado",
+  reTry: "Tentar novamente",
+  sysNotify: "Notificação do sistema",
+  exit_group_tip: "Saiu do grupo",
+  group_mute_ing: "Este grupo está silenciado",
+  w_edit_group_notification: "Editou o aviso do grupo",
+  removeGroupNotice: "Remover aviso do grupo",
+  messageNotify: "Notificação de mensagem",
+  groupEnterLimit:
+    "O número máximo de amigos convidados para o grupo foi atingido, por favor, verifique",
+  tipAllGroupMember: "Notificar todos os membros do grupo",
+  openPhotoPermission: "Ativar permissão de acesso ao Álbum",
+  gotoSettings: "Ir para configurações",
+  notSet: "Agora não",
+  openCameraPermission: "Ativar permissão de uso da Câmera",
+  openMicrophonePermission: "Ativar permissão de uso do Microfone",
+  selectMaxCountTip: "Você pode selecionar no máximo %s pessoas de cada vez",
+  getVideoImageFailed: "Falha ao obter a imagem de pré-visualização do vídeo",
+  error_6086: "O apelido de usuário já está em uso",
+  error_6085: "Formato de apelido incorreto",
+  error_6087: "Número de telefone não existe",
+  error_6088: "Endereço de e-mail não existe",
+  unRecard: "Não foi possível gravar:",
+  hasCreateGroup: "Criou uma conversa de grupo",
+  joinGroupForLink: "Junta-se a conversa em grupo através do link",
+  be: "cobertura",
+  moveoutGroup: "Eliminar da conversa de grupo",
+  groupOwnerChangeTo: "O líder do grupo foi mudado para",
+  changeGroupNameTo: "Mudar o nome do grupo para",
+  disbandedGroup: "Dissolved group chat",
+  bannedFromSpeaking: "Prohibição",
+  gagWasLifted: "A proibição foi levantada",
+  initiatedGroupGag: "A proibição de grupos foi ativada",
+  shutDownGroupGag: "Proíbição de grupos fechada",
+  target: "O outro partido",
+  groupSizeUpperLimit: "O número máximo de membros do grupo foi alcançado",
+  topUpperLimit: "O topo alcançou o limite superior",
+  topMessageRepeate: "A mensagem superior foi duplicada",
+  userHasReadMessage: "O usuário leu esta mensagem",
+  placeholder: {
+    allMuted: "O líder ou administrador do grupo ativou todas as proibições",
+    groupDisbanded: "O grupo foi disperso",
+    groupBanned: "Este grupo foi proibido",
+    singleBanned: "Você foi proibido de falar",
+    search: "pesquisa",
+    pleaseInput: "Por favor, entre",
+    sec: "segundo",
+    groupNoticePlaceholder: "Por favor, introduza o anúncio do grupo..",
+    inputPassword: "Por favor, introduz a senha",
+    confirmPassword: "Por favor, confirme a entrada da senha",
+    inputPhoneNumber: "Por favor, introduza seu número de telefone",
+    select: "Please select",
+    userOrGroupIDInput: "Por favor, entre{type}",
+    writeMessage: "Informação de entrada...",
+    inputGroupName: "Please enter the group name",
+    typingMessage: "Escreva uma mensagem aqui",
+    inputName: "Please enter your nickname"
+  },
+  withoutQualification:
+    "Este usuário não atende aos requisitos para adicionar como amigo",
+  error_6084: "Falha na verificação do e-mail",
+  emailCheck: "Verificação por e-mail",
+  phoneCheck: "Verificação por telefone",
+  checkEmail: "Verificar endereço de e-mail",
+  inputOtherEmail:
+    "Por favor, insira o endereço de e-mail usado pelo outro usuário para fazer login",
+  groupMask: "Máscara de grupo",
+  groupMaskDescription: "Configure o apelido e a foto de perfil deste grupo",
+
+  pleaseBind:
+    "Para garantir a segurança da sua conta e evitar restrições na função de adicionar amigos, por favor, faça a vinculação",
+  orStr: "ou",
+  andStr: "e",
+  confirmExit: "Confirmar saída",
+  pleaseBindTip1:
+    "Para garantir a segurança da sua conta, por favor, faça a vinculação",
+  skin_item_user_name: "张娜娜",
+  skin_item_msg1: "Olá, recebi sua resposta rápida",
+  skin_item_msg2: "Ok, entendi",
+  appearance: "Aparência",
+  bubbleBgColor: "Cor de fundo do balão de conversa",
+  chatBackground: "Fundo da conversa",
+  moreSettings: "Mais configurações",
+  highPerformanceModel: "Modo Limpo",
+  highPerformanceModelDesc: "Ative para não exibir efeitos de aparência",
+  skinPreview: "Pré-visualização da aparência",
+  defaultText: "Padrão",
+  fontSizePreview: "Pré-visualização do tamanho da fonte, arraste o controle deslizante abaixo para ajustar o tamanho da fonte. Após a configuração, todos os textos das páginas terão seu tamanho alterado.",
+  changedText: "Ok, já foi alterado",
+  imageAlpha: "Transparência da imagem",
+  min: "Mínimo",
+  max: "Máximo",
+  backgroundColor: "Cor de fundo",
+  changeSaveTip: "Você modificou as configurações, deseja salvar e voltar?",
+  saveAndBack: "Salvar e voltar",
+  changeAvatar: "Alterar avatar",
+  appFontSize: "Tamanho da fonte do aplicativo",
+  appFontSizeTip:
+    "Tamanho da fonte de pré-visualização, arraste o controle deslizante abaixo para definir o tamanho da fonte. Depois de definido, o tamanho da fonte de todos os textos dentro do aplicativo será alterado.",
+  maskDesc:
+    "Quando ativado, os membros do grupo poderão definir o apelido e a foto de perfil deste grupo",
+  groupMaskOpenTip: " %s abriu %s a máscara de grupo",
+  groupMaskOpenTipNew: " abriu a máscara de grupo",
+  open: "Abrir",
+  close: "Fechar",
+  groupMaskOpenMsgErrorTip: "Dica de alternância de função de máscara de grupo",
+  maskOpen: "Máscara de grupo aberta",
+  maskClose: "Máscara de grupo fechada",
+
+  transmit: "Encaminhar",
+  multiSelect: "Seleção múltipla",
+  singleShareMsg: "Encaminhar individualmente",
+  groupShareMsg: "Encaminhar em grupo",
+  notGroupFound: "Nenhum grupo encontrado relacionado a {name}",
+  rememberPassword: "Lembrar senha",
+  mobileLogin: "Login pelo celular",
+  emailLogin: "Login por e-mail",
+  recentConversation: "Conversas recentes",
+  selectContact: "Selecionar contato",
+  selectGroup: "Selecionar grupo",
+  noGroup: "Nenhum grupo",
+  notSelectMessage: "Você ainda não selecionou mensagens",
+  hiddenMsg: "Ocultar mensagem",
+  hiddenMsgTip: "Deseja ocultar a fonte da mensagem?",
+  yes: "Sim",
+  no: "Não",
+  mergeMessageList: "Lista de mensagens para encaminhamento",
+  singleMlCount: "Encaminhamento individual de %s mensagens",
+  notFoundUser: "Usuário não encontrado",
+  notShouldFoundUser: "Tidak dapat menemukan pengguna tersebut",
+  notFoundGroup: "Grupo não encontrado",
+  selectAt: "Selecionar pessoa para {'@'}",
+  welcomeToQDDChat: "Bem-vindo ao QDDChat",
+  choiceYourAvatar: "Escolha seu avatar",
+  hasSelect: "Selecionado",
+  groupChat: "Chat em grupo",
+  groupMember1: "Membros do grupo",
+  groupSendMsg: "Enviar mensagem em grupo",
+  msgNotSupportTransmit: "Esta mensagem não pode ser encaminhada",
+  bindGoogle: "Vincular ao Google",
+  bindFacebook: "Vincular ao Facebook",
+  unbind: "Desvincular",
+  accountSettings: "Configurações da conta",
+  thirdPartyAccountBinding: "Vinculação de conta de terceiros",
+  otherSettings: "Outras configurações",
+  groupChatLoadFailed: "Falha ao carregar informações do chat em grupo",
+  addGroupSend: "Iniciar envio em grupo",
+  groupSendNoData: "Não há registro de envio em grupo",
+  removeBinding: "Remover vínculo",
+  unBindToastPart1: "Após remover o vínculo, você não poderá mais usar",
+  unBindToastPart2: "para fazer login. Deseja continuar?",
+  noOpPermission: "Não há permissão para operar",
+  bindingPhoneOrEmail:
+    "Por favor, vincule seu número de telefone ou e-mail antes de remover o vínculo para garantir a segurança dos seus dados da conta.",
+  unbindingSuccess: "Desvinculação bem-sucedida",
+  unbindingFair: "Falha na desvinculação",
+  showAll: "Mostrar tudo",
+  allCount: "Total de {num}",
+  bindingPhoneOrEmailSetPassword:
+    "Por favor, vincule seu número de telefone ou e-mail antes de definir a senha para garantir a segurança dos seus dados da conta.",
+  recoverSuccessLoginAgain:
+    "Recuperação bem-sucedida. Por favor, faça login novamente.",
+  createGroupSend: "Criar envio em grupo",
+  groupSend: "Envio em grupo",
+  notSelect: "Você ainda não selecionou",
+  confirmDeleteTitle: "Confirmar exclusão do envio em grupo selecionado?",
+  totalGe: "Total de %s",
+  sendTotalGe: "Enviar para ({num})",
+  uploadFailed: "Falha no upload",
+  selectMax: "Número máximo de seleção atingido",
+  newFriendApply: "Você tem novos amigos, clique para ver",
+  notSupportLoginStyle:
+    "Método de login não suportado no momento, por favor, use outro método para fazer login",
+  error_6091: "Número de seleção excede o limite",
+  error_6092: "ID da mensagem já existe",
+  pay_password: "Senha de pagamento",
+  pleaseEnter: "Por favor, insira",
+  loadingPage: "Carregando página",
+  payTip:
+    "Você ainda não definiu sua senha de pagamento, por favor, conclua a configuração antes de prosseguir.",
+  deleteRedPackageErrTip: "Mensagem de pacote vermelho não pode ser revogada",
+  applyIconTip:
+    "Solicitação enviada, será possível alterar o avatar após a aprovação",
+  applyIconProgress: "Ver progresso da solicitação",
+  applyRecord: "Registro de solicitação",
+  repealWithdrawApply:
+    "Tem certeza de que deseja cancelar a solicitação de retirada?",
+  withdrawNotes: "Histórico de retirada",
+  inReview: "Em revisão",
+  passTheAudit: "Aprovado",
+  rejectedPayment: "Rejeitado",
+  revoked: "Revogado",
+  undone: "Desfeito",
+  withdrawalQuantity: "Quantidade de retirada",
+  withdrawal: "Retirada",
+  withdrawalBack: "Retorno de retirada",
+  update_tip1: "Se não conseguir atualizar",
+  update_tip2: "pode baixar no site oficial",
+  update_ing: "Atualizando",
+  update_install: "Instalar agora",
+  installFailed: "Não instalado, por favor, tente novamente mais tarde",
+  installNotFoundFile:
+    "Arquivo de instalação não encontrado, por favor, tente novamente mais tarde",
+  error_6093: "Método de login não suportado",
+  error_6094: "Limite máximo de avatares alcançado",
+  deleteIcon: "Deseja excluir este avatar?",
+  balanceWithdraw: "Retirada de saldo",
+  canBalanceWithdraw: "Saldo disponível para retirada",
+  inputPayPassword: "Digite a senha de pagamento",
+  withdrawalSuccess: "Retirada bem-sucedida",
+  personIcon: "Avatar pessoal",
+  groupIcon: "Avatar de grupo",
+  error_6096:
+    "Por favor, não defina uma senha de pagamento com números repetidos ou consecutivos",
+  forgetPayPassword: "Esqueci a senha de pagamento",
+  downloadFailedTip: "Falha ao baixar, por favor, tente novamente mais tarde",
+  error_6097: "Saldo insuficiente",
+  passed: "Aprovado",
+  headRejected: "Rejeitado",
+  notSet2: "Não definido",
+  readDeleteTime: "Tempo de Expiração da Mensagem",
+  readDeleteTimeTitle: "Tempo de Expiração",
+  error_6090: "Conta Já Vinculada",
+  retracted_h5: "Retirou",
+  message_h5: "mensagem de",
+  inputRemark: "Por favor, insira sua observação",
+  authFailed: "Falha na autorização",
+  userNullError: " Esta conta de usuário é anormal",
+  community: "Comunidade",
+  join:
+    "Ingresso no grupo de bate-papo, explore mais atividades da comunidade～",
+  posteviews: "Ainda não há atividades publicadas～",
+  views: "vezes assistidas",
+  ended: "A atividade já terminou",
+  configError: "Erro de configuração, não é possível abrir temporariamente",
+  burnMsgOpen: "{name} definir mensagem lida {time} após queimar",
+  burnMsgClose:
+    "{name} desligou leitura e queima, mensagens não se queimam mais automaticamente",
+  burnMsgNotify: "Notificação de leitura e queima",
+  homeItem3: "Comunidade",
+  messageTimeOut: "Mensagem expirada",
+  burnContentTip:
+    "A mensagem está sendo queimada, deseja sair e queimar com um clique?",
+  cancelLater: "Vou verificar mais tarde",
+  burnConfirm: "Queimar imediatamente",
+  setNickNameTimes:
+    ", o apelido só pode ser modificado uma vez dentro de %s dias",
+  voiceSendErrTip1: "Suporte para enviar voz apenas de %s a %s segundos",
+  textSendErrTip1: "Máximo de entrada de %s caracteres",
+  pictureSendErrTip1: "Suporte para enviar imagens apenas de %s a %sM",
+  videoSendErrTip1: "Suporte para enviar vídeos apenas de %s a %sM",
+  your: "Seu",
+  joinCommunity:
+    "Ingresso no grupo de bate-papo, explore mais atividades da comunidade～",
+  noActivity: "Ainda não há atividades publicadas～",
+  views: "vezes assistidas",
+  ended: "A atividade já terminou",
+  errorLink: "Não encontrado link",
+  set_payment_password: "Por favor, defina a senha de pagamento de 6 dígitos",
+  unset_payment_password:
+    "Por favor, não defina uma senha de pagamento repetida ou sequencial",
+  Confirm_Payment_Password: "Confirmar Senha de Pagamento",
+  Please_confirm_payment_password:
+    "Por favor, digite novamente para confirmar a senha de pagamento",
+  error_6100:
+    "Desculpe, você só pode modificar o seu apelido pessoal uma vez a cada {day} dias",
+  viewDetailed: "Ver informações detalhadas dos membros do grupo",
+  inviter: "Convidador",
+  lastLoginTime: "Último horário de login",
+  DeleteThisUsersgroup:
+    "Excluir as mensagens do grupo enviadas por este usuário neste grupo",
+  AddGroupMembers:
+    "Adicionar membros ao grupo sem consentimento de verificação",
+  error_6103: "Este usuário é um membro regular e não tem permissões",
+  error_6104: "A pessoa adicionada não está no grupo",
+  error_6108: "Conta anormal",
+  group_remark: "Observação do Grupo",
+  input_group_remark: "Por favor, insira o conteúdo da observação",
+  await_accepting: "Nova solicitação de autorização de dispositivo enviada",
+  apply_tips: "Este dispositivo não é confiável ou não passou na análise. Deseja enviar informações do dispositivo para solicitar autorização?",
+  apply_send: "Enviar solicitação",
+  apply_ttl: "Autorização de Login do Dispositivo",
+  group_limit500: "Limite de 500 pessoas por grupo",
+  select_group: "Selecionar grupo de amigos",
+  cantfind: "Não foi possível encontrar contatos relacionados a {name}",
+  error_6109: "O número de amigos do usuário atingiu o limite",
+  error_6106: "Aguarde a aprovação do dispositivo antes de fazer login",
+  selectGroups: 'Selecionar Grupos',
+  group_member_info: "Informações do Membro do Grupo",
+  join_time: "Hora de Entrada",
+  inviter_user: "Convidado por",
+  last_login_time: "Último horário de login",
+  sync_group_avatar: 'Deseja modificar o avatar do grupo ao mesmo tempo?',
+  invite_fail: 'a conta de {usernames} está com problemas!',
+  enterAndCtrl:'Enter para enviar / Enter+Ctrl para nova linha',
+  enterAndCtrlIOS:'Enter para enviar / Enter+control para nova linha',
+  scanLogin: 'Login com código QR',
+  formLogin: 'Login com senha',
+  scanText: 'Login usando o aplicativo Qudi Dai com código QR',
+  scanSubText: 'Use o aplicativo Qudi Dai para fazer login com código QR',
+  qrcodeExpired: 'Código QR expirado',
+  expiredTime10: 'Este código QR é válido por 10 minutos',
+  reflesh: 'Clique para atualizar',
+  scanSuccess: 'Leitura do código QR bem-sucedida',
+  confromLogin: 'Por favor, confirme o login',
+  onlineStatus: "Status Online:",
+  networkDiagnostic: "Diagnóstico de Rede",
+  "setPaymentPassword": "Por favor, defina a senha de pagamento de 6 dígitos",
+  "unSetPaymentPassword":
+      "Por favor, não defina uma senha de pagamento repetida ou sequencial",
+  "verifyPassword": "Verificar senha de pagamento",
+  "confirmPaymentPassword": "Confirmar senha de pagamento",
+  "verifyCurrentPassword": "Verifique a senha de pagamento atual",
+  "reInsetPaymentPassword":
+      "Por favor, insira novamente a senha de pagamento para confirmar",
+  "paymentPasswordDifferent": "Senha diferente, por favor, insira novamente",
+  "getPaymentPasswordWay":
+      "Por favor, escolha o método de recuperação de senha",
+  "selectFriendGroup": "Selecionar Grupo de Amigos",
+  "selectGroups": "Selecionar Grupos",
+  "eachGroupLimitNumber": "O número máximo de pessoas em cada grupo é de {p}",
+  "selectChatLimitNumber": "Você só pode selecionar até {p} chats",
+  "deviceID": "ID do dispositivo：",
+  "groupChatRemark": "Observação do grupo de bate-papo",
+  "pleaseEnterRemarks": "Por favor, insira o conteúdo da observação",
+  "groupMembershipInfo": "Informações de adesão ao grupo",
+  "error_6102": "Limite máximo de 500 pessoas por grupo",
+  "distroyed": "Cancelado",
+  "forbiddened": "Banido",
+  "addGroupMemberWithoutApply":
+      "Adicionar membros ao grupo sem verificação de consentimento",
+  "error_6109": "O número de amigos deste usuário atingiu o limite máximo.",
+  "apply_ttl": "Autorização de login do dispositivo",
+  "apply_tips":
+      "Este dispositivo não é confiável ou não foi aprovado na auditoria. Você deseja enviar informações do dispositivo para solicitar autorização?",
+  "apply_send": "Enviar solicitação",
+  "device_auth_send": "Solicitação de autorização do dispositivo enviada",
+  "using_trusted_device":
+      "O login com este dispositivo apresenta riscos, por favor, faça login com um dispositivo confiável",
+  "account_closed": "Conta encerrada",
+  "google_code": "Código de Verificação do Google",
+  "input_google_code": "Por favor, insira o Código de Verificação do Google",
+  "inviterUser": "Convidado por",
+  "lastLoginTime": "Último horário de login",
+  "error_6105": "Dispositivo não confiável, por favor envie um pedido",
+  "error_6106":
+      "Por favor aguarde a aprovação do dispositivo antes de fazer login",
+  "error_6107": "Aprovação do dispositivo não foi concedida",
+  "hasDetailInfoPermission": "Ver informações detalhadas do membro do grupo",
+  "editUserHeaderWithGroupHeader":
+      "Deseja alterar o cabeçalho do bate-papo em grupo ao mesmo tempo?",
+  "darkModel": "Modo escuro",
+  "darkModelSetDesc":
+      "Ativar ou desativar o modo escuro seguindo as configurações do sistema",
+  "whiteModel": "Modo claro",
+  "fileNotFound": "Arquivo não encontrado",
+  "openFileInApp": "Visualizar arquivo",
+  "openFileOtherApp": "Abrir em outro aplicativo",
+  "openByBrowser": "Baixar usando o navegador",
+  "pauseDownload": "Pausar download",
+  "resumeDownload": "Continuar download",
+  "downloadFailed": "Download falhou",
+  "downloading": "Baixando",
+  "notdownloaded": "Não baixado",
+  "cancelDownloading":
+      "O arquivo está sendo baixado. Deseja cancelar o download?",
+  "failedToDownload":
+      "Falha ao baixar o arquivo. Deseja tentar baixar novamente?",
+  "cancelDownload": "Cancelar download",
+  "sending": "Enviando",
+  "fileTypeNotSupported": "Formato de arquivo não suportado para upload",
+  "fileSizeOut": "Tamanho do arquivo excedido",
+  "restrict": "Restringir",
+  "getWithPhone": "Recuperar com número de telefone",
+  "getWithEmail": "Recuperar com endereço de e-mail",
+  "fileSize": "Tamanho do arquivo",
+  "whetherDownloadFile": "Se quer fazer o download do arquivo",
+  "downloadFailedTip1":
+      "Falha ao baixar, por favor verifique a rede e tente novamente",
+  "downloadQueueTip": "Adicionado à fila de downloads, aguardando download",
+  "notSupportTransmitTip": "Esta mensagem não pode ser encaminhada no momento",
+  "voiceSize": "O tamanho do arquivo de áudio não pode exceder 100MB.",
+  "wordSize": "O tamanho do arquivo de documento não pode exceder 100MB.",
+  "apkSize":
+      "O tamanho do arquivo de pacote de instalação não pode exceder 300MB.",
+  "zipSize": "O tamanho do arquivo zip não pode exceder 300MB.",
+  "groupDeleteUserTip":
+      "Eliminar este usuário juntamente com as mensagens enviadas por este usuário no grupo",
+  "nPersonRead": "{p} pessoa(s) já leu/leram",
+  "darkModeEnabled":
+      "Modo escuro ativado, reinicie o aplicativo para que as alterações entrem em vigor",
+  "darkModeOff":
+      "Modo escuro desativado, reinicie o aplicativo para que as alterações entrem em vigor",
+  "otherUser": "Outro usuário",
+  "selectMsgDeleteTime": "Selecionar tempo de retenção",
+  "selectMsgDeleteTimeTip":
+      "O histórico de conversas será excluído automaticamente após o período de retenção. Deseja continuar?",
+  "msgSaveTime": "Tempo de retenção do histórico de conversas",
+  "msgSaveTimeDesc":
+      "Limpar automaticamente os registros de conversa que excederem o limite de tempo",
+  "hasTimeDeleteMsgPermission":
+      "Configuração de tempo de retenção de mensagens de chat em grupo",
+  "accountAbnormal": "Exceção de conta, convite falhou!",
+  "onlyBrowser": "Suporte apenas para visualização no navegador",
+  "cancelSendSuccess": "Envio cancelado com sucesso",
+  "allStr1": "Global",
+  "modelStr1": "Modo dia e noite",
+  "atMaxCountTip": "@ no máximo {p} pessoas",
+  "transmitTo": "Encaminhar para",
+  "moreActions": "Mais ações",
+  "Indonesian": "Aksi lainnya",
+  "refreshing": "Atualizar",
+  "openInBrowser": "Abrir no navegador",
+  "coverFlow": "Fluxo de capa",
+  "checkNet": "Verificação de rede",
+  "autoChangeServer": "Mudança automática para o melhor servidor",
+  "serverLine": "Linha do servidor",
+  "timeOut": "Tempo esgotado",
+  "serverLineChange": "Alterar linha do servidor",
+  "netCheck": "Diagnóstico de rede",
+  "netDelayCheck": "Verificação de atraso de rede",
+  "netDelay1Check": "Atraso na internet",
+  "msgDelay1Check": "Atraso de mensagem",
+  "imgDelay1Check": "Atraso de imagem",
+  "netLine": "Linha de rede",
+  "reCheck": "Verificar novamente",
+  "netChecking": "Verificando rede",
+  "locationAddr": "Endereço de localização",
+  "selectPerfectLineTip": "Selecionada a melhor linha para você",
+  "selectPerfectLineTip2": "Atualmente é a melhor linha, não precisa mudar",
+  "selectPerfectLineTipNoNet":
+      "Não foi possível identificar a melhor linha, verifique sua conexão e tente novamente",
+  "changing": "Mudando",
+  "changeSuccess": "Mudança bem-sucedida",
+  "autoChanging": "Mudança automática em andamento, por favor, aguarde",
+  "waitAnswer": "Aguardando resposta",
+  "callFinish": "Chamada encerrada",
+  "fileSizeConnotZero": "O tamanho do arquivo não pode ser zero",
+  "confirmLogin": "Confirmar login",
+  "toolboxAudioCall": "Chamada de áudio",
+  "requestTimeOut": "Tempo limite da solicitação, tente novamente mais tarde",
+  "error_6115": "Código QR expirado",
+  "groupNotFound": "Grupo não encontrado",
+  "userNotFound": "Usuário não encontrado",
+  "microphoneOpen": "Microfone aberto",
+  "speakerOpen": "Alto-falante aberto",
+  "voiceWithYou": "Convidando você para chamada de áudio",
+  "callInterceptor": "Chamada interceptada",
+  "startCallError": "Erro ao iniciar chamada",
+  "callHungUp": "Chamada encerrada",
+  "callRemoteHungUp": "Chamada encerrada pelo outro lado",
+  "callReceiverError": "Erro ao receber chamada",
+  "starting": "Iniciando",
+  "startTimeOut": "Tempo esgotado ao iniciar chamada de áudio",
+  "callWaitReceiver": "Aguardando o outro lado atender",
+  "callRemoteNotAccept": "O outro lado não atendeu",
+  "callStartSendError": "Erro ao iniciar chamada de áudio",
+  "notAccept": "Não aceito",
+  "callAccepting": "Aceitando chamada",
+  "call": "Chamada",
+  "callDoing": "Linha ocupada, cancelada",
+  "netBad": "Condição de rede atual ruim",
+  "netDown": "Rede desconectada",
+  "onCalling": "Em chamada",
+  "error_1303": "Você ainda não é amigo da outra pessoa",
+  "remoteAccountError": "Problema na conta da outra pessoa",
+  "userOnlineStatus": "Estado online",
+  "error_100008":
+      "Este usuário não atende aos requisitos para se tornar um administrador",
+  "callTimeLimit": "Limite de tempo de chamada de {p} minutos por vez",
+  "notLoginOnline": "Nunca fez login",
+  "callRemoteDoing": "Ocupado",
+  "exitLoginIng": "Saindo",
+  "usePhoneRecovery": "Use o número do telefone para recuperação",
+  "useEmailRecovery": "Use o e-mail para recuperação",
+  "otherRecoveryMethods": "Outros métodos de recuperação",
+  "emailAddress": "Endereço de e-mail",
+  "phoneErrorOrNotExist": "Número de telefone incorreto ou inexistente",
+  "phoneNotExist": "Número de telefone inexistente",
+  "verificationCodeFailure": "Falha ao obter o código de verificação, por favor, tente novamente",
+   verificationCodeSent: "Código de verificação enviado",
+  hiWelcomeLogin: "Oi~ Bem-vindo ao login",
+  otherLoginMethods: "Outros métodos de login",
+  usernamePhoneEmail: "Nome de Usuário/Número de Telefone/Email",
+  "error_1303": "Você ainda não é amigo da outra pessoa",
+  "remoteAccountError": "Problema na conta da outra pessoa",
+  "userOnlineStatus": "Estado online",
+  "error_100008":
+      "Este usuário não atende aos requisitos para se tornar um administrador",
+  "callTimeLimit": "Limite de tempo de chamada de %s minutos por vez",
+  "notLoginOnline": "Nunca fez login",
+  "callRemoteDoing": "Ocupado",
+  "exitLoginIng": "Saindo",
+  "searchAreaCode": "Buscar país/região",
+  "otherFindStyle": "Outros métodos de recuperação",
+  "welcome": "Bem-vindo ao login",
+
+  "fileReadError": "Erro ao ler o arquivo",
+  "docPreviewError": "Não é possível visualizar o arquivo",
+  "docPreviewUseOther": "Se devido a problemas de rede ou incompatibilidade do dispositivo, não for possível visualizar o arquivo, você pode usar",
+  "netTimeOut": "Tempo de conexão com a rede expirado",
+  "docReadError": "Não é possível ler o arquivo, verifique se o formato do arquivo está correto",
+  "errorDetail": "Detalhes do erro",
+  ip: "IP",
+  imageLoadingRoute: "Rota de carregamento de imagem",
+  networkChecking: "Verificando a rede...",
+  noPermission: "Sem permissão, por favor, faça login após obter permissão",
+  pageNotFound: "Página não encontrada",
+  serverError: "Erro no servidor",
+  databaseError: "Erro de consulta ao banco de dados",
+  networkError: "Erro de conexão com a rede"
+};
diff --git a/src/lang/th.js b/src/lang/th.js
new file mode 100644
index 0000000..e262675
--- /dev/null
+++ b/src/lang/th.js
@@ -0,0 +1,1729 @@
+// 泰语
+export default {
+  checkTopMessage:'ตรวจสอบข้อความ',
+  unsupportedVideoFormat: "ไม่รองรับรูปแบบวิดีโอนี้",
+  welcome: "ยินดีต้อนรับสู่ OpenIM",
+  phoneNumber: "หมายเลขโทรศัพท์",
+  plsEnterPhoneNumber: "โปรดป้อนหมายเลขโทรศัพท์ของคุณ",
+  password: "รหัสผ่าน",
+  plsEnterPassword: "โปรดป้อนรหัสผ่านของคุณ",
+  plsEnterPassword6_15: "รหัสผ่าน (6-15 ตัวอักษรและตัวเลข)",
+  account: "บัญชี",
+  plsEnterAccount: "โปรดป้อนบัญชีของคุณ",
+  plsEnterAccount6_15: "ชื่อผู้ใช้ (6-15 ตัวอักษรและตัวเลข)",
+  forgetPassword: "ลืมรหัสผ่าน",
+  createAccount: "สร้างบัญชี",
+  verificationCodeLogin: "เข้าสู่ระบบด้วยรหัสยืนยัน",
+  login: "เข้าสู่ระบบ",
+  noAccountYet: "ยังไม่มีบัญชีใช่ไหม?",
+  loginNow: "เข้าสู่ระบบทันที",
+  registerNow: "ลงทะเบียนทันที",
+  lockPwdErrorHint: "รหัสผ่านผิด %s ครั้ง",
+  newUserRegister: "ลงทะเบียนผู้ใช้ใหม่",
+  verificationCode: "รหัสยืนยัน",
+  verificationSuccessful: "ยืนยันสำเร็จ",
+  sendVerificationCode: "ส่งรหัสยืนยัน",
+  verification_code1: "โปรดใส่รหัสยืนยัน",
+  correct_email_address: "โปรดใส่ที่อยู่อีเมลที่ถูกต้อง",
+  Resend: "ส่งใหม่",
+  bind_email: "ผูกอีเมล",
+  email_verification: "การยืนยันอีเมล",
+  login_details: "รายละเอียดการเข้าสู่ระบบ",
+  verification_code: "โปรดใส่รหัสยืนยันทางอีเมล",
+  email_verification_code: "รหัสยืนยันทางอีเมล",
+  currently_bound_email: "อีเมลที่ผูกอยู่ในปัจจุบัน:",
+  text_email: "หากอีเมลของคุณไม่ใช้งานอีกต่อไป โปรดเปลี่ยนทันที",
+  remove_this_device: "คุณแน่ใจหรือไม่ว่าต้องการลบอุปกรณ์นี้?",
+  remove_this_device1:
+    "คุณแน่ใจหรือไม่ว่าต้องการลบอุปกรณ์นี้? เมื่อลบแล้ว คุณจำเป็นต้องยืนยันการเข้าสู่ระบบใหม่เมื่อใช้อุปกรณ์นี้อีกครั้ง",
+  go_to_settings: "ไปที่การตั้งค่า",
+  go_to_binding: "ไปที่การผูก",
+  date_of_birth: "วันเกิด",
+  confidential: "ลับ",
+  year: "ปี",
+  not_perfection: "ยังไม่สมบูรณ์",
+  old_password: "รหัสผ่านเก่า",
+  myCreatedGroup: "กลุ่มที่ฉันสร้าง",
+  myManageGroup: "กลุ่มที่ฉันจัดการ",
+  myJoinGroup: "กลุ่มที่ฉันเข้าร่วม",
+  please_enter_old_password: "โปรดใส่รหัสผ่านเก่าของคุณ",
+  trusted_device: "อุปกรณ์ที่เชื่อถือได้",
+  change_email_address: "เปลี่ยนอีเมล",
+  current_device: "อุปกรณ์ปัจจุบัน",
+  remove_device: "ลบอุปกรณ์",
+  current_device_records: "นี่คือบันทึกการเข้าสู่ระบบของอุปกรณ์ทั้งหมดของคุณ",
+  text_device: "การจัดการอุปกรณ์เข้าสู่ระบบ",
+  verification_time: "เวลาการยืนยัน:",
+  text_device1:
+    "นี่คืออุปกรณ์เข้าสู่ระบบทั้งหมดของคุณ คลิกเพื่อดูรายละเอียดและบันทึกการเข้าสู่ระบบของอุปกรณ์นี้",
+  change_the_binding: "เปลี่ยนการผูกข้อมูล",
+  resendVerificationCode: "ส่งรหัสยืนยันอีกครั้ง",
+  verificationCodeTimingReminder: "รับรหัสยืนยันใหม่ใน %s วินาที",
+  defaultVerificationCode: "(รหัสยืนยันเริ่มต้น: %s)",
+  plsEnterVerificationCode: "โปรดป้อนรหัสยืนยันของคุณ",
+  invitationCode: "รหัสเชิญ",
+  device_list: "รายการอุปกรณ์",
+  plsEnterInvitationCode: "โปรดป้อนรหัสเชิญของคุณ %s",
+  optional: "ตัวเลือก",
+  nextStep: "ขั้นตอนถัดไป",
+  plsEnterRightPhone: "โปรดป้อนหมายเลขโทรศัพท์ที่ถูกต้อง",
+  enterVerificationCode: "ป้อนรหัสยืนยันโทรศัพท์",
+  setPassword: "ตั้งรหัสผ่าน",
+  plsConfirmPasswordAgain: "โปรดยืนยันรหัสผ่านของคุณอีกครั้ง",
+  text_password2: "โปรดยืนยันรหัสผ่านเข้าสู่ระบบอีกครั้ง",
+  please_enter_new_password_again: "โปรดป้อนรหัสผ่านใหม่ของคุณอีกครั้ง",
+  confirmPassword: "ยืนยันรหัสผ่าน",
+  wrongPasswordFormat: "รูปแบบรหัสผ่านไม่ถูกต้อง",
+  plsCompleteInfo: "โปรดกรอกข้อมูลส่วนตัวของคุณ",
+  plsEnterYourNickname: "โปรดป้อนชื่อเล่นของคุณ",
+  pleaseEnterYourUsername: "โปรดป้อนชื่อผู้ใช้ของคุณ",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "ป้อนชื่อผู้ใช้ของคุณเพื่อช่วยให้เราระบุบัญชีของคุณ",
+  text_1: "บัญชีนี้ยังไม่ผูกอีเมล ดังนั้นไม่สามารถกู้คืนรหัสผ่านได้ชั่วคราว",
+  setInfo: "ตั้งค่าข้อมูล",
+  loginPwdFormat: "6-20 ตัวเลขและตัวอักษร",
+  passwordLogin: "เข้าสู่ระบบด้วยรหัสผ่าน",
+  contacts: "รายชื่อผู้ติดต่อ",
+  workbench: "เวิร์กเบนช์",
+  mine: "ของฉัน",
+  me: "ฉัน",
+  draftText: "ดร๊าฟ",
+  everyone: "ทุกคน",
+  you: "คุณ",
+  groupAc: "ประกาศกลุ่ม",
+  createGroupNtf: "%s ได้สร้างการสนทนากลุ่ม",
+  editGroupInfoNtf: "%s แก้ไขข้อมูลกลุ่ม",
+  quitGroupNtf: "%s ออกจากการสนทนากลุ่ม",
+  invitedJoinGroupNtf: "%s เชิญ %s เข้าร่วมการสนทนากลุ่ม",
+  kickedGroupNtf: "%s ถูกไล่ออกจากการสนทนากลุ่มโดย %s",
+  joinGroupNtf: "%s เข้าร่วมการสนทนากลุ่ม",
+  dismissGroupNtf: "%s ทำการยุบกลุ่ม",
+  transferredGroupNtf: "%s โอนสิทธิการจัดการกลุ่มให้กับ %s",
+  muteMemberNtf: "%s ถูกปิดเสียงโดย %s เป็นเวลา %s",
+  muteCancelMemberNtf: "%s การปิดเสียงถูกยกเลิกโดย %s",
+  muteGroupNtf: "%s เปิดการปิดเสียงกลุ่ม",
+  muteCancelGroupNtf: "%s ปิดการปิดเสียงกลุ่ม",
+  friendAddedNtf: "คุณได้เพิ่มเพื่อนแล้ว คุณสามารถเริ่มสนทนาได้",
+  openPrivateChatNtf: "เปิดการสนทนาส่วนตัวแล้ว",
+  closePrivateChatNtf: "ปิดการสนทนาส่วนตัวแล้ว",
+  memberInfoChangedNtf: "%s แก้ไขข้อมูลสมาชิกกลุ่มของตัวเอง",
+  unsupportedMessage: "ประเภทข้อความที่ไม่รองรับชั่วคราว",
+  picture: "รูปภาพ",
+  video: "วิดีโอ",
+  voice: "เสียง",
+  safety: "ความปลอดภัย",
+  location: "ตำแหน่ง",
+  file: "ไฟล์",
+  carte: "นามบัตร",
+  emoji: "อีโมจิที่กำหนดเอง",
+  chatRecord: "บันทึกการสนทนา",
+  revokeMsg: "ถอดการยกเลิกข้อความ",
+  aRevokeBMsg: "%s ได้ถอดการยกเลิกข้อความของ %s",
+  blockedByFriendHint: "ข้อความถูกส่งไปแล้ว แต่ถูกปฏิเสธโดยอีกฝ่าย",
+  sendFriendVerification: "ส่งคำขอการตรวจสอบเพื่อเพิ่มเป็นเพื่อน",
+  removedFromGroupHint: "คุณถูกนำออกจากกลุ่มแล้ว",
+  groupDisbanded: "กลุ่มได้ถูกยุบแล้ว",
+  createdGroup: "คุณยังไม่ได้สร้างกลุ่ม",
+  search: "ค้นหา",
+  newGroups: "กลุ่มใหม่",
+  groupNames: "โปรดป้อนชื่อกลุ่ม",
+  synchronizing: "การซิงโครไนซ์",
+  syncFailed: "การซิงค์ล้มเหลว",
+  connecting: "การเชื่อมต่อ",
+  connectionFailed: "การเชื่อมต่อล้มเหลว",
+  top: "ด้านบน",
+  cancelTop: "ยกเลิกด้านบน",
+  markHasRead: "ทำเครื่องหมายว่าอ่านแล้ว",
+  delete: "ลบ",
+  nPieces: "%s ชิ้น",
+  online: "ออนไลน์",
+  offline: "ออฟไลน์",
+  phoneOnline: "โทรศัพท์มือถือ",
+  pcOnline: "คอมพิวเตอร์",
+  webOnline: "เว็บ",
+  webMiniOnline: "เว็บมินิ",
+  upgradeFind: "พบเวอร์ชันใหม่",
+  upgradeVersion: "ตรวจพบเวอร์ชันใหม่ที่ใช้ได้ %s ปัจจุบันเป็นเวอร์ชัน %s",
+  upgradeDescription: "คำอธิบายการอัปเดต:",
+  upgradeIgnore: "ละเว้น",
+  upgradeLater: "อัปเดตภายหลัง",
+  upgradeNow: "อัปเดตทันที",
+  upgradeNever: "ไม่อัปเดตในขณะนี้",
+  inviteYouCall: "%s เชิญคุณเข้าร่วม %s",
+  rejectCall: "ปฏิเสธ",
+  acceptCall: "ยอมรับ",
+  callVoice: "สายโทรเสียง",
+  callVideo: "สายโทรวิดีโอ",
+  sentSuccessfully: "ส่งสำเร็จ",
+  copySuccessfully: "คัดลอกสำเร็จ",
+  binding_successful: "ผูกพันสำเร็จ",
+  day: "วัน",
+  hour: "ชั่วโมง",
+  hours: "ชั่วโมง",
+  minute: "นาที",
+  seconds: "วินาที",
+  cancel: "ยกเลิก",
+  determine: "ตกลง",
+  failed_to_load: "โหลดล้มเหลว",
+  failed_to_load1: "โหลดล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  removal_failed: "การลบล้มเหลว",
+  toolboxAlbum: "อัลบั้ม",
+  toolboxCall: "สายวิดีโอ",
+  toolboxCamera: "ถ่ายภาพ",
+  toolboxCard: "นามบัตร",
+  toolboxFile: "ไฟล์",
+  toolboxLocation: "ตำแหน่ง",
+  send: "ส่ง",
+  holdTalk: "กดค้าง เพื่อพูด",
+  releaseToSend: "ปล่อย เพื่อส่ง",
+  releaseToSendSwipeUpToCancel: "ปล่อยเพื่อส่ง ลากขึ้นเพื่อยกเลิก",
+  liftFingerToCancelSend: "ยกนิ้วเพื่อยกเลิกการส่ง",
+  callDuration: "ระยะเวลาการโทร %s",
+  cancelled: "ยกเลิกแล้ว",
+  cancelledByCaller: "ถูกยกเลิกโดยผู้โทร",
+  rejectedByCaller: "ถูกปฏิเสธโดยผู้โทร",
+  callTimeout: "หมดเวลาโทร",
+  rejected: "ถูกปฏิเสธ",
+  forwardMaxCountHint:
+    "ขณะนี้รองรับการส่งต่อสูงสุดยอดของข้อความไม่เกินยี่สิบข้อความ~",
+  typing: "กำลังพิมพ์...",
+  addSuccessfully: "เพิ่มสำเร็จ",
+  addFailed: "เพิ่มล้มเหลว",
+  setSuccessfully: "ตั้งค่าสำเร็จ",
+  callingBusy: "คุณกำลังในสายโทรและไม่สามารถดำเนินการนี้ได้!",
+  groupCallHint:
+    "กลุ่มปัจจุบันกำลังในการสนทนา คุณแน่ใจหรือไม่ว่าต้องการเข้าร่วมสนทนาปัจจุบัน?",
+  joinIn: "เข้าร่วม",
+  menuCopy: "คัดลอก",
+  menuDel: "ลบ",
+  menuForward: "ส่งต่อ",
+  menuReply: "ตอบกลับ",
+  menuMulti: "เลือกหลายรายการ",
+  menuRevoke: "เรียกคืน",
+  menuAdd: "เพิ่ม",
+  nMessage: "%s ข้อความใหม่",
+  plsSelectLocation: "โปรดเลือกตำแหน่ง",
+  groupAudioCallHint: "%s คนกำลังพูดโทร",
+  groupVideoCallHint: "%s คนกำลังวิดีโอโทร",
+  reEdit: "แก้ไขอีกครั้ง",
+  playSpeed: "ความเร็วการเล่น",
+  download: "ดาวน์โหลด",
+  download1: "ดาวน์โหลดทันที",
+  nicknames: "ชื่อเล่นผู้ใช้",
+  downloadAPP: "ดาวน์โหลดแอพ",
+  private_chat: "แชทส่วนตัว",
+  googleMap: "แผนที่ Google",
+  check_for_updates: "ตรวจสอบการอัปเดต",
+  appleMap: "แผนที่ Apple",
+  baiduMap: "แผนที่ Baidu",
+  amapMap: "แผนที่ Amap",
+  signature: "ลายเซ็น",
+  please_enter_user_nickname: "โปรดป้อนชื่อเล่นผู้ใช้",
+  set_characters: "โปรดตั้งค่า 4-15 ตัวอักษร",
+  personalized_signature: "โปรดป้อนลายเซ็นส่วนตัว (จำกัดตัวอักษร 6-50)",
+  tencentMap: "แผนที่ Tencent",
+  offlineMeetingMessage: "คุณได้รับข้อความเชิญประชุมแบบออฟไลน์",
+  offlineMessage: "คุณมีข้อความใหม่",
+  offlineCallMessage: "คุณได้รับข้อความเชิญโทรออกแบบออฟไลน์",
+  logoutHint: "คุณแน่ใจหรือไม่ว่าต้องการออกจากระบบ?",
+  myInfo: "ข้อมูลของฉัน",
+  workingCircle: "วงการทำงาน",
+  accountSetup: "การตั้งค่าบัญชี",
+  aboutUs: "เกี่ยวกับเรา",
+  about: "เกี่ยวกับ",
+  bgColor: "สีพื้นหลัง",
+
+  logout: "ออกจากระบบ",
+  qrcode: "รหัส QR",
+  qrcodeHint: "สแกนรหัส QR ด้านล่างเพื่อเพิ่มฉันเป็นเพื่อน",
+  favoriteFace: "รูปประกอบที่ชื่นชอบ",
+  favoriteManage: "การจัดการ",
+  favoriteCount: "รวม %s รูปประกอบ",
+  favoriteDel: "ลบ (%s)",
+  hasRead: "อ่านแล้ว",
+  unread: "ยังไม่ได้อ่าน",
+  nPersonUnRead: "%s คนยังไม่ได้อ่าน",
+  allRead: "อ่านทั้งหมด",
+  messageRecipientList: "รายการผู้รับข้อความ",
+  hasReadCount: "อ่านแล้ว (%s)",
+  unreadCount: "ยังไม่ได้อ่าน (%s)",
+  newFriend: "เพื่อนใหม่",
+  newFriendList: "รายการคำขอเพื่อน",
+  newGroup: "การสนทนาใหม่",
+  myFriend: "เพื่อนของฉัน",
+  myGroup: "กลุ่มของฉัน",
+  addManager: "เพิ่มผู้จัดการ",
+  privateSetting: "การตั้งค่าส่วนตัว",
+  add: "เพิ่ม",
+  scan: "สแกน",
+  scanHint: "สแกนบัตรนามรหัส QR",
+  addFriend: "เพิ่มเพื่อน",
+  addFriendHint: "ค้นหาและเพิ่มด้วยรหัส ID",
+  createGroup: "สร้างกลุ่มสนทนา",
+  createGroupHint: "สร้างกลุ่มสนทนา ใช้ OpenIM อย่างเต็มรูปแบบ",
+  addGroup: "เพิ่มกลุ่ม",
+  addGroupHint: "ถามผู้ดูแลระบบหรือสมาชิกกลุ่มเพื่อรหัส ID",
+  searchIDAddFriend: "ค้นหา ID เพื่อเพิ่มเพื่อน",
+  searchIDAddGroup: "ค้นหา ID เพื่อเพิ่มกลุ่ม",
+  searchIDIs: "ID: %s",
+  searchPhoneIs: "โทรศัพท์: %s",
+  searchEmailIs: "อีเมล: %s",
+  searchNicknameIs: "ชื่อเล่น: %s",
+  searchGroupNicknameIs: "ชื่อเล่นกลุ่ม: %s",
+  noFoundUser: "ไม่พบผู้ใช้นี้",
+  noFoundGroup: "ไม่สามารถพบกลุ่มสนทนานี้",
+  joinGroupDate: "วันที่เข้าร่วมกลุ่ม",
+  joinGroupMethod: "วิธีเข้าร่วมกลุ่ม",
+  byInviteJoinGroup: "%s เชิญเข้าร่วมกลุ่ม",
+  byIDJoinGroup: "ค้นหา ID กลุ่ม",
+  byQrcodeJoinGroup: "รหัส QR กลุ่ม",
+  groupID: "รหัส ID กลุ่ม",
+  setAsAdmin: "ตั้งเป็นผู้ดูแลระบบ",
+  setMute: "ตั้งค่าการปิดเสียง",
+  organizationInfo: "ข้อมูลองค์กร",
+  organization: "องค์กร",
+  department: "แผนก",
+  position: "ตำแหน่ง",
+  personalInfo: "ข้อมูลส่วนตัว",
+  viewDynamics: "ดูดีไนมิกส์",
+  audioAndVideoCall: "โทรออกเสียงและวิดีโอ",
+  sendMessage: "ส่งข้อความ",
+  avatar: "อวตาร",
+  name: "ชื่อ",
+  nickname: "ชื่อเล่น",
+  gender: "เพศ",
+  englishName: "ชื่ออังกฤษ",
+  birthDay: "วันเกิด",
+  tel: "โทรศัพท์",
+  mobile: "เบอร์โทรศัพท์มือถือ",
+  email: "อีเมล",
+  man: "ชาย",
+  woman: "หญิง",
+  friendSetup: "ตั้งค่าเพื่อน",
+  setupRemark: "ตั้งค่าหมายเหตุ",
+  recommendToFriend: "แนะนำให้เพื่อน",
+  addToBlacklist: "เพิ่มในรายการบัญชีดำ",
+  unfriend: "ยกเลิกความเป็นเพื่อน",
+  areYouSureDelFriend: "คุณแน่ใจหรือไม่ว่าต้องการลบเพื่อน?",
+  areYouSureAddBlacklist: "คุณแน่ใจหรือไม่ว่าต้องการเพิ่มเพื่อนเข้ารายชื่อดำ?",
+  remark: "หมายเหตุ",
+  save: "บันทึก",
+  saveSuccessfully: "บันทึกสำเร็จ",
+  saveFailed: "การบันทึกล้มเหลว",
+  groupVerification: "การตรวจสอบกลุ่ม",
+  friendVerification: "การตรวจสอบเพื่อน",
+  email_address: "โปรดป้อนที่อยู่อีเมล",
+  sendEnterGroupApplication: "ส่งคำขอเข้าร่วมกลุ่ม",
+  sendToBeFriendApplication: "ส่งคำขอเป็นเพื่อน",
+  sendSuccessfully: "ส่งสำเร็จ",
+  reset_successful: "รีเซ็ตสำเร็จ",
+  bind_new_email: "ผูกอีเมลใหม่",
+  Login_failed: "เข้าสู่ระบบล้มเหลว",
+  successful_home: "ลงทะเบียนสำเร็จ",
+  sendFailed: "ส่งล้มเหลว",
+  canNotAddFriends: "ผู้ใช้นี้ได้ตั้งค่าไม่อนุญาตให้เพิ่ม!",
+  mutedAll: "ปิดเสียงทั้งหมด",
+  tenMinutes: "10 นาที",
+  oneHour: "1 ชั่วโมง",
+  twelveHours: "12 ชั่วโมง",
+  oneDay: "1 วัน",
+  custom: "กำหนดเอง",
+  unmute: "ยกเลิกการปิดเสียง",
+  youMuted: "คุณถูกปิดเสียง",
+  groupMuted: "ปิดเสียงกลุ่มแล้ว",
+  notDisturbMode: "โหมดไม่รบกวน",
+  allowRing: "เสียงแจ้งเตือนข้อความใหม่",
+  allowVibrate: "การสั่นเมื่อมีข้อความใหม่",
+  forbidAddMeToFriend: "ห้ามให้เพิ่มเป็นเพื่อน",
+  blacklist: "รายชื่อดำในสมุดที่อยู่",
+  unlockSettings: "ปลดล็อกการตั้งค่า",
+  changePassword: "เปลี่ยนรหัสผ่าน",
+  clearChatHistory: "ล้างประวัติการสนทนา",
+  confirmClearChatHistory: "ยืนยันการล้างประวัติการสนทนาทั้งหมดหรือไม่?",
+  languageSetup: "การตั้งค่าภาษา",
+  language: "ภาษา",
+  english: "อังกฤษ",
+  setting_up: "กำลังตั้งค่า...",
+  chinese: "จีนตัวย่อ",
+  traditional_chinese: "จีนตัวเต็ม",
+  followSystem: "ตามระบบ",
+  blacklistEmpty: "ไม่มีรายชื่อดำ",
+  remove: "เอาออก",
+  removeFriend: "เอาเพื่อนออก",
+  fingerprint: "ลายนิ้วมือ",
+  gesture: "ท่าทาง",
+  biometrics: "การระบุตัวด้วยชีววิทยา",
+  plsEnterPwd: "โปรดใส่รหัสผ่าน",
+  plsEnterOldPwd: "โปรดใส่รหัสผ่านเดิม",
+  plsEnterNewPwd: "โปรดใส่รหัสผ่านใหม่",
+  plsConfirmNewPwd: "โปรดยืนยันรหัสผ่านใหม่",
+  reset: "รีเซ็ต",
+  oldPwd: "รหัสผ่านเดิม",
+  newPwd: "รหัสผ่านใหม่",
+  confirmNewPwd: "ยืนยันรหัสผ่านใหม่:",
+  plsEnterConfirmPwd: "โปรดใส่รหัสผ่านยืนยัน",
+  twicePwdNoSame: "รหัสผ่านที่ป้อนสองครั้งไม่ตรงกัน",
+  twicePwd: "รหัสผ่านใหม่ไม่ตรงกัน โปรดตั้งค่าใหม่",
+  changedSuccessfully: "เปลี่ยนแปลงสำเร็จ",
+  deleteSuccessfully: "ลบสำเร็จ",
+  checkNewVersion: "ตรวจสอบเวอร์ชันใหม่",
+  noAddGround: "ยังไม่มีการเพิ่มเพื่อนในกลุ่ม",
+  chatContent: "เนื้อหาการสนทนา",
+  topContacts: "ติดต่อยอดนิยม",
+  messageNotDisturb: "ไม่รบกวนข้อความ",
+  messageNotDisturbHint: "รับข้อความแต่ไม่แจ้งเตือน",
+  burnAfterReading: "เผาหลังอ่าน",
+  timeSet: "การตั้งเวลา",
+  setChatBackground: "ตั้งค่าพื้นหลังการสนทนา",
+  fontFace: "แบบอักษร",
+  fontSize: "ขนาดตัวอักษร",
+  little: "เล็ก",
+  standard: "มาตรฐาน",
+  big: "ใหญ่",
+  thirtySeconds: "30 วินาที",
+  fiveMinutes: "5 นาที",
+  clearAll: "ล้างทั้งหมด",
+  clearSuccessfully: "ล้างสำเร็จ",
+  groupChatSetup: "การตั้งค่าการสนทนาในกลุ่ม",
+  viewAllGroupMembers: "ดูสมาชิกทั้งหมดในกลุ่ม (%s)",
+  groupManage: "จัดการกลุ่ม",
+  myGroupMemberNickname: "ชื่อของฉันในกลุ่มนี้",
+  topChat: "สนทนาด้านบน",
+  muteAllMember: "ปิดเสียงสมาชิกทั้งหมด",
+  exitGroup: "ออกจากกลุ่มสนทนา",
+  dismissGroup: "สิ้นสุดกลุ่มสนทนา",
+  dismissGroupHint:
+    "สมาชิกทั้งหมดจะออกจากกลุ่มนี้และไม่สามารถส่งหรือรับข้อความได้",
+  quitGroupHint: "หลังจากออกจากกลุ่มสนทนาคุณจะไม่ได้รับข้อความจากกลุ่มนี้",
+  joinGroupSet: "การตั้งค่าเข้าร่วมกลุ่ม",
+  allowAnyoneJoinGroup: "อนุญาตให้ทุกคนเข้าร่วมกลุ่ม",
+  inviteNotVerification: "ไม่ต้องยืนยันคำเชิญของสมาชิกในกลุ่ม",
+  needVerification: "ต้องการส่งข้อความยืนยัน",
+  addMember: "เพิ่ม",
+  delMember: "ลบ",
+  groupOwner: "เจ้าของกลุ่ม",
+  groupAdmin: "ผู้ดูแลกลุ่ม",
+  notAllowSeeMemberProfile: "ไม่อนุญาตให้ดูข้อมูลสมาชิกกลุ่มอื่น",
+  notAllAddMemberToBeFriend: "ไม่อนุญาตให้เพิ่มสมาชิกในกลุ่มเป็นเพื่อน",
+  transferGroupOwnerRight: "โอนสิทธิ์เจ้าของกลุ่ม",
+  groupName: "ชื่อกลุ่ม",
+  groupAcPermissionTips: "เฉพาะเจ้าของกลุ่มและผู้ดูแลเท่านั้นที่สามารถแก้ไขได้",
+  plsEnterGroupAc: "โปรดป้อนข้อความประกาศกลุ่ม",
+  edit: "แก้ไข",
+  publish: "เผยแพร่",
+  groupMember: "สมาชิกกลุ่ม",
+  selectedPeopleCount: "เลือกแล้ว (%s)",
+  confirmSelectedPeople: "ยืนยัน (%s/%s)",
+  confirm: "ยืนยัน",
+  log_in_time: "เวลาเข้าสู่ระบบ:",
+  log_in_time1: "เวลาเข้าสู่ระบบ",
+  login_IP: "IP เข้าสู่ระบบ:",
+  confirmTransferGroupToUser: "ยืนยันการโอนสิทธิ์เจ้าของกลุ่มไปยัง: %s?",
+  removeGroupMember: "ลบสมาชิกกลุ่ม",
+  searchNotResult: "ไม่พบผลลัพธ์ในการค้นหา",
+  groupQrcode: "รหัส QR กลุ่ม",
+  groupQrcodeHint: "สแกนรหัส QR ด้านล่างเพื่อเข้าร่วมการสนทนากลุ่มทันที",
+  approved: "ได้รับการอนุมัติแล้ว",
+  accept: "ยอมรับ",
+  reject: "ปฏิเสธ",
+  friendGrouping: "การจัดกลุ่มเพื่อน",
+  waitingForVerification: "กำลังรอการยืนยัน",
+  rejectSuccessfully: "ปฏิเสธสำเร็จ",
+  rejectFailed: "การปฏิเสธล้มเหลว",
+  applyJoin: "ยื่นขอเข้าร่วม",
+  enterGroup: "เข้าสู่กลุ่ม",
+  applyReason: "เหตุผลการยื่นขอ: %s",
+  invite: "เชิญ",
+  sourceFrom: "มาจาก: %s",
+  byMemberInvite: "เชิญ",
+  bySearch: "โดยการค้นหา",
+  byScanQrcode: "สแกนรหัส QR",
+  iCreatedGroup: "กลุ่มที่สร้างขึ้นโดยฉัน",
+  iJoinedGroup: "กลุ่มที่เข้าร่วมโดยฉัน",
+  nPerson: "{count} คน",
+  searchNotFound: "ไม่พบผลลัพธ์ที่เกี่ยวข้อง",
+  searchNotFoundMember: "ไม่พบผู้ใช้ที่เกี่ยวข้อง",
+  organizationStructure: "โครงสร้างองค์กร",
+  recentConversations: "การสนทนาล่าสุด",
+  selectAll: "เลือกทั้งหมด",
+  plsEnterGroupNameHint: "ใส่ชื่อกลุ่มเพื่อความสะดวกในการค้นหาภายหลัง",
+  completeCreation: "สร้างเสร็จสมบูรณ์",
+  sendCarteConfirmHint: "ยืนยันการส่งข้อมูลติดต่อนี้ไปยังการสนทนานี้หรือไม่?",
+  sentSeparatelyTo: "ส่งแยกออกไปยัง:",
+  sentTo: "ส่งไปยัง:",
+  leaveMessage: "ข้อความที่เหลือ",
+  mergeForwardHint: "[รวมการส่งต่อ] รวมทั้งหมด %s ข้อความ",
+  mergeForward: "รวมการส่งต่อ",
+  quicklyFindChatHistory: "ค้นหาประวัติการแชทอย่างรวดเร็ว",
+  notFoundChatHistory: "ไม่พบเนื้อหาที่เกี่ยวข้องกับ  %s",
+  globalSearchAll: "ค้นหาทั้งหมด",
+  globalSearchContacts: "รายชื่อผู้ติดต่อ",
+  globalSearchGroup: "กลุ่ม",
+  globalSearchChatHistory: "ประวัติการแชท",
+  globalSearchChatFile: "ไฟล์",
+  relatedChatHistory: "%s รายการประวัติการแชทที่เกี่ยวข้อง",
+  seeMoreRelatedContacts: "ดูรายชื่อผู้ติดต่อเพิ่มเติม",
+  seeMoreRelatedGroup: "ดูกลุ่มเพิ่มเติมที่เกี่ยวข้อง",
+  seeMoreRelatedChatHistory: "ดูประวัติการแชทเพิ่มเติมที่เกี่ยวข้อง",
+  seeMoreRelatedFile: "ดูไฟล์เพิ่มเติมที่เกี่ยวข้อง",
+  publishPicture: "เผยแพร่รูปภาพ",
+  publishVideo: "เผยแพร่วิดีโอ",
+  mentioned: "กล่าวถึง: %s",
+  comment: "ความคิดเห็น",
+  like: "ถูกใจ",
+  reply: "ตอบ",
+  rollUp: "ยุบ",
+  fullText: "ข้อความเต็ม",
+  selectAssetsFromCamera: "เลือกจากกล้อง",
+  selectAssetsFromAlbum: "เลือกจากอัลบั้ม",
+  whoCanWatch: "ใครสามารถดูได้",
+  remindWhoToWatch: "เตือนใครให้ดู",
+  public: "สาธารณะ",
+  everyoneCanSee: "ทุกคนสามารถเห็นได้",
+  partiallyVisible: "มองเห็นบางส่วน",
+  visibleToTheSelected: "มองเห็นได้โดยผู้ที่เลือก",
+  partiallyInvisible: "ไม่ให้คนดู",
+  invisibleToTheSelected: "ไม่สามารถมองเห็นได้โดยผู้ที่เลือก",
+  private: "ส่วนตัว",
+  onlyVisibleToMe: "เห็นได้เฉพาะฉันเท่านั้น",
+  selectVideoLimit: "ระยะเวลาไม่ควรเกิน 15 วินาที",
+  selectContactsLimit: "เลือกอย่างน้อยหนึ่งท่าน",
+  message: "ข้อความ",
+  commentedYou: "แสดงความคิดเห็นในคุณ: %s",
+  likedYou: "ถูกใจคุณ",
+  mentionedYou: "กล่าวถึงคุณ",
+  replied: "ตอบกลับ",
+  detail: "รายละเอียด",
+  totalNPicture: "รวมทั้งหมด %s รูป",
+  noDynamic: "ไม่มีแบบดินามิก",
+  callRecords: "บันทึกการโทร",
+  allCall: "การโทรทั้งหมด",
+  missedCall: "สายที่ไม่ได้รับ",
+  incomingCall: "สายเข้า",
+  outgoingCall: "สายออก",
+  microphone: "ไมโครโฟน",
+  speaker: "ลำโพง",
+  hangUp: "วางสาย",
+  pickUp: "รับสาย",
+  waitingCallHint: "กำลังโทรอยู่...",
+  waitingVoiceCallHint: "กำลังรอคู่ตอบรับการโทรเสียง...",
+  invitedVoiceCallHint: "เชิญคุณเข้าร่วมการโทรเสียง...",
+  waitingVideoCallHint: "กำลังรอคู่ตอบรับคำเชิญวิดีโอ",
+  invitedVideoCallHint: "เชิญคุณเข้าร่วมการโทรวิดีโอ...",
+  waitingToAnswer: "กำลังรอคำตอบ",
+  invitedYouToCall: "เชิญคุณเข้าร่วมการโทร",
+  calling: "กำลังโทร",
+  nPeopleCalling: "มีคน %s คนกำลังโทร",
+  whoInvitedVoiceCallHint: "%s เชิญคุณเข้าร่วมการโทรเสียง",
+  whoInvitedVideoCallHint: "%s เชิญคุณเข้าร่วมการโทรวิดีโอ",
+  plsInputMeetingSubject: "โปรดใส่หัวข้อการประชุม",
+  meetingStartTime: "เวลาเริ่มการประชุม",
+  meetingDuration: "ระยะเวลาการประชุม",
+  enterMeeting: "เข้าร่วมการประชุม",
+  meetingNo: "หมายเลขการประชุม",
+  yourMeetingName: "ชื่อของคุณ",
+  plsInputMeetingNo: "โปรดใส่หมายเลขการประชุม",
+  plsInputYouMeetingName: "โปรดใส่ชื่อของคุณ",
+  meetingSubjectIs: "หัวข้อการประชุม: %s",
+  meetingStartTimeIs: "เวลาเริ่ม: %s",
+  meetingDurationIs: "ระยะเวลาการประชุม: %s",
+  meetingHostIs: "เจ้าบ่าว: %s",
+  meetingNoIs: "หมายเลขการประชุม: %s",
+  meetingMessageClickHint: "คลิกที่ข้อความนี้เพื่อเข้าร่วมการประชุมโดยตรง",
+  meetingMessage: "ข้อความการประชุม",
+  openMeeting: "การประชุมที่ยังไม่สิ้นสุด",
+  didNotStart: "ยังไม่เริ่ม",
+  started: "เริ่มแล้ว",
+  meetingInitiatorIs: "การประชุมวิดีโอที่เริ่มโดย %s",
+  meetingDetail: "รายละเอียดการประชุม",
+  meetingOrganizerIs: "ผู้จัดการ: %s",
+  updateMeetingInfo: "อัปเดตข้อมูลการประชุม",
+  cancelMeeting: "ยกเลิกการประชุม",
+  videoMeeting: "การประชุมวิดีโอ",
+  joinMeeting: "เข้าร่วมการประชุม",
+  bookAMeeting: "จองการประชุม",
+  quickMeeting: "การประชุมด่วน",
+  confirmTheChanges: "ยืนยันการเปลี่ยนแปลง",
+  invitesYouToVideoConference: "%s เชิญคุณเข้าร่วมการประชุมวิดีโอ",
+  over: "สิ้นสุด",
+  meetingMute: "ปิดเสียง",
+  meetingUnmute: "เปิดเสียง",
+  meetingCloseVideo: "ปิดวิดีโอ",
+  meetingOpenVideo: "เปิดวิดีโอ",
+  meetingEndSharing: "สิ้นสุดการแชร์",
+  meetingShareScreen: "แชร์หน้าจอ",
+  meetingMembers: "สมาชิก(%s)",
+  settings: "การตั้งค่า",
+  leaveMeeting: "ออกจากการประชุม",
+  endMeeting: "สิ้นสุดการประชุม",
+  leaveMeetingConfirmHint: "คุณแน่ใจหรือไม่ที่จะออกจากการประชุม?",
+  endMeetingConfirmHit: "คุณแน่ใจหรือไม่ที่จะสิ้นสุดการประชุม?",
+  meetingSettings: "การตั้งค่าการประชุม",
+  allowMembersOpenMic: "อนุญาตสมาชิกปลดการปิดไมค์เอง",
+  allowMembersOpenVideo: "อนุญาตสมาชิกเปิดวิดีโอเอง",
+  onlyHostShareScreen: "เฉพาะเจ้าภาพเท่านั้นที่สามารถแชร์หน้าจอ",
+  onlyHostInviteMember:
+    "เฉพาะเจ้าภาพเท่านั้นที่สามารถเชิญสมาชิกเข้าร่วมการประชุมได้",
+  defaultMuteMembers: "ปิดเสียงสมาชิกที่เข้าร่วมประชุม",
+  pinThisMember: "ปักหมุดสมาชิกนี้",
+  unpinThisMember: "ยกเลิกการปักหมุด",
+  allSeeHim: "ทุกคนเห็นเขา",
+  cancelAllSeeHim: "ยกเลิกการให้ทุกคนเห็นเขา",
+  muteAll: "ปิดเสียงทุกคน",
+  unmuteAll: "ยกเลิกการปิดเสียงทุกคน",
+  members: "สมาชิก",
+  screenShare: "แชร์หน้าจอ",
+  screenShareHint: "กำลังแชร์หน้าจอ",
+  meetingClosedHint:
+    "การประชุมได้ถูกปิดหรือตัดการเชื่อมต่อแล้ว คุณแน่ใจหรือไม่ที่จะออก?",
+  meetingIsOver: "การประชุมจบลงแล้ว!",
+  networkError: "มีปัญหาในเครือข่าย โปรดลองอีกครั้งในภายหลัง!",
+  shareSuccessfully: "แชร์สำเร็จ!",
+  notFoundMinP: "ยังไม่มีการเผยแพร่แอปพลิเคชันเล็กน้อย",
+  notSendMessageNotInGroup:
+    "ไม่สามารถส่งข้อความในการแชทแบบกลุ่มที่คุณออกจากได้",
+  whoModifyGroupName: "{name} เปลี่ยนชื่อกลุ่มเป็น ",
+  accountWarn: "คำเตือน!",
+  accountException:
+    "บัญชีของคุณเข้าสู่ระบบในอุปกรณ์อื่นแล้ว กรุณาเปลี่ยนรหัสผ่านทันที",
+  tagGroup: "แท็ก",
+  issueNotice: "แจ้งเตือน",
+  createTagGroup: "สร้างแท็กกลุ่ม",
+  plsEnterTagGroupName: "โปรดป้อนชื่อแท็ก",
+  tagGroupMember: "สมาชิกแท็ก",
+  completeEdit: "แก้ไขเสร็จสิ้น",
+  finish: "เสร็จสิ้น",
+  emptyTagGroup: "ไม่มีกลุ่มแท็ก",
+  confirmDelTagGroupHint: "คุณแน่ใจหรือไม่ที่จะลบกลุ่มแท็กนี้?",
+  editTagGroup: " แก้ไขแท็ก",
+  newBuild: " สร้างใหม่",
+  receiveMember: " สมาชิกที่ได้รับ",
+  emptyNotification: "ไม่มีการแจ้งเตือน",
+  notificationReceiver: "ผู้รับ %s คน: %s",
+  sendAnother: "ส่งอีกครั้ง",
+  confirmDelTagNotificationHint: "คุณแน่ใจหรือไม่ที่จะลบบันทึกการแจ้งเตือนนี้?",
+  contentNotBlank: "เนื้อหาต้องไม่ว่างเปล่า",
+  plsEnterDescription: "กรุณาใส่คำอธิบาย",
+  gifNotSupported: "ไม่รองรับภาพ GIF",
+  register: "ลงทะเบียน",
+  hk: "ตัวอักษรฮ่องกง",
+  RegisterSuccess: "ลงทะเบียนสำเร็จ",
+  LoginSuccess: "เข้าสู่ระบบสำเร็จ",
+  init_validate_1: "ชื่อผู้ใช้ต้องประกอบด้วยตัวอักษรและตัวเลข 6-15 ตัว",
+  init_validate_10:
+    "หมายเลขโทรศัพท์มือถือหรือรหัสผ่านไม่ถูกต้อง โปรดลองใหม่อีกครั้ง",
+  init_validate_5: "รหัสผ่านต้องประกอบด้วยอักษรและตัวเลข 6-15 หลัก โปรดตั้งรหัสผ่านใหม่",
+  init_validate_2: "รหัสผ่านไม่ตรงกัน โปรดตั้งรหัสผ่านใหม่",
+  init_validate_3:
+    "รหัสผ่านต้องประกอบด้วยตัวเลขและตัวอักษร 6-15 ตัว โปรดตั้งรหัสผ่านใหม่",
+  init_validate_6: "รหัสผ่านต้องประกอบด้วยตัวเลขและตัวอักษร 6-15 ตัว",
+  init_validate_4: "ลงทะเบียนสำเร็จ กำลังกลับไปที่หน้าเข้าสู่ระบบ",
+  init_hint_1: "ตัวเลขหรือตัวอักษร 6-15 ตัว",
+  init_hint_2: "ยืนยันรหัสผ่าน",
+  init_hint_3: "รหัสผ่าน",
+  username: "ชื่อผู้ใช้",
+  to_modify: "ไปแก้ไข",
+  confirm_password: "ยืนยันรหัสผ่าน",
+  notification_settings: "การตั้งค่าการแจ้งเตือน",
+  init_text_1: "การลงทะเบียนและเข้าสู่ระบบถือเป็นการยินยอม",
+  init_text_2: "ข้อกำหนดการให้บริการของผู้ใช้",
+  init_text_3: " และ ",
+  init_text_4: "นโยบายความเป็นส่วนตัว",
+  init_text_5: "ข้อกำหนดการให้บริการและนโยบายความเป็นส่วนตัว",
+  init_text_6:
+    "เพื่อปกป้องสิทธิ์และผลประโยชน์ทางกฎหมายของคุณ โปรดอ่านและยินยอมตามข้อตกลงต่อไปนี้",
+  refuse: "ปฏิเสธ",
+  refuse_continue: "ยอมรับและดำเนินการต่อ",
+  forget_password: "ลืมรหัสผ่าน?",
+  register_user: "ลงทะเบียนบัญชี",
+  gotoLogin: "เข้าสู่ระบบ",
+  gotoRegister: "สร้างบัญชีใหม่",
+  enterGroupCheck: "เข้าสู่การตรวจสอบกลุ่ม",
+  openPhotoError_1: "ไม่ได้รับข้อมูลไฟล์ที่เลือก",
+  openPhotoError_2: "การอัปโหลดไฟล์ล้มเหลว",
+  openPhotoError_3: "ไม่ได้รับข้อมูลไฟล์",
+  agreeAll: "ยอมรับทั้งหมด",
+  whatCanManagerDo: "สิทธิ์การจัดการกลุ่ม",
+  changeGroupName: "เปลี่ยนชื่อกลุ่ม",
+  deleteMemberMessage: "ลบข้อความสมาชิก",
+  chatPrivate: "สนทนาส่วนตัวที่เข้ารหัสกับสมาชิก",
+  memberMute: "ปิดเสียงสมาชิก",
+  deleteMember: "ลบสมาชิก",
+  changeNotice: "เผยแพร่/แก้ไข/ลบประกาศกลุ่ม",
+  checkInGroup: "ตรวจสอบเข้ากลุ่ม",
+  setAdmin: "ตั้งเป็นผู้ดูแล",
+  deleteAdmin: "ลบผู้ดูแล",
+  deleteAdminTitle: "คุณแน่ใจหรือไม่ว่าต้องการลบผู้ดูแลระบบนี้?",
+  deleteAdminDetail:
+    "การลบสมาชิกนี้ออกจากตำแหน่งผู้ดูแลระบบจะไม่สามารถจัดการข้อความในกลุ่มได้",
+  deleteSuccess: "ลบสำเร็จ",
+  mobile_web_page: "เข้าถึงเว็บไซต์บนมือถือ",
+  deleteMemberTitle: "คุณแน่ใจหรือไม่ว่าต้องการลบสมาชิกนี้?",
+  deleteMemberDetail:
+    "การลบสมาชิกนี้ออกจากกลุ่มนี้จะไม่สามารถรับหรือส่งข้อความได้",
+  deleteSelf: "ไม่สามารถลบตัวเองได้",
+  handled: "ได้รับการดำเนินการ",
+  unhandle: "รอการดำเนินการ",
+  noCheck: "ยังไม่มีคำขอที่ต้องดำเนินการ",
+  success: "ดำเนินการสำเร็จ",
+  nameLenth: "โปรดตั้งชื่อที่มี 1-15 อักขระ",
+  editNickname: "แก้ไขชื่อเล่นกลุ่ม",
+  text_password: "โปรดตั้งรหัสผ่านเข้าสู่ระบบใหม่",
+  quit: "ออก",
+  waitAMoment: "ฉันยังกำลังดู",
+  editWarningTitle: "คุณแน่ใจหรือไม่ว่าต้องการออกจากการแก้ไขชื่อเล่นกลุ่ม?",
+  editWarningDetail:
+    "ชื่อเล่นกลุ่มที่คุณแก้ไขยังไม่ได้บันทึก คุณต้องการออกหรือไม่?",
+  editGroupAvatar: "แก้ไขภาพโปรไฟล์กลุ่มนี้",
+  myGroupAvatar: "ภาพโปรไฟล์กลุ่มของฉัน",
+  inviteLink: "ลิงก์เชิญ",
+  inviteTips:
+    "ผู้ใช้ที่ติดตั้งแอปนี้จะสามารถเข้าร่วมกลุ่มของคุณผ่านลิงก์นี้ได้",
+  inviteLinkCopy: "ลิงก์เชิญถูกคัดลอกแล้ว",
+  shareLink: "แชร์ลิงก์",
+  manageLink: "จัดการลิงก์เชิญ",
+  copyLink: "คัดลอกลิงก์",
+  deleteLink: "ลบลิงก์",
+  deleteLinkTipsTitle: "คุณแน่ใจหรือไม่ว่าต้องการยกเลิกลิงก์นี้?",
+  deleteLinkTipsDetail:
+    "คุณต้องการยกเลิกลิงก์เชิญนี้หรือไม่? เมื่อยกเลิกแล้ว ผู้อื่นจะไม่สามารถเข้าร่วมกลุ่มนี้ได้",
+  linkManage: "การจัดการลิงก์",
+  openManage: "เมื่อเปิดแล้ว ผู้ดูแลหรือผู้ดูแลระบบจะต้องอนุมัติก่อนเข้ากลุ่ม",
+  timeValid: "จำกัดเวลาที่ถูกต้อง",
+  linkInvalidTips: "ลิงก์เชิญจะหมดอายุหลังจากวันที่นี้ และไม่",
+  opened: "เปิดแล้ว",
+  lanchProtect: "ป้องกันเมื่อเริ่มต้น",
+  noProtect: "ไม่จำเป็นต้องป้องกัน",
+  lockSetting: "ตั้งค่าการปลดล็อค",
+  drawLine: "วาดรูปแบบการปลดล็อค",
+  drawOldLine: "วาดรูปแบบการปลดล็อคเก่าของคุณ",
+  drawNewLine: "วาดรูปแบบการปลดล็อคใหม่ของคุณ",
+  setGesturePassword: "ตั้งรหัสผ่านด้วยเครื่องหมาย",
+  checkGesturePassword: "ตรวจสอบรหัสผ่านด้วยเครื่องหมาย",
+  needJoinPoint: "ต้องเชื่อมต่อจุดอย่างน้อย 4 จุด โปรดวาดใหม่",
+  noFriendAdd: "ไม่มีเพื่อนที่สามารถเพิ่ม",
+  noFriendDelete: "ไม่มีเพื่อนที่สามารถลบได้",
+  noVerify: "ต้องการการยืนยันเมื่อเพิ่มฉันเป็นเพื่อน",
+  drawAgain: "โปรดวาดอีกครั้ง",
+  checkSuccessful: "ตรวจสอบสำเร็จ",
+  notInCommon: "ไม่ตรงกันกับการวาดครั้งก่อน โปรดวาดใหม่",
+  changeGesturePassword: "เปลี่ยนรหัสผ่านด้วยเครื่องหมาย",
+  toChange: "ไปเปลี่ยน",
+  change: "เปลี่ยน",
+  openSuccess: "เปิดใช้งานสำเร็จ",
+  closeSuccess: "ปิดใช้งานสำเร็จ",
+  hasBeenMember: "เป็นสมาชิกของกลุ่มแล้ว ไม่ต้องเพิ่มอีกครั้ง",
+  joinGroup: "เข้าร่วมกลุ่ม",
+  checking: "รอการตรวจสอบจากผู้ดูแล",
+  noUnlock: "ไม่สามารถปลดล็อค?",
+  inputGesture: "โปรดป้อนรหัสผ่านด้วยเครื่องหมาย",
+  faceDetect: "โปรดทำการตรวจจับใบหน้า",
+  fingerDetect: "โปรดทำการตรวจจับนิ้วมือ",
+  tryUnlocking: "โปรดลอง: ไม่สามารถปลดล็อค?",
+  countRemain: "รหัสผิด คุณยังสามารถป้อนได้อีก %s ครั้ง",
+  reLoginUnlock: "เข้าสู่ระบบใหม่เพื่อปลดล็อค",
+  selectVerityType: "โปรดเลือกวิธีการตรวจสอบ ",
+  currentTypeNotSupport: "ประเภทปัจจุบันไม่รองรับ",
+  //-------------
+  updateNewVersion: "พบเวอร์ชันใหม่",
+  updateOkUpdate: "อัปเดตทันที",
+  updateOpenDownloadFailed: "เปิดการดาวน์โหลดล้มเหลว",
+  updateCurrentIsNew: "เวอร์ชันปัจจุบันเป็นเวอร์ชันล่าสุดแล้ว",
+  newVersionNotFound:
+    "ไม่พบลิงก์เวอร์ชันล่าสุด คุณสามารถเข้าชมเว็บไซต์เพื่อดาวน์โหลดได้",
+  openUrlFailed: "ลิงก์ไม่ถูกต้อง",
+  qmvMsgNotExit: "[ไม่มีเนื้อหาที่อ้างอิง]",
+  qmvMsgNotSupport: "[ไม่รองรับการแสดงเนื้อหาที่อ้างอิง]",
+  dataError: "ข้อมูลผิดพลาด",
+  userNotBindEmail: "ผู้ใช้ยังไม่ได้ผูกอีเมล",
+  userNotRegister: "ผู้ใช้ยังไม่ได้ลงทะเบียน",
+  checkError: "การตรวจสอบล้มเหลว",
+  csvTitle: "การตั้งค่าการสนทนา",
+  csvSetTopMsg: "ตั้งค่าการสนทนาด้านบน",
+  csvSetOptMsg: "ไม่รบกวนข้อความ",
+  csvSetDisableMsg: "บล็อกข้อความ",
+  csvClearMsg: "ล้างประวัติสนทนา",
+  csvClearLocal: "ล้างประวัติสนทนาที่เก็บไว้ในอุปกรณ์นี้เท่านั้น",
+  csvClearUser: "ล้างประวัติสนทนาทั้งในอุปกรณ์นี้และกับ%s",
+  csvSetErrorTip: "การตั้งค่าล้มเหลว โปรดตรวจสอบการเชื่อมต่ออินเทอร์เน็ต",
+  gmiTitle: "ชื่อกลุ่ม:",
+  gmiSetTalk: "เปิดการสนทนาเข้ารหัส",
+  gmiSetMute: "ตั้งค่าการปิดเสียงในกลุ่ม",
+  gmiDeleteUser: "ลบออกจากกลุ่มนี้",
+  gmiMuteTo: "ปิดเสียงถึง ",
+  gmiError1: "ไม่พบข้อมูลสมาชิกนี้ อาจถูกเอาออกจากกลุ่มแชท",
+  gmiError2: "ไม่พบข้อมูลสมาชิกของคุณในกลุ่ม อาจถูกเอาออกจากกลุ่มแชท",
+  gmiError3: "คุณแน่ใจว่าต้องการเอาผู้ใช้นี้ออก?",
+  gmiError4: "เมื่อเอาสมาชิกนี้ออกจากกลุ่ม จะไม่สามารถส่งหรือรับข้อความได้",
+  gmiError5: "คุณไม่มีสิทธิ์ลบผู้ดูแลระบบนี้",
+  gmiError6: "คุณไม่มีสิทธิ์ลบสมาชิกนี้",
+  gmiError7: "ยกเลิกการปิดเสียงแล้ว",
+  gmiError8: "คุณไม่มีสิทธิ์ยกเลิกการปิดเสียงสมาชิกดูแลระบบนี้",
+  gmiError9: "คุณไม่มีสิทธิ์ยกเลิกการปิดเสียงสมาชิกนี้",
+  gmiError10: "คุณไม่มีสิทธิ์ปิดเสียงสมาชิกดูแลระบบนี้",
+  gmiError11: "คุณไม่มีสิทธิ์ปิดเสียงสมาชิกนี้",
+  gmiError12: "ยกเลิกการปิดเสียงแล้ว",
+  gmiGroupOwnerNotFound: "โหลดข้อมูลกลุ่มล้มเหลว",
+  smmvTitle: "ระยะเวลาการปิดเสียง",
+  smmvMuteTime: "เลือกระยะเวลาการปิดเสียง",
+  smmvMuteTime_10m: "10 นาที",
+  smmvMuteTime_1hour: "1 ชั่วโมง",
+  smmvMuteTime_12hour: "12 ชั่วโมง",
+  smmvMuteTime_1day: "1 วัน",
+  smmvMuteTime_30day: "30 วัน",
+  smmvMuteTime_7day: "7 วัน",
+  egnpTitle: "แก้ไขชื่อกลุ่มแชท",
+  egnpSetGroupName: "โปรดตั้งชื่อกลุ่ม",
+  egnpSetTextDesc: "โปรดตั้ง 1-15 ตัวอักษร",
+  egnpSetTitleNoPermission: "คุณไม่มีสิทธิ์แก้ไขชื่อกลุ่มแชท",
+  egnpSetFailed: "การแก้ไขล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  setGroupNameHint: "โปรดตั้งชื่อกลุ่ม",
+  givTitle: "แก้ไขชื่อกลุ่มแชท",
+  givGroupName: "ชื่อกลุ่ม",
+  givGroupFace: "รูปโปรไฟล์กลุ่ม",
+  gmsvTitle: "จัดการกลุ่ม",
+  gmsvSetManager: "ตั้งเป็นผู้ดูแล",
+  gmsvToSet: "ไปที่การตั้งค่า",
+  gmsvFindMsg: "ค้นหาบันทึกแชท",
+  gmsvFindMsgDesc:
+    "เปิดใช้งานเพื่อให้สมาชิกเข้ากลุ่มเห็นข้อความย้อนหลังเมื่อเร็วๆ นี้",
+  gmsvMute: "ปิดเสียงทั้งหมด",
+  gmsvMuteDesc:
+    "เมื่อเปิดใช้งาน จะอนุญาตให้เฉพาะเจ้าของกลุ่มและผู้ดูแลเท่านั้นที่สามารถพูดได้",
+  gmsvApply: "ยืนยันการเข้ากลุ่ม",
+  gmsvApplyDesc:
+    "เมื่อเปิดใช้งาน จำเป็นต้องมีการยืนยันจากเจ้าของกลุ่มหรือผู้ดูแลเพื่อเข้ากลุ่ม",
+  gmsvSetManagerTip: "เฉพาะเจ้าของกลุ่มเท่านั้นที่สามารถตั้งเป็นผู้ดูแลได้",
+  gmsvSetMuteTipOn: "ปิดเสียงทั้งหมดแล้ว",
+  gmsvSetNuteTipOff: "ยกเลิกการปิดเสียงทั้งหมดแล้ว",
+  gmsvApplyTipOn: "การยืนยันการเข้ากลุ่มเปิดใช้งานแล้ว",
+  gmsvApplyTipOff: "การยืนยันการเข้ากลุ่มปิดใช้งานแล้ว",
+  gmsvFindGroupErr: "ล้มเหลวในการรับข้อมูลกลุ่ม",
+  gmsvFindMsgOn: "การค้นหาบันทึกแชทเปิดใช้งานแล้ว",
+  gmsvFindMsgOff: "การค้นหาบันทึกแชทปิดใช้งานแล้ว",
+  gmsvSetFailed: "การตั้งค่าล้มเหลว",
+  gsvTitle: "รายละเอียดกลุ่ม",
+  gsvGroupId: "รหัสกลุ่ม",
+  gsvGroupMember: "สมาชิกกลุ่ม",
+  gsvGroupMemberValue: "ทั้งหมด {num} คน",
+  gsvGroupNotification: "ประกาศกลุ่ม",
+  gsvMyName: "ชื่อเล่นของฉันในกลุ่มนี้",
+  gsvMyFace: "รูปโปรไฟล์ของฉันในกลุ่มนี้",
+  gsvGroupManager: "ผู้จัดการกลุ่ม",
+  gsvGroupApply: "การยืนยันการเข้ากลุ่ม",
+  gsvFindMsg: "ค้นหาบันทึกแชท",
+  gsvSetTop: "ตั้งเป็นด้านบน",
+  gsvSetOpt: "ปิดเสียงข้อความ",
+  gsvDeleteMsg: "ลบบันทึกแชท",
+  gsvDeleteLocal: "ลบบันทึกแชทที่เก็บไว้ในอุปกรณ์เท่านั้น",
+  gsvDeleteAllMsg: "ล้างบันทึกแชทของทุกคนทั้งในอุปกรณ์และที่เก็บไว้ในอุปกรณ์",
+  gsvDeleteOtherMsg: '“ลบบันทึกการแชททັງในเครื่องและของฝ่ายตรงข้าม',
+  gsvGroupDelete: "คุณแน่ใจหรือว่าต้องการยุติการแชทในกลุ่มนี้?",
+  gsvOutGroup: "คุณแน่ใจหรือว่าต้องการออกจากกลุ่มนี้?",
+  gsvNoNotification: "ไม่มีประกาศในขณะนี้",
+  gsvClearSuccess: "ล้างเรียบร้อย",
+  gsvClearFailed: "ล้างล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  cvAllPeople: "ทุกคน",
+  cvVideo: "[วิดีโอ]",
+  cvPicture: "[รูป]",
+  cvFile: "[ไฟล์]",
+  cvVoice: "[เสียง]",
+  cvNotSupportMsg: "ข้อความที่ไม่รองรับในขณะนี้",
+  cvSendMsgErrorNoPermission:
+    "เนื่องจากการตั้งค่าสิทธิ์ของอีกฝ่าย คุณไม่สามารถส่งข้อความถึงเขาได้",
+  cvSendMsgPnMute: "อยู่ในโหมดติดกุญแจ ไม่สามารถส่งข้อความได้",
+  cvCopyMsg: "คัดลอกลงคลิปบอร์ดแล้ว",
+  cvCopyMsgNotSupport: "ข้อความที่ไม่รองรับในขณะนี้",
+  cvdeleteLocal: "ลบจากอุปกรณ์",
+  cvdeleteLocalAndServer: "ลบจากอุปกรณ์และเซิร์ฟเวอร์",
+  cvdeleteLocalAndServerUser: "ลบจากอุปกรณ์และ {name}",
+  cvClearMsgTip: "ล้างข้อความแชทเรียบร้อยแล้ว",
+  cvGroupCreateSuccess: "สร้างกลุ่มแชทสำเร็จ",
+  cvGroupCreateSuccessTip1:
+    "ยินดีด้วยที่สร้างกลุ่มสำเร็จ คลิกที่ปุ่มด้านล่างเพื่อเชิญเพื่อนเข้าร่วมกลุ่ม",
+  cvGroupCreateSuccessGo: "เชิญเพื่อนเข้าร่วม",
+  cvGroupNotification: "ประกาศกลุ่ม:",
+  sendMsg: "ส่งข้อความ",
+  cvOnlineCount: "{count} คนออนไลน์",
+  cvUserCount: "ทั้งหมด {count} คน",
+  cvNotAtUser: "ยังไม่มีคนกลุ่มไหนได้@อ๋อ รีบไปเพิ่มสมาชิกเลย",
+  all: "ทั้งหมด",
+  clCloseConversation: "ยุบบทสนทนาที่ติดปัญหา",
+  clOpenConversation: "บทสนทนาที่ถูกติดด้านบน",
+  clNoConversation: "ไม่มีการสนทนาล่าสุด",
+  clTitle: "การสนทนา",
+  clDelete: "การสนทนานี้จะถูกลบ",
+  clDeleteDesc: "การลบการสนทนานี้จะลบบันทึกการสนทนาในอุปกรณ์",
+  clDeleteSel: "คุณยังไม่ได้เลือกการสนทนา",
+  clDeleteSel1: "การสนทนานี้จะถูกลบ",
+  clDeleteSel2: "การสนทนาเหล่านี้จะถูกลบ",
+  clDeleteDesc2: "การลบการสนทนาเหล่านี้จะลบบันทึกการสนทนาในอุปกรณ์",
+  homeItem0: "การสนทนา",
+  homeItem1: "รายชื่อผู้ติดต่อ",
+  homeItem2: "ของฉัน",
+  exitTip: "คลิกปุ่มย้อนกลับอีกครั้งเพื่อออก",
+  mineSigEmpty: "ผู้ใช้นี้เป็นคนขี้เกียจมาก ยังไม่มีลายเซ็นต์~",
+  uaProtocol: "ข้อตกลงการให้บริการของผู้ใช้",
+  savSearchTip: "ค้นหาเร็วสำหรับเนื้อหาการสนทนา",
+  savMedia: "รูปภาพ/วิดีโอ",
+  searchEmptyTip: "ไม่พบบันทึกการสนทนาที่เกี่ยวข้อง",
+  savSearchMsg: "รายการบันทึกการสนทนาที่เกี่ยวข้อง",
+  savConversation: "การสนทนา",
+  savMsg: "บันทึกการสนทนา",
+  savConversationNotFound: "ไม่พบการสนทนา",
+  savMsgNotFound: "ไม่พบข้อมูลนี้",
+  samTitle: "สื่อ",
+  samTimeFormat: "ปี %s เดือน %s",
+  notSupportType: "ไม่รองรับประเภทนี้",
+  media: "สื่อ",
+  openUrl: "เปิดลิงก์",
+  lkAddGroupUrl: "ลิงก์เข้าร่วมกลุ่ม",
+  lkAddOtherUrl: "ลิงก์ภายนอก สามารถเปิดด้วยเบราว์เซอร์เริ่มต้น",
+  lkUnknowUrl: "ลิงก์ที่ไม่รู้จัก",
+  openUrlFailed1: "เปิดลิงก์ล้มเหลว",
+  yszcTitle: "นโยบายความเป็นส่วนตัว",
+  slsmTitle: "ประกาศทางกฎหมาย",
+
+  ctmRemove: "เอาออก",
+  ctmOkRemove: "ยืนยันการเอาออก",
+  ctmTopMsgCount: "ทั้งหมด {count} ข้อความ",
+  ctmEmptyText: "ไม่มีข้อความด้านบน",
+  recordTimeShort: "เวลาบันทึกสั้นเกินไป",
+  sendCodeExceErr: "ส่งรหัสยืนยันล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  bindEmailExecErr: "ผูกอีเมลล์ล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  ctmSuccess: "การตั้งเป็นด้านบนสำเร็จ",
+  ctmRemoveSuccess: "การลบข้อความด้านบนสำเร็จ",
+  ctmMsgNotFound: "ข้อความนี้ไม่มีอยู่",
+  cvFirstTip:
+    "ข้อมูลและการสนทนาในการสนทนานี้ได้รับการเข้ารหัสปลายทางจนถึงปลายทาง",
+  clearGroupNotification: "ล้างประกาศกลุ่มแล้ว",
+  publicGroupNotification: " ประกาศ",
+  dialog_tip1: " คำแนะนำ",
+  deleteGroups:
+    " หลังจากลบกลุ่มแล้วจะไม่สามารถกู้คืนได้ คุณแน่ใจหรือไม่ว่าต้องการลบกลุ่มนี้?",
+  dialog_tip_token_invaild: " เข้าสู่ระบบหมดอายุ โปรดเข้าสู่ระบบอีกครั้ง",
+  notify_new_msg_title: "คุณได้รับข้อความใหม่",
+  notify_new_msg_msg: "เนื้อหาข้อความ: .....",
+  dataError1: "ข้อมูลผิดพลาด",
+  groupApply: " การสมัครเข้ากลุ่ม",
+  muteLate: "ปิดไมค์หลังจาก",
+  groupMuteing: "กลุ่มอยู่ในโหมดปิดไมค์",
+  modifyGroupName: "แก้ไขชื่อกลุ่ม",
+  groupMemberNotFound: "ไม่พบข้อมูลสมาชิกกลุ่ม",
+  deleteGround: "ลบกลุ่ม",
+  bindEmailTipTitle: "ผูกอีเมล",
+  bindEmailTipContent: "เพื่อความปลอดภัยของบัญชีของคุณ โปรดผูกอีเมลของคุณ",
+  bindEmailTipOk: "ไปที่การผูก",
+  bindEmailTipCancle: "ไม่ผูกตอนนี้",
+  alreadyBeOwner: "คุณเลือกเป็นเจ้าของกลุ่มแล้ว มีสิทธิ์การจัดการสูงสุดแล้ว",
+  managerApplying: "รอการตรวจสอบเป็นผู้ดูแล",
+  quote: "อ้างถึง",
+  request_exception: "ข้อขัดข้องในการร้องขอ",
+  clearMsg: "ล้างข้อความ",
+  pressToSay: "กดค้างเพื่อพูด",
+  slideToCancelSend: "ลื่นไปด้านบนเพื่อยกเลิกการส่ง",
+  releaseToEnd: "ปล่อยเพื่อจบ",
+  releaseToCancelSend: "ปล่อยนิ้วเพื่อยกเลิกการส่ง",
+  invalidVoiceMessage: "ข้อความเสียงไม่ถูกต้อง",
+  hit: "ตี",
+  downloadingCache: "กำลังดาวน์โหลดแคช...",
+  unableToRecognize: "ไม่สามารถรับรู้ได้",
+  scanResult: "ผลการสแกน",
+  register_fail:
+    "การลงทะเบียนล้มเหลว โปรดตรวจสอบการเชื่อมต่ออินเทอร์เน็ตแล้วลองอีกครั้ง",
+  skip: "ข้าม",
+  toUse: "ใช้เดี๋ยวนี้",
+  sideToSide: "การเข้ารหัสปลายทางถึงปลายทาง",
+  design: "การออกแบบ",
+  guide1:
+    "ส่งข้อความและถ่ายทอดข้อมูลโดยเข้ารหัส ใช้เฉพาะการอ่านของตนเองเท่านั้น",
+  guide2: "การสื่อสารอย่างอิสระตามวิธีของคุณเอง",
+  guide3: "แพลตฟอร์มการสื่อสารที่ปลอดภัยที่สร้างขึ้นให้เพื่อคุณ",
+  inputGroupAc: "โปรดใส่ประกาศกลุ่ม (จำกัดตัวอักษร 0-500)",
+  clickToEnjoy:
+    "คลิกลิงก์เพื่อบันทึกหรือคัดลอกเนื้อหานี้ และเปิดแอป [球帝帶] เพื่อเข้าร่วมกลุ่ม",
+  createOK: "สร้างสำเร็จ",
+  noPravcy: "คุณไม่มีสิทธิ์ในการสร้างกลุ่ม",
+  groupNumberToTop: "จำนวนกลุ่มถึงขีดจำกัด",
+  createFail: "การสร้างล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  create: "สร้าง",
+  uploadGroupAvatar: "อัปโหลดรูปโปรไฟล์กลุ่ม",
+  useNewPassword: "เปลี่ยนรหัสผ่านสำเร็จ กำลังกลับไปที่หน้าเข้าสู่ระบบ",
+  error_14: "ข้อผิดพลาดของเซิร์ฟเวอร์ (14)",
+  error_500: "ข้อผิดพลาดของเซิร์ฟเวอร์ (500)",
+  error_1000: "โทเค็นลายเซ็นผู้ใช้ไม่ถูกต้อง",
+  error_1001: "พารามิเตอร์ไม่ถูกต้อง",
+  error_1002: "เวอร์ชันปัจจุบันเป็นเวอร์ชันล่าสุดแล้ว",
+  error_6001: "ชื่อผู้ใช้นี้ถูกจดทะเบียนแล้ว",
+  error_6003: "รหัสผ่านต้องประกอบด้วยตัวอักษรและตัวเลขระหว่าง 6-15 ตัว",
+  error_6004: "การตรวจสอบชื่อผู้ใช้ผิดพลาด",
+  error_6005: "รหัสผ่านไม่ถูกต้อง กรุณากรอกใหม่อีกครั้ง",
+  error_6006: "จำนวนครั้งที่รหัสผ่านผิดวันนี้เกินขีดจำกัด",
+  error_6007: "ผู้ใช้ไม่มีอยู่",
+  error_6008: "รหัสผ่านเก่าผิด โปรดป้อนใหม่",
+  error_6009: "รหัสผ่านเก่าเหมือนกับรหัสผ่านใหม่ โปรดป้อนใหม่",
+  error_6010: "การรับรหัสยืนยันบ่อยเกินไป",
+  error_6011: "รหัสยืนยันไม่ถูกต้อง กรุณาลองอีกครั้ง",
+  error_6012: "รหัสยืนยันหมดอายุ",
+  error_6013: "ครั้งล้มเหลวมากเกินไปในการยืนยันรหัสยืนยัน",
+  error_6014: "รหัสยืนยันถูกใช้แล้ว",
+  error_6015: "ไม่พบอีเมล",
+  error_6016: "อีเมลถูกผูกไว้กับผู้ใช้อื่นแล้ว โปรดใส่ใหม่",
+  error_6017: "รหัสยืนยันไม่มีอยู่",
+  error_6018: "บัญชีผู้ใช้นี้ถูกระงับแล้ว",
+  error_6019: "หมายเลขโทรศัพท์มีการผูกกับผู้อื่นแล้ว",
+  error_6020: "ที่อยู่อีเมลถูกผูกกับผู้อื่นแล้ว",
+  error_6021: "ที่อยู่อีเมลไม่ถูกต้อง โปรดป้อนใหม่",
+  error_6022: "หมายเลขโทรศัพท์ไม่ถูกต้อง โปรดป้อนใหม่",
+  error_6023: "บัญชีนี้ถูกระงับ ไม่สามารถกู้คืนรหัสผ่านได้ชั่วคราว",
+  error_6024: "บัญชีนี้ยังไม่ผูกอีเมล ชั่วคราวไม่สามารถกู้คืนรหัสผ่านได้",
+  error_6025:
+    "บัญชีนี้ยังไม่ผูกหมายเลขโทรศัพท์ ชั่วคราวไม่สามารถกู้คืนรหัสผ่านได้",
+  error_6026: "หมายเลขโทรศัพท์ถูกผูกกับผู้อื่นแล้ว โปรดป้อนใหม่",
+  error_6030: "ไม่มีการกำหนดค่าอีเมลเซิร์ฟเวอร์",
+  error_6031: "โปรดป้อนหมายเลขโทรศัพท์ที่ถูกต้อง",
+  error_6032: "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง",
+  error_100002: "จำนวนข้อความด้านบนถึงขีดจำกัดแล้ว",
+  error_100003: "ข้อความนี้ได้ถูกตั้งเป็นด้านบนแล้ว",
+  error_api: "ข้อขัดข้องในการร้องขอ",
+  error_http: "ข้อผิดพลาดในการร้องขอเครือข่าย",
+  error_http_11: "การเชื่อมต่อเครือข่ายหมดเวลา",
+  error_http_12: "การเชื่อมต่อเครือข่ายหมดเวลา",
+  error_http_13: "การเชื่อมต่อเครือข่ายหมดเวลา",
+  error_http_14: "ข้อผิดพลาดใบรับรองเครือข่าย",
+  error_http_15: "ข้อมูลการร้องขอผิดพลาด",
+  error_http_16: "การร้องขอถูกยกเลิกแล้ว",
+  error_http_17: "การเชื่อมต่อเครือข่ายหมดเวลา",
+  error_http_18: "ข้อผิดพลาดภายในการร้องขอเครือข่าย",
+  error_sdk_err_1002: "ไม่มีสิทธิ์ดำเนินการ",
+  error_sdk_err: "การดำเนินการล้มเหลว",
+  search_hine_1: "โปรดใส่เนื้อหาที่ต้องการค้นหา",
+  str_no_data: "ไม่มีข้อมูลในขณะนี้",
+  str_no_net: "ไม่มีการเชื่อมต่ออินเทอร์เน็ต",
+  download_not_support_type: "รูปแบบที่ไม่รองรับ",
+  download_save_at: "ไฟล์ถูกบันทึกที่: ",
+  download_not_url: "ไม่พบลิงก์ดาวน์โหลด",
+  download_file_success: "บันทึกสำเร็จ คุณสามารถดูในอัลบั้ม",
+  download_failed_file: "การบันทึกไฟล์ล้มเหลว",
+  download_failed: "การดาวน์โหลดล้มเหลว",
+  loading_failed_retry: "โหลดล้มเหลว คลิกลองอีกครั้ง",
+  loading_ing: "กำลังโหลด...",
+  str_online_later_minute: "ออนไลน์เมื่อ %s นาทีที่แล้ว",
+  str_online_later_hour: "ออนไลน์เมื่อ %s ชั่วโมงที่แล้ว",
+  str_online_later_llg: "ไม่ออนไลน์มานานแล้ว",
+  str_online_later_yesterday: "เมื่อวานนี้ออนไลน์",
+  str_yesterday: "เมื่อวานนี้",
+  str_online_later_near: "ออนไลน์เมื่อไม่นานมานี้",
+  str_minute: "นาที",
+  clean_notice: "ล้างประกาศ",
+  clean_notice_1: "คุณแน่ใจหรือว่าต้องการล้างประกาศของกลุ่ม?",
+  publish_notice: "เผยแพร่ประกาศ",
+  publish_notice_remind: "การเผยแพร่ประกาศนี้จะแจ้งเตือนสมาชิกกลุ่มทุกคน",
+  quit_edit: "ออกจากการแก้ไข",
+  quit_the_edit: "ออกจากการแก้ไขนี้?",
+  continue_edit: "ดำเนินการต่อ",
+  publish_success: "เผยแพร่สำเร็จ",
+  face_success: "การปลดล็อกด้วยใบหน้าเปิดใช้งานสำเร็จ",
+  finger_success: "การปลดล็อกด้วยลายนิ้วมือเปิดใช้งานสำเร็จ",
+  groupDismissed: "กลุ่มนี้ได้ถูกยุบ",
+  hasOut: "หมดอายุแล้ว",
+  otherLoginStyle: "วิธีการเข้าสู่ระบบอื่น",
+  otherRegisterStyle: "วิธีการลงทะเบียนอื่น",
+  hasAccount: "มีบัญชีแล้ว ไปที่หน้าเข้าสู่ระบบ",
+  mobileCode: "รหัสยืนยันทางโทรศัพท์มือถือ",
+  codeSendTo: "รหัสยืนยันถูกส่งไปที่",
+  inputNumber: "โปรดใส่หมายเลขโทรศัพท์",
+  bindPhone: "ผูกหมายเลขโทรศัพท์",
+  bindPhoneSuccess: "ผูกหมายเลขโทรศัพท์สำเร็จ",
+  bindPhoneTipChange:
+    "หากหมายเลขโทรศัพท์ของคุณไม่ใช้งานอีกต่อไป โปรดเปลี่ยนทันที",
+  please_input_email: "โปรดใส่ที่อยู่อีเมล",
+  findPassByEmailTip: "ค้นหารหัสผ่านโดยใช้อีเมล",
+  findPassByPhoneTip: "ค้นหารหัสผ่านโดยใช้หมายเลขโทรศัพท์",
+  resetPass: "รีเซ็ตรหัสผ่าน",
+  current_bind_phone: "หมายเลขโทรศัพท์ที่ผูกอยู่ขณะนี้:",
+  reget: "ขอรหัสใหม่",
+  getVerifyCode: "รับรหัสยืนยัน",
+  alreadyRegister: "หมายเลขโทรศัพท์นี้ได้ลงทะเบียนแล้ว",
+  alreadyRegister2: "ที่อยู่อีเมลนี้ได้ลงทะเบียนแล้ว",
+  netErrorRetry: "มีปัญหาเครือข่าย กรุณาคลิกเพื่อโหลดหน้าใหม่~",
+  newPhoneNumber: "หมายเลขโทรศัพท์ใหม่",
+  addFriendText1: "เพิ่มเป็นเพื่อน",
+  qrSaveFail: "การบันทึก QR ล้มเหลว",
+  qrSavePhoto: "QR ได้ถูกบันทึกไว้ในอัลบั้ม",
+  userId: "รหัสผู้ใช้：",
+  addMeToFriend: "เพิ่มฉันเป็นเพื่อน",
+  validTime: "หมดอายุเมื่อ",
+  clickRefresh: "คลิกเพื่อรีเฟรช",
+  qrUseCount: "QR นี้มีอายุ {count} ครั้ง",
+  share: "แชร์",
+  savePhoto: "บันทึกรูปภาพ",
+  iAm: "ฉันคือ",
+  addFriendSuccessful: "เพิ่มเพื่อนสำเร็จ",
+  addFriendFaceToFace: "เพิ่มเพื่อนโดยการพบหน้า",
+  faceToFace: "เพิ่มเพื่อนโดยการพบหน้า",
+  inputSameKey: "ต่อไปนี้คือเพื่อนที่ป้อนตัวเลขเดียวกัน",
+  sameKeyAddFriend: "เพิ่มเพื่อนโดยป้อนตัวเลขเดียวกันกับเพื่อน",
+  self: "ตัวเอง",
+  age: "ปี",
+  confirmAddFriend: "ยืนยันการเพิ่มเพื่อน",
+  inputUserId: "โปรดใส่รหัสผู้ใช้",
+  myQr: "QR ของฉัน",
+  back: "ย้อนกลับ",
+  canNotAddSelf: "คุณไม่สามารถเพิ่มตนเองเป็นผู้ติดต่อได้",
+  notExsit: "ผู้ใช้นี้ไม่มีอยู่",
+  searchUserId: "ค้นหารหัสผู้ใช้：",
+  remarkInfo: "โปรดระบุข้อมูลยืนยัน",
+  applyRemark: "หมายเหตุ",
+  last4Number: "โปรดป้อนหลักสี่หลักของหมายเลขโทรศัพท์ที่เข้าสู่ระบบของคู่สนทนา",
+  checkLast4Number: "ตรวจสอบหลักสี่หลักสุดท้ายของหมายเลขโทรศัพท์",
+  addFriendApply: "สมัครเพื่อเพิ่มเพื่อน",
+  friendNumberCatchTopLimit: "จำนวนเพื่อนของคุณมีจำกัดแล้ว",
+  friendNumberCatchTopLimitCurrentDay: "เพิ่มเพื่อนในวันนี้เต็มแล้ว",
+  codeInvalid: "รหัสผิดพลาดหรือหมดอายุ โปรดลองอีกครั้ง",
+  shareFail: "การแชร์ล้มเหลว",
+  error_1003: "โปรดลองอีกครั้งในภายหลัง",
+  error_6033: "รหัสไม่ถูกต้องหรือหมดอายุ โปรดลองใหม่",
+  error_6034: "จำนวนเพื่อนทั้งหมดมีขีดจำกัดแล้ว",
+  error_6035: "การเพิ่มเพื่อนในวันนี้เต็มแล้ว",
+  error_6036: "หมายเลขโทรศัพท์มือถือของผู้ใช้นี้ว่างเปล่า",
+  error_6037: "การตรวจสอบหลักสุดท้ายของโทรศัพท์มือถือล้มเหลว",
+  error_6040: "กลุ่มนี้มีอยู่แล้ว",
+  error_6050: "รหัส QR หมดอายุแล้ว",
+  error_6051: "จำนวนการใช้งานรหัส QR ในวันนี้เต็มแล้ว",
+  error_6052: "จำนวนการใช้งานรหัส QR มีขีดจำกัดแล้ว",
+  error_6053: "จำนวนการใช้งานสแกน QR ในวันนี้เต็มแล้ว",
+  error_6054: "ผู้อื่นได้เพิ่มคุณเป็นเพื่อนแล้ว",
+  error_6055: "รหัสไม่ถูกต้องหรือหมดอายุ โปรดลองใหม่",
+  error_6066: "ยอดเงินในบัญชีไม่เพียงพอ",
+  error_6067: "แพ็คเกจสีแดงหมดแล้ว",
+  error_6068: "แพ็คเกจสีแดงหมดอายุแล้ว",
+  error_6069: "ไม่สามารถรับแพ็คเกจสีแดงพิเศษได้",
+  error_6070: "คุณได้รับแพ็คเกจสีแดงแล้ว ไม่สามารถรับเพิ่มได้อีก",
+  deletedByFriendHint: "คุณยังไม่ได้เป็นเพื่อนกับเขา",
+  deletedByFriendHint1: "คุณยังไม่ได้เป็นเพื่อนกับเขา",
+  deletedByFriendHint2: "เพิ่มเพื่อน",
+  deletedByFriendHint3: "ดำเนินการต่อการสนทนา",
+  gotoAddFriend: "ไปเพิ่มเพื่อน",
+  addFriendGotoGroup: "เชิญเพื่อนเข้ากลุ่ม",
+  notContacts: "ไม่มีผู้ติดต่อ",
+  notContactsFound: "ไม่พบเพื่อนที่เกี่ยวข้องกับ {name}",
+  remarkStr: "หมายเหตุ",
+  remarkStrHint: "โปรดใส่หมายเหตุ, 0-50 อักขระ",
+  deleteConfirm: "คุณแน่ใจหรือไม่ว่าต้องการลบเพื่อน",
+  deleteFriend: "ลบเพื่อน",
+  searchContact: "ค้นหาผู้ติดต่อ",
+  notGroupTip: "ยังไม่ได้เข้าร่วมการแชทกลุ่ม",
+  notAddFriend: "ยังไม่ได้เพิ่มเพื่อนใหม่",
+  friendApplyAdd: "คำขอเพื่อน",
+  addSuccess: "เพิ่มเพื่อนสำเร็จ",
+  hasSelectFriend: "เลือกเพื่อนแล้ว",
+  myBalance: "ยอดเงินคงเหลือของฉัน",
+  revokeMsgTip: "ยกเลิกข้อความ",
+  error_10050: "การดำเนินการล้มเหลว (ไม่พบบันทึก)",
+  set_manager_tip_1:
+    "คุณเลือกเป็นเจ้าของกลุ่มแล้ว มีสิทธิ์ในการจัดการสูงสุดแล้ว",
+  envelope: "ซองจดหมายแดง",
+  uidStr: "รหัสผู้ใช้",
+  showGetDetail: "ดูรายละเอียดการรับ",
+  waitOtherEnter: "รอให้คู่สนิทเข้าร่วม",
+  isFriend2SExit: "เป็นเพื่อนกันแล้ว ออกโดยอัตโนมัติใน 2 วินาที",
+  sendRedPacket: "ส่งอั่งเปา",
+  redPacketNumber: "จำนวนอั่งเปา",
+  ge: "ชิ้น",
+  total: "ทั้งหมด",
+  eachNumber: "จำนวนแต่ละ",
+  selectUser: "เลือกผู้ใช้",
+  number: "จำนวน",
+  redPacketType: "ประเภทอั่งเปา",
+  checkVerity: "การตรวจสอบความปลอดภัย",
+  balance: "ยอดคงเหลือในบัญชี",
+  sendTo: "รหัสยืนยันผ่านทาง SMS ถูกส่งไปที่",
+  pin: "สุ่มสลับอั่งเปา",
+  putong: "อั่งเปาทั่วไป",
+  zhuanshu: "อั่งเปาพิเศษ",
+  dajidali: "ขอให้โชคดีและร่ำรวย! ",
+  redPacketInfo: "รายละเอียดอั่งเปา",
+  best: "โชคดีที่สุด",
+  saveToAccount: "บันทึกลงบัญชีแล้ว",
+  minuteOut: "หมดไปในไม่กี่นาที",
+  hourOut: "หมดไปในไม่กี่ชั่วโมง",
+  showDetail: "ดูรายละเอียด",
+  maxMemberNumber: "จำนวนอั่งเปาต้องไม่เกินจำนวนสมาชิกในกลุ่มปัจจุบัน",
+  sended: "ที่ส่ง",
+  get: "ได้รับแล้ว",
+  waiting: "รอการรับ",
+  gong: "อั่งเปาทั้งหมด",
+  envelope_get_over: "อั่งเปาถูกรับครบแล้ว",
+  envelope_get: "ได้รับแล้ว",
+  de: "ของ",
+  envelope_get_message: "ข้อความการรับอั่งเปา",
+  bind_phone_please: "เพื่อความปลอดภัยของบัญชีของคุณ โปรดผูกหมายเลขโทรศัพท์",
+  delay_bind: "ยังไม่ผูก",
+  send_envelope_x: "อั่งเปาที่ส่ง",
+  send_envelope_back_all:
+    "อั่งเปานี้ไม่ได้รับการรับเป็นเวลากว่า 24 ชั่วโมง\nถูกส่งคืนแล้ว",
+  envelope_x_can_get: "สามารถรับได้เฉพาะ {name} เท่านั้น",
+  envelope_get_completed: "ช้าไปแล้ว อั่งเปาหมดแล้ว",
+  send_envelope_back_some:
+    "อั่งเปานี้ไม่ได้รับการรับเป็นเวลากว่า 24 ชั่วโมง\nส่วนหนึ่งถูกส่งคืนแล้ว",
+  envelope_x_personal: "อั่งเปาพิเศษสำหรับ %s",
+  envelope_normal: "อั่งเปาทั่วไป",
+  login_out_of_date: "การเข้าสู่ระบบหมดอายุ โปรดเข้าสู่ระบบใหม่",
+  get_envelope_completed: "ได้รับครบแล้ว",
+  x_is_personal: "พิเศษ",
+  error_6072: "มียอดเงินสูงสุดสำหรับอั่งเปาแต่ละรายแล้ว",
+  error_6073: "จำนวนของแต่ละอั่งเปาต้องไม่น้อยกว่า 0.01",
+  error_6074: "ฟังก์ชั่นอั่งเปาถูกปิดแล้ว",
+  distroyAccount: "ปิดบัญชี",
+  inComing: "รายได้",
+  outGoing: "รายจ่าย",
+  balance_order_detail: "รายละเอียดยอดคงเหลือ",
+  type: "ประเภท",
+  payType: "วิธีการชำระเงิน",
+  orderNo: "หมายเลขคำสั่งซื้อ",
+  time: "เวลา",
+  itemDataNotSupport: "เวอร์ชันปัจจุบันไม่รองรับ",
+  manager_change_account: "ผู้จัดการปรับบัญชี",
+  groupEnvelope: "อั่งเปากลุ่ม",
+  accountPay: "ชำระด้วยยอดคงเหลือ",
+  paySuccess: "ชำระเงินสำเร็จ",
+  groupEnvelopePersonal: "อั่งเปากลุ่ม - อั่งเปาพิเศษ",
+  groupEnvelopeNormal: "อั่งเปากลุ่ม - อั่งเปาปกติ",
+  changeAccount: "ปรับบัญชี",
+  groupEnvelopeRandom: "อั่งเปากลุ่ม - อั่งเปาสุ่ม",
+  groupEnvelopeAllBack: "อั่งเปากลุ่ม - คืนทั้งหมด",
+  groupEnvelopeSomeBack: "อั่งเปากลุ่ม - คืนบางส่วน",
+  distroyTips:
+    "เพื่อยืนยันความปลอดภัยของบัญชีของคุณ\nเราจะดำเนินการตรวจสอบต่อไปนี้ก่อนที่คุณจะทำการปิดบัญชี",
+  safeStatus: "บัญชีอยู่ในสถานะที่ปลอดภัย",
+  safeTips:
+    "โปรดตรวจสอบให้แน่ใจว่าบัญชีของคุณไม่มีการเปลี่ยนรหัสผ่าน การเปลี่ยนแปลงหมายเลขโทรศัพท์มือถือ / อีเมล หรือการดำเนินการที่เกี่ยวข้องกับความปลอดภัยอื่น ๆ และไม่มีความเสี่ยงที่บัญชีจะถูกขโมย",
+  strikeBalance: "การชำระยอดบัญชี",
+  strikeTips:
+    "หลังจากปิดบัญชีแล้ว ข้อมูลยอดคงเหลือของคุณจะถูกลบและไม่สามารถกู้คืนได้",
+  dataDelete: "ลบข้อมูลบัญชี",
+  deleteTips:
+    "หลังจากปิดบัญชีแล้ว ข้อมูลทั้งหมดในบัญชีนั้นจะถูกลบและไม่สามารถกู้คืนได้ ข้อมูลรวมถึงประวัติการสนทนาของคุณ การเข้าร่วมกลุ่มแชท และความสัมพันธ์กับเพื่อน",
+  applyDistroy: "ยื่นคำขอปิดบัญชี",
+  distroyConform: "แน่ใจหรือว่าต้องการที่จะปิดบัญชี?",
+  distroyConformTips:
+    "หลังจากปิดบัญชี คุณจะถูกออกจากระบบการเข้าสู่ระบบ กรุณาใช้ความระมัดระวัง!",
+  distroy: "ยืนยันการปิดบัญชี",
+  submitSuccess: "ส่งคำขอสำเร็จ",
+  submitted: "คำขอปิดบัญชีของคุณถูกส่งแล้ว!",
+  helpWord:
+    "แพลตฟอร์มจะดำเนินการตรวจสอบคำขอของคุณและลบข้อมูลทั้งหมดของคุณภายใน {day} วันทำการ หากต้องการความช่วยเหลือ โปรดติดต่อเราทางเว็บไซต์",
+  know: "ฉันเข้าใจแล้ว",
+  revoke: "ยกเลิกคำขอ",
+  revokeSuccess: "ยกเลิกคำขอสำเร็จ",
+  recover: "แน่ใจหรือว่าต้องการยกเลิกคำขอ?",
+  toNormal: "หลังจากยกเลิก สถานะบัญชีจะกลับมาเป็นปกติ",
+  beRecover: "ยืนยันการกู้คืน",
+  recoverSuccess: "กู้คืนสำเร็จ",
+  redPackageCountTip: "ยอดสุดท้ายของบัตรเงินสดต่ำสุดต้องไม่น้อยกว่า 0.01",
+  closeAccount: "ปิดบัญชี",
+  recoverAccount: "กู้คืนบัญชี",
+  recoverAccountTipTitle: "แน่ใจหรือว่าต้องการที่จะกู้คืนบัญชี?",
+  recoverAccountTipDesc: "หลังจากกู้คืน สถานะบัญชีจะกลับมาเป็นปกติ",
+  recoverAccountTipOk: "ยืนยันการกู้คืน",
+  closingAccount: "บัญชีอยู่ในขั้นตอนการตรวจสอบการปิดบัญชี",
+  closingAccountEndTime: " โดยคาดว่าจะเสร็จสิ้นการลบภายใน {num} วันทำการ",
+  error_6079: "คุณไม่ได้อยู่ในการสนทนากลุ่มและไม่สามารถรับได้",
+  error_6075: "คำขอซ้ำ",
+  error_6076: "ไม่พบบันทึกคำขอปิดบัญชี",
+  error_6077: "อยู่ในขั้นตอนการตรวจสอบการปิดบัญชี",
+  error_6078: "ไม่พบผู้ใช้หรือได้ทำการปิดบัญชีแล้ว โปรดตรวจสอบและยืนยัน",
+  error_video_pre_err: "เกิดข้อผิดพลาดในการสร้างไฟล์ การโหลดข้อมูลล้มเหลว",
+  err_upload_file: "การอัปโหลดล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  err_msg_send_failed: "การส่งล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  error_red_package_tip1: "หมดอายุแล้ว",
+  net_error_no_net:
+    "เครือข่ายไม่สามารถใช้งานได้ โปรดตรวจสอบการตั้งค่าเครือข่ายของคุณ",
+  error_6081: "การส่งล้มเหลว โปรดลองใหม่ในภายหลัง",
+  atTip: "มีคน{'@'}คุณ",
+  groupChatError: "โหลดเนื้อหาล้มเหลว โปรดลองอีกครั้ง",
+  legalNotice: "คำชี้แจงทางกฎหมาย",
+  timeoutLock: "ล็อกเกินเวลา",
+  reTry: "ลองอีกครั้ง",
+  sysNotify: "แจ้งเตือนระบบ",
+  exit_group_tip: "ออกจากการสนทนากลุ่มแล้ว",
+  group_mute_ing: "กลุ่มนี้ถูกปิดเสียง",
+  w_edit_group_notification: "แก้ไขประกาศกลุ่ม",
+  removeGroupNotice: "การลบประกาศกลุ่มแจ้งเตือน",
+  messageNotify: "การแจ้งเตือนข้อความ",
+  groupEnterLimit:
+    "จำนวนเพื่อนที่ได้รับเชิญให้เข้าร่วมกลุ่มได้มีจำนวนเต็ม โปรดตรวจสอบ",
+  tipAllGroupMember: "แจ้งเตือนสมาชิกกลุ่มทั้งหมด",
+  openPhotoPermission: "เปิดการเข้าถึงใน 'อัลบั้มภาพ'",
+  gotoSettings: "ไปที่การตั้งค่า",
+  notSet: "ไม่ตั้งค่า",
+  openCameraPermission: "เปิดการใช้ 'กล้อง'",
+  openMicrophonePermission: "เปิดการใช้ 'ไมโครโฟน'",
+  selectMaxCountTip: "เลือกได้สูงสุด %s คนต่อครั้ง",
+  getVideoImageFailed: "การดึงภาพตัวอย่างวิดีโอล้มเหลว",
+  error_6086: "ชื่อเล่นของผู้ใช้ถูกใช้ไปแล้ว",
+  error_6085: "รูปแบบชื่อเล่นไม่ถูกต้อง",
+  error_6087: "หมายเลขโทรศัพท์ไม่มีอยู่",
+  error_6088: "อีเมลไม่มีอยู่",
+  unRecard: "ไม่สามารถบันทึกเสียงได้:",
+  hasCreateGroup: "สร้างกลุ่มแชท",
+  joinGroupForLink: "เข้าร่วมกลุ่มแชทผ่านลิงค์",
+  be: "โดน",
+  moveoutGroup: "ย้ายออกจากกลุ่มแชท",
+  groupOwnerChangeTo: "หัวหน้ากลุ่มได้เปลี่ยนเป็น",
+  changeGroupNameTo: "เปลี่ยนชื่อกลุ่มเป็น",
+  disbandedGroup: "เลิกแชทกลุ่ม",
+  bannedFromSpeaking: "คำต้องห้าม",
+  gagWasLifted: "ยกเลิกการห้ามพูด",
+  initiatedGroupGag: "เปิดกลุ่มห้ามพูด",
+  shutDownGroupGag: "ปิดการห้ามพูดของกลุ่ม",
+  target: "อีกฝ่าย",
+  groupSizeUpperLimit: "จำนวนกลุ่มถึงเพดาน",
+  topUpperLimit: "วางด้านบนถึงขีด จำกัด บน",
+  topMessageRepeate: "ข้อความด้านบนซ้ำแล้วซ้ำอีก",
+  userHasReadMessage: "ผู้ใช้ได้อ่านข้อความนี้แล้ว",
+  placeholder: {
+    allMuted: "เจ้าของกลุ่มหรือผู้ดูแลระบบได้เปิดข้อห้ามทั้งหมด",
+    groupDisbanded: "กลุ่มถูกยุบ",
+    groupBanned: "กลุ่มถูกแบน",
+    singleBanned: "คุณถูกแบน",
+    search: "ค้นหา",
+    pleaseInput: "กรุณากรอก",
+    sec: "วินาที",
+    groupNoticePlaceholder: "โปรดป้อนประกาศกลุ่ม..",
+    inputPassword: "กรุณากรอกรหัสผ่าน",
+    confirmPassword: "กรุณายืนยันรหัสผ่าน",
+    inputPhoneNumber: "กรุณากรอกหมายเลขโทรศัพท์มือถือ",
+    select: "กรุณาเลือก",
+    userOrGroupIDInput: "กรุณากรอก{type}",
+    writeMessage: "ป้อนข้อมูล...",
+    inputGroupName: "กรุณากรอกชื่อกลุ่ม",
+    typingMessage: "ป้อนข้อความที่นี่",
+    inputName: "กรุณากรอกชื่อเล่น"
+  },
+  withoutQualification: "ผู้ใช้นี้ไม่มีคุณสมบัติในการเพิ่มเพื่อน",
+  error_6084: "การยืนยันอีเมลล้มเหลว",
+  emailCheck: "ยืนยันผ่านทางอีเมล",
+  phoneCheck: "ยืนยันผ่านทางหมายเลขโทรศัพท์",
+  checkEmail: "ตรวจสอบที่อยู่อีเมล",
+  inputOtherEmail: "โปรดป้อนที่อยู่อีเมลของผู้ใช้ที่ต้องการเข้าสู่ระบบ",
+  groupMask: "หน้ากากแชทกลุ่ม",
+  groupMaskDescription: "ตั้งชื่อเล่นและรูปโปรไฟล์ของกลุ่มนี้",
+
+  pleaseBind:
+    "เพื่อความปลอดภัยของบัญชีของคุณและหลีกเลี่ยงการจำกัดฟังก์ชันการเพิ่มเพื่อน โปรดผูก",
+  orStr: "หรือ",
+  andStr: "และ",
+  confirmExit: "ยืนยันการออก",
+  pleaseBindTip1: "เพื่อความปลอดภัยของบัญชีของคุณ โปรดผูก",
+  skin_item_user_name: "张娜娜",
+  skin_item_msg1: "สวัสดี ได้รับการตอบกลับทันเวลา",
+  skin_item_msg2: "ดีค่ะ ได้รับแล้ว",
+  appearance: "ลักษณะภายนอก",
+  bubbleBgColor: "สีพื้นหลังของบอกแชท",
+  chatBackground: "พื้นหลังแชท",
+  moreSettings: "การตั้งค่าเพิ่มเติม",
+  highPerformanceModel: "โหมดบริสุทธิ์",
+  highPerformanceModelDesc: "เมื่อเปิดใช้งานจะไม่แสดงเอฟเฟกต์ลักษณะภายนอก",
+  skinPreview: "ตัวอย่างผลลัพธ์",
+  defaultText: "ค่าเริ่มต้น",
+  fontSizePreview: "ดูตัวอย่างขนาดฟอนต์ ลากสไลเดอร์ด้านล่างนี้เพื่อปรับขนาดฟอนต์ หลังจากตั้งค่าแล้ว ข้อความทั้งหมดในหน้าจะเปลี่ยนขนาด",
+  changedText: "โอเค ได้ทำการเปลี่ยนแล้ว",
+  imageAlpha: "ความโปร่งใสของรูปภาพ",
+  min: "น้อยที่สุด",
+  max: "สูงสุด",
+  backgroundColor: "สีพื้นหลัง",
+  changeSaveTip: "คุณได้ทำการเปลี่ยนแปลงการตั้งค่า ต้องการบันทึกและกลับหรือไม่",
+  saveAndBack: "บันทึกและกลับ",
+  changeAvatar: "เปลี่ยนรูปโปรไฟล์",
+  appFontSize: "ขนาดตัวอักษรทั่วไปในแอป",
+  appFontSizeTip:
+    "ขนาดตัวอักษรที่ได้รับการตั้งค่าล่วงหน้า ลากแถบเลื่อนด้านล่างเพื่อตั้งค่าขนาดตัวอักษร การตั้งค่านี้จะเปลี่ยนแปลงขนาดตัวอักษรของข้อความทั้งหมดในแอป",
+  maskDesc:
+    "เมื่อเปิดการใช้งาน สมาชิกในกลุ่มสามารถตั้งค่าชื่อเล่นและรูปโปรไฟล์ของกลุ่มนี้ได้",
+  groupMaskOpenTip: " %s เปิด%s หน้ากากแชทกลุ่ม",
+  groupMaskOpenTipNew: " เปิด หน้ากากแชทกลุ่ม",
+  open: "เปิด",
+  close: "ปิด",
+  groupMaskOpenMsgErrorTip: "การแจ้งเตือนเปิด/ปิดฟังก์ชันหน้ากากแชทกลุ่ม",
+  maskOpen: "หน้ากากแชทกลุ่มเปิดแล้ว",
+  maskClose: "หน้ากากแชทกลุ่มถูกปิดแล้ว",
+
+  transmit: "ส่งต่อ",
+  multiSelect: "เลือกหลายรายการ",
+  singleShareMsg: "ส่งต่อทีละข้อความ",
+  groupShareMsg: "ส่งต่อรวม",
+  notGroupFound: "ไม่พบการสนทนาในกลุ่มที่เกี่ยวข้องกับ{name}",
+  rememberPassword: "จดจำรหัสผ่าน",
+  mobileLogin: "เข้าสู่ระบบผ่านโทรศัพท์มือถือ",
+  emailLogin: "เข้าสู่ระบบผ่านอีเมล",
+  recentConversation: "การสนทนาล่าสุด",
+  selectContact: "เลือกติดต่อ",
+  selectGroup: "เลือกกลุ่ม",
+  noGroup: "ไม่มีกลุ่ม",
+  notSelectMessage: "คุณยังไม่ได้เลือกข้อความ",
+  hiddenMsg: "ซ่อนข้อความ",
+  hiddenMsgTip: "คุณต้องการซ่อนที่มาของข้อความหรือไม่?",
+  yes: "ใช่",
+  no: "ไม่",
+  mergeMessageList: "【ส่งต่อรวม】บันทึกการสนทนา",
+  singleMlCount: "【ส่งต่อทีละข้อความ】ทั้งหมด%sข้อความ",
+  notFoundUser: "ไม่พบผู้ใช้นี้",
+  notShouldFoundUser: "User not found",
+  notFoundGroup: "ไม่พบกลุ่มนี้",
+  selectAt: "เลือกคนที่ต้องการ {'@'}",
+  welcomeToQDDChat: "ยินดีต้อนรับสู่ QDDChat",
+  choiceYourAvatar: "โปรดเลือกอวาตาร์ของคุณ",
+  hasSelect: "เลือกแล้ว",
+  groupChat: "แชทกลุ่ม",
+  groupMember1: "สมาชิกในกลุ่ม",
+  groupSendMsg: "ส่งข้อความในกลุ่ม",
+  msgNotSupportTransmit: "ข้อความไม่รองรับการส่งต่อ",
+  bindGoogle: "ผูกบัญชีกูเกิล",
+  bindFacebook: "ผูกบัญชี Facebook",
+  unbind: "ยกเลิกผูก",
+  accountSettings: "การตั้งค่าบัญชี",
+  thirdPartyAccountBinding: "ผูกบัญชีบุคคลที่สาม",
+  otherSettings: "การตั้งค่าอื่นๆ",
+  groupChatLoadFailed: "ข้อมูลแชทกลุ่มโหลดไม่สำเร็จ",
+  addGroupSend: "ส่งในกลุ่ม",
+  groupSendNoData: "ยังไม่มีบันทึกการส่งข้อความในกลุ่ม",
+  removeBinding: "ยกเลิกการผูก",
+  unBindToastPart1: "หลังยกเลิกการผูก คุณจะไม่สามารถใช้",
+  unBindToastPart2: "เข้าสู่ระบบอีกครั้ง คุณต้องการที่จะยกเลิกไหม?",
+  noOpPermission: "ยังไม่มีสิทธิ์ในการดำเนินการ",
+  bindingPhoneOrEmail:
+    "เพื่อความปลอดภัยของข้อมูลบัญชีของคุณ โปรดผูกหมายเลขโทรศัพท์มือถือหรืออีเมลก่อนที่จะยกเลิกการผูก",
+  unbindingSuccess: "ยกเลิกการผูกสำเร็จ",
+  unbindingFair: "การยกเลิกการผูกล้มเหลว",
+  showAll: "ดูทั้งหมด",
+  allCount: "ทั้งหมดรวม{num}รายการ",
+  bindingPhoneOrEmailSetPassword:
+    "เพื่อความปลอดภัยของข้อมูลบัญชีของคุณ โปรดผูกหมายเลขโทรศัพท์มือถือหรืออีเมลก่อนที่จะตั้งรหัสผ่าน",
+  recoverSuccessLoginAgain: "กู้คืนสำเร็จ กรุณาเข้าสู่ระบบอีกครั้ง",
+  createGroupSend: "สร้างการส่งในกลุ่ม",
+  groupSend: "ส่งในกลุ่ม",
+  notSelect: "คุณยังไม่ได้เลือก",
+  confirmDeleteTitle: "ยืนยันการลบการส่งในกลุ่มที่เลือก?",
+  totalGe: "รวม%sรายการ",
+  sendTotalGe: "ส่งให้ ({num}รายการ)",
+  uploadFailed: "การอัปโหลดล้มเหลว",
+  selectMax: "เลือกจำนวนมากสุด",
+  newFriendApply: "คุณมีเพื่อนใหม่คลิกเพื่อดู",
+  notSupportLoginStyle:
+    "ไม่รองรับช่องทางการเข้าสู่ระบบนี้ชั่วคราว โปรดใช้วิธีอื่น",
+  error_6091: "เลือกจำนวนคนเกินขีดจำกัด",
+  error_6092: "รหัสข้อความซ้ำกันอยู่แล้ว",
+  pay_password: "รหัสผ่านการชำระเงิน",
+  pleaseEnter: "โปรดป้อน",
+  loadingPage: "กำลังโหลดหน้า",
+  payTip: "คุณยังไม่ได้ตั้งค่ารหัสผ่านการชำระเงิน โปรดตั้งค่าก่อนดำเนินการต่อ",
+  deleteRedPackageErrTip: "ไม่สามารถยกเลิกข้อความแพ็คเกจแดง",
+  applyIconTip: "คำขอได้ถูกส่งไปแล้ว จะได้รับการอนุมัติและเปลี่ยนรูปโปรไฟล์",
+  applyIconProgress: "ตรวจสอบความคืบหน้าของคำขอ",
+  applyRecord: "บันทึกคำขอ",
+  repealWithdrawApply: "ยืนยันการเพิกถอนคำขอถอนเงิน?",
+  withdrawNotes: "บันทึกการถอนเงิน",
+  inReview: "อยู่ในระหว่างตรวจสอบ",
+  passTheAudit: "อนุมัติแล้ว",
+  rejectedPayment: "การชำระเงินถูกปฏิเสธ",
+  revoked: "ถูกเพิกถอน",
+  undone: "ยังไม่เสร็จ",
+  withdrawalQuantity: "จำนวนการถอนเงิน",
+  withdrawal: "ถอนเงิน",
+  withdrawalBack: "การคืนเงินถอน",
+  update_tip1: "หากไม่สามารถอัปเดต",
+  update_tip2: "คุณสามารถดาวน์โหลดได้ที่เว็บไซต์อย่างเป็นทางการ",
+  update_ing: "กำลังอัปเดต",
+  update_install: "ติดตั้งทันที",
+  installFailed: "ไม่ได้ติดตั้งโปรดลองอีกครั้งในภายหลัง",
+  installNotFoundFile: "ไม่พบไฟล์การติดตั้งโปรดลองอีกครั้งในภายหลัง",
+  error_6093: "ไม่รองรับวิธีการเข้าสู่ระบบ",
+  error_6094: "จำนวนรูปโปรไฟล์เต็ม",
+  deleteIcon: "คุณต้องการลบรูปโปรไฟล์นี้หรือไม่?",
+  balanceWithdraw: "ถอนเงินคงเหลือ",
+  canBalanceWithdraw: "ยอดเงินคงเหลือที่สามารถถอนได้",
+  inputPayPassword: "โปรดป้อนรหัสผ่านการชำระเงิน",
+  withdrawalSuccess: "ถอนเงินสำเร็จ",
+  personIcon: "รูปโปรไฟล์ส่วนบุคคล",
+  groupIcon: "รูปโปรไฟล์กลุ่ม",
+  error_6096: "โปรดอย่าตั้งรหัสผ่านการชำระเงินเป็นตัวเลขซ้ำๆ",
+  forgetPayPassword: "ลืมรหัสผ่านการชำระเงิน",
+  downloadFailedTip: "การดาวน์โหลดล้มเหลว โปรดลองอีกครั้งในภายหลัง",
+  error_6097: "ยอดเงินไม่เพียงพอ",
+  passed: "ผ่าน",
+  headRejected: "ถูกปฏิเสธ",
+  notSet2: "ไม่มีการตั้งค่า",
+  readDeleteTime: "ระยะเวลาการลบข้อความที่อ่านแล้ว",
+  readDeleteTimeTitle: "ระยะเวลาการลบข้อความ",
+  error_6090: "บัญชีถูกผูก",
+  retracted_h5: "ถูกยกเลิก",
+  message_h5: "ข้อความของ",
+  inputRemark: "โปรดใส่หมายเหตุของคุณ",
+  authFailed: "การให้สิทธิล้มเหลว",
+  userNullError: "บัญชีผู้ใช้ผิดปกติ",
+  community: "ชุมชน",
+  join: "เข้าร่วมกลุ่มแชทและสำรวจกิจกรรมชุมชนเพิ่มเติม～",
+  posteviews: "ยังไม่ออกแคมเปญ ~",
+  views: "ดูเวลา",
+  ended: "กิจกรรมสิ้นสุดลงแล้ว",
+  configError: "ข้อผิดพลาดในการกำหนดค่า ไม่สามารถเปิดใช้งานชั่วคราวได้",
+  burnMsgOpen: "{name}ตั้งค่าข้อความเป็นอ่านแล้ว{time}แล้วทำลาย",
+  burnMsgClose: "{name} ปิดการอ่านและเผา ข้อความไม่ไหล่อัตโนมัติอีกต่อไป",
+  burnMsgNotify: "การแจ้งเตือนการอ่านและเผา",
+  homeItem3: "ชุมชน",
+  messageTimeOut: "ข้อความหมดอายุแล้ว",
+  burnContentTip: "ข้อความกำลังเผา คุณต้องการออกและเผาด้วยคลิกเดียวหรือไม่?",
+  cancelLater: "ฉันจะตรวจสอบในภายหลัง",
+  burnConfirm: "เผาทันที",
+  setNickNameTimes: "ชื่อเล่นสามารถแก้ไขได้เพียงครั้งเดียวภายใน %s วันเท่านั้น",
+  voiceSendErrTip1: "รองรับการส่งเสียงเฉพาะระหว่าง %s-%s วินาทีเท่านั้น",
+  textSendErrTip1: "การป้อนข้อมูลสูงสุด %s ตัวอักษร",
+  pictureSendErrTip1: "รองรับการส่งรูปภาพเฉพาะระหว่าง %s-%sM เท่านั้น",
+  videoSendErrTip1: "รองรับการส่งวิดีโอเฉพาะระหว่าง %s-%sM เท่านั้น",
+  your: "ของคุณ",
+  joinCommunity: "เข้าร่วมกลุ่มแชทและสำรวจกิจกรรมชุมชนเพิ่มเติม～",
+  noActivity: "ยังไม่ออกแคมเปญ ~",
+  views: "ดูเวลา",
+  ended: "กิจกรรมสิ้นสุดลงแล้ว",
+  errorLink: "ไม่พบการเชื่อมโยง",
+  set_payment_password: "ตั้งรหัสผ่านการชำระเงิน 6 หลัก",
+  unset_payment_password:
+    "กรุณาอย่าตั้งรหัสผ่านการชำระเงินที่ซ้ำกันหรือต่อเนื่อง",
+  Confirm_Payment_Password: "ยืนยันรหัสผ่านการชำระเงิน",
+  Please_confirm_payment_password:
+    "โปรดใส่รหัสผ่านการชำระเงินอีกครั้งเพื่อยืนยัน",
+  error_6100:
+    "ขอโทษครับ/ค่ะ คุณสามารถเปลี่ยนชื่อเรียกส่วนตัวได้เพียงครั้งเดียวต่อวัน{day} ครั้ง",
+  viewDetailed: "ดูข้อมูลสมาชิกในกลุ่ม",
+  inviter: "ผู้เชิญ",
+  lastLoginTime: "เวลาเข้าสู่ระบบล่าสุด",
+  DeleteThisUsersgroup: "ลบข้อความแชทกลุ่มที่ผู้ใช้นี้ส่งในกลุ่มนี้",
+  AddGroupMembers: "เพิ่มสมาชิกกลุ่มโดยไม่ต้องยืนยันการเข้าร่วม",
+  error_6103: "ผู้ใช้นี้เป็นสมาชิกทั่วไป ไม่มีสิทธิ์",
+  error_6104: "ผู้ถูกเพิ่มไม่ได้อยู่ในกลุ่ม",
+  error_6108: "บัญชีผิดปกติ",
+  group_remark: "หมายเหตุกลุ่ม",
+  input_group_remark: "โปรดใส่เนื้อหาหมายเหตุ",
+  await_accepting: "การขออนุญาตอุปกรณ์ใหม่กำลังรอการตรวจสอบ",
+  apply_tips: "อุปกรณ์ใหม่ที่เข้าสู่ระบบต้องผ่านการตรวจสอบระบบ คุณต้องการส่งข้อมูลอุปกรณ์เพื่อสมัครอนุญาตหรือไม่?",
+  apply_send: "ส่งคำขอ",
+  apply_ttl: "การอนุญาตเข้าสู่ระบบอุปกรณ์",
+  group_limit500: "จำนวนคนสูงสุดในแต่ละกลุ่มคือ 500 คน",
+  select_group: "เลือกกลุ่มเพื่อน",
+  cantfind: "ไม่พบผู้ติดต่อที่เกี่ยวข้องกับ {name}",
+  error_6109: "จำนวนเพื่อนของผู้ใช้ถึงขีดจำกัด",
+  error_6106: "โปรดรอการตรวจสอบอุปกรณ์ก่อนเข้าสู่ระบบ",
+  selectGroups: 'เลือกกลุ่ม',
+  group_member_info: "ข้อมูลสมาชิกกลุ่ม",
+  join_time: "เวลาเข้าร่วม",
+  inviter_user: "ผู้เชิญ",
+  last_login_time: "เวลาเข้าสู่ระบบครั้งล่าสุด",
+  sync_group_avatar: 'ต้องการเปลี่ยนรูปโปรไฟล์กลุ่มพร้อมกันไหม?',
+  invite_fail: '{usernames}ไม่สำเร็จเนื่องจากบัญชีผิดปกติ!',
+  enterAndCtrl:'Enter เพื่อส่ง / Enter+Ctrl เพื่อขึ้นบรรทัดใหม่',
+  enterAndCtrlIOS:'Enter เพื่อส่ง / Enter+control เพื่อขึ้นบรรทัดใหม่',
+  scanLogin: 'เข้าสู่ระบบด้วยการสแกน',
+  formLogin: 'เข้าสู่ระบบด้วยรหัสผ่าน',
+  scanText: 'เข้าสู่ระบบด้วยแอพ บอลดี้ด้วยการสแกน',
+  scanSubText: 'ใช้แอพ บอลดี้ด้วยการสแกนเพื่อเข้าสู่ระบบ',
+  qrcodeExpired: 'รหัส QR หมดอายุแล้ว',
+  expiredTime10: 'รหัส QR ใช้ได้ภายใน 10 นาที',
+  reflesh: 'คลิกเพื่อรีเฟรช',
+  scanSuccess: 'สแกนสำเร็จ',
+  confromLogin: 'กรุณายืนยันการเข้าสู่ระบบ',
+  onlineStatus: "สถานะออนไลน์:",
+  networkDiagnostic: "การวินิจฉัยเครือข่าย",
+  "setPaymentPassword": "ตั้งรหัสผ่านการชำระเงิน 6 หลัก",
+  "unSetPaymentPassword":
+      "กรุณาอย่าตั้งรหัสผ่านการชำระเงินที่ซ้ำกันหรือต่อเนื่อง",
+  "verifyPassword": "ยืนยันรหัสผ่านการชำระเงิน",
+  "confirmPaymentPassword": "ยืนยันรหัสผ่านการชำระเงิน",
+  "verifyCurrentPassword": "กรุณายืนยันรหัสผ่านการชำระเงินปัจจุบัน",
+  "reInsetPaymentPassword": "กรุณาป้อนรหัสผ่านการชำระเงินอีกครั้งเพื่อยืนยัน",
+  "paymentPasswordDifferent": "รหัสผ่านไม่ตรงกัน โปรดป้อนใหม่",
+  "getPaymentPasswordWay": "โปรดเลือกวิธีการกู้รหัสผ่าน",
+  "selectFriendGroup": "เลือกกลุ่มเพื่อน",
+  "selectGroups": "เลือกกลุ่ม",
+  "eachGroupLimitNumber": "จำนวนสูงสุดของผู้ในแต่ละกลุ่มคือ {p} คน",
+  "selectChatLimitNumber": "คุณสามารถเลือกสูงสุด {p} การสนทนา",
+  "deviceID": "รหัสอุปกรณ์：",
+  "groupChatRemark": "หมายเหตุกลุ่มสนทนา",
+  "pleaseEnterRemarks": "โปรดป้อนเนื้อหาหมายเหตุ",
+  "groupMembershipInfo": "ข้อมูลสมาชิกในกลุ่ม",
+  "error_6102": "จำนวนคนสูงสุดในกลุ่มละ 500 คน",
+  "distroyed": "ถูกยกเลิก",
+  "forbiddened": "ถูกระงับ",
+  "addGroupMemberWithoutApply": "เพิ่มสมาชิกกลุ่มโดยไม่ต้องตรวจสอบความยินยอม",
+  "error_6109": "จำนวนเพื่อนของผู้ใช้รายนี้ได้ถึงขีดจำกัดสูงสุดแล้ว",
+  "apply_ttl": "การอนุญาตเข้าสู่ระบบของอุปกรณ์",
+  "apply_tips":
+      "อุปกรณ์นี้ไม่น่าเชื่อถือหรือไม่ผ่านการตรวจสอบ คุณต้องการส่งข้อมูลอุปกรณ์เพื่อขออนุญาตหรือไม่?",
+  "apply_send": "ส่งคำขอ",
+  "device_auth_send": "ส่งคำขออนุญาตอุปกรณ์เรียบร้อยแล้ว",
+  "using_trusted_device":
+      "การเข้าสู่ระบบด้วยอุปกรณ์นี้เสี่ยงต่อความเสี่ยง โปรดเข้าสู่ระบบด้วยอุปกรณ์ที่น่าเชื่อถือ",
+  "account_closed": "บัญชีถูกปิดแล้ว",
+  "google_code": "รหัสยืนยันของ Google",
+  "input_google_code": "โปรดป้อนรหัสยืนยันของ Google",
+  "inviterUser": "ผู้เชิญ",
+  "lastLoginTime": "เวลาเข้าสู่ระบบครั้งล่าสุด",
+  "error_6105": "อุปกรณ์ที่ไม่น่าเชื่อถือ โปรดยื่นใบสมัคร",
+  "error_6106": "โปรดรอการตรวจสอบของอุปกรณ์ก่อนเข้าสู่ระบบ",
+  "error_6107": "การตรวจสอบอุปกรณ์ไม่ผ่าน",
+  "hasDetailInfoPermission": "ดูข้อมูลสมาชิกกลุ่มอย่างละเอียด",
+  "editUserHeaderWithGroupHeader":
+      "ต้องการแก้ไขรูปภาพโปรไฟล์ของกลุ่มพร้อมกันหรือไม่?",
+  "darkModel": "โหมดสีเข้ม",
+  "darkModelSetDesc": "เปิดหรือปิดโหมดสีเข้มตามระบบ",
+  "whiteModel": "โหมดสีอ่อน",
+  "fileNotFound": "ไม่พบไฟล์",
+  "openFileInApp": "ดูตัวอย่างไฟล์",
+  "openFileOtherApp": "เปิดด้วยแอปอื่น",
+  "openByBrowser": "ดาวน์โหลดด้วยเบราว์เซอร์",
+  "pauseDownload": "หยุดการดาวน์โหลดชั่วคราว",
+  "resumeDownload": "ดำเนินการดาวน์โหลดต่อ",
+  "downloadFailed": "ดาวน์โหลดล้มเหลว",
+  "downloading": "กำลังดาวน์โหลด",
+  "notdownloaded": "ยังไม่ได้ดาวน์โหลด",
+  "cancelDownloading":
+      "ไฟล์กำลังดาวน์โหลด คุณต้องการยกเลิกการดาวน์โหลดหรือไม่?",
+  "failedToDownload":
+      "การดาวน์โหลดไฟล์ล้มเหลว คุณต้องการดาวน์โหลดอีกครั้งหรือไม่?",
+  "cancelDownload": "ยกเลิกการดาวน์โหลด",
+  "sending": "กำลังส่ง",
+  "fileTypeNotSupported": "ไม่รองรับการอัปโหลดไฟล์ประเภทนี้",
+  "fileSizeOut": "ขนาดไฟล์เกินขนาดสูงสุด",
+  "restrict": "จำกัด",
+  "getWithPhone": "ค้นหาผ่านหมายเลขโทรศัพท์",
+  "getWithEmail": "ค้นหาผ่านที่อยู่อีเมล",
+  "fileSize": "ขนาดของไฟล์",
+  "whetherDownloadFile": "การดาวน์โหลดไฟล์หรือไม่",
+  "downloadFailedTip1": "ดาวน์โหลดล้มเหลว โปรดตรวจสอบเครือข่ายและลองอีกครั้ง",
+  "downloadQueueTip": "เพิ่มลงในคิวการดาวน์โหลด รอการดาวน์โหลด",
+  "notSupportTransmitTip": "ข้อความนี้ไม่สามารถส่งต่อได้ในขณะนี้",
+  "voiceSize": "ขนาดไฟล์เสียงต้องไม่เกิน 100 เมกะไบต์",
+  "wordSize": "ขนาดไฟล์เอกสารต้องไม่เกิน 100 เมกะไบต์",
+  "apkSize": "ขนาดไฟล์แพ็คเกจติดตั้งต้องไม่เกิน 300 เมกะไบต์",
+  "zipSize": "ขนาดไฟล์ซิปต้องไม่เกิน 300 เมกะไบต์",
+  "groupDeleteUserTip":
+      "ลบผู้ใช้รายนี้พร้อมกับข้อความที่ผู้ใช้รายนี้ส่งในกลุ่ม",
+  "nPersonRead": "{p} คนอ่านแล้ว",
+  "darkModeEnabled": "เปิดโหมดดำแล้ว รีสตาร์ทแอปเพื่อให้เกิดผล",
+  "darkModeOff": "ปิดโหมดดำแล้ว รีสตาร์ทแอปเพื่อให้เกิดผล",
+  "otherUser": "อีกฝ่าย",
+  "selectMsgDeleteTime": "เลือกเวลาการเก็บ",
+  "selectMsgDeleteTimeTip":
+      "บันทึกการสนทนาจะถูกลบโดยอัตโนมัติหลังจากเกินเวลาที่กำหนด คุณต้องการดำเนินการต่อหรือไม่?",
+  "msgSaveTime": "เวลาการเก็บบันทึกการสนทนา",
+  "msgSaveTimeDesc": "ล้างบันทึกสนทนาที่เกินกำหนดอัตโนมัติ",
+  "hasTimeDeleteMsgPermission": "การกำหนดเวลาเก็บข้อความในกลุ่ม",
+  "accountAbnormal": "ข้อยกเว้นของบัญชี, คำเชิญล้มเหลว!",
+  "onlyBrowser": "รองรับเฉพาะในมุมมองบนเบราว์เซอร์เท่านั้น",
+  "cancelSendSuccess": "ยกเลิกการส่งสำเร็จ",
+  "allStr1": "ทั่วโลก",
+  "modelStr1": "โหมดกลางคืน",
+  "atMaxCountTip": "เพียง @ สูงสุด {p} คน",
+  "transmitTo": "ส่งถึง",
+  "moreActions": "การดำเนินการเพิ่มเติม",
+  "refreshing": "รีเฟรช",
+  "openInBrowser": "เปิดในเบราว์เซอร์",
+  "coverFlow": "การฟลอว์ปก",
+  "checkNet": "การตรวจสอบเครือข่าย",
+  "autoChangeServer": "เปลี่ยนเซิร์ฟเวอร์ด้วยคลิกเดียว",
+  "serverLine": "เส้นทางเซิร์ฟเวอร์",
+  "timeOut": "หมดเวลา",
+  "serverLineChange": "เปลี่ยนเส้นทางเซิร์ฟเวอร์",
+  "netCheck": "การวินิจฉัยเครือข่าย",
+  "netDelayCheck": "การตรวจสอบความล่าช้าของเครือข่าย",
+  "netDelay1Check": "ความล่าช้าของอินเทอร์เน็ต",
+  "msgDelay1Check": "ความล่าช้าของข้อความ",
+  "imgDelay1Check": "ความล่าช้าของรูปภาพ",
+  "netLine": "เส้นทางเครือข่าย",
+  "reCheck": "ทดสอบอีกครั้ง",
+  "netChecking": "กำลังตรวจสอบเครือข่าย",
+  "locationAddr": "สถานที่ตั้ง",
+  "selectPerfectLineTip": "เลือกเส้นทางที่ดีที่สุดสำหรับคุณแล้ว",
+  "selectPerfectLineTip2":
+      "เป็นเส้นทางที่ดีที่สุดอยู่แล้ว ไม่จำเป็นต้องเปลี่ยน",
+  "selectPerfectLineTipNoNet":
+      "ไม่พบเส้นทางที่ดีที่สุด กรุณาตรวจสอบเครือข่ายแล้วลองอีกครั้ง",
+  "changing": "กำลังเปลี่ยน",
+  "changeSuccess": "เปลี่ยนสำเร็จ",
+  "autoChanging": "กำลังเปลี่ยนอัตโนมัติ โปรดรอสักครู่",
+  "waitAnswer": "รอการตอบรับ",
+  "callFinish": "การโทรสิ้นสุด",
+  "fileSizeConnotZero": "ขนาดไฟล์ต้องไม่เป็นศูนย์",
+  "confirmLogin": "ยืนยันการเข้าสู่ระบบ",
+  "toolboxAudioCall": "โทรออกด้วยเสียง",
+  "requestTimeOut": "คำขอหมดเวลา โปรดลองใหม่ภายหลัง",
+  "error_6115": "รหัส QR หมดอายุแล้ว",
+  "groupNotFound": "ไม่พบกลุ่มนี้",
+  "userNotFound": "ไม่พบผู้ใช้งานนี้",
+  "microphoneOpen": "เปิดไมค์แล้ว",
+  "speakerOpen": "เปิดลำโพงแล้ว",
+  "voiceWithYou": "เชิญคุณเข้าร่วมสนทนาเสียง",
+  "callInterceptor": "การโทรถูกตัด",
+  "startCallError": "เริ่มโทรมีข้อผิดพลาด",
+  "callHungUp": "สายโทรถูกตัดแล้ว",
+  "callRemoteHungUp": "อีกฝ่ายตัดสาย",
+  "callReceiverError": "ข้อผิดพลาดในการรับสาย",
+  "starting": "กำลังเริ่มต้น",
+  "startTimeOut": "เรียกใช้การโทรออกด้วยเสียงหมดเวลา",
+  "callWaitReceiver": "รอการรับสายจากอีกฝ่าย",
+  "callRemoteNotAccept": "อีกฝ่ายไม่รับสาย",
+  "callStartSendError": "ไม่สามารถเริ่มสนทนาเสียงได้",
+  "notAccept": "ไม่รับสาย",
+  "callAccepting": "กำลังรับสาย",
+  "call": "สายโทร",
+  "callDoing": "เส้นทางไม่ว่าง ยกเลิกแล้ว",
+  "netBad": "สภาพเครือข่ายในปัจจุบันไม่ดี",
+  "netDown": "เครือข่ายหยุดทำงาน",
+  "onCalling": "กำลังโทร",
+  "error_1303": "คุณยังไม่ได้เป็นเพื่อนกับอีกฝ่าย",
+  "remoteAccountError": "บัญชีของอีกฝ่ายผิดปกติ",
+  "userOnlineStatus": "สถานะออนไลน์",
+  "error_100008": "ผู้ใช้งานนี้ไม่มีเงื่อนไขที่จะเป็นผู้ดูแลระบบ",
+  "callTimeLimit": "จำกัดเวลาการโทรสายทุกครั้งสูงสุด {p} นาที",
+  "notLoginOnline": "ไม่เคยล็อกอิน",
+  "callRemoteDoing": "ยุ่งอยู่",
+  "exitLoginIng": "กำลังออกจากระบบ",
+  "usePhoneRecovery": "ใช้หมายเลขโทรศัพท์ในการกู้คืน",
+  "useEmailRecovery": "ใช้อีเมลในการกู้คืน",
+  "otherRecoveryMethods": "วิธีการกู้คืนอื่นๆ",
+  "emailAddress": "ที่อยู่อีเมล",
+  "phoneErrorOrNotExist": "หมายเลขโทรศัพท์ผิดพลาดหรือไม่มีอยู่",
+  "phoneNotExist": "หมายเลขโทรศัพท์ไม่มีอยู่",
+  "verificationCodeFailure": "การรับรหัสยืนยันล้มเหลว กรุณาลองอีกครั้ง",
+  verificationCodeSent: "รหัสยืนยันได้ถูกส่งแล้ว",
+  hiWelcomeLogin: "สวัสดี~ ยินดีต้อนรับเข้าสู่การเข้าสู่ระบบ",
+  otherLoginMethods: "วิธีการเข้าสู่ระบบอื่น ๆ",
+  usernamePhoneEmail: "ชื่อผู้ใช้/หมายเลขโทรศัพท์/อีเมล",
+  "error_1303": "คุณยังไม่ได้เป็นเพื่อนกับอีกฝ่าย",
+  "remoteAccountError": "บัญชีของอีกฝ่ายผิดปกติ",
+  "userOnlineStatus": "สถานะออนไลน์",
+  "error_100008": "ผู้ใช้งานนี้ไม่มีเงื่อนไขที่จะเป็นผู้ดูแลระบบ",
+  "callTimeLimit": "จำกัดเวลาการโทรสายทุกครั้งสูงสุด %s นาที",
+  "notLoginOnline": "ไม่เคยล็อกอิน",
+  "callRemoteDoing": "ยุ่งอยู่",
+  "exitLoginIng": "กำลังออกจากระบบ",
+  "searchAreaCode": "ค้นหาประเทศ/เขต",
+  "otherFindStyle": "วิธีการกู้คืนอื่น ๆ",
+  "welcome": "ยินดีต้อนรับเข้าสู่ระบบ",
+  "fileReadError": "ข้อผิดพลาดในการอ่านไฟล์",
+  "docPreviewError": "ไม่สามารถดูตัวอย่างเอกสารได้",
+  "docPreviewUseOther": "หากเนื่องจากเครือข่ายหรือความไม่เข้ากันของอุปกรณ์ทำให้ไม่สามารถดูตัวอย่างเอกสารได้ คุณสามารถใช้",
+  "netTimeOut": "หมดเวลาการเชื่อมต่อเครือข่าย",
+  "docReadError": "ไม่สามารถอ่านไฟล์ได้ โปรดตรวจสอบรูปแบบไฟล์ว่าถูกต้องหรือไม่",
+  "errorDetail": "รายละเอียดข้อผิดพลาด",
+  ip: "IP",
+  imageLoadingRoute: "เส้นทางการโหลดภาพ",
+  networkChecking: "กำลังตรวจสอบเครือข่าย...",
+  noPermission: "ไม่มีสิทธิ์, กรุณาเข้าสู่ระบบหลังจากได้รับสิทธิ์",
+  pageNotFound: "ไม่พบหน้า",
+  serverError: "ข้อผิดพลาดของเซิร์ฟเวอร์",
+  databaseError: "ข้อผิดพลาดในการค้นหาฐานข้อมูล",
+  networkError: "ข้อผิดพลาดในการเชื่อมต่อเครือข่าย"
+
+};
diff --git a/src/lang/us.js b/src/lang/us.js
new file mode 100644
index 0000000..703289f
--- /dev/null
+++ b/src/lang/us.js
@@ -0,0 +1,1769 @@
+export default {
+  checkTopMessage:'Check messages',
+  unsupportedVideoFormat: "Unsupported video format",
+  welcome: "Welcome to OpenIM",
+  phoneNumber: "Phone number",
+  plsEnterPhoneNumber: "Please enter your phone number",
+  password: "Password",
+  plsEnterPassword: "Please enter your password",
+  account: "Account",
+  plsEnterAccount: "Please enter your account",
+  forgetPassword: "Forgot Password",
+  verificationCodeLogin: "Verification Code Login",
+  login: "Login",
+  noAccountYet: "Don't have an account yet?",
+  loginNow: "Login now",
+  registerNow: "Register now",
+  lockPwdErrorHint: "Error %s times",
+  newUserRegister: "New User Registration",
+  verificationCode: "Verification Code",
+  sendVerificationCode: "Send Verification Code",
+  resendVerificationCode: "Resend Verification Code",
+  verificationCodeTimingReminder: "Get Verification Code Again in %s seconds",
+  defaultVerificationCode: "(Default Verification Code: %s)",
+  plsEnterVerificationCode: "Please enter your verification code",
+  invitationCode: "Invitation Code",
+  plsEnterInvitationCode: "Please enter your invitation code %s",
+  optional: "Optional",
+  nextStep: "Next Step",
+  plsEnterRightPhone: "Please enter a valid phone number",
+  enterVerificationCode: "Enter phone verification code",
+  setPassword: "Set Password",
+  plsConfirmPasswordAgain: "Please confirm your password again",
+  confirmPassword: "Confirm Password",
+  wrongPasswordFormat: "Invalid password format",
+  plsCompleteInfo: "Please complete your personal information",
+  plsEnterYourNickname: "Please enter your nickname",
+  pleaseEnterYourUsername: "Please enter your username",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "Enter your username to help us identify your account",
+  setInfo: "Set Information",
+  loginPwdFormat: "6-20 digits + letters",
+  passwordLogin: "Password Login",
+  verificationSuccessful: "Verification successful",
+  text_1:
+    "This account is not bound to an email address and password retrieval is not currently supported.",
+  contacts: "Contacts",
+  workbench: "Workbench",
+  mine: "Mine",
+  me: "Me",
+  draftText: "Draft",
+  everyone: "Everyone",
+  you: "You",
+  groupAc: "Group Notification",
+  createGroupNtf: "%s created a group",
+  editGroupInfoNtf: "%s modified group information",
+  quitGroupNtf: "%s quit the group",
+  invitedJoinGroupNtf: "%s invited %s to join the group",
+  kickedGroupNtf: "%s was removed from the group by %s",
+  joinGroupNtf: "%s joined the group",
+  dismissGroupNtf: "%s dismissed the group",
+  transferredGroupNtf: "%s transferred group management authority to %s",
+  muteMemberNtf: "%s was muted by %s for %s",
+  muteCancelMemberNtf: "%s had their mute canceled by %s",
+  muteGroupNtf: "%s enabled group mute",
+  muteCancelGroupNtf: "%s disabled group mute",
+  friendAddedNtf: "You are now friends and can start chatting",
+  openPrivateChatNtf: "Enable self-destructing messages",
+  closePrivateChatNtf: "Disable self-destructing messages",
+  memberInfoChangedNtf: "%s edited their group member profile",
+  unsupportedMessage: "Unsupported message type",
+  picture: "Picture",
+  video: "Video",
+  voice: "Voice",
+  location: "Location",
+  file: "File",
+  carte: "Card",
+  emoji: "Custom Emoji",
+  chatRecord: "Chat Records",
+  revokeMsg: "withdrew a message",
+  aRevokeBMsg: "%s withdrew %s's message",
+  blockedByFriendHint:
+    "The message has been sent but rejected by the recipient",
+  deletedByFriendHint: " You are not their friend yet.",
+  sendFriendVerification: "Send Friend Verification",
+  removedFromGroupHint: "You have been removed from the group",
+  groupDisbanded: "The group has been disbanded",
+  search: "Search",
+  synchronizing: "Synchronizing",
+  syncFailed: "Sync Failed",
+  connecting: "Connecting",
+  connectionFailed: "Connection Failed",
+  top: "Top",
+  cancelTop: "Cancel Top",
+  markHasRead: "Mark as Read",
+  delete: "Delete",
+  nPieces: "%%s pieces",
+  online: "Online",
+  offline: "Offline",
+  phoneOnline: "Phone",
+  pcOnline: "Pc",
+  webOnline: "Web",
+  webMiniOnline: "Mini Program",
+  upgradeFind: "Discover New Version",
+  upgradeVersion: "A new version %s is available. Your current version is %s.",
+  upgradeDescription: "Update Description:",
+  upgradeIgnore: "Ignore",
+  upgradeLater: "Later",
+  upgradeNow: "Update Now",
+  upgradeNever: "Not update Now",
+  inviteYouCall: "%s invited you to %s",
+  rejectCall: "Reject",
+  acceptCall: "Accept",
+  callVoice: "Voice Call",
+  callVideo: "Video Call",
+  sentSuccessfully: "Sent Successfully",
+  copySuccessfully: "Copied Successfully",
+  day: "day",
+  hour: "hour",
+  hours: "hours",
+  minute: "minute",
+  seconds: "seconds",
+  cancel: "Cancel",
+  determine: "OK",
+  toolboxAlbum: "Album",
+  toolboxCall: "Video Call",
+  toolboxCamera: "Camera",
+  toolboxCard: "Card",
+  toolboxFile: "File",
+  toolboxLocation: "Location",
+  send: "Send",
+  holdTalk: "Hold to Talk",
+  releaseToSend: "Release to Send",
+  releaseToSendSwipeUpToCancel: "Release to Send, Swipe Up to Cancel",
+  liftFingerToCancelSend: "Lift Finger to Cancel Send",
+  callDuration: "Call Duration: %s",
+  cancelled: "Cancelled",
+  cancelledByCaller: "Cancelled by Caller",
+  rejectedByCaller: "Rejected by Caller",
+  callTimeout: "Call Timeout",
+  rejected: "Rejected",
+  forwardMaxCountHint: "you can only forward up to 20 messages.",
+  typing: "Typing...",
+  addSuccessfully: "Added Successfully",
+  addFailed: "Add Failed",
+  setSuccessfully: "Set Successfully",
+  callingBusy: "You are already in a call and cannot perform this operation!",
+  groupCallHint:
+    "The group is currently in a call. Are you sure you want to join the ongoing call?",
+  joinIn: "Join",
+  menuCopy: "Copy",
+  menuDel: "Delete",
+  menuForward: "Forward",
+  menuReply: "Reply",
+  menuMulti: "Select Multiple",
+  menuRevoke: "Revoke",
+  menuAdd: "Add",
+  nMessage: "%s New Messages",
+  plsSelectLocation: "Please select a location",
+  groupAudioCallHint: "%s people in a voice call",
+  groupVideoCallHint: "%s people in a video call",
+  reEdit: "Re-edit",
+  playSpeed: "Playback Speed",
+  download: "Download",
+  googleMap: "Google Maps",
+  appleMap: "Apple Maps",
+  baiduMap: "Baidu Maps",
+  amapMap: "AMap",
+  tencentMap: "Tencent Maps",
+  offlineMeetingMessage: "You received a meeting invitation message",
+  offlineMessage: "You received a new message",
+  offlineCallMessage: "You received a call invitation message",
+  logoutHint: "Are you sure you want to log out?",
+  myInfo: "My Info",
+  workingCircle: "Work Circle",
+  accountSetup: "Account Setup",
+  aboutUs: "About Us",
+  logout: "Log Out",
+  qrcode: "QR Code",
+  qrcodeHint: "Scan the QR code below to add me as a friend",
+  favoriteFace: "Favorite Emojis",
+  favoriteManage: "Manage",
+  favoriteCount: "%s Favorites",
+  favoriteDel: "Delete (%s)",
+  hasRead: "Read",
+  unread: "Unread",
+  nPersonUnRead: "%s unread",
+  allRead: "All Read",
+  messageRecipientList: "Message Recipient List",
+  hasReadCount: "Read (%s)",
+  unreadCount: "Unread (%s)",
+  newFriend: "New Friend",
+  newFriendList: "Friend Application List",
+  newGroup: "New Group",
+  myFriend: "My Friends",
+  myGroup: "My Groups",
+  addManager: "Add Admin",
+  add: "Add",
+  scan: "Scan",
+  scanHint: "Scan business card QR code",
+  addFriend: "Add Friend",
+  addFriendHint: "Add by ID",
+  friendGrouping: "Friend Grouping",
+  createGroup: "Create Group",
+  createGroupHint: "Create a group, fully utilize OpenIM",
+  addGroup: "Add Group",
+  addGroupHint: "Ask the admin or members for the ID",
+  searchIDAddFriend: "Search ID to Add Friend",
+  searchIDAddGroup: "Search ID to Add Group",
+  searchIDIs: "ID: %s",
+  searchPhoneIs: "Phone: %s",
+  searchEmailIs: "Email: %s",
+  searchNicknameIs: "Nickname: %s",
+  searchGroupNicknameIs: "Group Nickname: {name}",
+  noFoundUser: "User not found",
+  noFoundGroup: "Group not found",
+  joinGroupDate: "Join Group Date",
+  joinGroupMethod: "Join Group Method",
+  byInviteJoinGroup: "Joined by invitation from %s",
+  byIDJoinGroup: "Joined by searching group ID",
+  byQrcodeJoinGroup: "Joined via group QR code",
+  groupID: "Group ID",
+  setAsAdmin: "Set as Admin",
+  setMute: "Set Mute",
+  organizationInfo: "Organization Info",
+  organization: "Organization",
+  department: "Department",
+  position: "Position",
+  personalInfo: "Personal Info",
+  viewDynamics: "View Dynamics",
+  audioAndVideoCall: "Call",
+  sendMessage: "Message",
+  avatar: "Avatar",
+  name: "Name",
+  nickname: "Nickname",
+  gender: "Gender",
+  englishName: "English Name",
+  birthDay: "Birthday",
+  tel: "Tel",
+  mobile: "Mobile",
+  email: "Email",
+  man: "Male",
+  woman: "Female",
+  friendSetup: "Friend Setup",
+  setupRemark: "Set Remark",
+  recommendToFriend: "Recommend to Friend",
+  addToBlacklist: "Add to Blacklist",
+  unfriend: "Unfriend",
+  areYouSureDelFriend: "Are you sure you want to delete this friend?",
+  areYouSureAddBlacklist:
+    "Are you sure you want to add this friend to the blacklist?",
+  remark: "Remark",
+  save: "Save",
+  saveSuccessfully: "Saved Successfully",
+  saveFailed: "Save Failed",
+  groupVerification: "Group Verification",
+  friendVerification: "Friend Verification",
+  sendEnterGroupApplication: "Send Enter Group Application",
+  sendToBeFriendApplication: "Send Friend Request",
+  sendSuccessfully: "Sent Successfully",
+  sendFailed: "Send Failed",
+  canNotAddFriends: "This user has set not to be added!",
+  mutedAll: "Mute All",
+  tenMinutes: "10 Minutes",
+  oneHour: "1 Hour",
+  twelveHours: "12 Hours",
+  oneDay: "1 Day",
+  custom: "Custom",
+  unmute: "Unmute",
+  youMuted: "You have been muted",
+  groupMuted: "Group Muted",
+  notDisturbMode: "Do Not Disturb Mode",
+  allowRing: "New Message Sound",
+  allowVibrate: "New Message Vibration",
+  forbidAddMeToFriend: "Disallow Add Me as a Friend",
+  blacklist: "Contacts Blacklist",
+  unlockSettings: "Unlock Settings",
+  changePassword: "Change Password",
+  change: "Change",
+  clearChatHistory: "Clear Chat History",
+  confirmClearChatHistory: "Confirm Clearing All Chat History?",
+  languageSetup: "Language Setup",
+  language: "Language",
+  english: "English",
+  chinese: "Chinese",
+  newGroups: "New Group",
+  createdGroup: "You Haven't Greated A Group Yet",
+  followSystem: "Follow System",
+  blacklistEmpty: "No Blacklisted Contacts",
+  remove: "Remove",
+  fingerprint: "Fingerprint",
+  modifyGroupName: "Modify Group Name",
+  gesture: "Gesture",
+  biometrics: "Biometrics",
+  deleteGroups:
+    "After Deleting The Group, It Will Not Be Recoverable. Are You Sure You Want To Delete The Group?",
+  groupNames: "Please Enter The Group Name",
+  current_device: "Current device",
+  verification_time: "Verification time:",
+  login_details: "Login details",
+  plsEnterPwd: "Please Enter Password",
+  plsEnterOldPwd: "Please Enter Old Password",
+  plsEnterNewPwd: "Please Enter New Password",
+  plsConfirmNewPwd: "Please Confirm New Password",
+  verification_code1: "Please enter verification code",
+  binding_successful: "Binding successful",
+  correct_email_address: "Please input the correct email address",
+  email_address: "Please enter your email",
+  log_in_time: "Log in time",
+  log_in_time1: "Log in time",
+  bind_new_email: "Bind new email",
+  successful_home: "Registration successful",
+  Login_failed: "Login failed",
+  please_enter_user_nickname: "Please enter user nickname",
+  set_characters: "Please set 4-15 characters",
+  reset_successful: "Reset successful",
+  personalized_signature:
+    "Please enter your personalized signature (character limit 6-50)",
+  login_IP: "Login IP:",
+  failed_to_load: "Failed to load",
+  failed_to_load1: "Loading failed, please try again later",
+  removal_failed: "Removal failed",
+  reset: "Reset",
+  oldPwd: "Old Password",
+  newPwd: "New Password",
+  remove_this_device1:
+    "Are you sure you want to remove this device? If you reuse the device after removing it, re-verification is required to log in",
+  remove_device: "Remove device",
+  remove_this_device: "Are you sure you want to remove this device?",
+  confirmNewPwd: "Confirm Password:",
+  please_enter_new_password_again: "Please enter new password again",
+  init_validate_6: "Password must consist of 6-15 letters and numbers",
+  twicePwd: "The new password is inconsistent, please reset it",
+  currently_bound_email: "Currently bound email:",
+  plsEnterConfirmPwd: "Please Enter Confirmation Password",
+  change_the_binding: "Change the binding",
+  text_device: "Log in to device management",
+  current_device_records:
+    "The following are all your login records for this device",
+  text_device1:
+    "The following are all your login devices. Click to enter details to view the login record of this device",
+  twicePwdNoSame: "The entered passwords do not match",
+  text_email:
+    "If your email address is no longer in use, please change it promptly",
+  changedSuccessfully: "Changed Successfully",
+  noAddGround: "I Haven't Added Friends To The Group Yet",
+  deleteGround: "Delete Ground",
+  removeFriend: "Remove Friend",
+  noFriendAdd: "No Friends To Add",
+  noFriendDelete: "No Friends To Remove",
+  noVerify: "Verification Required When Adding Me As A Friend",
+  deleteSuccessfully: "Delete Successfully",
+  email_verification: "E-mail verification",
+  email_verification_code: "E-mail verification code",
+  verification_code: "Please enter verification code",
+  checkNewVersion: "Check for New Version",
+  year: "year",
+  myCreatedGroup: "The Group Chat I Created",
+  myJoinGroup: "The Group Chat I Joined",
+  myManageGroup: "The Group Chat I Manage",
+  device_list: "Device List",
+  chatContent: "Chat Content",
+  topContacts: "Top Contacts",
+  messageNotDisturb: "Message Do Not Disturb",
+  messageNotDisturbHint: "Receive messages but no notification",
+  burnAfterReading: "Burn After Reading",
+  timeSet: "Time Settings",
+  setChatBackground: "Set Chat Background",
+  fontFace: "Typeface",
+  fontSize: "Font Size",
+  little: "Small",
+  standard: "Standard",
+  big: "Large",
+  thirtySeconds: "30 Seconds",
+  fiveMinutes: "5 Minutes",
+  clearAll: "Clear All",
+  clearSuccessfully: "Cleared Successfully",
+  groupChatSetup: "Group Settings",
+  viewAllGroupMembers: "View All Group Members (%s)",
+  groupManage: "Management",
+  myGroupMemberNickname: "My Nickname",
+  topChat: "Pin Chat",
+  muteAllMember: "Mute All",
+  exitGroup: "Exit Group",
+  dismissGroup: "Dismiss Group",
+  dismissGroupHint:
+    "Once the group is dismissed, you will lose contact with group members",
+  quitGroupHint:
+    "After quitting the group, you will no longer receive messages from this group.",
+  joinGroupSet: "Group Verification",
+  allowAnyoneJoinGroup: "Allow Anyone",
+  inviteNotVerification: "No Verification for Member Invitation",
+  needVerification: "Verification Required",
+  addMember: "Add",
+  delMember: "Remove",
+  groupOwner: "Group Owner",
+  groupAdmin: "Group Admin",
+  notAllowSeeMemberProfile: "Disallow View Members' Profiles",
+  notAllAddMemberToBeFriend: "Disallow Add Members as Friends",
+  transferGroupOwnerRight: "Transfer Group Owner",
+  groupName: "Group Name",
+  groupAcPermissionTips: "Only owner and admin can edit",
+  plsEnterGroupAc: "Please enter group announcement",
+  edit: "Edit",
+  publish: "Publish",
+  groupMember: "Group Members",
+  selectedPeopleCount: "Selected (%s)",
+  confirmSelectedPeople: "Confirm (%s/%s)",
+  confirm: "Confirm",
+  alreadyBeOwner:
+    "You have selected the group owner and have the highest administrative rights ",
+  confirmTransferGroupToUser:
+    "Are you sure you want to transfer group ownership to: %s?",
+  removeGroupMember: "Remove Group Member",
+  searchNotResult: "No results found",
+  groupQrcode: "Group QR Code",
+  groupQrcodeHint: "Scan the QR code below to join the group",
+  approved: "Approved",
+  accept: "Accept",
+  reject: "Reject",
+  waitingForVerification: "Waiting",
+  rejectSuccessfully: "Rejected successfully",
+  rejectFailed: "Rejection failed",
+  applyJoin: "Apply to join",
+  enterGroup: "Enter Group",
+  applyReason: "Reason: %s",
+  invite: "Invite",
+  sourceFrom: "Source: %s",
+  byMemberInvite: "Invitation",
+  bySearch: "By Search",
+  byScanQrcode: "By QR Code",
+  iCreatedGroup: "I Created",
+  iJoinedGroup: "I Joined",
+  nPerson: "{count} people",
+  searchNotFound: "No relevant results found",
+  searchNotFoundMember: "No relevant member found",
+  organizationStructure: "Organization Structure",
+  recentConversations: "Recent Conversations",
+  selectAll: "Select All",
+  plsEnterGroupNameHint: "Choose a group name for easy search",
+  completeCreation: "Complete Creation",
+  sendCarteConfirmHint:
+    "Are you sure you want to send this contact to the chat?",
+  sentSeparatelyTo: "Sent separately to:",
+  sentTo: "Sent to:",
+  leaveMessage: "Leave a message",
+  mergeForwardHint: "[Merge Forward] %s messages",
+  mergeForward: "Merge Forward",
+  quicklyFindChatHistory: "Quickly find chat history",
+  notFoundChatHistory: 'No "%s" related content found',
+  globalSearchAll: "All",
+  globalSearchContacts: "Contacts",
+  globalSearchGroup: "Groups",
+  globalSearchChatHistory: "Chat History",
+  globalSearchChatFile: "Files",
+  relatedChatHistory: "%s related chat history",
+  seeMoreRelatedContacts: "See more related contacts",
+  seeMoreRelatedGroup: "See more related groups",
+  seeMoreRelatedChatHistory: "See more related chat history",
+  seeMoreRelatedFile: "See more related documents",
+  publishPicture: "Publish Picture",
+  publishVideo: "Publish Video",
+  mentioned: "Mentioned: %s",
+  comment: "Comment",
+  like: "Like",
+  reply: "Reply",
+  rollUp: "Roll Up",
+  fullText: "Full Text",
+  selectAssetsFromCamera: "Take Photo",
+  selectAssetsFromAlbum: "Choose from Album",
+  whoCanWatch: "Who can watch",
+  remindWhoToWatch: "Remind who to watch",
+  public: "Public",
+  everyoneCanSee: "Everyone can see",
+  partiallyVisible: "Partially visible",
+  visibleToTheSelected: "Visible to the selected",
+  partiallyInvisible: "Not visible to some",
+  invisibleToTheSelected: "Invisible to the selected",
+  private: "Private",
+  onlyVisibleToMe: "Only visible to me",
+  selectVideoLimit: "Duration cannot exceed 15 seconds",
+  selectContactsLimit: "Please select at least one contact",
+  message: "Message",
+  commentedYou: "Commented on your post: %s",
+  likedYou: "Liked your post",
+  mentionedYou: "Mentioned you",
+  replied: "Replied",
+  detail: "Detail",
+  totalNPicture: "Total %s pictures",
+  noDynamic: "No posts yet",
+  callRecords: "Call Records",
+  allCall: "All Calls",
+  missedCall: "Missed Calls",
+  incomingCall: "Incoming",
+  outgoingCall: "Outgoing",
+  microphone: "Microphone",
+  speaker: "Speaker",
+  hangUp: "Hang Up",
+  pickUp: "Pick Up",
+  waitingCallHint: "Calling...",
+  waitingVoiceCallHint: "Waiting for the other party to pick up...",
+  invitedVoiceCallHint: "Inviting you for a voice call...",
+  waitingVideoCallHint: "Waiting for the other party to accept the invitation",
+  invitedVideoCallHint: "Inviting you for a video call...",
+  waitingToAnswer: "Waiting to answer",
+  invitedYouToCall: "Invited you to a call",
+  calling: "Calling...",
+  nPeopleCalling: "%s people on the call",
+  whoInvitedVoiceCallHint: "%s invited you for a voice call",
+  whoInvitedVideoCallHint: "%s invited you for a video call",
+  plsInputMeetingSubject: "Please enter meeting subject",
+  meetingStartTime: "Start Time",
+  meetingDuration: "Meeting Duration",
+  enterMeeting: "Enter Meeting",
+  meetingNo: "Meeting Number",
+  yourMeetingName: "Your Name",
+  plsInputMeetingNo: "Please enter meeting number",
+  plsInputYouMeetingName: "Please enter your name",
+  meetingSubjectIs: "Subject: %s",
+  meetingStartTimeIs: "Start: %s",
+  meetingDurationIs: "Duration: %s",
+  meetingHostIs: "Host: %s",
+  meetingNoIs: "Number: %s",
+  meetingMessageClickHint: "Click this message to join the meeting directly",
+  meetingMessage: "Meeting Message",
+  openMeeting: "Ongoing Meeting",
+  didNotStart: "Did not start",
+  started: "Started",
+  meetingInitiatorIs: "Video meeting initiated by %s",
+  meetingDetail: "Meeting Details",
+  meetingOrganizerIs: "Organizer: %s",
+  updateMeetingInfo: "Update Meeting Information",
+  cancelMeeting: "Cancel Meeting",
+  videoMeeting: "Video Meeting",
+  joinMeeting: "Join Meeting",
+  bookAMeeting: "Book a Meeting",
+  quickMeeting: "Quick Meeting",
+  confirmTheChanges: "Confirm Changes",
+  invitesYouToVideoConference: "%s invites you to join a video conference",
+  over: "End",
+  meetingMute: "Mute",
+  meetingUnmute: "Unmute",
+  meetingCloseVideo: "Off",
+  meetingOpenVideo: "On",
+  meetingEndSharing: "End Sharing",
+  meetingShareScreen: "Share Screen",
+  meetingMembers: "Members (%s)",
+  settings: "Settings",
+  leaveMeeting: "Leave Meeting",
+  endMeeting: "End Meeting",
+  leaveMeetingConfirmHint: "Are you sure you want to leave the meeting?",
+  endMeetingConfirmHit: "Are you sure you want to end the meeting?",
+  meetingSettings: "Meeting Settings",
+  allowMembersOpenMic: "Allow members to unmute themselves",
+  allowMembersOpenVideo: "Allow members to turn on video",
+  onlyHostShareScreen: "Only the host can share screen",
+  onlyHostInviteMember: "Only the host can invite meeting members",
+  defaultMuteMembers: "Mute members upon entry",
+  pinThisMember: "Pin",
+  unpinThisMember: "Unpin",
+  allSeeHim: "See him",
+  cancelAllSeeHim: "no see",
+  muteAll: "Mute all",
+  unmuteAll: "Unmute all",
+  members: "Members",
+  screenShare: "Screen Share",
+  screenShareHint: "Sharing the screen.",
+  meetingClosedHint:
+    "The meeting has been closed or the connection has been lost. Are you sure you want to leave?",
+  meetingIsOver: "The meeting has ended!",
+  networkError: "Network error. Please try again later!",
+  shareSuccessfully: "Shared successfully!",
+  notFoundMinP: "No mini-programs published yet",
+  notSendMessageNotInGroup:
+    "Can't send messages in a group chat that's signed out",
+  whoModifyGroupName: "{name} modified the group name",
+  accountWarn: "Warn!",
+  accountException:
+    "Your account has been logged in to another device, please change your password in time.",
+  tagGroup: "TAG",
+  issueNotice: "Notification Issued",
+  createTagGroup: "Create tags",
+  plsEnterTagGroupName: "Please enter a tag name",
+  tagGroupMember: "Tag member",
+  completeEdit: "Complete Edit",
+  finish: "Finish",
+  emptyTagGroup: "No tag group yet",
+  confirmDelTagGroupHint: "Are you sure to remove this tag group?",
+  editTagGroup: " Edit Tag",
+  newBuild: " New",
+  receiveMember: " Receive member",
+  emptyNotification: "No notice yet",
+  notificationReceiver: "%s recipients: %s",
+  sendAnother: "Send another",
+  confirmDelTagNotificationHint:
+    "Are you sure to remove this notification record?",
+  contentNotBlank: "The content can not be blank",
+  plsEnterDescription: "Please enter a description",
+  gifNotSupported: "Gif images are not supported",
+  register: "register",
+  hk: "Fan Ti",
+  RegisterSuccess: "Register Success",
+  LoginSuccess: "Login Success",
+  init_validate_1: "Username consists of 6-15 letters and numbers",
+  init_validate_10:
+    "Mobile phone number or password is incorrect, please re-enter ",
+  init_validate_5: "Password must be composed of 6-15 letters and numbers, please reset your password",
+  init_validate_2: "Two passwords do not match, please reset",
+  init_validate_3:
+    "Password must consist of letters and numbers from 6 to 15. Please reset your password.",
+  init_validate_4: "Successful registration, about to return to the login page",
+  init_hint_1: "6-15 digits or English ",
+  init_hint_2: " Confirm login password ",
+  init_hint_3: " Login password ",
+  text_password2: " Please confirm your login password again ",
+  username: "Username",
+  Resend: "Resend",
+  traditional_chinese: "Traditional Chinese",
+  notification_settings: "Notification settings",
+  downloadAPP: "DownloadAPP",
+  safety: "Safety",
+  about: "About",
+  bind_email: "Bind email",
+  trusted_device: "Trusted device",
+  old_password: "Old Password",
+  please_enter_old_password: "Please enter old password",
+  go_to_binding: "Go to binding",
+  go_to_settings: "Go to settings",
+  to_modify: "To modify",
+  change_email_address: "Change email address",
+  confirm_password: " Confirm password",
+  init_text_1: "Sign in and agree ",
+  createAccount: " Create Account ",
+  init_text_2: " User Service Agreement ",
+  setting_up: " Setting up...",
+  init_text_3: " and ",
+  init_text_4: "  Privacy Policy",
+  download1: "Download",
+  confidential: "Confidential",
+  date_of_birth: "Date of birth",
+  not_perfection: "Not perfection",
+  init_text_5: "Service Agreement and Privacy Policy ",
+  init_text_6:
+    "In order to protect your legal rights, please read and agree to the following agreement ",
+  refuse: "refuse",
+  refuse_continue: "Agree and continue",
+  forget_password: "Forgotten password",
+  register_user: "Register an account",
+  check_for_updates: "Check for updates",
+  nicknames: "User's Nickname",
+  signature: "Signature",
+  gotoLogin: "Login",
+  gotoRegister: "go to register",
+  enterGroupCheck: "Group Check",
+  openPhotoError_1: "The selected file was not read ",
+  openPhotoError_2: "File upload failed ",
+  openPhotoError_3: "File information not read ",
+  agreeAll: "All agree ",
+  whatCanManagerDo: "What can the group manager do?",
+  changeGroupName: "Change the group name ",
+  deleteMemberMessage: "Delete group member message ",
+  chatPrivate: "Encrypted private chat with group members ",
+  memberMute: "group mute ",
+  deleteMember: "Remove member ",
+  changeNotice: "Publish/modify/delete Group Announcements ",
+  checkInGroup: "Check in group ",
+  setAdmin: "Set administrator ",
+  deleteAdmin: "Remove administrator ",
+  deleteAdminTitle: "Sure you want to remove this administrator?",
+  deleteAdminDetail:
+    "Remove this member from the administrator, unable to manage group messages ",
+  deleteSuccess: "Removed successfully ",
+  mobile_web_page: "Access mobile web pages ",
+  deleteMemberTitle: "Sure you want to remove this member?",
+  deleteMemberDetail:
+    "This member is removed from the group, unable to send or receive messages ",
+  deleteSelf: "Can't remove yourself ",
+  handled: "handled",
+  unhandle: "unhandle",
+  noCheck: "No application is being processed at this time ~ ",
+  success: "Operation success",
+  nameLenth: "Please set 1-15 characters ",
+  editNickname: "Edit group nickname ",
+  text_password: "Please set a new login password",
+  quit: "quit",
+  waitAMoment: "I'm looking ",
+  editWarningTitle: "Are you sure to exit the edit group nickname?",
+  editWarningDetail:
+    "The group nickname you modified has not been saved, do you want to continue to exit?",
+  editGroupAvatar: "Edit the group avatar ",
+  myGroupAvatar: "My group avatar ",
+  inviteLink: "Invite link ",
+  inviteTips:
+    "Any user who has installed this APP will be able to join your group chat via this link ",
+  inviteLinkCopy: "Invite link copied ",
+  shareLink: "Share link ",
+  manageLink: "Manage invitation links ",
+  copyLink: "Copy link ",
+  deleteLink: "Delete link ",
+  deleteLinkTipsTitle: "Are you sure you want to undo this link?",
+  deleteLinkTipsDetail:
+    "Are you sure you want to revoke this invite link? Once withdrawn, others will not be able to join this group through this link.",
+  linkManage: "Link Management ",
+  openManage:
+    "After enabled, the group owner or administrator needs to confirm before joining the group ",
+  timeValid: "Valid time limit ",
+  linkInvalidTips:
+    "Invitation link will no longer be available after this date ",
+  valid: "valid inside ",
+  dayValid: "valid within a day ",
+  forever: "forever",
+  foreverValid: "Permanently valid ",
+  attendTips:
+    "The join request has been sent, after the administrator reviews your request, you can join the group ",
+  memberCountLimit:
+    "The number of people in this group chat has reached online ",
+  linkIsOut: "Invitation link expired ",
+  requestAttend: "Request to join a group chat ",
+  needCheck: "This group chat can only be joined after administrator review ",
+  countLimit: "The number of administrators has reached the upper limit ",
+  openLock: "Timeout needs to be unlocking again",
+  closeLock: "No validation required when starting the app ",
+  checkTips:
+    "Please check if your face or fingerprint permissions are enabled ~",
+  face: "Face unlock ",
+  finger: "fingerprint unlock ",
+  gestureLock: "Gesture password unlock ",
+  noUnlock: "No unlock?",
+  inputGesture: "Please input gesture",
+  faceDetect: "Please face detect",
+  fingerDetect: "Please finger detect",
+  tryUnlocking: "Try can't unlock",
+  countRemain: "Gesture error，you can input %s count",
+  reLoginUnlock: "Relogin to unlock",
+  selectVerityType: "Please select verity type  ",
+  currentTypeNotSupport: "The current type does not support",
+  closed: "Not opened ",
+  opened: "opened",
+  lanchProtect: "Protect at startup ",
+  noProtect: "No need to protect ",
+  lockSetting: "Unlock setting ",
+  drawLine: "Draw the unlock pattern ",
+  drawOldLine: "Draw your old gesture password ",
+  drawNewLine: "Draw your new gesture password ",
+  setGesturePassword: "Set a gesture password ",
+  checkGesturePassword: "Verify gesture password ",
+  needJoinPoint: "Connect at least 4 points, please redraw ",
+  drawAgain: "Draw again ",
+  checkSuccessful: "Verified ",
+  notInCommon: "Not consistent with the last drawing, please redraw",
+  changeGesturePassword: "Change gesture password ",
+  toChange: "to change ",
+  openSuccess: "Enabled successfully ",
+  closeSuccess: "Closed successfully ",
+  hasBeenMember: "Already a group member, do not join again ",
+  joinGroup: "Join a group chat ",
+  checking: "Checking by the administrator",
+  updateNewVersion: "Discover new version ",
+  updateOkUpdate: "Update now ",
+  updateOpenDownloadFailed: "Open the download failed",
+  updateCurrentIsNew: "The current version is the latest ",
+  newVersionNotFound:
+    "No link to the latest version was found, you can visit the page to download it ",
+  openUrlFailed: "Invalid link",
+  qmvMsgNotExit: "[Reference does not exist]",
+  qmvMsgNotSupport: "[Referenced content is not supported for display]",
+  dataError: "Data parsing error ",
+  userNotBindEmail: "User is not bound to mailbox ",
+  userNotRegister: "User is not registered ",
+  checkError: "Check failed ",
+  csvTitle: "Chat Settings",
+  csvSetTopMsg: "Top chat ",
+  csvSetOptMsg: "Messages do not disturb ",
+  csvSetDisableMsg: "Mask messages ",
+  csvClearMsg: "Clear chat history ",
+  csvClearLocal: "Clear local chat history only ",
+  csvClearUser: "Clear local and %s chat history ",
+  csvSetErrorTip: "Setup failed, please check the network ",
+  gmiTitle: "Group nickname:",
+  gmiSetTalk: "Encrypted private chat ",
+  gmiSetMute: "Set group mute ",
+  gmiDeleteUser: "Move out of this group ",
+  gmiMuteTo: "gag until ",
+  gmiError1:
+    "This member information was not found, may have been moved out of the group chat ",
+  gmiError2:
+    "Your group membership information was not found, you may have been removed from the group chat ",
+  gmiError3: "Sure you want to remove this user?",
+  gmiError4:
+    "This member is removed from this group, cannot send or receive messages ",
+  gmiError5: "You do not have permission to delete this administrator ",
+  gmiError6: "You do not have permission to delete this member ",
+  gmiError7: "Gag has been lifted ",
+  gmiError8: "You do not have permission to unblock this administrator ",
+  gmiError9: "You do not have permission to unblock this member ",
+  gmiError10: "You do not have permission to ban this administrator ",
+  gmiError11: "You do not have permission to ban this member ",
+  gmiError12: "Lift the gag ",
+  gmiGroupOwnerNotFound: "群信息加载失败",
+  smmvTitle: "Gag duration ",
+  smmvMuteTime: "Select Gag duration ",
+  smmvMuteTime_10m: "10 minutes ",
+  smmvMuteTime_1hour: "1 hour",
+  smmvMuteTime_12hour: "12 hours ",
+  smmvMuteTime_1day: "1 day",
+  smmvMuteTime_30day: "30 days ",
+  smmvMuteTime_7day: "7 days ",
+  egnpTitle: "Edit group chat name ",
+  egnpSetGroupName: "Please set the group name ",
+  egnpSetTextDesc: "Please set 1-15 characters ",
+  egnpSetTitleNoPermission:
+    "You do not have permission to change the group chat name ",
+  egnpSetFailed: "Modification failed, please try again later ",
+  setGroupNameHint: "Please set the group name ",
+  givTitle: "Edit group chat name ",
+  givGroupName: "Group name ",
+  givGroupFace: "Group avatar",
+  gmsvTitle: "Management Group ",
+  gmsvSetManager: "Settings Manager",
+  gmsvToSet: "Go to set ",
+  gmsvFindMsg: "Find chat history ",
+  gmsvFindMsgDesc:
+    "When enabled, incoming group members will see recent history messages ",
+  gmsvMute: "All personnel cannot speak ",
+  gmsvMuteDesc:
+    "Only allow group owners and administrators to speak after this function is enabled ",
+  gmsvApply: "Group confirmation ",
+  gmsvApplyDesc:
+    "After this function is enabled, the group owner or administrator needs to confirm before entering the group ",
+  gmsvSetManagerTip: "Only the group master can set the administrator ",
+  gmsvSetMuteTipOn: "All personnel have been banned ",
+  gmsvSetNuteTipOff: "All gag has been lifted ",
+  gmsvApplyTipOn: "Group confirmation is enabled ",
+  gmsvApplyTipOff: "Group confirmation closed ",
+  gmsvFindGroupErr: "Failed to get group information ",
+  gmsvFindMsgOn: "Find chat history turned on ",
+  gmsvFindMsgOff: "Find chat history turned off ",
+  gmsvSetFailed: "Setting failed ",
+  gsvTitle: "Group Details ",
+  gsvGroupId: "Group ID",
+  gsvGroupMember: "Group chat member ",
+  gsvGroupMemberValue: "Total {num} people ",
+  gsvGroupNotification: "GroupNotification",
+  gsvMyName: "My group nickname ",
+  gsvMyFace: "My group avatar ",
+  gsvGroupManager: "Group Management ",
+  gsvGroupApply: "Group confirmation ",
+  gsvFindMsg: "Find chat history ",
+  gsvSetTop: "Top",
+  gsvSetOpt: "Messages do not disturb ",
+  gsvDeleteMsg: "Delete chat history ",
+  gsvDeleteLocal: "Clear local chat history only ",
+  gsvDeleteAllMsg: "Clear local and all member chat history ",
+  gsvDeleteOtherMsg: 'Clear the chat history of local and all members',
+  gsvGroupDelete: "Sure you want to disband the group chat?",
+  gsvOutGroup: "Are you sure you want to quit this group chat?",
+  gsvNoNotification: "No announcement yet ",
+  gsvClearSuccess: "Clear successfully ",
+  gsvClearFailed: "Clearing failed, please try again later ",
+  cvAllPeople: "All people ",
+  cvVideo: "[video]",
+  cvPicture: "[picture]",
+  cvFile: "[Dataja]",
+  cvVoice: "[voice]",
+  cvNotSupportMsg: "Unsupported messages ",
+  cvSendMsgErrorNoPermission:
+    "because the other side of the permissions, you can't send message to the TA",
+  cvSendMsgPnMute: "In silence, cannot send message ",
+  cvCopyMsg: "Copied to clipboard ",
+  cvCopyMsgNotSupport: "Messages not supported yet ",
+  cvdeleteLocal: "Delete from local ",
+  cvdeleteLocalAndServer: "Removed from local and server ",
+  cvdeleteLocalAndServerUser: "removed from local and {name}",
+  cvClearMsgTip: "Cleared session messages ",
+  cvGroupCreateSuccess: "Group chat created successfully ",
+  cvGroupCreateSuccessTip1:
+    "Congratulations on your successful group creation, click the button below to invite friends to join the group ",
+  cvGroupCreateSuccessGo: "Invite friends",
+  cvGroupNotification: "GroupNotification: ",
+  sendMsg: "Send message ",
+  cvOnlineCount: "{count} online ",
+  cvUserCount: "Total {count} people ",
+  cvNotAtUser: "There is no group member for @oh, go ahead and add members ",
+  all: "all",
+  clCloseConversation: "Fold top chat ",
+  clOpenConversation: "A top conversation ",
+  clNoConversation: "No recent conversation ~ ",
+  clTitle: "Chat ",
+  clDelete: "This session will be deleted ",
+  clDeleteDesc:
+    "Deleting this conversation will delete the local chat history ",
+  clDeleteSel: "You did not select a session ",
+  clDeleteSel1: "This session will be deleted ",
+  clDeleteSel2: "These conversations will be deleted ",
+  clDeleteDesc2:
+    "Deleting these conversations will delete the local chat history ",
+  homeItem0: "Dialogue ",
+  homeItem1: "Contacts ",
+  homeItem2: "My ",
+  exitTip: "Click back again to exit ",
+  mineSigEmpty: "This user is lazy and has no signature ~ ",
+  uaProtocol: "User Service Protocol ",
+  savSearchTip: "Quick search for chat content ",
+  savMedia: "image/video",
+  searchEmptyTip: "No relevant chat history found ",
+  savSearchMsg: "related chat history ",
+  savConversation: "conversation ",
+  savMsg: "Chat history ",
+  savConversationNotFound: "Conversation not found ",
+  savMsgNotFound: "This information was not found ",
+  samTitle: "Media ",
+  samTimeFormat: "yyyy/M",
+  notSupportType: "Unsupported type",
+  media: "Media ",
+  openUrl: "Open link ",
+  lkAddGroupUrl: "Join group chat link ",
+  lkAddOtherUrl: "External link, open with default browser ",
+  lkUnknowUrl: "unrecognized link ",
+  openUrlFailed1: "Failed to open the link ",
+  yszcTitle: "Privacy Policy ",
+  slsmTitle: "Legal Statement",
+  ctmRemove: "Remove",
+  ctmOkRemove: "Confirm removal ",
+  ctmTopMsgCount: "Total {count} bars ",
+  ctmEmptyText: "No top message ",
+  recordTimeShort: "The recording time is too short ",
+  ctmSuccess: "Top placement success ",
+  ctmRemoveSuccess: "Remove the top message successfully ",
+  ctmMsgNotFound: "This message does not exist ",
+  clearGroupNotification: "Group notification cleared ",
+  publicGroupNotification: "Release notification ",
+  dialog_tip1: "Warm reminder ",
+  dialog_tip_token_invaild: "Login has expired, please log in again ",
+  cvFirstTip:
+    "Information and calls in this conversation have been encrypted end-to-end ",
+  notify_new_msg_title: "You have received a new message ",
+  notify_new_msg_msg: "Message content:.....",
+  dataError1: "Data error ",
+  groupApply: "Groupapply ",
+  muteLate: "after lifting the gag ",
+  groupMuteing: "in group silence ",
+  groupMemberNotFound: "Group member information not found ",
+  bindEmailTipTitle: "Bind mailbox ",
+  bindEmailTipContent:
+    "For the security of your account, please bind your email ",
+  bindEmailTipOk: "unbind ",
+  bindEmailTipCancle: "Do not bind yet ",
+  managerApplying: "Administrator applying ",
+  quote: "Quote ",
+  request_exception: "Request exception",
+  clearMsg: "Clear message ",
+  pressToSay: "Press and speak ",
+  slideToCancelSend: "SlidetoCancelsend ",
+  releaseToEnd: "Release to end ",
+  releaseToCancelSend: "Release your finger to cancel the send ",
+  invalidVoiceMessage: "Invalid voice message ",
+  hit: "hit",
+  downloadingCache: "Download cache...",
+  unableToRecognize: "Not recognized!",
+  scanResult: "scan result ",
+  register_fail: "Registration failed, please check the network and try again ",
+  skip: "skip",
+  toUse: "Experience it now ",
+  sideToSide: "end-to-end encryption ",
+  design: "Design ",
+  guide1: "Send message, encrypted transmission, for your own reading only ",
+  guide2: "More freedom to communicate on your own terms ",
+  guide3: "A secure communication platform built around you ",
+  inputGroupAc: "Please enter group Bulletin (character limit 0-500) ",
+  clickToEnjoy:
+    "Click on the link to save, or copy this paragraph, open the QDDchat APP, and join the group chat.",
+  createOK: "Created successfully ",
+  noPravcy: "You do not have permission to create group chats ",
+  groupNumberToTop: "The number of groups reaches the upper limit.",
+  createFail: "Create failed, please try again later ",
+  create: "Create ",
+  uploadGroupAvatar: "Upload group avatar ",
+  useNewPassword:
+    "Password changed successfully, redirecting to login page",
+  error_14: "server error (14)",
+  error_500: "server error (500)",
+  error_1000: "The user signature token is invalid ",
+  error_1001: "Parameter error",
+  error_1002: "The current version is the latest version ",
+  error_6001: "This username is already registered",
+  error_6003: "The password must consist of 6-15 letters and numbers ",
+  error_6004: "User name verification error",
+  error_6005: "Password is incorrect, please try again",
+  error_6006:
+    "The number of incorrect passwords today exceeds the upper limit ",
+  error_6007: "The user does not exist ",
+  error_6008: "The old password is incorrect, please re-enter ",
+  error_6009:
+    "The old password is the same as the new password, please re-enter ",
+  error_6010: "Frequently obtain verification codes ",
+  error_6011: "Verification code is incorrect, please try again",
+  error_6012: "The verification code has expired ",
+  error_6013: "Too many verification code failures ",
+  error_6014: "The verification code has been used ",
+  error_6015: "The mailbox does not exist ",
+  error_6016: "The mailbox has been bound by another person, please re-enter ",
+  error_6017: "Verification code does not exist ",
+  error_6018: "The account has since been suspended ",
+  error_6030: "The server mailbox is not configured",
+  error_100002: "The top message reached the upper limit ",
+  error_100003: "This message is at the top ",
+  error_api: "Request error ",
+  error_http: "Network request error ",
+  error_http_11: " Network connection timeout ",
+  error_http_12: " Network connection timeout ",
+  error_http_13: " Network connection timeout ",
+  error_http_14: " Network certificate error ",
+  error_http_15: " Request data error ",
+  error_http_16: " Request cancelled ",
+  error_http_17: " Network connection timeout ",
+  error_http_18: " There was an error inside the network request ",
+  error_sdk_err_1002: " Unauthorized operation ",
+  error_sdk_err: " Operation failed ",
+  search_hine_1: "search",
+  str_no_data: "no data",
+  str_no_net: "no net",
+  download_not_support_type: "Unsupported format",
+  download_save_at: "files stored in: ",
+  download_not_url: "Download link not recognized ",
+  download_file_success: "Saved successfully, you can view it in the album ",
+  download_failed_file: " Failed to save the file.",
+  download_failed: "Download failed.",
+  loading_failed_retry: " Loading failed, click retry",
+  loading_ing: " loading...",
+  str_online_later_minute: " Online a minute ago ",
+  str_online_later_hour: " online hours ago ",
+  str_online_later_llg: " Not online for a long time ",
+  str_online_later_yesterday: " online yesterday",
+  str_yesterday: "Yesterday",
+  str_online_later_near: " Online recently ",
+  str_minute: " minute",
+  clean_notice: "Clean the notice",
+  clean_notice_1: "Are you sure you want to empty group notices?",
+  publish_notice: "Publish an announcement ",
+  publish_notice_remind: "Publish this notice to alert all group members ",
+  quit_edit: "Exit edit",
+  quit_the_edit: "Exit this edit?",
+  continue_edit: "Continue to edit",
+  publish_success: "Publishing success",
+  face_success: "Face unlock successfully opened ",
+  finger_success: "Fingerprint unlocking successfully enabled ",
+  groupDismissed: "The group is dismissed",
+  hasOut: "Expired ",
+  otherLoginStyle: "Other login methods ",
+  otherRegisterStyle: "Other registration methods ",
+  hasAccount: "Already have an account, go to login ",
+  mobileCode: "Mobile verification code ",
+  codeSendTo: "The verification code was sent to ",
+  inputNumber: "Please enter the phone number ",
+  error_6019: "The phone number has been bound by another person",
+  error_6020: "The email address has been bound to another person ",
+  error_6021: "The email address is wrong, please re-enter ",
+  error_6022: "The phone number is incorrect, please re-enter ",
+  error_6023:
+    "This account has been blocked, the password cannot be recovered ",
+  error_6024:
+    "This account is not bound to the mailbox, the password cannot be recovered ",
+  error_6025:
+    "The account is not bound to the mobile phone number, the password recovery is not supported",
+  error_6026:
+    "The phone number has been bound by someone else, please re-enter ",
+  error_6031: "Please enter the correct mobile number ",
+  error_6032: "Please enter the correct email address ",
+  bindPhone: " Bind phone number ",
+  bindPhoneSuccess: " Phone number binding successful ",
+  bindPhoneTipChange:
+    " If your mobile phone number is no longer used, please change it in time ",
+  please_input_email: " Please enter your email address ",
+  findPassByEmailTip: " Retrieve password by email ",
+  findPassByPhoneTip: " Find your password with your phone number ",
+  resetPass: " Reset password",
+  current_bind_phone: " Current mobile phone number: ",
+  reget: " regain",
+  getVerifyCode: " Get the verification code ",
+  alreadyRegister: " This mobile number has been registered",
+  alreadyRegister2: " This email address has been registered",
+  netErrorRetry: "Network error, click page reload ~",
+  newPhoneNumber: "New phone number ",
+  qrSaveFail: "QR code saving failed ",
+  qrSavePhoto: "QR code saved to album ",
+  userId: "User ID: ",
+  addMeToFriend: "Add me as a friend ",
+  validTime: "Valid to ",
+  clickRefresh: "Click Refresh",
+  qrUseCount: "This QR code is valid for {count} times ",
+  share: "share",
+  savePhoto: "Save the picture ",
+  private_chat: "QDDchat",
+  iAm: "I am ",
+  addFriendSuccessful: "Add friends successfully ",
+  addFriendFaceToFace: "Add friends face to face ",
+  faceToFace: "Face To Face",
+  inputSameKey: "Here are the friends who have entered the same number ",
+  sameKeyAddFriend: "Add friend by entering the same number as your friend ",
+  self: "self",
+  age: "age",
+  confirmAddFriend: "Confirm to be added as a friend ",
+  inputUserId: "Please enter a user ID",
+  myQr: "My QR code ",
+  back: "return ",
+  canNotAddSelf: "You can not add yourself to a contact ",
+  notExsit: "This user does not exist ",
+  searchUserId: "Search user ID: ",
+  remarkInfo: "Please remark the verification information ",
+  applyRemark: "Application remarks ",
+  last4Number:
+    "Please enter the last4 digits of the other party login phone number ",
+  checkLast4Number: "Verify the last 4 digits of the phone number ",
+  addFriendApply: "Add friend request ",
+  codeInvalid: "Key invalid, please re-initiate ",
+  shareFail: "Share failure ",
+  addFriendText1: "Add as friend ",
+  friendNumberCatchTopLimit: "your friends number has reached upper limit",
+  friendNumberCatchTopLimitCurrentDay:
+    "add buddy has reached its upper limit on the same day",
+  error_1003: "Please try again later",
+  error_6033: "Invalid key or invalid, please try again ",
+  error_6034: "Maximum number of friends ",
+  error_6035: "Maximum number of friends for the day ",
+  error_6036: "The user's mobile number is empty ",
+  error_6037: "Failed to verify the phone end number ",
+  error_6040: "Group already exists ",
+  error_6050: "QR code has expired ",
+  error_6051:
+    "The number of QR codes used that day has reached the upper limit ",
+  error_6052: "The number of QR code usage has reached the upper limit ",
+  error_6053: "The number of scan functions today has reached the upper limit ",
+  error_6054: "The other party has added you as a friend",
+  error_6055: "Invalid key or invalid, please try again ",
+  error_6066: "Account balance is insufficient ",
+  error_6067: "The red packet has been received ",
+  error_6068: "The red packet has expired ",
+  error_6069: "Unable to receive exclusive red packet ",
+  error_6070: "The red packet has been received, can not receive any more ",
+  deletedByFriendHint1: "You're not their friend yet, ",
+  deletedByFriendHint2: "Add friends",
+  deletedByFriendHint3: "Keep chatting",
+  gotoAddFriend: " Go to add friend ",
+  addFriendGotoGroup: " Invite friends to join a group ",
+  notContacts: " No contacts yet ",
+  notContactsFound: " No friends associated with %s ",
+  remarkStr: "Remark",
+  remarkStrHint: " Please enter remarks ",
+  deleteConfirm: " Do you confirm to delete friends ",
+  deleteFriend: " Delete friend ",
+  searchContact: "Search for contacts",
+  notGroupTip: " Haven't joined the group chat yet ",
+  notAddFriend: " No new friends have been added yet ",
+  friendApplyAdd: "Friend Request",
+  addSuccess: " Add success ",
+  hasSelectFriend: "Selected friend",
+  myBalance: "My Balance",
+  revokeMsgTip: "withdraw the message ",
+  error_10050: "Operation failed (no record found)",
+  set_manager_tip_1:
+    "You have selected the group master and have the highest administrative rights ",
+  envelope: "red envelope ",
+  uidStr: "User ID",
+  showGetDetail: "View claim details ",
+  waitOtherEnter: "Wait for the other party to join ",
+  isFriend2SExit: "Become a friend, automatically quit after 2 seconds ",
+  sendRedPacket: "Send red packets ",
+  redPacketNumber: "Red packet number ",
+  ge: "a ",
+  total: "Total ",
+  eachNumber: "single quantity ",
+  selectUser: "Select user ",
+  number: "quantity ",
+  redPacketType: "red packet type",
+  checkVerity: "Security verification ",
+  balance: "Account balance",
+  sendTo: "SMS verification code sent to ",
+  pin: "Lucky luck red envelope ",
+  putong: "ordinary red envelope ",
+  zhuanshu: "Exclusive red envelope ",
+  dajidali: "May you come into a good fortune!",
+  redPacketInfo: "Red packet details ",
+  best: "best luck ",
+  saveToAccount: "deposited into account ",
+  minuteOut: "minute out ",
+  hourOut: "Hourout ",
+  showDetail: "View details ",
+  maxMemberNumber: "Number is less than the members number",
+  sended: " sent ",
+  get: "Received ",
+  waiting: "Waiting for the user to collect ",
+  gong: " red envelope ",
+  envelope_get_over: " The red envelope has been collected ",
+  envelope_get: " get ",
+  de: " of ",
+  envelope_get_message: "Receive red envelope message",
+  bind_phone_please:
+    "For the security of your account, please bind the phone number ",
+  delay_bind: "Do not bind yet ",
+  send_envelope_x: "sent red envelope ",
+  send_envelope_back_all:
+    "The red envelope has been returned after more than 24 hours ",
+  envelope_x_can_get: "Only {name} retrievable ",
+  envelope_get_completed: "Slow hand, red envelope snatched ",
+  send_envelope_back_some:
+    "The red envelope has been returned for more than 24 hours ",
+  envelope_x_personal: "Exclusive red envelope for %s ",
+  envelope_normal: "ordinary red envelope ",
+  login_out_of_date: "Login has expired, login again ",
+  get_envelope_completed: "has been taken ",
+  x_is_personal: "Exclusive ",
+  error_6072: "The maximum amount of a single red packet has been reached ",
+  error_6073: "The number of a single red packet cannot be less than 0.01",
+  error_6074: "Red packet function is off ",
+  distroyAccount: "Log off account ",
+  inComing: "income ",
+  outGoing: "amount paid",
+  balance_order_detail: "Balance details ",
+  type: "Type",
+  payType: "payment method ",
+  orderNo: "Order number ",
+  time: "Time ",
+  itemDataNotSupport: "Currently not supported ",
+  manager_change_account: "Administrator adjustment ",
+  groupEnvelope: "Group red envelopes ",
+  accountPay: "Balance payment ",
+  paySuccess: "Payment success ",
+  groupEnvelopePersonal: "Group Red packet - Exclusive Red packet ",
+  groupEnvelopeNormal: "Group red packets - normal red packets ",
+  changeAccount: "transfer account ",
+  groupEnvelopeRandom: " Group red packets - Luck red packets ",
+  groupEnvelopeAllBack: "Group red packets - all returned ",
+  groupEnvelopeSomeBack: "Group red packet - partial refund ",
+  distroyTips:
+    "In order to confirm the security of your account <br> we will perform the following verification before you close your account ",
+  safeStatus: "Account is safe ",
+  safeTips:
+    "Please ensure that your account does not change the password, change the mobile phone/email and other sensitive operations, the account is not at risk of theft.",
+  strikeBalance: "Account property settlement ",
+  strikeTips:
+    "After you close your account, the red envelope balance data of your account will be deleted and cannot be recovered.",
+  dataDelete: "Account data deletion ",
+  deleteTips:
+    "After the account is deleted, all data under the account will be deleted and cannot be recovered. Data includes your chat history, group chats you have joined, friend relationships, and more. ",
+  applyDistroy: "Apply for account cancellation ",
+  distroyConform: "Are you sure you want to log out?",
+  distroyConformTips:
+    "After logging out, you will exit the login. Perform this operation with caution!",
+  distroy: "Confirm logout ",
+  submitSuccess: "Submission successful ",
+  submitted: "Your deregistration application has been submitted!",
+  helpWord:
+    "The platform will process your application and delete all your data within {day} working days, if you need help, please contact us through the official website.",
+  know: "I know",
+  revoke: "Revoke",
+  revokeSuccess: "Revoke success",
+  recover: "Are you sure you want to revoke the account?",
+  toNormal: "Account status becomes normal after revoke ",
+  beRecover: "Confirm recovery ",
+  recoverSuccess: "Recovery success ",
+  redPackageCountTip: "Single red packet cannot be less than 0.01",
+  closeAccount: " Close Account",
+  recoverAccount: " Recoveraccount ",
+  recoverAccountTipTitle: " Are you sure you want to restore your account?",
+  recoverAccountTipDesc: " Account status becomes normal after recovery ",
+  recoverAccountTipOk: " Recovery confirmed ",
+  closingAccount: " The account is under cancellation review ",
+  closingAccountEndTime:
+    ", the deletion is expected to be completed in {num} working days ",
+  error_6075: "Repeat application ",
+  error_6076: "No record of cancellation request found ",
+  error_6077: "Logout review ",
+  error_6078:
+    "The user does not exist or has been logged out, please check and confirm ",
+  error_6079: " You are no longer in the group chat, can not collect ",
+  error_video_pre_err: "File generation error, data loading failure.",
+  err_upload_file: "Upload failed, please try again later ",
+  sendCodeExceErr:
+    "Failed to send the verification code, please try again later ",
+  bindEmailExecErr: "Failed to bind the mailbox, please try again later ",
+  err_msg_send_failed: "Sending failed, please try again later ",
+  error_red_package_tip1: " Red packet has expired",
+  upload: "upload",
+  error_6081: " Failed to send, please try again later",
+  privateSetting: "Privacy setting",
+  atTip: "{'@'}you",
+  timeoutLock: "Timeout Lock",
+  reTry: "Try again",
+  plsEnterPassword6_15: "Password (6-15 alphanumeric)",
+  plsEnterAccount6_15: "User name (6-15 alphanumeric)",
+  removeGroupNotice: "Remove group notice",
+  net_error_no_net: "Network unavailable, please check your network Settings ",
+  groupChatError: "Content failed to load, click retry ",
+  legalNotice: "Legal notice ",
+  sysNotify: "System notification ",
+  exit_group_tip: "Exit_group_TIP ",
+  group_mute_ing: "This group has been banned ",
+  w_edit_group_notification: "The group bulletin has been edited ",
+  messageNotify: "Message notification ",
+  groupEnterLimit:
+    "The number of invited friends in the group has reached the upper limit, please check",
+  unRecard: "Unable to record:",
+  notSet: "not yet ",
+  hasCreateGroup: "A group chat has been created",
+  joinGroupForLink: "Join the group chat via the link",
+  be: "be",
+  moveoutGroup: "Move out of the group chat",
+  groupOwnerChangeTo: "The group owner has changed to",
+  changeGroupNameTo: "Change the group name to",
+  disbandedGroup: "Disbanded the group chat",
+  bannedFromSpeaking: "Banned from speaking",
+  gagWasLifted: "The gag was lifted",
+  initiatedGroupGag: "Initiated a group gag",
+  shutDownGroupGag: "Shut down the group gag",
+  target: "target",
+  groupSizeUpperLimit: "The group size reaches the upper limit",
+  topUpperLimit: "The top reaches the upper limit",
+  topMessageRepeate: "The top message was repeated",
+  userHasReadMessage: "The user has read the message",
+  placeholder: {
+    allMuted: "Group owner or admin has muted everyone",
+    groupDisbanded: "The group has been disbanded",
+    groupBanned: "The group has been banned",
+    singleBanned: "You have been muted",
+    search: "Search",
+    pleaseInput: "Please input",
+    sec: "sec",
+    groupNoticePlaceholder: "Input group notice..",
+    inputPassword: "Input password",
+    confirmPassword: "Confirm input password",
+    inputPhoneNumber: "Input phone number",
+    select: "Select",
+    userOrGroupIDInput: "Input {type}",
+    writeMessage: "Write message...",
+    inputGroupName: "Input group name",
+    typingMessage: "Type message here",
+    inputName: "Input your nickname"
+  },
+  withoutQualification:
+    "The user does not meet the qualification for adding friends",
+  groupMask: "Group chat mask",
+  groupMaskDescription: "Set the group nickname and avatar",
+  pleaseBind:
+    "For the security of your account and to avoid restricted friend adding function, please bind",
+  orStr: " or ",
+  andStr: " and ",
+  confirmExit: "Confirm Exit",
+  pleaseBindTip1: "For the security of your account, please bind it",
+  skin_item_user_name: "Zhang Nana",
+  skin_item_msg1: "Hello, received a timely reply",
+  skin_item_msg2: "Okay, received",
+  appearance: "Appearance",
+  bubbleBgColor: "Dialogue bubble color",
+  chatBackground: "Chat background",
+  moreSettings: "More Settings",
+  highPerformanceModel: "Clean Mode",
+  highPerformanceModelDesc: "If enabled, do not display appearance effects",
+  skinPreview: "Effect Preview",
+  defaultText: "Default",
+  fontSizePreview: "Preview font size, drag the slider below to adjust the font size. After setting, all page text will change the font size.",
+  changedText: "Alright, changed",
+  imageAlpha: "Pattern Transparency",
+  min: "minimum",
+  max: "maximum",
+  backgroundColor: "Background Color",
+  changeSaveTip:
+    "You have modified the settings. Do you want to save and return?",
+  saveAndBack: "Save and Return",
+  changeAvatar: "Change avatar",
+  appFontSize: "Global font size",
+  appFontSizeTip:
+    "Preview font size, drag the slider below to set font size. After setting, it will change the font size of all text within the application.",
+  maskDesc:
+    "Once enabled, group members can set their own group nickname and avatar.",
+  groupMaskOpenTip: " %s group chat mask %s",
+  groupMaskOpenTipNew: " group chat mask",
+  open: "Open",
+  close: "Close",
+  groupMaskOpenMsgErrorTip: "Group chat mask function switch prompt",
+  maskOpen: "The group chat mask has been turned on",
+  maskClose: "The group chat mask has been closed",
+  transmit: " transmit",
+  multiSelect: " multiselect ",
+  singleShareMsg: " Forward article by article ",
+  groupShareMsg: " Merge forward ",
+  notGroupFound: "No group chat related to {name} found ",
+  rememberPassword: "Remember passwords ",
+  mobileLogin: "Mobile login ",
+  emailLogin: "Email login ",
+  recentConversation: " Recent conversation ",
+  selectContact: " Select a contact ",
+  selectGroup: " Select group chat ",
+  noGroup: " No group chat ",
+  notSelectMessage: " You have not selected the message ",
+  hiddenMsg: " Hide message ",
+  hiddenMsgTip: " Do you hide the source?",
+  yes: " Yes ",
+  no: " No ",
+  mergeMessageList: " [merge forward] chat history ",
+  singleMlCount: " [Forward item by item] total {count} messages ",
+  notFoundUser: " User not found ",
+  notShouldFoundUser: "User not found",
+  notFoundGroup: "The group chat cannot be found",
+  selectAt: " Select the person who wants {'@'} ",
+  welcomeToQDDChat: "Welcome to the Ball Belt ",
+  choiceYourAvatar: "Please select your avatar ",
+  enterPawAgain: "Please enter your password again",
+  Someone: "Someone {'@'}me",
+  hasSelect: "Selected ",
+  groupChat: "Groupchat ",
+  groupMember1: "Group member ",
+  groupSendMsg: "Group message ",
+  msgNotSupportTransmit: "indicates that the message cannot be forwarded.",
+  bindGoogle: "Bind to Google",
+  bindFacebook: "Bind to Facebook",
+  unbind: "Unbind ",
+  accountSettings: "Account Settings",
+  thirdPartyAccountBinding: "Third-party account binding ",
+  otherSettings: "Other Settings",
+  groupChatLoadFailed: "Group chat information failed to be loaded.",
+  addGroupSend: "Send a group message ",
+  groupSendNoData: "No group messages have been sent yet ",
+  removeBinding: "Unbind ",
+  unBindToastPart1: "After unbinding, will no longer be used ",
+  unBindToastPart2: "Account login, do you want to continue to cancel?",
+  noOpPermission: "There is no operable permission yet ",
+  bindingPhoneOrEmail:
+    "For the security of your account data, please bind the phone number or email address first and then unbind it.",
+  unbindingSuccess: "Unbind success ",
+  unbindingFair: "Unbind failed ",
+  bindingPhoneOrEmailSetPassword:
+    "For the security of your account data, please bind your mobile phone number or email address before setting a password.",
+  showAll: "View all ",
+  allCount: "All total {num} ",
+  BindingPhoneOrEmailSetPassword:
+    "in order to data security of your account, please first binding mobile phone number or email to set the password again.",
+  recoverSuccessLoginAgain: "Recovery successful, please log in again ",
+  createGroupSend: "Send a group message ",
+  groupSend: "to send a group message.",
+  notSelect: "You have not selected yet ",
+  confirmDeleteTitle: "Are you sure to delete the selected group?",
+  totalGe: "Total %s ",
+  sendTotalGe: "Send to ({num}) ",
+  uploadFailed: "Upload failed.",
+  selectMax: "The number of selections reached the upper limit ",
+  newFriendApply: "You have a new friend, click to view ",
+  error_6091: "The number of selections exceeds the upper limit ",
+  error_6092: "Message id already exists ",
+  notSupportLoginStyle: "Not supported yet, please use another login method ",
+  pay_password: "Payment password",
+  pleaseEnter: "Please enter ",
+  loadingPage: " Page loading ",
+  payTip:
+    " You have not set the payment password, please complete the setting before proceeding.",
+  deleteRedPackageErrTip: " The red packet message is irrevocable ",
+  applyIconTip:
+    "The application has been submitted, the avatar can be replaced after approval ",
+  applyIconProgress: "View application progress ",
+  applyRecord: "Request record ",
+  repealWithdrawApply: "Are you sure to withdraw the withdrawal application?",
+  withdrawNotes: "Withdrawal record ",
+  inReview: "under review ",
+  passTheAudit: "Audit passed ",
+  rejectedPayment: "Rejection ",
+  revoked: "revoked",
+  undone: "Undone",
+  withdrawalQuantity: "Withdrawal quantity ",
+  withdrawalBack: "withdrawal returned ",
+  update_tip1: " If not updated ",
+  update_tip2: " Go to the official website to download ",
+  update_ing: " updating ",
+  update_install: " Install now ",
+  installFailed: " Not installed, please try again later ",
+  installNotFoundFile: " Installation file not found, please try again later ",
+  error_6093: "Login mode is not supported ",
+  error_6094: "The number of avatars has reached the upper limit",
+  deleteIcon: "Do you want to delete this profile picture?",
+  balanceWithdraw: "Balance withdraw",
+  inputPayPassword: "Please enter the payment password ",
+  withdrawalSuccess: "Withdrawal success ",
+  personIcon: "Personal avatar ",
+  groupIcon: "Group chat avatar ",
+  error_6096:
+    "Do not set a payment password with repeated, consecutive digits ",
+  forgetPayPassword: "Forgot your payment password ",
+  downloadFailedTip: "Download failed, please try again later.",
+  withdrawal: "withdraw",
+  canBalanceWithdraw: "Withdrawable balance",
+  error_6097: "not sufficient funds",
+  headRejected: "Rejected",
+  retracted_h5: "Retracted",
+  message_h5: "message from",
+  notSet2: "Is not set",
+  passed: "Passed",
+  readDeleteTime: "Read Message Burn Time",
+  readDeleteTimeTitle: "Burn Time",
+  error_6090: "Account Bound",
+  inputRemark: "Please enter your remark",
+  authFailed: "Authorization failed",
+  userNullError: "The user account is abnormal",
+  community: "Community",
+  join: "Join the group chat to explore more community activities～",
+  posteviews: "No activities have been posted yet～",
+  views: "views",
+  ended: "Event has ended",
+  configError: "Configuration error, unable to open temporarily",
+  burnMsgOpen: "{name} set message read {time} after burning",
+  burnMsgClose: "{name} turned off read-and-burn, messages no longer auto-burn",
+  burnMsgNotify: "Read and burn notification",
+  homeItem3: "Community",
+  messageTimeOut: "Message has expired",
+  burnContentTip:
+    "Message is burning, do you want to exit and burn with one click?",
+  cancelLater: "I'll check later",
+  burnConfirm: "Burn immediately",
+  setNickNameTimes: ", nickname can only be modified once within %s days",
+  voiceSendErrTip1: "Support sending voice from %s-%s seconds only",
+  textSendErrTip1: "Maximum input %s characters",
+  pictureSendErrTip1: "Support sending pictures from %s-%sM only",
+  videoSendErrTip1: "Support sending videos from %s-%sM only",
+  your: "Your",
+  joinCommunity: "Join the group chat to explore more community activities～",
+  noActivity: "No activities have been posted yet～",
+  views: "views",
+  ended: "Event has ended",
+  errorLink: "Cannot find the link",
+  set_payment_password: "Please set a 6-digit payment password",
+  unset_payment_password:
+    "Please do not set a payment password with repeated or consecutive digits",
+  Confirm_Payment_Password: "Confirm Payment Password",
+  Please_confirm_payment_password:
+    "Please re-enter to confirm payment password",
+  error_6100:
+    "Sorry, you can only modify your personal nickname once every {day} days",
+  viewDetailed: "View detailed information of group members",
+  inviter: "Inviter",
+  lastLoginTime: "Last login time",
+  DeleteThisUsersgroup: "Delete this user's group chat messages in this group",
+  AddGroupMembers: "Add group members without verification consent",
+  error_6103: "This user is a regular member and does not have permissions",
+  error_6104: "The person added is not in the group",
+  error_6108: "Account anomaly",
+  group_remark: "Group Remark",
+  input_group_remark: "Please enter the remark content",
+  await_accepting: "Device authorization request has been sent",
+  apply_tips: "This device is not trusted or did not pass the review. Do you want to send device information for authorization application?",
+  apply_send: "Send application",
+  apply_ttl: "Device Login Authorization",
+  group_limit500: "Maximum of 500 people per group",
+  select_group: "Select friend group",
+  cantfind: "No contacts related to {name} found",
+  error_6109: "The user's number of friends has reached the limit",
+  error_6106: "Please wait for device approval before logging in",
+  selectGroups: 'Select Groups',
+  group_member_info: "Group Member Info",
+  join_time: "Join Time",
+  inviter_user: "Inviter",
+  last_login_time: "Last Login Time",
+  sync_group_avatar: 'Do you want to change the group avatar simultaneously?',
+  invite_fail: "{usernames}'s account is abnormal!",
+  enterAndCtrl:'Enter to send / Enter+Ctrl for new line',
+  enterAndCtrlIOS:'Enter to send / Enter+control for new line',
+  scanLogin: 'Scan to Login',
+  formLogin: 'Login with Password',
+  scanText: 'Login using Qudi Dai app with QR Code scan',
+  scanSubText: 'Use Qudi Dai app to scan QR Code for login',
+  qrcodeExpired: 'QR Code expired',
+  expiredTime10: 'This QR Code is valid for 10 minutes',
+  reflesh: 'Click to refresh',
+  scanSuccess: 'Scan successful',
+  confromLogin: 'Please confirm login',
+  onlineStatus: "Online Status:",
+  networkDiagnostic: "Network Diagnostic",
+  "setPaymentPassword": "Please set a 6-digit payment password",
+  "unSetPaymentPassword":
+      "Please do not set a payment password with repeated or consecutive digits",
+  "verifyPassword": "Verify payment password",
+  "confirmPaymentPassword": "Confirm payment password",
+  "verifyCurrentPassword": "Please verify your current payment password",
+  "reInsetPaymentPassword":
+      "Please re-enter your confirmation payment password",
+  "paymentPasswordDifferent": "Password is different, please re-enter",
+  "getPaymentPasswordWay": "Please select a way to retrieve your password",
+  "selectFriendGroup": "Select Friend Group",
+  "selectGroups": "Select Groups",
+  "eachGroupLimitNumber": "The maximum number for each group is {p}",
+  "selectChatLimitNumber": "You can select up to {p} chats",
+  "deviceID": "Device ID：",
+  "groupChatRemark": "Group chat remark",
+  "pleaseEnterRemarks": "Please enter remarks content",
+  "groupMembershipInfo": "Group Membership Information",
+  "error_6102": "Maximum of 500 people per group",
+  "distroyed": "Deactivated",
+  "forbiddened": "Banned",
+  "addGroupMemberWithoutApply": "Add members without verification consent",
+  "error_6109": "This user's friend list has reached the maximum limit.",
+  "apply_ttl": "Device Login Authorization",
+  "apply_tips":
+      "This device is not trusted or has not been approved, do you want to send device information for authorization request?",
+  "apply_send": "Send Request",
+  "device_auth_send": "Device authorization request has been sent",
+  "using_trusted_device":
+      "Logging in with this device is risky, please login with a trusted device",
+  "account_closed": "Account closed",
+  "google_code": "Google Code",
+  "input_google_code": "Please enter the Google Code",
+  "inviterUser": "Inviter",
+  "lastLoginTime": "Last Login Time",
+  "error_6105": "Untrusted device, please submit an application",
+  "error_6106": "Please wait for device approval before logging in",
+  "error_6107": "Device approval not passed",
+  "hasDetailInfoPermission": "View detailed group member information",
+  "editUserHeaderWithGroupHeader":
+      "Do you want to change the group chat header at the same time?",
+  "darkModel": "Dark mode",
+  "darkModelSetDesc": "Turn on or off dark mode following the system settings",
+  "whiteModel": "Light mode",
+  "fileNotFound": "File not found",
+  "openFileInApp": "Preview file",
+  "openFileOtherApp": "Open in other app",
+  "openByBrowser": "Download using browser",
+  "pauseDownload": "Pause download",
+  "resumeDownload": "Resume download",
+  "downloadFailed": "Download failed",
+  "downloading": "Downloading",
+  "notdownloaded": "Not downloaded",
+  "cancelDownloading":
+      "File is currently being downloaded. Do you want to cancel the download?",
+  "failedToDownload": "File download failed. Do you want to retry downloading?",
+  "cancelDownload": "Cancel download",
+  "sending": "Sending",
+  "fileTypeNotSupported": "Unsupported file format for upload",
+  "fileSizeOut": "File size exceeded",
+  "restrict": "Restrict",
+  "getWithPhone": "Recover with phone number",
+  "getWithEmail": "Recover with email address",
+  "fileSize": "File size",
+  "whetherDownloadFile": "Whether to download the file",
+  "downloadFailedTip1":
+      "Download failed, Please check your network and try again",
+  "downloadQueueTip": "Added to the download queue, Waiting for download",
+  "notSupportTransmitTip": "This message cannot be forwarded at the moment",
+  "voiceSize": "Audio file size must not exceed 100MB.",
+  "wordSize": "Document file size must not exceed 100MB.",
+  "apkSize": "Installation package file size must not exceed 300MB.",
+  "zipSize": "Zip file size must not exceed 300MB.",
+  "groupDeleteUserTip":
+      "Simultaneously delete the user's messages sent in this group",
+  "nPersonRead": "{p} person(s) have read",
+  "darkModeEnabled": "Dark mode enabled, restart the app to take effect",
+  "darkModeOff": "Dark mode disabled, restart the app to take effect",
+  "otherUser": "Other user",
+  "selectMsgDeleteTime": "Select retention time",
+  "selectMsgDeleteTimeTip":
+      "Chat history will be automatically deleted after the retention period, continue?",
+  "msgSaveTime": "Chat history retention time",
+  "msgSaveTimeDesc":
+      "Automatically clears chat records that exceed the time limit",
+  "hasTimeDeleteMsgPermission":
+      "Group chat message retention time configuration",
+  "accountAbnormal": "Account abnormal, invitation failed!",
+  "onlyBrowser": "Only supported in browser view",
+  "cancelSendSuccess": "Send canceled",
+  "allStr1": "Global",
+  "modelStr1": "Day and night mode",
+  "atMaxCountTip": "At most @ {p} people",
+  "transmitTo": "Forward to",
+  "moreActions": "More",
+  "refreshing": "Refresh",
+  "openInBrowser": "Open in browser",
+  "coverFlow": "Cover flow",
+  "checkNet": "Network Check",
+  "autoChangeServer": "Auto Change to Optimal Server",
+  "serverLine": "Server Line",
+  "timeOut": "Timeout",
+  "serverLineChange": "Change Server Line",
+  "netCheck": "Network Diagnosis",
+  "netDelayCheck": "Network Delay Check",
+  "netDelay1Check": "Internet Delay",
+  "msgDelay1Check": "Message Delay",
+  "imgDelay1Check": "Image Delay",
+  "netLine": "Network Line",
+  "reCheck": "Check Again",
+  "netChecking": "Checking Network",
+  "locationAddr": "Location Address",
+  "selectPerfectLineTip": "Selected the Best Line for You",
+  "selectPerfectLineTip2": "Already on the Best Line, No Need to Switch",
+  "selectPerfectLineTipNoNet":
+      "Unable to Identify the Best Line, Please Check Network and Retry",
+  "changing": "Changing",
+  "changeSuccess": "Change Successful",
+  "autoChanging": "Auto Changing, Please Wait",
+  "waitAnswer": " Waiting for Answer",
+  "callFinish": " Call Ended",
+  "fileSizeConnotZero": "File size cannot be zero",
+  "confirmLogin": "Confirm login",
+  "toolboxAudioCall": "Audio call",
+  "requestTimeOut": "Request timeout, please try again later",
+  "error_6115": "QR code expired",
+  "groupNotFound": "Group not found",
+  "userNotFound": "User not found",
+  "microphoneOpen": "Microphone opened",
+  "speakerOpen": "Speaker opened",
+  "voiceWithYou": "Inviting you to voice call",
+  "callInterceptor": "Call interrupted",
+  "startCallError": "Error starting call",
+  "callHungUp": "Call hung up",
+  "callRemoteHungUp": "Remote party hung up",
+  "callReceiverError": "Error receiving call",
+  "starting": "Starting",
+  "startTimeOut": "Voice call initiation timeout",
+  "callWaitReceiver": "Waiting for other party to answer",
+  "callRemoteNotAccept": "Other party did not accept",
+  "callStartSendError": "Failed to initiate voice call",
+  "notAccept": "Not accepted",
+  "callAccepting": "Accepting call",
+  "call": "Call",
+  "callDoing": "Line busy, canceled",
+  "netBad": "Current network environment is poor",
+  "netDown": "Network disconnected",
+  "onCalling": "On call",
+  "error_1303": "You are not yet friends with the other party",
+  "remoteAccountError": "Issue with other party's account",
+  "userOnlineStatus": "Online status",
+  "error_100008":
+  "This user does not meet the requirements to become an administrator",
+  "callTimeLimit": "Maximum {p} minutes per call",
+  "notLoginOnline": "Never logged in",
+  "callRemoteDoing": "Busy",
+  "exitLoginIng": "Logging out",
+  "usePhoneRecovery": "Use phone number for recovery",
+  "useEmailRecovery": "Use email for recovery",
+  "otherRecoveryMethods": "Other recovery methods",
+  "emailAddress": "Email address",
+  "phoneErrorOrNotExist": "Phone number error or does not exist",
+  "phoneNotExist": "Phone number does not exist",
+  "verificationCodeFailure": "Failed to get verification code, please try again",
+  verificationCodeSent: "Verification code sent",
+  hiWelcomeLogin: "Hi~ Welcome to login",
+  otherLoginMethods: "Other login methods",
+  usernamePhoneEmail: "Username/Phone Number/Email",
+  "error_1303": "You are not yet friends with the other party",
+  "remoteAccountError": "Issue with other party's account",
+  "userOnlineStatus": "Online status",
+  "error_100008":
+      "This user does not meet the requirements to become an administrator",
+  "callTimeLimit": "Maximum %s minutes per call",
+  "notLoginOnline": "Never logged in",
+  "callRemoteDoing": "Busy",
+  "exitLoginIng": "Logging out",
+  "searchAreaCode": "Search country/region",
+  "otherFindStyle": "Other recovery methods",
+  "welcome": "Welcome to login",
+  "fileReadError": "File read error",
+  "docPreviewError": "Unable to preview file",
+  "docPreviewUseOther":
+      "If the file cannot be previewed due to network issues or device incompatibility, you can use",
+  "netTimeOut": "Network timeout",
+  "docReadError":
+      "File cannot be read, please check if the file format is correct",
+  "errorDetail": "Error details",
+  ip: "IP",
+  imageLoadingRoute: "Image loading route",
+  networkChecking: "Checking network...",
+  noPermission: "No permission, please log in after obtaining permission",
+  pageNotFound: "Page not found",
+  serverError: "Server error",
+  databaseError: "Database query error",
+  networkError: "Network connection error"
+};
diff --git a/src/lang/vi.js b/src/lang/vi.js
new file mode 100644
index 0000000..d31f03b
--- /dev/null
+++ b/src/lang/vi.js
@@ -0,0 +1,1877 @@
+/*越南语*/
+export default {
+  checkTopMessage:'Xem tin nhắn',
+  unsupportedVideoFormat: "Không hỗ trợ định dạng video này",
+  phoneNumber: "Số điện thoại di động",
+  plsEnterPhoneNumber: "Vui lòng nhập số điện thoại di động của bạn",
+  password: "mật khẩu",
+  plsEnterPassword: "Vui lòng nhập mật khẩu của bạn",
+  plsEnterPassword6_15: "Mật khẩu (6-15 là chữ cái và số)",
+  account: "Số tài khoản",
+  plsEnterAccount: "Vui lòng nhập số tài khoản của bạn",
+  plsEnterAccount6_15: "Tên người dùng (6-15 là chữ cái và số)",
+  forgetPassword: "Quên mật khẩu",
+  createAccount: "Tạo tài khoản",
+  verificationCodeLogin: "Đăng nhập Captcha",
+  login: "Đăng nhập",
+  noAccountYet: "Chưa có tài khoản?",
+
+  loginNow: "Đăng nhập ngay bây giờ",
+
+  registerNow: "Đăng ký ngay bây giờ",
+
+  lockPwdErrorHint: "Lỗi%s lần",
+
+  newUserRegister: "Đăng ký người dùng mới",
+
+  verificationCode: "Mã xác nhận",
+
+  verificationSuccessful: "Xác minh thành công",
+
+  sendVerificationCode: "Gửi mã xác minh",
+
+  verification_code1: "Vui lòng nhập CAPTCHA",
+
+  correct_email_address: "Vui lòng nhập địa chỉ email chính xác",
+
+  Resend: "Gửi lại",
+
+  bind_email: "Hộp thư bị ràng buộc",
+  email_verification: "Xác thực hộp thư",
+  login_details: "Chi tiết đăng nhập",
+  verification_code: "Vui lòng nhập mã xác minh hộp thư",
+  email_verification_code: "Mã xác minh hộp thư",
+  currently_bound_email: "Hộp thư hiện đang bị ràng buộc:",
+  text_email:
+    "Nếu hộp thư của bạn không còn sử dụng, vui lòng thay thế kịp thời",
+  remove_this_device: "Bạn chắc chắn muốn xóa thiết bị?",
+  remove_this_device1:
+    "Bạn chắc chắn muốn xóa thiết bị? Sử dụng lại thiết bị sau khi xóa, đăng nhập cần được xác minh lại",
+  go_to_settings: "bỏ cài đặt",
+  go_to_binding: "không ràng buộc",
+  date_of_birth: "Ngày sinh",
+  confidential: "bảo mật",
+  year: "Tuổi",
+  not_perfection: "chưa hoàn hảo",
+  old_password: "Mật khẩu cũ",
+
+  myCreatedGroup: "Trò chuyện nhóm mà tôi tạo ra",
+
+  myManageGroup: "Nhóm chat mà tôi quản lý",
+
+  myJoinGroup: "Nhóm chat mà tôi tham gia",
+
+  please_enter_old_password: "Vui lòng nhập mật khẩu cũ",
+
+  trusted_device: "Thiết bị đáng tin cậy",
+
+  change_email_address: "Đổi hộp thư",
+
+  current_device: "Thiết bị hiện tại",
+
+  remove_device: "Xóa thiết bị",
+
+  current_device_records:
+    "Đây là toàn bộ hồ sơ đăng nhập của bạn cho thiết bị đó",
+
+  text_device: "Quản lý thiết bị đăng nhập",
+
+  verification_time: "Thời gian xác minh:",
+
+  text_device1:
+    "Đây là tất cả các thiết bị đã đăng nhập của bạn, hãy nhấp vào Enter Details để xem lịch sử đăng nhập của thiết bị đó",
+
+  change_the_binding: "Thay dây buộc",
+
+  resendVerificationCode: " Gửi lại mã xác minh ",
+
+  verificationCodeTimingReminder: "%sS lấy lại mã xác minh",
+
+  defaultVerificationCode: "(mã xác minh mặc định:%s)",
+
+  plsEnterVerificationCode: "Vui lòng nhập mã xác minh của bạn",
+
+  invitationCode: "Mã mời",
+  device_list: "Danh sách các thiết bị",
+  plsEnterInvitationCode: "Vui lòng nhập mã mời%s của bạn",
+  optional: "Tùy chọn",
+  nextStep: "Tiếp theo",
+
+  plsEnterRightPhone: " vui lòng nhập đúng số điện thoại ",
+  enterVerificationCode: " nhập mã xác minh điện thoại di động ",
+  setPassword: " thiết lập mật khẩu ",
+  plsConfirmPasswordAgain: " hãy xác nhận lại mật khẩu của bạn",
+  text_password2: " hãy xác nhận lại mật khẩu đăng nhập ",
+  please_enter_new_password_again: " vui lòng nhập mật khẩu mới một lần nữa",
+  confirmPassword: " xác nhận mật khẩu ",
+  wrongPasswordFormat: "Wrong định dạng mật khẩu",
+  plsCompleteInfo: " xin hoàn thiện thông tin cá nhân ",
+  plsEnterYourNickname: " hãy nhập tên của bạn ",
+  pleaseEnterYourUsername: " hãy nhập tên người dùng của bạn ",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "ở đây hãy nhập vào người dùng danh của ngài giúp chúng ta nhận diện tài khoản của bạn",
+  text_1:
+    " tài khoản không bị ràng buộc hộp thư, không hỗ trợ việc lấy lại mật khẩu ",
+  setInfo: " thiết lập thông tin ",
+
+  loginPwdFormat: "6-20 chữ số+chữ cái",
+  passwordLogin: "Đăng nhập bằng mật khẩu",
+  contacts: "Sổ địa chỉ",
+  workbench: "bàn làm việc",
+  mine: "của tôi",
+  me: "tôi",
+  draftText: "bản nháp",
+  everyone: "Tất cả mọi người.",
+  you: "Anh",
+  groupAc: "Thông báo nhóm",
+  createGroupNtf: "%s đã tạo trò chuyện nhóm",
+  editGroupInfoNtf: "%s thay đổi dữ liệu nhóm",
+
+  quitGroupNtf: "%s thoát khỏi cuộc trò chuyện nhóm",
+  invitedJoinGroupNtf: "%s mời%s tham gia trò chuyện nhóm",
+  kickedGroupNtf: "%s được chuyển ra khỏi cuộc trò chuyện nhóm bởi%s",
+  joinGroupNtf: "%s tham gia trò chuyện nhóm",
+  dismissGroupNtf: "%s giải tán cuộc trò chuyện nhóm",
+  transferredGroupNtf: "%s đã chuyển quyền quản trị nhóm cho%s",
+  muteMemberNtf: "%s bị cấm bởi%s%s",
+  muteCancelMemberNtf: "%s đã bị cấm bởi%s",
+  muteGroupNtf: "%s mở lệnh cấm nhóm",
+  muteCancelGroupNtf: "%s đóng lệnh cấm nhóm",
+  friendAddedNtf: "Hai người đã trở thành bạn tốt, có thể bắt đầu trò chuyện.",
+  openPrivateChatNtf: "Sau khi mở ra sẽ bị đốt cháy",
+  closePrivateChatNtf: "Đã đóng cửa duyệt tức là đốt cháy",
+  memberInfoChangedNtf:
+    "%s đã chỉnh sửa dữ liệu thành viên nhóm của riêng mình",
+  unsupportedMessage: "Kiểu tin nhắn không được hỗ trợ tạm thời",
+
+  picture: "hình ảnh",
+  video: "video",
+  voice: "giọng nói",
+  safety: "an toàn",
+  location: "địa điểm",
+  file: "tập tin",
+  carte: "Danh thiếp",
+  emoji: "biểu cảm tùy chỉnh",
+  chatRecord: "Lịch sử trò chuyện",
+  revokeMsg: "Đã rút một tin nhắn",
+  aRevokeBMsg: "%s đã thu hồi thư của%s",
+
+  blockedByFriendHint: "Tin nhắn đã được gửi đi nhưng bị từ chối bởi bên kia",
+  sendFriendVerification: "Xác minh thêm",
+  removedFromGroupHint: "Bạn đã được chuyển ra khỏi cuộc trò chuyện nhóm",
+  groupDisbanded: "Nhóm đã giải tán",
+  createdGroup: "Bạn chưa tạo nhóm",
+  search: "tìm kiếm",
+  newGroups: "Nhóm mới",
+  groupNames: "Vui lòng nhập tên nhóm",
+  synchronizing: "đồng bộ hóa",
+  syncFailed: "Đồng bộ hóa thất bại",
+  connecting: "Đang kết nối",
+  connectionFailed: "Kết nối không thành công",
+  top: "Lên đỉnh",
+
+  cancelTop: "Hủy bỏ vị trí hàng đầu",
+  markHasRead: "Đánh dấu đã đọc",
+  delete: "xóa",
+  nPieces: "%s thanh",
+  online: "trực tuyến",
+  offline: "ngoại tuyến",
+  phoneOnline: "Điện thoại di động",
+  pcOnline: "máy tính",
+  webOnline: "Web",
+  webMiniOnline: "Ứng dụng nhỏ",
+  upgradeFind: "Khám phá phiên bản mới",
+  upgradeVersion:
+    "Một phiên bản mới có sẵn%s đã được phát hiện và phiên bản hiện tại của bạn là%s",
+  upgradeDescription: "Hướng dẫn cập nhật:",
+  upgradeIgnore: "Bỏ qua",
+  upgradeLater: "Cập nhật sau",
+  upgradeNow: "Cập nhật ngay bây giờ",
+  upgradeNever: "Chưa cập nhật",
+  inviteYouCall: "%s mời bạn thực hiện %s",
+  rejectCall: "Từ chối",
+  acceptCall: "Đồng ý",
+  callVoice: "cuộc gọi thoại",
+  callVideo: "cuộc gọi video",
+  sentSuccessfully: "Gửi thành công",
+  copySuccessfully: "Sao chép thành công",
+  binding_successful: "Binding thành công",
+
+  day: "ngày",
+  hour: "thời gian",
+  hours: "giờ",
+  minute: "phút",
+  seconds: "giây",
+  cancel: "hủy bỏ",
+  determine: "chắc chắn",
+  failed_to_load: "Tải không thành công",
+  failed_to_load1: "Tải không thành công, vui lòng thử lại sau",
+  removal_failed: "Xóa không thành công",
+  toolboxAlbum: "Album ảnh",
+  toolboxCall: "Cuộc gọi video",
+  toolboxCamera: "Bắn súng",
+  toolboxCard: "Danh thiếp",
+  toolboxFile: "Tập tin",
+  toolboxLocation: "Vị trí",
+  send: "gửi",
+  holdTalk: "Giữ và nói chuyện",
+  releaseToSend: "Thả gửi",
+  releaseToSendSwipeUpToCancel: "Thả gửi, trượt lên hủy",
+  liftFingerToCancelSend: "Thả ngón tay, hủy gửi",
+  callDuration: "thời gian gọi %s",
+  cancelled: "bị hủy bỏ",
+
+  cancelledByCaller: "Bên kia đã bị hủy bỏ",
+  rejectedByCaller: "Đối phương đã từ chối",
+  callTimeout: "Thời gian chờ không phản hồi",
+  rejected: "bị từ chối",
+  forwardMaxCountHint: "Hiện tại chỉ hỗ trợ chuyển tiếp tối đa 20 tin nhắn~",
+  typing: "Nhập...",
+  addSuccessfully: "Thêm thành công",
+  addFailed: "Thêm thất bại",
+  setSuccessfully: "Thiết lập thành công",
+  callingBusy: "Bạn đang gọi và không thể thực hiện việc này!",
+  groupCallHint:
+    " Nhóm hiện tại đang gọi, bạn có chắc chắn tham gia cuộc gọi hiện tại không?",
+  joinIn: "tham gia",
+  menuCopy: "Sao chép",
+  menuDel: "Đã xóa",
+  menuForward: "Chuyển tiếp",
+  menuReply: "Trả lời",
+  menuMulti: "Nhiều lựa chọn",
+  menuRevoke: "Rút lui",
+  menuAdd: "Thêm vào",
+  nMessage: "%s thư mới",
+  plsSelectLocation: "Vui lòng chọn một địa điểm",
+  groupAudioCallHint: "Người %s đang gọi thoại",
+  groupVideoCallHint: "%s mọi người đang gọi video",
+
+  reEdit: "Chỉnh sửa lại",
+  playSpeed: "Tốc độ chơi",
+  download: "Tải xuống",
+  download1: "Tải xuống ngay bây giờ",
+  nicknames: "Biệt danh người dùng",
+  downloadAPP: "Tải xuống APP",
+  private_chat: "vành đai của các vị vua bóng đá",
+  googleMap: "Bản đồ Google",
+  check_for_updates: "Kiểm tra cập nhật",
+  appleMap: "Bản đồ Apple",
+  baiduMap: "Bản đồ Baidu",
+  amapMap: "Bản đồ Gaude",
+  signature: "Chữ ký cá nhân",
+  please_enter_user_nickname: "Vui lòng nhập tên người dùng",
+  set_characters: "Vui lòng đặt 4-15 ký tự",
+  personalized_signature: "Vui lòng nhập chữ ký cá nhân (giới hạn ký tự 6-50)",
+  tencentMap: "Bản đồ Tencent",
+  offlineMeetingMessage: "Bạn nhận được một thông báo mời họp",
+  offlineMessage: "Bạn có một tin nhắn mới",
+  offlineCallMessage: "Bạn nhận được tin nhắn mời gọi điện thoại",
+  logoutHint: "Bạn có chắc muốn đăng xuất không?",
+  myInfo: "Thông tin của tôi",
+  workingCircle: "Vòng tròn công việc",
+  accountSetup: "Cài đặt tài khoản",
+
+  aboutUs: "Về chúng tôi",
+  about: "Về",
+  logout: "Thoát đăng nhập",
+  qrcode: "Mã QR",
+  qrcodeHint: "Quét mã QR bên dưới và thêm tôi làm bạn tốt",
+  favoriteFace: "bộ sưu tập emoji",
+  favoriteManage: "Quản lý",
+  favoriteCount: "của%s biểu hiện",
+  favoriteDel: " Xóa (%s)",
+  hasRead: "Đã đọc",
+  unread: "chưa đọc",
+  nPersonUnRead: "%s người chưa đọc",
+  allRead: "Tất cả đã đọc",
+  messageRecipientList: "Danh sách người nhận tin nhắn",
+  hasReadCount: "Đã đọc (%s)",
+  unreadCount: "Chưa đọc (%s)",
+  newFriend: "Những người bạn mới",
+  newFriendList: "Danh sách đăng ký kết bạn",
+  newGroup: "Trò chuyện nhóm mới",
+  myFriend: "Bạn thân của tôi",
+  myGroup: "Trò chuyện nhóm của tôi",
+  addManager: "Thêm quản trị viên",
+  privateSetting: "thiết lập quyền",
+  add: "Thêm vào",
+  scan: "Quét một vòng",
+  scanHint: "Quét danh thiếp mã QR",
+  addFriend: "Thêm bạn bè",
+  addFriendHint: "Thêm bằng cách tìm kiếm số ID",
+  createGroup: "Tạo nhóm chat",
+  createGroupHint: "Tạo một cuộc trò chuyện nhóm, sử dụng OpenIM đầy đủ",
+  addGroup: "Thêm trò chuyện nhóm",
+  addGroupHint: "Hỏi quản trị viên hoặc thành viên trò chuyện nhóm về ID",
+  searchIDAddFriend: "Tìm kiếm ID Thêm bạn bè",
+  searchIDAddGroup: "ID tìm kiếm thêm trò chuyện nhóm",
+
+  searchIDIs: "ID：%s",
+  searchPhoneIs: "Số điện thoại di động:%s",
+  searchEmailIs: "hộp thư:%s",
+  searchNicknameIs: "Biệt danh:%s",
+  searchGroupNicknameIs: "Biệt danh nhóm:{name}",
+  noFoundUser: "Không thể tìm thấy người dùng",
+  noFoundGroup: "Không thể tìm thấy trò chuyện nhóm",
+  joinGroupDate: "Nhập nhóm thời gian",
+  joinGroupMethod: "Phương thức gia nhập nhóm",
+  byInviteJoinGroup: "%s mời vào nhóm",
+  byIDJoinGroup: "ID nhóm tìm kiếm",
+  byQrcodeJoinGroup: "Mã QR nhóm",
+  groupID: "Số ID nhóm",
+  setAsAdmin: "Đặt làm quản trị viên",
+  setMute: "Thiết lập cấm ngôn",
+  organizationInfo: "Thông tin tổ chức",
+  organization: "tổ chức",
+  department: "Bộ phận",
+  position: "vị trí",
+  personalInfo: "Hồ sơ cá nhân",
+  viewDynamics: "Xem động lực học",
+  audioAndVideoCall: "Cuộc gọi video âm thanh",
+  sendMessage: "Gửi tin nhắn",
+  avatar: "Avatar",
+
+  name: "tên",
+  nickname: "Biệt danh",
+  gender: "giới tính",
+  englishName: "Tên tiếng Anh",
+  birthDay: "sinh nhật",
+  tel: "Điện thoại cố định.",
+  mobile: "Số điện thoại di động",
+  email: "hộp thư",
+  man: "đàn ông",
+  woman: "phụ nữ",
+  friendSetup: "Thiết lập bạn bè",
+  setupRemark: "Ghi chú thiết lập",
+  recommendToFriend: "Giới thiệu anh ấy với bạn bè",
+  addToBlacklist: "Thêm vào danh sách đen",
+  unfriend: "unfriend nghĩa là gì?",
+  areYouSureDelFriend: "Bạn có chắc chắn xóa bạn bè không?",
+  areYouSureAddBlacklist: "Bạn chắc chắn thêm bạn bè vào danh sách đen?",
+  remark: "Ghi chú",
+  save: "tiết kiệm",
+
+  saveSuccessfully: "Lưu thành công",
+  saveFailed: "Lưu thất bại",
+  groupVerification: "Xác minh trò chuyện nhóm",
+  friendVerification: "Xác minh bạn bè",
+  email_address: "Vui lòng nhập địa chỉ email",
+  sendEnterGroupApplication: "Gửi ứng dụng vào nhóm",
+  sendToBeFriendApplication: "Gửi yêu cầu kết bạn",
+  sendSuccessfully: "Gửi thành công",
+  reset_successful: "reset thành công",
+  bind_new_email: "Liên kết hộp thư mới",
+  Login_failed: "Đăng nhập không thành công",
+  successful_home: "Đăng ký thành công",
+  sendFailed: "Gửi không thành công",
+  canNotAddFriends: "Người dùng này đã được thiết lập để không thể thêm vào!",
+  mutedAll: "Toàn bộ cấm ngôn",
+  tenMinutes: "10 phút",
+  oneHour: "1 giờ",
+  twelveHours: "12 giờ",
+
+  oneDay: "một ngày",
+  custom: "tùy chỉnh",
+  unmute: "Hủy bỏ cấm ngôn",
+  youMuted: "Bạn đã bị cấm",
+  groupMuted: "Đã mở nhóm cấm ngôn",
+  notDisturbMode: "Chế độ không làm phiền",
+  allowRing: "Âm báo tin tức mới",
+  allowVibrate: "Tin tức mới rung chuyển",
+  forbidAddMeToFriend: "Cấm thêm tôi làm bạn tốt",
+  blacklist: "Danh sách đen sổ địa chỉ",
+  unlockSettings: "Cài đặt mở khóa",
+  changePassword: "Thay đổi mật khẩu",
+  clearChatHistory: "Xóa lịch sử trò chuyện",
+  confirmClearChatHistory: "Xác nhận xóa tất cả các cuộc trò chuyện của bạn?",
+  languageSetup: "Cài đặt ngôn ngữ",
+
+  language: "ngôn ngữ",
+  english: "Tiếng Anh",
+  setting_up: "trong cài đặt...",
+  chinese: "Tiếng Trung giản thể",
+  traditional_chinese: "Truyền thống Trung Quốc",
+  followSystem: "hệ thống theo dõi",
+  blacklistEmpty: "Không có danh sách đen",
+  remove: "xóa bỏ",
+  removeFriend: "Xóa bạn bè",
+  fingerprint: "vân tay",
+  gesture: "cử chỉ",
+  biometrics: "sinh trắc học",
+  plsEnterPwd: "Vui lòng nhập mật khẩu",
+  plsEnterOldPwd: "Vui lòng nhập mật khẩu gốc",
+  plsEnterNewPwd: "Vui lòng nhập mật khẩu mới",
+  plsConfirmNewPwd: "Vui lòng xác nhận mật khẩu mới",
+
+  reset: "thiết lập lại",
+  oldPwd: "Mật khẩu gốc",
+  newPwd: "Mật khẩu mới",
+  confirmNewPwd: "Xác nhận mật khẩu mới:",
+  plsEnterConfirmPwd: "Vui lòng nhập mật khẩu xác nhận",
+  twicePwdNoSame: "Mật khẩu nhập hai lần không phù hợp",
+  twicePwd: "Mật khẩu mới không phù hợp, vui lòng đặt lại",
+  changedSuccessfully: "Sửa đổi thành công",
+  deleteSuccessfully: "Xóa thành công",
+  checkNewVersion: "Kiểm tra phiên bản mới",
+  noAddGround: "Chưa thêm bạn bè vào nhóm",
+  chatContent: "Nội dung trò chuyện",
+  topContacts: "Đặt địa chỉ liên lạc hàng đầu",
+  messageNotDisturb: "Tin nhắn không làm phiền",
+  messageNotDisturbHint: "Nhận tin nhắn nhưng không nhắc nhở",
+  burnAfterReading: "Sau khi đọc xong sẽ bị đốt cháy",
+  timeSet: "Cài đặt thời gian",
+  setChatBackground: "Thiết lập nền trò chuyện",
+  fontFace: "Kiểu chữ",
+  fontSize: "Kích thước phông chữ",
+  little: "nhỏ",
+  standard: "tiêu chuẩn",
+  big: "lớn",
+
+  thirtySeconds: "30 giây",
+  fiveMinutes: "5 phút",
+  clearAll: "trống rỗng",
+  clearSuccessfully: "Xóa thành công",
+  groupChatSetup: " Cài đặt trò chuyện nhóm",
+  viewAllGroupMembers: "Xem tất cả thành viên nhóm (%s)",
+  groupManage: "Quản lý nhóm",
+  myGroupMemberNickname: "Tên của tôi trong nhóm",
+  topChat: "Trò chuyện trên đỉnh",
+  muteAllMember: "Toàn bộ cấm ngôn",
+  exitGroup: "Thoát khỏi cuộc trò chuyện nhóm",
+  dismissGroup: "Giải tán nhóm chat",
+  dismissGroupHint:
+    "Tất cả các thành viên của nhóm sẽ thoát khỏi nhóm này và không thể gửi tin nhắn",
+  quitGroupHint:
+    "sẽ không còn nhận được tin nhắn trò chuyện nhóm này sau khi thoát khỏi cuộc trò chuyện nhóm",
+  joinGroupSet: "Xác thực nhóm",
+  allowAnyoneJoinGroup: "Cho phép mọi người thêm nhóm",
+  inviteNotVerification: "Lời mời thành viên nhóm không cần xác minh",
+  needVerification: "Yêu cầu gửi thông tin xác minh",
+  addMember: "Thêm vào",
+  delMember: "Xóa",
+  groupOwner: "Chủ nhóm",
+
+  groupAdmin: "Quản trị viên",
+  notAllowSeeMemberProfile: "Không cho phép xem dữ liệu thành viên nhóm khác",
+  notAllAddMemberToBeFriend: "Không cho phép thêm thành viên nhóm làm bạn bè",
+  transferGroupOwnerRight: "Chuyển giao quyền quản lý nhóm",
+  groupName: "Tên nhóm",
+  groupAcPermissionTips: "Chỉ có chủ nhóm và quản trị viên có thể chỉnh sửa",
+  plsEnterGroupAc: "Vui lòng nhập thông báo nhóm",
+  edit: "biên tập viên",
+  publish: "Xuất bản",
+  groupMember: "Thành viên nhóm chat",
+  selectedPeopleCount: "Đã chọn (%s)",
+  confirmSelectedPeople: "OK (%s/%s)",
+  confirm: "xác nhận",
+  log_in_time: "Thời gian đăng nhập:",
+  log_in_time1: "Thời gian đăng nhập",
+  login_IP: "Đăng nhập vào IP:",
+  confirmTransferGroupToUser: "Xác định chuyển giao nhóm chủ cho:%s?",
+  removeGroupMember: "Xóa thành viên nhóm",
+  searchNotResult: "Không có kết quả tìm kiếm",
+  groupQrcode: "Mã QR nhóm",
+
+  groupQrcodeHint:
+    "Lướt qua mã QR bên dưới để tham gia trò chuyện nhóm ngay lập tức",
+  approved: "Đã đồng ý",
+  accept: "Chấp nhận",
+  reject: "từ chối",
+  friendGrouping: "nhóm bạn bè",
+  waitingForVerification: "Chờ người khác xác minh",
+  rejectSuccessfully: "từ chối thành công",
+  rejectFailed: "từ chối thất bại",
+  applyJoin: "Yêu cầu gia nhập",
+  enterGroup: "vào group chat",
+  applyReason: "Lý do ứng dụng:%s",
+  invite: "lời mời",
+  sourceFrom: " nguồn:%s",
+  byMemberInvite: "lời mời",
+  bySearch: "Theo tìm kiếm",
+  byScanQrcode: "Quét mã QR",
+  iCreatedGroup: "Tôi tạo ra nó",
+  iJoinedGroup: "Tôi tham gia",
+  nPerson: "{count} người",
+  searchNotFound: "Không tìm thấy kết quả liên quan",
+  searchNotFoundMember: "Không tìm thấy người dùng có liên quan",
+  organizationStructure: "Kiến trúc tổ chức",
+  recentConversations: "Phiên làm việc gần đây",
+
+  selectAll: "Chọn tất cả",
+  plsEnterGroupNameHint: "Lấy tên nhóm để tìm kiếm tiếp theo",
+  completeCreation: "Hoàn thành việc tạo ra",
+  sendCarteConfirmHint:
+    "Bạn có chắc chắn gửi liên hệ này đến cuộc trò chuyện này không?",
+  sentSeparatelyTo: "Gửi riêng cho:",
+  sentTo: "Gửi đến:",
+  leaveMessage: "Để lại lời nhắn",
+  mergeForwardHint: "[MergeForwardHint] tổng số%s tin nhắn",
+  mergeForward: "Hợp nhất và chuyển tiếp",
+  quicklyFindChatHistory: "Tìm nhanh lịch sử trò chuyện",
+  notFoundChatHistory: 'Không tìm thấy "%s" Nội dung liên quan',
+
+  globalSearchAll: "Tổng hợp",
+  globalSearchContacts: "Liên hệ",
+  globalSearchGroup: "Nhóm",
+  globalSearchChatHistory: "Lịch sử trò chuyện",
+  globalSearchChatFile: "Tập tin",
+  relatedChatHistory: "%s lịch sử trò chuyện liên quan",
+  seeMoreRelatedContacts: "Xem thêm các liên hệ có liên quan",
+  seeMoreRelatedGroup: "Xem thêm các nhóm có liên quan",
+  seeMoreRelatedChatHistory: "Xem thêm lịch sử trò chuyện có liên quan",
+  seeMoreRelatedFile: "Xem thêm các tài liệu liên quan",
+  publishPicture: "Đăng ảnh",
+  publishVideo: "Xuất bản video",
+  mentioned: "được đề cập đến:%s",
+  comment: "Bình luận",
+
+  like: "Thích",
+  reply: "Trả lời",
+  rollUp: "thu gọn",
+  fullText: "Toàn văn bản",
+  selectAssetsFromCamera: "Bắn súng",
+  selectAssetsFromAlbum: "Chọn từ album",
+  whoCanWatch: "Ai có thể xem nó",
+  remindWhoToWatch: "Nhắc nhở ai xem",
+  public: "công khai",
+  everyoneCanSee: "Hiển thị cho tất cả mọi người",
+  partiallyVisible: "Hiển thị một phần",
+  visibleToTheSelected: "Người được chọn có thể nhìn thấy",
+  partiallyInvisible: "Không cho ai xem",
+  invisibleToTheSelected: "Người được chọn vô hình",
+
+  private: "riêng tư",
+  onlyVisibleToMe: "Chỉ nhìn thấy chính mình",
+  selectVideoLimit: "Không quá 15 giây",
+  selectContactsLimit: "Chọn ít nhất một liên hệ",
+  message: "Thông điệp",
+  commentedYou: "Bình luận về bạn:%s",
+  likedYou: "Đã like cho bạn",
+  mentionedYou: "Đã đề cập đến bạn",
+  replied: "Đã trả lời",
+  detail: "Chi tiết",
+  totalNPicture: "Tổng số%s",
+  noDynamic: "Tạm thời không có động lực",
+  callRecords: "Lịch sử cuộc gọi",
+  allCall: "Tất cả các cuộc gọi",
+  missedCall: "Cuộc gọi nhỡ",
+  incomingCall: "gọi vào",
+  outgoingCall: "thở ra",
+  microphone: "micro",
+  speaker: "Diễn giả",
+  hangUp: "treo lên",
+  pickUp: "Trả lời",
+
+  waitingCallHint: "Đang gọi...",
+  waitingVoiceCallHint: " Đang chờ người kia trả lời...",
+  invitedVoiceCallHint: "Mời bạn thực hiện cuộc gọi thoại...",
+  waitingVideoCallHint: "Đang chờ người kia chấp nhận lời mời",
+  invitedVideoCallHint: "Mời bạn thực hiện cuộc gọi video...",
+  waitingToAnswer: "Chờ trả lời",
+  invitedYouToCall: "Mời bạn gọi điện thoại",
+  calling: "Đang gọi",
+  nPeopleCalling: "%s người đang gọi",
+  whoInvitedVoiceCallHint: "%s mời bạn thực hiện cuộc gọi thoại",
+  whoInvitedVideoCallHint: "%s mời bạn thực hiện cuộc gọi video",
+  plsInputMeetingSubject: "Vui lòng nhập chủ đề cuộc họp",
+  meetingStartTime: "Thời gian bắt đầu",
+  meetingDuration: "Thời gian họp",
+  enterMeeting: "Nhập cuộc họp",
+  meetingNo: "Số cuộc họp",
+  yourMeetingName: "Tên của bạn",
+
+  plsInputMeetingNo: "Vui lòng nhập số cuộc họp",
+  plsInputYouMeetingName: "Vui lòng nhập tên của bạn",
+  meetingSubjectIs: "Chủ đề cuộc họp:%s",
+  meetingStartTimeIs: "thời gian bắt đầu:%s",
+  meetingDurationIs: "Thời lượng cuộc họp:%s",
+  meetingHostIs: "Máy chủ:%s",
+  meetingNoIs: "Số cuộc họp:%s",
+  meetingMessageClickHint:
+    "Nhấp vào thông báo này để tham gia cuộc họp trực tiếp",
+  meetingMessage: "Thông điệp hội nghị",
+  openMeeting: "Cuộc họp chưa kết thúc",
+  didNotStart: "Chưa bắt đầu",
+  started: "bắt đầu",
+  meetingInitiatorIs: "%s bắt đầu hội nghị truyền hình",
+  meetingDetail: "Chi tiết cuộc họp",
+  meetingOrganizerIs: "Người khởi xướng:%s",
+  updateMeetingInfo: "Sửa đổi thông tin cuộc họp",
+
+  cancelMeeting: "Hủy cuộc họp",
+  videoMeeting: "Hội nghị truyền hình",
+  joinMeeting: "Tham gia cuộc họp",
+  bookAMeeting: "Đặt lịch họp",
+  quickMeeting: "họp nhanh",
+  confirmTheChanges: "Xác nhận sửa đổi",
+  invitesYouToVideoConference: "%s mời bạn tham gia hội nghị truyền hình",
+  over: "Kết thúc",
+  meetingMute: "Im lặng",
+  meetingUnmute: "Bỏ im lặng",
+  meetingCloseVideo: "Đóng video",
+  meetingOpenVideo: "Mở video",
+  meetingEndSharing: "Kết thúc chia sẻ",
+  meetingShareScreen: "Chia sẻ màn hình",
+  meetingMembers: "Thành viên (%s)",
+  settings: "Cài đặt",
+  leaveMeeting: "Rời khỏi cuộc họp",
+  endMeeting: "Kết thúc cuộc họp",
+  leaveMeetingConfirmHint: "Bạn chắc chắn rời khỏi cuộc họp?",
+  endMeetingConfirmHit: "Bạn chắc chắn kết thúc cuộc họp?",
+  meetingSettings: "Thiết lập cuộc họp",
+
+  allowMembersOpenMic: "Cho phép các thành viên tự tắt tiếng",
+  allowMembersOpenVideo: "Cho phép thành viên mở video",
+  onlyHostShareScreen: "Chỉ máy chủ mới có thể chia sẻ màn hình",
+  onlyHostInviteMember:
+    "Chỉ người điều hành mới có thể mời thành viên cuộc họp",
+  defaultMuteMembers: "Thành viên gia nhập cấm âm",
+  pinThisMember: "Đặt thành viên này lên hàng đầu",
+  unpinThisMember: "Hủy bỏ vị trí hàng đầu",
+  allSeeHim: "tất cả nhìn anh ấy",
+  cancelAllSeeHim: "Hủy xem anh ta",
+  muteAll: "Tất cả im lặng",
+  unmuteAll: "tắt tiếng mọi người",
+  members: "thành viên",
+  screenShare: "Chia sẻ màn hình",
+  screenShareHint: "Chia sẻ màn hình.",
+  meetingClosedHint:
+    "Cuộc họp đã đóng hoặc liên kết bị hỏng, bạn có chắc chắn để lại không?",
+  meetingIsOver: "Cuộc họp đã kết thúc!",
+  networkError: "ngoại lệ mạng vui lòng thử lại sau!",
+  shareSuccessfully: "Chia sẻ thành công!",
+  notFoundMinP: "Chương trình nhỏ chưa được phát hành tại thời điểm này",
+  notSendMessageNotInGroup:
+    "Không thể gửi tin nhắn trong cuộc trò chuyện nhóm đã thoát",
+  whoModifyGroupName: "{name} đã thay đổi tên trò chuyện nhóm thành",
+  accountWarn: "Cảnh báo!",
+  accountException:
+    "Tài khoản của bạn đã được đăng nhập trên thiết bị khác, vui lòng thay đổi mật khẩu kịp thời.",
+
+  tagGroup: "thẻ",
+  issueNotice: "Thông báo gửi đi",
+  createTagGroup: "Tạo nhãn mác",
+  plsEnterTagGroupName: "Vui lòng nhập tên thẻ",
+  tagGroupMember: "Thành viên của Tag",
+  completeEdit: "Hoàn thành chỉnh sửa",
+  finish: "hoàn thành",
+  emptyTagGroup: "Nhóm không có nhãn tạm thời",
+  confirmDelTagGroupHint: "Xác nhận xóa nhóm nhãn này?",
+  editTagGroup: "Chỉnh sửa Tag",
+  newBuild: "mới xây dựng",
+  receiveMember: "Thành viên tiếp nhận",
+  emptyNotification: "Không báo trước",
+  notificationReceiver: "%s người nhận:%s",
+  sendAnother: "Gửi thêm một tin nhắn nữa",
+  confirmDelTagNotificationHint: "Xác nhận xóa bản ghi thông báo này?",
+  contentNotBlank: "Nội dung không thể rỗng",
+  plsEnterDescription: "Vui lòng nhập văn bản mô tả",
+  gifNotSupported: "Không hỗ trợ ảnh gif",
+  register: "Đăng ký",
+  hk: "truyền thống",
+  RegisterSuccess: "Đăng ký thành công",
+  LoginSuccess: "Đăng nhập thành công",
+  init_validate_1: "Tên người dùng bao gồm 6-15 chữ cái và số",
+  init_validate_10:
+    "Số điện thoại hoặc mật khẩu không chính xác, vui lòng nhập lại",
+
+  init_validate_5: "Mật khẩu phải bao gồm 6-15 ký tự chữ và số, vui lòng đặt lại mật khẩu",
+  init_validate_2: "Hai lần mật khẩu không phù hợp, vui lòng đặt lại",
+  init_validate_3:
+    "Mật khẩu phải bao gồm 6-15 chữ cái và số, vui lòng đặt lại mật khẩu của bạn",
+  init_validate_6: "Mật khẩu phải bao gồm 6-15 chữ cái và số",
+  init_validate_4: "Đăng ký thành công, sắp trở lại trang đích",
+  init_hint_1: "6-15 chữ số hoặc tiếng Anh",
+  init_hint_2: "Xác nhận mật khẩu đăng nhập",
+  init_hint_3: "Mật khẩu đăng nhập",
+  username: "Tên người dùng",
+  to_modify: "đi sửa đổi",
+  confirm_password: "Xác nhận mật khẩu",
+  notification_settings: "Cài đặt thông báo",
+  init_text_1: "Đồng ý đăng ký để đăng nhập",
+  init_text_2: "Thỏa thuận dịch vụ người dùng",
+  init_text_3: "và",
+  init_text_4: "Chính sách bảo mật",
+  init_text_5: "Thỏa thuận dịch vụ và Chính sách bảo mật",
+  init_text_6:
+    "Để bảo vệ quyền và lợi ích hợp pháp của bạn, vui lòng đọc và đồng ý với thỏa thuận sau",
+  refuse: "từ chối",
+
+  refuse_continue: "Đồng ý và tiếp tục",
+  forget_password: "Quên mật khẩu",
+  register_user: "Đăng ký tài khoản",
+  gotoLogin: "Đăng nhập",
+  gotoRegister: "Tạo tài khoản mới",
+  enterGroupCheck: "Ứng dụng nhóm",
+  openPhotoError_1: "Không đọc tập tin đã chọn",
+  openPhotoError_2: "Tải lên tập tin không thành công",
+  openPhotoError_3: "Không đọc thông tin tập tin",
+  agreeAll: "đồng ý tất cả",
+  whatCanManagerDo: "Quyền quản trị nhóm",
+  changeGroupName: "Thay đổi tên nhóm",
+  deleteMemberMessage: "Xóa tin nhắn nhóm",
+  chatPrivate: "Trò chuyện riêng tư được mã hóa với nhóm",
+  memberMute: "Nhóm viên cấm ngôn",
+  deleteMember: "Xóa thành viên",
+
+  changeNotice: "Xuất bản/sửa đổi/xóa thông báo nhóm",
+  checkInGroup: "Kiểm toán nhóm",
+  setAdmin: "Quản trị viên thiết lập",
+  deleteAdmin: "Xóa quản trị viên",
+  deleteAdminTitle: "Bạn chắc chắn muốn loại bỏ người quản trị?",
+  deleteAdminDetail:
+    "Loại bỏ thành viên này khỏi quản trị viên và không thể quản lý thông điệp nhóm",
+  deleteSuccess: "Xóa thành công",
+  mobile_web_page: "Truy cập trang web di động",
+  deleteMemberTitle: "Bạn chắc chắn muốn loại bỏ thành viên?",
+  deleteMemberDetail:
+    "Di chuyển thành viên này ra khỏi nhóm và không thể gửi tin nhắn",
+  deleteSelf: "Không thể xóa chính mình",
+  handled: "Đã xử lý",
+  unhandle: "Đang chờ xử lý",
+  noCheck: "Chưa có yêu cầu xử lý",
+  success: "Hoạt động thành công",
+  nameLenth: "Vui lòng đặt 1-15 ký tự",
+  editNickname: "Biệt danh nhóm biên tập",
+  text_password: "Vui lòng đặt mật khẩu đăng nhập mới",
+
+  quit: "rút lui",
+  waitAMoment: "Tôi đang xem đây",
+  editWarningTitle:
+    "Bạn có chắc chắn thoát khỏi biệt danh nhóm biên tập không?",
+  editWarningDetail:
+    "Biệt danh nhóm bạn đã sửa đổi vẫn chưa được lưu, bạn có tiếp tục thoát không?",
+  editGroupAvatar: "Chỉnh sửa avatar nhóm",
+  myGroupAvatar: "Đầu nhóm của tôi",
+  inviteLink: "Liên kết mời",
+  inviteTips:
+    " Bất kỳ người dùng nào đã cài đặt ứng dụng này sẽ có thể tham gia trò chuyện nhóm của bạn thông qua liên kết này",
+  inviteLinkCopy: "Liên kết mời đã được sao chép",
+  shareLink: "Chia sẻ liên kết",
+  manageLink: "Quản lý liên kết mời",
+  copyLink: "Sao chép liên kết",
+  deleteLink: "Xóa liên kết",
+
+  deleteLinkTipsTitle: "Bạn có chắc chắn muốn hoàn tác liên kết không?",
+  deleteLinkTipsDetail:
+    "Bạn có chắc chắn muốn hủy bỏ liên kết mời này không? Sau khi hủy bỏ, người khác sẽ không thể tham gia nhóm thông qua liên kết này.",
+  linkManage: "Quản lý liên kết",
+  openManage:
+    "Sau khi mở cần có sự xác nhận của chủ nhóm hoặc quản trị viên để vào nhóm",
+  timeValid: "Giới hạn thời gian hợp lệ",
+  linkInvalidTips:
+    "Liên kết mời sẽ hết hiệu lực sau ngày này và không thể tiếp tục truy cập",
+  valid: "hợp lệ bên trong",
+  dayValid: "Hợp lệ trong ngày",
+  forever: "vĩnh viễn",
+  foreverValid: "Hợp lệ vĩnh viễn",
+  attendTips:
+    "Yêu cầu gia nhập đã được gửi và bạn có thể tham gia nhóm sau khi quản trị viên xem xét yêu cầu của bạn",
+  memberCountLimit: "Số lượng trò chuyện nhóm này đã lên mạng",
+  linkIsOut: "Liên kết mời đã hết hạn",
+  requestAttend: "Yêu cầu tham gia cuộc trò chuyện nhóm",
+  needCheck:
+    "Trò chuyện nhóm này chỉ có thể tham gia sau khi được quản trị viên xem xét",
+  countLimit: "Số lượng quản trị viên đã đạt đến giới hạn",
+  openLock:
+    "Sau khi rời khỏi ứng dụng, thời gian chờ cần sử dụng sơ đồ mở khóa",
+  closeLock: "Không cần xác minh khi khởi chạy ứng dụng",
+  checkTips:
+    "Vui lòng kiểm tra xem quyền khuôn mặt hoặc vân tay của bạn có bật không~",
+  face: "Mở khóa khuôn mặt",
+
+  finger: "Mở khóa bằng vân tay",
+  gestureLock: "Cử chỉ mở khóa bằng mật khẩu",
+  closed: "Chưa mở",
+  opened: "Đã mở",
+  lanchProtect: "Bảo vệ khi khởi động",
+  noProtect: "Không cần bảo vệ",
+  lockSetting: "Mở khóa cài đặt",
+  drawLine: "Vẽ mô hình mở khóa",
+  drawOldLine: "Vẽ mật khẩu cử chỉ cũ của bạn",
+  drawNewLine: "Vẽ mật khẩu cử chỉ mới của bạn",
+  setGesturePassword: "Đặt mật khẩu cử chỉ",
+  checkGesturePassword: "Xác minh mật khẩu cử chỉ",
+  needJoinPoint: "Kết nối ít nhất 4 điểm, vui lòng vẽ lại",
+  noFriendAdd: "Không thêm bạn bè",
+  noFriendDelete: "Không có bạn bè có thể xóa",
+  noVerify: "Cần xác minh khi thêm tôi làm bạn bè",
+  drawAgain: "Vui lòng vẽ lại",
+  checkSuccessful: "Xác minh thông qua",
+  notInCommon: "Không phù hợp với bản vẽ cuối cùng, vui lòng vẽ lại",
+  changeGesturePassword: "Thay đổi mật khẩu cử chỉ",
+  toChange: "Thay đổi",
+  change: "Sửa đổi",
+  openSuccess: "Kích hoạt thành công",
+  closeSuccess: "Đóng cửa thành công",
+  hasBeenMember: "Đã là thành viên của nhóm, không cần tham gia lại",
+  joinGroup: "Tham gia trò chuyện nhóm",
+  checking: "Đang được quản trị viên xem xét",
+  noUnlock: "Không thể mở khóa?",
+  inputGesture: "Vui lòng nhập cử chỉ để mở khóa",
+  faceDetect: "Vui lòng nhận dạng khuôn mặt",
+  fingerDetect: "Vui lòng lấy dấu vân tay",
+  tryUnlocking: "Vui lòng thử: Không thể mở khóa?",
+  countRemain: "Cử chỉ sai, bạn cũng có thể nhập%s lần",
+  reLoginUnlock: "Đăng nhập lại để mở khóa",
+  selectVerityType: "Vui lòng chọn phương thức xác minh      ",
+  currentTypeNotSupport: "Loại hiện tại không được hỗ trợ",
+  updateNewVersion: "Khám phá phiên bản mới",
+  updateOkUpdate: "Nâng cấp ngay bây giờ",
+  updateOpenDownloadFailed: "Mở tải xuống không thành công",
+  updateCurrentIsNew: "Hiện tại là phiên bản mới nhất",
+  newVersionNotFound:
+    "Không tìm thấy liên kết mới nhất, bạn có thể truy cập trang web để tải xuống",
+  openUrlFailed: "Liên kết không hợp lệ",
+  qmvMsgNotExit: "[Nội dung tham chiếu không tồn tại]",
+  qmvMsgNotSupport: "[Nội dung trích dẫn không hỗ trợ hiển thị]",
+  dataError: "Lỗi phân tích dữ liệu",
+  userNotBindEmail: "Hộp thư không bị ràng buộc bởi người dùng",
+  userNotRegister: "Người dùng chưa đăng ký",
+  checkError: "Kiểm tra thất bại",
+  csvTitle: "Cài đặt trò chuyện",
+  csvSetTopMsg: "Đặt trò chuyện hàng đầu",
+  csvSetOptMsg: "Tin nhắn không làm phiền",
+  csvSetDisableMsg: "Che chắn thông điệp",
+  csvClearMsg: "Xóa lịch sử trò chuyện",
+  csvClearLocal: "Chỉ trống lịch sử trò chuyện địa phương",
+  csvClearUser: "Xóa lịch sử trò chuyện cục bộ và%s",
+  csvSetErrorTip: "Thiết lập không thành công, vui lòng kiểm tra mạng",
+  gmiTitle: "Biệt danh nhóm:",
+  gmiSetTalk: "Trò chuyện riêng tư về mã hóa",
+  gmiSetMute: "Đặt lệnh cấm trong nhóm",
+  gmiDeleteUser: "Di chuyển ra khỏi nhóm",
+  gmiMuteTo: "Cấm ngôn chí",
+  gmiError1:
+    "Không tìm thấy thông tin thành viên này, có thể đã được chuyển ra khỏi cuộc trò chuyện nhóm",
+  gmiError2:
+    "Thông tin thành viên nhóm của bạn không được tìm thấy và bạn có thể đã bị chuyển ra khỏi cuộc trò chuyện nhóm",
+  gmiError3: "Bạn chắc chắn muốn xóa người dùng này?",
+  gmiError4: "Di chuyển thành viên này ra khỏi nhóm và không thể gửi tin nhắn",
+  gmiError5: "Bạn không có quyền xóa quản trị viên này",
+  gmiError6: "Bạn không có quyền xóa thành viên này",
+  gmiError7: "Đã dỡ bỏ cấm ngôn",
+  gmiError8: "Bạn không có quyền hủy bỏ lệnh cấm quản trị viên này",
+
+  gmiError9: "Bạn không có quyền hủy bỏ lệnh cấm thành viên này",
+  gmiError10: "Bạn không có quyền cấm quản trị viên này",
+  gmiError11: "Bạn không có quyền cấm thành viên này",
+  gmiError12: "Bỏ cấm ngôn",
+  gmiGroupOwnerNotFound: "Tải thông tin nhóm không thành công",
+  smmvTitle: "Thời gian cấm nói",
+  smmvMuteTime: "Chọn thời gian cấm ngôn",
+  smmvMuteTime_10m: "10 phút",
+  smmvMuteTime_1hour: "1 giờ",
+  smmvMuteTime_12hour: "12 giờ",
+  smmvMuteTime_1day: "1 ngày",
+  smmvMuteTime_30day: "30 ngày",
+  smmvMuteTime_7day: "7 ngày",
+  egnpTitle: "Chỉnh sửa tên trò chuyện nhóm",
+  egnpSetGroupName: "Vui lòng đặt tên nhóm",
+  egnpSetTextDesc: "Vui lòng đặt 1-15 ký tự",
+  egnpSetTitleNoPermission: "Bạn không có quyền thay đổi tên trò chuyện nhóm",
+  egnpSetFailed: "Sửa đổi không thành công, vui lòng thử lại sau",
+  setGroupNameHint: "Vui lòng đặt tên nhóm",
+  givTitle: "Chỉnh sửa tên trò chuyện nhóm",
+  givGroupName: "Tên nhóm",
+  givGroupFace: "Avatar nhóm",
+
+  gmsvTitle: "Quản lý nhóm",
+  gmsvSetManager: "Quản trị viên thiết lập",
+  gmsvToSet: "Bỏ cài đặt",
+  gmsvFindMsg: "Tìm lịch sử trò chuyện",
+  gmsvFindMsgDesc:
+    "Các thành viên trong nhóm sẽ thấy thông báo lịch sử gần đây sau khi mở",
+  gmsvMute: "Cấm ngôn toàn bộ",
+  gmsvMuteDesc: " Chỉ cho phép chủ nhóm và quản trị viên nói chuyện sau khi mở",
+  gmsvApply: "Xác nhận nhóm",
+  gmsvApplyDesc:
+    "Sau khi mở cần có sự xác nhận của chủ nhóm hoặc quản trị viên để vào nhóm",
+  gmsvSetManagerTip: "Chỉ chủ nhóm mới có thể thiết lập quản trị viên",
+  gmsvSetMuteTipOn: "Đã toàn bộ cấm ngôn",
+  gmsvSetNuteTipOff: "Toàn bộ cấm ngôn đã được dỡ bỏ",
+  gmsvApplyTipOn: "Xác nhận nhóm đã được bật",
+  gmsvApplyTipOff: "Xác nhận nhóm đã đóng",
+  gmsvFindGroupErr: "Không thể lấy được thông tin nhóm",
+  gmsvFindMsgOn: "Tìm lịch sử trò chuyện đang mở",
+  gmsvFindMsgOff: "Tìm lịch sử trò chuyện đã đóng",
+  gmsvSetFailed: "Thiết lập không thành công",
+  gsvTitle: "Chi tiết nhóm",
+  gsvGroupId: "ID nhóm",
+  gsvGroupMember: "Trò chuyện nhóm",
+  gsvGroupMemberValue: "của{num} người",
+  gsvGroupNotification: "Thông báo nhóm",
+  gsvMyName: "Biệt danh nhóm của tôi",
+  gsvMyFace: "Đầu nhóm của tôi",
+  gsvGroupManager: "Quản lý nhóm",
+  gsvGroupApply: "Xác nhận nhóm",
+  gsvFindMsg: "Tìm lịch sử trò chuyện",
+  gsvSetTop: "Đặt hàng đầu",
+  gsvSetOpt: "Tin nhắn không làm phiền",
+  gsvDeleteMsg: "Xóa lịch sử trò chuyện",
+  gsvDeleteLocal: "Chỉ trống lịch sử trò chuyện địa phương",
+  gsvDeleteAllMsg: "Xóa lịch sử trò chuyện địa phương và tất cả các thành viên",
+  gsvDeleteOtherMsg: "Tống không lịch sử trò chuyện cục bộ và của đối phương",
+  gsvGroupDelete: "Bạn chắc chắn muốn giải tán cuộc trò chuyện nhóm?",
+
+  gsvOutGroup: "Bạn chắc chắn muốn thoát khỏi cuộc trò chuyện nhóm?",
+  gsvNoNotification: "Tạm thời không có thông báo",
+  gsvClearSuccess: "Xóa thành công",
+  gsvClearFailed: "Xóa không thành công, vui lòng thử lại sau",
+  cvAllPeople: "Tất cả mọi người",
+  cvVideo: "[Video]",
+  cvPicture: "[hình ảnh]",
+  cvFile: "[Tài liệu]",
+  cvVoice: "[Tiếng nói]",
+  cvNotSupportMsg: "Tin nhắn không được hỗ trợ tạm thời",
+  cvSendMsgErrorNoPermission:
+    "Bạn không thể gửi tin nhắn đến TA do cài đặt quyền của người khác",
+  cvSendMsgPnMute: "Không thể gửi tin nhắn",
+  cvCopyMsg: "Đã sao chép vào bảng cắt",
+  cvCopyMsgNotSupport: "Tin nhắn không được hỗ trợ tạm thời",
+  cvdeleteLocal: "Xóa khỏi cục bộ",
+  cvdeleteLocalAndServer: "Xóa khỏi cục bộ và máy chủ",
+  cvdeleteLocalAndServerUser: "Xóa khỏi cục bộ và{name}",
+  cvClearMsgTip: "Xóa tin nhắn phiên chạy",
+  cvGroupCreateSuccess: "Tạo nhóm chat thành công",
+  cvGroupCreateSuccessTip1:
+    "Chúc mừng bạn đã xây dựng thành công nhóm, nhấp vào nút bên dưới để mời bạn bè vào nhóm",
+  cvGroupCreateSuccessGo: "Mời bạn bè vào nhóm",
+  cvGroupNotification: "Thông báo nhóm:",
+  sendMsg: "Gửi tin nhắn",
+  cvOnlineCount: "{count} mọi người đang online",
+  cvUserCount: "của{count} người",
+  cvNotAtUser:
+    "Chưa có thành viên nào trong nhóm có thể @ ồ, mau đi thêm thành viên đi.",
+  all: "tất cả",
+
+  clCloseConversation: "Trò chuyện xếp hàng đầu",
+  clOpenConversation: "Trò chuyện hàng đầu",
+  clNoConversation: "Không có phiên họp gần đây~",
+  clTitle: "Đối thoại",
+  clDelete: "Cuộc hội thoại này sẽ bị xóa",
+  clDeleteDesc: "Xóa cuộc hội thoại này, lịch sử trò chuyện cục bộ sẽ bị xóa",
+  clDeleteSel: "Bạn không chọn phiên chạy",
+  clDeleteSel1: "Cuộc hội thoại này sẽ bị xóa",
+  clDeleteSel2: "Những cuộc hội thoại này sẽ bị xóa",
+  clDeleteDesc2:
+    "Xóa các cuộc hội thoại này, lịch sử trò chuyện cục bộ sẽ bị xóa",
+  homeItem0: "đối thoại",
+  homeItem1: "Liên hệ",
+  homeItem2: "của tôi",
+  exitTip: "Click back một lần nữa để thoát ra",
+  mineSigEmpty: "Người dùng này rất lười, tạm thời không có chữ ký~",
+  uaProtocol: "Thỏa thuận dịch vụ người dùng",
+  savSearchTip: "Tìm kiếm nhanh nội dung trò chuyện",
+  savMedia: "Hình ảnh/Video",
+  searchEmptyTip: "Không tìm thấy lịch sử trò chuyện liên quan",
+  savSearchMsg: "Lịch sử trò chuyện liên quan đến thanh",
+  savConversation: "hội thoại",
+  savMsg: "Lịch sử trò chuyện",
+  savConversationNotFound: "Không tìm thấy hội thoại",
+  savMsgNotFound: "Không tìm thấy thông tin này",
+
+  samTitle: "Truyền thông",
+  samTimeFormat: "Tháng M năm yyyy",
+  notSupportType: "Loại không được hỗ trợ",
+  media: "Truyền thông",
+  openUrl: "Mở liên kết",
+  lkAddGroupUrl: "Tham gia liên kết trò chuyện nhóm",
+  lkAddOtherUrl: "Liên kết ngoài, có thể mở bằng trình duyệt mặc định",
+  lkUnknowUrl: "Liên kết không xác định",
+  openUrlFailed1: "Mở liên kết không thành công",
+  yszcTitle: "Chính sách bảo mật",
+  ctmRemove: "Loại bỏ",
+  ctmOkRemove: "OK để xóa",
+  ctmTopMsgCount: "Tổng thanh{count}",
+  ctmEmptyText: "Không có tin nhắn hàng đầu",
+  recordTimeShort: "Thời gian ghi âm quá ngắn",
+  sendCodeExceErr: "Gửi CAPTCHA không thành công, vui lòng thử lại sau",
+  bindEmailExecErr:
+    "Hộp thư bị ràng buộc không thành công, vui lòng thử lại sau",
+  ctmSuccess: "Lên đỉnh thành công",
+  ctmRemoveSuccess: "Xóa tin nhắn hàng đầu thành công",
+  ctmMsgNotFound: "Thông điệp này không tồn tại",
+  cvFirstTip:
+    "Thông tin và cuộc gọi trong cuộc hội thoại này đã được mã hóa đầu cuối",
+
+  clearGroupNotification: "Xóa thông báo nhóm",
+  publicGroupNotification: "Gửi thông báo",
+  dialog_tip1: "Gợi ý ấm áp",
+  deleteGroups:
+    "gói sẽ không thể phục hồi sau khi xóa, bạn có xác nhận xóa gói không?",
+  dialog_tip_token_invaild: "Đăng nhập đã hết hạn, vui lòng đăng nhập lại",
+  notify_new_msg_title: "Bạn nhận được tin nhắn mới",
+  notify_new_msg_msg: "Nội dung tin nhắn:...",
+  dataError1: "Lỗi dữ liệu",
+  groupApply: "Ứng dụng nhóm điều chỉnh",
+  muteLate: "Sau khi dỡ bỏ cấm ngôn",
+  groupMuteing: "Trong nhóm cấm ngôn",
+  modifyGroupName: "Sửa đổi tên nhóm",
+  groupMemberNotFound: "Không tìm thấy thông tin thành viên nhóm",
+  deleteGround: "Xóa nhóm",
+  bindEmailTipTitle: "Hộp thư bị ràng buộc",
+  bindEmailTipContent:
+    "Vì sự an toàn của tài khoản của bạn, vui lòng liên kết hộp thư của bạn",
+  bindEmailTipOk: "Không ràng buộc",
+  bindEmailTipCancle: "Tạm thời không bị ràng buộc",
+  alreadyBeOwner: "Bạn đã chọn chủ nhóm và đã có quyền quản trị cao nhất",
+  managerApplying: "Đang được quản trị viên xem xét",
+  quote: "trích dẫn",
+
+  request_exception: "ngoại lệ yêu cầu",
+  clearMsg: "Xóa tin nhắn",
+  pressToSay: "Giữ và nói chuyện",
+  slideToCancelSend: "Trượt ngón tay, hủy gửi",
+  releaseToEnd: "Kết thúc việc nới lỏng",
+  releaseToCancelSend: "Thả ngón tay, hủy gửi",
+  invalidVoiceMessage: "tin nhắn thoại không hợp lệ",
+  hit: "đánh",
+  downloadingCache: "Đang tải xuống bộ nhớ cache...",
+  unableToRecognize: "Mã QR không hợp lệ",
+  scanResult: "Quét kết quả",
+
+  register_fail:
+    "Đăng ký không thành công, vui lòng thử lại sau khi kiểm tra mạng",
+  skip: "nhảy qua",
+  toUse: "Trải nghiệm ngay lập tức",
+  sideToSide: "Mã hóa đầu cuối",
+  design: "Thiết kế",
+  guide1: "Gửi tin nhắn, mã hóa truyền, chỉ đọc cho chính mình",
+  guide2: "Giao tiếp tự do hơn theo cách của bạn",
+  guide3: "Nền tảng truyền thông an toàn được xây dựng xung quanh bạn",
+  inputGroupAc: "Vui lòng nhập thông báo nhóm (giới hạn ký tự 0-500)",
+  clickToEnjoy:
+    "Nhấn vào liên kết để lưu, hoặc sao chép nội dung của đoạn này, mở ứng dụng [đai bóng đá] và tham gia trò chuyện nhóm.",
+  createOK: "Tạo thành công",
+  noPravcy: "Bạn không có quyền tạo trò chuyện nhóm",
+  groupNumberToTop: "Số lượng nhóm đạt đến giới hạn trên",
+  createFail: "Tạo thất bại, hãy thử lại sau.",
+  create: "tạo ra",
+  uploadGroupAvatar: "Tải lên hình đại diện nhóm",
+  useNewPassword:
+    "Đổi mật khẩu thành công, đang quay lại trang đăng nhập",
+
+  error_14: "Ngoại lệ máy chủ (14)",
+  error_500: "Ngoại lệ máy chủ (500)",
+  error_1000: "Token chữ ký của người dùng là không hợp pháp",
+  error_1001: "Lỗi tham số",
+  error_1002: "Phiên bản hiện tại là phiên bản mới nhất",
+  error_6001: "Tên người dùng này đã được đăng ký",
+  error_6003: "Mật khẩu phải bao gồm 6-15 chữ cái và số",
+  error_6004: "Lỗi kiểm tra tên người dùng",
+  error_6005: "Mật khẩu không đúng, vui lòng nhập lại",
+  error_6006: "Số lỗi mật khẩu vượt quá giới hạn ngày hôm nay",
+  error_6007: "Người dùng không tồn tại",
+  error_6008: "Mật khẩu cũ bị lỗi, vui lòng nhập lại",
+  error_6009: "Mật khẩu cũ phù hợp với mật khẩu mới, vui lòng nhập lại",
+  error_6010: "Nhận CAPTCHA thường xuyên",
+  error_6011: "Mã xác nhận không chính xác, vui lòng thử lại",
+  error_6012: "Mã xác nhận đã hết hạn",
+  error_6013: "Quá nhiều lần CAPTCHA thất bại",
+  error_6014: "CAPTCHA đã được sử dụng",
+  error_6015: "Hộp thư không tồn tại",
+  error_6016: "Hộp thư đã bị người khác ràng buộc, vui lòng nhập lại",
+  error_6017: "Captcha không tồn tại",
+  error_6018: "Tài khoản này đã bị chặn",
+  error_6019: "Số điện thoại di động đã bị người khác ràng buộc",
+  error_6020: "Địa chỉ email đã bị người khác ràng buộc",
+  error_6021: "Địa chỉ email bị lỗi, vui lòng nhập lại",
+  error_6022: "Số điện thoại bị lỗi, vui lòng nhập lại",
+  error_6023:
+    "Tài khoản này đã bị chặn, tạm thời không hỗ trợ lấy lại mật khẩu",
+  error_6024:
+    "Tài khoản này chưa liên kết với hòm thư, tạm thời không hỗ trợ tìm lại mật khẩu",
+  error_6025:
+    "Tài khoản này không liên kết số điện thoại, tạm thời không hỗ trợ tìm lại mật khẩu",
+  error_6026: "Số điện thoại đã bị người khác buộc, vui lòng nhập lại",
+  error_6030: "Hộp thư máy chủ không được cấu hình",
+  error_6031: "Vui lòng nhập đúng số điện thoại di động",
+  error_6032: "Vui lòng nhập địa chỉ email chính xác",
+
+  error_100002: "Đặt tin nhắn hàng đầu để đạt giới hạn",
+  error_100003: "Thông điệp này đã được đưa lên hàng đầu",
+  error_api: "Lỗi yêu cầu",
+  error_http: "Lỗi yêu cầu mạng",
+  error_http_11: "Thời gian chờ kết nối mạng",
+  error_http_12: "Thời gian chờ kết nối mạng",
+  error_http_13: "Thời gian chờ kết nối mạng",
+  error_http_14: "Lỗi chứng chỉ mạng",
+  error_http_15: "Lỗi dữ liệu yêu cầu",
+  error_http_16: "Yêu cầu bị hủy bỏ",
+  error_http_17: "Thời gian chờ kết nối mạng",
+  error_http_18: "Lỗi nội bộ yêu cầu mạng",
+  error_sdk_err_1002: "Hoạt động không cho phép",
+  error_sdk_err: "Thao tác thất bại",
+  search_hine_1: "Vui lòng nhập nội dung tìm kiếm của bạn",
+  str_no_data: "Không có dữ liệu",
+  str_no_net: "Không có mạng tại thời điểm này",
+  download_not_support_type: "Định dạng không được hỗ trợ",
+  download_save_at: "tập tin được lưu trữ trong:",
+  download_not_url: "Không nhận ra liên kết tải xuống",
+  download_file_success: "Lưu thành công, bạn có thể vào album để xem",
+  download_failed_file: "Lưu tập tin không thành công",
+  download_failed: "Tải xuống không thành công",
+  loading_failed_retry: "Tải không thành công, nhấp để thử lại",
+  loading_ing: "Đang tải",
+
+  str_online_later_minute: "Trực tuyến cách đây vài phút",
+  str_online_later_hour: "Trực tuyến trước giờ",
+  str_online_later_llg: "Lâu rồi không online",
+  str_online_later_yesterday: "Trực tuyến ngày hôm qua",
+  str_yesterday: "Hôm qua",
+  str_online_later_near: "Trực tuyến gần đây",
+  str_minute: "số phút",
+  clean_notice: "Thông báo trống",
+  clean_notice_1: "Bạn chắc chắn muốn xóa thông báo nhóm?",
+  publish_notice: "Gửi thông báo",
+  publish_notice_remind:
+    "Gửi thông báo này sẽ cảnh báo tất cả các thành viên của nhóm",
+  quit_edit: "Thoát khỏi biên tập viên",
+  quit_the_edit: "Thoát khỏi phiên bản này?",
+  continue_edit: "Tiếp tục chỉnh sửa",
+  publish_success: "Xuất bản thành công",
+  face_success: "Mở khóa khuôn mặt thành công",
+  finger_success: "Mở khóa vân tay đã thành công",
+  groupDismissed: "Nhóm đã giải tán",
+  hasOut: "Đã hết hạn",
+
+  otherLoginStyle: "Các phương thức đăng nhập khác",
+  otherRegisterStyle: "Các phương thức đăng ký khác",
+  hasAccount: "Đã có tài khoản rồi, đăng nhập đi",
+  mobileCode: "Điện thoại di động Captcha",
+  codeSendTo: "Mã xác nhận đã được gửi đến",
+  inputNumber: "Vui lòng nhập số điện thoại di động",
+  bindPhone: "Số điện thoại bị ràng buộc",
+  bindPhoneSuccess: "Số điện thoại di động bị ràng buộc thành công",
+  bindPhoneTipChange:
+    "Nếu số điện thoại của bạn không còn sử dụng, vui lòng thay thế kịp thời",
+  please_input_email: "Vui lòng nhập địa chỉ email",
+  findPassByEmailTip: "Lấy lại mật khẩu bằng hộp thư của bạn",
+  findPassByPhoneTip: "Lấy lại mật khẩu bằng số điện thoại di động",
+  resetPass: "Đặt lại mật khẩu",
+  current_bind_phone: "Số điện thoại liên kết hiện tại:",
+  reget: "lấy lại",
+  getVerifyCode: "Lấy CAPTCHA",
+  alreadyRegister: "Số điện thoại này đã được đăng ký",
+  alreadyRegister2: "Địa chỉ email này đã được đăng ký",
+  netErrorRetry: "Mạng bị lỗi nhỏ, nhấp vào trang để tải lại~",
+  newPhoneNumber: "Số điện thoại mới",
+  addFriendText1: "Thêm bạn bè",
+
+  qrSaveFail: "Lưu mã QR không thành công",
+  qrSavePhoto: "Mã QR đã được lưu vào album",
+  userId: "ID người dùng:",
+  addMeToFriend: "Thêm tôi làm bạn",
+  validTime: "Hết hạn sử dụng",
+  clickRefresh: "Nhấn để làm mới",
+  qrUseCount: "Mã QR này{count} hợp lệ lần",
+  share: "chia sẻ",
+  savePhoto: "Lưu ảnh",
+  iAm: "Tôi là",
+  addFriendSuccessful: "Thêm bạn bè để thành công",
+  addFriendFaceToFace: "mặt đối mặt kết bạn",
+  faceToFace: "mặt đối mặt thêm bạn bè",
+  inputSameKey: "Đây là những người bạn đã nhập cùng một số",
+  sameKeyAddFriend: "Nhập cùng số bạn bè để thêm bạn bè",
+  self: "bản thân",
+  age: "tuổi",
+  confirmAddFriend: "Xác nhận thêm bạn bè",
+  inputUserId: "Vui lòng nhập ID người dùng",
+  myQr: "Mã QR của tôi",
+  back: "trở lại",
+  canNotAddSelf: "Bạn không thể thêm mình vào danh bạ",
+  notExsit: "Người dùng này không tồn tại",
+  searchUserId: "Tìm kiếm ID người dùng:",
+
+  remarkInfo: "Vui lòng ghi chú để xác minh thông tin",
+  applyRemark: "Ghi chú",
+  last4Number:
+    "Vui lòng nhập 4 chữ số sau khi đối phương đăng nhập vào số điện thoại di động",
+  checkLast4Number: "4 chữ số sau khi xác minh số điện thoại di động",
+  addFriendApply: "Thêm ứng dụng kết bạn",
+  friendNumberCatchTopLimit: "Số lượng bạn bè của bạn đã lên đến giới hạn",
+  friendNumberCatchTopLimitCurrentDay:
+    "Thêm bạn bè trong ngày đã đạt giới hạn tối đa",
+  codeInvalid: "Khóa không hợp lệ hoặc không hợp lệ, vui lòng khởi động lại",
+  shareFail: "Chia sẻ thất bại",
+  error_1003: "Vui lòng thử lại sau",
+  error_6033: "Khóa không hợp lệ hoặc không hợp lệ, vui lòng khởi động lại",
+  error_6034: "Tổng số bạn bè đã đạt đến giới hạn",
+  error_6035: "Thêm bạn bè trong ngày đã đạt giới hạn",
+  error_6036: "Số điện thoại của người dùng này trống rỗng",
+  error_6037: "Xác minh số đuôi điện thoại không thành công",
+  error_6040: "Gói đã tồn tại",
+  error_6050: "Mã QR đã hết hạn",
+  error_6051: "Số lần sử dụng mã QR đã đạt giới hạn tối đa trong ngày",
+  error_6052: "Số lần sử dụng mã QR đã đạt đến giới hạn trên",
+  error_6053: "Số lần quét hôm nay đã đạt giới hạn tối đa",
+  error_6054: "Đối phương đã thêm bạn làm bạn tốt",
+  error_6055: "Khóa không hợp lệ hoặc không hợp lệ, vui lòng khởi động lại",
+  error_6066: "Không đủ số dư tài khoản",
+  error_6067: "Tiền lì xì đã lãnh xong",
+  error_6068: "Phong bì đỏ đã hết hạn",
+  error_6069: "Không thể nhận phong bì màu đỏ đặc biệt",
+  error_6070: "Đã nhận được phong bì màu đỏ, không thể nhận được nữa",
+
+  deletedByFriendHint: "Bạn chưa phải là bạn bè của tôi",
+  deletedByFriendHint1: "Bạn chưa phải là người bạn của tôi",
+  deletedByFriendHint2: "Thêm bạn bè",
+  deletedByFriendHint3: "Tiếp tục trò chuyện",
+  gotoAddFriend: "Đi và thêm bạn bè",
+  addFriendGotoGroup: "Mời bạn bè vào nhóm",
+  notContacts: "Không có liên hệ",
+  notContactsFound: "Không tìm thấy người bạn nào liên quan đến%s",
+  remarkStr: "Ghi chú",
+  remarkStrHint: "Vui lòng nhập ghi chú",
+  deleteConfirm: "Xác nhận xóa bạn bè",
+  deleteFriend: "Xóa bạn bè",
+  searchContact: "Tìm kiếm liên hệ",
+  notGroupTip: "Chưa tham gia trò chuyện nhóm",
+  notAddFriend: "Chưa thêm bạn mới",
+  friendApplyAdd: "Ứng dụng kết bạn",
+  addSuccess: "Thêm thành công",
+  hasSelectFriend: "Bạn bè đã chọn",
+  myBalance: "Số dư của tôi",
+
+  //------------------
+
+  revokeMsgTip: "Rút tin nhắn",
+  error_10050: "Thao tác không thành công (không tìm thấy bản ghi)",
+  set_manager_tip_1: "Bạn đã chọn chủ nhóm và đã có quyền quản trị cao nhất.",
+  envelope: "phong bì màu đỏ",
+  uidStr: "ID người dùng",
+  showGetDetail: "Xem chi tiết yêu cầu bồi thường",
+  waitOtherEnter: "Chờ người khác tham gia",
+  isFriend2SExit: "Đã kết bạn, tự động thoát sau 2 giây",
+  sendRedPacket: "phát bao lì xì",
+  redPacketNumber: "Số lượng bao lì xì",
+  ge: "một",
+  total: "Tổng số",
+  eachNumber: "Số lượng đơn lẻ",
+  selectUser: "Chọn người dùng",
+  number: "số lượng",
+  redPacketType: "Loại phong bì màu đỏ",
+  checkVerity: "Xác minh bảo mật",
+  balance: "Số dư tài khoản",
+  sendTo: "Mã xác minh SMS đã được gửi đến",
+  pin: "Đánh vần vận may màu đỏ",
+  putong: "phong bì màu đỏ bình thường",
+  zhuanshu: "Phong bì màu đỏ đặc biệt",
+  dajidali: "Chúc mừng sự giàu có, Darjeelia!",
+
+  redPacketInfo: "Chi tiết phong bì màu đỏ",
+  best: "Vận may tốt nhất",
+  saveToAccount: "Đã nạp tiền vào tài khoản",
+  minuteOut: "phút bị đánh cắp",
+  hourOut: "giờ cướp hết",
+  showDetail: "Xem chi tiết",
+  maxMemberNumber:
+    "Số lượng bao lì xì không được vượt quá số lượng chat nhóm hiện tại",
+  sended: "Đã gửi",
+  get: "Đã nhận",
+  waiting: "Chờ người dùng nhận nó",
+  gong: "một bao lì xì",
+  envelope_get_over: "Tiền lì xì đã được nhận hết",
+  envelope_get: "Đã nhận",
+  de: "của",
+  envelope_get_message: "Nhận tin nhắn phong bì đỏ",
+  bind_phone_please:
+    "Vì sự an toàn của tài khoản, vui lòng liên kết số điện thoại di động của bạn",
+  delay_bind: "Tạm thời không ràng buộc",
+  send_envelope_x: "phong bì màu đỏ phát ra",
+  send_envelope_back_all: "Phong bì đỏ này đã không được nhận trong hơn 24 giờ",
+  envelope_x_can_get: "{name} chỉ có thể yêu cầu",
+  envelope_get_completed: "Tay chậm, tiền lì xì đã bị cướp sạch",
+  send_envelope_back_some:
+    "Phong bì màu đỏ này đã không được nhận trong hơn 24 giờ.",
+  envelope_x_personal: "Phong bì màu đỏ dành riêng cho%s",
+  envelope_normal: "phong bì màu đỏ bình thường",
+  login_out_of_date: "Đăng nhập đã hết hạn, đăng nhập lại",
+  get_envelope_completed: "Đã hoàn thành",
+  x_is_personal: "Độc quyền",
+  error_6072: "Số tiền tối đa của một phong bì đỏ đã đạt được",
+  error_6073: "Số lượng bao lì xì riêng lẻ không thể nhỏ hơn 0.01",
+  error_6074: "Chức năng phong bì màu đỏ đã tắt",
+  distroyAccount: "Đăng xuất khỏi tài khoản",
+
+  inComing: "thu nhập",
+  outGoing: "Chi phí",
+  balance_order_detail: "Chi tiết số dư",
+  type: "Loại",
+  payType: "Phương thức thanh toán",
+  orderNo: "Số thứ tự",
+  time: "thời gian",
+  itemDataNotSupport: "Phiên bản hiện tại không được hỗ trợ",
+  manager_change_account: "Điều chỉnh tài khoản quản trị viên",
+  groupEnvelope: "Phong bì đỏ nhóm",
+  accountPay: "thanh toán số dư",
+  paySuccess: "Thanh toán thành công",
+  groupEnvelopePersonal: "Phong bì màu đỏ nhóm - phong bì màu đỏ đặc biệt",
+  groupEnvelopeNormal: "Phong bì màu đỏ nhóm - phong bì màu đỏ thông thường",
+  changeAccount: "Chuyển khoản",
+  groupEnvelopeRandom: "Nhóm phong bì màu đỏ - đánh vần phong bì màu đỏ",
+  groupEnvelopeAllBack: "Nhóm phong bì màu đỏ - trả lại tất cả",
+  groupEnvelopeSomeBack: "Phong bì màu đỏ nhóm - trả lại một phần",
+
+  distroyTips:
+    "Để xác nhận rằng tài khoản của bạn được bảo mật <br> chúng tôi sẽ thực hiện xác minh sau đây trước khi bạn đăng xuất khỏi tài khoản của mình",
+  safeStatus: "Tài khoản đang trong tình trạng an toàn",
+  safeTips:
+    "Vui lòng đảm bảo rằng tài khoản của bạn không có hành động nhạy cảm như thay đổi mật khẩu, thay đổi điện thoại/hộp thư và không có nguy cơ bị đánh cắp tài khoản của bạn",
+  strikeBalance: "Giải quyết tài sản tài khoản",
+  strikeTips:
+    "Sau khi đăng xuất khỏi tài khoản của bạn, tất cả dữ liệu số dư phong bì màu đỏ trong tài khoản của bạn sẽ bị xóa và không thể phục hồi được.",
+  dataDelete: "Xóa dữ liệu tài khoản",
+  deleteTips:
+    "Sau khi đăng xuất khỏi tài khoản, tất cả dữ liệu trong tài khoản đó sẽ bị xóa và không thể phục hồi. Dữ liệu bao gồm dữ liệu nội dung như lịch sử trò chuyện của bạn, các cuộc trò chuyện nhóm bạn đã tham gia, quan hệ bạn bè, v.v.",
+  applyDistroy: "Yêu cầu hủy tài khoản",
+  distroyConform: "Bạn có chắc muốn hủy tài khoản không?",
+  distroyConformTips:
+    "sẽ thoát khỏi đăng nhập sau khi đăng xuất, hãy cẩn thận!",
+  distroy: "Xác nhận đăng xuất",
+  submitSuccess: "Gửi thành công",
+  submitted: "Đơn xin hủy đăng ký của bạn đã được nộp!",
+  helpWord:
+    "Nền tảng sẽ xử lý đơn đăng ký của bạn và xóa tất cả dữ liệu của bạn trong vòng{day} ngày làm việc, để được trợ giúp, vui lòng liên hệ với chúng tôi qua trang web chính thức.",
+  know: "Tôi biết rồi",
+  revoke: "Đơn xin hủy bỏ",
+  revokeSuccess: "Hoàn tác thành công",
+  recover: "Bạn có chắc chắn muốn hủy bỏ đơn đăng ký không?",
+  toNormal: "Trạng thái tài khoản trở lại bình thường sau khi hủy bỏ",
+  beRecover: "Xác nhận khôi phục",
+  recoverSuccess: "Khôi phục thành công",
+  redPackageCountTip:
+    "Tổng số phong bì màu đỏ duy nhất không được nhỏ hơn 0,01",
+
+  closeAccount: "Đăng xuất tài khoản",
+  recoverAccount: "Khôi phục tài khoản",
+  recoverAccountTipTitle: "Bạn chắc chắn muốn khôi phục tài khoản của mình?",
+  recoverAccountTipDesc:
+    "Trạng thái tài khoản trở lại bình thường sau khi khôi phục",
+  recoverAccountTipOk: "Xác nhận khôi phục",
+  closingAccount: "Tài khoản đang trong quá trình kiểm tra đăng xuất",
+  closingAccountEndTime: ", dự kiến sẽ xóa hoàn tất trong{num} ngày làm việc",
+  error_6079: "Bạn không còn trong nhóm trò chuyện, không thể nhận được nó",
+  error_6075: "Ứng dụng lặp lại",
+  error_6076: "Không tìm thấy hồ sơ yêu cầu hủy đăng ký",
+  error_6077: "Đang xem xét đăng xuất",
+  error_6078:
+    "Người dùng không tồn tại hoặc đã đăng xuất, vui lòng kiểm tra xác nhận",
+  error_video_pre_err: "Lỗi tạo tệp và tải dữ liệu không thành công.",
+  err_upload_file: "Tải lên không thành công, vui lòng thử lại sau",
+  err_msg_send_failed: "Gửi không thành công, vui lòng thử lại sau",
+  error_red_package_tip1: "Phong bì đỏ đã hết hạn",
+  net_error_no_net: "Mạng không khả dụng, hãy kiểm tra cài đặt mạng của bạn",
+  upload: "Tải lên",
+  error_6081: "Gửi không thành công, vui lòng thử lại sau",
+  atTip: "Ai đó {'@'} bạn",
+  legalNotice: "Tuyên bố pháp lý",
+  timeoutLock: "Khóa thời gian chờ",
+  reTry: "Thử lại",
+  sysNotify: "Thông báo hệ thống",
+  exit_group_tip: "Đã thoát khỏi cuộc trò chuyện nhóm",
+  group_mute_ing: "Nhóm này đã bị cấm",
+  removeGroupNotice: "Xóa thông báo nhóm",
+  groupChatError: "Tải nội dung thất bại, nhấn vào để thử lại",
+  w_edit_group_notification: "Biên tập thông báo nhóm",
+  messageNotify: "thông báo",
+  groupEnterLimit:
+    "Số bạn được mời vào nhóm đã lên đến giới hạn, xin vui lòng kiểm tra",
+  unRecard: "Không ghi âm được:",
+  notSet: "Không dùng",
+  hasCreateGroup: "Nhóm chat đã được tạo ra",
+  joinGroupForLink: "Kết nối để tham gia nhóm chat",
+  be: "bị",
+  moveoutGroup: "Di chuyển ra khỏi nhóm trò chuyện",
+  groupOwnerChangeTo: "Nhóm lãnh đạo đã thay đổi",
+  changeGroupNameTo: "Thay đổi tên nhóm là",
+  disbandedGroup: "Giải tán nhóm chat",
+  bannedFromSpeaking: "Cấm nói",
+  gagWasLifted: "Bỏ lệnh cấm",
+  initiatedGroupGag: "Mở các nhóm cấm ngôn ngữ",
+  shutDownGroupGag: "Đóng cửa nhóm cấm ngôn ngữ",
+  target: "Người kia",
+  groupSizeUpperLimit: "Số lượng nhóm lên đến mức tối đa",
+  topUpperLimit: "Nâng lên đến mức giới hạn",
+  topMessageRepeate: "Tin nhắn đặt hàng đã được lặp lại",
+  userHasReadMessage: "Người dùng đã đọc tin nhắn này",
+  placeholder: {
+    allMuted: "Chủ nhóm hoặc quản trị viên đã tắt chế độ câm toàn bộ",
+    groupDisbanded: "Nhóm đã bị giải tán",
+    groupBanned: "Nhóm đã bị cấm",
+    singleBanned: "Bạn đã bị câm",
+    search: "Tìm kiếm",
+    pleaseInput: "Vui lòng nhập",
+    sec: "giây",
+    groupNoticePlaceholder: "Nhập thông báo nhóm..",
+    inputPassword: "Nhập mật khẩu",
+    confirmPassword: "Xác nhận mật khẩu nhập",
+    inputPhoneNumber: "Nhập số điện thoại",
+    select: "Chọn",
+    userOrGroupIDInput: "Nhập {type}",
+    writeMessage: "Nhập tin nhắn...",
+    inputGroupName: "Nhập tên nhóm",
+    typingMessage: "Nhập tin nhắn ở đây",
+    inputName: "Nhập biệt danh của bạn"
+  },
+  withoutQualification: "Người dùng này không đạt điều kiện để thêm bạn bè",
+  groupMask: "Mặt nạ trò chuyện nhóm",
+  groupMaskDescription: "Đặt biệt danh và hình đại diện của nhóm này",
+  pleaseBind:
+    "Vì an ninh tài khoản của bạn, tránh thêm bạn bè hạn chế chức năng, hãy ràng buộc",
+  orStr: " hoặc ",
+  andStr: " và ",
+  confirmExit: "Xác nhận lối ra",
+  pleaseBindTip1: "Vì an ninh tài khoản của bạn, hãy ràng buộc",
+
+  skin_item_user_name: "Trương nana",
+  skin_item_msg1: "Xin chào, nhận được một trả lời kịp thời",
+  skin_item_msg2: "Được rồi, nghe rõ",
+
+  appearance: "Hình ảnh",
+  bubbleBgColor: "Đối thoại màu bong bóng",
+  chatBackground: "Trò chuyện nền tảng",
+
+  moreSettings: " cài đặt thêm",
+
+  highPerformanceModel: "Chế Độ Sạch",
+  highPerformanceModelDesc: " mở không hiển thị hiệu ứng ",
+  skinPreview: " preview hiệu ứng ",
+  defaultText: "Mặc định",
+  fontSizePreview: "Xem trước kích thước phông chữ, kéo thanh trượt bên dưới để điều chỉnh kích thước phông chữ. Sau khi thiết lập, tất cả văn bản trên trang sẽ thay đổi kích thước phông chữ.",
+  changedText: "Được rồi, đã thay đổi",
+  imageAlpha: " hình ảnh minh bạch ",
+  min: "tối thiểu",
+  max: "lớn nhất",
+  backgroundColor: "màu nền",
+  changeSaveTip: "Bạn đã thay đổi cài đặt của mình, có nên lưu lại hay không",
+  saveAndBack: "Lưu và quay lại",
+  changeAvatar: "Thay thế avatar",
+  appFontSize: "Kích cỡ phông chữ toàn cục",
+
+  appFontSizeTip:
+    "Xem trước kích thước phông chữ, kéo thanh trượt bên dưới để đặt kích thước phông chữ. Sau khi thiết lập, kích thước phông chữ sẽ thay đổi cho tất cả văn bản trong ứng dụng. ",
+  maskDesc:
+    "Sau khi mở nhóm thành viên sẽ có thể thiết lập nick name và avatar của nhóm.",
+  groupMaskOpenTip: " %sMặt nạ chat %s",
+  groupMaskOpenTipNew: " Mặt nạ chat",
+  open: "Mở ",
+  close: "Đóng cửa ",
+  groupMaskOpenMsgErrorTip: "Nhóm chat mặt nạ chức năng chuyển đổi Mẹo ",
+  maskOpen: "Mặt nạ trò chuyện được mở ",
+  maskClose: "Mặt nạ chat đóng cửa ",
+
+  transmit: "chuyển tiếp",
+
+  multiSelect: "đa lựa chọn",
+
+  singleShareMsg: "Chuyển tiếp từng đoạn",
+
+  groupShareMsg: "Hợp nhất và chuyển tiếp",
+
+  notGroupFound: "Không tìm thấy {name} Trò chuyện nhóm liên quan",
+
+  rememberPassword: "Nhớ mật khẩu",
+
+  mobileLogin: "Đăng nhập điện thoại di động",
+
+  emailLogin: "Đăng nhập hộp thư",
+
+  recentConversation: "Trò chuyện gần đây",
+
+  selectContact: "Chọn một liên hệ",
+
+  selectGroup: "Chọn nhóm chat",
+
+  noGroup: "không có nhóm chat",
+
+  notSelectMessage: "Bạn chưa chọn tin nhắn",
+
+  hiddenMsg: "Ẩn thông điệp",
+
+  hiddenMsgTip: "Bạn có giấu nguồn không?",
+
+  yes: "Vâng",
+
+  no: "Không",
+
+  mergeMessageList: "[Hợp nhất và Chuyển tiếp] Lịch sử trò chuyện",
+
+  singleMlCount: "Tổng số{count} tin nhắn",
+  notFoundUser: "Không tìm thấy người dùng",
+  notFoundGroup: "Không tìm thấy nhóm",
+  notShouldFoundUser: "Không tìm thấy người dùng này",
+  selectAt: "Chọn người mà bạn muốn {'@'}",
+  welcomeToQDDChat: "Chào mừng đến với vành đai của các vị vua",
+  choiceYourAvatar: "Vui lòng chọn avatar của bạn",
+  enterPawAgain: "Vui lòng nhập lại mật khẩu",
+  Someone: "Ai đó {'@'} tôi",
+
+  hasSelect: " đã chọn ",
+  groupChat: " nhóm chat ",
+  groupMember1: " thành viên nhóm ",
+  groupSendMsg: "Phát điện không hỗ trợ các dòng điện",
+  bindGoogle: "bindGoogle",
+  bindFacebook: "bindFacebook",
+  unbind: "unbind",
+  accountSettings: " thiết lập tài khoản ",
+  thirdPartyAccountBinding: " tài khoản thứ ba ràng buộc ",
+  otherSettings: " cài đặt khác ",
+  groupChatLoadFailed: " tải thông tin trò chuyện nhóm thất bại ",
+  msgNotSupportTransmit: "Tin nhắn không hỗ trợ chuyển tiếp",
+
+  addGroupSend: "Bắt đầu nhóm",
+  groupSendNoData: "Không có ghi chép tin nhắn nhóm",
+  removeBinding: "Vô hiệu hóa",
+  unBindToastPart1: "Sau khi vô hiệu hóa nó, nó sẽ không còn được sử dụng nữa",
+
+  unBindToastPart2: "Tài khoản đăng nhập, bạn có muốn tiếp tục gỡ bỏ?",
+  noOpPermission: "Vẫn chưa có quyền hành",
+  bindingPhoneOrEmail:
+    "Để bảo mật dữ liệu tài khoản của bạn, xin vui lòng ràng buộc số điện thoại hoặc hộp thư của bạn trước khi gỡ bỏ.",
+  unbindingSuccess: "Cởi trói thành công",
+  unbindingFair: "Giải thoát thất bại",
+  bindingPhoneOrEmailSetPassword:
+    "Để bảo mật dữ liệu tài khoản của bạn, vui lòng liên kết số điện thoại di động hoặc địa chỉ email của bạn trước khi đặt mật khẩu.",
+
+  showAll: "Xem tất cả",
+  allCount: "Tất cả {num}",
+  recoverSuccessLoginAgain: "Phục hồi thành công, xin đăng nhập lại",
+  createGroupSend: "Bắt đầu nhóm",
+  groupSend: "Loan báo",
+  notSelect: "Bạn vẫn chưa chọn",
+  confirmDeleteTitle: "Hãy xác nhận việc xoá các nhóm đã chọn ？",
+  totalGe: "Tổng số %s",
+  sendTotalGe: "Gửi đến ({num})",
+  uploadFailed: "Tải lên thất bại",
+  selectMax: "Số lượng lựa chọn đạt đến giới hạn",
+  newFriendApply: "Bạn có một người bạn mới, nhấp vào xem",
+  error_6091: " số người được chọn vượt quá giới hạn ",
+  error_6092: " id thông báo đã tồn tại ",
+  newFriendApply: "Bạn có một người bạn mới, nhấp vào xem",
+  pay_password: "Mật khẩu thanh toán",
+  pleaseEnter: "Hãy nhập vào",
+  loadingPage: "Trang tải",
+  payTip:
+    "Bạn đã không thiết lập một mật khẩu thanh toán, xin vui lòng hoàn thành thiết lập trước khi hành động.",
+  deleteRedPackageErrTip: "Phong bì màu đỏ tin tức không thể rút lui",
+  applyIconTip: "Ứng dụng đã được gửi, phê duyệt có thể thay thế avatar",
+  applyIconProgress: "Xem tiến độ ứng dụng",
+  applyRecord: "Hồ sơ ứng dụng",
+  repealWithdrawApply: "Xác định hủy bỏ các ứng dụng rút tiền？",
+  withdrawNotes: "Hồ sơ rút tiền",
+  inReview: "Kiểm toán",
+  passTheAudit: "Phê duyệt",
+  rejectedPayment: "Phê duyệt bị bác bỏ",
+  revoked: "Đã bị hủy bỏ",
+  undone: "Hủy bỏ",
+  withdrawalQuantity: "Số tiền rút tiền mặt",
+  withdrawal: "DiXian",
+  withdrawalBack: "Rút lui",
+  update_tip1: "Nếu không thể cập nhật",
+  update_tip2: "Đến trang web chính thức để tải về",
+  update_ing: "Cập nhật",
+  update_install: "Lập tức cài đặt",
+  installFailed: "Không cài đặt, xin vui lòng thử lại sau",
+  installNotFoundFile:
+    "Không tìm thấy tập tin cài đặt, xin vui lòng thử lại sau",
+  error_6093: "Đăng nhập không được hỗ trợ",
+  error_6094: "Số avatar đã lên đến giới hạn",
+  deleteIcon: "Xóa avatar?",
+  balanceWithdraw: "Số dư rút tiền",
+  canBalanceWithdraw: "Số dư rút được",
+  inputPayPassword: "Vui lòng nhập mật khẩu thanh toán",
+  withdrawalSuccess: "Rút tiền thành công",
+  personIcon: "Hình ảnh cá nhân",
+  groupIcon: "Trò chuyện nhóm avatar",
+  error_6096: "Không đặt mật khẩu thanh toán bằng số lặp đi lặp lại",
+  forgetPayPassword: "Quên mật khẩu thanh toán",
+  downloadFailedTip: "Tải về thất bại, xin vui lòng thử lại sau",
+
+  error_6097: "Số dư là không đủ",
+  notSet2: "Không được thiết lập",
+  passed: "Đã thông qua",
+  headRejected: "Đã từ chối",
+  readDeleteTime: "Thời gian đốt tin nhắn",
+  readDeleteTimeTitle: "Thời gian đốt",
+  error_6090: "Tài khoản đã bị ràng buộc",
+  retracted_h5: "Đã rút lại",
+  message_h5: "tin nhắn từ",
+  inputRemark: "Vui lòng nhập ghi chú của bạn",
+  authFailed: "Xác thực thất bại",
+  userNullError: "Ngoại lệ tài khoản người dùng",
+  community: "Cộng đồng",
+  join: "Tham gia trò chuyện nhóm và khám phá nhiều hoạt động cộng đồng hơn",
+  posteviews: "Chưa có hoạt động nào được công bố",
+  views: "Lượt xem",
+  ended: "Sự kiện đã kết thúc",
+  configError: "Lỗi cấu hình, tạm thời không thể mở",
+  burnMsgOpen: "{name} đã đặt tin nhắn đã đọc {time} sau khi đốt cháy",
+  burnMsgClose:
+    "{name} đã tắt chế độ đọc và đốt, tin nhắn không còn tự động đốt nữa",
+  burnMsgNotify: "Thông báo đọc và đốt",
+  homeItem3: "Cộng đồng",
+  messageTimeOut: "Tin nhắn đã hết hạn",
+  burnContentTip:
+    "Tin nhắn đang cháy, bạn có muốn thoát và đốt cháy chỉ với một cú nhấp chuột không?",
+  cancelLater: "Tôi sẽ kiểm tra sau",
+  burnConfirm: "Đốt ngay",
+  setNickNameTimes: ", biệt danh chỉ có thể sửa đổi một lần trong vòng %s ngày",
+  voiceSendErrTip1: "Chỉ hỗ trợ gửi giọng nói từ %s-%s giây",
+  textSendErrTip1: "Tối đa nhập %s ký tự",
+  pictureSendErrTip1: "Chỉ hỗ trợ gửi hình ảnh từ %s-%sM",
+  videoSendErrTip1: "Chỉ hỗ trợ gửi video từ %s-%sM",
+  your: "Của bạn",
+  joinCommunity:
+    "Tham gia trò chuyện nhóm và khám phá nhiều hoạt động cộng đồng hơn～",
+  noActivity: "Chưa có hoạt động nào được công bố~",
+  views: "Lượt xem",
+  ended: "Sự kiện đã kết thúc",
+  errorLink: "không tìm thấy link",
+  set_payment_password: "Vui lòng thiết lập mật khẩu thanh toán 6 chữ số",
+  unset_payment_password:
+    "Vui lòng không đặt mật khẩu thanh toán là các số lặp lại hoặc liên tục",
+  Confirm_Payment_Password: "Xác nhận mật khẩu thanh toán",
+  Please_confirm_payment_password:
+    "Vui lòng nhập lại mật khẩu thanh toán để xác nhận",
+  error_6100:
+    "Xin lỗi, bạn chỉ có thể thay đổi biệt danh cá nhân mỗi {day} ngày một lần",
+  viewDetailed: "Xem thông tin chi tiết của thành viên nhóm",
+  inviter: "Người mời",
+  lastLoginTime: "Thời gian đăng nhập cuối cùng",
+  DeleteThisUsersgroup: "Xóa tin nhắn nhóm do người dùng này gửi trong nhóm",
+  AddGroupMembers: "Thêm thành viên nhóm không cần xác nhậnnhận đồng ý",
+  error_6103: "Người dùng này là thành viên thông thường, không có quyền hạn",
+  error_6104: "Orang yang ditambahkan tidak ada dalam grup",
+  error_6108: "Tài khoản bất thường",
+  group_remark: "Ghi chú nhóm",
+  input_group_remark: "Vui lòng nhập nội dung ghi chú",
+  await_accepting: "Yêu cầu ủy quyền thiết bị mới đã được gửi",
+  apply_tips: "Thiết bị này không đáng tin cậy hoặc không được phê duyệt. Bạn có muốn gửi thông tin thiết bị để yêu cầu ủy quyền không?",
+  apply_send: "Gửi yêu cầu",
+  apply_ttl: "Ủy quyền Đăng nhập Thiết bị",
+  group_limit500: "Tối đa 500 người mỗi nhóm",
+  select_group: "Chọn nhóm bạn bè",
+  cantfind: "Không tìm thấy liên lạc liên quan đến {name}",
+  error_6109: "Số lượng bạn của người dùng đã đạt đến giới hạn",
+  error_6106: "Vui lòng đợi cho đến khi thiết bị được phê duyệt trước khi đăng nhập",
+  selectGroups: 'Chọn nhóm',
+  group_member_info: "Thông tin thành viên nhóm",
+  join_time: "Thời gian tham gia",
+  inviter_user: "Người mời",
+  last_login_time: "Thời gian đăng nhập lần cuối",
+  sync_group_avatar: 'Bạn có muốn đổi ảnh đại diện nhóm cùng lúc không?',
+  invite_fail: '{usernames}thất bại do tài khoản bất thường!',
+  enterAndCtrl:'Enter để gửi / Enter+Ctrl để xuống dòng',
+  enterAndCtrlIOS:'Enter để gửi / Enter+control để xuống dòng',
+  scanLogin: 'Đăng nhập bằng quét mã',
+  formLogin: 'Đăng nhập bằng mật khẩu',
+  scanText: 'Sử dụng ứng dụng Qủy Đỉ để quét mã đăng nhập',
+  scanSubText: 'Sử dụng ứng dụng Qủy Đỉ để quét mã đăng nhập',
+  qrcodeExpired: 'Mã QR đã hết hạn',
+  expiredTime10: 'Mã QR có hiệu lực trong vòng 10 phút',
+  reflesh: 'Nhấp để làm mới',
+  scanSuccess: 'Quét thành công',
+  confromLogin: 'Vui lòng xác nhận đăng nhập',
+  onlineStatus: "Trạng thái trực tuyến:",
+  networkDiagnostic: "Chẩn đoán mạng",
+  "setPaymentPassword": "Vui lòng thiết lập mật khẩu thanh toán 6 chữ số",
+  "unSetPaymentPassword":
+      "Vui lòng không đặt mật khẩu thanh toán là các số lặp lại hoặc liên tục",
+  "verifyPassword": "Xác nhận mật khẩu thanh toán",
+  "confirmPaymentPassword": "Xác nhận mật khẩu thanh toán",
+  "verifyCurrentPassword": "Vui lòng xác nhận mật khẩu thanh toán hiện tại",
+  "reInsetPaymentPassword": "Vui lòng nhập lại mật khẩu thanh toán để xác nhận",
+  "paymentPasswordDifferent": "Mật khẩu không khớp, vui lòng nhập lại",
+  "getPaymentPasswordWay": "Vui lòng chọn cách khôi phục mật khẩu",
+  "selectFriendGroup": "Chọn nhóm bạn bè",
+  "selectGroups": "Chọn nhóm",
+  "eachGroupLimitNumber": "Số lượng tối đa cho mỗi nhóm là {p} người",
+  "selectChatLimitNumber": "Bạn chỉ có thể chọn tối đa {p} cuộc trò chuyện",
+  "deviceID": "Mã thiết bị：",
+  "groupChatRemark": "Ghi chú nhóm chat",
+  "pleaseEnterRemarks": "Vui lòng nhập nội dung ghi chú",
+  "groupMembershipInfo": "Thông tin thành viên nhóm",
+  "error_6102": "Mỗi nhóm có tối đa 500 người",
+  "distroyed": "Đã hủy bỏ",
+  "forbiddened": "Đã bị cấm",
+  "addGroupMemberWithoutApply": "Thêm thành viên nhóm mà không cần xác nhận",
+  "error_6109": "Số lượng bạn bè của người dùng này đã đạt đến giới hạn.",
+  "apply_ttl": "Ủy quyền đăng nhập thiết bị",
+  "apply_tips":
+      "Thiết bị này không đáng tin cậy hoặc chưa được phê duyệt, bạn có muốn gửi thông tin thiết bị để yêu cầu ủy quyền không?",
+  "apply_send": "Gửi yêu cầu",
+  "device_auth_send": "Yêu cầu ủy quyền thiết bị đã được gửi",
+  "using_trusted_device":
+      "Việc đăng nhập bằng thiết bị này có nguy cơ, vui lòng đăng nhập bằng thiết bị đáng tin cậy",
+  "account_closed": "Tài khoản đã bị đóng",
+  "google_code": "Mã xác minh Google",
+  "input_google_code": "Vui lòng nhập mã xác minh Google",
+  "inviterUser": "Người mời",
+  "lastLoginTime": "Thời gian đăng nhập lần cuối",
+  "error_6105": "Thiết bị không đáng tin cậy, vui lòng nộp đơn",
+  "error_6106": "Vui lòng đợi cho thiết bị được duyệt trước khi đăng nhập",
+  "error_6107": "Thiết bị chưa được duyệt trong quá trình kiểm tra",
+  "hasDetailInfoPermission": "Xem thông tin chi tiết thành viên nhóm",
+  "editUserHeaderWithGroupHeader":
+      "Bạn có muốn chỉnh sửa ảnh đại diện nhóm cùng lúc không?",
+  "darkModel": "Chế độ tối",
+  "darkModelSetDesc": "Mở hoặc đóng chế độ tối theo hệ thống",
+  "whiteModel": "Chế độ sáng",
+  "fileNotFound": "Không tìm thấy tệp",
+  "openFileInApp": "Xem trước tệp",
+  "openFileOtherApp": "Mở bằng ứng dụng khác",
+  "openByBrowser": "Tải xuống bằng trình duyệt",
+  "pauseDownload": "Tạm dừng tải xuống",
+  "resumeDownload": "Tiếp tục tải xuống",
+  "downloadFailed": "Tải xuống thất bại",
+  "downloading": "Đang tải xuống",
+  "notdownloaded": "Chưa tải xuống",
+  "cancelDownloading": "Tệp đang tải xuống, bạn có muốn hủy tải xuống không?",
+  "failedToDownload": "Tải xuống tệp thất bại, bạn có muốn tải lại không?",
+  "cancelDownload": "Hủy tải xuống",
+  "sending": "Đang gửi",
+  "fileTypeNotSupported": "Không hỗ trợ tải lên định dạng tệp này",
+  "fileSizeOut": "Kích thước tệp vượt quá",
+  "restrict": "Hạn chế",
+  "getWithPhone": "Tìm lại bằng số điện thoại",
+  "getWithEmail": "Tìm lại bằng địa chỉ email",
+  "fileSize": "Kích thước tệp",
+  "whetherDownloadFile": "Có muốn tải tệp không",
+  "downloadFailedTip1": "Tải xuống thất bại, vui lòng kiểm tra mạng và thử lại",
+  "downloadQueueTip": "Đã thêm vào hàng đợi tải xuống, đang chờ tải",
+  "notSupportTransmitTip": "Tin nhắn này hiện không thể chuyển tiếp",
+  "voiceSize": "Kích thước tệp âm thanh không được vượt quá 100MB.",
+  "wordSize": "Kích thước tệp tài liệu không được vượt quá 100MB.",
+  "apkSize": "Kích thước tệp gói cài đặt không được vượt quá 300MB.",
+  "zipSize": "Kích thước tệp nén không được vượt quá 300MB.",
+  "groupDeleteUserTip":
+      "Xóa người dùng này cũng như tin nhắn mà người dùng này đã gửi trong nhóm",
+  "nPersonRead": "{p} người đã đọc",
+  "darkModeEnabled":
+      "Chế độ tối đã được bật, khởi động lại ứng dụng để có hiệu lực",
+  "darkModeOff":
+      "Chế độ tối đã được tắt, khởi động lại ứng dụng để có hiệu lực",
+  "otherUser": "bên kia",
+  "selectMsgDeleteTime": "Chọn thời gian lưu trữ",
+  "selectMsgDeleteTimeTip":
+      "Lịch sử trò chuyện sẽ tự động xóa sau khi vượt quá thời hạn lưu trữ. Tiếp tục?",
+  "msgSaveTime": "Thời gian lưu trữ lịch sử trò chuyện",
+  "msgSaveTimeDesc":
+      "Tự động xóa các bản ghi trò chuyện vượt quá thời gian giới hạn",
+  "hasTimeDeleteMsgPermission": "Cấu hình thời gian lưu trữ tin nhắn nhóm",
+  "accountAbnormal": "Tài khoản bất thường, mời thất bại!",
+  "onlyBrowser": "Chỉ hỗ trợ xem trên trình duyệt",
+  "cancelSendSuccess": "Đã hủy gửi thành công",
+  "allStr1": "Toàn cầu",
+  "modelStr1": "Chế độ ngày đêm",
+  "atMaxCountTip": "@ tối đa {p} người",
+
+  "transmitTo": "Chuyển tới",
+  "moreActions": "Thêm hành động",
+  "refreshing": "Làm mới",
+  "openInBrowser": "Mở trong trình duyệt",
+  "coverFlow": "Dòng bìa",
+
+  "checkNet": "Kiểm tra mạng",
+  "autoChangeServer": "Chuyển đổi máy chủ tự động",
+  "serverLine": "Dòng máy chủ",
+  "timeOut": "Hết thời gian",
+  "serverLineChange": "Thay đổi dòng máy chủ",
+  "netCheck": "Chẩn đoán mạng",
+  "netDelayCheck": "Đo độ trễ mạng",
+  "netDelay1Check": "Độ trễ Internet",
+  "msgDelay1Check": "Độ trễ tin nhắn",
+  "imgDelay1Check": "Độ trễ hình ảnh",
+  "netLine": "Dòng mạng",
+  "reCheck": "Kiểm tra lại",
+  "netChecking": "Đang kiểm tra mạng",
+  "locationAddr": "Địa chỉ",
+  "selectPerfectLineTip": "Đã chọn dòng mạng tốt nhất cho bạn",
+  "selectPerfectLineTip2": "Đang ở dòng mạng tốt nhất, không cần chuyển đổi",
+  "selectPerfectLineTipNoNet":
+      "Không nhận diện được dòng mạng tốt nhất, vui lòng kiểm tra lại mạng và thử lại",
+  "changing": "Đang thay đổi",
+  "changeSuccess": "Thay đổi thành công",
+  "autoChanging": "Đang chuyển đổi tự động, vui lòng thử lại sau",
+  "waitAnswer": "Đang chờ trả lời",
+  "callFinish": "Cuộc gọi kết thúc",
+  "fileSizeConnotZero": "Kích thước tệp không thể là 0",
+  "confirmLogin": "Xác nhận đăng nhập",
+  "toolboxAudioCall": "Cuộc gọi âm thanh",
+  "requestTimeOut": "Yêu cầu đã hết thời gian, vui lòng thử lại sau",
+  "error_6115": "Mã QR đã hết hạn",
+  "groupNotFound": "Không tìm thấy nhóm chat này",
+  "userNotFound": "Không tìm thấy người dùng này",
+  "microphoneOpen": "Đã mở microphone",
+  "speakerOpen": "Đã mở loa",
+  "voiceWithYou": "Mời bạn tham gia cuộc gọi âm thanh",
+  "callInterceptor": "Cuộc gọi bị gián đoạn",
+  "startCallError": "Lỗi khi bắt đầu cuộc gọi",
+  "callHungUp": "Cuộc gọi đã bị cắt",
+  "callRemoteHungUp": "Đối phương đã cắt máy",
+  "callReceiverError": "Lỗi khi nhận cuộc gọi",
+  "starting": "Đang khởi động",
+  "startTimeOut": "Khởi động cuộc gọi âm thanh đã hết thời gian",
+  "callWaitReceiver": "Đang chờ đối phương nhận máy",
+  "callRemoteNotAccept": "Đối phương không nhận máy",
+  "callStartSendError": "Không thể bắt đầu cuộc gọi âm thanh",
+  "notAccept": "Không nhận máy",
+  "callAccepting": "Đang nhận máy",
+  "call": "Cuộc gọi",
+  "callDoing": "Đường truyền bận, đã hủy",
+  "netBad": "Môi trường mạng hiện tại không tốt",
+  "netDown": "Mạng đã ngừng hoạt động",
+  "onCalling": "Đang gọi điện thoại",
+  "error_1303": "Bạn chưa là bạn của người kia",
+  "remoteAccountError": "Tài khoản của đối phương có vấn đề",
+  "userOnlineStatus": "Trạng thái trực tuyến",
+  "error_100008": "Người dùng này không đáp ứng được điều kiện để trở thành quản trị viên",
+  "callTimeLimit": "Mỗi lần gọi có thời gian tối đa {p} phút",
+  "notLoginOnline": "Chưa đăng nhập bao giờ",
+  "callRemoteDoing": "Đang bận",
+  "exitLoginIng": "Đang đăng xuất",
+  "usePhoneRecovery": "Sử dụng số điện thoại để khôi phục",
+  "useEmailRecovery": "Sử dụng email để khôi phục",
+  "otherRecoveryMethods": "Các phương pháp khôi phục khác",
+  "emailAddress": "Địa chỉ email",
+  "phoneErrorOrNotExist": "Số điện thoại không đúng hoặc không tồn tại",
+  "phoneNotExist": "Số điện thoại không tồn tại",
+  "verificationCodeFailure": "Lấy mã xác minh thất bại, vui lòng thử lại",
+  verificationCodeSent: "Mã xác nhận đã được gửi",
+  hiWelcomeLogin: "Chào~ Chào mừng bạn đến với đăng nhập",
+  otherLoginMethods: "Các phương thức đăng nhập khác",
+  usernamePhoneEmail: "Tên người dùng/Số điện thoại/Email",
+  "error_1303": "Bạn chưa là bạn của người kia",
+  "remoteAccountError": "Tài khoản của đối phương có vấn đề",
+  "userOnlineStatus": "Trạng thái trực tuyến",
+  "error_100008":
+      "Người dùng này không đáp ứng được điều kiện để trở thành quản trị viên",
+  "callTimeLimit": "Mỗi lần gọi có thời gian tối đa %s phút",
+  "notLoginOnline": "Chưa đăng nhập bao giờ",
+  "callRemoteDoing": "Đang bận",
+  "exitLoginIng": "Đang đăng xuất",
+
+  "searchAreaCode": "Tìm kiếm quốc gia/khu vực",
+  "otherFindStyle": "Các phương thức khôi phục khác",
+  "welcome": "Chào mừng đăng nhập",
+
+  "fileReadError": "Lỗi đọc tệp",
+  "docPreviewError": "Không thể xem trước tài liệu",
+  "docPreviewUseOther":
+      "Nếu vì lý do mạng hoặc thiết bị không tương thích mà tài liệu không thể xem trước, bạn có thể sử dụng",
+  "netTimeOut": "Hết thời gian kết nối mạng",
+
+
+  "docReadError": "Không thể đọc tệp, vui lòng kiểm tra xem định dạng tệp có đúng không",
+  "errorDetail": "Chi tiết lỗi",
+  ip: "IP",
+  imageLoadingRoute: "Tuyến tải ảnh",
+  networkChecking: "Đang kiểm tra mạng...",
+  noPermission: "Không có quyền, vui lòng đăng nhập sau khi có quyền",
+  pageNotFound: "Không tìm thấy trang",
+  serverError: "Lỗi máy chủ",
+  databaseError: "Lỗi truy vấn cơ sở dữ liệu",
+  networkError: "Lỗi kết nối mạng"
+};
diff --git a/src/lang/zh-cn.js b/src/lang/zh-cn.js
new file mode 100644
index 0000000..6dbf318
--- /dev/null
+++ b/src/lang/zh-cn.js
@@ -0,0 +1,1766 @@
+export default {
+  checkTopMessage:'查看置顶消息',
+  welcome: "欢迎使用OpenIM",
+  phoneNumber: "手机号",
+  plsEnterPhoneNumber: "请输入您的手机号",
+  password: "密码",
+  plsEnterPassword: "请输入您的密码",
+  account: "账号",
+  plsEnterAccount: "请输入您的账号",
+  forgetPassword: "忘记密码",
+  createAccount: "创建账号",
+  verificationCodeLogin: "验证码登录",
+  login: "登录",
+  noAccountYet: "没有账号？",
+  loginNow: "立即登录",
+  registerNow: "立即注册",
+  lockPwdErrorHint: "错误%s次",
+  newUserRegister: "新用户注册",
+  verificationCode: "验证码",
+  verificationSuccessful: "验证成功",
+  sendVerificationCode: "发送验证码",
+  verification_code1: "请输入验证码",
+  correct_email_address: "请输入正确的邮箱地址",
+  Resend: "重新发送",
+  bind_email: "绑定邮箱",
+  email_verification: "邮箱验证",
+  login_details: "登录详情",
+  verification_code: "请输入邮箱验证码",
+  email_verification_code: "邮箱验证码",
+  currently_bound_email: "当前绑定邮箱:",
+  text_email: "如您的邮箱已不用，请及时更换",
+  remove_this_device: "确定要移除该设备吗？",
+  remove_this_device1:
+    "确定要移除该设备吗？移除后重新使用该设备，登录需重新验证",
+  go_to_settings: "去设置",
+  go_to_binding: "去绑定",
+  date_of_birth: "出生日期",
+  confidential: "保密",
+  year: "岁",
+  not_perfection: "未完善",
+  old_password: "旧密码",
+  myCreatedGroup: "我创建的群聊",
+  myManageGroup: "我管理的群聊",
+  myJoinGroup: "我加入的群聊",
+  please_enter_old_password: "请输入旧密码",
+  trusted_device: "可信设备",
+  change_email_address: "换绑邮箱",
+  current_device: "当前设备",
+  remove_device: "移除设备",
+  current_device_records: "以下是您该设备的全部登录记录",
+  text_device: "登录设备管理",
+  verification_time: "验证时间:",
+  text_device1: "以下是您的全部登录设备，点击进入详情，查看该设备的登录记录",
+  change_the_binding: "换绑",
+  resendVerificationCode: "重发验证码",
+  verificationCodeTimingReminder: "%sS后重新获取验证码",
+  defaultVerificationCode: "（默认验证码：%s)",
+  plsEnterVerificationCode: "请输入您的验证码",
+  invitationCode: "邀请码",
+  device_list: "设备列表",
+  plsEnterInvitationCode: "请输入您的邀请码%s",
+  optional: "选填",
+  nextStep: "下一步",
+  plsEnterRightPhone: "请输入正确的手机号",
+  enterVerificationCode: "输入手机验证码",
+  setPassword: "设置密码",
+  plsConfirmPasswordAgain: "请再次确认您的密码",
+  text_password2: "请再次确认登录密码",
+  please_enter_new_password_again: "请再次输入新密码",
+  confirmPassword: "确认密码",
+  wrongPasswordFormat: "密码格式错误",
+  plsCompleteInfo: "请完善个人信息",
+  plsEnterYourNickname: "请输入您的昵称",
+  pleaseEnterYourUsername: "请输入您的用户名",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "输入您的用户名以帮助我们识别您的账号",
+  text_1: "该账户未绑定邮箱，暂不支持找回密码",
+  setInfo: "设置信息",
+  loginPwdFormat: "6-20位数字+字母",
+  passwordLogin: "密码登录",
+  contacts: "通讯录",
+  workbench: "工作台",
+  mine: "我的",
+  me: "我",
+  draftText: "草稿",
+  everyone: "所有人",
+  you: "你",
+  groupAc: "群公告",
+  createGroupNtf: "%s 已创建群聊 ",
+  editGroupInfoNtf: "%s 修改了群资料",
+  quitGroupNtf: "%s 退出了群聊",
+  invitedJoinGroupNtf: "%s 邀请 %s 加入群聊",
+  kickedGroupNtf: "%s 被 %s 移出群聊",
+  joinGroupNtf: "%s 加入群聊",
+  dismissGroupNtf: "%s 解散了群聊",
+  transferredGroupNtf: "%s 将群管理权限转让给了 %s",
+  muteMemberNtf: "%s 被 %s 禁言%s",
+  muteCancelMemberNtf: "%s 被 %s 取消了禁言",
+  muteGroupNtf: "%s 开起了群禁言",
+  muteCancelGroupNtf: "%s 关闭了群禁言",
+  friendAddedNtf: "你们已成为好友，可以开始聊天了",
+  openPrivateChatNtf: "已开启阅后即焚",
+  closePrivateChatNtf: "已关闭阅后即焚",
+  memberInfoChangedNtf: "%s 编辑了自己的群成员资料",
+  unsupportedMessage: "暂不支持的消息类型",
+  picture: "图片",
+  video: "视频",
+  voice: "语音",
+  safety: "安全",
+  location: "位置",
+  file: "文件",
+  carte: "名片",
+  emoji: "自定义表情",
+  chatRecord: "聊天记录",
+  revokeMsg: "撤回了一条消息",
+  aRevokeBMsg: "%s 撤回了 %s 的消息",
+  blockedByFriendHint: "消息已发出，但被对方拒收了",
+  sendFriendVerification: "验证添加",
+  removedFromGroupHint: "你已被移出群聊",
+  groupDisbanded: "群已经解散",
+  createdGroup: "您还没有创建分组",
+  search: "搜索",
+  newGroups: "新建分组",
+  groupNames: "请输入分组名称",
+  synchronizing: "同步中",
+  syncFailed: "同步失败",
+  connecting: "连接中",
+  connectionFailed: "连接失败",
+  top: "置顶",
+  cancelTop: "取消置顶",
+  markHasRead: "标记已读",
+  delete: "删除",
+  nPieces: "%s条",
+  online: "在线",
+  offline: "离线",
+  phoneOnline: "手机",
+  pcOnline: "电脑",
+  webOnline: "Web",
+  webMiniOnline: "小程序",
+  upgradeFind: "发现新版本",
+  upgradeVersion: "检测到一个新的可用版本%s，你当前版本是%s",
+  upgradeDescription: "更新说明：",
+  upgradeIgnore: "忽略",
+  upgradeLater: "稍后更新",
+  upgradeNow: "立即更新",
+  upgradeNever: "暂不更新",
+  inviteYouCall: "%s邀请你进行%s",
+  rejectCall: "拒绝",
+  acceptCall: "同意",
+  callVoice: "语音通话",
+  callVideo: "视频通话",
+  sentSuccessfully: "发送成功",
+  copySuccessfully: "复制成功",
+  binding_successful: "绑定成功",
+  day: "天",
+  hour: "时",
+  hours: "小时",
+  minute: "分钟",
+  seconds: "秒",
+  cancel: "取消",
+  determine: "确定",
+  failed_to_load: "加载失败",
+  failed_to_load1: "加载失败，请稍后再试",
+  removal_failed: "移除失败",
+  toolboxAlbum: "相册",
+  toolboxCall: "视频通话",
+  toolboxCamera: "拍摄",
+  toolboxCard: "名片",
+  toolboxFile: "文件",
+  toolboxLocation: "位置",
+  send: "发送",
+  holdTalk: "按住 说话",
+  releaseToSend: "松开 发送",
+  releaseToSendSwipeUpToCancel: "松开发送，上滑取消",
+  liftFingerToCancelSend: "松开手指，取消发送",
+  callDuration: "通话时长 %s",
+  cancelled: "已取消",
+  cancelledByCaller: "对方已取消",
+  rejectedByCaller: "对方已拒绝",
+  callTimeout: "超时无响应",
+  rejected: "已拒绝",
+  forwardMaxCountHint: "当前仅支持转发最多二十条消息~",
+  typing: "正在输入...",
+  addSuccessfully: "添加成功",
+  addFailed: "添加失败",
+  setSuccessfully: "设置成功",
+  callingBusy: "你已在通话中，不能进行此操作！",
+  groupCallHint: "当前群正在通话中，你确定加入当前通话吗？",
+  joinIn: "加入",
+  menuCopy: "复制",
+  menuDel: "删除",
+  menuForward: "转发",
+  menuReply: "回复",
+  menuMulti: "多选",
+  menuRevoke: "撤回",
+  menuAdd: "添加",
+  nMessage: "%s条新消息",
+  plsSelectLocation: "请选择一个位置",
+  groupAudioCallHint: "%s人正在语音通话",
+  groupVideoCallHint: "%s人正在视频通话",
+  reEdit: "重新编辑",
+  playSpeed: "播放速度",
+  download: "下载",
+  download1: "立即下载",
+  nicknames: "用户昵称",
+  downloadAPP: "下载APP",
+  private_chat: "球帝带",
+  googleMap: "谷歌地图",
+  check_for_updates: "检查更新",
+  appleMap: "Apple地图",
+  baiduMap: "百度地图",
+  amapMap: "高德地图",
+  signature: "个性签名",
+  please_enter_user_nickname: "请输入用户昵称",
+  set_characters: "请设置4-15个字符",
+  personalized_signature: "请输入个性签名 (字符限制6-50)",
+  tencentMap: "腾讯地图",
+  offlineMeetingMessage: "你收到了一条会议邀请消息",
+  offlineMessage: "你收到了一条新消息",
+  offlineCallMessage: "你收到了一条通话邀请消息",
+  logoutHint: "您确定要退出登录吗？",
+  myInfo: "我的信息",
+  workingCircle: "工作圈",
+  accountSetup: "账号设置",
+  aboutUs: "关于我们",
+  about: "关于",
+
+  appearance: "外观",
+  bubbleBgColor: "对话气泡颜色",
+  chatBackground: "聊天背景",
+  moreSettings: "更多设置",
+
+  highPerformanceModel: "高性能模式",
+  highPerformanceModelDesc: "开启则不显示外观效果",
+  skinPreview: "效果预览",
+  defaultText: "默认",
+  fontSizePreview: "预览字体大小，拖动下面的滑块，可调整字体大小。设置后，会改变所有页面文本的字体大小。",
+  changedText: "好的，已经更改",
+  imageAlpha: "图案透明度",
+  bgColor: "背景色",
+
+  logout: "退出登录",
+  qrcode: "二维码",
+  qrcodeHint: "扫一扫下面的二维码，添加我为好友",
+  favoriteFace: "收藏表情",
+  favoriteManage: "管理",
+  favoriteCount: "共%s个表情",
+  favoriteDel: "删除（%s）",
+  hasRead: "已读",
+  unread: "未读",
+  nPersonUnRead: "%s人未读",
+  allRead: "全部已读",
+  messageRecipientList: "消息接收人列表",
+  hasReadCount: "已读(%s)",
+  unreadCount: "未读(%s)",
+  newFriend: "新的朋友",
+  newFriendList: "好友申请列表",
+  newGroup: "新的群聊",
+  myFriend: "我的好友",
+  myGroup: "我的群聊",
+  addManager: "添加管理员",
+  add: "添加",
+  scan: "扫一扫",
+  scanHint: "扫描二维码名片",
+  addFriend: "添加好友",
+  addFriendHint: "通过ID号搜索添加",
+  createGroup: "创建群聊",
+  createGroupHint: "创建群聊，全面使用OpenIM",
+  addGroup: "添加群聊",
+  addGroupHint: "向管理员或群聊成员询问ID",
+  searchIDAddFriend: "搜索ID添加好友",
+  searchIDAddGroup: "搜索ID添加群聊",
+  searchIDIs: "ID：%s",
+  searchPhoneIs: "手机号：%s",
+  searchEmailIs: "邮箱：%s",
+  searchNicknameIs: "昵称：%s",
+  searchGroupNicknameIs: "群昵称：{name}",
+  noFoundUser: "无法找到该用户",
+  noFoundGroup: "无法找到该群聊",
+  joinGroupDate: "入群时间",
+  joinGroupMethod: "入群方式",
+  byInviteJoinGroup: "%s邀请进群",
+  byIDJoinGroup: "搜索群ID",
+  byQrcodeJoinGroup: "群二维码",
+  groupID: "群ID号",
+  setAsAdmin: "设为管理员",
+  setMute: "设置禁言",
+  organizationInfo: "组织信息",
+  organization: "组织",
+  department: "部门",
+  position: "职位",
+  personalInfo: "个人资料",
+  viewDynamics: "查看动态",
+  audioAndVideoCall: "音视频通话",
+  sendMessage: "发送消息",
+  avatar: "头像",
+  name: "姓名",
+  nickname: "昵称",
+  gender: "性别",
+  englishName: "英文名",
+  birthDay: "生日",
+  tel: "座机",
+  mobile: "手机号码",
+  email: "邮箱",
+  man: "男",
+  woman: "女",
+  friendSetup: "好友设置",
+  setupRemark: "设置备注",
+  recommendToFriend: "把他推荐给朋友",
+  addToBlacklist: "加入黑名单",
+  unfriend: "解除好友关系",
+  areYouSureDelFriend: "确定删除好友吗？",
+  areYouSureAddBlacklist: "确定将好友加入黑名单吗？",
+  remark: "备注",
+  save: "保存",
+  saveSuccessfully: "保存成功",
+  saveFailed: "保存失败",
+  groupVerification: "群聊验证",
+  friendVerification: "好友验证",
+  email_address: "请输入您的邮箱",
+  sendEnterGroupApplication: "发送入群申请",
+  sendToBeFriendApplication: "发送好友申请",
+  sendSuccessfully: "发送成功",
+  reset_successful: "重置成功",
+  bind_new_email: "绑定新邮箱",
+  Login_failed: "登录失败",
+  successful_home: "注册成功",
+  sendFailed: "发送失败",
+  canNotAddFriends: "该用户已设置不可添加！",
+  mutedAll: "全体禁言",
+  tenMinutes: "10分钟",
+  oneHour: "1小时",
+  twelveHours: "12小时",
+  oneDay: "1天",
+  custom: "自定义",
+  unmute: "取消禁言",
+  youMuted: "你已被禁言",
+  groupMuted: "已开启群禁言",
+  notDisturbMode: "勿扰模式",
+  allowRing: "新消息提示音",
+  allowVibrate: "新消息震动",
+  forbidAddMeToFriend: "禁止加我为好友",
+  blacklist: "通讯录黑名单",
+  unlockSettings: "解锁设置",
+  changePassword: "修改密码",
+  clearChatHistory: "清空聊天记录",
+  confirmClearChatHistory: "确认清空所有聊天记录吗？",
+  languageSetup: "语言设置",
+  language: "语言",
+  english: "英文",
+  setting_up: "设置中...",
+  chinese: "简体中文",
+  traditional_chinese: "繁体中文",
+  followSystem: "跟随系统",
+  blacklistEmpty: "暂无黑名单",
+  remove: "移除",
+  removeFriend: "移除好友",
+  fingerprint: "指纹",
+  gesture: "手势",
+  biometrics: "生物识别",
+  plsEnterPwd: "请输入密码",
+  plsEnterOldPwd: "请输入原始密码",
+  plsEnterNewPwd: "请输入新密码",
+  plsConfirmNewPwd: "请确认新密码",
+  reset: "重置",
+  oldPwd: "原密码",
+  newPwd: "新密码",
+  confirmNewPwd: "确认新密码：",
+  plsEnterConfirmPwd: "请输入确认密码",
+  twicePwdNoSame: "两次输入的密码不一致",
+  twicePwd: "新密码不一致，请重新设置",
+  changedSuccessfully: "修改成功",
+  deleteSuccessfully: "删除成功",
+  checkNewVersion: "检查新版本",
+  noAddGround: "还没有添加好友到分组",
+  chatContent: "聊天内容",
+  topContacts: "置顶联系人",
+  messageNotDisturb: "消息免打扰",
+  messageNotDisturbHint: "接收消息但不提醒",
+  burnAfterReading: "阅后即焚",
+  timeSet: "时间设置",
+  setChatBackground: "设置聊天背景",
+  fontFace: "字体",
+  fontSize: "字体大小",
+  little: "小",
+  standard: "标准",
+  big: "大",
+  thirtySeconds: "30秒",
+  fiveMinutes: "5分钟",
+  clearAll: "清空",
+  clearSuccessfully: "清除成功",
+  groupChatSetup: "群聊设置",
+  viewAllGroupMembers: "查看全部群成员(%s)",
+  groupManage: "群管理",
+  myGroupMemberNickname: "我在本群的名称",
+  topChat: "聊天置顶",
+  muteAllMember: "全员禁言",
+  exitGroup: "退出群聊",
+  dismissGroup: "解散群聊",
+  dismissGroupHint: "所有群成员将退出此群，无法收发消息",
+  quitGroupHint: "退出群聊后将不再接收此群聊信息。",
+  joinGroupSet: "进群验证",
+  allowAnyoneJoinGroup: "允许任何人加群",
+  inviteNotVerification: "群成员邀请无需验证",
+  needVerification: "需要发送验证信息",
+  addMember: "添加",
+  delMember: "移除",
+  groupOwner: "群主",
+  groupAdmin: "管理员",
+  notAllowSeeMemberProfile: "不允许查看其他群成员资料",
+  notAllAddMemberToBeFriend: "不允许添加群成员为好友",
+  transferGroupOwnerRight: "群主管理权转让",
+  groupName: "群名称",
+  groupAcPermissionTips: "只有群主及管理员可以编辑",
+  plsEnterGroupAc: "请输入群公告",
+  edit: "编辑",
+  publish: "发布",
+  groupMember: "群聊成员",
+  selectedPeopleCount: "已选择（%s）",
+  confirmSelectedPeople: "确定(%s/%s)",
+  confirm: "确认",
+  log_in_time: "登录时间:",
+  log_in_time1: "登录时间",
+  login_IP: "登录IP:",
+  confirmTransferGroupToUser: "确定将群主转让给：%s？",
+  removeGroupMember: "移除群成员",
+  searchNotResult: "搜索无结果",
+  groupQrcode: "群二维码",
+  groupQrcodeHint: "扫一扫下面的二维码，立即加入群聊",
+  approved: "已同意",
+  accept: "接受",
+  reject: "拒绝",
+  friendGrouping: "好友分组",
+  waitingForVerification: "等待对方验证",
+  rejectSuccessfully: "拒绝成功",
+  rejectFailed: "拒绝失败",
+  applyJoin: "申请加入",
+  enterGroup: "进入群聊",
+  applyReason: "申请理由：%s",
+  invite: "邀请",
+  sourceFrom: "来源：%s",
+  byMemberInvite: "邀请",
+  bySearch: "通过搜索",
+  byScanQrcode: "扫描二维码",
+  iCreatedGroup: "我创建的",
+  iJoinedGroup: "我加入的",
+  nPerson: "{count}人",
+  searchNotFound: "未搜索到相关结果",
+  searchNotFoundMember: "没有找到相关用户",
+  organizationStructure: "组织架构",
+  recentConversations: "最近会话",
+  selectAll: "全选",
+  plsEnterGroupNameHint: "取个群名称方便后续搜索",
+  completeCreation: "完成创建",
+  sendCarteConfirmHint: "确定发送该联系人到本聊天吗？",
+  sentSeparatelyTo: "分别发送给：",
+  sentTo: "发送给：",
+  leaveMessage: "留言",
+  mergeForwardHint: "[合并转发]共%s条消息",
+  mergeForward: "合并转发",
+  quicklyFindChatHistory: "快速查找聊天记录",
+  notFoundChatHistory: '没有找到"%s"相关内容',
+  globalSearchAll: "综合",
+  globalSearchContacts: "联系人",
+  globalSearchGroup: "群组",
+  globalSearchChatHistory: "聊天记录",
+  globalSearchChatFile: "文件",
+  relatedChatHistory: "%s条相关的聊天记录",
+  seeMoreRelatedContacts: "查看更多相关联系人",
+  seeMoreRelatedGroup: "查看更多相关群组",
+  seeMoreRelatedChatHistory: "查看更多相关聊天记录",
+  seeMoreRelatedFile: "查看更多相关文档",
+  publishPicture: "发布图片",
+  publishVideo: "发布视频",
+  mentioned: "提到了：%s",
+  comment: "评论",
+  like: "赞",
+  reply: "回复",
+  rollUp: "收起",
+  fullText: "全文",
+  selectAssetsFromCamera: "拍摄",
+  selectAssetsFromAlbum: "从相册选择",
+  whoCanWatch: "谁可以看",
+  remindWhoToWatch: "提醒谁看",
+  public: "公开",
+  everyoneCanSee: "所有人可见",
+  partiallyVisible: "部分可见",
+  visibleToTheSelected: "选中的人可见",
+  partiallyInvisible: "不给谁看",
+  invisibleToTheSelected: "选中的人不可见",
+  private: "私密",
+  onlyVisibleToMe: "仅自己可见",
+  selectVideoLimit: "时长不能超过15秒",
+  selectContactsLimit: "至少选择一个联系人",
+  message: "消息",
+  commentedYou: "评论了你：%s",
+  likedYou: "为你点了赞",
+  mentionedYou: "提到了你",
+  replied: "回复了",
+  detail: "详情",
+  totalNPicture: "共%s张",
+  noDynamic: "暂无动态",
+  callRecords: "通话记录",
+  allCall: "所有通话",
+  missedCall: "未接来电",
+  incomingCall: "呼入",
+  outgoingCall: "呼出",
+  microphone: "麦克风",
+  speaker: "扬声器",
+  hangUp: "挂断",
+  pickUp: "接听",
+  waitingCallHint: "正在呼叫中…",
+  waitingVoiceCallHint: "正在等待对方接听…",
+  invitedVoiceCallHint: "邀请你进行语音通话…",
+  waitingVideoCallHint: "正在等待对方接受邀请",
+  invitedVideoCallHint: "邀请你进行视频通话…",
+  waitingToAnswer: "等待接听",
+  invitedYouToCall: "邀请你通话",
+  calling: "通话中",
+  nPeopleCalling: "%s人正在通话中",
+  whoInvitedVoiceCallHint: "%s邀请你进行语音通话",
+  whoInvitedVideoCallHint: "%s邀请你进行视频通话",
+  plsInputMeetingSubject: "请输入会议主题",
+  meetingStartTime: "开始时间",
+  meetingDuration: "会议时长",
+  enterMeeting: "进入会议",
+  meetingNo: "会议号",
+  yourMeetingName: "您的名称",
+  plsInputMeetingNo: "请输入会议号",
+  plsInputYouMeetingName: "请输入您的名称",
+  meetingSubjectIs: "会议主题：%s",
+  meetingStartTimeIs: "开始时间：%s",
+  meetingDurationIs: "会议时长：%s",
+  meetingHostIs: "主持人：%s",
+  meetingNoIs: "会议号：%s",
+  meetingMessageClickHint: "点击此消息可直接加入会议",
+  meetingMessage: "会议消息",
+  openMeeting: "未结束会议",
+  didNotStart: "未开始",
+  started: "已开始",
+  meetingInitiatorIs: "%s发起的视频会议",
+  meetingDetail: "会议详情",
+  meetingOrganizerIs: "发起人：%s",
+  updateMeetingInfo: "修改会议信息",
+  cancelMeeting: "取消会议",
+  videoMeeting: "视频会议",
+  joinMeeting: "加入会议",
+  bookAMeeting: "预约会议",
+  quickMeeting: "快速会议",
+  confirmTheChanges: "确认修改",
+  invitesYouToVideoConference: "%s邀请你加入视频会议",
+  over: "结束",
+  meetingMute: "静音",
+  meetingUnmute: "取消静音",
+  meetingCloseVideo: "关闭视频",
+  meetingOpenVideo: "开启视频",
+  meetingEndSharing: "结束共享",
+  meetingShareScreen: "共享屏幕",
+  meetingMembers: "成员(%s)",
+  settings: "设置",
+  leaveMeeting: "离开会议",
+  endMeeting: "结束会议",
+  leaveMeetingConfirmHint: "确定离开会议吗？",
+  endMeetingConfirmHit: "确定结束会议吗？",
+  meetingSettings: "会议设置",
+  allowMembersOpenMic: "允许成员自我解除静音",
+  allowMembersOpenVideo: "允许成员开启视频",
+  onlyHostShareScreen: "仅主持人可以共享屏幕",
+  onlyHostInviteMember: "仅主持人可邀请会议成员",
+  defaultMuteMembers: "成员入会禁音",
+  pinThisMember: "置顶该成员",
+  unpinThisMember: "取消置顶",
+  allSeeHim: "全部看他",
+  cancelAllSeeHim: "取消看他",
+  muteAll: "全员静音",
+  unmuteAll: "解除全员静音",
+  members: "成员",
+  screenShare: "屏幕共享",
+  screenShareHint: "正在共享屏幕.",
+  meetingClosedHint: "会议已关闭或已断开链接，确定离开吗？",
+  meetingIsOver: "会议已经结束！",
+  networkError: "网络异常请稍后再试！",
+  shareSuccessfully: "分享成功！",
+  notFoundMinP: "暂未发布小程序",
+  notSendMessageNotInGroup: "无法在已退出的群聊中发送消息",
+  whoModifyGroupName: "{name} 把群聊名称已更改为 ",
+  accountWarn: "警告!",
+  accountException: "你的账号已在其他设备登录，请及时修改密码。",
+  tagGroup: "标签",
+  issueNotice: "通知下发",
+  createTagGroup: "创建标签",
+  plsEnterTagGroupName: "请输入标签名",
+  tagGroupMember: "标签成员",
+  completeEdit: "完成编辑",
+  finish: "完成",
+  emptyTagGroup: "暂无标签分组",
+  confirmDelTagGroupHint: "确认移除该标签分组吗？",
+  editTagGroup: " 编辑标签",
+  newBuild: " 新建",
+  receiveMember: " 接收成员",
+  emptyNotification: "暂无通知",
+  notificationReceiver: "%s个接收者：%s",
+  sendAnother: "再发一条",
+  confirmDelTagNotificationHint: "确认移除该通知记录吗？",
+  contentNotBlank: "内容不能为空",
+  plsEnterDescription: "请输入描述文字",
+  gifNotSupported: "不支持gif图片",
+  register: "注册",
+  hk: "繁体",
+  RegisterSuccess: "注册成功",
+  LoginSuccess: "登录成功",
+  init_validate_1: "用户名由6-15位字母及数字组成",
+  init_validate_10: "手机号或密码不正确，请重新输入",
+
+  init_validate_5: "密码必须由6-15位字母及数字组成，请重新设置密码",
+  init_validate_2: "两次密码不一致，请重新设置",
+  init_validate_3: "密码必须由6-15为字母及数字组成 请重新设置密码",
+  init_validate_6: "密码必须由6-15为字母及数字组成",
+  init_validate_4: "注册成功，即将返回登录页",
+  init_hint_1: "6-15位数字或英文",
+  init_hint_2: "确认登录密码",
+  init_hint_3: "登录密码",
+  username: "用户名",
+  to_modify: "去修改",
+  confirm_password: "确认密码",
+  notification_settings: "通知设置",
+  init_text_1: "登录注册即同意",
+  init_text_2: " 《用户服务协议》 ",
+  init_text_3: " 和 ",
+  init_text_4: " 《隐私政策》 ",
+  init_text_5: "服务协议及隐私政策",
+  init_text_6: "为了保护您得合法权益，请您阅读并同意以下协议",
+  refuse: "拒绝",
+  refuse_continue: "同意并继续",
+  forget_password: "忘记密码",
+  register_user: "注册账号",
+  gotoLogin: "登录",
+  gotoRegister: "创建一个新账号",
+  enterGroupCheck: "进群申请",
+  openPhotoError_1: "未读取到选择的文件",
+  openPhotoError_2: "文件上传失败",
+  openPhotoError_3: "未读取到文件信息",
+  agreeAll: "全部同意",
+  whatCanManagerDo: "群管理权限",
+  changeGroupName: "修改群名称",
+  deleteMemberMessage: "删除群员消息",
+  chatPrivate: "与群员加密私聊",
+  memberMute: "群员禁言",
+  deleteMember: "移除成员",
+  changeNotice: "发布/修改/删除群公告",
+  checkInGroup: "进群审核",
+  setAdmin: "设置管理员",
+  deleteAdmin: "移除管理员",
+  deleteAdminTitle: "确定要移除该管理员？",
+  deleteAdminDetail: "将此成员移除管理员，无法管理群消息",
+  deleteSuccess: "移除成功",
+  mobile_web_page: "访问手机网页",
+  deleteMemberTitle: "确定要移除该成员？",
+  deleteMemberDetail: "将此成员移出此群，无法收发消息",
+  deleteSelf: "不能移除自己",
+  handled: "已处理",
+  unhandle: "待处理",
+  noCheck: "暂无申请处理～",
+  success: "操作成功",
+  nameLenth: "请设置1-15个字符",
+  editNickname: "编辑群昵称",
+  text_password: "请设置新的登录密码",
+  quit: "退出",
+  waitAMoment: "我在看看",
+  editWarningTitle: "确定退出编辑群昵称吗？",
+  editWarningDetail: "您修改的群昵称还未保存，是否继续退出？",
+  editGroupAvatar: "编辑本群头像",
+  myGroupAvatar: "我的本群头像",
+  inviteLink: "邀请链接",
+  inviteTips: "任何已安装此APP的用户都将可以通过此链接加入您的群聊",
+  inviteLinkCopy: "邀请链接已复制",
+  shareLink: "分享链接",
+  manageLink: "管理邀请链接",
+  copyLink: "复制链接",
+  deleteLink: "删除链接",
+  deleteLinkTipsTitle: "确定要撤销该链接吗？",
+  deleteLinkTipsDetail:
+    "您确定要撤销此邀请链接吗？一旦撤销，其他人将不能通过此链接加入本群组。",
+  linkManage: "链接管理",
+  openManage: "开启后需群主或管理员确认才能进群",
+  timeValid: "有效时间限制",
+  linkInvalidTips: "邀请链接将再此日期后失效，无法继续访问",
+  valid: "内有效",
+  dayValid: "天内有效",
+  forever: "永久",
+  foreverValid: "永久有效",
+  attendTips: "加入请求已发送，管理员审核您的申请后，您就可以加入群组",
+  memberCountLimit: "此群聊人数已达上线",
+  linkIsOut: "邀请链接已过期",
+  requestAttend: "请求加入群聊",
+  needCheck: "此群聊仅在管理员审核后才能加入",
+  countLimit: "管理员人数已达上限",
+  openLock: "离开APP后，超时需要使用解锁方案",
+  closeLock: "启动app时无需验证",
+  checkTips: "请检查您的人脸或指纹权限是否开启~",
+  face: "面容解锁",
+  finger: "指纹解锁",
+  gestureLock: "手势密码解锁",
+  closed: "未开启",
+  opened: "已开启",
+  lanchProtect: "启动时保护",
+  noProtect: "无需保护",
+  lockSetting: "解锁设置",
+  drawLine: "绘制解锁图案",
+  drawOldLine: "绘制您的旧手势密码",
+  drawNewLine: "绘制您的新手势密码",
+  setGesturePassword: "设置手势密码",
+  checkGesturePassword: "验证手势密码",
+  needJoinPoint: "至少连接4个点，请重新绘制",
+  noFriendAdd: "沒有可添加好友",
+  noFriendDelete: "没有可移除好友",
+  noVerify: "添加我为好友时需要验证",
+  drawAgain: "请再次绘制",
+  checkSuccessful: "验证通过",
+  notInCommon: "与上次绘制不一致，请重新绘制",
+  changeGesturePassword: "修改手势密码",
+  toChange: "去修改",
+  change: "修改",
+  openSuccess: "启用成功",
+  closeSuccess: "关闭成功",
+  hasBeenMember: "已是群成员，不用再次加入",
+  joinGroup: "加入群聊",
+  checking: "管理员审核中",
+  noUnlock: "无法解锁？",
+  inputGesture: "请输入手势解锁",
+  faceDetect: "请进行人脸识别",
+  fingerDetect: "请进行指纹识别",
+  tryUnlocking: "请尝试：无法解锁？",
+  countRemain: "手势错误，您还可以输入 %s 次",
+  reLoginUnlock: "重新登录解锁",
+  selectVerityType: "请选择验证方式      ",
+  currentTypeNotSupport: "当前类型不支持",
+  //-------------
+  updateNewVersion: "发现新版本",
+  updateOkUpdate: "立即升级",
+  updateOpenDownloadFailed: "打开下载失败",
+  updateCurrentIsNew: "当前已是最新版本",
+  newVersionNotFound: "未找到最新版链接，您可以访问网页去下载",
+  openUrlFailed: "无效的链接",
+  qmvMsgNotExit: "[引用内容不存在]",
+  qmvMsgNotSupport: "[引用内容不支持展示]",
+  dataError: "数据解析错误",
+  userNotBindEmail: "用户未绑定邮箱",
+  userNotRegister: "用户未注册",
+  checkError: "检查失败",
+
+  csvTitle: "聊天设置",
+  csvSetTopMsg: "置顶聊天",
+  csvSetOptMsg: "消息免打扰",
+  csvSetDisableMsg: "屏蔽消息",
+  csvClearMsg: "清空聊天记录",
+  csvClearLocal: "仅清空本地聊天记录",
+  csvClearUser: "清空本地和%s的聊天记录",
+  csvSetErrorTip: "设置失败，请检查网络",
+
+  gmiTitle: "群昵称：",
+  gmiSetTalk: "加密私聊",
+  gmiSetMute: "设置群内禁言",
+  gmiDeleteUser: "移出本群",
+  gmiMuteTo: "禁言至 ",
+  gmiError1: "未找到此成员信息，可能被移出了群聊",
+  gmiError2: "未找到您的群成员信息，您可能被移出了群聊",
+  gmiError3: "确定要移除该用户？",
+  gmiError4: "将此成员移出此群，无法收发消息",
+  gmiError5: "您没有权限删除此管理员",
+  gmiError6: "您没有权限删除此成员",
+  gmiError7: "已解除禁言",
+  gmiError8: "您没有权限取消禁言此管理员",
+  gmiError9: "您没有权限取消禁言此成员",
+  gmiError10: "您没有权限禁言此管理员",
+  gmiError11: "您没有权限禁言此成员",
+  gmiError12: "解除禁言",
+  gmiGroupOwnerNotFound: "群信息加载失败",
+
+  smmvTitle: "禁言时长",
+  smmvMuteTime: "选择禁言时长",
+  smmvMuteTime_10m: "10分钟",
+  smmvMuteTime_1hour: "1小时",
+  smmvMuteTime_12hour: "12小时",
+  smmvMuteTime_1day: "1天",
+  smmvMuteTime_30day: "30天",
+  smmvMuteTime_7day: "7天",
+
+  egnpTitle: "编辑群聊名称",
+  egnpSetGroupName: "请设置群名称",
+  egnpSetTextDesc: "请设置1-15个字符",
+  egnpSetTitleNoPermission: "您没有修改群聊名称权限",
+  egnpSetFailed: "修改失败，请稍后再试",
+
+  setGroupNameHint: "请设置群名称",
+
+  givTitle: "编辑群聊名称",
+  givGroupName: "群名称",
+  givGroupFace: "群头像",
+
+  gmsvTitle: "管理群",
+  gmsvSetManager: "设置管理员",
+  gmsvToSet: "去设置",
+  gmsvFindMsg: "查找聊天记录",
+  gmsvFindMsgDesc: "开启后入群成员将看到近期历史消息",
+  gmsvMute: "全员禁言",
+  gmsvMuteDesc: "开启后只允许群主和管理员发言",
+  gmsvApply: "进群确认",
+  gmsvApplyDesc: "开启后需群主或管理员确认才能进群",
+
+  gmsvSetManagerTip: "只有群主才能设置管理员",
+  gmsvSetMuteTipOn: "已全员禁言",
+  gmsvSetNuteTipOff: "全员禁言已解除",
+  gmsvApplyTipOn: "进群确认已开启",
+  gmsvApplyTipOff: "进群确认已关闭",
+  gmsvFindGroupErr: "获取群信息失败",
+  gmsvFindMsgOn: "查找聊天记录已开启",
+  gmsvFindMsgOff: "查找聊天记录已关闭",
+  gmsvSetFailed: "设置失败",
+
+  gsvTitle: "群详情",
+  gsvGroupId: "群ID",
+  gsvGroupMember: "群聊人员",
+  gsvGroupMemberValue: "共{num}人",
+  gsvGroupNotification: "群公告",
+  gsvMyName: "我的本群昵称",
+  gsvMyFace: "我的本群头像",
+  gsvGroupManager: "群管理",
+  gsvGroupApply: "进群确认",
+  gsvFindMsg: "查找聊天记录",
+  gsvSetTop: "置顶",
+  gsvSetOpt: "消息免打扰",
+  gsvDeleteMsg: "删除聊天记录",
+  gsvDeleteLocal: "仅清空本地聊天记录",
+  gsvDeleteAllMsg: "清空本地和所有成员的聊天记录",
+  gsvDeleteOtherMsg: '清空本地和对方的聊天记录',
+  gsvGroupDelete: "确定要解散该群聊？",
+  gsvOutGroup: "确定要退出该群聊？",
+  gsvNoNotification: "暂无公告",
+  gsvClearSuccess: "清除成功",
+  gsvClearFailed: "清除失败，请稍后再试",
+
+  cvAllPeople: "所有人",
+  cvVideo: "[视频]",
+  cvPicture: "[图片]",
+  cvFile: "[文件]",
+  cvVoice: "[语音]",
+  cvNotSupportMsg: "暂不支持的消息",
+  cvSendMsgErrorNoPermission: "由于对方的权限设置，你无法向TA发送消息",
+  cvSendMsgPnMute: "禁言中，无法发送消息",
+  cvCopyMsg: "已复制到剪切板",
+  cvCopyMsgNotSupport: "暂不支持的消息",
+  cvdeleteLocal: "从本地删除",
+  cvdeleteLocalAndServer: "从本地和服务器删除",
+  cvdeleteLocalAndServerUser: "从本地和{name}删除",
+  cvClearMsgTip: "清除了会话消息",
+
+  cvGroupCreateSuccess: "群聊创建成功",
+  cvGroupCreateSuccessTip1: "恭喜您建群成功，点击下方按钮邀请好友入群",
+  cvGroupCreateSuccessGo: "邀请好友入群",
+  cvGroupNotification: "群公告：",
+  sendMsg: "发送消息",
+  cvOnlineCount: "{count} 人在线",
+  cvUserCount: "共{count}人",
+  cvNotAtUser: "还没有群人员可以@哦,快去添加成员吧",
+  all: "全部",
+
+  clCloseConversation: "折叠置顶聊天",
+  clOpenConversation: "个置顶聊天",
+  clNoConversation: "近期无会话～",
+  clTitle: "对话",
+
+  clDelete: "此对话将删除",
+  clDeleteDesc: "删除此对话，将会删除本地聊天记录",
+  clDeleteSel: "您没有选择会话",
+  clDeleteSel1: "此对话将删除",
+  clDeleteSel2: "这些对话将删除",
+  clDeleteDesc2: "删除这些对话，将会删除本地聊天记录",
+
+  homeItem0: "对话",
+  homeItem1: "联系人",
+  homeItem2: "我的",
+  exitTip: "再次点击返回键退出",
+
+  mineSigEmpty: "这个用户很懒，暂无签名～",
+  uaProtocol: "用户服务协议",
+
+  savSearchTip: "快速搜索聊天内容",
+  savMedia: "图片/视频",
+  searchEmptyTip: "没有找到相关的聊天记录",
+  savSearchMsg: "条相关聊天记录",
+
+  savConversation: "对话",
+  savMsg: "聊天记录",
+  savConversationNotFound: "未找到对话",
+  savMsgNotFound: "未找到此信息",
+
+  samTitle: "媒体",
+  samTimeFormat: "yyyy年M月",
+  notSupportType: "不支持的类型",
+  media: "媒体",
+
+  openUrl: "打开链接",
+  lkAddGroupUrl: "加入群聊链接",
+  lkAddOtherUrl: "外部链接，可使用默认浏览器打开",
+  lkUnknowUrl: "未识别的链接",
+  openUrlFailed1: "打开链接失败",
+
+  yszcTitle: "隐私政策",
+  slsmTitle: "法律声明",
+
+  ctmRemove: "移除",
+  ctmOkRemove: "确定移除",
+  ctmTopMsgCount: "共{count}条",
+  ctmEmptyText: "没有置顶消息",
+  recordTimeShort: "录音时间太短",
+
+  sendCodeExceErr: "发送验证码失败，请稍后再试",
+  bindEmailExecErr: "绑定邮箱失败，请稍后再试",
+
+  ctmSuccess: "置顶成功",
+  ctmRemoveSuccess: "移除置顶消息成功",
+  ctmMsgNotFound: "此消息不存在",
+
+  cvFirstTip: "此对话中的信息和通话已经进行端对端加密",
+
+  clearGroupNotification: "清除了群公告",
+  publicGroupNotification: " 发布公告",
+  dialog_tip1: "温馨提示",
+  deleteGroups: " 分组删除后将不可恢复，是否确认删除该分组？",
+  dialog_tip_token_invaild: " 登录已过期，请重新登录",
+
+  notify_new_msg_title: "您收到了一条新消息",
+  notify_new_msg_msg: "消息内容：.....",
+  dataError1: "数据错误",
+  groupApply: " 条进群申请",
+  muteLate: "后解除禁言",
+  groupMuteing: "群禁言中",
+  modifyGroupName: "修改分组名称",
+  groupMemberNotFound: "未找到群成员信息",
+  deleteGround: "删除分组",
+
+  bindEmailTipTitle: "绑定邮箱",
+  bindEmailTipContent: "为了您的账户安全，请绑定您的邮箱",
+  bindEmailTipOk: "去绑定",
+  bindEmailTipCancle: "暂不绑定",
+
+  alreadyBeOwner: "您选择的是群主，已拥有最高的管理权限",
+  managerApplying: "管理员审核中",
+  quote: "引用",
+
+  request_exception: "请求异常",
+  clearMsg: "清除消息",
+  pressToSay: "按住说话",
+  slideToCancelSend: "手指上滑,取消发送",
+  releaseToEnd: "松开结束",
+  releaseToCancelSend: "松开手指,取消发送",
+  invalidVoiceMessage: "无效的语音消息",
+  hit: "打",
+  downloadingCache: "下载缓存中...",
+  unableToRecognize: "无效二维码",
+  scanResult: "扫码结果",
+
+  register_fail: " 注册失败，请检查网络后再试",
+  skip: " 跳过",
+  toUse: " 立即体验",
+  sideToSide: " 端到端加密",
+  design: " 设计",
+  guide1: " 发送消息，加密传输，仅供自己阅读",
+  guide2: " 更加自由地按照自己的方式交流",
+  guide3: " 围绕您构建的安全通信平台",
+  inputGroupAc: " 请输入群公告（字符限制0-500）",
+  clickToEnjoy:
+    " 点击链接保存，或者复制本段内容，打开[球帝帶]APP，即可加入群聊。",
+  createOK: "创建成功",
+  noPravcy: "您没有创建群聊权限",
+  groupNumberToTop: "群组数量达到上限",
+  createFail: "创建失败，请稍后再试试吧",
+  create: "创建",
+  uploadGroupAvatar: "上传群头像",
+  useNewPassword: "密码修改成功，即将返回登录页",
+
+  error_14: "服务器异常(14)",
+  error_500: "服务器异常(500)",
+  error_1000: "用户签名token不合法",
+  error_1001: "参数错误",
+  error_1002: "当前版已是最新版本",
+  error_6001: "此用户名已被注册",
+  error_6003: "密码必须由6-15位字母及数字组成",
+  error_6004: "用户名校验出错",
+  error_6005: "密码不正确，请重新输入",
+  error_6006: "今日密码错误次数超过上限",
+  error_6007: "用户不存在，请检查确认",
+  error_6008: "旧密码错误，请重新输入",
+  error_6009: "旧密码与新密码一致，请重新输入",
+  error_6010: "频繁获取验证码",
+  error_6011: "验证码不正确，请重试",
+  error_6012: "验证码过期",
+  error_6013: "验证码失败次数过多",
+  error_6014: "验证码已经使用",
+  error_6015: "邮箱不存在",
+  error_6016: "邮箱已被他人绑定，请重新录入",
+  error_6017: "验证码不存在",
+  error_6018: "该账户已被封禁",
+
+  error_6019: "手机号已被他人绑定",
+  error_6020: "邮箱地址已被他人绑定",
+  error_6021: "邮箱地址有误，请重新输入",
+  error_6022: "手机号有误，请重新输入",
+  error_6023: "该账户已被封禁，暂不支持找回密码",
+  error_6024: "该账户未绑定邮箱，暂不支持找回密码",
+  error_6025: "该账户未绑定手机号，暂不支持找回密码",
+  error_6026: "手机号已被他人绑定，请重新录入",
+  error_6030: "服务器邮箱未配置",
+  error_6031: "请输入正确的手机号码",
+  error_6032: "请输入正确的邮箱地址",
+  error_100002: "置顶消息达到上限",
+  error_100003: "此消息已置顶",
+  error_api: "请求错误",
+  error_http: "网络请求错误",
+
+  error_http_11: "网络连接超时",
+  error_http_12: "网络连接超时",
+  error_http_13: "网络连接超时",
+  error_http_14: "网络证书错误",
+  error_http_15: "请求数据错误",
+  error_http_16: "请求已取消",
+  error_http_17: "网络连接超时",
+  error_http_18: "网络请求内部出错",
+
+  error_sdk_err_1002: "无权限操作",
+  error_sdk_err: "操作失败",
+
+  search_hine_1: "请输入搜索内容",
+  str_no_data: "暂无数据",
+  str_no_net: "暂无网络",
+
+  download_not_support_type: "不支持的格式",
+  download_save_at: "文件存储在: ",
+  download_not_url: "未识别到下载链接",
+  download_file_success: "保存成功，您可以到相册查看",
+  download_failed_file: "文件保存失败",
+  download_failed: "下载失败",
+
+  loading_failed_retry: "加载失败，点击重试",
+  loading_ing: "加载中...",
+
+  str_online_later_minute: "分钟前在线",
+  str_online_later_hour: "小时前在线",
+  str_online_later_llg: "很久没上线",
+  str_online_later_yesterday: "昨天在线",
+  str_yesterday: "昨天",
+  str_online_later_near: "近期在线",
+
+  str_minute: "分",
+
+  clean_notice: "清空公告",
+  clean_notice_1: "确定要清空群公告吗？",
+  publish_notice: "发布公告",
+  publish_notice_remind: "发布该公告将提醒所有群成员",
+  quit_edit: "退出编辑",
+  quit_the_edit: "退出本次编辑？",
+  continue_edit: "继续编辑",
+  publish_success: "发布成功",
+  face_success: "面容解锁开启成功",
+  finger_success: "指纹解锁开启成功",
+  groupDismissed: "该群已解散",
+  hasOut: "已过期",
+
+  otherLoginStyle: "其他登录方式",
+  otherRegisterStyle: "其他注册方式",
+  hasAccount: "已有账号，去登录",
+  mobileCode: "手机验证码",
+  codeSendTo: "验证码已发送至",
+
+  inputNumber: "请输入手机号",
+
+  bindPhone: "绑定手机号",
+  bindPhoneSuccess: "手机号绑定成功",
+  bindPhoneTipChange: "若您的手机号已不用，请及时更换",
+  please_input_email: "请输入邮箱地址",
+  findPassByEmailTip: "用邮箱找回密码",
+  findPassByPhoneTip: "用手机号找回密码",
+  resetPass: "重设密码",
+  current_bind_phone: "当前绑定手机号:",
+  reget: "重新获取",
+  getVerifyCode: "获取验证码",
+  alreadyRegister: "此手机号已被注册",
+  alreadyRegister2: "此邮箱地址已被注册",
+  netErrorRetry: "网络出小差了，点击页面重新加载~",
+  newPhoneNumber: "新的手机号",
+
+  addFriendText1: "加为好友",
+
+  qrSaveFail: "二维码保存失败",
+  qrSavePhoto: "二维码已保存到相册",
+  userId: "用户ID：",
+  addMeToFriend: "加我为好友",
+  validTime: "有效期至",
+  clickRefresh: "点击刷新",
+  qrUseCount: "此二维码{count}次有效",
+  share: "分享",
+  savePhoto: "保存图片",
+
+  iAm: "我是",
+  addFriendSuccessful: "添加好友成功",
+  addFriendFaceToFace: "面对面加好友",
+  faceToFace: "面对面加好友",
+  inputSameKey: "以下是已输入同样数字的好友",
+  sameKeyAddFriend: "和好友输入同样数字添加好友",
+  self: "自己",
+  age: "岁",
+  confirmAddFriend: "确认加为好友",
+
+  inputUserId: "请输入用户ID",
+  myQr: "我的二维码",
+  back: "返回",
+  canNotAddSelf: "你不能添加自己到联系人",
+  notExsit: "该用户不存在",
+  searchUserId: "搜索用户ID：",
+
+  remarkInfo: "请备注验证信息",
+  applyRemark: "备注",
+  last4Number: "请输入对方登录手机号后4位",
+  checkLast4Number: "验证手机号后4位",
+  addFriendApply: "添加好友申请",
+  friendNumberCatchTopLimit: "您的好友数量已达上限",
+  friendNumberCatchTopLimitCurrentDay: "当天添加好友已达上限",
+  codeInvalid: "无效密钥或失效，请重新发起",
+  shareFail: "分享失败",
+
+  error_1003: "请稍后重试",
+  error_6033: "无效密钥或失效，请重新发起",
+  error_6034: "好友总数已达上限",
+  error_6035: "当天添加好友已达上限",
+  error_6036: "该用户手机号为空",
+  error_6037: "手机尾号验证失败",
+  error_6040: "分组已存在",
+  error_6050: "二维码已过期",
+  error_6051: "当日二维码使用次数已达上限",
+  error_6052: "二维码使用次数已达上限",
+  error_6053: "今日扫一扫功能次数已达上限",
+  error_6054: "对方已添加您为好友",
+  error_6055: "无效密钥或失效，请重新发起",
+  error_6066: "账户余额不足",
+  error_6067: "红包已领完",
+  error_6068: "红包已过期",
+  error_6069: "无法领取专属红包",
+  error_6070: "已领取红包，无法再领取",
+
+  deletedByFriendHint: "你还不是TA朋友 ",
+  deletedByFriendHint1: "你还不是TA朋友，",
+  deletedByFriendHint2: "添加好友",
+  deletedByFriendHint3: "继续聊天",
+  gotoAddFriend: "去添加好友",
+  addFriendGotoGroup: "邀请好友入群",
+  notContacts: "暂无联系人",
+  notContactsFound: "没有找到{name}相关的好友",
+  remarkStr: "备注",
+  remarkStrHint: "请输入备注",
+
+  deleteConfirm: "是否确认删除好友",
+  deleteFriend: "删除好友",
+  searchContact: "搜索联系人",
+  notGroupTip: "还没有加入群聊",
+  notAddFriend: "还没有添加新朋友",
+  friendApplyAdd: "好友申请",
+  addSuccess: "添加成功",
+  hasSelectFriend: "已选择好友",
+
+  myBalance: "我的余额",
+
+  //------------------
+  revokeMsgTip: "撤回消息",
+  error_10050: "操作失败（未找到记录）",
+  set_manager_tip_1: "您选择的是群主，已拥有最高的管理权限",
+  envelope: "红包",
+  uidStr: "用户ID",
+  showGetDetail: "查看领取详情",
+  waitOtherEnter: "等待对方加入",
+  isFriend2SExit: "已成为好友，2秒后自动退出",
+
+  sendRedPacket: "发红包",
+  redPacketNumber: "红包个数",
+  ge: "个",
+  total: "总数",
+  eachNumber: "单个数量",
+  selectUser: "选择用户",
+  number: "数量",
+  redPacketType: "红包类型",
+  checkVerity: "安全验证",
+  balance: "账户余额",
+  sendTo: "短信验证码已发送至",
+
+  pin: "拼手气红包",
+  putong: "普通红包",
+  zhuanshu: "专属红包",
+  dajidali: "恭喜发财，大吉大利！",
+
+  redPacketInfo: "红包详情",
+  best: "手气最佳",
+  saveToAccount: "已存入账户",
+  minuteOut: "分钟抢光",
+  hourOut: "小时抢光",
+  showDetail: "查看详情",
+  maxMemberNumber: "红包个数不可超过当前群聊人数",
+  sended: "发出的",
+  get: "已领取",
+  waiting: "等待用户领取",
+  gong: "个红包共",
+
+  envelope_get_over: "的红包已被领完",
+  envelope_get: "领取了",
+  de: "的",
+  envelope_get_message: "领取红包消息",
+  bind_phone_please: "为了您的账户安全，请绑定手机号",
+  delay_bind: "暂不绑定",
+  send_envelope_x: "发出的红包",
+  send_envelope_back_all: "该红包超过24小时未领取\n已退还",
+  envelope_x_can_get: "仅{name}可领取",
+  envelope_get_completed: "手慢了，红包抢光了",
+  send_envelope_back_some: "该红包超过24小时未领完\n部分已退还",
+  envelope_x_personal: "给%s的专属红包",
+  envelope_normal: "普通红包",
+  login_out_of_date: "登录已过期，重新登录",
+  get_envelope_completed: "已被领完",
+  x_is_personal: "专属",
+
+  error_6072: "已达到单个红包的最大金额",
+  error_6073: "单个红包的数量不能低于0.01",
+  error_6074: "红包功能已关闭",
+
+  distroyAccount: "注销帐号",
+
+  inComing: "收入",
+  outGoing: "支出",
+  balance_order_detail: "余额明细",
+  type: "类型",
+
+  payType: "支付方式",
+  orderNo: "订单号",
+  time: "时间",
+  itemDataNotSupport: "当前版本暂不支持",
+
+  manager_change_account: "管理员调账",
+  groupEnvelope: "群红包",
+  accountPay: "余额支付",
+  paySuccess: "支付成功",
+
+  groupEnvelopePersonal: "群红包-专属红包",
+  groupEnvelopeNormal: "群红包-普通红包",
+  changeAccount: "调账",
+  groupEnvelopeRandom: "群红包-拼手气红包",
+
+  groupEnvelopeAllBack: "群红包-全部退还",
+  groupEnvelopeSomeBack: "群红包-部分退还",
+
+  distroyTips: "为了确认您的账户安全<br>我们将在您注销账户前进行以下验证",
+  safeStatus: "账户处于安全状态",
+  safeTips:
+    "请确保您的账户没有改密、换绑手机/邮箱等敏感操作，账户没有被盗风险。",
+  strikeBalance: "账户财产结算",
+  strikeTips: "注销账户后，您账户的红包余额数据都将删除、且无法恢复。",
+  dataDelete: "账户数据删除",
+  deleteTips:
+    "注销账户后，该账户下的所有数据都将删除、且无法恢复。数据包括您的聊天记录、加入的群聊、好友关系等内容数据。",
+  applyDistroy: "申请注销帐号",
+  distroyConform: "确定要注销账号吗？",
+  distroyConformTips: "注销后将退出登录，请谨慎操作！",
+  distroy: "确认注销",
+  submitSuccess: "提交成功",
+  submitted: "您的注销申请已提交！",
+  helpWord:
+    "平台将在{day}个工作日内处理您的申请并删除您的所有数据，如需帮助，请通过官网联系我们。",
+  know: "我知道了",
+  revoke: "撤销申请",
+  revokeSuccess: "撤销成功",
+  recover: "确定要撤销申请吗？",
+  toNormal: "撤销后账号状态变为正常",
+  beRecover: "确认恢复",
+  recoverSuccess: "恢复成功",
+  redPackageCountTip: "单个红包总数不可低于0.01",
+
+  closeAccount: "注销账号",
+  recoverAccount: "恢复账户",
+  recoverAccountTipTitle: "确定要恢复账号吗？",
+  recoverAccountTipDesc: "恢复后账号状态变为正常",
+  recoverAccountTipOk: "确认恢复",
+
+  closingAccount: "账户处于注销审核中",
+  closingAccountEndTime: "，预计将在{num}个工作日内完成删除",
+  error_6079: "您已不在群聊，无法领取",
+
+  error_6075: "重复申请",
+  error_6076: "没有找到任何注销申请记录",
+  error_6077: "注销审核中",
+  error_6078: "用户不存在或已注销，请检查确认",
+  error_video_pre_err: "文件生成错误，数据加载失败。",
+  err_upload_file: "上传失败，请稍后再试",
+  err_msg_send_failed: "发送失败，请稍后再试",
+  error_red_package_tip1: "红包已过期",
+  net_error_no_net: "网络不可用，请检查你的网络设置",
+  upload: "上传",
+  error_6081: "发送失败，请稍后重试",
+
+  atTip: "有人{'@'}你",
+  groupChatError: "内容加载失败，点击重试",
+
+  legalNotice: "法律声明",
+  timeoutLock: "超时锁定",
+  reTry: "重试",
+  plsEnterAccount6_15: "用户名 (6-15为字母及数字)",
+  plsEnterPassword6_15: "密码 (6-15为字母及数字)",
+  sysNotify: "系统通知",
+  exit_group_tip: "已退出群聊",
+  group_mute_ing: "本群已禁言",
+  w_edit_group_notification: "编辑了群公告",
+  removeGroupNotice: "删除群公告通知",
+  messageNotify: "消息通知",
+  groupEnterLimit: "被邀好友进群数已达上限，请检查",
+  tipAllGroupMember: "提醒所有群成员",
+  unRecard: "无法录音:",
+  hasCreateGroup: "已创建群聊",
+  joinGroupForLink: "通过链接加入群聊",
+  be: "被",
+  moveoutGroup: "移出群聊",
+  groupOwnerChangeTo: "群主已变更为",
+  changeGroupNameTo: "更改群名称为",
+  disbandedGroup: "解散了群聊",
+  bannedFromSpeaking: "禁言",
+  gagWasLifted: "取消了禁言",
+  initiatedGroupGag: "开启了群禁言",
+  shutDownGroupGag: "关闭了群禁言",
+  target: "对方",
+  groupSizeUpperLimit: "群人数达到上限",
+  topUpperLimit: "置顶达到上限",
+  topMessageRepeate: "置顶消息已重复",
+  userHasReadMessage: "该用户已读过此消息",
+  placeholder: {
+    allMuted: "群主或管理员已开启全体禁言",
+    groupDisbanded: "该群组已被解散",
+    groupBanned: "该群组已被封禁",
+    singleBanned: "你已被禁言",
+    search: "搜索",
+    pleaseInput: "请输入",
+    sec: "秒",
+    groupNoticePlaceholder: "请输入群公告..",
+    inputPassword: "请输入密码",
+    confirmPassword: "请确认输入密码",
+    inputPhoneNumber: "请输入手机号",
+    select: "请选择",
+    userOrGroupIDInput: "请输入{type}",
+    writeMessage: "输入信息...",
+    inputGroupName: "请输入群名称",
+    typingMessage: "在这里输入消息",
+    inputName: "请输入你的昵称"
+  },
+  withoutQualification: "该用户未达到添加好友条件",
+  pleaseBind: "为了您的账户安全，避免添加好友功能受限，请绑定",
+  orStr: "或",
+  andStr: "和",
+  confirmExit: "确认退出",
+  pleaseBindTip1: "为了您的账户安全，请绑定",
+  skin_item_user_name: "张娜娜",
+  skin_item_msg1: "你好，收到及时回复",
+  skin_item_msg2: "好的，收到了",
+
+  appearance: "外观",
+  bubbleBgColor: "对话气泡颜色",
+  chatBackground: "聊天背景",
+  moreSettings: "更多设置",
+
+  highPerformanceModel: "纯净模式",
+  highPerformanceModelDesc: "开启则不显示外观效果",
+  skinPreview: "效果预览",
+  imageAlpha: "图案透明度",
+  groupMask: "群聊面具",
+  groupMaskDescription: "设置本群昵称和头像",
+  maskDesc: "开启后入群成员将可设置本群昵称和头像",
+
+  notSet: "暂不",
+  min: "最小",
+  max: "最大",
+  backgroundColor: "背景色",
+  changeSaveTip: "您已修改设置，是否保存后返回",
+  saveAndBack: "保存并返回",
+  changeAvatar: "更换头像",
+  appFontSize: "全局字体大小",
+  appFontSizeTip:
+    "预览字体大小，拖动下面的滑块，可设置字体大小。设置后，会改变应用内所有文本的字体大小。",
+  groupMaskOpenTip: " %s了群聊面具%s",
+  groupMaskOpenTipNew:"了群聊面具",
+  open: "开启",
+  close: "关闭",
+  groupMaskOpenMsgErrorTip: "群聊面具功能开关提示",
+  maskOpen: "群聊面具已开启",
+  maskClose: "群聊面具已关闭",
+  groupEnterLimit: "被邀好友进群数已达上限，请检查",
+  transmit: "转发",
+  multiSelect: "多选",
+  singleShareMsg: "逐条转发",
+  groupShareMsg: "合并转发",
+  notGroupFound: "没有找到{name}相关的群聊",
+
+  rememberPassword: "记住密码",
+  mobileLogin: "手机登录",
+  emailLogin: "邮箱登录",
+  recentConversation: "最近的聊天",
+  selectContact: "选择联系人",
+  selectGroup: "选择群聊",
+  noGroup: "暂无群聊",
+  notSelectMessage: "您还没有选择消息",
+  hiddenMsg: "隐藏消息",
+  hiddenMsgTip: "是否隐藏消息来源？",
+  yes: "是",
+  no: "否",
+  mergeMessageList: "【合并转发】聊天记录",
+  singleMlCount: "【逐条转发】共{count}条消息",
+  notFoundUser: "未找到用户",
+  selectAt: "选择要{'@'}的人",
+  Someone: "有人{'@'}我",
+  welcomeToQDDChat: "欢迎来到球帝带",
+  choiceYourAvatar: "请选择您的头像",
+  enterPawAgain: "请再次输入密码",
+  hasSelect: "已选",
+  groupChat: "群聊",
+  groupMember1: "群成员",
+  groupSendMsg: "群发消息",
+  msgNotSupportTransmit: "消息不支持转发",
+  bindGoogle: "绑定Google",
+  bindFacebook: "绑定Facebook",
+  unbind: "解绑",
+  accountSettings: "账户设置",
+  thirdPartyAccountBinding: "第三方账号绑定",
+  otherSettings: "其他设置",
+  groupChatLoadFailed: "群聊信息加载失败",
+  addGroupSend: "发起群发",
+  groupSendNoData: "还没有群发消息记录",
+  removeBinding: "解除绑定",
+  unBindToastPart1: "解除绑定后，将不能再用",
+  unBindToastPart2: "账号登录，要继续解除吗？",
+  noOpPermission: "还没有可操作的权限",
+  bindingPhoneOrEmail: "为了您的账户数据安全，请先绑定手机号或邮箱再解除绑定。",
+  unbindingSuccess: "解绑成功",
+  unbindingFair: "解绑失败",
+  showAll: "查看全部",
+  allCount: "全部共{num}个",
+  bindingPhoneOrEmailSetPassword:
+    "为了您的账户数据安全，请先绑定手机号或邮箱再设置密码。",
+  recoverSuccessLoginAgain: "恢复成功，请重新登录",
+  createGroupSend: "发起群发",
+  groupSend: "群发",
+  notSelect: "您还没有选择",
+  confirmDeleteTitle: "确认删除选中的群发？",
+  totalGe: "共%s个",
+  sendTotalGe: "发送给（{num}个）",
+  uploadFailed: "上传失败",
+  selectMax: "选择数量到达上限",
+  newFriendApply: "您有新的好友，点击查看",
+  notSupportLoginStyle: "暂不支持,请使用其他方式登录",
+  error_6091: "选择人数超过上限",
+  error_6092: "消息id已存在",
+  pay_password: "支付密码",
+  pleaseEnter: "请输入",
+  loadingPage: "页面加载中",
+  payTip: "您还未设置支付密码，请完成设置后再进行操作。",
+  deleteRedPackageErrTip: "红包消息不可撤回",
+  applyIconTip: "申请已提交, 审核通过即可更换头像",
+  applyIconProgress: "查看申请进度",
+  applyRecord: "申请记录",
+  repealWithdrawApply: "确定撤销提现申请吗？",
+  withdrawNotes: "提现记录",
+  inReview: "审核中",
+  passTheAudit: "审核通过",
+  rejectedPayment: "审核驳回",
+  revoked: "已撤销",
+  undone: "撤销",
+  withdrawalQuantity: "提现数量",
+  withdrawal: "提现",
+  withdrawalBack: "提现退回",
+  update_tip1: "若无法更新",
+  update_tip2: "可前往官网官网下载",
+  update_ing: "更新中",
+  update_install: "立即安装",
+  installFailed: "未安装,请稍后重试",
+  installNotFoundFile: "未找到安装文件,请稍后重试",
+  error_6093: "登录方式不支持",
+  error_6094: "头像数量已达上限",
+  deleteIcon: "是否删除该头像?",
+  balanceWithdraw: "余额提现",
+  canBalanceWithdraw: "可提现余额",
+  inputPayPassword: "请输入支付密码",
+  withdrawalSuccess: "提现成功",
+  personIcon: "个人头像",
+  groupIcon: "群聊头像",
+  error_6096: "请勿设置重复、连续数字的支付密码",
+  forgetPayPassword: "忘记支付密码",
+  downloadFailedTip: "下载失败，请稍后重试",
+  error_6097: "余额不足",
+  passed: "已通过",
+  headRejected: "已驳回",
+  readDeleteTime: "消息焚烧时长",
+  readDeleteTimeTitle: "焚烧时长",
+  error_6090: "账号已被绑定",
+  notSet2: "未设置",
+  retracted_h5: "撤回了",
+  message_h5: "的消息",
+  inputRemark: "请输入您的备注",
+  authFailed: "授权失败",
+  userNullError: "该用户账号异常",
+  community: "社区",
+  join: "加入群聊，探索更多社区活动～",
+  posteviews: "还没有发布活动～",
+  views: "次观看",
+  ended: "活动已结束",
+  configError: "配置错误，暂不能开启",
+  burnMsgOpen: "{name}设置了消息已读{time}后焚毁",
+  burnMsgClose: "{name}关闭了阅读即焚，消息不再自动焚毁",
+  burnMsgNotify: "阅读即焚通知",
+  homeItem3: "社区",
+  messageTimeOut: "消息已过期",
+  burnContentTip: "消息正在焚毁中，是否退出并一键焚毁？",
+  cancelLater: "我再看看",
+  burnConfirm: "立即焚烧",
+  setNickNameTimes: "，昵称在%s天内仅可修改一次",
+  voiceSendErrTip1: "仅支持发送%s-%s秒的语音",
+  textSendErrTip1: "最多输入%s个字符",
+  pictureSendErrTip1: "仅支持发送%s-%sM的图片",
+  videoSendErrTip1: "仅支持发送%s-%sM的视频",
+  your: "您",
+  setNickNameTimes: "{day}天内仅可修改一次",
+  immutable: "暂不可更改",
+  joinCommunity: "加入群聊，探索更多社区活动～",
+  noActivity: "还没有发布活动～",
+  views: "次观看",
+  ended: "活动已结束",
+  errorLink: "找不到链接",
+  set_payment_password: "请设置6位支付密码",
+  unset_payment_password: "请勿设置重复或连续数字的支付密码",
+  Confirm_Payment_Password: "确认支付密码",
+  Please_confirm_payment_password: "请再次输入确认支付密码",
+  error_6100: "抱歉，您只能每{day}天修改一次个人昵称",
+  privateSetting: "权限设置",
+  viewDetailed: "查看群成员详细信息",
+  inviter: "邀请人",
+  lastLoginTime: "最后登录时间",
+  DeleteThisUsersgroup: "删除该用户在本群发送的群聊消息",
+  AddGroupMembers: "添加群成员免校验同意",
+  error_6103: "该用户为普通成员",
+  error_6104: "被添加者不在群内",
+  error_6108: "账户异常",
+  group_remark: "群聊备注",
+  input_group_remark: "请输入备注内容",
+  await_accepting: "设备授权申请已发送",
+  apply_tips: "此设备不可信或审核未通过，是否发送设备信息进行授权申请？",
+  apply_send: "发送申请",
+  apply_ttl: "设备登录授权",
+  group_limit500: "每个分组人数上限为500人",
+  select_group: "选择好友分组",
+  cantfind: "没有找到{name}相关的联系人",
+  error_6109: "该用户数好友已达上限",
+  error_6106: "请等待设备审核通过后再登录",
+  selectGroups: '选择分组',
+  group_member_info: "群员信息",
+  join_time: "入群时间",
+  inviter_user: "邀请人",
+  last_login_time: "最后登录时间",
+  sync_group_avatar: '是否同时修改群聊头像?',
+  invite_fail: '{usernames}账号异常，邀请失败！',
+  enterAndCtrl:'Enter 发送 / Enter+Ctrl 换行',
+  enterAndCtrlIOS:'Enter 发送 / Enter+control 换行',
+  onlineStatus: "在线状态：",
+  scanLogin: '扫码登录',
+  formLogin: '密码登录',
+  scanText: '球帝带扫码登录',
+  scanSubText: '使用球帝带APP扫码登录',
+  qrcodeExpired: '二维码已过期',
+  expiredTime10: '此二维码10分钟内有效',
+  reflesh: '点击刷新',
+  scanSuccess: '扫描成功',
+  confromLogin: '请确认登录',
+  networkDiagnostic: "网络诊断",
+  "setPaymentPassword": "请设置6位支付密码",
+  "unSetPaymentPassword": "请勿设置重复或连续数字的支付密码",
+  "verifyPassword": "验证支付密码",
+  "confirmPaymentPassword": "确认支付密码",
+  "verifyCurrentPassword": "请验证当前的支付密码",
+  "reInsetPaymentPassword": "请再次输入确认支付密码",
+  "paymentPasswordDifferent": "密码不一致，请重新输入",
+  "getPaymentPasswordWay": "请选择找回密码的方式",
+  "deviceID": "设备ID：",
+  "groupChatRemark": "群聊备注",
+  "selectFriendGroup": "选择好友分组",
+  "selectGroups": "选择分组",
+  "eachGroupLimitNumber": "每个分组人数上限为{p}人",
+  "selectChatLimitNumber": "最多只能选择{p}个聊天",
+  "pleaseEnterRemarks": "请输入备注内容",
+  "groupMembershipInfo": "群员信息",
+  "error_6102": "每个分组人数上限为500人",
+  "error_6105": "非可信设备，请提交申请",
+  "error_6106": "请等待设备审核通过后再登录",
+  "error_6107": "设备审核中未通过",
+  "distroyed": "已注销",
+  "forbiddened": "已封号",
+  "addGroupMemberWithoutApply": "添加群成员免校验同意",
+  "error_6109": "该用户好友人数已达上限",
+  "apply_ttl": "设备登录授权",
+  "apply_tips": "此设备不可信或审核未通过，是否发送设备信息进行授权申请？",
+  "apply_send": "发送申请",
+  "device_auth_send": "设备授权申请已发送",
+  "using_trusted_device": "该设备登录存在风险，请使用可信设备登录",
+  "account_closed": "账号已注销",
+  "google_code": "谷歌验证码",
+  "input_google_code": "请输入谷歌验证码",
+  "hasDetailInfoPermission": "查看群成员详细信息",
+  "editUserHeaderWithGroupHeader": "是否同时修改群聊头像？",
+  "darkModel": "深色模式",
+  "darkModelSetDesc": "跟随系统打开或关闭深色模式",
+  "whiteModel": "浅色模式",
+  "fileNotFound": "未读取到文件",
+  "openFileInApp": "预览文件",
+  "openFileOtherApp": "其他应用打开",
+  "openByBrowser": "用浏览器下载",
+  "pauseDownload": "暂停下载",
+  "resumeDownload": "继续下载",
+  "downloadFailed": "下载失败",
+  "downloading": "下载中",
+  "inviterUser": "邀请人",
+  "lastLoginTime": "最后登录时间",
+  "notdownloaded": "未下载",
+  "cancelDownloading": "文件正在下载中，是否取消下载？",
+  "failedToDownload": "文件下载失败，是否重新下载？",
+  "cancelDownload": "取消下载",
+  "sending": "发送中",
+  "fileTypeNotSupported": "不支持上传该文件格式",
+  "fileSizeOut": "文件大小超出",
+  "restrict": "限制",
+  "downloadFailedTip1": "下载失败，请检查网络后重试",
+  "downloadQueueTip": "已加入下载队列，等待下载",
+  "notSupportTransmitTip": "消息暂不支持转发",
+  "getWithPhone": "通过手机号找回",
+  "getWithEmail": "通过邮箱地址找回",
+  "fileSize": "文件大小",
+  "whetherDownloadFile": "是否下载文件",
+  "groupDeleteUserTip": "同时删除该用户在本群发送的消息",
+  "voiceSize": "音频文件大小不可超过100MB。",
+  "wordSize": "文档文件大小不可超过100MB。",
+  "apkSize": "安装包文件大小不可超过300MB。",
+  "zipSize": "压缩包文件大小不可超过300MB。",
+  "nPersonRead": "{p}人已读",
+  "darkModeEnabled": "深色模式已开启，重启APP后生效",
+  "darkModeOff": "深色模式已关闭，重启APP后生效",
+  "otherUser": "对方",
+  "selectMsgDeleteTime": "选择保留时间",
+  "selectMsgDeleteTimeTip": "聊天记录将在超出保留时限后自动删除，是否继续？",
+  "msgSaveTime": "聊天记录保留时间",
+  "msgSaveTimeDesc": "自动清除超过时效的聊天记录",
+  "hasTimeDeleteMsgPermission": "群聊消息保存时间配置",
+  "accountAbnormal": "账号异常，邀请失败！",
+  "onlyBrowser": "仅支持浏览器查看",
+  "cancelSendSuccess": "已取消发送",
+  "allStr1": "全局",
+  "modelStr1": "日夜模式",
+  "atMaxCountTip": "@最多 {p} 人",
+
+  "checkNet": "网络检测",
+  "autoChangeServer": "一键切换到最优线路",
+  "serverLine": "线路",
+  "timeOut": "超时",
+  "serverLineChange": "切换线路",
+  "netCheck": "网络诊断",
+  "netDelayCheck": "延迟检测",
+  "netDelay1Check": "互联网延迟",
+  "msgDelay1Check": "消息延迟",
+  "imgDelay1Check": "图片延迟",
+  "netLine": "网络线路",
+  "reCheck": "再测一次",
+  "netChecking": "网络检测中",
+  "locationAddr": "归属地",
+  "selectPerfectLineTip": "已为您选择最佳线路",
+  "selectPerfectLineTip2": "当前已是最佳线路，无需切换",
+  "selectPerfectLineTipNoNet": "未识别到最佳线路，请检查网络后重试",
+  "changing": "切换中",
+  "changeSuccess": "切换成功",
+  "autoChanging": "智能切换中，请稍后再试",
+
+  "transmitTo": "转发给",
+  "moreActions": "更多",
+  "refreshing": "刷新",
+  "openInBrowser": "浏览器打开",
+  "coverFlow": "悬浮",
+  "confirmLogin": "确认登录",
+  "toolboxAudioCall": "语音通话",
+  "requestTimeOut": "请求超时,请稍后重试",
+  "error_6115": "二维码已过期",
+  "groupNotFound": "找不到该群聊",
+  "userNotFound": "找不到该用户",
+  "waitAnswer": "等待接听",
+  "callFinish": "通话结束",
+  "microphoneOpen": "麦克风开启",
+  "speakerOpen": "扬声器开启",
+  "voiceWithYou": "邀请您语音通话",
+  "fileSizeConnotZero": "文件大小不能为0",
+  "callInterceptor": "通话中断",
+  "startCallError": "启动通话错误",
+  "callHungUp": "通话已挂断",
+  "callRemoteHungUp": "对方挂断",
+  "callReceiverError": "接听通话错误",
+  "starting": "启动中",
+  "startTimeOut": "语音通话发起超时",
+  "callWaitReceiver": "等待对方接听",
+  "callRemoteNotAccept": "对方未接听",
+  "callStartSendError": "发起语音通话失败",
+  "notAccept": "未接听",
+  "callAccepting": "接听中",
+  "call": "通话",
+  "callDoing": "线路忙，已取消",
+  "netBad": "当前网络环境较差",
+  "netDown": "网络断开",
+  "onCalling": "正在通话中",
+  "error_1303": "您还不是对方的好友",
+  "remoteAccountError": "对方账号异常",
+  "userOnlineStatus": "在线状态",
+  "error_100008": "该用户未达到成为管理员条件",
+  "callTimeLimit": "每次通话最长{p}分钟",
+  "notLoginOnline": "从未登录",
+  "callRemoteDoing": "忙线中",
+  "exitLoginIng": "正在退出",
+  "usePhoneRecovery": "使用手机号找回",
+  "useEmailRecovery": "使用邮箱找回",
+  "otherRecoveryMethods": "其他找回方式",
+  "emailAddress": "邮箱地址",
+  "phoneErrorOrNotExist": "手机号错误或不存在",
+  "phoneNotExist": "手机号不存在",
+  "verificationCodeFailure": "验证码获取失败，请重试",
+  verificationCodeSent: "验证码已发送",
+  hiWelcomeLogin: "Hi~ 欢迎登录",
+  otherLoginMethods: "其他登录方式",
+  usernamePhoneEmail: "用户名/手机号/邮箱",
+  loginAgree: "登录注册即同意",
+  "error_1303": "您还不是对方的好友",
+  "remoteAccountError": "对方账号异常",
+  "userOnlineStatus": "在线状态",
+  "error_100008": "该用户未达到成为管理员条件",
+  "callTimeLimit": "每次通话最长%s分钟",
+  "notLoginOnline": "从未登录",
+  "callRemoteDoing": "忙线中",
+  "exitLoginIng": "正在退出",
+  "docReadError": "文件无法读取，请检查文件格式是否正确",
+  "errorDetail": "错误详情",
+  "searchAreaCode": "搜索国家/地区",
+  "fileReadError": "文件读取出错",
+  "otherFindStyle": "其他找回方式",
+  "welcome": "欢迎登录",
+  "docPreviewError":"文件无法预览",
+  "docPreviewUseOther":"如果由于网络或机型不兼容等原因，出现文件无法预览，您可以使用",
+  "netTimeOut":"网络超时",
+  ip: "IP",
+  imageLoadingRoute: "图片加载线路",
+  networkChecking: "网络检测中...",
+  noPermission: "没有权限,请获取权限后登录",
+  pageNotFound: "页面不存在",
+  serverError: "服务器故障",
+  databaseError: "数据库查询错误",
+  networkError: "网络连接错误"
+};
diff --git a/src/lang/zh-hant-cn.js b/src/lang/zh-hant-cn.js
new file mode 100644
index 0000000..c66a9c3
--- /dev/null
+++ b/src/lang/zh-hant-cn.js
@@ -0,0 +1,1747 @@
+export default {
+  checkTopMessage:'查看置頂消息',
+  unsupportedVideoFormat: "不支持上傳該視頻格式",
+  welcome: "歡迎使用OpenIM",
+  phoneNumber: "手機號",
+  plsEnterPhoneNumber: "請輸入您的手機號",
+  password: "密碼",
+  plsEnterPassword: "請輸入您的密碼",
+  account: "賬號",
+  plsEnterAccount: "請輸入您的賬號",
+  forgetPassword: "忘記密碼",
+  createAccount: "創建賬號",
+  verificationCodeLogin: "驗證碼登錄",
+  login: "登錄",
+  noAccountYet: "還沒有賬號？",
+  loginNow: "立即登錄",
+  registerNow: "立即註冊",
+  friendGrouping: "好友分組",
+  lockPwdErrorHint: "錯誤%s次",
+  newUserRegister: "新用戶註冊",
+  verificationCode: "驗證碼",
+  verificationSuccessful: "驗證成功",
+  sendVerificationCode: "發送驗證碼",
+  verification_code1: "請輸入驗證碼",
+  correct_email_address: "請輸入正確的郵箱地址",
+  Resend: "重新發送",
+  bind_email: "綁定郵箱",
+  email_verification: "郵箱驗證",
+  login_details: "登錄詳情",
+  verification_code: "請輸入郵箱驗證碼",
+  email_verification_code: "郵箱驗證碼",
+  currently_bound_email: "當前綁定郵箱:",
+  text_email: "如您的郵箱已不用，請及時更換:",
+  remove_this_device: "確定要移除該設備嗎？",
+  remove_this_device1:
+    "確定要移除該設備嗎？移除後重新使用該設備，登錄需重新驗證",
+  go_to_settings: "去設置",
+  go_to_binding: "去綁定",
+  date_of_birth: "出生日期",
+  confidential: "保密",
+  not_perfection: "未完善",
+  old_password: "舊密碼",
+  please_enter_old_password: "請輸入舊密碼",
+  trusted_device: "可信設備",
+  change_email_address: "換綁郵箱",
+  current_device: "當前設備",
+  remove_device: "移除設備",
+  current_device_records: "以下是您該設備的全部登錄記錄",
+  text_device: "登錄設備管理",
+  verification_time: "驗證時間:",
+  text_device1: "以下是您的全部登錄設備，點擊進入詳情，查看該設備的登錄記錄",
+  change_the_binding: "換綁",
+  resendVerificationCode: "重發驗證碼",
+  verificationCodeTimingReminder: "%sS後重新獲取驗證碼",
+  defaultVerificationCode: "（默認驗證碼：%s)",
+  plsEnterVerificationCode: "請輸入您的驗證碼",
+  invitationCode: "邀請碼",
+  device_list: "設備列表",
+  plsEnterInvitationCode: "請輸入您的邀請碼%s",
+  optional: "選填",
+  nextStep: "下一步",
+  plsEnterRightPhone: "請輸入正確的手機號",
+  enterVerificationCode: "輸入手機驗證碼",
+  setPassword: "設置密碼",
+  plsConfirmPasswordAgain: "請再次確認您的密碼",
+  text_password2: "請再次確認登錄密碼",
+  please_enter_new_password_again: "請再次輸入新密碼",
+  confirmPassword: "確認密碼",
+  wrongPasswordFormat: "密碼格式錯誤",
+  plsCompleteInfo: "請完善個人信息",
+  plsEnterYourNickname: "請輸入您的昵稱",
+  pleaseEnterYourUsername: "請輸入您的用戶名",
+  enterYourUsernameToHelpUsIdentifyYourAccount:
+    "輸入您的用戶名以幫助我們識別您的賬號",
+  text_1: "該賬戶未綁定郵箱，暫不支持找回密碼",
+  setInfo: "設置信息",
+  loginPwdFormat: "6-20位數字+字母",
+  passwordLogin: "密碼登錄",
+  contacts: "通訊錄",
+  workbench: "工作臺",
+  mine: "我的",
+  me: "我",
+  draftText: "草稿",
+  everyone: "所有人",
+  you: "你",
+  groupAc: "群公告",
+  createGroupNtf: "%s 已創建群聊 ",
+  editGroupInfoNtf: "%s 修改了群資料",
+  quitGroupNtf: "%s 退出了群聊",
+  invitedJoinGroupNtf: "%s 邀請 %s 加入群聊",
+  kickedGroupNtf: "%s 被 %s 移出群聊",
+  joinGroupNtf: "%s 加入群聊",
+  dismissGroupNtf: "%s 解散了群聊",
+  transferredGroupNtf: "%s 將群管理權限轉讓給了 %s",
+  muteMemberNtf: "%s 被 %s 禁言%s",
+  muteCancelMemberNtf: "%s 被 %s 取消了禁言",
+  muteGroupNtf: "%s 開起了群禁言",
+  muteCancelGroupNtf: "%s 關閉了群禁言",
+  friendAddedNtf: "你們已成為好友，可以開始聊天了",
+  openPrivateChatNtf: "已開啟閱後即焚",
+  closePrivateChatNtf: "已關閉閱後即焚",
+  memberInfoChangedNtf: "%s 編輯了自己的群成員資料",
+  unsupportedMessage: "暫不支持的消息類型",
+  picture: "圖片",
+  video: "視頻",
+  voice: "語音",
+  safety: "安全",
+  location: "位置",
+  file: "文件",
+  carte: "名片",
+  emoji: "自定義表情",
+  chatRecord: "聊天記錄",
+  revokeMsg: "撤回了一條消息",
+  aRevokeBMsg: "%s 撤回了 %s 的消息",
+  blockedByFriendHint: "消息已發出，但被對方拒收了",
+  deletedByFriendHint: "你還不是TA的好友 ",
+  sendFriendVerification: "驗證添加",
+  removedFromGroupHint: "你已被移出群聊",
+  groupDisbanded: "群已經解散",
+  search: "搜索",
+  synchronizing: "同步中",
+  syncFailed: "同步失敗",
+  connecting: "連接中",
+  connectionFailed: "連接失敗",
+  top: "置頂",
+  cancelTop: "取消置頂",
+  markHasRead: "標記已讀",
+  delete: "刪除",
+  nPieces: "%s條",
+  online: "在線",
+  offline: "離線",
+  phoneOnline: "手機",
+  pcOnline: "電腦",
+  webOnline: "Web",
+  webMiniOnline: "小程序",
+  upgradeFind: "發現新版本",
+  upgradeVersion: "檢測到一個新的可用版本%s，你當前版本是%s",
+  upgradeDescription: "更新說明：",
+  upgradeIgnore: "忽略",
+  upgradeLater: "稍後更新",
+  upgradeNow: "立即更新",
+  upgradeNever: "暫不更新",
+  inviteYouCall: "%s邀請你進行%s",
+  rejectCall: "拒絕",
+  acceptCall: "同意",
+  callVoice: "語音通話",
+  callVideo: "視頻通話",
+  sentSuccessfully: "發送成功",
+  copySuccessfully: "復製成功",
+  binding_successful: "綁定成功",
+  day: "天",
+  hour: "時",
+  hours: "小時",
+  minute: "分鐘",
+  seconds: "秒",
+  cancel: "取消",
+  determine: "確定",
+  failed_to_load: "加載失敗",
+  failed_to_load1: "加載失敗，請稍後再試",
+  removal_failed: "移除失敗",
+  toolboxAlbum: "相冊",
+  toolboxCall: "視頻通話",
+  toolboxCamera: "拍攝",
+  toolboxCard: "名片",
+  toolboxFile: "文件",
+  toolboxLocation: "位置",
+  send: "發送",
+  holdTalk: "按住 說話",
+  releaseToSend: "松開 發送",
+  releaseToSendSwipeUpToCancel: "松開發送，上滑取消",
+  liftFingerToCancelSend: "松開手指，取消發送",
+  callDuration: "通話時長 %s",
+  cancelled: "已取消",
+  cancelledByCaller: "對方已取消",
+  rejectedByCaller: "對方已拒絕",
+  callTimeout: "超時無響應",
+  rejected: "已拒絕",
+  forwardMaxCountHint: "當前僅支持轉發最多二十條消息~",
+  typing: "正在輸入...",
+  addSuccessfully: "添加成功",
+  addFailed: "添加失敗",
+  setSuccessfully: "設置成功",
+  callingBusy: "你已在通話中，不能進行此操作！",
+  groupCallHint: "當前群正在通話中，你確定加入當前通話嗎？",
+  joinIn: "加入",
+  menuCopy: "復製",
+  menuDel: "刪除",
+  menuForward: "轉發",
+  menuReply: "回復",
+  menuMulti: "多選",
+  menuRevoke: "撤回",
+  menuAdd: "添加",
+  nMessage: "%s條新消息",
+  plsSelectLocation: "請選擇一個位置",
+  groupAudioCallHint: "%s人正在語音通話",
+  groupVideoCallHint: "%s人正在視頻通話",
+  reEdit: "重新編輯",
+  playSpeed: "播放速度",
+  download: "下載",
+  download1: "立即下載",
+  nicknames: "用戶昵稱",
+  downloadAPP: "下載APP",
+  private_chat: "球帝帶",
+  googleMap: "谷歌地圖",
+  check_for_updates: "檢查更新",
+  appleMap: "Apple地圖",
+  baiduMap: "百度地圖",
+  amapMap: "高德地圖",
+  signature: "個性簽名",
+  please_enter_user_nickname: "請輸入用戶昵稱",
+  set_characters: "請設置4-15個字符",
+  personalized_signature: "請輸入個性簽名 (字符限製6-50)",
+  tencentMap: "騰訊地圖",
+  offlineMeetingMessage: "你收到了一條會議邀請消息",
+  offlineMessage: "你收到了一條新消息",
+  offlineCallMessage: "你收到了一條通話邀請消息",
+  logoutHint: "您確定要退出登錄嗎？",
+  myInfo: "我的信息",
+  workingCircle: "工作圈",
+  accountSetup: "賬號設置",
+  aboutUs: "關於我們",
+  about: "關於",
+  logout: "退出登錄",
+  qrcode: "二維碼",
+  qrcodeHint: "掃一掃下面的二維碼，添加我為好友",
+  favoriteFace: "收藏表情",
+  favoriteManage: "管理",
+  favoriteCount: "共%s個表情",
+  favoriteDel: "刪除（%s）",
+  hasRead: "已讀",
+  unread: "未讀",
+  nPersonUnRead: "%s人未讀",
+  allRead: "全部已讀",
+  messageRecipientList: "消息接收人列表",
+  hasReadCount: "已讀(%s)",
+  unreadCount: "未讀(%s)",
+  newFriend: "新的好友",
+  newGroup: "新的群聊",
+  myFriend: "我的好友",
+  myGroup: "我的群組",
+  addManager: "添加管理員",
+  add: "添加",
+  scan: "掃一掃",
+  scanHint: "掃描二維碼名片",
+  newGroups: "新建分組",
+  addFriend: "添加好友",
+  addFriendHint: "通過ID號搜索添加",
+  createGroup: "創建群聊",
+  createGroupHint: "創建群聊，全面使用OpenIM",
+  addGroup: "添加群聊",
+  addGroupHint: "向管理員或群聊成員詢問ID",
+  searchIDAddFriend: "搜索ID添加好友",
+  searchIDAddGroup: "搜索ID添加群聊",
+  noFriendAdd: "搜索ID添加群聊",
+  noVerify: "添加我為好友時需要驗證",
+  year: "歲",
+  myCreatedGroup: "我創建的群聊",
+  noFriendDelete: "沒有可移除好友",
+  myManageGroup: "我管理的群聊",
+  myJoinGroup: "我加入的群聊",
+  searchIDIs: "ID：%s",
+  searchPhoneIs: "手機號：%s",
+  searchEmailIs: "郵箱：%s",
+  searchNicknameIs: "昵稱：%s",
+  searchGroupNicknameIs: "群昵稱：{name}",
+  noFoundUser: "無法找到該用戶",
+  noFoundGroup: "無法找到該群聊",
+  joinGroupDate: "入群時間",
+  joinGroupMethod: "入群方式",
+  byInviteJoinGroup: "%s邀請進群",
+  byIDJoinGroup: "搜索群ID",
+  byQrcodeJoinGroup: "群二維碼",
+  groupNames: "請輸入分組名稱",
+  deleteGroups: "分組删除後將不可恢復，是否確認删除該分組？",
+  groupID: "群ID號",
+  setAsAdmin: "設為管理員",
+  deleteGround: "删除分組",
+  removeFriend: "移除好友",
+  setMute: "設置禁言",
+  modifyGroupName: "修改分組名稱",
+  noAddGround: "還沒有添加好友到分組",
+  deleteSuccessfully: "删除成功",
+  organizationInfo: "組織信息",
+  organization: "組織",
+  department: "部門",
+  position: "職位",
+  personalInfo: "個人資料",
+  viewDynamics: "查看動態",
+  audioAndVideoCall: "音視頻通話",
+  sendMessage: "發送消息",
+  avatar: "頭像",
+  name: "姓名",
+  nickname: "昵稱",
+  gender: "性別",
+  englishName: "英文名",
+  birthDay: "生日",
+  tel: "座機",
+  mobile: "手機號碼",
+  email: "郵箱",
+  man: "男",
+  woman: "女",
+  friendSetup: "好友設置",
+  setupRemark: "設置備註",
+  recommendToFriend: "把他推薦給朋友",
+  addToBlacklist: "加入黑名單",
+  unfriend: "解除好友關系",
+  areYouSureDelFriend: "確定刪除好友嗎？",
+  areYouSureAddBlacklist: "確定將好友加入黑名單嗎？",
+  remark: "備註",
+  save: "保存",
+  saveSuccessfully: "保存成功",
+  saveFailed: "保存失敗",
+  groupVerification: "群聊驗證",
+  friendVerification: "好友驗證",
+  email_address: "請輸入您的郵箱",
+  sendEnterGroupApplication: "發送入群申請",
+  sendToBeFriendApplication: "發送好友申請",
+  sendSuccessfully: "發送成功",
+  reset_successful: "重置成功",
+  bind_new_email: "綁定新郵箱",
+  Login_failed: "登錄失敗",
+  successful_home: "註冊成功",
+  sendFailed: "發送失敗",
+  canNotAddFriends: "該用戶已設置不可添加！",
+  mutedAll: "全體禁言",
+  tenMinutes: "10分鐘",
+  oneHour: "1小時",
+  twelveHours: "12小時",
+  oneDay: "1天",
+  custom: "自定義",
+  unmute: "取消禁言",
+  youMuted: "你已被禁言",
+  groupMuted: "已開啟群禁言",
+  notDisturbMode: "勿擾模式",
+  allowRing: "新消息提示音",
+  allowVibrate: "新消息震動",
+  forbidAddMeToFriend: "禁止加我為好友",
+  blacklist: "通訊錄黑名單",
+  unlockSettings: "解鎖設置",
+  changePassword: "修改密碼",
+  change: "修改",
+  createdGroup: "您還沒有創建分組",
+  clearChatHistory: "清空聊天記錄",
+  confirmClearChatHistory: "確認清空所有聊天記錄嗎？",
+  languageSetup: "語言設置",
+  language: "語言",
+  english: "英文",
+  setting_up: "設置中...",
+  chinese: "簡體中文",
+  traditional_chinese: "繁體中文",
+  followSystem: "跟隨系統",
+  blacklistEmpty: "暫無黑名單",
+  remove: "移除",
+  fingerprint: "指紋",
+  gesture: "手勢",
+  biometrics: "生物識別",
+  plsEnterPwd: "請輸入密碼",
+  plsEnterOldPwd: "請輸入原始密碼",
+  plsEnterNewPwd: "請輸入新密碼",
+  plsConfirmNewPwd: "請確認新密碼",
+  reset: "重置",
+  oldPwd: "原密碼",
+  newPwd: "新密碼",
+  confirmNewPwd: "確認新密碼：",
+  plsEnterConfirmPwd: "請輸入確認密碼",
+  twicePwdNoSame: "兩次輸入的密碼不一致",
+  twicePwd: "新密碼不一致，請重新設置",
+  changedSuccessfully: "修改成功",
+  checkNewVersion: "檢查新版本",
+  chatContent: "聊天內容",
+  topContacts: "置頂聯系人",
+  messageNotDisturb: "消息免打擾",
+  messageNotDisturbHint: "接收消息但不提醒",
+  burnAfterReading: "閱後即焚",
+  timeSet: "時間設置",
+  setChatBackground: "設置聊天背景",
+  fontFace: "字體",
+  fontSize: "字體大小",
+  little: "小",
+  standard: "標準",
+  big: "大",
+  thirtySeconds: "30秒",
+  fiveMinutes: "5分鐘",
+  clearAll: "清空",
+  clearSuccessfully: "清除成功",
+  groupChatSetup: "群聊設置",
+  viewAllGroupMembers: "查看全部群成員(%s)",
+  groupManage: "群管理",
+  myGroupMemberNickname: "我在本群的名稱",
+  topChat: "聊天置頂",
+  muteAllMember: "全員禁言",
+  exitGroup: "退出群聊",
+  dismissGroup: "解散群聊",
+  dismissGroupHint: "所有群成員將退出此群，無法收發消息",
+  quitGroupHint: "退出群聊後將不再接收此群聊信息。",
+  joinGroupSet: "進群驗證",
+  allowAnyoneJoinGroup: "允許任何人加群",
+  inviteNotVerification: "群成員邀請無需驗證",
+  needVerification: "需要發送驗證信息",
+  addMember: "添加",
+  delMember: "移除",
+  groupOwner: "群主",
+  groupAdmin: "管理員",
+  notAllowSeeMemberProfile: "不允許查看其他群成員資料",
+  notAllAddMemberToBeFriend: "不允許添加群成員為好友",
+  transferGroupOwnerRight: "群主管理權轉讓",
+  groupName: "群名稱",
+  groupAcPermissionTips: "只有群主及管理員可以編輯",
+  plsEnterGroupAc: "請輸入群公告",
+  edit: "編輯",
+  publish: "發布",
+  groupMember: "群聊成員",
+  selectedPeopleCount: "已選擇（%s）",
+  confirmSelectedPeople: "確定(%s/%s)",
+  confirm: "確認",
+  log_in_time: "登錄時間:",
+  log_in_time1: "登錄時間",
+  login_IP: "登錄IP:",
+  confirmTransferGroupToUser: "確定將群主轉讓給：%s？",
+  removeGroupMember: "移除群成員",
+  searchNotResult: "搜索無結果",
+  groupQrcode: "群二維碼",
+  groupQrcodeHint: "掃一掃下面的二維碼，立即加入群聊",
+  approved: "已同意",
+  accept: "接受",
+  reject: "拒絕",
+  waitingForVerification: "等待驗證",
+  rejectSuccessfully: "拒絕成功",
+  rejectFailed: "拒絕失敗",
+  applyJoin: "申請加入",
+  enterGroup: "進入群聊",
+  applyReason: "申請理由：%s",
+  invite: "邀請",
+  sourceFrom: "來源：%s",
+  byMemberInvite: "邀請",
+  bySearch: "通過搜索",
+  byScanQrcode: "掃描二維碼",
+  iCreatedGroup: "我創建的",
+  iJoinedGroup: "我加入的",
+  nPerson: "{count}人",
+  searchNotFound: "未搜索到相關結果",
+  searchNotFoundMember: "沒有找到相關用戶",
+  organizationStructure: "組織架構",
+  recentConversations: "最近會話",
+  selectAll: "全選",
+  plsEnterGroupNameHint: "取個群名稱方便後續搜索",
+  completeCreation: "完成創建",
+  sendCarteConfirmHint: "確定發送該聯系人到本聊天嗎？",
+  sentSeparatelyTo: "分別發送給：",
+  sentTo: "發送給：",
+  leaveMessage: "留言",
+  mergeForwardHint: "[合並轉發]共%s條消息",
+  mergeForward: "合並轉發",
+  quicklyFindChatHistory: "快速查找聊天記錄",
+  notFoundChatHistory: '沒有找到"%s"相關內容',
+  globalSearchAll: "綜合",
+  globalSearchContacts: "聯系人",
+  globalSearchGroup: "群組",
+  globalSearchChatHistory: "聊天記錄",
+  globalSearchChatFile: "文件",
+  relatedChatHistory: "%s條相關的聊天記錄",
+  seeMoreRelatedContacts: "查看更多相關聯系人",
+  seeMoreRelatedGroup: "查看更多相關群組",
+  seeMoreRelatedChatHistory: "查看更多相關聊天記錄",
+  seeMoreRelatedFile: "查看更多相關文檔",
+  publishPicture: "發布圖片",
+  publishVideo: "發布視頻",
+  mentioned: "提到了：%s",
+  comment: "評論",
+  like: "贊",
+  reply: "回復",
+  rollUp: "收起",
+  fullText: "全文",
+  selectAssetsFromCamera: "拍攝",
+  selectAssetsFromAlbum: "從相冊選擇",
+  whoCanWatch: "誰可以看",
+  remindWhoToWatch: "提醒誰看",
+  public: "公開",
+  everyoneCanSee: "所有人可見",
+  partiallyVisible: "部分可見",
+  visibleToTheSelected: "選中的人可見",
+  partiallyInvisible: "不給誰看",
+  invisibleToTheSelected: "選中的人不可見",
+  private: "私密",
+  onlyVisibleToMe: "僅自己可見",
+  selectVideoLimit: "時長不能超過15秒",
+  selectContactsLimit: "至少選擇一個聯系人",
+  message: "消息",
+  commentedYou: "評論了你：%s",
+  likedYou: "為你點了贊",
+  mentionedYou: "提到了你",
+  replied: "回復了",
+  detail: "詳情",
+  totalNPicture: "共%s張",
+  noDynamic: "暫無動態",
+  callRecords: "通話記錄",
+  allCall: "所有通話",
+  missedCall: "未接來電",
+  incomingCall: "呼入",
+  outgoingCall: "呼出",
+  microphone: "麥克風",
+  speaker: "揚聲器",
+  hangUp: "掛斷",
+  pickUp: "接聽",
+  waitingCallHint: "正在呼叫中…",
+  waitingVoiceCallHint: "正在等待對方接聽…",
+  invitedVoiceCallHint: "邀請你進行語音通話…",
+  waitingVideoCallHint: "正在等待對方接受邀請",
+  invitedVideoCallHint: "邀請你進行視頻通話…",
+  waitingToAnswer: "等待接聽",
+  invitedYouToCall: "邀請你通話",
+  calling: "通話中",
+  nPeopleCalling: "%s人正在通話中",
+  whoInvitedVoiceCallHint: "%s邀請你進行語音通話",
+  whoInvitedVideoCallHint: "%s邀請你進行視頻通話",
+  plsInputMeetingSubject: "請輸入會議主題",
+  meetingStartTime: "開始時間",
+  meetingDuration: "會議時長",
+  enterMeeting: "進入會議",
+  meetingNo: "會議號",
+  yourMeetingName: "您的名稱",
+  plsInputMeetingNo: "請輸入會議號",
+  plsInputYouMeetingName: "請輸入您的名稱",
+  meetingSubjectIs: "會議主題：%s",
+  meetingStartTimeIs: "開始時間：%s",
+  meetingDurationIs: "會議時長：%s",
+  meetingHostIs: "主持人：%s",
+  meetingNoIs: "會議號：%s",
+  meetingMessageClickHint: "點擊此消息可直接加入會議",
+  meetingMessage: "會議消息",
+  openMeeting: "未結束會議",
+  didNotStart: "未開始",
+  started: "已開始",
+  meetingInitiatorIs: "%s發起的視頻會議",
+  meetingDetail: "會議詳情",
+  meetingOrganizerIs: "發起人：%s",
+  updateMeetingInfo: "修改會議信息",
+  cancelMeeting: "取消會議",
+  videoMeeting: "視頻會議",
+  joinMeeting: "加入會議",
+  bookAMeeting: "預約會議",
+  quickMeeting: "快速會議",
+  confirmTheChanges: "確認修改",
+  invitesYouToVideoConference: "%s邀請你加入視頻會議",
+  over: "結束",
+  meetingMute: "靜音",
+  meetingUnmute: "取消靜音",
+  meetingCloseVideo: "關閉視頻",
+  meetingOpenVideo: "開啟視頻",
+  meetingEndSharing: "結束共享",
+  meetingShareScreen: "共享屏幕",
+  meetingMembers: "成員(%s)",
+  settings: "設置",
+  leaveMeeting: "離開會議",
+  endMeeting: "結束會議",
+  leaveMeetingConfirmHint: "確定離開會議嗎？",
+  endMeetingConfirmHit: "確定結束會議嗎？",
+  meetingSettings: "會議設置",
+  allowMembersOpenMic: "允許成員自我解除靜音",
+  allowMembersOpenVideo: "允許成員開啟視頻",
+  onlyHostShareScreen: "僅主持人可以共享屏幕",
+  onlyHostInviteMember: "僅主持人可邀請會議成員",
+  defaultMuteMembers: "成員入會禁音",
+  pinThisMember: "置頂該成員",
+  unpinThisMember: "取消置頂",
+  allSeeHim: "全部看他",
+  cancelAllSeeHim: "取消看他",
+  muteAll: "全員靜音",
+  unmuteAll: "解除全員靜音",
+  members: "成員",
+  screenShare: "屏幕共享",
+  screenShareHint: "正在共享屏幕.",
+  meetingClosedHint: "會議已關閉或已斷開鏈接，確定離開嗎？",
+  meetingIsOver: "會議已經結束！",
+  networkError: "網絡異常請稍後再試！",
+  shareSuccessfully: "分享成功！",
+  notFoundMinP: "暫未發布小程序",
+  notSendMessageNotInGroup: "無法在已退出的群聊中發送消息",
+  whoModifyGroupName: "{name} 把群聊名稱已更改為 ",
+  accountWarn: "警告!",
+  accountException: "你的賬號已在其他設備登錄，請及時修改密碼。",
+  tagGroup: "標簽",
+  issueNotice: "通知下發",
+  createTagGroup: "創建標簽",
+  plsEnterTagGroupName: "請輸入標簽名",
+  tagGroupMember: "標簽成員",
+  completeEdit: "完成編輯",
+  finish: "完成",
+  emptyTagGroup: "暫無標簽分組",
+  confirmDelTagGroupHint: "確認移除該標簽分組嗎？",
+  editTagGroup: " 編輯標簽",
+  newBuild: " 新建",
+  receiveMember: " 接收成員",
+  emptyNotification: "暫無通知",
+  notificationReceiver: "%s個接收者：%s",
+  sendAnother: "再發一條",
+  confirmDelTagNotificationHint: "確認移除該通知記錄嗎？",
+  contentNotBlank: "內容不能為空",
+  plsEnterDescription: "請輸入描述文字",
+  gifNotSupported: "不支持gif圖片",
+  register: "註冊",
+  hk: "繁體",
+  RegisterSuccess: "註冊成功",
+  LoginSuccess: "登錄成功",
+  init_validate_1: "用戶名由6-15位字母及數字組成",
+  init_validate_10: "手機號或密碼不正確，請重新輸入",
+  init_validate_5: "密碼必須由6-15位字母及數字組成，請重新設定密碼",
+  init_validate_2: "兩次密碼不一致，請重新設置",
+  init_validate_3: "密碼必須由6-15為字母及數字組成 請重新設置密碼",
+  init_validate_6: "密碼必須由6-15為字母及數字組成",
+  init_validate_4: "註冊成功，即將返回登錄頁",
+  init_hint_1: "6-15位數字或英文",
+  init_hint_2: "確認登錄密碼",
+  init_hint_3: "登錄密碼",
+  username: "用戶名",
+  to_modify: "去修改",
+  confirm_password: "確認密碼",
+  notification_settings: "通知設置",
+  init_text_1: "註冊登錄即同意",
+  init_text_2: " 《用戶服務協議》 ",
+  init_text_3: " 和 ",
+  init_text_4: " 《隱私政策》 ",
+  init_text_5: "服務協議及隱私政策",
+  init_text_6: "為了保護您得合法權益，請您閱讀並同意以下協議",
+  refuse: "拒絕",
+  refuse_continue: "同意並繼續",
+  forget_password: "忘記密碼",
+  register_user: "註冊賬號",
+  gotoLogin: "登錄",
+  gotoRegister: "創建一個新賬號",
+  enterGroupCheck: "進群申請",
+  openPhotoError_1: "未讀取到選擇的文件",
+  openPhotoError_2: "文件上傳失敗",
+  openPhotoError_3: "未讀取到文件信息",
+  agreeAll: "全部同意",
+  whatCanManagerDo: "群管理权限",
+  changeGroupName: "修改群名稱",
+  deleteMemberMessage: "刪除群員消息",
+  chatPrivate: "與群員加密私聊",
+  memberMute: "群員禁言",
+  deleteMember: "移除成員",
+  changeNotice: "發布/修改/删除群公告",
+  checkInGroup: "進群審核",
+  setAdmin: "設置管理員",
+  deleteAdmin: "移除管理員",
+  deleteAdminTitle: "確定要移除該管理員？",
+  deleteAdminDetail: "將此成員移除管理員，無法管理群消息",
+  deleteSuccess: "移除成功",
+  mobile_web_page: "訪問手機網頁",
+  deleteMemberTitle: "確定要移除該成員？",
+  deleteMemberDetail: "將此成員移出此群，無法收發消息",
+  deleteSelf: "不能移除自己",
+  handled: "已處理",
+  unhandle: "待處理",
+  noCheck: "暫無申請處理～",
+  success: "操作成功",
+  nameLenth: "請設置1-15個字符",
+  editNickname: "編輯群昵稱",
+  text_password: "請設置新的登錄密碼",
+  quit: "退出",
+  waitAMoment: "我在看看",
+  editWarningTitle: "確定退出編輯群昵稱嗎？",
+  editWarningDetail: "您修改的群昵稱還未保存，是否繼續退出？",
+  editGroupAvatar: "編輯本群頭像",
+  myGroupAvatar: "我的本群頭像",
+  inviteLink: "邀請鏈接",
+  inviteTips: "任何已安裝此APP的用戶都將可以通過此鏈接加入您的群聊",
+  inviteLinkCopy: "邀請鏈接已復製",
+  shareLink: "分享鏈接",
+  manageLink: "管理邀請鏈接",
+  copyLink: "復製鏈接",
+  deleteLink: "刪除鏈接",
+  deleteLinkTipsTitle: "確定要撤銷該鏈接嗎？",
+  deleteLinkTipsDetail:
+    "您確定要撤銷此邀請鏈接嗎？一旦撤銷，其他人將不能通過此鏈接加入本群組。",
+  linkManage: "鏈接管理",
+  openManage: "開啟後需群主或管理員確認才能進群",
+  timeValid: "有效時間限製",
+  linkInvalidTips: "邀請鏈接將再此日期後失效，無法繼續訪問",
+  valid: "內有效",
+  dayValid: "天內有效",
+  forever: "永久",
+  foreverValid: "永久有效",
+  attendTips: "加入請求已發送，管理員審核您的申請後，您就可以加入群組",
+  memberCountLimit: "此群聊人數已達上線",
+  linkIsOut: "邀請鏈接已過期",
+  requestAttend: "請求加入群聊",
+  needCheck: "此群聊僅在管理員審核後才能加入",
+  countLimit: "管理員人數已達上限",
+  openLock: "離開APP後，超時需要使用解鎖方案",
+  closeLock: "啟動app時無需驗證",
+  checkTips: "請檢查您的人臉或指紋權限是否開啟~",
+  face: "面容解鎖",
+  finger: "指紋解鎖",
+  gestureLock: "手勢密碼解鎖",
+  closed: "未開啟",
+  opened: "已開啟",
+  lanchProtect: "啟動時保護",
+  noProtect: "無需保護",
+  lockSetting: "解鎖設置",
+  drawLine: "繪製解鎖圖案",
+  drawOldLine: "繪製您的舊手勢密碼",
+  drawNewLine: "繪製您的新手勢密碼",
+  setGesturePassword: "設置手勢密碼",
+  checkGesturePassword: "驗證手勢密碼",
+  needJoinPoint: "至少連接4個點，請重新繪製",
+  drawAgain: "請再次繪製",
+  checkSuccessful: "驗證通過",
+  notInCommon: "與上次繪製不一致，請重新繪製",
+  changeGesturePassword: "修改手勢密碼",
+  toChange: "去修改",
+  openSuccess: "啟用成功",
+  closeSuccess: "關閉成功",
+  hasBeenMember: "已是群成員，不用再次加入",
+  joinGroup: "加入群聊",
+  checking: "管理員審核中",
+  noUnlock: "無法解鎖？",
+  inputGesture: "請輸入手勢解鎖",
+  faceDetect: "請進行人臉識別",
+  fingerDetect: "請進行指紋識別",
+  tryUnlocking: "請嘗試：無法解鎖？",
+  countRemain: "手勢錯誤，您還可以輸入 %s 次",
+  reLoginUnlock: "重新登錄解鎖",
+  selectVerityType: "請選擇驗證方式      ",
+  currentTypeNotSupport: "當前類型不支持",
+  //-------------
+  updateNewVersion: "發現新版本",
+  updateOkUpdate: "立即升級",
+  updateOpenDownloadFailed: "打開下載失敗",
+  updateCurrentIsNew: "當前已是最新版本",
+  newVersionNotFound: "未找到最新版鏈接，您可以訪問網頁去下載",
+  openUrlFailed: "無效的鏈接",
+  qmvMsgNotExit: "[引用內容不存在]",
+  qmvMsgNotSupport: "[引用內容不支持展示]",
+  dataError: "數據解析錯誤",
+  userNotBindEmail: "用戶未綁定郵箱",
+  userNotRegister: "用戶未註冊",
+  checkError: "檢查失敗",
+
+  csvTitle: "聊天設置",
+  csvSetTopMsg: "置頂聊天",
+  csvSetOptMsg: "消息免打擾",
+  csvSetDisableMsg: "屏蔽消息",
+  csvClearMsg: "清空聊天記錄",
+  csvClearLocal: "僅清空本地聊天記錄",
+  csvClearUser: "清空本地和%s的聊天記錄",
+  csvSetErrorTip: "設置失敗，請檢查網絡",
+
+  gmiTitle: "群昵稱：",
+  gmiSetTalk: "加密私聊",
+  gmiSetMute: "設置群內禁言",
+  gmiDeleteUser: "移出本群",
+  gmiMuteTo: "禁言至 ",
+  gmiError1: "未找到此成員信息，可能被移出了群聊",
+  gmiError2: "未找到您的群成員信息，您可能被移出了群聊",
+  gmiError3: "確定要移除該用戶？",
+  gmiError4: "將此成員移出此群，無法收發消息",
+  gmiError5: "您沒有權限刪除此管理員",
+  gmiError6: "您沒有權限刪除此成員",
+  gmiError7: "已解除禁言",
+  gmiError8: "您沒有權限取消禁言此管理員",
+  gmiError9: "您沒有權限取消禁言此成員",
+  gmiError10: "您沒有權限禁言此管理員",
+  gmiError11: "您沒有權限禁言此成員",
+  gmiError12: "解除禁言",
+  gmiGroupOwnerNotFound: "群信息加載失敗",
+
+  smmvTitle: "禁言時長",
+  smmvMuteTime: "選擇禁言時長",
+  smmvMuteTime_10m: "10分鐘",
+  smmvMuteTime_1hour: "1小時",
+  smmvMuteTime_12hour: "12小時",
+  smmvMuteTime_1day: "1天",
+  smmvMuteTime_30day: "30天",
+  smmvMuteTime_7day: "7天",
+
+  egnpTitle: "編輯群聊名稱",
+  egnpSetGroupName: "請設置群名稱",
+  egnpSetTextDesc: "請設置1-15個字符",
+  egnpSetTitleNoPermission: "您沒有修改群聊名稱權限",
+  egnpSetFailed: "修改失敗，請稍後再試",
+
+  setGroupNameHint: "請設置群名稱",
+
+  givTitle: "編輯群聊名稱",
+  givGroupName: "群名稱",
+  givGroupFace: "群頭像",
+
+  gmsvTitle: "管理群",
+  gmsvSetManager: "設置管理員",
+  gmsvToSet: "去設置",
+  gmsvFindMsg: "查找聊天記錄",
+  gmsvFindMsgDesc: "開啟後入群成員將看到近期歷史消息",
+  gmsvMute: "全員禁言",
+  gmsvMuteDesc: "開啟後只允許群主和管理員發言",
+  gmsvApply: "進群確認",
+  gmsvApplyDesc: "開啟後需群主或管理員確認才能進群",
+
+  gmsvSetManagerTip: "只有群主才能設置管理員",
+  gmsvSetMuteTipOn: "已全員禁言",
+  gmsvSetNuteTipOff: "全員禁言已解除",
+  gmsvApplyTipOn: "進群確認已開啟",
+  gmsvApplyTipOff: "進群確認已關閉",
+  gmsvFindGroupErr: "獲取群信息失敗",
+  gmsvFindMsgOn: "查找聊天記錄已開啟",
+  gmsvFindMsgOff: "查找聊天記錄已關閉",
+  gmsvSetFailed: "設置失敗",
+
+  gsvTitle: "群詳情",
+  gsvGroupId: "群ID",
+  gsvGroupMember: "群聊人員",
+  gsvGroupMemberValue: "共{num}人",
+  gsvGroupNotification: "群公告",
+  gsvMyName: "我的本群昵稱",
+  gsvMyFace: "我的本群頭像",
+  gsvGroupManager: "群管理",
+  gsvGroupApply: "進群確認",
+  gsvFindMsg: "查找聊天記錄",
+  gsvSetTop: "置頂",
+  gsvSetOpt: "消息免打擾",
+  gsvDeleteMsg: "刪除聊天記錄",
+  gsvDeleteLocal: "僅清空本地聊天記錄",
+  gsvDeleteAllMsg: "清空本地和所有成員的聊天記錄",
+  gsvDeleteOtherMsg: '清空本地和對方的聊天記錄',
+  gsvGroupDelete: "確定要解散該群聊？",
+  gsvOutGroup: "確定要退出該群聊？",
+  gsvNoNotification: "暫無公告",
+  gsvClearSuccess: "清除成功",
+  gsvClearFailed: "清除失敗，請稍後再試",
+  alreadyBeOwner: "您選擇的是群主，已擁有最高的管理權限",
+
+  cvAllPeople: "所有人",
+  cvVideo: "[視頻]",
+  cvPicture: "[圖片]",
+  cvFile: "[文件]",
+  cvVoice: "[語音]",
+  cvNotSupportMsg: "暫不支持的消息",
+  cvSendMsgErrorNoPermission: "由於對方的權限設置，你無法向TA發送消息",
+  cvSendMsgPnMute: "禁言中，無法發送消息",
+  cvCopyMsg: "已復製到剪切板",
+  cvCopyMsgNotSupport: "暫不支持的消息",
+  cvdeleteLocal: "從本地刪除",
+  cvdeleteLocalAndServer: "從本地和服務器刪除",
+  cvdeleteLocalAndServerUser: "從本地和{name}刪除",
+  cvClearMsgTip: "清除了會話消息",
+
+  cvGroupCreateSuccess: "群聊創建成功",
+  cvGroupCreateSuccessTip1: "恭喜您建群成功，點擊下方按鈕邀請好友入群",
+  cvGroupCreateSuccessGo: "邀請好友入群",
+  cvGroupNotification: "群公告：",
+  sendMsg: "發送消息",
+  cvOnlineCount: "{count} 人在線",
+  cvUserCount: "共{count}人",
+  cvNotAtUser: "還沒有群人員可以@哦,快去添加成員吧",
+  all: "全部",
+
+  clCloseConversation: "折疊置頂聊天",
+  clOpenConversation: "個置頂聊天",
+  clNoConversation: "近期無會話～",
+  clTitle: "對話",
+
+  clDelete: "此對話將刪除",
+  clDeleteDesc: "刪除此對話，將會刪除本地聊天記錄",
+  clDeleteSel: "您沒有選擇會話",
+  clDeleteSel1: "此對話將刪除",
+  clDeleteSel2: "這些對話將刪除",
+  clDeleteDesc2: "刪除這些對話，將會刪除本地聊天記錄",
+
+  homeItem0: "對話",
+  homeItem1: "聯系人",
+  homeItem2: "我的",
+  exitTip: "再次點擊返回鍵退出",
+
+  mineSigEmpty: "這個用戶很懶，暫無簽名～",
+  uaProtocol: "用戶服務協議",
+
+  savSearchTip: "快速搜索聊天內容",
+  savMedia: "圖片/視頻",
+  searchEmptyTip: "沒有找到相關的聊天記錄",
+  savSearchMsg: "條相關聊天記錄",
+
+  savConversation: "對話",
+  savMsg: "聊天記錄",
+  savConversationNotFound: "未找到對話",
+  savMsgNotFound: "未找到此信息",
+
+  samTitle: "媒體",
+  samTimeFormat: "yyyy年M月",
+  notSupportType: "不支持的類型",
+  media: "媒體",
+
+  openUrl: "打開鏈接",
+  lkAddGroupUrl: "加入群聊鏈接",
+  lkAddOtherUrl: "外部鏈接，可使用默認瀏覽器打開",
+  lkUnknowUrl: "未識別的鏈接",
+  openUrlFailed1: "打開鏈接失敗",
+
+  yszcTitle: "隱私政策",
+  slsmTitle: "法律聲明",
+
+  ctmRemove: "移除",
+  ctmOkRemove: "確定移除",
+  ctmTopMsgCount: "共{count}條",
+  ctmEmptyText: "沒有置頂消息",
+  recordTimeShort: "錄音時間太短",
+
+  sendCodeExceErr: "發送驗證碼失敗，請稍後再試",
+  bindEmailExecErr: "綁定郵箱失敗，請稍後再試",
+
+  ctmSuccess: "置頂成功",
+  ctmRemoveSuccess: "移除置頂消息成功",
+  ctmMsgNotFound: "此消息不存在",
+
+  cvFirstTip: "此對話中的信息和通話已經進行端對端加密",
+
+  clearGroupNotification: "清除了群公告",
+  publicGroupNotification: " 發布公告",
+  dialog_tip1: " 溫馨提示",
+  dialog_tip_token_invaild: " 登錄已過期，請重新登錄",
+
+  notify_new_msg_title: "您收到了一條新消息",
+  notify_new_msg_msg: "消息內容：.....",
+  dataError1: "數據錯誤",
+  groupApply: " 條進群申請",
+  muteLate: "後解除禁言",
+  groupMuteing: "群禁言中",
+  groupMemberNotFound: "未找到群成員信息",
+
+  bindEmailTipTitle: "綁定郵箱",
+  bindEmailTipContent: "為了您的賬戶安全，請綁定您的郵箱",
+  bindEmailTipOk: "去綁定",
+  bindEmailTipCancle: "暫不綁定",
+
+  managerApplying: "管理員審核中",
+  quote: "引用",
+
+  request_exception: "請求異常",
+  clearMsg: "清除消息",
+  pressToSay: "按住說話",
+  slideToCancelSend: "手指上滑,取消發送",
+  releaseToEnd: "松開結束",
+  releaseToCancelSend: "松開手指,取消發送",
+  invalidVoiceMessage: "無效的語音消息",
+  hit: "打",
+  downloadingCache: "下載緩存中...",
+  unableToRecognize: "無效二維碼",
+  scanResult: "掃碼結果",
+
+  register_fail: " 註冊失敗，請檢查網絡後再試",
+  skip: " 跳過",
+  toUse: " 立即體驗",
+  sideToSide: " 端到端加密",
+  design: " 設計",
+  guide1: " 發送消息，加密傳輸，僅供自己閱讀",
+  guide2: " 更加自由地按照自己的方式交流",
+  guide3: " 圍繞您構建的安全通信平臺",
+  inputGroupAc: " 請輸入群公告（字符限製0-500）",
+  clickToEnjoy:
+    " 點擊鏈接保存，或者復製本段內容，打開[球帝帶]APP，即可加入群聊。",
+  createOK: "創建成功",
+  noPravcy: "您沒有創建群聊權限",
+  groupNumberToTop: "群組數量達到上限",
+  createFail: "創建失敗，請稍後再試試吧",
+  create: "創建",
+  uploadGroupAvatar: "上傳群頭像",
+  useNewPassword: "密碼修改成功，即將返回登入頁",
+
+  error_14: "服務器異常(14)",
+  error_500: "服務器異常(500)",
+  error_1000: "用戶簽名token不合法",
+  error_1001: "參數錯誤",
+  error_1002: "當前版已是最新版本",
+  error_6001: "此用戶名已被註冊",
+  error_6003: "密碼必須由6-15位字母及數字組成",
+  error_6004: "用戶名校驗出錯",
+  error_6005: "密碼不正確，請重新輸入",
+  error_6006: "今日密碼錯誤次數超過上限",
+  error_6007: "用戶不存在，请检查确认",
+  error_6008: "舊密碼錯誤，請重新輸入",
+  error_6009: "舊密碼與新密碼一致，請重新輸入",
+  error_6010: "頻繁獲取驗證碼",
+  error_6011: "驗證碼不正確，請重試",
+  error_6012: "驗證碼過期",
+  error_6013: "驗證碼失敗次數過多",
+  error_6014: "驗證碼已經使用",
+  error_6015: "郵箱不存在",
+  error_6016: "郵箱已被他人綁定，請重新錄入",
+  error_6017: "驗證碼不存在",
+  error_6018: "該賬戶已被封禁",
+  error_6030: "服務器郵箱未配置",
+  error_100002: "置頂消息達到上限",
+  error_100003: "此消息已置頂",
+  error_api: "請求錯誤",
+  error_http: "網絡請求錯誤",
+
+  error_http_11: "網絡連接超時",
+  error_http_12: "網絡連接超時",
+  error_http_13: "網絡連接超時",
+  error_http_14: "網絡證書錯誤",
+  error_http_15: "請求數據錯誤",
+  error_http_16: "請求已取消",
+  error_http_17: "網絡連接超時",
+  error_http_18: "網絡請求內部出錯",
+
+  error_sdk_err_1002: "無權限操作",
+  error_sdk_err: "操作失敗",
+
+  search_hine_1: "請輸入搜索內容",
+
+  str_no_data: "暂无数据",
+  str_no_net: "暂无网络",
+
+  download_not_support_type: "不支持的格式",
+  download_save_at: "文件存儲在: ",
+  download_not_url: "未識別到下載鏈接",
+  download_file_success: "保存成功，您可以到相冊查看",
+  download_failed_file: "文件保存失敗",
+  download_failed: "下載失敗",
+
+  loading_failed_retry: "加載失敗，點擊重試",
+  loading_ing: "加載中...",
+
+  str_online_later_minute: "分鍾前在線",
+  str_online_later_hour: "小時前在線",
+  str_online_later_llg: "很久沒上線",
+  str_online_later_yesterday: "昨天在線",
+  str_yesterday: "昨天",
+  str_online_later_near: "近期在線",
+
+  str_minute: "分",
+  clean_notice: "清空公告",
+  clean_notice_1: "確定要清空群公告嗎？",
+  publish_notice: "發布公告",
+  publish_notice_remind: "發布該公告將提醒所有群成員",
+  quit_edit: "退出編輯",
+  quit_the_edit: "退出本次編輯？",
+  continue_edit: "繼續編輯",
+  publish_success: "發布成功",
+  face_success: "面容解鎖開啟成功",
+  finger_success: "指紋解鎖開啟成功",
+  groupDismissed: "該群已解散",
+  hasOut: "已過期",
+
+  otherLoginStyle: "其他登錄方式",
+  otherRegisterStyle: "其他註冊方式",
+  hasAccount: "已有賬號，去登錄",
+  mobileCode: "手機驗證碼",
+  codeSendTo: "驗證碼已發送至",
+
+  inputNumber: "請輸入手機號",
+
+  error_6019: "手機號已被他人綁定",
+  error_6020: "郵箱地址已被他人綁定",
+  error_6021: "郵箱地址有誤，請重新輸入",
+  error_6022: "手機號有誤，請重新輸入",
+  error_6023: "該賬戶已被封禁，暫不支持找回密碼",
+  error_6024: "該賬戶未綁定郵箱，暫不支持找回密碼",
+  error_6025: "該賬戶未綁定手機號，暫不支持找回密碼",
+  error_6026: "手機號已被他人綁定，請重新錄入",
+  error_6031: "請輸入正確的手機號碼",
+  error_6032: "請輸入正確的郵箱地址",
+
+  bindPhone: "綁定手機號",
+  bindPhoneSuccess: "手機號綁定成功",
+  bindPhoneTipChange: "若您的手機號已不用，請及時更換",
+  please_input_email: "請輸入郵箱地址",
+  findPassByEmailTip: "用郵箱找回密碼",
+  findPassByPhoneTip: "用手機號找回密碼",
+  resetPass: "重設密碼",
+  current_bind_phone: "當前綁定手機號:",
+  reget: "重新獲取",
+  getVerifyCode: "獲取驗證碼",
+  alreadyRegister: "此手機號已被註冊",
+  alreadyRegister2: "此郵箱地址已被註冊",
+  netErrorRetry: "網絡出小差了，點擊頁面重新加載~",
+  newPhoneNumber: "新的手機號",
+  qrSaveFail: "二維碼保存失敗",
+  qrSavePhoto: "二維碼已保存到相冊",
+  userId: "用戶ID：",
+  addMeToFriend: "加我為好友",
+  validTime: "有效期至",
+  clickRefresh: "點擊刷新",
+  qrUseCount: "此二維碼{count}次有效",
+  share: "分享",
+  savePhoto: "保存圖片",
+  iAm: "我是",
+  addFriendSuccessful: "添加好友成功",
+  addFriendFaceToFace: "面對面加好友",
+  faceToFace: "面對面加好友",
+  inputSameKey: "以下是已輸入同樣數字的好友",
+  sameKeyAddFriend: "和好友輸入同樣數字添加好友",
+  self: "自己",
+  age: "歲",
+  confirmAddFriend: "確認加為好友",
+
+  inputUserId: "請輸入用戶ID",
+  myQr: "我的二維碼",
+  back: "返回",
+  canNotAddSelf: "你不能添加自己到聯系人",
+  notExsit: "該用戶不存在",
+  searchUserId: "搜索用戶ID：",
+
+  remarkInfo: "請備註驗證信息",
+  applyRemark: "申請備註",
+  last4Number: "請輸入對方登錄手機號後4位",
+  checkLast4Number: "驗證手機號後4位",
+  addFriendApply: "添加好友申請",
+  codeInvalid: "密鑰失效，請重新發起",
+  shareFail: "分享失敗",
+
+  addFriendText1: "加為好友",
+  friendNumberCatchTopLimit: "您的好友數量已達上限",
+  friendNumberCatchTopLimitCurrentDay: "當天添加好友已達上限",
+  error_1003: "請稍後重試",
+  error_6033: "無效密鑰或失效，請重新發起",
+  error_6034: "好友總數上限",
+  error_6035: "當日好友總數上限",
+  error_6036: "該用戶手機號為空",
+  error_6037: "手機尾號驗證失敗",
+  error_6040: "分組已存在",
+  error_6050: "二維碼已過期",
+  error_6051: "當日二維碼使用次數已達上限",
+  error_6052: "二維碼使用次數已達上限",
+  error_6053: "今日掃一掃功能次數已達上限",
+  error_6054: "對方已添加您為好友",
+  error_6055: "無效密鑰或失效，請重新發起",
+  error_6066: "賬戶余額不足",
+  error_6067: "紅包已領完",
+  error_6068: "紅包已過期",
+  error_6069: "無法領取專屬紅包",
+  error_6070: "已領取紅包，無法再領取",
+  deletedByFriendHint1: "你還不是TA朋友，",
+  deletedByFriendHint2: "添加好友",
+  deletedByFriendHint3: "繼續聊天",
+  gotoAddFriend: "去添加好友",
+  addFriendGotoGroup: "邀請好友入群",
+  notContacts: "暫無聯系人",
+  notContactsFound: "沒有找到%s相關的好友",
+  remarkStr: "備註",
+  remarkStrHint: "請輸入備註",
+  deleteConfirm: "是否確認刪除好友",
+  deleteFriend: "刪除好友",
+  searchContact: "搜索聯系人",
+  notGroupTip: "還沒有加入群聊",
+  notAddFriend: "還沒有添加新朋友",
+  friendApplyAdd: "好友申請",
+  addSuccess: "添加成功",
+  hasSelectFriend: "已選擇好友",
+
+  myBalance: "我的余額",
+
+  revokeMsgTip: "撤回消息",
+  error_10050: "操作失敗（未找到記錄）",
+  set_manager_tip_1: "您選擇的是群主，已擁有最高的管理權限",
+  envelope: "紅包",
+  uidStr: "用戶ID",
+  showGetDetail: "查看領取詳情",
+  waitOtherEnter: "等待對方加入",
+  isFriend2SExit: "已成為好友，2秒後自動退出",
+
+  sendRedPacket: "發紅包",
+  redPacketNumber: "紅包個數",
+  ge: "個",
+  total: "總數",
+  eachNumber: "單個數量",
+  selectUser: "選擇用戶",
+  number: "數量",
+  redPacketType: "紅包類型",
+  checkVerity: "安全驗證",
+  balance: "賬戶余額",
+  sendTo: "短信驗證碼已發送至",
+
+  pin: "拼手氣紅包",
+  putong: "普通紅包",
+  zhuanshu: "專屬紅包",
+  dajidali: "恭喜發財，大吉大利！",
+
+  redPacketInfo: "紅包詳情",
+  best: "手氣最佳",
+  saveToAccount: "已存入賬戶",
+  minuteOut: "分鐘搶光",
+  hourOut: "小時搶光",
+  showDetail: "查看詳情",
+  maxMemberNumber: "數量不應超過群成員總數",
+  sended: "發出的",
+  get: "已領取",
+  waiting: "等待用戶領取",
+  gong: "個紅包共",
+
+  envelope_get_over: "的紅包已被領完",
+  envelope_get: "領取了",
+  de: "的",
+  envelope_get_message: "領取紅包消息",
+  bind_phone_please: "為了您的賬戶安全，請綁定手機號",
+  delay_bind: "暫不綁定",
+  send_envelope_x: "發出的紅包",
+  send_envelope_back_all: "該紅包超過24小時未領取\n已退還",
+  envelope_x_can_get: "僅{name}可領取",
+  envelope_get_completed: "手慢了，紅包搶光了",
+  send_envelope_back_some: "該紅包超過24小時未領完\n部分已退還",
+  envelope_x_personal: "給%s的專屬紅包",
+  envelope_normal: "普通紅包",
+  login_out_of_date: "登錄已過期，重新登錄",
+  get_envelope_completed: "已被領完",
+  x_is_personal: "專屬",
+
+  error_6072: "已達到單個紅包的最大金額",
+  error_6073: "單個紅包的數量不能低於0.01",
+  error_6074: "紅包功能已關閉",
+
+  distroyAccount: "註銷帳號",
+
+  inComing: "收入",
+  outGoing: "支出",
+  balance_order_detail: "余額明細",
+  type: "類型",
+
+  payType: "支付方式",
+  orderNo: "訂單號",
+  time: "時間",
+  itemDataNotSupport: "當前版本暫不支持",
+
+  manager_change_account: "管理員調賬",
+  groupEnvelope: "群紅包",
+  accountPay: "余額支付",
+  paySuccess: "支付成功",
+
+  groupEnvelopePersonal: "群紅包-專屬紅包",
+  groupEnvelopeNormal: "群紅包-普通紅包",
+  changeAccount: "調賬",
+  groupEnvelopeRandom: "群紅包-拼手氣紅包",
+
+  groupEnvelopeAllBack: "群紅包-全部退還",
+  groupEnvelopeSomeBack: "群紅包-部分退還",
+
+  distroyTips: "為了確認您的賬戶安全<br>我們將在您註銷賬戶前進行以下驗證",
+  safeStatus: "賬戶處於安全狀態",
+  safeTips:
+    "請確保您的賬戶沒有改密、換綁手機/郵箱等敏感操作，賬戶沒有被盜風險。",
+  strikeBalance: "賬戶財產結算",
+  strikeTips: "註銷賬戶後，您賬戶的紅包余額數據都將刪除、且無法恢復。",
+  dataDelete: "賬戶數據刪除",
+  deleteTips:
+    "註銷賬戶後，該賬戶下的所有數據都將刪除、且無法恢復。數據包括您的聊天記錄、加入的群聊、好友關系等內容數據。",
+  applyDistroy: "申請註銷帳號",
+  distroyConform: "確定要註銷賬號嗎？",
+  distroyConformTips: "註銷後將退出登錄，請謹慎操作！",
+  distroy: "確認註銷",
+  submitSuccess: "提交成功",
+  submitted: "您的註銷申請已提交！",
+  helpWord:
+    "平臺將在{day}個工作日內處理您的申請並刪除您的所有數據，如需幫助，請通過官網聯系我們。",
+  know: "我知道了",
+  revoke: "撤銷申請",
+  revokeSuccess: "撤銷成功",
+  recover: "確定要撤銷賬號嗎？",
+  toNormal: "撤銷後賬號狀態變為正常",
+  beRecover: "確認恢復",
+  recoverSuccess: "恢復成功",
+  redPackageCountTip: "單個紅包總數不可低於0.01",
+  closeAccount: "註銷賬號",
+  recoverAccount: "恢復賬戶",
+  recoverAccountTipTitle: "確定要恢復賬號嗎？",
+  recoverAccountTipDesc: "恢復後賬號狀態變為正常",
+  recoverAccountTipOk: "確認恢復",
+
+  closingAccount: "賬戶處於註銷審核中",
+  closingAccountEndTime: "，預計將在{num}個工作日內完成刪除",
+  error_6079: "您已不在群聊，無法領取",
+  error_6075: "重複申請",
+  error_6076: "沒有找到任何注銷申請記錄",
+  error_6077: "注銷審核中",
+  error_6078: "用戶不存在或已注銷，請檢查確認",
+  error_video_pre_err: "文件生成錯誤，數據加載失敗。",
+  err_upload_file: "上傳失敗，請稍後再試",
+  newFriendList: "好友申請列表",
+  err_msg_send_failed: "發送失敗，請稍後再試",
+  error_red_package_tip1: "紅包已過期",
+  upload: "上傳",
+  error_6081: "發送失敗，請稍後重試",
+  privateSetting: "权限设置",
+  atTip: "有人{'@'}你",
+  timeoutLock: "超時鎖定",
+  reTry: "重試",
+  plsEnterPassword6_15: "密碼 (6-15為字母及數字)",
+  plsEnterAccount6_15: "用戶名 (6-15為字母及數字)",
+  removeGroupNotice: "删除群公告通知",
+
+  net_error_no_net: "網絡不可用，請檢查你的網絡設置",
+  groupChatError: "內容加載失敗，點擊重試",
+  legalNotice: "法律聲明",
+  sysNotify: "系統通知",
+  exit_group_tip: "已退出群聊",
+  group_mute_ing: "本群已禁言",
+  w_edit_group_notification: "編輯了群公告",
+  messageNotify: "消息通知",
+  groupEnterLimit: "被邀好友進群數已達上限，請檢查",
+  unRecard: "無法錄音:",
+  hasCreateGroup: "已創建群聊",
+  joinGroupForLink: "通過鏈接加入群聊",
+  be: "被",
+  moveoutGroup: "移出群聊",
+  groupOwnerChangeTo: "群主已變更為",
+  changeGroupNameTo: "更改群名稱為",
+  disbandedGroup: "解散了群聊",
+  bannedFromSpeaking: "禁言",
+  gagWasLifted: "取消了禁言",
+  initiatedGroupGag: "開啟了群禁言",
+  shutDownGroupGag: "關閉了群禁言",
+  target: "對方",
+  groupSizeUpperLimit: "群人數達到上限",
+  topUpperLimit: "置頂達到上限",
+  topMessageRepeate: "置頂消息已重復",
+  userHasReadMessage: "該用戶已讀過此消息",
+  placeholder: {
+    allMuted: "群主或管理员已開啟全體禁言",
+    groupDisbanded: "該群組已被解散",
+    groupBanned: "該群組已被封禁",
+    singleBanned: "你已被禁言",
+    search: "搜索",
+    pleaseInput: "請輸入",
+    sec: "秒",
+    groupNoticePlaceholder: "請輸入群公告..",
+    inputPassword: "請輸入密碼",
+    confirmPassword: "請確認輸入密碼",
+    inputPhoneNumber: "請輸入手機號",
+    select: "請選擇",
+    userOrGroupIDInput: "請輸入{type}",
+    writeMessage: "輸入信息...",
+    inputGroupName: "請輸入群名稱",
+    typingMessage: "在這裡輸入消息",
+    inputName: "請輸入你的暱稱"
+  },
+  withoutQualification: "該用戶未達到添加好友條件",
+  groupMask: "群聊面具",
+  groupMaskDescription: "設置本群昵稱和頭像",
+  pleaseBind: "為了您的賬戶安全，避免添加好友功能受限，請綁定",
+  orStr: "或",
+  andStr: "和",
+  confirmExit: "確認退出",
+  pleaseBindTip1: "為了您的賬戶安全，請綁定",
+
+  skin_item_user_name: "張娜娜",
+  skin_item_msg1: "你好，收到及時回復",
+  skin_item_msg2: "好的，收到了",
+
+  appearance: "外觀",
+  bubbleBgColor: "對話氣泡顏色",
+  chatBackground: "聊天背景",
+  moreSettings: "更多設置",
+
+  highPerformanceModel: "純淨模式",
+  highPerformanceModelDesc: "開啟則不顯示外觀效果",
+  skinPreview: "效果預覽",
+  imageAlpha: "圖案透明度",
+  defaultText: "預設",
+  fontSizePreview: "預覽字體大小，拖動下面的滑塊，可調整字體大小。設置後，會改變所有頁面文本的字體大小。",
+  changedText: "好的，已經更改",
+
+  min: "最小",
+  max: "最大",
+  backgroundColor: "背景色",
+  changeSaveTip: "您已修改設置，是否保存後返回",
+  saveAndBack: "保存並返回",
+  changeAvatar: "更換頭像",
+  appFontSize: "全局字體大小",
+  appFontSizeTip:
+    "預覽字體大小，拖動下面的滑塊，可設置字體大小。設置後，會改變應用內所有文本的字體大小。",
+  maskDesc: "開啟後入群成員將可設置本群昵稱和頭像",
+  groupMaskOpenTip: " %s了群聊面具%s",
+  groupMaskOpenTipNew: "了群聊面具",
+  open: "開啟",
+  close: "關閉",
+  groupMaskOpenMsgErrorTip: "群聊面具功能開關提示",
+  maskOpen: "群聊面具已開啟",
+  maskClose: "群聊面具已關閉",
+
+  rememberPassword: "記住密碼",
+  mobileLogin: "手機登錄",
+  emailLogin: "郵箱登錄",
+  welcomeToQDDChat: "歡迎來到球帝帶",
+  choiceYourAvatar: "請選擇您的頭像",
+
+  transmit: "轉發",
+  multiSelect: "多選",
+  singleShareMsg: "逐條轉發",
+  groupShareMsg: "合並轉發",
+  notGroupFound: "沒有找到{name}相關的群聊",
+
+  recentConversation: "最近的聊天",
+  selectContact: "選擇聯系人",
+  selectGroup: "選擇群聊",
+  noGroup: "暫無群聊",
+  notSelectMessage: "您還沒有選擇消息",
+  hiddenMsg: "隱藏消息",
+  hiddenMsgTip: "是否隱藏消息來源？",
+  yes: "是",
+  no: "否",
+  mergeMessageList: "【合並轉發】聊天記錄",
+  singleMlCount: "【逐條轉發】共{count}條消息",
+  notFoundUser: "未找到用戶",
+  notFoundGroup: "找不到該群聊",
+  notShouldFoundUser: "找不到該用戶",
+  selectAt: "選擇要{'@'}的人",
+  enterPawAgain: "請再次輸入密碼",
+  Someone: "有人{'@'}我",
+  hasSelect: "已選",
+  groupChat: "群聊",
+  groupMember1: "群成員",
+  groupSendMsg: "群發消息",
+  msgNotSupportTransmit: "消息不支持轉發",
+  bindGoogle: "綁定Google",
+  bindFacebook: "綁定Facebook",
+  unbind: "解綁",
+  accountSettings: "賬戶設置",
+  thirdPartyAccountBinding: "第三方賬號綁定",
+  otherSettings: "其他設置",
+  groupChatLoadFailed: "群聊信息加載失敗",
+  addGroupSend: "發起群發",
+  groupSendNoData: "還沒有群發消息記錄",
+  removeBinding: "解除綁定",
+  unBindToastPart1: "解除綁定後，將不能再用",
+  unBindToastPart2: "賬號登錄，要繼續解除嗎？",
+  noOpPermission: "還沒有可操作的權限",
+  bindingPhoneOrEmail: "為了您的賬戶數據安全，請先綁定手機號或郵箱再解除綁定。",
+  unbindingSuccess: "解綁成功",
+  unbindingFair: "解綁失敗",
+  bindingPhoneOrEmailSetPassword:
+    "爲了您的賬戶數據安全，請先綁定手機號或郵箱再設置密碼。",
+
+  showAll: "查看全部",
+  allCount: "全部共{num}個",
+  recoverSuccessLoginAgain: "恢復成功，請重新登錄",
+  createGroupSend: "發起群發",
+  groupSend: "群發",
+  notSelect: "您還沒有選擇",
+  confirmDeleteTitle: "確認刪除選中的群發？",
+  totalGe: "共%s個",
+  sendTotalGe: "發送給（{num}個）",
+  uploadFailed: "上傳失敗",
+  selectMax: "選擇數量到達上限",
+  newFriendApply: "您有新的好友，點擊查看",
+  error_6091: "選擇人數超過上限",
+  error_6092: "消息id已存在",
+  notSupportLoginStyle: "暫不支持,請使用其他方式登錄",
+  pay_password: "支付密碼",
+  pleaseEnter: "請輸入",
+  loadingPage: "頁面加載中",
+  payTip: "您還未設置支付密碼，請完成設置後再進行操作。",
+  deleteRedPackageErrTip: "紅包消息不可撤回",
+  applyIconTip: "申請已提交, 審核通過即可更換頭像",
+  applyIconProgress: "查看申請進度",
+  applyRecord: "申請記錄",
+  repealWithdrawApply: "確定撤銷提現申請嗎？",
+  withdrawNotes: "提現記錄",
+  inReview: "審核中",
+  passTheAudit: "審核通過",
+  rejectedPayment: "審核駁回",
+  revoked: "已撤銷",
+  undone: "撤銷",
+  withdrawalQuantity: "提現數量",
+  withdrawal: "提現",
+  withdrawalBack: "提現退回",
+  update_tip1: "若無法更新",
+  update_tip2: "可前往官網官網下載",
+  update_ing: "更新中",
+  update_install: "立即安裝",
+  installFailed: "未安裝,請稍後重試",
+  installNotFoundFile: "未找到安裝文件,請稍後重試",
+  error_6093: "登錄方式不支持",
+  error_6094: "頭像數量已達上限",
+  deleteIcon: "是否刪除該頭像?",
+  balanceWithdraw: "余額提現",
+  canBalanceWithdraw: "可提現余額",
+  inputPayPassword: "請輸入支付密碼",
+  withdrawalSuccess: "提現成功",
+  personIcon: "個人頭像",
+  groupIcon: "群聊頭像",
+  error_6096: "請勿設置重復、連續數字的支付密碼",
+  forgetPayPassword: "忘記支付密碼",
+  downloadFailedTip: "下載失敗，請稍後重試",
+  error_6097: "余額不足",
+  notSet: "暫不",
+  notSet2: "未設置",
+  passed: "已通過",
+  headRejected: "已駁回",
+  readDeleteTime: "消息焚燒時長",
+  readDeleteTimeTitle: "焚燒時長",
+  retracted_h5: "撤回了",
+  message_h5: "的消息",
+  inputRemark: "請輸入您的備註",
+  authFailed: "授權失敗",
+  userNullError: "該用戶賬號異常",
+  community: "社區",
+  join: "加入群組聊天，探索更多社區活動～",
+  posteviews: "還沒有發佈活動～",
+  views: "次觀看",
+  ended: "活動已結束",
+  configError: "配置錯誤，暫不能開啟",
+  burnMsgOpen: "{name}設置了消息已讀{time}後焚毀",
+  burnMsgClose: "{name}關閉了閱讀即焚，消息不再自動焚毀",
+  burnMsgNotify: "閱讀即焚通知",
+  homeItem3: "社區",
+  messageTimeOut: "消息已過期",
+  burnContentTip: "消息正在焚毀中，是否退出並一鍵焚毀？",
+  cancelLater: "我再看看",
+  burnConfirm: "立即焚燒",
+  setNickNameTimes: "，暱稱在%s天內僅可修改一次",
+  voiceSendErrTip1: "僅支援發送%s-%s秒的語音",
+  textSendErrTip1: "最多輸入%s個字符",
+  pictureSendErrTip1: "僅支援發送%s-%sM的圖片",
+  videoSendErrTip1: "僅支援發送%s-%sM的視頻",
+  your: "您",
+  setNickNameTimes: "{day}天內僅可修改一次",
+  immutable: "暫不可更改",
+  joinCommunity: "加入群組聊天，探索更多社區活動～",
+  noActivity: "還沒有發佈活動～",
+  views: "次觀看",
+  ended: "活動已結束",
+  errorLink: "找不到連結",
+  set_payment_password: "請設置6位支付密碼",
+  unset_payment_password: "請勿設置重複或連續數字的支付密碼",
+  Confirm_Payment_Password: "確認支付密碼",
+  Please_confirm_payment_password: "請再次輸入確認支付密碼",
+  error_6100: "抱歉，您只能每{day}天修改一次個人暱稱",
+  viewDetailed: "查看群成員詳細資訊",
+  inviter: "邀請人",
+  lastLoginTime: "最後登錄時間",
+  DeleteThisUsersgroup: "刪除該用戶在本群發送的群聊消息",
+  AddGroupMembers: "添加群組成員免驗證同意",
+  error_6103: "該用戶為普通成員，沒有權限",
+  error_6104: "被添加者不在群內",
+  error_6108: "帳戶異常",
+  group_remark: "群聊備註",
+  input_group_remark: "請輸入備註內容",
+  await_accepting: "設備授權申請已發送",
+  apply_tips: "此設備不可信或審核未通過，是否發送設備信息進行授權申請？",
+  apply_send: "發送申請",
+  apply_ttl: "設備登錄授權",
+  group_limit500: "每個分組人數上限為500人",
+  select_group: "選擇好友分組",
+  cantfind: "沒有找到{name}相關的聯繫人",
+  error_6109: "該用戶數好友已達上限",
+  error_6106: "請等待設備審核通過後再登錄",
+  selectGroups: '選擇分組',
+  group_member_info: "群員資訊",
+  join_time: "入群時間",
+  inviter_user: "邀請人",
+  last_login_time: "最後登錄時間",
+  sync_group_avatar: '是否同時修改群聊頭像?',
+  invite_fail: '{usernames}帳號異常，邀請失敗！',
+  enterAndCtrl:'Enter 發送 / Enter+Ctrl 換行',
+  enterAndCtrlIOS:'Enter 發送 / Enter+control 換行',
+  scanLogin: '掃碼登錄',
+  formLogin: '密碼登錄',
+  scanText: '球帝帶掃碼登錄',
+  scanSubText: '使用球帝帶APP掃碼登錄',
+  qrcodeExpired: '二維碼已過期',
+  expiredTime10: '此二維碼10分鐘內有效',
+  reflesh: '點擊刷新',
+  scanSuccess: '掃描成功',
+  confromLogin: '請確認登錄',
+  onlineStatus: "在線狀態：",
+  networkDiagnostic: "網絡診斷",
+  "setPaymentPassword": "請設置6位支付密碼",
+  "unSetPaymentPassword": "請勿設置重複或連續數字的支付密碼",
+  "verifyPassword": "驗證支付密碼",
+  "confirmPaymentPassword": "確認支付密碼",
+  "verifyCurrentPassword": "請驗證當前的支付密碼",
+  "reInsetPaymentPassword": "請再次輸入確認支付密碼",
+  "paymentPasswordDifferent": "密碼不一致，請重新輸入",
+  "getPaymentPasswordWay": "請選擇找回密碼的方式",
+  "selectFriendGroup": "選擇好友分組",
+  "selectGroups": "選擇分組",
+  "eachGroupLimitNumber": "每個分組人數上限為{p}人",
+  "selectChatLimitNumber": "最多只能選擇{p}個聊天",
+  "deviceID": "設備ID：",
+  "groupChatRemark": "群聊備註",
+  "pleaseEnterRemarks": "請輸入備註內容",
+  "groupMembershipInfo": "群員信息",
+  "error_6102": "每個分組人數上限為500人",
+  "distroyed": "已註銷",
+  "forbiddened": "已封鎖",
+  "addGroupMemberWithoutApply": "添加群組成員免驗證同意",
+  "error_6109": "該用戶好友人數已達上限",
+  "apply_ttl": "設備登錄授權",
+  "apply_tips": "此設備不可信或審核未通過，是否發送設備信息進行授權申請？",
+  "apply_send": "發送申請",
+  "device_auth_send": "設備授權申請已發送",
+  "using_trusted_device": "該設備登錄存在風險，請使用可信設備登錄",
+  "account_closed": "賬號已註銷",
+  "google_code": "谷歌驗證碼",
+  "input_google_code": "請輸入谷歌驗證碼",
+  "inviterUser": "邀請人",
+  "lastLoginTime": "最後登錄時間",
+  "error_6105": "非可信設備，請提交申請",
+  "error_6106": "請等待設備審核通過後再登錄",
+  "error_6107": "設備審核中未通過",
+  "hasDetailInfoPermission": "查看群成員詳細資訊",
+  "editUserHeaderWithGroupHeader": "是否同時修改群聊頭像？",
+  "darkModel": "深色模式",
+  "darkModelSetDesc": "跟隨系統打開或關閉深色模式",
+  "whiteModel": "淺色模式",
+  "fileNotFound": "未讀取到文件",
+  "openFileInApp": "預覽文件",
+  "openFileOtherApp": "其他應用打開",
+  "openByBrowser": "用瀏覽器下載",
+  "pauseDownload": "暫停下載",
+  "resumeDownload": "繼續下載",
+  "downloadFailed": "下載失敗",
+  "downloading": "下載中",
+  "notdownloaded": "未下載",
+  "cancelDownloading": "文件正在下載中，是否取消下載？",
+  "failedToDownload": "文件下載失敗，是否重新下載？",
+  "cancelDownload": "取消下載",
+  "sending": "發送中",
+  "fileTypeNotSupported": "不支持上傳該文件格式",
+  "fileSizeOut": "文件大小超出",
+  "restrict": "限制",
+  "getWithPhone": "透過手機號碼找回",
+  "getWithEmail": "透過郵箱地址找回",
+  "fileSize": "文件大小",
+  "whetherDownloadFile": "是否下載文件",
+  "downloadFailedTip1": "下載失敗，請檢查網絡後重試",
+  "downloadQueueTip": "已加入下載隊列，等待下載",
+  "notSupportTransmitTip": "消息暫不支持轉發",
+  "voiceSize": "音訊檔案大小不可超過100MB。",
+  "wordSize": "文件檔案大小不可超過100MB。",
+  "apkSize": "安裝包檔案大小不可超過300MB。",
+  "zipSize": "壓縮包檔案大小不可超過300MB。",
+  "groupDeleteUserTip": "同時刪除該用戶在本群發送的訊息",
+  "nPersonRead": "{p}人已讀",
+  "darkModeEnabled": "深色模式已啟用，重新啟動APP後生效",
+  "darkModeOff": "深色模式已關閉，重新啟動APP後生效",
+  "otherUser": "對方",
+  "selectMsgDeleteTime": "選擇保留時間",
+  "selectMsgDeleteTimeTip": "聊天記錄將在超出保留時限後自動刪除，是否繼續？",
+  "msgSaveTime": "聊天記錄保留時間",
+  "msgSaveTimeDesc": "自動清除超過時效的聊天記錄",
+  "hasTimeDeleteMsgPermission": "群聊消息保存時間配置",
+  "accountAbnormal": "帳號異常，邀請失敗！",
+  "onlyBrowser": "僅支援瀏覽器查看",
+  "cancelSendSuccess": "已取消發送",
+  "allStr1": "全域",
+  "modelStr1": "日夜模式",
+  "atMaxCountTip": "最多@ {p} 人",
+
+  "checkNet": "網絡檢測",
+  "autoChangeServer": "一鍵切換到最優線路",
+  "serverLine": "線路",
+  "timeOut": "超時",
+  "serverLineChange": "切換線路",
+  "netCheck": "網絡診斷",
+  "netDelayCheck": "延遲檢測",
+  "netDelay1Check": "互聯網延遲",
+  "msgDelay1Check": "消息延遲",
+  "imgDelay1Check": "圖片延遲",
+  "netLine": "網絡線路",
+  "reCheck": "再測一次",
+  "netChecking": "網絡檢測中",
+  "locationAddr": "歸屬地",
+  "selectPerfectLineTip": "已為您選擇最佳線路",
+  "selectPerfectLineTip2": "當前已是最佳線路，無需切換",
+  "selectPerfectLineTipNoNet": "未識別到最佳線路，請檢查網絡後重試",
+  "changing": "切換中",
+  "changeSuccess": "切換成功",
+  "autoChanging": "智能切換中，請稍後再試",
+
+  "transmitTo": "轉發給",
+  "moreActions": "更多",
+  "refreshing": "刷新",
+  "openInBrowser": "在瀏覽器中打開",
+  "coverFlow": "懸浮",
+  "toolboxAudioCall": "語音通話",
+  "waitAnswer": "等待接聽",
+  "callFinish": "通話結束",
+  "confirmLogin": "確認登錄",
+  "requestTimeOut": "請求超時，請稍後重試",
+  "error_6115": "二維碼已過期",
+  "groupNotFound": "找不到該群組",
+  "userNotFound": "找不到該使用者",
+  "microphoneOpen": "麥克風已開啟",
+  "speakerOpen": "揚聲器已開啟",
+  "voiceWithYou": "邀請您進行語音通話",
+  "fileSizeConnotZero": "檔案大小不能為0",
+  "callInterceptor": "通話中斷",
+  "startCallError": "啟動通話錯誤",
+  "callHungUp": "通話已掛斷",
+  "callRemoteHungUp": "對方已掛斷",
+  "callReceiverError": "接聽通話錯誤",
+  "starting": "啟動中",
+  "startTimeOut": "語音通話發起超時",
+  "callWaitReceiver": "等待對方接聽",
+  "callRemoteNotAccept": "對方未接聽",
+  "callStartSendError": "發起語音通話失敗",
+  "notAccept": "未接聽",
+  "callAccepting": "接聽中",
+  "call": "通話",
+  "callDoing": "線路忙，已取消",
+  "netBad": "當前網路環境較差",
+  "netDown": "網路中斷",
+  "onCalling": "通話中",
+  "error_1303": "您還不是對方的好友",
+  "remoteAccountError": "對方帳號異常",
+  "userOnlineStatus": "在線狀態",
+  "error_100008": "該用戶未達到成為管理員條件",
+  "callTimeLimit": "每次通話最長{p}分鐘",
+  "notLoginOnline": "從未登錄",
+  "callRemoteDoing": "忙線中",
+  "exitLoginIng": "正在退出",
+  "usePhoneRecovery": "使用手機號找回",
+  "useEmailRecovery": "使用電子郵件找回",
+  "otherRecoveryMethods": "其他找回方式",
+  "emailAddress": "電子郵件地址",
+  "phoneErrorOrNotExist": "手機號錯誤或不存在",
+  "phoneNotExist": "手機號不存在",
+  "verificationCodeFailure": "驗證碼獲取失敗，請重試",
+  verificationCodeSent: "驗證碼已發送",
+  hiWelcomeLogin: "Hi~ 歡迎登入",
+  otherLoginMethods: "其他登入方式",
+  usernamePhoneEmail: "用戶名/手機號碼/電子郵件",
+  "error_1303": "您還不是對方的好友",
+  "remoteAccountError": "對方帳號異常",
+  "userOnlineStatus": "在線狀態",
+  "error_100008": "該用戶未達到成為管理員條件",
+  "callTimeLimit": "每次通話最長%s分鐘",
+  "notLoginOnline": "從未登錄",
+  "callRemoteDoing": "忙線中",
+  "exitLoginIng": "正在退出",
+  "searchAreaCode": "搜尋國家/地區",
+  "otherFindStyle": "其他找回方式",
+  "welcome": "歡迎登入",
+  "docReadError": "文件無法讀取，請檢查文件格式是否正確",
+  "errorDetail": "錯誤詳情",
+  "fileReadError": "文件讀取出錯",
+  "docPreviewError": "文件無法預覽",
+  "docPreviewUseOther": "如果由於網絡或機型不兼容等原因，出現文件無法預覽，您可以使用",
+  "netTimeOut": "網絡超時",
+  ip: "IP",
+  imageLoadingRoute: "圖片加載路線",
+  networkChecking: "網絡檢測中...",
+  noPermission: "沒有權限,請獲取權限後登入",
+  pageNotFound: "頁面不存在",
+  serverError: "伺服器故障",
+  databaseError: "資料庫查詢錯誤",
+  networkError: "網絡連接錯誤"
+};
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..81ab98d
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,95 @@
+import { createApp } from 'vue'
+import dayjs from 'dayjs'
+import isToday from 'dayjs/plugin/isToday'
+import isYesterday from 'dayjs/plugin/isYesterday'
+// 导入pinia本地存储
+import pinia from '@/stores/index.js'
+import { createRouterScroller } from 'vue-router-better-scroller'
+import App from './App.vue'
+import router from './router'
+import api from '@/api'
+import {i18n, vantLocales} from './lang/index.js'
+import Avatar from "@/components/avatar/index.vue"
+import vue3GoogleLogin from 'vue3-google-login'
+import { Notify } from 'vant';
+// import 'virtual:uno.css'
+import directive from './directive'
+const { clickoutside, longPress } = directive
+import './assets/quill.snow.css';
+import "ant-design-vue/dist/reset.css";
+import './app.less'
+import './assets/base.css'
+import './assets/reset.css'
+// Vant 桌面端适配
+import '@vant/touch-emulator'
+import "video.js/dist/video-js.css";
+
+/* --------------------------------
+Vant 中有个别组件是以函数的形式提供的，
+包括 Toast，Dialog，Notify 和 ImagePreview 组件。
+在使用函数组件时，unplugin-vue-components
+无法自动引入对应的样式，因此需要手动引入样式。
+------------------------------------- */
+import 'vant/es/toast/style'
+import 'vant/es/dialog/style'
+import 'vant/es/notify/style'
+import 'vant/es/image-preview/style'
+import VConsole from 'vconsole'
+import Vue3Lottie from 'vue3-lottie'
+import { Image } from "ant-design-vue";
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import VueVirtualScroller from 'vue-virtual-scroller'
+import cdnSource from "@/components/cdnSource/index.vue";
+
+dayjs.extend(isYesterday)
+dayjs.extend(isToday)
+//对vant组件进行初始化语言设置
+vantLocales(i18n.global.locale.value)
+new VConsole()
+const app = createApp(App)
+app.directive('click-outside', clickoutside)
+app.directive('long-press', longPress)
+app.use(router)
+app.use(pinia)
+app.use(i18n)
+app.use(Vue3Lottie)
+app.use(VueVirtualScroller)
+app.component('Avatar', Avatar)
+app.component('cdnSource', cdnSource)
+app.provide('$api',api)
+app.use(Notify);
+app.use(vue3GoogleLogin, {
+  clientId: '18623057689-6fn6hjs6k72lt722q132pdjp3dk48q0v.apps.googleusercontent.com'
+})
+
+// 增强了 Vue Router v4 的滚动行为
+app.use(createRouterScroller({
+  selectors: {
+    'window': true,
+    'body': true,
+    '.scrollable': true,
+  },
+}))
+app.use(Image);
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  e.preventDefault();
+  window.deferredPrompt = e;
+})
+
+app.mount('#app')
+
+// 网页每次打开的时候，在 localStorage 中累加
+window.addEventListener('DOMContentLoaded', () => {
+  let num = Number(localStorage.getItem('pageInstanceNum')) || 0
+  num += 1
+  localStorage.setItem('pageInstanceNum', num)
+})
+
+// 刷新进来的时候，会重新storage + 1，相当于先 - 1再 + 1
+window.onbeforeunload = function (e) {
+  let num = Number(localStorage.getItem('pageInstanceNum')) || 0
+  if (num === 0) return
+  num = num * 1 - 1
+  localStorage.setItem('pageInstanceNum', num)
+}
diff --git a/src/router/banner.js b/src/router/banner.js
new file mode 100644
index 0000000..5b7b89f
--- /dev/null
+++ b/src/router/banner.js
@@ -0,0 +1,9 @@
+const route = [
+  {
+      path: '/banner/transferPage',
+      name: 'transferPage',
+      component: () => import('@/views/banner/components/transferPage.vue'),
+  },
+]
+
+export default route
\ No newline at end of file
diff --git a/src/router/community.js b/src/router/community.js
new file mode 100644
index 0000000..a88261d
--- /dev/null
+++ b/src/router/community.js
@@ -0,0 +1,23 @@
+import charts from '@/views/dialogue/charts/index.vue'
+import unocss from '@/views/unocss/index.vue'
+
+const community = () => import('@/views/community/index.vue')
+
+const routes = {
+  path: 'community',
+  name: 'community',
+  component: community,
+  children: [
+    {
+      path: 'eventDetails',
+      name: 'eventDetails',
+      component: () => import('@/views/community/eventDetails.vue'),
+    },
+    {
+      path: 'eventVideoDetails',
+      name: 'eventVideoDetails',
+      component: () => import('@/views/community/eventVideoDetails.vue'),
+    },
+  ]
+}
+export default routes
\ No newline at end of file
diff --git a/src/router/contacts.js b/src/router/contacts.js
new file mode 100644
index 0000000..d6ae195
--- /dev/null
+++ b/src/router/contacts.js
@@ -0,0 +1,321 @@
+import charts from "@/views/dialogue/charts/index.vue";
+import unocss from "@/views/unocss/index.vue";
+
+const contact = () => import("@/views/contact/index.vue");
+
+const routes = {
+  path: "contact",
+  name: "contact",
+  component: contact,
+  children: [
+    {
+      path: "mySearch",
+      name: "mySearch",
+      component: () => import("@/views/contact/mySearch/index.vue")
+    },
+    {
+      path: "new",
+      name: "newFriend",
+      component: () => import("@/views/contact/addFriend/index.vue"),
+      children: [
+        {
+          path: "confirm",
+          name: "confirm",
+          component: () => import("@/views/contact/addFriend/confirm.vue")
+        }
+      ]
+    },
+    {
+      path: "group",
+      name: "group",
+      component: () => import("@/views/contact/group/index.vue"),
+      children: [
+        {
+          path: "detailed",
+          name: "detailed",
+          component: () => import("@/views/contact/group/details.vue"),
+          children: [
+            {
+              path: "groupAdd",
+              name: "groupAdd",
+              component: () => import("@/views/contact/group/groupAdd.vue")
+            },
+            {
+              path: "groupRemove",
+              name: "groupRemove",
+              component: () => import("@/views/contact/group/groupRemove.vue")
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: "myChat",
+      name: "myChat",
+      component: () => import("@/views/contact/myChat/index.vue"),
+      children: [
+        {
+          path: "mySearchs",
+          name: "mySearchs",
+          component: () => import("@/views/contact/myChat/mySearchs.vue")
+        }
+      ]
+    },
+    {
+      path: "detail",
+      name: "detail",
+      component: () => import("@/views/contact/detail/index.vue"),
+      children: [
+        {
+          path: "set",
+          name: "friendSet",
+          component: () => import("@/views/contact/detail/set.vue")
+        }
+      ]
+    },
+    {
+      path: "scan",
+      name: "scan",
+      component: () => import("@/views/contact/scan/index.vue")
+    },
+    {
+      path: "add",
+      name: "add",
+      component: () => import("@/views/contact/add/index.vue"),
+      children: [
+        {
+          path: "search",
+          name: "friendSearch",
+          component: () => import("@/views/contact/add/search.vue"),
+          children: [
+            {
+              path: "result",
+              name: "result",
+              component: () => import("@/views/contact/add/result.vue"),
+              children: [
+                {
+                  path: "apply",
+                  name: "apply",
+                  component: () => import("@/views/contact/add/apply.vue")
+                },
+                {
+                  path: "applyGroup",
+                  name: "applyGroup",
+                  component: () => import("@/views/contact/add/applyGroup.vue")
+                },
+                {
+                  path: "remark",
+                  name: "remark",
+                  component: () => import("@/views/contact/add/remark.vue")
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: "face",
+      name: "face",
+      component: () => import("@/views/contact/face/index.vue"),
+      children: [
+        {
+          path: "next",
+          name: "friendNext",
+          component: () => import("@/views/contact/face/nextStep.vue")
+        }
+      ]
+    },
+    {
+      path: "chat",
+      name: "chat",
+      component: () => import("@/views/contact/chat/index.vue")
+    },
+    {
+      path: "editGroupChatAvatarUrl",
+      name: "editGroupChatAvatarUrl",
+      component: () => import("@/views/contact/chat/components/editGroupChatAvatarUrl.vue"),
+    },
+    {
+      path: "code",
+      name: "code",
+      component: () => import("@/views/contact/qrcode/index.vue")
+    },
+    {
+      path: "groupDetails", // 群详情
+      name: "groupDetails",
+      component: () => import("@/views/contact/chat/groupDetails.vue"),
+      children: [
+        {
+          path: "manageGrounp", // 群详情/管理群
+          name: "manageGrounp",
+          component: () =>
+            import("@/views/contact/chat/components/manageGrounp.vue"),
+          children: [
+            {
+              path: "setAdministrator", // 群详情/管理群/设置管理员
+              name: "setAdministrator",
+              component: () =>
+                import("@/views/contact/chat/components/setAdministrator.vue")
+            },
+            {
+              path: "addAdministrator", // 群详情/管理群/添加管理员
+              name: "addAdministrator",
+              component: () =>
+                import("@/views/contact/chat/components/addAdministrator.vue")
+            },
+            {
+              path: "addDetails", // 群详情/管理群/添加管理员详情
+              name: "addDetails",
+              component: () =>
+                import("@/views/contact/chat/components/addDetails.vue")
+            }
+          ]
+        },
+        {
+          path: "editNameAvatar", // 群详情/群名称和头像
+          name: "editNameAvatar",
+          component: () =>
+            import("@/views/contact/chat/components/editNameAvatar.vue"),
+          children: [
+            {
+              path: "editNameAvatarContent", // 群详情/编辑群名称头像
+              name: "editNameAvatarContent",
+              component: () =>
+                import(
+                  "@/views/contact/chat/components/editNameAvatarContent.vue"
+                )
+            },
+            {
+              path: "editNameAvatarUrl", // 群详情/编辑群名称头像
+              name: "editNameAvatarUrl",
+              component: () =>
+                import("@/views/contact/chat/components/editNameAvatarUrl.vue")
+            }
+          ]
+        },
+        {
+          path: "groupNotice", // 群详情/群公告
+          name: "groupNotice",
+          component: () =>
+            import("@/views/contact/chat/components/groupNotice.vue")
+        },
+        {
+          path: "groupchatMember", // 群详情/群聊成员
+          name: "groupchatMember",
+          component: () =>
+            import("@/views/contact/chat/components/groupchatMember.vue"),
+          children: [
+            {
+              path: "groupUserDetail", // 群详情/群聊成员/查看群用户
+              name: "groupUserDetail",
+              component: () =>
+                import("@/views/contact/chat/components/groupUserDetail.vue")
+            },
+            {
+              path: "setGroupBans", // 群详情/群聊成员/查看群用户/禁言
+              name: "setGroupBans",
+              component: () =>
+                import("@/views/contact/chat/components/setGroupBans.vue")
+            },
+            {
+              path: "InviteFriends", // 群详情/群聊成员/邀请好友
+              name: "InviteFriends",
+              component: () =>
+                import("@/views/contact/chat/components/InviteFriends.vue")
+            }
+          ]
+        },
+        {
+          path: "groupChatLogs", // 群详情/搜索群聊聊天记录
+          name: "groupChatLogs",
+          component: () =>
+            import("@/views/contact/chat/components/groupChatLogs.vue"),
+          children: [
+            {
+              path: "groupMediaRecord", // 群聊天记录/媒体记录
+              name: "groupMediaRecord",
+              component: () =>
+                import("@/views/contact/chat/components/groupMediaRecord.vue")
+            },
+            {
+              path: "groupFileRecord", // 群聊天记录、文件记录
+              name: "groupFileRecord",
+              component: () =>
+                import("@/views/contact/chat/components/groupFileRecord.vue")
+            }
+          ]
+        },
+        {
+          path: "inviteLink", // 群详情/邀请链接
+          name: "inviteLink",
+          component: () =>
+            import("@/views/contact/chat/components/inviteLink.vue"),
+          children: [
+            {
+              path: "manageLinks", // 群详情/邀请链接
+              name: "manageLinks",
+              component: () =>
+                import("@/views/contact/chat/components/manageLinks.vue")
+            }
+          ]
+        },
+        {
+          path: "enterGroupApply", // 进群申请
+          name: "enterGroupApply",
+          component: () =>
+            import("@/views/contact/chat/components/enterGroupApply.vue")
+        }
+      ]
+    },
+    {
+      path: "groupPrompt",
+      name: "groupPrompt",
+      component: () => import("@/views/contact/chat/components/groupPrompt.vue")
+    },
+    {
+      path: "massTexting",
+      name: "massTexting",
+      component: () => import("@/views/contact/massTexting/index.vue"),
+      children: [
+        {
+          path: "selectPage",
+          name: "selectPage",
+          component: () => import("@/views/contact/massTexting/selectPage.vue"),
+          children: [
+            {
+              path: "selectPerson",
+              name: "selectPerson",
+              component: () =>
+                import("@/views/contact/massTexting/selectPerson.vue")
+            },
+            {
+              path: "selectGroup",
+              name: "selectGroup",
+              component: () =>
+                import("@/views/contact/massTexting/selectGroup.vue")
+            },
+            {
+              path: "friendGroup",
+              name: "friendGroup",
+              component: () =>
+                import("@/views/contact/massTexting/friendGroup.vue")
+            },
+            {
+              path: "friendDetails",
+              name: "friendDetails",
+              component: () =>
+                import("@/views/contact/massTexting/friendDetails.vue")
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: "msgSend",
+      name: "msgSend",
+      component: () => import("@/views/contact/massTexting/msgSend.vue")
+    }
+  ]
+};
+export default routes;
diff --git a/src/router/dialogue.js b/src/router/dialogue.js
new file mode 100644
index 0000000..9385c91
--- /dev/null
+++ b/src/router/dialogue.js
@@ -0,0 +1,90 @@
+import charts from "@/views/dialogue/charts/index.vue";
+import unocss from "@/views/unocss/index.vue";
+const dialogue = () => import('@/views/dialogue/index.vue')
+const privateChat = ()=> import('@/views/dialogue/privateChat/index.vue')
+const groupChat = ()=>import('@/views/dialogue/groupChat/index.vue')
+const route={
+    path: 'dialogue',
+    name: 'dialogue',
+    component: dialogue,
+    children: [
+      {
+        path: 'charts',
+        name: 'charts',
+        component: charts,
+      },
+      {
+        path: 'privatechat/:userID',
+        name: 'privatechat',
+        component: privateChat,
+      },
+      {
+        path: 'chatSetings',
+        name: 'chatSetings',
+        component: ()=> import('@/views/dialogue/privateChat/components/chatSeting.vue'),
+        children: [
+            {
+              path: 'detail',
+              name: 'chatSetingDetail',
+              component: ()=> import('@/views/dialogue/privateChat/components/chatSetingDetail.vue')
+            }
+          ]
+      },
+      {
+        path: 'groupChat/:groupID',
+        name: 'groupChat',
+        component: groupChat,
+        children: [
+          {
+            path: 'chatSeting',
+            name: 'chatSeting',
+            component: ()=> import('@/views/dialogue/privateChat/components/chatSeting.vue')
+          },
+        ]
+      },
+      {
+        path: 'logDisplay',
+        name: 'logDisplay',
+        component: () => import('@/views/log/logDisplay.vue'),
+      },
+      {
+        path: 'transmitPage',
+        name: 'transmitPage',
+        component: () => import('@/views/transmit/transmitPage.vue'),
+        children: [
+          {
+            path: 'contactPerson',
+            name: 'contactPerson',
+            component: () => import('@/views/transmit/contactPerson.vue'),
+          },
+          {
+            path: 'selectGroupChat',
+            name: 'selectGroupChat',
+            component: () => import('@/views/transmit/selectGroupChat.vue'),
+          },
+          {
+            path: 'transmitFriendGroup',
+            name: 'transmitFriendGroup',
+            component: () => import('@/views/transmit/transmitFriendGroup.vue'),
+          },
+          {
+            path: 'transmitGroupDetails',
+            name: 'transmitGroupDetails',
+            component: () => import('@/views/transmit/transmitGroupDetails.vue'),
+          }
+        ]
+      },
+      { // 红包详情
+        path: 'redpktDetail',
+        name: 'redpktDetail',
+        component: () => import('@/views/dialogue/groupChat/components/redpktDetail.vue'),
+      },
+      { // 发红包
+        path: 'sendRedpkt',
+        name: 'sendRedpkt',
+        component: () => import('@/views/dialogue/groupChat/components/sendRedpkt.vue'),
+      },
+    ],
+  }
+
+export default route
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..0508eb2
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,134 @@
+// https://router.vuejs.org/zh/
+import { createRouter, createWebHistory } from 'vue-router'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+// 导入路由组件
+import home from '@/views/index.vue'
+
+import my from './my.js'
+import dialogue from "@/router/dialogue.js";
+import contacts from "@/router/contacts.js";
+import community from "@/router/community.js";
+import loginRoute from "./login.js"
+import bannerRoute from "./banner.js"
+// import logRoute from "./log.js"
+// import transmit from "./transmit.js"
+// import { sdkInit } from "@/utils/sdkInit.js";
+import emitter from '@/utils/events';
+import { useUserStore } from "@/stores/user";
+
+NProgress.configure({ showSpinner: true, parent: '#app' })
+
+// 定义路由，每个路由都需要映射到一个组件
+const routes = [
+  {
+    path: '/',
+    redirect: '/firstScreen',
+  },
+  {
+    path: '/firstScreen',
+    name: 'firstScreen',
+    component: () => import('@/views/login/components/firstScreen.vue'),
+  },
+  {
+    path: '/home',
+    redirect: '/home/dialogue',
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/login.vue'),
+    meta: {
+      keepAlive: true //需要被缓存的组件
+    }
+  },
+  {
+    path: '/home',
+    components: {
+      default: home,
+    },
+    children: [
+      dialogue,
+      contacts,
+      my,
+      community
+    ],
+  },
+  ...loginRoute,
+  ...bannerRoute,
+  // ...logRoute
+]
+const notNeedInitSdk = [
+  '/firstScreen',
+  '/signinAccount',
+  '/login',
+  '/forgotPassword',
+  '/otherLogin',
+  '/otherSignin',
+  '/verify',
+  '/setPassword',
+  '/forgotPassword',
+  '/resetPassword',
+  '/welcomePage',
+  '/restoreAccount',
+]
+const blackRouterList = [
+  '/firstScreen',
+  '/login',
+  '/signinAccount',
+  '/userService',
+  '/setPassword',
+  '/forgotPassword',
+  '/resetPassword',
+  '/verify',
+  '/otherSignin',
+  '/otherLogin',
+  '/restoreAccount',
+  '/banner/transferPage',
+]
+const syncNewFriendsRoute = [
+  '/home/dialogue',
+  '/home/contact',
+  '/home/community',
+  '/home/my',
+]
+// 创建路由实例并传递 `routes` 配置
+const router = createRouter({
+  history: createWebHistory(import.meta.env.VITE_APP_PUBLIC_PATH),
+  routes,
+})
+
+router.beforeEach(async (to, from, next) => {
+  // sdk 初始化
+  // if (localStorage.getItem('token')) {
+  //   // NProgress.start()
+  //   // await sdkInit()
+  //   if (!notNeedInitSdk.includes(to.path)) {
+  //     await sdkInit(false)
+  //   }
+  // }
+  // 从别的页面回到首页
+  if (to.path === '/firstScreen' && from.path !== '/') {
+    const { setFirstScreenChecked } = useUserStore();
+    setFirstScreenChecked(true)
+  }
+  // 切换tab 并且不是刷新
+  if (syncNewFriendsRoute.includes(to.path) && from.path !== '/') {
+    emitter.emit('SYNC_NEWFRIENDS_COUNT')
+  }
+  if (!blackRouterList.includes(to.path) && !localStorage.getItem('token')) {
+    // NProgress.start() //
+    // start progress bar
+    sessionStorage.removeItem('againLoadingSign')//跳转到登录页时删除标记
+    next({ path: '/firstScreen', replace: true })
+  } else {
+    next()
+  }
+})
+
+router.afterEach(() => {
+  // NProgress.done() // finish progress bar
+})
+
+// 导出路由实例，并在 `main.js` 挂载
+export default router
diff --git a/src/router/log.js b/src/router/log.js
new file mode 100644
index 0000000..eb18fda
--- /dev/null
+++ b/src/router/log.js
@@ -0,0 +1,9 @@
+const route = [
+  {
+      path: '/log/logDisplay',
+      name: 'logDisplay',
+      component: () => import('@/views/log/logDisplay.vue'),
+  },
+]
+
+export default route
\ No newline at end of file
diff --git a/src/router/login.js b/src/router/login.js
new file mode 100644
index 0000000..ce8dd75
--- /dev/null
+++ b/src/router/login.js
@@ -0,0 +1,61 @@
+const route = [
+    {
+        path: '/userService',
+        name: 'userService',
+        component: () => import('@/views/login/components/userService.vue'),
+    },
+    {
+        path: '/otherLogin',
+        name: 'otherLogin',
+        component: () => import('@/views/login/components/otherLogin.vue'),
+    },
+    {
+        path: '/signinAccount',
+        name: 'signinAccount',
+        component: () => import('@/views/login/components/signinAccount.vue'),
+    },
+    {
+        path: '/otherSignin',
+        name: 'otherSignin',
+        component: () => import('@/views/login/components/otherSignin.vue'),
+    },
+    {
+        path: '/verify',
+        name: 'verify',
+        component: () => import('@/views/login/components/verify.vue'),
+    },
+    {
+        path: '/setPassword',
+        name: 'setPassword',
+        component: () => import('@/views/login/components/setPassword.vue'),
+    },
+    {
+        path: '/forgotPassword',
+        name: 'forgotPassword',
+        component: () => import('@/views/login/components/forgotPassword.vue'),
+    },
+    {
+        path: '/resetPassword',
+        name: 'resetPassword',
+        component: () => import('@/views/login/components/resetPassword.vue'),
+    },
+    {
+        path: '/welcomePage',
+        name: 'welcomePage',
+        component: () => import('@/views/login/components/welcomePage.vue'),
+        children: [
+          {
+            path: 'setAvatar',
+            name: 'setAvatar',
+            component: () => import('@/views/login/components/setAvatar.vue'),
+          }
+        ]
+    },
+    {
+      path: '/restoreAccount',
+      name: 'restoreAccount',
+      component: () => import('@/views/my/security/logout/restoreAccount.vue'),
+    },
+]
+
+export default route
\ No newline at end of file
diff --git a/src/router/my.js b/src/router/my.js
new file mode 100644
index 0000000..e247f74
--- /dev/null
+++ b/src/router/my.js
@@ -0,0 +1,253 @@
+const my = () => import('@/views/my/index.vue')
+
+const routes = {
+  path: 'my',
+  name: 'my',
+  component: my,
+  children: [
+    {
+      path: 'account',
+      name: 'account',
+      component: () => import('@/views/my/account/index.vue'),
+      children: [
+        {
+          path: 'info',
+          name: 'info',
+          component: () => import('@/views/my/account/info/index.vue'),
+          children: [
+            {
+              path: 'modify_name',
+              name: 'modify_name',
+              component: () => import('@/views/my/account/info/modify_name/index.vue'),
+              children: [
+                {
+                  path: 'details',
+                  name: 'details',
+                  component: () => import('@/views/my/account/info/modify_name/details/index.vue'),
+                },
+              ],
+            },
+            {
+              path: 'phone',
+              name: 'phone',
+              component: () => import('@/views/my/account/info/phone/index.vue'),
+            },
+          ],
+        },
+      ],
+    },
+    {
+      path: 'profile',
+      name: 'profile',
+      component: () => import('@/views/my/profile/index.vue'),
+      children: [
+        {
+          path: 'qrcode',
+          name: 'qrcode',
+          component: () => import('@/views/contact/qrcode/index.vue'),
+        },
+        {
+          path: 'user',
+          name: 'user',
+          component: () => import('@/views/my/profile/user.vue'),
+        },
+        {
+          path: 'sign',
+          name: 'sign',
+          component: () => import('@/views/my/profile/sign.vue'),
+        },
+        {
+          path: 'avatar',
+          name: 'selectAvatar',
+          component: () => import('@/views/my/profile/selectAvatar.vue'),
+        },
+        {
+          path: 'applicationRecord',
+          name: 'applicationRecord',
+          component: () => import('@/views/my/profile/applicationRecord.vue'),
+        }
+      ]
+    },
+    {
+      path: 'notDisturb',
+      name: 'notDisturb',
+      component: () => import('@/views/my/notDisturb/index.vue'),
+    },
+    {
+      path: 'qrcode',
+      name: 'myQrcode',
+      component: () => import('@/views/my/qrcode/index.vue'),
+    },
+    {
+      path: 'security',
+      name: 'security',
+      component: () => import('@/views/my/security/index.vue'),
+      children: [
+        {
+          path: 'password',
+          name: 'password',
+          component: () => import('@/views/my/security/password.vue'),
+        },
+        {
+          path: 'setPassword',
+          name: 'setUserPassword',
+          component: () => import('@/views/my/security/setPassword.vue'),
+        },
+        {
+          path: 'phone',
+          name: 'phone',
+          component: () => import('@/views/my/security/phone.vue'),
+          children: [
+            {
+              path: 'phoneNext',
+              name: 'phoneNext',
+              component: () => import('@/views/my/security/phoneNext.vue'),
+            }
+          ]
+        },
+        {
+          path: 'bindPhone',
+          name: 'bindPhone',
+          component: () => import('@/views/my/security/bindPhone.vue'),
+        },
+        {
+          path: 'email',
+          name: 'email',
+          component: () => import('@/views/my/security/email.vue'),
+          children: [
+            {
+              path: 'emailNext',
+              name: 'emailNext',
+              component: () => import('@/views/my/security/emailNext.vue'),
+            }
+          ]
+        },
+        {
+          path: 'bindEmail',
+          name: 'bindEmail',
+          component: () => import('@/views/my/security/bindEmail.vue'),
+        },
+        {
+          path: 'device',
+          name: 'device',
+          component: () => import('@/views/my/security/device.vue'),
+          children: [
+            {
+              path: 'detailId',
+              name: 'detailId',
+              component: () => import('@/views/my/security/deviceDetail.vue'),
+            },
+          ],
+        },
+        {
+          path: 'logoutAccount',
+          name: 'logoutAccount',
+          component: () => import('@/views/my/security/logout/logoutAccount.vue'),
+          children: [
+            {
+              path: 'secureVerify',
+              name: 'secureVerify',
+              component: () => import('@/views/my/security/logout/secureVerify.vue'),
+            },
+            {
+              path: 'submitSuccess',
+              name: 'submitSuccess',
+              component: () => import('@/views/my/security/logout/submitSuccess.vue'),
+            },
+          ],
+        },
+        {
+          path: 'phoneVerify',
+          name: 'phoneVerify',
+          component: () => import('@/views/my/security/pay/phoneVerify.vue'),
+        },
+        {
+          path: 'emailVerify',
+          name: 'emailVerify',
+          component: () => import('@/views/my/security/pay/emailVerify.vue'),
+        },
+        {
+          path: 'modify',
+          name: 'modifyPayPassword',
+          component: () => import('@/views/my/security/pay/modifyPassword.vue'),
+        },
+      ]
+    },
+    {
+      path: 'about',
+      name: 'about',
+      component: () => import('@/views/my/about/index.vue'),
+    },
+    // 字体大小-配置页面
+    {
+      path: 'typeface',
+      name: 'typeface',
+      component: () => import('@/views/my/typeface/index.vue'),
+    },
+    // 网络诊断-配置页面
+    {
+      path: 'network',
+      name: 'network',
+      component: () => import('@/views/my/network/diagnosis.vue'),
+    },
+    // 网络诊断-切换线路
+    {
+      path: 'lines',
+      name: 'lines',
+      component: () => import('@/views/my/network/circuit.vue'),
+    },
+    {
+      path: 'appearance',
+      name: 'appearance',
+      component: () => import('@/views/my/appearance/index.vue'),
+      children: [
+        {
+          path: 'bgconfig',
+          name: 'bgconfig',
+          component: () => import('@/views/my/appearance/appBgConf.vue'),
+        },
+      ]
+    },
+    // {
+    //   path: 'download',
+    //   name: 'download',
+    //   component: () => import('@/views/my/download/index.vue'),
+    // },
+    {
+      path: 'language',
+      name: 'language',
+      component: () => import('@/views/my/language/index.vue'),
+    },
+    {
+      path: 'balance',
+      name: 'balance',
+      component: () => import('@/views/my/balance/index.vue'),
+      children: [
+        {
+          path: 'detail',
+          name: 'balanceDetail',
+          component: () => import('@/views/my/balance/balanceDetail.vue'),
+        },
+        {
+          path: 'packet',
+          name: 'redPacket',
+          component: () => import('@/views/my/balance/redPacket.vue'),
+        },
+        {
+          path: 'withdrawal',
+          name: 'withdrawal',
+          component: () => import('@/views/my/balance/withdrawal.vue'),
+          children: [
+            {
+              path: 'log',
+              name: 'applyLog',
+              component: () => import('@/views/my/balance/applyLog.vue'),
+            },
+          ]
+        }
+      ],
+    },
+  ],
+}
+
+export default routes
diff --git a/src/router/transmit.js b/src/router/transmit.js
new file mode 100644
index 0000000..b6c6910
--- /dev/null
+++ b/src/router/transmit.js
@@ -0,0 +1,17 @@
+// const route = [
+//   {
+//     path: '/transmit/transmitPage',
+//     name: 'transmitPage',
+//     component: () => import('@/views/transmit/transmitPage.vue'),
+//   }, {
+//     path: '/transmit/contactPerson',
+//     name: 'contactPerson',
+//     component: () => import('@/views/transmit/contactPerson.vue'),
+// },{
+//   path: '/transmit/selectGroupChat',
+//   name: 'selectGroupChat',
+//   component: () => import('@/views/transmit/selectGroupChat.vue'),
+// },
+// ]
+
+// export default route
\ No newline at end of file
diff --git a/src/stores/config.js b/src/stores/config.js
new file mode 100644
index 0000000..b1797fd
--- /dev/null
+++ b/src/stores/config.js
@@ -0,0 +1,73 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useConfigStore = defineStore('config', () => {
+  const applyUserList = ref(JSON.parse(window.localStorage.getItem('applyUserList') || '{}'))
+  const setApplyUserList = (data) => {
+    if (data === undefined) return
+    applyUserList.value = data
+    window.localStorage.setItem('applyUserList', JSON.stringify(data))
+  }
+  const contactList = ref(JSON.parse(window.localStorage.getItem('contactList') || '[]'))
+  const setContactList = (data) => {
+    if (data === undefined) return
+    applyUserList.value = data
+    window.localStorage.setItem('contactList', JSON.stringify(data))
+  }
+
+  const isFriendList = ref(JSON.parse(window.localStorage.getItem('isFriendList') || '{}'))
+  const setIsFriendList = (data) => {
+    if (data === undefined) return
+    isFriendList.value = data
+    window.localStorage.setItem('isFriendList', JSON.stringify(data))
+  }
+
+  const chatList = ref(JSON.parse(window.localStorage.getItem('chatList') || '[]'))
+  const setChatList = (data) => {
+    if (data === undefined) return
+    applyUserList.value = data
+    window.localStorage.setItem('chatList', JSON.stringify(data))
+  }
+
+  const detailSearch = ref(JSON.parse(window.localStorage.getItem('detailSearch') || '{}'))
+  const setDetailSearch = (data) => {
+    if (data === undefined) return
+    detailSearch.value = data
+    window.localStorage.setItem('detailSearch', JSON.stringify(data))
+  }
+  const groupId = ref('')
+  const setGroupId = (data) => {
+    if (data === undefined) return
+    groupId.value = data
+  }
+  const friendApplyNotice = ref(window.localStorage.getItem('friendApplyNotice') || 0)
+  const setFriendApplyNotice = (data) => {
+    if (data === undefined) return
+    friendApplyNotice.value = data
+    window.localStorage.setItem('friendApplyNotice', data)
+  }
+  const friendDetailId = ref(window.localStorage.getItem('friendDetailId') || '')
+  const setFriendDetailId = (data) => {
+    if (data === undefined) return
+    friendDetailId.value = data
+    window.localStorage.setItem('friendDetailId', data)
+  }
+  const groupSessionInfo = ref({})
+  const setGroupSessionInfo = (data) => {
+    if (data === undefined) return
+    groupSessionInfo.value = data
+    window.localStorage.setItem('groupSessionInfo', JSON.stringify(data))
+  }
+  const myGroupInfo = ref({})
+  const setmyGroupInfo = (data) => {
+    if (data === undefined) return
+    myGroupInfo.value = data
+    console.log(myGroupInfo.value);
+  }
+
+  
+  return { 
+    friendApplyNotice,
+    setFriendApplyNotice
+  }
+});
diff --git a/src/stores/contact.js b/src/stores/contact.js
new file mode 100644
index 0000000..5127aa1
--- /dev/null
+++ b/src/stores/contact.js
@@ -0,0 +1,478 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+import api from '@/api'
+import { getSDK } from '@/utils/openIM'
+import { useUserStore } from "./user";
+import { storeToRefs } from "pinia";
+const IMSDK = getSDK();
+
+export const useContactStore = defineStore('contact', () => {
+  const userStore = useUserStore();
+  const { userInfo, groupChatConfig } = storeToRefs(userStore);
+  const applyUserList = ref(JSON.parse(window.sessionStorage.getItem('applyUserList') || '{}'))
+  const setApplyUserList = (data) => {
+    if (data === undefined) return
+    applyUserList.value = data
+    window.sessionStorage.setItem('applyUserList', JSON.stringify(data))
+  }
+  // 联系人列表
+  const contactList = ref(JSON.parse(window.sessionStorage.getItem('contactList') || '[]'))
+  const setContactList = (data) => {
+    if (data === undefined) return
+    contactList.value = data
+    window.sessionStorage.setItem('contactList', JSON.stringify(data))
+  }
+  const getContactListFromReq = async () => {
+    try {
+     setTimeout(async () => {
+      const { data } = await IMSDK.getFriendList();
+      console.log('concatListData::', data)
+      const list = data.map((item) => item.friendInfo)
+      setContactList(list)
+     }, 0);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  // 更新联系人
+  // contactItem 新的朋友
+  // remove是否删除
+  const updateContact = (contactItem, isRemove) => {
+    const idx = contactList.value.findIndex((friend) => friend.userID === contactItem.userID);
+    if (idx !== -1) {
+      if (isRemove) {
+        contactList.value.splice(idx, 1);
+        // 删除的时候要把群成员备注的信息清除掉
+        setContactList(contactList.value)
+        return;
+      }
+      contactList.value[idx] = { ...contactItem };
+      setContactList(contactList.value)
+    }
+  }
+
+  const pushNewContact = (contactItem) => {
+    contactList.value.push(contactItem)
+    setContactList(contactList.value)
+  }
+
+  const isFriendList = ref(JSON.parse(window.sessionStorage.getItem('isFriendList') || '{}'))
+  const setIsFriendList = (data) => {
+    if (data === undefined) return
+    isFriendList.value = data
+    window.sessionStorage.setItem('isFriendList', JSON.stringify(data))
+  }
+
+  const dataMap = ref({})
+
+  const getAllGroupOwnerOrAdmin = async (groupID) => {
+    const { data: allGroup } = await IMSDK.getJoinedGroupList()
+    dataMap.value = {}
+    allGroup.forEach(async (items) => {
+      const { data } = await IMSDK.getGroupMemberList({
+        groupID: items.groupID,
+        filter: 2,
+        offset: 0,
+        count: 10000
+      });
+      data.forEach((item) => {
+        if (item.roleLevel !== 20) {
+          if (!dataMap.value[item.userID]) {
+            dataMap.value[item.userID] = item
+          }
+          if (Object.keys(dataMap.value).length > 0) {
+            if (dataMap.value[item.userID] && dataMap.value[item.userID].roleLevel === 60 && item.roleLevel == 100) {
+              dataMap.value[item.userID] = item
+            }
+          }
+        }
+      })
+      // console.log('设置群管理员-----0000，',data)
+      // console.log('设置群管理员-----1111，',dataMap.value)
+      setAllGroupOwnerOrAdmin(dataMap.value)
+    })
+  }
+
+  const chatList = ref(JSON.parse(window.sessionStorage.getItem('chatList') || '[]'))
+  const setChatList = (data) => {
+    if (data === undefined) return
+    chatList.value = data
+    window.sessionStorage.setItem('chatList', JSON.stringify(data))
+  }
+
+  // 群聊列表
+  const getChatGroupList = async () => {
+    const { data } = await IMSDK.getJoinedGroupList()
+    setChatList(data)
+  }
+  const updateGroupList = (item, isRemove = false) => {
+    const idx = chatList.value.findIndex(
+      (group) => group.groupID === item.groupID
+    );
+    if (idx !== -1) {
+      if (isRemove) {
+        chatList.value.splice(idx, 1);
+        setChatList(chatList.value)
+        return;
+      }
+      chatList.value[idx] = { ...item };
+      setChatList(chatList.value)
+    }
+  }
+  const pushNewGroup = (item) => {
+    chatList.value.push(item);
+    setChatList(chatList.value)
+  }
+
+
+  const detailSearch = ref(JSON.parse(window.sessionStorage.getItem('detailSearch') || '{}'))
+  const setDetailSearch = (data) => {
+    if (data === undefined) return
+    detailSearch.value = data
+    window.sessionStorage.setItem('detailSearch', JSON.stringify(data))
+  }
+  const groupId = ref(window.sessionStorage.getItem('groupId') || '')
+  const setGroupId = (data) => {
+    if (data === undefined) return
+    groupId.value = data
+    window.sessionStorage.setItem('groupId', data)
+  }
+  const friendGroupId = ref(window.sessionStorage.getItem('friendGroupId') || '')
+  const setFriendGroupId = (data) => {
+    if (data === undefined) return
+    friendGroupId.value = data
+    window.sessionStorage.setItem('friendGroupId', data)
+  }
+  const friendDetailId = ref(window.sessionStorage.getItem('friendDetailId') || '')
+  const setFriendDetailId = (data) => {
+    if (data === undefined) return
+    friendDetailId.value = data
+    window.sessionStorage.setItem('friendDetailId', data)
+  }
+  const friendCreateCount = ref(window.sessionStorage.getItem('friendCreateCount') || 0)
+  const setFriendCreateCount = (data) => {
+    if (data === undefined) return
+    friendCreateCount.value = data
+    window.sessionStorage.setItem('friendCreateCount', data)
+  }
+  const groupSessionInfo = ref(JSON.parse(window.sessionStorage.getItem('groupSessionInfo') || '{}'))
+  const setGroupSessionInfo = (data) => {
+    if (data === undefined) return
+    groupSessionInfo.value = data
+    window.sessionStorage.setItem('groupSessionInfo', JSON.stringify(data))
+  }
+  // 获取我在当前的群信息
+  const getMyGroupInfo = async () => {
+    const params = {
+      groupID: groupChatConfig.value.groupID,
+      keywordList: [userInfo.value.userID],
+      isSearchUserID: true,
+      isSearchMemberNickname: false,
+      offset: 0,
+      count: 20,
+    }
+    const { data } = await IMSDK.searchGroupMembers(params)
+    setmyGroupInfo(data[0])
+  }
+
+  const myGroupInfo = ref(JSON.parse(window.sessionStorage.getItem('myGroupInfo') || '{}'))
+  const setmyGroupInfo = (data) => {
+    if (!data) return {}
+    myGroupInfo.value = data
+    window.sessionStorage.setItem('myGroupInfo', JSON.stringify(data))
+  }
+  const groupInfo = ref(JSON.parse(window.sessionStorage.getItem('groupInfo')) || '')
+  const setGroupInfo = (data) => {
+    if (data === undefined) return
+    groupInfo.value = data
+    window.sessionStorage.setItem('groupInfo', JSON.stringify(data))
+  }
+
+
+  // 存储群成员信息--旧方法
+  // const groupMemberInfo = ref(JSON.parse(window.sessionStorage.getItem('groupMemberInfo')) || {})
+  // const setGroupMemberInfo = (data) => {
+  //   if (data === undefined) return
+  //   groupMemberInfo.value = data
+  //   window.sessionStorage.setItem('groupMemberInfo', JSON.stringify(data))
+  // }
+
+  // 存储群成员信息--新方法
+  const groupMemberInfoObj = ref({})
+  const groupMemberInfo = ref(groupMemberInfoObj.value)
+  const setGroupMemberInfo = (data) => {
+    if (data === undefined) return
+    groupMemberInfoObj.value = data
+    groupMemberInfo.value = data
+    // console.log('我是获取群成员接口',data)
+  }
+
+  const groupMemberLoading = ref(false)
+  // 获取当前群的群员信息
+  const getGroupMemberInfo = async (groupID) => {
+    const params = {
+      groupID: groupID, // 群 ID
+      filter: 0, // 群成员角色 0所有成员  1群主 2群管理员  3群普通成员  4群管理员和普通成员  5群主和群管理员
+      offset: 0,
+      count: 10000
+    }
+    groupMemberLoading.value = true
+    const res = await IMSDK.getGroupMemberList(params);
+    groupMemberLoading.value = false
+    res.data.forEach((item) => {
+      item.remark = ''
+      item.groupNickName = ''
+      item.isFriend = false
+      contactList.value.forEach((items) => {
+        if (item.userID === items.userID) {
+          item.remark = items.remark
+          item.groupNickName = item.nickname
+          item.isFriend = true
+          item.nickname = items.nickname
+        }
+      })
+    })
+    // 群成员列表
+    setGroupMemberInfo({
+      ...groupMemberInfo.value,
+      [groupID]: res.data
+    })
+  }
+
+ /**
+  * 获取群成员，按需分页加载
+  * @param {*}  
+  */
+  const newGetGroupUserInfoList = async ({groupID,filter,offset,count}) =>{
+    const params = {
+      groupID, // 群 ID
+      filter, // 群成员角色 0所有成员  1群主 2群管理员  3群普通成员  4群管理员和普通成员  5群主和群管理员
+      offset,//这个是总数，比如说每页40条，第一页是0，第二页就是40
+      count//每一页的条数
+    }
+    groupMemberLoading.value = true
+    const res = await IMSDK.getGroupMemberList(params);
+    groupMemberLoading.value = false
+    res.data.forEach((item) => {
+      item.remark = ''
+      item.groupNickName = ''
+      item.isFriend = false
+      contactList.value.forEach((items) => {
+        if (item.userID === items.userID) {
+          item.remark = items.remark
+          item.groupNickName = item.nickname
+          item.isFriend = true
+          item.nickname = items.nickname
+        }
+      })
+    })
+    let list = []
+    if(groupMemberInfoObj.value[groupID]?.length&&offset!=0){
+      list = groupMemberInfoObj.value[groupID]
+    }
+    setGroupMemberInfo({
+      [groupID]: [...list,...res.data]
+    })
+
+  }
+
+  // 删除当前群的群员信息
+  const updateGroupMemberInfo = (groupID, userID) => {
+    const arr = groupMemberInfo.value[groupID]
+    const idx = arr.findIndex(
+      (msg) => msg.userID === userID
+    );
+    if (idx !== -1) {
+      arr.splice(idx, 1);
+    }
+    setGroupMemberInfo({
+      ...groupMemberInfo.value,
+      [groupID]: arr
+    })
+  }
+
+  // 更新当前群的群员信息
+  const updateGroupMemberInfos = (groupID, data) => {
+    const arr = groupMemberInfo.value[groupID]
+    const idx = arr.findIndex(
+      (msg) => msg.userID === data.userID
+    );
+    if (idx !== -1) {
+      arr[idx] = {...arr[idx], ...data}
+
+      setGroupMemberInfo({
+        ...groupMemberInfo.value,
+        [groupID]: arr
+      })
+    }
+  }
+
+  // 更新当前群的群员群昵称信息
+  const updateGroupMemberInfos1 = (groupID, data) => {
+    
+    const arr = groupMemberInfo.value[groupID]
+    if(!arr||!arr.length)return 
+    const idx = arr.findIndex(
+      (msg) => msg.userID === data.userID
+    );
+    if (idx !== -1) {
+      arr[idx].groupNickName = data.nickname
+      arr[idx].faceURL = data.faceURL
+      arr[idx].roleLevel = data.roleLevel
+      arr[idx].muteEndTime = data.muteEndTime
+      arr[idx].ex = data.ex || ''
+      setGroupMemberInfo({
+        ...groupMemberInfo.value,
+        [groupID]: arr
+      })
+    }
+  }
+
+
+  const unreadMsgCount = ref(Number(window.sessionStorage.getItem('unreadMsgCount') || 0))
+  const setUnreadMsgCount = (count) => {
+    if (count === undefined) return
+    console.log('store 内部', count)
+    unreadMsgCount.value = count
+    window.sessionStorage.setItem('unreadMsgCount', count)
+  }
+
+  // 是否有新好友添加
+  const hasNewFriendApply = ref(window.sessionStorage.getItem('hasNewFriendApply') === 'true')
+  const updateNewFriendApply = (hasNewFriend) => {
+    if (hasNewFriend === undefined) return
+    hasNewFriendApply.value = hasNewFriend
+    window.sessionStorage.setItem('hasNewFriendApply', hasNewFriend)
+  }
+
+  const toppingList = ref(JSON.parse(window.sessionStorage.getItem('toppingList') || '[]'))
+  const setToppingList = async () => {
+    toppingList.value = []
+    if (groupInfo.value.conversationID) {
+      const { data = [] } = await api.contact.getGroupTopMsg({
+        conversationID: groupInfo.value.conversationID,
+        groupID: groupInfo.value.groupID
+      })
+      data.forEach(item => {
+        item.isDelStatus = 0
+        contactList.value.forEach((items) => {
+          if (item.sendID === items.userID) {
+            item.senderNickname = items.remark || item.senderNickname
+          }
+        })
+        
+        const groupMember = (groupMemberInfo.value[groupChatConfig.value.groupID] || []).find(member => member.userID === item.sendID) || {}
+        let groupRemark = JSON.parse(groupMember.ex || '{}')?.remark?.value || ''
+        if (myGroupInfo.value.roleLevel === 20) {
+          groupRemark = ''
+        }
+        item.senderNickname = groupRemark || item.senderNickname
+      })
+      toppingList.value = data.length && data.reverse()
+    }
+    window.sessionStorage.setItem('toppingList', JSON.stringify(toppingList.value))
+  }
+  const pinnedPopupClose = () => {
+    toppingList.value.forEach(item => item.isDelStatus = 0)
+  }
+
+  const newFriendApplyCount = ref(Number(window.sessionStorage.getItem('newFriendApplyCount') || 0))
+  const setNewFriendApplyCount = (count) => {
+    if (count === undefined) return
+    newFriendApplyCount.value = count
+    window.sessionStorage.setItem('newFriendApplyCount', count)
+  }
+
+  // 存储所有的群， 筛选中所有的群主和管理员
+  const allGroupOwnerOrAdmin = ref(JSON.parse(window.sessionStorage.getItem('groupMemberInfo')) || '{}')
+  const setAllGroupOwnerOrAdmin = (data) => {
+    if (data === undefined) return
+    allGroupOwnerOrAdmin.value = data
+    window.sessionStorage.setItem('allGroupOwnerOrAdmin', JSON.stringify(data))
+  }
+
+// 群发消息入口展示
+const isGroupSend = ref(JSON.parse(window.sessionStorage.getItem('isGroupSend')) || false)
+const setIsGroupSend = (config,userInfo)=> {
+  const group_role_type = config.batch_send?.group_role_type || []
+  // 群发功能可选角色
+  if(group_role_type.length > 0) {
+   let isGroupOwner = (group_role_type.includes(1) && userInfo.isGroupOwner)
+   let isGroupAdmin  = (group_role_type.includes(2) && userInfo.isGroupAdmin)
+   let isNormalUser  = (group_role_type.includes(3) && !userInfo.isGroupAdmin && !userInfo.isGroupOwner && !userInfo.isInternalUser)
+   let isInternalUser  = (group_role_type.includes(4) && userInfo.isInternalUser)
+   isGroupSend.value = isGroupOwner || isGroupAdmin || isNormalUser || isInternalUser
+  }else {
+    isGroupSend.value = false
+  }
+  window.sessionStorage.setItem('isGroupSend', JSON.stringify(isGroupSend.value))
+}
+
+  const clearStore = () => {
+    contactList.value = []
+    isFriendList.value = {}
+    chatList.value = []
+    detailSearch.value = {}
+    groupId.value = ''
+    friendGroupId.value = ''
+    friendDetailId.value = ''
+    groupMemberInfo.value = {}
+  }
+  return {
+    allGroupOwnerOrAdmin,
+    setAllGroupOwnerOrAdmin,
+    getAllGroupOwnerOrAdmin,
+    toppingList, // 群消息置顶
+    setToppingList,
+    groupMemberInfo,
+    groupMemberInfoObj,
+    newGetGroupUserInfoList,
+    setGroupMemberInfo,
+    getGroupMemberInfo,
+    updateGroupMemberInfo,
+    updateGroupMemberInfos,
+    updateGroupMemberInfos1,
+    getContactListFromReq,
+    updateContact,
+    pushNewContact,
+    friendCreateCount,
+    setFriendCreateCount,
+    detailSearch,
+    setDetailSearch,
+    applyUserList,
+    setApplyUserList,
+    contactList,
+    setContactList,
+    updateGroupList,
+    pushNewGroup,
+    groupId,
+    groupMemberLoading,
+    setGroupId,
+    chatList,
+    getChatGroupList,
+    setChatList,
+    friendGroupId,
+    setFriendGroupId,
+    isFriendList,
+    setIsFriendList,
+    friendDetailId,
+    setFriendDetailId,
+    groupSessionInfo,
+    setGroupSessionInfo,
+    myGroupInfo,
+    setmyGroupInfo,
+    getMyGroupInfo,
+    groupInfo,
+    setGroupInfo,
+    unreadMsgCount,
+    setUnreadMsgCount,
+    hasNewFriendApply,
+    updateNewFriendApply,
+    newFriendApplyCount,
+    setNewFriendApplyCount,
+    clearStore,
+    setIsGroupSend,
+    isGroupSend
+  }
+});
diff --git a/src/stores/index.js b/src/stores/index.js
new file mode 100644
index 0000000..013723c
--- /dev/null
+++ b/src/stores/index.js
@@ -0,0 +1,24 @@
+import { defineStore, createPinia } from 'pinia'
+// 引入持久化插件
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+export const useStore = defineStore({
+  // id: 必须的，在所有 Store 中唯一
+  id: 'index',
+  // state: 返回对象的函数
+  state: () => ({
+    // light || dark
+    mode: '',
+  }),
+  persist: true,
+  // persist: {
+  //   // 本地存储的名称
+  //   key: 'globalState',
+  //   //保存的位置
+  //   storage: window.sessionStorage, //localstorage
+  // },
+})
+
+const pinia = createPinia()
+//pinia使用
+pinia.use(piniaPluginPersistedstate)
+export default pinia
diff --git a/src/stores/modules/common.js b/src/stores/modules/common.js
new file mode 100644
index 0000000..d734bb9
--- /dev/null
+++ b/src/stores/modules/common.js
@@ -0,0 +1,21 @@
+
+import { defineStore } from 'pinia'
+
+
+export const useCommonStore = defineStore('commonStore', {
+  state: () => {
+    return { 
+      timestamp: 0,
+      historyMessageList_common:[]
+    }
+  },
+  actions: {
+    getNewTimestamp(val) {
+      this.timestamp = val
+    },
+    getHistoryMessageList(val){
+      this.historyMessageList_common = val
+      console.log(this.historyMessageList_common,'22222222222')
+    }
+  },
+})
diff --git a/src/stores/modules/contact.js b/src/stores/modules/contact.js
new file mode 100644
index 0000000..b2a50bf
--- /dev/null
+++ b/src/stores/modules/contact.js
@@ -0,0 +1,321 @@
+import { reactive, computed } from 'vue';
+import { getSDK } from '@/utils/openIM'
+import { defineStore } from 'pinia';
+import { feedbackToast } from "@/utils/common";
+import router from "@/router";
+// i18n
+import { i18n } from '@/lang/index'
+const { t } = i18n.global
+const IMSDK = getSDK()
+
+export const useContactStore = defineStore('contact', () => {
+  const state = reactive({
+    friendList: [],
+    groupList: [],
+    blackList: [],
+    recvFriendApplicationList: [],
+    sendFriendApplicationList: [],
+    recvGroupApplicationList: [],
+    sendGroupApplicationList: [],
+    unHandleFriendApplicationNum: 0,
+    unHandleGroupApplicationNum: 0,
+    userCardData: {},
+  });
+
+  const storeFriendList = computed(() => state.friendList);
+  const storeGroupList = computed(() => state.groupList);
+  const storeBlackList = computed(() => state.blackList);
+  const storeRecvFriendApplicationList = computed(() => state.recvFriendApplicationList);
+  const storeSendFriendApplicationList = computed(() => state.sendFriendApplicationList);
+  const storeRecvGroupApplicationList = computed(() => state.recvGroupApplicationList);
+  const storeSendGroupApplicationList = computed(() => state.sendGroupApplicationList);
+  const storeUnHandleFriendApplicationNum = computed(() => state.unHandleFriendApplicationNum);
+  const storeUnHandleGroupApplicationNum = computed(() => state.unHandleGroupApplicationNum);
+  const storeUserCardData = computed(() => state.userCardData);
+  const getFriendListFromReq = async () => {
+    try {
+      const { data } = await IMSDK.getFriendList();
+      // let tmpList: FriendItem[] = [];
+      // data.map(
+      //   (item: TotalUserStruct) =>
+      //     !item.blackInfo && tmpList.push(item.friendInfo!)
+      // );
+      // state.friendList = data.map((user: FullUserItem) => user.friendInfo);
+      state.friendList = data.map((user) => user.friendInfo);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const updateFriendList = (item, isRemove = false) => {
+    const idx = state.friendList.findIndex(
+      (friend) => friend.userID === item.userID
+    );
+    if (idx !== -1) {
+      if (isRemove) {
+        state.friendList.splice(idx, 1);
+        return;
+      }
+      state.friendList[idx] = { ...item };
+    }
+
+    if (item.userID === state.userCardData.baseInfo?.userID) {
+      state.userCardData.baseInfo = { ...item };
+    }
+  }
+  const pushNewFriend = (item) => {
+    state.friendList.push(item);
+  }
+
+  const getGroupListFromReq = async () => {
+    try {
+      const { data } = await IMSDK.getJoinedGroupList();
+      state.groupList = data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  const updateGroupList = (item, isRemove = false) => {
+    const idx = state.groupList.findIndex(
+      (group) => group.groupID === item.groupID
+    );
+    if (idx !== -1) {
+      if (isRemove) {
+        state.groupList.splice(idx, 1);
+        return;
+      }
+      state.groupList[idx] = { ...item };
+    }
+  }
+  const pushNewGroup = (item) => {
+    state.groupList.push(item);
+  }
+  const getBlackListFromReq = async () => {
+    try {
+      const { data } = await IMSDK.getBlackList();
+      state.blackList = data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const updateBlackList = (item, isRemove = false) => {
+    const idx = state.blackList.findIndex(
+      (user) => user.userID === item.userID
+    );
+    if (idx !== -1) {
+      if (isRemove) {
+        state.blackList.splice(idx, 1);
+        return;
+      }
+      state.blackList[idx] = { ...item };
+    }
+  }
+  const pushNewBlack = (item) => {
+    state.blackList.push(item);
+  }
+  const getRecvFriendApplicationListFromReq = async () => {
+    try {
+      const { data } = await IMSDK.getFriendApplicationListAsRecipient();
+      state.recvFriendApplicationList = data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const updateRecvFriendApplicationList = (item) => {
+    const idx = state.recvFriendApplicationList.findIndex(
+      (application) =>
+        application.fromUserID === item.fromUserID
+    );
+    if (idx !== -1) {
+      state.recvFriendApplicationList[idx] = { ...item };
+    }
+  }
+  const pushNewRecvFriendApplication = (item) => {
+    const idx = state.recvFriendApplicationList.findIndex(
+      (application) => application.fromUserID === item.fromUserID
+    );
+    if (idx > -1) {
+      state.recvFriendApplicationList[idx] = { ...item };
+    } else {
+      state.recvFriendApplicationList.push(item);
+    }
+  }
+  const getSendFriendApplicationListFromReq = async() => {
+    try {
+      const { data } = await IMSDK.getFriendApplicationListAsApplicant();
+      state.sendFriendApplicationList = data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const updateSendFriendApplicationList = (item) => {
+    const idx = state.sendFriendApplicationList.findIndex(
+      (application) =>
+        application.toUserID === item.toUserID
+    );
+    if (idx !== -1) {
+      state.sendFriendApplicationList[idx] = { ...item };
+    }
+  }
+  const pushNewSendFriendApplication = (item) => {
+    const idx = state.sendFriendApplicationList.findIndex(
+      (application) => application.toUserID === item.toUserID
+    );
+    if (idx > -1) {
+      state.sendFriendApplicationList[idx] = { ...item };
+    } else {
+      state.sendFriendApplicationList.push(item);
+    }
+  }
+  const getRecvGroupApplicationListFromReq = async() => {
+    try {
+      const { data } = await IMSDK.getGroupApplicationListAsRecipient();
+      state.recvGroupApplicationList = data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const updateRecvGroupApplicationList = (item) => {
+    const idx = state.recvGroupApplicationList.findIndex(
+      (application) =>
+        application.userID === item.userID
+    );
+    if (idx !== -1) {
+      state.recvGroupApplicationList[idx] = { ...item };
+    }
+  }
+  const pushNewRecvGroupApplication = (item) => {
+    const idx = state.recvGroupApplicationList.findIndex(
+      (application) => application.userID === item.userID
+    );
+    if (idx > -1) {
+      state.recvGroupApplicationList[idx] = { ...item };
+    } else {
+      state.recvGroupApplicationList.push(item);
+    }
+  }
+  const getSendGroupApplicationListFromReq = async() => {
+    try {
+      const { data } = await IMSDK.getGroupApplicationListAsApplicant();
+      state.sendGroupApplicationList = data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  const updateSendGroupApplicationList = (item) => {
+    const idx = state.sendGroupApplicationList.findIndex(
+      (application) =>
+        application.groupID === item.groupID
+    );
+    if (idx !== -1) {
+      state.sendGroupApplicationList[idx] = { ...item };
+    }
+  }
+  const pushNewSendGroupApplication = (item) => {
+    const idx = state.sendGroupApplicationList.findIndex(
+      (application) => application.groupID === item.groupID
+    );
+    if (idx > -1) {
+      state.sendGroupApplicationList[idx] = { ...item };
+    } else {
+      state.sendGroupApplicationList.push(item);
+    }
+  }
+  const updateUnHandleFriendApplicationNum = (num) => {
+    state.unHandleFriendApplicationNum = num;
+  }
+  const updateUnHandleGroupApplicationNum = (num) => {
+    state.unHandleGroupApplicationNum = num;
+  }
+  const setUserCardData = (data) => {
+    state.userCardData = { ...data };
+    router.push("userCard");
+  }
+  const updateUserCardMemberInfo = (item) => {
+    if (
+      item.userID !== state.userCardData.groupMemberInfo?.userID ||
+      item.groupID !== state.userCardData.groupMemberInfo?.groupID
+    )
+      return;
+    state.userCardData.groupMemberInfo = { ...item };
+  }
+  const getUserCardData = async (sourceID, groupID) => {
+    let baseInfo;
+    let groupMemberInfo;
+    baseInfo = state.friendList.find((item) => item.userID === sourceID);
+    if (!baseInfo) {
+      const { data } = await IMSDK.getUsersInfo([sourceID]);
+      baseInfo = data[0]?.friendInfo ?? data[0]?.publicInfo ?? undefined;
+    }
+    if (groupID) {
+      const { data } = await IMSDK.getSpecifiedGroupMembersInfo({
+        groupID,
+        userIDList: [sourceID],
+      });
+      groupMemberInfo = data[0];
+    }
+    state.userCardData = {
+      baseInfo,
+      groupMemberInfo,
+    };
+    if (!baseInfo) {
+      feedbackToast({
+        error: t("messageTip.getUserInfoFailed"),
+        message: t("messageTip.getUserInfoFailed"),
+      });
+      return;
+    }
+    router.push("userCard");
+  }
+  const clearContactStore = () => {
+    state.friendList = [];
+    state.groupList = [];
+    state.blackList = [];
+    state.recvFriendApplicationList = [];
+    state.sendFriendApplicationList = [];
+    state.recvGroupApplicationList = [];
+    state.sendGroupApplicationList = [];
+    state.unHandleFriendApplicationNum = 0;
+    state.unHandleGroupApplicationNum = 0;
+    state.userCardData = {};
+  }
+  return {
+    storeFriendList,
+    storeGroupList,
+    storeBlackList,
+    storeRecvFriendApplicationList,
+    storeSendFriendApplicationList,
+    storeRecvGroupApplicationList,
+    storeSendGroupApplicationList,
+    storeUnHandleFriendApplicationNum,
+    storeUnHandleGroupApplicationNum,
+    storeUserCardData,
+    getFriendListFromReq,
+    updateFriendList,
+    pushNewFriend,
+    getGroupListFromReq,
+    updateGroupList,
+    pushNewGroup,
+    getBlackListFromReq,
+    updateBlackList,
+    pushNewBlack,
+    getRecvFriendApplicationListFromReq,
+    updateRecvFriendApplicationList,
+    pushNewRecvFriendApplication,
+    getSendFriendApplicationListFromReq,
+    updateSendFriendApplicationList,
+    pushNewSendFriendApplication,
+    getRecvGroupApplicationListFromReq,
+    updateRecvGroupApplicationList,
+    pushNewRecvGroupApplication,
+    getSendGroupApplicationListFromReq,
+    updateSendGroupApplicationList,
+    pushNewSendGroupApplication,
+    updateUnHandleFriendApplicationNum,
+    updateUnHandleGroupApplicationNum,
+    setUserCardData,
+    updateUserCardMemberInfo,
+    getUserCardData,
+    clearContactStore
+  };
+});
\ No newline at end of file
diff --git a/src/stores/modules/conversation.js b/src/stores/modules/conversation.js
new file mode 100644
index 0000000..3662716
--- /dev/null
+++ b/src/stores/modules/conversation.js
@@ -0,0 +1,253 @@
+import { getSDK } from '@/utils/openIM'
+import { defineStore, createPinia ,storeToRefs} from "pinia";
+import { getLatestInfo, getChatTimeline } from '@/utils/tools'
+import { filter } from 'lodash';
+import { useContactStore } from "@/stores/contact";
+
+const store = createPinia()
+const IMSDK = getSDK()
+
+const useStore = defineStore("conversation", {
+  state: () => ({
+    // 会话列表
+    conversationList: [],
+    // 当前会话
+    currentConversation: {},
+    // 未读消息
+    unReadCount: 0,
+    // 当前群组
+    currentGroupInfo: {},
+    // 群组对象map
+    currentMemberInGroup: {},
+    // 引用消息
+    quoteMessage: undefined,
+    loading: false,
+    // 是否折叠
+    isExpand: false,
+    // 是否编辑
+    conversationEditing: false,
+    // 编辑选中内容
+    selectedItems: [],
+    // 会话所有用户
+    dialogueUsers: [],
+    conversationOffset: 0,
+  }),
+  getters: {
+    storeConversationList: (state) => {
+      state.conversationList.map((item, idx) => {
+        item.latestMsgSendTimeFormat = getChatTimeline(item.latestMsgSendTime)
+        item.idx = idx
+        return item
+      })
+
+      return state.conversationList
+    },
+    storeCurrentConversation: (state) => state.currentConversation,
+    storeUnReadCount: (state) => state.unReadCount,
+    storeCurrentGroupInfo: (state) => state.currentGroupInfo,
+    storeCurrentMemberInGroup: (state) => state.currentMemberInGroup,
+    storeQuoteMessage: (state) => state.quoteMessage,
+    storeLoading: (state) => state.loading,
+    storeIsExpand: (state) => state.isExpand,
+    storeConversationEditing: (state) => state.conversationEditing,
+    storeSelectedItems: (state) => state.selectedItems,
+    storeDialogueUsers: (state) => state.dialogueUsers,
+    storeExpandedNum: (state) => state.conversationList.filter(item => item.isPinned).length,
+    showExpandedIdx: (state) => state.conversationList.findIndex(item => !item.isPinned),
+  },
+  actions: {
+    async getConversationListFromReq(isScrollLoad = false) {
+      try {
+        if (this.loading) return
+        this.loading = true
+        if (!isScrollLoad) {
+          this.conversationOffset = 0
+        }
+        const { data } = await IMSDK.getConversationListSplit({
+          offset: isScrollLoad ? Math.max(0, this.conversationOffset) : 0,
+          count: 20,
+        });
+        this.conversationOffset += data.length
+        this.loading = false
+        const cves = data;
+        const cvesCIds = cves.map(item => item.conversationID)
+        // 这里的目的是要把旧数据里面相同会话id的那一条去掉
+        let beforeList = []
+        if (isScrollLoad) {
+          beforeList = this.conversationList.filter(item => !cvesCIds.includes(item.conversationID))
+        }
+        this.conversationList = [
+          ...(isScrollLoad ? beforeList : []),
+          ...cves,
+        ];
+        for (let item of this.conversationList) {
+          if (item.conversationType === 3) {
+            // 最后一条消息处理逻辑
+            const lastMsgParse = JSON.parse(item.latestMsg || '{}')
+            const groupRemark = await this.getGroupRemark(lastMsgParse.sendID, item.groupID)
+            item.lastGroupRemark = groupRemark
+            item.latestMsg = JSON.stringify({
+              ...lastMsgParse,
+              senderNickname: groupRemark || lastMsgParse.senderNickname
+            })
+          }
+          item.latestInfo = getLatestInfo(item, this.conversationList)
+        }
+        const contactUsers = this.conversationList.filter(item => item.conversationType === 1).map(item => item.userID)
+        this.dialogueUsers =  Array.from(new Set(contactUsers))
+        console.error('同步会话数据???', this.conversationList)
+        return cves.length === 20;
+      } catch (error) {
+        this.loading = false
+        console.error(error);
+        return false;
+      }
+    },
+    async getUnReadCountFromReq() {
+      const { data } = await IMSDK.getTotalUnreadMsgCount();
+      this.unReadCount = data;
+    },
+    updateUnReadCount(data) {
+      this.unReadCount = data;
+    },
+    updateConversationOffset(value) {
+      this.conversationOffset = value;
+    },
+    async getCurrentGroupInfoFromReq(groupID) {
+      // const contactStore = useContactStore();
+      // const sourceID = groupID ?? this.currentConversation.groupID;
+      // const localGroup = contactStore.storeGroupList.find(
+      //   (group) => group.groupID === sourceID
+      // );
+      // if (localGroup) {
+      //   this.currentGroupInfo = localGroup;
+      //   return;
+      // }
+      // try {
+      //   const { data } = await IMSDK.getSpecifiedGroupsInfo([
+      //     sourceID,
+      //   ]);
+      //   this.currentGroupInfo = data[0] ?? {};
+      // } catch (error) {
+      //   console.error(error);
+      // }
+    },
+    updateCurrentGroupInfo(item) {
+      this.currentGroupInfo = { ...item };
+    },
+    async getCurrentMemberInGroupFromReq(groupID) {
+      const userStore = useUserStore();
+
+      // try {
+      //   const { data } = await IMSDK.getSpecifiedGroupMembersInfo({
+      //     groupID: groupID ?? this.currentConversation.groupID,
+      //     userIDList: [userStore.storeSelfInfo.userID],
+      //   });
+      //   this.currentMemberInGroup = data[0] ?? {};
+      // } catch (error) {
+      //   console.error(error);
+      // }
+    },
+    updateCurrentMemberInGroup(item) {
+      this.currentMemberInGroup = { ...item };
+    },
+    updateCurrentConversation(item) {
+      this.currentConversation = { ...item };
+    },
+    // 手动更新会话列表内容
+    async updateConversationList(list = []) {
+      const resArr = []
+      for (const item of list) {
+        // 最后一条消息的发送者改变了或者是新消息, 重新查一下群聊备注，否则直接用之前的
+        // 群聊才有下面的逻辑
+        if (item.conversationType === 3) {
+          // 最后一条消息
+          const oldItem = this.conversationList.find(cov => cov.conversationID === item.conversationID) || {}
+          
+          const latestMsgParse = JSON.parse(item.latestMsg || '{}')
+          const oldLatestMsgParse = JSON.parse(oldItem.latestMsg || '{}')
+          const { sendID: oldSendId } = oldLatestMsgParse
+          const { sendID, senderNickname } = latestMsgParse
+          if (oldSendId !== sendID)  {
+            // 群聊 先去群聊备注里面找一下该用户的群聊备注，如果有就获取，没有就去接口获取
+            const groupRemark = await this.getGroupRemark(sendID, item.groupID)
+            item.latestMsg = JSON.stringify({
+              ...latestMsgParse,
+              senderNickname: groupRemark || senderNickname
+            })
+            item.lastGroupRemark = groupRemark
+          } else {
+            // 如果没变的话还是用之前的群聊备注
+            item.latestMsg = JSON.stringify({
+              ...latestMsgParse,
+              senderNickname: oldItem.lastGroupRemark || latestMsgParse.senderNickname
+            })
+            item.lastGroupRemark = oldItem.lastGroupRemark
+          }
+        }
+
+        item.latestInfo = getLatestInfo(item, this.conversationList)
+        resArr.push(item)
+      }
+      // 更新列表的时候还是要对最后一条消息进行判断
+      this.conversationList = resArr
+    },
+    async getGroupRemark(userID, groupID){
+      return this.getGroupRemarkByCache(userID, groupID) || await this.getGroupRemarkByApi(userID, groupID)
+    },
+    // 获取缓存存中的群聊备注
+    getGroupRemarkByCache(userID, groupID){
+      const contactStore = useContactStore();
+      const {
+        groupMemberInfoObj,
+      } = storeToRefs(contactStore);
+      // const groupMemberInfo = JSON.parse(sessionStorage.getItem('groupMemberInfo')||'{}')
+      const groupMemberInfo = groupMemberInfoObj
+      const groupMemberList = groupMemberInfo[groupID] || []
+      const activeGroupMemberInfo = groupMemberList.find(mem => mem.userID === userID)
+      // 群聊备注存
+      return JSON.parse(activeGroupMemberInfo?.ex || '{}').remark?.value || ''
+    },
+    // 通过api获取群聊中的群聊备注
+    async getGroupRemarkByApi(userID, groupID){
+      const { data } = await IMSDK.getSpecifiedGroupMembersInfo({
+        groupID: groupID,
+        userIDList: [userID],
+      })
+
+      return JSON.parse(data[0]?.ex || '{}')?.remark?.value || ''
+    },
+    delConversationByCID(conversationID) {
+      const idx = this.conversationList.findIndex(
+        (cve) => cve.conversationID === conversationID
+      );
+      if (idx !== -1) {
+        this.conversationList.splice(idx, 1);
+      }
+    },
+    updateQuoteMessage(message) {
+      this.quoteMessage = message;
+    },
+    updateConversationEditing(value) {
+      this.conversationEditing = value;
+    },
+    updateExpanded(expand) {
+      this.isExpand = expand
+    },
+    updateSelectItems(items) {
+      this.selectedItems = items
+    },
+    clearConversationStore() {
+      this.conversationList = [];
+      this.currentConversation = {};
+      this.unReadCount = 0;
+      this.currentGroupInfo = {};
+      this.currentMemberInGroup = {};
+      this.quoteMessage = undefined;
+    }
+  },
+});
+
+export default function useConversationStore() {
+  return useStore(store);
+}
diff --git a/src/stores/modules/membership-info.ts b/src/stores/modules/membership-info.ts
new file mode 100644
index 0000000..6c4f331
--- /dev/null
+++ b/src/stores/modules/membership-info.ts
@@ -0,0 +1,59 @@
+import { defineStore } from "pinia";
+import api from "@/api";
+// 所有成员信息
+export const useFriendStore = defineStore({
+  id: "friendState",
+  state: () => ({
+    memberUserIds: [], // 所有群主用户标识
+    fontSize:16,  // 全局字体大小
+    onLineState: [], // 用户在线状态目前只包括、会话、群聊列表
+    globalRequestPrefix: '', // 当前请求前缀
+  }),
+  getters: {
+    memberFriendIds: (state) => {
+      return state.memberUserIds;
+    },
+    // 计算在线状态
+    computedOnLineState(state) {
+      return (userID: string | number) => {
+        return state.onLineState[userID];
+      };
+    },
+  },
+  actions: {
+    async fetchMemberIdentification() {
+      try {
+        // 调用接口获取群主和群管理员标识
+        const resMemberIdentification:any= await api.user.getMemberIdentification();
+        if (resMemberIdentification.code === 0) {
+          this.memberUserIds = resMemberIdentification.data.userIds;
+          return this.memberUserIds; // 返回获取的标识
+        } else {
+          throw new Error("Failed to fetch member identification");
+        }
+      } catch (error) {
+        console.error("Error fetching member identification:", error);
+        throw error; // 继续抛出错误，以便上层处理
+      }
+    },
+    // 设置全局字体大小
+    seGlobalFontSize(fontSize:number|string) {
+      this.fontSize = fontSize
+    },
+    // 设置用户在线状态
+    SetOnlineStatus(state: any) {
+      this.onLineState = state
+    },
+    // 设置全局请求前缀
+    SetRequestPrefix(prefix : any) {
+      this.globalRequestPrefix = prefix
+    },
+  },
+  // 进行持久化存储
+  persist: {
+    // 本地存储的名称
+    key: 'friendState',
+    //保存的位置
+    storage: window.sessionStorage, // 【localStorage | sessionStorage】
+  },
+});
diff --git a/src/stores/modules/message.js b/src/stores/modules/message.js
new file mode 100644
index 0000000..f134c55
--- /dev/null
+++ b/src/stores/modules/message.js
@@ -0,0 +1,294 @@
+import { storeToRefs,defineStore } from "pinia";
+import { feedbackToast } from "@/utils/common";
+import { MessageType } from "@/utils/constant";
+import { getSDK } from "@/utils/openIM";
+import { useContactStore } from "../contact";
+import {
+  ref,
+  reactive,
+  watchEffect,
+  computed,
+  watch
+} from "vue";
+import { set } from "lodash";
+import { Data } from "emoji-mart";
+
+// // 新引入
+// import {useCommonStore} from "@/stores/modules/common"
+
+
+// //引入结束
+
+const IMSDK = getSDK();
+export const useMessageStore = defineStore("message", () => {
+  const contactStore = useContactStore();
+  const { contactList } = storeToRefs(contactStore);
+  const state = reactive({
+    // historyMessageList: JSON.parse(sessionStorage.getItem('items')) || [],
+    historyMessageList: [],
+    hasMore: true,
+    previewImgList: [],
+    isSdkErr: false
+  });
+  const storeHistoryMessageList = computed(() => state.historyMessageList);
+  const storeHistoryMessageHasMore = computed(() => state.hasMore);
+  const storePreviewImgList = computed(() => state.previewImgList);
+
+
+  // 联系人列表
+  const quoteObj = ref({});
+  const setQuoteObj = data => {
+    if (data === undefined) return;
+    quoteObj.value = data;
+    // window.localStorage.setItem('quoteObj', JSON.stringify(data))
+  };
+
+  const closeQuoteObj = groupId => {
+    if (quoteObj.value[groupId]) {
+      quoteObj.value[groupId].isShow_msgQuote = false;
+      quoteObj.value[groupId].msg_info = {};
+    }
+  };
+  /*
+  * 2024-6-11
+  * 把原数据返回给其他地方使用
+  * 此方法用于，群聊消息中-已读和未读使用
+  */ 
+  const getNewsMessageListData = async (params) => {
+    try {
+      const { data } = await IMSDK.getAdvancedHistoryMessageList(params);
+      // console.error("群聊原数据-----", data);
+      state.historyMessageList = [...data.messageList];
+      return { data };
+    } catch (error) {
+      feedbackToast({ message: "Get news message failed", error });
+    }
+  };
+
+  const getHistoryMessageListFromReq = async params => {
+    console.log('获取群聊天记录接口入参：',params)
+    const isFirstPage =
+      params.startClientMsgID === "" || params.lastMinSeq === 0;
+    try {
+      const { data: tmpData } = await IMSDK.getAdvancedHistoryMessageList(
+        params
+      );
+      console.error('sdk返回的群聊数据',tmpData);
+      const newListData = [
+        ...tmpData.messageList,
+        ...(isFirstPage ? [] : state.historyMessageList)
+      ];
+     
+      newListData.forEach(msg => {
+        //计算未读人数  -1 计算本人
+        if (msg.attachedInfoElem) {
+          const groupReadInfo = msg.attachedInfoElem.groupHasReadInfo;
+          const read = groupReadInfo.hasReadCount || 0;
+          const count = groupReadInfo.groupMemberCount || 0;
+          let unReadCount = count - 1 - read;
+          if (read > 0 && count > 1) {
+            //-1是去除自己
+            if (unReadCount < 0) {
+              unReadCount = 0;
+            }
+          }
+          msg.unreadCount = unReadCount;
+        }
+        const arr = contactList.value.filter(item => item.userID == msg.sendID);
+        msg.senderNickname = arr[0]?.remark
+          ? arr[0].remark
+          : msg.senderNickname;
+
+        // 针对引用已经撤回的消息进行判断
+        if (msg.contentType === 114 && msg.quoteElem && msg.quoteElem.quoteMessage && msg.quoteElem.quoteMessage.clientMsgID) {
+          const idx = state.historyMessageList.findIndex(item => item.clientMsgID === msg.quoteElem.quoteMessage.clientMsgID)
+          if (idx !== -1) {
+            const activeRouteItem = state.historyMessageList[idx]
+            // 如果引用的消息是已经撤回的，那就把当前引用消息的类型也改成已撤回
+            if (activeRouteItem.contentType === 2101) {
+              msg.quoteElem.quoteMessage.contentType = 2101
+            }
+          }
+        }
+        if ([1507, 1511].includes(msg.contentType)) {
+          const notiDetail = JSON.parse(msg.notificationElem.detail)
+          msg.senderNickname = notiDetail.opUser.nickname
+        }
+      });
+      state.historyMessageList = newListData
+      // console.error('本地存完的群聊数据', state.historyMessageList, storeHistoryMessageList.value)
+      state.isSdkErr = false;
+      state.hasMore = !tmpData.isEnd && tmpData.messageList.length === 30;
+      return {
+        messageIDList: tmpData.messageList.map(message => message.clientMsgID),
+        lastMinSeq: tmpData.lastMinSeq
+      };
+    } catch (error) {
+      feedbackToast({ message: "Get history message failed", error });
+      state.hasMore = false;
+      state.isSdkErr = true;
+      return {
+        messageIDList: [],
+        lastMinSeq: 0
+      };
+    }
+  };
+  const pushNewMessage = message => {
+    // const imageUrls = filterPreviewImage([message]);
+    // if (imageUrls.length > 0) {
+    //   state.previewImgList = [...state.previewImgList, ...imageUrls];
+    // }
+    const arr = contactList.value.filter(item => item.userID == message.sendID);
+    message.senderNickname = arr[0]?.remark
+      ? arr[0].remark
+      : message.senderNickname;
+    const groupReadInfo = message.attachedInfoElem.groupHasReadInfo;
+    const read = groupReadInfo.hasReadCount || 0;
+    const count = groupReadInfo.groupMemberCount || 0;
+    let unReadCount = 0;
+    if (read > 0 && count > 1) {
+      //-1是去除自己
+      unReadCount = count - 1 - read;
+      if (unReadCount < 0) {
+        unReadCount = 0;
+      }
+    }
+    // state.historyMessageList.push({...message, unreadCount: unReadCount });
+    state.historyMessageList.push({...message});
+    // console.error('赌东道赌东道赌东道的111',state.historyMessageList);
+  };
+  const updateOneMessage = (message, isUpdateQuoteElem = false) => {
+    const idx = state.historyMessageList.findIndex(
+      msg => msg.clientMsgID === message.clientMsgID
+    );
+    if (idx !== -1) {
+      state.historyMessageList[idx] = {
+        ...state.historyMessageList[idx],
+        ...message
+      };
+
+      // 是否需要把引用消息的类型更新掉
+      if (isUpdateQuoteElem) {
+        state.historyMessageList.forEach((item) => {
+          const clientMsgID = item.quoteElem?.quoteMessage?.clientMsgID
+          // 原来老的引用消息 || 
+          if (item.contentType === 114 || clientMsgID === message.clientMsgID) {
+            if (item.quoteElem && item.quoteElem.quoteMessage) {
+              item.quoteElem.quoteMessage.contentType = 2101
+            }
+          }
+        })
+      }
+      // if (isSuccessCallBack) {
+      //   const imageUrls = filterPreviewImage([message]);
+      //   if (imageUrls.length > 0) {
+      //     state.previewImgList = [...state.previewImgList, ...imageUrls];
+      //   }
+      // }
+    }
+  };
+  const deleteOneMessage = message => {
+    const idx = state.historyMessageList.findIndex(
+      msg => msg.clientMsgID === message.clientMsgID
+    );
+    if (idx !== -1) {
+      state.historyMessageList.splice(idx, 1);
+    }
+  };
+  const clearHistoryMessage = () => {
+    state.historyMessageList = [];
+    // state.previewImgList = [];
+    // console.error('赌东道赌东道赌东道的3333',state.historyMessageList);
+  };
+  const resetCheckState = () => {
+    state.historyMessageList.forEach(message => (message.checked = false));
+    // console.error('赌东道赌东道赌东道的44444',state.historyMessageList);
+  };
+
+  const updatePreviewImgList = imgs => {
+    state.previewImgList = [...state.previewImgList, ...imgs];
+  };
+  const resetHistoryMessageList = () => {
+    state.historyMessageList = [];
+    state.hasMore = true;
+    state.previewImgList = [];
+  };
+  const updateMessageNicknameAndFaceUrl = ({
+    sendID,
+    senderFaceUrl,
+    senderNickname
+  }) => {
+    const tmpList = [...state.historyMessageList].map(message => {
+      if (message.sendID === sendID) {
+        message.senderFaceUrl = senderFaceUrl;
+        message.senderNickname = senderNickname;
+      }
+      return message;
+    });
+    state.historyMessageList = tmpList;
+  };
+  const filterPreviewImage = messages => {
+    return messages
+      .filter(message => {
+        if (message.contentType === MessageType.PictureMessage) {
+          return true;
+        }
+        if (message.contentType === MessageType.OANotification) {
+          let notificationData = {};
+          try {
+            notificationData = JSON.parse(message.notificationElem.detail);
+          } catch (error) {}
+          if (notificationData.mixType === 1) {
+            message.pictureElem.snapshotPicture.url =
+              notificationData.pictureElem.sourcePicture.url;
+            return true;
+          }
+          return false;
+        }
+        return false;
+      })
+      .map(item => item.pictureElem.sourcePicture.url);
+  };
+
+  const checkedConcat = ref([]);
+
+  const updateCheckConcat = value => {
+    checkedConcat.value = value;
+  };
+  // watch(()=>state.historyMessageList,(newV,oldV)=>{
+  //   console.log('监控群聊数据发生变化--newV',newV.length)
+  //   console.log('监控群聊数据发生变化--oldV',oldV.length)
+  //   const CommonStore = useCommonStore();
+  //   CommonStore.getHistoryMessageList(newV)
+  // },{deep:true})
+
+  // 添加红包领取消息
+  const pushRedPackageMessage = message => {
+    state.historyMessageList.push({
+      ...message
+    })
+  }
+
+  return {
+    state,
+    quoteObj,
+    storeHistoryMessageList,
+    storeHistoryMessageHasMore,
+    storePreviewImgList,
+    checkedConcat,
+    updateCheckConcat,
+    setQuoteObj,
+    closeQuoteObj,
+    getNewsMessageListData,
+    getHistoryMessageListFromReq,
+    pushNewMessage,
+    updateOneMessage,
+    deleteOneMessage,
+    clearHistoryMessage,
+    resetCheckState,
+    updatePreviewImgList,
+    resetHistoryMessageList,
+    updateMessageNicknameAndFaceUrl,
+    pushRedPackageMessage
+  };
+});
diff --git a/src/stores/modules/user.js b/src/stores/modules/user.js
new file mode 100644
index 0000000..b1a772f
--- /dev/null
+++ b/src/stores/modules/user.js
@@ -0,0 +1,62 @@
+// import { defineStore, createPinia } from "pinia";
+// const store = createPinia()
+// // import { getAppConfig, getBusinessInfo } from "@/api/user";
+// import { feedbackToast, filterEmptyValue } from "@/utils/common";
+// // import { clearIMProfile } from "@/utils/storage";
+// import useContactStore from "./contact";
+// import useConversationStore from "./conversation";
+// import { getSDK } from '@/utils/openIM'
+// const IMSDK = getSDK();
+
+// const useStore = defineStore("user", {
+//   state: () => ({
+//     selfInfo: {},
+//     isSyncing: false,
+//     appConfig: {},
+//   }),
+//   getters: {
+//     storeSelfInfo: (state) => state.selfInfo,
+//     storeIsSyncing: (state) => state.isSyncing,
+//     storeAppConfig: (state) => state.appConfig,
+//   },
+//   actions: {
+//     async getSelfInfoFromReq() {
+//       // try {
+//       //   const { data } = await IMSDK.getSelfUserInfo();
+//       //   const res = await getBusinessInfo(data.userID);
+//       //   const businessData = res.data.users[0] ?? {};
+//       //   filterEmptyValue(businessData);
+//       //   this.selfInfo = {
+//       //     ...data,
+//       //     ...businessData,
+//       //   };
+//       // } catch (error) {
+//       //   feedbackToast({ error, message: i18nt("messageTip.getUserInfoFailed") });
+//       //   this.userLogout();
+//       // }
+//     },
+//     updateSelfInfo(info) {
+//       this.selfInfo = { ...this.selfInfo, ...info };
+//     },
+//     async getAppConfigFromReq() {
+//       // try {
+//       //   const { data } = await getAppConfig();
+//       //   this.appConfig = data.config;
+//       // } catch (error) {}
+//     },
+//     async userLogout(force) {
+//       const useConversatione = useConversationStore();
+//       const useContact = useContactStore();
+
+//       if (!force) await IMSDK.logout();
+//       // clearIMProfile();
+//       this.selfInfo = {};
+//       useConversatione.clearConversationStore();
+//       useContact.clearContactStore();
+//     },
+//   },
+// });
+
+// export default function useUserStore() {
+//   return useStore(store);
+// }
diff --git a/src/stores/mutation-type.ts b/src/stores/mutation-type.ts
new file mode 100644
index 0000000..679bbd5
--- /dev/null
+++ b/src/stores/mutation-type.ts
@@ -0,0 +1,2 @@
+export const STORAGE_TOKEN_KEY = 'access_token'
+export const STORAGE_LANG_KEY = 'app_lang'
diff --git a/src/stores/user.js b/src/stores/user.js
new file mode 100644
index 0000000..5429159
--- /dev/null
+++ b/src/stores/user.js
@@ -0,0 +1,200 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+import api from '@/api'
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref(window.sessionStorage.getItem('token') || '')
+  const setToken = (data) => {
+    if (data === undefined) return
+
+    token.value = data
+    window.sessionStorage.setItem('token', data)
+  }
+  const userInfo = ref(JSON.parse(window.sessionStorage.getItem('userInfo') || '{}'))
+  const setUserInfo = (data) => {
+    if (data === undefined) return
+    userInfo.value = data
+    window.sessionStorage.setItem('userInfo', JSON.stringify(data))
+  }
+  const firstScreenChecked = ref(false)
+  const setFirstScreenChecked = (data) => {
+    firstScreenChecked.value = data
+  }
+
+  const webSocketObj = ref()
+  const setWebSocketObj = (ws) => {
+    webSocketObj.value = ws
+  }
+
+  const appConfig = ref(JSON.parse(window.sessionStorage.getItem('appConfig') || '{}'))
+  const setAppConfig = (data) => {
+    if (data === undefined) return
+    appConfig.value = data
+    window.sessionStorage.setItem('appConfig', JSON.stringify(data))
+  }
+  // 收入
+  const incomeConfig = ref(JSON.parse(window.sessionStorage.getItem('incomeConfig') || '{}'))
+  const setIncomeConfig = (data) => {
+    if (data === undefined) return
+    incomeConfig.value = data
+    window.sessionStorage.setItem('incomeConfig', JSON.stringify(data))
+  }
+  // 支出
+  const payConfig = ref(JSON.parse(window.sessionStorage.getItem('payConfig') || '{}'))
+  const setPayConfig = (data) => {
+    if (data === undefined) return
+    payConfig.value = data
+    window.sessionStorage.setItem('payConfig', JSON.stringify(data))
+  }
+  // id
+  const payConfigObj = ref(JSON.parse(window.sessionStorage.getItem('payConfigObj') || '{}'))
+  const setPayConfigObj = (data) => {
+    if (data === undefined) return
+    payConfigObj.value = data
+    window.sessionStorage.setItem('payConfigObj', JSON.stringify(data))
+  }
+
+
+  const deviceConfig = ref(JSON.parse(window.sessionStorage.getItem('deviceConfig') || '{}'))
+  const setDeviceConfig = (data) => {
+    if (data === undefined) return
+    deviceConfig.value = data
+    window.sessionStorage.setItem('deviceConfig', JSON.stringify(data))
+  }
+
+  const areaDictList = ref(JSON.parse(window.sessionStorage.getItem('areaDictList') || '[]'))
+  const setAreaDictList = (data) => {
+    if (data === undefined) return
+    areaDictList.value = data
+    window.sessionStorage.setItem('areaDictList', JSON.stringify(data))
+  }
+
+
+  const getAppConfig = async () => {
+    const configRes = await api.user.configGet()
+
+    return configRes.data
+  }
+
+  // 群会话
+  const groupChatConfig = ref(JSON.parse(window.sessionStorage.getItem('groupChatConfig') || '{}'))
+  const setGroupChatConfig = (data) => {
+    if (data === undefined) return
+    if (Object.keys(data).length > 0) {
+      data.contactChecked = [...new Set(data.contactChecked)]
+      data.groupChecked = [...new Set(data.groupChecked)]
+    }
+    groupChatConfig.value = data
+    window.sessionStorage.setItem('groupChatConfig', JSON.stringify(data))
+  }
+  // 群消息推送
+  const groupChatConfigs = ref(JSON.parse(window.sessionStorage.getItem('groupChatConfigs') || '{}'))
+  const setGroupChatConfigs = (data) => {
+    if (data === undefined) return
+    groupChatConfigs.value = data
+    window.sessionStorage.setItem('groupChatConfigs', JSON.stringify(data))
+  }
+  // 私聊消息推送
+  const privateChatConfigs = ref(JSON.parse(window.sessionStorage.getItem('privateChatConfigs') || '{}'))
+  const setPrivateChatConfigs = (data) => {
+    if (data === undefined) return
+    privateChatConfigs.value = data
+    window.sessionStorage.setItem('privateChatConfigs', JSON.stringify(data))
+  }
+
+  const friendApplication = ref(JSON.parse(window.sessionStorage.getItem('friendApplication') || '{}'))
+  const setFriendApplication = (data) => {
+    if (data === undefined) return
+    friendApplication.value = data
+    window.sessionStorage.setItem('friendApplication', JSON.stringify(data))
+  }
+
+
+  // 私聊会话
+  const privateChatConfig = ref(JSON.parse(window.sessionStorage.getItem('privateChatConfig') || '{}'))
+  const setPrivateChatConfig = (data) => {
+    if (data === undefined) return
+    if (Object.keys(data).length > 0) {
+      data.contactChecked = [...new Set(data.contactChecked)]
+      data.groupChecked = [...new Set(data.groupChecked)]
+    }
+    privateChatConfig.value = data
+    window.sessionStorage.setItem('privateChatConfig', JSON.stringify(data))
+  }
+
+  // 群聊消息
+  const groupChatList = ref(JSON.parse(window.sessionStorage.getItem('groupChatList') || '[]'))
+  const setGroupChatList = (data) => {
+    if (data === undefined) return
+    groupChatList.value = data
+    window.sessionStorage.setItem('groupChatList', JSON.stringify(data))
+  }
+
+  // 用户背景配置
+  const userBgSettings = ref(null)
+  const setUserBgSettings = (data) => {
+    userBgSettings.value = data
+  }
+
+  // 记住手机号
+  const rememberPhone = ref(window.localStorage.getItem('rememberPhone') || "")
+  const setRememberPhone = (val) => {
+    window.localStorage.setItem('rememberPhone',val)
+  }
+  // 记住邮箱
+  const rememberEmail = ref(window.localStorage.getItem('rememberEmail') || "")
+  const setRememberEmail = (val) => {
+    window.localStorage.setItem('rememberEmail',val)
+  }
+
+  // 群发选择会话
+  const massTextDataChecked = ref(JSON.parse(window.sessionStorage.getItem('MassTextDataChecked') || '[]'))
+  const setMassTextDataChecked = (data) => {
+    massTextDataChecked.value = data
+    window.sessionStorage.setItem('MassTextDataChecked', JSON.stringify(data))
+  }
+
+  return {
+    friendApplication,
+    setFriendApplication,
+    groupChatConfigs,
+    setGroupChatConfigs,
+    privateChatConfigs,
+    setPrivateChatConfigs,
+    groupChatList,
+    setGroupChatList,
+    privateChatConfig,
+    setPrivateChatConfig,
+    groupChatConfig,
+    setGroupChatConfig,
+    incomeConfig,
+    setIncomeConfig,
+    payConfig,
+    payConfigObj,
+    setPayConfigObj,
+    setPayConfig,
+    token, 
+    setToken, 
+    userInfo, 
+    setUserInfo, 
+    webSocketObj,
+    userBgSettings,
+    setUserBgSettings,
+    setWebSocketObj, 
+    appConfig, 
+    setAppConfig, 
+    getAppConfig, 
+    areaDictList, 
+    setAreaDictList, 
+    deviceConfig, 
+    setDeviceConfig,
+    rememberPhone,
+    setRememberPhone,
+    rememberEmail,
+    setRememberEmail,
+    massTextDataChecked,
+    setMassTextDataChecked,
+    firstScreenChecked,
+    setFirstScreenChecked,
+   }
+});
diff --git a/src/style/common-styles.less b/src/style/common-styles.less
new file mode 100644
index 0000000..24977d2
--- /dev/null
+++ b/src/style/common-styles.less
@@ -0,0 +1,597 @@
+// 1、定义公共样式文件 common-styles.less
+// 2、这里可以定义一些公共的样式问题然后在其他文件中导入使用
+// 3、导入公共样式文件 @import '@/style/common-styles.less';
+.footer-box-content {
+  // background-color: #fff;
+  // min-width: 375px;
+  // max-width: 750px;
+  // box-sizing: border-box;
+  // margin: 0 auto;
+  background-color: #fff;
+  min-width: 375px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  bottom: 16px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+.public-wrap-text {
+  white-space: pre-wrap;
+}
+// flex相关
+// 所有元素水平居中,垂直居中
+.public-fcc {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// 行内所有元素居中
+.public-ifcc {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+// 垂直居中,两端对齐
+.public-flex-sb {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+// 垂直居中,分散对齐
+.public-flex-sa {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+// 剩余空间分配
+.public-fg1 {
+  flex-grow: 1;
+}
+.public-fg2 {
+  flex-grow: 2;
+}
+// 纵向排列
+// 所有元素垂直居中
+.public-fdcc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+// 单个组合模式:
+// 进入弹性布局模式:
+.public-flex {
+  display: flex;
+}
+// 默认情况下就是这个垂直靠左
+.public-fdc {
+  display: flex;
+  flex-direction: column;
+}
+// 文本超出就隐藏并且显示省略号
+.public-hen{
+  //超出的文本隐藏
+  overflow:hidden;
+  //溢出用省略号显示
+  text-overflow:ellipsis; 
+  //溢出不换行 
+  white-space:nowrap;
+}
+// 用于文本溢出两行显示省略号的样式
+.public-text-overflow-2-lines {
+  white-space: pre-wrap;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+
+
+/************************************************************
+** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
+** 否则页面将无法正常显示                                  **
+************************************************************/
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.self-baseline {
+  align-self: baseline;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.grow-0 {
+  flex-grow: 0;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.relative {
+  position: relative;
+}
+
+.ml-2 {
+  margin-left: 2px;
+}
+
+.mt-2 {
+  margin-top: 2px;
+}
+
+.ml-4 {
+  margin-left: 4px;
+}
+
+.mt-4 {
+  margin-top: 4px;
+}
+
+.ml-6 {
+  margin-left: 6px;
+}
+
+.mt-6 {
+  margin-top: 6px;
+}
+
+.ml-8 {
+  margin-left: 8px;
+}
+
+.mt-8 {
+  margin-top: 8px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.ml-12 {
+  margin-left: 12px;
+}
+
+.mt-12 {
+  margin-top: 12px;
+}
+
+.ml-14 {
+  margin-left: 14px;
+}
+
+.mt-14 {
+  margin-top: 14px;
+}
+
+.ml-16 {
+  margin-left: 16px;
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.ml-18 {
+  margin-left: 18px;
+}
+
+.mt-18 {
+  margin-top: 18px;
+}
+
+.ml-20 {
+  margin-left: 20px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.ml-22 {
+  margin-left: 22px;
+}
+
+.mt-22 {
+  margin-top: 22px;
+}
+
+.ml-24 {
+  margin-left: 24px;
+}
+
+.mt-24 {
+  margin-top: 24px;
+}
+
+.ml-26 {
+  margin-left: 26px;
+}
+
+.mt-26 {
+  margin-top: 26px;
+}
+
+.ml-28 {
+  margin-left: 28px;
+}
+
+.mt-28 {
+  margin-top: 28px;
+}
+
+.ml-30 {
+  margin-left: 30px;
+}
+
+.mt-30 {
+  margin-top: 30px;
+}
+
+.ml-32 {
+  margin-left: 32px;
+}
+
+.mt-32 {
+  margin-top: 32px;
+}
+
+.ml-34 {
+  margin-left: 34px;
+}
+
+.mt-34 {
+  margin-top: 34px;
+}
+
+.ml-36 {
+  margin-left: 36px;
+}
+
+.mt-36 {
+  margin-top: 36px;
+}
+
+.ml-38 {
+  margin-left: 38px;
+}
+
+.mt-38 {
+  margin-top: 38px;
+}
+
+.ml-40 {
+  margin-left: 40px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.ml-42 {
+  margin-left: 42px;
+}
+
+.mt-42 {
+  margin-top: 42px;
+}
+
+.ml-44 {
+  margin-left: 44px;
+}
+
+.mt-44 {
+  margin-top: 44px;
+}
+
+.ml-46 {
+  margin-left: 46px;
+}
+
+.mt-46 {
+  margin-top: 46px;
+}
+
+.ml-48 {
+  margin-left: 48px;
+}
+
+.mt-48 {
+  margin-top: 48px;
+}
+
+.ml-50 {
+  margin-left: 50px;
+}
+
+.mt-50 {
+  margin-top: 50px;
+}
+
+.ml-52 {
+  margin-left: 52px;
+}
+
+.mt-52 {
+  margin-top: 52px;
+}
+
+.ml-54 {
+  margin-left: 54px;
+}
+
+.mt-54 {
+  margin-top: 54px;
+}
+
+.ml-56 {
+  margin-left: 56px;
+}
+
+.mt-56 {
+  margin-top: 56px;
+}
+
+.ml-58 {
+  margin-left: 58px;
+}
+
+.mt-58 {
+  margin-top: 58px;
+}
+
+.ml-60 {
+  margin-left: 60px;
+}
+
+.mt-60 {
+  margin-top: 60px;
+}
+
+.ml-62 {
+  margin-left: 62px;
+}
+
+.mt-62 {
+  margin-top: 62px;
+}
+
+.ml-64 {
+  margin-left: 64px;
+}
+
+.mt-64 {
+  margin-top: 64px;
+}
+
+.ml-66 {
+  margin-left: 66px;
+}
+
+.mt-66 {
+  margin-top: 66px;
+}
+
+.ml-68 {
+  margin-left: 68px;
+}
+
+.mt-68 {
+  margin-top: 68px;
+}
+
+.ml-70 {
+  margin-left: 70px;
+}
+
+.mt-70 {
+  margin-top: 70px;
+}
+
+.ml-72 {
+  margin-left: 72px;
+}
+
+.mt-72 {
+  margin-top: 72px;
+}
+
+.ml-74 {
+  margin-left: 74px;
+}
+
+.mt-74 {
+  margin-top: 74px;
+}
+
+.ml-76 {
+  margin-left: 76px;
+}
+
+.mt-76 {
+  margin-top: 76px;
+}
+
+.ml-78 {
+  margin-left: 78px;
+}
+
+.mt-78 {
+  margin-top: 78px;
+}
+
+.ml-80 {
+  margin-left: 80px;
+}
+
+.mt-80 {
+  margin-top: 80px;
+}
+
+.ml-82 {
+  margin-left: 82px;
+}
+
+.mt-82 {
+  margin-top: 82px;
+}
+
+.ml-84 {
+  margin-left: 84px;
+}
+
+.mt-84 {
+  margin-top: 84px;
+}
+
+.ml-86 {
+  margin-left: 86px;
+}
+
+.mt-86 {
+  margin-top: 86px;
+}
+
+.ml-88 {
+  margin-left: 88px;
+}
+
+.mt-88 {
+  margin-top: 88px;
+}
+
+.ml-90 {
+  margin-left: 90px;
+}
+
+.mt-90 {
+  margin-top: 90px;
+}
+
+.ml-92 {
+  margin-left: 92px;
+}
+
+.mt-92 {
+  margin-top: 92px;
+}
+
+.ml-94 {
+  margin-left: 94px;
+}
+
+.mt-94 {
+  margin-top: 94px;
+}
+
+.ml-96 {
+  margin-left: 96px;
+}
+
+.mt-96 {
+  margin-top: 96px;
+}
+
+.ml-98 {
+  margin-left: 98px;
+}
+
+.mt-98 {
+  margin-top: 98px;
+}
+
+.ml-100 {
+  margin-left: 100px;
+}
+
+.mt-100 {
+  margin-top: 100px;
+}
\ No newline at end of file
diff --git a/src/typing.ts b/src/typing.ts
new file mode 100644
index 0000000..2a319f9
--- /dev/null
+++ b/src/typing.ts
@@ -0,0 +1,3 @@
+import type { Ref } from 'vue'
+
+export type MaybeRef<T> = T | Ref<T>
diff --git a/src/use/index.js b/src/use/index.js
new file mode 100644
index 0000000..65beece
--- /dev/null
+++ b/src/use/index.js
@@ -0,0 +1,22 @@
+import {  useEncryption,  useUid,  useCoinId,useEmailLang, useSystem } from "./useTool"
+import { useUpload, useUploadOss } from "./useFile"
+import useLongPress from "./useLongPress"
+
+let use = {
+  // useClone,
+  useEncryption,
+  // useAWSC,
+  useUid,
+  // useDecimal,
+  // useCustomer,
+  // useIsPhone,
+  // useTimezone,
+  useCoinId,
+  useLongPress,
+  useUpload,
+  useUploadOss,
+  useEmailLang,
+  useSystem,
+}
+  
+export default use
diff --git a/src/use/useFile.js b/src/use/useFile.js
new file mode 100644
index 0000000..32e29a7
--- /dev/null
+++ b/src/use/useFile.js
@@ -0,0 +1,58 @@
+import api from '@/api';
+import axios from 'axios';
+
+export const useUpload = (access_permissions, callback) => {
+  return async (fileObj) => {
+    const file = fileObj.file;
+    const ossData = {
+      access_permissions: access_permissions,
+      content_type: file.type,
+      file_name: file.name
+    };
+    const ossRes = await api.identity.ossPutUrl(ossData);
+    const { access_url, put_url } = ossRes.data;
+    const fileRes = await axios({
+      method: 'put',
+      url: put_url,
+      data: file,
+      headers: {
+        'Content-Type': file.type
+      }
+    });
+
+    callback && callback(access_url, file);
+  };
+};
+
+
+
+
+/*
+*
+* oss上传文件
+* @param {File } file 文件对象
+*@param {Number} file_from 1.非聊天场景:管理后台头像上传等; 2.聊天场景
+*
+* ***/
+export const useUploadOss = async (file_from, callback) => {
+  return async (fileObj) => {
+    const file = fileObj.file;
+    const ossData = {
+      content_type: file.type,
+      file_name: file.name,
+      file_from: file_from
+    };
+    const ossRes = await api.identity.ossPutUrl(ossData);
+    const { access_url, put_url } = ossRes.data;
+    const fileRes = await axios({
+      method: 'put',
+      url: put_url,
+      data: file,
+      headers: {
+        'Content-Type': file.type
+      }
+    });
+
+    callback && callback(access_url);
+  };
+}
diff --git a/src/use/useLongPress.js b/src/use/useLongPress.js
new file mode 100644
index 0000000..d548d80
--- /dev/null
+++ b/src/use/useLongPress.js
@@ -0,0 +1,42 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export default function useLongPress(callback = () => {}, ms = 500) {
+  const pressing = ref(false)
+  let timeoutId = null
+
+  const start = () => {
+    timeoutId = setTimeout(() => {
+      callback()
+      start()
+    }, ms)
+  }
+
+  const stop = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+  }
+
+  const onPressDown = () => {
+    pressing.value = true
+    start()
+  }
+
+  const onPressUp = () => {
+    pressing.value = false
+    stop()
+  }
+
+  onMounted(() => {
+    document.addEventListener('touchstart', onPressDown)
+    document.addEventListener('touchend', onPressUp)
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener('touchstart', onPressDown)
+    document.removeEventListener('touchend', onPressUp)
+  })
+
+  return { pressing }
+}
\ No newline at end of file
diff --git a/src/use/usePasteImg.js b/src/use/usePasteImg.js
new file mode 100644
index 0000000..a4ee047
--- /dev/null
+++ b/src/use/usePasteImg.js
@@ -0,0 +1,67 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import { isMobileBrowser } from "@/utils/tools"
+import pasteImgDialog from '@/components/pasteImgDialog/index'
+
+/**
+ * @param {String} targetId 监听粘贴事件的dom ID  #号可写也可以不写
+ * @param {Function} parseOk 粘贴弹窗 点击确定后的回调，一般用来去上传并处理消息列表, 返回base64格式字符串的图片内容
+ */
+export default function usePasteImg({
+  parseOk,
+  targetId,
+}) {
+  const previewUrl = ref('')
+
+  // 粘贴事件回调
+  const handlePasteImg = (e) => {
+    const clp = e.clipboardData;
+    if (clp?.items[0].type.includes("text/plain")) {
+      e.preventDefault()
+      const text = clp.getData("text/plain") || "";
+      document.execCommand('inserttext', false, text)
+    }
+    const imageItems = [...clp.items].filter((item) =>
+      item.type.includes("image"),
+    );
+    // 如果是贴图片，不让它贴进去
+    if (!imageItems.length || isMobileBrowser()) {
+      // 如果是手机就不走下面的逻辑，手机没有截图
+      e.preventDefault();
+      return
+    }
+    e.preventDefault();
+    const [ imgItem ] = imageItems
+    // 贴的是图片
+    // 这里一般只会有一张
+    const blob = imgItem.getAsFile();
+    const reader = new FileReader();
+    reader.onload = () => {
+      previewUrl.value = reader.result
+      pasteImgDialog.show({
+        previewUrl: reader.result,
+        ok: () => {
+          parseOk && parseOk(reader.result)
+        }
+      })
+    };
+    reader.readAsDataURL(blob);
+  }
+
+  onMounted(() => {
+    const target = document.querySelector(`#${targetId.replace(/#/, '')}`)
+    if (target) {
+      target.addEventListener('paste', handlePasteImg)
+    }
+  })
+
+  onUnmounted(() => {
+    const target = document.querySelector(`#${targetId}`)
+    if (target) {
+      target.removeEventListener('paste', handlePasteImg)
+    }
+  })
+
+  return {
+    previewUrl,
+  }
+}
\ No newline at end of file
diff --git a/src/use/usePolling.js b/src/use/usePolling.js
new file mode 100644
index 0000000..78a41bf
--- /dev/null
+++ b/src/use/usePolling.js
@@ -0,0 +1,60 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const DEFAULT_TIME_INTERVAL = 5 * 60 * 1000
+export default function usePolling(pollingFunction = () => {}, timeInterval = DEFAULT_TIME_INTERVAL) {
+  const intervalId = ref(null)
+  const isPolling = ref(false)
+
+  const startInterval = () => {
+    isPolling.value = true
+    // 每隔指定时间执行一次轮询函数
+    intervalId.value = setInterval(() => {
+      pollingFunction()
+    }, timeInterval)
+  }
+
+  const stopInterval = () => {
+    isPolling.value = false
+    // 取消定时器
+    clearInterval(intervalId.value)
+    intervalId.value = null // 将定时器ID重置为null
+  }
+
+  // 手动开始定时器
+  const manualStartInterval = () => {
+    if (!intervalId.value) {
+      startInterval()
+    }
+  }
+
+   // 手动停止定时器
+   const manualStopInterval = () => {
+    if (intervalId.value) {
+      stopInterval()
+    }
+  }
+
+   // 手动调用轮询函数，并重新计时
+   const manualCallPollingFunction = () => {
+    // 停止定时器
+    manualStopInterval()
+    
+    // 调用轮询函数
+    pollingFunction()
+    
+    // 重新开始定时器
+    manualStartInterval()
+  }
+
+  // 在组件销毁时停止定时器，避免内存泄漏
+  onUnmounted(() => {
+    stopInterval()
+  })
+
+  return {
+    isPolling,
+    manualStartInterval,
+    manualStopInterval,
+    manualCallPollingFunction
+  }
+}
\ No newline at end of file
diff --git a/src/use/useTool.js b/src/use/useTool.js
new file mode 100644
index 0000000..e9e47d1
--- /dev/null
+++ b/src/use/useTool.js
@@ -0,0 +1,261 @@
+import JSEncrypt from 'jsencrypt'
+import { Base64 } from 'js-base64'
+import api from '@/api'
+// import dayjs from 'dayjs'
+// import utc from 'dayjs/plugin/utc'
+// import timezone from 'dayjs/plugin/timezone'
+// // import { useRouter } from 'vue-router'
+// import router from '../router/index'
+// import { storeToRefs } from 'pinia'
+// import { useUserStore } from '@/stores/user'
+
+// dayjs.extend(utc)
+// dayjs.extend(timezone)
+
+// const userStore = useUserStore()
+// const { userInfo } = storeToRefs(userStore)
+
+export const useEncryption = async () => {
+  const res = await api.login.getPubKey()
+  const { pub_key, pub_key_id } = res.data
+  const encryptor = new JSEncrypt()  // 创建加密对象实例
+
+  encryptor.setPublicKey('-----BEGIN PUBLIC KEY-----' + Base64.decode(pub_key) + '-----END PUBLIC KEY-----') //设置公钥
+
+  return { encryptor, pub_key_id }
+}
+
+// export const useClone = (obj) => {
+//   return JSON.parse(JSON.stringify(obj))
+// }
+
+// export const useAWSC = async (callback) => {
+//   let NCObj = null
+//   const res = await api.user.configGet()
+//   const { captcha } = res.data || {}
+
+//   window.AWSC.use("nc", function (state, module) {
+//   // 初始化
+//     NCObj = module.init({
+//       // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+//       appkey: captcha.app_key,
+//       //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
+//       scene: captcha.scene_id,
+//       // 声明滑动验证需要渲染的目标ID。
+//       renderTo: "nc",
+//       //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+//       success: function (data) {
+//         callback && callback(JSON.stringify(data), NCObj)
+//       },
+//       // 滑动验证失败时触发该回调参数。
+//       fail: function (failCode) {
+//         window.console && console.log(failCode)
+//       },
+//       // 验证码加载出现异常时触发该回调参数。
+//       error: function (errorCode) {
+//         window.console && console.log(errorCode)
+//       }
+//     });
+//   })
+// }
+
+export const useUid = () => {
+  let navigator_info = window.navigator
+  let screen_info = window.screen
+  let uid = navigator_info.mimeTypes.length
+
+  uid += navigator_info.userAgent.replace(/\D+/g, '')
+  uid += navigator_info.plugins.length
+  uid += screen_info.height || ''
+  uid += screen_info.width || ''
+  uid += screen_info.pixelDepth || ''
+
+  return uid
+}
+
+// // 截取两位小数,补0
+// export const useDecimal = (num, decimalPlaces) => {
+//   if (num === undefined) return
+
+//   num += ''
+//   num = num.indexOf(".") < 0 ? num+'.' : num
+  
+//   let newNum = num.substr(0, num.indexOf(".")+decimalPlaces+1)
+//   let rs = newNum.indexOf('.')
+
+//   if (rs<0) { 
+//     newNum += '.00'
+//   } 
+
+//   while (newNum.length <= rs + decimalPlaces) { 
+//     newNum += '0'
+//   } 
+
+//   return newNum
+// }
+
+// export const useCustomer = async (backPath) => {
+//   // const router = useRouter()
+//   const res = await api.user.configGet()
+//   const { customer_support } = res.data || {}
+//   const { domains } = customer_support || {}
+//   let customerDomain = domains.split(',')[0]
+
+//   customerDomain = customerDomain.startsWith('http') ? customerDomain : 'https://' + customerDomain
+
+//   // window.open(customerDomain)
+
+//   // console.log(router);
+
+//   customerDomain = customerDomain + '/#/index?deviceId='+useUid()
+
+//   router.push({
+//     path: '/Webview',
+//     query: { 
+//       url: customerDomain,
+//       isTitle: false,
+//       backPath
+//     }
+//   })
+// }
+
+// export const useIsPhone = (phone) => {
+//   // return /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/.test(phone)
+//   return !isNaN(phone) && phone.length >= 7 && phone.length <= 11
+// }
+
+// export const useTimezone = (time) => {
+//   if (time && userInfo.value.timezone) {
+//     // time = time+'Z'
+//     // if (time.endsWith('Z')) {
+//     //   time = time.replace('Z', '')
+//     // }
+
+//     return dayjs(time).tz(userInfo.value.timezone).format('YYYY-MM-DD HH:mm:ss')
+//   } else {
+//     return time
+//   }
+// }
+export const useCoinId = async(coin_id) => {
+  if (coin_id !== undefined) {
+    await api.user.userUpdate({ currency_id: coin_id })
+  } else {
+    const { data } = await api.user.userInfo()
+    return data.currency_id
+  }
+}
+
+// 转换当前语言-邮箱发送
+export const useEmailLang = () => {
+  let navLang = 'us'
+    if (navigator.language === 'zh-CN') {
+      navLang = 'zh-cn'
+    } else if (navigator.language === 'en') {
+      navLang = 'us'
+    } else if (navigator.language === 'zh-TW') {
+      navLang = 'zh-hant-cn'
+    } else if (navigator.language === 'vi') {
+      navLang = 'vi' // 越南
+    } else if (navigator.language === 'th') {
+      navLang = 'th' // 泰语
+    } else if (navigator.language === 'id') {
+      navLang = 'id' // 印尼
+    } else if (navigator.language === 'pt-BR') {
+      navLang = 'pt-br' // 巴西
+    }
+  let configLang = ''
+  if (localStorage.getItem('language') === 'zh-cn') {
+    configLang = 'zh-cn'
+  } else if (localStorage.getItem('language') === 'us') {
+    configLang = 'us'
+  } else if (localStorage.getItem('language') === 'zh-hant-cn') {
+    configLang = 'zh-hant-cn'
+  } else if (localStorage.getItem('language') === 'vi-VN') {
+    configLang = 'vi' // 越南
+  } else if (localStorage.getItem('language') === 'th') {
+    configLang = 'th' // 泰语
+  } else if (localStorage.getItem('language') === 'id') {
+    configLang = 'id' // 印尼
+  } else if (localStorage.getItem('language') === 'pt-br') {
+    configLang = 'pt-br' // 巴西
+  }
+  const language = configLang || navLang;
+  console.log('navigator.language',language);
+  return language
+}
+
+// // 设备判断
+// export const usePhoneOs = () => {
+//   let u = navigator.userAgent
+
+//   let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
+
+//   let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+
+//   console.log('usePhoneOs',navigator.userAgent);
+//   if (isAndroid) {
+//     return 'Android'
+
+//   }
+//   if (isiOS) {
+
+//     return 'IOS'
+
+//   }
+//   return ''
+// }
+export const usePhoneOs = () => {
+  // 获取用户代理字符串 
+  var userAgent = navigator.userAgent || navigator.vendor || window.opera; 
+  // 判断是否为iOS设备 
+  if (/iPad|iPhone|iPod|Mac/.test(userAgent) && !window.MSStream) { 
+    return 'IOS'
+  } 
+  // 判断是否为安卓设备 
+  else if (/android/i.test(userAgent)) {
+    return 'Android'
+  } 
+  // 其他设备 
+  else { 
+    return ''
+  }
+}
+
+// 判断当前系统
+export const useSystem = () => {
+  /**Platform ID
+    IOSPlatformID        = 1
+    AndroidPlatformID    = 2
+    WindowsPlatformID    = 3
+    OSXPlatformID        = 4
+    WebPlatformID        = 5
+    MiniWebPlatformID    = 6
+    LinuxPlatformID      = 7
+    AndroidPadPlatformID = 8
+    IPadPlatformID       = 9
+    AdminPlatformID      = 10
+    AndroidWebPlatformID = 11
+    IOSWebPlatformID     = 12
+    WindowWebPlatformID  = 13
+    MacWebPlatformID     = 14
+   */ 
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  console.log(userAgent,'useSystem');
+  if (/android/i.test(userAgent)) {
+      return 11;
+  }
+
+  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+      return 12;
+  }
+
+  if (/Mac/i.test(userAgent)) {
+      return 14;
+  }
+
+  if (/Windows/i.test(userAgent)) {
+      return 13;
+  }
+  // 默认情况下，可能是一个不支持的或未知的设备
+  return 11;
+}
\ No newline at end of file
diff --git a/src/utils/cdnUtils.js b/src/utils/cdnUtils.js
new file mode 100644
index 0000000..7c836dc
--- /dev/null
+++ b/src/utils/cdnUtils.js
@@ -0,0 +1,112 @@
+import axios from 'axios';
+import { showToast } from 'vant';
+import { i18n } from "@/lang/index";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+const IMSDK = getSDK();
+const { t } = i18n.global
+const { DEV, VITE_APP_PUB_API, VITE_APP_MSG_API,VITE_APP_PROXY_TARGET } = import.meta.env;;
+// 获取环境变量
+// const apiUrl = import.meta.env.VITE_APP_PROXY_TARGET; // 或 process.env.VUE_APP_API_URL
+/**
+ * 查找最快的 CDN 线路
+ * @returns {Promise<string>} 最快的 CDN 线路 URL
+ */
+export const findFastestCdn = async () => {
+  if (DEV===false) {
+    // 从 sessionStorage 获取配置
+    const appConfig = sessionStorage.getItem("appConfig")
+      ? JSON.parse(sessionStorage.getItem("appConfig"))
+      : {};
+    // 获取 CDN 线路列表
+    const cdnList = appConfig.site_acceleration?.filter(
+      item => item.back_end_url && item.back_end_url.trim() !== ""
+    ) || [];
+    // 没有配置 CDN 线路，返回默认线路
+    if (cdnList.length === 0) {
+      console.error('没有配置 CDN 线路，使用默认线路');
+      return window.WEB_CONFIG.proxy_target;
+    }
+    // 在 CDN 线路列表中添加默认线路 || 当线路存在的时候才去检测，默认线路已经生成了，就不需要在发送检测请求了
+    cdnList.unshift({
+      back_end_url: window.WEB_CONFIG.proxy_target || VITE_APP_PROXY_TARGET,
+    });
+    console.error('线路列表', cdnList);
+    console.error('当前的默认线路', window.WEB_CONFIG);
+    // 创建请求的 URL 列表
+    const requests = cdnList.map(cdn => {
+      const url = cdn.back_end_url ? `${cdn.back_end_url}/chat-api/health` : undefined;
+      if (!url) {
+        // 直接返回一个 Promise 解决的结果，表示 URL 为 undefined 时的情况
+        return Promise.resolve({ originalUrl: cdn.back_end_url, time: Infinity });
+      }
+      const start = performance.now();
+      return axios.get(url,{timeout:3000})
+        .then(response => {
+          // 只有在状态码为 200 时，才返回 originalUrl 和 time
+          console.error('response.status======',response);
+          if (response.status === 200) {
+            return { originalUrl: cdn.back_end_url, time: performance.now() - start };
+          } else {
+            return { originalUrl: cdn.back_end_url, time: Infinity };
+          }
+        })
+        .catch(() => ({ originalUrl: cdn.back_end_url, time: Infinity }));
+    });
+    // 等待所有请求完成并筛选出成功的请求
+    const responses = await Promise.all(requests);
+    const availableResponses = responses.filter(response => response.time < Infinity);
+    // 找到最快的可用 CDN
+    const fastest = availableResponses.length 
+      ? availableResponses.reduce((prev, curr) => (prev.time < curr.time ? prev : curr))
+      : null;
+    if (fastest) {
+      sessionStorage.setItem("globalRequestPrefix", fastest.originalUrl);
+      // const wsUrl = fastest.originalUrl.replace("https", "wss");
+      // await IMSDK.updateConfig({
+      //   apiAddr:fastest.originalUrl,
+      //   wsAddr:wsUrl,
+      //   reConn:true,
+      //   backupHttpAddrs:availableResponses.map(item => `${item.originalUrl}/chat-server-api` )
+      // });
+      console.error('最快的 CDN:', fastest.originalUrl);
+      return fastest.originalUrl;
+    } else {
+      console.error('所有 CDN 线路均不可用，使用默认线路');
+      showToast(t("error_http_11"));
+      return -1;
+    }
+  }
+};
+
+// 处理应用配置和参数更新
+export const updateAppConfig = async () => {
+  try {
+    const { VITE_APP_MSG_API,VITE_APP_PROXY_TARGET } = import.meta.env;;
+    // 获取并解析 appConfig
+    const appConfig = sessionStorage.getItem("appConfig")
+      ? JSON.parse(sessionStorage.getItem("appConfig"))
+      : {};
+    // 过滤有效的 cdnList
+    const cdnList = appConfig.site_acceleration?.filter(
+      item => item.back_end_url && item.back_end_url.trim() !== ""
+    ) || [];
+    // 调用 IMSDK.updateConfig 更新配置
+    await IMSDK.updateConfig({
+      apiAddr: VITE_APP_PROXY_TARGET,
+      wsAddr: VITE_APP_PROXY_TARGET.replace("https", "wss"),
+      reConn: true,
+      backupHttpAddrs: cdnList.map(item => `${item.back_end_url}/chat-server-api`)
+    });
+  } catch (error) {
+    console.error('Error updating app config:', error);
+  }
+}
+// 1-页面入口：启动APP后自动进入；
+// 2-初始化&切换线路功能：
+//    2.1-功能说明：
+//          进入该页面即自动进行初始化并ping线路选择最优线路；
+//          线路正常：跳转登录页或会话页（依据登录状态判定）
+//          线路异常：自动切换线路
+//          全部线路异常：Toast显示“网络连接超时”并展示[网络诊断]按钮；
+//     2.2-交互说明：
+//          点击[网络诊断]，跳转网络诊断页面；
diff --git a/src/utils/chatRule.js b/src/utils/chatRule.js
new file mode 100644
index 0000000..f8eaad8
--- /dev/null
+++ b/src/utils/chatRule.js
@@ -0,0 +1,114 @@
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from 'pinia';
+const userStore = useUserStore()
+const { userInfo, appConfig } = storeToRefs(userStore)
+// 获取发言频率配置
+const ChatSendRegularData = ref({})
+//当前规则是否有效
+const chatSendRegular = () => {
+  console.log('chatSendRegular',appConfig.value);
+  let config = {}
+  if(appConfig.value && appConfig.value.conversation_rules && appConfig.value.conversation_rules.length > 0) {
+    config = appConfig.value?.conversation_rules[0]
+  }
+  ChatSendRegularData.value = {
+    seconds: config.duration || 0, // 几秒内
+    continueCount: config.threshold || 0,// 连续发送多少条
+    maxCheckCount: 100, //检查最近的条数-最多100条
+    enable: config.status === 1 ? true : false, // 是否开启
+  };
+  if(ChatSendRegularData.value.seconds > 0 && ChatSendRegularData.value.continueCount > 0 && ChatSendRegularData.value.enable){
+    return ChatSendRegularData.value;
+  }
+  return
+}
+
+// 获取消息文本
+const getMessageText = (message) => {
+  let type = message.contentType;
+  let str = ''
+  if(type === 101 ) { // 文本
+    return message.textElem.content
+  } else if (type === 106) { // @消息
+    return message.atTextElem.text
+  } else if (type === 114) { // 引用
+    return message.quoteElem.text
+  } else if (type === 105) { // 文件
+    if(message.fileElem?.sourceUrl){
+      str = stringMark(message.fileElem.sourceUrl)
+    }
+    return str
+  } else if (type === 102) { // 图片
+    if(message.pictureElem?.sourcePicture){
+      str = stringMark(message.pictureElem?.sourcePicture?.url)
+    }
+    // return message.pictureElem?.sourcePath
+    return str
+  } else if (type === 104) { // 视频
+    if(message.videoElem?.videoUrl){
+      str = stringMark(message.videoElem?.videoUrl)
+    }
+    // return message.videoElem?.videoPath;
+    return str
+  }
+  return null;
+}
+const stringMark = (str) => {
+  // 查找第一个问号的位置
+  const index = str.indexOf('?');
+  // 如果找到了问号，返回问号之前的子字符串
+  if (index !== -1) {
+      return str.substring(0, index);
+  }
+  console.log(str,'stringMark2');
+  // 如果没有找到问号，返回原始字符串
+  return str;
+}
+
+// 传入消息列表，新消息，发送人ID
+export const checkMessage = (messageList, newMsg) => {
+  console.log('messageList',messageList, newMsg,userInfo.value.userID);
+  return new Promise((resolve, reject) => {
+    // chatSendRegular为当前的规则
+    const regular = chatSendRegular();
+    if(regular){
+      const curTime = new Date().getTime(); // 当前时间戳秒数
+      const preTime = (curTime - (regular.seconds*1000)); // 最近多少秒内
+      //检测的总消息条数
+      let msgCount = 0;
+      //我发送的消息条数
+      let mySendCount = 0;
+      //相同的消息条数
+      let eqCount = 0;
+      const data = messageList.slice().reverse();
+      for (const element of data) {
+        // 发送人
+        if (element.sendID === userInfo.value.userID) { 
+          if ((element.createTime) < preTime) {
+            break;
+          }
+          const msgText = getMessageText(element);
+          const text = getMessageText(newMsg)
+          if (msgText === text) {
+            eqCount++;
+            if (eqCount >= regular.continueCount) {
+              resolve({code:101,msg:'发送失败，请勿连续发送重复内容'})
+            }
+          }
+          // 检查消息内容的连续性
+          // mySendCount++;
+          // if (mySendCount >= regular.continueCount) {
+          //   break;
+          // }
+        }
+        msgCount++;
+        if (msgCount >= regular.maxCheckCount) {
+          break;
+        }
+      }
+      resolve({code:0,msg:'发送成功'})
+    }
+    resolve({code:0,msg:'发送成功'})
+  })
+};
+
diff --git a/src/utils/common.js b/src/utils/common.js
new file mode 100644
index 0000000..de14797
--- /dev/null
+++ b/src/utils/common.js
@@ -0,0 +1,174 @@
+import { showToast } from "vant";
+// i18n
+import { i18n } from '@/lang/index'
+import api from '@/api'
+const { t } = i18n.global
+
+export const feedbackToast = (config) => {
+  const { message, error, duration, onClose = () => {} } = config ?? {};
+  showToast({
+    message:
+      message ??
+      t(error ? "messageTip.nomalFailed" : "messageTip.nomalSuccess"),
+    type: error ? "fail" : "success",
+    onClose,
+    duration,
+  });
+  if (error) {
+    console.error(message, error);
+  }
+};
+
+export const filterEmptyValue = (obj) => {
+  for (let key in obj) {
+    if (obj[key] === "") {
+      delete obj[key];
+    }
+  }
+};
+
+export const isBase64 = (str) => {
+  if (typeof str !== 'string') return false
+  if(str === '' || str.trim() === ''){
+    return false;
+  }
+  // 检查字符串是否以 "data:image/png;base64," 开头
+  return /^data:image\/(jpeg|png|gif|bmp);base64,/.test(str)
+}
+
+export const getPicInfo = (file) => {
+  return new Promise((resolve, reject) => {
+    const _URL = window.URL || window.webkitURL;
+    const img = new Image();
+    img.onload = function () {
+      resolve(img);
+    };
+    img.src = isBase64(file) ? file : _URL.createObjectURL(file);
+  });
+};
+export const getMediaDuration = (path) => {
+  return new Promise((resolve, reject) => {
+    const vel = new Audio(path);
+    vel.onloadedmetadata = async function () {
+      // resolve(vel.duration);
+      resolve(Number(vel.duration.toFixed()));
+    };
+  });
+};
+
+export const getVideoSnshot = (item) => {
+  return new Promise((reslove, reject) => {
+    var video = document.createElement("VIDEO");
+    video.setAttribute("autoplay", "autoplay");
+    video.setAttribute("muted", "muted");
+    video.innerHTML = "<source src=" + item + ' type="audio/mp4">';
+    var canvas = document.createElement("canvas");
+    var ctx = canvas.getContext("2d");
+    video.addEventListener("canplay", function () {
+      var anw = document.createAttribute("width");
+      //@ts-ignore
+      anw.nodeValue = video.videoWidth;
+      var anh = document.createAttribute("height");
+      //@ts-ignore
+      anh.nodeValue = video.videoHeight;
+      canvas.setAttributeNode(anw);
+      canvas.setAttributeNode(anh);
+      //@ts-ignore
+      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+      var base64 = canvas.toDataURL("image/png");
+      //@ts-ignore
+      video.pause();
+      const file = base64toFile(base64);
+      reslove(file);
+    });
+  });
+};
+
+export const getFileType = (name) => {
+  const idx = name.lastIndexOf(".");
+  return name.slice(idx + 1);
+};
+
+///不是红包类型，且发送成功的消息
+export const canDeleteFromServer = (msg, showFalseTip = false) => {
+  if (msg.contentType == 110 && JSON.parse(msg.customElem.data).customType === 1003) {
+    if (showFalseTip) {
+      showToast({
+        message: t('deleteRedPackageErrTip')
+      });
+    }
+    return false;
+  }
+  return msg.status == 2;
+}
+
+/**
+ * 判断当前是移动端还是pc端
+ * @returns 
+ */
+export const isMobile= ()=>{
+  const userAgent = navigator.userAgent;
+  const mobileKeywords = [
+    "Android",
+    "webOS",
+    "iPhone",
+    "iPad",
+    "iPod",
+    "BlackBerry",
+    "Windows Phone"
+  ];
+  for (let i = 0; i < mobileKeywords.length; i++) {
+    if (userAgent.indexOf(mobileKeywords[i]) > -1) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export const burnMsgByClearMsg = async (conversationID, endTime = 0) => {
+  const res = await api.contact.burnMsgByClearMsg({
+    conversationID,
+    endTime
+  });
+  // 接口调成功后才删本地消息
+  if (res.errCode !== 0) {
+    throw new Error(res.errCode)
+  } else {
+    return true
+  }
+}
+
+// 判断是否是 http 或 https 链接
+export function isHttpLink(content) {
+  // 允许以 http://, https:// 或 www. 开头的链接
+  const regexHttpLink = /^(https?:\/\/|www\.)/i;
+  return regexHttpLink.test(content);
+}
+
+// 判断链接的后缀是否是常见图片类型
+export function isImageLink(url) {
+  const extension = getFileExtensionFromUrl(url);
+  return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension.toLowerCase());
+}
+
+// 从链接中获取文件扩展名
+export function getFileExtensionFromUrl(url) {
+  let extension = '';
+  const queryStringIndex = url.indexOf('?'); // 查找查询参数的位置
+  let urlWithoutQuery = url;
+  if (queryStringIndex !== -1) {
+    urlWithoutQuery = url.substring(0, queryStringIndex); // 获取不包含查询参数的url
+  }
+  const lastDotIndex = urlWithoutQuery.lastIndexOf('.');
+  if (lastDotIndex !== -1) {
+    extension = urlWithoutQuery.substring(lastDotIndex + 1).toLowerCase();
+  }
+  return extension;
+}
+
+// 用于存储请求耗时的全局 Map 对象
+export let requestTimesMap = new Map();
+// 定义 Map 来存储线路数据
+export let linesMap = new Map();
+// 创建一个 Map 用于存储延迟数据
+export let delayMap = new Map();
\ No newline at end of file
diff --git a/src/utils/constant.js b/src/utils/constant.js
new file mode 100644
index 0000000..a0b5cec
--- /dev/null
+++ b/src/utils/constant.js
@@ -0,0 +1,345 @@
+export const CustomMessageType = {
+  call: 901,
+  emoji: 902,
+  tag: 903,
+  moments: 904,
+  meeting: 905,
+  blockedByFriend: 910,
+  deletedByFriend: 911,
+  removedFromGroup: 912,
+  groupDisbanded: 913,
+  ///清除会话信息
+  clearConversationMsg: 1001,
+  ///红包消息
+  redPackageMsg: 1003,
+  ///接收红包的消息
+  receiverRedPackageMsg: 1004,
+}
+
+
+export const SDKErrorCode = {
+  /// 网络请求错误
+  networkRequestError: 10000,
+
+  /// 网络等待超时错误
+  networkWaitTimeoutError: 10001,
+
+  /// 参数错误
+  parameterError: 10002,
+
+  /// 上下文超时错误，通常为用户已经退出
+  contextTimeoutError: 10003,
+
+  /// 资源未加载完毕，通常为未初始化，或者登录接口还未成功返回
+  resourceNotLoaded: 10004,
+
+  /// 未知错误，需要根据 errmsg 确认原因
+  unknownError: 10005,
+
+  /// sdk 内部错误，需要根据 errmsg 确认原因
+  sdkInternalError: 10006,
+
+  /// 该用户已设置不可添加
+  refuseToAddFriends: 10013,
+
+  /// 用户不存在或未注册
+  userNotExistOrNotRegistered: 10100,
+
+  /// 用户已经退出登录
+  userHasLoggedOut: 10101,
+
+  /// 用户重复登录，可以通过 getloginstatus 确认登录状态，避免重复登录
+  repeatLogin: 10102,
+
+  /// 需要上传的文件不存在
+  uploadFileNotExist: 10200,
+
+  /// 消息解压失败
+  messageDecompressionFailed: 10201,
+
+  /// 消息解码失败
+  messageDecodingFailed: 10202,
+
+  /// 不支持的长连接二进制协议
+  unsupportedLongConnection: 10203,
+
+  /// 消息重复发送
+  messageRepeated: 10204,
+
+  /// 消息内容类型不支持
+  messageContentTypeNotSupported: 10205,
+
+  /// 不支持的会话操作
+  unsupportedSessionOperation: 10301,
+
+  /// 群 ID 不存在
+  groupIDNotExist: 10400,
+
+  /// 群组类型错误
+  wrongGroupType: 10401,
+
+  /// 服务器内部错误，通常为内部网络错误，需要检查服务器各节点运行是否正常
+  serverInternalError: 500,
+
+  /// 	参数错误，需要检查 body 参数以及 header 参数是否正确
+  serverParameterError: 1001,
+
+  /// 权限不足，一般为 header 参数中携带 token 不正确，或者权限越级操作
+  insufficientPermissions: 1002,
+
+  /// 数据库主键重复
+  duplicateDatabasePrimaryKey: 1003,
+
+  /// 数据库记录未找到
+  databaseRecordNotFound: 1004,
+
+  /// 	用户 ID 不存在
+  userIDNotExist: 1101,
+
+  /// 用户已经注册
+  userAlreadyRegistered: 1102,
+
+  /// 群不存在
+  groupNotExis: 1201,
+
+  /// 群已存在
+  groupAlreadyExists: 1202,
+
+  /// 用户不在群组中
+  userIsNotInGroup: 1203,
+
+  /// 群组已解散
+  groupDisbanded: 1204,
+
+  /// 群申请已经被处理，不需要重复处理
+  groupApplicationHasBeenProcessed: 1206,
+
+  /// 不能添加自己为好友
+  notAddMyselfAsAFriend: 1301,
+
+  /// 已被对方拉黑
+  hasBeenBlocked: 1302,
+
+  /// 对方不是自己的好友
+  notFriend: 1303,
+
+  /// 已经是好友关系，不需要重复申请
+  alreadyAFriendRelationship: 1304,
+
+  /// 消息已读功能被关闭
+  messageReadFunctionIsTurnedOff: 1401,
+
+  /// 你已被禁言，不能在群里发言
+  youHaveBeenBanned: 1402,
+
+  /// 群已被禁言，不能发言
+  groupHasBeenBanned: 1403,
+
+  /// 该消息已被撤回
+  messageHasBeenRetracted: 1404,
+
+  /// 授权过期
+  licenseExpired: 1405,
+
+  /// token 已经过期
+  tokenHasExpired: 1501,
+
+  /// token 无效
+  tokenInvalid: 1502,
+
+  /// token 格式错误
+  tokenFormatError: 1503,
+
+  /// token 还未生效
+  tokenHasNotYetTakenEffect: 1504,
+
+  /// 未知 token 错误
+  unknownTokenError: 1505,
+
+  /// 被踢出的 token，无效
+  thekickedOutTokenIsInvalid: 1506,
+
+  /// token 不存在
+  tokenNotExist: 1507,
+
+  /// 连接数超过网关最大限制
+  connectionsExceedsMaximumLimit: 1601,
+
+  /// 连接握手参数错误
+  handshakeParameterError: 1602,
+
+  /// 文件上传过期
+  fileUploadExpired: 1701,
+}
+
+export const MessageReceiveOptType = {
+  Nomal: 0,
+  NotReceive: 1,
+  NotNotify: 2
+}
+export const AllowType = {
+  Allowed: 0,
+  NotAllowed: 1
+}
+export const GroupType = {
+  Group: 2,
+  WorkingGroup: 2
+}
+export const GroupJoinSource = {
+  Invitation: 2,
+  Search: 3,
+  QrCode: 4
+}
+export const GroupMemberRole = {
+  Nomal: 20,
+  Admin: 60,
+  Owner: 100
+}
+export const GroupVerificationType = {
+  ApplyNeedInviteNot: 0,
+  AllNeed: 1,
+  AllNot: 2
+}
+export const MessageStatus = {
+  Sending: 1,
+  Succeed: 2,
+  Failed: 3
+}
+export const Platform = {
+  iOS: 1,
+  Android: 2,
+  Windows: 3,
+  MacOSX: 4,
+  Web: 5,
+  Linux: 7,
+  AndroidPad: 8,
+  iPad: 9
+}
+export const LogLevel = {
+  Debug: 5,
+  Info: 4,
+  Warn: 3,
+  Error: 2,
+  Fatal: 1,
+  Panic: 0
+}
+export const ApplicationHandleResult = {
+  Unprocessed: 0,
+  Agree: 1,
+  Reject: -1
+}
+export const MessageType = {
+  TextMessage: 101,
+  PictureMessage: 102,
+  VoiceMessage: 103,
+  VideoMessage: 104,
+  FileMessage: 105,
+  AtTextMessage: 106,
+  MergeMessage: 107,
+  CardMessage: 108,
+  LocationMessage: 109,
+  CustomMessage: 110,
+  TypingMessage: 113,
+  QuoteMessage: 114,
+  FaceMessage: 115,
+  FriendAdded: 1201,
+  OANotification: 1400,
+  GroupCreated: 1501,
+  GroupInfoUpdated: 1502,
+  MemberQuit: 1504,
+  GroupOwnerTransferred: 1507,
+  MemberKicked: 1508,
+  MemberInvited: 1509,
+  MemberEnter: 1510,
+  GroupDismissed: 1511,
+  GroupMemberMuted: 1512,
+  GroupMemberCancelMuted: 1513,
+  GroupMuted: 1514,
+  GroupCancelMuted: 1515,
+  GroupAnnouncementUpdated: 1519,
+  GroupNameUpdated: 1520,
+  BurnMessageChange: 1701,
+  RevokeMessage: 2101
+}
+export const SessionType = {
+  Single: 1,
+  Group: 3,
+  WorkingGroup: 3,
+  Notification: 4
+}
+export const GroupStatus = {
+  Nomal: 0,
+  Baned: 1,
+  Dismissed: 2,
+  Muted: 3
+}
+export const GroupAtType = {
+  AtNormal: 0,
+  AtMe: 1,
+  AtAll: 2,
+  AtAllAtMe: 3,
+  AtGroupNotice: 4
+}
+export const GroupMemberFilter = {
+  All: 0,
+  Owner: 1,
+  Admin: 2,
+  Nomal: 3,
+  AdminAndNomal: 4,
+  AdminAndOwner: 5
+}
+export const Relationship = {
+  isBlack: 0,
+  isFriend: 1
+}
+export const LoginStatus = {
+  Logout: 1,
+  Logging: 2,
+  Logged: 3
+}
+export const OnlineState = {
+  Online: 1,
+  Offline: 0
+}
+export const GroupMessageReaderFilter = {
+  Readed: 0,
+  UnRead: 1
+}
+
+// export const CustomMessageTypes = {
+//   Call: 100,
+//   MassMsg: 903,
+//   MeetingInvitation: 905,
+// };
+
+export const GroupSessionTypes = [SessionType.Group, SessionType.WorkingGroup];
+
+export const GroupSystemMessageTypes = [
+  MessageType.GroupCreated,
+  MessageType.GroupInfoUpdated,
+  MessageType.MemberQuit,
+  MessageType.GroupOwnerTransferred,
+  MessageType.MemberKicked,
+  MessageType.MemberInvited,
+  MessageType.MemberEnter,
+  MessageType.GroupDismissed,
+  MessageType.GroupMemberMuted,
+  MessageType.GroupMuted,
+  MessageType.GroupCancelMuted,
+  MessageType.GroupMemberCancelMuted,
+  MessageType.GroupNameUpdated
+];
+
+export const TipTypes = [
+  MessageType.RevokeMessage,
+  MessageType.FriendAdded,
+  MessageType.BurnMessageChange,
+  ...GroupSystemMessageTypes
+];
+
+export const FileMessageTypes = [
+  MessageType.PictureMessage,
+  MessageType.VideoMessage,
+  MessageType.VoiceMessage,
+  MessageType.FileMessage,
+];
\ No newline at end of file
diff --git a/src/utils/events.js b/src/utils/events.js
new file mode 100644
index 0000000..a8bbdd6
--- /dev/null
+++ b/src/utils/events.js
@@ -0,0 +1,15 @@
+import mitt from "mitt";
+
+// type Events = {
+//   CHAT_MAIN_SCROLL_TO_BOTTOM: boolean;
+//   CHAT_MAIN_SCROLL_TO_CLIENTMSGID: string;
+//   TYPING_UPDATE: void;
+//   ONLINE_STATE_CHECK: void;
+//   UPDATE_MULTIPLE_CHECK_STATE: boolean;
+//   KEYBOARD_UPDATE: void;
+//   AT_SOMEONE: any;
+// };
+
+const emitter = mitt();
+
+export default emitter;
diff --git a/src/utils/fileUtils.js b/src/utils/fileUtils.js
new file mode 100644
index 0000000..864d5d8
--- /dev/null
+++ b/src/utils/fileUtils.js
@@ -0,0 +1,147 @@
+import { computed,onMounted } from "vue";
+import { i18n } from '@/lang/index'
+import { showImagePreview, showToast, showConfirmDialog ,showLoadingToast,showFailToast,showSuccessToast} from "vant";
+import apkIcon from "@/assets/filesvg/apk.svg";
+import pdfIcon from "@/assets/filesvg/pdf.svg";
+import exeIcon from "@/assets/filesvg/exe.svg";
+import txtIcon from "@/assets/filesvg/txt.svg";
+import docIcon from "@/assets/filesvg/doc.svg";
+import rarIcon from "@/assets/filesvg/rar.svg";
+import zipIcon from "@/assets/filesvg/rar.svg";
+import ipaIcon from "@/assets/filesvg/ipa.svg";
+import dmgIcon from "@/assets/filesvg/dmg.svg";
+import debIcon from "@/assets/filesvg/deb.svg";
+import epubIcon from "@/assets/filesvg/epub.svg";
+import pagesIcon from "@/assets/filesvg/pages.svg";
+import pptIcon from "@/assets/filesvg/ppt.svg";
+import numbersIcon from "@/assets/filesvg/numbers.svg";
+import keyIcon from "@/assets/filesvg/key.svg";
+import xlsxIcon from "@/assets/filesvg/xls.svg";
+import htmlIcon from "@/assets/filesvg/html.svg";
+import codeIcon from "@/assets/filesvg/code.svg";
+import mp3Icon from "@/assets/filesvg/mp3.svg";
+import unknownIcon from "@/assets/filesvg/unknown.svg";
+
+const { t } = i18n.global
+
+/// 公共方法-计算文件大小
+export const formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+// 公共方法-文件上传错误的状态集合
+export const fileErrorsToast = async (error) => {
+  const { errCode } = error;
+  switch (errCode) {
+    case 13:
+      // 这个是对方已经屏蔽你
+      showToast(t("cvSendMsgErrorNoPermission"));
+      break;
+    case 10005:
+      showToast(t("sendMessageFailed"));
+      break;
+  }
+};
+
+// 公共方法-创建文件对象
+export async function createFileObject(message) {
+  const { sourceUrl, fileName, fileSize, fileType } = message;
+  const response = await fetch(sourceUrl);
+  const data = await response.blob();
+  const file = new File([data], fileName, { type: fileType });
+  return file;
+}
+// 公共方法-根据文件名获取文件后缀，并根据文件后缀返回对应的图标路径
+export const fileIcon = computed(() => {
+  // 定义两个参数的函数
+  return (val) => {
+    const fileName = val.fileElem?.fileName || val.cloneFileName;
+    const extension = fileName.split(".").pop().toLowerCase();
+    // 定义扩展名和对应的图标路径
+    const iconMap = {
+      apk: apkIcon,
+      apk1: apkIcon,
+      pdf: pdfIcon,
+      exe: exeIcon,
+      txt: txtIcon,
+      doc: docIcon,
+      docx: docIcon,
+      rar: rarIcon,
+      zip: zipIcon,
+      ipa: ipaIcon,
+      dmg: dmgIcon,
+      deb: debIcon,
+      epub: epubIcon,
+      pages: pagesIcon,
+      ppt: pptIcon,
+      pptx: pptIcon,
+      numbers: numbersIcon,
+      key: keyIcon,
+      xls: xlsxIcon,
+      xlsx: xlsxIcon,
+      html: htmlIcon,
+      mp3: mp3Icon,
+      wav: mp3Icon,
+      flac: mp3Icon,
+      wma: mp3Icon,
+      m4a: mp3Icon,
+      alff: mp3Icon,
+      alac: mp3Icon,
+      midi: mp3Icon,
+      ogg: mp3Icon,
+      css: codeIcon,
+      java: codeIcon,
+      cpp: codeIcon,
+      js: codeIcon,
+      php: codeIcon,
+      pyc: codeIcon,
+      json: codeIcon,
+      xml: codeIcon,
+      sql: codeIcon,
+      sqlite: codeIcon,
+      csv: codeIcon,
+    };
+    // 返回对应的图标路径，如果没有匹配到则返回默认图标路径
+    return iconMap[extension] || unknownIcon;
+  };
+});
+// 公共方法-根据url 下载文件
+export const publicDownloadFile = (item, showMultiple) => {
+  // 当开启了多选的时候不能点击下载
+  if (showMultiple) {
+    return false;
+  }
+  showConfirmDialog({
+    title: "温馨提示",
+    message: `文件大小${formatFileSize(item.fileElem.fileSize)}是否下载文件？`,
+    confirmButtonText: "下载",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      // 获取文件的 URL
+      const fileUrl = item.fileElem.sourceUrl;
+      // 创建一个 <a> 元素
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      // 设置下载的文件名
+      link.download = item.fileName;
+      // 将链接添加到页面中，这样它就可以被点击
+      document.body.appendChild(link);
+      // 模拟用户点击下载链接
+      link.click();
+      // 清理创建的链接
+      document.body.removeChild(link);
+    })
+    .catch(() => {
+      // on cancel
+    });
+};
+
+// 私聊文件:定义为全局变量
+export let privateChatFileMap = new Map();
+// 群聊文件:定义为全局变量
+export let groupChatFileMap = new Map();
diff --git a/src/utils/hooks/useFetchData.ts b/src/utils/hooks/useFetchData.ts
new file mode 100644
index 0000000..44b2365
--- /dev/null
+++ b/src/utils/hooks/useFetchData.ts
@@ -0,0 +1,192 @@
+import type { UnwrapRef } from 'vue'
+import { isReactive, isRef, reactive, ref, unref, watch } from 'vue'
+import { isEqual } from 'lodash-es'
+import type { MaybeRef } from '@/typing'
+
+export interface PageInfo {
+  current: number
+  pageSize: number
+  total: number
+  [key: string]: any
+}
+
+export interface ReponseData<T> {
+  data: T[]
+  success?: boolean
+  total?: number
+  [key: string]: any
+}
+
+export type RequestParams =
+  | {
+    pageSize: number
+    current: number
+    [key: string]: any
+  }
+  | undefined
+
+export interface UseFetchDataAction<T extends ReponseData<any>> {
+  stripe: (record: any, index: number) => string | undefined
+  cancel: () => void
+  reload: () => Promise<void>
+  resetPageIndex: () => void
+  reset: () => void
+  context: Context<T>
+  setPageInfo: (pageInfo: Partial<PageInfo>) => void
+}
+
+export interface Context<T extends ReponseData<any>> {
+  current: number
+  pageSize: number
+  dataSource: T['data']
+  loading: boolean
+  total: number
+  requestParams?: MaybeRef<{
+    [key: string]: any
+  }>
+  [key: string]: any
+}
+
+export const defaultContext: Context<any> = {
+  stripe: false,
+  loading: false,
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  dataSource: [],
+}
+
+// 如果请求数据中，没有分页，仅单列表数据，可以使用该方法进行包装，免去重复写请求方法
+export function wrap(req: () => Promise<any[]>): (() => Promise<ReponseData<any>>) {
+  return () =>
+    req().then((res) => {
+      const data = res
+      return {
+        data,
+        total: data.length,
+        success: data !== null && data !== undefined,
+      }
+    })
+}
+
+function filterNoValidValue(obj: Record<string, any> = {}) {
+  const newObj = {}
+  Object.keys(obj).forEach((k) => {
+    if (obj[k] !== undefined && obj[k] !== '' && obj[k] !== null)
+      newObj[k] = obj[k]
+  })
+
+  return newObj
+}
+
+export function useFetchData<T extends ReponseData<any>>(getData: (params?: RequestParams) => Promise<T>, context: MaybeRef<{
+  stripe?: boolean
+  current?: number
+  pageSize?: number
+  dataSource?: T['data']
+  loading?: boolean
+  requestParams?: MaybeRef<{
+    [key: string]: any
+  }>
+  [key: string]: any
+}> = reactive({ ...defaultContext }), options?: {
+  current?: number
+  pageSize?: number
+  onLoad?: (dataSource: T['data']) => void
+  onRequestError?: (e: Error) => void
+  pagination?: boolean
+}): UseFetchDataAction<T> {
+  const state = reactive({ ...defaultContext } as Context<T>)
+  const mergeContext = isReactive(context) || isRef(context) ? context : ref(context)
+  watch(
+    mergeContext,
+    () => {
+      Object.assign(state, unref(context))
+    },
+    { immediate: true },
+  )
+
+  const fetchList = async () => {
+    // 请求中禁止重复请求
+    if (state.loading)
+      return
+
+    state.loading = true
+    const { pageSize = 20, current = 1 } = state
+    try {
+      const params: RequestParams
+        = options?.pagination !== false
+          ? {
+              current,
+              pageSize,
+              ...filterNoValidValue(unref(mergeContext).requestParams),
+            }
+          : undefined
+      const { data, success, total: dataTotal = 0 } = await getData(params)
+      state.loading = false
+      if (success !== false) {
+        state.dataSource = data as UnwrapRef<T['data']>
+        state.total = dataTotal
+      }
+    }
+    catch (e: any) {
+      state.loading = false
+      // 如果没有传递这个方法的话，需要把错误抛出去，以免吞掉错误
+      if (options?.onRequestError === undefined)
+        throw new Error(e)
+
+      else
+        options.onRequestError(e)
+    }
+  }
+
+  const cancel = () => {}
+
+  const reset = () => {}
+
+  const reload = (): Promise<void> => {
+    return new Promise((resolve) => {
+      resolve(fetchList())
+    })
+  }
+
+  const setPageInfo = (pageInfo: Partial<PageInfo>) => {
+    console.warn('setPageInfo 废弃，请直接使用响应式 context')
+    pageInfo.current && (state.current = pageInfo.current)
+    pageInfo.pageSize && (state.pageSize = pageInfo.pageSize)
+  }
+
+  const resetPageIndex = (): void => {
+    console.warn('resetPageIndex 废弃，请直接使用响应式 context')
+    // state.current = 1;
+  }
+  watch(
+    [() => state.current, () => state.pageSize, () => ({ ...state.requestParams })],
+    (nextValue, preValue) => {
+      if (!isEqual(nextValue, preValue)) {
+        fetchList().catch((e) => {
+          throw new Error(e)
+        })
+      }
+    },
+    { immediate: true, deep: true },
+  )
+
+  const stripe = (_: any, index: number) => index % 2 === 1 && state.stripe && 'ant-pro-table-row-striped'
+
+  return {
+    stripe,
+    cancel,
+    reset,
+    reload,
+    resetPageIndex,
+    setPageInfo: (info) => {
+      setPageInfo({
+        current: state.current,
+        pageSize: state.pageSize,
+        ...info,
+      })
+    },
+    context: state,
+  }
+}
diff --git a/src/utils/hooks/useSendMessage.js b/src/utils/hooks/useSendMessage.js
new file mode 100644
index 0000000..1a7f59c
--- /dev/null
+++ b/src/utils/hooks/useSendMessage.js
@@ -0,0 +1,95 @@
+import useConversationStore from "@/stores/modules/conversation";
+import { useMessageStore } from "@/stores/modules/message";
+import { useUserStore } from "@/stores/user";
+import emitter from "@/utils/events";
+import { getSDK } from '@/utils/openIM'
+import { MessageStatus } from '@/utils/constant';
+const IMSDK = getSDK()
+
+const messageStore = useMessageStore();
+const conversationStore = useConversationStore();
+const userStore = useUserStore();
+
+export default function useSendMessage() {
+  const sendMessage = async ({
+    recvID,
+    groupID,
+    message,
+    // fileArrayBuffer,
+    // snpFileArrayBuffer,
+    needOpreateMessage,
+  }) => {
+    needOpreateMessage =
+      needOpreateMessage ?? inCurrentConversation(recvID || groupID);
+    if (needOpreateMessage) {
+      messageStore.pushNewMessage(message);
+      emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false);
+      updateFrequentContacts();
+    }
+
+    // let funcName = "sendMessage";
+    // if (FileMessageTypes.includes(message.contentType)) {
+    //   funcName = fileArrayBuffer ? "sendMessageByBuffer" : "sendMessageNotOss";
+    // }
+    const options = {
+      recvID: recvID ?? conversationStore.storeCurrentConversation.userID ?? "",
+      groupID:
+        groupID ?? conversationStore.storeCurrentConversation.groupID ?? "",
+      message,
+      // fileArrayBuffer,
+      // snpFileArrayBuffer,
+    };
+    try {
+      // @ts-ignore
+      const { data: successMessage } = await IMSDK.sendMessage(options);
+      messageStore.updateOneMessage(successMessage, true);
+    } catch (error) {
+      console.error(error);
+
+      messageStore.updateOneMessage({
+        ...message,
+        status: MessageStatus.Failed,
+      });
+    }
+  };
+
+  const updateFrequentContacts = () => {
+    if (!conversationStore.storeCurrentConversation.userID) {
+      return;
+    }
+    let myFrequentContacts = [];
+    let totalFrequentContacts = {};
+    const item = {
+      userID: conversationStore.storeCurrentConversation.userID,
+      nickname: conversationStore.storeCurrentConversation.showName,
+      faceURL: conversationStore.storeCurrentConversation.faceURL,
+    };
+    try {
+      totalFrequentContacts = JSON.parse(
+        localStorage.getItem("IMFrequentContacts_H5") || "{}"
+      );
+      myFrequentContacts =
+        totalFrequentContacts[userStore.storeSelfInfo.userID] ?? [];
+    } catch (error) {}
+    const user = myFrequentContacts.find(
+      (contact) => contact.userID === item.userID
+    );
+    if (user) return;
+    myFrequentContacts.unshift({ ...item });
+    totalFrequentContacts[userStore.storeSelfInfo.userID] = myFrequentContacts;
+    localStorage.setItem(
+      "IMFrequentContacts_H5",
+      JSON.stringify(totalFrequentContacts)
+    );
+  };
+
+  const inCurrentConversation = (sourceID) =>
+    sourceID
+      ? conversationStore.storeCurrentConversation.userID === sourceID ||
+        conversationStore.storeCurrentConversation.groupID === sourceID
+      : true;
+
+  return {
+    sendMessage,
+  };
+}
diff --git a/src/utils/imCommon.js b/src/utils/imCommon.js
new file mode 100644
index 0000000..b05a368
--- /dev/null
+++ b/src/utils/imCommon.js
@@ -0,0 +1,457 @@
+import { getSDK } from "./openIM/index.js";
+export const IMSDK = getSDK('./openIM.wasm.gzip')
+// export const IMSDK = getSDK('https://openim-priv-tmp.oss-cn-shenzhen.aliyuncs.com/openim/SDK/PROD/862ac9f5179f4173de3fc4952cb0ddf2.gzip')
+import { GroupSystemMessageTypes } from "@/utils/constant";
+import dayjs from "dayjs";
+// import { useContactStore } from "@/stores/modules/contact";
+import { useContactStore } from "@/stores/contact";
+import useConversationStore from "@/stores/modules/conversation";
+import { useUserStore } from "@/stores/user";
+import { showToast,showConfirmDialog } from "vant";
+import { useRoute } from 'vue-router';  // 导入 useRoute 钩子
+import { i18n } from "@/lang/index";
+const { t } = i18n.global
+
+import calendar from "dayjs/plugin/calendar";
+import relativeTime from "dayjs/plugin/relativeTime";
+import updateLocale from "dayjs/plugin/updateLocale";
+
+import api from '@/api'
+
+export const AddFriendQrCodePrefix = "io.openim.app/addFriend/";
+export const AddGroupQrCodePrefix = "io.openim.app/joinGroup/";
+
+export const tipMessaggeFormat = (msg) => {
+  const userStore = useUserStore();
+
+  const selfID = userStore.selfInfo.userID;
+
+  const getName = (user) => {
+    return user.userID === selfID ? t("you") : user.nickname;
+  };
+
+  switch (msg.contentType) {
+    case MessageType.FriendAdded:
+      return t("notificationTipMessage.alreadyFriendMessage");
+    case MessageType.GroupCreated:
+      const groupCreatedDetail = JSON.parse(msg.notificationElem.detail);
+      const groupCreatedUser = groupCreatedDetail.opUser;
+      return t("notificationTipMessage.createGroupMessage", {
+        creator: linkWrap({
+          userID: groupCreatedUser.userID,
+          groupID: msg.groupID,
+          name: getName(groupCreatedUser),
+        }),
+      });
+    case MessageType.GroupInfoUpdated:
+      const groupUpdateDetail = JSON.parse(msg.notificationElem.detail);
+      const groupUpdateUser = groupUpdateDetail.opUser;
+      return t("notificationTipMessage.updateGroupAnnouncementMessage", {
+        operator: linkWrap({
+          userID: groupCreatedUser.userID,
+          groupID: msg.groupID,
+          name: getName(groupUpdateUser),
+        }),
+      });
+    case MessageType.GroupOwnerTransferred:
+      const transferDetails = JSON.parse(msg.notificationElem.detail);
+      const transferOpUser = transferDetails.opUser;
+      const newOwner = transferDetails.newGroupOwner;
+      return t("notificationTipMessage.transferGroupMessage", {
+        owner: linkWrap({
+          userID: transferOpUser.userID,
+          groupID: msg.groupID,
+          name: getName(transferOpUser),
+        }),
+        newOwner: linkWrap({
+          userID: newOwner.userID,
+          groupID: msg.groupID,
+          name: getName(newOwner),
+        }),
+      });
+    case MessageType.MemberQuit:
+      const quitDetails = JSON.parse(msg.notificationElem.detail);
+      const quitUser = quitDetails.quitUser;
+      return t("notificationTipMessage.quitGroupMessage", {
+        name: linkWrap({
+          userID: quitUser.userID,
+          groupID: msg.groupID,
+          name: getName(quitUser),
+        }),
+      });
+    case MessageType.MemberInvited:
+      const inviteDetails = JSON.parse(msg.notificationElem.detail);
+      const inviteOpUser = inviteDetails.opUser;
+      const invitedUserList = inviteDetails.invitedUserList ?? [];
+      let inviteStr = "";
+      invitedUserList.slice(0, 3).map(
+        (user) =>
+          (inviteStr += `${linkWrap({
+            userID: user.userID,
+            groupID: msg.groupID,
+            name: getName(user),
+          })}、`)
+      );
+      inviteStr = inviteStr.slice(0, -1);
+      return t("notificationTipMessage.invitedToGroupMessage", {
+        operator: linkWrap({
+          userID: inviteOpUser.userID,
+          groupID: msg.groupID,
+          name: getName(inviteOpUser),
+        }),
+        invitedUser: `${inviteStr}${
+          invitedUserList.length > 3
+            ? `${t("messageDescription.somePerson", {
+                num: invitedUserList.length,
+              })}`
+            : ""
+        }`,
+      });
+    case MessageType.MemberKicked:
+      const kickDetails = JSON.parse(msg.notificationElem.detail);
+      const kickOpUser = kickDetails.opUser;
+      const kickdUserList = kickDetails.kickedUserList ?? [];
+      let kickStr = "";
+      kickdUserList.slice(0, 3).map(
+        (user) =>
+          (kickStr += `${linkWrap({
+            userID: user.userID,
+            groupID: msg.groupID,
+            name: getName(user),
+          })}、`)
+      );
+      kickStr = kickStr.slice(0, -1);
+      return t("messageDescription.kickInGroupMessage", {
+        operator: linkWrap({
+          userID: kickOpUser.userID,
+          groupID: msg.groupID,
+          name: getName(kickOpUser),
+        }),
+        kickedUser: `${kickStr}${
+          kickdUserList.length > 3
+            ? `${t("messageDescription.somePerson", {
+                num: kickdUserList.length,
+              })}`
+            : ""
+        }`,
+      });
+    case MessageType.MemberEnter:
+      const enterDetails = JSON.parse(msg.notificationElem.detail);
+      const enterUser = enterDetails.entrantUser;
+      return t("notificationTipMessage.joinGroupMessage", {
+        name: linkWrap({
+          userID: enterUser.userID,
+          groupID: msg.groupID,
+          name: getName(enterUser),
+        }),
+      });
+    case MessageType.GroupDismissed:
+      const dismissDetails = JSON.parse(msg.notificationElem.detail);
+      const dismissUser = dismissDetails.opUser;
+      return t("notificationTipMessage.disbanedGroupMessage", {
+        operator: linkWrap({
+          userID: dismissUser.userID,
+          groupID: msg.groupID,
+          name: getName(dismissUser),
+        }),
+      });
+    case MessageType.GroupNameUpdated:
+      const groupNameDetails = JSON.parse(msg.notificationElem.detail);
+      return t("messageDescription.updateGroupNameMessage", {
+        operator: linkWrap({
+          userID: groupNameDetails.opUser.userID,
+          groupID: msg.groupID,
+          name: getName(groupNameDetails.opUser),
+        }),
+        name: groupNameDetails.group.groupName,
+      });
+    default:
+      return "";
+  }
+};
+
+export const formatConversionTime = (timestemp) => {
+  if (!timestemp) return "";
+
+  const fromNowStr = dayjs(timestemp).fromNow();
+
+  if (fromNowStr.includes(t("date.seconds"))) {
+    return t("date.justNow");
+  }
+
+  if (
+    !fromNowStr.includes(t("date.seconds")) &&
+    !fromNowStr.includes(t("date.minutes"))
+  ) {
+    return dayjs(timestemp).calendar();
+  }
+
+  return fromNowStr;
+};
+
+const linkWrap = ({
+  userID,
+  name,
+  groupID,
+}) => {
+  return `<span class='link-el truncate inline-block align-bottom' onclick='userClick("${userID}","${
+    groupID ?? ""
+  }")'>${name}</span>`;
+};
+
+export const parseBr = (text) => {
+  return text
+    .replace(new RegExp("\\n", "g"), "<br>")
+    .replace(new RegExp("\n", "g"), "<br>");
+};
+
+export const getCleanText = (text) => {
+  return text.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, "");
+};
+
+export const formatMessageByType = (message) => {
+  const userStore = useUserStore();
+  const selfUserID = userStore.storeSelfInfo.userID;
+
+  const isSelf = (id) => id === userStore.storeSelfInfo.userID;
+  const getName = (user) => {
+    return user.userID === selfUserID ? t("you") : user.nickname;
+  };
+
+  switch (message.contentType) {
+    case MessageType.TextMessage:
+      return message.textElem?.content;
+    case MessageType.PictureMessage:
+      return t("messageDescription.imageMessage");
+    case MessageType.VideoMessage:
+      return t("messageDescription.videoMessage");
+    case MessageType.FriendAdded:
+      return t("messageDescription.alreadyFriendMessage");
+    case MessageType.MemberEnter:
+      const enterDetails = JSON.parse(message.notificationElem.detail);
+      const enterUser = enterDetails.entrantUser;
+      return t("messageDescription.joinGroupMessage", {
+        name: getName(enterUser),
+      });
+    case MessageType.GroupCreated:
+      const groupCreatedDetail = JSON.parse(message.notificationElem.detail);
+      const groupCreatedUser = groupCreatedDetail.opUser;
+      return t("messageDescription.createGroupMessage", {
+        creator: getName(groupCreatedUser),
+      });
+    case MessageType.MemberInvited:
+      const inviteDetails = JSON.parse(message.notificationElem.detail);
+      const inviteOpUser = inviteDetails.opUser;
+      const invitedUserList = inviteDetails.invitedUserList ?? [];
+      let inviteStr = "";
+      invitedUserList
+        .slice(0, 3)
+        .map((user) => (inviteStr += `${getName(user)}、`));
+      inviteStr = inviteStr.slice(0, -1);
+      return t("notificationTipMessage.invitedToGroupMessage", {
+        operator: getName(inviteOpUser),
+        invitedUser: `${inviteStr}${
+          invitedUserList.length > 3
+            ? `${t("messageDescription.somePerson", {
+                num: invitedUserList.length,
+              })}`
+            : ""
+        }`,
+      });
+    case MessageType.MemberKicked:
+      const kickDetails = JSON.parse(message.notificationElem.detail);
+      const kickOpUser = kickDetails.opUser;
+      const kickdUserList = kickDetails.kickedUserList ?? [];
+      let kickStr = "";
+      kickdUserList
+        .slice(0, 3)
+        .map((user) => (kickStr += `${getName(user)}、`));
+      kickStr = kickStr.slice(0, -1);
+      return t("messageDescription.kickInGroupMessage", {
+        operator: getName(kickOpUser),
+        kickedUser: `${kickStr}${
+          kickdUserList.length > 3
+            ? `${t("messageDescription.somePerson", {
+                num: kickdUserList.length,
+              })}`
+            : ""
+        }`,
+      });
+    case MessageType.MemberQuit:
+      const quitDetails = JSON.parse(message.notificationElem.detail);
+      const quitUser = quitDetails.quitUser;
+      return t("messageDescription.quitGroupMessage", {
+        name: getName(quitUser),
+      });
+    case MessageType.GroupInfoUpdated:
+      const groupUpdateDetail = JSON.parse(message.notificationElem.detail);
+      const groupUpdateUser = groupUpdateDetail.opUser;
+      return t("messageDescription.updateGroupInfoMessage", {
+        operator: getName(groupUpdateUser),
+      });
+    case MessageType.GroupOwnerTransferred:
+      const transferDetails = JSON.parse(message.notificationElem.detail);
+      const transferOpUser = transferDetails.opUser;
+      const newOwner = transferDetails.newGroupOwner;
+      return t("messageDescription.transferGroupMessage", {
+        owner: getName(transferOpUser),
+        newOwner: getName(newOwner),
+      });
+    case MessageType.GroupDismissed:
+      const dismissDetails = JSON.parse(message.notificationElem.detail);
+      const dismissUser = dismissDetails.opUser;
+      return t("messageDescription.disbanedGroupMessage", {
+        operator: getName(dismissUser),
+      });
+    case MessageType.GroupNameUpdated:
+      const groupNameDetails = JSON.parse(message.notificationElem.detail);
+      return t("messageDescription.updateGroupNameMessage", {
+        operator: getName(groupNameDetails.opUser),
+        name: groupNameDetails.group.groupName,
+      });
+    default:
+      return "";
+  }
+};
+
+export const initStore = async () => {
+  const userStore = useUserStore();
+  const conversationStore = useConversationStore();
+  const contactStore = useContactStore();
+  // userStore.getSelfInfoFromReq();
+  conversationStore.getConversationListFromReq();
+  conversationStore.getUnReadCountFromReq();
+  contactStore.getContactListFromReq();
+  // await getUserInfo()
+//   contactStore.getBlackListFromReq();
+//   contactStore.getGroupListFromReq();
+//   contactStore.getRecvFriendApplicationListFromReq();
+//   contactStore.getSendFriendApplicationListFromReq();
+//   contactStore.getRecvGroupApplicationListFromReq();
+//   contactStore.getSendGroupApplicationListFromReq();
+};
+
+export const conversationSort = (conversationList) => {
+  const arr = [];
+  const filterArr = conversationList.filter(
+    (c) => !arr.includes(c.conversationID) && arr.push(c.conversationID)
+  );
+  filterArr.sort((a, b) => {
+    if (a.isPinned === b.isPinned) {
+      const aCompare =
+        a.draftTextTime > a.latestMsgSendTime
+          ? a.draftTextTime
+          : a.latestMsgSendTime;
+      const bCompare =
+        b.draftTextTime > b.latestMsgSendTime
+          ? b.draftTextTime
+          : b.latestMsgSendTime;
+      if (aCompare > bCompare) {
+        return -1;
+      } else if (aCompare < bCompare) {
+        return 1;
+      } else {
+        return 0;
+      }
+    } else if (a.isPinned && !b.isPinned) {
+      return -1;
+    } else {
+      return 1;
+    }
+  });
+  return filterArr;
+};
+
+export const getFrequentContacts = () => {
+  const userStore = useUserStore();
+  const currentUser = userStore.storeSelfInfo.userID;
+  let myFrequentContacts = [];
+  try {
+    const totalFrequentContacts = JSON.parse(
+      localStorage.getItem("IMFrequentContacts_H5")
+    );
+    myFrequentContacts = totalFrequentContacts[currentUser] ?? [];
+  } catch (error) {}
+  return myFrequentContacts;
+};
+
+export const getConversationContent = (message) => {
+  const userStore = useUserStore();
+  if (
+    !message.groupID ||
+    GroupSystemMessageTypes.includes(message.contentType) ||
+    message.sendID === userStore.storeSelfInfo.userID ||
+    message.contentType === MessageType.GroupAnnouncementUpdated
+  ) {
+    return formatMessageByType(message);
+  }
+  return `${message.senderNickname}：${formatMessageByType(message)}`;
+};
+
+const regex =
+  /\b(https?:\/\/)?((?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9](?:\.[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]+)*\.[a-zA-Z]{2,})(\/[^\s]*)?\b/g;
+
+export const formatLink = (content) =>
+  content.replace(regex, (match) => {
+    let href = match;
+    if (!match.match(/^https?:\/\//)) {
+      href = "https://" + match;
+    }
+    return `<a href="${href}" target="_blank" class="link-el">${match}</a>`;
+  });
+
+export const getUserInfo = () => new Promise(async (resolve, reject) => {
+  const userStore = useUserStore();
+  const { setUserInfo } = userStore;
+  const userRes = await api.login.userInfo();
+  if (userRes.code !== 0) reject(userRes.msg);
+  setUserInfo(userRes.data);
+  resolve(userRes.data);
+})
+
+// export const getConfigInfo = async () => {
+//   const userStore = useUserStore();
+//   const { setAppConfig,appConfig } = userStore;
+//   const configRes = await api.login.getConfigInfo();
+//   console.error('==========configRes',configRes);
+//   if (configRes.code !== 0) return
+//   setAppConfig({
+//     ...appConfig,
+//     ...configRes.data,
+//   });
+// }
+export const getConfigInfo = async () => {
+  const userStore = useUserStore();
+  const route = useRoute();  // 获取当前路由信息
+  const { setAppConfig, appConfig } = userStore;
+  try {
+    const configRes = await api.login.getConfigInfo();
+    if (configRes.code !== 0) return
+    setAppConfig({
+      ...appConfig,
+      ...configRes.data,
+    });
+    return configRes
+  } catch (error) {
+    // 捕捉和处理错误
+    console.error('Error getConfigInfo:', error);
+    // 这里是异步所以需要添加定时器
+    setTimeout(() => {
+      console.error('rou================',route.path);
+      // 仅在路由是 /firstScreen 或 /login 时弹框
+      if (route.path === '/firstScreen' || route.path === '/login') {
+        showConfirmDialog({
+          title: t("dialog_tip1"),
+          message: t("error_http_17"),
+          confirmButtonText: t("refreshing"),
+        })
+          .then(() => {
+            location.reload();
+          })
+          .catch(() => {
+            console.error('取消');
+          });
+      }
+    }, 300);
+  }
+};
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..88331c2
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,95 @@
+import CryptoJS from "crypto-js";
+export const phoneReg = (phone) => {
+    let reg = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
+    return reg.test(phone)
+}
+export const emailReg = (email) => {
+    let reg = /^([a-zA-Z0-9_\.\-])+\@([a-zA-Z0-9\-])+\.[a-zA-Z]{2,6}$/
+    return reg.test(email)
+}
+
+//加密方法
+export const encrypt = (word) => {
+    var key = CryptoJS.enc.Utf8.parse("thisis32bitlongpassphraseimgsda8"); //十六位十六进制数作为秘钥
+    var iv = CryptoJS.enc.Utf8.parse("0123456789abcdef");//十六位十六进制数作为秘钥偏移量
+    var srcs = CryptoJS.enc.Utf8.parse(word);
+    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
+        iv: iv,
+    });
+    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
+}
+
+export const checkIsSafari = () =>
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
+  /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+export const getCleanText = (text) => {
+    return text.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, "");
+};
+
+
+/*
+*
+* 处理禁言时间格式化
+* @param {Number} seconds 秒
+*
+* **/
+export const handle_Prohibition_time = seconds => {
+    if (!seconds) return ''
+    const toMinutes = num => num / 60
+    const toHours = num => toMinutes(num) / 60
+    const toDays = num => toHours(num) / 60
+    const day = toDays(seconds)
+    const hour = toHours(seconds)
+    const minutes = toMinutes(seconds)
+    if (day >= 1) {
+      return day + t('day')
+    } else if (hour >= 1) {
+      return hour % 24 === 0 ? `${hour / 24}${t('day')}` :  hour + t('hours')
+    } else if (minutes >= 1) {
+      return minutes + t('minute')
+    }
+  }
+
+/**
+ * 将颜色值转换为 CSS 背景色样式
+ *
+ * @param color 颜色值，多个颜色值之间用分号隔开
+ * @param onlyValue 是否只返回颜色值（不包括 CSS 属性），默认为 false
+ * @returns 返回 CSS 背景色样式
+ */
+export const color2bgCCss = (color, onlyValue = false) => {
+  if (!color) {
+    return onlyValue ? '' : 'background-color: transparent'
+  }
+    const cls = color.split(';').filter(item => !!item).map(item => item.startsWith('#') ? item : `#${item}`)
+    if (cls.length === 1) {
+        const c = cls[0]
+        return onlyValue ? c : `background-color: ${c}`
+    }
+    const val = `linear-gradient(135deg, ${cls.join(',')})`
+    return onlyValue ? val : `background: linear-gradient(135deg, ${cls.join(',')})`
+}
+
+export const isValidCssColor = (colorString) => {
+  if (!colorString) return false
+  const cssColorRegex = /^(#([A-Fa-f0-9]{3}){1,2}|(rgb|rgba)\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*([01]|0?\.\d+))?\s*\)|[a-zA-Z]+)$/;
+
+  return cssColorRegex.test(colorString);
+}
+
+// 设置全局变量
+export const setGlobalProperty = (path, alpha) => {
+  if (path) {
+    document.documentElement.style.setProperty('--preview-bg', `url(${path})`)
+  } else {
+    document.documentElement.style.removeProperty('--preview-bg')
+  }
+  document.documentElement.style.setProperty('--preview-bg-alpha', `opacity(${alpha || 100}%)`)
+}
+
+// 删除全局变量
+export const clearGlobalProperty = () => {
+  document.documentElement.style.removeProperty('--preview-bg')
+  document.documentElement.style.removeProperty('--preview-bg-alpha')
+}
diff --git a/src/utils/levelConfig.js b/src/utils/levelConfig.js
new file mode 100644
index 0000000..41060fb
--- /dev/null
+++ b/src/utils/levelConfig.js
@@ -0,0 +1,96 @@
+import { onMounted, ref,nextTick ,onUnmounted} from 'vue'
+import BScroll from 'better-scroll'
+import { useRouter } from 'vue-router'
+// import path from "node:path";
+// import Router from "@/router/index.js";
+/**
+ *设置路由级别
+ * @param {any} el_ref 当前组件根节点ref
+ * @param {Number} level 当前页面级别 ，有：1 2  3  4 5
+ * @param {Boolean} isScroll  当前页面是否滚动(未开发)
+ */
+export  function  useGrade(el_ref, level,isScroll=false,callback) {
+  const router = useRouter()
+  const el_overlay = document.createElement('div')
+  
+  onMounted(async ()=>{
+    //设置不同级别
+     switch (level) {
+       case 1:
+         el_ref.value.classList.add('firstly_view')
+         break
+       case 2:
+         el_ref.value.classList.add('secondary_view')
+         break
+       case 3:
+         console.log('我是三级页面')
+         el_ref.value.classList.add('thirdly_view')
+         el_ref.value.parentNode.insertBefore(el_overlay,el_ref.value)
+         el_overlay.classList.add('thirdly_view_overlay')//添加背景模态框
+         await nextTick()
+         //点击返回二级菜单
+         el_overlay.addEventListener('click',e=>{
+           let path = router.currentRoute.value.path.split('/').slice(0,4).join('/')
+           //判断是否开启过四级页面
+           if(el_ref.value.querySelector('.fourth_view')){
+            router.push(path)
+           }else{
+            if(callback){
+              callback()
+            }else{
+              router.push(path)
+            }
+            el_overlay.remove()
+           }
+         })
+         break
+       case 4:
+        if (el_ref.value)el_ref.value.classList.add('fourth_view')
+        break
+       case 5:
+         el_ref.value.classList.add('fifth_view')
+         break
+       default:
+         throw new Error(`${level}级别不存在`)
+     }
+     await nextTick()
+     // if (isScroll){
+     //   new BScroll(el_ref.value, {
+     //     scrollY: true,
+     //     click: true
+     //   })
+     // }
+   })
+  onUnmounted(()=>{
+      //层级为3 去掉遮掩层
+      if (level === 3){
+        el_overlay.remove()
+      }
+  })
+}
+
+/**
+ * 根据不同屏幕宽度 pc同时展示三级与四级页面  移动跳转三级页面
+ * @param {String} thirdly_view_path 三级页面对应地址 格式:  /home/my/account/info
+ * @Param {String} fourth_view_path 4级页面对应地址 格式：/home/my/account/info/modify_name
+ * @return {function}
+ * **/
+export  function useToBelow(){
+
+  const router = useRouter()
+  return  (thirdly_view_path,fourth_view_path)=>{
+
+    if (!fourth_view_path){
+      fourth_view_path = thirdly_view_path
+    }
+
+    const current_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+    if (current_width>= 750){
+      router.push(fourth_view_path)
+    }else {
+      router.push(thirdly_view_path)
+    }
+  }
+
+}
diff --git a/src/utils/local-storage.js b/src/utils/local-storage.js
new file mode 100644
index 0000000..2490082
--- /dev/null
+++ b/src/utils/local-storage.js
@@ -0,0 +1,9 @@
+import store from 'store'
+import expirePlugin from 'store/plugins/expire'
+
+// plugin usage:
+store.addPlugin(expirePlugin)
+
+export { store as localStorage }
+
+export default store
diff --git a/src/utils/messageTimeDeleteHelper.js b/src/utils/messageTimeDeleteHelper.js
new file mode 100644
index 0000000..a005371
--- /dev/null
+++ b/src/utils/messageTimeDeleteHelper.js
@@ -0,0 +1,141 @@
+import api from '@/api';
+import { getSDK } from '@/utils/openIM/sdk/index.js';
+
+class MessageTimeDeleteHelper {
+  constructor() {
+    this.OpenIM = getSDK();
+    
+    
+    // 定时删除会话处理
+
+    // 配置保存时长,单位：毫秒
+    this.msgSaveTime = 0;
+    // 0 表示不限制消息的时间,单位：毫秒
+    this.showMsgEndTime = 0;
+    //可以显示的消息最后时长,单位：毫秒
+    this.lastMsgShowTime = 0;
+    this.conversationID = "";
+    this.singleChat = false;
+    this.doing = false;
+  }
+
+  // 单聊-检测删除消息-计算最后一条能显示消息的时间
+  updateSingleCheck(privateChatConfig, deleteLocal = false, currentServerTime) {
+    // console.log('updateSingleCheck', privateChatConfig, deleteLocal, currentServerTime);
+    // 获取单聊会话的扩展字段 ex
+    let conversationEx = JSON.parse(privateChatConfig.ex || '{}')
+    // 上次删除时间点lastMsgDestructTimeNote
+    let newLastMsgShowTime = conversationEx?.lastMsgDestructTimeNote * 1000;
+    // 判断是否需要删除
+    if(newLastMsgShowTime == this.lastMsgShowTime) return 0
+    // 标记为单聊
+    this.singleChat = true;
+    // 获取会话的保存时间
+    this.msgSaveTime = (conversationEx?.msgDestructTime || 0) * 1000
+    // 上次删除时间点lastMsgDestructTimeNote
+    this.lastMsgShowTime = (conversationEx?.lastMsgDestructTimeNote || 0) * 1000
+    // 获取会话ID
+    this.conversationID = privateChatConfig?.conversationID || ''
+    // 获取当前时间
+    const curTime = new Date().getTime();
+    // 计算最后一条消息的展示时间点
+    this.showMsgEndTime = this.getEndTime(curTime)
+    // 删除本地消息
+    if (deleteLocal) {
+      let code = this.deleteLocalMessage(currentServerTime);
+      return code;
+    }
+    return 0;
+  }
+
+  // 群聊-检测删除消息-计算最后一条能显示消息的时间
+  updateGroupCheck(groupChatConfig, deleteLocal = false, currentServerTime) {
+    // console.log('updateGroupCheck', groupChatConfig, deleteLocal, currentServerTime);
+    // 获取群聊会话的扩展字段 ex
+    let conversationEx = JSON.parse(groupChatConfig.ex || '{}')
+    // 上次删除时间点lastMsgDestructTimeNote
+    let newLastMsgShowTime = conversationEx?.lastMsgDestructTimeNote * 1000;
+    // 判断是否需要删除
+    if(newLastMsgShowTime == this.lastMsgShowTime) return 0
+    // 标记为群聊
+    this.singleChat = false
+    // 获取会话的保存时间
+    this.msgSaveTime = (conversationEx?.msgDestructTime || 0) * 1000
+    // 上次删除时间点lastMsgDestructTimeNote
+    this.lastMsgShowTime = (conversationEx?.lastMsgDestructTimeNote || 0) * 1000
+    // 获取会话ID
+    this.conversationID = groupChatConfig?.conversationID || ''
+    // 获取当前时间
+    const curTime = new Date().getTime();
+    // 计算最后一条消息的展示时间点
+    this.showMsgEndTime = this.getEndTime(curTime)
+    // 删除本地消息
+    if (deleteLocal) {
+      let code = this.deleteLocalMessage(currentServerTime);
+      return code;
+    }
+    return 0;
+  }
+
+  // 检查消息列表是否有过期的消息，并且会移除list里面的过期消息
+  refactorMessageList(list) {
+    const result = list.filter((item) => {
+      if (item.sendTime != null && item.sendTime <= this.showMsgEndTime) {
+        return false
+      }
+      return true
+    })
+    return result;
+  }
+
+  // 删除本地数据库过期的消息。需要取服务器时间为准取计算最后一条可以显示消息的时间
+  async deleteLocalMessage(currentServerTime) {
+    if(!this.conversationID) return -1
+    if (this.msgSaveTime <= 0 && this.lastMsgShowTime <= 0) return -2
+    if (this.doing) return -3;
+    this.doing = true
+    try {
+      let curTime = currentServerTime || 0
+      if (curTime <= 0) {
+        // 获取当前服务器时间
+        const resp = await api.contact.getCurrentTime();
+        if (resp.code !== 0) return -4
+        curTime = resp.data?.currentTime || 0
+        if (curTime <= 0) return -5
+      }
+      // 最后一条消息的保留时间点
+      const endTime = this.getEndTime(curTime)
+      if (!this.conversationID || endTime <= 0) return -6;
+      // 单聊删除阅读即焚消息
+      if(this.singleChat) {
+        //删除阅读即焚消息
+        const burnMsgRes = await api.contact.burnMsgByClearMsg({
+          conversationID: this.conversationID,
+          endTime
+        });
+        if(burnMsgRes.errCode !== 0) return -7
+      }
+      //删除sendTime< endTime的所有消息
+      console.log('clearConversationAndDeleteAllMsgByEndTime-----------------------',endTime,this.conversationID);
+      await this.OpenIM.clearConversationAndDeleteAllMsgByEndTime({
+        conversationID: this.conversationID,
+        endTime
+      });
+      //通知消息清除
+      // MsgTimeDeleteMessage(conversationID!, endTime)
+    } catch (e) {
+      console.log("deleteLocalMessageError", e);
+    } finally {
+      this.doing = false;
+    }
+    return 0;
+  }
+
+  // 计算最后一条可以显示消息的时间
+  getEndTime(curMillis) {
+    let endTime = this.msgSaveTime <= 0 ? this.lastMsgShowTime : Math.max(curMillis - this.msgSaveTime, this.lastMsgShowTime);
+    return endTime;
+  }
+}
+
+export default MessageTimeDeleteHelper;
\ No newline at end of file
diff --git a/src/utils/msgTimeDeleteManager.js b/src/utils/msgTimeDeleteManager.js
new file mode 100644
index 0000000..e2bcbd0
--- /dev/null
+++ b/src/utils/msgTimeDeleteManager.js
@@ -0,0 +1,121 @@
+import api from '@/api'
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+// import { updateSingleCheck, updateGroupCheck } from './messageTimeDeleteHelper'
+import MessageTimeDeleteHelper from "@/utils/messageTimeDeleteHelper";
+
+const OpenIM = getSDK()
+
+///定时删除消息处理逻辑
+///(1) 打开APP 5秒后检查一次（如果当时正在同步中，则再等待5秒，直到同步完成），搜索全部会话信息，删除会话里面的过期消息。
+///（网络异常不处理，app运行期间，非主动设置聊天信息保存时间变化不处理。等待下一次启动APP）
+///(2)打开会话时，检查一次当前打开的会话过期信息,具体看：[MessageTimeDeleteHelper]的处理逻辑，不显示过期的消息信息。
+
+const IDLE = 0;
+const DOING = 1;
+const FINISH = 2;
+let timer = null
+let state = IDLE
+///当前服务器时间
+let curServerTime = 0;
+
+// 同步所有会话信息
+export const syncAllConversation = () => {
+  if (state == IDLE) {
+    state = DOING;
+    if (timer != null) return;
+    timer = setInterval(() => {
+      if (isFinished()) return;
+      // console.log("AppMessageTimeDeleteManager", 'checking')
+      const token = localStorage.getItem('token');
+      // 退出登录 取消定时器
+      if(!token){
+        cancelMsgTimeDelete()
+      }
+      // 同步所有会话信息 根据会话保留时间进行消息删除
+      loadCurrentServerTime()
+    }, 5000);
+  }
+};
+const isFinished = () => state == FINISH
+let loading = false;
+
+const loadCurrentServerTime = async () => {
+  if(loading || curServerTime > 0) return
+  // console.log("AppMessageTimeDeleteManager", "loadCurrentServerTime");
+  loading = true
+  //1.获取当前服务器时间
+  const resp = await api.contact.getCurrentTime();
+  if (resp.code == 0) {
+    curServerTime = resp.data?.currentTime || 0
+  }
+  console.log("AppMessageTimeDeleteManagercurServerTime", curServerTime);
+  if (curServerTime > 0) {
+    cancelTimer()
+    console.log("AppMessageTimeDeleteManager", "START");
+    await checkConversation();
+    console.log("AppMessageTimeDeleteManager", "END");
+  }
+  loading = false
+}
+const checkConversation = async () => {
+  if (isFinished() || curServerTime <= 0) return;
+  // console.log("AppMessageTimeDeleteManagerdelete", `delete curTime:${curServerTime}`);
+  let running = true;
+  let offset = 0;
+  let pageSize = 20;
+  let conversationList = []
+  console.log();
+  // 拉取所有会话
+  while (running) {
+    const conversationRes = await OpenIM.getConversationListSplit({
+      count: pageSize,
+       offset: offset
+    });
+    offset += pageSize;
+    // console.log('ConversationRes',conversationRes);
+    const resList = conversationRes.data || [];
+    conversationList = [...conversationList, ...resList]
+    if (resList.length <= 0) {
+      running = false;
+    }
+  }
+  if(!running){
+    if (isFinished()) return;
+    conversationList.forEach(async (element) => {
+      if (isFinished()) return;
+      // 根据userID或groupID判断是单聊还是群聊
+      if (element.userID) {
+        const messageTimeDeleteHelper = new MessageTimeDeleteHelper();
+        // 检测单聊消息 删除过期消息
+        await messageTimeDeleteHelper.updateSingleCheck(element, true ,curServerTime);
+        // console.log("AppMessageTimeDeleteManagerupdateSingleCheck",`clear result:${element.conversationID},${element.showName}===${code}`);
+      } else if (element.groupID) {
+        // 拉取群聊信息
+        const groupsInfoRes = await OpenIM.getSpecifiedGroupsInfo([element.groupID])
+        // console.log('groupsInfoRes',groupsInfoRes);
+        let groupInfo = null;
+        if(groupsInfoRes && groupsInfoRes.data && groupsInfoRes.data.length > 0) {
+          groupInfo = groupsInfoRes?.data[0];
+        }
+        if (groupInfo == null || isFinished()) return;
+        // console.log('updateGroupCheck',groupInfo,element);
+        const messageTimeDeleteHelper = new MessageTimeDeleteHelper();
+        // 检测群聊消息 删除过期消息
+        await messageTimeDeleteHelper.updateGroupCheck({...element,...groupInfo}, true, curServerTime);
+        // console.log("AppMessageTimeDeleteManagerupdateGroupCheck",`clear result:${element.conversationID},${element.showName}===${code}`);
+      }
+    })
+  }
+}
+const cancelTimer = () => {
+  // console.log("AppMessageTimeDeleteManager", '_cancelTimer')
+  clearInterval(timer);
+  timer = null;
+};
+
+export const cancelMsgTimeDelete = () => {
+  if(timer){
+    cancelTimer(timer);
+  }
+  state = FINISH;
+}
\ No newline at end of file
diff --git a/src/utils/openIM/api/database/black.d.ts b/src/utils/openIM/api/database/black.d.ts
new file mode 100644
index 0000000..698becc
--- /dev/null
+++ b/src/utils/openIM/api/database/black.d.ts
@@ -0,0 +1,7 @@
+export declare function getBlackList(): Promise<string>;
+export declare function getBlackListUserID(): Promise<string>;
+export declare function getBlackInfoByBlockUserID(blockUserID: string, loginUserID: string): Promise<string>;
+export declare function getBlackInfoList(blockUserIDListStr: string): Promise<string>;
+export declare function insertBlack(localBlackStr: string): Promise<string>;
+export declare function deleteBlack(blockUserID: string, loginUserID: string): Promise<string>;
+export declare function updateBlack(localBlackStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/black.js b/src/utils/openIM/api/database/black.js
new file mode 100644
index 0000000..6021a32
--- /dev/null
+++ b/src/utils/openIM/api/database/black.js
@@ -0,0 +1,88 @@
+import { DatabaseErrorCode } from '../../constant';
+import { getBlackList as databaseGetBlackList, getBlackListUserID as databaseGetBlackListUserID, getBlackInfoByBlockUserID as databaseGetBlackInfoByBlockUserID, getBlackInfoList as databaseGetBlackInfoList, insertBlack as databaseInsertBlack, deleteBlack as databasedeleteBlack, updateBlack as databaseupdateBlack, } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function getBlackList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetBlackList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            block_user_id: 'userID',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getBlackListUserID() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetBlackListUserID(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getBlackInfoByBlockUserID(blockUserID, loginUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetBlackInfoByBlockUserID(db, blockUserID, loginUserID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getBlackInfoList(blockUserIDListStr) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetBlackInfoList(db, JSON.parse(blockUserIDListStr));
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertBlack(localBlackStr) {
+    try {
+        const db = await getInstance();
+        const localBlack = convertToSnakeCaseObject(convertObjectField(JSON.parse(localBlackStr), {
+            userID: 'block_user_id',
+            name: 'nickname',
+        }));
+        databaseInsertBlack(db, localBlack);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteBlack(blockUserID, loginUserID) {
+    try {
+        const db = await getInstance();
+        databasedeleteBlack(db, blockUserID, loginUserID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateBlack(localBlackStr) {
+    try {
+        const db = await getInstance();
+        const localBlack = convertToSnakeCaseObject(convertObjectField(JSON.parse(localBlackStr)));
+        databaseupdateBlack(db, localBlack);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/conversation.d.ts b/src/utils/openIM/api/database/conversation.d.ts
new file mode 100644
index 0000000..05ae413
--- /dev/null
+++ b/src/utils/openIM/api/database/conversation.d.ts
@@ -0,0 +1,33 @@
+import { ClientConversation } from '../../sqls';
+export declare function getAllConversationList(): Promise<string>;
+export declare function getAllConversationListToSync(): Promise<string>;
+export declare function getAllSingleConversationIDList(): Promise<string>;
+export declare function getAllConversationIDList(): Promise<string>;
+export declare function getHiddenConversationList(): Promise<string>;
+export declare function getConversation(conversationID: string): Promise<string>;
+export declare function getMultipleConversation(conversationIDList: string): Promise<string>;
+export declare function updateColumnsConversation(conversationID: string, conversation: ClientConversation | string): Promise<string>;
+export declare function decrConversationUnreadCount(conversationID: string, count: number): Promise<string>;
+export declare function batchInsertConversationList(conversationListStr: string): Promise<string>;
+export declare function insertConversation(conversationStr: string): Promise<string>;
+export declare function getTotalUnreadMsgCount(): Promise<string>;
+export declare function getConversationByUserID(userID: string): Promise<string>;
+export declare function getConversationListSplit(offset: number, count: number): Promise<string>;
+export declare function deleteConversation(conversationID: string): Promise<string>;
+export declare function updateConversation(conversationStr: string): Promise<string>;
+export declare function batchUpdateConversationList(conversationListStr: string): Promise<string>;
+export declare function conversationIfExists(conversationID: string): Promise<string>;
+export declare function resetConversation(conversationID: string): Promise<string>;
+export declare function resetAllConversation(): Promise<string>;
+export declare function clearConversation(conversationID: string): Promise<string>;
+export declare function clearConversationByTime(conversationID: string, endTime: number): Promise<string>;
+export declare function clearAllConversation(): Promise<string>;
+export declare function setConversationDraft(conversationID: string, draftText: string): Promise<string>;
+export declare function removeConversationDraft(conversationID: string, draftText: string): Promise<string>;
+export declare function unPinConversation(conversationID: string, isPinned: number): Promise<string>;
+export declare function incrConversationUnreadCount(conversationID: string): Promise<string>;
+export declare function setMultipleConversationRecvMsgOpt(conversationIDListStr: string, opt: number): Promise<string>;
+export declare function getAllConversations(): Promise<string>;
+export declare function batchUpdateConversationsByList(conversationListStr: string): Promise<string>;
+export declare function batchUpdateConversationsByMap(conversationsStr: string): Promise<string>;
+export declare function batchDeleteConversations(conversationIdsStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/conversation.js b/src/utils/openIM/api/database/conversation.js
new file mode 100644
index 0000000..9f23f6e
--- /dev/null
+++ b/src/utils/openIM/api/database/conversation.js
@@ -0,0 +1,456 @@
+import { DatabaseErrorCode } from '../../constant';
+import { batchInsertConversationList as databaseBatchInsertConversationList, decrConversationUnreadCount as databaseDecrConversationUnreadCount,
+     getAllConversationList as databaseGetAllConversationList, getAllConversationListToSync as databaseGetAllConversationListToSync, 
+     getConversation as databaseGetConversation, getHiddenConversationList as databaseGetHiddenConversationList, 
+     getAllSingleConversationIDList as databaseGetAllSingleConversationIDList, getAllConversationIDList as databaseGetAllConversationIDList,
+    updateColumnsConversation as databaseUpdateColumnsConversation, getTotalUnreadMsgCount as databaseGetTotalUnreadMsgCount,
+    getMultipleConversation as databaseGetMultipleConversation, getConversationByUserID as databaseGetConversationByUserID, 
+    getConversationListSplit as databaseGetConversationListSplit, incrConversationUnreadCount as databaseIncrConversationUnreadCount,
+    updateConversation as databaseUpdateConversation, deleteConversation as databaseDeleteConversation,  batchDeleteConversations as databaseBatchDeleteConversations,
+  conversationIfExists as databaseConversationIfExists, resetConversation as databaseResetConversation, resetAllConversation as databaseResetAllConversation,
+    clearConversation as databaseClearConversation, clearConversationByTime as databaseClearConversationByTime, 
+    clearAllConversation as databaseClearAllConversation, setConversationDraft as databaseSetConversationDraft, 
+    removeConversationDraft as databaseRemoveConversationDraft, unPinConversation as databaseUnPinConversation, 
+    batchUpdateConversationsByMap as databaseBatchUpdateConversationsByMap, batchUpdateConversationsByList as databaseBatchUpdateConversationsByList,
+    setMultipleConversationRecvMsgOpt as databaseSetMultipleConversationRecvMsgOpt, getAllConversations as databaseGetAllConversations, } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function getAllConversationList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllConversationList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllConversationListToSync() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllConversationListToSync(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllSingleConversationIDList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllSingleConversationIDList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase').map(item => item.conversationID));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllConversationIDList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllConversationIDList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase').map(item => item.conversationID));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getHiddenConversationList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetHiddenConversationList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getConversation(conversationID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetConversation(db, conversationID);
+        if (execResult.length === 0) {
+            return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no conversation with id ${conversationID}`);
+        }
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ])[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getMultipleConversation(conversationIDList) {
+    try {
+        if(conversationIDList === "null"||conversationIDList === null || conversationIDList === undefined){
+          return
+        }
+        const db = await getInstance();
+        const idList = JSON.parse(conversationIDList);
+        const execResult = databaseGetMultipleConversation(db, idList);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateColumnsConversation(conversationID, conversation) {
+    try {
+        const db = await getInstance();
+        let parsedConversation = conversation;
+        if (typeof conversation === 'string') {
+            parsedConversation = convertToSnakeCaseObject(convertObjectField(JSON.parse(conversation)));
+        }
+        const execResult = databaseUpdateColumnsConversation(db, conversationID, parsedConversation);
+        const modifed = db.getRowsModified();
+        if (modifed === 0) {
+            throw 'updateColumnsConversation no record updated';
+        }
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function decrConversationUnreadCount(conversationID, count) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseDecrConversationUnreadCount(db, conversationID, count);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchInsertConversationList(conversationListStr) {
+    try {
+        const db = await getInstance();
+        const conversationList = (JSON.parse(conversationListStr) || []).map((v) => convertToSnakeCaseObject(v));
+        if (conversationList.length === 0) {
+            return formatResponse('');
+        }
+        const execResult = databaseBatchInsertConversationList(db, conversationList);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertConversation(conversationStr) {
+    return batchInsertConversationList(`[${conversationStr}]`);
+}
+export async function getTotalUnreadMsgCount() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetTotalUnreadMsgCount(db);
+        return formatResponse(execResult[0]?.values[0]?.[0] ?? 0);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getConversationByUserID(userID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetConversationByUserID(db, userID);
+        if (execResult.length === 0) {
+            return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no conversation with userID ${userID}`);
+        }
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ])[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getConversationListSplit(offset, count) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetConversationListSplit(db, offset, count);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteConversation(conversationID) {
+    try {
+        const db = await getInstance();
+        databaseDeleteConversation(db, conversationID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateConversation(conversationStr) {
+    try {
+        const db = await getInstance();
+        const localConversation = convertToSnakeCaseObject(convertObjectField(JSON.parse(conversationStr)));
+        databaseUpdateConversation(db, localConversation);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchUpdateConversationList(conversationListStr) {
+    try {
+        const db = await getInstance();
+        const conversationList = (JSON.parse(conversationListStr) || []).map((v) => convertToSnakeCaseObject(v));
+        if (conversationList.length === 0) {
+            return formatResponse('');
+        }
+        conversationList.forEach(conversation => {
+            databaseUpdateConversation(db, conversation);
+        });
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function conversationIfExists(conversationID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseConversationIfExists(db, conversationID);
+        return formatResponse(execResult.length !== 0);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function resetConversation(conversationID) {
+    try {
+        const db = await getInstance();
+        databaseResetConversation(db, conversationID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function resetAllConversation() {
+    try {
+        const db = await getInstance();
+        databaseResetAllConversation(db);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function clearConversation(conversationID) {
+    try {
+        const db = await getInstance();
+        databaseClearConversation(db, conversationID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function clearConversationByTime(conversationID, endTime) {
+    try {
+        const db = await getInstance();
+        databaseClearConversationByTime(db, conversationID, endTime);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function clearAllConversation() {
+    try {
+        const db = await getInstance();
+        databaseClearAllConversation(db);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function setConversationDraft(conversationID, draftText) {
+    try {
+        const db = await getInstance();
+        databaseSetConversationDraft(db, conversationID, draftText);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function removeConversationDraft(conversationID, draftText) {
+    try {
+        const db = await getInstance();
+        databaseRemoveConversationDraft(db, conversationID, draftText);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function unPinConversation(conversationID, isPinned) {
+    try {
+        const db = await getInstance();
+        databaseUnPinConversation(db, conversationID, isPinned);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+// export async function updateAllConversation(
+//   conversationID: string,
+//   conversation: ClientConversation | string
+// ): Promise<string> {
+//   try {
+//     const db = await getInstance();
+//     let parsedConversation = conversation as ClientConversation;
+//     if (typeof conversation === 'string') {
+//       parsedConversation = convertToSnakeCaseObject(
+//         convertObjectField(JSON.parse(conversation))
+//       ) as ClientConversation;
+//     }
+//     const execResult = databaseUpdateColumnsConversation(
+//       db,
+//       conversationID,
+//       parsedConversation
+//     );
+//     const modifed = db.getRowsModified();
+//     if (modifed === 0) {
+//       throw 'updateColumnsConversation no record updated';
+//     }
+//     return formatResponse(execResult);
+//   } catch (e) {
+//     console.error(e);
+//     return formatResponse(
+//       undefined,
+//       DatabaseErrorCode.ErrorInit,
+//       JSON.stringify(e)
+//     );
+//   }
+// }
+export async function incrConversationUnreadCount(conversationID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseIncrConversationUnreadCount(db, conversationID);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function setMultipleConversationRecvMsgOpt(conversationIDListStr, opt) {
+    try {
+        const db = await getInstance();
+        databaseSetMultipleConversationRecvMsgOpt(db, JSON.parse(conversationIDListStr), opt);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllConversations() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllConversations(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [
+            'isPinned',
+            'isPrivateChat',
+            'isNotInGroup',
+            'isMsgDestruct',
+        ]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+
+export async function batchUpdateConversationsByMap(conversationsJsonStr) {
+    try {
+        const db = await getInstance();
+        let conversations = JSON.parse(conversationsJsonStr);
+        const execResult = databaseBatchUpdateConversationsByMap(db, conversations);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+
+export async function batchUpdateConversationsByList(conversationsJsonStr) {
+    return batchUpdateConversationList(conversationsJsonStr)
+}
+export async function batchDeleteConversations(conversationsIdsStr) {
+  try {
+    const db = await getInstance();
+    databaseBatchDeleteConversations(db, JSON.parse(conversationsIdsStr));
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
\ No newline at end of file
diff --git a/src/utils/openIM/api/database/friend.d.ts b/src/utils/openIM/api/database/friend.d.ts
new file mode 100644
index 0000000..76cf642
--- /dev/null
+++ b/src/utils/openIM/api/database/friend.d.ts
@@ -0,0 +1,12 @@
+export declare function insertFriend(localFriendStr: string): Promise<string>;
+export declare function deleteFriend(friendUserID: string, loginUserID: string): Promise<string>;
+export declare function batchDeleteFriends(loginUserID: string, friendUserIds: string): Promise<string>;
+export declare function updateFriend(localFriendStr: string): Promise<string>;
+export declare function batchUpdateFriends(localFriendsStr: string): Promise<string>;
+export declare function getAllFriendList(loginUserID: string): Promise<string>;
+export declare function getPageFriendList(offset: number, count: number, loginUserID: string): Promise<string>;
+export declare function searchFriendList(key: string, isSearchUserID: boolean, isSearchNickname: boolean, isSearchRemark: boolean): Promise<string>;
+export declare function getFriendInfoByFriendUserID(friendUserID: string, loginUserID: string): Promise<string>;
+export declare function getFriendInfoList(friendUserIDListStr: string): Promise<string>; 
+export declare function getFriendInfos(ownerUserID: string, friendUserIds: string): Promise<string>; 
+export declare function batchInsertFriends(friends: string): Promise<string>; 
diff --git a/src/utils/openIM/api/database/friend.js b/src/utils/openIM/api/database/friend.js
new file mode 100644
index 0000000..db607b7
--- /dev/null
+++ b/src/utils/openIM/api/database/friend.js
@@ -0,0 +1,188 @@
+import { DatabaseErrorCode } from '../../constant';
+import { insertFriend as databaseInsertFriend, deleteFriend as databasedeleteFriend,
+  batchDeleteFriends as databaseBatchDeleteFriends, updateFriend as databaseupdateFriend,
+    getAllFriendList as databaseGetAllFriendList, getPageFriendList as databaseGetPageFriendList, searchFriendList as databasesearchFriendList,
+     getFriendInfoByFriendUserID as databaseGetFriendInfoByFriendUserID, getFriendInfoList as databaseGetFriendInfoList, 
+     getFriendInfos as databaseGetFriendInfos,  batchInsertFriends as databaseBatchInsertFriends
+    } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function insertFriend(localFriendStr) {
+    try {
+        const db = await getInstance();
+        const localFriend = convertToSnakeCaseObject(convertObjectField(JSON.parse(localFriendStr), {
+            userID: 'friend_user_id',
+            nickname: 'name',
+        }));
+        databaseInsertFriend(db, localFriend);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteFriend(friendUserID, loginUserID) {
+    try {
+        const db = await getInstance();
+        databasedeleteFriend(db, friendUserID, loginUserID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchDeleteFriends(loginUserId, friendUserIds) {
+  try {
+    const db = await getInstance();
+    databaseBatchDeleteFriends(db, loginUserId,JSON.parse(friendUserIds));
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function updateFriend(localFriendStr) {
+    try {
+        const db = await getInstance();
+        const localFriend = convertToSnakeCaseObject(convertObjectField(JSON.parse(localFriendStr), {
+            userID: 'friend_user_id',
+            nickname: 'name',
+        }));
+        databaseupdateFriend(db, localFriend);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchUpdateFriends(localFriendsStr) {
+  try {
+    const db = await getInstance();
+    const localFriends = convertToSnakeCaseObject(convertObjectField(JSON.parse(localFriendsStr), {
+      userID: 'friend_user_id',
+      nickname: 'name',
+    }));
+    localFriends.forEach(function (item){
+      databaseupdateFriend(db, item);
+    })
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function getAllFriendList(loginUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllFriendList(db, loginUserID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+            friend_user_id: 'userID',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getPageFriendList(offset, count, loginUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetPageFriendList(db, offset, count, loginUserID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+            friend_user_id: 'userID',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function searchFriendList(key, isSearchUserID, isSearchNickname, isSearchRemark) {
+    try {
+        const db = await getInstance();
+        const execResult = databasesearchFriendList(db, key, isSearchUserID, isSearchNickname, isSearchRemark);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+            friend_user_id: 'userID',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getFriendInfoByFriendUserID(friendUserID, loginUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetFriendInfoByFriendUserID(db, friendUserID, loginUserID);
+        if (execResult.length === 0) {
+            return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no friend with id ${friendUserID}`);
+        }
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+            friend_user_id: 'userID',
+        })[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getFriendInfoList(friendUserIDListStr) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetFriendInfoList(db, JSON.parse(friendUserIDListStr));
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+            friend_user_id: 'userID',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+
+export async function getFriendInfos(ownerUserID,friendUserIds) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetFriendInfos(db, ownerUserID, JSON.parse(friendUserIds));
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+            friend_user_id: 'userID',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+
+export async function batchInsertFriends(friendJsonStr) {
+    try {
+        const db = await getInstance();
+        let arr = JSON.parse(friendJsonStr)
+        let friends = new Array()
+        arr.forEach(element => {
+            const localFriend = convertToSnakeCaseObject(convertObjectField(element, {
+                userID: 'friend_user_id',
+                nickname: 'name',
+            }));
+            friends.push(localFriend)
+        });
+       
+        databaseBatchInsertFriends(db, friends);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
\ No newline at end of file
diff --git a/src/utils/openIM/api/database/friendRequest.d.ts b/src/utils/openIM/api/database/friendRequest.d.ts
new file mode 100644
index 0000000..39551e7
--- /dev/null
+++ b/src/utils/openIM/api/database/friendRequest.d.ts
@@ -0,0 +1,10 @@
+export declare function insertFriendRequest(localFriendRequestStr: string): Promise<string>;
+export declare function batchInsertFriendRequests(localFriendRequestsStr: string): Promise<string>;
+export declare function deleteFriendRequestBothUserID(fromUserID: string, toUserID: string): Promise<string>;
+export declare function batchDeleteFriendRequests(toUserID: string, fromUserIds: string): Promise<string>;
+export declare function updateFriendRequest(localFriendRequestStr: string): Promise<string>;
+export declare function batchUpdateFriendRequests(localFriendRequestsStr: string): Promise<string>;
+export declare function getRecvFriendApplication(loginUserID: string): Promise<string>;
+export declare function getSendFriendApplication(fromUserId: string): Promise<string>;
+export declare function getFriendApplicationByBothID(fromUserID: string, toUserID: boolean): Promise<string>;
+export declare function getBothFriendReq(fromUserID: string, toUserID: boolean): Promise<string>;
diff --git a/src/utils/openIM/api/database/friendRequest.js b/src/utils/openIM/api/database/friendRequest.js
new file mode 100644
index 0000000..dfcbf1b
--- /dev/null
+++ b/src/utils/openIM/api/database/friendRequest.js
@@ -0,0 +1,134 @@
+import { DatabaseErrorCode } from '../../constant';
+import { insertFriendRequest as databaseInsertFriendRequest, deleteFriendRequestBothUserID as databasedeleteFriendRequestBothUserID,
+  updateFriendRequest as databaseupdateFriendRequest, getRecvFriendApplication as databaseGetRecvFriendApplication,
+  getSendFriendApplication as databaseGetSendFriendApplication, getFriendApplicationByBothID as databaseGetFriendApplicationByBothID,
+  getBothFriendReq as databaseGetBothFriendReq,batchDeleteFriendRequests as databaseBatchDeleteFriendRequests,
+  batchInsertFriendRequests as databaseBatchInsertFriendRequests } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function insertFriendRequest(localFriendRequestStr) {
+    try {
+        const db = await getInstance();
+        const localFriendRequest = convertToSnakeCaseObject(convertObjectField(JSON.parse(localFriendRequestStr)));
+        databaseInsertFriendRequest(db, localFriendRequest);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchInsertFriendRequests(localFriendRequestsStr) {
+  try {
+    const db = await getInstance();
+    var arr = JSON.parse(localFriendRequestsStr);
+    var list  = []
+    arr.forEach(function (item){
+      const localFriendRequest = convertToSnakeCaseObject(convertObjectField(item));
+      list.push(localFriendRequest)
+    })
+    databaseBatchInsertFriendRequests(db, list);
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function deleteFriendRequestBothUserID(fromUserID, toUserID) {
+    try {
+        const db = await getInstance();
+        databasedeleteFriendRequestBothUserID(db, fromUserID, toUserID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchDeleteFriendRequests(toUserID,fromUserIds) {
+  try {
+    const db = await getInstance();
+    databaseBatchDeleteFriendRequests(db, toUserID,JSON.parse(fromUserIds));
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function batchUpdateFriendRequests(localFriendRequestsStr) {
+  try {
+    const db = await getInstance();
+    const arr = JSON.parse(localFriendRequestsStr)
+    const list = new Array()
+    arr.forEach(function(item){
+      const obj = convertToSnakeCaseObject(convertObjectField(item));
+      list.push(obj)
+    })
+    list.forEach(function (item){
+      databaseupdateFriendRequest(db, item);
+    })
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function updateFriendRequest(localFriendRequestStr) {
+    try {
+        const db = await getInstance();
+        const localFriendRequest = convertToSnakeCaseObject(convertObjectField(JSON.parse(localFriendRequestStr)));
+        databaseupdateFriendRequest(db, localFriendRequest);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getRecvFriendApplication(loginUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetRecvFriendApplication(db, loginUserID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getSendFriendApplication(fromUserId) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetSendFriendApplication(db, fromUserId);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getFriendApplicationByBothID(fromUserID, toUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetFriendApplicationByBothID(db, fromUserID, toUserID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getBothFriendReq(fromUserID, toUserID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetBothFriendReq(db, fromUserID, toUserID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/groupMember.d.ts b/src/utils/openIM/api/database/groupMember.d.ts
new file mode 100644
index 0000000..763e4b1
--- /dev/null
+++ b/src/utils/openIM/api/database/groupMember.d.ts
@@ -0,0 +1,25 @@
+export declare function getGroupMemberInfoByGroupIDUserID(groupID: string, userID: string): Promise<string>;
+export declare function getAllGroupMemberList(): Promise<string>;
+export declare function getAllGroupMemberUserIDList(): Promise<string>;
+export declare function getAllGroupMemberCount(): Promise<string>;
+export declare function getGroupMemberCount(groupID: string): Promise<string>;
+export declare function getGroupSomeMemberInfo(groupID: string, userIDListStr: string): Promise<string>;
+export declare function getGroupAdminID(groupID: string): Promise<string>;
+export declare function getGroupMemberListByGroupID(groupID: string): Promise<string>;
+export declare function getGroupMemberListSplit(groupID: string, filter: number, offset: number, count: number): Promise<string>;
+export declare function getGroupMemberOwnerAndAdmin(groupID: string): Promise<string>;
+export declare function getGroupMemberOwner(groupID: string): Promise<string>;
+export declare function getGroupMemberListSplitByJoinTimeFilter(groupID: string, offset: number, count: number, joinTimeBegin: number | undefined, joinTimeEnd: number | undefined, userIDListStr: string): Promise<string>;
+export declare function getGroupOwnerAndAdminByGroupID(groupID: string): Promise<string>;
+export declare function getGroupMemberUIDListByGroupID(groupID: string): Promise<string>;
+export declare function insertGroupMember(localGroupMemberStr: string): Promise<string>;
+export declare function batchInsertGroupMember(localGroupMemberStr: string): Promise<string>;
+export declare function deleteGroupMember(groupID: string, userID: string): Promise<string>;
+export declare function batchDeleteGroupMembers(groupID: string, userIds: string): Promise<string>;
+export declare function deleteGroupAllMembers(groupID: string): Promise<string>;
+export declare function updateGroupMember(localGroupMemberStr: string): Promise<string>;
+export declare function batchUpdateGroupMembers(localGroupMembersStr: string): Promise<string>;
+export declare function updateGroupMemberField(groupID: string, userID: string, localGroupMemberStr: string): Promise<string>;
+export declare function searchGroupMembers(keyword: string, groupID: string, isSearchMemberNickname: boolean, isSearchUserID: boolean, offset: number, count: number): Promise<string>;
+export declare function getUserJoinedGroupIDs(userID: string): Promise<string>;
+
diff --git a/src/utils/openIM/api/database/groupMember.js b/src/utils/openIM/api/database/groupMember.js
new file mode 100644
index 0000000..72c6f45
--- /dev/null
+++ b/src/utils/openIM/api/database/groupMember.js
@@ -0,0 +1,316 @@
+import { DatabaseErrorCode } from '../../constant';
+import { getGroupMemberInfoByGroupIDUserID as databaseGetGroupMemberInfoByGroupIDUserID, batchDeleteGroupMembers as databaseBatchDeleteGroupMembers,
+  getAllGroupMemberList as databaseGetAllGroupMemberList, getAllGroupMemberCount as databaseGetAllGroupMemberCount, getAllGroupMemberUserIDList as databaseGetAllGroupMemberUserIDList,
+  getGroupMemberCount as databaseGetGroupMemberCount, getGroupSomeMemberInfo as databaseGetGroupSomeMemberInfo,
+  getGroupAdminID as databaseGetGroupAdminID, getGroupMemberListByGroupID as databaseGetGroupMemberListByGroupID,
+  getGroupMemberListSplit as databaseGetGroupMemberListSplit, getGroupMemberOwnerAndAdmin as databaseGetGroupMemberOwnerAndAdmin,
+  getGroupMemberOwner as databaseGetGroupMemberOwner, getGroupMemberListSplitByJoinTimeFilter as databaseGetGroupMemberListSplitByJoinTimeFilter,
+  getGroupOwnerAndAdminByGroupID as databaseGetGroupOwnerAndAdminByGroupID, getGroupMemberUIDListByGroupID as databaseGetGroupMemberUIDListByGroupID,
+  insertGroupMember as databaseInsertGroupMember, batchInsertGroupMember as databaseBatchInsertGroupMember,
+  deleteGroupMember as databaseDeleteGroupMember, deleteGroupAllMembers as databaseDeleteGroupAllMembers,
+  updateGroupMember as databaseUpdateGroupMember, updateGroupMemberField as databaseUpdateGroupMemberField,
+  searchGroupMembers as databaseSearchGroupMembers, getUserJoinedGroupIDs as databaseGetUserJoinedGroupIDs, } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function getGroupMemberInfoByGroupIDUserID(groupID, userID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberInfoByGroupIDUserID(db, groupID, userID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        })[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllGroupMemberList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllGroupMemberList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllGroupMemberCount() {
+  try {
+    const db = await getInstance();
+    const execResult = databaseGetAllGroupMemberCount(db);
+    return formatResponse(execResult[0]?.values[0]?.[0]);
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function getAllGroupMemberUserIDList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllGroupMemberUserIDList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberCount(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberCount(db, groupID);
+        return formatResponse(execResult[0]?.values[0]?.[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupSomeMemberInfo(groupID, userIDListStr) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupSomeMemberInfo(db, groupID, JSON.parse(userIDListStr));
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupAdminID(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupAdminID(db, groupID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase').map(member => member.userID));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberListByGroupID(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberListByGroupID(db, groupID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberListSplit(groupID, filter, offset, count) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberListSplit(db, groupID, filter, offset, count);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberOwnerAndAdmin(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberOwnerAndAdmin(db, groupID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberOwner(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberOwner(db, groupID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        })[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberListSplitByJoinTimeFilter(groupID, offset, count, joinTimeBegin = 0, joinTimeEnd = 100000000000, userIDListStr) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberListSplitByJoinTimeFilter(db, groupID, offset, count, joinTimeBegin, joinTimeEnd, JSON.parse(userIDListStr));
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupOwnerAndAdminByGroupID(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupOwnerAndAdminByGroupID(db, groupID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberUIDListByGroupID(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberUIDListByGroupID(db, groupID);
+        const userIDList = converSqlExecResult(execResult[0], 'CamelCase');
+        return formatResponse(userIDList.map(item => item.userID));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertGroupMember(localGroupMemberStr) {
+    try {
+        const db = await getInstance();
+        const localGroup = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupMemberStr), {
+            faceURL: 'user_group_face_url',
+        }));
+        databaseInsertGroupMember(db, localGroup);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchInsertGroupMember(localGroupMemberStr) {
+    try {
+        const db = await getInstance();
+        const localGroupList = (JSON.parse(localGroupMemberStr) || []).map((v) => convertToSnakeCaseObject(convertObjectField(v, {
+            faceURL: 'user_group_face_url',
+        })));
+        databaseBatchInsertGroupMember(db, localGroupList);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteGroupMember(groupID, userID) {
+    try {
+        const db = await getInstance();
+        databaseDeleteGroupMember(db, groupID, userID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchDeleteGroupMembers(groupID, userIds) {
+  try {
+    const db = await getInstance();
+    databaseBatchDeleteGroupMembers(db, groupID, JSON.parse(userIds));
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function deleteGroupAllMembers(groupID) {
+    try {
+        const db = await getInstance();
+        databaseDeleteGroupAllMembers(db, groupID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateGroupMember(localGroupMemberStr) {
+    try {
+        const db = await getInstance();
+        const localGroupMember = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupMemberStr), {
+            faceURL: 'user_group_face_url',
+        }));
+        databaseUpdateGroupMember(db, localGroupMember);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchUpdateGroupMembers(localGroupMembersStr) {
+  try {
+    const db = await getInstance();
+    const localGroupMembers = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupMembersStr), {
+      faceURL: 'user_group_face_url',
+    }));
+    localGroupMembers.forEach(function (item){
+      databaseUpdateGroupMember(db, item);
+    })
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function updateGroupMemberField(groupID, userID, localGroupMemberStr) {
+    try {
+        const db = await getInstance();
+        const localGroupMember = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupMemberStr), {
+            faceURL: 'user_group_face_url',
+        }));
+        databaseUpdateGroupMemberField(db, groupID, userID, localGroupMember);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function searchGroupMembers(keyword, groupID, isSearchMemberNickname, isSearchUserID, offset, count) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseSearchGroupMembers(db, keyword, groupID, isSearchMemberNickname, isSearchUserID, offset, count);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            user_group_face_url: 'faceURL',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getUserJoinedGroupIDs(userID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetUserJoinedGroupIDs(db, userID);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase').map(item => item.groupID));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/groupRequest.d.ts b/src/utils/openIM/api/database/groupRequest.d.ts
new file mode 100644
index 0000000..85f4038
--- /dev/null
+++ b/src/utils/openIM/api/database/groupRequest.d.ts
@@ -0,0 +1,8 @@
+export declare function insertGroupRequest(localGroupRequestStr: string): Promise<string>;
+export declare function deleteGroupRequest(groupID: string, userID: string): Promise<string>;
+export declare function updateGroupRequest(localGroupRequestStr: string): Promise<string>;
+export declare function getSendGroupApplication(): Promise<string>;
+export declare function insertAdminGroupRequest(localAdminGroupRequestStr: string): Promise<string>;
+export declare function deleteAdminGroupRequest(groupID: string, userID: string): Promise<string>;
+export declare function updateAdminGroupRequest(localGroupRequestStr: string): Promise<string>;
+export declare function getAdminGroupApplication(): Promise<string>;
diff --git a/src/utils/openIM/api/database/groupRequest.js b/src/utils/openIM/api/database/groupRequest.js
new file mode 100644
index 0000000..eea15ac
--- /dev/null
+++ b/src/utils/openIM/api/database/groupRequest.js
@@ -0,0 +1,126 @@
+import { DatabaseErrorCode } from '../../constant';
+import { insertGroupRequest as databaseInsertGroupRequest, deleteGroupRequest as databaseDeleteGroupRequest, updateGroupRequest as databaseUpdateGroupRequest, getSendGroupApplication as databaseGetSendGroupApplication, insertAdminGroupRequest as databaseInsertAdminGroupRequest, deleteAdminGroupRequest as databaseDeleteAdminGroupRequest, updateAdminGroupRequest as databaseUpdateAdminGroupRequest, getAdminGroupApplication as databaseGetAdminGroupApplication, } from '../../sqls';
+import { convertToSnakeCaseObject, convertObjectField, formatResponse, converSqlExecResult, } from '../../utils';
+import { getInstance } from './instance';
+export async function insertGroupRequest(localGroupRequestStr) {
+    try {
+        const db = await getInstance();
+        const localGroupRequest = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupRequestStr), {
+            groupFaceURL: 'face_url',
+            userFaceURL: 'user_face_url',
+            handledMsg: 'handle_msg',
+            handledTime: 'handle_time',
+        }));
+        databaseInsertGroupRequest(db, localGroupRequest);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteGroupRequest(groupID, userID) {
+    try {
+        const db = await getInstance();
+        databaseDeleteGroupRequest(db, groupID, userID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateGroupRequest(localGroupRequestStr) {
+    try {
+        const db = await getInstance();
+        const localGroupRequest = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupRequestStr), {
+            groupFaceURL: 'face_url',
+            userFaceURL: 'user_face_url',
+            handledMsg: 'handle_msg',
+            handledTime: 'handle_time',
+        }));
+        databaseUpdateGroupRequest(db, localGroupRequest);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getSendGroupApplication() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetSendGroupApplication(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            face_url: 'groupFaceURL',
+            user_face_url: 'userFaceURL',
+            handle_msg: 'handledMsg',
+            handle_time: 'handledTime',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertAdminGroupRequest(localAdminGroupRequestStr) {
+    try {
+        const db = await getInstance();
+        const localAminGroupRequest = convertToSnakeCaseObject(convertObjectField(JSON.parse(localAdminGroupRequestStr), {
+            groupFaceURL: 'face_url',
+            userFaceURL: 'user_face_url',
+            handledMsg: 'handle_msg',
+            handledTime: 'handle_time',
+        }));
+        databaseInsertAdminGroupRequest(db, localAminGroupRequest);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteAdminGroupRequest(groupID, userID) {
+    try {
+        const db = await getInstance();
+        databaseDeleteAdminGroupRequest(db, groupID, userID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateAdminGroupRequest(localGroupRequestStr) {
+    try {
+        const db = await getInstance();
+        const localGroupRequest = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupRequestStr), {
+            groupFaceURL: 'face_url',
+            userFaceURL: 'user_face_url',
+            handledMsg: 'handle_msg',
+            handledTime: 'handle_time',
+        }));
+        databaseUpdateAdminGroupRequest(db, localGroupRequest);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAdminGroupApplication() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAdminGroupApplication(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            face_url: 'groupFaceURL',
+            user_face_url: 'userFaceURL',
+            handle_msg: 'handledMsg',
+            handle_time: 'handledTime',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/groups.d.ts b/src/utils/openIM/api/database/groups.d.ts
new file mode 100644
index 0000000..45e1835
--- /dev/null
+++ b/src/utils/openIM/api/database/groups.d.ts
@@ -0,0 +1,15 @@
+export declare function insertGroup(localGroupStr: string): Promise<string>;
+export declare function batchInsertGroups(localGroupsStr: string): Promise<string>;
+export declare function deleteGroup(groupID: string): Promise<string>;
+export declare function batchDeleteGroups(groupIds: string): Promise<string>;
+export declare function updateGroup(groupID: string, localGroupStr: string): Promise<string>;
+export declare function batchUpdateGroups(localGroupsStr: string): Promise<string>;
+export declare function getJoinedGroupList(): Promise<string>;
+export declare function getGroupInfoByGroupID(groupID: string): Promise<string>;
+export declare function getAllGroupInfoByGroupIDOrGroupName(keyword: string, isSearchGroupID: boolean, isSearchGroupName: boolean): Promise<string>;
+export declare function subtractMemberCount(groupID: string): Promise<string>;
+export declare function addMemberCount(groupID: string): Promise<string>;
+export declare function getJoinedWorkingGroupIDList(): Promise<string>;
+export declare function getJoinedWorkingGroupList(): Promise<string>;
+export declare function getGroupMemberAllGroupIDs(): Promise<string>;
+export declare function getGroups(groupIDListStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/groups.js b/src/utils/openIM/api/database/groups.js
new file mode 100644
index 0000000..242124e
--- /dev/null
+++ b/src/utils/openIM/api/database/groups.js
@@ -0,0 +1,205 @@
+import { DatabaseErrorCode } from '../../constant';
+import { insertGroup as databaseInsertGroup, deleteGroup as databasedeleteGroup, batchInsertGroups as databaseBatchInsertGroups,
+  updateGroup as databaseupdateGroup, batchDeleteGroups as databaseBatchDeleteGroups,
+  getJoinedGroupList as databaseGetJoinedGroupList, getGroupInfoByGroupID as databaseGetGroupInfoByGroupID, getGroupMemberAllGroupIDs as databaseGetGroupMemberAllGroupIDs, getAllGroupInfoByGroupIDOrGroupName as databaseGetAllGroupInfoByGroupIDOrGroupName, subtractMemberCount as databaseSubtractMemberCount, addMemberCount as databaseAddMemberCount, getGroups as databaseGetGroups, } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function insertGroup(localGroupStr) {
+    try {
+        const db = await getInstance();
+        const localGroup = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupStr), { groupName: 'name' }));
+        databaseInsertGroup(db, localGroup);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchInsertGroups(localGroupsStr) {
+  try {
+    const db = await getInstance();
+    let arr = JSON.parse(localGroupsStr)
+    let groups = new Array()
+    arr.forEach(element => {
+      const localFriend = convertToSnakeCaseObject(convertObjectField(element, {
+        groupName: 'name'
+      }));
+      groups.push(localFriend)
+    });
+    databaseBatchInsertGroups(db, groups);
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function deleteGroup(groupID) {
+    try {
+        const db = await getInstance();
+        databasedeleteGroup(db, groupID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchDeleteGroups(groupIds) {
+  try {
+    const db = await getInstance();
+    databaseBatchDeleteGroups(db, JSON.parse(groupIds));
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function updateGroup(groupID, localGroupStr) {
+    try {
+        const db = await getInstance();
+        const localGroup = convertToSnakeCaseObject(convertObjectField(JSON.parse(localGroupStr), { groupName: 'name' }));
+        databaseupdateGroup(db, groupID, localGroup);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+
+export async function batchUpdateGroups(localGroupsStr) {
+  try {
+    const db = await getInstance();
+    let localGroups = new Array()
+    const arr = JSON.parse(localGroupsStr)
+    Object.values(arr).forEach(function(item){
+       var group = convertToSnakeCaseObject(convertObjectField(item, { groupName: 'name' }))
+       localGroups.push(group)
+    })
+    localGroups.forEach(function (item){
+      databaseupdateGroup(db, item.groupID, item);
+    })
+    return formatResponse('');
+  }
+  catch (e) {
+    console.error(e);
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+  }
+}
+export async function getJoinedGroupList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetJoinedGroupList(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], { name: 'groupName' }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupInfoByGroupID(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupInfoByGroupID(db, groupID);
+        if (execResult.length === 0) {
+            return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no group with id ${groupID}`);
+        }
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'groupName',
+        })[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getAllGroupInfoByGroupIDOrGroupName(keyword, isSearchGroupID, isSearchGroupName) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetAllGroupInfoByGroupIDOrGroupName(db, keyword, isSearchGroupID, isSearchGroupName);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], { name: 'groupName' }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function subtractMemberCount(groupID) {
+    try {
+        const db = await getInstance();
+        databaseSubtractMemberCount(db, groupID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function addMemberCount(groupID) {
+    try {
+        const db = await getInstance();
+        databaseAddMemberCount(db, groupID);
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getJoinedWorkingGroupIDList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetJoinedGroupList(db);
+        const allJoinedGroupList = converSqlExecResult(execResult[0], 'CamelCase');
+        const filterIDList = [];
+        allJoinedGroupList.forEach(group => {
+            if (group.groupType === 2) {
+                filterIDList.push(group.groupID);
+            }
+        });
+        return formatResponse(JSON.stringify(filterIDList));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getJoinedWorkingGroupList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetJoinedGroupList(db);
+        const allJoinedGroupList = converSqlExecResult(execResult[0], 'CamelCase', [], { name: 'groupName' });
+        const filterList = allJoinedGroupList.filter(group => group.groupType === 2);
+        return formatResponse(JSON.stringify(filterList));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroupMemberAllGroupIDs() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroupMemberAllGroupIDs(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase').map(item => item.groupID));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getGroups(groupIDListStr) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetGroups(db, JSON.parse(groupIDListStr));
+        const allJoinedGroupList = converSqlExecResult(execResult[0], 'CamelCase', [], { name: 'groupName' });
+        return formatResponse(JSON.stringify(allJoinedGroupList));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/index.d.ts b/src/utils/openIM/api/database/index.d.ts
new file mode 100644
index 0000000..9cf1471
--- /dev/null
+++ b/src/utils/openIM/api/database/index.d.ts
@@ -0,0 +1,15 @@
+export * from './init';
+export * from './message';
+export * from './conversation';
+export * from './users';
+export * from './superGroup';
+export * from './unreadMessage';
+export * from './black';
+export * from './friend';
+export * from './friendRequest';
+export * from './groups';
+export * from './groupRequest';
+export * from './groupMember';
+export * from './tempCacheChatLogs';
+export * from './upload';
+export * from './stranger';
diff --git a/src/utils/openIM/api/database/index.js b/src/utils/openIM/api/database/index.js
new file mode 100644
index 0000000..9cf1471
--- /dev/null
+++ b/src/utils/openIM/api/database/index.js
@@ -0,0 +1,15 @@
+export * from './init';
+export * from './message';
+export * from './conversation';
+export * from './users';
+export * from './superGroup';
+export * from './unreadMessage';
+export * from './black';
+export * from './friend';
+export * from './friendRequest';
+export * from './groups';
+export * from './groupRequest';
+export * from './groupMember';
+export * from './tempCacheChatLogs';
+export * from './upload';
+export * from './stranger';
diff --git a/src/utils/openIM/api/database/init.d.ts b/src/utils/openIM/api/database/init.d.ts
new file mode 100644
index 0000000..83c4275
--- /dev/null
+++ b/src/utils/openIM/api/database/init.d.ts
@@ -0,0 +1,2 @@
+export declare function init(userId: string, dir: string): Promise<string>;
+export declare function close(): Promise<any>;
diff --git a/src/utils/openIM/api/database/init.js b/src/utils/openIM/api/database/init.js
new file mode 100644
index 0000000..8555afa
--- /dev/null
+++ b/src/utils/openIM/api/database/init.js
@@ -0,0 +1,66 @@
+import { DatabaseErrorCode } from '../../constant';
+import { locaBlacks, localFriends, localGroups, localFriendRequests, localGroupRequests, localAdminGroupRequests, localConversations, localUsers, localSuperGroups, localConversationUnreadMessages, localGroupMembers, tempCacheLocalChatLogs, localNotification, localUploads, localStranger, } from '../../sqls';
+import { formatResponse } from '../../utils';
+import { getInstance, resetInstance } from './instance';
+export async function init(userId, dir) {
+    console.info(`=> (database api) invoke init with args ${JSON.stringify({
+        userId,
+        dir,
+    })}`);
+    try {
+        console.time('SDK => (performance measure) init database used ');
+        const db = await getInstance(`${dir}${userId}.sqlite`);
+        const results = [];
+        const execResultLocalUploads = localUploads(db);
+        const execResultLocalStrangers = localStranger(db);
+        const execResultLocalConversations = localConversations(db);
+        const execResultLocalUsers = localUsers(db);
+        const execResultLocalBlack = locaBlacks(db);
+        const execResultLocalFriend = localFriends(db);
+        const execResuLocalGroup = localGroups(db);
+        const execResuLocalGroupRequest = localGroupRequests(db);
+        const execResuLocalGroupMembers = localGroupMembers(db);
+        const execResuLocalAdminGroupRequest = localAdminGroupRequests(db);
+        const execResultlocaFendRequest = localFriendRequests(db);
+        const execResultLocalSuperGroups = localSuperGroups(db);
+        const execResultTempCacheLocalChatLogs = tempCacheLocalChatLogs(db);
+        const execResultlocalNotification = localNotification(db);
+        const execResultLocalConversationUnreadMessages = localConversationUnreadMessages(db);
+        results.push(...[
+            execResultLocalUploads,
+            execResultLocalStrangers,
+            execResultLocalConversations,
+            execResultLocalUsers,
+            execResultLocalSuperGroups,
+            execResultLocalConversationUnreadMessages,
+            execResultLocalBlack,
+            execResultLocalFriend,
+            execResuLocalGroup,
+            execResuLocalGroupMembers,
+            execResultlocaFendRequest,
+            execResuLocalGroupRequest,
+            execResuLocalAdminGroupRequest,
+            execResultTempCacheLocalChatLogs,
+            execResultlocalNotification,
+        ]);
+        return formatResponse(results);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+    finally {
+        console.timeEnd('SDK => (performance measure) init database used ');
+    }
+}
+export async function close() {
+    console.info('=> (database api) invoke close');
+    try {
+        await resetInstance();
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/instance.d.ts b/src/utils/openIM/api/database/instance.d.ts
new file mode 100644
index 0000000..38bfc13
--- /dev/null
+++ b/src/utils/openIM/api/database/instance.d.ts
@@ -0,0 +1,3 @@
+import { Database } from '@jlongster/sql.js';
+export declare function getInstance(filePath?: string): Promise<Database>;
+export declare function resetInstance(): Promise<void>;
diff --git a/src/utils/openIM/api/database/instance.js b/src/utils/openIM/api/database/instance.js
new file mode 100644
index 0000000..d9ed26e
--- /dev/null
+++ b/src/utils/openIM/api/database/instance.js
@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import initSqlJs from '@jlongster/sql.js';
+import { SQLiteFS } from 'absurd-sql-optimized';
+import IndexedDBBackend from 'absurd-sql-optimized/dist/indexeddb-backend';
+self.$RefreshReg$ = () => { };
+self.$RefreshSig$ = () => () => { };
+let instance;
+let SQL;
+async function InitializeDB(filePath) {
+    if (!SQL) {
+        SQL = await initSqlJs({ locateFile: () => '/sql-wasm.wasm' });
+        const sqlFS = new SQLiteFS(SQL.FS, new IndexedDBBackend());
+        SQL.register_for_idb(sqlFS);
+        SQL.FS.mkdir('/sql');
+        SQL.FS.mount(sqlFS, {}, '/sql');
+    }
+    const path = `/sql/${filePath}`;
+    const db = new SQL.Database(path, { filename: true });
+    if (typeof SharedArrayBuffer === 'undefined') {
+        // @ts-ignore
+        const stream = SQL.FS.open(path, 'a+');
+        await stream.node.contents.readIfFallback();
+        // @ts-ignore
+        SQL.FS.close(stream);
+    }
+    db.exec(`
+    PRAGMA page_size=8192;
+    PRAGMA journal_mode=MEMORY;
+  `);
+    return db;
+}
+export function getInstance(filePath) {
+    if (instance) {
+        return instance;
+    }
+    if (!filePath) {
+        throw new Error('must speciefic database file');
+    }
+    instance = new Promise((resolve, reject) => {
+        const db = InitializeDB(filePath);
+        db.then(res => resolve(res)).catch(err => reject(err));
+    });
+    return instance;
+}
+export async function resetInstance() {
+    if (!instance) {
+        return;
+    }
+    const db = await instance;
+    db.close();
+    instance = undefined;
+}
diff --git a/src/utils/openIM/api/database/message.d.ts b/src/utils/openIM/api/database/message.d.ts
new file mode 100644
index 0000000..f581805
--- /dev/null
+++ b/src/utils/openIM/api/database/message.d.ts
@@ -0,0 +1,169 @@
+export declare function getMessage(conversationID: string, clientMsgID: string): Promise<string>
+export declare function getAlreadyExistSeqList(
+  conversationID: string,
+  lostSeqListStr: string
+): Promise<string>
+export declare function getMessageList(
+  conversationID: string,
+  count: number,
+  startTime: number,
+  isReverse?: boolean
+): Promise<string>
+export declare function getMessageBySeq(conversationID: string, seq: number): Promise<string>
+export declare function getMessagesByClientMsgIDs(
+  conversationID: string,
+  clientMsgIDListStr: string
+): Promise<string>
+export declare function getMessagesBySeqs(
+  conversationID: string,
+  seqListStr: string
+): Promise<string>
+export declare function getMessageListNoTime(
+  conversationID: string,
+  count: number,
+  isReverse?: boolean
+): Promise<string>
+export declare function getMessageListNotDel(
+  conversationID: string,
+  count: number,
+  isReverse?: boolean
+): Promise<string>
+export declare function getLastMessageByTime(
+  conversationID: string,
+  count: number,
+  startTime: number,
+  isReverse: boolean
+): Promise<string>
+
+export declare function getConversationNormalMsgSeq(conversationID: string, init: boolean): Promise<string>
+export declare function getConversationPeerNormalMsgSeq(
+  conversationID: string,
+  loginUserID: string
+): Promise<string>
+export declare function getSendingMessageList(conversationID: string): Promise<string>
+export declare function updateMessageTimeAndStatus(
+  conversationID: string,
+  clientMsgID: string,
+  serverMsgID: string,
+  sendTime: number,
+  status: number
+): Promise<string>
+export declare function updateMessageStatus(
+  conversationID: string,
+  clientMsgID: string,
+  serverMsgID: string,
+  sendTime: number,
+  status: number
+): Promise<string>
+export declare function updateMessage(
+  conversationID: string,
+  clientMsgID: string,
+  messageStr: string
+): Promise<string>
+export declare function updateMessageBySeq(
+  conversationID: string,
+  seq: number,
+  messageStr: string
+): Promise<string>
+export declare function batchInsertMessageList(
+  conversationID: string,
+  messageListStr: string
+): Promise<string>
+export declare function insertMessage(conversationID: string, messageStr: string): Promise<string>
+export declare function getMultipleMessage(
+  conversationID: string,
+  messageIDStr: string
+): Promise<string>
+export declare function searchMessageByKeyword(
+  conversationID: string,
+  contentTypeStr: string,
+  keywordListStr: string,
+  keywordListMatchType: number,
+  startTime: number,
+  endTime: number,
+  offset: number,
+  count: number
+): Promise<string>
+export declare function searchMessageByContentType(
+  conversationID: string,
+  contentTypeStr: string,
+  startTime: number,
+  endTime: number,
+  offset: number,
+  count: number
+): Promise<string>
+export declare function searchMessageByContentTypeAndKeyword(
+  conversationID: string,
+  contentTypeStr: string,
+  keywordListStr: string,
+  keywordListMatchType: number,
+  startTime: number,
+  endTime: number
+): Promise<string>
+export declare function messageIfExists(
+  conversationID: string,
+  clientMsgID: string
+): Promise<string>
+export declare function updateMsgSenderFaceURLAndSenderNickname(
+  conversationID: string,
+  sendID: string,
+  faceURL: string,
+  nickname: string
+): Promise<string>
+export declare function deleteConversationAllMessages(conversationID: string): Promise<string>
+export declare function deleteConversationAllMessagesBySeq(conversationID: string, maxSeq: number): Promise<string>
+export declare function markDeleteConversationAllMessages(conversationID: string): Promise<string>
+export declare function getUnreadMessage(
+  conversationID: string,
+  loginUserID: string
+): Promise<string>
+export declare function markConversationMessageAsReadBySeqs(
+  conversationID: string,
+  seqListStr: string,
+  loginUserID: string
+): Promise<string>
+export declare function markConversationMessageAsRead(
+  conversationID: string,
+  clientMsgIDListStr: string,
+  loginUserID: string
+): Promise<string>
+export declare function updateColumnsMessage(
+  conversationID: string,
+  clientMsgID: string,
+  messageStr: string
+): Promise<string>
+export declare function deleteConversationMsgs(
+  conversationID: string,
+  clientMsgIDListStr: string
+): Promise<string>
+export declare function markConversationAllMessageAsRead(
+  conversationID: string,
+  clientMsgIDListStr: string
+): Promise<string>
+export declare function searchAllMessageByContentType(
+  conversationID: string,
+  clientMsgIDListStr: string
+): Promise<string>
+export declare function updateMessageBySeqEx(
+  conversationID: string,
+ clientMsgID: string,
+ seq: number,
+ localChatLogs: string
+): Promise<string>
+type ClientMessage = {
+  [key: string]: any
+}
+export declare function updateMessageBySeqs(
+  conversationID: string,
+  seqs: number[],
+  localChatLogs: ClientMessage,
+): Promise<string>
+
+
+export declare function updateMessageByUserID(
+  conversationID: string,
+  userID: string,
+  localChatLogs: ClientMessage,
+): Promise<string>
+
+
diff --git a/src/utils/openIM/api/database/message.js b/src/utils/openIM/api/database/message.js
new file mode 100644
index 0000000..d051639
--- /dev/null
+++ b/src/utils/openIM/api/database/message.js
@@ -0,0 +1,627 @@
+import { DatabaseErrorCode } from '../../constant'
+import {
+  getMessage as databaseGetMessage,
+  getAlreadyExistSeqList as databaseGetAlreadyExistSeqList,
+  getMessageBySeq as databaseGetMessageBySeq,
+  getMessagesByClientMsgIDs as databaseGetMessagesByClientMsgIDs,
+  getMessagesBySeqs as databaseGetMessagesBySeqs,
+  getMessageListNoTime as databaseGetMessageListNoTime,
+  getMessageListNotDel as databaseGetMessageListNotDel,
+  getConversationNormalMsgSeq as databaseGetConversationNormalMsgSeq,
+  getConversationPeerNormalMsgSeq as databaseGetConversationPeerNormalMsgSeq,
+  getMultipleMessage as databaseGetMultipleMessage,
+  getSendingMessageList as databaseGetSendingMessageList,
+  updateMessageTimeAndStatus as databaseUpdateMessageTimeAndStatus,
+  updateMessageStatus as databaseUpdateMessageStatus,
+  updateMessage as databaseUpdateMessage,
+  updateMessageBySeq as databaseUpdateMessageBySeq,
+  updateColumnsMessage as databaseUpdateColumnsMessage,
+  deleteConversationMsgs as databaseDeleteConversationMsgs,
+  markConversationAllMessageAsRead as databaseMarkConversationAllMessageAsRead,
+  searchAllMessageByContentType as databaseSearchAllMessageByContentType,
+  insertMessage as databaseInsertMessage,
+  batchInsertMessageList as databaseBatchInsertMessageList,
+  getMessageList as databaseGetMesageList,
+  getLastMessageByTime as databaseGetLastMessageByTime,
+  messageIfExists as databaseMessageIfExists,
+  searchMessageByKeyword as databaseSearchMessageByKeyword,
+  searchMessageByContentType as databaseSearchMessageByContentType,
+  searchMessageByContentTypeAndKeyword as databaseSearchMessageByContentTypeAndKeyword,
+  updateMsgSenderFaceURLAndSenderNickname as databaseUpdateMsgSenderFaceURLAndSenderNickname,
+  deleteConversationAllMessages as databaseDeleteConversationAllMessages,
+  deleteConversationAllMessagesBySeq as databaseDeleteConversationAllMessagesBySeq,
+  markDeleteConversationAllMessages as databaseMarkDeleteConversationAllMessages,
+  getUnreadMessage as databaseGetUnreadMessage,
+  markConversationMessageAsReadBySeqs as databaseMarkConversationMessageAsReadBySeqs,
+  markConversationMessageAsRead as databaseMarkConversationMessageAsRead,
+  updateMessageBySeqEx as databaseupdateMessageBySeqEx,
+  updateMessageBySeqs as databaseUpdateMessageBySeqs,
+  updateMessageByUserID as databaseUpdateMessageByUserID,
+} from '../../sqls'
+import {
+  converSqlExecResult,
+  convertObjectField,
+  convertToSnakeCaseObject,
+  formatResponse
+} from '../../utils'
+import { getInstance } from './instance'
+export async function getMessage(conversationID, clientMsgID) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMessage(db, conversationID, clientMsgID)
+    if (execResult.length === 0) {
+      return formatResponse(
+        '',
+        DatabaseErrorCode.ErrorNoRecord,
+        `no message with id ${clientMsgID}`
+      )
+    }
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', [
+        'isRead',
+        'isReact',
+        'isExternalExtensions'
+      ])[0]
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getAlreadyExistSeqList(conversationID, lostSeqListStr) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetAlreadyExistSeqList(
+      db,
+      conversationID,
+      JSON.parse(lostSeqListStr)
+    )
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', [
+        'isRead',
+        'isReact',
+        'isExternalExtensions'
+      ]).map((item) => item.seq) ?? []
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMessageList(conversationID, count, startTime, isReverse = false) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMesageList(db, conversationID, count, startTime, isReverse)
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getLastMessageByTime(conversationID, count, startTime, isReverse = false) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetLastMessageByTime(db, conversationID, count, startTime, isReverse)
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMessageBySeq(conversationID, seq) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMessageBySeq(db, conversationID, seq)
+    if (execResult.length === 0) {
+      return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no message with seq ${seq}`)
+    }
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', [
+        'isRead',
+        'isReact',
+        'isExternalExtensions'
+      ])[0]
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMessagesByClientMsgIDs(conversationID, clientMsgIDListStr) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMessagesByClientMsgIDs(
+      db,
+      conversationID,
+      JSON.parse(clientMsgIDListStr)
+    )
+    if (execResult.length === 0) {
+      return formatResponse(
+        '',
+        DatabaseErrorCode.ErrorNoRecord,
+        `no message with clientMsgIDListStr ${clientMsgIDListStr}`
+      )
+    }
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMessagesBySeqs(conversationID, seqListStr) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMessagesBySeqs(db, conversationID, JSON.parse(seqListStr))
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMessageListNoTime(conversationID, count, isReverse = false) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMessageListNoTime(db, conversationID, count, isReverse)
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMessageListNotDel(conversationID, count, isReverse = false) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMessageListNotDel(db, conversationID, count, isReverse)
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getConversationNormalMsgSeq(conversationID, init) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetConversationNormalMsgSeq(db, conversationID, init)
+    return formatResponse(converSqlExecResult(execResult[0], 'CamelCase')[0]?.seq ?? 0)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getConversationPeerNormalMsgSeq(conversationID, loginUserID) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetConversationPeerNormalMsgSeq(db, conversationID, loginUserID)
+    return formatResponse(converSqlExecResult(execResult[0], 'CamelCase')[0]?.seq ?? 0)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getSendingMessageList(conversationID) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetSendingMessageList(db, conversationID)
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMessageTimeAndStatus(
+  conversationID,
+  clientMsgID,
+  serverMsgID,
+  sendTime,
+  status
+) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseUpdateMessageTimeAndStatus(
+      db,
+      conversationID,
+      clientMsgID,
+      serverMsgID,
+      sendTime,
+      status
+    )
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessageTimeAndStatus no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMessageStatus(
+  conversationID,
+  clientMsgID,
+  status
+) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseUpdateMessageStatus(
+      db,
+      conversationID,
+      clientMsgID,
+      status
+    )
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessageStatus no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMessage(conversationID, clientMsgID, messageStr) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(convertObjectField(JSON.parse(messageStr)))
+    const execResult = databaseUpdateMessage(db, conversationID, clientMsgID, message)
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessage no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMessageBySeq(conversationID, seq, messageStr) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(convertObjectField(JSON.parse(messageStr)))
+    const execResult = databaseUpdateMessageBySeq(db, conversationID, seq, message)
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessageBySeq no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function batchInsertMessageList(conversationID, messageListStr) {
+  try {
+    const db = await getInstance()
+    const messageList = JSON.parse(messageListStr).map((v) => convertToSnakeCaseObject(v))
+    const execResult = databaseBatchInsertMessageList(db, conversationID, messageList)
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function insertMessage(conversationID, messageStr) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(JSON.parse(messageStr))
+    const execResult = databaseInsertMessage(db, conversationID, message)
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getMultipleMessage(conversationID, messageIDStr) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetMultipleMessage(db, conversationID, JSON.parse(messageIDStr))
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function searchMessageByKeyword(
+  conversationID,
+  contentTypeStr,
+  keywordListStr,
+  keywordListMatchType,
+  startTime,
+  endTime,
+  offset,
+  count
+) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseSearchMessageByKeyword(
+      db,
+      conversationID,
+      JSON.parse(contentTypeStr),
+      JSON.parse(keywordListStr),
+      keywordListMatchType,
+      startTime,
+      endTime,
+      offset,
+      count
+    )
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function searchMessageByContentType(
+  conversationID,
+  contentTypeStr,
+  startTime,
+  endTime,
+  offset,
+  count
+) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseSearchMessageByContentType(
+      db,
+      conversationID,
+      JSON.parse(contentTypeStr),
+      startTime,
+      endTime,
+      offset,
+      count
+    )
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function searchMessageByContentTypeAndKeyword(
+  conversationID,
+  contentTypeStr,
+  keywordListStr,
+  keywordListMatchType,
+  startTime,
+  endTime
+) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseSearchMessageByContentTypeAndKeyword(
+      db,
+      conversationID,
+      JSON.parse(contentTypeStr),
+      JSON.parse(keywordListStr),
+      keywordListMatchType,
+      startTime,
+      endTime
+    )
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function messageIfExists(conversationID, clientMsgID) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseMessageIfExists(db, conversationID, clientMsgID)
+    return formatResponse(execResult.length !== 0)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMsgSenderFaceURLAndSenderNickname(
+  conversationID,
+  sendID,
+  faceURL,
+  nickname
+) {
+  try {
+    const db = await getInstance()
+    databaseUpdateMsgSenderFaceURLAndSenderNickname(db, conversationID, sendID, faceURL, nickname)
+    return formatResponse('')
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function deleteConversationAllMessages(conversationID) {
+  try {
+    const db = await getInstance()
+    databaseDeleteConversationAllMessages(db, conversationID)
+    return formatResponse('')
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function deleteConversationAllMessagesBySeq(conversationID, maxSeq) {
+  try {
+    const db = await getInstance()
+    databaseDeleteConversationAllMessagesBySeq(db, conversationID, maxSeq)
+    return formatResponse('')
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function markDeleteConversationAllMessages(conversationID) {
+  try {
+    const db = await getInstance()
+    databaseMarkDeleteConversationAllMessages(db, conversationID)
+    return formatResponse('')
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function getUnreadMessage(conversationID, loginUserID) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseGetUnreadMessage(db, conversationID, loginUserID)
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function markConversationMessageAsReadBySeqs(conversationID, seqListStr, loginUserID) {
+  try {
+    const db = await getInstance()
+    databaseMarkConversationMessageAsReadBySeqs(
+      db,
+      conversationID,
+      JSON.parse(seqListStr),
+      loginUserID
+    )
+    return formatResponse(db.getRowsModified())
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function markConversationMessageAsRead(
+  conversationID,
+  clientMsgIDListStr,
+  loginUserID
+) {
+  try {
+    const db = await getInstance()
+    databaseMarkConversationMessageAsRead(
+      db,
+      conversationID,
+      JSON.parse(clientMsgIDListStr),
+      loginUserID
+    )
+    return formatResponse(db.getRowsModified())
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateColumnsMessage(conversationID, clientMsgID, messageStr) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(convertObjectField(JSON.parse(messageStr)))
+    const execResult = databaseUpdateColumnsMessage(db, conversationID, clientMsgID, message)
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessage no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function deleteConversationMsgs(conversationID, clientMsgIDListStr) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseDeleteConversationMsgs(
+      db,
+      conversationID,
+      JSON.parse(clientMsgIDListStr)
+    )
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function markConversationAllMessageAsRead(conversationID, clientMsgIDListStr) {
+  try {
+    const db = await getInstance()
+    databaseMarkConversationAllMessageAsRead(db, conversationID, JSON.parse(clientMsgIDListStr))
+    return formatResponse(db.getRowsModified())
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function searchAllMessageByContentType(conversationID, clientMsgIDListStr) {
+  try {
+    const db = await getInstance()
+    const execResult = databaseSearchAllMessageByContentType(
+      db,
+      conversationID,
+      JSON.parse(clientMsgIDListStr)
+    )
+    return formatResponse(
+      converSqlExecResult(execResult[0], 'CamelCase', ['isRead', 'isReact', 'isExternalExtensions'])
+    )
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMessageBySeqEx(conversationID, clientMsgID, localChatLogs) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(convertObjectField(JSON.parse(localChatLogs)))
+    const execResult = databaseupdateMessageBySeqEx(db, conversationID, clientMsgID, message)
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessage no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+export async function updateMessageBySeqs(conversationID, seqs, localChatLogs) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(convertObjectField(JSON.parse(localChatLogs)))
+    const execResult = databaseUpdateMessageBySeqs(db, conversationID, JSON.parse(seqs), message)
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessage no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+
+export async function updateMessageByUserID(conversationID, userID, localChatLogs) {
+  try {
+    const db = await getInstance()
+    const message = convertToSnakeCaseObject(convertObjectField(JSON.parse(localChatLogs)))
+    const execResult = databaseUpdateMessageByUserID(db, conversationID, userID, message)
+    const modifed = db.getRowsModified()
+    if (modifed === 0) {
+      throw 'updateMessage no record updated'
+    }
+    return formatResponse(execResult)
+  } catch (e) {
+    console.error(e)
+    return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e))
+  }
+}
+
+
diff --git a/src/utils/openIM/api/database/notification.d.ts b/src/utils/openIM/api/database/notification.d.ts
new file mode 100644
index 0000000..4187386
--- /dev/null
+++ b/src/utils/openIM/api/database/notification.d.ts
@@ -0,0 +1,2 @@
+export declare function setNotificationSeq(conversationID: string, seq: number): Promise<string>;
+export declare function getNotificationAllSeqs(): Promise<string>;
diff --git a/src/utils/openIM/api/database/notification.js b/src/utils/openIM/api/database/notification.js
new file mode 100644
index 0000000..a604261
--- /dev/null
+++ b/src/utils/openIM/api/database/notification.js
@@ -0,0 +1,30 @@
+import { DatabaseErrorCode } from '../../constant';
+import { insertNotificationSeq as databaseInsertNotificationSeq, setNotificationSeq as databaseSetNotificationSeq, getNotificationAllSeqs as databaseGetNotificationAllSeqs, } from '../../sqls';
+import { converSqlExecResult, formatResponse } from '../../utils';
+import { getInstance } from './instance';
+export async function setNotificationSeq(conversationID, seq) {
+    try {
+        const db = await getInstance();
+        let execResult = databaseSetNotificationSeq(db, conversationID, seq);
+        const modified = db.getRowsModified();
+        if (modified === 0) {
+            execResult = databaseInsertNotificationSeq(db, conversationID, seq);
+        }
+        return formatResponse(execResult[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getNotificationAllSeqs() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetNotificationAllSeqs(db);
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase'));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/stranger.d.ts b/src/utils/openIM/api/database/stranger.d.ts
new file mode 100644
index 0000000..a05fab8
--- /dev/null
+++ b/src/utils/openIM/api/database/stranger.d.ts
@@ -0,0 +1,4 @@
+import { LocalStranger } from '../../sqls';
+export declare function getStrangerInfo(userIDListStr: string): Promise<string>;
+export declare function setStrangerInfo(localStrangerInfoListStr: string): Promise<string>;
+export declare function setSingleStrangerInfo(localStrangerInfo: LocalStranger): Promise<string>;
diff --git a/src/utils/openIM/api/database/stranger.js b/src/utils/openIM/api/database/stranger.js
new file mode 100644
index 0000000..3d7db94
--- /dev/null
+++ b/src/utils/openIM/api/database/stranger.js
@@ -0,0 +1,48 @@
+import { getStrangerInfo as databaseGetStrangerInfo, insertStrangerInfo as databseInsertStrangerInfo, updateStrangerInfo as databaseUpdateStrangerInfo, } from '../../sqls';
+import { getInstance } from './instance';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { DatabaseErrorCode } from '../../constant';
+export async function getStrangerInfo(userIDListStr) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetStrangerInfo(db, JSON.parse(userIDListStr));
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+        }));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function setStrangerInfo(localStrangerInfoListStr) {
+    try {
+        const localStrangerInfoList = JSON.parse(localStrangerInfoListStr).map((item) => convertToSnakeCaseObject(convertObjectField(item, {
+            nickname: 'name',
+        })));
+        localStrangerInfoList.map((localStrangerInfo) => setSingleStrangerInfo(localStrangerInfo));
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function setSingleStrangerInfo(localStrangerInfo) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetStrangerInfo(db, [localStrangerInfo.user_id]);
+        const result = converSqlExecResult(execResult[0]);
+        if (result.length) {
+            databaseUpdateStrangerInfo(db, localStrangerInfo);
+        }
+        else {
+            databseInsertStrangerInfo(db, localStrangerInfo);
+        }
+        return formatResponse('');
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/superGroup.d.ts b/src/utils/openIM/api/database/superGroup.d.ts
new file mode 100644
index 0000000..5a32d40
--- /dev/null
+++ b/src/utils/openIM/api/database/superGroup.d.ts
@@ -0,0 +1,6 @@
+export declare function getJoinedSuperGroupList(): Promise<string>;
+export declare function getJoinedSuperGroupIDList(): Promise<string>;
+export declare function getSuperGroupInfoByGroupID(groupID: string): Promise<string>;
+export declare function deleteSuperGroup(groupID: string): Promise<string>;
+export declare function insertSuperGroup(groupStr: string): Promise<string>;
+export declare function updateSuperGroup(groupID: string, groupStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/superGroup.js b/src/utils/openIM/api/database/superGroup.js
new file mode 100644
index 0000000..c4a0578
--- /dev/null
+++ b/src/utils/openIM/api/database/superGroup.js
@@ -0,0 +1,81 @@
+import { DatabaseErrorCode } from '../../constant';
+import { getJoinedSuperGroupList as databaseGetJoinedSuperGroupList, insertSuperGroup as databaseInsertSuperGroup, updateSuperGroup as databaseUpdateSuperGroup, deleteSuperGroup as databaseDeleteSuperGroup, getSuperGroupInfoByGroupID as databaseGetSuperGroupInfoByGroupID, } from '../../sqls';
+import { formatResponse, converSqlExecResult, convertToSnakeCaseObject, convertObjectField, } from '../../utils';
+import { getInstance } from './instance';
+export async function getJoinedSuperGroupList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetJoinedSuperGroupList(db);
+        return formatResponse(converSqlExecResult(execResult[0]));
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getJoinedSuperGroupIDList() {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetJoinedSuperGroupList(db);
+        const records = converSqlExecResult(execResult[0]);
+        const groupIds = records.map(r => r.groupID);
+        return formatResponse(groupIds);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function getSuperGroupInfoByGroupID(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetSuperGroupInfoByGroupID(db, groupID);
+        if (execResult.length === 0) {
+            return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no super group with id ${groupID}`);
+        }
+        return formatResponse(converSqlExecResult(execResult[0])[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteSuperGroup(groupID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseDeleteSuperGroup(db, groupID);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertSuperGroup(groupStr) {
+    try {
+        const db = await getInstance();
+        const group = convertToSnakeCaseObject(convertObjectField(JSON.parse(groupStr), { groupName: 'name' }));
+        const execResult = databaseInsertSuperGroup(db, group);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateSuperGroup(groupID, groupStr) {
+    try {
+        const db = await getInstance();
+        const group = convertToSnakeCaseObject(convertObjectField(JSON.parse(groupStr), { groupName: 'name' }));
+        const execResult = databaseUpdateSuperGroup(db, groupID, group);
+        const modifed = db.getRowsModified();
+        if (modifed === 0) {
+            throw 'updateSuperGroup no record updated';
+        }
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/tempCacheChatLogs.d.ts b/src/utils/openIM/api/database/tempCacheChatLogs.d.ts
new file mode 100644
index 0000000..459c4b2
--- /dev/null
+++ b/src/utils/openIM/api/database/tempCacheChatLogs.d.ts
@@ -0,0 +1,2 @@
+export declare function batchInsertTempCacheMessageList(messageListStr: string): Promise<string>;
+export declare function InsertTempCacheMessage(messageStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/tempCacheChatLogs.js b/src/utils/openIM/api/database/tempCacheChatLogs.js
new file mode 100644
index 0000000..be56cf2
--- /dev/null
+++ b/src/utils/openIM/api/database/tempCacheChatLogs.js
@@ -0,0 +1,19 @@
+import { DatabaseErrorCode } from '../../constant';
+import { batchInsertTempCacheMessageList as databseBatchInsertTempCacheMessageList, } from '../../sqls';
+import { convertToSnakeCaseObject, formatResponse } from '../../utils';
+import { getInstance } from './instance';
+export async function batchInsertTempCacheMessageList(messageListStr) {
+    try {
+        const db = await getInstance();
+        const messageList = JSON.parse(messageListStr).map((v) => convertToSnakeCaseObject(v));
+        const execResult = databseBatchInsertTempCacheMessageList(db, messageList);
+        return formatResponse(execResult[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function InsertTempCacheMessage(messageStr) {
+    return batchInsertTempCacheMessageList(`[${messageStr}]`);
+}
diff --git a/src/utils/openIM/api/database/unreadMessage.d.ts b/src/utils/openIM/api/database/unreadMessage.d.ts
new file mode 100644
index 0000000..2f46f67
--- /dev/null
+++ b/src/utils/openIM/api/database/unreadMessage.d.ts
@@ -0,0 +1,2 @@
+export declare function deleteConversationUnreadMessageList(conversationID: string, sendTime: number): Promise<string>;
+export declare function batchInsertConversationUnreadMessageList(messageListStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/unreadMessage.js b/src/utils/openIM/api/database/unreadMessage.js
new file mode 100644
index 0000000..ab9b1e3
--- /dev/null
+++ b/src/utils/openIM/api/database/unreadMessage.js
@@ -0,0 +1,28 @@
+import { DatabaseErrorCode } from '../../constant';
+import { batchInsertConversationUnreadMessageList as databaseBatchInsertConversationUnreadMessageList, deleteConversationUnreadMessageList as databaseDeleteConversationUnreadMessageList, } from '../../sqls';
+import { convertToSnakeCaseObject, formatResponse } from '../../utils';
+import { getInstance } from './instance';
+export async function deleteConversationUnreadMessageList(conversationID, sendTime) {
+    try {
+        const db = await getInstance();
+        databaseDeleteConversationUnreadMessageList(db, conversationID, sendTime);
+        const modifed = db.getRowsModified();
+        return formatResponse(modifed);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function batchInsertConversationUnreadMessageList(messageListStr) {
+    try {
+        const db = await getInstance();
+        const messageList = JSON.parse(messageListStr).map((v) => convertToSnakeCaseObject(v));
+        const execResult = databaseBatchInsertConversationUnreadMessageList(db, messageList);
+        return formatResponse(execResult[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/upload.d.ts b/src/utils/openIM/api/database/upload.d.ts
new file mode 100644
index 0000000..ba8de85
--- /dev/null
+++ b/src/utils/openIM/api/database/upload.d.ts
@@ -0,0 +1,4 @@
+export declare function getUpload(partHash: string): Promise<string>;
+export declare function insertUpload(uploadStr: string): Promise<string>;
+export declare function updateUpload(uploadStr: string): Promise<string>;
+export declare function deleteUpload(partHash: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/upload.js b/src/utils/openIM/api/database/upload.js
new file mode 100644
index 0000000..4b9a75b
--- /dev/null
+++ b/src/utils/openIM/api/database/upload.js
@@ -0,0 +1,54 @@
+import { DatabaseErrorCode } from '../../constant';
+import { getUpload as databaseGetUpload, insertUpload as databaseInsertUpload, updateUpload as databaseUpdateUpload, deleteUpload as databaseDeleteUpload, } from '../../sqls';
+import { converSqlExecResult, convertObjectField, convertToSnakeCaseObject, formatResponse, } from '../../utils';
+import { getInstance } from './instance';
+export async function getUpload(partHash) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetUpload(db, partHash);
+        const upload = converSqlExecResult(execResult[0], 'CamelCase');
+        if (upload.length === 0) {
+            throw `no upload with partHash = ${partHash}`;
+        }
+        return formatResponse(upload[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertUpload(uploadStr) {
+    try {
+        const db = await getInstance();
+        const upload = convertToSnakeCaseObject(convertObjectField(JSON.parse(uploadStr)));
+        const execResult = databaseInsertUpload(db, upload);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateUpload(uploadStr) {
+    try {
+        const db = await getInstance();
+        const upload = convertToSnakeCaseObject(convertObjectField(JSON.parse(uploadStr)));
+        const execResult = databaseUpdateUpload(db, upload);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function deleteUpload(partHash) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseDeleteUpload(db, partHash);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/database/users.d.ts b/src/utils/openIM/api/database/users.d.ts
new file mode 100644
index 0000000..a4a544b
--- /dev/null
+++ b/src/utils/openIM/api/database/users.d.ts
@@ -0,0 +1,3 @@
+export declare function getLoginUser(userID: string): Promise<string>;
+export declare function insertLoginUser(userStr: string): Promise<string>;
+export declare function updateLoginUser(userStr: string): Promise<string>;
diff --git a/src/utils/openIM/api/database/users.js b/src/utils/openIM/api/database/users.js
new file mode 100644
index 0000000..53e3011
--- /dev/null
+++ b/src/utils/openIM/api/database/users.js
@@ -0,0 +1,48 @@
+import { DatabaseErrorCode } from '../../constant';
+import { getLoginUser as databaseGetLoginUser, insertLoginUser as databaseInsertLoginUser, updateLoginUser as databaseUpdateLoginUser, } from '../../sqls';
+import { formatResponse, converSqlExecResult, convertToSnakeCaseObject, convertObjectField, } from '../../utils';
+import { getInstance } from './instance';
+export async function getLoginUser(userID) {
+    try {
+        const db = await getInstance();
+        const execResult = databaseGetLoginUser(db, userID);
+        if (execResult.length === 0) {
+            return formatResponse('', DatabaseErrorCode.ErrorNoRecord, `no login user with id ${userID}`);
+        }
+        return formatResponse(converSqlExecResult(execResult[0], 'CamelCase', [], {
+            name: 'nickname',
+        })[0]);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function insertLoginUser(userStr) {
+    try {
+        const db = await getInstance();
+        const user = convertToSnakeCaseObject(convertObjectField(JSON.parse(userStr), { nickname: 'name' }));
+        const execResult = databaseInsertLoginUser(db, user);
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
+export async function updateLoginUser(userStr) {
+    try {
+        const db = await getInstance();
+        const user = convertToSnakeCaseObject(convertObjectField(JSON.parse(userStr), { nickname: 'name' }));
+        const execResult = databaseUpdateLoginUser(db, user);
+        const modifed = db.getRowsModified();
+        if (modifed === 0) {
+            throw 'updateLoginUser no record updated';
+        }
+        return formatResponse(execResult);
+    }
+    catch (e) {
+        console.error(e);
+        return formatResponse(undefined, DatabaseErrorCode.ErrorInit, JSON.stringify(e));
+    }
+}
diff --git a/src/utils/openIM/api/index.d.ts b/src/utils/openIM/api/index.d.ts
new file mode 100644
index 0000000..0e4e418
--- /dev/null
+++ b/src/utils/openIM/api/index.d.ts
@@ -0,0 +1,4 @@
+export declare const fileMapSet: (...args: unknown[]) => Promise<any>;
+export declare const fileMapClear: (...args: unknown[]) => Promise<any>;
+export declare function initDatabaseAPI(): void;
+export declare const workerPromise: Promise<void> | undefined;
diff --git a/src/utils/openIM/api/index.js b/src/utils/openIM/api/index.js
new file mode 100644
index 0000000..4b23daa
--- /dev/null
+++ b/src/utils/openIM/api/index.js
@@ -0,0 +1,395 @@
+import { initBackend } from 'absurd-sql-optimized/dist/indexeddb-main-thread'
+import { RPCMessageEvent, RPC } from 'rpc-shooter'
+import { DatabaseErrorCode } from '../constant'
+// @ts-ignore
+//  for vite
+import IMWorker from './worker?worker'
+import {batchUpdateGroupMembers} from "./database/groupMember.js";
+import {batchDeleteGroups} from "../sqls/index.js";
+import {batchInsertGroups} from "./database/groups.js";
+import {
+  batchDeleteConversations,
+  batchDeleteFriendRequests, batchDeleteGroupMembers,
+  batchInsertFriendRequests,
+  batchUpdateFriendRequests, getAllGroupMemberCount
+} from "./database/index.js";
+//  @ts-ignore
+//  for webpack4
+// import IMWorker from 'worker-loader!./worker.js';
+let rpc
+let worker
+function initWorker() {
+  if (typeof window === 'undefined') {
+    return
+  }
+  // for webpack4 or vite
+  worker = new IMWorker()
+  // for webpack5
+  // worker = new Worker(new URL('./worker.js', import.meta.url));
+  // This is only required because Safari doesn't support nested
+  // workers. This installs a handler that will proxy creating web
+  // workers through the main thread
+  initBackend(worker)
+  rpc = new RPC({
+    event: new RPCMessageEvent({
+      currentEndpoint: worker,
+      targetEndpoint: worker
+    })
+  })
+}
+function resetWorker() {
+  if (rpc) {
+    rpc.destroy()
+    rpc = undefined
+  }
+  if (worker) {
+    worker.terminate()
+    worker = undefined
+  }
+}
+initWorker()
+function catchErrorHandle(error) {
+  // defined in rpc-shooter
+  if (error.code === -32300) {
+    resetWorker()
+    return JSON.stringify({
+      data: '',
+      errCode: DatabaseErrorCode.ErrorDBTimeout,
+      errMsg: 'database maybe damaged'
+    })
+  }
+  throw error
+}
+function registeMethodOnWindow(name, realName, needStringify = true) {
+  // console.info(`=> (database api) registe ${realName ?? name}`);
+  return async (...args) => {
+    if (!rpc || !worker) {
+      initWorker()
+    }
+    if (!rpc) {
+      return
+    }
+    try {
+      // console.info(
+      //   `=> (invoked by go wasm) run ${realName ?? name} method with args ${JSON.stringify(args)}`
+      // )
+      const response = await rpc.invoke(name, ...args, { timeout: 5000000 })
+      // console.info(
+      //   `=> (invoked by go wasm) run ${realName ?? name} method with response `,
+      //   JSON.stringify(response)
+      // )
+      if (!needStringify) {
+        return response
+      }
+      return JSON.stringify(response)
+    } catch (error) {
+      // defined in rpc-shooter
+      catchErrorHandle(error)
+    }
+  }
+}
+export const fileMapSet = registeMethodOnWindow('fileMapSet')
+export const fileMapClear = registeMethodOnWindow('fileMapClear')
+// register method on window for go wasm invoke
+export function initDatabaseAPI() {
+  if (!rpc) {
+    return
+  }
+  // upload
+  window.wasmOpen = registeMethodOnWindow('wasmOpen')
+  window.wasmClose = registeMethodOnWindow('wasmClose')
+  window.wasmRead = registeMethodOnWindow('wasmRead', 'wasmRead', false)
+  window.getUpload = registeMethodOnWindow('getUpload')
+  window.insertUpload = registeMethodOnWindow('insertUpload')
+  window.updateUpload = registeMethodOnWindow('updateUpload')
+  window.deleteUpload = registeMethodOnWindow('deleteUpload')
+  window.initDB = registeMethodOnWindow('initDB')
+  window.close = registeMethodOnWindow('close')
+  // message
+  window.updateMessageBySeqs = registeMethodOnWindow('updateMessageBySeqs')   
+  window.updateMessageByUserID = registeMethodOnWindow('updateMessageByUserID') 
+  window.updateMessageBySeqEx = registeMethodOnWindow('updateMessageBySeqEx')
+  window.getMessage = registeMethodOnWindow('getMessage')
+  window.getMultipleMessage = registeMethodOnWindow('getMultipleMessage')
+  window.getSendingMessageList = registeMethodOnWindow('getSendingMessageList')
+  window.getNormalMsgSeq = registeMethodOnWindow('getNormalMsgSeq')
+  window.updateMessageTimeAndStatus = registeMethodOnWindow('updateMessageTimeAndStatus')
+  window.updateMessage = registeMethodOnWindow('updateMessage')
+  window.updateMessageBySeq = registeMethodOnWindow('updateMessageBySeq')
+  window.updateColumnsMessage = registeMethodOnWindow('updateColumnsMessage')
+  window.insertMessage = registeMethodOnWindow('insertMessage')
+  window.batchInsertMessageList = registeMethodOnWindow('batchInsertMessageList')
+  window.getMessageList = registeMethodOnWindow('getMessageList')
+  window.getMessageListNoTime = registeMethodOnWindow('getMessageListNoTime')
+  window.getMessageListNotDel = registeMethodOnWindow('getMessageListNotDel')
+  window.getLastMessageByTime = registeMethodOnWindow('getLastMessageByTime')
+  window.messageIfExists = registeMethodOnWindow('messageIfExists')
+  window.messageIfExistsBySeq = registeMethodOnWindow('messageIfExistsBySeq')
+  window.getAbnormalMsgSeq = registeMethodOnWindow('getAbnormalMsgSeq')
+  window.getAbnormalMsgSeqList = registeMethodOnWindow('getAbnormalMsgSeqList')
+  window.batchInsertExceptionMsg = registeMethodOnWindow('batchInsertExceptionMsg')
+  window.searchMessageByKeyword = registeMethodOnWindow('searchMessageByKeyword')
+  window.searchMessageByContentType = registeMethodOnWindow('searchMessageByContentType')
+  window.searchMessageByContentTypeAndKeyword = registeMethodOnWindow(
+    'searchMessageByContentTypeAndKeyword'
+  )
+  window.updateMsgSenderNickname = registeMethodOnWindow('updateMsgSenderNickname')
+  window.updateMsgSenderFaceURL = registeMethodOnWindow('updateMsgSenderFaceURL')
+  window.updateMsgSenderFaceURLAndSenderNickname = registeMethodOnWindow(
+    'updateMsgSenderFaceURLAndSenderNickname'
+  )
+  window.getMsgSeqByClientMsgID = registeMethodOnWindow('getMsgSeqByClientMsgID')
+  window.getMsgSeqListByGroupID = registeMethodOnWindow('getMsgSeqListByGroupID')
+  window.getMsgSeqListByPeerUserID = registeMethodOnWindow('getMsgSeqListByPeerUserID')
+  window.getMsgSeqListBySelfUserID = registeMethodOnWindow('getMsgSeqListBySelfUserID')
+  window.deleteAllMessage = registeMethodOnWindow('deleteAllMessage')
+  window.getAllUnDeleteMessageSeqList = registeMethodOnWindow('getAllUnDeleteMessageSeqList')
+  window.updateSingleMessageHasRead = registeMethodOnWindow('updateSingleMessageHasRead')
+  window.updateGroupMessageHasRead = registeMethodOnWindow('updateGroupMessageHasRead')
+  window.updateMessageStatusBySourceID = registeMethodOnWindow('updateMessageStatusBySourceID')
+  window.getAlreadyExistSeqList = registeMethodOnWindow('getAlreadyExistSeqList')
+  window.getMessageBySeq = registeMethodOnWindow('getMessageBySeq')
+  window.getMessagesByClientMsgIDs = registeMethodOnWindow('getMessagesByClientMsgIDs')
+  window.getMessagesBySeqs = registeMethodOnWindow('getMessagesBySeqs')
+  window.getConversationNormalMsgSeq = registeMethodOnWindow('getConversationNormalMsgSeq')
+  window.getConversationPeerNormalMsgSeq = registeMethodOnWindow('getConversationPeerNormalMsgSeq')
+  window.deleteConversationAllMessages = registeMethodOnWindow('deleteConversationAllMessages')
+  window.deleteConversationAllMessagesBySeq = registeMethodOnWindow('deleteConversationAllMessagesBySeq')
+  window.markDeleteConversationAllMessages = registeMethodOnWindow(
+    'markDeleteConversationAllMessages'
+  )
+  window.getUnreadMessage = registeMethodOnWindow('getUnreadMessage')
+  window.markConversationMessageAsReadBySeqs = registeMethodOnWindow(
+    'markConversationMessageAsReadBySeqs'
+  )
+  window.markConversationMessageAsReadDB = registeMethodOnWindow('markConversationMessageAsRead')
+  window.deleteConversationMsgs = registeMethodOnWindow('deleteConversationMsgs')
+  window.markConversationAllMessageAsRead = registeMethodOnWindow(
+    'markConversationAllMessageAsRead'
+  )
+  window.searchAllMessageByContentType = registeMethodOnWindow('searchAllMessageByContentType')
+  // conversation
+  window.getAllConversationListDB = registeMethodOnWindow('getAllConversationList')
+  window.getAllConversationListToSync = registeMethodOnWindow('getAllConversationListToSync')
+  window.getHiddenConversationList = registeMethodOnWindow('getHiddenConversationList')
+  window.getConversation = registeMethodOnWindow('getConversation')
+  window.getMultipleConversationDB = registeMethodOnWindow('getMultipleConversation')
+  window.updateColumnsConversation = registeMethodOnWindow('updateColumnsConversation')
+  window.updateConversation = registeMethodOnWindow(
+    'updateColumnsConversation',
+    'updateConversation'
+  )
+  window.updateConversationForSync = registeMethodOnWindow(
+    'updateColumnsConversation',
+    'updateConversationForSync'
+  )
+  window.decrConversationUnreadCount = registeMethodOnWindow('decrConversationUnreadCount')
+  window.batchInsertConversationList = registeMethodOnWindow('batchInsertConversationList')
+  window.batchUpdateConversationsByList = registeMethodOnWindow('batchUpdateConversationsByList')
+  window.batchUpdateConversationsByMap = registeMethodOnWindow('batchUpdateConversationsByMap')
+  window.insertConversation = registeMethodOnWindow('insertConversation')
+  window.getTotalUnreadMsgCountDB = registeMethodOnWindow('getTotalUnreadMsgCount')
+  window.getConversationByUserID = registeMethodOnWindow('getConversationByUserID')
+  window.getConversationListSplitDB = registeMethodOnWindow('getConversationListSplit')
+  window.deleteConversation = registeMethodOnWindow('deleteConversation')
+  window.batchDeleteConversations = registeMethodOnWindow('batchDeleteConversations')
+  window.batchUpdateConversationList = registeMethodOnWindow('batchUpdateConversationList')
+  window.conversationIfExists = registeMethodOnWindow('conversationIfExists')
+  window.resetConversation = registeMethodOnWindow('resetConversation')
+  window.resetAllConversation = registeMethodOnWindow('resetAllConversation')
+  window.clearConversation = registeMethodOnWindow('clearConversation')
+  window.clearConversationByTime = registeMethodOnWindow('clearConversationByTime')
+  window.clearAllConversation = registeMethodOnWindow('clearAllConversation')
+  window.setConversationDraftDB = registeMethodOnWindow('setConversationDraft')
+  window.removeConversationDraft = registeMethodOnWindow('removeConversationDraft')
+  window.unPinConversation = registeMethodOnWindow('unPinConversation')
+  // window.updateAllConversation = registeMethodOnWindow('updateAllConversation');
+  window.incrConversationUnreadCount = registeMethodOnWindow('incrConversationUnreadCount')
+  window.setMultipleConversationRecvMsgOpt = registeMethodOnWindow(
+    'setMultipleConversationRecvMsgOpt'
+  )
+  window.getAllSingleConversationIDList = registeMethodOnWindow('getAllSingleConversationIDList')
+  window.getAllConversationIDList = registeMethodOnWindow('getAllConversationIDList')
+  window.getAllConversations = registeMethodOnWindow('getAllConversations')
+  // users
+  window.getLoginUser = registeMethodOnWindow('getLoginUser')
+  window.insertLoginUser = registeMethodOnWindow('insertLoginUser')
+  window.updateLoginUser = registeMethodOnWindow('updateLoginUser')
+  window.getStrangerInfo = registeMethodOnWindow('getStrangerInfo')
+  window.setStrangerInfo = registeMethodOnWindow('setStrangerInfo')
+  // super groups
+  window.getJoinedSuperGroupList = registeMethodOnWindow('getJoinedSuperGroupList')
+  window.getJoinedSuperGroupIDList = registeMethodOnWindow('getJoinedSuperGroupIDList')
+  window.getSuperGroupInfoByGroupID = registeMethodOnWindow('getSuperGroupInfoByGroupID')
+  window.deleteSuperGroup = registeMethodOnWindow('deleteSuperGroup')
+  window.insertSuperGroup = registeMethodOnWindow('insertSuperGroup')
+  window.updateSuperGroup = registeMethodOnWindow('updateSuperGroup')
+  // unread messages
+  window.deleteConversationUnreadMessageList = registeMethodOnWindow(
+    'deleteConversationUnreadMessageList'
+  )
+  window.batchInsertConversationUnreadMessageList = registeMethodOnWindow(
+    'batchInsertConversationUnreadMessageList'
+  )
+  // super group messages
+  window.superGroupGetMessage = registeMethodOnWindow('superGroupGetMessage')
+  window.superGroupGetMultipleMessage = registeMethodOnWindow('superGroupGetMultipleMessage')
+  window.superGroupGetNormalMinSeq = registeMethodOnWindow('superGroupGetNormalMinSeq')
+  window.getSuperGroupNormalMsgSeq = registeMethodOnWindow('getSuperGroupNormalMsgSeq')
+  window.superGroupUpdateMessageTimeAndStatus = registeMethodOnWindow(
+    'superGroupUpdateMessageTimeAndStatus'
+  )
+  window.superGroupUpdateMessage = registeMethodOnWindow('superGroupUpdateMessage')
+  window.superGroupInsertMessage = registeMethodOnWindow('superGroupInsertMessage')
+  window.superGroupBatchInsertMessageList = registeMethodOnWindow(
+    'superGroupBatchInsertMessageList'
+  )
+  window.superGroupGetMessageListNoTime = registeMethodOnWindow('superGroupGetMessageListNoTime')
+  window.superGroupGetMessageList = registeMethodOnWindow('superGroupGetMessageList')
+  window.superGroupUpdateColumnsMessage = registeMethodOnWindow('superGroupUpdateColumnsMessage')
+  window.superGroupDeleteAllMessage = registeMethodOnWindow('superGroupDeleteAllMessage')
+  window.superGroupSearchMessageByKeyword = registeMethodOnWindow(
+    'superGroupSearchMessageByKeyword'
+  )
+  window.superGroupSearchMessageByContentType = registeMethodOnWindow(
+    'superGroupSearchMessageByContentType'
+  )
+  window.superGroupSearchMessageByContentTypeAndKeyword = registeMethodOnWindow(
+    'superGroupSearchMessageByContentTypeAndKeyword'
+  )
+  window.superGroupUpdateMessageStatusBySourceID = registeMethodOnWindow(
+    'superGroupUpdateMessageStatusBySourceID'
+  )
+  window.updateMessageStatus = registeMethodOnWindow(
+    'updateMessageStatus'
+  )
+
+  window.superGroupGetSendingMessageList = registeMethodOnWindow('superGroupGetSendingMessageList')
+  window.superGroupUpdateGroupMessageHasRead = registeMethodOnWindow(
+    'superGroupUpdateGroupMessageHasRead'
+  )
+  window.superGroupGetMsgSeqByClientMsgID = registeMethodOnWindow(
+    'superGroupGetMsgSeqByClientMsgID'
+  )
+  window.superGroupUpdateMsgSenderFaceURLAndSenderNickname = registeMethodOnWindow(
+    'superGroupUpdateMsgSenderFaceURLAndSenderNickname'
+  )
+  window.superGroupSearchAllMessageByContentType = registeMethodOnWindow(
+    'superGroupSearchAllMessageByContentType'
+  )
+  // debug
+  window.exec = registeMethodOnWindow('exec')
+  window.getRowsModified = registeMethodOnWindow('getRowsModified')
+  window.exportDB = async () => {
+    if (!rpc || !worker) {
+      initWorker()
+    }
+    if (!rpc) {
+      return
+    }
+    try {
+      console.info('=> (invoked by go wasm) run exportDB method ')
+      const result = await rpc.invoke('exportDB', undefined, { timeout: 5000 })
+      console.info(
+        '=> (invoked by go wasm) run exportDB method with response ',
+        JSON.stringify(result)
+      )
+      return result
+    } catch (error) {
+      catchErrorHandle(error)
+    }
+  }
+  // black
+  window.getBlackListDB = registeMethodOnWindow('getBlackList')
+  window.getBlackListUserID = registeMethodOnWindow('getBlackListUserID')
+  window.getBlackInfoByBlockUserID = registeMethodOnWindow('getBlackInfoByBlockUserID')
+  window.getBlackInfoList = registeMethodOnWindow('getBlackInfoList')
+  window.insertBlack = registeMethodOnWindow('insertBlack')
+  window.deleteBlack = registeMethodOnWindow('deleteBlack')
+  window.updateBlack = registeMethodOnWindow('updateBlack')
+  // friendRequest
+  window.insertFriendRequest = registeMethodOnWindow('insertFriendRequest')
+  window.batchInsertFriendRequests = registeMethodOnWindow('batchInsertFriendRequests')
+  window.batchDeleteFriendRequests = registeMethodOnWindow('batchDeleteFriendRequests')
+  window.batchUpdateFriendRequests = registeMethodOnWindow('batchUpdateFriendRequests')
+  window.deleteFriendRequestBothUserID = registeMethodOnWindow('deleteFriendRequestBothUserID')
+  window.updateFriendRequest = registeMethodOnWindow('updateFriendRequest')
+  window.getRecvFriendApplication = registeMethodOnWindow('getRecvFriendApplication')
+  window.getSendFriendApplication = registeMethodOnWindow('getSendFriendApplication')
+  window.getFriendApplicationByBothID = registeMethodOnWindow('getFriendApplicationByBothID')
+  window.getBothFriendReq = registeMethodOnWindow('getBothFriendReq')
+  // friend
+  window.insertFriend = registeMethodOnWindow('insertFriend')
+  window.deleteFriendDB = registeMethodOnWindow('deleteFriend')
+  window.updateFriend = registeMethodOnWindow('updateFriend')
+  window.getAllFriendList = registeMethodOnWindow('getAllFriendList')
+  window.searchFriendList = registeMethodOnWindow('searchFriendList')
+  window.getFriendInfoByFriendUserID = registeMethodOnWindow('getFriendInfoByFriendUserID')
+  window.getFriendInfoList = registeMethodOnWindow('getFriendInfoList')
+  window.getPageFriendList = registeMethodOnWindow('getPageFriendList')
+  window.getFriendInfos = registeMethodOnWindow('getFriendInfos')
+  window.batchInsertFriends = registeMethodOnWindow('batchInsertFriends')
+  // groups
+  window.insertGroup = registeMethodOnWindow('insertGroup')
+  window.batchInsertGroups = registeMethodOnWindow('batchInsertGroups')
+  window.deleteGroup = registeMethodOnWindow('deleteGroup')
+  window.batchDeleteGroups = registeMethodOnWindow('batchDeleteGroups')
+  window.updateGroup = registeMethodOnWindow('updateGroup')
+  window.batchUpdateGroups = registeMethodOnWindow('batchUpdateGroups')
+  window.getJoinedGroupListDB = registeMethodOnWindow('getJoinedGroupList')
+  window.getGroupInfoByGroupID = registeMethodOnWindow('getGroupInfoByGroupID')
+  window.getAllGroupInfoByGroupIDOrGroupName = registeMethodOnWindow(
+    'getAllGroupInfoByGroupIDOrGroupName'
+  )
+  window.subtractMemberCount = registeMethodOnWindow('subtractMemberCount')
+  window.addMemberCount = registeMethodOnWindow('addMemberCount')
+  window.getJoinedWorkingGroupIDList = registeMethodOnWindow('getJoinedWorkingGroupIDList')
+  window.getJoinedWorkingGroupList = registeMethodOnWindow('getJoinedWorkingGroupList')
+  window.getGroupMemberAllGroupIDs = registeMethodOnWindow('getGroupMemberAllGroupIDs')
+  window.getUserJoinedGroupIDs = registeMethodOnWindow('getUserJoinedGroupIDs')
+  window.getGroups = registeMethodOnWindow('getGroups')
+  // groupRequest
+  window.insertGroupRequest = registeMethodOnWindow('insertGroupRequest')
+  window.deleteGroupRequest = registeMethodOnWindow('deleteGroupRequest')
+  window.updateGroupRequest = registeMethodOnWindow('updateGroupRequest')
+  window.getSendGroupApplication = registeMethodOnWindow('getSendGroupApplication')
+  window.insertAdminGroupRequest = registeMethodOnWindow('insertAdminGroupRequest')
+  window.deleteAdminGroupRequest = registeMethodOnWindow('deleteAdminGroupRequest')
+  window.updateAdminGroupRequest = registeMethodOnWindow('updateAdminGroupRequest')
+  window.getAdminGroupApplication = registeMethodOnWindow('getAdminGroupApplication')
+  // groupMember
+  window.getGroupMemberInfoByGroupIDUserID = registeMethodOnWindow(
+    'getGroupMemberInfoByGroupIDUserID'
+  )
+  window.getAllGroupMemberList = registeMethodOnWindow('getAllGroupMemberList')
+  window.getAllGroupMemberUserIDList = registeMethodOnWindow('getAllGroupMemberUserIDList')
+  window.getGroupMemberCount = registeMethodOnWindow('getGroupMemberCount')
+  window.getAllGroupMemberCount = registeMethodOnWindow('getAllGroupMemberCount')
+  window.getGroupSomeMemberInfo = registeMethodOnWindow('getGroupSomeMemberInfo')
+  window.getGroupAdminID = registeMethodOnWindow('getGroupAdminID')
+  window.getGroupMemberListByGroupID = registeMethodOnWindow('getGroupMemberListByGroupID')
+  window.getGroupMemberListSplit = registeMethodOnWindow('getGroupMemberListSplit')
+  window.getGroupMemberOwnerAndAdminDB = registeMethodOnWindow('getGroupMemberOwnerAndAdmin')
+  window.getGroupMemberOwner = registeMethodOnWindow('getGroupMemberOwner')
+  window.getGroupMemberListSplitByJoinTimeFilter = registeMethodOnWindow(
+    'getGroupMemberListSplitByJoinTimeFilter'
+  )
+  window.getGroupOwnerAndAdminByGroupID = registeMethodOnWindow('getGroupOwnerAndAdminByGroupID')
+  window.getGroupMemberUIDListByGroupID = registeMethodOnWindow('getGroupMemberUIDListByGroupID')
+  window.insertGroupMember = registeMethodOnWindow('insertGroupMember')
+  window.batchInsertGroupMember = registeMethodOnWindow('batchInsertGroupMember')
+  window.deleteGroupMember = registeMethodOnWindow('deleteGroupMember')
+  window.deleteGroupAllMembers = registeMethodOnWindow('deleteGroupAllMembers')
+  window.batchDeleteGroupMembers = registeMethodOnWindow('batchDeleteGroupMembers')
+  window.updateGroupMember = registeMethodOnWindow('updateGroupMember')
+  window.batchUpdateGroupMembers = registeMethodOnWindow('batchUpdateGroupMembers')
+  window.updateGroupMemberField = registeMethodOnWindow('updateGroupMemberField')
+  window.searchGroupMembersDB = registeMethodOnWindow('searchGroupMembers', 'searchGroupMembersDB')
+  // temp cache chat logs
+  window.batchInsertTempCacheMessageList = registeMethodOnWindow('batchInsertTempCacheMessageList')
+  window.InsertTempCacheMessage = registeMethodOnWindow('InsertTempCacheMessage')
+  // notification
+  window.getNotificationAllSeqs = registeMethodOnWindow('getNotificationAllSeqs')
+  window.setNotificationSeq = registeMethodOnWindow('setNotificationSeq')
+}
+export const workerPromise = rpc?.connect(5000)
diff --git a/src/utils/openIM/api/upload.d.ts b/src/utils/openIM/api/upload.d.ts
new file mode 100644
index 0000000..185bda0
--- /dev/null
+++ b/src/utils/openIM/api/upload.d.ts
@@ -0,0 +1,5 @@
+export declare const fileMapSet: (uuid: string, file: File) => any;
+export declare const fileMapClear: () => any;
+export declare const wasmOpen: (uuid: string) => Promise<unknown>;
+export declare const wasmClose: (uuid: string) => Promise<unknown>;
+export declare const wasmRead: (uuid: string, offset: number, length: number) => Promise<unknown>;
diff --git a/src/utils/openIM/api/upload.js b/src/utils/openIM/api/upload.js
new file mode 100644
index 0000000..6137cfd
--- /dev/null
+++ b/src/utils/openIM/api/upload.js
@@ -0,0 +1,44 @@
+import { formatResponse } from '../utils';
+const fileMap = new Map();
+export const fileMapSet = (uuid, file) => {
+    fileMap.set(uuid, file);
+    return formatResponse(uuid);
+};
+export const fileMapClear = () => {
+    fileMap.clear();
+    return formatResponse('');
+};
+export const wasmOpen = (uuid) => {
+    return new Promise((resolve, reject) => {
+        const file = fileMap.get(uuid);
+        if (!file) {
+            reject('file not found');
+        }
+        else {
+            resolve(formatResponse(file.size));
+        }
+    });
+};
+export const wasmClose = async (uuid) => {
+    return new Promise(resolve => {
+        fileMap.delete(uuid);
+        resolve(formatResponse(uuid));
+    });
+};
+export const wasmRead = (uuid, offset, length) => {
+    const file = fileMap.get(uuid);
+    if (!file) {
+        throw 'file not found';
+    }
+    const blob = file.slice(offset, offset + length);
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve(reader.result);
+        };
+        reader.onerror = () => {
+            reject(reader.error);
+        };
+        reader.readAsArrayBuffer(blob);
+    });
+};
diff --git a/src/utils/openIM/api/worker.d.ts b/src/utils/openIM/api/worker.d.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/src/utils/openIM/api/worker.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/src/utils/openIM/api/worker.js b/src/utils/openIM/api/worker.js
new file mode 100644
index 0000000..1043544
--- /dev/null
+++ b/src/utils/openIM/api/worker.js
@@ -0,0 +1,414 @@
+import { RPC, RPCMessageEvent } from 'rpc-shooter'
+import {
+  init,
+  close,
+  // message
+  getMessage,
+  getMultipleMessage,
+  getSendingMessageList,
+  updateMessageTimeAndStatus,
+  updateMessageStatus,
+  updateMessage,
+  updateMessageBySeq,
+  updateColumnsMessage,
+  insertMessage,
+  batchInsertMessageList,
+  getMessageList,
+  getMessageListNoTime,
+  getMessageListNotDel,
+  getLastMessageByTime,
+  messageIfExists,
+  searchMessageByKeyword,
+  searchMessageByContentType,
+  searchMessageByContentTypeAndKeyword,
+  updateMsgSenderFaceURLAndSenderNickname,
+  updateMessageBySeqEx,
+  updateMessageBySeqs,
+  updateMessageByUserID,
+  // conversation
+  getAllConversationList,
+  getAllConversationListToSync,
+  getHiddenConversationList,
+  getConversation,
+  batchDeleteConversations,
+  getMultipleConversation,
+  updateColumnsConversation,
+  decrConversationUnreadCount,
+  batchInsertConversationList,
+  batchUpdateConversationsByList,
+  batchUpdateConversationsByMap,
+  insertConversation,
+  getTotalUnreadMsgCount,
+  batchUpdateConversationList,
+  clearAllConversation,
+  clearConversation,
+  clearConversationByTime,
+  conversationIfExists,
+  deleteConversation,
+  getConversationByUserID,
+  getConversationListSplit,
+  incrConversationUnreadCount,
+  removeConversationDraft,
+  resetAllConversation,
+  resetConversation,
+  setConversationDraft,
+  setMultipleConversationRecvMsgOpt,
+  unPinConversation,
+  // users
+  getLoginUser,
+  insertLoginUser,
+  updateLoginUser,
+  getStrangerInfo,
+  setStrangerInfo,
+  // super group
+  getJoinedSuperGroupList,
+  getJoinedSuperGroupIDList,
+  getSuperGroupInfoByGroupID,
+  deleteSuperGroup,
+  insertSuperGroup,
+  updateSuperGroup,
+  // unread messages
+  deleteConversationUnreadMessageList,
+  batchInsertConversationUnreadMessageList,
+  // black
+  getBlackList,
+  getBlackListUserID,
+  getBlackInfoByBlockUserID,
+  getBlackInfoList,
+  insertBlack,
+  deleteBlack,
+  updateBlack,
+  // friendRequest
+  insertFriendRequest,
+  batchInsertFriendRequests,
+  batchUpdateFriendRequests,
+  batchDeleteFriendRequests,
+  deleteFriendRequestBothUserID,
+  updateFriendRequest,
+  getRecvFriendApplication,
+  getSendFriendApplication,
+  getFriendApplicationByBothID,
+  getBothFriendReq,
+  // groups
+  insertGroup,
+  batchInsertGroups,
+  deleteGroup,
+  batchDeleteGroups,
+  updateGroup,
+  batchUpdateGroups,
+  getJoinedGroupList,
+  getGroupInfoByGroupID,
+  getAllGroupInfoByGroupIDOrGroupName,
+  subtractMemberCount,
+  addMemberCount,
+  getJoinedWorkingGroupIDList,
+  getJoinedWorkingGroupList,
+  getGroups,
+  // groupRequest
+  insertGroupRequest,
+  deleteGroupRequest,
+  updateGroupRequest,
+  getSendGroupApplication,
+  insertAdminGroupRequest,
+  deleteAdminGroupRequest,
+  updateAdminGroupRequest,
+  getAdminGroupApplication,
+  // friend
+  insertFriend,
+  deleteFriend,
+  updateFriend,
+  getAllFriendList,
+  searchFriendList,
+  getFriendInfoList,
+  getFriendInfoByFriendUserID,
+  getFriendInfos,
+  batchInsertFriends,
+  batchUpdateFriends,
+  batchDeleteFriends,
+  // groupMember
+  batchInsertGroupMember,
+  deleteGroupAllMembers,
+  batchDeleteGroupMembers,
+  deleteGroupMember,
+  getAllGroupMemberList,
+  getAllGroupMemberUserIDList,
+  getGroupAdminID,
+  getGroupMemberCount,
+  getAllGroupMemberCount,
+  getGroupMemberInfoByGroupIDUserID,
+  getGroupMemberListByGroupID,
+  getGroupMemberListSplit,
+  getGroupMemberListSplitByJoinTimeFilter,
+  getGroupMemberOwner,
+  getGroupMemberOwnerAndAdmin,
+  getGroupMemberUIDListByGroupID,
+  getGroupOwnerAndAdminByGroupID,
+  getGroupSomeMemberInfo,
+  insertGroupMember,
+  searchGroupMembers,
+  updateGroupMember,
+  batchUpdateGroupMembers,
+  updateGroupMemberField,
+  getUserJoinedGroupIDs,
+  // temp cache chatlogs
+  batchInsertTempCacheMessageList,
+  InsertTempCacheMessage,
+  getAllSingleConversationIDList,
+  getAllConversationIDList,
+  getPageFriendList,
+  getGroupMemberAllGroupIDs,
+  getAlreadyExistSeqList,
+  markConversationAllMessageAsRead,
+  searchAllMessageByContentType,
+  deleteConversationMsgs,
+  markConversationMessageAsRead,
+  markConversationMessageAsReadBySeqs,
+  markDeleteConversationAllMessages,
+  getUnreadMessage,
+  getConversationPeerNormalMsgSeq,
+  getConversationNormalMsgSeq,
+  deleteConversationAllMessages,
+  deleteConversationAllMessagesBySeq,
+  getMessagesByClientMsgIDs,
+  getMessagesBySeqs,
+  getMessageBySeq,
+  getAllConversations,
+  // upload
+  updateUpload,
+  deleteUpload,
+  getUpload,
+  insertUpload,
+} from '../api/database'
+import { getInstance } from './database/instance'
+import { setNotificationSeq, getNotificationAllSeqs } from './database/notification'
+import { fileMapClear, fileMapSet, wasmClose, wasmOpen, wasmRead } from './upload'
+// import {batchInsertGroups} from "./database/groups.js";
+const ctx = self
+const rpc = new RPC({
+  event: new RPCMessageEvent({
+    currentEndpoint: ctx,
+    targetEndpoint: ctx
+  })
+})
+// upload
+rpc.registerMethod('fileMapSet', fileMapSet)
+rpc.registerMethod('fileMapClear', fileMapClear)
+rpc.registerMethod('wasmOpen', wasmOpen)
+rpc.registerMethod('wasmClose', wasmClose)
+rpc.registerMethod('wasmRead', wasmRead)
+rpc.registerMethod('getUpload', getUpload)
+rpc.registerMethod('insertUpload', insertUpload)
+rpc.registerMethod('updateUpload', updateUpload)
+rpc.registerMethod('deleteUpload', deleteUpload)
+rpc.registerMethod('initDB', init)
+rpc.registerMethod('close', close)
+// message
+rpc.registerMethod('updateMessageBySeqs', updateMessageBySeqs)
+rpc.registerMethod('updateMessageByUserID', updateMessageByUserID)  
+rpc.registerMethod('updateMessageBySeqEx', updateMessageBySeqEx)
+rpc.registerMethod('getMessage', getMessage)
+rpc.registerMethod('getMultipleMessage', getMultipleMessage)
+rpc.registerMethod('getSendingMessageList', getSendingMessageList)
+rpc.registerMethod('updateMessageTimeAndStatus', updateMessageTimeAndStatus)
+rpc.registerMethod('updateMessageStatus', updateMessageStatus)
+rpc.registerMethod('updateMessage', updateMessage)
+rpc.registerMethod('updateMessageBySeq', updateMessageBySeq)
+rpc.registerMethod('updateColumnsMessage', updateColumnsMessage)
+rpc.registerMethod('insertMessage', insertMessage)
+rpc.registerMethod('batchInsertMessageList', batchInsertMessageList)
+rpc.registerMethod('getMessageList', getMessageList)
+rpc.registerMethod('getMessageListNoTime', getMessageListNoTime)
+rpc.registerMethod('getMessageListNotDel', getMessageListNotDel)
+rpc.registerMethod('getLastMessageByTime', getLastMessageByTime)
+
+rpc.registerMethod('messageIfExists', messageIfExists)
+rpc.registerMethod('searchMessageByKeyword', searchMessageByKeyword)
+rpc.registerMethod('searchMessageByContentType', searchMessageByContentType)
+rpc.registerMethod('searchMessageByContentTypeAndKeyword', searchMessageByContentTypeAndKeyword)
+rpc.registerMethod(
+  'updateMsgSenderFaceURLAndSenderNickname',
+  updateMsgSenderFaceURLAndSenderNickname
+)
+rpc.registerMethod('getAlreadyExistSeqList', getAlreadyExistSeqList)
+rpc.registerMethod('getMessageBySeq', getMessageBySeq)
+rpc.registerMethod('getMessagesByClientMsgIDs', getMessagesByClientMsgIDs)
+rpc.registerMethod('getMessagesBySeqs', getMessagesBySeqs)
+rpc.registerMethod('getConversationNormalMsgSeq', getConversationNormalMsgSeq)
+rpc.registerMethod('getConversationPeerNormalMsgSeq', getConversationPeerNormalMsgSeq)
+rpc.registerMethod('deleteConversationAllMessages', deleteConversationAllMessages)
+rpc.registerMethod('deleteConversationAllMessagesBySeq', deleteConversationAllMessagesBySeq)
+rpc.registerMethod('markDeleteConversationAllMessages', markDeleteConversationAllMessages)
+rpc.registerMethod('getUnreadMessage', getUnreadMessage)
+rpc.registerMethod('markConversationMessageAsReadBySeqs', markConversationMessageAsReadBySeqs)
+rpc.registerMethod('markConversationMessageAsRead', markConversationMessageAsRead)
+rpc.registerMethod('deleteConversationMsgs', deleteConversationMsgs)
+rpc.registerMethod('markConversationAllMessageAsRead', markConversationAllMessageAsRead)
+rpc.registerMethod('searchAllMessageByContentType', searchAllMessageByContentType)
+// conversation
+rpc.registerMethod('getAllConversationList', getAllConversationList)
+rpc.registerMethod('getAllConversationListToSync', getAllConversationListToSync)
+rpc.registerMethod('getHiddenConversationList', getHiddenConversationList)
+rpc.registerMethod('getConversation', getConversation)
+rpc.registerMethod('getMultipleConversation', getMultipleConversation)
+rpc.registerMethod('updateColumnsConversation', updateColumnsConversation)
+rpc.registerMethod('decrConversationUnreadCount', decrConversationUnreadCount)
+rpc.registerMethod('batchInsertConversationList', batchInsertConversationList)
+rpc.registerMethod('batchUpdateConversationsByList', batchUpdateConversationsByList)
+rpc.registerMethod('batchUpdateConversationsByMap', batchUpdateConversationsByMap)
+rpc.registerMethod('getTotalUnreadMsgCount', getTotalUnreadMsgCount)
+rpc.registerMethod('insertConversation', insertConversation)
+rpc.registerMethod('getConversationByUserID', getConversationByUserID)
+rpc.registerMethod('getConversationListSplit', getConversationListSplit)
+rpc.registerMethod('deleteConversation', deleteConversation)
+rpc.registerMethod('batchDeleteConversations', batchDeleteConversations)
+rpc.registerMethod('batchUpdateConversationList', batchUpdateConversationList)
+rpc.registerMethod('conversationIfExists', conversationIfExists)
+rpc.registerMethod('resetConversation', resetConversation)
+rpc.registerMethod('resetAllConversation', resetAllConversation)
+rpc.registerMethod('clearConversation', clearConversation)
+rpc.registerMethod('clearConversationByTime', clearConversationByTime)
+rpc.registerMethod('clearAllConversation', clearAllConversation)
+rpc.registerMethod('setConversationDraft', setConversationDraft)
+rpc.registerMethod('removeConversationDraft', removeConversationDraft)
+rpc.registerMethod('unPinConversation', unPinConversation)
+rpc.registerMethod('incrConversationUnreadCount', incrConversationUnreadCount)
+rpc.registerMethod('setMultipleConversationRecvMsgOpt', setMultipleConversationRecvMsgOpt)
+rpc.registerMethod('getAllSingleConversationIDList', getAllSingleConversationIDList)
+rpc.registerMethod('getAllConversationIDList', getAllConversationIDList)
+rpc.registerMethod('getAllConversations', getAllConversations)
+rpc.registerMethod('getLoginUser', getLoginUser)
+rpc.registerMethod('insertLoginUser', insertLoginUser)
+rpc.registerMethod('updateLoginUser', updateLoginUser)
+rpc.registerMethod('getStrangerInfo', getStrangerInfo)
+rpc.registerMethod('setStrangerInfo', setStrangerInfo)
+rpc.registerMethod('getJoinedSuperGroupList', getJoinedSuperGroupList)
+rpc.registerMethod('getJoinedSuperGroupIDList', getJoinedSuperGroupIDList)
+rpc.registerMethod('getSuperGroupInfoByGroupID', getSuperGroupInfoByGroupID)
+rpc.registerMethod('deleteSuperGroup', deleteSuperGroup)
+rpc.registerMethod('insertSuperGroup', insertSuperGroup)
+rpc.registerMethod('updateSuperGroup', updateSuperGroup)
+rpc.registerMethod('deleteConversationUnreadMessageList', deleteConversationUnreadMessageList)
+rpc.registerMethod(
+  'batchInsertConversationUnreadMessageList',
+  batchInsertConversationUnreadMessageList
+)
+// black
+rpc.registerMethod('getBlackList', getBlackList)
+rpc.registerMethod('getBlackListUserID', getBlackListUserID)
+rpc.registerMethod('getBlackInfoByBlockUserID', getBlackInfoByBlockUserID)
+rpc.registerMethod('getBlackInfoList', getBlackInfoList)
+rpc.registerMethod('insertBlack', insertBlack)
+rpc.registerMethod('deleteBlack', deleteBlack)
+rpc.registerMethod('updateBlack', updateBlack)
+// friendRequest
+rpc.registerMethod('insertFriendRequest', insertFriendRequest)
+rpc.registerMethod('batchInsertFriendRequests', batchInsertFriendRequests)
+rpc.registerMethod('batchUpdateFriendRequests', batchUpdateFriendRequests)
+rpc.registerMethod('batchDeleteFriendRequests', batchDeleteFriendRequests)
+rpc.registerMethod('deleteFriendRequestBothUserID', deleteFriendRequestBothUserID)
+rpc.registerMethod('updateFriendRequest', updateFriendRequest)
+rpc.registerMethod('getRecvFriendApplication', getRecvFriendApplication)
+rpc.registerMethod('getSendFriendApplication', getSendFriendApplication)
+rpc.registerMethod('getFriendApplicationByBothID', getFriendApplicationByBothID)
+rpc.registerMethod('getBothFriendReq', getBothFriendReq)
+// groups
+rpc.registerMethod('insertGroup', insertGroup)
+rpc.registerMethod('batchInsertGroups', batchInsertGroups)
+rpc.registerMethod('deleteGroup', deleteGroup)
+rpc.registerMethod('batchDeleteGroups', batchDeleteGroups)
+rpc.registerMethod('updateGroup', updateGroup)
+rpc.registerMethod('batchUpdateGroups', batchUpdateGroups)
+rpc.registerMethod('getJoinedGroupList', getJoinedGroupList)
+rpc.registerMethod('getGroupInfoByGroupID', getGroupInfoByGroupID)
+rpc.registerMethod('getAllGroupInfoByGroupIDOrGroupName', getAllGroupInfoByGroupIDOrGroupName)
+rpc.registerMethod('subtractMemberCount', subtractMemberCount)
+rpc.registerMethod('addMemberCount', addMemberCount)
+rpc.registerMethod('getJoinedWorkingGroupIDList', getJoinedWorkingGroupIDList)
+rpc.registerMethod('getJoinedWorkingGroupList', getJoinedWorkingGroupList)
+rpc.registerMethod('getGroupMemberAllGroupIDs', getGroupMemberAllGroupIDs)
+rpc.registerMethod('getGroups', getGroups)
+// groupMembers
+rpc.registerMethod('getGroupMemberInfoByGroupIDUserID', getGroupMemberInfoByGroupIDUserID)
+rpc.registerMethod('getAllGroupMemberList', getAllGroupMemberList)
+rpc.registerMethod('getAllGroupMemberUserIDList', getAllGroupMemberUserIDList)
+rpc.registerMethod('getGroupMemberCount', getGroupMemberCount)
+rpc.registerMethod('getAllGroupMemberCount', getAllGroupMemberCount)
+rpc.registerMethod('getGroupSomeMemberInfo', getGroupSomeMemberInfo)
+rpc.registerMethod('getGroupAdminID', getGroupAdminID)
+rpc.registerMethod('getGroupMemberListByGroupID', getGroupMemberListByGroupID)
+rpc.registerMethod('getGroupMemberListSplit', getGroupMemberListSplit)
+rpc.registerMethod('getGroupMemberOwnerAndAdmin', getGroupMemberOwnerAndAdmin)
+rpc.registerMethod('getGroupMemberOwner', getGroupMemberOwner)
+rpc.registerMethod(
+  'getGroupMemberListSplitByJoinTimeFilter',
+  getGroupMemberListSplitByJoinTimeFilter
+)
+rpc.registerMethod('getGroupOwnerAndAdminByGroupID', getGroupOwnerAndAdminByGroupID)
+rpc.registerMethod('getGroupMemberUIDListByGroupID', getGroupMemberUIDListByGroupID)
+rpc.registerMethod('insertGroupMember', insertGroupMember)
+rpc.registerMethod('batchInsertGroupMember', batchInsertGroupMember)
+rpc.registerMethod('deleteGroupMember', deleteGroupMember)
+rpc.registerMethod('deleteGroupAllMembers', deleteGroupAllMembers)
+rpc.registerMethod('batchDeleteGroupMembers', batchDeleteGroupMembers)
+rpc.registerMethod('updateGroupMember', updateGroupMember)
+rpc.registerMethod('batchUpdateGroupMembers', batchUpdateGroupMembers)
+rpc.registerMethod('updateGroupMemberField', updateGroupMemberField)
+rpc.registerMethod('searchGroupMembers', searchGroupMembers)
+rpc.registerMethod('getUserJoinedGroupIDs', getUserJoinedGroupIDs)
+// groupRequest
+rpc.registerMethod('insertGroupRequest', insertGroupRequest)
+rpc.registerMethod('deleteGroupRequest', deleteGroupRequest)
+rpc.registerMethod('updateGroupRequest', updateGroupRequest)
+rpc.registerMethod('getSendGroupApplication', getSendGroupApplication)
+rpc.registerMethod('insertAdminGroupRequest', insertAdminGroupRequest)
+rpc.registerMethod('deleteAdminGroupRequest', deleteAdminGroupRequest)
+rpc.registerMethod('updateAdminGroupRequest', updateAdminGroupRequest)
+rpc.registerMethod('getAdminGroupApplication', getAdminGroupApplication)
+// friend
+rpc.registerMethod('insertFriend', insertFriend)
+rpc.registerMethod('deleteFriend', deleteFriend)
+rpc.registerMethod('updateFriend', updateFriend)
+rpc.registerMethod('getAllFriendList', getAllFriendList)
+rpc.registerMethod('searchFriendList', searchFriendList)
+rpc.registerMethod('getFriendInfoByFriendUserID', getFriendInfoByFriendUserID)
+rpc.registerMethod('getFriendInfoList', getFriendInfoList)
+rpc.registerMethod('getPageFriendList', getPageFriendList)
+rpc.registerMethod('getFriendInfos', getFriendInfos)
+rpc.registerMethod('batchInsertFriends', batchInsertFriends)
+rpc.registerMethod('batchUpdateFriends', batchUpdateFriends)
+rpc.registerMethod('batchDeleteFriends', batchDeleteFriends)
+// temp cache chatlogs
+rpc.registerMethod('batchInsertTempCacheMessageList', batchInsertTempCacheMessageList)
+rpc.registerMethod('InsertTempCacheMessage', InsertTempCacheMessage)
+// notification
+rpc.registerMethod('getNotificationAllSeqs', getNotificationAllSeqs)
+rpc.registerMethod('setNotificationSeq', setNotificationSeq)
+rpc.registerMethod('exec', async (sql) => {
+  const db = await getInstance()
+  try {
+    const result = db.exec(sql)
+    console.info(`sql debug with exec sql = ${sql.trim()} , return `, result)
+  } catch (error) {
+    console.info(`sql debug with exec sql = ${sql} , return `, error)
+  }
+})
+rpc.registerMethod('getRowsModified', async () => {
+  const db = await getInstance()
+  try {
+    const result = db.getRowsModified()
+    console.info('sql debug with getRowsModified return ', result)
+  } catch (error) {
+    console.info('sql debug with getRowsModified return ', error)
+  }
+})
+rpc.registerMethod('exportDB', async () => {
+  const db = await getInstance()
+  try {
+    const data = db.export()
+    const blob = new Blob([data])
+    const blobHref = URL.createObjectURL(blob)
+    return blobHref
+  } catch (error) {
+    console.info('sql export error, return ', error)
+  }
+})
diff --git a/src/utils/openIM/constant/index.d.ts b/src/utils/openIM/constant/index.d.ts
new file mode 100644
index 0000000..6199ef6
--- /dev/null
+++ b/src/utils/openIM/constant/index.d.ts
@@ -0,0 +1,69 @@
+export declare const DatabaseErrorCode: {
+    ErrorInit: number;
+    ErrorNoRecord: number;
+    ErrorDBTimeout: number;
+};
+export declare enum CbEvents {
+    Login = "Login",
+    OnConnectFailed = "OnConnectFailed",
+    OnConnectSuccess = "OnConnectSuccess",
+    OnConnecting = "OnConnecting",
+    OnKickedOffline = "OnKickedOffline",
+    OnKickedOfflineWithExData = "OnKickedOfflineWithExData",
+    OnPingTimeout = "OnPingTimeout",
+    OnSelfInfoUpdated = "OnSelfInfoUpdated",
+    OnUserTokenExpired = "OnUserTokenExpired",
+    OnProgress = "OnProgress",
+    OnNewRecvMessageBurnedBatch = "OnNewRecvMessageBurnedBatch",
+    OnNewRecvMessageBurned = "OnNewRecvMessageBurned",
+    OnRecvNewMessage = "OnRecvNewMessage",
+    OnRecvNewMessages = "OnRecvNewMessages",
+    OnRecvMessageRevoked = "OnRecvMessageRevoked",
+    OnNewRecvMessageRevoked = "OnNewRecvMessageRevoked",
+    OnRecvC2CReadReceipt = "OnRecvC2CReadReceipt",
+    OnRecvGroupReadReceipt = "OnRecvGroupReadReceipt",
+    OnConversationChanged = "OnConversationChanged",
+    OnNewConversation = "OnNewConversation",
+    OnSyncServerFailed = "OnSyncServerFailed",
+    OnSyncServerFinish = "OnSyncServerFinish",
+    OnSyncServerStart = "OnSyncServerStart",
+    OnTotalUnreadMessageCountChanged = "OnTotalUnreadMessageCountChanged",
+    OnBlackAdded = "OnBlackAdded",
+    OnBlackDeleted = "OnBlackDeleted",
+    OnFriendApplicationAccepted = "OnFriendApplicationAccepted",
+    OnFriendApplicationAdded = "OnFriendApplicationAdded",
+    OnFriendApplicationDeleted = "OnFriendApplicationDeleted",
+    OnFriendApplicationRejected = "OnFriendApplicationRejected",
+    OnFriendInfoChanged = "OnFriendInfoChanged",
+    OnFriendAdded = "OnFriendAdded",
+    OnFriendDeleted = "OnFriendDeleted",
+    OnJoinedGroupAdded = "OnJoinedGroupAdded",
+    OnJoinedGroupDeleted = "OnJoinedGroupDeleted",
+    OnGroupDismissed = "OnGroupDismissed",
+    OnGroupMemberAdded = "OnGroupMemberAdded",
+    OnGroupMemberDeleted = "OnGroupMemberDeleted",
+    OnGroupApplicationAdded = "OnGroupApplicationAdded",
+    OnGroupApplicationDeleted = "OnGroupApplicationDeleted",
+    OnGroupInfoChanged = "OnGroupInfoChanged",
+    OnGroupMemberInfoChanged = "OnGroupMemberInfoChanged",
+    OnGroupApplicationAccepted = "OnGroupApplicationAccepted",
+    OnGroupApplicationRejected = "OnGroupApplicationRejected",
+    UploadComplete = "UploadComplete",
+    OnRecvCustomBusinessMessage = "OnRecvCustomBusinessMessage",
+    OnUserStatusChanged = "OnUserStatusChanged",
+    OnReceiveNewInvitation = "OnReceiveNewInvitation",
+    OnInviteeAccepted = "OnInviteeAccepted",
+    OnInviteeRejected = "OnInviteeRejected",
+    OnInvitationCancelled = "OnInvitationCancelled",
+    OnHangUp = "OnHangUp",
+    OnInvitationTimeout = "OnInvitationTimeout",
+    OnInviteeAcceptedByOtherDevice = "OnInviteeAcceptedByOtherDevice",
+    OnInviteeRejectedByOtherDevice = "OnInviteeRejectedByOtherDevice",
+    OnStreamChange = "OnStreamChange",
+    OnRoomParticipantConnected = "OnRoomParticipantConnected",
+    OnRoomParticipantDisconnected = "OnRoomParticipantDisconnected",
+    OnDeleteUserMsg = "OnDeleteUserMsg",
+    OnCustomNotifications = "OnCustomNotifications",
+    OnReceiveCustomSignal = "OnReceiveCustomSignal",
+    CancelSuccess = "CancelSuccess",
+}
diff --git a/src/utils/openIM/constant/index.js b/src/utils/openIM/constant/index.js
new file mode 100644
index 0000000..ff20a72
--- /dev/null
+++ b/src/utils/openIM/constant/index.js
@@ -0,0 +1,73 @@
+export const DatabaseErrorCode = {
+    ErrorInit: 10001,
+    ErrorNoRecord: 10002,
+    ErrorDBTimeout: 10003,
+};
+export var CbEvents;
+(function (CbEvents) {
+    CbEvents["Login"] = "Login";
+    CbEvents["OnConnectFailed"] = "OnConnectFailed";
+    CbEvents["OnConnectSuccess"] = "OnConnectSuccess";
+    CbEvents["OnConnecting"] = "OnConnecting";
+    CbEvents["OnKickedOffline"] = "OnKickedOffline";
+    CbEvents["OnKickedOfflineWithExData"] = "OnKickedOfflineWithExData";
+    CbEvents["OnPingTimeout"] = "OnPingTimeout";
+    CbEvents["OnSelfInfoUpdated"] = "OnSelfInfoUpdated";
+    CbEvents["OnUserTokenExpired"] = "OnUserTokenExpired";
+    CbEvents["OnProgress"] = "OnProgress";
+    CbEvents["OnNewRecvMessageBurnedBatch"] = "OnNewRecvMessageBurnedBatch";
+    CbEvents["OnNewRecvMessageBurned"] = "OnNewRecvMessageBurned";
+    CbEvents["OnRecvNewMessage"] = "OnRecvNewMessage";
+    CbEvents["OnRecvNewMessages"] = "OnRecvNewMessages";
+    CbEvents["OnRecvMessageRevoked"] = "OnRecvMessageRevoked";
+    CbEvents["OnNewRecvMessageRevoked"] = "OnNewRecvMessageRevoked";
+    CbEvents["OnRecvC2CReadReceipt"] = "OnRecvC2CReadReceipt";
+    CbEvents["OnRecvGroupReadReceipt"] = "OnRecvGroupReadReceipt";
+    CbEvents["OnConversationChanged"] = "OnConversationChanged";
+    CbEvents["OnNewConversation"] = "OnNewConversation";
+    CbEvents["OnSyncServerFailed"] = "OnSyncServerFailed";
+    CbEvents["OnSyncServerFinish"] = "OnSyncServerFinish";
+    CbEvents["OnSyncServerStart"] = "OnSyncServerStart";
+    CbEvents["OnTotalUnreadMessageCountChanged"] = "OnTotalUnreadMessageCountChanged";
+    CbEvents["OnBlackAdded"] = "OnBlackAdded";
+    CbEvents["OnBlackDeleted"] = "OnBlackDeleted";
+    CbEvents["OnFriendApplicationAccepted"] = "OnFriendApplicationAccepted";
+    CbEvents["OnFriendApplicationAdded"] = "OnFriendApplicationAdded";
+    CbEvents["OnFriendApplicationDeleted"] = "OnFriendApplicationDeleted";
+    CbEvents["OnFriendApplicationRejected"] = "OnFriendApplicationRejected";
+    CbEvents["OnFriendInfoChanged"] = "OnFriendInfoChanged";
+    CbEvents["OnFriendAdded"] = "OnFriendAdded";
+    CbEvents["OnFriendDeleted"] = "OnFriendDeleted";
+    CbEvents["OnJoinedGroupAdded"] = "OnJoinedGroupAdded";
+    CbEvents["OnJoinedGroupDeleted"] = "OnJoinedGroupDeleted";
+    CbEvents["OnGroupDismissed"] = "OnGroupDismissed";
+    CbEvents["OnGroupMemberAdded"] = "OnGroupMemberAdded";
+    CbEvents["OnGroupMemberDeleted"] = "OnGroupMemberDeleted";
+    CbEvents["OnGroupApplicationAdded"] = "OnGroupApplicationAdded";
+    CbEvents["OnGroupApplicationDeleted"] = "OnGroupApplicationDeleted";
+    CbEvents["OnGroupInfoChanged"] = "OnGroupInfoChanged";
+    CbEvents["OnGroupMemberInfoChanged"] = "OnGroupMemberInfoChanged";
+    CbEvents["OnGroupApplicationAccepted"] = "OnGroupApplicationAccepted";
+    CbEvents["OnGroupApplicationRejected"] = "OnGroupApplicationRejected";
+    CbEvents["UploadComplete"] = "UploadComplete";
+    CbEvents["OnRecvCustomBusinessMessage"] = "OnRecvCustomBusinessMessage";
+    CbEvents["OnUserStatusChanged"] = "OnUserStatusChanged";
+    CbEvents["OnIsJoinGroup"] = "OnIsJoinGroup";
+    // rtc
+    CbEvents["OnReceiveNewInvitation"] = "OnReceiveNewInvitation";
+    CbEvents["OnInviteeAccepted"] = "OnInviteeAccepted";
+    CbEvents["OnInviteeRejected"] = "OnInviteeRejected";
+    CbEvents["OnInvitationCancelled"] = "OnInvitationCancelled";
+    CbEvents["OnHangUp"] = "OnHangUp";
+    CbEvents["OnInvitationTimeout"] = "OnInvitationTimeout";
+    CbEvents["OnInviteeAcceptedByOtherDevice"] = "OnInviteeAcceptedByOtherDevice";
+    CbEvents["OnInviteeRejectedByOtherDevice"] = "OnInviteeRejectedByOtherDevice";
+    // meeting
+    CbEvents["OnStreamChange"] = "OnStreamChange";
+    CbEvents["OnRoomParticipantConnected"] = "OnRoomParticipantConnected";
+    CbEvents["OnRoomParticipantDisconnected"] = "OnRoomParticipantDisconnected";
+    CbEvents["OnReceiveCustomSignal"] = "OnReceiveCustomSignal";
+    CbEvents["OnDeleteUserMsg"] = "OnDeleteUserMsg";
+    CbEvents["OnCustomNotifications"] = "OnCustomNotifications";
+    CbEvents["CancelSuccess"] = "CancelSuccess";
+})(CbEvents || (CbEvents = {}));
diff --git a/src/utils/openIM/index.d.ts b/src/utils/openIM/index.d.ts
new file mode 100644
index 0000000..632ef97
--- /dev/null
+++ b/src/utils/openIM/index.d.ts
@@ -0,0 +1 @@
+export { getSDK } from './sdk';
diff --git a/src/utils/openIM/index.js b/src/utils/openIM/index.js
new file mode 100644
index 0000000..632ef97
--- /dev/null
+++ b/src/utils/openIM/index.js
@@ -0,0 +1 @@
+export { getSDK } from './sdk';
diff --git a/src/utils/openIM/sdk/index.d.ts b/src/utils/openIM/sdk/index.d.ts
new file mode 100644
index 0000000..725cf94
--- /dev/null
+++ b/src/utils/openIM/sdk/index.d.ts
@@ -0,0 +1,180 @@
+import Emitter from '../utils/emitter';
+import { AccessFriendParams, AccessGroupParams, AccessMessageParams, AccessMessagesParams, AddFriendParams, AdvancedMsgParams, AdvancedQuoteMsgParams, AtMsgParams, ChangeGroupMemberMuteParams, ChangeGroupMuteParams, CreateGroupParams, CreateMeetingParams, CustomMsgParams, CustomSignalParams, FaceMessageParams, FileMsgFullParams, FileMsgParams, FindMessageParams, GetAdvancedHistoryMsgParams, GetGroupMemberByTimeParams, GetGroupMemberParams, GetHistoryMsgParams, GetOneConversationParams, GetOneCveParams, GetUserInfoWithCacheParams, GroupBaseInfo, ImageMsgParams, InitAndLoginConfig, InsertGroupMsgParams, InsertSingleMsgParams, InviteGroupParams, isRecvParams, JoinGroupParams, LocationMsgParams, MarkNotiParams, MeetingOperateStreamParams, MemberExParams, MemberNameParams, MergerMsgParams, PartialUserItem, PinCveParams, QuoteMsgParams, RemarkFriendParams, RtcActionParams, SearchFriendParams, SearchGroupMemberParams, SearchGroupParams, SearchLocalParams, SendMsgParams, SetBurnDurationParams, SetConversationMsgDestructParams, SetConversationMsgDestructTimeParams, SetDraftParams, SetGroupRoleParams, SetGroupVerificationParams, SetMemberAuthParams, SetMessageLocalExParams, SetPrvParams, SignalingInviteParams, SoundMsgParams, SouondMsgFullParams, SplitParams, TransferGroupParams, TypingUpdateParams, UpdateMeetingParams, UploadFileParams, VideoMsgFullParams, VideoMsgParams,ConfigParams } from '../types/params';
+import { AdvancedGetMessageResult, BlackUserItem, CardElem, ConversationItem, FriendApplicationItem, FriendshipInfo, FriendUserItem, FullUserItem, FullUserItemWithCache, GroupApplicationItem, GroupItem, GroupMemberItem, MessageItem, SearchedFriendsInfo, SearchMessageResult, SelfUserInfo, UserOnlineState, WsResponse } from '../types/entity';
+import { LoginStatus, MessageReceiveOptType } from '../types/enum';
+
+declare class SDK extends Emitter {
+  private wasmInitializedPromise;
+  private goExitPromise;
+  private goExisted;
+  private tryParse;
+  private isLogStandardOutput;
+
+  constructor(url?: string);
+
+  _logWrap(...args: any[]): void;
+
+  _invoker<T>(functionName: string, func: (...args: any[]) => Promise<any>, args: any[], processor?: (data: string) => string): Promise<WsResponse<T>>;
+
+  login: (params: InitAndLoginConfig, operationID?: string) => Promise<any>;
+  logout: <T>(operationID?: string) => Promise<WsResponse<T>>;
+  getAllConversationList: (operationID?: string) => Promise<WsResponse<ConversationItem[]>>;
+  getOneConversation: (params: GetOneConversationParams, operationID?: string) => Promise<WsResponse<ConversationItem>>;
+  batchGetConversationsBySessionTypeAndSourceId: (params: GetOneConversationParams[], operationID?: string) => Promise<WsResponse<ConversationItem[]>>;
+  updateMsgStatus: (conversationID: string, clientMsgID: string, status: number, operationID?: string) => Promise<WsResponse<string>>;
+  getAdvancedHistoryMessageList: (params: GetAdvancedHistoryMsgParams, operationID?: string) => Promise<WsResponse<AdvancedGetMessageResult>>;
+  getAdvancedHistoryMessageListReverse: (params: GetAdvancedHistoryMsgParams, operationID?: string) => Promise<WsResponse<AdvancedGetMessageResult>>;
+  getSpecifiedGroupsInfo: (params: string[], operationID?: string) => Promise<WsResponse<GroupItem[]>>;
+  deleteConversationAndDeleteAllMsg: <T>(conversationID: string, operationID?: string) => Promise<WsResponse<T>>;
+  markConversationMessageAsRead: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  markMessagesAsReadByMsgID: <T>(params: MarkNotiParams, operationID?: string) => Promise<WsResponse<T>>;
+  getGroupMemberList: (params: GetGroupMemberParams, operationID?: string) => Promise<WsResponse<GroupMemberItem[]>>;
+  createTextMessage: (text: string, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createImageMessage: (params: ImageMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createImageMessageByFile: <T>(params: ImageMsgParams & {
+    file: File;
+  }, operationID?: string) => Promise<WsResponse<T>>;
+  createCustomMessage: (params: CustomMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createQuoteMessage: (params: QuoteMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createAdvancedQuoteMessage: (params: AdvancedQuoteMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createAdvancedTextMessage: (params: AdvancedMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  sendMessage: (params: SendMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  sendMessageNotOss: (params: SendMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  sendMessageByBuffer: <T>(params: SendMsgParams, operationID?: string) => Promise<WsResponse<T>>;
+  setMessageLocalEx: <T>(params: SetMessageLocalExParams, operationID?: string) => Promise<WsResponse<T>>;
+
+  exportDB(operationID?: string): Promise<WsResponse<unknown>>;
+
+  getHistoryMessageListReverse: <T>(params: GetHistoryMsgParams, operationID?: string) => Promise<WsResponse<T>>;
+  revokeMessage: <T>(data: AccessMessageParams, operationID?: string) => Promise<WsResponse<T>>;
+  burnMessage: <T>(data: AccessMessageParams, operationID?: string) => Promise<WsResponse<T>>;
+  burnMessageBatch: <T>(data: AccessMessagesParams, operationID?: string) => Promise<WsResponse<T>>;
+  setConversationPrivateChat: <T>(params: SetPrvParams, operationID?: string) => Promise<WsResponse<T>>;
+  setConversationBurnDuration: <T>(params: SetBurnDurationParams, operationID?: string) => Promise<WsResponse<T>>;
+  getLoginStatus: (operationID?: string) => Promise<WsResponse<LoginStatus>>;
+  setAppBackgroundStatus: <T>(data: boolean, operationID?: string) => Promise<WsResponse<T>>;
+  networkStatusChanged: <T>(operationID?: string) => Promise<WsResponse<T>>;
+  getLoginUserID: (operationID?: string) => Promise<WsResponse<string>>;
+  getSelfUserInfo: (operationID?: string) => Promise<WsResponse<SelfUserInfo>>;
+  getUsersInfo: (data: string[], operationID?: string) => Promise<WsResponse<FullUserItem[]>>;
+  getUsersInfoWithCache: (data: GetUserInfoWithCacheParams, operationID?: string) => Promise<WsResponse<FullUserItemWithCache[]>>;
+  setSelfInfo: <T>(data: PartialUserItem, operationID?: string) => Promise<WsResponse<T>>;
+  createTextAtMessage: (data: AtMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createSoundMessage: (data: SoundMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createSoundMessageByFile: <T>(data: SoundMsgParams & {
+    file: File;
+  }, operationID?: string) => Promise<WsResponse<T>>;
+  createVideoMessage: (data: VideoMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createVideoMessageByFile: <T>(data: VideoMsgParams & {
+    videoFile: File;
+    snapshotFile: File;
+  }, operationID?: string) => Promise<WsResponse<T>>;
+  createFileMessage: (data: FileMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createFileMessageByFile: <T>(data: FileMsgParams & {
+    file: File;
+  }, operationID?: string) => Promise<WsResponse<T>>;
+  createFileMessageFromFullPath: <T>(data: FileMsgFullParams, operationID?: string) => Promise<WsResponse<T>>;
+  createImageMessageFromFullPath: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  createSoundMessageFromFullPath: <T>(data: SouondMsgFullParams, operationID?: string) => Promise<WsResponse<T>>;
+  createVideoMessageFromFullPath: <T>(data: VideoMsgFullParams, operationID?: string) => Promise<WsResponse<T>>;
+  createMergerMessage: <T>(data: MergerMsgParams, operationID?: string) => Promise<WsResponse<T>>;
+  createForwardMessage: (data: MessageItem, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createFaceMessage: <T>(data: FaceMessageParams, operationID?: string) => Promise<WsResponse<T>>;
+  createLocationMessage: (data: LocationMsgParams, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  createCardMessage: (data: CardElem, operationID?: string) => Promise<WsResponse<MessageItem>>;
+  deleteMessageFromLocalStorage: <T>(data: AccessMessageParams, operationID?: string) => Promise<WsResponse<T>>;
+  deleteMessage: <T>(data: AccessMessageParams, operationID?: string) => Promise<WsResponse<T>>;
+  deleteAllConversationFromLocal: <T>(operationID?: string) => Promise<WsResponse<T>>;
+  deleteAllMsgFromLocal: <T>(operationID?: string) => Promise<WsResponse<T>>;
+  deleteAllMsgFromLocalAndSvr: <T>(operationID?: string) => Promise<WsResponse<T>>;
+  insertSingleMessageToLocalStorage: <T>(data: InsertSingleMsgParams, operationID?: string) => Promise<WsResponse<T>>;
+  insertGroupMessageToLocalStorage: <T>(data: InsertGroupMsgParams, operationID?: string) => Promise<WsResponse<T>>;
+  typingStatusUpdate: <T>(data: TypingUpdateParams, operationID?: string) => Promise<WsResponse<T>>;
+  clearConversationAndDeleteAllMsg: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  clearConversationAndDeleteAllMsgByEndTime: <T>(data: string, operationID?: string, endTime?: number) => Promise<WsResponse<T>>;
+  hideConversation: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  getConversationListSplit: (data: SplitParams, operationID?: string) => Promise<WsResponse<ConversationItem[]>>;
+  getConversationIDBySessionType: (data: GetOneCveParams, operationID?: string) => Promise<WsResponse<string>>;
+  getMultipleConversation: (data: string[], operationID?: string) => Promise<WsResponse<ConversationItem[]>>;
+  deleteConversation: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  setConversationDraft: <T>(data: SetDraftParams, operationID?: string) => Promise<WsResponse<T>>;
+  pinConversation: <T>(data: PinCveParams, operationID?: string) => Promise<WsResponse<T>>;
+  getTotalUnreadMsgCount: (operationID?: string) => Promise<WsResponse<number>>;
+  getConversationRecvMessageOpt: (data: string[], operationID?: string) => Promise<WsResponse<ConversationItem[]>>;
+  setConversationRecvMessageOpt: <T>(data: isRecvParams, operationID?: string) => Promise<WsResponse<T>>;
+  searchLocalMessages: (data: SearchLocalParams, operationID?: string) => Promise<WsResponse<SearchMessageResult>>;
+  addFriend: <T>(data: AddFriendParams, operationID?: string) => Promise<WsResponse<T>>;
+  searchFriends: (data: SearchFriendParams, operationID?: string) => Promise<WsResponse<SearchedFriendsInfo[]>>;
+  getSpecifiedFriendsInfo: (data: string[], operationID?: string) => Promise<WsResponse<FriendUserItem[]>>;
+  getFriendApplicationListAsRecipient: (operationID?: string) => Promise<WsResponse<FriendApplicationItem[]>>;
+  getFriendApplicationListAsApplicant: (operationID?: string) => Promise<WsResponse<FriendApplicationItem[]>>;
+  getFriendList: (operationID?: string) => Promise<WsResponse<FriendUserItem[]>>;
+  setFriendRemark: <T>(data: RemarkFriendParams, operationID?: string) => Promise<WsResponse<T>>;
+  checkFriend: (data: string[], operationID?: string) => Promise<WsResponse<FriendshipInfo[]>>;
+  acceptFriendApplication: <T>(data: AccessFriendParams, operationID?: string) => Promise<WsResponse<T>>;
+  refuseFriendApplication: <T>(data: AccessFriendParams, operationID?: string) => Promise<WsResponse<T>>;
+  deleteFriend: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  addBlack: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  removeBlack: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  getBlackList: (operationID?: string) => Promise<WsResponse<BlackUserItem[]>>;
+  inviteUserToGroup: <T>(data: InviteGroupParams, operationID?: string) => Promise<WsResponse<T>>;
+  kickGroupMember: <T>(data: InviteGroupParams, operationID?: string) => Promise<WsResponse<T>>;
+  isJoinGroup: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  getSpecifiedGroupMembersInfo: (data: Omit<InviteGroupParams, 'reason'>, operationID?: string) => Promise<WsResponse<GroupMemberItem[]>>;
+  getGroupMemberListByJoinTimeFilter: (data: GetGroupMemberByTimeParams, operationID?: string) => Promise<WsResponse<GroupMemberItem[]>>;
+  searchGroupMembers: (data: SearchGroupMemberParams, operationID?: string) => Promise<WsResponse<GroupMemberItem[]>>;
+  setGroupApplyMemberFriend: <T>(data: SetMemberAuthParams, operationID?: string) => Promise<WsResponse<T>>;
+  setGroupLookMemberInfo: <T>(data: SetMemberAuthParams, operationID?: string) => Promise<WsResponse<T>>;
+  getJoinedGroupList: (operationID?: string) => Promise<WsResponse<GroupItem[]>>;
+  createGroup: (data: CreateGroupParams, operationID?: string) => Promise<WsResponse<GroupItem>>;
+  setGroupInfo: <T>(data: GroupBaseInfo, operationID?: string) => Promise<WsResponse<T>>;
+  setGroupMemberNickname: <T>(data: MemberNameParams, operationID?: string) => Promise<WsResponse<T>>;
+  setGroupMemberInfo: <T>(data: MemberExParams, operationID?: string) => Promise<WsResponse<T>>;
+  joinGroup: <T>(data: JoinGroupParams, operationID?: string) => Promise<WsResponse<T>>;
+  searchGroups: (data: SearchGroupParams, operationID?: string) => Promise<WsResponse<GroupItem[]>>;
+  quitGroup: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  dismissGroup: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  changeGroupMute: <T>(data: ChangeGroupMuteParams, operationID?: string) => Promise<WsResponse<T>>;
+  changeGroupMemberMute: <T>(data: ChangeGroupMemberMuteParams, operationID?: string) => Promise<WsResponse<T>>;
+  transferGroupOwner: <T>(data: TransferGroupParams, operationID?: string) => Promise<WsResponse<T>>;
+  getGroupApplicationListAsApplicant: (operationID?: string) => Promise<WsResponse<GroupApplicationItem[]>>;
+  getGroupApplicationListAsRecipient: (operationID?: string) => Promise<WsResponse<GroupApplicationItem[]>>;
+  acceptGroupApplication: <T>(data: AccessGroupParams, operationID?: string) => Promise<WsResponse<T>>;
+  refuseGroupApplication: <T>(data: AccessGroupParams, operationID?: string) => Promise<WsResponse<T>>;
+  resetConversationGroupAtType: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  setGroupMemberRoleLevel: <T>(data: SetGroupRoleParams, operationID?: string) => Promise<WsResponse<T>>;
+  setGroupVerification: <T>(data: SetGroupVerificationParams, operationID?: string) => Promise<WsResponse<T>>;
+  getGroupMemberOwnerAndAdmin: (data: string, operationID?: string) => Promise<WsResponse<GroupMemberItem[]>>;
+  setGlobalRecvMessageOpt: <T>(opt: MessageReceiveOptType, operationID?: string) => Promise<WsResponse<T>>;
+  findMessageList: (data: FindMessageParams[], operationID?: string) => Promise<WsResponse<SearchMessageResult>>;
+  uploadFile: (data: UploadFileParams, operationID?: string) => Promise<WsResponse<{
+    url: string;
+  }>>;
+  cancelUploadFile: (data: string, operationID?: string) => Promise<WsResponse<{
+    data: string;
+  }>>;
+  updateConfig: <T>(data: ConfigParams, operationID?: string) => Promise<WsResponse<T>>;
+  subscribeUsersStatus: (data: string[], operationID?: string) => Promise<WsResponse<UserOnlineState[]>>;
+  unsubscribeUsersStatus: (data: string[], operationID?: string) => Promise<WsResponse<UserOnlineState[]>>;
+  getUserStatus: (operationID?: string) => Promise<WsResponse<UserOnlineState[]>>;
+  getSubscribeUsersStatus: (operationID?: string) => Promise<WsResponse<UserOnlineState[]>>;
+  signalingInvite: <T>(data: SignalingInviteParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingInviteInGroup: <T>(data: SignalingInviteParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingAccept: <T>(data: RtcActionParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingReject: <T>(data: RtcActionParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingCancel: <T>(data: RtcActionParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingHungUp: <T>(data: RtcActionParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingGetRoomByGroupID: <T>(groupID: string, operationID?: string) => Promise<WsResponse<T>>;
+  signalingGetTokenByRoomID: <T>(roomID: string, operationID?: string) => Promise<WsResponse<T>>;
+  signalingSendCustomSignal: <T>(data: CustomSignalParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingCreateMeeting: <T>(data: CreateMeetingParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingJoinMeeting: <T>(data: string, operationID?: string) => Promise<WsResponse<T>>;
+  signalingUpdateMeetingInfo: <T>(data: UpdateMeetingParams, operationID?: string) => Promise<WsResponse<T>>;
+  signalingCloseRoom: <T>(roomID: string, operationID?: string) => Promise<WsResponse<T>>;
+  signalingGetMeetings: <T>(operationID?: string) => Promise<WsResponse<T>>;
+  signalingOperateStream: <T>(data: MeetingOperateStreamParams, operationID?: string) => Promise<WsResponse<T>>;
+  setConversationIsMsgDestruct: <T>(data: SetConversationMsgDestructParams, operationID?: string) => Promise<WsResponse<T>>;
+  setConversationMsgDestructTime: <T>(data: SetConversationMsgDestructTimeParams, operationID?: string) => Promise<WsResponse<T>>;
+}
+export declare function getSDK(url?: string): SDK;
+export {};
diff --git a/src/utils/openIM/sdk/index.js b/src/utils/openIM/sdk/index.js
new file mode 100644
index 0000000..766f8fe
--- /dev/null
+++ b/src/utils/openIM/sdk/index.js
@@ -0,0 +1,899 @@
+import { fileMapClear, fileMapSet, initDatabaseAPI, workerPromise, } from '../api';
+import Emitter from '../utils/emitter';
+import { v4 as uuidv4 } from 'uuid';
+import { getGO, initializeWasm, getGoExitPromsie } from './initialize';
+import { logBoxStyleValue } from '../utils';
+class SDK extends Emitter {
+    wasmInitializedPromise;
+    goExitPromise;
+    goExisted = false;
+    tryParse = true;
+    isLogStandardOutput = true;
+    constructor(url='./openIM.wasm.gzip') {
+        super();
+        initDatabaseAPI();
+        this.wasmInitializedPromise = initializeWasm(url);
+        this.goExitPromise = getGoExitPromsie();
+        if (this.goExitPromise) {
+            this.goExitPromise
+                .then(() => {
+                console.info('SDK => wasm exist');
+            })
+                .catch(err => {
+                console.info('SDK => wasm with error ', err);
+            })
+                .finally(() => {
+                this.goExisted = true;
+            });
+        }
+    }
+    _logWrap(...args) {
+        if (this.isLogStandardOutput) {
+            // console.info(...args);
+        }
+    }
+    _invoker(functionName, func, args, processor) {
+        return new Promise(async (resolve, reject) => {
+            this._logWrap(`%cSDK =>%c [OperationID:${args[0]}] (invoked by js) run ${functionName} with args ${JSON.stringify(args)}`, 'font-size:0.875rem; background:#7CAEFF; border-radius:4px; padding-inline:4px;', '');
+            let response = {
+                operationID: args[0],
+                event: (functionName.slice(0, 1).toUpperCase() +
+                    functionName.slice(1).toLowerCase()),
+            };
+            try {
+                if (!getGO() || getGO().exited || this.goExisted) {
+                    throw 'wasm exist already, fail to run';
+                }
+                if (!func){
+                    // console.error('window not register function :'+functionName);
+                    reject('window not register function :'+functionName)
+                    return
+                }
+                let data = await func(...args);
+                if (processor) {
+                    this._logWrap(`%cSDK =>%c [OperationID:${args[0]}] (invoked by js) run ${functionName} with response before processor ${JSON.stringify(data)}`, logBoxStyleValue('#FFDC19'), '');
+                    data = processor(data);
+                }
+                if (this.tryParse) {
+                    try {
+                        data = JSON.parse(data);
+                    }
+                    catch (error) {
+                        // console.log('SDK => parse error ', error);
+                    }
+                }
+                response.data = data;
+                resolve(response);
+            }
+            catch (error) {
+                console.error(error)
+                this._logWrap(`%cSDK =>%c [OperationID:${args[0]}] (invoked by js) run ${functionName} with error ${JSON.stringify(error)}`, logBoxStyleValue('#EE4245'), '');
+                response = {
+                    ...response,
+                    ...error,
+                };
+                reject(response);
+            }
+        });
+    }
+    login = async (params, operationID = uuidv4()) => {
+        this._logWrap(`SDK => (invoked by js) run login with args ${JSON.stringify({
+            params,
+            operationID,
+        })}`);
+        await workerPromise;
+        await this.wasmInitializedPromise;
+        window.commonEventFunc(event => {
+            try {
+                // console.info(`%cSDK =>%c received event %c${event}%c `, logBoxStyleValue('#282828', '#ffffff'), '', 'color: #4f2398;', '');
+                const parsed = JSON.parse(event);
+                if (this.tryParse) {
+                    try {
+                        parsed.data = JSON.parse(parsed.data);
+                    }
+                    catch (error) {
+                        // console.log('SDK => parse error ', error);
+                    }
+                }
+                this.emit(parsed.event, parsed);
+            }
+            catch (error) {
+                // console.error(error);
+            }
+        });
+        const config = {
+            platformID: params.platformID,
+            apiAddr: params.apiAddr,
+            wsAddr: params.wsAddr,
+            dataDir: './',
+            logLevel: params.logLevel || 5,
+            isLogStandardOutput: params.isLogStandardOutput ?? true,
+            logFilePath: './',
+            isExternalExtensions: params.isExternalExtensions || false,
+            deviceID: params.deviceID,
+            backupHttpAddrs: params.backupHttpAddrs,
+        };
+        console.log('SDK => initSDK', JSON.stringify(config))
+        this.tryParse = params.tryParse ?? true;
+        this.isLogStandardOutput = config.isLogStandardOutput;
+        window.initSDK(operationID, JSON.stringify(config));
+        return await window.login(operationID, params.userID, params.token);
+    };
+    logout = (operationID = uuidv4()) => {
+        fileMapClear();
+        return this._invoker('logout', window.logout, [operationID]);
+    };
+    getAllConversationList = (operationID = uuidv4()) => {
+        return this._invoker('getAllConversationList', window.getAllConversationList, [operationID]);
+    };
+    getOneConversation = (params, operationID = uuidv4()) => {
+        return this._invoker('getOneConversation', window.getOneConversation, [operationID, params.sessionType, params.sourceID]);
+    };
+    batchGetConversationsBySessionTypeAndSourceId =  (params, operationID = uuidv4()) => {
+        return this._invoker('batchGetConversationsBySessionTypeAndSourceId', window.batchGetConversationsBySessionTypeAndSourceId, [operationID, JSON.stringify(params)]);
+    };
+    getAdvancedHistoryMessageList = (params, operationID = uuidv4()) => {
+        return this._invoker('getAdvancedHistoryMessageList', window.getAdvancedHistoryMessageList, [operationID, JSON.stringify(params)]);
+    };
+    getAdvancedHistoryMessageListReverse = (params, operationID = uuidv4()) => {
+        return this._invoker('getAdvancedHistoryMessageListReverse', window.getAdvancedHistoryMessageListReverse, [operationID, JSON.stringify(params)]);
+    };
+    getSpecifiedGroupsInfo = (params, operationID = uuidv4()) => {
+        return this._invoker('getSpecifiedGroupsInfo', window.getSpecifiedGroupsInfo, [operationID, JSON.stringify(params)]);
+    };
+    deleteConversationAndDeleteAllMsg = (conversationID, operationID = uuidv4()) => {
+        return this._invoker('deleteConversationAndDeleteAllMsg', window.deleteConversationAndDeleteAllMsg, [operationID, conversationID]);
+    };
+    markConversationMessageAsRead = (data, operationID = uuidv4()) => {
+        return this._invoker('markConversationMessageAsRead', window.markConversationMessageAsRead, [operationID, data]);
+    };
+    markMessagesAsReadByMsgID = (params, operationID = uuidv4()) => {
+        return this._invoker('markMessagesAsReadByMsgID', window.markMessagesAsReadByMsgID, [
+            operationID,
+            params.conversationID,
+            JSON.stringify(params.clientMsgIDList),
+        ]);
+    };
+    getGroupMemberList = (params, operationID = uuidv4()) => {
+        return this._invoker('getGroupMemberList', window.getGroupMemberList, [operationID, params.groupID, params.filter, params.offset, params.count]);
+    };
+    createTextMessage = (text, operationID = uuidv4()) => {
+        return this._invoker('createTextMessage', window.createTextMessage, [operationID, text], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createImageMessage = (params, operationID = uuidv4()) => {
+        return this._invoker('createImageMessage', window.createImageMessageByURL, [
+            operationID,
+            JSON.stringify(params.sourcePicture),
+            JSON.stringify(params.bigPicture),
+            JSON.stringify(params.snapshotPicture),
+        ], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createImageMessageByFile = (params, operationID = uuidv4()) => {
+        params.sourcePicture.uuid = `${params.sourcePicture.uuid}/${params.file.name}`;
+        fileMapSet(params.sourcePicture.uuid, params.file);
+        return this._invoker('createImageMessageByFile', window.createImageMessageByURL, [
+            operationID,
+            JSON.stringify(params.sourcePicture),
+            JSON.stringify(params.bigPicture),
+            JSON.stringify(params.snapshotPicture),
+        ], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createCustomMessage = (params, operationID = uuidv4()) => {
+        return this._invoker('createCustomMessage', window.createCustomMessage, [operationID, params.data, params.extension, params.description], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createQuoteMessage = (params, operationID = uuidv4()) => {
+        return this._invoker('createQuoteMessage', window.createQuoteMessage, [operationID, params.text, params.message], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createAdvancedQuoteMessage = (params, operationID = uuidv4()) => {
+        return this._invoker('createAdvancedQuoteMessage', window.createAdvancedQuoteMessage, [
+            operationID,
+            params.text,
+            JSON.stringify(params.message),
+            JSON.stringify(params.messageEntityList),
+        ], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createAdvancedTextMessage = (params, operationID = uuidv4()) => {
+        return this._invoker('createAdvancedTextMessage', window.createAdvancedTextMessage, [operationID, params.text, JSON.stringify(params.messageEntityList)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    sendMessage = (params, operationID = uuidv4()) => {
+        const offlinePushInfo = params.offlinePushInfo ?? {
+            title: '你有一条新消息',
+            desc: '',
+            ex: '',
+            iOSPushSound: '+1',
+            iOSBadgeCount: true,
+        };
+        return this._invoker('sendMessage', window.sendMessage, [
+            operationID,
+            JSON.stringify(params.message),
+            params.recvID,
+            params.groupID,
+            JSON.stringify(offlinePushInfo),
+        ]);
+    };
+    sendMessageNotOss = (params, operationID = uuidv4()) => {
+        const offlinePushInfo = params.offlinePushInfo ?? {
+            title: '你有一条新消息',
+            desc: '',
+            ex: '',
+            iOSPushSound: '+1',
+            iOSBadgeCount: true,
+        };
+        return this._invoker('sendMessageNotOss', window.sendMessageNotOss, [
+            operationID,
+            JSON.stringify(params.message),
+            params.recvID,
+            params.groupID,
+            JSON.stringify(offlinePushInfo),
+        ]);
+    };
+    sendMessageByBuffer = (params, operationID = uuidv4()) => {
+        const offlinePushInfo = params.offlinePushInfo ?? {
+            title: '你有一条新消息',
+            desc: '',
+            ex: '',
+            iOSPushSound: '+1',
+            iOSBadgeCount: true,
+        };
+        return this._invoker('sendMessageByBuffer', window.sendMessageByBuffer, [
+            operationID,
+            JSON.stringify(params.message),
+            params.recvID,
+            params.groupID,
+            JSON.stringify(offlinePushInfo),
+            params.fileArrayBuffer,
+            params.snpFileArrayBuffer,
+        ]);
+    };
+    setMessageLocalEx = (params, operationID = uuidv4()) => {
+        return this._invoker('setMessageLocalEx', window.setMessageLocalEx, [
+            operationID,
+            params.conversationID,
+            params.clientMsgID,
+            params.localEx,
+        ]);
+    };
+    exportDB(operationID = uuidv4()) {
+        return this._invoker('exportDB', window.exportDB, [operationID]);
+    }
+    getHistoryMessageListReverse = (params, operationID = uuidv4()) => {
+        return this._invoker('getHistoryMessageListReverse', window.getHistoryMessageListReverse, [operationID, JSON.stringify(params)]);
+    };
+    revokeMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('revokeMessage', window.revokeMessage, [
+            operationID,
+            data.conversationID,
+            data.clientMsgID,
+        ]);
+    };
+    burnMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('burnMessage', window.burnMessage, [
+            operationID,
+            data.conversationID,
+            data.clientMsgID,
+        ]);
+    };
+    burnMessageBatch = (data, operationID = uuidv4()) => {
+        return this._invoker('burnMessageBatch', window.burnMessageBatch, [
+            operationID,
+            data.conversationID,
+            data.seqs,
+        ]);
+    };
+    setConversationPrivateChat = (params, operationID = uuidv4()) => {
+        return this._invoker('setConversationPrivateChat', window.setConversationPrivateChat, [operationID, params.conversationID, params.isPrivate]);
+    };
+    setConversationBurnDuration = (params, operationID = uuidv4()) => {
+        return this._invoker('setConversationBurnDuration', window.setConversationBurnDuration, [operationID, params.conversationID, params.burnDuration]);
+    };
+    getLoginStatus = (operationID = uuidv4()) => {
+        return this._invoker('getLoginStatus', window.getLoginStatus, [operationID], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    setAppBackgroundStatus = (data, operationID = uuidv4()) => {
+        return this._invoker('setAppBackgroundStatus', window.setAppBackgroundStatus, [operationID, data]);
+    };
+    networkStatusChanged = (operationID = uuidv4()) => {
+        return this._invoker('networkStatusChanged ', window.networkStatusChanged, [operationID]);
+    };
+    getLoginUserID = (operationID = uuidv4()) => {
+        return this._invoker('getLoginUserID', window.getLoginUserID, [
+            operationID,
+        ]);
+    };
+    getSelfUserInfo = (operationID = uuidv4()) => {
+        return this._invoker('getSelfUserInfo', window.getSelfUserInfo, [operationID]);
+    };
+    getUsersInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('getUsersInfo', window.getUsersInfo, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    getUsersInfoWithCache = (data, operationID = uuidv4()) => {
+        return this._invoker('getUsersInfoWithCache', window.getUsersInfoWithCache, [operationID, JSON.stringify(data.userIDList), data.groupID]);
+    };
+    setSelfInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('setSelfInfo', window.setSelfInfo, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    createTextAtMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createTextAtMessage', window.createTextAtMessage, [
+            operationID,
+            data.text,
+            JSON.stringify(data.atUserIDList),
+            JSON.stringify(data.atUsersInfo),
+            JSON.stringify(data.message) ?? '',
+        ], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createSoundMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createSoundMessage', window.createSoundMessageByURL, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createSoundMessageByFile = (data, operationID = uuidv4()) => {
+        data.uuid = `${data.uuid}/${data.file.name}`;
+        fileMapSet(data.uuid, data.file);
+        return this._invoker('createSoundMessageByFile', window.createSoundMessageByURL, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createVideoMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createVideoMessage', window.createVideoMessageByURL, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createVideoMessageByFile = (data, operationID = uuidv4()) => {
+        data.videoUUID = `${data.videoUUID}/${data.videoFile.name}`;
+        data.snapshotUUID = `${data.snapshotUUID}/${data.snapshotFile.name}`;
+        fileMapSet(data.videoUUID, data.videoFile);
+        fileMapSet(data.snapshotUUID, data.snapshotFile);
+        return this._invoker('createVideoMessageByFile', window.createVideoMessageByURL, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createFileMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createFileMessage', window.createFileMessageByURL, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createFileMessageByFile = (data, operationID = uuidv4()) => {
+        data.uuid = `${data.uuid}/${data.file.name}`;
+        fileMapSet(data.uuid, data.file);
+        return this._invoker('createFileMessageByFile', window.createFileMessageByURL, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createFileMessageFromFullPath = (data, operationID = uuidv4()) => {
+        return this._invoker('createFileMessageFromFullPath', window.createFileMessageFromFullPath, [operationID, data.fileFullPath, data.fileName], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createImageMessageFromFullPath = (data, operationID = uuidv4()) => {
+        return this._invoker('createImageMessageFromFullPath ', window.createImageMessageFromFullPath, [operationID, data], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createSoundMessageFromFullPath = (data, operationID = uuidv4()) => {
+        return this._invoker('createSoundMessageFromFullPath ', window.createSoundMessageFromFullPath, [operationID, data.soundPath, data.duration], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createVideoMessageFromFullPath = (data, operationID = uuidv4()) => {
+        return this._invoker('createVideoMessageFromFullPath ', window.createVideoMessageFromFullPath, [
+            operationID,
+            data.videoFullPath,
+            data.videoType,
+            data.duration,
+            data.snapshotFullPath,
+        ], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createMergerMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createMergerMessage ', window.createMergerMessage, [
+            operationID,
+            JSON.stringify(data.messageList),
+            data.title,
+            JSON.stringify(data.summaryList),
+        ], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createForwardMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createForwardMessage ', window.createForwardMessage, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createFaceMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createFaceMessage ', window.createFaceMessage, [operationID, data.index, data.data], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createLocationMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createLocationMessage ', window.createLocationMessage, [operationID, data.description, data.longitude, data.latitude], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    createCardMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('createCardMessage ', window.createCardMessage, [operationID, JSON.stringify(data)], data => {
+            // compitable with old version sdk
+            return data[0];
+        });
+    };
+    deleteMessageFromLocalStorage = (data, operationID = uuidv4()) => {
+        return this._invoker('deleteMessageFromLocalStorage ', window.deleteMessageFromLocalStorage, [operationID, data.conversationID, data.clientMsgID]);
+    };
+    deleteMessage = (data, operationID = uuidv4()) => {
+        return this._invoker('deleteMessage ', window.deleteMessage, [
+            operationID,
+            data.conversationID,
+            data.clientMsgID,
+        ]);
+    };
+    deleteAllConversationFromLocal = (operationID = uuidv4()) => {
+        return this._invoker('deleteAllConversationFromLocal ', window.deleteAllConversationFromLocal, [operationID]);
+    };
+    deleteAllMsgFromLocal = (operationID = uuidv4()) => {
+        return this._invoker('deleteAllMsgFromLocal ', window.deleteAllMsgFromLocal, [operationID]);
+    };
+    deleteAllMsgFromLocalAndSvr = (operationID = uuidv4()) => {
+        return this._invoker('deleteAllMsgFromLocalAndSvr ', window.deleteAllMsgFromLocalAndSvr, [operationID]);
+    };
+    insertSingleMessageToLocalStorage = (data, operationID = uuidv4()) => {
+        return this._invoker('insertSingleMessageToLocalStorage ', window.insertSingleMessageToLocalStorage, [operationID, JSON.stringify(data.message), data.recvID, data.sendID]);
+    };
+    insertGroupMessageToLocalStorage = (data, operationID = uuidv4()) => {
+        return this._invoker('insertGroupMessageToLocalStorage ', window.insertGroupMessageToLocalStorage, [operationID, JSON.stringify(data.message), data.groupID, data.sendID]);
+    };
+    typingStatusUpdate = (data, operationID = uuidv4()) => {
+        return this._invoker('typingStatusUpdate ', window.typingStatusUpdate, [
+            operationID,
+            data.recvID,
+            data.msgTip,
+        ]);
+    };
+    clearConversationAndDeleteAllMsg = (data, operationID = uuidv4()) => {
+        return this._invoker('clearConversationAndDeleteAllMsg ', window.clearConversationAndDeleteAllMsg, [operationID, data]);
+    };
+
+    clearConversationAndDeleteAllMsgByEndTime = async (data, operationID = uuidv4()) => {
+        this._invoker('clearConversationAndDeleteAllMsgByEndTime ', window.clearConversationAndDeleteAllMsgByEndTime, [operationID, data.conversationID, data.endTime]);
+    };
+    
+    hideConversation = (data, operationID = uuidv4()) => {
+        return this._invoker('hideConversation ', window.hideConversation, [
+            operationID,
+            data,
+        ]);
+    };
+    getConversationListSplit = (data, operationID = uuidv4()) => {
+        return this._invoker('getConversationListSplit ', window.getConversationListSplit, [operationID, data.offset, data.count]);
+    };
+    getConversationIDBySessionType = (data, operationID = uuidv4()) => {
+        return this._invoker('getConversationIDBySessionType ', window.getConversationIDBySessionType, [operationID, data.sourceID, data.sessionType]);
+    };
+    getMultipleConversation = (data, operationID = uuidv4()) => {
+        return this._invoker('getMultipleConversation ', window.getMultipleConversation, [operationID, JSON.stringify(data)]);
+    };
+    deleteConversation = (data, operationID = uuidv4()) => {
+        return this._invoker('deleteConversation ', window.deleteConversation, [
+            operationID,
+            data,
+        ]);
+    };
+    setConversationDraft = (data, operationID = uuidv4()) => {
+        return this._invoker('setConversationDraft ', window.setConversationDraft, [operationID, data.conversationID, data.draftText]);
+    };
+    pinConversation = (data, operationID = uuidv4()) => {
+        return this._invoker('pinConversation ', window.pinConversation, [
+            operationID,
+            data.conversationID,
+            data.isPinned,
+        ]);
+    };
+    getTotalUnreadMsgCount = (operationID = uuidv4()) => {
+        return this._invoker('getTotalUnreadMsgCount ', window.getTotalUnreadMsgCount, [operationID]);
+    };
+    getConversationRecvMessageOpt = (data, operationID = uuidv4()) => {
+        return this._invoker('getConversationRecvMessageOpt ', window.getConversationRecvMessageOpt, [operationID, JSON.stringify(data)]);
+    };
+    setConversationRecvMessageOpt = (data, operationID = uuidv4()) => {
+        return this._invoker('setConversationRecvMessageOpt ', window.setConversationRecvMessageOpt, [operationID, data.conversationID, data.opt]);
+    };
+    searchLocalMessages = (data, operationID = uuidv4()) => {
+        return this._invoker('searchLocalMessages ', window.searchLocalMessages, [operationID, JSON.stringify(data)]);
+    };
+    addFriend = (data, operationID = uuidv4()) => {
+        return this._invoker('addFriend ', window.addFriend, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    searchFriends = (data, operationID = uuidv4()) => {
+        return this._invoker('searchFriends ', window.searchFriends, [operationID, JSON.stringify(data)]);
+    };
+    getSpecifiedFriendsInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('getSpecifiedFriendsInfo ', window.getSpecifiedFriendsInfo, [operationID, JSON.stringify(data)]);
+    };
+    getFriendApplicationListAsRecipient = (operationID = uuidv4()) => {
+        return this._invoker('getFriendApplicationListAsRecipient ', window.getFriendApplicationListAsRecipient, [operationID]);
+    };
+    getFriendApplicationListAsApplicant = (operationID = uuidv4()) => {
+        return this._invoker('getFriendApplicationListAsApplicant ', window.getFriendApplicationListAsApplicant, [operationID]);
+    };
+    getFriendList = (operationID = uuidv4()) => {
+        return this._invoker('getFriendList ', window.getFriendList, [operationID]);
+    };
+    setFriendRemark = (data, operationID = uuidv4()) => {
+        return this._invoker('setFriendRemark ', window.setFriendRemark, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    checkFriend = (data, operationID = uuidv4()) => {
+        return this._invoker('checkFriend', window.checkFriend, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    acceptFriendApplication = (data, operationID = uuidv4()) => {
+        return this._invoker('acceptFriendApplication', window.acceptFriendApplication, [operationID, JSON.stringify(data)]);
+    };
+    refuseFriendApplication = (data, operationID = uuidv4()) => {
+        return this._invoker('refuseFriendApplication ', window.refuseFriendApplication, [operationID, JSON.stringify(data)]);
+    };
+    deleteFriend = (data, operationID = uuidv4()) => {
+        return this._invoker('deleteFriend ', window.deleteFriend, [
+            operationID,
+            data,
+        ]);
+    };
+    addBlack = (data, operationID = uuidv4()) => {
+        return this._invoker('addBlack ', window.addBlack, [operationID, data]);
+    };
+    removeBlack = (data, operationID = uuidv4()) => {
+        return this._invoker('removeBlack ', window.removeBlack, [
+            operationID,
+            data,
+        ]);
+    };
+    getBlackList = (operationID = uuidv4()) => {
+        return this._invoker('getBlackList ', window.getBlackList, [operationID]);
+    };
+    inviteUserToGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('inviteUserToGroup ', window.inviteUserToGroup, [
+            operationID,
+            data.groupID,
+            data.reason,
+            JSON.stringify(data.userIDList),
+        ]);
+    };
+    kickGroupMember = (data, operationID = uuidv4()) => {
+        return this._invoker('kickGroupMember ', window.kickGroupMember, [
+            operationID,
+            data.groupID,
+            data.reason,
+            JSON.stringify(data.userIDList),
+        ]);
+    };
+    isJoinGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('isJoinGroup ', window.isJoinGroup, [
+            operationID,
+            data,
+        ]);
+    };
+    getSpecifiedGroupMembersInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('getSpecifiedGroupMembersInfo ', window.getSpecifiedGroupMembersInfo, [operationID, data.groupID, JSON.stringify(data.userIDList)]);
+    };
+    getGroupMemberListByJoinTimeFilter = (data, operationID = uuidv4()) => {
+        return this._invoker('getGroupMemberListByJoinTimeFilter ', window.getGroupMemberListByJoinTimeFilter, [
+            operationID,
+            data.groupID,
+            data.offset,
+            data.count,
+            data.joinTimeBegin,
+            data.joinTimeEnd,
+            JSON.stringify(data.filterUserIDList),
+        ]);
+    };
+    searchGroupMembers = (data, operationID = uuidv4()) => {
+        return this._invoker('searchGroupMembers ', window.searchGroupMembers, [operationID, JSON.stringify(data)]);
+    };
+    setGroupApplyMemberFriend = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupApplyMemberFriend ', window.setGroupApplyMemberFriend, [operationID, data.groupID, data.rule]);
+    };
+    setGroupLookMemberInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupLookMemberInfo ', window.setGroupLookMemberInfo, [operationID, data.groupID, data.rule]);
+    };
+    getJoinedGroupList = (operationID = uuidv4()) => {
+        return this._invoker('getJoinedGroupList ', window.getJoinedGroupList, [operationID]);
+    };
+    createGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('createGroup ', window.createGroup, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    setGroupInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupInfo ', window.setGroupInfo, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    setGroupMemberNickname = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupMemberNickname ', window.setGroupMemberNickname, [operationID, data.groupID, data.userID, data.groupMemberNickname]);
+    };
+    setGroupMemberInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupMemberInfo ', window.setGroupMemberInfo, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    joinGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('joinGroup ', window.joinGroup, [
+            operationID,
+            data.groupID,
+            data.reqMsg,
+            data.joinSource,
+        ]);
+    };
+    searchGroups = (data, operationID = uuidv4()) => {
+        return this._invoker('searchGroups ', window.searchGroups, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    quitGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('quitGroup ', window.quitGroup, [
+            operationID,
+            data,
+        ]);
+    };
+    dismissGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('dismissGroup ', window.dismissGroup, [
+            operationID,
+            data,
+        ]);
+    };
+    changeGroupMute = (data, operationID = uuidv4()) => {
+        return this._invoker('changeGroupMute ', window.changeGroupMute, [
+            operationID,
+            data.groupID,
+            data.isMute,
+        ]);
+    };
+    changeGroupMemberMute = (data, operationID = uuidv4()) => {
+        return this._invoker('changeGroupMemberMute ', window.changeGroupMemberMute, [operationID, data.groupID, data.userID, data.mutedSeconds]);
+    };
+    transferGroupOwner = (data, operationID = uuidv4()) => {
+        return this._invoker('transferGroupOwner ', window.transferGroupOwner, [
+            operationID,
+            data.groupID,
+            data.newOwnerUserID,
+        ]);
+    };
+    getGroupApplicationListAsApplicant = (operationID = uuidv4()) => {
+        return this._invoker('getGroupApplicationListAsApplicant ', window.getGroupApplicationListAsApplicant, [operationID]);
+    };
+    getGroupApplicationListAsRecipient = (operationID = uuidv4()) => {
+        return this._invoker('getGroupApplicationListAsRecipient ', window.getGroupApplicationListAsRecipient, [operationID]);
+    };
+    acceptGroupApplication = (data, operationID = uuidv4()) => {
+        return this._invoker('acceptGroupApplication ', window.acceptGroupApplication, [operationID, data.groupID, data.fromUserID, data.handleMsg]);
+    };
+    refuseGroupApplication = (data, operationID = uuidv4()) => {
+        return this._invoker('refuseGroupApplication ', window.refuseGroupApplication, [operationID, data.groupID, data.fromUserID, data.handleMsg]);
+    };
+    resetConversationGroupAtType = (data, operationID = uuidv4()) => {
+        return this._invoker('resetConversationGroupAtType ', window.resetConversationGroupAtType, [operationID, data]);
+    };
+    setGroupMemberRoleLevel = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupMemberRoleLevel ', window.setGroupMemberRoleLevel, [operationID, data.groupID, data.userID, data.roleLevel]);
+    };
+    setGroupVerification = (data, operationID = uuidv4()) => {
+        return this._invoker('setGroupVerification ', window.setGroupVerification, [operationID, data.groupID, data.verification]);
+    };
+    getGroupMemberOwnerAndAdmin = (data, operationID = uuidv4()) => {
+        return this._invoker('getGroupMemberOwnerAndAdmin ', window.getGroupMemberOwnerAndAdmin, [operationID, data]);
+    };
+    setGlobalRecvMessageOpt = (opt, operationID = uuidv4()) => {
+        return this._invoker('setGlobalRecvMessageOpt ', window.setGlobalRecvMessageOpt, [operationID, opt]);
+    };
+    findMessageList = (data, operationID = uuidv4()) => {
+        return this._invoker('findMessageList ', window.findMessageList, [operationID, JSON.stringify(data)]);
+    };
+    uploadFile = (data, operationID = uuidv4()) => {
+        // 在这里执行上传文件的其他逻辑，例如设置 data.uuid 等
+        // data.uuid = `${data.uuid}/${data.file.name}`;
+        data.uuid = data.uuid;
+        fileMapSet(data.uuid, data.file);
+        // 调用 _invoker 执行上传文件操作
+        return this._invoker('uploadFile', window.uploadFile, [
+            operationID,
+            JSON.stringify({
+                ...data,
+                filepath: '',
+                cause: '',
+            }),
+        ]);
+    };
+    cancelUploadFile = (data, operationID = uuidv4()) => {
+        return this._invoker('cancelUploadFile', window.cancelUploadFile, [operationID, data.uuid]);
+    };
+    updateConfig = (data, operationID = uuidv4()) => {
+        // apiAdd  当前选择的线路 API 
+        // wsAddr  当前选择的 WS 
+        // reConn  true  代表重新连接
+        // operationID 随机数
+        // msg  code 1 更新
+        // backupHttpAddrs  所有线路api 包括默认
+        console.error("updateConfig 参数:", data);
+        return this._invoker('updateConfig ', window.updateConfig, [operationID, JSON.stringify(data), data.reConn]);
+    };
+    subscribeUsersStatus = (data, operationID = uuidv4()) => {
+        return this._invoker('subscribeUsersStatus ', window.subscribeUsersStatus, [operationID, JSON.stringify(data)]);
+    };
+    unsubscribeUsersStatus = (data, operationID = uuidv4()) => {
+        return this._invoker('unsubscribeUsersStatus ', window.unsubscribeUsersStatus, [operationID, JSON.stringify(data)]);
+    };
+    getUserStatus = (operationID = uuidv4()) => {
+        return this._invoker('getUserStatus ', window.getUserStatus, [operationID]);
+    };
+    getSubscribeUsersStatus = (operationID = uuidv4()) => {
+        return this._invoker('getSubscribeUsersStatus ', window.getSubscribeUsersStatus, [operationID]);
+    };
+    signalingInvite = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingInvite ', window.signalingInvite, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    signalingInviteInGroup = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingInviteInGroup ', window.signalingInviteInGroup, [operationID, JSON.stringify(data)]);
+    };
+    signalingAccept = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingAccept ', window.signalingAccept, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    signalingReject = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingReject ', window.signalingReject, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    signalingCancel = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingCancel ', window.signalingCancel, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    signalingHungUp = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingHungUp ', window.signalingHungUp, [
+            operationID,
+            JSON.stringify(data),
+        ]);
+    };
+    signalingGetRoomByGroupID = (groupID, operationID = uuidv4()) => {
+        return this._invoker('signalingGetRoomByGroupID ', window.signalingGetRoomByGroupID, [operationID, groupID]);
+    };
+    signalingGetTokenByRoomID = (roomID, operationID = uuidv4()) => {
+        return this._invoker('signalingGetTokenByRoomID ', window.signalingGetTokenByRoomID, [operationID, roomID]);
+    };
+    signalingSendCustomSignal = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingSendCustomSignal ', window.signalingSendCustomSignal, [operationID, data.customInfo, data.roomID]);
+    };
+    signalingCreateMeeting = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingCreateMeeting ', window.signalingCreateMeeting, [operationID, JSON.stringify(data)]);
+    };
+    signalingJoinMeeting = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingJoinMeeting ', window.signalingJoinMeeting, [
+            operationID,
+            JSON.stringify({
+                roomID: data,
+            }),
+        ]);
+    };
+    signalingUpdateMeetingInfo = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingUpdateMeetingInfo ', window.signalingUpdateMeetingInfo, [operationID, JSON.stringify(data)]);
+    };
+    signalingCloseRoom = (roomID, operationID = uuidv4()) => {
+        return this._invoker('signalingCloseRoom ', window.signalingCloseRoom, [
+            operationID,
+            roomID,
+        ]);
+    };
+    signalingGetMeetings = (operationID = uuidv4()) => {
+        return this._invoker('signalingGetMeetings ', window.signalingGetMeetings, [operationID]);
+    };
+    signalingOperateStream = (data, operationID = uuidv4()) => {
+        return this._invoker('signalingOperateStream ', window.signalingOperateStream, [
+            operationID,
+            data.streamType,
+            data.roomID,
+            data.userID,
+            data.mute,
+            data.muteAll,
+        ]);
+    };
+    setConversationIsMsgDestruct = (data, operationID = uuidv4()) => {
+        return this._invoker('setConversationIsMsgDestruct ', window.setConversationIsMsgDestruct, [operationID, data.conversationID, data.isMsgDestruct]);
+    };
+    setConversationMsgDestructTime = (data, operationID = uuidv4()) => {
+        return this._invoker('setConversationMsgDestructTime ', window.setConversationMsgDestructTime, [operationID, data.conversationID, data.msgDestructTime]);
+    };
+    //生成uuid
+    createuuid=()=>uuidv4();
+
+    updateMsgStatus = (conversationID, clientMsgID, status, operationID = uuidv4()) => {
+      return this._invoker('updateMsgStatus', window.updateMsgStatus,
+        [ operationID, conversationID, clientMsgID, status ]);
+    };
+}
+let instance;
+// 客户仓用这个
+// export function getSDK(url = 'https://openim-priv-tmp.oss-cn-shenzhen.aliyuncs.com/openim/SDK/PROD/862ac9f5179f4173de3fc4952cb0ddf2.gzip') {
+//     if (typeof window === 'undefined') {
+//         return {};
+//     }
+//     if (instance) {
+//         return instance;
+//     }
+//     instance = new SDK(url);
+//     return instance;
+// }
+// 本地仓用这个
+export function getSDK(url = '/openIM.wasm.gzip') {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    if (instance) {
+        return instance;
+    }
+    instance = new SDK(url);
+    return instance;
+}
diff --git a/src/utils/openIM/sdk/initialize.d.ts b/src/utils/openIM/sdk/initialize.d.ts
new file mode 100644
index 0000000..11806ca
--- /dev/null
+++ b/src/utils/openIM/sdk/initialize.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="./src/types" />
+export declare function initializeWasm(url: string): Promise<Go | null>;
+export declare function reset(): void;
+export declare function getGO(): Go;
+export declare function getGoExitPromsie(): Promise<void> | undefined;
diff --git a/src/utils/openIM/sdk/initialize.js b/src/utils/openIM/sdk/initialize.js
new file mode 100644
index 0000000..a7ebdd7
--- /dev/null
+++ b/src/utils/openIM/sdk/initialize.js
@@ -0,0 +1,161 @@
+// import { wait } from '../utils'
+// import pako from 'pako'
+
+// let initiallized = false
+// let go
+// let goExitPromise
+// export async function initializeWasm(url) {
+//   if (initiallized) {
+//     return null
+//   }
+//   if (typeof window === 'undefined') {
+//     return Promise.resolve(null)
+//   }
+//   // go = new Go();
+//   // if ('instantiateStreaming' in WebAssembly) {
+//   //     const wasm = await WebAssembly.instantiateStreaming(fetch(url), go.importObject);
+//   //     go.run(wasm.instance);
+//   // }
+//   // else {
+//   //     const bytes = await fetch(url).then(resp => resp.arrayBuffer());
+//   //     const wasm = await WebAssembly.instantiate(bytes, go.importObject);
+//   //     goExitPromise = go.run(wasm.instance);
+//   // }
+//   go = new Go()
+//   let bytes
+//   console.log('>>>>>>>>url----' + url)
+
+//   await fetch(url)
+//     .then((response) => {
+//       if (!response.ok) {
+//         throw new Error(`HTTP error! status: ${response.status}`)
+//       }
+
+//       // 创建一个新的 pako.Inflate 实例
+//       const inflater = new pako.Inflate()
+
+//       // 返回一个 Promise，读取并解压 Gzip 数据
+//       return new Promise((resolve, reject) => {
+//         // 创建一个空的 ArrayBuffer 用于存储解压后的数据
+//         let inflatedData = new ArrayBuffer(0)
+
+//         // 监听 pako.Inflate.prototype.onData 事件，将解压的数据追加到 ArrayBuffer 中
+//         inflater.onData = function (chunk) {
+//           const oldSize = inflatedData.byteLength
+//           const newSize = oldSize + chunk.length
+//           const newBuffer = new Uint8Array(newSize)
+//           newBuffer.set(new Uint8Array(inflatedData), 0)
+//           newBuffer.set(chunk, oldSize)
+//           inflatedData = newBuffer.buffer
+//         }
+
+//         // 监听 pako.Inflate.prototype.onEnd 事件，解压完成后将解压后的数据传递给 resolve 函数
+//         inflater.onEnd = function () {
+//           resolve(inflatedData)
+//         }
+
+//         // 以流的方式读取并解压 Gzip 数据
+//         const reader = response.body.getReader()
+//         function read() {
+//           reader
+//             .read()
+//             .then(({ done, value }) => {
+//               if (done) {
+//                 // Gzip 数据读取完成，触发 pako.Inflate.prototype.onEnd 事件
+//                 inflater.end()
+//                 return
+//               }
+//               // 将读取的数据传递给 pako.Inflate 实例进行解压
+//               inflater.push(value, false)
+//               read()
+//             })
+//             .catch(reject)
+//         }
+//         read()
+//       })
+//     })
+//     .then((arrayBuffer) => {
+//       // 处理解压后的 ArrayBuffer 数据
+//       bytes = arrayBuffer
+//       return arrayBuffer
+//     })
+//     .catch((error) => {
+//       console.error('Error fetching or decompressing the file:', error)
+//     })
+
+//   const wasm = await WebAssembly.instantiate(bytes, go.importObject)
+//   goExitPromise = go.run(wasm.instance)
+
+//   await wait(100)
+//   return go
+// }
+// export function reset() {
+//   initiallized = false
+// }
+// export function getGO() {
+//   return go
+// }
+// export function getGoExitPromsie() {
+//   return goExitPromise
+// }
+// fix 2024 -8-20 修复sdk 加载慢问题
+
+import pako from 'pako'
+
+let initialized = false
+let go
+let goExitPromise
+
+export async function initializeWasm(url) {
+  if (initialized) {
+    return null
+  }
+  if (typeof window === 'undefined') {
+    return Promise.resolve(null)
+  }
+
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`initializeWasm Error：${response.status}`)
+  }
+
+  const pk = new pako.Inflate()
+  const chunks = []
+  pk.onData = function(chunk) {
+    chunks.push(chunk)
+  }
+
+  const reader = response.body.getReader()
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    pk.push(value, false)
+  }
+
+  pk.push(new Uint8Array(0), true)
+
+  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0)
+  const bytes = new Uint8Array(totalLength)
+  let position = 0
+  for (const chunk of chunks) {
+    bytes.set(chunk, position)
+    position += chunk.length
+  }
+
+  go = new Go()
+  const wasm = await WebAssembly.instantiate(bytes, go.importObject)
+  goExitPromise = go.run(wasm.instance)
+  return go
+}
+
+export function reset() {
+  initialized = false
+}
+
+export function getGO() {
+  return go
+}
+
+export function getGoExitPromsie() {
+  return goExitPromise
+}
\ No newline at end of file
diff --git a/src/utils/openIM/sqls/index.d.ts b/src/utils/openIM/sqls/index.d.ts
new file mode 100644
index 0000000..561b213
--- /dev/null
+++ b/src/utils/openIM/sqls/index.d.ts
@@ -0,0 +1,16 @@
+export * from './localChatLogsConversationID';
+export * from './localConversations';
+export * from './localUsers';
+export * from './localSuperGroups';
+export * from './localConversationUnreadMessages';
+export * from './localBlack';
+export * from './localFriend';
+export * from './localGroups';
+export * from './localGroupRequests';
+export * from './localAdminGroupRequests';
+export * from './localFriendRequest';
+export * from './localGroupMembers';
+export * from './tempCacheLocalChatLogs';
+export * from './localNotification';
+export * from './localUpload';
+export * from './localStranger';
diff --git a/src/utils/openIM/sqls/index.js b/src/utils/openIM/sqls/index.js
new file mode 100644
index 0000000..561b213
--- /dev/null
+++ b/src/utils/openIM/sqls/index.js
@@ -0,0 +1,16 @@
+export * from './localChatLogsConversationID';
+export * from './localConversations';
+export * from './localUsers';
+export * from './localSuperGroups';
+export * from './localConversationUnreadMessages';
+export * from './localBlack';
+export * from './localFriend';
+export * from './localGroups';
+export * from './localGroupRequests';
+export * from './localAdminGroupRequests';
+export * from './localFriendRequest';
+export * from './localGroupMembers';
+export * from './tempCacheLocalChatLogs';
+export * from './localNotification';
+export * from './localUpload';
+export * from './localStranger';
diff --git a/src/utils/openIM/sqls/localAdminGroupRequests.d.ts b/src/utils/openIM/sqls/localAdminGroupRequests.d.ts
new file mode 100644
index 0000000..33a673e
--- /dev/null
+++ b/src/utils/openIM/sqls/localAdminGroupRequests.d.ts
@@ -0,0 +1,9 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalAdminGroupRequest = {
+    [key: string]: any;
+};
+export declare function localAdminGroupRequests(db: Database): QueryExecResult[];
+export declare function insertAdminGroupRequest(db: Database, localGroupRequest: LocalAdminGroupRequest): QueryExecResult[];
+export declare function deleteAdminGroupRequest(db: Database, groupID: string, userID: string): QueryExecResult[];
+export declare function updateAdminGroupRequest(db: Database, localGroupRequest: LocalAdminGroupRequest): QueryExecResult[];
+export declare function getAdminGroupApplication(db: Database): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localAdminGroupRequests.js b/src/utils/openIM/sqls/localAdminGroupRequests.js
new file mode 100644
index 0000000..64d954a
--- /dev/null
+++ b/src/utils/openIM/sqls/localAdminGroupRequests.js
@@ -0,0 +1,65 @@
+import squel from 'squel';
+export function localAdminGroupRequests(db) {
+    return db.exec(`
+    create table if not exists "local_admin_group_requests" (
+        "group_id" varchar(64),
+        "group_name" text,
+        "notification" varchar(255),
+        "introduction" varchar(255),
+        "face_url" varchar(255),
+        "create_time" integer,
+        "status" integer,
+        "creator_user_id" varchar(64),
+        "group_type" integer,
+        "owner_user_id" varchar(64),
+        "member_count" integer,
+        "user_id" varchar(64),
+        "nickname" varchar(255),
+        "user_face_url" varchar(255),
+        "gender" integer,
+        "handle_result" integer,
+        "req_msg" varchar(255),
+        "handle_msg" varchar(255),
+        "req_time" integer,
+        "handle_user_id" varchar(64),
+        "handle_time" integer,
+        "ex" varchar(1024),
+        "attached_info" varchar(1024),
+        "join_source" integer,
+        "inviter_user_id" text,
+        PRIMARY KEY ("group_id", "user_id")
+      );
+      `);
+}
+export function insertAdminGroupRequest(db, localGroupRequest) {
+    const sql = squel
+        .insert()
+        .into('local_admin_group_requests')
+        .setFields(localGroupRequest)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteAdminGroupRequest(db, groupID, userID) {
+    return db.exec(`
+        delete
+        from local_admin_group_requests
+        where group_id = "${groupID}"
+          and user_id = "${userID}"
+        `);
+}
+export function updateAdminGroupRequest(db, localGroupRequest) {
+    const sql = squel
+        .update()
+        .table('local_admin_group_requests')
+        .setFields(localGroupRequest)
+        .where(`group_id = '${localGroupRequest.group_id}' and user_id = '${localGroupRequest.user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function getAdminGroupApplication(db) {
+    return db.exec(`
+        select *
+        from local_admin_group_requests
+        order by create_time desc
+        `);
+}
diff --git a/src/utils/openIM/sqls/localBlack.d.ts b/src/utils/openIM/sqls/localBlack.d.ts
new file mode 100644
index 0000000..a95ee83
--- /dev/null
+++ b/src/utils/openIM/sqls/localBlack.d.ts
@@ -0,0 +1,12 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalBlack = {
+    [key: string]: any;
+};
+export declare function locaBlacks(db: Database): QueryExecResult[];
+export declare function getBlackList(db: Database): QueryExecResult[];
+export declare function getBlackListUserID(db: Database): QueryExecResult[];
+export declare function getBlackInfoByBlockUserID(db: Database, blockUserID: string, loginUserID: string): QueryExecResult[];
+export declare function getBlackInfoList(db: Database, blockUserIDList: string[]): QueryExecResult[];
+export declare function insertBlack(db: Database, localBlack: LocalBlack): QueryExecResult[];
+export declare function updateBlack(db: Database, localBlack: LocalBlack): QueryExecResult[];
+export declare function deleteBlack(db: Database, blockUserID: string, loginUserID: string): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localBlack.js b/src/utils/openIM/sqls/localBlack.js
new file mode 100644
index 0000000..49a514d
--- /dev/null
+++ b/src/utils/openIM/sqls/localBlack.js
@@ -0,0 +1,72 @@
+import squel from 'squel';
+export function locaBlacks(db) {
+    return db.exec(`
+      create table if not exists 'local_blacks' (
+        'owner_user_id'     varchar(64),
+        'block_user_id'     varchar(64),
+        'nickname'         varchar(255),
+        'face_url'         varchar(255),
+        'gender'           INTEGER,
+        'create_time'      INTEGER,
+        'add_source'      INTEGER,
+        'operator_user_id'   varchar(64),
+        'ex'              varchar(1024),
+        'attached_info'     varchar(1024),
+        primary key  ('owner_user_id', 'block_user_id')
+    ) 
+      `);
+}
+export function getBlackList(db) {
+    return db.exec(`
+      select *
+      from local_blacks
+      `);
+}
+export function getBlackListUserID(db) {
+    return db.exec(`
+    SELECT block_user_id
+    FROM local_blacks
+      `);
+}
+export function getBlackInfoByBlockUserID(db, blockUserID, loginUserID) {
+    return db.exec(`
+      SELECT *
+        FROM local_blacks
+        WHERE owner_user_id = "${loginUserID}"
+          AND block_user_id = "${blockUserID}"
+        LIMIT 1
+      `);
+}
+export function getBlackInfoList(db, blockUserIDList) {
+    const ids = blockUserIDList.map(v => `'${v}'`);
+    return db.exec(`
+    select *
+    from local_blacks
+    where block_user_id in (${ids.join(',')})
+      `);
+}
+export function insertBlack(db, localBlack) {
+    const sql = squel
+        .insert()
+        .into('local_blacks')
+        .setFields(localBlack)
+        .toString();
+    return db.exec(sql);
+}
+export function updateBlack(db, localBlack) {
+    const sql = squel
+        .update()
+        .table('local_blacks')
+        .setFields(localBlack)
+        .where(`owner_user_id = '${localBlack.owner_user_id}' and block_user_id = '${localBlack.block_user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteBlack(db, blockUserID, loginUserID) {
+    return db.exec(`
+    delete
+    from local_blacks
+    where owner_user_id = "${loginUserID}"
+    and block_user_id = "${blockUserID}"
+      `);
+}
diff --git a/src/utils/openIM/sqls/localChatLogsConversationID.d.ts b/src/utils/openIM/sqls/localChatLogsConversationID.d.ts
new file mode 100644
index 0000000..16816a6
--- /dev/null
+++ b/src/utils/openIM/sqls/localChatLogsConversationID.d.ts
@@ -0,0 +1,232 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js'
+export declare type ClientMessage = {
+  [key: string]: any
+}
+export declare function localChatLogsConversationID(
+  db: Database,
+  conversationID: string
+): QueryExecResult[]
+export declare function getMessage(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string
+): QueryExecResult[]
+export declare function getAlreadyExistSeqList(
+  db: Database,
+  conversationID: string,
+  lostSeqList: number[]
+): QueryExecResult[]
+export declare function getMessageList(
+  db: Database,
+  conversationID: string,
+  count: number,
+  startTime: number,
+  isReverse: boolean
+): QueryExecResult[]
+export declare function getMessageBySeq(
+  db: Database,
+  conversationID: string,
+  seq: number
+): QueryExecResult[]
+export declare function getMessagesByClientMsgIDs(
+  db: Database,
+  conversationID: string,
+  clientMsgIDs: string[]
+): QueryExecResult[]
+export declare function getMessagesBySeqs(
+  db: Database,
+  conversationID: string,
+  seqs: number[]
+): QueryExecResult[]
+export declare function getMessageListNoTime(
+  db: Database,
+  conversationID: string,
+  count: number,
+  isReverse: boolean
+): QueryExecResult[]
+export declare function getMessageListNotDel(
+  db: Database,
+  conversationID: string,
+  count: number,
+  isReverse: boolean
+): QueryExecResult[]
+export declare function getLastMessageByTime(
+  db: Database,
+  conversationID: string,
+  count: number,
+  startTime: number,
+  isReverse: boolean
+): QueryExecResult[]
+export declare function getConversationNormalMsgSeq(
+  db: Database,
+  conversationID: string,
+  init: boolean
+): QueryExecResult[]
+export declare function getConversationPeerNormalMsgSeq(
+  db: Database,
+  conversationID: string,
+  loginUserID: string
+): QueryExecResult[]
+export declare function getSendingMessageList(
+  db: Database,
+  conversationID: string
+): QueryExecResult[]
+export declare function updateMessageTimeAndStatus(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string,
+  serverMsgID: string,
+  sendTime: number,
+  status: number
+): QueryExecResult[]
+export declare function updateMessageStatus(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string,
+  status: number
+): QueryExecResult[]
+export declare function updateMessage(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string,
+  localChatLogs: ClientMessage
+): QueryExecResult[]
+export declare function updateMessageBySeq(
+  db: Database,
+  conversationID: string,
+  seq: number,
+  localChatLogs: ClientMessage
+): QueryExecResult[]
+export declare function batchInsertMessageList(
+  db: Database,
+  conversationID: string,
+  messageList: ClientMessage[]
+): QueryExecResult[]
+export declare function insertMessage(
+  db: Database,
+  conversationID: string,
+  localChatLogs: ClientMessage
+): QueryExecResult[]
+export declare function getMultipleMessage(
+  db: Database,
+  conversationID: string,
+  clientMsgIDs: string[]
+): QueryExecResult[]
+export declare function searchMessageByKeyword(
+  db: Database,
+  conversationID: string,
+  contentType: number[],
+  keywordList: string[],
+  keywordListMatchType: number,
+  startTime: number,
+  endTime: number,
+  offset: number,
+  count: number
+): QueryExecResult[]
+export declare function searchMessageByContentType(
+  db: Database,
+  conversationID: string,
+  contentType: number[],
+  startTime: number,
+  endTime: number,
+  offset: number,
+  count: number
+): QueryExecResult[]
+export declare function searchMessageByContentTypeAndKeyword(
+  db: Database,
+  conversationID: string,
+  contentType: number[],
+  keywordList: string[],
+  keywordListMatchType: number,
+  startTime: number,
+  endTime: number
+): QueryExecResult[]
+export declare function messageIfExists(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string
+): QueryExecResult[]
+export declare function updateMsgSenderFaceURLAndSenderNickname(
+  db: Database,
+  conversationID: string,
+  sendID: string,
+  faceURL: string,
+  nickname: string
+): QueryExecResult[]
+export declare function deleteConversationAllMessages(
+  db: Database,
+  conversationID: string
+): QueryExecResult[]
+export declare function deleteConversationAllMessagesBySeq(
+  db: Database,
+  conversationID: string,
+  maxSeq: number
+): QueryExecResult[]
+export declare function markDeleteConversationAllMessages(
+  db: Database,
+  conversationID: string
+): QueryExecResult[]
+export declare function getUnreadMessage(
+  db: Database,
+  conversationID: string,
+  loginUserID: string
+): QueryExecResult[]
+export declare function markConversationMessageAsReadBySeqs(
+  db: Database,
+  conversationID: string,
+  seqList: number[],
+  loginUserID: string
+): QueryExecResult[]
+export declare function markConversationMessageAsRead(
+  db: Database,
+  conversationID: string,
+  clientMsgIDList: string[],
+  loginUserID: string
+): QueryExecResult[]
+export declare function updateColumnsMessage(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string,
+  localChatLogs: ClientMessage
+): QueryExecResult[]
+export declare function deleteConversationMsgs(
+  db: Database,
+  conversationID: string,
+  clientMsgIDList: string[]
+): QueryExecResult[]
+export declare function markConversationAllMessageAsRead(
+  db: Database,
+  conversationID: string,
+  loginUserID: string
+): QueryExecResult[]
+export declare function searchAllMessageByContentType(
+  db: Database,
+  conversationID: string,
+  contentType: number
+): QueryExecResult[]
+
+export declare function updateMessageBySeqEx(
+  db: Database,
+  conversationID: string,
+  clientMsgID: string,
+  seq: number,
+  localChatLogs: ClientMessage
+): QueryExecResult[]
+// type SpecialClientMessage = {
+//   [status: string]: 4
+// }
+export declare function updateMessageBySeqs(
+  db: Database,
+  conversationID: string,
+  seqs: number[],
+  localChatLogs: ClientMessage,
+): QueryExecResult[]
+
+
+
+export declare function updateMessageByUserID(
+  db: Database,
+  conversationID: string,
+  userID: string,
+  localChatLogs: ClientMessage,
+): QueryExecResult[]
diff --git a/src/utils/openIM/sqls/localChatLogsConversationID.js b/src/utils/openIM/sqls/localChatLogsConversationID.js
new file mode 100644
index 0000000..44637a7
--- /dev/null
+++ b/src/utils/openIM/sqls/localChatLogsConversationID.js
@@ -0,0 +1,419 @@
+import squel from 'squel'
+function _initLocalChatLogsTable(db, conversationID) {
+  localChatLogsConversationID(db, conversationID)
+}
+export function localChatLogsConversationID(db, conversationID) {
+  return db.exec(`
+    create table if not exists 'chat_logs_${conversationID}' (
+        'client_msg_id' char(32),
+        'server_msg_id' char(32),
+        'send_id' char(32),
+        'recv_id' char(32),
+        'sender_platform_id' smallint,
+        'sender_nick_name' varchar(255),
+        'sender_face_url' varchar(255),
+        'session_type' smallint,
+        'msg_from' smallint,
+        'content_type' smallint,
+        'content' varchar(1000),
+        'is_read' tinyint(1),
+        'status' smallint,
+        'seq' int DEFAULT 0,
+        'send_time' int,
+        'create_time' int,
+        'attached_info' varchar(1024),
+        'ex' varchar(1024),
+        'local_ex' varchar(1024),
+        'is_react' tinyint(1),
+        'is_external_extensions' tinyint(1),
+        'msg_first_modify_time' int,
+        PRIMARY KEY ('client_msg_id')
+      );
+      `)
+}
+export function getMessage(db, conversationID, clientMsgID) {
+  _initLocalChatLogsTable(db, conversationID)
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE client_msg_id = '${clientMsgID}' limit 1
+    `)
+}
+export function getAlreadyExistSeqList(db, conversationID, lostSeqList) {
+  return db.exec(`
+    SELECT seq FROM 'chat_logs_${conversationID}' WHERE seq in (${lostSeqList.join(',')})
+    `)
+}
+export function getMessageList(db, conversationID, count, startTime, isReverse) {
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE send_time ${
+      !isReverse ? '<' : '>'
+    } ${startTime} ORDER BY send_time ${!isReverse ? 'DESC' : 'ASC'} LIMIT ${count}
+    `)
+}
+export function getLastMessageByTime(db, conversationID, count, startTime, isReverse) {
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE send_time ${
+      !isReverse ? '<=' : '>='
+    } ${startTime} ORDER BY send_time ${!isReverse ? 'DESC' : 'ASC'} LIMIT ${count}
+    `)
+}
+export function getMessageBySeq(db, conversationID, seq) {
+  _initLocalChatLogsTable(db, conversationID)
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE seq = ${seq} limit 1;
+    `)
+}
+export function getMessagesByClientMsgIDs(db, conversationID, clientMsgIDs) {
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE client_msg_id in (${clientMsgIDs
+      .map((item) => `'${item}'`)
+      .join(',')}) order by send_time desc;
+    `)
+}
+export function getMessagesBySeqs(db, conversationID, seqs) {
+  _initLocalChatLogsTable(db, conversationID)
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE seq in (${seqs.join(
+      ','
+    )}) order by send_time desc;
+    `)
+}
+export function getMessageListNoTime(db, conversationID, count, isReverse) {
+  _initLocalChatLogsTable(db, conversationID)
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' ORDER BY send_time ${
+      !isReverse ? 'DESC' : 'ASC'
+    } LIMIT ${count}
+    `)
+}
+export function getMessageListNotDel(db, conversationID, count, isReverse) {
+  _initLocalChatLogsTable(db, conversationID)
+  return db.exec(`
+      SELECT * FROM 'chat_logs_${conversationID}' Where status = 2 order by send_time ${
+        !isReverse ? 'DESC' : 'ASC'
+      } LIMIT ${count}
+      `)
+}
+export function getConversationNormalMsgSeq(db, conversationID, init) {
+  if (init) {
+    _initLocalChatLogsTable(db, conversationID)
+  }
+  return db.exec(`
+      SELECT seq FROM 'chat_logs_${conversationID}' order by seq desc limit 1;
+      `)
+}
+export function getConversationPeerNormalMsgSeq(db, conversationID, loginUserID) {
+  return db.exec(`
+      SELECT seq FROM 'chat_logs_${conversationID}' where send_id != '${loginUserID}' order by seq desc limit 1;
+      `)
+}
+export function getSendingMessageList(db, conversationID) {
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE status = 1;
+    `)
+}
+export function updateMessageTimeAndStatus(
+  db,
+  conversationID,
+  clientMsgID,
+  serverMsgID,
+  sendTime,
+  status
+) {
+  return db.exec(`
+    UPDATE 'chat_logs_${conversationID}' SET server_msg_id = '${serverMsgID}', send_time = ${sendTime}, status = ${status} WHERE client_msg_id = '${clientMsgID}' and seq=0;
+    `)
+}
+export function updateMessageStatus(
+  db,
+  conversationID,
+  clientMsgID,
+  status
+) {
+  return db.exec(`
+    UPDATE 'chat_logs_${conversationID}' SET status = ${status} WHERE client_msg_id = '${clientMsgID}' and seq=0;
+    `)
+}
+export function updateMessage(db, conversationID, clientMsgID, localChatLogs) {
+  const sql = squel
+    .update()
+    .table(`chat_logs_${conversationID}`)
+    .setFields(localChatLogs)
+    .where(`client_msg_id = '${clientMsgID}'`)
+    .toString()
+  return db.exec(sql)
+}
+export function updateMessageBySeq(db, conversationID, seq, localChatLogs) {
+  const sql = squel
+    .update()
+    .table(`chat_logs_${conversationID}`)
+    .setFields(localChatLogs)
+    .where(`seq = '${seq}'`)
+    .toString()
+  return db.exec(sql)
+}
+export function batchInsertMessageList(db, conversationID, messageList) {
+  const sql = squel
+    .insert()
+    .into(`chat_logs_${conversationID}`)
+    .setFieldsRows(messageList)
+    .toString()
+  return db.exec(sql)
+}
+export function insertMessage(db, conversationID, localChatLogs) {
+  const sql = squel.insert().into(`chat_logs_${conversationID}`).setFields(localChatLogs).toString()
+  return db.exec(sql)
+}
+export function getMultipleMessage(db, conversationID, clientMsgIDs) {
+  return db.exec(`
+    SELECT * FROM 'chat_logs_${conversationID}' WHERE client_msg_id in (${clientMsgIDs
+      .map((item) => `'${item}'`)
+      .join(',')}) order by send_time desc;
+    `)
+}
+export function searchMessageByKeyword(
+  db,
+  conversationID,
+  contentType,
+  keywordList,
+  keywordListMatchType,
+  startTime,
+  endTime,
+  offset,
+  count
+) {
+  const finalEndTime = endTime ? endTime : new Date().getTime()
+  let subCondition = ''
+  const values = contentType.map((v) => `${v}`).join(',')
+  const connectStr = keywordListMatchType === 0 ? 'or ' : 'and '
+  keywordList?.forEach((keyword, index) => {
+    if (index == 0) {
+      subCondition += 'And ('
+    }
+    if (index + 1 >= keywordList.length) {
+      subCondition += 'content like ' + "'%" + keywordList[index] + "%') "
+    } else {
+      subCondition += 'content like ' + "'%" + keywordList[index] + "%' " + connectStr
+    }
+  })
+  return db.exec(`  
+    SELECT * FROM chat_logs_${conversationID} 
+          WHERE send_time  between ${startTime} and ${finalEndTime} 
+          AND status <=3  
+          And content_type IN (${values}) 
+          ${subCondition}
+    ORDER BY send_time DESC LIMIT ${count} OFFSET ${offset};
+    `)
+}
+export function searchMessageByContentType(
+  db,
+  conversationID,
+  contentType,
+  startTime,
+  endTime,
+  offset,
+  count
+) {
+  const values = contentType.map((v) => `${v}`).join(',')
+  const finalEndTime = endTime ? endTime : new Date().getTime()
+  return db.exec(`  
+    SELECT * FROM chat_logs_${conversationID} 
+          WHERE send_time between ${startTime} and ${finalEndTime} 
+          AND status <=3 
+          And content_type IN (${values}) 
+    ORDER BY send_time DESC LIMIT ${count} OFFSET ${offset};
+    `)
+}
+export function searchMessageByContentTypeAndKeyword(
+  db,
+  conversationID,
+  contentType,
+  keywordList,
+  keywordListMatchType,
+  startTime,
+  endTime
+) {
+  const values = contentType.map((v) => `${v}`).join(',')
+  const finalEndTime = endTime ? endTime : new Date().getTime()
+  let subCondition = ''
+  const connectStr = keywordListMatchType === 0 ? 'or ' : 'and '
+  keywordList?.forEach((keyword, index) => {
+    if (index == 0) {
+      subCondition += 'And ('
+    }
+    if (index + 1 >= keywordList.length) {
+      subCondition += 'content like ' + "'%" + keywordList[index] + "%') "
+    } else {
+      subCondition += 'content like ' + "'%" + keywordList[index] + "%' " + connectStr
+    }
+  })
+  return db.exec(`  
+      SELECT * FROM chat_logs_${conversationID} 
+            WHERE send_time between ${startTime} and ${finalEndTime} 
+            AND status <=3 
+            And content_type IN (${values}) 
+            ${subCondition}
+      ORDER BY send_time DESC;
+      `)
+}
+export function messageIfExists(db, conversationID, clientMsgID) {
+  return db.exec(`
+      SELECT * FROM chat_logs_${conversationID} WHERE client_msg_id = '${clientMsgID}';
+      `)
+}
+// export function MessageIfExistsBySeq(
+//     db: Database,
+//     conversationID: string,
+//     seq: number
+// ): QueryExecResult[] {
+//     return db.exec(
+//         `
+//       SELECT * FROM 'chat_logs_${conversationID}' WHERE seq = ${seq};
+//       `
+//     );
+// }
+// export function UpdateGroupMessageHasRead(
+//     db: Database,
+// )
+// export function getMultipleMessage(
+//     db: Database,
+// )
+// export function updateMsgSenderNickname(
+//     db: Database,
+// )
+// export function updateMsgSenderFaceURL(
+//     db: Database,
+// )
+export function updateMsgSenderFaceURLAndSenderNickname(
+  db,
+  conversationID,
+  sendID,
+  faceURL,
+  nickname
+) {
+  return db.exec(`
+      UPDATE chat_logs_${conversationID} SET sender_face_url = '${faceURL}', sender_nick_name = '${nickname}' WHERE send_id = '${sendID}';
+      `)
+}
+// export function getMsgSeqByClientMsgID(
+//     db: Database,
+// )
+// export function getMsgSeqListByGroupID(
+//     db: Database,
+// )
+// export function getMsgSeqListByPeerUserID(
+//     db: Database,
+// )
+// export function getMsgSeqListBySelfUserID(
+//     db: Database,
+// )
+// export function deleteAllMessage(
+//     db: Database,
+// )
+// export function getAllUnDeleteMessageSeqList(
+//     db: Database,
+// )
+export function deleteConversationAllMessages(db, conversationID) {
+  return db.exec(`
+      DELETE FROM chat_logs_${conversationID} WHERE 1=1;
+      `)
+}
+export function deleteConversationAllMessagesBySeq(db, conversationID, maxSeq) {
+  return db.exec(`
+      DELETE FROM chat_logs_${conversationID} WHERE seq <= ${maxSeq};
+      `)
+}
+export function markDeleteConversationAllMessages(db, conversationID) {
+  return db.exec(`
+      UPDATE chat_logs_${conversationID} SET status = 2 WHERE (1=1) and (conversation_id = '${conversationID}')';
+      `)
+}
+export function getUnreadMessage(db, conversationID, loginUserID) {
+  return db.exec(`
+      SELECT * FROM chat_logs_${conversationID} WHERE send_id != '${loginUserID}' and is_read = 0;
+      `)
+}
+export function markConversationMessageAsReadBySeqs(db, conversationID, seqList, loginUserID) {
+  _initLocalChatLogsTable(db, conversationID)
+  const values = seqList.map((v) => `${v}`).join(',')
+  return db.exec(`
+      UPDATE chat_logs_${conversationID} SET is_read = 1 WHERE seq IN (${values}) and send_id != '${loginUserID}';
+      `)
+}
+export function markConversationMessageAsRead(db, conversationID, clientMsgIDList, loginUserID) {
+  const values = clientMsgIDList.map((v) => `'${v}'`).join(',')
+  return db.exec(`
+      UPDATE chat_logs_${conversationID} SET is_read = 1 WHERE client_msg_id IN (${values}) and send_id != '${loginUserID}';
+      `)
+}
+export function updateColumnsMessage(db, conversationID, clientMsgID, localChatLogs) {
+  const sql = squel
+    .update()
+    .table(`chat_logs_${conversationID}`)
+    .setFields(localChatLogs)
+    .where(`client_msg_id = '${clientMsgID}'`)
+    .toString()
+  return db.exec(sql)
+}
+export function deleteConversationMsgs(db, conversationID, clientMsgIDList) {
+  const values = clientMsgIDList.map((v) => `'${v}'`).join(',')
+  return db.exec(`
+      DELETE FROM chat_logs_${conversationID} WHERE client_msg_id IN (${values});
+      `)
+}
+// export function updateSingleMessageHasRead(
+//     db: Database,
+// )
+// export function updateGroupMessageHasRead(
+//     db: Database,
+// )
+// export function updateMessageStatusBySourceID(
+//     db: Database,
+// )
+export function markConversationAllMessageAsRead(db, conversationID, loginUserID) {
+  return db.exec(`
+      UPDATE chat_logs_${conversationID} SET is_read = 1 WHERE is_read = 0 and send_id != '${loginUserID}';
+      `)
+}
+// export function deleteConversationMsgsBySeqs(
+//     db: Database,
+// )
+export function searchAllMessageByContentType(db, conversationID, contentType) {
+  return db.exec(`
+      SELECT * FROM chat_logs_${conversationID} WHERE content_type = ${contentType};
+      `)
+}
+export function updateMessageBySeqEx(db, conversationID, seq, localChatLogs) {
+  const sql = squel
+    .update()
+    .table(`chat_logs_${conversationID}`)
+    .setFields(localChatLogs)
+    .where(`seq = '${seq}'`)
+    .toString()
+  console.log('updateMessageBySeqEx---------------------------------------', seq)
+  return db.exec(sql)
+}
+
+export function updateMessageBySeqs(db, conversationID, seqs, localChatLogs) {
+  const values = seqs.map((v) => `${v}`).join(',')
+  const sql = squel
+    .update()
+    .table(`chat_logs_${conversationID}`)
+    .setFields(localChatLogs)
+    .where(`seq IN (${values})`)
+    .toString()
+    console.log('updateMessageBySeqs', values)
+  return db.exec(sql)
+}
+
+
+export function updateMessageByUserID(db, conversationID, userID, localChatLogs) {
+
+  const sql = squel
+    .update()
+    .table(`chat_logs_${conversationID}`)
+    .setFields(localChatLogs)
+    .where(`send_id  = '${userID}'`)
+    .toString()
+    console.log('updateMessageByUserID')
+  return db.exec(sql)
+}
\ No newline at end of file
diff --git a/src/utils/openIM/sqls/localConversationUnreadMessages.d.ts b/src/utils/openIM/sqls/localConversationUnreadMessages.d.ts
new file mode 100644
index 0000000..3667ad9
--- /dev/null
+++ b/src/utils/openIM/sqls/localConversationUnreadMessages.d.ts
@@ -0,0 +1,7 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type ClientLocalConversationUnreadMessage = {
+    [key: string]: any;
+};
+export declare function localConversationUnreadMessages(db: Database): QueryExecResult[];
+export declare function deleteConversationUnreadMessageList(db: Database, conversationID: string, sendTime: number): QueryExecResult[];
+export declare function batchInsertConversationUnreadMessageList(db: Database, messageList: ClientLocalConversationUnreadMessage[]): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localConversationUnreadMessages.js b/src/utils/openIM/sqls/localConversationUnreadMessages.js
new file mode 100644
index 0000000..6aeadc9
--- /dev/null
+++ b/src/utils/openIM/sqls/localConversationUnreadMessages.js
@@ -0,0 +1,28 @@
+import squel from 'squel';
+export function localConversationUnreadMessages(db) {
+    return db.exec(`
+      create table if not exists 'local_conversation_unread_messages' (
+            'conversation_id' char(128),
+            'client_msg_id' char(64),
+            'send_time' integer,
+            'ex' varchar(1024),
+            primary key (
+                'conversation_id',
+                'client_msg_id'
+            )
+        );
+    `);
+}
+export function deleteConversationUnreadMessageList(db, conversationID, sendTime) {
+    return db.exec(`
+        delete from local_conversation_unread_messages where conversation_id = '${conversationID}' and send_time <= ${sendTime};
+    `);
+}
+export function batchInsertConversationUnreadMessageList(db, messageList) {
+    const sql = squel
+        .insert()
+        .into('local_conversation_unread_messages')
+        .setFieldsRows(messageList)
+        .toString();
+    return db.exec(sql);
+}
diff --git a/src/utils/openIM/sqls/localConversations.d.ts b/src/utils/openIM/sqls/localConversations.d.ts
new file mode 100644
index 0000000..5d2c9aa
--- /dev/null
+++ b/src/utils/openIM/sqls/localConversations.d.ts
@@ -0,0 +1,35 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type ClientConversation = {
+    [key: string]: any;
+};
+export declare function localConversations(db: Database): QueryExecResult[];
+export declare function getConversationByUserID(db: Database, userID: string): QueryExecResult[];
+export declare function getAllConversationList(db: Database): QueryExecResult[];
+export declare function getAllConversationListToSync(db: Database): QueryExecResult[];
+export declare function getAllSingleConversationIDList(db: Database): QueryExecResult[];
+export declare function getAllConversationIDList(db: Database): QueryExecResult[];
+export declare function getHiddenConversationList(db: Database): QueryExecResult[];
+export declare function getConversationListSplit(db: Database, offset: number, count: number): QueryExecResult[];
+export declare function getConversation(db: Database, conversationID: string): QueryExecResult[];
+export declare function getMultipleConversation(db: Database, conversationIDList: string[]): QueryExecResult[];
+export declare function updateColumnsConversation(db: Database, conversationID: string, conversation: ClientConversation): QueryExecResult[];
+export declare function incrConversationUnreadCount(db: Database, conversationID: string): QueryExecResult[];
+export declare function decrConversationUnreadCount(db: Database, conversationID: string, count: number): QueryExecResult[];
+export declare function batchInsertConversationList(db: Database, conversationList: ClientConversation[]): QueryExecResult[];
+export declare function insertConversation(db: Database, localConversation: ClientConversation): QueryExecResult[];
+export declare function updateConversation(db: Database, localConversation: ClientConversation): QueryExecResult[];
+export declare function deleteConversation(db: Database, conversationID: string): QueryExecResult[];
+export declare function conversationIfExists(db: Database, conversationID: string): QueryExecResult[];
+export declare function resetConversation(db: Database, conversationID: string): QueryExecResult[];
+export declare function resetAllConversation(db: Database): QueryExecResult[];
+export declare function clearConversation(db: Database, conversationID: string): QueryExecResult[];
+export declare function clearConversationByTime(db: Database, conversationID: string): QueryExecResult[];
+export declare function clearAllConversation(db: Database): QueryExecResult[];
+export declare function setConversationDraft(db: Database, conversationID: string, draftText: string): QueryExecResult[];
+export declare function removeConversationDraft(db: Database, conversationID: string, draftText: string): QueryExecResult[];
+export declare function unPinConversation(db: Database, conversationID: string, isPinned: number): QueryExecResult[];
+export declare function getTotalUnreadMsgCount(db: Database): QueryExecResult[];
+export declare function setMultipleConversationRecvMsgOpt(db: Database, conversationIDList: string[], opt: number): QueryExecResult[];
+export declare function getAllConversations(db: Database): QueryExecResult[];
+export declare function batchUpdateConversationsByList(db: Database, conversations: ClientConversation[]): QueryExecResult[];
+export declare function batchDeleteConversations(db: Database, conversationIds: string[]): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localConversations.js b/src/utils/openIM/sqls/localConversations.js
new file mode 100644
index 0000000..dafb68e
--- /dev/null
+++ b/src/utils/openIM/sqls/localConversations.js
@@ -0,0 +1,271 @@
+import { update } from 'lodash'
+import squel from 'squel'
+export function localConversations(db) {
+  return db.exec(`
+      create table if not exists 'local_conversations' (
+            'conversation_id' char(128),
+            'conversation_type' integer,
+            'user_id' char(64),
+            'group_id' char(128),
+            'show_name' varchar(255),
+            'face_url' varchar(255),
+            'recv_msg_opt' integer,
+            'unread_count' integer,
+            'group_at_type' integer,
+            'latest_msg' varchar(1000),
+            'latest_msg_send_time' integer,
+            'draft_text' text,
+            'draft_text_time' integer,
+            'is_pinned' numeric,
+            'burn_duration' integer,
+            'is_private_chat' numeric,
+            'is_not_in_group' numeric,
+            'update_unread_count_time' integer,
+            'attached_info' varchar(1024),
+            'ex' varchar(1024),
+            'max_seq' integer,
+            'min_seq' integer,
+            'has_read_seq' integer,
+            'msg_destruct_time' integer default 604800,
+            'is_msg_destruct' numeric default false,
+            primary key ('conversation_id')
+        )
+    `)
+}
+export function getConversationByUserID(db, userID) {
+  return db.exec(`
+        select * from local_conversations where user_id = "${userID}" limit 1;
+    `)
+}
+export function getAllConversationList(db) {
+  return db.exec(`
+        select * from local_conversations where latest_msg_send_time > 0 order by case when is_pinned=1 then 0 else 1 end,max(latest_msg_send_time,draft_text_time) desc;
+    `)
+}
+export function getAllConversationListToSync(db) {
+  return db.exec(`
+        select * from local_conversations;
+    `)
+}
+export function getAllSingleConversationIDList(db) {
+  return db.exec(`
+        select conversation_id from local_conversations where conversation_type = 1;
+    `)
+}
+export function getAllConversationIDList(db) {
+  return db.exec(`
+        select conversation_id from local_conversations;
+    `)
+}
+export function getHiddenConversationList(db) {
+  return db.exec(`
+        select * from local_conversations where latest_msg_send_time = 0;
+    `)
+}
+export function getConversationListSplit(db, offset, count) {
+  return db.exec(`
+    SELECT *
+    FROM local_conversations
+    WHERE latest_msg_send_time > 0
+    ORDER BY case
+                 when is_pinned = 1 then 0
+                 else 1 end, max(latest_msg_send_time, draft_text_time) DESC
+    LIMIT ${count} OFFSET ${offset}
+    `)
+}
+export function getConversation(db, conversationID) {
+  return db.exec(`
+        select * from local_conversations where conversation_id = '${conversationID}' limit 1;
+    `)
+}
+export function getMultipleConversation(db, conversationIDList) {
+  const ids = conversationIDList.map((v) => `'${v}'`)
+  return db.exec(`
+        select * from local_conversations where conversation_id in (${ids.join(',')});
+    `)
+}
+export function updateColumnsConversation(db, conversationID, conversation) {
+  const sql = squel
+    .update()
+    .table('local_conversations')
+    .setFields(conversation)
+    .where(`conversation_id = '${conversationID}'`)
+    .toString()
+  return db.exec(sql)
+}
+export function incrConversationUnreadCount(db, conversationID) {
+  return db.exec(`
+        update local_conversations set 
+            unread_count=unread_count+1 
+        where conversation_id = '${conversationID}';
+    `)
+}
+export function decrConversationUnreadCount(db, conversationID, count) {
+  db.exec('begin')
+  db.exec(`
+        update local_conversations set 
+            unread_count=unread_count-${count} 
+        where conversation_id = '${conversationID}';
+    `)
+  const current = db.exec(
+    `select unread_count from local_conversations where conversation_id = '${conversationID}'`
+  )
+  if (Number(current[0].values[0]) < 0) {
+    db.exec(`
+          update local_conversations set 
+              unread_count=${0} 
+          where conversation_id = '${conversationID}';
+      `)
+  }
+  return db.exec('commit')
+}
+export function batchInsertConversationList(db, conversationList) {
+  const sql = squel.insert().into('local_conversations').setFieldsRows(conversationList).toString()
+  return db.exec(sql)
+}
+export function insertConversation(db, localConversation) {
+  const sql = squel.insert().into('local_conversations').setFields(localConversation).toString()
+  return db.exec(sql)
+}
+export function updateConversation(db, localConversation) {
+  const sql = squel
+    .update()
+    .table('local_conversations')
+    .setFields(localConversation)
+    .where(`conversation_id = '${localConversation.conversation_id}'`)
+    .toString()
+  return db.exec(sql)
+}
+export function deleteConversation(db, conversationID) {
+  return db.exec(`
+    DELETE
+      FROM local_conversations
+      WHERE conversation_id = "${conversationID}"
+  `)
+}
+export function batchDeleteConversations(db, conversationIds) {
+  const values = conversationIds.map((v) => `${v}`).join(',')
+  return db.exec(`
+    DELETE
+      FROM local_conversations
+      WHERE conversation_id in "${values}"
+  `)
+}
+export function conversationIfExists(db, conversationID) {
+  return db.exec(`
+  SELECT count(*)
+  FROM local_conversations
+  WHERE conversation_id = "${conversationID}"
+  `)
+}
+export function resetConversation(db, conversationID) {
+  return db.exec(`
+  UPDATE local_conversations
+    SET unread_count=0,
+    latest_msg="",
+    latest_msg_send_time=0,
+    draft_text="",
+    draft_text_time=0
+WHERE conversation_id = "${conversationID}"
+  `)
+}
+export function resetAllConversation(db) {
+  return db.exec(`
+  UPDATE local_conversations
+    SET unread_count=0,
+    latest_msg="",
+    latest_msg_send_time=0,
+    draft_text="",
+    draft_text_time=0
+  `)
+}
+export function clearConversation(db, conversationID) {
+  return db.exec(`
+  UPDATE local_conversations
+SET unread_count=0,
+    latest_msg="",
+    draft_text="",
+    draft_text_time=0
+WHERE conversation_id = "${conversationID}"
+  `)
+}
+export function clearConversationByTime(db, conversationID, endTime) {
+  return db.exec(`
+  UPDATE local_conversations
+SET unread_count=0,
+    latest_msg="",
+    draft_text="",
+    draft_text_time=0
+WHERE conversation_id = "${conversationID}"
+  AND latest_msg_send_time <= ${endTime}
+  `)
+}
+export function clearAllConversation(db) {
+  return db.exec(`
+  UPDATE local_conversations
+SET unread_count=0,
+    latest_msg="",
+    draft_text="",
+    draft_text_time=0
+  `)
+}
+export function setConversationDraft(db, conversationID, draftText) {
+  const nowDate = new Date().getTime()
+  return db.exec(`
+  update local_conversations
+    set draft_text='${draftText}',
+    draft_text_time=${nowDate},
+    latest_msg_send_time=case when latest_msg_send_time = 0 then ${nowDate} else latest_msg_send_time end
+    where conversation_id = "${conversationID}"
+  `)
+}
+export function removeConversationDraft(db, conversationID, draftText) {
+  return db.exec(`
+  update local_conversations
+    set draft_text="${draftText}",
+    draft_text_time=0
+    where conversation_id = "${conversationID}"
+  `)
+}
+export function unPinConversation(db, conversationID, isPinned) {
+  return db.exec(`
+  update local_conversations
+    set is_pinned=${isPinned},
+    draft_text_time=case when draft_text = "" then 0 else draft_text_time end
+    where conversation_id = "${conversationID}"
+  `)
+}
+export function getTotalUnreadMsgCount(db) {
+  return db.exec(`
+        select sum(unread_count) from local_conversations where recv_msg_opt < 2 and latest_msg_send_time > 0;
+    `)
+}
+export function setMultipleConversationRecvMsgOpt(db, conversationIDList, opt) {
+  const values = conversationIDList.map((v) => `${v}`).join(',')
+  return db.exec(`
+    UPDATE local_conversations
+    SET recv_msg_opt=${opt}
+    WHERE conversation_id IN (${values})
+    `)
+}
+export function getAllConversations(db) {
+  return db.exec(`
+    SELECT * FROM local_conversations
+    `)
+}
+
+export function batchUpdateConversationsByList (db, conversations) {
+  var result = {}
+  conversations.forEach(item => {
+    result = updateConversation(db, item);
+  });
+  return result
+};
+
+export function batchUpdateConversationsByMap (db, conversations) {
+  var result = {}
+  conversations.forEach(item => {
+    result = updateColumnsConversation(db, item.ConversationId, item.Data);
+  });
+  return result
+};
\ No newline at end of file
diff --git a/src/utils/openIM/sqls/localFriend.d.ts b/src/utils/openIM/sqls/localFriend.d.ts
new file mode 100644
index 0000000..0cbae79
--- /dev/null
+++ b/src/utils/openIM/sqls/localFriend.d.ts
@@ -0,0 +1,15 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalFriend = {
+    [key: string]: any;
+};
+export declare function localFriends(db: Database): QueryExecResult[];
+export declare function insertFriend(db: Database, localFriend: LocalFriend): QueryExecResult[];
+export declare function deleteFriend(db: Database, friendUserID: string, loginUserID: string): QueryExecResult[];
+export declare function updateFriend(db: Database, localFriend: LocalFriend): QueryExecResult[];
+export declare function getAllFriendList(db: Database, loginUser: string): QueryExecResult[];
+export declare function getPageFriendList(db: Database, offset: number, count: number, loginUser: string): QueryExecResult[];
+export declare function searchFriendList(db: Database, keyword: string, isSearchUserID: boolean, isSearchNickname: boolean, isSearchRemark: boolean): QueryExecResult[];
+export declare function getFriendInfoByFriendUserID(db: Database, friendUserID: string, loginUser: string): QueryExecResult[];
+export declare function getFriendInfoList(db: Database, friendUserIDList: string[]): QueryExecResult[];
+export declare function getFriendInfos(db: Database, friendUserIDList: string[]): QueryExecResult[];
+export declare function batchInsertFriends(db: Database, friends: LocalFriend[]): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localFriend.js b/src/utils/openIM/sqls/localFriend.js
new file mode 100644
index 0000000..84e3ac9
--- /dev/null
+++ b/src/utils/openIM/sqls/localFriend.js
@@ -0,0 +1,130 @@
+import squel from 'squel';
+export function localFriends(db) {
+    return db.exec(`
+      create table if not exists 'local_friends'
+      (
+          'owner_user_id'    varchar(64),
+          'friend_user_id'   varchar(64),
+          'remark'           varchar(255),
+          'create_time'      INTEGER,
+          'add_source'       INTEGER,
+          'operator_user_id' varchar(64),
+          'name'             varchar(255),
+          'face_url'         varchar(255),
+          'ex'               varchar(1024),
+          'attached_info'    varchar(1024),
+          primary key ('owner_user_id', 'friend_user_id')
+      )       
+      `);
+}
+export function insertFriend(db, localFriend) {
+    const sql = squel
+        .insert()
+        .into('local_friends')
+        .setFields(localFriend)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteFriend(db, friendUserID, loginUserID) {
+    return db.exec(`
+    DELETE FROM local_friends 
+          WHERE owner_user_id="${loginUserID}" 
+          and friend_user_id="${friendUserID}"
+        `);
+}
+export function batchDeleteFriends(db, loginUserID, friendUserIds) {
+  const values = friendUserIds.map(v => `'${v}'`).join(',');
+  return db.exec(`
+    DELETE FROM local_friends 
+    WHERE owner_user_id="${loginUserID}" 
+    and friend_user_id in "${values}"
+  `);
+}
+export function updateFriend(db, localFriend) {
+    if (localFriend.remark == undefined) {
+      localFriend.remark = ""
+    }
+    const sql = squel
+        .update()
+        .table('local_friends')
+        .setFields(localFriend)
+        .where(`owner_user_id = '${localFriend.owner_user_id}' and friend_user_id = '${localFriend.friend_user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
+
+export function getAllFriendList(db, loginUser) {
+    return db.exec(`
+      select *
+        from local_friends
+        where owner_user_id = "${loginUser}"
+        `);
+}
+export function getPageFriendList(db, offset, count, loginUser) {
+    return db.exec(`
+      select *
+        from local_friends
+        where owner_user_id = "${loginUser}"
+        order by name
+        limit ${count} offset ${offset}
+        `);
+}
+export function searchFriendList(db, keyword, isSearchUserID, isSearchNickname, isSearchRemark) {
+    let totalConditionStr = '';
+    const userIDCondition = `friend_user_id like "%${keyword}%"`;
+    const nicknameCondition = `name like "%${keyword}%"`;
+    const remarkCondition = `remark like "%${keyword}%"`;
+    if (isSearchUserID) {
+        totalConditionStr = userIDCondition;
+    }
+    if (isSearchNickname) {
+        totalConditionStr = totalConditionStr
+            ? totalConditionStr + ' or ' + nicknameCondition
+            : nicknameCondition;
+    }
+    if (isSearchRemark) {
+        totalConditionStr = totalConditionStr
+            ? totalConditionStr + ' or ' + remarkCondition
+            : remarkCondition;
+    }
+    return db.exec(`
+      select *
+        from local_friends
+        where ${totalConditionStr}
+        order by create_time desc
+        `);
+}
+export function getFriendInfoByFriendUserID(db, friendUserID, loginUser) {
+    return db.exec(`
+      select *
+        from local_friends
+        where owner_user_id = "${loginUser}"
+         and friend_user_id = "${friendUserID}"
+        limit 1
+        `);
+}
+export function getFriendInfoList(db, friendUserIDList) {
+    const values = friendUserIDList.map(v => `'${v}'`).join(',');
+    return db.exec(`
+      select *
+        from local_friends
+        where friend_user_id in (${values})
+        `);
+}
+
+export function getFriendInfos(db, ownerUserID, friendUserIds) {
+  const values = friendUserIds.map(v => `'${v}'`).join(',');
+  return db.exec(`
+    select * from local_friends
+      where owner_user_id = "${ownerUserID}" and friend_user_id in (${values})
+      `);
+}
+
+export function batchInsertFriends(db, localFriends) {
+  const sql = squel
+      .insert()
+      .into('local_friends')
+      .setFieldsRows(localFriends)
+      .toString();
+  return db.exec(sql);
+}
\ No newline at end of file
diff --git a/src/utils/openIM/sqls/localFriendRequest.d.ts b/src/utils/openIM/sqls/localFriendRequest.d.ts
new file mode 100644
index 0000000..38e4ff1
--- /dev/null
+++ b/src/utils/openIM/sqls/localFriendRequest.d.ts
@@ -0,0 +1,14 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalFriendRequest = {
+    [key: string]: any;
+};
+export declare function localFriendRequests(db: Database): QueryExecResult[];
+export declare function insertFriendRequest(db: Database, localFriendRequest: LocalFriendRequest): QueryExecResult[];
+export declare function deleteFriendRequestBothUserID(db: Database, fromUserID: string, toUserID: string): QueryExecResult[];
+export declare function updateFriendRequest(db: Database, localFriendRequest: LocalFriendRequest): QueryExecResult[];
+export declare function getRecvFriendApplication(db: Database, loginUserID: string): QueryExecResult[];
+export declare function getSendFriendApplication(db: Database, loginUserID: string): QueryExecResult[];
+export declare function getFriendApplicationByBothID(db: Database, fromUserID: string, toUserID: boolean): QueryExecResult[];
+export declare function getBothFriendReq(db: Database, fromUserID: string, toUserID: boolean): QueryExecResult[];
+export declare function batchInsertFriendRequests(db: Database, localFriendRequests: LocalFriendRequest[]): QueryExecResult[];
+export declare function batchDeleteFriendRequests(db: Database,  toUserID: string,fromUserID: string[]): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localFriendRequest.js b/src/utils/openIM/sqls/localFriendRequest.js
new file mode 100644
index 0000000..227b03f
--- /dev/null
+++ b/src/utils/openIM/sqls/localFriendRequest.js
@@ -0,0 +1,100 @@
+import squel from 'squel';
+export function localFriendRequests(db) {
+    return db.exec(`
+      create table if not exists 'local_friend_requests'
+      (
+          'from_user_id'    varchar(64),
+          'from_nickname'   varchar(255),
+          'from_face_url'   varchar(255),
+          'to_user_id'   varchar(64),
+          'to_nickname'   varchar(255),
+          'to_face_url'     varchar(255),
+          'handle_result'    INTEGER,
+          'req_msg'        varchar(255),
+          'create_time'   INTEGER,
+          'handler_user_id'  varchar(64),
+          'handle_msg'    varchar(255),
+          'handle_time'    INTEGER,
+          'ex'           varchar(1024),
+          'attached_info'   varchar(1024),
+          primary key ('from_user_id', 'to_user_id')
+      );  
+      `);
+}
+export function insertFriendRequest(db, localFriendRequest) {
+    const sql = squel
+        .insert()
+        .into('local_friend_requests')
+        .setFields(localFriendRequest)
+        .toString();
+    return db.exec(sql);
+}
+export function batchInsertFriendRequests(db, localFriendRequests) {
+  const sql = squel
+    .insert()
+    .into('local_friend_requests')
+    .setFieldsRows(localFriendRequests)
+    .toString();
+  return db.exec(sql);
+}
+export function deleteFriendRequestBothUserID(db, fromUserID, toUserID) {
+    return db.exec(`
+      delete
+      from local_friend_requests
+      where from_user_id = "${fromUserID}"
+        and to_user_id = "${toUserID}"
+      `);
+}
+export function batchDeleteFriendRequests(db, toUserID, fromUserIds ) {
+  const values = fromUserIds.map(v => `'${v}'`).join(',');
+  return db.exec(`
+      delete
+      from local_friend_requests
+      where from_user_id in "${values}"
+        and to_user_id = "${toUserID}"
+      `);
+}
+
+export function updateFriendRequest(db, localFriendRequest) {
+    const sql = squel
+        .update()
+        .table('local_friend_requests')
+        .setFields(localFriendRequest)
+        .where(`from_user_id = '${localFriendRequest.from_user_id}' and to_user_id = '${localFriendRequest.to_user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function getRecvFriendApplication(db, loginUserID) {
+    return db.exec(`
+      select *
+      from local_friend_requests
+      where to_user_id = "${loginUserID}"
+      order by create_time desc
+      `);
+}
+export function getSendFriendApplication(db, loginUserID) {
+    return db.exec(`
+      select * from local_friend_requests
+      where from_user_id = "${loginUserID}"
+      order by create_time desc
+      `);
+}
+export function getFriendApplicationByBothID(db, fromUserID, toUserID) {
+    return db.exec(`
+      select *
+        from local_friend_requests
+        where from_user_id = "${fromUserID}"
+        and to_user_id = "${toUserID}"
+        limit 1
+      `);
+}
+export function getBothFriendReq(db, fromUserID, toUserID) {
+    return db.exec(`
+      select *
+        from local_friend_requests
+        where (from_user_id = "${fromUserID}"
+        and to_user_id = "${toUserID}")
+        or (from_user_id = "${toUserID}"
+        and to_user_id = "${fromUserID}")
+      `);
+}
diff --git a/src/utils/openIM/sqls/localGroupMembers.d.ts b/src/utils/openIM/sqls/localGroupMembers.d.ts
new file mode 100644
index 0000000..5e6ffad
--- /dev/null
+++ b/src/utils/openIM/sqls/localGroupMembers.d.ts
@@ -0,0 +1,29 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalGroupMember = {
+    [key: string]: any;
+};
+export declare function localGroupMembers(db: Database): QueryExecResult[];
+export declare function getGroupMemberInfoByGroupIDUserID(db: Database, groupID: string, userID: string): QueryExecResult[];
+export declare function getAllGroupMemberList(db: Database): QueryExecResult[];
+export declare function getAllGroupMemberCount(db: Database): QueryExecResult[];
+export declare function getAllGroupMemberUserIDList(db: Database): QueryExecResult[];
+export declare function getGroupMemberCount(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupSomeMemberInfo(db: Database, groupID: string, userIDList: string[]): QueryExecResult[];
+export declare function getGroupAdminID(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupMemberListByGroupID(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupMemberListSplit(db: Database, groupID: string, filter: number, offset: number, count: number): QueryExecResult[];
+export declare function getGroupMemberOwnerAndAdmin(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupMemberOwner(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupMemberListSplitByJoinTimeFilter(db: Database, groupID: string, offset: number, count: number, joinTimeBegin: number | undefined, joinTimeEnd: number | undefined, userIDList: string[]): QueryExecResult[];
+export declare function getGroupOwnerAndAdminByGroupID(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupMemberUIDListByGroupID(db: Database, groupID: string): QueryExecResult[];
+export declare function insertGroupMember(db: Database, localGroupMember: LocalGroupMember): QueryExecResult[];
+export declare function batchInsertGroupMember(db: Database, localGroupMember: LocalGroupMember[]): QueryExecResult[];
+export declare function deleteGroupMember(db: Database, groupID: string, userID: string): QueryExecResult[];
+export declare function batchDeleteGroupMembers(db: Database, groupID: string, userIds: string[]): QueryExecResult[];
+export declare function deleteGroupAllMembers(db: Database, groupID: string): QueryExecResult[];
+export declare function updateGroupMember(db: Database, localGroupMember: LocalGroupMember): QueryExecResult[];
+export declare function updateGroupMemberField(db: Database, groupID: string, userID: string, localGroupMember: LocalGroupMember): QueryExecResult[];
+export declare function searchGroupMembers(db: Database, keyword: string, groupID: string, isSearchMemberNickname: boolean, isSearchUserID: boolean, offset: number, count: number): QueryExecResult[];
+export declare function getUserJoinedGroupIDs(db: Database, userID: string): QueryExecResult[];
+
diff --git a/src/utils/openIM/sqls/localGroupMembers.js b/src/utils/openIM/sqls/localGroupMembers.js
new file mode 100644
index 0000000..4fd8d61
--- /dev/null
+++ b/src/utils/openIM/sqls/localGroupMembers.js
@@ -0,0 +1,280 @@
+import squel from 'squel';
+import {updateConversation} from "./localConversations.js";
+export function localGroupMembers(db) {
+    return db.exec(`
+      create table if not exists 'local_group_members' (
+        'group_id' varchar(64),
+        'user_id' varchar(64),
+        'nickname' varchar(255),
+        'user_group_face_url' varchar(255),
+        'role_level' integer,
+        'join_time' integer,
+        'join_source' integer,
+        'inviter_user_id' text,
+        'mute_end_time' integer DEFAULT 0,
+        'operator_user_id' varchar(64),
+        'ex' varchar(1024),
+        'attached_info' varchar(1024),
+        PRIMARY KEY ('group_id', 'user_id')
+    ) 
+      `);
+}
+export function getGroupMemberInfoByGroupIDUserID(db, groupID, userID) {
+    return db.exec(`
+      select *
+      from local_group_members
+      WHERE group_id = "${groupID}" 
+      AND user_id = "${userID}" 
+      LIMIT 1
+      `);
+}
+export function getAllGroupMemberList(db) {
+    return db.exec(`
+    SELECT *
+    FROM local_group_members
+      `);
+}
+export function getAllGroupMemberCount(db) {
+  return db.exec(`
+    SELECT count(*)
+    FROM local_group_members
+      `);
+}
+export function getAllGroupMemberUserIDList(db) {
+    return db.exec(`
+      SELECT user_id
+      FROM local_group_members
+        `);
+}
+export function getGroupMemberCount(db, groupID) {
+    return db.exec(`
+    SELECT count(*) FROM local_group_members 
+    WHERE group_id = "${groupID}" 
+      `);
+}
+export function getGroupSomeMemberInfo(db, groupID, userIDList) {
+    const ids = userIDList.map(v => `'${v}'`);
+    return db.exec(`
+    select *
+    from local_group_members
+    where group_id = "${groupID}"
+    and user_id in (${ids.join(',')})
+      `);
+}
+export function getGroupAdminID(db, groupID) {
+    return db.exec(`
+    SELECT user_id FROM local_group_members 
+    WHERE group_id = "${groupID}" 
+    And role_level = 3
+      `);
+}
+export function getGroupMemberListByGroupID(db, groupID) {
+    return db.exec(`
+      SELECT * FROM local_group_members 
+      WHERE group_id = "${groupID}" 
+        `);
+}
+export function getGroupMemberListSplit(db, groupID, filter, offset, count) {
+    let condition = `
+    SELECT * FROM local_group_members 
+        WHERE group_id = "${groupID}" 
+        And role_level > 0 
+        ORDER BY role_level DESC,join_time ASC 
+    LIMIT ${count} OFFSET ${offset}
+    `;
+    if (filter === 1) {
+        condition = `
+        SELECT * FROM local_group_members 
+            WHERE group_id = "${groupID}" 
+            And role_level = 1 
+        ORDER BY join_time ASC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+    }
+    if (filter === 4) {
+        condition = `
+        SELECT * FROM local_group_members 
+            WHERE group_id = "${groupID}" 
+            And ( role_level = 1 OR role_level = 3 )  
+        ORDER BY role_level DESC,join_time ASC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+    }
+    return db.exec(condition);
+}
+export function getGroupMemberOwnerAndAdmin(db, groupID) {
+    return db.exec(`
+      SELECT * FROM local_group_members 
+      WHERE group_id = "${groupID}" 
+      And role_level > 1 
+      ORDER BY join_time DESC
+        `);
+}
+export function getGroupMemberOwner(db, groupID) {
+    return db.exec(`
+      SELECT * FROM local_group_members 
+      WHERE group_id = "${groupID}" 
+      And role_level = 2
+        `);
+}
+export function getGroupMemberListSplitByJoinTimeFilter(db, groupID, offset, count, joinTimeBegin = 0, joinTimeEnd = 100000000000, userIDList) {
+    let condition = '';
+    if (userIDList.length === 0) {
+        condition = `
+        SELECT * FROM local_group_members 
+            WHERE group_id = "${groupID}" 
+            And join_time  between ${joinTimeBegin} and ${joinTimeEnd}  
+            ORDER BY join_time DESC 
+            LIMIT ${count} OFFSET ${offset}
+        `;
+    }
+    else {
+        const ids = userIDList.map(v => `'${v}'`);
+        condition = `
+        SELECT * FROM local_group_members 
+        WHERE group_id = "${groupID}" 
+        And join_time  between ${joinTimeBegin} and ${joinTimeEnd}  
+        And user_id NOT IN (${ids.join(',')})
+        ORDER BY join_time DESC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+    }
+    return db.exec(condition);
+}
+export function getGroupOwnerAndAdminByGroupID(db, groupID) {
+    return db.exec(`
+      SELECT * FROM local_group_members 
+      WHERE group_id = "${groupID}" 
+      And role_level > 1
+        `);
+}
+export function getGroupMemberUIDListByGroupID(db, groupID) {
+    return db.exec(`
+      SELECT user_id FROM local_group_members 
+      WHERE group_id = "${groupID}" 
+        `);
+}
+export function insertGroupMember(db, localGroupMember) {
+    const sql = squel
+        .insert()
+        .into('local_group_members')
+        .setFields(localGroupMember)
+        .toString();
+    return db.exec(sql);
+}
+export function batchInsertGroupMember(db, localGroupMember) {
+    const sql = squel
+        .insert()
+        .into('local_group_members')
+        .setFieldsRows(localGroupMember)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteGroupMember(db, groupID, userID) {
+    return db.exec(`
+    DELETE FROM local_group_members 
+    WHERE group_id="${groupID}" 
+    and user_id="${userID}"
+      `);
+}
+
+export function batchDeleteGroupMembers(db, groupID, userIds) {
+  const ids = userIds.map(v => `'${v}'`);
+  return db.exec(`
+    DELETE FROM local_group_members 
+    WHERE group_id="${groupID}" 
+    and user_id in (${ids.join(',')}) `);
+}
+export function deleteGroupAllMembers(db, groupID) {
+    return db.exec(`
+      DELETE FROM local_group_members 
+      WHERE group_id="${groupID}"
+        `);
+}
+export function updateGroupMember(db, localGroupMember) {
+    const sql = squel
+        .update()
+        .table('local_group_members')
+        .setFields(localGroupMember)
+        .where(`group_id = '${localGroupMember.group_id}' and user_id = '${localGroupMember.user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
+
+export function updateGroupMemberField(db, groupID, userID, localGroupMember) {
+    const sql = squel
+        .update()
+        .table('local_group_members')
+        .setFields(localGroupMember)
+        .where(`group_id = '${groupID}' and user_id = '${userID}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function searchGroupMembers(db, keyword, groupID, isSearchMemberNickname, isSearchUserID, offset, count) {
+    let condition = '';
+    if (groupID) {
+        if (isSearchMemberNickname && isSearchUserID) {
+            condition = `
+            SELECT * FROM local_group_members 
+            WHERE ( user_id like "%${keyword}%" or nickname like "%${keyword}%"  ) 
+            and group_id IN ("${groupID}")  
+            ORDER BY join_time DESC 
+            LIMIT ${count} OFFSET ${offset}
+            `;
+        }
+        else if (!isSearchMemberNickname && !isSearchUserID) {
+            condition = `
+        SELECT * FROM local_group_members 
+        WHERE group_id IN ("${groupID}")  
+        ORDER BY join_time DESC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+        }
+        else {
+            const subCondition = isSearchMemberNickname
+                ? `nickname like "%${keyword}%"`
+                : `user_id like "%${keyword}%"`;
+            condition = `
+            SELECT * FROM local_group_members 
+            WHERE ${subCondition}
+            and group_id IN ("${groupID}")  
+            ORDER BY join_time DESC 
+            LIMIT ${count} OFFSET ${offset}
+            `;
+        }
+    }
+    else {
+        if (isSearchMemberNickname && isSearchMemberNickname) {
+            condition = `
+        SELECT * FROM local_group_members 
+        WHERE user_id like "%${keyword}%" or nickname like "%${keyword}%"  
+        ORDER BY join_time DESC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+        }
+        else if (!isSearchMemberNickname && !isSearchMemberNickname) {
+            condition = `
+        SELECT * FROM local_group_members 
+        ORDER BY join_time DESC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+        }
+        else {
+            const subCondition = isSearchMemberNickname
+                ? `nickname like "%${keyword}%"`
+                : `user_id like "%${keyword}%"`;
+            condition = `
+        SELECT * FROM local_group_members 
+        WHERE ${subCondition}  
+        ORDER BY join_time DESC 
+        LIMIT ${count} OFFSET ${offset}
+        `;
+        }
+    }
+    return db.exec(condition);
+}
+export function getUserJoinedGroupIDs(db, userID) {
+    return db.exec(`
+    select group_id from local_group_members where user_id = ${userID};
+    `);
+}
diff --git a/src/utils/openIM/sqls/localGroupRequests.d.ts b/src/utils/openIM/sqls/localGroupRequests.d.ts
new file mode 100644
index 0000000..b2c8194
--- /dev/null
+++ b/src/utils/openIM/sqls/localGroupRequests.d.ts
@@ -0,0 +1,9 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalGroupRequest = {
+    [key: string]: any;
+};
+export declare function localGroupRequests(db: Database): QueryExecResult[];
+export declare function insertGroupRequest(db: Database, localGroupRequest: LocalGroupRequest): QueryExecResult[];
+export declare function deleteGroupRequest(db: Database, groupID: string, userID: string): QueryExecResult[];
+export declare function updateGroupRequest(db: Database, localGroupRequest: LocalGroupRequest): QueryExecResult[];
+export declare function getSendGroupApplication(db: Database): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localGroupRequests.js b/src/utils/openIM/sqls/localGroupRequests.js
new file mode 100644
index 0000000..8f94372
--- /dev/null
+++ b/src/utils/openIM/sqls/localGroupRequests.js
@@ -0,0 +1,65 @@
+import squel from 'squel';
+export function localGroupRequests(db) {
+    return db.exec(`
+    create table if not exists "local_group_requests" (
+        "group_id" varchar(64),
+        "group_name" text,
+        "notification" varchar(255),
+        "introduction" varchar(255),
+        "face_url" varchar(255),
+        "create_time" integer,
+        "status" integer,
+        "creator_user_id" varchar(64),
+        "group_type" integer,
+        "owner_user_id" varchar(64),
+        "member_count" integer,
+        "user_id" varchar(64),
+        "nickname" varchar(255),
+        "user_face_url" varchar(255),
+        "gender" integer,
+        "handle_result" integer,
+        "req_msg" varchar(255),
+        "handle_msg" varchar(255),
+        "req_time" integer,
+        "handle_user_id" varchar(64),
+        "handle_time" integer,
+        "ex" varchar(1024),
+        "attached_info" varchar(1024),
+        "join_source" integer,
+        "inviter_user_id" text,
+        PRIMARY KEY ("group_id", "user_id")
+      );
+      `);
+}
+export function insertGroupRequest(db, localGroupRequest) {
+    const sql = squel
+        .insert()
+        .into('local_group_requests')
+        .setFields(localGroupRequest)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteGroupRequest(db, groupID, userID) {
+    return db.exec(`
+        delete
+        from local_group_requests
+        where group_id = "${groupID}"
+          and user_id = "${userID}"
+        `);
+}
+export function updateGroupRequest(db, localGroupRequest) {
+    const sql = squel
+        .update()
+        .table('local_group_requests')
+        .setFields(localGroupRequest)
+        .where(`group_id = '${localGroupRequest.group_id}' and user_id = '${localGroupRequest.user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function getSendGroupApplication(db) {
+    return db.exec(`
+        select *
+        from local_group_requests
+        order by create_time desc
+        `);
+}
diff --git a/src/utils/openIM/sqls/localGroups.d.ts b/src/utils/openIM/sqls/localGroups.d.ts
new file mode 100644
index 0000000..42c8ba2
--- /dev/null
+++ b/src/utils/openIM/sqls/localGroups.d.ts
@@ -0,0 +1,17 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalGroup = {
+    [key: string]: any;
+};
+export declare function localGroups(db: Database): QueryExecResult[];
+export declare function insertGroup(db: Database, localGroup: LocalGroup): QueryExecResult[];
+export declare function batchInsertGroups(db: Database, localGroup: LocalGroup[]): QueryExecResult[];
+export declare function deleteGroup(db: Database, groupID: string): QueryExecResult[];
+export declare function updateGroup(db: Database, groupID: string, localGroup: LocalGroup): QueryExecResult[];
+export declare function getJoinedGroupList(db: Database): QueryExecResult[];
+export declare function getGroupInfoByGroupID(db: Database, groupID: string): QueryExecResult[];
+export declare function getAllGroupInfoByGroupIDOrGroupName(db: Database, keyword: string, isSearchGroupID: boolean, isSearchGroupName: boolean): QueryExecResult[];
+export declare function subtractMemberCount(db: Database, groupID: string): QueryExecResult[];
+export declare function addMemberCount(db: Database, groupID: string): QueryExecResult[];
+export declare function getGroupMemberAllGroupIDs(db: Database): QueryExecResult[];
+export declare function getGroups(db: Database, groupIDs: string[]): QueryExecResult[];
+export declare function batchDeleteGroups(db: Database, groupIds: string[]): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localGroups.js b/src/utils/openIM/sqls/localGroups.js
new file mode 100644
index 0000000..c0a1936
--- /dev/null
+++ b/src/utils/openIM/sqls/localGroups.js
@@ -0,0 +1,115 @@
+import squel from 'squel';
+export function localGroups(db) {
+    return db.exec(`
+      create table if not exists 'local_groups'
+      (
+          'group_id'                 varchar(64) PRIMARY KEY,
+          'name'                  TEXT,
+          'notification'            varchar(255),
+          'introduction'            varchar(255),
+          'face_url'           varchar(255),
+          'create_time'             INTEGER,
+          'status'              INTEGER,
+          'creator_user_id'      varchar(64),
+          'group_type'              INTEGER,
+          'owner_user_id'          varchar(64),
+          'member_count'            INTEGER,
+          'ex'                   varchar(1024),
+          'attached_info'           varchar(1024),
+          'need_verification'     INTEGER,
+          'look_member_info'     INTEGER,
+          'apply_member_friend'      INTEGER,
+          'notification_update_time' INTEGER,
+          'notification_user_id'   TEXT
+      )  
+      `);
+}
+export function insertGroup(db, localGroup) {
+    const sql = squel
+        .insert()
+        .into('local_groups')
+        .setFields(localGroup)
+        .toString();
+    return db.exec(sql);
+}
+export function batchInsertGroups(db, localGroups) {
+  const sql = squel
+    .insert()
+    .into('local_groups')
+    .setFieldsRows(localGroups)
+    .toString();
+  return db.exec(sql);
+}
+export function deleteGroup(db, groupID) {
+    return db.exec(`
+    DELETE FROM local_groups 
+          WHERE group_id="${groupID}" 
+        `);
+}
+export function batchDeleteGroups(db, groupIds) {
+  const ids = groupIds.map(v => `'${v}'`);
+  return db.exec(`
+    DELETE FROM local_group_members 
+    WHERE group_id in "${ids}" `);
+}
+export function updateGroup(db, groupID, localGroup) {
+    const sql = squel
+        .update()
+        .table('local_groups')
+        .setFields(localGroup)
+        .where(`group_id = '${groupID}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function getJoinedGroupList(db) {
+    return db.exec(`
+    SELECT * FROM local_groups where status != 2
+    `);
+}
+export function getGroupInfoByGroupID(db, groupID) {
+    return db.exec(`
+    SELECT *
+      FROM local_groups
+      WHERE group_id = "${groupID}"
+    `);
+}
+export function getAllGroupInfoByGroupIDOrGroupName(db, keyword, isSearchGroupID, isSearchGroupName) {
+    let totalConditionStr = '';
+    const groupIDCondition = `group_id like "%${keyword}%"`;
+    const groupNameCondition = `name like "%${keyword}%"`;
+    if (isSearchGroupID) {
+        totalConditionStr = groupIDCondition;
+    }
+    if (isSearchGroupName) {
+        totalConditionStr = groupNameCondition;
+    }
+    if (isSearchGroupName && isSearchGroupID) {
+        totalConditionStr = groupIDCondition + ' or ' + groupNameCondition;
+    }
+    return db.exec(`
+    select *
+    from local_groups
+    where ${totalConditionStr}
+    order by create_time desc
+    `);
+}
+export function subtractMemberCount(db, groupID) {
+    return db.exec(`  
+    update local_groups set member_count = member_count-1 where group_id = '${groupID}'
+    `);
+}
+export function addMemberCount(db, groupID) {
+    return db.exec(`  
+    update local_groups set member_count = member_count+1 where group_id = '${groupID}'   
+    `);
+}
+export function getGroupMemberAllGroupIDs(db) {
+    return db.exec(`
+    select distinct group_id from local_group_members
+    `);
+}
+export function getGroups(db, groupIDs) {
+    return db.exec(`
+    select * from local_groups where group_id in (${groupIDs.join(',')});
+    `);
+}
diff --git a/src/utils/openIM/sqls/localNotification.d.ts b/src/utils/openIM/sqls/localNotification.d.ts
new file mode 100644
index 0000000..0444cbf
--- /dev/null
+++ b/src/utils/openIM/sqls/localNotification.d.ts
@@ -0,0 +1,8 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalNotification = {
+    [key: string]: any;
+};
+export declare function localNotification(db: Database): QueryExecResult[];
+export declare function insertNotificationSeq(db: Database, conversationID: string, seq: number): QueryExecResult[];
+export declare function setNotificationSeq(db: Database, conversationID: string, seq: number): QueryExecResult[];
+export declare function getNotificationAllSeqs(db: Database): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localNotification.js b/src/utils/openIM/sqls/localNotification.js
new file mode 100644
index 0000000..865ad9d
--- /dev/null
+++ b/src/utils/openIM/sqls/localNotification.js
@@ -0,0 +1,19 @@
+export function localNotification(db) {
+    return db.exec(`
+    create table if not exists 'local_notification_seqs'
+        (
+            'conversation_id' char(128),
+            'seq'             integer,
+            PRIMARY KEY ('conversation_id')
+        )
+      `);
+}
+export function insertNotificationSeq(db, conversationID, seq) {
+    return db.exec(`INSERT INTO local_notification_seqs (conversation_id, seq) VALUES ("${conversationID}", ${seq});`);
+}
+export function setNotificationSeq(db, conversationID, seq) {
+    return db.exec(`UPDATE local_notification_seqs set seq = ${seq} where conversation_id = "${conversationID}"`);
+}
+export function getNotificationAllSeqs(db) {
+    return db.exec('SELECT * from local_notification_seqs where 1 = 1;');
+}
diff --git a/src/utils/openIM/sqls/localStranger.d.ts b/src/utils/openIM/sqls/localStranger.d.ts
new file mode 100644
index 0000000..2582658
--- /dev/null
+++ b/src/utils/openIM/sqls/localStranger.d.ts
@@ -0,0 +1,8 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type LocalStranger = {
+    [key: string]: any;
+};
+export declare function localStranger(db: Database): QueryExecResult[];
+export declare function getStrangerInfo(db: Database, userIDList: string[]): QueryExecResult[];
+export declare function insertStrangerInfo(db: Database, localStranger: LocalStranger): QueryExecResult[];
+export declare function updateStrangerInfo(db: Database, localStranger: LocalStranger): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localStranger.js b/src/utils/openIM/sqls/localStranger.js
new file mode 100644
index 0000000..224a321
--- /dev/null
+++ b/src/utils/openIM/sqls/localStranger.js
@@ -0,0 +1,42 @@
+import squel from 'squel';
+export function localStranger(db) {
+    return db.exec(`
+    create table if not exists 'local_stranger'
+        (
+            'user_id'             varchar(64),
+            'name'                varchar(255),
+            'face_url'            varchar(255),
+            'create_time'         integer,
+            'app_manger_level'    integer,
+            'ex'                  varchar(1024),
+            'attached_info'       varchar(1024),
+            'global_recv_msg_opt' integer,
+            PRIMARY KEY ('user_id')
+        )
+      `);
+}
+export function getStrangerInfo(db, userIDList) {
+    const ids = userIDList.map(v => `'${v}'`);
+    return db.exec(`
+        select *
+        from local_stranger
+        WHERE user_id = (${ids.join(',')})
+        `);
+}
+export function insertStrangerInfo(db, localStranger) {
+    const sql = squel
+        .insert()
+        .into('local_stranger')
+        .setFields(localStranger)
+        .toString();
+    return db.exec(sql);
+}
+export function updateStrangerInfo(db, localStranger) {
+    const sql = squel
+        .update()
+        .table('local_stranger')
+        .setFields(localStranger)
+        .where(`user_id = '${localStranger.user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
diff --git a/src/utils/openIM/sqls/localSuperGroups.d.ts b/src/utils/openIM/sqls/localSuperGroups.d.ts
new file mode 100644
index 0000000..4e98df1
--- /dev/null
+++ b/src/utils/openIM/sqls/localSuperGroups.d.ts
@@ -0,0 +1,10 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type ClientGroup = {
+    [key: string]: unknown;
+};
+export declare function localSuperGroups(db: Database): QueryExecResult[];
+export declare function getJoinedSuperGroupList(db: Database): QueryExecResult[];
+export declare function insertSuperGroup(db: Database, group: ClientGroup): QueryExecResult[];
+export declare function updateSuperGroup(db: Database, groupID: string, group: ClientGroup): QueryExecResult[];
+export declare function deleteSuperGroup(db: Database, groupID: string): QueryExecResult[];
+export declare function getSuperGroupInfoByGroupID(db: Database, groupID: string): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localSuperGroups.js b/src/utils/openIM/sqls/localSuperGroups.js
new file mode 100644
index 0000000..1f40dd2
--- /dev/null
+++ b/src/utils/openIM/sqls/localSuperGroups.js
@@ -0,0 +1,58 @@
+import squel from 'squel';
+export function localSuperGroups(db) {
+    return db.exec(`
+      create table if not exists 'local_super_groups' (
+            'group_id' varchar(64),
+            'name' text,
+            'notification' varchar(255),
+            'introduction' varchar(255),
+            'face_url' varchar(255),
+            'create_time' integer,
+            'status' integer,
+            'creator_user_id' varchar(64),
+            'group_type' integer,
+            'owner_user_id' varchar(64),
+            'member_count' integer,
+            'ex' varchar(1024),
+            'attached_info' varchar(1024),
+            'need_verification' integer,
+            'look_member_info' integer,
+            'apply_member_friend' integer,
+            'notification_update_time' integer,
+            'notification_user_id' text,
+        primary key ('group_id')
+     )
+    `);
+}
+export function getJoinedSuperGroupList(db) {
+    return db.exec(`
+        select * from local_super_groups;
+    `);
+}
+export function insertSuperGroup(db, group) {
+    const sql = squel
+        .insert()
+        .into('local_super_groups')
+        .setFields(group)
+        .toString();
+    return db.exec(sql);
+}
+export function updateSuperGroup(db, groupID, group) {
+    const sql = squel
+        .update()
+        .table('local_super_groups')
+        .setFields(group)
+        .where(`group_id = '${groupID}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteSuperGroup(db, groupID) {
+    return db.exec(`
+        delete from local_super_groups where group_id = '${groupID}';
+    `);
+}
+export function getSuperGroupInfoByGroupID(db, groupID) {
+    return db.exec(`
+        select * from local_super_groups where group_id = '${groupID}'  LIMIT 1;
+    `);
+}
diff --git a/src/utils/openIM/sqls/localUpload.d.ts b/src/utils/openIM/sqls/localUpload.d.ts
new file mode 100644
index 0000000..f7573b2
--- /dev/null
+++ b/src/utils/openIM/sqls/localUpload.d.ts
@@ -0,0 +1,10 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type ClientUpload = {
+    [key: string]: unknown;
+};
+export declare function localUploads(db: Database): QueryExecResult[];
+export declare function getUpload(db: Database, partHash: string): QueryExecResult[];
+export declare function insertUpload(db: Database, upload: ClientUpload): QueryExecResult[];
+export declare function updateUpload(db: Database, upload: ClientUpload): QueryExecResult[];
+export declare function deleteUpload(db: Database, partHash: string): QueryExecResult[];
+export declare function deleteExpireUpload(db: Database): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localUpload.js b/src/utils/openIM/sqls/localUpload.js
new file mode 100644
index 0000000..17325ee
--- /dev/null
+++ b/src/utils/openIM/sqls/localUpload.js
@@ -0,0 +1,47 @@
+import squel from 'squel';
+export function localUploads(db) {
+    return db.exec(`
+        create table if not exists 'local_uploads' (
+            'part_hash'   text,
+            'upload_id'   varchar(1000),
+            'upload_info'        varchar(2000),
+            'expire_time' integer,
+            'create_time' integer,
+            PRIMARY KEY ('part_hash')
+          )
+      `);
+}
+export function getUpload(db, partHash) {
+    return db.exec(`
+        select * from local_uploads where part_hash = '${partHash}'  limit 1;
+    `);
+}
+export function insertUpload(db, upload) {
+    const sql = squel.insert().into('local_uploads').setFields(upload).toString();
+    return db.exec(sql);
+}
+export function updateUpload(db, upload) {
+    const sql = squel
+        .update()
+        .table('local_uploads')
+        .setFields(upload)
+        .where(`part_hash = '${upload.part_hash}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteUpload(db, partHash) {
+    const sql = squel
+        .delete()
+        .from('local_uploads')
+        .where(`part_hash = '${partHash}'`)
+        .toString();
+    return db.exec(sql);
+}
+export function deleteExpireUpload(db) {
+    const sql = squel
+        .delete()
+        .from('local_uploads')
+        .where(`expire_time <= ${Date.now()}`)
+        .toString();
+    return db.exec(sql);
+}
diff --git a/src/utils/openIM/sqls/localUsers.d.ts b/src/utils/openIM/sqls/localUsers.d.ts
new file mode 100644
index 0000000..b134295
--- /dev/null
+++ b/src/utils/openIM/sqls/localUsers.d.ts
@@ -0,0 +1,8 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type ClientUser = {
+    [key: string]: unknown;
+};
+export declare function localUsers(db: Database): QueryExecResult[];
+export declare function getLoginUser(db: Database, userID: string): QueryExecResult[];
+export declare function insertLoginUser(db: Database, user: ClientUser): QueryExecResult[];
+export declare function updateLoginUser(db: Database, user: ClientUser): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/localUsers.js b/src/utils/openIM/sqls/localUsers.js
new file mode 100644
index 0000000..1d193c0
--- /dev/null
+++ b/src/utils/openIM/sqls/localUsers.js
@@ -0,0 +1,34 @@
+import squel from 'squel';
+export function localUsers(db) {
+    return db.exec(`
+      create table if not exists 'local_users' (
+            'user_id' varchar(64),
+            'name' varchar(255),
+            'face_url' varchar(255),
+            'create_time' integer,
+            'app_manger_level' integer,
+            'ex' varchar(1024),
+            'attached_info' varchar(1024),
+            'global_recv_msg_opt' integer,
+             primary key ('user_id')
+        )
+    `);
+}
+export function getLoginUser(db, userID) {
+    return db.exec(`
+        select *, name as nickname from local_users where user_id = '${userID}'  limit 1;
+    `);
+}
+export function insertLoginUser(db, user) {
+    const sql = squel.insert().into('local_users').setFields(user).toString();
+    return db.exec(sql);
+}
+export function updateLoginUser(db, user) {
+    const sql = squel
+        .update()
+        .table('local_users')
+        .setFields(user)
+        .where(`user_id = '${user.user_id}'`)
+        .toString();
+    return db.exec(sql);
+}
diff --git a/src/utils/openIM/sqls/tempCacheLocalChatLogs.d.ts b/src/utils/openIM/sqls/tempCacheLocalChatLogs.d.ts
new file mode 100644
index 0000000..cc30a5c
--- /dev/null
+++ b/src/utils/openIM/sqls/tempCacheLocalChatLogs.d.ts
@@ -0,0 +1,6 @@
+import { Database, QueryExecResult } from '@jlongster/sql.js';
+export declare type TempCacheClientMessage = {
+    [key: string]: any;
+};
+export declare function tempCacheLocalChatLogs(db: Database): QueryExecResult[];
+export declare function batchInsertTempCacheMessageList(db: Database, messageList: TempCacheClientMessage[]): QueryExecResult[];
diff --git a/src/utils/openIM/sqls/tempCacheLocalChatLogs.js b/src/utils/openIM/sqls/tempCacheLocalChatLogs.js
new file mode 100644
index 0000000..81c7782
--- /dev/null
+++ b/src/utils/openIM/sqls/tempCacheLocalChatLogs.js
@@ -0,0 +1,34 @@
+import squel from 'squel';
+export function tempCacheLocalChatLogs(db) {
+    return db.exec(`
+    create table if not exists 'temp_cache_local_chat_logs' (
+        'client_msg_id' char(64),
+        'server_msg_id' char(64),
+        'send_id' char(64),
+        'recv_id' char(64),
+        'sender_platform_id' integer,
+        'sender_nick_name' varchar(255),
+        'sender_face_url' varchar(255),
+        'session_type' integer,
+        'msg_from' integer,
+        'content_type' integer,
+        'content' varchar(1000),
+        'is_read' numeric,
+        'status' integer,
+        'seq' integer DEFAULT 0,
+        'send_time' integer,
+        'create_time' integer,
+        'attached_info' varchar(1024),
+        'ex' varchar(1024),
+        PRIMARY KEY ('client_msg_id')
+      );
+      `);
+}
+export function batchInsertTempCacheMessageList(db, messageList) {
+    const sql = squel
+        .insert()
+        .into('temp_cache_local_chat_logs')
+        .setFieldsRows(messageList)
+        .toString();
+    return db.exec(sql);
+}
diff --git a/src/utils/openIM/types/entity.d.ts b/src/utils/openIM/types/entity.d.ts
new file mode 100644
index 0000000..00fa8e1
--- /dev/null
+++ b/src/utils/openIM/types/entity.d.ts
@@ -0,0 +1,441 @@
+import { CbEvents } from '../constant';
+import { GroupType, SessionType, MessageType, Platform, MessageStatus, GroupStatus, GroupVerificationType, AllowType, GroupJoinSource, GroupMemberRole, MessageReceiveOptType, GroupAtType, LogLevel, ApplicationHandleResult, Relationship, OnlineState } from './enum';
+export declare type WSEvent<T = unknown> = {
+    event: CbEvents;
+    data: T;
+    errCode: number;
+    errMsg: string;
+    operationID: string;
+};
+export declare type WsResponse<T = string> = {
+    event: string;
+    errCode: number;
+    errMsg: string;
+    data: T;
+    operationID: string;
+};
+export declare type IMConfig = {
+    platformID: Platform;
+    apiAddr: string;
+    wsAddr: string;
+    dataDir: string;
+    logLevel: LogLevel;
+    isLogStandardOutput: boolean;
+    logFilePath: string;
+    isExternalExtensions: boolean;
+};
+export declare type MessageEntity = {
+    type: string;
+    offset: number;
+    length: number;
+    url?: string;
+    info?: string;
+};
+export declare type PicBaseInfo = {
+    uuid: string;
+    type: string;
+    size: number;
+    width: number;
+    height: number;
+    url: string;
+};
+export declare type AtUsersInfoItem = {
+    atUserID: string;
+    groupNickname: string;
+};
+export declare type GroupInitInfo = {
+    groupID?: string;
+    groupType: GroupType;
+    groupName: string;
+    introduction?: string;
+    notification?: string;
+    faceURL?: string;
+    ex?: string;
+};
+export declare type GroupApplicationItem = {
+    createTime: number;
+    creatorUserID: string;
+    ex: string;
+    groupFaceURL: string;
+    groupID: string;
+    groupName: string;
+    groupType: GroupType;
+    handleResult: ApplicationHandleResult;
+    handleUserID: string;
+    handledMsg: string;
+    handledTime: number;
+    introduction: string;
+    memberCount: number;
+    nickname: string;
+    notification: string;
+    ownerUserID: string;
+    reqMsg: string;
+    reqTime: number;
+    joinSource: GroupJoinSource;
+    status: GroupStatus;
+    userFaceURL: string;
+    userID: string;
+};
+export declare type FriendApplicationItem = {
+    createTime: number;
+    ex: string;
+    fromFaceURL: string;
+    fromNickname: string;
+    fromUserID: string;
+    handleMsg: string;
+    handleResult: ApplicationHandleResult;
+    handleTime: number;
+    handlerUserID: string;
+    reqMsg: string;
+    toFaceURL: string;
+    toNickname: string;
+    toUserID: string;
+};
+export declare type FullUserItem = {
+    blackInfo: BlackUserItem | null;
+    friendInfo: FriendUserItem | null;
+    publicInfo: PublicUserItem | null;
+};
+export declare type FullUserItemWithCache = {
+    blackInfo: BlackUserItem | null;
+    friendInfo: FriendUserItem | null;
+    publicInfo: PublicUserItem | null;
+    groupMemberInfo: GroupMemberItem | null;
+};
+export declare type PublicUserItem = {
+    nickname: string;
+    userID: string;
+    faceURL: string;
+    ex: string;
+};
+export declare type SelfUserInfo = {
+    createTime: number;
+    ex: string;
+    faceURL: string;
+    nickname: string;
+    userID: string;
+    globalRecvMsgOpt: MessageReceiveOptType;
+};
+export declare type PartialUserInfo = {
+    userID: string;
+} & Partial<Omit<SelfUserInfo, 'userID'>>;
+export declare type FriendUserItem = {
+    addSource: number;
+    createTime: number;
+    ex: string;
+    faceURL: string;
+    userID: string;
+    nickname: string;
+    operatorUserID: string;
+    ownerUserID: string;
+    remark: string;
+    attachedInfo: string;
+};
+export declare type SearchedFriendsInfo = FriendUserItem & {
+    relationship: Relationship;
+};
+export declare type FriendshipInfo = {
+    result: number;
+    userID: string;
+};
+export declare type BlackUserItem = {
+    addSource: number;
+    userID: string;
+    createTime: number;
+    ex: string;
+    faceURL: string;
+    nickname: string;
+    operatorUserID: string;
+    ownerUserID: string;
+};
+export declare type GroupItem = {
+    groupID: string;
+    groupName: string;
+    notification: string;
+    notificationUserID: string;
+    notificationUpdateTime: number;
+    introduction: string;
+    faceURL: string;
+    ownerUserID: string;
+    createTime: number;
+    memberCount: number;
+    status: GroupStatus;
+    creatorUserID: string;
+    groupType: GroupType;
+    needVerification: GroupVerificationType;
+    ex: string;
+    applyMemberFriend: AllowType;
+    lookMemberInfo: AllowType;
+};
+export declare type GroupMemberItem = {
+    groupID: string;
+    userID: string;
+    nickname: string;
+    faceURL: string;
+    roleLevel: GroupMemberRole;
+    muteEndTime: number;
+    joinTime: number;
+    joinSource: GroupJoinSource;
+    inviterUserID: string;
+    operatorUserID: string;
+    ex: string;
+};
+export declare type ConversationItem = {
+    conversationID: string;
+    conversationType: SessionType;
+    userID: string;
+    groupID: string;
+    showName: string;
+    faceURL: string;
+    recvMsgOpt: MessageReceiveOptType;
+    unreadCount: number;
+    groupAtType: GroupAtType;
+    latestMsg: string;
+    latestMsgSendTime: number;
+    draftText: string;
+    draftTextTime: number;
+    burnDuration: number;
+    msgDestructTime: number;
+    isPinned: boolean;
+    isNotInGroup: boolean;
+    isPrivateChat: boolean;
+    isMsgDestruct: boolean;
+    attachedInfo: string;
+    ex: string;
+    localEx: localEx;
+};
+export declare type MessageItem = {
+    clientMsgID: string;
+    serverMsgID: string;
+    createTime: number;
+    sendTime: number;
+    sessionType: SessionType;
+    sendID: string;
+    recvID: string;
+    msgFrom: number;
+    contentType: MessageType;
+    senderPlatformID: Platform;
+    senderNickname: string;
+    senderFaceUrl: string;
+    groupID: string;
+    content: string;
+    seq: number;
+    isRead: boolean;
+    status: MessageStatus;
+    isReact: boolean;
+    isExternalExtensions: boolean;
+    offlinePush: OfflinePush;
+    attachedInfo: string;
+    ex: string;
+    localEx: localEx;
+    textElem: TextElem;
+    cardElem: CardElem;
+    pictureElem: PictureElem;
+    soundElem: SoundElem;
+    videoElem: VideoElem;
+    fileElem: FileElem;
+    mergeElem: MergeElem;
+    atTextElem: AtTextElem;
+    faceElem: FaceElem;
+    locationElem: LocationElem;
+    customElem: CustomElem;
+    quoteElem: QuoteElem;
+    notificationElem: NotificationElem;
+    advancedTextElem: AdvancedTextElem;
+    typingElem: TypingElem;
+    attachedInfoElem: AttachedInfoElem;
+};
+export declare type TextElem = {
+    content: string;
+};
+export declare type CardElem = {
+    userID: string;
+    nickname: string;
+    faceURL: string;
+    ex: string;
+};
+export declare type AtTextElem = {
+    text: string;
+    atUserList: string[];
+    atUsersInfo?: AtUsersInfoItem[];
+    quoteMessage?: MessageItem;
+    isAtSelf?: boolean;
+};
+export declare type NotificationElem = {
+    detail: string;
+};
+export declare type AdvancedTextElem = {
+    text: string;
+    messageEntityList: MessageEntity[];
+};
+export declare type TypingElem = {
+    msgTips: string;
+};
+export declare type CustomElem = {
+    data: string;
+    description: string;
+    extension: string;
+};
+export declare type localEx = {
+    status: number;
+};
+export declare type FileElem = {
+    filePath: string;
+    uuid: string;
+    sourceUrl: string;
+    fileName: string;
+    fileSize: number;
+};
+export declare type FaceElem = {
+    index: number;
+    data: string;
+};
+export declare type LocationElem = {
+    description: string;
+    longitude: number;
+    latitude: number;
+};
+export declare type MergeElem = {
+    title: string;
+    abstractList: string[];
+    multiMessage: MessageItem[];
+    messageEntityList: MessageEntity[];
+};
+export declare type OfflinePush = {
+    title: string;
+    desc: string;
+    ex: string;
+    iOSPushSound: string;
+    iOSBadgeCount: boolean;
+};
+export declare type PictureElem = {
+    sourcePath: string;
+    sourcePicture: Picture;
+    bigPicture: Picture;
+    snapshotPicture: Picture;
+};
+export declare type AttachedInfoElem = {
+    groupHasReadInfo: GroupHasReadInfo;
+    isPrivateChat: boolean;
+    isEncryption: boolean;
+    inEncryptStatus: boolean;
+    burnDuration: number;
+    hasReadTime: number;
+    notSenderNotificationPush: boolean;
+    messageEntityList: MessageEntity[];
+    uploadProgress: UploadProgress;
+};
+export declare type UploadProgress = {
+    total: number;
+    save: number;
+    current: number;
+};
+export declare type GroupHasReadInfo = {
+    hasReadCount: number;
+    hasReadUserIDList: string[];
+    groupMemberCount: number;
+};
+export declare type Picture = {
+    uuid: string;
+    type: string;
+    size: number;
+    width: number;
+    height: number;
+    url: string;
+};
+export declare type QuoteElem = {
+    text: string;
+    quoteMessage: MessageItem;
+};
+export declare type SoundElem = {
+    uuid: string;
+    soundPath: string;
+    sourceUrl: string;
+    dataSize: number;
+    duration: number;
+};
+export declare type VideoElem = {
+    videoPath: string;
+    videoUUID: string;
+    videoUrl: string;
+    videoType: string;
+    videoSize: number;
+    duration: number;
+    snapshotPath: string;
+    snapshotUUID: string;
+    snapshotSize: number;
+    snapshotUrl: string;
+    snapshotWidth: number;
+    snapshotHeight: number;
+};
+export declare type AdvancedRevokeContent = {
+    clientMsgID: string;
+    revokeTime: number;
+    revokerID: string;
+    revokerNickname: string;
+    revokerRole: number;
+    seq: number;
+    sessionType: SessionType;
+    sourceMessageSendID: string;
+    sourceMessageSendTime: number;
+    sourceMessageSenderNickname: string;
+};
+export declare type RevokedInfo = {
+    revokerID: string;
+    revokerRole: number;
+    clientMsgID: string;
+    revokerNickname: string;
+    revokeTime: number;
+    sourceMessageSendTime: number;
+    sourceMessageSendID: string;
+    sourceMessageSenderNickname: string;
+    sessionType: number;
+    seq: number;
+    ex: string;
+};
+export declare type ReceiptInfo = {
+    userID: string;
+    groupID: string;
+    msgIDList: string[];
+    readTime: number;
+    msgFrom: number;
+    contentType: MessageType;
+    sessionType: SessionType;
+};
+export declare type SearchMessageResult = {
+    totalCount: number;
+    searchResultItems: SearchMessageResultItem[];
+};
+export declare type SearchMessageResultItem = {
+    conversationID: string;
+    messageCount: number;
+    conversationType: SessionType;
+    showName: string;
+    faceURL: string;
+    messageList: MessageItem[];
+};
+export declare type AdvancedGetMessageResult = {
+    isEnd: boolean;
+    lastMinSeq: number;
+    errCode: number;
+    errMsg: string;
+    messageList: MessageItem[];
+};
+export declare type RtcInvite = {
+    inviterUserID: string;
+    inviteeUserIDList: string[];
+    customData?: string;
+    groupID: string;
+    roomID: string;
+    timeout: number;
+    mediaType: string;
+    sessionType: number;
+    platformID: number;
+    initiateTime?: number;
+    busyLineUserIDList?: string[];
+};
+export declare type UserOnlineState = {
+    platformIDs?: Platform[];
+    status: OnlineState;
+    userID: string;
+};
diff --git a/src/utils/openIM/types/entity.js b/src/utils/openIM/types/entity.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/src/utils/openIM/types/entity.js
@@ -0,0 +1 @@
+export {};
diff --git a/src/utils/openIM/types/enum.d.ts b/src/utils/openIM/types/enum.d.ts
new file mode 100644
index 0000000..ae891b0
--- /dev/null
+++ b/src/utils/openIM/types/enum.d.ts
@@ -0,0 +1,133 @@
+export declare enum MessageReceiveOptType {
+    Nomal = 0,
+    NotReceive = 1,
+    NotNotify = 2
+}
+export declare enum AllowType {
+    Allowed = 0,
+    NotAllowed = 1
+}
+export declare enum GroupType {
+    WorkingGroup = 2
+}
+export declare enum GroupJoinSource {
+    Invitation = 2,
+    Search = 3,
+    QrCode = 4
+}
+export declare enum GroupMemberRole {
+    Nomal = 20,
+    Admin = 60,
+    Owner = 100
+}
+export declare enum GroupVerificationType {
+    ApplyNeedInviteNot = 0,
+    AllNeed = 1,
+    AllNot = 2
+}
+export declare enum MessageStatus {
+    Sending = 1,
+    Succeed = 2,
+    Failed = 3
+}
+export declare enum Platform {
+    iOS = 1,
+    Android = 2,
+    Windows = 3,
+    MacOSX = 4,
+    Web = 5,
+    Linux = 7,
+    AndroidPad = 8,
+    iPad = 9
+}
+export declare enum LogLevel {
+    Debug = 5,
+    Info = 4,
+    Warn = 3,
+    Error = 2,
+    Fatal = 1,
+    Panic = 0
+}
+export declare enum ApplicationHandleResult {
+    Unprocessed = 0,
+    Agree = 1,
+    Reject = -1
+}
+export declare enum MessageType {
+    TextMessage = 101,
+    PictureMessage = 102,
+    VoiceMessage = 103,
+    VideoMessage = 104,
+    FileMessage = 105,
+    AtTextMessage = 106,
+    MergeMessage = 107,
+    CardMessage = 108,
+    LocationMessage = 109,
+    CustomMessage = 110,
+    TypingMessage = 113,
+    QuoteMessage = 114,
+    FaceMessage = 115,
+    FriendAdded = 1201,
+    OANotification = 1400,
+    GroupCreated = 1501,
+    GroupInfoUpdated = 1502,
+    MemberQuit = 1504,
+    GroupOwnerTransferred = 1507,
+    MemberKicked = 1508,
+    MemberInvited = 1509,
+    MemberEnter = 1510,
+    GroupDismissed = 1511,
+    GroupMemberMuted = 1512,
+    GroupMemberCancelMuted = 1513,
+    GroupMuted = 1514,
+    GroupCancelMuted = 1515,
+    GroupMemberInfoUpdated = 1516,
+    GroupMemberToAdmin = 1517,
+    GroupAdminToNomal = 1518,
+    GroupAnnouncementUpdated = 1519,
+    GroupNameUpdated = 1520,
+    BurnMessageChange = 1701,
+    RevokeMessage = 2101,
+    HasReadReceiptMessage = 2150,
+    GroupHasReadReceipt = 2155
+}
+export declare enum SessionType {
+    Single = 1,
+    Group = 2,
+    WorkingGroup = 3,
+    Notification = 4
+}
+export declare enum GroupStatus {
+    Nomal = 0,
+    Baned = 1,
+    Dismissed = 2,
+    Muted = 3
+}
+export declare enum GroupAtType {
+    AtNormal = 0,
+    AtMe = 1,
+    AtAll = 2,
+    AtAllAtMe = 3,
+    AtGroupNotice = 4
+}
+export declare enum GroupMemberFilter {
+    All = 0,
+    Owner = 1,
+    Admin = 2,
+    Nomal = 3,
+    AdminAndNomal = 4,
+    AdminAndOwner = 5
+}
+export declare enum Relationship {
+    isBlack = 0,
+    isFriend = 1
+}
+export declare enum LoginStatus {
+    Logout = 1,
+    Logging = 2,
+    Logged = 3
+}
+export declare enum OnlineState {
+    Online = 1,
+    Offline = 0
+}
diff --git a/src/utils/openIM/types/enum.js b/src/utils/openIM/types/enum.js
new file mode 100644
index 0000000..8230bf6
--- /dev/null
+++ b/src/utils/openIM/types/enum.js
@@ -0,0 +1,152 @@
+export var MessageReceiveOptType;
+(function (MessageReceiveOptType) {
+    MessageReceiveOptType[MessageReceiveOptType["Nomal"] = 0] = "Nomal";
+    MessageReceiveOptType[MessageReceiveOptType["NotReceive"] = 1] = "NotReceive";
+    MessageReceiveOptType[MessageReceiveOptType["NotNotify"] = 2] = "NotNotify";
+})(MessageReceiveOptType || (MessageReceiveOptType = {}));
+export var AllowType;
+(function (AllowType) {
+    AllowType[AllowType["Allowed"] = 0] = "Allowed";
+    AllowType[AllowType["NotAllowed"] = 1] = "NotAllowed";
+})(AllowType || (AllowType = {}));
+export var GroupType;
+(function (GroupType) {
+    GroupType[GroupType["WorkingGroup"] = 2] = "WorkingGroup";
+})(GroupType || (GroupType = {}));
+export var GroupJoinSource;
+(function (GroupJoinSource) {
+    GroupJoinSource[GroupJoinSource["Invitation"] = 2] = "Invitation";
+    GroupJoinSource[GroupJoinSource["Search"] = 3] = "Search";
+    GroupJoinSource[GroupJoinSource["QrCode"] = 4] = "QrCode";
+})(GroupJoinSource || (GroupJoinSource = {}));
+export var GroupMemberRole;
+(function (GroupMemberRole) {
+    GroupMemberRole[GroupMemberRole["Nomal"] = 20] = "Nomal";
+    GroupMemberRole[GroupMemberRole["Admin"] = 60] = "Admin";
+    GroupMemberRole[GroupMemberRole["Owner"] = 100] = "Owner";
+})(GroupMemberRole || (GroupMemberRole = {}));
+export var GroupVerificationType;
+(function (GroupVerificationType) {
+    GroupVerificationType[GroupVerificationType["ApplyNeedInviteNot"] = 0] = "ApplyNeedInviteNot";
+    GroupVerificationType[GroupVerificationType["AllNeed"] = 1] = "AllNeed";
+    GroupVerificationType[GroupVerificationType["AllNot"] = 2] = "AllNot";
+})(GroupVerificationType || (GroupVerificationType = {}));
+export var MessageStatus;
+(function (MessageStatus) {
+    MessageStatus[MessageStatus["Sending"] = 1] = "Sending";
+    MessageStatus[MessageStatus["Succeed"] = 2] = "Succeed";
+    MessageStatus[MessageStatus["Failed"] = 3] = "Failed";
+})(MessageStatus || (MessageStatus = {}));
+export var Platform;
+(function (Platform) {
+    Platform[Platform["iOS"] = 1] = "iOS";
+    Platform[Platform["Android"] = 2] = "Android";
+    Platform[Platform["Windows"] = 3] = "Windows";
+    Platform[Platform["MacOSX"] = 4] = "MacOSX";
+    Platform[Platform["Web"] = 5] = "Web";
+    Platform[Platform["Linux"] = 7] = "Linux";
+    Platform[Platform["AndroidPad"] = 8] = "AndroidPad";
+    Platform[Platform["iPad"] = 9] = "iPad";
+})(Platform || (Platform = {}));
+export var LogLevel;
+(function (LogLevel) {
+    LogLevel[LogLevel["Debug"] = 5] = "Debug";
+    LogLevel[LogLevel["Info"] = 4] = "Info";
+    LogLevel[LogLevel["Warn"] = 3] = "Warn";
+    LogLevel[LogLevel["Error"] = 2] = "Error";
+    LogLevel[LogLevel["Fatal"] = 1] = "Fatal";
+    LogLevel[LogLevel["Panic"] = 0] = "Panic";
+})(LogLevel || (LogLevel = {}));
+export var ApplicationHandleResult;
+(function (ApplicationHandleResult) {
+    ApplicationHandleResult[ApplicationHandleResult["Unprocessed"] = 0] = "Unprocessed";
+    ApplicationHandleResult[ApplicationHandleResult["Agree"] = 1] = "Agree";
+    ApplicationHandleResult[ApplicationHandleResult["Reject"] = -1] = "Reject";
+})(ApplicationHandleResult || (ApplicationHandleResult = {}));
+export var MessageType;
+(function (MessageType) {
+    MessageType[MessageType["TextMessage"] = 101] = "TextMessage";
+    MessageType[MessageType["PictureMessage"] = 102] = "PictureMessage";
+    MessageType[MessageType["VoiceMessage"] = 103] = "VoiceMessage";
+    MessageType[MessageType["VideoMessage"] = 104] = "VideoMessage";
+    MessageType[MessageType["FileMessage"] = 105] = "FileMessage";
+    MessageType[MessageType["AtTextMessage"] = 106] = "AtTextMessage";
+    MessageType[MessageType["MergeMessage"] = 107] = "MergeMessage";
+    MessageType[MessageType["CardMessage"] = 108] = "CardMessage";
+    MessageType[MessageType["LocationMessage"] = 109] = "LocationMessage";
+    MessageType[MessageType["CustomMessage"] = 110] = "CustomMessage";
+    MessageType[MessageType["TypingMessage"] = 113] = "TypingMessage";
+    MessageType[MessageType["QuoteMessage"] = 114] = "QuoteMessage";
+    MessageType[MessageType["FaceMessage"] = 115] = "FaceMessage";
+    MessageType[MessageType["FriendAdded"] = 1201] = "FriendAdded";
+    MessageType[MessageType["OANotification"] = 1400] = "OANotification";
+    MessageType[MessageType["GroupCreated"] = 1501] = "GroupCreated";
+    MessageType[MessageType["GroupInfoUpdated"] = 1502] = "GroupInfoUpdated";
+    MessageType[MessageType["MemberQuit"] = 1504] = "MemberQuit";
+    MessageType[MessageType["GroupOwnerTransferred"] = 1507] = "GroupOwnerTransferred";
+    MessageType[MessageType["MemberKicked"] = 1508] = "MemberKicked";
+    MessageType[MessageType["MemberInvited"] = 1509] = "MemberInvited";
+    MessageType[MessageType["MemberEnter"] = 1510] = "MemberEnter";
+    MessageType[MessageType["GroupDismissed"] = 1511] = "GroupDismissed";
+    MessageType[MessageType["GroupMemberMuted"] = 1512] = "GroupMemberMuted";
+    MessageType[MessageType["GroupMemberCancelMuted"] = 1513] = "GroupMemberCancelMuted";
+    MessageType[MessageType["GroupMuted"] = 1514] = "GroupMuted";
+    MessageType[MessageType["GroupCancelMuted"] = 1515] = "GroupCancelMuted";
+    MessageType[MessageType["GroupMemberInfoUpdated"] = 1516] = "GroupMemberInfoUpdated";
+    MessageType[MessageType["GroupMemberToAdmin"] = 1517] = "GroupMemberToAdmin";
+    MessageType[MessageType["GroupAdminToNomal"] = 1518] = "GroupAdminToNomal";
+    MessageType[MessageType["GroupAnnouncementUpdated"] = 1519] = "GroupAnnouncementUpdated";
+    MessageType[MessageType["GroupNameUpdated"] = 1520] = "GroupNameUpdated";
+    MessageType[MessageType["BurnMessageChange"] = 1701] = "BurnMessageChange";
+    // notification
+    MessageType[MessageType["RevokeMessage"] = 2101] = "RevokeMessage";
+    MessageType[MessageType["HasReadReceiptMessage"] = 2150] = "HasReadReceiptMessage";
+    MessageType[MessageType["GroupHasReadReceipt"] = 2155] = "GroupHasReadReceipt";
+})(MessageType || (MessageType = {}));
+export var SessionType;
+(function (SessionType) {
+    SessionType[SessionType["Single"] = 1] = "Single";
+    SessionType[SessionType["Group"] = 2] = "Group";
+    SessionType[SessionType["WorkingGroup"] = 3] = "WorkingGroup";
+    SessionType[SessionType["Notification"] = 4] = "Notification";
+})(SessionType || (SessionType = {}));
+export var GroupStatus;
+(function (GroupStatus) {
+    GroupStatus[GroupStatus["Nomal"] = 0] = "Nomal";
+    GroupStatus[GroupStatus["Baned"] = 1] = "Baned";
+    GroupStatus[GroupStatus["Dismissed"] = 2] = "Dismissed";
+    GroupStatus[GroupStatus["Muted"] = 3] = "Muted";
+})(GroupStatus || (GroupStatus = {}));
+export var GroupAtType;
+(function (GroupAtType) {
+    GroupAtType[GroupAtType["AtNormal"] = 0] = "AtNormal";
+    GroupAtType[GroupAtType["AtMe"] = 1] = "AtMe";
+    GroupAtType[GroupAtType["AtAll"] = 2] = "AtAll";
+    GroupAtType[GroupAtType["AtAllAtMe"] = 3] = "AtAllAtMe";
+    GroupAtType[GroupAtType["AtGroupNotice"] = 4] = "AtGroupNotice";
+})(GroupAtType || (GroupAtType = {}));
+export var GroupMemberFilter;
+(function (GroupMemberFilter) {
+    GroupMemberFilter[GroupMemberFilter["All"] = 0] = "All";
+    GroupMemberFilter[GroupMemberFilter["Owner"] = 1] = "Owner";
+    GroupMemberFilter[GroupMemberFilter["Admin"] = 2] = "Admin";
+    GroupMemberFilter[GroupMemberFilter["Nomal"] = 3] = "Nomal";
+    GroupMemberFilter[GroupMemberFilter["AdminAndNomal"] = 4] = "AdminAndNomal";
+    GroupMemberFilter[GroupMemberFilter["AdminAndOwner"] = 5] = "AdminAndOwner";
+})(GroupMemberFilter || (GroupMemberFilter = {}));
+export var Relationship;
+(function (Relationship) {
+    Relationship[Relationship["isBlack"] = 0] = "isBlack";
+    Relationship[Relationship["isFriend"] = 1] = "isFriend";
+})(Relationship || (Relationship = {}));
+export var LoginStatus;
+(function (LoginStatus) {
+    LoginStatus[LoginStatus["Logout"] = 1] = "Logout";
+    LoginStatus[LoginStatus["Logging"] = 2] = "Logging";
+    LoginStatus[LoginStatus["Logged"] = 3] = "Logged";
+})(LoginStatus || (LoginStatus = {}));
+export var OnlineState;
+(function (OnlineState) {
+    OnlineState[OnlineState["Online"] = 1] = "Online";
+    OnlineState[OnlineState["Offline"] = 0] = "Offline";
+})(OnlineState || (OnlineState = {}));
diff --git a/src/utils/openIM/types/params.d.ts b/src/utils/openIM/types/params.d.ts
new file mode 100644
index 0000000..83a86e1
--- /dev/null
+++ b/src/utils/openIM/types/params.d.ts
@@ -0,0 +1,405 @@
+import { MessageEntity, OfflinePush, PicBaseInfo, AtUsersInfoItem, GroupInitInfo, MessageItem, SelfUserInfo, RtcInvite } from './entity';
+import { AllowType, GroupJoinSource, GroupVerificationType, MessageType, MessageReceiveOptType, GroupMemberRole, GroupMemberFilter, LogLevel } from './enum';
+export declare type InitAndLoginConfig = {
+    userID: string;
+    token: string;
+    platformID: number;
+    apiAddr: string;
+    wsAddr: string;
+    logLevel?: LogLevel;
+    isLogStandardOutput?: boolean;
+    isExternalExtensions?: boolean;
+    tryParse?: boolean;
+};
+export declare type GetOneConversationParams = {
+    sourceID: string;
+    sessionType: number;
+};
+export declare type GetAdvancedHistoryMsgParams = {
+    userID?: string;
+    groupID?: string;
+    lastMinSeq: number;
+    count: number;
+    startClientMsgID: string;
+    conversationID: string;
+};
+export declare type GetHistoryMsgParams = {
+    userID: string;
+    groupID: string;
+    count: number;
+    startClientMsgID: string;
+    conversationID?: string;
+};
+export declare type MarkNotiParams = {
+    conversationID: string;
+    clientMsgIDList: string[];
+};
+export declare type GetGroupMemberParams = {
+    groupID: string;
+    filter: GroupMemberFilter;
+    offset: number;
+    count: number;
+};
+export declare type SendMsgParams = {
+    recvID: string;
+    groupID: string;
+    offlinePushInfo?: OfflinePush;
+    message: MessageItem;
+    fileArrayBuffer?: ArrayBuffer;
+    snpFileArrayBuffer?: ArrayBuffer;
+};
+export declare type SetMessageLocalExParams = {
+    conversationID: string;
+    clientMsgID: string;
+    localEx: string;
+};
+export declare type ImageMsgParams = {
+    sourcePicture: PicBaseInfo;
+    bigPicture: PicBaseInfo;
+    snapshotPicture: PicBaseInfo;
+};
+export declare type VideoMsgParams = {
+    videoPath: string;
+    duration: number;
+    videoType: string;
+    snapshotPath: string;
+    videoUUID: string;
+    videoUrl: string;
+    videoSize: number;
+    snapshotUUID: string;
+    snapshotSize: number;
+    snapshotUrl: string;
+    snapshotWidth: number;
+    snapshotHeight: number;
+    snapShotType?: string;
+};
+export declare type VideoMsgFullParams = {
+    videoFullPath: string;
+    videoType: string;
+    duration: number;
+    snapshotFullPath: string;
+};
+export declare type CustomMsgParams = {
+    data: string;
+    extension: string;
+    description: string;
+};
+export declare type QuoteMsgParams = {
+    text: string;
+    message: string;
+};
+export declare type AdvancedQuoteMsgParams = {
+    text: string;
+    message: MessageItem;
+    messageEntityList?: MessageEntity[];
+};
+export declare type AdvancedMsgParams = {
+    text: string;
+    messageEntityList?: MessageEntity[];
+};
+export declare type SetPrvParams = {
+    conversationID: string;
+    isPrivate: boolean;
+};
+export declare type SplitConversationParams = {
+    offset: number;
+    count: number;
+};
+export declare type SetDraftParams = {
+    conversationID: string;
+    draftText: string;
+};
+export declare type PinCveParams = {
+    conversationID: string;
+    isPinned: boolean;
+};
+export declare type IsRecvParams = {
+    conversationIDList: string[];
+    opt: MessageReceiveOptType;
+};
+export declare type UpdateMemberNameParams = {
+    groupID: string;
+    userID: string;
+    GroupMemberNickname: string;
+};
+export declare type GroupBaseInfo = Partial<Omit<GroupInitInfo, 'groupType'>> & {
+    groupID: string;
+};
+export declare type JoinGroupParams = {
+    groupID: string;
+    reqMsg: string;
+    joinSource: GroupJoinSource;
+};
+export declare type SearchGroupParams = {
+    keywordList: string[];
+    isSearchGroupID: boolean;
+    isSearchGroupName: boolean;
+};
+export declare type ChangeGroupMuteParams = {
+    groupID: string;
+    isMute: boolean;
+};
+export declare type ChangeGroupMemberMuteParams = {
+    groupID: string;
+    userID: string;
+    mutedSeconds: number;
+};
+export declare type TransferGroupParams = {
+    groupID: string;
+    newOwnerUserID: string;
+};
+export declare type AccessGroupParams = {
+    groupID: string;
+    fromUserID: string;
+    handleMsg: string;
+};
+export declare type SetGroupRoleParams = {
+    groupID: string;
+    userID: string;
+    roleLevel: GroupMemberRole;
+};
+export declare type SetGroupVerificationParams = {
+    verification: GroupVerificationType;
+    groupID: string;
+};
+export declare type SetBurnDurationParams = {
+    conversationID: string;
+    burnDuration: number;
+};
+export declare type GetUserInfoWithCacheParams = {
+    userIDList: string[];
+    groupID: string;
+};
+export declare type AtMsgParams = {
+    text: string;
+    atUserIDList: string[];
+    atUsersInfo?: AtUsersInfoItem[];
+    message?: MessageItem;
+};
+export declare type SoundMsgParams = {
+    uuid: string;
+    soundPath: string;
+    sourceUrl: string;
+    dataSize: number;
+    duration: number;
+    soundType?: string;
+};
+export declare type FileMsgParams = {
+    filePath: string;
+    fileName: string;
+    uuid: string;
+    sourceUrl: string;
+    fileSize: number;
+    fileType?: string;
+};
+export declare type FileMsgFullParams = {
+    fileFullPath: string;
+    fileName: string;
+};
+export declare type SouondMsgFullParams = {
+    soundPath: string;
+    duration: number;
+};
+export declare type MergerMsgParams = {
+    messageList: MessageItem[];
+    title: string;
+    summaryList: string[];
+};
+export declare type FaceMessageParams = {
+    index: number;
+    data: string;
+};
+export declare type LocationMsgParams = {
+    description: string;
+    longitude: number;
+    latitude: number;
+};
+export declare type GroupMsgReadParams = {
+    groupID: string;
+    msgIDList: string[];
+};
+export declare type InsertSingleMsgParams = {
+    message: MessageItem;
+    recvID: string;
+    sendID: string;
+};
+export declare type InsertGroupMsgParams = {
+    message: MessageItem;
+    groupID: string;
+    sendID: string;
+};
+export declare type AccessMessageParams = {
+    conversationID: string;
+    clientMsgID: string;
+};
+export declare type AccessMessagesParams = {
+    conversationID: string;
+    seqs: string;
+};
+export declare type TypingUpdateParams = {
+    recvID: string;
+    msgTip: string;
+};
+export declare type SplitParams = {
+    offset: number;
+    count: number;
+};
+export declare type GetOneCveParams = {
+    sourceID: string;
+    sessionType: number;
+};
+export declare type isRecvParams = {
+    conversationID: string;
+    opt: MessageReceiveOptType;
+};
+export declare type SearchLocalParams = {
+    conversationID: string;
+    keywordList: string[];
+    keywordListMatchType?: number;
+    senderUserIDList?: string[];
+    messageTypeList?: MessageType[];
+    searchTimePosition?: number;
+    searchTimePeriod?: number;
+    pageIndex?: number;
+    count?: number;
+};
+export declare type AddFriendParams = {
+    toUserID: string;
+    reqMsg: string;
+};
+export declare type SearchFriendParams = {
+    keywordList: string[];
+    isSearchUserID: boolean;
+    isSearchNickname: boolean;
+    isSearchRemark: boolean;
+};
+export declare type RemarkFriendParams = {
+    toUserID: string;
+    remark: string;
+};
+export declare type AccessFriendParams = {
+    toUserID: string;
+    handleMsg: string;
+};
+export declare type InviteGroupParams = {
+    groupID: string;
+    reason: string;
+    userIDList: string[];
+};
+export declare type GetGroupMemberByTimeParams = {
+    groupID: string;
+    filterUserIDList: string[];
+    offset: number;
+    count: number;
+    joinTimeBegin: number;
+    joinTimeEnd: number;
+};
+export declare type SearchGroupMemberParams = {
+    groupID: string;
+    keywordList: string[];
+    isSearchUserID: boolean;
+    isSearchMemberNickname: boolean;
+    offset: number;
+    count: number;
+};
+export declare type SetMemberAuthParams = {
+    rule: AllowType;
+    groupID: string;
+};
+export declare type CreateGroupParams = {
+    memberUserIDs: string[];
+    groupInfo: GroupInitInfo;
+    adminUserIDs?: string[];
+    ownerUserID?: string;
+};
+export declare type GroupInfoParams = Partial<GroupInitInfo> & {
+    groupID: string;
+    needVerification: GroupVerificationType;
+    lookMemberInfo: AllowType;
+    applyMemberFriend: AllowType;
+};
+export declare type MemberNameParams = {
+    groupID: string;
+    userID: string;
+    groupMemberNickname: string;
+};
+export declare type MemberExParams = {
+    groupID: string;
+    userID: string;
+    ex: string;
+};
+export declare type FindMessageParams = {
+    conversationID: string;
+    clientMsgIDList: string[];
+};
+export declare type UploadFileParams = {
+    name: string;
+    contentType: string;
+    uuid: string;
+    file: File;
+};
+export declare type PartialUserItem = Partial<SelfUserInfo>;
+export declare type SignalingInviteParams = {
+    invitation: RtcInvite;
+    offlinePushInfo?: OfflinePush;
+};
+export declare type RtcActionParams = {
+    opUserID: string;
+    invitation: RtcInvite;
+};
+export declare type CustomSignalParams = {
+    roomID: string;
+    customInfo: string;
+};
+export declare type CreateMeetingParams = {
+    meetingName: string;
+    meetingHostUserID: string;
+    startTime: number;
+    meetingDuration: number;
+    inviteeUserIDList: string[];
+};
+export declare type UpdateMeetingParams = {
+    roomID: string;
+    meetingName: string;
+    startTime: number;
+    endTime: number;
+    participantCanUnmuteSelf: boolean;
+    participantCanEnableVideo: boolean;
+    onlyHostInviteUser: boolean;
+    onlyHostShareScreen: boolean;
+    joinDisableMicrophone: boolean;
+    joinDisableVideo: boolean;
+    isMuteAllVideo: boolean;
+    isMuteAllMicrophone: boolean;
+    addCanScreenUserIDList: string[];
+    reduceCanScreenUserIDList: string[];
+    addDisableMicrophoneUserIDList: string[];
+    reduceDisableMicrophoneUserIDList: string[];
+    addDisableVideoUserIDList: string[];
+    reduceDisableVideoUserIDList: string[];
+    addPinedUserIDList: string[];
+    reducePinedUserIDList: string[];
+    addBeWatchedUserIDList: string[];
+    reduceBeWatchedUserIDList: string[];
+};
+export declare type MeetingOperateStreamParams = {
+    streamType: string;
+    roomID: string;
+    userID?: string;
+    mute: boolean;
+    muteAll: boolean;
+};
+export declare type SetConversationMsgDestructParams = {
+    conversationID: string;
+    isMsgDestruct: boolean;
+};
+export declare type SetConversationMsgDestructTimeParams = {
+    conversationID: string;
+    msgDestructTime: number;
+};
+export declare type ConfigParams = {
+    apiAddr: string;
+    wsAddr: string;
+    reConn: boolean;
+    backupHttpAddrs: string[];
+};
\ No newline at end of file
diff --git a/src/utils/openIM/types/params.js b/src/utils/openIM/types/params.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/src/utils/openIM/types/params.js
@@ -0,0 +1 @@
+export {};
diff --git a/src/utils/openIM/utils/emitter.d.ts b/src/utils/openIM/utils/emitter.d.ts
new file mode 100644
index 0000000..0d04c2a
--- /dev/null
+++ b/src/utils/openIM/utils/emitter.d.ts
@@ -0,0 +1,11 @@
+import { WSEvent } from '../types/entity';
+import { CbEvents } from '../constant';
+declare type Cbfn = (data: WSEvent<any>) => void;
+declare class Emitter {
+    private events;
+    constructor();
+    emit(event: CbEvents, data: WSEvent): this;
+    on(event: CbEvents, fn: Cbfn): this;
+    off(event: CbEvents, fn: Cbfn): this | undefined;
+}
+export default Emitter;
diff --git a/src/utils/openIM/utils/emitter.js b/src/utils/openIM/utils/emitter.js
new file mode 100644
index 0000000..890db50
--- /dev/null
+++ b/src/utils/openIM/utils/emitter.js
@@ -0,0 +1,39 @@
+class Emitter {
+    events;
+    constructor() {
+        this.events = {};
+    }
+    emit(event, data) {
+        if (this.events[event]) {
+            this.events[event].forEach(fn => {
+                return fn(data);
+            });
+        }
+        return this;
+    }
+    on(event, fn) {
+        if (this.events[event]) {
+            this.events[event].push(fn);
+        }
+        else {
+            this.events[event] = [fn];
+        }
+        return this;
+    }
+    off(event, fn) {
+        if (event && typeof fn === 'function' && this.events[event]) {
+            const listeners = this.events[event];
+            if (!listeners || listeners.length === 0) {
+                return;
+            }
+            const index = listeners.findIndex(_fn => {
+                return _fn === fn;
+            });
+            if (index !== -1) {
+                listeners.splice(index, 1);
+            }
+        }
+        return this;
+    }
+}
+export default Emitter;
diff --git a/src/utils/openIM/utils/escape.d.ts b/src/utils/openIM/utils/escape.d.ts
new file mode 100644
index 0000000..6170806
--- /dev/null
+++ b/src/utils/openIM/utils/escape.d.ts
@@ -0,0 +1,23 @@
+/**
+ * Escapes the given string to protect against SQL injection attacks.
+ *
+ * By default it assumes that backslashes are not supported as they are not part of the standard SQL spec.
+ * Quoting from the [SQLlite web site](https://sqlite.org/lang_expr.html):
+ *
+ * > C-style escapes using the backslash character are not supported because they are not standard SQL.
+ *
+ * This means three things:
+ *
+ * - backslashes and double quotes `"` are not escaped by default
+ * - single quotes are escaped via `''` instead of `\'`
+ * - your sql engine should throw an error when encountering a backslash escape
+ *   as part of a string, unless it is a literal backslash, i.e. `'backslash: \\'`.
+ *
+ * It is recommended to set the `backslashSupported` option `true` if your SQL
+ * engine supports it. In that case backslash sequences are escaped and single
+ * and double quotes are escaped via a backslash, i.e. `'\''`.
+ *
+ */
+export declare function escapeString(val: string, opts?: {
+    backslashSupported: boolean;
+}): string;
diff --git a/src/utils/openIM/utils/escape.js b/src/utils/openIM/utils/escape.js
new file mode 100644
index 0000000..a45e431
--- /dev/null
+++ b/src/utils/openIM/utils/escape.js
@@ -0,0 +1,57 @@
+// eslint-disable-next-line no-control-regex
+const CHARS_GLOBAL_BACKSLASH_SUPPORTED_RX = /[\0\b\t\n\r\x1a"'\\]/g;
+const CHARS_ESCAPE_BACKSLASH_SUPPORTED_MAP = {
+    '\0': '\\0',
+    '\b': '\\b',
+    '\t': '\\t',
+    '\n': '\\n',
+    '\r': '\\r',
+    '\x1a': '\\Z',
+    '"': '\\"',
+    "'": "\\'",
+    '\\': '\\\\',
+};
+/**
+ * Escapes the given string to protect against SQL injection attacks.
+ *
+ * By default it assumes that backslashes are not supported as they are not part of the standard SQL spec.
+ * Quoting from the [SQLlite web site](https://sqlite.org/lang_expr.html):
+ *
+ * > C-style escapes using the backslash character are not supported because they are not standard SQL.
+ *
+ * This means three things:
+ *
+ * - backslashes and double quotes `"` are not escaped by default
+ * - single quotes are escaped via `''` instead of `\'`
+ * - your sql engine should throw an error when encountering a backslash escape
+ *   as part of a string, unless it is a literal backslash, i.e. `'backslash: \\'`.
+ *
+ * It is recommended to set the `backslashSupported` option `true` if your SQL
+ * engine supports it. In that case backslash sequences are escaped and single
+ * and double quotes are escaped via a backslash, i.e. `'\''`.
+ *
+ */
+export function escapeString(val, opts = { backslashSupported: false }) {
+    if (val == null) {
+        throw new Error('Need to pass a valid string');
+    }
+    opts = opts || {};
+    const backslashSupported = !!opts.backslashSupported;
+    if (!backslashSupported)
+        return "'" + val.replace(/'/g, "''") + "'";
+    const charsRx = CHARS_GLOBAL_BACKSLASH_SUPPORTED_RX;
+    const charsEscapeMap = CHARS_ESCAPE_BACKSLASH_SUPPORTED_MAP;
+    let chunkIndex = (charsRx.lastIndex = 0);
+    let escapedVal = '';
+    let match;
+    while ((match = charsRx.exec(val))) {
+        escapedVal += val.slice(chunkIndex, match.index) + charsEscapeMap[match[0]];
+        chunkIndex = charsRx.lastIndex;
+    }
+    // Nothing was escaped
+    if (chunkIndex === 0)
+        return "'" + val + "'";
+    if (chunkIndex < val.length)
+        return "'" + escapedVal + val.slice(chunkIndex) + "'";
+    return "'" + escapedVal + "'";
+}
diff --git a/src/utils/openIM/utils/index.d.ts b/src/utils/openIM/utils/index.d.ts
new file mode 100644
index 0000000..eb5287b
--- /dev/null
+++ b/src/utils/openIM/utils/index.d.ts
@@ -0,0 +1,7 @@
+export * from './response';
+export * from './timer';
+export * from './key';
+export * from './value';
+export * from './is';
+export * from './escape';
+export * from './logFormat';
diff --git a/src/utils/openIM/utils/index.js b/src/utils/openIM/utils/index.js
new file mode 100644
index 0000000..eb5287b
--- /dev/null
+++ b/src/utils/openIM/utils/index.js
@@ -0,0 +1,7 @@
+export * from './response';
+export * from './timer';
+export * from './key';
+export * from './value';
+export * from './is';
+export * from './escape';
+export * from './logFormat';
diff --git a/src/utils/openIM/utils/is.d.ts b/src/utils/openIM/utils/is.d.ts
new file mode 100644
index 0000000..15cd989
--- /dev/null
+++ b/src/utils/openIM/utils/is.d.ts
@@ -0,0 +1,6 @@
+export declare function isString(value: unknown): boolean;
+export declare function isNumber(value: unknown): boolean;
+export declare function isBoolean(value: unknown): boolean;
+export declare function isUndefined(value: unknown): boolean;
+export declare function isObject(value: unknown): boolean;
+export declare function isFunction(value: unknown): boolean;
diff --git a/src/utils/openIM/utils/is.js b/src/utils/openIM/utils/is.js
new file mode 100644
index 0000000..b9b2dae
--- /dev/null
+++ b/src/utils/openIM/utils/is.js
@@ -0,0 +1,18 @@
+export function isString(value) {
+    return typeof value === 'string';
+}
+export function isNumber(value) {
+    return typeof value === 'number';
+}
+export function isBoolean(value) {
+    return typeof value === 'boolean';
+}
+export function isUndefined(value) {
+    return typeof value === 'undefined';
+}
+export function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}
+export function isFunction(value) {
+    return typeof value === 'function';
+}
diff --git a/src/utils/openIM/utils/key.d.ts b/src/utils/openIM/utils/key.d.ts
new file mode 100644
index 0000000..afde508
--- /dev/null
+++ b/src/utils/openIM/utils/key.d.ts
@@ -0,0 +1,3 @@
+export declare type KeyType = 'CamelCase' | 'SnakeCase';
+export declare function convertSnakeCaseToCamelCase(key: string): string;
+export declare function convertCamelCaseToSnakeCase(key: string): string;
diff --git a/src/utils/openIM/utils/key.js b/src/utils/openIM/utils/key.js
new file mode 100644
index 0000000..7b08415
--- /dev/null
+++ b/src/utils/openIM/utils/key.js
@@ -0,0 +1,117 @@
+const InternalConstraint = [
+    ['user_id', 'userID'],
+    ['group_id', 'groupID'],
+    ['client_msg_id', 'clientMsgID'],
+    ['server_msg_id', 'serverMsgID'],
+    ['send_id', 'sendID'],
+    ['recv_id', 'recvID'],
+    ['sender_platform_id', 'senderPlatformID'],
+    ['sender_nick_name', 'senderNickname'],
+    ['sender_face_url', 'senderFaceURL'],
+    ['session_type', 'sessionType'],
+    ['msg_from', 'msgFrom'],
+    ['content_type', 'contentType'],
+    ['content', 'content'],
+    ['is_read', 'isRead'],
+    ['is_react', 'isReact'],
+    ['is_external_extensions', 'isExternalExtensions'],
+    ['msg_first_modify_time', 'msgFirstModifyTime'],
+    ['status', 'status'],
+    ['seq', 'seq'],
+    ['send_time', 'sendTime'],
+    ['create_time', 'createTime'],
+    ['attached_info', 'attachedInfo'],
+    ['ex', 'ex'],
+    ['face_url', 'faceURL'],
+    ['creator_user_id', 'creatorUserID'],
+    ['conversation_id', 'conversationID'],
+    ['owner_user_id', 'ownerUserID'],
+    ['notification_user_id', 'notificationUserID'],
+    ['operator_user_id', 'operatorUserID'],
+    ['from_face_url', 'fromFaceURL'],
+    ['from_user_id', 'fromUserID'],
+    ['from_gender', 'fromGender'],
+    ['from_nickname', 'fromNickname'],
+    ['to_user_id', 'toUserID'],
+    ['to_nickname', 'toNickname'],
+    ['to_face_url', 'toFaceURL'],
+    ['to_gender', 'toGender'],
+    ['req_msg', 'reqMsg'],
+    ['handle_msg', 'handleMsg'],
+    ['handle_time', 'handleTime'],
+    ['handle_result', 'handleResult'],
+    ['handler_user_id', 'handlerUserID'],
+    ['handle_user_id', 'handleUserID'],
+    ['inviter_user_id', 'inviterUserID'],
+    ['mute_end_time', 'muteEndTime'],
+    ['role_level', 'roleLevel'],
+    ['join_time', 'joinTime'],
+    ['join_source', 'joinSource'],
+    ['friend_user_id', 'friendUserID'],
+    ['recv_msg_opt', 'recvMsgOpt'],
+    ['group_at_type', 'groupAtType'],
+    ['latest_msg_send_time', 'latestMsgSendTime'],
+    ['draft_text_time', 'draftTextTime'],
+    ['is_private_chat', 'isPrivateChat'],
+    ['is_not_in_group', 'isNotInGroup'],
+    ['update_unread_count_time', 'updateUnreadCountTime'],
+    ['is_msg_destruct', 'isMsgDestruct'],
+    ['msg_destruct_time', 'msgDestructTime'],
+    ['part_hash', 'partHash'],
+    ['upload_id', 'uploadID'],
+    ['upload_info', 'uploadInfo'],
+    ['expire_time', 'expireTime'],
+];
+function _getInternalCamelCaseBySnakeCase(key) {
+    const pair = InternalConstraint.find(p => {
+        return p[0] === key;
+    });
+    if (pair) {
+        return pair[1];
+    }
+}
+function _getInternalSnakeCaseByCamelCase(key) {
+    const pair = InternalConstraint.find(p => {
+        return p[1] === key;
+    });
+    if (pair) {
+        return pair[0];
+    }
+}
+export function convertSnakeCaseToCamelCase(key) {
+    const internalKey = _getInternalCamelCaseBySnakeCase(key);
+    if (internalKey) {
+        return internalKey;
+    }
+    const cArr = [];
+    let lastSign = -2;
+    for (let i = 0; i < key.length; i++) {
+        const c = key[i];
+        if (c === '_' && i < key.length - 1) {
+            lastSign = i;
+            continue;
+        }
+        if (i - 1 === lastSign) {
+            cArr.push(c.toUpperCase());
+        }
+        else {
+            cArr.push(c);
+        }
+    }
+    return cArr.join('');
+}
+export function convertCamelCaseToSnakeCase(key) {
+    const internalKey = _getInternalSnakeCaseByCamelCase(key);
+    if (internalKey) {
+        return internalKey;
+    }
+    const cArr = [];
+    for (let i = 0; i < key.length; i++) {
+        const c = key[i];
+        if (c.toLowerCase() !== c) {
+            cArr.push('_');
+        }
+        cArr.push(c.toLowerCase());
+    }
+    return cArr.join('');
+}
diff --git a/src/utils/openIM/utils/logFormat.d.ts b/src/utils/openIM/utils/logFormat.d.ts
new file mode 100644
index 0000000..edadfa9
--- /dev/null
+++ b/src/utils/openIM/utils/logFormat.d.ts
@@ -0,0 +1 @@
+export declare function logBoxStyleValue(backgroundColor?: string, color?: string): string;
diff --git a/src/utils/openIM/utils/logFormat.js b/src/utils/openIM/utils/logFormat.js
new file mode 100644
index 0000000..60a082b
--- /dev/null
+++ b/src/utils/openIM/utils/logFormat.js
@@ -0,0 +1,3 @@
+export function logBoxStyleValue(backgroundColor, color) {
+    return `font-size:0.875rem; background:${backgroundColor ?? '#ffffff'}; color:${color ?? '#000000'}; border-radius:4px; padding-inline:4px;`;
+}
diff --git a/src/utils/openIM/utils/response.d.ts b/src/utils/openIM/utils/response.d.ts
new file mode 100644
index 0000000..4dbbbb2
--- /dev/null
+++ b/src/utils/openIM/utils/response.d.ts
@@ -0,0 +1 @@
+export declare function formatResponse(data: unknown, errCode?: number, errMsg?: string): any;
diff --git a/src/utils/openIM/utils/response.js b/src/utils/openIM/utils/response.js
new file mode 100644
index 0000000..5793af0
--- /dev/null
+++ b/src/utils/openIM/utils/response.js
@@ -0,0 +1,11 @@
+export function formatResponse(data, errCode, errMsg) {
+    let serializedData = data;
+    if (typeof data === 'object') {
+        serializedData = JSON.stringify(data);
+    }
+    return {
+        data: data !== undefined ? serializedData : '{}',
+        errCode: errCode || 0,
+        errMsg: errMsg || '',
+    };
+}
diff --git a/src/utils/openIM/utils/timer.d.ts b/src/utils/openIM/utils/timer.d.ts
new file mode 100644
index 0000000..adb83a3
--- /dev/null
+++ b/src/utils/openIM/utils/timer.d.ts
@@ -0,0 +1 @@
+export declare function wait(duration: number): Promise<unknown>;
diff --git a/src/utils/openIM/utils/timer.js b/src/utils/openIM/utils/timer.js
new file mode 100644
index 0000000..b0d2884
--- /dev/null
+++ b/src/utils/openIM/utils/timer.js
@@ -0,0 +1,8 @@
+export async function wait(duration) {
+    return new Promise(resolve => {
+        const timer = setTimeout(() => {
+            clearTimeout(timer);
+            resolve(null);
+        }, duration);
+    });
+}
diff --git a/src/utils/openIM/utils/value.d.ts b/src/utils/openIM/utils/value.d.ts
new file mode 100644
index 0000000..9a4029b
--- /dev/null
+++ b/src/utils/openIM/utils/value.d.ts
@@ -0,0 +1,6 @@
+import { QueryExecResult } from '@jlongster/sql.js';
+import { KeyType } from './key';
+export declare function converSqlExecResult(record: QueryExecResult, keyType?: KeyType, booleanKeys?: string[], convertMap?: Record<string, string>): Record<string, unknown>[];
+export declare function convertToCamelCaseObject(obj: Record<string, unknown>): Record<string, unknown>;
+export declare function convertToSnakeCaseObject(obj: Record<string, unknown>, escape?: boolean): Record<string, unknown>;
+export declare function convertObjectField(obj: Record<string, unknown>, convertMap?: Record<string, string>): Record<string, any>;
diff --git a/src/utils/openIM/utils/value.js b/src/utils/openIM/utils/value.js
new file mode 100644
index 0000000..2e711d0
--- /dev/null
+++ b/src/utils/openIM/utils/value.js
@@ -0,0 +1,53 @@
+import { escapeString } from './escape';
+import { isString } from './is';
+import { convertSnakeCaseToCamelCase, convertCamelCaseToSnakeCase, } from './key';
+export function converSqlExecResult(record, keyType = 'CamelCase', booleanKeys = [], convertMap = {}) {
+    const { columns = [], values = [] } = record || {};
+    const result = [];
+    values.forEach(v => {
+        const converted = {};
+        columns.forEach((k, i) => {
+            let ck = k;
+            let cv = v[i];
+            if (keyType === 'CamelCase') {
+                ck = convertSnakeCaseToCamelCase(k);
+            }
+            if (keyType === 'SnakeCase') {
+                ck = convertCamelCaseToSnakeCase(k);
+            }
+            if (booleanKeys.find(bk => bk === ck)) {
+                cv = !!cv;
+            }
+            ck = convertMap[k] || ck;
+            converted[ck] = cv;
+        });
+        result.push(converted);
+    });
+    return result;
+}
+export function convertToCamelCaseObject(obj) {
+    const retObj = {};
+    Object.keys(obj).forEach(k => {
+        retObj[convertSnakeCaseToCamelCase(k)] = obj[k];
+    });
+    return retObj;
+}
+export function convertToSnakeCaseObject(obj, escape = true) {
+    const retObj = {};
+    Object.keys(obj).forEach(k => {
+        let value = obj[k];
+        if (escape && isString(value)) {
+            value = escapeString(value).slice(1, -1);
+        }
+        retObj[convertCamelCaseToSnakeCase(k)] = value;
+    });
+    return retObj;
+}
+export function convertObjectField(obj, convertMap = {}) {
+    const ret = {};
+    Object.keys(obj).forEach(k => {
+        const nk = convertMap[k] || k;
+        ret[nk] = obj[k];
+    });
+    return ret;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..8a784b6
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,143 @@
+import axios from 'axios'
+import router from '@/router'
+import { showToast,showDialog } from 'vant'
+import { useUserStore } from "@/stores/user";
+
+const clearToken = () => {
+  window.localStorage.removeItem('token')
+}
+// 这里是用于设定请求后端时，所用的 Token KEY
+// 可以根据自己的需要修改，常见的如 Access-Token，Authorization
+// 需要注意的是，请尽量保证使用中横线`-` 来作为分隔符，
+// 避免被 nginx 等负载均衡器丢弃了自定义的请求头
+
+// 创建 axios 实例
+const request = axios.create({
+  // API 请求的默认前缀
+  baseURL: import.meta.env.VITE_APP_API_BASE_URL,
+  timeout: 6000, // 请求超时时间
+  withCredentials: false, // 异步请求携带cookie
+  headers: {
+    // 设置后端需要的传参类型
+    'Content-Type': 'application/json',
+    // 'Origin': 'wp'
+    // 'X-Requested-With': 'XMLHttpRequest',
+  },
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    //给请求头设置token
+    const token = window.localStorage.getItem('token') || ''
+
+    if (token) {
+      config.headers.Token = token
+    }
+
+    if (config.requestBaseUrl === 'MSG_API') {
+      config.baseURL = DEV ? VITE_APP_MSG_API : msg_api;
+    }
+
+    return config
+  },
+  (error) => {
+    showToast({ position: 'top', message: error.message })
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    const { data, request } = response;
+    const { code, msg, detail } = data;
+    const { responseURL } = request
+    const userStore = useUserStore();
+    const { setToken } = userStore;
+    if (code === 511) {
+      if (responseURL.includes('/v1/account/login')) {
+        showToast({ message: '系统正在维护中' })
+      } else {
+        // router.push('/placeholder')
+      }
+      return data
+    }
+    if (code === 401) {
+      // 登录失效
+      // showDialog({
+      //   title: '温馨提示',
+      //   message: '您的账户已在其他设备登录，如非本人操作，请立即修改登录密码！',
+      // }).then(() => {
+        // on close
+        // clearToken()
+        setToken('')
+        router.push({path: '/login'})
+        return data
+      // });
+    }
+
+    if (code === 1001) {
+      // 账号被锁定
+      // clearToken()
+      setToken('')
+      router.push({path: '/login'})
+      return data
+    }
+    if(code===1119){
+      // 登录失效
+      showDialog({
+        title: '温馨提示',
+        message: '您的账户已在其他设备登录，如非本人操作，请立即修改登录密码！',
+        confirmButtonText:'我知道了'
+      }).then(() => {
+        // clearToken()
+        setToken('')
+        router.push({path: '/login'})
+        return data
+      });
+      return
+    }
+    if (code === 200) {
+      // 将组件用的数据返回
+      return data;
+    } else {
+      // 处理业务错误。
+      if (detail && code != 5050 && code!==500) {
+        showToast({ position: 'top', message: detail })
+      }
+      
+      // return Promise.reject(new Error(detail));
+      return data;
+    }
+  },
+  (error) => {
+    // 处理 HTTP 网络错误
+    let message = "";
+    // HTTP 状态码
+    const status = error.response?.status;
+    switch (status) {
+      case 401:
+        message = "token失效，请重新登录";
+        router.push('/user/Login')
+        // 这里可以触发退出的 action
+        break;
+      case 403:
+        message = "没有权限,请获取权限后登录";
+        break;
+      case 404:
+        message = "页面不存在";
+        break;
+      case 500:
+        message = "服务器故障";
+        break;
+      case 502:
+        message = "数据库查询错误";
+        break;
+      default:
+        message = "网络连接错误";
+    }
+    return Promise.reject(error);
+  }
+);
+export default request
diff --git a/src/utils/sdkInit.js b/src/utils/sdkInit.js
new file mode 100644
index 0000000..6e7a990
--- /dev/null
+++ b/src/utils/sdkInit.js
@@ -0,0 +1,187 @@
+import { getSDK } from '@/utils/openIM'
+import { CbEvents } from '@/utils/openIM/constant'
+import { useUserStore } from '@/stores/user.js'
+import user from '@/api/user.js'
+import { showImagePreview, showToast } from "vant";
+import { removeAllLocalstorage } from '@/utils/tools'
+import { useContactStore } from "@/stores/contact";
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+import { showLoadingToast } from "vant";
+import { syncAllConversation } from '@/utils/msgTimeDeleteManager'
+import { useCommonStore } from "@/stores/modules/common";
+import use from "@/use";
+const { useSystem } = use;
+let im_sdk = null
+const ws_login_status = 1 // 1 未登录 2 登录中 3 已登录
+export const im_config = () => {
+  const im_token = window.localStorage.getItem('im_token')
+  const token = window.localStorage.getItem('token')
+  const user_id = window.localStorage.getItem('user_id')
+  const visitorId = window.localStorage.getItem('visitorId')
+  const { ws_url, api_3, backup_http_addrs } = window.WEB_CONFIG
+  return {
+    userID: user_id, // IM 用户 userID
+    token: im_token, // IM 用户令牌
+    // platformID: 3, // 当前登录平台号
+    platformID: useSystem(), //随便填的
+    apiAddr: api_3,
+    wsAddr: ws_url,
+    backupHttpAddrs: backup_http_addrs,
+    deviceID: visitorId,
+  }
+}
+let close_showLoadingToast = null
+let close_showLoadingToast_timer = null //初始化loading时，如果js逻辑报错，可能导致loading无法关闭所以用定时器，如果5分钟之后没有关闭强制关闭
+/**
+ * 初始化
+ * **/
+export const sdkInit = async (needLogin = true) => {
+  const userStore = useUserStore();
+  const { setToken, setUserInfo } = userStore;
+  const contactStore = useContactStore()
+  const { clearStore } = contactStore;
+  console.log(im_sdk,'11111111')
+  if (im_sdk === null) {
+    console.log('开始初始化数据')
+    im_sdk = getSDK()
+    if(sessionStorage.getItem('close_showLoadingToast')==1){
+      if(close_showLoadingToast)close_showLoadingToast.close()
+      if(close_showLoadingToast_timer){
+        close_showLoadingToast_timer = null
+        clearTimeout(close_showLoadingToast_timer)
+      }
+      close_showLoadingToast = showLoadingToast({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner',
+        duration:0,
+      });
+      if(!close_showLoadingToast_timer)close_showLoadingToast_timer = setTimeout(() => {
+        if(close_showLoadingToast)close_showLoadingToast.close()
+        close_showLoadingToast_timer = null
+        clearTimeout(close_showLoadingToast_timer)
+      }, 5*60*1000);
+    }
+    im_sdk.on(CbEvents.OnSyncServerFailed, () => {
+      console.log("同步会话失败")
+      if(close_showLoadingToast)close_showLoadingToast.close()
+      sessionStorage.setItem('close_showLoadingToast',1)
+    });
+    im_sdk.on(CbEvents.OnSyncServerFinish, () => {
+      console.log("同步会话成功")
+      if(close_showLoadingToast)close_showLoadingToast.close()
+      sessionStorage.setItem('close_showLoadingToast',1)
+      syncAllConversation()
+      // const commonStore = useCommonStore()
+      // commonStore.getNewTimestamp(new Date().getTime())
+    });
+    im_sdk.on(CbEvents.OnConnectFailed, ({ errCode, errMsg }) => {
+      console.error("建立wss失败:", errMsg)
+      if(close_showLoadingToast)close_showLoadingToast.close()
+      sessionStorage.setItem('close_showLoadingToast',1)
+    });
+    im_sdk.on(CbEvents.OnConnectSuccess, () => {
+      console.log("建立wss成功")
+    });
+    im_sdk.on(CbEvents.OnConnecting, () => {
+      console.log("wss连接中...")
+    });
+    im_sdk.on(CbEvents.OnKickedOffline, async (data) => {
+      console.log('OnKickedOffline==========', data)
+      showToast("已被强制下线，请重新登录！")
+      setTimeout(() => {
+        setToken('');
+        setUserInfo({});
+        removeAllLocalstorage();
+        im_sdk.logout();
+        clearStore();
+        localStorage.removeItem('im_token')
+        localStorage.removeItem('token')
+        localStorage.removeItem('user_id')
+        location.reload();
+      }, 3000)
+    });
+    im_sdk.on(CbEvents.OnKickedOfflineWithExData, async (data) => {
+      console.log('OnKickedOfflineWithExData==========', data)
+      const { data: innerData } = data || {}
+      const { code, data: kickInfo } = innerData || {}
+      // 20001 为移除信任设备踢掉
+      if (code === 20001) {
+        const info = JSON.parse(kickInfo || '{}') || {}
+        const activeDeviceId = localStorage.getItem('visitorId')
+        if (info.device_id !== activeDeviceId) {
+          return
+        }
+        
+        showToast("该设备登录存在风险，请使用可信设备登录")
+      }
+
+      // 20002 注销踢掉
+      if (code === 20002 && kickInfo === '') {
+        showToast("账号已注销")
+      }
+	  
+      if (![20001, 20002].includes(code)) {
+        showToast("已被强制下线，请重新登录！") 
+      }
+
+      setTimeout(() => {
+        setToken('');
+        setUserInfo({});
+        removeAllLocalstorage();
+        im_sdk.logout();
+        clearStore();
+        localStorage.removeItem('im_token')
+        localStorage.removeItem('token')
+        localStorage.removeItem('user_id')
+        location.reload();
+      }, 3000)
+    });
+    im_sdk.on(CbEvents.OnUserTokenExpired, () => {
+      setTimeout(() => {
+        setToken('');
+        setUserInfo({});
+        removeAllLocalstorage();
+        im_sdk.logout();
+        clearStore();
+        localStorage.removeItem('im_token')
+        localStorage.removeItem('token')
+        localStorage.removeItem('user_id')
+        // sessionStorage.setItem('againLoadingSign','')//允许群聊页面如果获取不到数据就可以进行强制重新加载
+        if(close_showLoadingToast)close_showLoadingToast.close()
+        close_showLoadingToast_timer = null
+        location.reload();
+      }, 3000)
+    });
+    console.log("》》》》》》》》》》sdk登录开始")
+    // sdk登录前获取设备信息并填入
+    const fpPromise = await FingerprintJS.load()
+    const res = await fpPromise.get()
+    localStorage.setItem('visitorId', res.visitorId)
+    // 其他tab不需要登录
+    if (!needLogin) return
+    try {
+      await im_sdk.login(im_config())
+      console.log("wss登录成功")
+    } catch (error) {
+      console.error("sdk 触发了登录失败",error)
+      // if (error.errCode!==10102) {
+      //   im_sdk.logout(); 
+      // }
+    }
+  }
+}
+// 获取sdk
+export const get_sdk = () => {
+  return im_sdk
+}
+// 重置sdk
+export const reset_sdk = () => {
+  if (im_sdk) {
+    im_sdk.logout();
+  }
+  im_sdk = null
+  return im_sdk
+}
+
+
diff --git a/src/utils/sendMessage.js b/src/utils/sendMessage.js
new file mode 100644
index 0000000..004f1df
--- /dev/null
+++ b/src/utils/sendMessage.js
@@ -0,0 +1,99 @@
+import { getPicInfo, getMediaDuration } from './common.js'
+import { getSDK } from './openIM/index.js'
+const OpenIM = getSDK();
+export const getImageMessage = async (file) => {
+  const { width, height } = await getPicInfo(file);
+  console.log(width, height, '9999')
+  const baseInfo = {
+    uuid: OpenIM.createuuid(),
+    type: file.type,
+    size: file.size,
+    width,
+    height,
+    url: URL.createObjectURL(file),
+  };
+  const options = {
+    sourcePicture: baseInfo,
+    bigPicture: baseInfo,
+    snapshotPicture: baseInfo,
+    file,
+    sourcePath: `/${file.name}`,
+  };
+  return (await OpenIM.createImageMessageByFile(options)).data;
+};
+
+export const getVideoMessage = async (file, snapShotFile) => {
+  const { width, height } = await getPicInfo(snapShotFile);
+  const options = {
+    videoFile: file,
+    snapshotFile: snapShotFile,
+    videoPath: "",
+    duration: await getMediaDuration(URL.createObjectURL(file)),
+    videoType: file.type,
+    snapshotPath: "",
+    videoUUID: OpenIM.createuuid(),
+    videoUrl: "",
+    videoSize: file.size,
+    snapshotUUID: OpenIM.createuuid(),
+    snapshotSize: snapShotFile.size,
+    snapshotUrl: URL.createObjectURL(snapShotFile),
+    snapshotWidth: width,
+    snapshotHeight: height,
+    snapShotType: snapShotFile.type,
+  };
+  return (await OpenIM.createVideoMessageByFile(options)).data;
+};
+
+export const getVideoSnshotFile = (file) => {
+  const url = URL.createObjectURL(file);
+  return new Promise((reslove, reject) => {
+    const video = document.createElement("VIDEO");
+    video.setAttribute("autoplay", "autoplay");
+    video.setAttribute("muted", "muted");
+    video.innerHTML = `<source src="${url}" type="audio/mp4">`;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    video.addEventListener("canplay", () => {
+      const anw = document.createAttribute("width");
+      //@ts-ignore
+      anw.nodeValue = video.videoWidth;
+      const anh = document.createAttribute("height");
+      //@ts-ignore
+      anh.nodeValue = video.videoHeight;
+      canvas.setAttributeNode(anw);
+      canvas.setAttributeNode(anh);
+      //@ts-ignore
+      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+      const base64 = canvas.toDataURL("image/png");
+      //@ts-ignore
+      video.pause();
+      const file = base64toFile(base64);
+      reslove(file);
+    });
+  });
+};
+
+export const base64toFile = (base64Str) => {
+  var arr = base64Str.split(","),
+    fileType = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], `screenshot${Date.now()}.png`, {
+    type: fileType,
+  });
+};
+
+export const createFileMessage = async (file) => {
+  const isImage = file.type.includes("image");
+  if (isImage) {
+    return await getImageMessage(file);
+  }
+  const snapShotFile = await getVideoSnshotFile(file);
+  return await getVideoMessage(file, snapShotFile);
+};
\ No newline at end of file
diff --git a/src/utils/tools.js b/src/utils/tools.js
new file mode 100644
index 0000000..d49ab23
--- /dev/null
+++ b/src/utils/tools.js
@@ -0,0 +1,1643 @@
+import clipboard3 from "vue-clipboard3";
+import { showToast } from "vant";
+import pinyin from "js-pinyin";
+import dayjs from "dayjs";
+import axios from 'axios';
+import { i18n } from "@/lang/index";
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+import { useContactStore } from "@/stores/contact";
+import defaultAvatar from "@/assets/mine-avatar.png";
+import contactApi from '@/api/contact'
+import use from "@/use";
+
+const { useSystem } = use||{};
+const { t } = i18n.global;
+
+const { toClipboard } = clipboard3();
+
+export const copyUserId = async id => {
+  try {
+    await toClipboard(String(id));
+    showToast("已复制到剪切板");
+  } catch (err) {
+    showToast("复制失败，请手动复制");
+  }
+};
+export const useFormatTime = (time) => {
+  return time && dayjs(time, 'YYYY-MM-DDTHH:mm:ssZ').isValid()
+    ? dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+    : time
+}
+export const getDates = date => {
+  if (!date) return "";
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = (d.getMonth() + 1).toString().padStart(2, "0");
+  const day = d
+    .getDate()
+    .toString()
+    .padStart(2, "0");
+  const time = d.toLocaleTimeString();
+  return `${year}-${month}-${day} ${time}`;
+};
+export const getDate = date => {
+  if (!date) return "";
+  const d = new Date(date);
+  return d.toLocaleDateString() + " " + d.toLocaleTimeString();
+};
+export const formatTimestamp = (timestamp, format = "-") => {
+  const date = new Date(timestamp * 1000);
+
+  // 获取年、月、日
+  const year = date.getFullYear();
+  const month = ("0" + (date.getMonth() + 1)).slice(-2);
+  const day = ("0" + date.getDate()).slice(-2);
+
+  // 获取时、分、秒
+  const hours = ("0" + date.getHours()).slice(-2);
+  const minutes = ("0" + date.getMinutes()).slice(-2);
+  const seconds = ("0" + date.getSeconds()).slice(-2);
+
+  // 返回格式化后的时间字符串
+  return year + format + month + format + day + " " + hours + ":" + minutes;
+};
+export const formatsTimestamp = (timestamp, format = "-") => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp);
+
+  // 获取年、月、日
+  const year = date.getFullYear();
+  const month = ("0" + (date.getMonth() + 1)).slice(-2);
+  const day = ("0" + date.getDate()).slice(-2);
+
+  // 获取时、分、秒
+  const hours = ("0" + date.getHours()).slice(-2);
+  const minutes = ("0" + date.getMinutes()).slice(-2);
+  const seconds = ("0" + date.getSeconds()).slice(-2);
+
+  // 返回格式化后的时间字符串
+  return `${year}/${month}/${day} ${hours}:${minutes}`;
+};
+export const formatTtamp = dateTimeString => {
+  const dateTime = new Date(dateTimeString);
+  const year = dateTime.getFullYear();
+  const month = ("0" + (dateTime.getMonth() + 1)).slice(-2);
+  const day = ("0" + dateTime.getDate()).slice(-2);
+  const hours = ("0" + dateTime.getHours()).slice(-2);
+  const minutes = ("0" + dateTime.getMinutes()).slice(-2);
+  const seconds = ("0" + dateTime.getSeconds()).slice(-2);
+
+  const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return formattedDateTime;
+};
+
+export const formatMinutestamp = timestamp => {
+  const date = new Date(timestamp);
+
+  // 获取年、月、日
+  const year = date.getFullYear();
+  const month = ("0" + (date.getMonth() + 1)).slice(-2);
+  const day = ("0" + date.getDate()).slice(-2);
+
+  // 获取时、分、秒
+  const hours = ("0" + date.getHours()).slice(-2);
+  const minutes = ("0" + date.getMinutes()).slice(-2);
+  const seconds = ("0" + date.getSeconds()).slice(-2);
+
+  // 返回格式化后的时间字符串
+  return hours + ":" + minutes;
+};
+export const showPhone = computed(() => {
+  const userAgent = navigator.userAgent;
+  const mobileKeywords = [
+    "Android",
+    "webOS",
+    "iPhone",
+    "iPad",
+    "iPod",
+    "BlackBerry",
+    "Windows Phone"
+  ];
+  for (let i = 0; i < mobileKeywords.length; i++) {
+    if (userAgent.indexOf(mobileKeywords[i]) > -1) {
+      return true;
+    }
+  }
+  return false;
+});
+export const formatTimestamps = timestamp => {
+  const date = new Date(timestamp * 1000);
+
+  // 获取年、月、日
+  const year = date.getFullYear();
+  const month = ("0" + (date.getMonth() + 1)).slice(-2);
+  const day = ("0" + date.getDate()).slice(-2);
+
+  // 获取时、分、秒
+  const hours = ("0" + date.getHours()).slice(-2);
+  const minutes = ("0" + date.getMinutes()).slice(-2);
+  const seconds = ("0" + date.getSeconds()).slice(-2);
+
+  // 返回格式化后的时间字符串
+  return (
+    year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
+  );
+};
+// 时间戳转化为年月日
+export const consttimestampToTime = (timestamp, formatTime = 'YYYY-MM-DD HH:mm') => {
+  const date = new Date(timestamp); // 将时间戳转化为Date对象
+  // 获取年、月、日
+  const year = date.getFullYear();
+  const month = ("0" + (date.getMonth() + 1)).slice(-2);
+  const day = ("0" + date.getDate()).slice(-2);
+
+  // 获取时、分、秒
+  const hours = ("0" + date.getHours()).slice(-2);
+  const minutes = ("0" + date.getMinutes()).slice(-2);
+  const seconds = ("0" + date.getSeconds()).slice(-2);
+  if (formatTime === 'YYYY-MM-DD HH:mm:ss') {
+    // 返回格式化后的时间字符串
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  } else {
+    // 返回格式化后的时间字符串
+    return `${year}/${month}/${day} ${hours}:${minutes}`;
+  }
+
+};
+
+export const formatNumber = number => {
+  // 将数字转换为字符串
+  var strNumber = String(number);
+
+  // 检查是否有小数部分
+  var hasDecimal = strNumber.indexOf(".") !== -1;
+
+  // 将整数部分每隔三位加逗号
+  var parts = strNumber.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+  // 补充小数部分的两位小数
+  if (hasDecimal) {
+    parts[1] = parts[1].padEnd(2, "0");
+  } else {
+    parts.push("00");
+  }
+
+  // 返回格式化后的数字
+  return parts.join(".");
+};
+
+// 分组函数
+export const filterCity = list => {
+  let ortherArr = [];
+  list.forEach(el => {
+    el.pinyin = pinyin.getFullChars(el.showName) || el.showName;
+  });
+  let letterArray = [];
+  for (let i = 65; i < 91; i++) {
+    letterArray.push(String.fromCharCode(i));
+  }
+  let newCities = [];
+  letterArray.forEach(item => {
+    newCities.push({
+      type: `${item}`,
+      list: list.filter(
+        item1 => item1.pinyin.substring(0, 1).toUpperCase() === `${item}`
+      )
+    });
+  });
+  list.forEach(el => {
+    if (!letterArray.includes(el.pinyin.substring(0, 1).toUpperCase())) {
+      ortherArr.push(el);
+    }
+  });
+  newCities.push({
+    type: "#",
+    list: ortherArr
+  });
+  newCities = newCities.filter(item => item.list.length > 0);
+  return newCities;
+};
+
+export const getGender = gender => {
+  if (gender === 1) {
+    return "男";
+  } else if (gender === 2) {
+    return "女";
+  } else if (gender === 3) {
+    return "保密";
+  } else {
+    return "";
+  }
+};
+// 交集
+export const getIntersection = (array1, array2, key) => {
+  return array1.filter(item1 =>
+    array2.some(item2 => item2[key] !== item1[key])
+  );
+};
+// 差集
+export const getDifference = (array1, array2, key) => {
+  return array1.filter(
+    item1 =>
+      !array2.some(item2 => (item2[key] ? item2[key] : item2) === item1[key])
+  );
+};
+
+export const getAvatarColor = name => {
+  const colorList = [
+    "#6898E6",
+    "#0095F6",
+    "#4DB9FF",
+    "#61CDB3",
+    "#5CC4D0",
+    "#6898E6",
+    "#F1A55E"
+  ];
+
+  try {
+    if (name != null && name.length > 0) {
+      // const pinyin = pinyin.getFullChars(name);
+      const pinyin = name;
+      let code;
+      if (pinyin.length > 1) {
+        code =
+          pinyin.charCodeAt(0) +
+          pinyin.length +
+          pinyin.charCodeAt(pinyin.length - 1);
+      } else if (pinyin.length === 1) {
+        code = pinyin.charCodeAt(0);
+      } else {
+        code = 0;
+      }
+      const index = code % colorList.length;
+      return colorList[index];
+    }
+  } catch (e) {
+    console.log("getAvatarColor", "err:" + e);
+  }
+
+  return colorList[0];
+};
+
+export const hidePhoneNumber = phone => {
+  const hidden = phone.substring(0, 3) + "****" + phone.substring(7);
+  return hidden;
+};
+
+export const isValidEmail = value => {
+  return /^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/.test(value);
+};
+
+export const isValidPassword = value => {
+  return /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(value);
+};
+
+export const hideEmailNumber = email => {
+  if (!email || email.length === 0) return "";
+  let showEmail = email;
+  let end = email.indexOf("@");
+  let start = 0;
+  if (end > 3) {
+    start = 3;
+  } else if (end > 2) {
+    start = 2;
+  } else if (end > 1) {
+    start = 1;
+  }
+
+  if (start > 0 && end >= start) {
+    let r = "";
+    for (let i = 0; i < end - start; i++) {
+      r += "*";
+    }
+    showEmail = showEmail.substring(0, start) + r + showEmail.substring(end);
+  }
+  return showEmail;
+};
+
+export const replaceStringWithValues = (str, ...values) => {
+  return str.replace(/%s/g, () => values.shift());
+};
+
+export const removeAllLocalstorage = () => {
+  const localList = [
+    "user_id",
+    "token",
+    "im_token",
+    "userInfo",
+    "detailSearch",
+    "applyUserList",
+    "contactList",
+    "chatList",
+    "isFriendList",
+    "friendGroupId",
+    "friendDetailId",
+    "groupSessionInfo",
+    "payConfig",
+    "incomeConfig",
+    "groupInfo",
+    "groupChatConfig",
+    "friendCreateCount",
+    "myGroupInfo",
+    "groupId",
+    "newFriendApplyCount",
+    "hasNewFriendApply",
+    "unreadMsgCount",
+    "toppingList",
+    "groupMemberInfo",
+    "privateChatConfig",
+    "groupChatList",
+    "friendCreateCount",
+    "newFriendApplyCount",
+    "privateChatConfigs",
+    "groupChatConfigs",
+    "friendApplication",
+    "allGroupOwnerOrAdmin",
+    "visitorId"
+  ];
+  localList.forEach(el => {
+    sessionStorage.removeItem(el);
+  });
+  localStorage.removeItem('token')
+  localStorage.removeItem('user_id')
+  localStorage.removeItem('im_token')
+};
+
+export const isSelf = userId => localStorage.getItem("user_id") === userId;
+
+export const getNameAndCheckSelf = (userInfo, arr) => {
+  let remark = "";
+  if (userInfo) {
+    const arrs = arr.filter(item => item.userID === userInfo.userID);
+    if (arrs.length > 0) {
+      remark = arrs[0].remark
+        ? arrs[0].remark
+        : arrs[0].showName
+        ? arrs[0].showName
+        : arrs[0].nickname;
+    } else {
+      remark = transformTexts(userInfo.userID, userInfo.nickname);
+    }
+    if (isSelf(userInfo.userID)) {
+      return t("you");
+    } else {
+      return remark;
+    }
+  } else {
+    return "-";
+  }
+  // return userInfo ? (isSelf(userInfo.userID) ? t('you') : userInfo.nickname) : '-'
+};
+
+export const getAtNickname = (atUserID, atNickname, hasPromission = true) => atUserID === "atAllTag" ? t("everyone") : transformTexts(atUserID, atNickname, hasPromission);
+
+const transformTexts = (atUserID, atNickname, hasPromission = true) => {
+  const groupId = window.sessionStorage.getItem('groupId') || ''
+  const contactStore = useContactStore();
+  const {
+    groupMemberInfoObj,
+  } = storeToRefs(contactStore);
+  // const groupMemberInfo = JSON.parse(window.sessionStorage.getItem('groupMemberInfo')) || {}
+  const groupMemberInfo = groupMemberInfoObj || {}
+  const contactList = JSON.parse(window.sessionStorage.getItem('contactList') || '[]')
+  // senderNickname
+  const index = contactList.findIndex(
+    items => items.userID === atUserID
+  );
+  // 在群聊中找到群聊备注
+  const arr = groupMemberInfo[groupId] || [];
+  const groupItem = arr.find(item => item.userID === atUserID)
+  let groupRemark = groupItem ? (JSON.parse(groupItem.ex || '{}')?.remark?.value || '') : ''
+  // 如果查看权限，就清掉
+  if (!hasPromission) {
+    groupRemark = ''
+  }
+  // 在好友中找到好友备注
+  if (index != -1) {
+    // 群聊中展示权限
+    // 好友备注 -->  群聊备注 --> 用户个人昵称  --> 群聊昵称
+    const friendItem = contactList[index]
+    return friendItem.remark || groupRemark || friendItem.nickname
+  } else {
+    return groupRemark || atNickname;
+  }
+};
+
+export const banTimeMap = {
+  "600": t("tenMinutes"),
+  "3600": t("oneHour"),
+  "43200": t("twelveHours"),
+  "86400": t("oneDay"),
+  "2592000": t("smmvMuteTime_30day")
+};
+
+const mutedTime = mss => {
+  const days = Math.floor(mss / (60 * 60 * 24));
+  const hours = Math.floor((mss % (60 * 60 * 24)) / (60 * 60));
+  const minutes = Math.floor((mss % (60 * 60)) / 60);
+  const seconds = mss % 60;
+  return `${combTime(days, t("day"))}${combTime(hours, t("hours"))}${combTime(
+    minutes,
+    t("minute")
+  )}${combTime(seconds, t("seconds"))}`;
+};
+
+const combTime = (value, unit) => {
+  return value > 0 ? `${value}${unit}` : "";
+};
+
+export const parseNtf = (message, isConversation = false, arr) => {
+  let resText = "";
+  if (!message.contentType || message.contentType < 1000) return resText;
+  const { contentType, notificationElem } = message;
+  const detail = JSON.parse(notificationElem.detail);
+  const {
+    group,
+    opUser,
+    quitUser,
+    newGroupOwner,
+    entrantUser,
+    mutedUser,
+    mutedSeconds,
+    invitedUserList,
+    kickedUserList,
+    isPrivate
+  } = detail;
+  const name = getNameAndCheckSelf(opUser, arr);
+  const quitName = getNameAndCheckSelf(quitUser, arr);
+  const enterName = getNameAndCheckSelf(entrantUser, arr);
+  const newOwnerName = getNameAndCheckSelf(newGroupOwner, arr);
+  const mutedName = getNameAndCheckSelf(mutedUser, arr);
+  try {
+    switch (contentType) {
+      // a 创建了群聊
+      case 1501:
+        resText = replaceStringWithValues(t("createGroupNtf"), name);
+        break;
+      // a 修改了群资料
+      case 1502:
+        const noti = group.notification;
+        resText =
+          noti && isConversation
+            ? noti
+            : replaceStringWithValues(t("editGroupInfoNtf"), name);
+        break;
+      // a 退出了群聊
+      case 1504:
+        resText = replaceStringWithValues(t("quitGroupNtf"), quitName);
+        break;
+      // a 将群转让给了 b
+      case 1507:
+        resText = replaceStringWithValues(
+          t("transferredGroupNtf"),
+          name,
+          newOwnerName
+        );
+        break;
+      // b 被 a 踢出群聊
+      case 1508:
+        const kickedNames = kickedUserList
+          .map(item => getNameAndCheckSelf(item, arr))
+          .join("、");
+        resText = replaceStringWithValues(
+          t("kickedGroupNtf"),
+          kickedNames,
+          name
+        );
+        break;
+      // a 邀请 b 加入群聊
+      case 1509:
+        const invitNames = invitedUserList
+          .map(item => getNameAndCheckSelf(item, arr))
+          .join("、");
+        resText = replaceStringWithValues(
+          t("invitedJoinGroupNtf"),
+          name,
+          invitNames
+        );
+        break;
+      // a 加入了群聊
+      case 1510:
+        resText = replaceStringWithValues(t("joinGroupNtf"), enterName);
+        break;
+      // a 解散了群聊
+      case 1511:
+        resText = replaceStringWithValues(t("dismissGroupNtf"), name);
+        break;
+      // b 被 a 禁言
+      case 1512:
+        resText = replaceStringWithValues(
+          t("muteMemberNtf"),
+          mutedName,
+          name,
+          // banTimeMap[mutedSeconds]
+          mutedTime(mutedSeconds)
+        );
+        break;
+      // b 被 a 取消了禁言
+      case 1513:
+        resText = replaceStringWithValues(
+          t("muteCancelMemberNtf"),
+          mutedName,
+          name
+        );
+        break;
+      // a 开起了群禁言
+      case 1514:
+        resText = replaceStringWithValues(t("muteGroupNtf"), name);
+        break;
+      // a 关闭了群禁言
+      case 1515:
+        resText = replaceStringWithValues(t("muteCancelGroupNtf"), name);
+        break;
+      // 群成员信息改变
+      case 1516:
+        resText = replaceStringWithValues(t("memberInfoChangedNtf"), name);
+        break;
+      // 群公告修改
+      case 1519:
+         const notification = group.notification;
+        if (isConversation && notification) {
+          // 群公告 xxx
+          resText = `[${t("groupAc")}]${group?.notification ?? ""}`;
+        } else {
+          // xxx清除了 群公告
+          resText = `${name}${t("clearGroupNotification")}`;
+        }
+        break;
+      // 群名字修改
+      case 1520:
+        resText =
+          replaceStringWithValues(t("whoModifyGroupName"), name) +
+          (group.groupName || "");
+        resText = name + resText
+        break;
+      // 你们已成为好友
+      case 1201:
+        resText = t("friendAddedNtf");
+        break;
+      // 阅后即焚
+      case 1701:
+        resText = isPrivate
+          ? t("openPrivateChatNtf")
+          : t("closePrivateChatNtf");
+        break;
+      default:
+        break;
+    }
+  } catch (e) {
+    console.log("err", e);
+  }
+
+  return resText;
+};
+
+/* 内容转换 */
+export const parseMsg = (
+  message,
+  isConversation = false,
+  replaceIdToNickname = false,
+  showSendName = false,
+  arr
+) => {
+  let sendName = "";
+  let content = "";
+  const arrs = arr.filter(item => item.userID === message.sendID);
+  if (arrs.length > 0) {
+    sendName = message.senderNickname || (arrs[0].remark
+      ? arrs[0].remark
+      : arrs[0].showName
+      ? arrs[0].showName
+      : arrs[0].nickname);
+  } else {
+    sendName =
+      showSendName && message.senderNickname ? message.senderNickname : "";
+  }
+  // sendName = showSendName && message.senderNickname ? message.senderNickname : ''
+  //判断是否是群聊进入
+  if(showSendName){
+    //判断是否设置了好友备注
+    const contactList = JSON.parse(sessionStorage.getItem('contactList')||'[]')
+    const fileterItem = contactList.filter(item=>item.userID==message.sendID)
+    if(fileterItem&&fileterItem[0]&&fileterItem[0].remark){
+      sendName = fileterItem[0].remark
+    }else{
+      const contactStore = useContactStore();
+      const {
+        groupMemberInfoObj,
+      } = storeToRefs(contactStore);
+      //如果没有好友备注，判断是否设置了群聊备注
+      // const groupMemberInfo = JSON.parse(sessionStorage.getItem('groupMemberInfo')||'{}')
+      const groupMemberInfo = groupMemberInfoObj||{}
+      const groupMemberList = groupMemberInfo&&groupMemberInfo[message.groupID]?groupMemberInfo[message.groupID]:[]
+      if(groupMemberList.length>0){
+        const groupItem = groupMemberList.filter(item=>item.userID==message.sendID)
+        if(groupItem&&groupItem[0]&&groupItem[0].ex){
+          const ex = JSON.parse(groupItem[0].ex) || {}
+          if(ex&&ex.remark&&  ex.remark.value)sendName = ex.remark.value
+        }else{
+          const allGroupOwnerOrAdmin = JSON.parse(sessionStorage.getItem('allGroupOwnerOrAdmin')||'{}')
+          if(allGroupOwnerOrAdmin&&allGroupOwnerOrAdmin[message.sendID]&&allGroupOwnerOrAdmin[message.sendID].ex){
+            const ex = JSON.parse(allGroupOwnerOrAdmin[message.sendID].ex) || {}
+            if(ex&&ex.remark&&  ex.remark.value)sendName = ex.remark.value
+          }
+        }
+        
+      }
+    }
+  }
+
+  try {
+    const {
+      contentType,
+      textElem,
+      atTextElem,
+      quoteElem,
+      sendID,
+      notificationElem,
+      customElem,
+      ex,
+      isRead,
+      status
+    } = message;
+
+    switch (contentType) {
+      // 普通文本
+      case 101:
+        content = textElem?.content?.trim();
+        // if (ex && ex.includes('burn_msg')) {
+        //   // content = `[${t('burnAfterReading')}${t('message')}]`
+        //   content = '...'
+        // }
+        break;
+      // 图片
+      case 102:
+        content = `[${t("picture")}]`;
+        break;
+      // 语音
+      case 103:
+        content = `[${t("voice")}]`;
+        break;
+      // 视频
+      case 104:
+        content = `[${t("video")}]`;
+        break;
+      // 文件
+      case 105:
+        content = `[${t("file")}]`;
+        break;
+      // @消息
+      case 106:
+        content = atTextElem?.text?.trim() ?? "";
+        if (replaceIdToNickname && content) {
+          let list = atTextElem?.atUsersInfo;
+          list.forEach(item => {
+            content = content?.replaceAll(
+              `@${item.atUserID}`,
+              `@${getAtNickname(item.atUserID, item.groupNickname)}`
+            );
+          });
+        }
+        break;
+      // 合并
+      case 107:
+        content = `[${t("chatRecord")}]`;
+        break;
+      // 名片
+      case 108:
+        content = `[${t("carte")}]`;
+        break;
+      // 位置
+      case 109:
+        content = `[${t("location")}]`;
+        break;
+      // 自定义
+      case 110:
+        sendName = "";
+        const cusData = JSON.parse(customElem?.data);
+        if (cusData) {
+          const { customType, data: customData } = cusData;
+          // 自定义消息类型判断
+          switch (customType) {
+            // 通話
+            case 901:
+              content = `[${
+                customData.type === "video" ? t("callVideo") : t("callVoice")
+              }]`;
+              break;
+            // emoji
+            case 902:
+              content = `[${t("emoji")}]`;
+              break;
+            // 标签
+            case 903:
+              const textCon = customData?.textElem.content;
+              const soundCon = customData?.soundElem && `[${t("voice")}]`;
+              content = textCon || soundCon || `[${t("unsupportedMessage")}]`;
+              break;
+            // 会议
+            case 905:
+              content = `[${t("meetingMessage")}]`;
+              break;
+            // blockedByFriend 被拉黑
+            case 910:
+              content = t("blockedByFriendHint");
+              break;
+            // deletedByFriend 被删除
+            case 911:
+              content = t("deletedByFriendHint");
+              break;
+            // removedFromGroup 被移除群聊
+            case 912:
+              content = t("removedFromGroupHint");
+              break;
+            // groupDisbanded 群聊解散
+            case 913:
+              content = t("groupDisbanded");
+              break;
+            // 清除会话信息
+            case 1001:
+              content =  `[${t("clearMsg")}]`;
+              break;
+            // 红包消息
+            case 1003:
+              const remark = message.redPackageInfo?.remark || "";
+              content = remark
+                ? `[${t("envelope")}${remark}]`
+                : `[${t("envelope")}]${t("dajidali")}`;
+              break;
+            // 接收红包的消息
+            case 1004:
+              const info = JSON.parse(message.customElem.data).data;
+              if (info) {
+                const receiverName = isSelf(info.receiverUserId)
+                  ? t("me")
+                  : info.receiverNickName;
+                const sendName = isSelf(info.userId)
+                  ? t("me")
+                  : info.nickName ?? "-";
+                // xxx 領取了xxx的紅包
+                content = `${receiverName}${t("envelope_get")}${sendName}${t(
+                  "de"
+                )}${t("envelope")}`;
+
+                if (info.lastAmountOver) {
+                  content += `,${sendName}${t("envelope_get_over")}`;
+                }
+              } else {
+                content = t("envelope_get_message");
+              }
+              break;
+            // 群公告
+            case 1005:
+              content = `[${t("groupAc")}]${customData.text}`;
+              break;
+            // 群聊面具
+            case 1006:
+              // content = `${isSelf(customData.opUser.userID) ? t('you') : customData.opUser.nickname} ${t('revokeMsg')}`
+              content = `${
+                isSelf(customData.opUser.userID)
+                  ? t("you")
+                  : customData.opUser.nickname
+              } ${t('open')}${t('groupMaskOpenTipNew')}`;
+              // 
+              break;
+            // 转发消息
+            case 1100:
+              content = `[${t("chatRecord")}]`;
+              break;
+            case 1010:
+              content = "...";
+              break;
+            case 1011:
+              content = `[${t("burnMsgNotify")}]`;
+              break;
+            // 语音通话
+            case 1013:
+              content = `[${t("callVoice")}]`;
+              break;
+            default:
+              content = `[${t("unsupportedMessage")}]`;
+              break;
+          }
+        } else {
+          content = `[${t("unsupportedMessage")}]`;
+        }
+        break;
+      // 引用回复
+      case 114:
+        content = quoteElem?.text?.trim() ?? "";
+        break;
+      // 自定义表情
+      case 115:
+        content = `[${t("emoji")}]`;
+        break;
+      // OA通知
+      case 1400:
+        sendName = "";
+        const ndt = JSON.parse(notificationElem.detail);
+        content = ndt?.oa?.text ?? "";
+        break;
+      // 撤回消息
+      case 2101:
+        sendName = "";
+        // 单聊
+        if (message.sessionType === 1) {
+          content = `${isSelf(sendID) ? t("you") : message.senderNickname} ${t(
+            "revokeMsg"
+          )}`;
+        } else {
+          const detail = JSON.parse(notificationElem.detail);
+          if (detail) {
+            // 群聊撤回包含：撤回自己消息，群组或管理员撤回其他人消息
+            if (detail?.revokerID === detail?.sourceMessageSendID) {
+              content = `${
+                isSelf(sendID) ? t("you") : message.senderNickname
+              } ${t("revokeMsg")}`;
+            } else {
+              const revoker = isSelf(detail.revokerID)
+                ? t("you")
+                : detail.revokerNickname;
+              const sender = isSelf(detail.sourceMessageSendID)
+                ? t("you")
+                : detail.sourceMessageSenderNickname;
+              content = replaceStringWithValues(
+                t("aRevokeBMsg"),
+                revoker,
+                sender
+              );
+            }
+          } else {
+            content = t("revokeMsgTip");
+          }
+        }
+        break;
+      default:
+        content = `[${t("unsupportedMessage")}]`;
+        break;
+    }
+  } catch (e) {
+    console.log("err", e);
+  }
+
+  if (sendName && content) {
+    if (message.sessionType === 3) {
+      content = `${sendName}:${content}`;
+    } else if (message.sessionType === 1) {
+      content = `${content}`;
+    }
+  }
+
+  // 如果是阅后即焚消息全部显示阅后即焚消息
+  const isNeedBurnMsg = message.ex  && message.ex.includes('burn_msg')
+  if (isNeedBurnMsg) {
+    content = `[${t('burnAfterReading')}${t('message')}]`
+  }
+
+  // 目前只有阅后即焚的消息有4的状态，4表示已焚毁消息
+  if (message.status === 4 || message.contentType === 2300) {
+    content = '...'
+  }
+
+  return content ?? `[${t("unsupportedMessage")}]`;
+};
+
+export const isCurrentWeek = time => {
+  const pastTime = new Date(time).getTime();
+  const today = new Date(new Date().toLocaleDateString());
+  let day = today.getDay();
+  day = day == 0 ? 7 : day;
+  const oneDayTime = 60 * 60 * 24 * 1000;
+  const monday = new Date(today.getTime() - oneDayTime * (day - 1));
+  const nextMonday = new Date(today.getTime() + oneDayTime * (8 - day));
+  if (monday.getTime() <= pastTime && nextMonday.getTime() > pastTime) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export const isZhFn = () => {
+  const lang = localStorage.getItem("language");
+  return lang === "zh-cn";
+};
+
+export const getLatestInfo = (info, list) => {
+  // console.log(info,list,'kds')
+  // 有草稿就用草稿
+  if (info.draftText) {
+    return `<span class="yellow-text">[${t("draftText")}]</span>${
+      info.draftText
+    }`;
+  }
+
+  let prefix = "";
+
+  // 0 正常 2勿扰
+  const { latestMsg, conversationType, recvMsgOpt, unreadCount } = info;
+  if (!latestMsg) return "";
+  const lastMsgParse = JSON.parse(latestMsg);
+  if (!lastMsgParse.clientMsgID) {
+    return "";
+  }
+  let text = "";
+  text = parseNtf(lastMsgParse, true, list);
+  // console.log(lastMsgParse,'latestMsg0000000000000000000000')
+  // console.log(text,'0000000000000000000000000000000000000')
+  if (!text) {
+    text = parseMsg(lastMsgParse, true, true, conversationType === 3, list);
+    // console.log(lastMsgParse,'latestMsg11111111111111111111111111',text)
+    // console.log(text,'111111111111111111111111111111111111')
+  }
+  // 勿扰模式 & 有未读的情况下要把未读数量写上
+  if (recvMsgOpt !== 0 && unreadCount > 0) {
+    text = `[${replaceStringWithValues(
+      t("nPieces"),
+      unreadCount > 99 ? "99+" : unreadCount
+    )}] ${text}`;
+  }
+  // 会话强提示内容
+  // 目前app h5都只有1的场景，现在不翻译2，3
+  // console.log('info-----',info);
+  switch (info.groupAtType) {
+    // @了我提示
+    case 1:
+      // prefix = `<span class="attext">${t("Someone")}</span>`;
+      prefix = `<span class="attext">[${t("atTip")}]</span>`;
+
+      break;
+    // @了所有人提示
+    case 2:
+      prefix = `<span class="attext">[@所有人]</span>`;
+      break;
+    // @了所有人@了我
+    case 3:
+      prefix = `<span class="attext">[@所有且@你]</span>`;
+      break;
+    // 群公告提示
+    case 4:
+      prefix = `<span class="attext">[${t('groupAc')}]</span>`;
+      break;
+  }
+  // console.log(text,'999999999999999999999999999')
+  return prefix + text ?? `[${t("unsupportedMessage")}]`;
+};
+
+export const getChatTimeline = (ms, formatter = "HH:mm") => {
+  const lang = localStorage.getItem("language");
+  const isZh = lang || "us";
+
+  if (dayjs(ms).isToday()) {
+    return dayjs(ms).format(formatter);
+  }
+
+  if (dayjs(ms).isYesterday()) {
+    let pre = "";
+    switch (isZh) {
+      case "zh-cn":
+        pre = "昨天";
+        break;
+      case "us":
+        pre = "Yesterday";
+        break;
+      case "zh-hant-cn":
+        pre = "昨天";
+        break;
+      case "vi-VN":
+        pre = "Hôm qua";
+        break;
+    }
+    return `${pre} ${dayjs(ms).format(formatter)}`;
+  }
+
+  if (isCurrentWeek(ms)) {
+    const weekDayzh = [
+      "星期天",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六"
+    ];
+    const weekDayen = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ];
+    const weekDayVi = [
+      "Chủ nhật",
+      "Thứ hai",
+      "Thứ ba",
+      "Thứ tư",
+      "Thứ năm",
+      "Thứ sáu",
+      "Thứ bảy"
+    ];
+    let weekDayArr = [];
+    switch (isZh) {
+      case "zh-cn":
+        weekDayArr = weekDayzh;
+        break;
+      case "us":
+        weekDayArr = weekDayen;
+        break;
+      case "zh-hant-cn":
+        weekDayArr = weekDayzh;
+        break;
+      case "vi-VN":
+        weekDayArr = weekDayVi;
+        break;
+    }
+    return `${weekDayArr[new Date(ms).getDay()]} ${dayjs(ms).format(
+      formatter
+    )}`;
+  }
+
+  const msYear = dayjs(ms).format("YYYY");
+  const activeYear = dayjs().format("YYYY");
+  if (msYear === activeYear) {
+    return dayjs(ms).format(
+      isZh === "zh-cn" ? "MM月DD日 HH:mm" : "MM/DD HH:mm"
+    );
+  }
+
+  return dayjs(ms).format(
+    isZh === "zh-cn" ? "YYYY年MM月DD日 HH:mm" : "YYYY/MM/DD HH:mm"
+  );
+};
+
+export const conversationSort = list =>
+  list.sort((a, b) => {
+    // 都置顶或都不置顶的时候，按照时间排序
+    if (
+      (a.isPinned == true && b.isPinned == true) ||
+      (a.isPinned != true && b.isPinned != true)
+    ) {
+      // 草稿时间优先
+      const aCompare =
+        a.draftTextTime > a.latestMsgSendTime
+          ? a.draftTextTime
+          : a.latestMsgSendTime;
+      const bCompare =
+        b.draftTextTime > b.latestMsgSendTime
+          ? b.draftTextTime
+          : b.latestMsgSendTime;
+
+      if (aCompare > bCompare) {
+        return -1;
+      } else if (aCompare < bCompare) {
+        return 1;
+      } else {
+        // return (a.showName ?? "").compareTo((b.showName ?? ""));
+        return 0;
+      }
+    } else if (a.isPinned == true && b.isPinned != true) {
+      return -1;
+    } else {
+      return 1;
+    }
+  });
+
+export const replaceSearchText = (name, matchText) => {
+  if (!name) return "";
+  const regex = new RegExp(matchText, "g"); // 创建正则表达式对象，设置全局标志'g'
+  return name.replace(regex, `<span class="blue-text">${matchText}</span>`);
+};
+
+export const calChatTimeInterval = (list, calculate = true) => {
+  if (!calculate) return list;
+  let milliseconds = list[0]?.sendTime;
+  if (milliseconds == null) return list;
+  // list[0].exMap['showTime'] = true;
+  let lastShowTimeStamp = milliseconds;
+  for (let i = 0; i < list.length; i++) {
+    const index = i + 1;
+    if (index <= list.length - 1) {
+      const cur = getDateTimeByMs(lastShowTimeStamp);
+      const milliseconds = list[index].sendTime;
+      const next = getDateTimeByMs(milliseconds);
+      if (next.getTime() - cur.getTime() > 5 * 60 * 1000) {
+        lastShowTimeStamp = milliseconds;
+        // list[index].exMap['showTime'] = true;
+      }
+    }
+  }
+  return list;
+};
+
+export const getDateTimeByMs = (ms, isUtc = false) => {
+  return new Date(ms);
+};
+
+export const toJsonNoOrigin = val => {
+  const data = {};
+  data["clientMsgID"] = val.clientMsgID;
+  data["serverMsgID"] = val.serverMsgID;
+  data["createTime"] = val.createTime;
+  data["sendTime"] = val.sendTime;
+
+  //不显示发送id
+  //data['sendID'] = val.sendID;
+  //不显示接收者id
+  // data['recvID'] = val.recvID;
+
+  data["msgFrom"] = val.msgFrom;
+  data["contentType"] = val.contentType;
+  data["senderPlatformID"] = val.senderPlatformID;
+
+  //不显示昵称
+  //data['senderNickname'] = val.senderNickname;
+  //data['senderFaceUrl'] = val.senderFaceUrl;
+  //data['groupID'] = val.groupID;
+
+  // data['content'] = val.content;
+  data["seq"] = val.seq;
+  //data['isRead'] = val.isRead;
+  // data['hasReadTime'] = val.hasReadTime;
+  data["status"] = val.status;
+  // data['offlinePush'] = val.offlinePush?.toJson();
+  data["attachedInfo"] = val.attachedInfo;
+  data["ex"] = val.ex;
+  data["exMap"] = val.exMap;
+  data["sessionType"] = val.sessionType;
+  data["pictureElem"] = val.pictureElem;
+  data["soundElem"] = val.soundElem;
+  data["videoElem"] = val.videoElem;
+  data["fileElem"] = val.fileElem;
+  data["atTextElem"] = val.atTextElem;
+  data["locationElem"] = val.locationElem;
+  data["customElem"] = val.customElem;
+  //去除引用消息的消息
+  if (val.quoteElem) {
+    const qe = {
+      text: "",
+      quoteMessage: null
+    };
+    qe.text = val.quoteElem?.text;
+    data["quoteElem"] = qe; //val.quoteElem?.toJson();
+  }
+
+  data["mergeElem"] = val.mergeElem;
+  data["notificationElem"] = val.notificationElem;
+  data["faceElem"] = val.faceElem;
+  data["attachedInfoElem"] = val.attachedInfoElem;
+  data["isExternalExtensions"] = val.isExternalExtensions;
+  data["isReact"] = val.isReact;
+  data["textElem"] = val.textElem;
+  data["cardElem"] = val.cardElem;
+  data["advancedTextElem"] = val.advancedTextElem;
+  //data['typingElem'] = (val.typingElem);;
+  data["localEx"] = val.localEx;
+  return data;
+};
+
+export const toJsonNoQuoteMsg = val => {
+  const data = {};
+  data["clientMsgID"] = val.clientMsgID;
+  data["serverMsgID"] = val.serverMsgID;
+  data["createTime"] = val.createTime;
+  data["sendTime"] = val.sendTime;
+  data["sendID"] = val.sendID;
+  data["recvID"] = val.recvID;
+  data["msgFrom"] = val.msgFrom;
+  data["contentType"] = val.contentType;
+  data["senderPlatformID"] = val.senderPlatformID;
+  data["senderNickname"] = val.senderNickname;
+  data["senderFaceUrl"] = val.senderFaceUrl;
+  data["groupID"] = val.groupID;
+  // data['content'] = val.content;
+  data["seq"] = val.seq;
+  data["isRead"] = val.isRead;
+  data["hasReadTime"] = val.hasReadTime;
+  data["status"] = val.status;
+  data["offlinePush"] = val.offlinePush;
+  data["attachedInfo"] = val.attachedInfo;
+  data["ex"] = val.ex;
+  data["exMap"] = val.exMap;
+  data["sessionType"] = val.sessionType;
+  data["pictureElem"] = val.pictureElem;
+  data["soundElem"] = val.soundElem;
+  data["videoElem"] = val.videoElem;
+  data["fileElem"] = val.fileElem;
+  data["atTextElem"] = val.atTextElem;
+  data["locationElem"] = val.locationElem;
+  data["customElem"] = val.customElem;
+
+  //去除引用消息的消息
+  if (val.quoteElem) {
+    const qe = {
+      text: "",
+      quoteMessage: null
+    };
+    qe.text = val.quoteElem?.text;
+    data["quoteElem"] = qe; //val.quoteElem?.toJson();
+  }
+
+  data["mergeElem"] = val.mergeElem;
+  data["notificationElem"] = val.notificationElem;
+  data["faceElem"] = val.faceElem;
+  data["attachedInfoElem"] = val.attachedInfoElem;
+  data["isExternalExtensions"] = val.isExternalExtensions;
+  data["isReact"] = val.isReact;
+  data["textElem"] = val.textElem;
+  data["cardElem"] = val.cardElem;
+  data["advancedTextElem"] = val.advancedTextElem;
+  data["typingElem"] = val.typingElem;
+  data["localEx"] = val.localEx;
+  return data;
+};
+
+// type txt为文本，不传则为写死的 dhms
+export const formatTime = (mss, type) => {
+  let result = '';
+  const days = Math.floor(mss / (60 * 60 * 24));
+  const hours = Math.floor((mss % (60 * 60 * 24)) / (60 * 60));
+  const minutes = Math.floor((mss % (60 * 60)) / 60);
+  const seconds = mss % 60;
+  if (days > 0) {
+    result += combTime(days, type === 'txt' ? t("day") : 'd');
+  }
+  if (hours > 0) {
+    result += combTime(hours, type === 'txt' ? t("hours") : 'h');
+  }
+  if (minutes > 0) {
+    result += combTime(minutes, type === 'txt' ? t("minute") : 'm');
+  }
+  if (seconds > 0) {
+    result += combTime(seconds, type === 'txt' ? t("seconds") : 's');
+  }
+  return result;
+}
+
+// 把被转义过的字符串转回原本的字符串
+export const escape2Html = (str) => {
+  const arrEntities = {'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
+  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){
+    return arrEntities[t];
+  })
+}
+
+export const fileTypeMap = {
+  'image': ['jpeg', 'jpg', 'png', 'gif', 'webp', 'bmp', 'tiff', 'svg', 'psd', 'sketch'],
+  'video': ['mp4', 'api', 'mov', 'mkv', 'wmv', 'flv', 'mpeg', 'webm'],
+  'audio': ['mp3', 'wav', 'flac', 'aac', 'wma', 'm4a', 'ogg', 'aiff', 'alac', 'midi'],
+  'doc': ['doc', 'docx'],
+  'xls': ['xls', 'xlsx'],
+  'ppt': ['ppt', 'pptx'],
+  'numbers': ['numbers'],
+  'pages': ['pages'],
+  'key': ['key'],
+  'txt': ['txt'],
+  'pdf': ['pdf'],
+  'epub': ['epub'],
+  'exe': ['exe', 'msi'],
+  'apk': ['apk'],
+  'ipa': ['app', 'ipa'],
+  'rar': ['zip', 'rar', '7z'],
+  'dmg': ['dmg', 'iso'],
+  'code': ['py', 'java', 'cpp', 'html', 'css', 'js', 'php', 'pyc', 'json', 'xml', 'sql', 'sqlite', 'csv']
+}
+
+// type 真实文件类型 获取对应的icon
+export const getFileTypeIconName = (type) => {
+  let resIcon = 'unknown'
+  if (!type) return resIcon
+  for (const [key, list] of Object.entries(fileTypeMap)) {
+    if (list.includes(type.toLowerCase())) {
+      resIcon = key
+    }
+  }
+
+  return resIcon
+}
+
+export const formatFileSize = sizeInBytes => {
+  if (!sizeInBytes) return ''
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let i = 0;
+  while (sizeInBytes >= 1024) {
+      sizeInBytes /= 1024;
+      i++;
+  }
+  return sizeInBytes.toFixed(2) + units[i];
+}
+
+export const isMobileBrowser = () => {
+  const isMobileNavigator = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+  // 是手机 或者屏幕小于750
+  return isMobileNavigator || window.innerWidth <= 750
+}
+
+export const splitArray = (arr, size) => {
+  return arr.reduce((acc, cur, index) => {
+    const chunkIndex = Math.floor(index / size);
+    if (!acc[chunkIndex]) {
+      acc[chunkIndex] = []; // 初始化子数组
+    }
+    acc[chunkIndex].push(cur);
+    return acc;
+  }, []);
+}
+
+export const setImgStyle = (width, height) => {
+  let obj = {
+    width: width,
+    height: width,
+  };
+  // 宽度大于180的图片
+  if (width > 180) {
+    obj.width = 180;
+    obj.height = height / (width / 180);
+  }
+  // 横向图片
+  if (width > height) {
+    obj.width = 220;
+    obj.height = height / (width / 220);
+  }
+  // 纵向小图
+  if (width <= 180 && width < height) {
+    obj.width = width
+    obj.height = height
+  }
+  return obj;
+};
+
+export const getUrlPrefix = (url) => {
+  // 使用URL对象来解析URL
+  const parsedUrl = new URL(url);
+  // 获取协议和域名部分
+  const prefixDomain = `${parsedUrl.protocol}//${parsedUrl.host}`;
+  return prefixDomain || parsedUrl.origin
+}
+
+export const checkImgUrlLoadSuccess = (url) => new Promise((res) => {
+  const image = new Image()
+  image.onload = () => {
+    res(image)
+  }
+  image.onerror = () => {
+    res(null)
+  }
+  image.src = url
+})
+
+export const checkVideoUrlLoadSuccess = (url)  => new Promise((res) => {
+  const video = document.createElement('video')
+  video.src = url
+  video.addEventListener('canplaythrough', () => {
+    res(true)
+    video.remove()
+  });
+  video.addEventListener('error', () => {
+    res(false)
+    video.remove()
+  })
+  document.body.appendChild(video)
+})
+
+export const switchCdnLoadSource = async (defaultPath, type = 'image', defaultImg = defaultAvatar) => {
+  const appConfig = sessionStorage.getItem("appConfig") ? JSON.parse(sessionStorage.getItem("appConfig")) : {}
+  // 找出当前oss地址对应的cdn地址列表
+  const cdnList = appConfig.oss_cdn_list.filter(item => defaultPath.startsWith(item.oss_prefix))
+  if (!cdnList.length) return
+  const preUrlPrefix = getUrlPrefix(defaultPath)
+  async function tryLoadImg(list, path) {
+    if (!list.length) {
+      return defaultImg
+    }
+    // 第一个开始取
+    const cdnPrefix = list.shift()
+    const realPath = path.replace(preUrlPrefix, cdnPrefix.cdn_prefix)
+    let res = null
+    if (type === 'image') {
+      res = await checkImgUrlLoadSuccess(realPath)
+    }
+    if (type === 'video') {
+      res = await checkVideoUrlLoadSuccess(realPath)
+    }
+    if (res) {
+      return realPath
+    } else {
+      return tryLoadImg(list, path)
+    }
+  }
+
+  const resUrl = await tryLoadImg(cdnList, defaultPath)
+  return resUrl
+}
+
+// 这里只有直接使用van-image的图片并传入的url是对象中取的时候才可以这么使用
+/**
+ * 
+ * @param {Event} e 浏览器事件对象
+ * @param {Object} source 需要更新的对象
+ * @param {String} updateKey 需要更新对象的key值
+ */
+export const handleImgCdnError = async (e, source, updateKey, defaultImg = defaultAvatar) => {
+  const errorUrl = e.target.src
+  console.log('errorUrlerrorUrlerrorUrlerrorUrl', errorUrl)
+  const validUrl = await switchCdnLoadSource(errorUrl, 'image', defaultImg)
+  if (source) {
+    source[updateKey] = validUrl || defaultAvatar
+  }
+}
+
+export const uploadFileByOss = async (file, isNext = false) => {
+  const ossData = {
+    file_name: file.name,
+    content_type: file.type,
+    uuid: file.uid,
+    file_from: 1
+  }
+  const upLoadingFn = isNext ? contactApi.awsPutUrls : contactApi.ossPutUrls
+
+  try {
+    const res = await upLoadingFn(ossData)
+    if (res.code != 0) {
+      // 如果上传失败，尝试使用另一个api上传
+      if (!isNext) {
+        uploadFileByOss(file, true)
+      } else {
+        // 如果是aws上传仍然失败，就直接失败了
+        console.log('上传失败~')
+        resolve(false)
+      }
+      return
+    }
+    const { access_url, put_url } = res.data;
+    const fileRes = await axios({
+      method: 'put',
+      url: put_url,
+      data: file,
+      headers: {
+        'Content-Type': file.type
+      }
+    });
+    return { access_url, fileRes }
+  } catch(e) {
+    console.log('eeeee', e)
+    if (!isNext) {
+      return await uploadFileByOss(file, true)
+    }
+  }
+}
+
+export const getFingerIdAndSave = async () => {
+  // sdk登录前获取设备信息并填入
+  const fpPromise = await FingerprintJS.load()
+  const res = await fpPromise.get()
+  console.log('res.visitorId:::', res.visitorId)
+  localStorage.setItem('visitorId', res.visitorId)
+}
+
+export const im_config = () => {
+  const im_token = window.localStorage.getItem('im_token')
+  const token = window.localStorage.getItem('token')
+  const user_id = window.localStorage.getItem('user_id')
+  const visitorId = window.localStorage.getItem('visitorId')
+  const usePlatformID = JSON.parse(sessionStorage.getItem('usePlatformID'));
+  const { ws_url, api_3, backup_http_addrs } = window.WEB_CONFIG
+  var config = {
+    userID: user_id, // IM 用户 userID
+    token: im_token, // IM 用户令牌
+    // platformID: 3, // 当前登录平台号0
+    // platformID: useSystem(), //随便填的
+    platformID: usePlatformID, //随便填的
+    apiAddr: api_3,
+    wsAddr: ws_url,
+    backupHttpAddrs: backup_http_addrs,
+    deviceID: visitorId,
+  }
+  return config
+}
+
+/**
+ * 获取通话显示的文本
+ *
+ * @param callMsg 通话消息对象
+// 1 发起通话超时--由于发送通知给对方时，请求失败导致的超时
+static const END_SEND_TIMEOUT = 1;
+// 2 等待对方接通超时
+static const END_WAIT_RECEIVER_TIMEOUT = 2;
+// 3 主动点击了挂断
+static const END_USER_CLICK = 3;
+// 4 TXSDK发生错误
+static const END_SDK_ERROR = 4;
+// 5 进入房间失败了
+static const END_SDK_ENTER_ROOM_ERROR = 5;
+// 6 我退出房间
+static const END_SDK_LEAVE_ROOM = 6;
+// 7 对方退出房间
+static const END_SDK_OTHER_LEAVE_ROOM = 7;
+// 8 发起通话错误--由于发送通知给对方时，请求失败导致的错误
+static const END_SEND_ERROR = 8;
+// 9 当前正在通话中，不能接听其他通话
+static const END_CURRENT_CALLING = 9;
+ * @returns 通话显示的文本
+ */
+export const getCallShowText = (callMsg) => {
+  if (!callMsg) {
+    return '[通话]'
+  }
+  const duration = callMsg.call_duration || 0
+  // 成功通话的
+  if (duration > 0) {
+    return replaceStringWithValues(t('callDuration'), formatTimeForCallTime(duration))
+  }
+
+  // 没有结束人id
+  if(!callMsg.end_from_uid) {
+    return `已结束通话`
+  }
+  const myUserId = localStorage.getItem("user_id")
+  // 当前角色发起
+  const isSelfCall = callMsg.senderId === myUserId
+  // 自己点结束
+  const isSelfEnd = callMsg.end_from_uid === myUserId
+  // 对方点结束
+  const isOtherEnd = !isSelfCall && callMsg.sender_id === callMsg.end_from_uid
+  let prefix = ''
+  prefix = isSelfEnd ? '' : t('target')
+  // 是本人结束的 或者 是对方发起对方就取消的
+  if (isSelfEnd || isOtherEnd) {
+    return `${prefix}${t('cancelled')}`
+  }
+
+  let content = ''
+  switch (callMsg.end_code) {
+    // 当前正在通话中，不能接听其他通话
+    case 9:
+      content = isSelfCall ? t('callDoing') : t('callRemoteDoing')
+      break;
+    // 主动点击了挂断
+    case 3:
+      content = isSelfCall ? t('cancelledByCaller') : t('cancelled')
+      break;
+    default:
+      content = isSelfCall ? t('cancelled') : t('notAccept')
+      break;
+  }
+
+  return `${prefix}${content}`
+}
+
+const formatTimeForCallTime = mss => {
+  const days = Math.floor(mss / (60 * 60 * 24));
+  const hours = Math.floor((mss % (60 * 60 * 24)) / (60 * 60));
+  const minutes = Math.floor((mss % (60 * 60)) / 60);
+  const seconds = mss % 60;
+  return `${hours > 0 ? `${`0${minutes}`.slice(-2)}:`  : '' }${`0${minutes}`.slice(-2)}:${`0${seconds}`.slice(-2)}`;
+};
+///多少分钟前在线--单位是：秒
+///一小时以内，显示多少分钟前在线
+///小于24小时，显示xx小时前在线
+///离线大于15天，显示很久没上线
+///检测是否是昨天在线-显示昨天在线
+///其他，显示近期在线
+export const calculateOnlineStatus = (dTime, lastLogoutTime, serverTime, row) => {
+  var minute = Math.floor(dTime / 60)
+  if (row.userStatus.status === 1) {
+    return '在线'
+  }
+  if (row.userStatus.lastLogoutTime == 0 && row.userStatus.lastLoginTime == 0) {
+    return '从未登录'
+  }
+  if (minute === 0) {
+    minute = 1
+  }
+  if (minute < 60) {
+    return minute + '分钟前在线'
+  }
+
+  var hour = Math.floor(minute / 60)
+  if (hour < 24) {
+    return hour + '小时前在线'
+  }
+
+  if (hour > 24 * 15) {
+    return '很久没上线'
+  }
+
+  // 超过24小时，判断是否是昨天
+  var currentTime = new Date(serverTime * 1000)
+  var todayStart = new Date(
+    currentTime.getFullYear(),
+    currentTime.getMonth(),
+    currentTime.getDate()
+  )
+  // 昨天开始的时间
+  var ms = todayStart.getTime() - 1000 * 60 * 60 * 24
+  if (lastLogoutTime * 1000 > ms) {
+    return '昨天在线'
+  } else {
+    return '近期在线'
+  }
+}
\ No newline at end of file
diff --git a/src/utils/useConversationState.js b/src/utils/useConversationState.js
new file mode 100644
index 0000000..0193b26
--- /dev/null
+++ b/src/utils/useConversationState.js
@@ -0,0 +1,60 @@
+import useConversationStore from "@/store/modules/conversation";
+import { getSDK } from '@/utils/openIM'
+import { GroupAtType, GroupSessionTypes } from '@/utils/constant'
+import { onBeforeRouteLeave } from "vue-router";
+
+export default function useConversationState() {
+  const conversationStore = useConversationStore();
+
+  // group info
+  const getCurrentGroupInfo = () => {
+    if (
+      GroupSessionTypes.includes(
+        conversationStore.storeCurrentConversation.conversationType
+      )
+    ) {
+      conversationStore.getCurrentGroupInfoFromReq();
+      conversationStore.getCurrentMemberInGroupFromReq();
+    }
+  };
+
+  // conversation state
+  const checkConversationState = () => {
+    if (conversationStore.storeCurrentConversation.unreadCount > 0) {
+      getSDK.markConversationMessageAsRead(
+        conversationStore.storeCurrentConversation.conversationID
+      );
+    }
+    if (
+      conversationStore.storeCurrentConversation.groupAtType !==
+      GroupAtType.AtNormal
+    ) {
+      getSDK.resetConversationGroupAtType(
+        conversationStore.storeCurrentConversation.conversationID
+      );
+    }
+  };
+
+  watch(
+    () => conversationStore.storeCurrentConversation.conversationID,
+    async (newVal) => {
+      if (newVal) {
+        getCurrentGroupInfo();
+        checkConversationState();
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  onBeforeRouteLeave((to, from, next) => {
+    if (to.name === "Conversation") {
+      checkConversationState();
+      conversationStore.updateCurrentConversation({});
+      conversationStore.updateQuoteMessage();
+    }
+    next();
+  });
+
+}
diff --git a/src/utils/useGlobalEvent.js b/src/utils/useGlobalEvent.js
new file mode 100644
index 0000000..7537882
--- /dev/null
+++ b/src/utils/useGlobalEvent.js
@@ -0,0 +1,959 @@
+import { onMounted, onUnmounted } from 'vue'
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { conversationSort, IMSDK } from "@/utils/imCommon";
+import { CbEvents } from '@/utils/openIM/constant'
+import { useI18n } from "vue-i18n"
+import {
+  MessageType,
+  MessageReceiveOptType,
+  SessionType,
+} from "@/utils/constant";
+import { useMessageStore } from "@/stores/modules/message";
+import useConversationStore from "@/stores/modules/conversation";
+import emitter from "@/utils/events";
+import { useThrottleFn } from "@vueuse/core";
+import { storeToRefs } from 'pinia'
+// import {
+//   getAccessedFriendApplication,
+//   getAccessedGroupApplication,
+// } from "@/utils/storage";
+import { showLoadingToast } from "vant";
+import { feedbackToast } from "@/utils/common";
+import { reset_sdk, im_config } from "@/utils/sdkInit.js";
+import { showImagePreview, showToast } from "vant";
+import { removeAllLocalstorage } from '@/utils/tools'
+// import messageRing from "@assets/audio/newMsg.mp3";
+
+const BusinessAllowType = {
+  Allow: 1,
+  NotAllow: 2,
+}
+const GroupSessionTypes = [SessionType.Group, SessionType.WorkingGroup];
+export function useGlobalEvent({
+  getNewfriendApplyCount
+}) {
+  const userStore = useUserStore();  
+  const { setToken, setUserInfo, setGroupChatConfigs, setPrivateChatConfigs, setFriendApplication, setPrivateChatConfig, setAppConfig,setGroupChatConfig } = userStore;
+  const { userInfo, privateChatConfig, appConfig,groupChatConfig } = storeToRefs(userStore);
+  const contactStore = useContactStore();
+  const { clearStore } = contactStore;
+  const { groupMemberInfo } = storeToRefs(contactStore)
+  const {
+    updateContact,
+    pushNewContact,
+    pushNewBlack,
+    updateBlackList,
+    pushNewRecvFriendApplication,
+    pushNewSendFriendApplication,
+    updateRecvFriendApplicationList,
+    updateSendFriendApplicationList,
+    setGroupMemberInfo,
+    updateGroupMemberInfo,
+    updateGroupMemberInfos,
+    updateGroupMemberInfos1,
+    updateNewFriendApply,
+    setNewFriendApplyCount,
+    updateGroupList,
+    pushNewGroup,
+    setmyGroupInfo,
+    setGroupInfo,
+    getGroupMemberInfo,
+    setIsGroupSend
+  } = contactStore
+  const { groupInfo, chatList, contactList } = storeToRefs(contactStore);
+
+  // conversation
+  const conversationStore = useConversationStore()
+  const { updateConversationOffset  } = conversationStore
+  const { conversationOffset  } = storeToRefs(conversationStore);
+  const messageStore = useMessageStore();
+  const { pushNewMessage, updateOneMessage, updateMessageNicknameAndFaceUrl, storeHistoryMessageList } = messageStore
+  const { t } = useI18n();
+  const router = useRouter();
+
+  let cacheConversationList = [];
+  let syncToast = null;
+  let audioEl = null;
+
+const $api = inject("$api");
+
+  const setIMListener = () => {
+    // account
+    IMSDK.on(CbEvents.OnSelfInfoUpdated, selfUpdateHandler);
+    IMSDK.on(CbEvents.OnConnecting, connectingHandler);
+    IMSDK.on(CbEvents.OnConnectFailed, connectFailedHandler);
+    IMSDK.on(CbEvents.OnConnectSuccess, connectSuccessHandler);
+    IMSDK.on(CbEvents.OnKickedOffline, kickHandler);
+    IMSDK.on(CbEvents.OnUserTokenExpired, expiredHandler);
+    IMSDK.on(CbEvents.OnPingTimeout, pingTimeout);
+    // sync
+    IMSDK.on(CbEvents.OnSyncServerStart, syncStartHandler);
+    IMSDK.on(CbEvents.OnSyncServerFinish, syncFinishHandler);
+    IMSDK.on(CbEvents.OnSyncServerFailed, syncFailedHandler);
+    // message
+    IMSDK.on(CbEvents.OnRecvNewMessage, newMessageHandler);
+    IMSDK.on(CbEvents.OnRecvNewMessages, newMessagesHandler);
+    IMSDK.on(CbEvents.OnNewRecvMessageRevoked, revokedMessageHandler);
+    // conversation
+    IMSDK.on(CbEvents.OnConversationChanged, conversationChnageHandler);
+    IMSDK.on(CbEvents.OnNewConversation, newConversationHandler);
+    IMSDK.on(
+      CbEvents.OnTotalUnreadMessageCountChanged,
+      totalUnreadChangeHandler
+    );
+    // friend
+    IMSDK.on(CbEvents.OnFriendInfoChanged, friendInfoChangeHandler);
+    IMSDK.on(CbEvents.OnFriendAdded, friendAddedHandler);
+    IMSDK.on(CbEvents.OnFriendDeleted, friendDeletedHandler);
+    // blacklist
+    IMSDK.on(CbEvents.OnBlackAdded, blackAddedHandler);
+    IMSDK.on(CbEvents.OnBlackDeleted, blackDeletedHandler);
+    // group
+    IMSDK.on(CbEvents.OnJoinedGroupAdded, joinedGroupAddedHandler);
+    IMSDK.on(CbEvents.OnJoinedGroupDeleted, joinedGroupDeletedHandler);
+    IMSDK.on(CbEvents.OnGroupDismissed, groupDismissedHandler);
+    IMSDK.on(CbEvents.OnGroupInfoChanged, groupInfoChangedHandler);
+    IMSDK.on(CbEvents.OnGroupMemberAdded, groupMemberAddedHandler);
+    IMSDK.on(CbEvents.OnGroupMemberDeleted, groupMemberDeletedHandler);
+    IMSDK.on(CbEvents.OnGroupMemberInfoChanged, groupMemberInfoChangedHandler);
+    //--OnGroupMemberStatusChanged新增一个监听事件,监听后端返回邀请好友进群时好友的状态是已封号或已注销
+    //是一个json格式的string，如：[{userId:'123456',status:'1'},{userId:'654321',status:'2'}]
+    //status:1--已封号；status--2已注销
+    IMSDK.on(CbEvents.OnGroupMemberStatusChanged,()=>{
+      //这里写监听到数据后的处理方法
+    });
+    // application
+    IMSDK.on(CbEvents.OnFriendApplicationAdded, friendApplicationAddedHandler);
+    IMSDK.on(
+      CbEvents.OnFriendApplicationAccepted,
+      friendApplicationProcessedHandler
+    );
+    IMSDK.on(
+      CbEvents.OnFriendApplicationRejected,
+      friendApplicationProcessedHandler
+    );
+    IMSDK.on(CbEvents.OnGroupApplicationAdded, groupApplicationAddedHandler);
+    IMSDK.on(
+      CbEvents.OnGroupApplicationAccepted,
+      groupApplicationProcessedHandler
+    );
+    IMSDK.on(
+      CbEvents.OnGroupApplicationRejected,
+      groupApplicationProcessedHandler
+    );
+    IMSDK.on(
+      CbEvents.OnCustomNotifications,
+      customNotificationsHandler
+    );
+    IMSDK.on(
+      CbEvents.OnUserStatusChanged,
+      userStatusChangedHandler
+    );
+    IMSDK.on(CbEvents.OnKickedOfflineWithExData, kickedOfflineWidthExData);
+    IMSDK.on(CbEvents.OnUserTokenExpired, kickedOfflineWidthExpired);
+    // 删除该用户在本群发送的群聊消息
+    // IMSDK.on(
+    //   CbEvents.OnDeleteUserMsg,
+    //   deleteUserMsgHandler
+    // );
+  };
+
+  const kickedOfflineWidthExpired = (data) => {
+    setTimeout(() => {
+      setToken('');
+      setUserInfo({});
+      removeAllLocalstorage();
+      IMSDK.logout();
+      clearStore();
+      localStorage.removeItem('im_token')
+      localStorage.removeItem('token')
+      localStorage.removeItem('user_id')
+      location.reload();
+    }, 3000)
+  }
+
+  const kickedOfflineWidthExData = async (data) => {
+    console.log('OnKickedOfflineWithExData==========', data)
+    const { data: innerData } = data || {}
+    const { code, data: kickInfo, device_id, user_id } = innerData || {}
+    // 测试专用
+    const activeDeviceId = localStorage.getItem('visitorId')
+    const activeUserId = localStorage.getItem('user_id')
+    // 同一个用户同一个设备，可以多个tab,就不踢出
+    // if (data.errCode === 0 && device_id === activeDeviceId && user_id === activeUserId) {
+    //   return
+    // }
+    if (code === 20004) {
+      const info = JSON.parse(kickInfo || '{}') || {}
+      if (info.device_id === activeDeviceId) {
+        return
+      }
+      showToast("该设备登录存在风险，请使用可信设备登录")
+    }
+    // 20001 为移除信任设备踢掉
+    if (code === 20001) {
+      const info = JSON.parse(kickInfo || '{}') || {}
+      if (info.device_id !== activeDeviceId) {
+        return
+      }
+      
+      showToast("该设备登录存在风险，请使用可信设备登录")
+    }
+
+    // 20002 注销踢掉
+    if (code === 20002 && kickInfo === '') {
+      showToast("账号已注销")
+    }
+  
+    if (![20001, 20002].includes(code)) {
+      showToast("已被强制下线，请重新登录！") 
+    }
+    
+    // debugger
+    setTimeout(() => {
+      setToken('');
+      setUserInfo({});
+      removeAllLocalstorage();
+      // debugger
+      IMSDK.logout();
+      clearStore();
+      localStorage.removeItem('im_token')
+      localStorage.removeItem('token')
+      localStorage.removeItem('user_id')
+      location.reload();
+    }, 3000)
+  }
+  // 用户状态变化 0 正常 1 封号 2 注销
+  // data: [{userId: '', status: 1|2|3 }]
+  // 这个事件监听了，但是暂时没有地方使用（2.7.0）
+  const userStatusChangedHandler = (data) => {
+    emitter.emit('USER_STATUS_CHANGED', data)
+  }
+
+  const customNotificationsHandler = async({data}) => {
+    // ConversationRuleNotification= 10000 //发言频率规则通知
+    // GroupConfNotification= 10001 //群聊配置通知
+    // AddFriendConfNotification= 10002 //添加好友配置通知
+    // RedPackConfNotification= 10003 //红包配置通知
+    // BurnAfterReadingConfNotification= 10004 //阅后即焚配置通知
+    // UserInfoConfNotification= 10005 //用户信息配置通知
+    // ForwardOrGroupSendingConfNotification = 10006 //转发&群发功能配置通知
+    const messageTypeArr = [10000, 10001, 10002, 10003, 10004, 10005, 10006]
+    console.log('data----',data,JSON.parse(data.content),messageTypeArr);
+    if(messageTypeArr.includes(data.messageType)) {
+      const configRes = await $api.login.getConfigInfo();
+      if(configRes.code !== 0) return;
+      setAppConfig({
+        ...appConfig.value,
+        ...configRes.data
+      });
+      if(data.messageType === 10006) {
+        setIsGroupSend(appConfig.value,userInfo.value)
+      }
+    }
+  }
+
+  const selfUpdateHandler = ({ data }) => {
+    const imUserInfo = data;
+    userStore.updateSelfInfo({
+      ...imUserInfo,
+      ...userStore.storeSelfInfo,
+      globalRecvMsgOpt: imUserInfo.globalRecvMsgOpt,
+    });
+  };
+  const connectingHandler = () => { };
+  const connectFailedHandler = ({ errCode }) => {
+    console.error("建立wss失败:", errMsg)
+    if (errCode == 705) {
+      tryOut(t("messageTip.loginExpiration"));
+    }
+  };
+  const connectSuccessHandler = () => { };
+  const kickHandler = () => {
+    console.log('OnKickedOffline==========', data)
+    showToast("已被强制下线，请重新登录！")
+    // tryOut(t("messageTip.loginKicked"))
+  };
+  const expiredHandler = () => {
+    console.log('token过期')
+    // tryOut(t("messageTip.loginExpiration"))
+  };
+
+  const pingTimeout =(data)=>{
+    console.log('ping timeout', data)
+  }
+  const tryOut = (message) =>
+    feedbackToast({
+      message,
+      error: message,
+      onClose: () => {
+        userStore.userLogout(true);
+        router.push("/login");
+      },
+    });
+
+  // sync
+  const syncStartHandler = () => {
+    userStore.isSyncing = true;
+    syncToast = showLoadingToast({
+      message: t("loading_ing"),
+      forbidClick: true,
+    });
+  };
+  const syncFinishHandler = () => {
+    userStore.isSyncing = false;
+    syncToast?.close();
+    syncToast = null;
+  };
+  const syncFailedHandler = () => {
+    userStore.isSyncing = false;
+    if (!syncToast) return;
+    syncToast.message = t("syncFailed");
+    syncToast.close();
+    syncToast = null;
+  };
+  // 单个处理消息的回调
+  const newMessageHandler = ({
+    data,
+  }) => {
+    handleNewMessage(data);
+  };
+
+  // 批量处理消息的回调
+  const newMessagesHandler = ({
+    data,
+  }) => {
+    handleNewMessages(data);
+  };
+
+  // 批量处理消息的【方法】
+  const handleNewMessages =async (msgs) => {    
+    let groupArr = []
+    let singleArr = []
+    let msgMap = {}
+    msgs.forEach(function(newServerMsg){
+      if (inCurrentConversation(newServerMsg)) {
+        handleCurrentConversation(newServerMsg)
+        return
+      }
+      if (newServerMsg.contentType !== MessageType.TypingMessage &&
+        newServerMsg.sendID !== userInfo.value.userID) {
+        handleOtherConversation(newServerMsg, function (sessionType, msg){
+            msgMap[msg.sendID] = msg
+            if(sessionType === 1){
+              singleArr.push({ sourceID: newServerMsg.sendID, sessionType: sessionType })
+            }
+            else if(sessionType === 3){
+              groupArr.push({ sourceID: newServerMsg.sendID, sessionType: sessionType })
+            }
+        })
+      }
+    });
+    // 分开两个 try catch 执行 防止一个执行失败后 另外一个无法执行
+    try{
+      const { data } = await IMSDK.batchGetConversationsBySessionTypeAndSourceId(groupArr)
+      if(data !== null) {
+        setPrivateChatConfigs({})
+        data.forEach(function (item) {
+          setGroupChatConfigs({
+            group: item,
+            msg: msgMap[item.userID]
+          })
+        })
+      }
+    }catch(err){
+      console.error(err)
+    }
+    try{
+      const { data } = await IMSDK.batchGetConversationsBySessionTypeAndSourceId(singleArr)
+      setGroupChatConfigs({})
+      if(data === null || data === undefined){
+        return
+      }
+      data.forEach(function(item){
+        setPrivateChatConfigs({
+          group: item,
+          msg: msgMap[item.userID]
+        })
+      })
+    }catch(err){
+      console.error(err)
+    }
+  };
+
+  const handleCurrentConversation = (newServerMsg)=>{
+    const isSingleMessage = newServerMsg.sessionType === SessionType.Single;
+
+    if (isSingleMessage) {
+      useThrottleFn(() => emitter.emit("ONLINE_STATE_CHECK"), 2000)();
+    }
+
+    if (newServerMsg.contentType === MessageType.TypingMessage) {
+      if (isSingleMessage) {
+        useThrottleFn(() => emitter.emit("TYPING_UPDATE"), 2000)();
+      }
+      return
+    }
+    if (newServerMsg.contentType !== MessageType.RevokeMessage) {
+      newServerMsg.isAppend = true;
+      pushNewMessage(newServerMsg);
+      emitter.emit("CHECK_SCROLL_BOTTOM");
+    }
+  }
+  const handleOtherConversation = (newServerMsg, callback)=>{
+    // useThrottleFn(() => newMessageNotify(newServerMsg), 1000)();
+    // 推送群消息
+    if (newServerMsg.sessionType === 3) {
+      // 开启勿扰模式
+      if (userInfo.value.globalRecvMsgOpt === 2) {
+        return
+      }
+      if(callback !== null){
+        callback(3, newServerMsg)
+      }
+    } else if (newServerMsg.sessionType === 1) {
+      // 推送私聊消息
+      // 开启勿扰模式
+      if (newServerMsg.sendID === privateChatConfig.value.userID) {
+        return
+      }
+      if (userInfo.value.globalRecvMsgOpt === 2) {
+        return
+      }
+      if(callback !== null){
+        callback(1, newServerMsg)
+      }
+    }
+  }
+
+  const setGroupConversion = async (newServerMsg) => {
+    const { data } = await IMSDK.getOneConversation({
+      sourceID: newServerMsg.groupID,
+      sessionType: 3
+    })
+    setPrivateChatConfigs({})
+    setGroupChatConfigs({
+      group: data,
+      msg: newServerMsg
+    })
+  }
+  const setSingleConversion = async (newServerMsg) => {
+    const { data } = await IMSDK.getOneConversation({
+      sourceID: newServerMsg.sendID,
+      sessionType: 1
+    })
+    setGroupChatConfigs({})
+    setPrivateChatConfigs({
+      group: data,
+      msg: newServerMsg
+    })
+  }
+  // 单个方式处理【方法】
+  const handleNewMessage = (newServerMsg) => {
+    if (inCurrentConversation(newServerMsg)) {
+      handleCurrentConversation(newServerMsg)
+      return
+    }
+    if (newServerMsg.contentType !== MessageType.TypingMessage &&
+      newServerMsg.sendID !== userInfo.value.userID) {
+      handleOtherConversation(newServerMsg, function (sessionType, msg) {
+        if (sessionType === 3) {
+          setGroupConversion(newServerMsg)
+        } else if (sessionType === 1) {
+          setSingleConversion(newServerMsg)
+        }
+      })
+    }
+  }
+  const inCurrentConversation = (newServerMsg) => {
+    switch (newServerMsg.sessionType) {
+      // case SessionType.Single:
+      //   return (
+      //     newServerMsg.sendID ===
+      //     privateChatConfig.value.userID ||
+      //     (newServerMsg.sendID === userInfo.value.userID &&
+      //       newServerMsg.recvID ===
+      //       privateChatConfig.value.userID)
+      //   );
+      case SessionType.Group:
+      case SessionType.WorkingGroup:
+        return (
+          newServerMsg.groupID ===
+          groupInfo.value.groupID
+        );
+      // case SessionType.Notification:
+      //   return (
+      //     newServerMsg.sendID ===
+      //     conversationStore.storeCurrentConversation.userID
+      //   );
+      default:
+        return false;
+    }
+  };
+  // const newMessageNotify = async (newServerMsg) => {
+  //   if (userStore.storeIsSyncing) {
+  //     return;
+  //   }
+
+  //   if (
+  //     userStore.storeSelfInfo.allowBeep === BusinessAllowType.NotAllow ||
+  //     userStore.storeSelfInfo.globalRecvMsgOpt !== MessageReceiveOptType.Nomal
+  //   ) {
+  //     return;
+  //   }
+
+  //   let cveItem = [
+  //     ...conversationStore.storeConversationList,
+  //     ...cacheConversationList,
+  //   ].find((conversation) => {
+  //     if (GroupSessionTypes.includes(newServerMsg.sessionType)) {
+  //       return newServerMsg.groupID === conversation.groupID;
+  //     }
+  //     return newServerMsg.sendID === conversation.userID;
+  //   });
+
+  //   if (!cveItem) {
+  //     try {
+  //       const { data } = await IMSDK.getOneConversation({
+  //         sessionType: newServerMsg.sessionType,
+  //         sourceID: newServerMsg.groupID || newServerMsg.sendID,
+  //       });
+  //       cveItem = data;
+  //       cacheConversationList = [...cacheConversationList, { ...cveItem }];
+  //     } catch (e) {
+  //       return;
+  //     }
+  //   }
+
+  //   if (cveItem.recvMsgOpt !== MessageReceiveOptType.Nomal) {
+  //     return;
+  //   }
+
+  //   if (!audioEl) {
+  //     audioEl = document.createElement("audio");
+  //   }
+  //   audioEl.src = messageRing;
+  //   audioEl.play();
+  // };
+  const revokedMessageHandler = ({ data }) => {
+    updateOneMessage({
+      clientMsgID: data.clientMsgID,
+      contentType: MessageType.RevokeMessage,
+      notificationElem: {
+        detail: JSON.stringify(data),
+      }
+    }, true);
+  };
+  // conversation
+  const conversationChnageHandler = ({ data }) => {  
+    // console.log('conversationChnageHandler123----------',data);
+    if (data[0].userID && data[0].userID === privateChatConfig.value.userID) {
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        ex: data[0].ex
+      });
+    }
+    let filterArr = [];
+    const changes = data;
+    const changeIds = changes.map((ch) => ch.conversationID);
+    // 变更的会话增加offset判断
+    changes.forEach(changeItem => {
+      const beforeChangeItem = conversationStore.storeConversationList.find(item => item.conversationID === changeItem.conversationID)
+      if (beforeChangeItem) {
+        handleConversationOffsetChange(changeItem, beforeChangeItem)
+      }
+    })
+    filterArr = conversationStore.storeConversationList.filter(
+      (tc) => !changeIds.includes(tc.conversationID)
+    );
+    const idx = changes.findIndex(
+      (c) =>
+        c.conversationID ===
+        conversationStore.storeCurrentConversation.conversationID
+    );
+    if (idx !== -1) conversationStore.updateCurrentConversation(changes[idx]);
+    // 变动的消息放在最上面
+    const result = [...changes, ...filterArr];
+    // console.log('updateConversationList',result);
+    
+    conversationStore.updateConversationList(conversationSort(result));
+  };
+
+  const newConversationHandler = ({ data }) => {
+    const news = data;
+    // 变更的会话增加offset判断
+    news.forEach(changeItem => {
+      const beforeChangeItem = conversationStore.storeConversationList.find(item => item.conversationID === changeItem.conversationID)
+      if (beforeChangeItem) {
+        handleConversationOffsetChange(changeItem, beforeChangeItem)
+      }
+    })
+    
+    const result = [...news, ...conversationStore.storeConversationList];
+    conversationStore.updateConversationList(conversationSort(result));
+  };
+
+  const handleConversationOffsetChange = (newValue, oldValue) => {
+    // 取消置顶
+    const cancelPinned = oldValue.isPinned === true && newValue.isPinned === false
+    // 删除会话消息 会话最后一条消息的时间变小了，可能是删除了会话消息
+    const isDel = Math.max(oldValue.draftTextTime ?? 0, oldValue.latestMsgSendTime ?? 0) > Math.max(newValue.draftTextTime ?? 0, newValue.latestMsgSendTime ?? 0)
+    if (cancelPinned || isDel) {
+      const newOffset = conversationOffset.value - 1
+      updateConversationOffset(newOffset)
+    }
+  }
+  const totalUnreadChangeHandler = ({ data }) => {
+    conversationStore.updateUnReadCount(data);
+  };
+
+  // friend
+  const friendInfoChangeHandler = ({ data }) => {
+    updateContact(data);
+    if (groupInfo.value.groupID && groupMemberInfo.value) {
+      const idx = groupMemberInfo.value[groupInfo.value.groupID].findIndex(
+        (msg) => msg.userID === data.userID
+      );
+      if (idx !== -1) {
+        updateMessageNicknameAndFaceUrl({
+          sendID: data.userID,
+          senderNickname: data.remark || data.nickname,
+          senderFaceUrl: data.faceURL,
+        });
+        // 更新群成员备注信息
+        updateGroupMemberInfos(groupInfo.value.groupID, data)
+      }
+    }
+  };
+
+  /**
+   * 新增好友
+   * @param {*} param0 
+   */
+  const friendAddedHandler = ({ data }) => {
+      const time = Number(`${data.createTime}`.slice(0, 10))
+      getNewfriendApplyCount(time)
+      // updateNewFriendApply(true)
+      pushNewContact(data);
+  };
+  /**
+   * 删除好友-删除好友不需要通知，将好友删除即可
+   * @param {*} param0 
+   */
+  const friendDeletedHandler = ({ data }) => {
+    // updateNewFriendApply(true)
+    updateContact(data, true);
+  };
+
+  // blacklist
+  const blackAddedHandler = ({ data }) => {
+    pushNewBlack(data);
+  };
+  const blackDeletedHandler = ({ data }) => {
+    updateBlackList(data, true);
+  };
+
+  // group
+  const joinedGroupAddedHandler = ({ data }) => {
+    // if (data.groupID === groupInfo.value.groupID) {
+    //   conversationStore.updateCurrentGroupInfo(data);
+    // }
+    pushNewGroup(data);
+    /** 注释是因为进入群聊会一直触发getMemberList()方法，
+     * 导致groupMemberLoading.value状态切换，
+     * 解决chartFooter输入框在已退出群聊与输入之间切换问题
+    */
+    // setTimeout(() => {
+    //   console.log('joinedGroupAddedHandler',data);
+      
+    //   getGroupMemberInfo(data.groupID)
+    // }, 500)
+  };
+  const joinedGroupDeletedHandler = ({ data }) => {
+    updateGroupList(data, true);
+    updateGroupMemberInfo(data.groupID, data.ownerUserID)
+  };
+
+  const groupDismissedHandler = ({ data }) => {
+    updateGroupList(data, true);
+    setGroupMemberInfo({
+    ...groupMemberInfo.value,
+    [data.groupID]: []
+    })
+  };
+  /**
+   * 监听群信息发生改变-群设置发生改变时触发
+   * @param {*} param0 
+   */
+  const groupInfoChangedHandler = ({ data }) => {
+    const idx = chatList.value.findIndex(
+      (group) => group.groupID === data.groupID
+    );
+    if (idx !== -1) {
+      updateGroupList(data, true); 
+    }
+    // 更新当前群的信息
+    if (data.groupID === groupInfo.value.groupID) {
+      setGroupInfo({
+        ...groupInfo.value,
+        ...data
+      })
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        ...data
+      })
+    }
+    // if (data.groupID === groupInfo.value.groupID) {
+    //   conversationStore.updateCurrentGroupInfo(data);
+    // }
+  };
+  const groupMemberAddedHandler = ({ data }) => {
+    const arr = groupMemberInfo.value[data.groupID]
+    const index = contactList.value.findIndex((item) => item.userID === data.userID)
+    if (index != -1) {
+      arr.push({
+        ...data,
+        isFriend: true,
+        remark: contactList.value[index].remark ? contactList.value[index].remark : '',
+        groupNickName: data.nickname
+      })
+      setGroupMemberInfo({
+        ...groupMemberInfo.value,
+        [data.groupID]: arr
+       })
+    } else {
+      setGroupMemberInfo({
+        ...groupMemberInfo.value,
+        [data.groupID]: [
+          ...arr,
+          data
+        ]
+      })
+    }
+
+  };
+  const groupMemberDeletedHandler = ({ data }) => {
+    console.log(data, '退出群聊11222')
+    updateGroupMemberInfo(data.groupID, data.userID)
+  };
+  const groupMemberInfoChangedHandler = async ({
+    data,
+  }) => {
+    console.log(data, 'groupMemberInfoChangedHandler')
+    // 邀请人进群 更新备注等信息
+    updateMessageNicknameAndFaceUrl({
+      sendID: data.userID,
+      senderNickname: data.nickname, // 不需要改变群昵称
+      senderFaceUrl: data.faceURL,
+    });
+    // 如果当前用户在群中，更新当前群的信息
+    if (data.groupID === groupInfo.value.groupID) {
+      if (data.userID === userInfo.value.userID) {
+        // 我在群里的信息只有id是自己的时候才会改
+        setmyGroupInfo(data) // 更改群成员权限会设置
+        // setGroupInfo({
+        //   ...groupInfo.value,
+        //   ...data
+        // })
+      }
+      updateGroupMemberInfos1(groupInfo.value.groupID, data);
+    }
+    // 如果当前用户在其他页面，也要更新用户在其他群的信息
+    Object.keys(groupMemberInfo.value).forEach(groupID => {
+      updateGroupMemberInfos1(groupID, data);
+    })
+  };
+
+  // rtc
+  const newInvitationHandler = () => { };
+  const otherHandler = () => { };
+
+  let friendApplicationAddedHandler_timer = null
+  //application  添加好友，需要对方同意才能添加上好友
+  const friendApplicationAddedHandler = ({ data }) => {
+      clearTimeout(friendApplicationAddedHandler_timer)
+      friendApplicationAddedHandler_timer = null
+    
+      const time = Number(`${data.createTime}`.slice(0, 10))
+      // 勿扰模式
+      if (userInfo.value.globalRecvMsgOpt === 2 && userInfo.value.userID !== data.toUserID) {
+        setFriendApplication(data)
+      }
+      getNewfriendApplyCount(time)
+      // updateNewFriendApply(true)
+      
+      const application = data;
+      const isRecv = application.toUserID === userInfo.value.userID;
+      if (isRecv) {
+        pushNewRecvFriendApplication(application);
+      } else {
+        pushNewSendFriendApplication(application);
+      }
+  };
+  //当前添加还有是无需同意即可添加的好友，不需要通知用户
+  const friendApplicationProcessedHandler = ({ data }) => {
+    const time = Number(`${data.createTime}`.slice(0, 10))
+    getNewfriendApplyCount(time)
+    // updateNewFriendApply(true)
+    
+    const application = data;
+    const isRecv = application.toUserID === userInfo.value.userID;
+    if (isRecv) {
+      updateRecvFriendApplicationList(application);
+    } else {
+      updateSendFriendApplicationList(application);
+    }
+  };
+  const groupApplicationAddedHandler = ({ data }) => {
+    const application = data;
+    const isRecv = application.userID !== userInfo.value.userID;
+    if (isRecv) {
+      contactStore.pushNewRecvGroupApplication(application);
+    } else {
+      contactStore.pushNewSendGroupApplication(application);
+    }
+  };
+  const groupApplicationProcessedHandler = ({ data }) => {
+    const application = data;
+    const isRecv = application.userID !== userInfo.value.userID;
+    if (isRecv) {
+      contactStore.updateRecvGroupApplicationList(application);
+    } else {
+      contactStore.updateSendGroupApplicationList(application);
+    }
+  };
+
+  // const deleteUserMsgHandler = ({ data }) => {
+  //   const { conversationID, userID } = data
+  //   console.log('?????????', conversationID, userID)
+
+  //   storeHistoryMessageList.value = storeHistoryMessageList.value.filter(item => item.sendID !== userID)
+  // }
+
+  const disposeIMListener = () => {
+    IMSDK.off(CbEvents.OnSelfInfoUpdated, selfUpdateHandler);
+    IMSDK.off(CbEvents.OnConnecting, connectingHandler);
+    IMSDK.off(CbEvents.OnConnectFailed, connectFailedHandler);
+    IMSDK.off(CbEvents.OnConnectSuccess, connectSuccessHandler);
+    IMSDK.off(CbEvents.OnKickedOffline, kickHandler);
+    IMSDK.off(CbEvents.OnUserTokenExpired, expiredHandler);
+    IMSDK.off(CbEvents.OnPingTimeout, pingTimeout);
+    // sync
+    IMSDK.off(CbEvents.OnSyncServerStart, syncStartHandler);
+    IMSDK.off(CbEvents.OnSyncServerFinish, syncFinishHandler);
+    IMSDK.off(CbEvents.OnSyncServerFailed, syncFailedHandler);
+    // 单个方式处理消息
+    IMSDK.off(CbEvents.OnRecvNewMessage, newMessageHandler);
+    // 批量方式处理消息
+    IMSDK.off(CbEvents.OnRecvNewMessages, newMessagesHandler);
+    IMSDK.on(CbEvents.OnNewRecvMessageRevoked, revokedMessageHandler);
+    // conversation
+    IMSDK.off(CbEvents.OnConversationChanged, conversationChnageHandler);
+    IMSDK.off(CbEvents.OnNewConversation, newConversationHandler);
+    IMSDK.off(
+      CbEvents.OnTotalUnreadMessageCountChanged,
+      totalUnreadChangeHandler
+    );
+    // friend
+    IMSDK.off(CbEvents.OnFriendInfoChanged, friendInfoChangeHandler);
+    IMSDK.off(CbEvents.OnFriendAdded, friendAddedHandler);
+    IMSDK.off(CbEvents.OnFriendDeleted, friendDeletedHandler);
+    // blacklist
+    IMSDK.off(CbEvents.OnBlackAdded, blackAddedHandler);
+    IMSDK.off(CbEvents.OnBlackDeleted, blackDeletedHandler);
+    // group
+    IMSDK.off(CbEvents.OnJoinedGroupAdded, joinedGroupAddedHandler);
+    IMSDK.off(CbEvents.OnJoinedGroupDeleted, joinedGroupDeletedHandler);
+    IMSDK.off(CbEvents.OnGroupDismissed, groupDismissedHandler);
+    IMSDK.off(CbEvents.OnGroupInfoChanged, groupInfoChangedHandler);
+    IMSDK.off(CbEvents.OnGroupMemberAdded, groupMemberAddedHandler);
+    IMSDK.off(CbEvents.OnGroupMemberDeleted, groupMemberDeletedHandler);
+    IMSDK.off(CbEvents.OnGroupMemberInfoChanged, groupMemberInfoChangedHandler);
+    // application
+    IMSDK.off(CbEvents.OnFriendApplicationAdded, friendApplicationAddedHandler);
+    IMSDK.off(
+      CbEvents.OnFriendApplicationAccepted,
+      friendApplicationProcessedHandler
+    );
+    IMSDK.off(
+      CbEvents.OnFriendApplicationRejected,
+      friendApplicationProcessedHandler
+    );
+    IMSDK.off(CbEvents.OnGroupApplicationAdded, groupApplicationAddedHandler);
+    IMSDK.off(
+      CbEvents.OnGroupApplicationAccepted,
+      groupApplicationProcessedHandler
+    );
+    IMSDK.off(
+      CbEvents.OnGroupApplicationRejected,
+      groupApplicationProcessedHandler
+    );
+    
+    IMSDK.off(
+      CbEvents.OnCustomNotifications,
+      customNotificationsHandler
+    );
+    IMSDK.off(
+      CbEvents.OnUserStatusChanged,
+      userStatusChangedHandler
+    );
+    // IMSDK.off(
+    //   CbEvents.OnDeleteUserMsg,
+    //   deleteUserMsgHandler
+    // );
+  };
+
+  watch(
+    () => userInfo.value.userID,
+    () => {
+      cacheConversationList = [];
+    }
+  );
+
+  // watch(
+  //   [
+  //     () => contactStore.storeRecvFriendApplicationList,
+  //     () => contactStore.storeRecvGroupApplicationList,
+  //     () => userInfo.value.userID,
+  //   ],
+  //   (newValue) => {
+  //     const userID = newValue[2];
+  //     if (!userID) return;
+  //     const accessedFriendApplications = getAccessedFriendApplication();
+  //     let unHandleFriendApplicationNum = newValue[0].filter(
+  //       (application) =>
+  //         application.handleResult === 0 &&
+  //         !accessedFriendApplications.includes(
+  //           `${application.fromUserID}_${application.createTime}`
+  //         )
+  //     ).length;
+
+  //     const accessedGroupApplications = getAccessedGroupApplication();
+  //     let unHandleGroupApplicationNum = newValue[1].filter(
+  //       (application) =>
+  //         application.handleResult === 0 &&
+  //         !accessedGroupApplications.includes(
+  //           `${application.userID}_${application.createTime}`
+  //         )
+  //     ).length;
+  //     contactStore.updateUnHandleFriendApplicationNum(
+  //       unHandleFriendApplicationNum
+  //     );
+  //     contactStore.updateUnHandleGroupApplicationNum(
+  //       unHandleGroupApplicationNum
+  //     );
+  //   }
+  // );
+
+  onMounted(() => {
+    setIMListener();
+    if (localStorage.getItem("token")) {
+      console.log("[onMounted]getNewfriendApplyCount")
+      getNewfriendApplyCount(Date.now())
+    }
+  });
+  onUnmounted(() => {
+    disposeIMListener();
+  });
+}
diff --git a/src/utils/voice.js b/src/utils/voice.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/banner/components/demoPage.vue b/src/views/banner/components/demoPage.vue
new file mode 100644
index 0000000..86037c5
--- /dev/null
+++ b/src/views/banner/components/demoPage.vue
@@ -0,0 +1,12 @@
+<script setup>
+
+</script>
+<template>
+  <div class="demo-page">
+    demoPage
+  </div>
+</template>
+<style scoped lang="less">
+.demo-page{
+}
+</style>
diff --git a/src/views/banner/components/transferPage.vue b/src/views/banner/components/transferPage.vue
new file mode 100644
index 0000000..967b13d
--- /dev/null
+++ b/src/views/banner/components/transferPage.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { usePhoneOs } from "@/use/useTool"
+const $api = inject("$api");
+const router = useRouter();
+const userStore = useUserStore()
+const { userInfo, appConfig } = storeToRefs(userStore)
+const { setAppConfig } = userStore;
+const loading = ref(true)
+onMounted(() => {
+  const phoneOs = usePhoneOs();
+  if(phoneOs === 'Android') {
+    onLoad('android')
+  }
+  if(phoneOs === 'IOS') {
+    onLoad('ios')
+  }
+});
+// 下载安装包
+const onLoad = async(type) => {
+  // 获取系统配置并存储
+  const configRes = await $api.login.getConfigInfo();
+  if (configRes.code != 0) return;
+  if(configRes.data?.download_banner?.status !== 1) return
+  setAppConfig({
+    ...appConfig.value,
+    ...configRes.data,
+  })
+  let urlList = []
+  let url = ''
+  urlList = appConfig.value?.download_banner?.[type] || []
+  console.log('appConfig',appConfig.value,urlList);
+  if(urlList.length > 0) { 
+    // 生成一个随机整数 随机下载链接
+    let randomInt = Math.floor(Math.random() * urlList.length);
+    // 获取随机整数对应的下载链接
+    url = urlList[randomInt].url
+    if(type === 'ios') {
+      window.location.href = url
+    }else{
+      window.open(url)
+    }
+    console.log('appConfigurl',url);
+    // 关闭加载状态
+    let timer = setTimeout(() => {
+      clearTimeout(timer)
+      loading.value = false
+    },2000)
+    console.log('randomInt',randomInt,url);
+  }
+}
+
+</script>
+<template>
+  <div class="transfer-page">
+    <div class="transfer-page-content">
+      <img class="logo" src="@/assets/svg/transfer-page-logo.svg" alt="">
+      <van-loading size="24" v-if="loading">
+        <template #icon>
+          <img class="loading" src="@/assets/svg/loading.png" alt="">
+        </template>
+      </van-loading>
+    </div>
+  </div>
+</template>
+<style scoped lang="less">
+.transfer-page{
+  height: 100%;
+  width: 100%;
+  background-color: #1B1B22;
+  position: absolute;
+  z-index: 99999;
+  .transfer-page-content {
+    text-align: center;
+    height: 100%;
+    transform: translate(0,40%);
+    .logo {
+      margin-bottom: 44px;
+    }
+    .loading {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+</style>
diff --git a/src/views/banner/index.vue b/src/views/banner/index.vue
new file mode 100644
index 0000000..40ea84e
--- /dev/null
+++ b/src/views/banner/index.vue
@@ -0,0 +1,276 @@
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import CallApp from "callapp-lib";
+import { usePhoneOs } from "@/use/useTool"
+import { onMounted } from 'vue'
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore()
+const { userInfo, appConfig } = storeToRefs(userStore)
+console.log('appConfig',appConfig.value);
+// 判断是PC浏览器还是手机浏览器
+const isMobileBrowser = computed(() => {
+  return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|Macintosh|Mac OS X)/i) && !navigator.userAgent.match(/(Macintosh)/i);
+})
+const onDownload = () => {
+  router.push('/banner/transferPage')
+}
+// 关闭横幅
+let isClose = ref(false)
+const onClose = () => {
+  isClose.value = true
+}
+let android_url = "privatechat://com.neway.im";
+let ios_url = window.location.origin + "/banner/transferPage";
+// let ios_url = "privatechat://";
+
+// const urlJumpApp = async () => {
+//   // 判断是安卓还是ios
+//   const phoneOs = usePhoneOs();
+//   let url = ''
+//   if (phoneOs === "Android" && android_url) {
+//     url = android_url;
+//     num.value = 1000
+//   } 
+//   if (phoneOs === "IOS" && ios_url) {
+//     url = ios_url
+//     num.value = 3000
+//   }
+//   console.log('phoneOs',phoneOs,url);
+//   // 是否安装了app
+//   useAppLink(url).then(() => {
+//     console.log('success');
+//   }).catch(() => {
+//     console.log('fail');
+//     router.push('/banner/transferPage')
+//   })
+// }
+let num = ref(0)
+const urlJumpApp = async () => {
+  // 判断是安卓还是ios
+  const phoneOs = usePhoneOs();
+  let url = ''
+  // 安卓
+  if (phoneOs === "Android" && android_url) {
+    url = android_url;
+    num.value = 3000
+    // 是否安装了app
+    useAppLink(url).then(() => {
+      console.log('success');
+    }).catch(() => {
+      console.log('fail');
+      router.push('/banner/transferPage')
+    })
+  } 
+  // IOS
+  if (phoneOs === "IOS" && ios_url) {
+    url = ios_url
+    window.location.href = url
+  }
+}
+
+let timer = ref(null)
+const useAppLink = (url) => {
+  return new Promise((resolve, reject) => {
+    let flag = false
+    let vChange = () => {
+      flag = true
+      window.removeEventListener('visibilitychange', vChange)
+      clearTimeout(timer.value)
+      resolve(url)
+    }
+
+//     window.open(url)
+    window.location.href = url
+    // 等待页面跳转后再执行
+    window.addEventListener('visibilitychange', vChange)
+    timer.value = window.setTimeout(() => {
+      if (!flag) {
+        // 页面跳转失败 清除事件
+        window.removeEventListener('visibilitychange', vChange)
+        reject()
+      }
+    }, num.value)
+  })
+}
+
+let timeoutId;
+
+const handleVisibilityChange = () => {
+  if (document.hidden || document.webkitHidden) {
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+}
+
+const handlePageChange = () => {
+  clearTimeout(timeoutId);
+  timeoutId = null;
+}
+
+const downloadApp = () => {
+  // const download_url = window.location.origin + "/banner/transferPage"
+  // const download_url = "https://uat-im-m.exchangs.top/banner/transferPage"
+  const ios_download_url = "https://prod-im-m-cdn.xxabc3.info/banner/transferPage"
+  const android_download_url = window.location.origin + "/banner/transferPage"
+  const ios_url_scheme = "privatechat://"
+  const android_url_scheme = "privatechat://com.neway.im"
+
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  if (/iPad|iPhone|iPod|Mac/.test(userAgent)) {
+    if (/Safari|Chrome/.test(userAgent)) {
+      location.href = ios_download_url
+    } else {
+      location.href = ios_url_scheme
+      timeoutId = setTimeout(() => {
+        location.href = ios_download_url;
+      }, 1500);
+    }
+  } else if (/android/i.test(userAgent)) {
+    location.href = android_url_scheme
+    timeoutId = setTimeout(() => {
+      location.href = android_download_url;
+    }, 1000);
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('visibilitychange', handleVisibilityChange, false);
+  document.addEventListener('webkitvisibilitychange', handleVisibilityChange, false);
+  window.addEventListener('pagehide', handlePageChange, false);
+})
+</script>
+<template>
+  <div class="download-banner" v-if="isMobileBrowser && (appConfig?.download_banner?.status === 1) && !isClose">
+    <!-- <div class="banner-content">
+      <div class="close-btn" @click="onClose">
+        <img src="@/assets/svg/banner-close.svg" alt="">
+      </div>
+      <div class="info">
+        <div class="logo">
+          <img src="@/assets/svg/banner-logo.svg" alt="">
+        </div>
+        <div class="tips">
+          <div class="title">{{ appConfig.download_banner.title }}</div>
+          <div class="text">{{ appConfig.download_banner.description  }}</div>
+        </div>
+      </div>
+      <div class="download-btn">
+        <van-button class="btn" type="default" @click="urlJumpApp">{{ appConfig.download_banner.button_name  }}</van-button>
+      </div>
+    </div> -->
+    <div class="banner-content">
+      <div class="left">
+        <div class="close-btn" @click="onClose">
+          <img src="@/assets/svg/banner-close.svg" alt="">
+        </div>
+        <div class="info">
+          <div class="logo">
+            <img src="@/assets/img/banner-logo.png" alt="">
+          </div>
+          <div class="tips">
+            <div class="title">{{ appConfig.download_banner.title }}</div>
+            <div class="text">{{ appConfig.download_banner.description  }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="download-btn">
+        <van-button class="btn" type="default" @click="downloadApp">{{ appConfig.download_banner.button_name  }}</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="less">
+.download-banner{
+  background: linear-gradient(90deg, #FFFFFF 0%, #EEFAFF 100%);
+  padding: 8px 12px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  // display: none;
+  .banner-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .close-btn {
+      margin-right: 10px;
+      img{
+      width: 20px;
+      height: 20px;
+    }
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      margin-right: 24px;
+      .logo img{
+        width: 40px;
+        height: 40px;
+      }
+      .tips{
+        // width: 164px;
+        margin-left: 10px;
+        .title,
+        .text{
+          white-space: normal;
+          overflow-wrap: break-word;
+          word-wrap: break-word; 
+          color: #1C1C1C;
+        }
+        .title {
+          font-weight: 600;
+          font-size: 0.875rem;
+          margin-bottom: 2px;
+        }
+        .text {
+          font-weight: 400;
+          font-size: 0.625rem;
+        }
+      }
+    }
+    .download-btn {
+      max-width: 50%;
+      .van-button--normal {
+        width: 100%;
+        height: 32px;
+        border-radius: 10px;
+        color: #fff;
+        background-color: #629DDB;
+        border: unset;
+        :deep(.van-button__text) {
+          width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      :deep(.van-button:before){
+        border: unset !important;
+        border-color: unset !important;
+      }
+    }
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    min-width: 50%;
+    .info {
+      width: calc(100% - 54px);
+      .tips {
+        width: calc(100% - 40px);
+      }
+    }
+  }
+}
+// @media screen and (min-width: 750px) {
+//   .download-banner {
+//     display: none;
+//   }
+// }
+</style>
diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
new file mode 100644
index 0000000..597d849
--- /dev/null
+++ b/src/views/charts/index.vue
@@ -0,0 +1,107 @@
+<script setup >
+import { Chart } from '@/components'
+
+const barOption = {
+  title: {},
+  tooltip: {},
+  xAxis: {
+    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: 'sales',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+}
+
+const lineOption = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line',
+    },
+  ],
+}
+
+const scoreOption = {
+  tooltip: {
+    formatter: '{a} <br/>{b} : {c}%',
+  },
+  series: [
+    {
+      name: 'Pressure',
+      type: 'gauge',
+      detail: {
+        formatter: '{value}',
+      },
+      data: [
+        {
+          value: 50,
+          name: 'SCORE',
+        },
+      ],
+    },
+  ],
+}
+
+const refBarOption = ref(barOption)
+const refLineOption = ref(lineOption)
+const refScoreOption = ref(scoreOption)
+
+// back
+const onClickLeft = () => history.back()
+</script>
+
+<template>
+  <VanNavBar title="📊 Echarts" left-arrow fixed @click-left="onClickLeft" />
+
+  <div class="container">
+    <div class="chart">
+      <Chart :option="refBarOption" :style="{ height: '330px' }" />
+    </div>
+
+    <div class="chart item">
+      <Chart :option="refLineOption" :style="{ height: '330px' }" />
+    </div>
+
+    <div class="chart item">
+      <Chart :option="refScoreOption" :style="{ height: '330px' }" />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 60px 16px;
+  position: relative;
+}
+
+.chart {
+  width: 100%;
+  height: 300px;
+  background: #fff;
+}
+
+.chart.item {
+  margin-top: 15px;
+}
+
+[data-theme='dark'] {
+  .chart {
+    color: #fff;
+    background: #222;
+  }
+}
+</style>
diff --git a/src/views/community/components/eventPreview.vue b/src/views/community/components/eventPreview.vue
new file mode 100644
index 0000000..b9be099
--- /dev/null
+++ b/src/views/community/components/eventPreview.vue
@@ -0,0 +1,263 @@
+<template>
+  <van-overlay :show="visible" z-index="1000" class-name="special-overlay">
+    <div class="detailContainer" v-if="visible" :class="{ 'active-class': msgList.length === 1 }">
+      <van-swipe class="p-swipe" ref="swipeRef" :loop="false" indicator-color="#D9D9D9CC" :initial-swipe="props.initialSwipe">
+        <van-swipe-item class="dc-box" v-for="(item, index) in props.images" :key="index">
+          <img class="dc-box-img" v-if="item" :src="item" @error="handleComunityImgError(item, index)"  />
+          <img class="error-box-img" v-else :src="errorPicture" />
+        </van-swipe-item>
+      </van-swipe>
+      <div class="toggle">
+        <div class="pre" @click="onPre">
+         <img :src="pre" alt="">
+        </div>
+        <div class="next" @click="onNext">
+          <img :src="next" alt="">
+        </div>
+      </div>
+      <div class="close">
+        <van-button @click="showCancle" class="btn" size="small" round type="default">
+          <img :src="eventClose" alt="">
+        </van-button>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script setup>
+import { useAttrs, computed, ref, watch } from 'vue'
+import defaultDownload from '@/assets/svg/download.svg'
+import pre from '@/assets/svg/pre.svg'
+import next from '@/assets/svg/next.svg'
+import eventClose from '@/assets/svg/event-close.svg'
+import merchantDefaultAvatar from "@/assets/svg/merchant_default_avatar.svg"
+import { switchCdnLoadSource } from "@/utils/tools"
+import errorPicture from "@/assets/svg/error-img.svg"
+
+const attrs = useAttrs()
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  images: {
+    type: Array,
+    default: () => ([])
+  },
+  currentId: {
+    type: String,
+    default: ''
+  },
+  initialSwipe: {
+    type: Number,
+    default: 0
+  },
+})
+const msgList = ref([])
+const emit = defineEmits(['update:modelValue', 'getList'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+watch(() => props.images,(newVal) => {
+  console.log('newVal',newVal);
+   msgList.value = newVal
+})
+const showCancle = () => {
+  emit('getList', false)
+}
+
+const handleError = (item,index) => {
+  // console.log(item,index,222222222);
+  let url = item.url.replace(/oss(.+?)\.com\//gm, 's3-accelerate.amazonaws.com/').replace(/\?.*/g, '')
+  // console.log(url);
+  props.images[index].url = url
+}
+
+// 社区图片cdn加载失败时更新图片内容
+const handleComunityImgError = async (item, index) => {
+  const validUrl = await switchCdnLoadSource(item.url, 'image', merchantDefaultAvatar)
+  props.images[index].url = validUrl
+}
+
+const swipeRef = ref()
+const onPre = () => {
+  swipeRef.value.prev()
+}
+const onNext = () => {
+  swipeRef.value.next()
+}
+</script>
+
+<style scoped lang="less">
+:deep(.van-swipe) {
+  width: 100%;
+}
+
+.error-box-img {
+  // background: red;
+}
+.dc-box-img {
+  width: 100%;
+  // height: 100%;
+}
+
+
+.special-overlay {
+  top: 0 !important;
+  background: black;
+}
+
+.p-swipe {
+  // height: 300px;
+  // margin-top: 40%;
+  .van-swipe-item {
+    color: #fff;
+    font-size: 1.25rem;
+    line-height: 210px;
+    height: 100%;
+    text-align: center;
+    background-color: #000000;
+    display: grid;
+    place-items: center;
+
+    .img {
+      width: 375px;
+      height: 100%;
+      margin: 0 auto;
+      display: inline-block;
+      background-color: #39a9ed;
+    }
+  }
+}
+
+.detailContainer {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  :deep(.van-swipe__track) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.active-class {
+  padding-top: 120px !important;
+}
+
+.close {
+  position: absolute;
+  left: 16px;
+  bottom: 30px;
+
+  :deep(.van-button--default) {
+    background: #A4A4A733;
+    color: white;
+    border-radius: 12px;
+    border: none;
+  }
+}
+
+.video-class {
+  width: 100%;
+  height: 100%;
+}
+
+.video-player::-webkit-media-controls {
+  display: none !important;
+}
+
+.video-player::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+
+.video-player::-webkit-media-controls-panel {
+  display: none !important;
+}
+
+:deep(.van-swipe__indicator--active) {
+    // background-color: #D9D9D9CC !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  :deep(.van-swipe__indicator) {
+    background-color: #D9D9D94D !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+  :deep(.van-swipe__indicators) {
+    bottom: 70px;
+  }
+  .pre,
+  .next {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 16px;
+    width: 48px;
+    height: 48px;
+    background-color: #8080804D;
+    border-radius: 50%;
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  .next {
+    left: auto;
+    right: 16px;
+  }
+
+@media screen and (min-width:750px) {
+  // .van-overlay {
+  //   width: calc(100% - 375px);
+  //   left: 375px !important;
+  // }
+  .detailContainer {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .dc-box-img {
+    width: 100%;
+    // height: 100%;
+  }
+
+  .van-swipe {
+    width: 100%;
+  }
+  .video-class {
+    width: 100%;
+    height: 100%;
+  }
+  :deep(.van-swipe__indicators) {
+    bottom: 70px;
+  }
+  .pre,
+  .next {
+    display: block;
+  }
+  .p-swipe {
+    .van-swipe-item {
+      height: 100% !important;
+    }
+    .van-swipe__indicators {
+      bottom: 70px !important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/community/components/eventsItem.vue b/src/views/community/components/eventsItem.vue
new file mode 100644
index 0000000..e969f79
--- /dev/null
+++ b/src/views/community/components/eventsItem.vue
@@ -0,0 +1,307 @@
+<script setup>
+import { inject } from "vue";
+import chatbg from "@/assets/chatbg.png";
+import router from "@/router";
+import merchantDefaultAvatar from "@/assets/svg/merchant_default_avatar.svg"
+import { consttimestampToTime } from "@/utils/tools.js"
+import { showToast } from "vant";
+import { useI18n } from "vue-i18n"
+import { handleImgCdnError, switchCdnLoadSource } from "@/utils/tools"
+
+const { t } = useI18n()
+const $api = inject("$api");
+
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => { }
+  },
+  merchantItem: {
+    type: Object,
+    default: () => { }
+  }
+});
+
+const emits = defineEmits(["getList"]);
+
+const dataItem = ref({})
+
+
+// 预览图
+const videoContainerRef = ref()
+const eventsRef = ref()
+const videoPlayer = ref()
+const videoRefObj = inject('videoRefObj', [])
+onMounted(()=>{
+  dataItem.value = {
+    ...props.source
+  }
+  if(dataItem.value.image_type === 2) {
+    // play()
+    // const dom = document.querySelector('#eventsContentWrap')
+    // dom && dom.addEventListener('scroll', play)
+    // if(videoPlayer.value){
+    //   videoPlayer.value.muted = true
+    //   muted.value = true
+    // }
+  }
+})
+
+watch(videoPlayer, () => {
+  videoRefObj.value = {
+    videoRefs: [ ...videoRefObj.value.videoRefs, videoPlayer ]
+  }
+  videoPlayer.value.addEventListener('play', function() {
+    isPlay.value = true
+  })
+  videoPlayer.value.addEventListener('pause', function() {
+    isPlay.value = false
+  })
+})
+// const play = () => {
+//   // 顶部高度
+//   const commercialOwnerBoxDom = document.querySelector('.commercial-owner-box')
+//   const commercialOwnerBoxH = commercialOwnerBoxDom && commercialOwnerBoxDom.clientHeight
+//   const vanNavBarDom = document.querySelector('.van-nav-bar')
+//   const vanNavBarH = vanNavBarDom && vanNavBarDom.clientHeight
+
+//   const eventsContentDom = document.querySelector('#eventsContentWrap')
+//   const eventsContentH = eventsContentDom && eventsContentDom.offsetTop + 192
+
+//   // 获取视频高度以及距离顶部高度
+//   const targetHeight  = videoContainerRef.value && videoContainerRef.value.clientHeight;
+//   const targetH = videoContainerRef.value && videoContainerRef.value.getBoundingClientRect().top
+//   console.log('获取视频高度以及距离顶部高度',targetHeight,targetH,videoContainerRef,videoContainerRef);
+//   if((targetHeight * 0.5) + targetH <= eventsContentH) {
+//     videoPlayer.value && videoPlayer.value.play()
+//     isPlay.value = true
+//   }else {
+//     videoPlayer.value && videoPlayer.value.pause()
+//     isPlay.value = false
+//   }
+// }
+
+// 播放/暂停
+const isPlay = ref(false)
+const playOrPauseVideo = () => {
+  // muted.value = videoPlayer.value.muted
+  // 检查视频是否处于暂停状态
+  if (videoPlayer.value && videoPlayer.value.paused) {
+    videoPlayer.value && videoPlayer.value.play();
+    isPlay.value = true
+  } else {
+    videoPlayer.value && videoPlayer.value.pause();
+    isPlay.value = false
+  }
+};
+
+// 静音/外放
+const muted = ref(true)
+const toggleMute = () => {
+  videoPlayer.value.muted = !videoPlayer.value.muted;
+  muted.value = videoPlayer.value.muted
+  }
+  
+// 详情跳转
+const onEventDetails = async(val) => {
+  if(val.image_type === 2){
+    videoPlayer.value && videoPlayer.value.pause();
+  }
+  const res = await $api.community.activityCheckOnlineStatus({id:val.id})
+  if(res.code !== 0) return
+  if(res.code === 6099) return showToast(t('ended'))
+  if(res.code !== 0 && res.code === 6099) {
+    emits("getList");
+    return
+  }
+
+  let info = props.merchantItem || {}
+  const merchantInfo = JSON.stringify(info)
+  window.sessionStorage.setItem('activeMerchantInfo',merchantInfo)
+  if(dataItem.value.image_type === 1) {
+    router.push(`/home/community/eventDetails?id=${val.id}`)
+  }else {
+    router.push(`/home/community/eventVideoDetails?id=${val.id}`)
+  }
+}
+
+const onAvatarError = (e,item) => {
+  item.avatar = merchantDefaultAvatar
+}
+
+// 社区图片cdn加载失败时更新图片内容
+const handleComunityImgError = async (url, idx) => {
+  const validUrl = await switchCdnLoadSource(url, 'image', merchantDefaultAvatar)
+  dataItem.value.image[idx] = validUrl
+}
+
+const handleVideoSource = async (url, videoUrl) => {
+  dataItem.value.video[0].image_url = videoUrl
+}
+</script>
+
+<template>
+  <div class="events-item" ref="eventsRef" @click="onEventDetails(dataItem)">
+    <div class="events-content" ref="eventsContentRef">
+      <van-swipe v-if="dataItem.image_type === 1" class="my-swipe" indicator-color="#D9D9D9CC" :autoplay="3000">
+        <van-swipe-item v-for="(i, idx) in dataItem.image" :key="idx"  :class="{'image-failed': !i}">
+          <!-- fix2024-8-21 【IM-H5】进入社区页面，活动图片加载失败时显示空白图片 不存在的图片不走加速-->
+          <img v-if="i" style="width: 375px;height: 192px;" :src="i" alt="" @error="handleComunityImgError(i, idx)">
+          <img v-else src="@/assets/svg/error-img.svg" >
+        </van-swipe-item>
+      </van-swipe>
+      <div class="video-container" ref="videoContainerRef" v-if="dataItem.image_type === 2" @click.stop="playOrPauseVideo">
+        <cdnSource v-if="dataItem.video[0].snapshot" :defaultUrl="dataItem.video[0].snapshot" sourceType="video" @updateSourceUrl="handleVideoSource">
+          <template #cdnSlot="{ cdnUrl }">
+            <video ref="videoPlayer" muted id="video" class="video-class vjs-big-play-centered" x-webkit-airplay=""
+              webkit-playsinline="" playsinline="" :controls="false" disablePictureInPicture :poster="cdnUrl">
+              <source :src="dataItem.video[0].image_url">
+            </video>
+          </template>
+        </cdnSource>
+        <div class="audio" @click.stop="toggleMute">
+          <img v-if="!muted" src="@/assets/audio-open.svg" alt="">
+          <img v-else src="@/assets/audio-close.svg" alt="">
+        </div>
+        <div class="pause">
+          <img v-if="!isPlay" src="@/assets/svg/pause-icon.svg" alt="">
+        </div>
+      </div>
+      <div class="text-content">
+        <div class="title">{{dataItem.title}}</div>
+        <div class="info">
+          <div class="user-info">
+            <Avatar width="24" height="24" :url="merchantItem.avatar" :name="merchantItem.merchant_name" @error="e => handleImgCdnError(e, merchantItem, 'avatar', merchantDefaultAvatar)"></Avatar>
+            <div class="user-name">{{merchantItem.merchant_name}}</div>
+          </div>
+          <div class="time">{{consttimestampToTime(dataItem.update_time,'YYYY-MM-DD HH:mm:ss')}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.events-item {
+  margin-bottom: 8px;
+  border-radius: 10px;
+
+  .events-content {
+    border-radius: 10px;
+    // box-shadow: 0px 4px 16px 0px #0000001A;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    .my-swipe{
+      .van-swipe-item {
+      color: #fff;
+      font-size: 1.25rem;
+      line-height: 192px;
+      text-align: center;
+      border-radius: 10px 10px 0 0;
+     }
+     .image-failed {
+       background: #F6F6F6;
+      }
+    } 
+    .my-swipe.van-swipe {
+      border-radius: 10px 10px 0 0;
+      height: 192px;
+    }
+
+    .video-container {
+      overflow: hidden;
+      /* 隐藏视频内容超出部分 */
+      position: relative;
+      width: 375px;
+      width: 100%;
+      height: 192px;
+      background: #1B1B22;
+      border-radius: 10px 10px 0 0;
+      .video-class {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .text-content {
+      padding: 10px 16px;
+
+      .title {
+        white-space: nowrap;
+        /* 不换行 */
+        overflow: hidden;
+        /* 超出部分隐藏 */
+        text-overflow: ellipsis;
+        /* 显示省略号 */
+        width: 311px;
+        /* 宽度 */
+        font-weight: 500;
+        font-size: 1rem;
+      }
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 4px;
+
+        .user-info {
+          display: flex;
+          align-items: center;
+
+          .user-name {
+            margin-left: 6px;
+            font-size: 0.875rem;
+            color: #1B1B22;
+            width: 169px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .time {
+          opacity: 40%;
+          color: #1B1B22;
+          font-size: 0.75rem;
+        }
+      }
+    }
+  }
+
+  :deep(.van-swipe__indicator--active) {
+    // background-color: #D9D9D9CC !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  :deep(.van-swipe__indicator) {
+    background-color: #D9D9D94D !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+  .audio {
+    width: 32px;
+    height: 24px;
+    background: #1B1B224D;
+    position: absolute;
+    border-radius: 16px;
+    bottom: 8px;
+    right: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 0.5px solid #FFFFFF1A;
+  }
+  .pause {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  :deep(.van-swipe-item) {
+    height: 192px;
+  }
+}
+</style>
diff --git a/src/views/community/components/eventsList.vue b/src/views/community/components/eventsList.vue
new file mode 100644
index 0000000..06dd47e
--- /dev/null
+++ b/src/views/community/components/eventsList.vue
@@ -0,0 +1,238 @@
+<script setup>
+import { watch, provide, onMounted, onUnmounted } from 'vue'
+import eventsItem from './eventsItem.vue'
+import VirtualList from '@/components/virtualList';
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const $api = inject("$api");
+
+const props = defineProps({
+  listParams: {
+    type: Object,
+    default: () => {}
+  },
+});
+const pullDisabled = ref(false)
+
+const page_num = ref(1);
+const page_total = ref(0);
+const list = ref([])
+const loadState = reactive({
+  loading: false,
+  hasMore: true
+});
+let timer = null;
+const onRefresh = () => {
+  isLock.value = true
+  page_num.value = 1;
+  // 产品要求，加个延迟，因为他想要有下拉加载loading展示的效果
+  setTimeout(async () => {
+    loadState.hasMore = await getList()
+    loadState.loading = false;
+    loadState.pullLoading = false
+    clearTimeout(timer);
+  }, 500)
+}
+
+const onBottom = async () => {
+
+  if (loadState.hasMore && !loadState.loading) {
+
+    loadState.loading = true
+    // 接口
+    loadState.hasMore = await getList(true)
+    console.log('onBottom',loadState.hasMore,loadState.loading);
+    loadState.loading = false
+  }
+}
+const getList = async (isScrollLoad = false) => {
+  try {
+    const res = await $api.community.communityActivityList({
+      page_number: isScrollLoad ? page_num.value + 1 : 1,
+      page_size: 20,
+      user_id: props.listParams.user_id,
+    })
+    if (res.code !== 0) return
+    // if(isLock.value)
+    list.value = (isLock.value ? res.data.list : [...list.value,...res.data.list]) || [];
+    page_total.value = res.data.total
+    if (list.value.length < page_total.value) {
+      return true
+    }
+    if (list.value.length === page_total.value) {
+      return false
+    }
+  } catch (error) {
+    return false;
+  } finally {
+    isLock.value = false
+  }
+}
+
+const onScoll = (e) => {
+  pullDisabled.value = e.target.scrollTop > 0
+}
+
+const isLock = ref(false)
+watch(()=>props.listParams,(newVal,oldVal)=>{
+  isLock.value = true
+
+  getList()
+},{
+  immediate:true
+})
+// getList()
+
+const videoRefObj = ref({
+  videoRefs: []
+})
+
+provide('videoRefObj', videoRefObj)
+
+let io = null
+
+onMounted(() => {
+  const eventsContentWrap = document.querySelector('#eventsContentWrap')
+
+  io = new IntersectionObserver(
+    (changes, observer) => {
+      changes.forEach((videoPlayer) => {
+        const action = videoPlayer.isIntersecting && videoPlayer.intersectionRatio >= 0.5 ? 'play' : 'pause'
+
+        videoPlayer.target[action]()
+      })
+    },
+    {
+      root: eventsContentWrap,
+      rootMargin: `0px 0px -${eventsContentWrap.offsetHeight-260}px 0px`,
+      threshold: [ 0.5 ]
+    }
+  );
+})
+
+onUnmounted(() => {
+  if (io) {
+    io.disconnect()
+  }
+})
+
+watch(videoRefObj, () => {
+  const videoRefs = videoRefObj.value.videoRefs
+
+  io.observe(videoRefs[videoRefs.length-1].value)
+})
+
+// events-item
+// io.observe(document.querySelector('.events-item'))
+
+</script>
+
+<template>
+  <div class="events-list">
+    <!-- <template v-if="list.length > 0"> -->
+      <van-pull-refresh success-text="" v-model="loadState.pullLoading"  :disabled="pullDisabled" @refresh="onRefresh">
+        <template #pulling="props">
+          <img src="@/assets/pull-refresh-arrow-down.svg" width="24" height="24" />
+        </template>
+        <template #loosing>
+          <img src="@/assets/pull-refresh-arrow-up.svg" width="24" height="24" />
+        </template>
+        <template #loading>
+          <van-loading size="24" color="#000" />
+        </template>
+        <virtual-list ref="vsl" class="vir-list" :data-key="'id'" :data-sources="list" 
+        :data-component="eventsItem" :extra-props="{ merchantItem:listParams,onGetList:getList}" :estimate-size="264" @tobottom="onBottom" @scroll="onScoll" />
+      </van-pull-refresh>
+    <!-- </template> -->
+    <EmptyData v-if="listParams.user_id && list.length <= 0 && !loadState.pullLoading" :description="$t('posteviews')"></EmptyData>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.vir-list {
+  // height: 100%;
+  height: calc(100vh - 216px);
+  overflow-y: auto;
+}
+.events-list {
+  position: relative;
+  max-width: 375px;
+  padding: 0 16px;
+  .events-item {
+  margin-bottom: 8px;
+  border-radius: 10px;
+  .events-content {
+    border-radius: 10px;
+    box-shadow: 0px 4px 16px 0px #0000001A;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 1.25rem;
+      line-height: 192px;
+      text-align: center;
+      background-color: #39a9ed;
+      border-radius: 10px 10px 0 0;
+    }
+    .text-content {
+      padding: 10px 16px;
+      .title {
+        white-space: nowrap; /* 不换行 */
+        overflow: hidden; /* 超出部分隐藏 */
+        text-overflow: ellipsis; /* 显示省略号 */
+        width: 311px; /* 宽度 */
+        font-weight: 500;
+        font-size: 1rem;
+      }
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 4px;
+        .user-info {
+          display: flex;
+          align-items: center;
+          .user-name {
+            margin-left: 6px;
+            font-size: 0.875rem;
+            color: #1B1B22;
+          }
+        }
+        .time {
+          opacity: 40%;
+          color: #1B1B22;
+          font-size: 0.75rem;
+        }
+      }
+    }
+  }
+  :deep(.van-swipe__indicator--active) {
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+  :deep(.van-swipe__indicator) {
+    background-color: #D9D9D94D !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+}
+}
+.vir-list::-webkit-scrollbar {
+    display: none;
+  }
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+</style>
diff --git a/src/views/community/eventDetails.vue b/src/views/community/eventDetails.vue
new file mode 100644
index 0000000..0b09303
--- /dev/null
+++ b/src/views/community/eventDetails.vue
@@ -0,0 +1,456 @@
+<script setup>
+import { ref, reactive, watch, provide } from 'vue'
+import { AppNavBar, DeleteDialog, GroupDialog, EmptyData } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import MyPlayIcon from '@/assets/svg/my-play-icon.svg';
+import MyPauseIcon from '@/assets/svg/my-pause-icon.svg';
+import { useI18n } from "vue-i18n"
+import chatbg from "@/assets/chatbg.png";
+import Player from 'xgplayer';
+import 'xgplayer/dist/index.min.css';
+import eventPreview from './components/eventPreview.vue'
+import closeGray from '@/assets/svg/close-gray.svg'
+import { consttimestampToTime } from "@/utils/tools.js"
+import merchantDefaultAvatar from "@/assets/svg/merchant_default_avatar.svg"
+import errorPicture from "@/assets/svg/error-img.svg"
+import { switchCdnLoadSource } from "@/utils/tools"
+
+let name = ref('54ada')
+
+const { t } = useI18n()
+const eventDetailRef = ref(null)
+useGrade(eventDetailRef, 2)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+
+const visible = ref(false)
+const eventDetailData = ref({})
+const videoPlayer = ref()
+
+const handleLogOut = () => {
+  countdown.value = 5
+  timer.value = setInterval(()=> {
+    countdown.value--
+    if(countdown.value <= 0) {
+      // window.location.href = eventDetailData.activity_url
+      window.open(eventDetailData.value.activity_url, "_blank");
+      clearInterval(timer.value)
+      visible.value = false
+    }
+  },1000)
+  visible.value = true
+}
+let timer = ref(null)
+let countdown = ref(0)
+// 跳转
+const onJump = async() => {
+  const res = await $api.community.activityCheckOnlineStatus({id:eventDetailData.value.id})
+  if(res.code !== 0) return
+  if(res.code === 6099) return showToast(t('ended'))
+
+  window.open(eventDetailData.value.activity_url, "_blank");
+  // clearInterval(timer.value)
+  // visible.value = false
+}
+let player = ref()
+onMounted(() => {
+
+})
+
+// 预览组件
+const showPreview = ref(false)
+const currentId = ref('1')
+const currentIndex = ref(0)
+const previewArr = ref([])
+
+const closePreview = (val) => {
+  showPreview.value = false
+  currentId.value = ''
+  previewArr.value = []
+}
+const onPreview = (item,idx) => {
+  // console.error('eeeee1111',item);
+  // console.error('eeeee22222',eventDetailData.value.image);
+  // console.error('eeeee33333',idx);
+  showPreview.value = true
+  previewArr.value = eventDetailData.value.image
+  currentIndex.value = idx
+}
+
+const getCommunityActivity = async() => {
+  let params = {
+    id: +route.query.id
+  }
+  const res = await $api.community.communityActivityGet(params)
+  if(res.code !== 0) return
+  eventDetailData.value = res.data || {}
+}
+
+const formatReadCount = (readCount) => {
+  if (readCount < 10000) {
+    // 如果阅读量在万以下，则显示具体数字
+    return readCount.toString();
+  } else {
+    // 如果阅读量在万以上，则以 X.Y 万 的格式显示
+    const w = Math.floor(readCount / 10000); // 获取万位的整数部分
+    const remainder = readCount % 10000; // 获取余数
+    const y = remainder === 0 ? '' : '.' + Math.floor(remainder / 1000); // 获取千位的小数部分
+    return `${w}${y} W`;
+  }
+}
+const merchantInfo = ref({})
+onMounted(()=>{
+  merchantInfo.value = JSON.parse(window.sessionStorage.getItem('activeMerchantInfo') || '{}')
+})
+getCommunityActivity()
+
+const onClose = () => {
+  visible.value = false
+  clearInterval(timer.value)
+}
+
+// 社区图片cdn加载失败时更新图片内容
+const handleComunityImgError = async (url, idx) => {
+  if (url) {
+    if (isImageFailed(url)) {
+      eventDetailData.value.image[idx] = ''
+    } else {
+      const validUrl = await switchCdnLoadSource(url, 'image', merchantDefaultAvatar)
+      eventDetailData.value.image[idx] = validUrl
+    }
+  }
+}
+// 检查图片是否有效
+function isImageValid(src) {
+  if (src) {
+    return src && !src.startsWith('blob:');
+  }
+}
+// 判断图片是否失败（即有效但未加载或是 blob 图片）
+function isImageFailed(src) {
+  return !isImageValid(src);
+}
+</script>
+
+<template>
+  <div ref="eventDetailRef" class="friendGroup">
+    <AppNavBar :title="''" views_grade="secondary_view" @click-left="router.push('/home/community')"></AppNavBar>
+    <div class="event-detail-wrap" >
+      <div class="events-content" ref="eventsContentRef">
+        <van-swipe class="my-swipe" indicator-color="#D9D9D9CC" :autoplay="3000">
+          <van-swipe-item v-for="(i,idx) in eventDetailData.image" :key="i" :class="{'image-failed': !i}" @click="onPreview(i,idx)">
+            <div v-if="i" class="img">
+              <img style="width: 375px; height: 210px;" :src="i" alt="" @error="handleComunityImgError(i, idx)">
+            </div>
+            <img v-else src="@/assets/svg/error-img.svg"/>
+          </van-swipe-item>
+        </van-swipe>
+        <div class="text-content">
+          <div class="info">
+            <div class="user-info">
+              <Avatar width="24" height="24" :url="merchantInfo.avatar" :name="merchantInfo.merchant_name" @updateUrl="url => merchantInfo.avatar = url"></Avatar>
+              <div class="user-name">{{ merchantInfo.merchant_name }}</div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="title">{{eventDetailData.title}}</div>
+            <div class="num-time">
+              <div class="num">{{formatReadCount(eventDetailData.act_views)}}{{ $t('views')}}</div>
+              <div class="time">{{consttimestampToTime(eventDetailData.update_time,'YYYY-MM-DD HH:mm:ss')}}</div>
+            </div>
+            <div class="text" v-html="eventDetailData.content"></div>
+          </div>
+        </div>
+        <div class="config-btn" v-if="eventDetailData.activity_url || eventDetailData.activity_url !== ''">
+          <van-button class="btn" type="default" @click="onJump">{{ eventDetailData.button_name }}</van-button>
+        </div>
+      </div>
+    </div>
+    <van-dialog className="custom-dialog" v-model:show="visible" :title="''">
+      <template #title>
+        <div class="colse">
+          <img :src="closeGray" alt="" @click="onClose">
+        </div>
+      </template>
+      <template #default>
+        <div class="content">
+          {{ `即将跳转到第三方链接 ${countdown}s` }}
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="onJump">{{ ('立即跳转') }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+
+    <!-- 图片预览 -->
+    <eventPreview v-model="showPreview" :currentId="currentId" :images="previewArr" :initialSwipe="currentIndex" @getList="closePreview" />
+    <!-- 三级 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+:deep(.van-nav-bar) {
+  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+
+  .van-icon {
+    color: #FFFFFF;
+  }
+
+  .van-nav-bar__content {
+    height: 48px;
+  }
+}
+
+.event-detail-wrap {
+  background: #FFF;
+  height: 100%;
+
+  .events-content {
+    overflow: hidden;
+    height: 100%;
+
+    .my-swipe {
+      .van-swipe-item {
+        color: #fff;
+        font-size: 1.25rem;
+        line-height: 210px;
+        text-align: center;
+        background-color: #000000;
+        .img {
+          width: 375px;
+          height: 100%;
+          margin: 0 auto;
+          display: inline-block;
+          background-color: #39a9ed;
+        }
+      }
+      .image-failed {
+       background: #F6F6F6;
+      }
+    }
+
+    .video-container {
+      overflow: hidden;
+      /* 隐藏视频内容超出部分 */
+      position: relative;
+      // width: 375px;
+      height: 192px;
+
+      .video-class {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .text-content {
+      padding: 10px 16px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: calc(100% - 210px);
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 4px;
+
+        .user-info {
+          display: flex;
+          align-items: center;
+
+          .user-name {
+            margin-left: 6px;
+            font-size: 0.875rem;
+            color: #1B1B22;
+            width: 313px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .time {
+          opacity: 40%;
+          color: #1B1B22;
+          font-size: 0.75rem;
+        }
+      }
+
+      .content {
+        .title {
+          // white-space: nowrap;
+          /* 不换行 */
+          // overflow: hidden;
+          /* 超出部分隐藏 */
+          // text-overflow: ellipsis;
+          /* 显示省略号 */
+          // width: 311px;
+          /* 宽度 */
+          font-weight: 600;
+          font-size: 1rem;
+          padding: 8px 0;
+        }
+
+        .num-time {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #76767A;
+          font-size: 0.75rem;
+          font-weight: 400;
+          padding-bottom: 12px;
+        }
+
+        .text {
+          padding: 12px 0 70px 0;
+          overflow: auto;
+          color: #76767A;
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
+  :deep(.van-swipe__indicator--active) {
+    // background-color: #D9D9D9CC !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  :deep(.van-swipe__indicator) {
+    background-color: #D9D9D94D !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  .audio {
+    width: 32px;
+    height: 24px;
+    background: #1B1B224D;
+    position: absolute;
+    border-radius: 16px;
+    bottom: 8px;
+    // right: 60px;
+    right: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .config-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 8px 16px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+
+    :deep(.van-button) {
+      width: 100%;
+      height: 52px;
+      line-height: 52px;
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #49494e;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border-color: #d1d1d3;
+
+      &::before {
+        height: 52px;
+      }
+    }
+  }
+}
+
+:deep(.van-dialog) {
+  padding: 0 16px;
+
+  .van-dialog__header {
+    text-align: right;
+    padding-top: 12px;
+  }
+
+  .van-dialog__content {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 36px;
+    text-align: center;
+
+  }
+
+  .van-button--default {
+    width: 100%;
+    height: 56px;
+    border: none;
+
+    .van-button__text {
+      color: #5F97E3;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+  }
+}
+
+.xgplayer-replay-txt {
+  display: none;
+}
+
+:deep(.xgplayer .xgplayer-progress-btn:before) {
+  display: none;
+}
+
+:deep(.xgplayer-replay) {
+  display: none !important;
+}
+
+:deep(.xg-volume) {
+  display: none !important;
+}
+
+:deep(.xgplayer .xg-options-list) {
+  width: 60px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #FFFFFFCC;
+}
+
+:deep(.xgplayer .xg-options-list li:hover),
+:deep(.xgplayer .xg-options-list li.selected) {
+  color: #5F97E3;
+}
+
+:deep(.xgplayer xg-icon:active .xg-tips),
+:deep(.xgplayer xg-icon:hover .xg-tips) {
+  display: none;
+}
+
+:deep(.xgplayer-fullscreen) {
+  // display: none;
+}
+
+:deep(.van-swipe__indicators){
+  bottom: 10px
+}
+
+@media screen and (min-width: 750px) {
+  .config-btn {
+    width: calc(100vw - 375px) !important;
+    left: 375px !important;
+  }
+}
+:deep(.van-swipe-item) {
+    height: 210px;
+  }
+</style>
diff --git a/src/views/community/eventVideoDetails.vue b/src/views/community/eventVideoDetails.vue
new file mode 100644
index 0000000..a1d1985
--- /dev/null
+++ b/src/views/community/eventVideoDetails.vue
@@ -0,0 +1,422 @@
+<script setup>
+import { ref, reactive, watch, provide } from 'vue'
+import { AppNavBar, DeleteDialog, GroupDialog, EmptyData } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import MyPlayIcon from '@/assets/svg/my-play-icon.svg';
+import MyPauseIcon from '@/assets/svg/my-pause-icon.svg';
+import { useI18n } from "vue-i18n"
+import chatbg from "@/assets/chatbg.png";
+import Player from 'xgplayer';
+import 'xgplayer/dist/index.min.css';
+import closeGray from '@/assets/svg/close-gray.svg'
+import merchantDefaultAvatar from "@/assets/svg/merchant_default_avatar.svg"
+import { handleImgCdnError, switchCdnLoadSource, consttimestampToTime } from "@/utils/tools"
+import { showToast } from 'vant'
+
+
+let name = ref('54ada')
+
+const { t } = useI18n()
+const eventVideoDetailRef = ref(null)
+useGrade(eventVideoDetailRef, 2)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+
+const visible = ref(false)
+const eventDetailData = ref({})
+const videoPlayer = ref()
+
+let timer = ref(null)
+let countdown = ref(0)
+let player = ref()
+
+// 跳转
+const onJump = async() => {
+  const res = await $api.community.activityCheckOnlineStatus({id:eventDetailData.value.id})
+  if(res.code !== 0) return
+  if(res.code === 6099) return showToast(t('ended'))
+
+  window.open(eventDetailData.value.activity_url, "_blank");
+  // clearInterval(timer.value)
+  // visible.value = false
+}
+// 倒计时跳转
+const handleLogOut = () => {
+  countdown.value = 5
+  timer.value = setInterval(()=> {
+    countdown.value--
+    if(countdown.value <= 0) {
+      window.open(eventDetailData.value.activity_url, "_blank");
+      clearInterval(timer.value)
+      visible.value = false
+    }
+  },1000)
+  visible.value = true
+}
+
+const formatReadCount = (readCount) => {
+  if (readCount < 10000) {
+    // 如果阅读量在万以下，则显示具体数字
+    return readCount.toString();
+  } else {
+    // 如果阅读量在万以上，则以 X.Y 万 的格式显示
+    const w = Math.floor(readCount / 10000); // 获取万位的整数部分
+    const remainder = readCount % 10000; // 获取余数
+    const y = remainder === 0 ? '' : '.' + Math.floor(remainder / 1000); // 获取千位的小数部分
+    return `${w}${y} W`;
+  }
+}
+const merchantInfo = ref({})
+
+const getCommunityActivity = async() => {
+  let params = {
+    id: +route.query.id
+  }
+  const res = await $api.community.communityActivityGet(params)
+  if(res.code !== 0) return
+  eventDetailData.value = res.data || {}
+  if(eventDetailData.value && eventDetailData.value.video && eventDetailData.value.video.length > 0) {
+    player.value = new Player({
+        id: 'event-video',
+        url: eventDetailData.value.video[0]?.image_url,
+        height: '100%',
+        width: '100%',
+        autoplay: true,
+        playbackRate: [1, 1.5, 2, 4],
+        "closeVideoClick": false,
+        "closeVideoTouch": false,
+        commonStyle: {
+          progressColor: '#D9D9D933', // 进度条底色
+          playedColor: '#D9D9D9CC', // 播放完成部分进度条底色
+          sliderBtnStyle: {
+            width: '6px',
+            height: '16px',
+            'border-radius': '4px',
+            'background-color': '#D9D9D9',
+          }, // 进度条滑块样式
+          icons: {
+            play: MyPlayIcon,
+            pause: MyPauseIcon
+          },
+          poster:eventDetailData.value.video[0]?.snapshoot, // 预览图
+        }
+      });
+  }
+  }
+
+onMounted(()=>{
+  getCommunityActivity()
+  merchantInfo.value = JSON.parse(window.sessionStorage.getItem('activeMerchantInfo') || '{}')
+})
+
+const onClose = () => {
+  visible.value = false
+  clearInterval(timer.value)
+}
+
+const onAvatarError = async (e,item) => {
+  const validUrl = await switchCdnLoadSource(url, 'image', merchantDefaultAvatar)
+  item.avatar = validUrl
+}
+</script>
+
+<template>
+  <div ref="eventVideoDetailRef" class="friendGroup">
+    <AppNavBar :title="''" views_grade="secondary_view" @click-left="router.push('/home/community')"></AppNavBar>
+    <div class="event-video-detail-wrap">
+      <div class="events-content" ref="eventsContentRef">
+        <div class="video-container" ref="videoContainerRef">
+          <div id="event-video"></div>
+        </div>
+        <div class="text-content">
+          <div class="info">
+            <div class="user-info">
+              <Avatar width="24" height="24" :url="merchantInfo.avatar || merchantDefaultAvatar" :name="merchantInfo.merchant_name"  @error="onAvatarError($event,item)"></Avatar>
+              <div class="user-name">{{ merchantInfo.merchant_name }}</div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="title">{{eventDetailData.title}}</div>
+            <div class="num-time">
+              <div class="num">{{formatReadCount(eventDetailData.act_views)}}{{ $t('views')}}</div>
+              <div class="time">{{consttimestampToTime(eventDetailData.update_time,'YYYY-MM-DD HH:mm:ss')}}</div>
+            </div>
+            <div class="text" v-html="eventDetailData.content"></div>
+          </div>
+        </div>
+        <div class="config-btn" v-if="eventDetailData.activity_url || eventDetailData.activity_url !== ''">
+          <van-button class="btn" type="default" @click="onJump">{{ eventDetailData.button_name }}</van-button>
+        </div>
+      </div>
+    </div>
+    <van-dialog className="custom-dialog" v-model:show="visible" :title="''">
+      <template #title>
+        <div class="colse">
+          <img :src="closeGray" alt="" @click="onClose">
+        </div>
+      </template>
+      <template #default>
+        <div class="content">
+          {{ `即将跳转到第三方链接 ${countdown}s` }}
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="onJump">{{ ('立即跳转') }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+
+    <!-- 三级 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+:deep(.van-nav-bar) {
+  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+
+  .van-icon {
+    color: #FFFFFF;
+  }
+
+  .van-nav-bar__content {
+    height: 48px;
+  }
+}
+
+.event-video-detail-wrap {
+  background: #FFF;
+  height: 100%;
+
+  .events-content {
+    overflow: hidden;
+    height: 100%;
+
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 1.25rem;
+      line-height: 210px;
+      text-align: center;
+      background-color: #000000;
+
+      .img {
+        width: 375px;
+        height: 100%;
+        margin: 0 auto;
+        display: inline-block;
+        background-color: #39a9ed;
+      }
+    }
+
+    .video-container {
+      overflow: hidden;
+      /* 隐藏视频内容超出部分 */
+      position: relative;
+      // width: 375px;
+      height: 192px;
+
+      .video-class {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .text-content {
+      padding: 10px 16px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: calc(100% - 210px);
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 4px;
+
+        .user-info {
+          display: flex;
+          align-items: center;
+
+          .user-name {
+            margin-left: 6px;
+            font-size: 0.875rem;
+            color: #1B1B22;
+          }
+        }
+
+        .time {
+          opacity: 40%;
+          color: #1B1B22;
+          font-size: 0.75rem;
+        }
+      }
+
+      .content {
+        .title {
+          // white-space: nowrap;
+          /* 不换行 */
+          // overflow: hidden;
+          /* 超出部分隐藏 */
+          // text-overflow: ellipsis;
+          /* 显示省略号 */
+          // width: 311px;
+          /* 宽度 */
+          font-weight: 600;
+          font-size: 1rem;
+          padding: 8px 0;
+        }
+
+        .num-time {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #76767A;
+          font-size: 0.75rem;
+          font-weight: 400;
+          padding-bottom: 12px;
+        }
+
+        .text {
+          padding: 12px 0 70px 0;
+          overflow: auto;
+          color: #76767A;
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
+  :deep(.van-swipe__indicator--active) {
+    // background-color: #D9D9D9CC !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  :deep(.van-swipe__indicator) {
+    background-color: #D9D9D94D !important;
+    width: 32px;
+    height: 2px;
+    border-radius: 2px;
+  }
+
+  .audio {
+    width: 32px;
+    height: 24px;
+    background: #1B1B224D;
+    position: absolute;
+    border-radius: 16px;
+    bottom: 8px;
+    // right: 60px;
+    right: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .config-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 8px 16px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+
+    :deep(.van-button) {
+      width: 100%;
+      height: 52px;
+      line-height: 52px;
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #49494e;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border-color: #d1d1d3;
+
+      &::before {
+        height: 52px;
+      }
+    }
+  }
+}
+
+:deep(.van-dialog) {
+  padding: 0 16px;
+
+  .van-dialog__header {
+    text-align: right;
+    padding-top: 12px;
+  }
+
+  .van-dialog__content {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 36px;
+    text-align: center;
+
+  }
+
+  .van-button--default {
+    width: 100%;
+    height: 56px;
+    border: none;
+
+    .van-button__text {
+      color: #5F97E3;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+  }
+}
+
+.xgplayer-replay-txt {
+  display: none;
+}
+
+:deep(.xgplayer .xgplayer-progress-btn:before) {
+  display: none;
+}
+
+:deep(.xgplayer-replay) {
+  display: none !important;
+}
+
+:deep(.xg-volume) {
+  display: none !important;
+}
+
+:deep(.xgplayer .xg-options-list) {
+  width: 60px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #FFFFFFCC;
+}
+
+:deep(.xgplayer .xg-options-list li:hover),
+:deep(.xgplayer .xg-options-list li.selected) {
+  color: #5F97E3;
+}
+
+:deep(.xgplayer xg-icon:active .xg-tips),
+:deep(.xgplayer xg-icon:hover .xg-tips) {
+  display: none;
+}
+
+:deep(.xgplayer-fullscreen) {
+  // display: none;
+}
+
+@media screen and (min-width: 750px) {
+  .config-btn {
+    width: calc(100vw - 375px) !important;
+    left: 375px !important;
+  }
+}
+</style>
diff --git a/src/views/community/index.vue b/src/views/community/index.vue
new file mode 100644
index 0000000..437c614
--- /dev/null
+++ b/src/views/community/index.vue
@@ -0,0 +1,240 @@
+<script setup>
+import { ref, onMounted, computed, watch, provide, onBeforeUnmount } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { storeToRefs } from "pinia";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import chatbg from "@/assets/chatbg.png";
+import { getSDK } from "@/utils/openIM";
+import { filterCity, showPhone, handleImgCdnError } from "@/utils/tools";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import eventsList from './components/eventsList.vue'
+import merchantDefaultAvatar from "@/assets/svg/merchant_default_avatar.svg"
+
+const { t } = useI18n();
+const $api = inject("$api");
+const OpenIM = getSDK();
+const router = useRouter();
+const route = useRoute();
+
+const active = ref()
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+
+let merchantItem = ref({})
+const isShow = ref(true)
+// 选择商户
+const onSelectMerchant = (item) => {
+  active.value = item
+  merchantItem.value = {...item}
+  isShow.value = false
+  const scrollWrapperLeft = merchatScrollWrapperRef.value.scrollLeft
+  window.sessionStorage.setItem('activeMerchantInfo',JSON.stringify(item))
+  window.sessionStorage.setItem('scrollWrapperLeft',scrollWrapperLeft)
+}
+const eventsContentRef = ref()
+
+// 获取商户列表
+const merchantList = ref([])
+const getMerchantList = async() => {
+  const res = await $api.community.userSubAdminList()
+  if(res.code !== 0) return
+  // merchantList.value = res.data?.list || []
+  merchantList.value = res.data?.list || []
+  if(merchantList.value.length > 0) {
+    const activeMerchantInfo = JSON.parse(window.sessionStorage.getItem('activeMerchantInfo'))
+    const scrollWrapperLeftStorage = window.sessionStorage.getItem('scrollWrapperLeft')
+    active.value = activeMerchantInfo || merchantList.value[0]
+    merchantItem.value = activeMerchantInfo || merchantList.value[0]
+    merchatScrollWrapperRef.value.scrollLeft = scrollWrapperLeftStorage || 0
+  }
+}
+
+const onAvatarError = (e,item) => {
+  item.avatar = merchantDefaultAvatar
+}
+
+const merchatScrollWrapperRef = ref(null)
+onMounted(async ()=>{
+  await nextTick()
+  getMerchantList()
+})
+// 清空存储商户列表的横向滚动条位置与商户信息
+onBeforeRouteLeave((r)=>{
+  if(r.fullPath == '/home/contact' || r.fullPath == '/home/dialogue' || r.fullPath == '/home/my') {
+    window.sessionStorage.removeItem('activeMerchantInfo')
+    window.sessionStorage.removeItem('scrollWrapperLeft')
+  }
+})
+</script>
+<template>
+  <div style="flex: 1;display: flex;flex-direction: column;overflow: hidden;">
+    <div ref="communityRef" class="community-wrap">
+      <div class="commercial-owner-box">
+        <div class="left scroll-wrapper" ref="merchatScrollWrapperRef" @wheel="onWheel">
+          <div class="left-content">
+            <div class="item" v-for="(item,index) in merchantList" :key="index" @click="onSelectMerchant(item)">
+              <div class="user-box">
+                <div class="avatar" :class="{'avatar-active': item.user_id == active.user_id}">
+                  <van-image
+                    round
+                    :width="'56'"
+                    :height="'56'"
+                    :src="item.avatar || merchantDefaultAvatar"
+                    :show-error="false"
+                    @error="e => handleImgCdnError(e, item, 'avatar', merchantDefaultAvatar)"
+                  />
+                </div>
+                <div class="name">{{item.merchant_name}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="eventsContentWrap" class="events-content" ref="eventsContentRef" v-if="merchantItem.user_id">
+        <eventsList :listParams="merchantItem" />
+      </div>
+      <EmptyData v-if="merchantList.length <= 0" :description="($t('join'))"></EmptyData>
+    </div>
+    <AppNavBar :left-text="($t('community'))" title="" views_grade="firstly_view">
+    </AppNavBar>
+    <!-- 二级视图 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+<style scoped lang="less">
+.contact-container-wrap {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+:deep(.van-nav-bar__text) {
+  font-weight: 600 !important;
+  color: #1b1b22;
+  font-family: "PingFang SC";
+  font-size: 1.5rem;
+}
+
+:deep(.van-nav-bar__left),
+:deep(.van-nav-bar__right) {
+  padding: 0 16px;
+}
+
+.community-wrap {
+  padding-top: 56px;
+  height: calc(100vh - 50px);
+  // overflow-y: auto;
+  background: #fff;
+  // overflow-y: auto;
+  // position: relative;
+
+  .commercial-owner-box {
+    padding: 12px 0 12px 16px;
+    position: relative;
+    overflow-x: hidden;
+
+    .left {
+      overflow-x: auto;
+      /* 横向溢出内容显示滚动条 */
+      white-space: nowrap;
+
+      /* 横向内容不换行 */
+      .left-content {
+        display: flex;
+        align-items: center;
+        // justify-content: space-between;
+        padding: 0 16px;
+        padding-right: 104px;
+
+        .item {
+          position: relative;
+          margin-right: 16px;
+          height: 82px;
+
+          .user-box {
+            text-align: center;
+            .avatar {
+              width: 64px;
+              height: 64px;
+              border-radius: 50%;
+              border: 2px solid #F2F4F5;
+              padding: 4px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              margin-bottom: 4px;
+              &-active {
+              border: 2px solid #538FE1;
+              }
+            }
+            .name {
+              font-size: 0.75rem;
+              color: #1B1B22;
+              width: 70px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              padding-left: 2px;
+            }
+          }
+        }
+      }
+    }
+
+    .righ {
+      height: 58px;
+      display: flex;
+      line-height: 58px;
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      .linear {
+        width: 24px;
+        height: 100%;
+        background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+      }
+
+      .num {
+        width: 80px;
+        background: #fff;
+        text-align: center;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+    }
+  }
+  .events-content {
+    padding: 0 16px;
+    // overflow-y: auto;
+    // overflow-x: hidden;
+    position: relative;
+    height: calc(100vh - 216px);
+    display: flex;
+    justify-content: center;
+  }
+}
+.commercial-owner-box::-webkit-scrollbar {
+    display: none;
+  }
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+</style>
diff --git a/src/views/contact/add/apply.vue b/src/views/contact/add/apply.vue
new file mode 100644
index 0000000..46b47c6
--- /dev/null
+++ b/src/views/contact/add/apply.vue
@@ -0,0 +1,429 @@
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useGrade } from "@/utils/levelConfig.js";
+import { AppNavBar } from "@/components";
+import defaultAvatar from "../../../assets/mine-avatar.png";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { showToast } from "vant";
+import { getGender } from "@/utils/tools";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const applyFriendRef = ref();
+useGrade(applyFriendRef, 5);
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const contactStore = useContactStore();
+const { detailSearch,allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setDetailSearch } = contactStore;
+const router = useRouter();
+const route = useRoute();
+const showPhone = ref(false);
+const showEmail = ref(false);
+const phoneVal = ref("");
+const emailVal = ref("");
+const remarkVal = ref("");
+const checkResult = ref({});
+const noValidate = ref(false);
+onMounted(async () => {
+  remarkVal.value = `${t("iAm")}${userInfo.value.nickname}`;
+  const res = await $api.contact.applyAddBefore({
+    toUserID: detailSearch.value.userID || detailSearch.value.userId,
+  });
+  if (res.code === 6083) {
+    showToast({ position: "top", message: t("withoutQualification") });
+    return;
+  }
+  checkResult.value = res.data || {};
+  // 这里要加判断，是否需要隐藏手机号后四位验证
+  showPhone.value =
+    res.data?.validateType === 2 || res.data?.validateType === 4;
+  showEmail.value = res.data?.validateType === 3;
+  let isValidate = route.query.isValidate ? JSON.parse(route.query.isValidate):false;
+  noValidate.value = res.data?.validateType === 1 || isValidate;
+});
+const handleApply = async () => {
+  if (!noValidate.value) {
+    // 验证手机尾号 或邮箱
+    let params = {
+      userId: detailSearch.value.userID,
+    };
+    let API_PUBLIC = "";
+    if (checkResult.value?.validateType === 2) {
+      // 手机号验证
+      let API_PUBLIC = "";
+      params.phoneSuffix = phoneVal.value;
+    } else if (checkResult.value?.validateType === 3) {
+      //邮箱验证
+      API_PUBLIC = "checkFriendEmailSuffix";
+      params.email = emailVal.value;
+    } else if (checkResult.value?.validateType === 4) {
+      // 手机号验证 / 邮箱验证
+      if (showPhone.value) {
+        params.phoneSuffix = phoneVal.value;
+        params.email = "";
+      } else if (showEmail.value) {
+        params.phoneSuffix = "";
+        params.email = emailVal.value;
+      }
+    }
+    if (params.phoneSuffix) {
+      const res = await $api.contact.checkFriendPhoneSuffix(params);
+      if (res.code !== 0) return;
+    } else if (params.email) {
+      const res = await $api.contact.checkFriendEmailSuffix(params);
+      if (res.code !== 0) return;
+    }
+  }
+  // console.log(res, '555')
+  if (route.query.label) {
+    const res = await $api.contact.addScanFriend({
+      reason: remarkVal.value,
+      userId: detailSearch.value.userID,
+      handleMsg: remarkVal.value,
+      uniqueId: route.query.uniqueId,
+    });
+    if (res.code === 0) {
+      showToast({ position: "top", message: t("sentSuccessfully") });
+      router.back();
+    }
+  } else {
+    const res = await $api.contact.addUidFriend({
+      reason: remarkVal.value,
+      userId: detailSearch.value.userID,
+      handleMsg: remarkVal.value,
+    });
+    if (res.code === 0) {
+      showToast({ position: "top", message: t("sentSuccessfully") });
+      router.back();
+    }
+  }
+};
+// const getFlag = computed(() => {
+//   console.log("showPhone.value", showPhone.value);
+//   if (checkResult.value?.validateType === 2) {
+//     if (!remarkVal.value || !phoneVal.value) {
+//       return true;
+//     }
+//   } else if (checkResult.value?.validateType === 3) {
+//     if (!remarkVal.value || !emailVal.value) {
+//       return true;
+//     }
+//   } else if (checkResult.value?.validateType === 4) {
+//     if (showPhone.value) {
+//       if (!remarkVal.value || !phoneVal.value) {
+//         return true;
+//       }
+//     } else if (showEmail.value) {
+//       if (!remarkVal.value || !emailVal.value) {
+//         return true;
+//       }
+//     }
+//   } else {
+//     if (!remarkVal.value) {
+//       return true;
+//     }
+//   }
+// });
+// fix 逻辑简化 优化计算属性 减少重复计算
+const getFlag = computed(() => {
+  const validateType = checkResult.value?.validateType;
+  const hasRemark = !!remarkVal.value;
+  switch (validateType) {
+    case 2: // 手机号验证
+      return !(hasRemark && phoneVal.value);
+    case 3: // 邮箱验证
+      return !(hasRemark && emailVal.value);
+    case 4: // 手机号或邮箱验证
+      if (showPhone.value) {
+        return !(hasRemark && phoneVal.value);
+      } else if (showEmail.value) {
+        return !(hasRemark && emailVal.value);
+      }
+      break;
+    default:
+      return !hasRemark;
+  }
+});
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+</script>
+
+<template>
+  <div ref="applyFriendRef">
+    <div class="applyFriend_container">
+      <AppNavBar
+        :title="$t('addFriendApply')"
+        views_grade="fifth_view"
+        left-arrow
+        @click-left="router.back()"
+      />
+      <div class="applyFriend_wrap">
+        <div class="detail-content">
+          <Avatar
+            style="margin: 0 auto"
+            width="90"
+            height="90"
+            :url="detailSearch.faceURL"
+            :name="detailSearch.nickname"
+            @updateUrl="url => detailSearch.faceURL = url"
+          ></Avatar>
+          <CommonLottie
+            class="personnel-identification"
+            v-if="showGroupOwner(detailSearch.userID)"
+            :isGroup="showGroupOwner(detailSearch.userID)"
+            :showName="detailSearch.nickname"
+            :bottom="-1"
+          ></CommonLottie>
+          <div class="title" v-else>{{ detailSearch.nickname }}</div>
+          <div class="sex-age">
+            {{ getGender(detailSearch.gender) }}
+            {{ detailSearch.age > 0 ? `${detailSearch.age}${$t("age")}` : "" }}
+          </div>
+          <div class="phone" v-if="!noValidate && showPhone">
+            <div class="txt">{{ $t("checkLast4Number") }}</div>
+            <van-field
+              v-model="phoneVal"
+              label=""
+              clearable
+              :placeholder="$t('last4Number')"
+            />
+            <div
+              v-if="checkResult.validateType === 4"
+              class="text_bottom"
+              @click="
+                showPhone = false;
+                showEmail = true;
+                phoneVal = '';
+              "
+            >
+              用邮箱验证
+            </div>
+          </div>
+          <div class="phone" v-else-if="!noValidate && showEmail">
+            <div class="txt">验证邮箱地址</div>
+            <van-field
+              v-model="emailVal"
+              label=""
+              clearable
+              placeholder="请输入对方登录的邮箱地址"
+            />
+            <div
+              v-if="checkResult.validateType === 4"
+              class="text_bottom"
+              @click="
+                showPhone = true;
+                showEmail = false;
+                emailVal = '';
+              "
+            >
+              用手机号验证
+            </div>
+          </div>
+          <div class="remarks1">
+            <div class="txt">{{ $t("remark") }}</div>
+            <van-field
+              v-model="remarkVal"
+              label=""
+              rows="4"
+              autosize
+              type="textarea"
+              :placeholder="$t('remarkStrHint')"
+            />
+          </div>
+          <div class="apply-btn">
+            <van-button
+              :disabled="getFlag"
+              class="btn"
+              type="default"
+              @click="handleApply"
+              >{{ $t("send") }}</van-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.applyFriend_container {
+  background: #fff;
+  height: 100%;
+  width: 100%;
+}
+
+.applyFriend_wrap {
+  padding-top: 56px;
+}
+
+.detail-content {
+  padding-top: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .personnel-identification {
+    margin: 0px auto !important;
+    width: auto;
+  }
+  .title {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-align: center;
+    margin: 20px 0 4px 0;
+  }
+
+  .remark {
+    color: #1b1b22;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .sex-age {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .remarks {
+    color: #76767a;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .description {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    margin-bottom: 48px;
+    text-align: center;
+  }
+
+  .phone {
+    padding: 0 16px;
+    margin-bottom: 4px;
+
+    .txt {
+      color: #1b1b22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 600;
+      height: 20px;
+      line-height: 20px;
+      margin: 4px 0 12px 0;
+    }
+
+    :deep(.van-cell) {
+      padding: 14px 12px;
+      height: 48px;
+      font-family: PingFang SC;
+      border-radius: 8px;
+      background: rgba(28, 5, 5, 0.03);
+
+      .van-field__control {
+        height: 20px;
+        color: #1b1b22;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+    .text_bottom {
+      color: #0095f6;
+      font-size: 0.875rem;
+      margin: 10px 0;
+    }
+  }
+
+  .remarks1 {
+    padding: 0 16px;
+
+    .txt {
+      color: #1b1b22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 600;
+      height: 20px;
+      line-height: 20px;
+      margin: 20px 0 12px 0;
+    }
+
+    :deep(.van-cell) {
+      padding: 14px 12px;
+      font-family: PingFang SC;
+      border-radius: 8px;
+      background: rgba(28, 5, 5, 0.03);
+
+      .van-field__control {
+        height: 20px;
+        color: #1b1b22;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .apply-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 100px;
+    width: 100%;
+    padding: 0 20px;
+    position: sticky;
+    bottom: 20px;
+
+    :deep(.van-button) {
+      width: 100%;
+      height: 52px;
+      line-height: 52px;
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #fff;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border-color: #1b1b22;
+      background: #1b1b22;
+
+      &::before {
+        height: 52px;
+      }
+    }
+
+    :deep(.van-button--disabled) {
+      background: #f6f6f6;
+      color: #d1d1d3;
+      border-color: #f6f6f6;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/add/applyGroup.vue b/src/views/contact/add/applyGroup.vue
new file mode 100644
index 0000000..8e5156f
--- /dev/null
+++ b/src/views/contact/add/applyGroup.vue
@@ -0,0 +1,432 @@
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useGrade } from "@/utils/levelConfig.js";
+import { AppNavBar } from "@/components";
+import defaultAvatar from "../../../assets/mine-avatar.png";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { showToast } from "vant";
+import { getGender } from "@/utils/tools";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+const applyFriendRef = ref();
+useGrade(applyFriendRef, 5);
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const contactStore = useContactStore();
+const { detailSearch } = storeToRefs(contactStore);
+const router = useRouter();
+const route = useRoute();
+const showPhone = ref(false);
+const showEmail = ref(false);
+const phoneVal = ref("");
+const emailVal = ref("");
+const remarkVal = ref("");
+const checkResult = ref({});
+const noValidate = ref(false);
+let groupId = computed(() => {
+  return sessionStorage.getItem("groupId") || "";
+});
+onMounted(async () => {
+  remarkVal.value = `${t("iAm")}${userInfo.value.nickname}`;
+  const res = await $api.contact.checkAddFriendApplyByGroup({
+    groupID: groupId.value,
+    toUserID: detailSearch.value.userID
+  });
+  if (res.code === 6083) {
+    showToast({ position: "top", message: t("withoutQualification") });
+    return;
+  }
+  checkResult.value = res.data || {};
+  // 这里要加判断，是否需要隐藏手机号后四位验证
+  showPhone.value =
+    res.data?.validateType === 2 || res.data?.validateType === 4;
+  showEmail.value = res.data?.validateType === 3;
+  noValidate.value =
+    res.data?.validateType === 1
+  noValidate.value = res.data?.validateType === 1
+});
+const handleApply = async () => {
+  // 新逻辑 群内
+  const res = await $api.contact.checkAddFriendApplyByGroup({
+    groupID: groupId.value,
+    toUserID: detailSearch.value.userID
+  });
+  if (res.code === 6083) {
+    showToast({ position: "top", message: t("withoutQualification") });
+    return;
+  }
+  if (res.code !== 0) {
+    return;
+  }
+  checkResult.value = res.data || {};
+  // 这里要加判断，是否需要隐藏手机号后四位验证
+  showPhone.value =
+    res.data?.validateType === 2 || res.data?.validateType === 4;
+  showEmail.value = res.data?.validateType === 3;
+  noValidate.value =
+    res.data?.validateType === 1 
+
+    noValidate.value = res.data?.validateType === 1
+
+  if (noValidate.value) {
+    // 免校验
+    let params = {
+      groupID: groupId.value,
+      reason: remarkVal.value,
+      userId: detailSearch.value.userID,
+      handleMsg: remarkVal.value
+    };
+    const res = await $api.contact.addGroupFriendByUin(params);
+    if (res.code !== 0) return;
+    showToast({ position: "top", message: t("sentSuccessfully") });
+    router.back();
+  }
+  // else if (validateType === 2) {
+  //   // 只校验邮箱
+  // } else if (validateType === 3) {
+  //   // 校验手机号
+  // } else if (validateType === 4) {
+  //   // 手机号或邮箱都可校验
+  // } else {
+  // }
+  // return;
+  // 校验
+  if (!noValidate.value) {
+    // 验证手机尾号 或邮箱
+    let params = {
+      userId: detailSearch.value.userID
+    };
+    let API_PUBLIC = "";
+    if (checkResult.value?.validateType === 2) {
+      // 手机号验证
+      let API_PUBLIC = "";
+      params.phoneSuffix = phoneVal.value;
+    } else if (checkResult.value?.validateType === 3) {
+      //邮箱验证
+      API_PUBLIC = "checkFriendEmailSuffix";
+      params.email = emailVal.value;
+    } else if (checkResult.value?.validateType === 4) {
+      // 手机号验证 / 邮箱验证
+      if (showPhone.value) {
+        params.phoneSuffix = phoneVal.value;
+        params.email = "";
+      } else if (showEmail.value) {
+        params.phoneSuffix = "";
+        params.email = emailVal.value;
+      }
+    }
+    if (params.phoneSuffix) {
+      const res = await $api.contact.checkFriendPhoneSuffix(params);
+      if (res.code !== 0) return;
+    } else if (params.email) {
+      const res = await $api.contact.checkFriendEmailSuffix(params);
+      if (res.code !== 0) return;
+    }
+    const resAdd = await $api.contact.addGroupFriendByUin({
+      groupID: groupId.value,
+      reason: remarkVal.value,
+      userId: detailSearch.value.userID,
+      handleMsg: remarkVal.value
+    });
+    if (resAdd.code === 0) {
+      showToast({ position: "top", message: t("sentSuccessfully") });
+      // router.push('/home/contact')
+      router.back();
+    }
+  }
+  // console.log(res, '555')
+};
+const getFlag = computed(() => {
+  if (checkResult.value?.validateType === 2) {
+    if (!remarkVal.value || !phoneVal.value) {
+      return true;
+    }
+  } else if (checkResult.value?.validateType === 3) {
+    if (!remarkVal.value || !emailVal.value) {
+      return true;
+    }
+  } else if (checkResult.value?.validateType === 4) {
+    if (showPhone.value) {
+      if (!remarkVal.value || !phoneVal.value) {
+        return true;
+      }
+    } else if (showEmail.value) {
+      if (!remarkVal.value || !emailVal.value) {
+        return true;
+      }
+    }
+  } else {
+    if (!remarkVal.value) {
+      return true;
+    }
+  }
+  // if (showPhone.value) {
+  //   if (!remarkVal.value || !phoneVal.value) {
+  //     return true
+  //   }
+  // } else {
+  //   if (!remarkVal.value) {
+  //     return true
+  //   }
+  // }
+});
+</script>
+
+<template>
+  <div ref="applyFriendRef">
+    <div class="applyFriend_container">
+      <AppNavBar
+        :title="$t('addFriendApply')"
+        views_grade="fifth_view"
+        left-arrow
+        @click-left="router.back()"
+      />
+      <div class="applyFriend_wrap">
+        <div class="detail-content">
+          <Avatar
+            style="margin: 0 auto"
+            width="90"
+            height="90"
+            :url="detailSearch.faceURL"
+            :name="detailSearch.nickname"
+            @updateUrl="url => detailSearch.faceURL = url"
+          ></Avatar>
+          <div class="title">{{ detailSearch.nickname }}</div>
+          <div class="sex-age">
+            {{ getGender(detailSearch.gender) }}
+            {{ detailSearch.age > 0 ? `${detailSearch.age}${$t("age")}` : "" }}
+          </div>
+          <!-- <div class="description">{{ detailObj.signature ? detailObj.signature : '这个用户很懒，暂无签名～' }}</div> -->
+          <div class="phone" v-if="!noValidate && showPhone">
+            <div class="txt">{{ $t("checkLast4Number") }}</div>
+            <van-field
+              v-model="phoneVal"
+              label=""
+              clearable
+              :placeholder="$t('last4Number')"
+            />
+            <div
+              v-if="checkResult.validateType === 4"
+              class="text_bottom"
+              @click="
+                showPhone = false;
+                showEmail = true;
+                phoneVal = '';
+              "
+            >
+              用邮箱验证
+            </div>
+          </div>
+          <div class="phone" v-else-if="!noValidate && showEmail">
+            <div class="txt">验证邮箱地址</div>
+            <van-field
+              v-model="emailVal"
+              label=""
+              clearable
+              placeholder="请输入对方登录的邮箱地址"
+            />
+            <div
+              v-if="checkResult.validateType === 4"
+              class="text_bottom"
+              @click="
+                showPhone = true;
+                showEmail = false;
+                emailVal = '';
+              "
+            >
+              用手机号验证
+            </div>
+          </div>
+          <div class="remarks1">
+            <div class="txt">{{ $t("remark") }}</div>
+            <van-field
+              v-model="remarkVal"
+              label=""
+              rows="4"
+              autosize
+              type="textarea"
+              :placeholder="$t('remarkStrHint')"
+            />
+          </div>
+          <div class="apply-btn">
+            <van-button
+              :disabled="getFlag"
+              class="btn"
+              type="default"
+              @click="handleApply"
+              >{{ $t("send") }}</van-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.applyFriend_container {
+  background: #fff;
+  height: 100%;
+  width: 100%;
+}
+
+.applyFriend_wrap {
+  padding-top: 56px;
+}
+
+.detail-content {
+  padding-top: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  // .img {
+  //   width: 90px;
+  //   height: 90px;
+  //   margin: 0 auto 20px auto;
+  // }
+  .title {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-align: center;
+    margin: 20px 0 4px 0;
+  }
+
+  .remark {
+    color: #1b1b22;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .sex-age {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .remarks {
+    color: #76767a;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .description {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    margin-bottom: 48px;
+    text-align: center;
+  }
+
+  .phone {
+    padding: 0 16px;
+    margin-bottom: 4px;
+
+    .txt {
+      color: #1b1b22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 600;
+      height: 20px;
+      line-height: 20px;
+      margin: 4px 0 12px 0;
+    }
+
+    :deep(.van-cell) {
+      padding: 14px 12px;
+      height: 48px;
+      font-family: PingFang SC;
+      border-radius: 8px;
+      background: rgba(28, 5, 5, 0.03);
+
+      .van-field__control {
+        height: 20px;
+        color: #1b1b22;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+    .text_bottom {
+      color: #0095f6;
+      font-size: 0.875rem;
+      margin: 10px 0;
+    }
+  }
+
+  .remarks1 {
+    padding: 0 16px;
+
+    .txt {
+      color: #1b1b22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 600;
+      height: 20px;
+      line-height: 20px;
+      margin: 20px 0 12px 0;
+    }
+
+    :deep(.van-cell) {
+      padding: 14px 12px;
+      font-family: PingFang SC;
+      border-radius: 8px;
+      background: rgba(28, 5, 5, 0.03);
+
+      .van-field__control {
+        height: 20px;
+        color: #1b1b22;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .apply-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 100px;
+    width: 100%;
+    padding: 0 20px;
+    position: sticky;
+    bottom: 20px;
+    :deep(.van-button) {
+      width: 100%;
+      height: 52px;
+      line-height: 52px;
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #fff;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border-color: #1b1b22;
+      background: #1b1b22;
+
+      &::before {
+        height: 52px;
+      }
+    }
+
+    :deep(.van-button--disabled) {
+      background: #f6f6f6;
+      color: #d1d1d3;
+      border-color: #f6f6f6;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/add/index.vue b/src/views/contact/add/index.vue
new file mode 100644
index 0000000..25f6b01
--- /dev/null
+++ b/src/views/contact/add/index.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { ref,onMounted,onUnmounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useRouter } from 'vue-router'
+import scan from '@/assets/dialog/scan.svg'
+import face from '@/assets/dialog/face.svg'
+import qrcode from '@/assets/dialog/qrcode.svg'
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import {isMobile} from '@/utils/common'
+const { t } = useI18n()
+const router = useRouter()
+const addFriendRef = ref(null)
+useGrade(addFriendRef, 2)
+const userStore = useUserStore();
+const { appConfig } = storeToRefs(userStore)
+const { isAddFriendByQRCode, isAddFriendByFaceToFace } = appConfig.value.user_permission
+
+const arr = reactive([
+  {
+    id: 1,
+    name: t('scan'),
+    url: scan,
+    label: 'scan',
+    isShow: isAddFriendByQRCode
+  },
+  {
+    id: 2,
+    name: t('faceToFace'),
+    url: face,
+    label: 'face',
+    isShow: isAddFriendByFaceToFace
+  },
+  {
+    id: 3,
+    name: t('myQr'),
+    url: qrcode,
+    label: 'code',
+    isShow: true
+  }
+])
+if(arr[0].isShow)arr[0].isShow = isMobile() || false
+const dialogList = computed(() => {
+  return arr.filter(item => item.isShow != false)
+})
+const handleClick = (label) => {
+  const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+  if (label === 'scan' && !flag) {
+    showToast(t('currentTypeNotSupport'));
+    return
+  }
+  router.push({
+    path: `/home/contact/${label}`,
+    query: {
+      label: label
+    }
+  })
+}
+
+function handleResize() {
+  arr[0].isShow = isMobile() || false
+}
+onMounted(()=>{
+  if(arr[0].isShow)window.addEventListener('resize', handleResize);
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<template>
+  <div ref="addFriendRef" class="addFriend">
+    <AppNavBar :title="$t('addFriend')" views_grade="secondary_view" @click-left="router.push('/home/contact')" />
+    <div class="addFriend-wrap">
+      <div class="addFriend-content">
+        <div class="search-box">
+          <van-field class="custom-input" clearable @focus="handleClick('add/search')" label="" left-icon="search"
+            :placeholder="$t('inputUserId')" />
+        </div>
+        <div class="addFriend-item">
+          <div class="item" v-for="item in dialogList" :key="item.id" @click="handleClick(item.label)">
+            <img :src="item.url" alt="">
+            <div class="txt">{{ item.name}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.addFriend-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .addFriend-content {
+    display: flex;
+    padding: 0 16px;
+    flex-direction: column;
+
+    .search-box {
+      height: 60px;
+      padding: 12px 16px;
+      margin-bottom: 35.5px;
+
+      .custom-input {
+        border-radius: 8px;
+        border: 0.5px solid rgba(84, 84, 84, 0.05);
+        background: #F8F8FB;
+        height: 36px;
+        padding: 6px 8px;
+
+        :deep(.van-field__left-icon) {
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+
+          .van-icon {
+            font-size: 1.5rem;
+            line-height: 24px;
+          }
+        }
+
+        :deep(.van-field__control) {
+          color: #76767A;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+        }
+      }
+    }
+
+    .addFriend-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .item {
+        display: flex;
+        min-width: 72px;
+        padding: 12px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-right: 16px;
+        height: 80px;
+        cursor: pointer;
+
+        img {
+          width: 24px;
+          height: 24px;
+          margin-bottom: 12px;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        .txt {
+          color: #11121D;
+          text-align: center;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+        }
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/views/contact/add/remark.vue b/src/views/contact/add/remark.vue
new file mode 100644
index 0000000..4449446
--- /dev/null
+++ b/src/views/contact/add/remark.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { ref } from 'vue'
+import { useGrade } from '@/utils/levelConfig.js'
+import { AppNavBar } from '@/components'
+import { useRouter } from 'vue-router'
+import { getSDK } from '@/utils/openIM'
+import { useContactStore } from "@/stores/contact";
+import { showToast } from 'vant';
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { burnMsgByClearMsg } from '@/utils/common'
+const remarkRef = ref(null)
+useGrade(remarkRef, 5)
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setDetailSearch } = contactStore;
+const { detailSearch } = storeToRefs(contactStore);
+const OpenIM = getSDK()
+const router = useRouter()
+const applyVisable = ref(false)
+const deleteVisable = ref(false)
+const handleRemark = () => {
+  applyVisable.value = true
+}
+const getList = async (val) => {
+  // todo 刷新接口
+  const res = await OpenIM.setFriendRemark({
+    toUserID: detailSearch.value.userID,
+    remark: val,
+  })
+  showToast({ position: "top", message: t('saveSuccessfully') })
+  applyVisable.value = false
+  detailSearch.value.remark = val
+  setDetailSearch({ ...detailSearch.value, remark: val })
+}
+const getLists = async () => {
+  const idList = [userInfo.value.userID, detailSearch.value.userID].sort((a, b) => a - b) // id排序 然后拼接生成会话id 小的在前面大的在后面
+  const conversationID = `si_${idList[0]}_${idList[1]}`
+  // todo 删除接口
+  // 刪之前清掉焚烧消息
+  await burnMsgByClearMsg(conversationID)
+  const { operationID } = await OpenIM.deleteFriend(detailSearch.value.userID)
+  // 删除会话列表
+  const { operationID: operationID1 } = await OpenIM.deleteConversationAndDeleteAllMsg(conversationID)
+  if (operationID && operationID1) {
+    showToast({ position: "top", message: t('deleteSuccessfully') })
+    deleteVisable.value = false
+    setDetailSearch({ ...detailSearch.value, isFriend: false })
+  }
+  // 这里跳转联系人列表
+  router.push('/home/contact')
+}
+</script>
+
+<template>
+  <div ref="remarkRef">
+    <AppNavBar :title="$t('friendSetup')" views_grade="fifth_view" left-arrow
+      @click-left="router.push('/home/contact/add/search/result')" />
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-cell-group :border="true">
+          <van-cell :title="$t('remark')" is-link :border="false" @click="handleRemark">
+            <template #title>
+              <span class="custom-title">{{ $t('remark') }}</span>
+            </template>
+            <template #right-icon>
+              <span class="custom-titles">{{ detailSearch.remark }}</span>
+              <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+      <div class="delete-btn" @click="deleteVisable = true">
+        <div class="btn">{{ $t('deleteFriend') }}</div>
+      </div>
+    </div>
+    <ApplyDialog v-model="applyVisable" @getList="getList" :remark="detailSearch.remark"></ApplyDialog>
+    <DeleteDialog v-model="deleteVisable" @getList="getLists"></DeleteDialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+
+      .custom-titles {
+        color: #76767A;
+        text-align: right;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        display: inline-block;
+        margin-right: 4px;
+      }
+
+      .notice-value-link {
+        margin-top: 18px;
+        width: 24px;
+        height: 24px;
+        margin-right: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 19px 0;
+    border-top: 1px solid #F2F4F5;
+    border-bottom: 1px solid #F2F4F5;
+
+    .btn {
+      color: #FC5A50;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 400;
+    }
+  }
+
+}
+</style>
diff --git a/src/views/contact/add/result.vue b/src/views/contact/add/result.vue
new file mode 100644
index 0000000..7f2de5b
--- /dev/null
+++ b/src/views/contact/add/result.vue
@@ -0,0 +1,361 @@
+<script setup>
+import { AppNavBar, TipDialog } from "@/components";
+import { useRouter, useRoute } from "vue-router";
+import { useGrade } from "@/utils/levelConfig.js";
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  reactive,
+  onBeforeUnmount,
+} from "vue";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { getSDK } from "@/utils/openIM";
+import { getGender } from "@/utils/tools";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { copyUserId } from "@/utils/tools.js";
+import { useFriendStore } from '@/stores/modules/membership-info'
+import { CommonLottie } from "@/components/index.js";
+const friendState = useFriendStore()
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const resultRef = ref();
+useGrade(resultRef, 4);
+const $api = inject("$api");
+const OpenIM = getSDK();
+const contactStore = useContactStore();
+const { detailSearch,allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+console.log("判断是否为好友--------", detailSearch, detailSearch.isFriend);
+const { setDetailSearch } = contactStore;
+
+const router = useRouter();
+const route = useRoute();
+const showTips = ref(false);
+const resultMsg = ref(t("canNotAddSelf"));
+const detailObj = reactive({
+  nickname: "",
+  remark: "",
+  signature: "",
+  faceURL: "",
+});
+// 检测是否为好友
+const checkFriend = () => {
+  OpenIM.checkFriend([detailSearch.value.userID]).then((res) => {
+    if (res.data[0].result === 1) {
+      setDetailSearch({ ...detailSearch.value, isFriend: true });
+    } else {
+      setDetailSearch({ ...detailSearch.value, isFriend: false });
+    }
+  });
+};
+const handleSend = () => {
+  router.push(`/home/dialogue/privatechat/${detailSearch.value.userID}`);
+};
+const handleAdd = async () => {
+  const result = await $api.contact.getUserById({
+    UserIDs: [detailSearch.value.userID],
+  });
+  let isInUser = result.data.users && result.data.users[0].internal_uid !== "";
+  // 这里要调用好友数量校验接口/v1/friend/check_friend_total
+  const res = await $api.contact.checkFriendTotal();
+  if (res.code === 6034) {
+    resultMsg.value = t("friendNumberCatchTopLimit");
+    showTips.value = true;
+    return;
+  } else if (res.code === 6035) {
+    resultMsg.value = t("error_6035");
+    showTips.value = true;
+    return;
+  }
+  // code 为0 就调用下一个接口
+  if (res.code !== 0) return;
+  const res2 = await $api.contact.validateAddFriendByUser({
+    userID: detailSearch.value.userID,
+  });
+  if (res2.code === 6083) {
+    resultMsg.value = t("withoutQualification");
+    showTips.value = true;
+    return;
+  }
+  if (route.query.id) {
+    router.push({
+      path: "/home/contact/add/search/result/apply",
+      query: {
+        label: "scan",
+        uniqueId: route.query.uniqueId,
+        isValidate: false,
+      },
+    });
+  } else {
+    // router.push("/home/contact/add/search/result/apply");
+    router.push(`/home/contact/add/search/result/apply?isValidate=${false}`);
+  }
+};
+let timeObj = ref();
+onMounted(async () => {
+  if (route.query.id) {
+    if (route.query.id === userInfo.value.userID) {
+      showTips.value = true;
+      return;
+    }
+  }
+  timeObj.value = setTimeout(() => {
+    checkFriend();
+  }, 1000);
+});
+onBeforeUnmount(() => {
+  clearTimeout(timeObj.value);
+});
+const handleRight = () => {
+  router.push({
+    path: "/home/contact/add/search/result/remark",
+  });
+};
+const handleLeft = () => {
+  if (route.query.id) {
+    router.go(-1);
+  } else {
+    router.push("/home/contact/add/search");
+  }
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+// 判断当前用户是什么身份
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+</script>
+
+<template>
+  <div ref="resultRef">
+    <div class="result_container">
+      <AppNavBar
+        title=""
+        left-arrow
+        views_grade="fourth_view"
+        @click-left="handleLeft"
+      >
+        <template #right v-if="detailSearch.isFriend">
+          <img
+            class="add-img"
+            @click="handleRight"
+            src="@/assets/contact-more.svg"
+            alt=""
+          />
+        </template>
+      </AppNavBar>
+      <!--这里要加判断，没有备注就不显示-->
+      <div class="message-wrap" v-if="!detailSearch.isFriend">
+        <div class="detail-content">
+          <Avatar
+            width="90"
+            height="90"
+            :url="detailSearch.faceURL"
+            :name="detailSearch.nickname"
+            @updateUrl="url => detailSearch.faceURL = url"
+          ></Avatar>
+          <div class="not-good-friends" v-if="showGroupOwner(detailSearch.userID) != ''">
+            <CommonLottie
+              :isGroup="showGroupOwner(detailSearch.userID)"
+              :left="35"
+              :bottom="2"
+              :showName="detailSearch.nickname"
+            ></CommonLottie>
+          </div>
+          <div class="title" v-else>{{ detailSearch.nickname }}</div>
+          <div class="sex-age">
+            {{ getGender(detailSearch.gender) }}
+            {{ detailSearch.age > 0 ? `${detailSearch.age}${$t("age")}` : "" }}
+          </div>
+          <div
+            class="detail_id"
+            v-if="userInfo.isGroupOwner || userInfo.isGroupAdmin"
+          >
+            <span
+              >{{ $t("userId")
+              }}{{
+                detailSearch.internal_uid
+                  ? detailSearch.internal_uid
+                  : detailSearch.userID
+              }}</span
+            >
+            <img
+              src="@/assets/svg/fuzhi.svg"
+              alt=""
+              @click="copyUserId(detailSearch.internal_uid || detailSearch.userID)"
+            />
+          </div>
+          <div class="description">
+            {{
+              detailSearch.signature
+                ? detailSearch.signature
+                : $t("mineSigEmpty")
+            }}
+          </div>
+          <div
+            class="btn"
+            v-show="route.query.id !== userInfo.userID"
+            @click="handleAdd"
+          >
+            <p class="txt">{{ $t("addFriend") }}</p>
+          </div>
+        </div>
+      </div>
+      <!--这里要加判断，如果是自己的好友显示下面，否则显示上面-->
+      <div class="message-wrap" v-if="detailSearch.isFriend">
+        <div class="detail-content">
+          <Avatar
+            width="90"
+            height="90"
+            :url="detailSearch.faceURL"
+            :name="detailSearch.nickname"
+            @updateUrl="url => detailSearch.faceURL = url"
+          ></Avatar>
+          <div class="good-friends" v-if="showGroupOwner(detailSearch.userID) != ''">
+            <CommonLottie
+              :isGroup="showGroupOwner(detailSearch.userID)"
+              :left="35"
+              :bottom="2"
+              :showName="detailSearch.nickname"
+            ></CommonLottie>
+          </div>
+          <div class="title" v-else>{{ detailSearch.nickname }}</div>
+          <div class="remark" v-show="detailSearch.remark">
+            {{ $t("remark") }}:
+            <span>{{ detailSearch.remark }}</span>
+          </div>
+          <div class="sex-age">
+            {{ getGender(detailSearch.gender) }}
+            {{ detailSearch.age > 0 ? `${detailSearch.age}${$t("age")}` : "-" }}
+          </div>
+          <div class="description">
+            {{
+              detailSearch.signature
+                ? detailSearch.signature
+                : $t("mineSigEmpty")
+            }}
+          </div>
+          <div class="btn" @click="handleSend">
+            <p class="txt">{{ $t("sendMessage") }}</p>
+          </div>
+        </div>
+      </div>
+      <TipDialog v-model="showTips" :resultMsg="resultMsg"></TipDialog>
+    </div>
+    <!-- 五级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style scoped lang="less">
+.result_container {
+  background: #fff;
+  height: 100%;
+  width: 100%;
+  padding-top: 56px;
+}
+
+.detail-content {
+  padding-top: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .title {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-align: center;
+    margin: 20px 0 4px 0;
+  }
+
+  .remark {
+    color: #1b1b22;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    // margin-bottom: 4px;
+    margin-bottom: 4px;
+  }
+
+  .sex-age {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    margin-bottom: 20px;
+  }
+  .detail_id {
+    margin-bottom: 26px;
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-right: 5px;
+      color: #76767a;
+      font-family: "PingFang SC";
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+  }
+  .remarks {
+    color: #76767a;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .description {
+    color: #000;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-weight: 400;
+    margin-bottom: 48px;
+  }
+
+  .btn {
+    display: flex;
+    width: calc(100% - 32px);
+    height: 48px;
+    padding: 15px 65px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 12px;
+    background: #131415;
+    cursor: pointer;
+
+    .txt {
+      color: #fff;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      cursor: pointer;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/add/search.vue b/src/views/contact/add/search.vue
new file mode 100644
index 0000000..a8fc463
--- /dev/null
+++ b/src/views/contact/add/search.vue
@@ -0,0 +1,202 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { AppNavBar, TipDialog } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { showToast } from 'vant';
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+import { getSDK } from '@/utils/openIM'
+const $api = inject("$api");
+const userStore = useUserStore()
+const { userInfo, appConfig } = storeToRefs(userStore)
+const { detailSearch, setDetailSearch } = useContactStore();
+const OpenIM = getSDK()
+const { t } = useI18n()
+const router = useRouter()
+const detailSearchRef = ref(null)
+const showTips = ref(false)
+useGrade(detailSearchRef, 3)
+const searchVal = ref('')
+const searchFlag = ref(false)
+const addDialogShow = ref(false)
+const handleSearch = async () => {
+  if (searchVal.value) {
+    // 如果搜索值为当前账户的uid时，要弹窗提示
+    if (searchVal.value === userInfo.value.userID || searchVal.value === userInfo.value.internal_uid) {
+      showTips.value = true
+      return
+    }
+    const result = await $api.contact.getUserById({ UserIDs: [searchVal.value] });
+    if (!result.data.users) return showToast({ position: "top", message: t('notExsit') })
+    if (result.data.users.length === 0) {
+      searchFlag.value = true
+      return
+    }
+    // if(result.data.users && result.data.users[0].internal_uid === ''){
+    //   // 判断该用户是否达到添加好友条件
+    //   if (checkoutBindType(result.data.users[0])) return addDialogShow.value = true
+    // }
+
+    searchVal.value = ''
+    setDetailSearch(result.data.users[0])
+    const res = await OpenIM.getUsersInfo([result.data.users[0].userID])
+    if (res.data[0].friendInfo) {
+      const { nickname, remark, signature, faceURL } = res.data[0].friendInfo
+      setDetailSearch({ ...result.data.users[0], ...res.data[0].friendInfo, remark: remark, isFriend: true })
+    } else {
+      setDetailSearch({ ...result.data.users[0], remark: '', isFriend: false })
+    }
+    
+    router.push(`/home/contact/add/search/result`)
+  }
+}
+const checkoutBindType = (friendInfo) => {
+  let flag = false
+  if (friendInfo.isGroupAdmin || friendInfo.isGroupOwner || userInfo.value.isInternalUser) return flag = false
+  switch(appConfig.value.user_permission.addFriendVerify) {
+    case 0:
+      break;
+    case 1:
+      flag = friendInfo.phone? false : true
+      break;
+    case 2:
+      flag = friendInfo.email? false : true
+      break;
+    case 3:
+      flag = (friendInfo.email || friendInfo.phone)? false : true
+      break;
+    case 4:
+      flag = (friendInfo.email && friendInfo.phone)? false : true
+      break;
+  }
+  return flag
+}
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') searchFlag.value = false
+})
+const handleCancel = () => {
+  router.push(`/home/contact/add`)
+}
+</script>
+
+<template>
+  <div ref="detailSearchRef" class="detailSearch">
+    <div style="flex: 1;">
+      <AppNavBar title="" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/contact/add')"></AppNavBar>
+      <div class="detailSearch-wrap">
+        <div class="detailSearch-content">
+          <div class="search-box">
+            <van-field class="custom-input" v-model="searchVal" clearable label="" left-icon="search"
+              :placeholder="$t('inputUserId')" @blur="handleSearch" @keypress.enter="handleSearch">
+            </van-field>
+            <div class="txt" @click="handleCancel">{{ $t('cancel') }}</div>
+          </div>
+          <div v-if="searchVal && !searchFlag" class="content-box" @click="handleSearch">{{ $t('searchUserId') + searchVal }}</div>
+          <div v-if="searchFlag" class="content-boxs">{{ $t('notExsit') }}</div>
+          <TipDialog v-model="showTips"></TipDialog>
+        </div>
+      </div>
+    </div>
+    <van-dialog v-model:show="addDialogShow" :title="$t('dialog_tip1')" :confirmButtonText="$t('back')"
+      @confirm="addDialogShow = false">
+      <div class="dialog-text">{{$t('withoutQualification')}}</div>
+    </van-dialog>
+    <!-- 四级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSearch-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .detailSearch-content {
+    .search-box {
+      height: 60px;
+      padding: 12px 0 12px 16px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 36px;
+
+      .custom-input {
+        border-radius: 8px;
+        border: 0.5px solid rgba(84, 84, 84, 0.05);
+        background: #F8F8FB;
+        height: 36px;
+        padding: 6px 8px;
+        width: calc(100% - 56px);
+        margin-right: 12px;
+
+        :deep(.van-field__left-icon) {
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+
+          .van-icon {
+            font-size: 1.5rem;
+            line-height: 24px;
+          }
+        }
+
+        :deep(.van-field__control) {
+          color: #76767A;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+        }
+      }
+
+      .txt {
+        color: #0095F6;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        // margin-right: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .content-box {
+      color: #0095F6;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      word-break: break-all;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .content-boxs {
+      color: #76767A;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 21px;
+    }
+  }
+}
+.dialog-text {
+    padding: 20px 0 24px 0;
+    text-align: center;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    /* 150% */
+    letter-spacing: 0.28px;
+  }
+  :deep(.van-dialog__confirm) {
+    color: #0095F6;
+  }
+</style>
diff --git a/src/views/contact/addFriend/confirm.vue b/src/views/contact/addFriend/confirm.vue
new file mode 100644
index 0000000..f267722
--- /dev/null
+++ b/src/views/contact/addFriend/confirm.vue
@@ -0,0 +1,410 @@
+<script setup>
+import { ref, watch, onMounted, reactive, nextTick } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from "@/utils/openIM";
+import defaultAvatar from "@/assets/mine-avatar.png";
+import { getGender } from "@/utils/tools";
+import mySend from "@/assets/dialog/mySend.svg";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { showToast } from "vant";
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+
+const { t } = useI18n();
+const friendVerifyRef = ref(null);
+useGrade(friendVerifyRef, 3);
+const $api = inject("$api");
+const contactStore = useContactStore();
+const { setDetailSearch } = contactStore;
+const { applyUserList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const OpenIM = getSDK();
+const router = useRouter();
+const route = useRoute();
+
+const friendDetail = reactive({
+  username: "",
+  gender: "",
+  age: 0,
+  remark: "",
+  isMe: "",
+  handleResult: "",
+  flag: 0, // 判断是否为好友
+  fromUserID: "",
+  faceURL: "",
+});
+onMounted(async () => {
+  if (applyUserList.value && applyUserList.value[route.query.id]) {
+    const {
+      isMe,
+      handleResult,
+      reqMsg,
+      fromNickname,
+      fromUserID,
+      fromFaceURL,
+      toUserID,
+      toNickname,
+      toFaceURL,
+    } = applyUserList.value[route.query.id];
+    friendDetail.username = isMe ? toNickname : fromNickname;
+    friendDetail.faceURL = isMe ? toFaceURL : fromFaceURL;
+    friendDetail.fromUserID = isMe ? toUserID : fromUserID;
+    friendDetail.isMe = isMe;
+    friendDetail.remark = isMe ? `${t("me")}: ${reqMsg}` : reqMsg;
+    friendDetail.handleResult = handleResult;
+    const res = await OpenIM.getUsersInfo([route.query.id.split("-")[0]]);
+    if (res.data[0].friendInfo) {
+      friendDetail.flag = 1;
+      setDetailSearch({ ...res.data[0].friendInfo, isFriend: true });
+    } else {
+      friendDetail.flag = 2;
+      setDetailSearch({ isFriend: false });
+    }
+    const result = await $api.contact.queryInfoByuserId({
+      UserIDs: [route.query.id.split("-")[0]],
+    });
+    if (result.code != 0) return;
+    if (Array.isArray(result.data.users) && result.data.users.length > 0) {
+      const { gender, age } = result.data.users[0];
+      friendDetail.gender = gender;
+      friendDetail.age = age;
+      setDetailSearch({
+        ...result.data.users[0],
+        ...res.data[0].friendInfo,
+        isFriend: true,
+      });
+    }
+  }
+});
+const getCurrentStatus = (status) => {
+  if (status === 1) {
+    return t("approved");
+  } else if (status === -2) {
+    return t("hasOut");
+  } else if (status === -1) {
+    return t("rejected");
+  }
+};
+const handleSend = () => {
+  router.push(`/home/dialogue/privatechat/${route.query.id.split("-")[0]}`);
+};
+const handleAgree = async () => {
+  try {
+    await OpenIM.acceptFriendApplication({
+      toUserID: friendDetail.fromUserID,
+      handleMsg: "accept",
+    });
+    showToast({ message: t("addSuccessfully") });
+    router.push("/home/contact/new");
+  } catch (error) {
+    if (error.errCode === 6035) {
+      showToast({ message: t("error_6035") });
+    }
+    if (error.errCode === 6034) {
+      showToast({ message: t("friendNumberCatchTopLimit") });
+    }
+  }
+};
+const handleRefuse = async () => {
+  try {
+    const res = await OpenIM.refuseFriendApplication({
+      toUserID: friendDetail.fromUserID,
+      handleMsg: "refuse",
+    });
+    showToast({ message: t("rejectSuccessfully") });
+    router.push("/home/contact/new");
+  } catch (error) {}
+};
+const handleAdd = () => {
+  router.push("/home/contact/add/search/result/apply");
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+// 判断是管理员还是群主
+const showGroupOwner = computed(() => {
+  return (val) => {
+    if (!val) return "";
+    const userID = val.fromUserID;
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) {
+        return "group";
+      } else if (mapObj.roleLevel === 60) {
+        return "admin";
+      }
+    } else {
+      return isMemberFriendIds.value.includes(userID) ? "group" : "";
+    }
+    return "";
+  };
+});
+
+// 消息
+const getPrivacyInfo = computed(() => {
+  let arr = ['',t('man'),t('woman'),t('confidential')]
+  let gender = arr[friendDetail.gender]
+  let age = friendDetail.age > 0 ? friendDetail.age + '岁' : ''
+  if(!gender && !age) {
+    return '- -'
+  } else {
+    return gender + ' ' + age
+  }
+})
+
+</script>
+
+<template>
+  <!-- 群聊-好友-详情页 -->
+  <div ref="friendVerifyRef" class="friendVerify">
+    <AppNavBar
+      :title="$t('friendVerification')"
+      left-arrow
+      views_grade="thirdly_view"
+      @click-left="router.push('/home/contact/new')"
+    >
+    </AppNavBar>
+    <div class="friendVerify-wrap">
+      <div class="friendVerify-content">
+        <div class="header-wrap">
+          <div class="left">
+            <Avatar
+              width="60"
+              height="60"
+              :url="friendDetail.faceURL"
+              :name="friendDetail.username"
+              @updateUrl="url => friendDetail.faceURL = url"
+            ></Avatar>
+          </div>
+          <div class="right">
+            <CommonLottie
+              v-if="showGroupOwner(friendDetail) != ''"
+              :isGroup="showGroupOwner(friendDetail)"
+              :width="140"
+              :showName="friendDetail.username"
+              :bottom="3"
+              :left="25"
+            ></CommonLottie>
+            <div v-else class="friend-detail-title">
+              {{ friendDetail.username }}
+            </div>
+            <div class="sex-age">
+              <!-- {{ getGender(friendDetail.gender) }}
+              {{ friendDetail.age > 0 ? `${friendDetail.age}岁` : "" }} -->
+               {{ getPrivacyInfo }}
+            </div>
+          </div>
+        </div>
+        <!--这里要加判断，没有备注就不显示---->
+        <div class="remark-wrap" v-if="friendDetail.remark">
+          <div class="remark">{{ $t("remark") }}</div>
+          <van-field
+            readonly
+            v-model="friendDetail.remark"
+            label=""
+            rows="4"
+            autosize
+            type="textarea"
+          />
+        </div>
+        <!--这里要加判断，待验证就不显示，并且将其样式设置opacity为0---->
+        <!-- -1 已拒绝 0 等待处理 1 已同意 -2 已过期 -->
+        <div
+          class="status"
+          :class="{
+            'active-status': !(
+              friendDetail.handleResult === 1 ||
+              friendDetail.handleResult === -1 ||
+              friendDetail.handleResult === -2
+            ),
+          }"
+        >
+          <img v-if="friendDetail.isMe" :src="mySend" class="img" alt="" />
+          {{ getCurrentStatus(friendDetail.handleResult) }}
+        </div>
+        <div
+          class="btn-wrap"
+          v-if="!friendDetail.isMe && friendDetail.handleResult === 0"
+        >
+          <div class="btn1" @click="handleRefuse">
+            <span>{{ $t("rejectCall") }}</span>
+          </div>
+          <div class="btn" @click="handleAgree">
+            <span>{{ $t("acceptCall") }}</span>
+          </div>
+        </div>
+        <div
+          class="btn-wrap"
+          v-if="friendDetail.flag === 1 && friendDetail.handleResult === 1"
+        >
+          <div class="btn" @click="handleSend">
+            <span>{{ $t("sendMessage") }}</span>
+          </div>
+        </div>
+        <div
+          class="btn-wrap"
+          v-if="friendDetail.flag === 2 && friendDetail.handleResult !== 0"
+        >
+          <div class="btn" @click="handleAdd">
+            <span>{{ $t("addFriend") }}</span>
+          </div>
+        </div>
+        <div
+          class="btn-wrap"
+          v-if="friendDetail.isMe && friendDetail.handleResult === 0"
+        >
+          <div class="btn2">
+            <span>{{ $t("waitingForVerification") }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.friendVerify-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .friendVerify-content {
+    padding: 0 16px;
+
+    .header-wrap {
+      display: flex;
+      align-items: center;
+      padding: 6px 0 26px 0;
+
+      .left {
+        margin-right: 10px;
+      }
+      .friend-detail-title {
+        color: #000;
+        font-family: PingFang SC;
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+      .sex-age {
+        color: #76767A;
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+    }
+
+    .remark-wrap {
+      margin-bottom: 20px;
+
+      .remark {
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 600;
+        height: 20px;
+        margin-bottom: 8px;
+      }
+
+      :deep(.van-cell) {
+        border-radius: 12px;
+        background: rgba(0, 0, 0, 0.03);
+      }
+    }
+
+    .status {
+      color: #76767a;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      margin-bottom: 20px;
+      height: 21px;
+      line-height: 21px;
+    }
+
+    .img {
+      width: 16px;
+      height: 16px;
+      margin-right: 2px;
+      vertical-align: middle;
+    }
+
+    .active-status {
+      opacity: 0;
+    }
+
+    .btn-wrap {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .btn1 {
+        width: 100%;
+        height: 48px;
+        padding: 13px 45px;
+        border-radius: 12px;
+        border: 1px solid #2e2e2e;
+        margin-right: 11px;
+        text-align: center;
+        cursor: pointer;
+
+        span {
+          display: inline-block;
+          color: #11121d;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 500;
+          width: 32px;
+          height: 22px;
+        }
+      }
+
+      .btn {
+        height: 48px;
+        padding: 13px 65px;
+        border-radius: 12px;
+        background: #131415;
+        text-align: center;
+        width: 100%;
+        cursor: pointer;
+
+        span {
+          display: inline-block;
+          color: #fff;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 600;
+          width: 80px;
+          height: 22px;
+        }
+      }
+
+      .btn2 {
+        border-radius: 14px;
+        background: #f6f6f6;
+        height: 48px;
+        width: 100%;
+        padding: 13px 0;
+        text-align: center;
+
+        span {
+          display: inline-block;
+          color: #a4a4a7;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 500;
+          height: 22px;
+        }
+      }
+    }
+  }
+  :deep(.common-lottie-wrap) {
+    margin-left: unset !important;
+    margin-bottom: 4px;
+  }
+}
+</style>
diff --git a/src/views/contact/addFriend/index.vue b/src/views/contact/addFriend/index.vue
new file mode 100644
index 0000000..8f35cf0
--- /dev/null
+++ b/src/views/contact/addFriend/index.vue
@@ -0,0 +1,461 @@
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { showToast } from "vant";
+import defaultAvatar from "@/assets/mine-avatar.png";
+import mySend from "@/assets/dialog/mySend.svg";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { useFriendStore } from '@/stores/modules/membership-info'
+
+const friendState = useFriendStore()
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { setApplyUserList, setFriendCreateCount, updateNewFriendApply } =
+  contactStore;
+import { getSDK } from "@/utils/openIM";
+const OpenIM = getSDK();
+const $api = inject("$api");
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const router = useRouter();
+const route = useRoute();
+const newFriendRef = ref(null);
+useGrade(newFriendRef, 2);
+const checked = ref(true);
+const friendList = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+const pageNum = ref(1);
+const pageSize = ref(10);
+
+const hanldClickItem = (item, index) => {
+  // 这里要取对方的id，所以要加判断
+  router.push({
+    path: "/home/contact/new/confirm",
+    query: {
+      id: `${
+        userInfo.value.userID === item.toUserID
+          ? item.fromUserID
+          : item.toUserID
+      }-${index}`,
+    },
+  });
+};
+const getStatus = async () => {
+  const res = await $api.contact.getVerifyStatus({
+    userId: userInfo.value.userID,
+  });
+  if (res.code != 0) return;
+  const { enableFriendVerify } = res.data;
+  // enableFriendVerify 1.开启 2.关闭
+  if (enableFriendVerify) {
+    checked.value = enableFriendVerify === 1;
+  }
+};
+const handleSwitch = async () => {
+  const res = await $api.contact.setVerifyStatus({
+    userId: userInfo.value.userID,
+    enable_friend_verify: checked.value ? 1 : 2,
+  });
+  if (res.code != 0) return;
+  showToast({ message: t("setSuccessfully") });
+  getStatus();
+};
+const getApplyUsers = async () => {
+  const res = await $api.contact.getFriendApplyList({
+    userId: userInfo.value.userID,
+    pageNumber: pageNum.value,
+    showNumber: pageSize.value,
+  });
+  if (res.code != 0) return;
+  if (Array.isArray(res.data.list)) {
+    if (res.data.list.length === 0) {
+      friendList.value = [];
+      finished.value = true;
+      return;
+    }
+  } else {
+    res.data.list = [];
+  }
+  loading.value = false;
+  refreshing.value = false;
+  if (res.data.count < pageSize.value * 1 * pageNum.value) {
+    finished.value = true;
+  }
+  friendList.value = [...friendList.value, ...res.data.list];
+  if (Array.isArray(res.data.list) && res.data.list.length > 0) {
+    setFriendCreateCount(res.data.list[0].createTime);
+  }
+  friendList.value.forEach((item) => {
+    item.isMe = item.fromUserID === userInfo.value.userID;
+  });
+  const obj = {};
+  // 这里要取对方的id，所以要加判断 要加索引，是为了区分是他申请和他拒接的
+  friendList.value.forEach((item, index) => {
+    if (userInfo.value.userID === item.toUserID) {
+      obj[`${item.fromUserID}-${index}`] = item;
+    } else {
+      obj[`${item.toUserID}-${index}`] = item;
+    }
+  });
+  // 获取群主和群管理员标识
+  // friendState.fetchMemberIdentification()
+  setApplyUserList(obj);
+};
+const onRefresh = () => {
+  refreshing.value = false;
+  finished.value = false;
+  pageNum.value = 1;
+  friendList.value = [];
+  getApplyUsers();
+};
+const loadMore = () => {
+  pageNum.value++;
+  getApplyUsers();
+};
+onMounted(() => {
+  getStatus();
+  getApplyUsers();
+});
+
+onUnmounted(() => {
+  updateNewFriendApply(false);
+});
+
+const handleAgree = async (val) => {
+  try {
+    await OpenIM.acceptFriendApplication({
+      toUserID: val.fromUserID,
+      handleMsg: "accept",
+    });
+    showToast({ message: t("addSuccessfully") });
+    friendList.value = [];
+    getApplyUsers();
+  } catch (error) {
+    if (error.errCode === 6035) {
+      showToast({ message: t("error_6035") });
+    }
+    if (error.errCode === 6034) {
+      showToast({ message: t("friendNumberCatchTopLimit") });
+    }
+  }
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds)
+// 判断是管理员还是群主
+const showGroupOwner = computed(() => {
+  return (val) => {
+    if (!val) return "";
+    const userID = val.isMe ? val.toUserID : val.fromUserID;
+    // 先判断是否是群组成员
+    if (isMemberFriendIds.value.includes(userID)) return "group";
+    // 如果不是群组成员，则查找是否为群主或管理员
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) {
+        return "group";
+      } else if (mapObj.roleLevel === 60) {
+        return "admin";
+      }
+    }
+    return "";
+  };
+});
+</script>
+
+<template>
+  <div ref="newFriendRef" class="newFriend">
+    <AppNavBar
+      :title="$t('newFriend')"
+      views_grade="secondary_view"
+      @click-left="router.push('/home/contact')"
+    />
+    <div class="newFriend-wrap">
+      <div class="newFriend-content">
+        <div
+          class="verify"
+          v-if="
+            userInfo.isGroupOwner ||
+            userInfo.isGroupAdmin ||
+            !userInfo.isInternalUser
+          "
+        >
+          <!-- <van-cell center :title="$t('noVerify')">
+            <template #right-icon>
+              <van-switch v-model="checked" @change="handleSwitch" size="16" />
+            </template>
+          </van-cell> -->
+        </div>
+        <div
+          class="empty"
+          v-if="userInfo.isGroupOwner || userInfo.isGroupAdmin"
+        ></div>
+        <div
+          class="apply-list"
+          :class="{
+            'empty-apply-list':
+              !userInfo.isGroupOwner && !userInfo.isGroupAdmin,
+          }"
+        >
+          <div class="sub-title">{{ t("newFriendList") }}</div>
+          <van-pull-refresh
+            v-if="friendList.length > 0"
+            v-model="refreshing"
+            @refresh="onRefresh"
+          >
+            <van-list
+              :immediate-check="false"
+              v-model:loading="loading"
+              :finished="finished"
+              finished-text=""
+              @load="loadMore"
+            >
+              <div
+                class="apply-list-item"
+                v-for="(item, index) in friendList"
+                :key="item.id"
+              >
+                <div class="left-middle" @click="hanldClickItem(item, index)">
+                  <div class="left">
+                    <cdnSource :defaultUrl="item.isMe ? item.toFaceURL : item.fromFaceURL">
+                      <template #cdnSlot="{ cdnUrl }">
+                        <Avatar
+                          width="48"
+                          height="48"
+                          :url="cdnUrl"
+                          :name="item.isMe ? item.toNickname : item.fromNickname"
+                        ></Avatar>
+                      </template>
+                    </cdnSource>
+                  </div>
+                  <div class="middle">
+                    <CommonLottie
+                      class="new-friend-name"
+                      v-if="showGroupOwner(item) != ''"
+                      :isGroup="showGroupOwner(item)"
+                      :width="140"
+                      :bottom="3"
+                      :showName="
+                        item.isMe ? item.toNickname : item.fromNickname
+                      "
+                      :left="25"
+                      :marginLeft="0"
+                    ></CommonLottie>
+                    <div v-else class="title">
+                      {{ item.isMe ? item.toNickname : item.fromNickname }}
+                    </div>
+                    <div class="remark">
+                      {{
+                        item.reqMsg
+                          ? item.isMe
+                            ? `${$t("me")}: ${item.reqMsg}`
+                            : item.reqMsg
+                          : $t("friendApplyAdd")
+                      }}
+                    </div>
+                  </div>
+                </div>
+                <div class="right">
+                  <!-- -1 已拒绝 0 等待处理 1 已同意 -2 已过期 -->
+                  <div
+                    class="btn"
+                    @click="handleAgree(item)"
+                    v-if="!item.isMe && item.handleResult === 0"
+                  >
+                    {{ $t("acceptCall") }}
+                  </div>
+                  <div class="btn1" v-if="item.handleResult === 1">
+                    <img v-if="item.isMe" :src="mySend" class="img" alt="" />
+                    {{ $t("approved") }}
+                  </div>
+                  <div class="btn1" v-if="item.handleResult === -2">
+                    <img v-if="item.isMe" :src="mySend" class="img" alt="" />
+                    {{ $t("hasOut") }}
+                  </div>
+                  <div class="btn1" v-if="item.handleResult === -1">
+                    <img v-if="item.isMe" :src="mySend" class="img" alt="" />
+                    {{ $t("rejected") }}
+                  </div>
+                  <div class="btn2" v-if="item.isMe && item.handleResult === 0">
+                    <img v-if="item.isMe" :src="mySend" class="img" alt="" />
+                    {{ $t("waitingForVerification") }}
+                  </div>
+                </div>
+              </div>
+            </van-list>
+          </van-pull-refresh>
+          <EmptyData
+            v-if="friendList.length === 0"
+            :description="$t('str_no_data')"
+          ></EmptyData>
+        </div>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.newFriend-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+
+  .newFriend-content {
+    height: 100%;
+
+    .verify {
+      height: 60px;
+
+      :deep(.van-cell) {
+        height: 60px;
+        padding: 20px 16px;
+
+        .van-cell__title {
+          color: #1b1b22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .empty {
+      width: 100%;
+      height: 8px;
+      background: #f7f8f8;
+    }
+
+    .apply-list {
+      height: calc(100% - 68px);
+      overflow-y: auto;
+
+      .sub-title {
+        padding: 10px 0 10px 16px;
+        height: 40px;
+        color: #76767a;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+
+      .apply-list-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 66px;
+        padding: 9px 16px;
+        cursor: pointer;
+        box-sizing: border-box;
+        width: 100%;
+        .left-middle {
+          display: flex;
+          align-items: center;
+          width: 70%;
+          .left {
+            margin-right: 12px;
+          }
+
+          .middle {
+            .new-friend-name {
+              :deep(.box1){
+                .special-title-name {
+                  .group-title-names {
+                    min-width: 25px;
+                  }
+                  .group-title-name{
+                    width: max-content;
+                  }
+                }
+              }
+            }
+            .title {
+              color: #1b1b22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-weight: 400;
+              margin-bottom: 4px;
+            }
+
+            .remark {
+              color: #76767a;
+              font-family: PingFang SC;
+              font-size: 0.75rem;
+              font-weight: 400;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap; //规定段落中的文本不进行换行
+              width: calc(100vw - 190px);
+            }
+          }
+        }
+
+        .right {
+          cursor: pointer;
+
+          .btn {
+            width: 60px;
+            height: 32px;
+            line-height: 32px;
+            border-radius: 16px;
+            border: 0.5px solid #a4a4a7;
+            background: #1b1b22;
+            color: #fff;
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-weight: 400;
+            text-align: center;
+          }
+
+          .btn1 {
+            color: #a4a4a7;
+            text-align: right;
+            font-family: PingFang SC;
+            font-size: 0.75rem;
+            font-weight: 400;
+
+            .img {
+              width: 16px;
+              height: 16px;
+              margin-right: 2px;
+              vertical-align: middle;
+            }
+          }
+
+          .btn2 {
+            color: #0095f6;
+            text-align: right;
+            font-family: PingFang SC;
+            font-size: 0.75rem;
+            font-weight: 400;
+            width: 100px;
+            .img {
+              width: 16px;
+              height: 16px;
+              margin-right: 2px;
+              vertical-align: middle;
+            }
+          }
+        }
+      }
+    }
+
+    .empty-apply-list {
+      height: 100%;
+    }
+
+    :deep(.van-pull-refresh) {
+      height: 100vh;
+      overflow: initial;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/InviteFriends.vue b/src/views/contact/chat/components/InviteFriends.vue
new file mode 100644
index 0000000..cec092d
--- /dev/null
+++ b/src/views/contact/chat/components/InviteFriends.vue
@@ -0,0 +1,591 @@
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { showToast,showLoadingToast,closeToast } from "vant";
+import pinyin from "js-pinyin";
+import icon2 from "@/assets/shanchu.png";
+import shanchu from "@/assets/chanchu.svg";
+import shanchu2 from "@/assets/svg/shanchu2.svg";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { storeToRefs } from "pinia";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import addChatFriendList from "./addChatFriendList.vue"; // 导入好友列表组件
+import VirtualList from "@/components/virtualList";
+const { t } = useI18n();
+const contactStore = useContactStore();
+const {
+  groupMemberInfo,
+  contactList,
+  allGroupOwnerOrAdmin
+} = storeToRefs(contactStore);
+const { updateContact } = contactStore;
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const OpenIM = getSDK();
+const $api = inject("$api");
+const router = useRouter();
+const detailSetRef = ref(null);
+useGrade(detailSetRef, 5);
+const searchValue = ref("");
+const dataList = ref([]);
+const groupMenmberList = ref([]);
+const isSearchPage = ref(false);
+const searchList = ref([]);
+const searchForm = ref("");
+const checkedResult = ref([]);
+const indexList = ref([]); // 首字母的分组数据
+const originalDataList = ref([]); // 克隆一份待搜索的原始数据
+const theoreticalListRef = ref(null);// 虚拟列表的实例
+
+onMounted(() => {
+  getFriendList();
+});
+
+// 新的-搜索框监听
+watch(() => searchValue.value, (newValue) => {
+  handleSearch(newValue);
+});
+
+// 获取指定群的群成员信息
+const getFriendList = () => {
+  OpenIM.getFriendList().then(res => {
+    getMemberList(res.data);
+  });
+};
+
+// 获取指定群的群成员信息
+const getMemberList = list => {
+  let params = {
+    groupID: groupChatConfig.value.groupID, // 群 ID
+    filter: 0, // 群成员角色 0所有成员  1群主 2群管理员  3群普通成员  4群管理员和普通成员  5群主和群管理员
+    offset: 0,
+    count: 1000
+  };
+  OpenIM.getGroupMemberList(params).then(res => {
+    let arr = [];
+    console.error(res, 222222); // 60是管理员级别 普通人员级别是20 100是群主
+    groupMenmberList.value = res.data;
+    arr = groupMenmberList.value.map(el => el.userID);
+    // 对数据分组
+    dataList.value = filterCity(
+      list.filter(el => !arr.includes(el.friendInfo.userID))
+    );
+    // 对数据过滤首字母的type
+    extractTypes(dataList.value)
+    console.error('=================dataList.value',dataList.value);
+    console.error('=================indexList.value',indexList.value);
+    // 打印部分数据
+    // const lastFiveData = dataList.value.value.slice(-5);
+  });
+};
+
+// 新分组函数
+const filterCity = list => {
+  // 为每个元素添加 pinyin 属性
+  list.forEach(el => {
+    el.pinyin =
+      pinyin.getFullChars(el.friendInfo.nickname) || el.friendInfo.nickname;
+  });
+  // 创建字母数组 A-Z
+  let letterArray = [];
+  for (let i = 65; i < 91; i++) {
+    letterArray.push(String.fromCharCode(i));
+  }
+  // 初始化新的城市数组
+  let newCities = [];
+  // 为每个字母创建分组
+  letterArray.forEach(letter => {
+    // 筛选出以该字母开头的城市
+    let filteredList = list.filter(
+      item => item.pinyin.substring(0, 1).toUpperCase() === letter
+    );
+    // 如果有符合条件的城市，则进行处理
+    if (filteredList.length > 0) {
+      // 在第一个对象中添加 type 属性
+      filteredList[0] = { type: letter, ...filteredList[0] };
+      // 将处理后的列表合并到 newCities 中
+      newCities = newCities.concat(filteredList);
+    }
+  });
+  return newCities;
+};
+
+// 提取 type 并赋值给 indexList.value 的函数
+const extractTypes = (cityList) => {
+  // 提取所有的 type 字段
+  const types = cityList
+    .filter((item, index) => cityList[index].type !== undefined)
+    .map(item => item.type);
+  // 将提取的 types 数组赋值给 indexList.value
+  indexList.value = types;
+};
+
+const addClick = () => {
+  let params = {
+    groupID: groupChatConfig.value.groupID,
+    reason: "",
+    userIDList: checkedResult.value
+  };
+  OpenIM.inviteUserToGroup(params)
+    .then(res => {
+      const users = res.data || []
+      if (users.length) {
+        // 这里如果有user的话表示这个账号状态异常 1封号 2 注销 3 注销待审核   这里由于3之前没有处理，把它处理成2的状态
+        const userStatusMap = Object.fromEntries(users.map(item => [item.userID, item.status === 3 ? 2 : item.status]))
+        const userIds = Object.keys(userStatusMap)
+        // 把新的状态更新到全局的concatList中
+        const mapUsers = contactList.value.filter(item => userIds.includes(item.userID)).map(item => {
+          const newUserItem = {...item, status: userStatusMap[item.userID] }
+          updateContact(newUserItem)
+          return newUserItem
+        })
+        // 获取用户的昵称（好友备注 > 用户昵称）
+        const userNames = mapUsers.map(item => item.remark || item.nickname).join('、')
+        showToast({ message: t('invite_fail', { usernames: userNames}), position: "top" });
+        router.push("/home/contact/groupDetails/groupchatMember");
+        return
+      }
+      showToast({ message: t("addSuccessfully"), position: "top" });
+      router.push("/home/contact/groupDetails/groupchatMember");
+    })
+    .catch(err => {
+      console.log(err);
+      if (err.errCode == 100000) {
+        showToast({ message: t('groupSizeUpperLimit'), position: "top" });
+        return;
+      }else if (err.errCode == 100006) {
+        showToast({ message: t('groupEnterLimit'), position: "top" });
+        return;
+      } else {
+        showToast({
+          message: t("error_sdk_err") + "(" + err.errCode + ")",
+          position: "top"
+        });
+      }
+    });
+};
+
+const onSearch = val => {
+  if (searchForm.value) {
+    OpenIM.searchFriends({
+      keywordList: [searchForm.value],
+      isSearchUserID: false,
+      isSearchNickname: true,
+      isSearchRemark: true
+    }).then(res => {
+      searchList.value = res.data;
+      console.log('searchList.value',searchList.value);
+    });
+  }
+};
+
+const onCancel = () => {
+  isSearchPage.value = !isSearchPage.value;
+};
+// IndexBar 索引栏 点击事件
+const handeBarClick = (event) => {
+  // 获取点击的文本内容
+  const clickedText = event.target.innerText;
+  // 查找数组中符合条件的元素索引
+  const index = dataList.value.findIndex(item => item.type === clickedText);
+  if (index !== -1) {
+    console.error('找到了',index);
+    if (index===0) {
+      // 找到了匹配的元素，滚动到该索引位置
+      theoreticalListRef.value.scrollToIndex(0);
+    } else {
+      theoreticalListRef.value.scrollToIndex(index);
+    }
+  } else {
+    console.error(`未找到与 "${clickedText}" 匹配的元素。`);
+  }
+  // 打印调试信息
+  // console.error('触发了锚点', event);
+  // console.error('事件源-', clickedText);
+  // console.error('theoreticalListRef=====', theoreticalListRef.value);
+  // console.error('原的数据 =', dataList.value);
+};
+
+// 清空输入框
+const handleClear = (val) => {
+  const toast = showLoadingToast({
+    duration: 1500, // 0 表示不自动关闭，需要手动关闭
+    forbidClick: true,
+    message: '加载中',
+  });
+  dataList.value =  [...originalDataList.value];
+};
+// 搜索输入框
+const handleSearch = (val) => {
+  // 如果没有保存过原始数据，则保存当前的数据作为原始数据
+  if (originalDataList.value.length === 0) {
+    originalDataList.value = [...dataList.value];
+  }
+  // 检查 val 是否为空
+  if (!val) {
+    // 如果 val 为空，恢复到原始数据
+    dataList.value = [...originalDataList.value];
+  } else {
+    // 如果 val 不为空，根据 val 进行过滤
+    dataList.value = originalDataList.value.filter(item => {
+      const { friendInfo } = item;
+      // 检查 friendInfo 是否存在以及是否包含 nickname 或 remark
+      if (friendInfo) {
+        const { nickname, remark } = friendInfo;
+        const matchesNickname = nickname && nickname.includes(val);
+        const matchesRemark = remark && remark.includes(val);
+        // 如果 nickname 或 remark 中包含搜索值，则保留该项
+        return matchesNickname || matchesRemark;
+      }
+      return false;
+    });
+  }
+};
+
+// 动态计算虚拟列表的高度
+const estimateSize = computed(() => {
+  const itemHeight = 50;
+  return dataList.value.length * itemHeight;
+});
+
+const toUserDetail = item => {
+  router.push(
+    `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${item.userID}`
+  );
+};
+
+const addTitle = computed(
+  () => `${t("hasSelectFriend")}  （${checkedResult.value.length}）`
+);
+
+const MAX_GROUP_COUNT = 50;
+watchEffect(() => {
+  if (checkedResult.value.length >= MAX_GROUP_COUNT) {
+    showToast({ message: t("groupEnterLimit"), position: "top" });
+  }
+});
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+const onJson = (data) => {
+  let obj = data.friendInfo.ex ? JSON.parse(data.friendInfo.ex) : {}
+  return obj
+}
+// 是否是正常用户
+const onDisabled = (data) => {
+  let ex = data.friendInfo.ex
+  if(ex){
+    return JSON.parse(ex).status === 0 ? false : true
+  }else {
+    return false
+  }
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <div v-if="!isSearchPage">
+      <AppNavBar :title="addTitle" left-arrow views_grade="fifth_view">
+        <template #left>
+          <van-icon
+            class="nav-icon"
+            name="cross"
+            @click="router.push('/home/contact/groupDetails/groupchatMember')"
+          />
+        </template>
+        <template #right>
+          <span
+            class="nav-text"
+            v-if="checkedResult.length"
+            @click="addClick"
+            >{{ $t("add") }}</span
+          >
+        </template>
+      </AppNavBar>
+      <div class="detailSet-wrap">
+        <div class="detailSet-content">
+          <!-- @focus="isSearchPage = true" -->
+          <van-search
+            class="search-input"
+            v-model="searchValue"
+            clearable
+            :placeholder="$t('search')"
+            @clear="handleClear"
+          />
+          <van-index-bar
+            v-if="dataList.length"
+            :index-list="indexList"
+            class="index-bar"
+            :sticky-offset-top="56"
+            highlight-color="#A4A4A7"
+            @click="handeBarClick"
+          >
+              <van-checkbox-group
+                v-model="checkedResult"
+                :max="MAX_GROUP_COUNT"
+              >
+                <virtual-list
+                  ref="theoreticalListRef"
+                  class="theoretical-list"
+                  :data-index="'index'"
+                  :data-key="'pinyin'" 
+                  :data-sources="dataList"
+                  :data-component="message => addChatFriendList"
+                  :estimate-size="estimateSize"
+                  :keeps="100"
+                >
+                </virtual-list>
+              </van-checkbox-group>
+          </van-index-bar>
+          <div v-else class="empty">
+            {{ $t("notContacts") }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="search-warp" v-else>
+      <van-search
+        v-model="searchForm"
+        show-action
+        :placeholder="$t('search_hine_1')"
+        @update:model-value="onSearch"
+        @cancel="onCancel"
+      />
+      <div v-if="searchList.length">
+        <van-cell
+          v-for="(item, index) in searchList"
+          :key="index"
+          @click="toUserDetail(item)"
+        >
+          <template #title>
+            <div class="custom-name">
+              <Avatar
+                width="32"
+                height="32"
+                :url="item.faceURL"
+                :name="item.nickname"
+                @updateUrl="url => item.faceURL = url"
+              ></Avatar>
+              <div>
+                <span class="custom-title">{{ item.remark || item.nickname }}</span>
+                <div class="custom-nickname" v-if="item.remark && item.nickname">{{$t('nicknames') + ':' + item.nickname }}</div>
+              </div>
+            </div>
+          </template>
+        </van-cell>
+      </div>
+      <div v-else class="empety-warp">
+        <img src="@/assets/empety.svg" alt="" />
+        <!-- <div><img src="@/assets/empety.svg" alt="" /></div> -->
+        <div>{{ $t("searchNotFoundMember") }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.theoretical-list {
+  height: auto;
+  max-height: 86vh;
+  overflow-y: auto; /* 启用垂直滚动 */
+  scrollbar-width: none; /* Firefox 隐藏滚动条 */
+  -ms-overflow-style: none; /* IE 隐藏滚动条 */
+}
+.theoretical-list::-webkit-scrollbar {
+  display: none; /* WebKit 隐藏滚动条 */
+}
+@media screen and (min-width: 750px) {
+  :deep(.van-index-bar__sidebar) {
+    right: 16% !important;
+  }
+}
+.detailSet {
+  overflow-y: auto;
+  background-color: #fff;
+}
+.custom-name {
+  display: flex;
+  align-items: center;
+}
+.custom-nickname {
+  font-size: 0.75rem;
+  color: #76767A;
+  margin-left: 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 292px;
+  white-space: nowrap;
+}
+.detailSet-wrap,
+.search-warp {
+  background: #fff;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  padding: 56px 0 10px 0;
+  position: relative;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+    }
+    .custom-title {
+      // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+    :deep(.van-swipe-cell__right) {
+      right: -1px;
+
+      .van-button {
+        width: 70px;
+        height: 56px;
+      }
+    }
+
+    :deep(.van-cell) {
+      height: 56px;
+    }
+
+    :deep(.van-swipe-cell__wrapper) {
+      .custom-title {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+:deep(.van-dialog__confirm) {
+  color: #fc5a50;
+}
+
+.search-input {
+  margin: 8px 0;
+
+  :deep(.van-cell) {
+    height: 36px !important;
+  }
+}
+
+.index-bar {
+  :deep(.van-index-bar__sidebar) {
+    color: #a4a4a7;
+
+    :deep(.van-index-anchor) {
+      color: #a4a4a7 !important;
+    }
+  }
+}
+
+:deep(.van-cell__title) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.van-search__action) {
+  color: #0095f6;
+}
+
+:deep(.van-cell) {
+  .van-cell__title {
+    .custom-title {
+      margin-left: 10px;
+      display: inline-block;
+      width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.empety-warp {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin-top: 135px;
+
+  div {
+    display: flex;
+    justify-content: center;
+  }
+
+  div:nth-child(2) {
+    margin-top: 30px;
+    color: var(--60, #76767a);
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    /* 150% */
+    letter-spacing: 0.5px;
+  }
+}
+
+:deep(.van-badge__wrapper) {
+  display: flex;
+  align-items: center;
+}
+
+.search-warp {
+  padding-top: 0;
+}
+
+.nav-text {
+  color: #0095f6;
+  text-align: center;
+  font-family: PingFang SC;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.empty {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  color: rgba(27, 27, 34, 0.4);
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+:deep(.van-checkbox__label) {
+  flex: 1;
+  position: relative;
+}
+.right-text {
+  color: #1B1B2299;
+  font-size: 0.75rem;
+}
+</style>
diff --git a/src/views/contact/chat/components/addAdministrator.vue b/src/views/contact/chat/components/addAdministrator.vue
new file mode 100644
index 0000000..12ddcd7
--- /dev/null
+++ b/src/views/contact/chat/components/addAdministrator.vue
@@ -0,0 +1,248 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import pinyin from 'js-pinyin'
+import { getSDK } from '@/utils/openIM/sdk/index.js' 
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+const { t } = useI18n()
+const { groupId } = useContactStore();
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 5)
+const searchValue = ref('')
+const dataList = ref([])
+const isSearchPage = ref(false)
+const searchList = ref([])
+onMounted(() => {
+    // 获取群普通成员列表
+    getGroupList()
+})
+const getGroupList = () => {
+  OpenIM.getGroupMemberList({groupID: groupId,filter: 0,offset: 0,count: 99999}).then(res => {
+    console.log(res,999);
+    //已经是群主或者群管理员的不需要展示在添加管理员列表中
+    const filterList = res.data.filter(item=>item.roleLevel!=60&&item.roleLevel!=100)
+    dataList.value = filterList
+  })
+}
+// 取消
+const onCancel = () => {
+  isSearchPage.value = !isSearchPage.value;
+};
+// 搜索
+const onSearch = (val) => {
+  if (searchValue.value) {
+    OpenIM.searchFriends({
+      keywordList: [searchValue.value],
+      isSearchUserID: false,
+      isSearchNickname: true,
+      isSearchRemark: false,
+    }).then((res) => {
+      console.error("搜索的结果", res);
+      searchList.value = res.data;
+    });
+  }
+};
+// 清楚
+const onClear = (val) => {
+  searchList.value = [];
+};
+
+const clickFn = (item) => {
+    router.push(`/home/contact/groupDetails/manageGrounp/addDetails?userID=${item.userID}&type=add`)
+}
+const changeColor = (text) => {
+    if (text.includes(searchValue.value)) { // 判断段落内容是否包含指定文本
+        var regex = new RegExp(searchValue.value, 'g'); // 创建正则表达式对象，设置全局标志'g'
+        var replacedText = text.replace(regex, `<span style="color: #0095F6;">${searchValue.value}</span>`); // 将匹配到的文本用红色样式包裹起来
+        return replacedText; // 更新段落内容
+    }
+}
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <div v-if="!isSearchPage">
+    <AppNavBar :title="$t('addManager')" left-arrow views_grade="fifth_view" @click-left="router.push('/home/contact/groupDetails/manageGrounp/setAdministrator')"></AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-search class="search-input" v-model="searchValue" @focus="isSearchPage = true" :placeholder="$t('search')"/>
+        <van-cell :title="item.nickname"  v-for="item in dataList" :key="item.type"   @click="clickFn(item)">
+            <template #title>
+                 <!-- 设置管理员、查看在线状态、只有群主和群管理员可查看 在线状态 -->
+                <van-badge
+                  class="dot-on-line-state"
+                  :dot="isOnLineState(item.userID)"
+                  color="#43FA51"
+                />
+                <Avatar width="32" height="32" :url="item.faceURL" :name="item.nickname" @updateUrl="url => item.faceURL = url"></Avatar>
+                <span class="custom-title">{{ item.nickname }}</span>
+            </template>
+        </van-cell>
+      </div>
+    </div>
+    </div>
+    <div class="search-warp" v-else>
+        <van-search
+            v-model="searchValue"
+            show-action
+            :placeholder="$t('search_hine_1')"
+            @update:model-value="onSearch"
+            @cancel="onCancel"
+            @clear="onClear"
+        />
+        <template v-if="searchList.length">
+            <van-cell v-for="(item, index) in searchList" :key="index" @click="clickFn(item)">
+                <template #title>
+                    <!-- 设置管理员、查看在线状态、只有群主和群管理员可查看 在线状态 -->
+                    <van-badge
+                     class="dot-on-line-state"
+                     :dot="isOnLineState(item.userID)"
+                     color="#43FA51"
+                    />
+                    <Avatar width="32" height="32" :url="item.faceURL" @updateUrl="url => item.faceURL = url" />
+                    <van-highlight :keywords="searchValue" :source-string="item.nickname" />
+                </template>
+            </van-cell>
+        </template>
+        <div v-else class="empety-warp">
+            <div><img src="@/assets/empety.svg" alt=""></div>
+            <div>{{ $t('searchNotFoundMember') }}</div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dot-on-line-state {
+  position: absolute;
+  left: 38px;
+  top: 12px;
+}
+.detailSet {
+    overflow-y: auto;
+    background-color: #fff;
+}
+.detailSet-wrap, .search-warp{
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y:auto;
+  .detailSet-content  {
+    :deep(.van-cell) {
+        display: flex;
+        align-items: center;
+        padding-right: 16px;
+        .first-cell {
+            :deep(.van-cell) {
+                height: 40px;
+            }
+            
+        }
+        .second-cell {
+            :deep(.van-cell) {
+                height: 72px;
+            }
+        }
+    }
+    .custom-title {
+        color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-left: 5px;
+    }
+    :deep(.van-swipe-cell__right) {
+        right: -1px;
+        .van-button {
+            width: 70px;
+            height: 56px;
+        }
+    }
+    :deep(.van-cell) {
+        height: 56px;
+    }
+
+  }
+  
+    :deep(.van-cell__title) {
+        display: flex;
+        align-items: center;
+    }
+}
+.dialog-text {
+    padding: 20px 0 24px 0;
+    text-align: center;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+    letter-spacing: 0.28px;
+}
+:deep(.van-dialog__confirm) {
+color: #FC5A50;
+}
+.search-input {
+margin: 8px 0;
+:deep(.van-cell) {
+    height: 36px !important;
+}
+}
+.index-bar {
+:deep(.van-index-bar__sidebar) {
+    color: #A4A4A7;
+    :deep(.van-index-anchor) {
+        color: #A4A4A7 !important;
+    }
+}
+}
+.del-icon {
+    margin-right: 10px;
+}
+:deep(.van-badge__wrapper) {
+  display: flex;
+  align-items: center;
+}
+.search-warp {
+    padding-top: 0 !important;
+}
+.empety-warp {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin-top: 135px;
+    div {
+        display: flex;
+        justify-content: center;
+    }
+    div:nth-child(2) {
+        margin-top: 30px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px; /* 150% */
+        letter-spacing: 0.5px;
+    }
+}
+:deep(.van-search__action) {
+    color: #0095F6;
+}
+</style>
diff --git a/src/views/contact/chat/components/addChatFriendList.vue b/src/views/contact/chat/components/addChatFriendList.vue
new file mode 100644
index 0000000..5aa9f26
--- /dev/null
+++ b/src/views/contact/chat/components/addChatFriendList.vue
@@ -0,0 +1,138 @@
+<template>
+  <!-- 好友列表组件 -->
+  <div class="friend-list-item">
+    <van-index-anchor :index="source.type" v-if="source.type" />
+    <van-checkbox
+      :name="source.friendInfo.userID"
+      style="padding-left: 16px"
+      :disabled="onDisabled(source)"
+    >
+      <van-cell :title="source.friendInfo.remark || source.friendInfo.nickname">
+        <template #title>
+          <cdnSource v-if="source.friendInfo.faceURL" :defaultUrl="source.friendInfo.faceURL">
+            <template #cdnSlot="{ cdnUrl }">
+              <Avatar
+                width="32"
+                height="32"
+                :url="cdnUrl"
+                :name="source.friendInfo.remark || source.friendInfo.nickname"
+              ></Avatar>
+            </template>
+          </cdnSource>
+          <div>
+            <span
+              v-if="showGroupOwner(source.friendInfo.userID) == ''"
+              class="custom-title"
+              >{{
+                source.friendInfo.remark || source.friendInfo.nickname
+              }}</span
+            >
+            <CommonLottie
+              v-if="showGroupOwner(source.friendInfo.userID) != ''"
+              :isGroup="showGroupOwner(source.friendInfo.userID)"
+              :showName="source.friendInfo.remark || source.friendInfo.nickname"
+            ></CommonLottie>
+            <div
+              v-if="searchValue && source.friendInfo.remark"
+              class="custom-nickname"
+            >
+              {{ $t("nicknames") + ":" + source.friendInfo.nickname }}
+            </div>
+          </div>
+        </template>
+        <template #right-icon>
+          <div v-if="onDisabled(source)">
+            <span class="right-text" v-if="onJson(source)?.status == 2"
+              >已注销</span
+            >
+            <span class="right-text" v-if="onJson(source)?.status == 1"
+              >已封号</span
+            >
+          </div>
+        </template>
+      </van-cell>
+      <div class="mask-box" v-if="onDisabled(source)"></div>
+    </van-checkbox>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { storeToRefs } from "pinia";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { groupMemberInfo, contactList, allGroupOwnerOrAdmin } =
+  storeToRefs(contactStore);
+
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {},
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const searchValue = ref("");
+
+const onJson = (data) => {
+  let obj = data.friendInfo?.ex ? JSON.parse(data.friendInfo?.ex) : {};
+  return obj;
+};
+// 是否是正常用户
+const onDisabled = (data) => {
+  let ex = data.friendInfo?.ex;
+  if (ex) {
+    return JSON.parse(ex).status === 0 ? false : true;
+  } else {
+    return false;
+  }
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+</script>
+
+<style lang="less" scoped>
+.friend-list-item {
+  // border: solid 1px red;
+}
+.custom-nickname {
+  font-size: 0.75rem;
+  color: #76767a;
+  margin-left: 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 292px;
+  white-space: nowrap;
+}
+.mask-box {
+  position: absolute;
+  top: 0;
+  left: -32px;
+  width: calc(100% + 20px);
+  height: 100%;
+  background-color: #fff;
+  opacity: 40%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contact/chat/components/addDetails.vue b/src/views/contact/chat/components/addDetails.vue
new file mode 100644
index 0000000..dffdc60
--- /dev/null
+++ b/src/views/contact/chat/components/addDetails.vue
@@ -0,0 +1,405 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { showToast } from "vant";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+const { t } = useI18n();
+const $api = inject("$api");
+const OpenIM = getSDK();
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const { groupChatConfig } = storeToRefs(userStore);
+const detailSetRef = ref(null);
+useGrade(detailSetRef, 5);
+const checkedList = ref({
+  hasEditGroupNamePermission: 1,
+  hasDeleteGroupMemberMessagePermission: 1,
+  hasSetGroupMutePermission: 1,
+  hasDeleteGroupMemberPermission: 1,
+  hasEditGroupNotificationPermission: 1,
+  hasOpenMaskPermission: 0,
+  hasAddFriendByFreePermission: 0,
+  hasDetailInfoPermission: 0,
+  hasSetSaveMsgTimePermission: 0, // 设置聊天记录保留时间
+
+  // hasApplyGroupMemberPermission: 0,
+});
+const permissionCheckBox = ref([
+  { value: "hasEditGroupNamePermission", label: t("changeGroupName") }, // 修改群名称
+  {
+    value: "hasDeleteGroupMemberMessagePermission",
+    label: t("deleteMemberMessage")
+  }, // 删除群员消息
+  { value: "hasSetGroupMutePermission", label: t("memberMute") }, // 群员禁言
+  { value: "hasDeleteGroupMemberPermission", label: t("deleteMember") }, // 移出群员
+  { value: "hasEditGroupNotificationPermission", label: t("changeNotice") }, // 发布/修改群公告
+  { value: "hasAddFriendByFreePermission", label: "添加群成员免校验同意" }, // 发布/修改群公告
+
+  { value: 'hasOpenMaskPermission', label: "查看群聊面具" }, // 查看群聊面具
+  { value: 'hasDetailInfoPermission', label: "查看群成员详细信息" }, // 查看群成员详细信息
+  { value: 'hasSetSaveMsgTimePermission', label: "设置聊天记录保留时间" }, // 查看群成员详细信息
+]);
+const originPermissionEx = ref({});
+permissionCheckBox.value.forEach(item => {
+  originPermissionEx.value[item.value] = { value: 0, update: 0 };
+});
+const userInfo = ref({});
+onMounted(() => {
+  onSearch();
+});
+const onSearch = async val => {
+  if (route.query.userID) {
+    const { data } = await OpenIM.searchGroupMembers({
+      groupID: groupChatConfig.value.groupID,
+      keywordList: [route.query.userID],
+      isSearchUserID: true,
+      offset: 0,
+      count: 20
+    });
+    userInfo.value = data[0];
+    // 编辑的时候更新权限内容
+    if (route.query.type === 'edit' && userInfo.value.ex) {
+      for (let key in JSON.parse(userInfo.value.ex)) {
+        checkedList.value[key] = JSON.parse(userInfo.value.ex)[key].value;
+      }
+    }
+  }
+};
+
+// 异常处理：在整个函数体外部包裹了一个 try-catch 块，以捕获整体函数可能抛出的异常，保证程序的稳定性。
+// 简化逻辑：将不必要的变量声明合并，并简化了对象的深拷贝操作，提升了代码的可读性和执行效率。
+// 错误处理：在内部的 try-catch 块中捕获了 JSON.parse 可能抛出的异常，并输出错误信息到控制台，便于调试和问题定位。
+const subAdd = async () => {
+  try {
+    let newEx = JSON.parse(JSON.stringify(originPermissionEx.value));
+    let oldEx = {};
+    // Update newEx with values from checkedList.value
+    for (let key in newEx) {
+      newEx[key].value = checkedList.value[key];
+      if (route.query.type === 'add') {
+        newEx[key].update = checkedList.value[key];
+      }
+    }
+    // Handle edit mode and compare with oldEx
+    if (route.query.type === 'edit' && userInfo.value.ex) {
+      try {
+        oldEx = JSON.parse(userInfo.value.ex);
+      } catch (error) {
+        console.error('Error parsing userInfo.value.ex:', error);
+        oldEx = {};
+      }
+      for (const key in newEx) {
+        if (oldEx[key] && oldEx[key].value !== newEx[key].value) {
+          newEx[key].update = 1;
+        } else {
+          newEx[key].update = 0;
+        }
+      }
+    }
+    // Update group member info using OpenIM API
+    let params = {
+      groupID: groupChatConfig.value.groupID,
+      userID: userInfo.value.userID,
+      ex: JSON.stringify(newEx),
+      roleLevel: 60
+    }
+    // 编辑的时候不需要校验roleLevel
+    if (route.query.type === 'edit') {
+      // 删除 roleLevel 字段
+      delete params.roleLevel;
+    }
+    await OpenIM.setGroupMemberInfo(params);    
+    router.push("/home/contact/groupDetails/manageGrounp/setAdministrator");
+    showToast({ message: t("addSuccessfully"), position: "top" });
+  } catch (error) {
+    if (error.errCode===100008) {
+      // 换行时不截断单词
+      showToast({
+        message:'该用户未达到成为管理员条件',
+        wordBreak: 'break-word',
+      });
+    }
+    console.error('Error in subAdd function:', error);
+  }
+};
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar
+      :title="$t('privateSetting')"
+      left-arrow
+      views_grade="fifth_view"
+      @click-left="router.back()"
+    >
+      <template #right>
+        <span class="nav-text" @click="subAdd">{{ $t("finish") }}</span>
+      </template>
+    </AppNavBar>
+    <div class="detailSet-wrap" id="detailSet-wrap1">
+      <div class="detailSet-content">
+        <div class="avatar">
+          <div>
+            <Avatar
+              width="60"
+              height="60"
+              :url="userInfo.faceURL"
+              :name="userInfo.nickname"
+              @updateUrl="url => userInfo.faceURL = url"
+            ></Avatar>
+          </div>
+          <div>
+            <span>{{ userInfo.nickname }}</span>
+          </div>
+          <div class="name_last">
+            <span> {{ $t("gmiTitle") + userInfo.nickname }}</span>
+          </div>
+        </div>
+        <div class="title-text">
+          {{ $t("whatCanManagerDo") }}
+        </div>
+        <van-cell-group :border="true">
+          <van-cell :title="$t('changeGroupName')">
+            <template #title>
+              <span class="custom-title">{{ $t("changeGroupName") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasEditGroupNamePermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <van-cell :title="$t('deleteMemberMessage')">
+            <template #title>
+              <span class="custom-title">{{ $t("deleteMemberMessage") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasDeleteGroupMemberMessagePermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <van-cell :title="$t('memberMute')">
+            <template #title>
+              <span class="custom-title">{{ $t("memberMute") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasSetGroupMutePermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <van-cell :title="$t('deleteMember')">
+            <template #title>
+              <span class="custom-title">{{ $t("deleteMember") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasDeleteGroupMemberPermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <van-cell :title="$t('changeNotice')">
+            <template #title>
+              <span class="custom-title">{{ $t("changeNotice") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasEditGroupNotificationPermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <van-cell :title="$t('groupMask')">
+            <template #title>
+              <span class="custom-title">{{ $t("groupMask") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasOpenMaskPermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <van-cell :title="$t('AddGroupMembers')">
+            <template #title>
+              <span class="custom-title">{{ $t("AddGroupMembers") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch
+                v-model="checkedList.hasAddFriendByFreePermission"
+                :active-value="1"
+                :inactive-value="0"
+                size="16px"
+              />
+            </template>
+          </van-cell>
+          <!-- 本版本不上 -->
+          <van-cell :title="$t('viewDetailed')" v-if="false">
+            <template #title>
+              <span class="custom-title">{{ $t("viewDetailed") }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch :active-value="1" :inactive-value="0" size="16px" />
+            </template>
+          </van-cell>
+          <!-- <van-cell :title="$t('checkInGroup')"> 进群审核
+            <template #title>
+              <span class="custom-title">{{ $t('checkInGroup') }}</span>
+            </template>
+            <template #right-icon>
+                <van-switch v-model="checkedList.hasApplyGroupMemberPermission" :active-value="1" :inactive-value="0" size="16px"  />
+            </template>
+          </van-cell> -->
+          <van-cell :title="'查看群成员详细信息'">
+            <template #title>
+              <span class="custom-title">{{ $t('查看群成员详细信息') }}</span>
+            </template>
+            <template #right-icon>
+                <van-switch v-model="checkedList.hasDetailInfoPermission" :active-value="1" :inactive-value="0" size="16px"  />
+            </template>
+          </van-cell>
+          <van-cell :title="'设置聊天记录保留时间'">
+            <template #title>
+              <span class="custom-title">{{ ('设置聊天记录保留时间') }}</span>
+            </template>
+            <template #right-icon>
+                <van-switch v-model="checkedList.hasSetSaveMsgTimePermission" :active-value="1" :inactive-value="0" size="16px"  />
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y: auto;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1b1b22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+
+    .avatar {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 0 30px 0;
+
+      img {
+        width: 60px;
+        height: 60px;
+        margin-bottom: 16px;
+      }
+
+      span {
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+
+    .popup {
+      :deep(.van-cell-group) {
+        background-color: #f8f8fb;
+      }
+
+      :deep(.van-cell) {
+        padding: 0;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+      }
+
+      .second_cell {
+        color: #fc5a50;
+        margin-bottom: 10px;
+      }
+    }
+
+    .title-text {
+      padding: 0 0 10px 16px;
+      color: var(--60, #76767a);
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      /* 150% */
+    }
+
+    .name_last {
+      margin-top: 4px;
+
+      span {
+        color: var(--60, #76767a);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+  }
+}
+
+:deep(.van-popup) {
+  :deep(.van-cell) {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/editGroupChatAvatarUrl.vue b/src/views/contact/chat/components/editGroupChatAvatarUrl.vue
new file mode 100644
index 0000000..569d50f
--- /dev/null
+++ b/src/views/contact/chat/components/editGroupChatAvatarUrl.vue
@@ -0,0 +1,321 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/mine-avatar.svg"
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+import customAvatar from '@/components/customAvatar/index.vue'
+import { showConfirmDialog } from 'vant'
+import { handleImgCdnError } from "@/utils/tools"
+
+const { t } = useI18n()
+const OpenIM = getSDK()
+const avatarSetRef = ref(null)
+useGrade(avatarSetRef, 2)
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setGroupInfo } = contactStore
+const { groupInfo } = storeToRefs(contactStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const headImg = ref("");
+const imgList = ref([]);
+const active = ref(0);
+onMounted(() => {
+  getImgList();
+  if(route?.query?.avatarUrl)headImg.value = route.query.avatarUrl
+});
+
+// 获取我的群信息
+const getMyGroupInfo = async () => {
+  let params = {
+    groupID: '',
+    keywordList: [userInfo.value.userID],
+    isSearchUserID: true,
+    isSearchMemberNickname: false,
+    offset: 0,
+    count: 20,
+  }
+  params.groupID = groupInfo.value.groupID
+  const res = await OpenIM.searchGroupMembers(params);
+  if (res.data.length) {
+    headImg.value = res.data[0].faceURL
+  }
+}
+
+// 获取头像列表
+const getImgList = async () => {
+    imgList.value = []
+    const params = {type:3}// 群头像
+    // 自定义头像
+    const customRes = await $api.avatar.avatarList({ 
+      avatar_type: params.type,
+      status: 0 
+    });
+    if(customRes.code !== 0) return
+    let customData = [{
+      name: t('custom'),
+      isCustom: true,
+      contentList: customRes.data || []
+    }]
+    imgList.value = customData
+
+    // 默认头像
+    const res = await $api.login.getAllImageByType(params);
+    if (res.code != 0) return
+    if (Array.isArray(res.data.list)) {
+      res.data.list.forEach((item, index) => {
+        item.contentList = item.content ? JSON.parse(item.content) : [];
+        item.isCustom = false
+      });
+      imgList.value = [...imgList.value, ...res.data.list]
+    }
+};
+
+// 保存
+const onSubmit = async () => {
+    localStorage.setItem('editGroupChatAvatarUrl',headImg.value )
+    hanldBack()
+};
+
+const onEdit = (url) => {
+  headImg.value = url;
+};
+
+const hanldBack = () => {
+  router.go(-1)
+}
+
+// 申请记录
+const onApplicationRecord = () => {
+  router.push('/home/my/profile/applicationRecord')
+}
+
+const handleDelete = async (item, idx) => {
+  // 这里文案要自己补充，目前的只是cv
+  await showConfirmDialog({
+    title: '',
+    message: t('deleteIcon'),
+    className: 'custom-del',
+    confirmButtonText: t('delete'),
+    confirmButtonColor: '#FC5A50'
+  })
+  // 这里需要真正删需要调接口
+ const res = await $api.avatar.avatarDelete({id:item.id})
+ if (res.code != 0) return
+ showToast({message: t('deleteSuccessfully')});
+ getImgList()
+}
+
+const handleAfterUpload = async (url) => {
+  console.log('handleAfterUploadurl:', url)
+  // 这里调接口，如审核之类的，然后展示弹窗
+  const res = await $api.avatar.avatarAdd({
+    avatar_type: route.query.type === 'myself-avatar' ? 1 : 3,
+    url
+  })
+  if(res.code !== 0) return
+  getImgList()
+  await showConfirmDialog({
+    title: '',
+    message: t('applyIconTip'),
+    className: 'custom-del',
+    confirmButtonText: t('applyIconProgress'),
+    confirmButtonColor: '#0095F6'
+  })
+  onApplicationRecord()
+}
+</script>
+
+<template>
+  <div ref="avatarSetRef"  class="avatarSet">
+    <AppNavBar :title="$t('changeAvatar')" :right-text="$t('applyRecord')" left-arrow views_grade="fifth_view" @click-right="onApplicationRecord" @click-left="hanldBack">
+    </AppNavBar>
+    <div class="avatarSet-wrap">
+      <div class="avatarSet-content">
+        <!-- 选择好的头像 -->
+        <div class="update-img">
+          <van-image fit="cover" v-if="!headImg" round :src="defaultAvatar" width="168px" height="168px" />
+          <cdnSource v-else :defaultUrl="headImg">
+            <template #cdnSlot="{ cdnUrl }">
+              <van-image fit="cover" round :src="cdnUrl" width="168px" height="168px" />
+            </template>
+          </cdnSource>
+        </div>
+        <van-tabs v-model:active="active" swipeable class="img-box">
+          <van-tab :title="item.name" v-for="(item, index) in imgList" :key="index">
+            <div class="box-item" v-if="!item.isCustom">
+              <van-image v-for="img in item.contentList" :key="img" class="box-item-img" :src="img.url" round
+                :class="headImg === img.url ? 'active' : ''" @click="onEdit(img.url)" @error="e => handleImgCdnError(e, img, 'url')" />
+            </div>
+            <customAvatar v-if="item.isCustom" v-model:activeImage="headImg" :isCustom="item.isCustom" :list="item.contentList" @delete="handleDelete" @afterUploaded="handleAfterUpload" />
+          </van-tab>
+        </van-tabs>
+        <div class="flex-btn">
+          <van-button type="default" class="cancle-btn btn" @click="hanldBack">{{ $t('cancel') }}</van-button>
+          <van-button type="default" :disabled="!headImg" class="btn btn1" @click="onSubmit">{{ $t('save') }}</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+
+.avatarSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .avatarSet-content {
+    padding: 10px 0;
+    height: 100%;
+  }
+}
+
+.update-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+:deep(.van-tabs__line) {
+  max-width: 15px;
+  background-color: #0095F6;
+}
+
+:deep(.van-tab__panel) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+:deep(.van-tabs__wrap) {
+  border-bottom: 1px solid #ECECEC;
+  padding-bottom: 5px;
+}
+.img-box {
+  height: calc(100% - 360px);
+}
+.flex-btn {
+  display: flex;
+  align-items: center;
+  padding: 0 23px;
+  background-color: #fff;
+  position: relative;
+  z-index: 1;
+  margin-top: 10px;
+  margin-bottom: 50px;
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 16px;
+    color: #49494E;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border-color: #D1D1D3;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  .btn {
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+    border: none;
+  }
+
+  .btn1 {
+    background-color: #1B1B22;
+    color: #FFF;
+  }
+
+  .cancle-btn {
+    margin-right: 10px;
+  }
+}
+
+.box-item-img {
+  width: 60px;
+  height: 60px;
+  margin: 0 15px 30px 15px;
+}
+
+
+.box-item {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+}
+
+.active {
+  border: 2px solid #5f97e3;
+  box-sizing: border-box;
+  padding: 2px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: linear-gradient(to bottom,
+      #b8b8b8 20%,
+      #b8b8b8 20% 50%,
+      rgba(0, 0, 0, 0) 40% 60%,
+      rgba(0, 0, 0, 0) 60% 80%,
+      rgba(0, 0, 0, 0) 80%);
+  transition: color 0.2s ease;
+}
+
+:deep(.van-tab__text) {
+  font-size: 16px;
+  color: #979797;
+}
+
+:deep(.van-tab--active .van-tab__text) {
+  color: black;
+}
+:deep(.van-nav-bar__text) {
+  font-size: 14px;
+  color: #1B1B22;
+}
+:deep(.van-tabs__content--animated) {
+    max-height: 240px;
+    overflow-y: auto;
+  }
+</style>
diff --git a/src/views/contact/chat/components/editNameAvatar.vue b/src/views/contact/chat/components/editNameAvatar.vue
new file mode 100644
index 0000000..216752a
--- /dev/null
+++ b/src/views/contact/chat/components/editNameAvatar.vue
@@ -0,0 +1,202 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useContactStore } from "@/stores/contact"
+import defaultAvatar from "@/assets/dialog/groupChat.png"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user"
+import { handleImgCdnError } from "@/utils/tools"
+
+const { t } = useI18n()
+const $api = inject("$api");
+const OpenIM = getSDK()
+const router = useRouter()
+const route = useRoute()
+const detailSetRef = ref(null)
+const contactStore = useContactStore();
+const { groupInfo } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore);
+useGrade(detailSetRef, 4)
+const title = ref('')
+const editType = ref('')
+const myGroupInfo = ref({})
+onMounted(() => {
+  init();
+})
+const init = () => {
+  editType.value = route.query.type
+  switch (editType.value) {
+    case 'group':
+      title.value = t('egnpTitle')
+      break;
+    case 'myself':
+      title.value = t('groupMask')
+      getMyGroupInfo()
+      break;
+  }
+}
+// 获取我的群信息
+const getMyGroupInfo = () => {
+  let params = {
+    groupID: groupInfo.value.groupID,
+    keywordList: [userInfo.value.userID],
+    isSearchUserID: true,
+    isSearchMemberNickname: false,
+    offset: 0,
+    count: 20,
+  }
+  OpenIM.searchGroupMembers(params).then(res => {
+    myGroupInfo.value = res.data[0]
+  })
+}
+const handleBack = () => {
+  if (route.query.label) {
+    router.push(`/home/dialogue/groupChat/${groupInfo.value.groupID}`)
+  } else {
+    router.push('/home/contact/groupDetails')
+  }
+}
+
+const handleClick = (type) => {
+  if (editType.value === 'group') {
+    if (type === 'groupName') {
+      router.push({ path: '/home/contact/groupDetails/editNameAvatar/editNameAvatarContent', query: { type: 'group-name' } })
+    } else if (type === 'givGroupFace') {
+      router.push({ path: '/home/contact/groupDetails/editNameAvatar/editNameAvatarUrl', query: { type: 'group-avatar' } })
+    }
+  } else if (editType.value === 'myself') {
+    if (type === 'gsvMyName') {
+      if (appConfig.value.group_chat_settings.group_chat_nickname === 2) {
+        return
+      }
+      router.push({ path: '/home/contact/groupDetails/editNameAvatar/editNameAvatarContent', query: { type: 'myself-name' } })
+    } else if (type === 'gsvMyFace') {
+      if (appConfig.value.group_chat_settings.group_chat_avatar === 2) {
+        return
+      }
+      router.push({ path: '/home/contact/groupDetails/editNameAvatar/editNameAvatarUrl', query: { type: 'myself-avatar' } })
+    }
+  }
+
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="title" left-arrow views_grade="fourth_view" @click-left="handleBack"></AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content" v-if="editType === 'group'">
+        <van-cell-group :border="true">
+          <van-cell class="second-cell" is-link :title="$t('groupName')" @click="handleClick('groupName')">
+            <template #title>
+              <span class="custom-title">{{ $t('groupName') }}</span>
+            </template>
+            <template #right-icon>
+              <span class="right-text">{{ groupInfo.groupName }}</span>
+              <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+            </template>
+          </van-cell>
+          <van-cell class="second-cell" is-link :title="$t('givGroupFace')" @click="handleClick('givGroupFace')">
+            <template #title>
+              <span class="custom-title">{{ $t('givGroupFace') }}</span>
+            </template>
+            <template #right-icon>
+              <van-image round width="50" height="50" :src="groupInfo.faceURL ? groupInfo.faceURL : defaultAvatar"
+                fit="cover" @error="e => handleImgCdnError(e, groupInfo, 'faceURL')" />
+              <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+      <div class="detailSet-content" v-if="editType === 'myself'">
+        <van-cell-group :border="true">
+          <van-cell class="second-cell" is-link :title="$t('gsvMyName')" @click="handleClick('gsvMyName')">
+            <template #title>
+              <span class="custom-title">{{ $t('gsvMyName') }}</span>
+            </template>
+            <template #right-icon>
+              <span class="right-text">{{ myGroupInfo.nickname }}</span>
+              <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+            </template>
+          </van-cell>
+          <van-cell class="second-cell" is-link :title="$t('gsvMyFace')" @click="handleClick('gsvMyFace')">
+            <template #title>
+              <span class="custom-title">{{ $t('gsvMyFace') }}</span>
+            </template>
+            <template #right-icon>
+              <van-image round width="50" height="50" :src="myGroupInfo.faceURL"
+                fit="cover" @error="e => handleImgCdnError(e, myGroupInfo, 'faceURL')" />
+              <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </div>
+
+  </div>
+  <!-- 五级视图 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100vh;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y: auto;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+
+    .right-text {
+      display: inline-block;
+      max-width: 50%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--60, #76767A);
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/editNameAvatarContent.vue b/src/views/contact/chat/components/editNameAvatarContent.vue
new file mode 100644
index 0000000..f495277
--- /dev/null
+++ b/src/views/contact/chat/components/editNameAvatarContent.vue
@@ -0,0 +1,497 @@
+<script setup>
+import axios from 'axios';
+import { ref, onMounted, watchEffect, computed } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import defaultAvatar from "@/assets/dialog/groupChat.png"
+import { storeToRefs } from 'pinia'
+import { useI18n } from "vue-i18n"
+import { uploadFileByOss } from "@/utils/tools"
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setGroupInfo } = contactStore;
+const { groupInfo } = storeToRefs(contactStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const detailSetRef = ref(null)
+const title = ref('')
+const editType = ref('')
+const groupName = ref('')
+const logoutDialogShow = ref(false)
+const logoutContent = ref('')
+const logoutTitle = ref('')
+useGrade(detailSetRef, 5)
+
+const actionShow = ref(false)
+const actions = ref([])
+const avatarUrl = ref('')
+const showBottom = ref(false)
+const detailInfo = ref({})
+const photoInput = ref('')
+onMounted(() => {
+  init()
+})
+// 判断是否是手机端，如果是，返回true
+const isMobile = computed(() => {
+  console.log(navigator.userAgent);
+  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+  return flag
+})
+// 获取我的群信息
+const getMyGroupInfo = () => {
+  let params = {
+    groupID: groupInfo.value.groupID,
+    keywordList: [userInfo.value.userID],
+    isSearchUserID: true,
+    isSearchMemberNickname: false,
+    offset: 0,
+    count: 20,
+  }
+  OpenIM.searchGroupMembers(params).then(res => {
+    detailInfo.value = res.data[0]
+    groupName.value = res.data[0].nickname
+    avatarUrl.value = res.data[0].faceURL
+  })
+}
+const init = () => {
+  editType.value = route.query.type
+  switch (editType.value) {
+    case 'group-name':
+      title.value = t('egnpTitle')  //'编辑群聊名称'
+      getGroupInfo()
+      break;
+    case 'group-avatar':
+      title.value = '编辑群头像' // 编辑群头像
+      getGroupInfo()
+      break;
+    case 'myself-name':
+      title.value = t('editNickname')  // '编辑群昵称'
+      getMyGroupInfo()
+      break;
+    case 'myself-avatar':
+      title.value = t('editGroupAvatar')  //'编辑本群头像'
+      getMyGroupInfo()
+      break;
+  }
+  if (!isMobile) {
+    actions.value = [
+      { name: '上传' }
+    ]
+  } else {
+    actions.value = [
+      { name: t('toolboxCamera') },
+      { name: t('toolboxAlbum') },
+    ];
+  }
+}
+// 获取指定群信息
+const getGroupInfo = () => {
+  OpenIM.getSpecifiedGroupsInfo([groupInfo.value.groupID]).then(res => {
+    detailInfo.value = res.data[0]
+    groupName.value = res.data[0].groupName
+    avatarUrl.value = res.data[0].faceURL
+  })
+}
+
+// watchEffect(() => {
+//   console.error(1111,route.query.type);
+//   if (route.query.type === 'myself-name') {
+
+//   } else if (route.query.type === 'myself-avatar') {
+
+//   }
+//   init()
+// })
+
+const goBack = () => {
+  if (showBtn.value) {
+    if (editType.value === 'group-name') {
+      logoutContent.value = '您修改的群聊名称还未保存，是否继续退出？'
+      router.back()
+    } else if (editType.value === 'group-avatar') {
+      logoutContent.value = '您修改的群头像还未保存，是否继续退出？'
+      router.back()
+    } else if (editType.value === 'myself-name') {
+      logoutContent.value = t('editWarningDetail')
+      logoutTitle.value = t('editWarningTitle')
+      logoutDialogShow.value = true
+    } else if (editType.value === 'myself-avatar') {
+      logoutContent.value = '您修改的本群头像还未保存，是否继续退出？'
+      router.back()
+    }
+
+  } else {
+    router.back()
+  }
+  console.log(logoutContent.value);
+}
+const submitLogout = () => {
+  router.back()
+}
+const onCancel = (item, index) => {
+  if (index === 1) {
+
+  }
+}
+
+const save = () => {
+  let params = {
+    groupID: groupInfo.value.groupID, // 群组ID
+    groupName: groupName.value, // 群名称
+    faceURL: avatarUrl.value
+  }
+  let params1 = {
+    faceURL: userInfo.value.avatarUrl,
+    groupID: groupInfo.value.groupID,
+    nickname: groupName.value,
+    // roleLevel: 0, // 60是管理员级别 普通人员级别是20 100是群主
+    userID: userInfo.value.userID
+  }
+  switch (editType.value) {
+    case 'group-name':
+      params.groupName = groupName.value
+      OpenIM.setGroupInfo(params).then(res => { 
+        showToast({ message: t('saveSuccessfully'), position: 'top', })
+        // 储存在store中
+        setGroupInfo({ ...groupInfo.value, ...{ groupName: groupName.value } })
+        router.push({
+          path: '/home/contact/groupDetails/editNameAvatar',
+          query: {
+            type: 'group'
+          }
+        })
+      })
+      break;
+    case 'group-avatar':
+      OpenIM.setGroupInfo(params).then(res => {
+        showToast({ message: t('saveSuccessfully'), position: 'top', })
+        // 储存在store中
+        setGroupInfo({ ...groupInfo.value, ...{ faceURL: avatarUrl.value } })
+        router.push({
+          path: '/home/contact/groupDetails/editNameAvatar',
+          query: {
+            type: 'group'
+          }
+        })
+      })
+      break;
+    case 'myself-name':
+      OpenIM.setGroupMemberInfo(params1).then(res => {
+        showToast({ message: t('saveSuccessfully'), position: 'top', })
+        router.push('/home/contact/groupDetails')
+      })
+      break;
+    case 'myself-avatar':
+      OpenIM.setGroupMemberInfo(params1).then(res => {
+        showToast({ message: t('saveSuccessfully'), position: 'top', })
+        router.push('/home/contact/groupDetails')
+      })
+      break;
+  }
+}
+const actionSelect = () => {
+
+}
+const afterRead = async (fileObj) => {
+  // 此时可以自行将文件上传至服务器
+  const file = fileObj.file
+  console.log(file);
+  upLoadFile(file)
+}
+const upLoadFile = async (file) => {
+  const { access_url } = await uploadFileByOss(file)
+  // const ossData = {
+  //   file_name: file.name,
+  //   content_type: file.type,
+  //   uuid: file.uid,
+  //   file_from: 1
+  // }
+  // const res = await $api.contact.ossPutUrls(ossData)
+  // if (res.code != 0) return
+  // const { access_url, put_url } = res.data;
+  // const headers = {
+  //   'token': window.localStorage.getItem('token'),
+  //   'Content-Type': file.type,
+  //   'operationID': +new Date()
+  // };
+  // const fileRes = await axios({
+  //   method: 'put',
+  //   url: put_url,
+  //   data: file,
+  //   headers: {
+  //     'Content-Type': file.type
+  //   }
+  // });
+  avatarUrl.value = access_url
+  console.log(avatarUrl.value);
+  showBottom.value = false
+}
+const showBtn = computed(() => {
+  let flag = false
+  switch (editType.value) {
+    case 'group-name':
+      if ((detailInfo.value.groupName !== groupName.value) && groupName.value) {
+        flag = true
+      }
+      break;
+    case 'group-avatar':
+      if (detailInfo.value.faceURL !== avatarUrl.value) {
+        flag = true
+      }
+      break;
+    case 'myself-name':
+      if (detailInfo.value.nickname !== groupName.value) {
+        flag = true
+      }
+      break;
+    case 'myself-avatar':
+      if (detailInfo.value.faceURL !== avatarUrl.value) {
+        flag = true
+      }
+      break;
+  }
+  return flag
+})
+const openCameraApp = () => {
+  photoInput.value.click(); // 调用ref属性指向的input元素的click方法，从而打开相机应用程序
+}
+const handleFileChange = (event) => {
+  const file = event.target.files[0]; // 获取第一个被选择的文件对象
+  console.log(file);
+  upLoadFile(file)
+  // if (file && file instanceof File) {
+  //   const reader = new FileReader(); // 创建一个文件读取器
+
+  //   reader.onloadend = () => {
+  //     avatarUrl.value = reader.result; // 将读取结果存储到data属性中
+  //     console.log(avatarUrl.value);
+  //   };
+  //   reader.readAsDataURL(file); // 读取文件内容并转换成Base64格式
+  // }
+}
+const hanldeAvatar = () => {
+  router.push('')
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="title" left-arrow views_grade="fifth_view" @click-left="goBack">
+      <template #right>
+        <span class="nav-text" v-if="showBtn" @click="save">{{ $t('save') }}</span>
+        <span class="nav-text1" v-else>{{ $t('save') }}</span>
+      </template>
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div class="name-calss" v-if="editType === 'group-name' || editType === 'myself-name'">
+          <van-field maxlength="15" v-model="groupName" :placeholder="$t('egnpSetGroupName')" clearable />
+          <div class="text">{{ $t('nameLenth') }}</div>
+        </div>
+        <div v-else-if="editType === 'group-avatar' || editType === 'myself-avatar'">
+          <van-cell-group :border="true">
+            <van-cell class="second-cell" is-link
+              :title="editType === 'group-avatar' ? $t('givGroupFace') : $t('myGroupAvatar')" @click="showBottom = true">
+              <template #title>
+                <span class="custom-title">{{ editType === 'group-avatar' ? $t('givGroupFace') : $t('myGroupAvatar')
+                }}</span>
+              </template>
+              <template #right-icon>
+                <cdnSource :defaultUrl="avatarUrl ? avatarUrl : defaultAvatar">
+                  <template #cdnSlot="{ cdnUrl }">
+                    <van-image round width="50" height="50" :src="cdnUrl" fit="cover" />
+                  </template>
+                </cdnSource>
+                <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </div>
+      </div>
+    </div>
+    <!-- <van-action-sheet
+    v-model:show="actionShow"
+    :actions="actions"
+    cancel-text="取消"
+    close-on-click-action
+    @cancel="onCancel"
+    @select="actionSelect"
+    /> -->
+    <van-popup class="popup" v-model:show="showBottom" round position="bottom">
+      <van-cell-group :border="true">
+        <div v-if="!isMobile">
+          <van-cell :title="$t('upload')" class="second_cell">
+            <template #title>
+              <van-uploader :after-read="afterRead" :max-count="1">
+                <span style="width: 100%;height: 100%;">{{ $t('upload') }}</span>
+              </van-uploader>
+            </template>
+          </van-cell>
+        </div>
+        <div v-else>
+          <van-cell :title="$t('toolboxCamera')" @click="openCameraApp">
+            <template #title>
+              <span>{{ $t('toolboxCamera') }}</span>
+              <!-- 通过change事件获取选定的图片文件 -->
+              <input type="file" accept="image/*" ref="photoInput" style="display: none;" @change="handleFileChange">
+            </template>
+          </van-cell>
+          <van-cell :title="$t('toolboxAlbum')" class="second_cell">
+            <template #title>
+              <van-uploader :after-read="afterRead" :max-count="1">
+                <span style="width: 100%;height: 100%;">{{ $t('toolboxAlbum') }}</span>
+              </van-uploader>
+            </template>
+          </van-cell>
+        </div>
+
+        <van-cell :title="$t('cancel')" @click="showBottom = false">
+          <template #title>
+            <span class="custom-title">{{ $t('cancel') }}</span>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-popup>
+  </div>
+  <van-dialog v-model:show="logoutDialogShow" :title="logoutTitle" cancel-button-color="#1B1B22"
+    confirm-button-color="#1B1B22" show-cancel-button @confirm="submitLogout">
+    <div class="dialog-text">{{ logoutContent }}</div>
+  </van-dialog>
+  <!-- 四级视图 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  padding-top: 56px;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+
+    .right-text {
+      color: var(--60, #76767A);
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+
+    .name-calss {
+      :deep(.van-cell__value) {
+        padding-left: 16px;
+      }
+
+      .text {
+        padding: 12px 0 0 16px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 18px;
+      }
+    }
+
+  }
+}
+
+.nav-text {
+  color: #0095F6;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.nav-text1 {
+  color: #A4A4A7;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.dialog-text {
+  padding: 20px 0 24px 0;
+  text-align: center;
+  color: #76767A;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+  /* 150% */
+  letter-spacing: 0.28px;
+}
+
+.popup {
+  :deep(.van-cell-group) {
+    background-color: #F8F8FB;
+  }
+
+  :deep(.van-cell) {
+    padding: 0;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+  }
+
+  .second_cell {
+    // color:#FC5A50;
+    margin-bottom: 10px;
+  }
+}
+
+:deep(.van-uploader) {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/src/views/contact/chat/components/editNameAvatarUrl.vue b/src/views/contact/chat/components/editNameAvatarUrl.vue
new file mode 100644
index 0000000..3458b5f
--- /dev/null
+++ b/src/views/contact/chat/components/editNameAvatarUrl.vue
@@ -0,0 +1,376 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/mine-avatar.svg"
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+import customAvatar from '@/components/customAvatar/index.vue'
+import { showConfirmDialog } from 'vant'
+import { handleImgCdnError } from "@/utils/tools"
+
+const { t } = useI18n()
+const OpenIM = getSDK()
+const avatarSetRef = ref(null)
+useGrade(avatarSetRef, 5)
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setGroupInfo } = contactStore
+const { groupInfo,myGroupInfo } = storeToRefs(contactStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const headImg = ref("");
+const imgList = ref([]);
+const active = ref(0);
+onMounted(async () => {
+  if (route.query.type === 'group-avatar') {
+    headImg.value = groupInfo.value.faceURL;
+  } else if (route.query.type === 'myself-avatar') {
+    await getMyGroupInfo();
+  }
+ await getImgList();
+});
+
+// 获取我的群信息
+const getMyGroupInfo = async () => {
+  let params = {
+    groupID: '',
+    keywordList: [userInfo.value.userID],
+    isSearchUserID: true,
+    isSearchMemberNickname: false,
+    offset: 0,
+    count: 20,
+  }
+  params.groupID = groupInfo.value.groupID
+  const res = await OpenIM.searchGroupMembers(params);
+  if (res.data.length) {
+    headImg.value = res.data[0].faceURL
+  }
+}
+
+// 获取头像列表
+const getImgList = async () => {
+  imgList.value = []
+  let params = { type: 0 }
+  if (route.query.type === 'group-avatar' ) {
+    params.type = 3 // 群头像
+  } else if (route.query.type === 'myself-avatar') {
+    params.type = 1 // 
+  }
+  if (params.type !== 0) {
+    // 自定义头像
+    const customRes = await $api.avatar.avatarList({ 
+      avatar_type: params.type,
+      status: 0 
+    });
+    if(customRes.code !== 0) return
+    let customData = [{
+      name: t('custom'),
+      isCustom: true,
+      contentList: customRes.data || []
+    }]
+    imgList.value = customData
+    // 默认头像
+    const res = await $api.login.getAllImageByType(params);
+    if (res.code != 0) return
+    if (Array.isArray(res.data.list)) {
+      res.data.list.forEach((item, index) => {
+        item.contentList = item.content ? JSON.parse(item.content) : [];
+        item.isCustom = false
+      });
+      imgList.value = [...imgList.value, ...res.data.list]
+    }
+  }
+};
+// 保存
+const onSubmit = async () => {
+  if (route.query.type === 'group-avatar') {
+    // 群头像
+    const params = {
+      groupID: groupInfo.value.groupID, // 群组ID
+      groupName: groupInfo.value.groupName, // 群名称
+      faceURL: headImg.value
+    }
+    OpenIM.setGroupInfo(params).then(res => {
+      showToast({ message: t('saveSuccessfully'), position: 'top', })
+      // 储存在store中
+      setGroupInfo({ ...groupInfo.value, ...{ faceURL: headImg.value } })
+      router.push({
+        path: '/home/contact/groupDetails/editNameAvatar',
+        query: {
+          type: 'group'
+        }
+      })
+    })
+  } else if (route.query.type === 'myself-avatar') {
+    let params1 = {
+      faceURL: headImg.value,
+      groupID: groupInfo.value.groupID,
+      nickname: myGroupInfo.value.nickname,
+      userID: userInfo.value.userID
+    }
+    OpenIM.setGroupMemberInfo(params1).then(res => {
+      showToast({ message: t('saveSuccessfully'), position: 'top', })
+      router.push({
+        path: '/home/contact/groupDetails/editNameAvatar',
+        query: {
+          type: 'myself'
+        }
+      })
+    })
+  }
+};
+
+const onEdit = (url) => {
+  headImg.value = url;
+};
+
+const hanldBack = () => {
+  if (route.query.type === 'group-avatar') {
+    router.push({
+      path: '/home/contact/groupDetails/editNameAvatar',
+      query: {
+        type: 'group'
+      }
+    })
+  } else {
+    router.push({
+      path: '/home/contact/groupDetails/editNameAvatar',
+      query: {
+        type: 'myself'
+      }
+    })
+  }
+
+}
+
+// 申请记录
+const onApplicationRecord = () => {
+  router.push('/home/my/profile/applicationRecord')
+}
+
+const handleDelete = async (item, idx) => {
+  // 这里文案要自己补充，目前的只是cv
+  await showConfirmDialog({
+    title: '',
+    message: t('deleteIcon'),
+    className: 'custom-del',
+    confirmButtonText: t('delete'),
+    confirmButtonColor: '#FC5A50'
+  })
+  // 这里需要真正删需要调接口
+ const res = await $api.avatar.avatarDelete({id:item.id})
+ if (res.code != 0) return
+ showToast({message: t('deleteSuccessfully')});
+ getImgList()
+}
+
+const handleAfterUpload = async (url) => {
+  console.log('handleAfterUploadurl:', url)
+  // 这里调接口，如审核之类的，然后展示弹窗
+  const res = await $api.avatar.avatarAdd({
+    avatar_type: route.query.type === 'myself-avatar' ? 1 : 3,
+    url
+  })
+  if(res.code !== 0) return
+  getImgList()
+  await showConfirmDialog({
+    title: '',
+    message: t('applyIconTip'),
+    className: 'custom-del',
+    confirmButtonText: t('applyIconProgress'),
+    confirmButtonColor: '#0095F6'
+  })
+  onApplicationRecord()
+}
+</script>
+
+<template>
+  <div ref="avatarSetRef" class="avatarSet">
+    <AppNavBar :title="$t('changeAvatar')" :right-text="$t('applyRecord')" left-arrow views_grade="fifth_view" @click-right="onApplicationRecord" @click-left="hanldBack">
+    </AppNavBar>
+    <div class="avatarSet-wrap">
+      <div class="avatarSet-content">
+        <!-- 选择好的头像 -->
+        <div class="update-img">
+          <van-image fit="cover" v-if="!headImg" round :src="defaultAvatar" width="168px" height="168px" />
+          <cdnSource v-else :defaultUrl="headImg">
+            <template #cdnSlot="{ cdnUrl }">
+              <van-image fit="cover" round :src="cdnUrl" width="168px" height="168px" />
+            </template>
+          </cdnSource>
+        </div>
+        <van-tabs v-model:active="active" swipeable class="img-box">
+          <van-tab :title="item.name" v-for="(item, index) in imgList" :key="index">
+            <div class="box-item" v-if="!item.isCustom">
+              <van-image v-for="img in item.contentList" :key="img" class="box-item-img" :src="img.url" round
+                :class="headImg === img.url ? 'active' : ''" @click="onEdit(img.url)" @error="e => handleImgCdnError(e, img, 'url')" />
+            </div>
+            <customAvatar v-if="item.isCustom" v-model:activeImage="headImg" :isCustom="item.isCustom" :list="item.contentList" @delete="handleDelete" @afterUploaded="handleAfterUpload" />
+          </van-tab>
+        </van-tabs>
+        <div class="flex-btn">
+          <van-button type="default" class="cancle-btn btn" @click="hanldBack">{{ $t('cancel') }}</van-button>
+          <van-button type="default" :disabled="!headImg" class="btn btn1" @click="onSubmit">{{ $t('save') }}</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+
+.avatarSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .avatarSet-content {
+    padding: 10px 0;
+    height: 100%;
+    padding-bottom: 50px;
+  }
+}
+
+.update-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+:deep(.van-tabs__line) {
+  max-width: 15px;
+  background-color: #0095F6;
+}
+
+:deep(.van-tab__panel) {
+  display: flex;
+  flex-wrap: wrap;
+  // margin-top: 20px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding-top: 20px;
+}
+
+:deep(.van-tabs__wrap) {
+  border-bottom: 1px solid #ECECEC;
+  padding-bottom: 5px;
+}
+.img-box {
+  height: calc(100% - 360px);
+}
+.flex-btn {
+  display: flex;
+  align-items: center;
+  padding: 10px 23px;
+  background-color: #fff;
+  position: relative;
+  z-index: 1;
+  margin-top: 20px;
+  margin-bottom: 50px;
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 1rem;
+    color: #49494E;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border-color: #D1D1D3;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  .btn {
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+    border: none;
+  }
+
+  .btn1 {
+    background-color: #1B1B22;
+    color: #FFF;
+  }
+
+  .cancle-btn {
+    margin-right: 10px;
+  }
+}
+
+.box-item-img {
+  width: 60px;
+  height: 60px;
+  margin: 0 15px 30px 15px;
+}
+
+
+.box-item {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+}
+
+.active {
+  border: 2px solid #5f97e3;
+  box-sizing: border-box;
+  padding: 2px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: linear-gradient(to bottom,
+      #b8b8b8 20%,
+      #b8b8b8 20% 50%,
+      rgba(0, 0, 0, 0) 40% 60%,
+      rgba(0, 0, 0, 0) 60% 80%,
+      rgba(0, 0, 0, 0) 80%);
+  transition: color 0.2s ease;
+}
+
+:deep(.van-tab__text) {
+  font-size: 1rem;
+  color: #979797;
+}
+
+:deep(.van-tab--active .van-tab__text) {
+  color: black;
+}
+:deep(.van-nav-bar__text) {
+  font-size: 0.875rem;
+  color: #1B1B22;
+}
+</style>
diff --git a/src/views/contact/chat/components/enterGroupApply.vue b/src/views/contact/chat/components/enterGroupApply.vue
new file mode 100644
index 0000000..061b2b0
--- /dev/null
+++ b/src/views/contact/chat/components/enterGroupApply.vue
@@ -0,0 +1,282 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js' 
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { consttimestampToTime } from "@/utils/tools.js"
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const { groupId } = useContactStore();
+const { userInfo } = useUserStore();
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+const pendingList = ref([
+])
+const processedList = ref([
+])
+useGrade(detailSetRef, 4)
+const activeName = ref('')
+onMounted(() => {
+    getList()
+})
+const consentClick = async () => {
+    const res = await $api.contact.groupApplicationResponse({fromUserID: userInfo.userID,groupID: groupId,handleResult: 1})
+}
+const getList = async () => {
+    let params = {
+        // application_type: 0, //1 表示待申请列表 2 表示以处理列表
+        from_user_id: userInfo.userID,
+        group_id: groupId,
+        page_number: 1,
+        show_number: 99999
+    }
+    const res = await $api.contact.getRecvGroupApplicationList({application_type:1,...params})
+    console.log(res,{application_type:1,...params});
+    if (res.code === 0) {
+        pendingList.value = res.data.groupRequests || []
+    }
+    const res1 = await $api.contact.getRecvGroupApplicationList({application_type:2,...params})
+    console.log(res,{application_type:2,...params});
+    if (res1.code === 0) {
+        processedList.value = res1.data.groupRequests || []
+    }
+}
+const tabsChange = (name) => {
+    console.log(name);
+    getList()
+}
+const resultFilter = (result) => {
+    let text = ''
+    switch(result) {
+        case -1:
+            text = t('rejected')
+            break;
+        case 2:
+            text = t('approved')
+            break;
+        case -2:
+            // text = '已过期'
+            break;
+    }
+    return text
+}
+const agreeSubmit = (id) => {
+    let params = {
+        groupID: groupId, // 群ID
+        fromUserID: id, // 申请发起者用户 ID
+        handleMsg: '', // 操作信息
+    }
+    OpenIM.acceptGroupApplication(params).then(res => {
+        getList()
+    })
+}
+const refuseSubmit = (id) => {
+    let params = {
+        groupID: groupId, // 群ID
+        fromUserID: id, // 申请发起者用户 ID
+        handleMsg: '', // 操作信息
+    }
+    OpenIM.refuseGroupApplication(params).then(res => {
+        getList()
+    })
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('enterGroupCheck')" left-arrow views_grade="fourth_view" @click-left="router.back()">
+        <template #right>
+            <span class="nav-text" v-if="activeName === 'pending' && pendingList.length"  @click="consentClick" style="color: #0095F6">{{ $t('agreeAll') }}</span>
+        </template>
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-tabs v-model:active="activeName"  @change="tabsChange">
+            <van-tab :title="$t('unhandle')" name="pending">
+                <div class="list-items" v-if="pendingList.length">
+                    <van-cell-group :border="false">
+                        <van-cell v-for="(item, index) in pendingList" :key="index">
+                            <template #title>
+                                <div class="item-content">
+                                    <div class="item-img">
+                                        <cdnSource v-if="item.userInfo.faceURL" :defaultUrl="item.userInfo.faceURL">
+                                            <template #cdnSlot="{ cdnUrl }">
+                                                <Avatar width="40" height="40" :url="cdnUrl" :name="item.userInfo.nickname"></Avatar>
+                                            </template>
+                                        </cdnSource>
+                                    </div>
+                                    <div class="item-text">
+                                        <div class="item-name">{{ item.userInfo.nickname }}</div>
+                                        <div class="item-date">{{ consttimestampToTime(item.reqTime) }}</div>
+                                    </div>
+                                </div>
+                            </template>
+                            <template #right-icon>
+                                <van-button class="btn" round color="#1B1B22" @click="agreeSubmit(item.userInfo.userID)">{{ $t('acceptCall') }}</van-button>
+                                <van-button class="btn" round type="default" @click="refuseSubmit(item.userInfo.userID)">{{ $t('reject') }}</van-button>
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </div>
+                <div v-else>
+                    <div class="empety-warp">
+                        <div><img src="@/assets/empety.svg" alt=""></div>
+                        <div>{{ $t('noCheck') }}</div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab :title="$t('handled')" name="processed">
+                <div class="list-items" v-if="processedList.length">
+                    <van-cell-group :border="false">
+                        <van-cell v-for="(item, index) in processedList" :key="index">
+                            <template #title>
+                                <div class="item-content">
+                                    <div class="item-img">
+                                        <cdnSource v-if="item.userInfo.faceURL" :defaultUrl="item.userInfo.faceURL">
+                                            <template #cdnSlot="{ cdnUrl }">
+                                                <Avatar width="40" height="40" :url="cdnUrl" :name="item.userInfo.nickname"></Avatar>
+                                            </template>
+                                        </cdnSource>
+                                    </div>
+                                    <div class="item-text">
+                                        <div class="item-name">{{ item.userInfo.nickname }}</div>
+                                        <div class="item-date">{{ consttimestampToTime(item.reqTime) }}</div>
+                                    </div>
+                                </div>
+                            </template>
+                            <template #right-icon>
+                                <div class="btn item-right"> {{ resultFilter(item.handleResult) }} </div>
+                                
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </div>
+                <div v-else>
+                    <div class="empety-warp">
+                        <div><img src="@/assets/empety.svg" alt=""></div>
+                        <div>{{ $t('searchNotFoundMember') }}</div>
+                    </div>
+                </div>
+            </van-tab>
+        </van-tabs>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  overflow-y:auto;
+  padding-top: 56px;
+  .detailSet-content  {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 76px;
+    //   line-height: 60px;
+        display: flex;
+        align-items: center;
+        padding-left: 10px;
+      .van-cell__title {
+        img {
+        //   width: 24px;
+        //   height: 24px;
+          vertical-align: middle;
+        }
+        .custom-title {
+          padding-left: 16px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+    .name_last {
+        margin: 4px 0 20px 0;
+        span {
+            color: var(--60, #76767A);
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    } 
+    .list-items {
+        margin-top: 8px;
+        .item-content {
+            display: flex;
+            justify-content: flex-start;
+            .item-img {
+                display: inline-block;
+                margin-right: 10px;
+            }
+        }
+        .item-text {
+            display: flex;
+            flex-direction: column;
+            justify-content:space-around;
+            font-family: PingFang SC;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            .item-name {
+                color: #1B1B22;
+                font-size: 1rem;
+            }
+            .item-date {
+                color: #A4A4A7;
+                font-size: 0.875rem;
+            }
+        }
+        .btn {
+            width: 60px;
+            height: 32px;
+            margin-right: 10px;
+        }
+        .item-right {
+            display: flex;
+            align-items: center;
+            color: var(--40, #A4A4A7);
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    }
+  }
+}
+.empety-warp {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin-top: 135px;
+    div {
+        display: flex;
+        justify-content: center;
+    }
+    div:nth-child(2) {
+        margin-top: 30px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px; /* 150% */
+        letter-spacing: 0.5px;
+    }
+}
+</style>
diff --git a/src/views/contact/chat/components/groupChatLogs.vue b/src/views/contact/chat/components/groupChatLogs.vue
new file mode 100644
index 0000000..014274c
--- /dev/null
+++ b/src/views/contact/chat/components/groupChatLogs.vue
@@ -0,0 +1,318 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import pinyin from 'js-pinyin'
+import icon2 from '@/assets/shanchu.png'
+import shanchu from "@/assets/chanchu.svg"
+import shanchu2 from "@/assets/svg/shanchu2.svg"
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useContactStore } from "@/stores/contact";
+import { getChatTimeline } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+import { handleImgCdnError } from "@/utils/tools"
+
+const { t } = useI18n()
+const { groupId, groupSessionInfo, } = useContactStore();
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 4)
+const isSearchPage = ref(false)
+const activeNames = ref(['record'])
+
+const groupInfo = ref({
+    name: '',
+    img: '',
+    num: '',
+    searchList: []
+})
+const searchForm = ref('')
+onMounted(() => {
+    getGroupInfo()
+})
+// 获取指定群信息
+const getGroupInfo = () => {
+    let groupID = [groupId]
+    OpenIM.getSpecifiedGroupsInfo(groupID).then(res => {
+        groupInfo.value.name = res.data[0].groupName
+        groupInfo.value.img = res.data[0].faceURL
+    })
+}
+const clickFn = () => {
+    // router.push('/home/contact/groupDetails/manageGrounp/addDetails')
+}
+const submitRemove = () => {
+
+}
+const editClick = (type) => {
+    if (type === 'edit') {
+        isEdit.value = true
+    } else if (type === 'complete') {
+        isEdit.value = false
+    }
+
+}
+const actionSelect = () => {
+
+}
+const onSearch = () => {
+    let params = {
+        conversationID: groupSessionInfo.conversationID,
+        keywordList: [],
+        messageTypeList: [101,105], // 101 文本消息 ,102 图片消息, 104 视频消息, 105 文件消息
+        searchTimePosition: 0,
+        searchTimePeriod: 0,
+        pageIndex: 1,
+        count: 100000000,
+    }
+    params.keywordList = [searchForm.value]
+    if (searchForm.value) {
+        OpenIM.searchLocalMessages(params).then(res => {
+            console.log(res, 666);
+            groupInfo.value.searchList = res.data.searchResultItems.length && res.data.searchResultItems[0].messageList
+            groupInfo.value.num = res.data.totalCount
+        })
+    }
+}
+const onCancel = () => {
+    router.push('/home/contact/groupDetails')
+}
+const changeColor = (text) => {
+    if (text?.includes(searchForm.value)) { // 判断段落内容是否包含指定文本
+        var regex = new RegExp(searchForm.value, 'g'); // 创建正则表达式对象，设置全局标志'g'
+        var replacedText = text.replace(regex, `<span style="color: #0095F6;">${searchForm.value}</span>`); // 将匹配到的文本用红色样式包裹起来
+        return replacedText; // 更新段落内容
+    }
+}
+</script>
+
+<template>
+    <div ref="detailSetRef" class="detailSet">
+        <div class="search-warp">
+            <van-search v-model="searchForm" show-action :placeholder="$t('search_hine_1')"
+                @update:model-value="onSearch" @cancel="onCancel" />
+            <div v-if="!searchForm">
+                <div class="content-warp">
+                    <div class="content-top">{{ $t('savSearchTip') }}</div>
+                    <div class="content-type-wrapper">
+                        <div class="content-img" @click="router.push('/home/contact/groupDetails/groupChatLogs/groupMediaRecord')">
+                        <img src="@/assets/s_image.svg" alt="">
+                        <div class="content-bottom">{{ $t('savMedia') }}</div>
+                        </div>
+                        <div class="content-img" @click="router.push('/home/contact/groupDetails/groupChatLogs/groupFileRecord')">
+                        <img src="@/assets/s_file.svg" alt="">
+                        <div class="content-bottom">{{ $t('file') }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="list-items" v-if="searchForm && groupInfo.searchList.length">
+                <van-collapse v-model="activeNames">
+                    <van-collapse-item :title="$t('chatRecord')" name="record">
+                        <van-cell v-for="(item, index) in groupInfo.searchList" :key="index"
+                            @click="router.push({ path: `/home/dialogue/groupChat/${groupId}?`, state: { messageNavigationInfo: JSON.stringify(item) } })">
+                            <template #title>
+                                <div class="item-content">
+                                    <div class="text-img-wrap">
+                                        <div class="item-img">
+                                            <Avatar width="32" height="32"  :url="item.senderFaceUrl"  
+                                                :name="item.senderNickname" @error="e => handleImgCdnError(e, item, 'senderFaceUrl')">
+                                            </Avatar>
+                                        </div>
+                                        <div class="item-text">
+                                            <div class="item-name">{{ item.senderNickname }}</div>
+                                            <div class="item-date" v-html="changeColor(item.textElem?.content)"></div>
+                                            <template v-if="item.contentType===105">
+                                                <van-highlight :keywords="searchForm" :source-string="`[${t('file')}]${item.fileElem.fileName}`" />
+                                            </template>
+                                        </div>
+                                    </div>
+                                    <div class="item-time">{{ getChatTimeline(item.sendTime) }}</div>
+                                </div>
+                            </template>
+                        </van-cell>
+                    </van-collapse-item>
+                </van-collapse>
+            </div>
+            <div v-else-if="searchForm && !groupInfo.searchList.length" class="empety-warp">
+                <div><img src="@/assets/empety.svg" alt=""></div>
+                <div>{{ $t('searchEmptyTip') }}</div>
+            </div>
+        </div>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap,
+.search-warp {
+    background: #FFF;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.search-input {
+    margin: 8px 0;
+
+    :deep(.van-cell) {
+        height: 36px !important;
+    }
+}
+
+:deep(.van-search__action) {
+    color: #0095F6;
+}
+
+:deep(.van-cell) {
+    .van-cell__title {
+        .custom-title {
+            margin-left: 10px;
+        }
+    }
+}
+
+.empety-warp {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin-top: 135px;
+
+    div {
+        display: flex;
+        justify-content: center;
+    }
+
+    div:nth-child(2) {
+        margin-top: 30px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px;
+        /* 150% */
+        letter-spacing: 0.5px;
+    }
+}
+
+
+.content-warp {
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .content-top {
+    margin-bottom: 16px;
+    color: #1B1B22;
+    opacity: .6;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  .content-type-wrapper {
+    display: flex;
+    gap: 80px;
+    
+    .content-img {
+      width: 62px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .content-bottom {
+    margin-top: 10px;
+    color: #0095F6;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    width: max-content;
+  }
+}
+
+.list-items {
+    margin-top: 8px;
+
+    .item-content {
+        display: flex;
+        justify-content: space-between;
+
+        .item-img {
+            display: inline-block;
+            margin-right: 10px;
+        }
+    }
+    .text-img-wrap {
+        display: flex;
+        justify-content: space-around;
+    }
+    .item-text {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+
+        .item-name {
+            color: #1B1B22;
+            font-size: 1rem;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .item-date {
+            color: #A4A4A7;
+            font-size: 0.875rem;
+            word-break: break-all;
+            max-width: 180px;
+        }
+    }
+
+    .item-time {
+        color: #A4A4A7;
+        font-size: 0.875rem;
+        text-align: right;
+    }
+
+    .btn {
+        width: 60px;
+        height: 32px;
+        margin-right: 10px;
+    }
+
+    .item-right {
+        display: flex;
+        align-items: center;
+        color: var(--40, #A4A4A7);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+
+    .middle {
+        height: 10px;
+        background-color: #F8F8FB;
+    }
+}
+</style>
diff --git a/src/views/contact/chat/components/groupFileRecord.vue b/src/views/contact/chat/components/groupFileRecord.vue
new file mode 100644
index 0000000..b9a2273
--- /dev/null
+++ b/src/views/contact/chat/components/groupFileRecord.vue
@@ -0,0 +1,233 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRoute,useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js' 
+import { useContactStore } from "@/stores/contact";
+import { showImagePreview } from 'vant';
+import { useI18n } from "vue-i18n"
+import dayjs from 'dayjs';
+import { isZhFn, getFileTypeIconName, formatFileSize } from '@/utils/tools'
+import { fileIcon } from "@/utils/fileUtils";
+import fileDownload from "../../../dialogue/components/fileDownload.vue";
+// src\views\dialogue\components\fileDownload.vue
+
+const { t } = useI18n()
+const { groupId, groupSessionInfo } = useContactStore();
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 5)
+const searchList = ref([])
+// 预览组件
+const showPreview = ref(false)
+const previewArr = ref([])
+// 传入预览组件当前消息id
+const currentId = ref('')
+const currentIndex = ref(0)
+onMounted(() => {
+  onSearch()
+})
+const mediaResultList = ref([])
+const mediaResulGrouptList = ref([])
+const onSearch = () => {
+    let params = {
+        conversationID: groupSessionInfo.conversationID,
+        keywordList: [],
+        messageTypeList: [105], // 101	文本消息 ,102	图片消息, 104	视频消息
+        searchTimePosition: 0,
+        searchTimePeriod: 0,
+        pageIndex: 1,
+        count: 100000000,
+    }
+    if (route.query.source === 'dialog') {
+      params.conversationID = ''
+    }
+    OpenIM.searchLocalMessages(params).then(res => {
+        searchList.value = res.data.searchResultItems && res.data.searchResultItems.length && res.data.searchResultItems[0].messageList || []
+        mediaResultList.value = (res.data.searchResultItems || []).reduce((arr, item) => {
+        arr.push(...item.messageList)
+        return arr
+      }, [])
+      .filter(item => item.sendTime > 0)
+      .sort((a, b) => a.sendTime - b.sendTime)
+      .map(item => {
+        const customParams = {
+          sendTimeText: dayjs(item.sendTime).format(isZhFn ? 'YYYY年MM月' : 'YYYY/MM/DD'),
+        }
+        const fileSplits = item.fileElem?.fileName?.split('.')
+        customParams.fileType = fileSplits[fileSplits.length - 1]
+        fileSplits.pop()
+        // 没有文件类型了的文件名
+        customParams.fileName2 = fileSplits.join('')
+        customParams.fileIconName = getFileTypeIconName(customParams.fileType)
+        customParams.fileSizeText = formatFileSize(item.fileElem?.fileSize)
+        return {
+          ...item,
+          ...customParams
+        }
+      })
+      mediaResulGrouptList.value = mediaResultList.value.reduce((arr, item) => {
+      const group = arr[arr.length - 1]
+      if (group && group[0].sendTimeText === item.sendTimeText) {
+        group.push(item)
+      } else {
+        arr.push([item])
+      }
+      return arr
+    }, [])
+    })
+    
+}
+const imgPreview = (url) => {
+    showImagePreview([url]);
+}
+const handlePreview = (val) => {
+  // currentIndex.value = 0
+  currentId.value = val.clientMsgID
+  const tempArr = []
+  searchList.value.forEach((item) => {
+    if (item.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = item.videoElem
+      tempArr.push({ type: videoType, snapshotUrl: snapshotUrl, url: videoUrl, id: item.clientMsgID })
+    } else if (item.contentType === 102) {
+      tempArr.push({ ...item.pictureElem.sourcePicture, id: item.clientMsgID })
+    }
+  })
+  currentIndex.value = tempArr.findIndex(item => item.id === val.clientMsgID);
+  // if (currentIndex > -1) {
+  //   const currentItem = tempArr[currentIndex];
+  //   tempArr.splice(currentIndex, 1); // 从当前位置移除
+  //   tempArr.unshift(currentItem); // 将当前元素插入到数组的第一项
+  // }
+  previewArr.value = tempArr
+  showPreview.value = true
+}
+
+
+const closePreview = (val) => {
+  showPreview.value = false
+  currentId.value = ''
+}
+
+const fileDetailVisible = ref(false)
+const activeFileItem = ref({})
+const openFileDetail = (item) => {
+  activeFileItem.value = item
+  fileDetailVisible.value = true
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('file')" left-arrow views_grade="fifth_view" @click-left="router.back()"></AppNavBar>
+    <div class="detailSet-wrap" id="detailSet-wrap1">
+      <div class="detailSet-content">
+        <div class="detailSet-item"  v-for="(list, idx) in mediaResulGrouptList" :key="idx">
+        <div class="date">{{ list[0].sendTimeText }}</div>
+        <div class="file-view-wrap">
+          <div class="file-view" v-for="(item,index) in list" :key="index" @click="openFileDetail(item)">
+            <div class="file-con">
+              <div class="file-icon">
+                <img :src="fileIcon(item)" width="40" height="40" alt="">
+              </div>
+              <div class="file-name">{{ item.fileName2 }}</div>
+              <div class="file-type">.{{ item.fileType }}</div>
+            </div>
+            <div class="file-size">{{ item.fileSizeText }}</div>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+  </div>
+  <fileDownload v-model="fileDetailVisible" :fileItem="activeFileItem" />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding: 56px 12px 0;
+  width: 100%;
+  overflow-y:auto;
+  .detailSet-content  {
+    padding-top: 10px;
+  }
+  :deep(.van-image) {
+    margin-right: 5px;
+  }
+  :deep(.van-image) {
+    width: 100%;
+    height: 10vh;
+  }
+  .img_content {
+    padding-right: 2px;
+  }
+  .vidio_content {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .video {
+      width: 100%;
+      height: 10vh;
+    }
+    .video_icon {
+      position: absolute;
+    }
+  }
+  .date {
+    color: #76767A;
+    font-size: 0.75rem;
+    padding: 12px 0;
+  }
+}
+.file-view-wrap {
+  overflow: hidden;
+  margin-left: 16px;
+  .file-view {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    padding-right: 16px;
+    position: relative;
+    font-size: 0.75rem;
+    color: #1B1B22;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      border-bottom: 1px solid #F6F6F6;
+      transform: scaley(.5);
+    }
+
+    .file-con {
+      display: flex;
+      align-items: center;
+      font-size: 0.875rem;
+      .file-icon {
+        width: 40px;
+        margin-right: 8px;
+      }
+      .file-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: calc(100vw - 168px);
+      }
+    }
+    .file-size {
+      opacity: .6;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/groupMediaRecord.vue b/src/views/contact/chat/components/groupMediaRecord.vue
new file mode 100644
index 0000000..e131716
--- /dev/null
+++ b/src/views/contact/chat/components/groupMediaRecord.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRoute,useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js' 
+import { useContactStore } from "@/stores/contact";
+import { showImagePreview } from 'vant';
+import { useI18n } from "vue-i18n"
+import { isZhFn } from '@/utils/tools'
+import dayjs from 'dayjs';
+
+const { t } = useI18n()
+const { groupId,groupSessionInfo,} = useContactStore();
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 5)
+const searchList = ref([])
+// 预览组件
+const showPreview = ref(false)
+const previewArr = ref([])
+// 传入预览组件当前消息id
+const currentId = ref('')
+const currentIndex = ref(0)
+onMounted(() => {
+  onSearch()
+})
+const mediaResultList = ref([])
+const mediaResulGrouptList = ref([])
+const onSearch = () => {
+    let params = {
+        conversationID: groupSessionInfo.conversationID,
+        keywordList: [],
+        messageTypeList: [102,104], // 101	文本消息 ,102	图片消息, 104	视频消息
+        searchTimePosition: 0,
+        searchTimePeriod: 0,
+        pageIndex: 1,
+        count: 100000000,
+    }
+    if (route.query.source === 'dialog') {
+      params.conversationID = ''
+    }
+    OpenIM.searchLocalMessages(params).then(res => {
+        searchList.value = res.data.searchResultItems && res.data.searchResultItems.length && res.data.searchResultItems[0].messageList
+        mediaResultList.value = res.data.searchResultItems.reduce((arr, item) => {
+        arr.push(...item.messageList)
+        return arr
+      }, [])
+      .filter(item => item.sendTime > 0)
+      .sort((a, b) => a.sendTime - b.sendTime)
+      .map(item => ({...item, sendTimeText: dayjs(item.sendTime).format(isZhFn ? 'YYYY年MM月' : 'YYYY/MM/DD')}))
+      mediaResulGrouptList.value = mediaResultList.value.reduce((arr, item) => {
+      const group = arr[arr.length - 1]
+      if (group && group[0].sendTimeText === item.sendTimeText) {
+        group.push(item)
+      } else {
+        arr.push([item])
+      }
+      return arr
+    }, [])
+    })
+    
+}
+const imgPreview = (url) => {
+    showImagePreview([url]);
+}
+const handlePreview = (val) => {
+  // currentIndex.value = 0
+  currentId.value = val.clientMsgID
+  const tempArr = []
+  searchList.value.forEach((item) => {
+    if (item.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = item.videoElem
+      tempArr.push({ type: videoType, snapshotUrl: snapshotUrl, url: videoUrl, id: item.clientMsgID })
+    } else if (item.contentType === 102) {
+      tempArr.push({ ...item.pictureElem.sourcePicture, id: item.clientMsgID })
+    }
+  })
+  currentIndex.value = tempArr.findIndex(item => item.id === val.clientMsgID);
+  // if (currentIndex > -1) {
+  //   const currentItem = tempArr[currentIndex];
+  //   tempArr.splice(currentIndex, 1); // 从当前位置移除
+  //   tempArr.unshift(currentItem); // 将当前元素插入到数组的第一项
+  // }
+  previewArr.value = tempArr
+  showPreview.value = true
+}
+
+
+const closePreview = (val) => {
+  showPreview.value = false
+  currentId.value = ''
+  // previewArr.value = []
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('media')" left-arrow views_grade="fifth_view" @click-left="router.back()">
+    </AppNavBar>
+    <div class="detailSet-wrap" id="detailSet-wrap1">
+      <div class="detailSet-content">
+        <div class="detailSet-item"  v-for="(list, idx) in mediaResulGrouptList" :key="idx">
+          <div class="date">{{ list[0].sendTimeText }}</div>
+          <van-row>
+            <van-col span="6" v-for="(item,index) in list" :key="index">
+              <div class="img_content" v-if="item.contentType === 102" @click="handlePreview(item)">
+                <!--图片  @click="showImagePreview([val.content])"-->
+                <cdnSource v-if="item.pictureElem?.sourcePicture.url" :defaultUrl="item.pictureElem?.sourcePicture.url">
+                  <template #cdnSlot="{ cdnUrl }">
+                    <van-image
+                      fit="cover"
+                      :src="cdnUrl"
+                      :source="item"
+                    />
+                  </template>
+                </cdnSource>
+              </div>
+              <div class="vidio_content" v-if="item.contentType === 104" @click="handlePreview(item)">
+                <!----视频---->
+                <video class="video"  :src="item.videoElem.videoUrl"
+                  crossOrigin="anonymous" preload="metadata"></video>
+                <div class="video_icon"><img src="@/assets/svg/bofang.svg" alt=""></div>
+              </div>
+            </van-col>
+          </van-row>
+        </div>
+      </div>
+    </div>
+    <CommonPreview v-model="showPreview" :currentId="currentId" :images="previewArr" :initialSwipe="currentIndex" @getList="closePreview"></CommonPreview>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding: 56px 12px 0;
+  width: 100%;
+  overflow-y:auto;
+  .detailSet-content  {
+    padding-top: 10px;
+  }
+  :deep(.van-image) {
+    margin-right: 5px;
+  }
+  :deep(.van-image) {
+    width: 100%;
+    height: 10vh;
+  }
+  .img_content {
+    padding-right: 2px;
+  }
+  .vidio_content {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .video {
+      width: 100%;
+      height: 10vh;
+    }
+    .video_icon {
+      position: absolute;
+    }
+  }
+  .date {
+    color: #76767A;
+    font-size: 0.75rem;
+    padding: 12px 0;
+  }
+}
+
+</style>
diff --git a/src/views/contact/chat/components/groupMemberSearch.vue b/src/views/contact/chat/components/groupMemberSearch.vue
new file mode 100644
index 0000000..91f8080
--- /dev/null
+++ b/src/views/contact/chat/components/groupMemberSearch.vue
@@ -0,0 +1,226 @@
+<script setup>
+import { ref,onUnmounted, onMounted } from "vue";
+import { CommonLottie } from "@/components/index.js";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { myGroupInfo, groupMemberInfo } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo,groupChatConfig } = storeToRefs(userStore);
+const router = useRouter();
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {}
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+});
+const toUserDetail = userID => {
+  router.push(
+    `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${userID}`
+  );
+};
+const getCurrentTitle = computed(() => {
+  return val => {
+    let groupRemark = JSON.parse(val.ex || '{}')?.remark?.value || ''
+    if (myGroupInfo.value.roleLevel === 20) {
+      groupRemark = ''
+    }
+    if (val.isFriend) {
+      // 好友
+      // 好友备注 item.remark -->  群聊备注 item.ex --> 用户个人昵称 nickname  --> 群聊昵称 groupNickName
+      return val.remark ? val.remark : (groupRemark || val.nickname || val.groupNickName);
+    } else {
+      //群聊备注 item.ex -->  群聊昵称 groupNickName  --> 用户个人昵称 nickname
+      return (groupRemark || val.groupNickName || val.nickname);
+    }
+  };
+});
+console.log(`source`, props.source);
+const showGroupOwner = computed(() => {
+  let text = ''
+  if(props.source.roleLevel===100)return "group"
+  if(props.source.roleLevel===60)return "admin"
+  return ''
+  // return userID => {
+  //   if (userID) {
+  //     const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+  //     const index = arr.findIndex(item => item.userID === userID);
+  //     if (index != -1) {
+  //       if (arr[index].roleLevel === 100) {
+  //         return "group";
+  //       }
+  //       if (arr[index].roleLevel === 60) {
+  //         return "admin";
+  //       }
+  //       return "";
+  //     } else {
+  //       return "";
+  //     }
+  //   } else {
+  //     return "";
+  //   }
+  // };
+});
+
+const groupRemark = computed(() => {
+  const remark = JSON.parse(props.source.ex || '{}').remark?.value || ''
+  return remark
+})
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+// 获取 .source-name 元素。计算视口宽度 window.innerWidth。
+// 计算 max-width 为视口宽度减去 58px。
+// 将计算出的值设置为 .source-name 元素的 max-width。
+function updateMaxWidth() {
+  const sourceName = document.querySelector('.source-name');
+  const viewportWidth = window.innerWidth;
+  const maxWidth = viewportWidth - 58; // 计算 max-width
+  sourceName.style.maxWidth = `${maxWidth}px`;
+}
+// 监听页面加载和窗口调整事件
+onMounted(() => {
+  updateMaxWidth();
+  window.addEventListener('resize', updateMaxWidth);
+});
+// 清理事件监听器
+onUnmounted(() => {
+  window.removeEventListener('resize', updateMaxWidth);
+});
+</script>
+
+<template>
+  <van-cell @click="toUserDetail(source.userID)">
+    <template #title>
+      <!-- 2、只有群主和群管理员可查看 在线状态 -->
+      <van-badge
+        class="dot-on-line-state"
+        :dot="isOnLineState(source.userID) || source.roleLevel === 60"
+        color="#43FA51"
+      />
+      <Avatar
+        width="32"
+        height="32"
+        :url="source.faceURL"
+        :name="getCurrentTitle(source)"
+        @updateUrl="url => source.faceURL = url"
+      />
+      <div class="custom-admin">
+        <!-- 100 是群主 ，60管理员 ，20普通用户 -->
+        <template v-if="source.roleLevel === 100">
+          <!-- <div class="group-wrap" v-if="showGroupOwner(source.userID) != ''"> -->
+          <div class="group-wrap" v-if="source.roleLevel === 100" >
+            <!-- :isGroup="showGroupOwner(source.userID)" -->
+            <CommonLottie
+              :isGroup="showGroupOwner"
+              :width="120"
+              :showName="getCurrentTitle(source)"
+              :bottom="-2"
+              :left="25"
+              :isSearchPage="true"
+              :showGroupRemark="source.roleLevel ===100 "
+              
+            >
+            <!-- :itemOrigin="source" 控制是否展示用户名称 -->
+            </CommonLottie>
+          </div>
+          <div v-else class="name group-name">
+            {{ getCurrentTitle(source) }}
+          </div>
+        </template>
+        <template v-if="source.roleLevel === 60">
+          <div class="admin-wrap" :class="source.roleLevel+'--'+showGroupOwner+'-'+source.roleLevel">
+            <!-- <template v-if="showGroupOwner(source.userID) != ''"> -->
+            <!-- <template> -->
+              <!-- :isGroup="showGroupOwner(source.userID)" -->
+              <CommonLottie
+                :isGroup="showGroupOwner"
+                :width="120"
+                :showName="getCurrentTitle(source)"
+                :bottom="-2"
+                :left="25"
+                :isSearchPage="true"
+                :showGroupRemark="source.roleLevel === 60"
+                
+              >
+              </CommonLottie>
+              <!-- :itemOrigin="source" -->
+              
+            <!-- </template> -->
+          </div>
+          <!-- <div
+            v-if="showGroupOwner(source.userID) == ''"
+            class="name admin-name"
+          > -->
+          <div
+            v-if="showGroupOwner===''"
+            class="name admin-name"
+          >
+            {{ getCurrentTitle(source) }}
+          </div>
+        </template>
+        <template v-if="source.roleLevel === 20">
+          <div class="source-name">
+            {{ getCurrentTitle(source) }}
+          </div>
+          <div class="groupNickName-box" v-if="source.groupNickName">
+            <span> {{ $t("gmiTitle") }}</span>
+            <span> {{ source.groupNickName }}</span>
+          </div>
+          <!-- <div
+            class="nickname-box"
+            v-if="source.nickname && source.remark !== ''"
+          >
+            <span> {{ $t("nicknames") }}: </span>
+            <span> {{ source.nickname }}</span>
+          </div> -->
+          <div
+            class="nickname-box"
+           
+          >
+            <span> {{$t('group_remark')}}: </span>
+            <span> {{ groupRemark || '-' }}</span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </van-cell>
+</template>
+
+<style lang="less" scoped>
+.groupNickName-box,
+.nickname-box {
+  color: rgba(118, 118, 122, 1);
+  font-size: 0.75rem;
+  margin-left: 10px;
+}
+.source-name {
+  margin-left: 10px;
+  /* 确保文本在超出容器宽度时不会换行 */
+    white-space: nowrap;
+  /* 隐藏超出容器宽度的文本 */
+  overflow: hidden;
+  /* 使用省略号表示超出部分 */
+  text-overflow: ellipsis;
+  /* 初始化 max-width 为 auto 或者默认值 */
+  max-width: auto;
+}
+.dot-on-line-state {
+  position: absolute;
+  left: 37px; 
+  top: 45px;
+}
+</style>
diff --git a/src/views/contact/chat/components/groupNotice.vue b/src/views/contact/chat/components/groupNotice.vue
new file mode 100644
index 0000000..3ac38f9
--- /dev/null
+++ b/src/views/contact/chat/components/groupNotice.vue
@@ -0,0 +1,216 @@
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from "pinia";
+import use from "@/use";
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const { setGroupChatConfig } = userStore;
+const contactStore = useContactStore();
+const { groupId, myGroupInfo } = storeToRefs(contactStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const { useUid, useCoinId } = use;
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 4)
+const noticeValue1 = ref('')
+const noticeValue2 = ref('')
+const viewType = ref('readOnly')
+const dialogForm = ref({
+  dialogShow: false,
+  title: '',
+  content: '',
+  cancelText: '',
+  confirmText: '',
+  checked: false
+})
+onMounted(() => {
+  getNotice()
+})
+const getNotice = async () => {
+  const { data } = await OpenIM.getSpecifiedGroupsInfo([groupChatConfig.value.groupID])
+  noticeValue1.value = data[0].notification
+  noticeValue2.value = data[0].notification
+  if (!noticeValue1.value) {
+    btnClick('readOnly')
+  }
+}
+const btnClick = (type) => {
+  if (type === 'edit') {
+    if (noticeValue2.value === '') {
+      dialogForm.value.title = t('clean_notice')
+      dialogForm.value.confirmText = t('determine')
+      dialogForm.value.cancelText = t('cancel')
+      dialogForm.value.content = t('clean_notice_1')
+    } else {
+      dialogForm.value.title = t('publicGroupNotification')
+      dialogForm.value.confirmText = t('publish')
+      dialogForm.value.cancelText = t('cancel')
+      dialogForm.value.content = t('tipAllGroupMember')
+    }
+    dialogForm.value.dialogShow = true
+  } else if (type === 'readOnly') {
+    viewType.value = 'edit'
+  }
+
+}
+const confirm = async () => {
+  if (dialogForm.value.checked && noticeValue2.value) {
+    let params = {
+      groupID: groupChatConfig.value.groupID,
+      notification: noticeValue2.value,
+      need_notify: dialogForm.value.checked,
+      device_id: useUid,
+    }
+
+    const res = await $api.contact.setGroupNotification(params)
+    if (res.code === 0) {
+      showToast({ message: t('publish_success'), position: 'top', })
+      groupChatConfig.value.notification = noticeValue2.value
+      setGroupChatConfig(groupChatConfig.value)
+      setTimeout(() => {
+       
+        router.back()
+      }, 1000)
+    }
+  } else if (!dialogForm.value.checked || (noticeValue1.value && !noticeValue2.value)) {
+    let params = {
+      groupID: groupChatConfig.value.groupID,
+      notification: noticeValue2.value||'null',
+    }
+    OpenIM.setGroupInfo(params).then(res => {
+      showToast({ message: t('publish_success'), position: 'top', })
+      groupChatConfig.value.notification = noticeValue2.value
+      setGroupChatConfig(groupChatConfig.value)
+      setTimeout(() => {
+        router.back()
+      }, 1000)
+    })
+  }
+  // OpenIM.setGroupInfo(params).then(res => {
+  //   if (viewType.value === 'edit') {
+  //     viewType.value = 'readOnly'
+  //     showToast({ message: t('publish_success'), position: 'top', })
+  //     getNotice()
+  //     router.back()
+  //   }
+  // })
+
+
+}
+
+const showEditBtn = computed(() => {
+  if (myGroupInfo.value.roleLevel === 100 || (myGroupInfo.value.roleLevel === 60 && JSON.parse(myGroupInfo.value.ex).hasEditGroupNotificationPermission.value == 1)) {
+    return true
+  }
+  return false
+})
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('groupAc')" left-arrow views_grade="fourth_view" @click-left="router.back()">
+      <template #right>
+        <div v-if="showEditBtn">
+          <span v-if="viewType === 'readOnly'" class="nav-text" @click="btnClick('readOnly')">{{ $t('edit') }}</span>
+          <span v-else-if="viewType === 'edit'" class="nav-text1" @click="btnClick('edit')" style="color: #0095F6">{{
+      $t('finish') }}</span>
+        </div>
+      </template>
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div class="field-1" v-if="viewType === 'readOnly'">
+          <van-field v-model="noticeValue1" :label="''" label-align="top" rows="4" autosize type="textarea"
+            maxlength="500" disabled="" />
+        </div>
+        <div class="field-2" v-else-if="viewType === 'edit'">
+          <van-field v-model="noticeValue2" :label="''" rows="4" autosize label-align="top" type="textarea"
+            maxlength="500" :placeholder="$t('inputGroupAc')" show-word-limit />
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <van-dialog v-model:show="dialogForm.dialogShow" :title="dialogForm.title" show-cancel-button
+    confirmButtonColor="#0095F6" :confirmButtonText="dialogForm.confirmText" :cancelButtonText="dialogForm.cancelText"
+    @confirm="confirm">
+    <div class="dialog-text">
+      <van-checkbox v-if="noticeValue2" v-model="dialogForm.checked"></van-checkbox>
+      <span>{{ dialogForm.content }}</span>
+    </div>
+  </van-dialog>
+
+  <!-- 四级视图 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  padding-top: 56px;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+
+      //   padding: 0;
+      //   height: 60px;
+      //   line-height: 60px;
+      //     display: flex;
+      //     align-items: center;
+      //     padding-right: 16px;
+      .van-cell__title {
+        font-size: 1rem;
+      }
+    }
+
+    .field-1 {
+      :deep(.van-cell__title) {
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    .field-2 {
+      :deep(.van-field__word-limit) {
+        text-align: left;
+      }
+    }
+  }
+}
+
+.dialog-text {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 24px 0;
+  text-align: center;
+  color: #76767A;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+  /* 150% */
+  letter-spacing: 0.28px;
+
+  span {
+    margin-left: 10px;
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/groupPrompt.vue b/src/views/contact/chat/components/groupPrompt.vue
new file mode 100644
index 0000000..865dd63
--- /dev/null
+++ b/src/views/contact/chat/components/groupPrompt.vue
@@ -0,0 +1,115 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 3)
+const removeDialogShow = ref(false)
+const showBottom = ref(false)
+onMounted(() => {
+
+})
+</script>
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('joinGroup')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/dialogue/privatechat')"></AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div class="avatar">
+            <div><img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt=""></div>
+            <div><span>快乐分享群</span></div>
+            <div class="name_last"><span>3 成员</span></div>
+
+        </div>
+        <div class="footer">
+            <van-button  block color="#1B1B22">请求加入群聊</van-button>
+            <div class="footer-btn">
+                <span>此群聊仅在管理员审核后才能加入</span>
+                <!-- <span>此群聊人数已达上线</span>
+                <span>此群聊仅在管理审核后才能加入</span> -->
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+    .footer {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        :deep(.van-button) {
+            width: 355px;
+        }
+    }
+}
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y:auto;
+  .detailSet-content  {
+    .avatar {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 60px 0;
+        img {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            margin-bottom: 10px;
+        }
+        span {
+            color: #1B1B22;
+            font-family: PingFang SC;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+        }
+        :deep(.van-button) {
+            width: 140px;
+            height: 48px;
+        }
+    }
+    .name_last {
+        margin: 4px 0 20px 0;
+        span {
+            color: var(--60, #76767A);
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    } 
+  }
+  .footer {
+        margin: 0 16px;
+        .footer-btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+            color:  #76767A;
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    }
+}
+</style>
diff --git a/src/views/contact/chat/components/groupUserDetail.vue b/src/views/contact/chat/components/groupUserDetail.vue
new file mode 100644
index 0000000..2ff466f
--- /dev/null
+++ b/src/views/contact/chat/components/groupUserDetail.vue
@@ -0,0 +1,843 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watchEffect } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { showToast } from "vant";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { consttimestampToTime, copyUserId, isSelf,calculateOnlineStatus } from "@/utils/tools.js";
+import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { setDetailSearch, updateGroupMemberInfo } = contactStore;
+const { myGroupInfo, contactList, groupMemberInfoObj, groupInfo,allGroupOwnerOrAdmin } =
+  storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo: myUserInfo, groupChatConfig } = storeToRefs(userStore);
+const userInfoPages = JSON.parse(JSON.stringify(myUserInfo))
+const OpenIM = getSDK();
+const $api = inject("$api");
+const router = useRouter();
+const route = useRoute();
+const detailSetRef = ref(null);
+useGrade(detailSetRef, 5);
+const removeDialogShow = ref(false);
+const showBottom = ref(false);
+const userInfo = ref({}); // 群内用户信息
+const userPublicInfo = ref({}); // 个人用户信息
+const internalInfo = ref({}); // 是否内部用户信息
+const isFriend = ref(false);
+const actionShow = ref(false);
+const isSupertube = ref(true); // 是否是后台超级管理员
+const actions = [{ id: 1, name: t("gmiError12") }];
+let userFlag = ref(false)
+// let timeoutId1 = ref();
+onMounted(async() => {
+  getUserInfo();
+  getSpecifiedGroupMembersInfo();
+  getGroupMemberInfoExFn();
+  checkFriend();
+  // timeoutId1.value = setTimeout(() => {
+  //   checkFriend();
+  // }, 1000);
+  const { data } = await OpenIM.getSpecifiedGroupMembersInfo({
+    groupID:groupChatConfig.value.groupID,
+    userIDList: [localStorage.getItem('user_id')],
+  });
+  userFlag.value = data&&data[0]?true:false
+});
+// onBeforeUnmount(() => {
+//   clearTimeout(timeoutId1.value);
+// });
+watch(
+  () => route.query.userID,
+  () => {
+    getUserInfo();
+  }
+);
+// 100	群主 60	群管理员 20	群普通成员
+let currentLoginRoleLevel = ref();
+let appConfig = computed(() => {
+  return sessionStorage.getItem("appConfig") || {};
+});
+let addFriendByGroup = computed(() => {
+  return JSON.parse(appConfig.value)?.user_permission?.addFriendByGroup || {};
+});
+let addFriendByGroupObj = computed(() => {
+  return JSON.parse(addFriendByGroup.value) || {};
+});
+let currentLoginRoleLevelKey = ref("");
+let isPermission = ref(true);
+
+// 判断当前登录用户在群里的角色
+const getSpecifiedGroupMembersInfo = async () => {
+  const res = await OpenIM.getSpecifiedGroupMembersInfo({
+    groupID: groupChatConfig.value.groupID,
+    userIDList: [localStorage.getItem("user_id")],
+  });
+  currentLoginRoleLevel.value = res?.data[0]?.roleLevel;
+  if (currentLoginRoleLevel.value === 100) {
+    currentLoginRoleLevelKey.value = "groupOwner";
+  } else if (currentLoginRoleLevel.value === 60) {
+    currentLoginRoleLevelKey.value = "groupAdmin";
+  } else if (currentLoginRoleLevel.value === 20) {
+    currentLoginRoleLevelKey.value = "groupMember";
+  }
+  isPermission.value =
+    addFriendByGroupObj.value[currentLoginRoleLevelKey.value]?.addRole;
+};
+const getUserInfo = async () => {
+  const memberRes = await OpenIM.getSpecifiedGroupMembersInfo({
+    groupID: groupChatConfig.value.groupID,
+    userIDList: [route.query.userID],
+  });
+  // debugger;
+  userInfo.value = (memberRes.data.length && memberRes.data[0]) || {};
+  const remark = JSON.parse(userInfo.value.ex || "{}").remark?.value;
+  userInfo.value.remark = remark;
+  console.log("memberRes", userInfo.value, remark);
+
+  const imRes = await OpenIM.getUsersInfo([route.query.userID]);
+  let info = imRes.data.length && {
+    ...userPublicInfo.value,
+    ...imRes.data[0].publicInfo,
+  };
+  const res = await $api.contact.getUserById({
+    UserIDs: [info.userID],
+  });
+  internalInfo.value = res.data.users && res.data.users[0];
+  isSupertube.value = res.data?.users && res.data?.users[0]?.is_backend_admin;
+  // userPublicInfo.value = info;//这个值是查看的卡片用户在群里的数据，不需要再这个地方赋值
+  
+  userPublicInfo.value = Object.assign(info,userPublicInfo.value)
+  const groupMembers =
+  groupMemberInfoObj.value[groupChatConfig.value.groupID] || [];
+  const groupItem = groupMembers.find((item) => item.userID === info.userID);
+  if (groupItem && groupItem.nickname) {
+    userPublicInfo.value.groupNickName =
+      groupItem.groupNickName || groupItem.nickname;
+      userPublicInfo.value.roleLevel = groupItem.roleLevel
+  }
+  console.log("userPublicInfo", info, groupItem);
+  let userDetailUserBol = window.sessionStorage.getItem("userDetailUserBol");
+  if (!internalInfo.value && !userDetailUserBol) {
+    showToast(t("userNullError"));
+  }
+};
+const getGroupMemberInfoExFn = async () => {
+  const { code, data } = await $api.contact.getGroupMemberInfoEx({
+    groupID: groupChatConfig.value.groupID,
+    userID: route.query.userID,
+  });
+  if (code !== 0) return;
+  Object.assign(userPublicInfo.value,data)
+  console.error("res", data, userPublicInfo.value);
+};
+// 检测是否为好友
+const checkFriend = () => {
+  if (route.query.userID === myUserInfo.value.userID) return false;
+  OpenIM.checkFriend([route.query.userID]).then((res) => {
+    if (res.data[0].result === 1) {
+      isFriend.value = true;
+      OpenIM.getSpecifiedFriendsInfo([route.query.userID]).then((res) => {
+        userPublicInfo.value.remark = res.data[0].friendInfo.remark;
+      });
+    } else {
+      isFriend.value = false;
+    }
+  });
+};
+const submitRemove = async () => {
+  try {
+    const params = {
+      groupID: groupChatConfig.value.groupID,
+      userIDList: [userInfo.value.userID],
+      reason: "",
+    };
+    await OpenIM.kickGroupMember(params);
+    // 如果勾选删聊天记录，需要调用删除聊天记录的接口
+    if (delateUserMsgFlag.value) {
+      const res = await $api.contact.delGroupMsgByUserId({
+        conversationID: groupInfo.value.conversationID,
+        userID: route.query.userID,
+      });
+      console.log(res);
+    }
+    showToast({ message: t("deleteSuccess"), position: "top" });
+    updateGroupMemberInfo(groupChatConfig.value.groupID, userInfo.value.userID);
+    removeDialogShow.value = false;
+    router.push("/home/contact/groupDetails/groupchatMember");
+  } catch (error) {
+    if (error.errCode === 1002) {
+      showToast({ message: t("gmiError5"), position: "top" });
+      removeDialogShow.value = false;
+    }
+  }
+};
+const addFriend = async () => {
+  if (!internalInfo.value) {
+    return showToast(t("userNullError"));
+  }
+
+  // const res = await OpenIM.getUsersInfo([userInfo.value.userID])
+  // setDetailSearch(userInfo.value)
+  setDetailSearch({ ...userPublicInfo.value, remark: "", isFriend: false });
+  // router.push(`/home/contact/add/search/result/apply`);
+  if (isInGroupchat.value) {
+    router.push(`/home/contact/add/search/result/applyGroup`);
+  } else {
+    router.push(`/home/contact/add/search/result/apply`);
+  }
+};
+const sendMsg = () => {
+  router.push(`/home/dialogue/privatechat/${userInfo.value.userID}`);
+};
+const actionSelect = (item) => {
+  if (item.id === 1) {
+    OpenIM.changeGroupMemberMute({
+      groupID: groupChatConfig.value.groupID,
+      userID: userInfo.value.userID,
+      mutedSeconds: 0,
+    }).then(() => {
+      showToast({ message: t("gmiError7"), position: "top" });
+      getUserInfo();
+    });
+  }
+};
+const muteCellClick = () => {
+  const currentDate = new Date();
+  if (
+    userInfo.value.muteEndTime > 0 &&
+    userInfo.value.muteEndTime > currentDate.getTime()
+  ) {
+    actionShow.value = true;
+  } else {
+    router.push(
+      `/home/contact/groupDetails/groupchatMember/setGroupBans?userID=${userInfo.value.userID}`
+    );
+  }
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    // const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    const mapObj = userPublicInfo.value || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID) && groupMemberInfoObj.value[groupChatConfig.value.groupID].length) return "group";
+    }
+    return "";
+  };
+});
+
+
+// 判断自己是否在群聊中
+const isInGroupchat = computed(() => {
+  // let groupMember = groupMemberInfoObj.value[groupChatConfig.value.groupID].map(
+  //   (i) => i.userID
+  // );
+  // if (groupMember.includes(route.query.userID) && groupMember.length > 0) {
+  //   return true;
+  // } else {
+  //   return false;
+  // }
+  return userFlag.value
+});
+
+// 转json
+const onJson = (val) => {
+  if (!val) return {}
+  return JSON.parse(val);
+};
+
+const onLeft = () => {
+  router.back();
+  // setGroupUserDetailUserID('')
+  window.sessionStorage.removeItem("userDetailUserBol");
+};
+const showMuteEndTime = computed(() => {
+  const currentDate = new Date();
+  const groupList = groupMemberInfoObj.value[groupChatConfig.value.groupID] || []
+  const muteEndTime = groupList.find((item) => item.userID === route.query.userID)?.muteEndTime;
+  if (
+    muteEndTime > 0 &&
+    muteEndTime > currentDate.getTime()
+  ) {
+    return true;
+  }
+  return false;
+});
+// 群聊备注编辑弹窗
+const groupRemarkModal = ref(false);
+const groupRemarkText = ref("");
+// 我是群主
+const imGroupOwner = computed(() => myGroupInfo.value.roleLevel === 100);
+
+// 我是管理员
+const imGroupManager = computed(() => myGroupInfo.value.roleLevel === 60);
+// 管理员改不了群主, 当前用户权限大于进入的用户才能改
+const powerStrong = computed(
+  () => myGroupInfo.value.roleLevel >= userInfo.value.roleLevel
+);
+// 是否设置了备注
+const isSetedGroupRemark = computed(() => userInfo.value.remark === "aaa");
+const updateGroupRemark = async () => {
+  const res = await $api.contact.setGroupMemberInfoApi({
+    number_list: [
+      {
+        userId: userInfo.value.userID,
+        groupID: groupChatConfig.value.groupID,
+        nickName: userInfo.value.nickname,
+        faceURL: userInfo.value.faceURL,
+        ex: JSON.stringify({
+          remark: {
+            update: 1,
+            value: groupRemarkText.value.trim(),
+          },
+        }),
+      },
+    ],
+  });
+  setTimeout(async () => {
+    await getUserInfo();
+    showToast({ position: "top", message: "保存成功" });
+  }, 200);
+};
+
+const handleSetRemark = () => {
+  groupRemarkModal.value = true;
+  groupRemarkText.value = userInfo.value.remark;
+};
+const delateUserMsgFlag = ref(true);
+watchEffect(() => {});
+const groupMemberPermission = computed(() => {
+  console.log('userInfo-----:',userInfo.value)//查看的用户在当前群的信息
+  console.log('myGroupInfo-----:',myGroupInfo.value)//操作的用户在当前群的信息
+  console.log('userPublicInfo-----:',userPublicInfo.value)//查看的用户在当前群的信息
+  
+  //获取当前操作用户在群里面的权限，然后获取查看用户在群里的权限
+  //判断1.0是否查看的是自己的信息，如果是自己的信息不展示详情信息
+  //判断2.0查看的是否是群主信息，如果是群主信息，没有操作按钮
+  //判断3.0自己在当前群是否是管理员，如果是管理员，查看群员信息需要展示详情信息（自己除外）
+  // const permission = userInfo.value.roleLevel !== 100 // 当前用户不是超级管理员
+  //                   && (
+  //                   myGroupInfo.value.roleLevel === 100 || // 当前用户是群主
+  //                   (myGroupInfo.value.roleLevel === 60 && // 当前用户是管理员并且有权限查看群详情并且看的不是自己
+  //                   myGroupInfo.value.ex &&
+  //                   onJson(myGroupInfo.value.ex).hasDetailInfoPermission?.value == 1)) && 
+  //                   route.query.userID != myUserInfo.value.userID && 
+  //                   userPublicInfo.value.joinTime // 并且有加入时间
+  // return !!permission
+  const permission = userInfo.value.roleLevel !== 100 // 查看的当前用户不是超级管理员
+                    && (
+                    myGroupInfo.value.roleLevel === 100 || // 操作用户是群主
+                    (myGroupInfo.value.roleLevel === 60 && // 或者是群管理员，并且有操作权限
+                    myGroupInfo.value.ex &&
+                    onJson(myGroupInfo.value.ex)?.hasDetailInfoPermission?.value == 1)) && 
+                    route.query.userID != myGroupInfo.value.userID && 
+                    (userPublicInfo.value.joinTime) // 并且有加入时间
+  return permission
+})
+// 控制-移除本群按钮显示隐藏
+const delPermission = computed(() => {
+  // const permission = (myGroupInfo.value.roleLevel === 100 ||
+  //                    (myGroupInfo.value.roleLevel === 60 && myGroupInfo.value.ex && onJson(myGroupInfo.value.ex).hasDeleteGroupMemberPermission?.value == 1)) && 
+  //                    route.query.userID != myUserInfo.value.userID &&
+  //                    userInfo.value.roleLevel !== 100
+  //                    && userPublicInfo.value.joinTime
+  const permission = (myGroupInfo.value.roleLevel === 100 ||
+                     (myGroupInfo.value.roleLevel === 60 && myGroupInfo.value.ex && onJson(myGroupInfo.value.ex).hasDeleteGroupMemberPermission?.value == 1)) && 
+                     route.query.userID != myGroupInfo.value.userID &&
+                     userInfo.value.roleLevel !== 100
+                     && userPublicInfo.value.joinTime
+  return permission
+})
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar
+      title=""
+      left-arrow
+      views_grade="fifth_view"
+      @click-left="onLeft"
+    ></AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div class="avatar">
+          <div>
+            <cdnSource v-if="userInfo.faceURL || userPublicInfo.faceURL" :defaultUrl="userInfo.faceURL || userPublicInfo.faceURL">
+              <template #cdnSlot="{ cdnUrl }">
+                <Avatar
+                  width="60"
+                  height="60"
+                  :url="cdnUrl"
+                  :name="
+                    userPublicInfo.remark
+                      ? userPublicInfo.remark
+                      : userPublicInfo.nickname
+                  "
+                ></Avatar>
+              </template>
+            </cdnSource>
+          </div>
+          <div v-if="showGroupOwner(userPublicInfo.userID) != ''" >
+            <CommonLottie
+              :isGroup="showGroupOwner(userPublicInfo.userID)"
+              :width="140"
+              :bottom="2"
+              :left="25"
+              :showName="
+                userPublicInfo.remark ||
+                userPublicInfo.nickname ||
+                userPublicInfo.groupNickName
+              "
+            ></CommonLottie>
+          </div>
+          <div
+            v-if="showGroupOwner(userPublicInfo.userID) === ''"
+            class="remark-wrap"
+          >
+            {{
+              userPublicInfo.remark
+                ? userPublicInfo.remark
+                : userPublicInfo.nickname
+            }}
+          </div>
+          <div
+            class="name_top"
+            v-if="isFriend && userPublicInfo.remark"
+            style="margin: 10px 0; color: #76767a; font-size: 14px"
+          >
+            {{ t("nicknames") + "：" + userPublicInfo.nickname }}
+          </div>
+          <div class="name_last name_lasts" v-if="isInGroupchat">
+            <span>{{
+              $t("gmiTitle") +
+              (userPublicInfo.groupNickName || userPublicInfo.nickname||'')
+            }}</span>
+          </div>
+          <div
+            class="group-remark"
+            v-if="
+              (imGroupOwner || imGroupManager) &&
+              powerStrong &&
+              !isSelf(userInfo.userID)
+            "
+          >
+            <div class="group-nickname">
+              {{ $t("group_remark") }}:{{ userInfo.remark || t("notSet2") }}
+            </div>
+            <img
+              class="edit-btn"
+              src="@/assets/svg/my-edit.svg"
+              alt=""
+              @click="handleSetRemark"
+            />
+          </div>
+          <div
+            class="detail_center"
+            v-if="
+              !isSupertube
+            "
+          >
+            <div
+              class="detail_id"
+              v-if="
+                !isSupertube &&
+                (groupChatConfig.isGroupOwner ||
+                  groupChatConfig.isGroupAdmin ||
+                  isInGroupchat) &&
+                (myGroupInfo.roleLevel === 100 || myGroupInfo.roleLevel === 60 || (myUserInfo.isInternalUser && isFriend))
+              "
+            >
+              <span
+                >{{ t("userId")
+                }}{{
+                  internalInfo?.internal_uid
+                    ? internalInfo.internal_uid
+                    : userPublicInfo.userID
+                }}</span
+              >
+              <img
+                src="@/assets/svg/fuzhi.svg"
+                alt=""
+                @click="
+                  copyUserId(
+                    internalInfo.internal_uid
+                      ? internalInfo.internal_uid
+                      : userPublicInfo.userID
+                  )
+                "
+              />
+            </div>
+            <div v-if="route.query.userID !== myUserInfo.userID">            
+              <template v-if="!isFriend">
+                <van-button round v-show="isPermission" color="#1B1B22" @click="addFriend">{{
+                  $t("addFriend")
+                }}</van-button>
+              </template>
+              <template v-else>
+                <van-button round color="#1B1B22" @click="sendMsg">{{
+                  $t("sendMessage")
+                }}</van-button>
+              </template>
+            </div>
+          </div>
+        </div>
+        <!-- 【IM- H5/APP】【群成员信息】 群主A加入到群主B创建的群，同时作为普通群成员，群主B，在群里查看群主A的信息，APP与H5显示不一致
+            showGroupOwner(userPublicInfo.userID) !== 'group'  
+        -->
+        <van-cell-group
+          :border="false"
+          v-if="route.query.userID !== myUserInfo.userID && isInGroupchat&& userInfo.roleLevel !== 100 "
+        >
+        <!-- userInfo.roleLevel  是查看的当前用户数据信息，如果他是群主操作用户是管理员也无法操作群主 -->
+          <van-cell
+            :title="$t('gmiSetMute')"
+            @click="muteCellClick"
+            v-if="
+              myGroupInfo.roleLevel === 100 ||
+              (myGroupInfo.roleLevel === 60 &&
+                onJson(myGroupInfo.ex)?.hasSetGroupMutePermission?.value == 1)
+            "
+          >
+            <template #title >
+              <span class="custom-title">{{ $t("gmiSetMute") }}</span>
+            </template>
+            <template #right-icon>
+              <span v-if="showMuteEndTime" class="cell-text">{{
+                $t("gmiMuteTo") + consttimestampToTime(userInfo.muteEndTime)
+              }}</span>
+              <img
+                class="notice-value-link"
+                src="@/assets/right-small2.svg"
+                alt=""
+              />
+            </template>
+          </van-cell>
+        </van-cell-group>
+        <!-- 是否可以查看详情信息--群管理员配置权限后可以查看详情信息,但是群主和群管理员都不允许查看自己的详细信息 -->
+        <div class="member-info" v-if="groupMemberPermission"> 
+          <div class="custom-title">{{ $t('group_member_info') }}</div>
+
+          <div class="info-content">
+            <div class="con-cell">
+              {{ $t("join_time") }}：{{
+              consttimestampToTime(userPublicInfo.joinTime,"YYYY-MM-DD HH:mm:ss")}} 
+            </div>
+            <div class="con-cell">
+              {{ $t("inviter_user") }}：{{ userPublicInfo.inviterUserNickName }}
+            </div>
+            <div class="con-cell">
+              {{ $t("onlineStatus") }}
+              {{
+                userPublicInfo&&userPublicInfo?.userStatus?
+                calculateOnlineStatus(
+                  userPublicInfo.userStatus.serverTime - userPublicInfo.userStatus.lastLogoutTime,
+                  userPublicInfo.userStatus.lastLogoutTime,
+                  userPublicInfo.userStatus.serverTime,
+                  userPublicInfo
+                ):''
+              }}
+            </div>
+          </div>
+        </div>
+        <div
+          class="del-button"
+          @click="removeDialogShow = true"
+          v-if="delPermission"
+        >
+          {{ $t("gmiDeleteUser") }}
+        </div>
+      </div>
+    </div>
+  </div>
+  <van-action-sheet
+    v-model:show="actionShow"
+    :actions="actions"
+    :cancel-text="$t('cancel')"
+    close-on-click-action
+    @select="actionSelect"
+  />
+  <van-dialog
+    v-model:show="removeDialogShow"
+    :title="$t('gmiError3')"
+    show-cancel-button
+    :confirmButtonText="$t('ctmRemove')"
+    confirmButtonColor="#FC5A50"
+    @confirm="submitRemove"
+  >
+    <div class="dialog-text">{{ $t("deleteMemberDetail") }}</div>
+    <!-- 删除用户群里内容 -->
+    <div class="dialog-text2">
+      <van-checkbox v-model="delateUserMsgFlag" icon-size="16px">{{
+        $t("DeleteThisUsersgroup")
+      }}</van-checkbox>
+    </div>
+  </van-dialog>
+  <van-dialog
+    v-model:show="groupRemarkModal"
+    :title="$t('group_remark')"
+    show-cancel-button
+    confirmButtonColor="#538FE1"
+    @confirm="updateGroupRemark"
+  >
+    <div class="remark-text">
+      <van-field
+        v-model="groupRemarkText"
+        label=""
+        type="textarea"
+        show-word-limit
+        rows="2"
+        maxlength="30"
+        :placeholder="$t('input_group_remark')"
+      />
+    </div>
+  </van-dialog>
+
+</template>
+
+<style lang="less" scoped>
+// @media screen and (max-width: 750px) {
+//   :deep(.van-popup) {
+//     position: fixed !important;
+//   }
+// }
+.detailSet-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y: auto;
+
+  .custom-title {
+    // padding-left: 16px;
+    color: #1b1b22;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 400;
+    display: inline-block;
+  }
+  .detailSet-content {
+    :deep(.van-cell) {
+      // padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      // padding-right: 16px;
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    :deep(.van-cell::before) {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      margin: 0 16px;
+      height: 1px;
+      background: #f6f6f6;
+    }
+
+    .avatar {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin: 15px 0 20px 0;
+
+      :deep(.van-image) {
+        margin: 15px 0 0 0;
+      }
+
+      span {
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin: 5px 0;
+      }
+
+      :deep(.van-button) {
+        width: 140px;
+        height: 48px;
+      }
+
+      .detail_id {
+        margin-bottom: 26px;
+        display: flex;
+        align-items: center;
+
+        span {
+          margin-right: 5px;
+          color: #76767a;
+          font-family: "PingFang SC";
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+        }
+      }
+    }
+
+    .detail_center {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .name_last {
+      margin: 15px 0 15px 0;
+
+      span {
+        color: var(--60, #76767a);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    .name_lasts {
+      margin: 6px 0 15px 0;
+    }
+    .name_top {
+      margin-top: unset !important;
+    }
+  }
+}
+
+.member-info {
+  padding: 0 16px;
+  color: #76767a;
+  margin-bottom: 24px;
+
+  .custom-title {
+    display: block;
+    padding: 16px 0;
+  }
+
+  .info-content {
+    font-size: 0.875rem;
+  }
+}
+
+.del-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #76767a;
+  margin: 16px 16px 0;
+  height: 48px;
+  border-radius: 12px;
+  border: 1px solid #e8e8e9;
+}
+
+.dialog-text {
+  padding: 20px 0 24px 0;
+  text-align: center;
+  color: #76767a;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+  /* 150% */
+  letter-spacing: 0.28px;
+}
+.dialog-text2 {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --van-checkbox-label-color: rgba(27, 27, 34, 0.6);
+  :deep(.van-checkbox__icon) {
+    margin-top: -2px;
+  }
+
+  :deep(.van-checkbox__label) {
+    font-size: 0.875rem;
+  }
+}
+
+.cell-text {
+  color: var(--Font-L3, rgba(27, 27, 34, 0.4));
+  text-align: right;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.remark-wrap {
+  margin: 5px 0;
+  max-width: calc(100vw - var(--size-24px));
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: normal;
+}
+
+.group-remark {
+  font-size: 0.875rem;
+  color: #76767a;
+  display: flex;
+  align-items: flex-start;
+  margin: 0 16px 10px;
+  text-align: center;
+  justify-content: center;
+
+  .group-nickname {
+    // max-width: 100px;
+  }
+
+  .edit-btn {
+    cursor: pointer;
+    margin-left: 4px;
+    margin-top: 2px;
+  }
+}
+.remark-text {
+  --van-cell-background: #f6f6f6;
+}
+.remark-text {
+  margin: 20px 24px 25px;
+
+  .van-cell {
+    border-radius: 12px;
+  }
+
+  :deep(.van-field__word-limit) {
+    color: rgba(27, 27, 34, 0.4);
+  }
+}
+:deep(.special-title-name) {
+  position: relative !important;
+  top: -17px;
+  bottom: auto !important;
+  text-overflow: unset;
+  overflow: unset;
+  white-space: unset;
+}
+</style>
diff --git a/src/views/contact/chat/components/groupchatMember.vue b/src/views/contact/chat/components/groupchatMember.vue
new file mode 100644
index 0000000..d7580e7
--- /dev/null
+++ b/src/views/contact/chat/components/groupchatMember.vue
@@ -0,0 +1,832 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { showToast } from "vant";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import VirtualList from "@/components/virtualList";
+import GroupChatMemberItem from "./groupchatMemberItem.vue";
+import GroupMemberSearch from "./groupMemberSearch.vue";
+import { isSelf } from "@/utils/tools";
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+const { t } = useI18n();
+const contactStore = useContactStore();
+const {
+  groupInfo,
+  myGroupInfo,
+  // groupMemberInfo,
+  groupMemberInfoObj,
+} = storeToRefs(contactStore);
+// const { setGroupMemberInfo, updateGroupMemberInfo } = contactStore;
+const { newGetGroupUserInfoList, updateGroupMemberInfo } = contactStore;
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const OpenIM = getSDK();
+const $api = inject("$api");
+const router = useRouter();
+const detailSetRef = ref(null);
+const removeDialogShow = ref(false);
+useGrade(detailSetRef, 4);
+const searchValue = ref("");
+const groupOwnerList = ref([]);
+const adminAndMemberList = ref([]);
+const isEdit = ref(false);
+const actionShow = ref(false);
+const currentUserID = ref("");
+const actions = [{ id: 1, name: t("deleteMemberTitle"), color: "#ee0a24" }];
+const isSearchPage = ref(false);
+const searchList = ref([]);
+const searchForm = ref("");
+const page_num = ref(1);
+const page_nums = ref(1);
+const theoreticalListRef = ref(null); // 虚拟列表的实例
+let pageNumber = 0; //默认加载第一页
+const groupParams = reactive({
+  groupID: groupChatConfig.value.groupID,
+  filter: 0,
+  count: 40,
+  offset: 0,
+});
+
+let nextPageFlag = true; //是否允许加载下一页
+onMounted(() => {
+  pageNumber = 0;
+  groupParams.offset = 0;
+  getList(groupParams);
+  // handeGetStatus(itemsArr.value)//用来计算用户是否属于登录状态
+});
+
+/**
+ * 获取群成员列表
+ * @param
+ */
+const getList = async ({ groupID, filter, offset, count }) => {
+  await newGetGroupUserInfoList({ groupID, filter, offset, count: 40 });
+  setTimeout(() => {
+    nextPageFlag = true;
+  }, 100);
+};
+const handleScroll = (event) => {
+  if (theoreticalListRef.value) {
+    const flag =
+      theoreticalListRef.value.getScrollSize() -
+        theoreticalListRef.value.getOffset() >
+      theoreticalListRef.value.getClientSize() * 1.3;
+    if (!flag && nextPageFlag) {
+      nextPageFlag = false;
+      pageNumber++;
+      groupParams.offset = pageNumber * groupParams.count;
+      getList(groupParams);
+    }
+  }
+};
+
+watch(
+  () => groupMemberInfoObj.value[groupChatConfig.value.groupID],
+  (val) => {
+    adminAndMemberList.value = [];
+    groupOwnerList.value = [];
+    transferData();
+  },
+  { deep: true }
+);
+// 好友在线状态
+const onlineStatus = ref({});
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+// 获取在线状态
+const handeGetStatus = async (userList) => {
+  const startIndex = (page_num.value - 1) * 50;
+  const endIndex = page_num.value * 50;
+  const currentItems = userList.slice(startIndex, endIndex);
+  const userIds = currentItems.map((item) => item.userID);
+  userIds.push(myGroupInfo.value.userID);
+  const res = await $api.login.userLoginStatus({ userIDs: userIds });
+  if (res.code === 0) {
+    (res.data || []).forEach((item) => {
+      // 只存储在线状态
+      if (item.status === 1) {
+        onlineStatus.value[item.userID] = true;
+        friendState.SetOnlineStatus(onlineStatus.value);
+      }
+    });
+  }
+};
+
+const transferData = () => {
+  const arr1 = [];
+  if (Object.keys(groupMemberInfoObj.value).length > 0) {
+    groupMemberInfoObj.value[groupChatConfig.value.groupID].forEach((item) => {
+      if (item.roleLevel === 100) {
+        if (groupOwnerList.value.indexOf(item.userID) === -1) {
+          groupOwnerList.value = [item];
+        }
+      }
+      if (item.roleLevel === 60 || item.roleLevel === 20) {
+        const index = adminAndMemberList.value.findIndex(
+          (items) => items.userID === item.userID
+        );
+        if (index === -1) {
+          adminAndMemberList.value.push(item);
+        }
+      }
+    });
+
+    console.log("获取展示数据：", adminAndMemberList);
+  }
+};
+/**
+ * 是否删除群成员
+ */
+const submitRemove = async () => {
+  const hasDeleteGroupMemberPermission = { value: 0 };
+  if (myGroupInfo.value?.ex) {
+    Object.assign(
+      hasDeleteGroupMemberPermission,
+      JSON.parse(myGroupInfo.value.ex).hasDeleteGroupMemberPermission
+    );
+  }
+  if (
+    myGroupInfo.value.roleLevel === 100 ||
+    (myGroupInfo.value.roleLevel === 60 &&
+      hasDeleteGroupMemberPermission.value == 1)
+  ) {
+    const params = {
+      groupID: groupInfo.value.groupID,
+      userIDList: [currentUserID.value],
+      reason: "",
+    };
+    await OpenIM.kickGroupMember(params);
+    showToast({ message: t("deleteSuccess"), position: "top" });
+    updateGroupMemberInfo(groupInfo.value.groupID, currentUserID.value);
+  } else {
+    showToast({ message: t("gmiError6"), position: "top" });
+  }
+};
+const editClick = (type) => {
+  // 把群成员从群组中移除。群主和群管理员可移除普通成员，群主可移除管理员和普通成员。
+  if (type === "edit") {
+    isEdit.value = true;
+  } else if (type === "complete") {
+    isEdit.value = false;
+  }
+};
+const actionSelect = (item) => {
+  if (item.id === 1) {
+    submitRemove();
+  }
+};
+// 这个方法会搜索会偶现报错===暂时注释
+// const onSearch = val => {
+//   if (searchForm.value) {
+//     searchList.value = [];
+//     groupMemberInfo.value[groupChatConfig.value.groupID].forEach(item => {
+//       console.error('item--------',item);
+//       const groupRemark = JSON.parse(item.ex || '{}').remark?.value || ''
+//       if (
+//         item.remark.toUpperCase().includes(searchForm.value.toUpperCase()) ||
+//         item.nickname.toUpperCase().includes(searchForm.value.toUpperCase()) ||
+//         item?.groupNickName
+//           ?.toUpperCase()
+//           .includes(searchForm.value.toUpperCase()) ||
+//         // 群聊备注判断，当前角色roleLevel为20的时候不能使用群聊备注去搜索，所以
+//         (myGroupInfo.value.roleLevel !== 20 && groupRemark.toUpperCase().includes(searchForm.value.toUpperCase()))
+//       ) {
+//         // 这里单独把自己过滤掉
+//         if (!isSelf(item.userID)) {
+//           searchList.value.push(item);
+//         }
+//       }
+//     });
+//   }
+// };
+// fix 修复2024-8-2 【IM- H5】【群成员】群成员，无法搜索
+let getAllGroupUserList = [];
+const onSearch = async (val) => {
+  if (searchForm.value) {
+    searchList.value = [];
+    // 获取群成员信息
+
+    // const groupMembers = groupMemberInfoObj.value[groupChatConfig.value.groupID];
+    if (!getAllGroupUserList.length) {
+      await getAllGroupList();
+    }
+    let list = []
+    // 遍历群成员信息
+    // groupMembers.forEach(item => {
+    getAllGroupUserList.forEach((item) => {
+      // 解析群聊备注信息
+      const groupRemark = JSON.parse(item.ex || "{}").remark?.value || "";
+      // 检查是否符合搜索条件
+      if (
+        item.remark?.toUpperCase()?.includes(searchForm.value.toUpperCase()) ||
+        item.nickname
+          ?.toUpperCase()
+          ?.includes(searchForm.value.toUpperCase()) ||
+        item?.groupNickName
+          ?.toUpperCase()
+          .includes(searchForm.value.toUpperCase()) ||
+        // 当角色级别不为20时，检查群聊备注是否匹配搜索条件
+        (myGroupInfo.value.roleLevel !== 20 &&
+          groupRemark?.toUpperCase().includes(searchForm.value.toUpperCase()))
+      ) {
+        // 确保不包含自己
+        if (!isSelf(item.userID)) {
+          list.push(item)
+        }
+      }
+    });
+
+    searchList.value = list
+  }
+};
+
+const getAllGroupList = async () => {
+  const params = {
+    groupID: groupParams.groupID, // 群 ID
+    filter: 0, // 群成员角色 0所有成员  1群主 2群管理员  3群普通成员  4群管理员和普通成员  5群主和群管理员
+    offset: 0,
+    count: 10000,
+  };
+  const res = await OpenIM.getGroupMemberList(params);
+  getAllGroupUserList = res && res.data ? res.data : [];
+};
+
+const onCancel = () => {
+  isSearchPage.value = !isSearchPage.value;
+};
+const toUserDetail = (userID) => {
+  router.push(
+    `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${userID}`
+  );
+};
+const inviteClick = () => {
+  router.push("/home/contact/groupDetails/groupchatMember/InviteFriends");
+};
+const changeColor = (text) => {
+  if (text.includes(searchForm.value)) {
+    // 判断段落内容是否包含指定文本
+    var regex = new RegExp(searchForm.value, "g"); // 创建正则表达式对象，设置全局标志'g'
+    var replacedText = text.replace(
+      regex,
+      `<span style="color: #0095F6;">${searchForm.value}</span>`
+    ); // 将匹配到的文本用红色样式包裹起来
+    return replacedText; // 更新段落内容
+  }
+};
+watch(
+  () => searchForm.value,
+  () => {
+    if (searchForm.value === "") {
+      searchList.value = [];
+    }
+  }
+);
+
+const getCurrentTitle = computed(() => {
+  return (val) => {
+    let groupRemark = JSON.parse(val.ex || "{}")?.remark?.value || "";
+    if (myGroupInfo.value.roleLevel === 20) {
+      groupRemark = "";
+    }
+    if (val.isFriend) {
+      // 好友
+      // 好友备注 item.remark -->  群聊备注 item.ex --> 用户个人昵称 nickname  --> 群聊昵称 groupNickName
+      return val.remark
+        ? val.remark
+        : groupRemark || val.nickname || val.groupNickName;
+    } else {
+      //群聊备注 item.ex -->  群聊昵称 groupNickName  --> 用户个人昵称 nickname
+      return groupRemark || val.groupNickName || val.nickname;
+    }
+  };
+});
+const clickItem = (userID) => {
+  actionShow.value = true;
+  currentUserID.value = userID;
+};
+const removeItem = (userID) => {
+  removeDialogShow.value = true;
+  currentUserID.value = userID;
+};
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (userID) {
+      const arr = groupMemberInfoObj.value[groupChatConfig.value.groupID] || [];
+      const index = arr.findIndex((item) => item.userID === userID);
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+const itemsArr = computed(() => {
+  return adminAndMemberList.value.slice(0, page_num.value * 50);
+});
+const itemsSearchArr = computed(() => {
+  return searchList.value.slice(0, page_nums.value * 20);
+});
+const onScrollToBottom = () => {
+  page_num.value++;
+  handeGetStatus(itemsArr.value);
+};
+const onSearchToBottom = () => {
+  page_nums.value++;
+};
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <div
+      style="flex: 1; position: relative; height: 100%"
+      class="detail_content"
+      v-if="!isSearchPage"
+    >
+      <AppNavBar
+        :title="$t('groupMember')"
+        left-arrow
+        views_grade="fourth_view"
+        @click-left="router.push('/home/contact/groupDetails')"
+      >
+        <template #right>
+          <div
+            v-if="myGroupInfo.roleLevel === 100 || myGroupInfo.roleLevel === 60"
+          >
+            <span class="nav-text" v-if="!isEdit" @click="editClick('edit')">{{
+              $t("edit")
+            }}</span>
+            <span
+              class="nav-text"
+              v-else-if="isEdit"
+              @click="editClick('complete')"
+              style="color: #0095f6"
+              >{{ $t("finish") }}
+            </span>
+          </div>
+        </template>
+      </AppNavBar>
+      <div class="detailSet-wrap">
+        <div class="detailSet-content">
+          <van-search
+            class="search-input"
+            v-model="searchValue"
+            @focus="isSearchPage = true"
+            :placeholder="$t('search')"
+          />
+          <van-cell-group :border="false">
+            <van-cell
+              class="add-cell"
+              :border="false"
+              value=""
+              v-for="(item, index) in groupOwnerList"
+              :key="index"
+              @click="!isEdit ? toUserDetail(item.userID) : ''"
+            >
+              <template #title>
+                <!-- 1、只有群主和群管理员可查看 在线状态 -->
+                <van-badge
+                  class="dot-on-line-state"
+                  :dot="isOnLineState(item.userID) || item.roleLevel === 60"
+                  color="#43FA51"
+                />
+                <Avatar
+                  width="32"
+                  height="32"
+                  :url="item.faceURL"
+                  :name="getCurrentTitle(item)"
+                  @updateUrl="(url) => (item.faceURL = url)"
+                />
+                <div class="custom-admin">
+                  <div
+                    class="group-wrap"
+                    v-if="showGroupOwner(item.userID) != ''"
+                  >
+                    <CommonLottie
+                      :isGroup="showGroupOwner(item.userID)"
+                      :width="120"
+                      :showName="getCurrentTitle(item)"
+                      :bottom="-2"
+                    >
+                    </CommonLottie>
+                  </div>
+                  <div v-else class="name group-name">
+                    {{ getCurrentTitle(item) }}
+                  </div>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+          <div class="empty-line"></div>
+          <virtual-list
+            ref="theoreticalListRef"
+            :data-key="'userID'"
+            :data-sources="itemsArr"
+            :data-index="'index'"
+            class="group-member-wrap"
+            :keeps="50"
+            :data-component="(message) => GroupChatMemberItem"
+            @tobottom="onScrollToBottom"
+            @scroll="handleScroll"
+            :extra-props="{
+              isEdit: isEdit,
+              onClickItem: clickItem,
+              onRemoveItem: removeItem,
+            }"
+            :estimate-size="60"
+          >
+          </virtual-list>
+        </div>
+        <div
+          class="footer"
+          v-if="
+            (myGroupInfo.roleLevel === 100 || myGroupInfo.roleLevel === 60) &&
+            !isEdit
+          "
+        >
+          <van-button block color="#1B1B22" @click="inviteClick">{{
+            $t("addFriendGotoGroup")
+          }}</van-button>
+        </div>
+      </div>
+    </div>
+    <div class="search-warp" v-else>
+      <van-search
+        v-model="searchForm"
+        show-action
+        :placeholder="$t('search_hine_1')"
+        @update:model-value="onSearch"
+        @cancel="onCancel"
+      />
+      <div class="search-member-wrap" v-if="searchList.length">
+        <virtual-list
+          ref="vsl"
+          :data-key="'userID'"
+          :data-sources="itemsSearchArr"
+          :data-index="'index'"
+          class="group-member-wraps"
+          :keeps="50"
+          :data-component="(message) => GroupMemberSearch"
+          @tobottom="onSearchToBottom"
+          :extra-props="{}"
+          :estimate-size="60"
+        >
+        </virtual-list>
+      </div>
+      <div v-else class="empety-warp">
+        <div><img src="@/assets/empety.svg" alt="" /></div>
+        <div>{{ $t("searchNotFoundMember") }}</div>
+      </div>
+    </div>
+  </div>
+  <van-dialog
+    v-model:show="removeDialogShow"
+    :title="$t('gmiError3')"
+    show-cancel-button
+    @confirm="submitRemove"
+  >
+    <div class="dialog-text">{{ $t("deleteMemberDetail") }}</div>
+  </van-dialog>
+  <van-action-sheet
+    v-model:show="actionShow"
+    :actions="actions"
+    :cancel-text="$t('cancel')"
+    close-on-click-action
+    @select="actionSelect"
+    class-name="remove-sheet"
+  />
+  <!-- 四级视图 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+  :deep(.van-index-bar__sidebar) {
+    right: 15% !important;
+  }
+
+  .fourth_view_nav {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+  .group-member-wrap,
+  .group-member-wraps {
+    height: calc(100% - 420px) !important;
+  }
+  .footer {
+    bottom: 0 !important;
+  }
+}
+@media screen and (max-width: 750px) {
+  .footer {
+    position: fixed !important;
+    bottom: 0 !important;
+  }
+}
+.detailSet {
+  background-color: #fff;
+  // position: relative;
+  .detail_content {
+    height: 100%;
+    // position: relative;
+    flex: 1;
+  }
+}
+.group-member-wrap,
+.group-member-wraps {
+  height: calc(100% - 200px);
+  overflow-y: auto;
+}
+.detailSet-wrap,
+.search-warp {
+  background: #fff;
+  // display: flex;
+  // flex-direction: column;
+  // justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  //   overflow-y:auto;
+  padding: 56px 0 0 0;
+  position: relative;
+
+  .detailSet-content {
+    // padding-bottom: 66px;
+    height: calc(100vh - 150px);
+    // flex: 1;
+    overflow: hidden;
+
+    :deep(.van-cell) {
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .first-cell {
+        :deep(.van-cell) {
+          height: 40px;
+        }
+      }
+
+      .second-cell {
+        :deep(.van-cell) {
+          height: 72px;
+        }
+      }
+    }
+
+    .custom-title {
+      // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+
+    :deep(.van-swipe-cell__right) {
+      right: -1px;
+
+      .van-button {
+        width: 70px;
+        height: 56px;
+      }
+    }
+
+    :deep(.van-cell) {
+      height: 56px;
+    }
+
+    .add-cell {
+      :deep(.van-cell__title) {
+        display: flex;
+        align-items: center;
+      }
+      .dot-on-line-state {
+        position: absolute;
+        left: 38px;
+        top: 12px;
+      }
+    }
+
+    :deep(.van-swipe-cell__wrapper) {
+      .custom-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        margin-left: 10px;
+        font-family: PingFang SC;
+        font-size: var(--size-16px);
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        // max-width: 150px;
+        max-width: 220px;
+      }
+    }
+  }
+}
+
+.empty-line {
+  width: 100%;
+  height: 8px;
+  background-color: rgba(248, 248, 251, 1);
+}
+
+.footer {
+  // position: absolute;
+  // bottom: 0;
+  height: 66px;
+  width: 100%;
+  padding: 10px 16px;
+  background-color: #fff;
+  position: absolute;
+  left: 0;
+  bottom: 88px;
+}
+
+.dialog-text {
+  padding: 20px 0 24px 0;
+  text-align: center;
+  color: #76767a;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+  /* 150% */
+  letter-spacing: 0.28px;
+}
+
+:deep(.van-dialog__confirm) {
+  color: #fc5a50;
+}
+
+.search-input {
+  margin: 8px 0;
+
+  :deep(.van-field__left-icon) {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    background: url(/src/assets/search-icon.svg) no-repeat center / cover;
+
+    > i {
+      display: none;
+    }
+  }
+
+  :deep(.van-cell) {
+    height: 36px !important;
+  }
+}
+
+.index-bar {
+  :deep(.van-index-bar__sidebar) {
+    color: #a4a4a7;
+
+    :deep(.van-index-anchor) {
+      color: #a4a4a7 !important;
+    }
+  }
+}
+
+:deep(.van-cell__title) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.van-search__action) {
+  color: #0095f6;
+}
+
+:deep(.van-cell) {
+  .van-cell__title {
+    .custom-title {
+      margin-left: 10px;
+    }
+  }
+}
+
+.del-icon {
+  margin-right: 10px;
+}
+
+.empety-warp {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin-top: 135px;
+
+  div {
+    display: flex;
+    justify-content: center;
+  }
+
+  div:nth-child(2) {
+    margin-top: 30px;
+    color: var(--60, #76767a);
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    /* 150% */
+    letter-spacing: 0.5px;
+  }
+}
+
+:deep(.van-badge__wrapper) {
+  display: flex;
+  align-items: center;
+}
+
+.search-warp {
+  padding-top: 0;
+}
+
+:deep(.van-cell__value) {
+  padding-right: 10px;
+}
+
+.custom-admin {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  padding: 4px 0;
+
+  .group-wrap {
+    display: flex;
+    align-items: center;
+    color: rgba(124, 73, 26, 1);
+    border-radius: 16px;
+    padding: 2px 4px;
+    margin-bottom: 6px;
+    .van-image {
+      margin-right: 4px;
+    }
+  }
+
+  .admin-wrap {
+    display: flex;
+    align-items: center;
+    color: rgba(63, 111, 177, 1);
+    border-radius: 16px;
+    padding: 2px 4px;
+    .van-image {
+      margin-right: 4px;
+    }
+  }
+}
+
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  max-width: 150px;
+}
+.title {
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-right: 10px;
+}
+.search-member-wrap {
+  height: calc(100vh - 56px);
+  overflow-y: hidden;
+}
+:deep(.van-image) {
+  border: 1px solid rgba(232, 232, 233, 0.2);
+  box-sizing: content-box;
+}
+
+:deep(.van-button) {
+  font-size: 1rem;
+  border-radius: 12px;
+}
+</style>
diff --git a/src/views/contact/chat/components/groupchatMemberItem.vue b/src/views/contact/chat/components/groupchatMemberItem.vue
new file mode 100644
index 0000000..c46703c
--- /dev/null
+++ b/src/views/contact/chat/components/groupchatMemberItem.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useRouter } from "vue-router";
+import icon2 from "@/assets/shanchu.png";
+import shanchu from "@/assets/chanchu.svg";
+import shanchu2 from "@/assets/svg/shanchu2.svg";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { groupInfo, myGroupInfo, groupMemberInfoObj,allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const router = useRouter();
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {}
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+});
+const emits = defineEmits(["clickItem", "removeItem"]);
+
+const toUserDetail = (userID) => {
+  router.push(
+    `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${userID}`
+  );
+};
+const getCurrentTitle = computed(() => {
+  return val => {
+    let groupRemark = JSON.parse(val.ex || '{}')?.remark?.value || ''
+    if (myGroupInfo.value.roleLevel === 20) {
+      groupRemark = ''
+    }
+    if (val.isFriend) {
+      // 好友
+      // 好友备注 item.remark -->  群聊备注 item.ex --> 用户个人昵称 nickname  --> 群聊昵称 groupNickName
+      return val.remark ? val.remark : (groupRemark || val.nickname || val.groupNickName);
+    } else {
+      //群聊备注 item.ex -->  群聊昵称 groupNickName  --> 用户个人昵称 nickname
+      return (groupRemark || val.groupNickName || val.nickname);
+    }
+  };
+});
+const handleDelete = val => {
+  emits("clickItem", val.userID);
+};
+const handleRemove = val => {
+  emits("removeItem", val.userID);
+};
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (userID) {
+      const arr = groupMemberInfoObj.value[groupChatConfig.value.groupID] || [];
+      const index = arr.findIndex((item) => item.userID === userID);
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+onMounted(()=>{
+
+})
+</script>
+
+<template>
+  <van-swipe-cell :right-width="70">
+    <van-cell
+      :title="getCurrentTitle(source)"
+      :value="''"
+      @click="!props.isEdit ? toUserDetail(source.userID) : ''"
+    >
+      <template #title>
+        <van-icon
+          class="del-icon"
+          style="margin-right: 10px"
+          v-if="props.isEdit"
+          :name="shanchu"
+          size="16"
+          @click="handleDelete(source)"
+        />
+        <!-- 3、只有群主和群管理员可查看 在线状态 -->
+        <van-badge
+          v-if="myGroupInfo.roleLevel === 100 || myGroupInfo.roleLevel === 60"
+          class="dot-on-line-state"
+          :dot="isOnLineState(source.userID)"
+          color="#43FA51"
+        />
+        <Avatar
+          width="32"
+          height="32"
+          :url="source.faceURL"
+          :name="getCurrentTitle(source)"
+          @updateUrl="(url) => (source.faceURL = url)"
+        />
+        <div class="custom-admin" v-if="source.roleLevel === 60">
+          <div class="admin-wrap" v-if="showGroupOwner(source.userID) != ''">
+            <CommonLottie
+              :isGroup="showGroupOwner(source.userID)"
+              :width="120"
+              :showName="getCurrentTitle(source)"
+              :bottom="-2"
+              :left="25"
+            >
+            </CommonLottie>
+          </div>
+          <div v-else class="name admin-name">
+            {{ getCurrentTitle(source)}}
+          </div>
+        </div>
+        <span v-if="source.roleLevel === 20" class="custom-title"
+          >{{ getCurrentTitle(source) }}</span
+        >
+      </template>
+    </van-cell>
+    <template #right>
+      <van-button
+        v-if="myGroupInfo.roleLevel === 100 || myGroupInfo.roleLevel === 60"
+        square
+        color="#FC5A50"
+        :icon="icon2"
+        @click="handleRemove(source)"
+      />
+    </template>
+  </van-swipe-cell>
+</template>
+
+<style lang="less" scoped>
+.dot-on-line-state {
+  position: absolute;
+  left: 38px;
+  top: 12px;
+}
+</style>
diff --git a/src/views/contact/chat/components/inviteLink.vue b/src/views/contact/chat/components/inviteLink.vue
new file mode 100644
index 0000000..2ba3740
--- /dev/null
+++ b/src/views/contact/chat/components/inviteLink.vue
@@ -0,0 +1,208 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import { useContactStore } from "@/stores/contact";
+import clipboard3 from 'vue-clipboard3'
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const { toClipboard } = clipboard3()
+const { groupId } = useContactStore();
+const { userInfo } = useUserStore();
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 4)
+const actions = [
+    { id: 1,name: t('copyLink')},
+    { id: 2,name: t('deleteLink'),color: '#FC5A50'},
+]
+const activeName = ref('')
+const actionShow = ref(false)
+const logoutDialogShow = ref(false)
+const link = ref('')
+onMounted(() => {
+    groupGenerateLink()
+})
+const groupGenerateLink = async () => {
+    const res = await $api.contact.groupGenerateLink({group_id: groupId})
+    if (res.code === 0) {
+        link.value = res.data
+    }
+    
+}
+const consentClick = () => {
+
+}
+const tabsChange = (name) => {
+    console.log(name);
+}
+const actionSelect = async (item) => {
+    if (item.id === 2) {
+        logoutDialogShow.value = true
+    } else if (item.id ===1) {
+        await toClipboard(link.value)
+        showToast({message: t('inviteLinkCopy'),position: 'top',})
+    }
+}
+const submitdel = async () => {
+    let params = {
+        flag: '',
+        group_id: groupId,
+        user_id: userInfo.userID
+    }
+    const res = await $api.contact.groupDeleteLink(params)
+}
+const goBack = () => {
+    router.back()
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('enterGroupCheck')" left-arrow views_grade="fourth_view" @click-left="goBack">
+        <template #right>
+            <span class="nav-text" v-if="activeName === 'pending'"  @click="consentClick" style="color: #0095F6">{{$t('agreeAll')}}</span>
+        </template>
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div >
+            <div class="empety-warp">
+                <div><img src="@/assets/empety.svg" alt=""></div>
+            </div>
+        </div>
+        <div class="content-text">任何已安装IM App 的用户都将可以通过此链接加入您的群聊</div>
+        <div class="content-center">
+            <div class="content-title">{{$t('inviteLink')}}</div>
+            <div class="content-link">
+                <span class="content-linkleft">{{ link }}</span>
+                <span><van-icon name="ellipsis" @click="actionShow = true"/></span>
+            </div>
+        </div>
+        <div class="footer">
+            <van-button  block color="#1B1B22">{{ $('shareLink') }}</van-button>
+            <div class="footer-btn" @click="router.push('/home/contact/groupDetails/inviteLink/manageLinks')"><span>{{$t('manageLink')}}</span></div>
+        </div>
+      </div>
+    </div>
+    <van-action-sheet
+        v-model:show="actionShow"
+        :actions="actions"
+        :cancel-text="$t('cancel')"
+        close-on-click-action
+        @select="actionSelect"
+    />
+    <van-dialog v-model:show="logoutDialogShow" :title="$('deleteLinkTipsTitle')" show-cancel-button @confirm="submitdel">
+        <div class="dialog-text">{{$t('deleteLinkTipsDetail')}}</div>
+    </van-dialog>
+  </div>
+  <!-- 四级视图 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #F8F8FB;
+  height: 100%;
+  width: 100%;
+  overflow-y:auto;
+  .detailSet-content  {
+    .content-text {
+        margin: 30px 0;
+        padding: 0 26px;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px; /* 150% */
+        letter-spacing: 0.2px;
+    }
+    .content-center {
+        margin: 0 16px 40px;
+        border-radius: 16px;
+        background-color: #fff;
+        padding: 12px;
+        .content-link {
+            height: 60px;
+            line-height: 60px;
+            border-radius: 8px;
+            background: #F8F8FB;
+            padding: 0 12px;
+            display: flex;
+            justify-content: space-between;
+            .content-linkleft {
+                overflow: hidden;
+            }
+        }
+        .content-title {
+            margin-bottom: 12px;
+            color: #1B1B22;
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+        }
+    }
+    .footer {
+        margin: 0 16px;
+        .footer-btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+            color:  #0095F6;
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    }
+  }
+}
+:deep(.van-nav-bar__content) {
+    background-color: #F8F8FB;
+}
+.empety-warp {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin-top: 96px;
+    div {
+        display: flex;
+        justify-content: center;
+    }
+    div:nth-child(2) {
+        margin-top: 30px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px; /* 150% */
+        letter-spacing: 0.5px;
+    }
+}
+.dialog-text {
+    padding: 20px 10px 24px 10px;
+    text-align: center;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+    letter-spacing: 0.28px;
+  }
+  :deep(.van-dialog__confirm) {
+    color: #0095F6;
+  }
+</style>
diff --git a/src/views/contact/chat/components/manageGrounp.vue b/src/views/contact/chat/components/manageGrounp.vue
new file mode 100644
index 0000000..35bc146
--- /dev/null
+++ b/src/views/contact/chat/components/manageGrounp.vue
@@ -0,0 +1,293 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast,showFailToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user";
+const { t } = useI18n()
+const contactStore = useContactStore()
+const { groupId, groupInfo, myGroupInfo } = storeToRefs(contactStore);
+const userStore= useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 4)
+const checkedList = ref({
+  checked1: '',
+  checked2: false,
+  checked3: '',
+  checked4: '',
+})
+const groupAdminList = ref([])
+onMounted(() => {
+  getGroupInfo()
+  getGroupList()
+  getGroupSettings()
+})
+// 获取指定群信息
+const getGroupInfo = async () => {
+  const res = await OpenIM.getSpecifiedGroupsInfo([groupInfo.value.groupID])
+  if (res) {
+    checkedList.value.checked2 = res.data[0].status === 3 ? true : false
+    checkedList.value.checked3 = res.data[0].needVerification
+    if (res.data[0].ex) {
+      checkedList.value.checked1 = JSON.parse(res.data[0].ex).searchHistoryMessage.value
+      // 群聊面具开关 0 开启， 1
+      if (JSON.parse(res.data[0].ex).setGroupMemberHeadUrl) {
+        checkedList.value.checked4 = JSON.parse(res.data[0].ex).setGroupMemberHeadUrl.value === 0
+        
+      }
+    }
+  } else {
+    showToast({ message: t('gmsvFindGroupErr'), position: 'top', })
+  }
+}
+const getGroupList = async () => {
+  const res = await OpenIM.getGroupMemberList({ groupID: groupInfo.value.groupID, filter: 0, offset: 0, count: 99999 })
+  if (res) {
+    groupAdminList.value = res.data.filter(el => el.roleLevel === 60)
+  }
+}
+// const changeSwitch = async (type) => {
+//   switch (type) {
+//     case 1:
+//       const params = {
+//         groupId: groupInfo.value.groupID,
+//         searchHistoryMessage: {
+//           update: 1,
+//           value: checkedList.value.checked1
+//         }
+//       }
+//       $api.contact.setGroupInfoEx(params).then(res => {
+//         if (res.code === 0) {
+//           if (checkedList.value.checked1) {
+//             showToast({ message: t('gmsvFindMsgOn'), position: 'top', })
+//           } else {
+//             showToast({ message: t('gmsvFindMsgOff'), position: 'top', })
+//           }
+//         }
+//       })
+//       break;
+//     case 2:
+//       console.error('ssssssssssssss');
+//       OpenIM.changeGroupMute({ groupID: groupInfo.value.groupID, isMute: checkedList.value.checked2 }).then(res => {
+//         if (checkedList.value.checked2) {
+//           showToast({ message: t('gmsvSetMuteTipOn'), position: 'top', })
+//         } else {
+//           showToast({ message: t('gmsvSetNuteTipOff'), position: 'top', })
+//         }
+//       })
+//       break;
+//     case 3:
+//       OpenIM.setGroupInfo({ groupID: groupInfo.value.groupID, needVerification: checkedList.value.checked3 }).then(res => {})
+//       break;
+//     case 4:
+//       const params1 = {
+//         groupId: groupInfo.value.groupID,
+//         setGroupMemberHeadUrl: {
+//           update: 1,
+//           value: checkedList.value.checked4 ? 0 : 1
+//         }
+//       }
+//       const res = await $api.contact.setGroupMask(params1)
+//       if (res.code  === 0) {
+//         if (checkedList.value.checked4) {
+//           showToast({ message: t('maskOpen'), position: 'top', })
+//         } else {
+//           showToast({ message: t('maskClose'), position: 'top', })
+//         }
+//       }
+//       break;
+//   }
+// }
+const changeSwitch = async (type) => {
+  try {
+    switch (type) {
+      case 1:
+        const params = {
+          groupId: groupInfo.value.groupID,
+          searchHistoryMessage: {
+            update: 1,
+            value: checkedList.value.checked1
+          }
+        };
+        const response1 = await $api.contact.setGroupInfoEx(params);
+        if (response4.code===1002) {
+          showFailToast(t('error_sdk_err_1002'));
+          // 返回上一级路由
+          router.go(-1);
+        }
+        if (response1.code === 0) {
+          if (checkedList.value.checked1) {
+            showToast({ message: t('gmsvFindMsgOn'), position: 'top' });
+          } else {
+            showToast({ message: t('gmsvFindMsgOff'), position: 'top' });
+          }
+        }
+        break;
+      case 2:
+        const response2 = await OpenIM.changeGroupMute({ groupID: groupInfo.value.groupID, isMute: checkedList.value.checked2 });
+        if (response2) {
+          if (checkedList.value.checked2) {
+            showToast({ message: t('gmsvSetMuteTipOn'), position: 'top' });
+          } else {
+            showToast({ message: t('gmsvSetNuteTipOff'), position: 'top' });
+          }
+        }
+        break;
+      case 3:
+        const response3 = await OpenIM.setGroupInfo({ groupID: groupInfo.value.groupID, needVerification: checkedList.value.checked3 });
+        break;
+      case 4:
+        const params1 = {
+          groupId: groupInfo.value.groupID,
+          setGroupMemberHeadUrl: {
+            update: 1,
+            value: checkedList.value.checked4 ? 0 : 1
+          }
+        };
+        const response4 = await $api.contact.setGroupMask(params1);
+        if (response4.code===1002) {
+          showFailToast(t('error_sdk_err_1002'));
+          // 返回上一级路由
+          router.go(-1);
+        }
+        if (response4.code === 0) {
+          if (checkedList.value.checked4) {
+            showToast({ message: t('maskOpen'), position: 'top' });
+          } else {
+            showToast({ message: t('maskClose'), position: 'top' });
+          }
+        }
+        break;
+      default:
+        console.error(`Unsupported type: ${type}`);
+    }
+  } catch (error) {
+    if (error.errCode === 1002) {
+      showFailToast(t('error_sdk_err_1002'));
+      // 返回上一级路由
+      router.go(-1);
+    }
+    console.error('Error in changeSwitch:', error);
+  }
+};
+
+const maxGroupAdminNum =  50
+
+// 获取群管理员设置最大数
+const groupAdminNum = ref(0)
+const getGroupSettings = async () => {
+  const groupRes = await $api.login.getGroupSettings();
+  groupAdminNum.value = groupRes.data.group_admin_num
+  if (groupRes.code !== 0) return
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('gmsvTitle')" left-arrow views_grade="fourth_view"
+      @click-left="router.push('/home/contact/groupDetails')"></AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-cell-group :border="true">
+          <van-cell v-if="myGroupInfo.roleLevel === 100" class="first-cell" is-link :title="$t('setAdmin')"
+            :value="groupAdminList.length ? `${groupAdminList.length}/${groupAdminNum || 1}` : $t('gmsvToSet')"
+            @click="router.push(`/home/contact/groupDetails/manageGrounp/setAdministrator`)">
+            <template #title>
+              <span class="custom-title">{{ $t('setAdmin') }}</span>
+            </template>
+            <template #right-icon>
+              <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+            </template>
+          </van-cell>
+          <van-cell v-if="myGroupInfo.roleLevel === 100" class="second-cell" :title="$t('gmsvFindMsg')"
+            :label="$t('gmsvFindMsgDesc')">
+            <template #title>
+              <span class="custom-title">{{ $t('gmsvFindMsg') }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch v-model="checkedList.checked1" :active-value="1" :inactive-value="0" size="16px"
+                @change="changeSwitch(1)" />
+            </template>
+          </van-cell>
+          <van-cell class="second-cell" :title="$t('muteAllMember')" :label="$t('gmsvMuteDesc')">
+            <template #title>
+              <span class="custom-title">{{ $t('muteAllMember') }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch v-model="checkedList.checked2" size="16px" @change="changeSwitch(2)" />
+            </template>
+          </van-cell>
+          <van-cell class="second-cell" :title="$t('groupMask')" :label="$t('maskDesc')">
+            <template #title>
+              <span class="custom-title">{{ $t('groupMask') }}</span>
+            </template>
+            <template #right-icon>
+              <van-switch v-model="checkedList.checked4" size="16px" @change="changeSwitch(4)" />
+            </template>
+          </van-cell>
+          <!-- <van-cell v-if="groupInfo.roleLevel === 100" class="second-cell" :title="$t('gmsvApply')" :label="$t('openManage')">
+            <template #title>
+              <span class="custom-title">{{ $t('gmsvApply') }}</span>
+            </template>
+            <template #right-icon>
+                <van-switch v-model="checkedList.checked3" size="16px" :active-value="0" :inactive-value="2" @change="changeSwitch(3)" />
+            </template>
+          </van-cell> -->
+        </van-cell-group>
+      </div>
+    </div>
+
+  </div>
+  <!-- 四级视图 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y: auto;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .van-cell__title {
+
+        .custom-title {
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+
+      .first-cell {
+        :deep(.van-cell) {
+          height: 60px;
+        }
+      }
+
+      .second-cell {
+        :deep(.van-cell) {
+          height: 72px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/manageLinks.vue b/src/views/contact/chat/components/manageLinks.vue
new file mode 100644
index 0000000..fe82102
--- /dev/null
+++ b/src/views/contact/chat/components/manageLinks.vue
@@ -0,0 +1,262 @@
+<script setup>
+import { ref ,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const { groupId } = useContactStore();
+const { userInfo } = useUserStore();
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 5)
+const checkedList = ref({
+    checked1: false,
+    checked2: false,
+    checked3: false,
+})
+const showBottom = ref(false)
+const actionShow = ref(false)
+const actions = [ 
+    { id: 1, name: `1 ${t(dayValid)}`,label: '1天'},
+    { id: 2, name: `7 ${t(dayValid)}`,label: '7天'},
+    { id: 3, name: `30 ${t(dayValid)}`,label: '30天'},
+    { id: 4, name: $t('foreverValid'),label: '永久'},
+]
+const formObj = ref({
+    timeText: '',
+    expiry_type: ''
+})
+const dialogShow = ref(false)
+onMounted(() => {
+  init()
+})
+const init = async () => {
+  const res = await $api.contact.groupManageLink({group_id: groupId})
+    console.log(res,'res1');
+    if (res.code ===0) {
+      let current = actions.filter(el => el.id == res.data.expiry_type)
+      formObj.value.timeText = current.length? current[0].label : ''
+      formObj.value.expiry_type = current.id
+    }
+}
+const clearRecord = (type) => {
+
+}
+const subAdd = () => {
+    
+    showToast({message: test('addSuccessfully'),position: 'top',})
+}
+const actionSelect = (item) => {
+    switch(item.id) {
+        case 1:
+         formObj.value.timeText = `1${t('day')}`
+         formObj.value.expiry_type = 1
+         break;
+        case 2:
+         formObj.value.timeText = `7${t('day')}`
+         formObj.value.expiry_type = 2
+         break;
+        case 3:
+         formObj.value.timeText = `30${t('day')}`
+         formObj.value.expiry_type = 3
+         break;
+        case 4:
+         formObj.value.timeText = t('forever')
+         formObj.value.expiry_type = 4
+         break;
+    }
+}
+const submitdel = async () => {
+  let params = {
+        flag: '',
+        group_id: groupId,
+        user_id: userInfo.userID
+    }
+  const res = await $api.contact.groupDeleteLink(params)
+  if (res.code === 0) {
+    router.back()
+  }
+}
+const save = async () => {
+    const res = await $api.contact.groupLinkTime({group_id: groupId,expiry_type: formObj.value.expiry_type})
+    // const res1 = await $api.contact.groupManageLink({group_id: groupId,flag: checkedList.value.checked1})
+    if (res.code === 0) {
+      router.back()
+    }
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('linkManage')" left-arrow views_grade="fifth_view" @click-left="router.back()">
+        <template #right>
+          <span @click="save">{{$t('save')}}</span>
+      </template>
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-cell-group :border="true">
+          <van-cell :title="$t('checkInGroup')">
+            <template #title>
+              <span class="custom-title">{{$t('checkInGroup')}}</span>
+            </template>
+            <template #right-icon>
+                <van-switch v-model="checkedList.checked1" :active-value="1" :inactive-value="0" size="16px" />
+            </template>
+          </van-cell>
+          <div class="title-text">
+            {{$t('openManage')}}
+            </div>
+          <van-cell :title="$t('timeValid')" @click="actionShow = true">
+            <template #title>
+              <span class="custom-title">{{$t('timeValid')}}</span>
+            </template>
+            <template #right-icon>
+                <span>{{ formObj.timeText }}</span>
+                <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+            </template>
+          </van-cell>
+          <div class="title-text">
+                <div>2023/03/16 11:35内有效</div>
+                <div>{{$t('linkInvalidTips')}}</div>
+            </div>
+        </van-cell-group>
+      </div>
+      <div class="footer" @click="dialogShow = true">
+        <span>{{$t('deleteLink')}}</span>
+      </div>
+    </div>
+    <van-action-sheet
+        v-model:show="actionShow"
+        :actions="actions"
+        :cancel-text="$t('cancel')"
+        close-on-click-action
+        @select="actionSelect"
+    />
+    <van-dialog v-model:show="dialogShow" :title="$t('deleteLinkTipsTitle')" show-cancel-button @confirm="submitdel">
+        <div class="dialog-text">{{$t('deleteLinkTipsDetail')}}</div>
+    </van-dialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y:auto;
+  position: relative;
+  .detailSet-content  {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+        display: flex;
+        align-items: center;
+        padding-right: 16px;
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+    .avatar {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 20px 0 30px 0;
+        img {
+            width: 60px;
+            height: 60px;
+            margin-bottom: 16px;
+        }
+        span {
+            color: #1B1B22;
+            font-family: PingFang SC;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 500;
+            line-height: normal;
+        }
+    }
+    .popup {
+        :deep(.van-cell-group) {
+            background-color: #F8F8FB;
+        }
+        :deep(.van-cell) {
+            padding: 0;
+            height: 60px;
+            line-height: 60px;
+            text-align: center;
+        }
+        .second_cell {
+            color:#FC5A50;
+            margin-bottom: 10px;
+        }
+    }
+    .title-text {
+        padding: 12px 0 10px 16px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 18px; /* 150% */
+    }
+    .name_last {
+        margin-top: 4px;
+        span {
+            color: var(--60, #76767A);
+            font-family: PingFang SC;
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+        }
+    } 
+  }
+  .footer {
+    position: absolute;
+    bottom: 32px;
+    right: 0;
+    height: 52px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FC5A50;
+  }
+}
+.dialog-text {
+    padding: 20px 10px 24px 10px;
+    text-align: center;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+    letter-spacing: 0.28px;
+  }
+  :deep(.van-dialog__confirm) {
+    color: #0095F6;
+  }
+</style>
diff --git a/src/views/contact/chat/components/setAdministrator.vue b/src/views/contact/chat/components/setAdministrator.vue
new file mode 100644
index 0000000..ac27822
--- /dev/null
+++ b/src/views/contact/chat/components/setAdministrator.vue
@@ -0,0 +1,252 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import { storeToRefs } from 'pinia'
+import icon1 from '@/assets/chazhao.png'
+import icon2 from '@/assets/shanchu.png'
+import iconAdd from "@/assets/add.png"
+import shanchu from "@/assets/chanchu.svg"
+import { getSDK } from '@/utils/openIM/sdk/index.js' 
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const { groupId } = useContactStore();
+const { userInfo, appConfig } = useUserStore();
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+const removeDialogShow = ref(false)
+useGrade(detailSetRef, 5)
+const groupMemberList = ref({
+  groupOwner: [],
+  groupAdmin: [],
+  groupOther: []
+})
+const isEdit = ref(false)
+const currentAdminInfo = ref({})
+onMounted(() => {
+  getGroupList()
+  getGroupSettings()
+})
+const getGroupList = () => {
+  OpenIM.getGroupMemberList({groupID: groupId,filter: 0,offset: 0,count: 99999}).then(res => {
+    
+    groupMemberList.value.groupOwner = res.data.filter(el => el.roleLevel === 100)
+    groupMemberList.value.groupAdmin = res.data.filter(el => el.roleLevel === 60)
+    groupMemberList.value.groupOther = res.data.filter(el => el.roleLevel === 20)
+  })
+}
+const changeSwitch = (type) => {
+
+}
+/**
+ * 点击确定删除群管理员
+ */
+const submitRemove = () => {
+  OpenIM.setGroupMemberRoleLevel({groupID: groupId,userID: currentAdminInfo.value.userID,roleLevel: 20}).then(res => {
+        showToast({message: t('deleteSuccess'),position: 'top',})
+        getGroupList()
+  })
+}
+const editClick = (type) => {
+    if (type === 'edit') {
+        isEdit.value = true
+    } else if (type === 'complete') {
+        isEdit.value = false
+    }
+}
+const clickRemove = (item) => {
+    currentAdminInfo.value = item
+    removeDialogShow.value = true
+}
+const maxGroupAdminNum =  50
+
+// 获取群管理员设置最大数
+const groupAdminNum = ref(0)
+const getGroupSettings = async () => {
+  const groupRes = await $api.login.getGroupSettings();
+  groupAdminNum.value = groupRes.data.group_admin_num
+  if (groupRes.code !== 0) return
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('setAdmin')" left-arrow views_grade="fifth_view" @click-left="router.push('/home/contact/groupDetails/manageGrounp')">
+      <template #right>
+            <span class="nav-text" v-if="!isEdit" @click="editClick('edit')">{{ $t('edit') }}</span>
+            <span class="nav-text" v-else-if="isEdit" @click="editClick('complete')" style="color: #0095F6">{{ $t('finish') }}</span>
+        </template>
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-cell-group :border="false">
+          <van-cell class="first-cell" :border="false">
+            <template #title>
+              <span class="custom-title">{{ $t('groupOwner') }}</span>
+            </template>
+          </van-cell>
+          <van-swipe-cell :right-width="140">
+            <van-cell class="add-cell" :border="false" :value="item.userID === userInfo.userID? $t('me'): ''" v-for="(item,index) in groupMemberList.groupOwner" :key="index">
+                <template #title>
+                    <Avatar width="32" height="32" :url="item.faceURL" :name="item.nickname" @updateUrl="url => item.faceURL = url"></Avatar>
+                    <span class="custom-title">{{ item.nickname }}</span>
+                </template>
+            </van-cell>
+          </van-swipe-cell>
+        </van-cell-group>
+
+        <van-cell-group :border="false">
+          <van-cell class="first-cell" :border="false">
+            <template #title>
+              <span class="custom-title">{{ $t('groupAdmin')}} ({{ groupMemberList.groupAdmin.length}}/{{ groupAdminNum || 1 }})</span>
+            </template>
+          </van-cell>
+          <van-swipe-cell :right-width="140" v-for="(item,index) in groupMemberList.groupAdmin" :key="index">
+            <van-cell class="add-cell" :class="{'add-cell-othen':isEdit}"  :border="false" :value="item.userID === userInfo.userID? $t('me'): ''"  @click="router.push(`/home/contact/groupDetails/manageGrounp/addDetails?userID=${item.userID}&type=edit`)">
+                <template #title>
+                    <van-icon v-if="isEdit" class="del-icon" :name="shanchu" size="16" @click.stop="clickRemove(item)" />
+                    <Avatar width="32" height="32" :url="item.faceURL" :name="item.nickname" @updateUrl="url => item.faceURL = url"></Avatar>
+                    <span class="custom-title">{{ item.nickname }}</span>
+                </template>
+                <template #value>
+                  <div class="admin_right">
+                    <span>权限设置</span>
+                    <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+                  </div>
+                </template>
+            </van-cell>
+            <template #right>
+                <van-button square type="primary" :icon="icon1" @click="router.push(`/home/contact/groupDetails/manageGrounp/addDetails?userID=${item.userID}&type=edit`)" />
+                <van-button square color="#FC5A50" :icon="icon2" @click="clickRemove(item)" />
+            </template>
+          </van-swipe-cell>
+
+          <van-cell class="add-cell" v-if="groupMemberList.groupAdmin.length < (groupAdminNum || 1)&&!isEdit" :border="false" @click="!isEdit? router.push('/home/contact/groupDetails/manageGrounp/addAdministrator') : ''"> 
+            <template #title>
+              <van-icon :name="iconAdd" size="32" />
+              <span class="custom-title">{{ $t('addManager') }}</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </div>
+    <van-dialog v-model:show="removeDialogShow" :title="$t('deleteAdminTitle')" show-cancel-button @confirm="submitRemove">
+        <div class="dialog-text">{{ $t('deleteAdminDetail') }}</div>
+    </van-dialog>
+  </div>
+  <!-- 四级视图 -->
+  <!-- <RouterView /> -->
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y:auto;
+  .detailSet-content  {
+    :deep(.van-cell) {
+        display: flex;
+        align-items: center;
+        padding-right: 16px;
+        .first-cell {
+            :deep(.van-cell) {
+                height: 40px;
+            }
+            
+        }
+        .second-cell {
+            :deep(.van-cell) {
+                height: 72px;
+            }
+        }
+    }
+    .custom-title {
+        color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    :deep(.van-swipe-cell__right) {
+        right: -1px;
+        .van-button {
+            width: 70px;
+            height: 56px;
+        }
+    }
+        :deep(.van-cell) {
+            height: 56px;
+        }
+    .add-cell {
+        :deep(.van-cell__title) {
+            display: flex;
+            align-items: center;
+            .custom-title {
+                margin-left: 10px;
+                color: #1B1B22;
+                font-family: PingFang SC;
+                font-size: 1rem;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+                width: 208px;
+                white-space: nowrap;
+                overflow: hidden; /* 隐藏超出部分 */
+                text-overflow: ellipsis; /* 显示省略号 */
+            }
+        }
+    }
+    .add-cell-othen{
+      position: relative;
+      padding-left: 45px;
+
+      .del-icon{
+        position: absolute;
+        left:10px;
+        top:50%;
+        transform: translateY(-50%);
+        padding:5px;
+        z-index: 2;
+      }
+    }
+  }
+}
+.dialog-text {
+  padding: 20px 0 24px 0;
+  text-align: center;
+  color: #76767A;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px; /* 150% */
+  letter-spacing: 0.28px;
+}
+:deep(.van-dialog__confirm) {
+  color: #FC5A50;
+}
+.del-icon {
+    // margin-right: 10px;
+}
+:deep(.van-badge__wrapper) {
+  display: flex;
+  align-items: center;
+}
+.admin_right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  img {
+    margin-left: 10px;
+  }
+}
+</style>
diff --git a/src/views/contact/chat/components/setGroupBans.vue b/src/views/contact/chat/components/setGroupBans.vue
new file mode 100644
index 0000000..5f0fb51
--- /dev/null
+++ b/src/views/contact/chat/components/setGroupBans.vue
@@ -0,0 +1,221 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { showToast } from "vant";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+
+const { t } = useI18n();
+const { userInfo } = useUserStore();
+const OpenIM = getSDK();
+const $api = inject("$api");
+const router = useRouter();
+const route = useRoute();
+const detailSetRef = ref(null);
+const contactStore = useContactStore();
+const { groupId } = contactStore;
+useGrade(detailSetRef, 5);
+const selected = ref(0);
+
+onMounted(() => {});
+const changeSwitch = type => {};
+const subAdd = () => {
+  showToast({ message: t("addSuccessfully"), position: "top" });
+};
+const handleClick = value => {
+  if (selected.value === value) {
+    selected.value = 0;
+  } else {
+    selected.value = value;
+  }
+};
+
+const submit = () => {
+  if (selected.value === 0) {
+    return;
+  }
+  changeGroupMemberMute();
+};
+//设置禁言
+const changeGroupMemberMute = async () => {
+  console.log({
+    groupID: groupId,
+    userID: route.query.userID,
+    mutedSeconds: selected.value
+  });
+  OpenIM.changeGroupMemberMute({
+    groupID: groupId,
+    userID: route.query.userID,
+    mutedSeconds: selected.value
+  }).then(res => {
+    console.log(res, 333);
+    showToast({ message: t("setSuccessfully"), position: "top" });
+    window.sessionStorage.setItem('userDetailUserBol',true)
+    router.back();
+  });
+};
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar
+      :title="$t('addManager')"
+      left-arrow
+      views_grade="fifth_view"
+      @click-left="router.back()"
+    ></AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div class="title-text">
+          {{ $t("smmvMuteTime") }}
+        </div>
+        <van-cell-group :border="true">
+          <van-cell :title="$t('tenMinutes')" @click="handleClick(600)">
+            <template #title>
+              <span class="custom-title">{{ $t("tenMinutes") }}</span>
+            </template>
+            <template #right-icon>
+              <div v-if="selected === 600" class="content">
+                <img src="@/assets/svg/Group56.svg" alt="" />
+              </div>
+            </template>
+          </van-cell>
+          <van-cell :title="$t('oneHour')" @click="handleClick(3600)">
+            <template #title>
+              <span class="custom-title">{{ $t("oneHour") }}</span>
+            </template>
+            <template #right-icon>
+              <div v-if="selected === 3600" class="content">
+                <img src="@/assets/svg/Group56.svg" alt="" />
+              </div>
+            </template>
+          </van-cell>
+          <van-cell :title="$t('twelveHours')" @click="handleClick(43200)">
+            <template #title>
+              <span class="custom-title">{{ $t("twelveHours") }}</span>
+            </template>
+            <template #right-icon>
+              <div v-if="selected === 43200" class="content">
+                <img src="@/assets/svg/Group56.svg" alt="" />
+              </div>
+            </template>
+          </van-cell>
+          <van-cell :title="$t('oneDay')" @click="handleClick(86400)">
+            <template #title>
+              <span class="custom-title">{{ $t("oneDay") }}</span>
+            </template>
+            <template #right-icon>
+              <div v-if="selected === 86400" class="content">
+                <img src="@/assets/svg/Group56.svg" alt="" />
+              </div>
+            </template>
+          </van-cell>
+          <van-cell
+            :title="$t('smmvMuteTime_30day')"
+            @click="handleClick(2592000)"
+          >
+            <template #title>
+              <span class="custom-title">{{ $t("smmvMuteTime_30day") }}</span>
+            </template>
+            <template #right-icon>
+              <div v-if="selected === 2592000" class="content">
+                <img src="@/assets/svg/Group56.svg" alt="" />
+              </div>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+      <div class="footer">
+        <van-button type="primary" block color="#1B1B22" @click="submit">{{
+          $t("confirm")
+        }}</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  position: relative;
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y: auto;
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1b1b22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+    .popup {
+      :deep(.van-cell-group) {
+        background-color: #f8f8fb;
+      }
+      :deep(.van-cell) {
+        padding: 0;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+      }
+      .second_cell {
+        color: #fc5a50;
+        margin-bottom: 10px;
+      }
+    }
+    .title-text {
+      padding: 0 0 10px 16px;
+      color: var(--60, #76767a);
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px; /* 150% */
+      height: 42px;
+      line-height: 42px;
+    }
+    .name_last {
+      margin-top: 4px;
+      span {
+        color: var(--60, #76767a);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+  }
+  .footer {
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+    width: 100%;
+    padding: 0 20px;
+  }
+}
+</style>
diff --git a/src/views/contact/chat/groupDetails.vue b/src/views/contact/chat/groupDetails.vue
new file mode 100644
index 0000000..07cad3a
--- /dev/null
+++ b/src/views/contact/chat/groupDetails.vue
@@ -0,0 +1,1089 @@
+<script setup>
+import { ref, onMounted, watchEffect } from "vue";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { showConfirmDialog, showToast } from "vant";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import defaultAvatar from "@/assets/dialog/groupChat.png";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { useMessageStore } from "@/stores/modules/message";
+import { handleImgCdnError } from "@/utils/tools"
+const messageStore = useMessageStore();
+const {
+  storeHistoryMessageList,
+} = storeToRefs(messageStore);
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo, groupChatConfig,groupInfo, appConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const {
+  setGroupId,
+  setGroupSessionInfo,
+  setmyGroupInfo,
+  getMyGroupInfo,
+  setGroupMemberInfo,
+  setGroupInfo
+} = contactStore;
+const { groupId, groupSessionInfo, myGroupInfo, groupMemberInfo,groupInfo:gruopInfoData } = storeToRefs(
+  contactStore
+);
+const $api = inject("$api");
+const router = useRouter();
+const OpenIM = getSDK();
+const detailSetRef = ref(null);
+// useGrade(detailSetRef, 3);
+useGrade(detailSetRef, 3,'',()=>{
+  router.push(`/home/dialogue/groupChat/${groupId.value}`)
+});
+const checkedList = ref({
+  checked1: false,
+  checked2: false,
+  checked3: false,
+  burnButton: 0, // 阅后即焚开关
+  readDeleteTime: 5 // 阅后即焚时间
+});
+const dissolveDialogShow = ref(false);
+const logoutDialogShow = ref(false);
+const actionShow = ref(false);
+const actions = ref([
+  { name: t("csvClearLocal") } // 仅清空本地聊天记录
+]);
+const sessionInfo = ref("");
+const loading = ref(false);
+const userFlag = ref(false)//是否有权限操作群设置的内容
+onMounted(async() => {
+  getMyGroupInfo();
+  getSessionId();
+  if(!userInfo.value.userID)return 
+  const { data } = await OpenIM.getSpecifiedGroupMembersInfo({
+    groupID:groupChatConfig.value.groupID,
+    userIDList: [userInfo.value.userID],
+  });
+  userFlag.value = data&&data[0]?true:false
+});
+const showGroupMap = computed(() => {
+  if (groupChatConfig.value.ex) {
+    return (
+      JSON.parse(groupChatConfig.value.ex || '{}').setGroupMemberHeadUrl?.value === 0
+    );
+  }
+  return false;
+});
+// 判断是否有【解散群聊】按钮权限
+const isPermissionBtnGroupChat = computed(() => {
+  return userInfo.value.groupOwnerPower?.enableDismissGroup===1
+})
+// 根据会话类型获取会话详情
+const getSessionId = () => {
+  let params = {
+    sourceID: "",
+    sessionType: 3
+  };
+  params.sourceID = groupId.value;
+  OpenIM.getOneConversation(params).then(res => {
+    setGroupSessionInfo(res.data);
+    sessionInfo.value = res.data;
+    checkedList.value.checked2 = res.data.isPinned;
+    checkedList.value.checked3 = res.data.recvMsgOpt;
+  });
+};
+const changeSwitch = type => {};
+const deleteaAtionClick = () => {
+  if (
+    myGroupInfo.value.roleLevel === 100 ||
+    (myGroupInfo.value.roleLevel === 60 &&
+      JSON.parse(myGroupInfo.value.ex).hasDeleteGroupMemberMessagePermission ==
+        1)
+  ) {
+    actions.value = [
+      { name: t("csvClearLocal") },
+      { name: t("gsvDeleteAllMsg"), color: "#ee0a24" }
+    ]; // 清空本地和所有成员的聊天记录
+  }
+  actionShow.value = true;
+};
+const actionSelect = async (action, index) => {
+  console.log(action, index);
+  if (index === 0) {
+    OpenIM.clearConversationAndDeleteAllMsg(
+      sessionInfo.value.conversationID
+    ).then(res => {
+      console.log(res, "res");
+      showToast({ message: t("clearSuccessfully"), position: "top" });
+    });
+  } else if (index === 1) {
+    const res = await $api.contact.deleteConversationMsgApi({
+      conversationID: sessionInfo.value.conversationID,
+      senderPlatformID: 2,
+      senderNickname: myGroupInfo.value.nickname
+    });
+    if (res.code === 0) {
+      getHistoryMsgList();
+    }
+  }
+};
+// 清空本地和所有成员的聊天记录
+let hisLastMinSeq = 0;
+let hisConversationID = "";
+let hisStartClientMsgID = "";
+let hisArr = [];
+const hisLock = ref(false);
+const getHistoryMsgList = async () => {
+  if (hisLock.value) return;
+
+  let params = {
+    lastMinSeq: hisLastMinSeq, //lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传 number
+
+    count: 3, // 一次拉取的数量
+
+    startClientMsgID: hisStartClientMsgID, // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+
+    conversationID: sessionInfo.value.conversationID // 会话 ID
+  };
+  const re = await OpenIM.getAdvancedHistoryMessageList(params);
+
+  if (re.data.messageList && re.data.messageList.length > 0) {
+    hisArr = [...hisArr, ...re.data.messageList];
+
+    hisLastMinSeq = re.data?.lastMinSeq || 0;
+    hisStartClientMsgID = re.data.messageList[0]?.clientMsgID || "";
+    console.log("清空聊天记录3333", hisArr);
+    getHistoryMsgList();
+  } else {
+    hisLock.value = true;
+    showToast({ message: t("clearSuccessfully"), position: "top" });
+  }
+};
+
+const trueDel = () => {
+  hisArr.forEach(async item => {
+    if (
+      item.contentType === 110 &&
+      item.customElem?.data?.customType === 1001
+    ) {
+      return;
+    }
+    OpenIM.deleteMessage({
+      conversationID: sessionInfo.value.conversationID,
+      clientMsgID: item.clientMsgID
+    });
+  });
+};
+
+// 清空本地和所有成员的聊天记录
+
+const handleClickItem = (type, query) => {
+  switch (type) {
+    case "editNameAvatar":
+      if (groupChatConfig.value.status == 2) return;
+      if (
+        myGroupInfo.value.roleLevel === 100 ||
+        (myGroupInfo.value.roleLevel === 60 &&
+          JSON.parse(myGroupInfo.value.ex).hasEditGroupNamePermission.value ==
+            1)
+      ) {
+        router.push({ path: `/home/contact/groupDetails/${type}`, query });
+      }
+      break;
+    case "groupNotice":
+      //如果设置了群公告,任何人都可以查看
+      if(groupChatConfig.value.notification)return router.push({ path: `/home/contact/groupDetails/${type}`, query });
+      if (
+        myGroupInfo.value.roleLevel === 100 || (myGroupInfo.value.roleLevel === 60 &&
+        hasEditGroupNotificationPermissionValue.value === 1)
+      ) {
+        router.push({ path: `/home/contact/groupDetails/${type}`, query });
+      } else {
+        showToast({ message: t("gsvNoNotification"), position: "top" });
+      }
+      break;
+    default:
+      router.push({ path: `/home/contact/groupDetails/${type}`, query });
+  }
+};
+const handleClickItems = (type, query) => {
+  router.push({ path: `/home/contact/groupDetails/${type}`, query });
+};
+
+// 管理员解散群聊
+const submitDissolve = () => {
+  let id = groupId.value;
+  OpenIM.dismissGroup(id).then(res => {
+    setGroupMemberInfo({
+      ...groupMemberInfo.value,
+      [id]: []
+    })
+    router.push("/home/dialogue");
+  });
+};
+// 普通用户退出群聊
+const submitLogout = () => {
+  let id = groupId.value;
+  OpenIM.quitGroup(id).then(async (res) => {
+    // 退出群聊后，将群聊的草稿置为空
+    await OpenIM.setConversationDraft({
+      conversationID: sessionInfo.value.conversationID,
+      draftText: '',
+    });
+    // 设置此群聊人员为空 为判断聊天框的退出群聊
+    setGroupMemberInfo({
+        ...groupMemberInfo.value,
+        [groupId.value]: []
+       })
+    router.push("/home/dialogue");
+  });
+};
+// 置顶
+const pinnedClick = async () => {
+  const params = {
+    conversationID: groupChatConfig.value.conversationID,
+    isPinned: checkedList.value.checked2
+  };
+  await OpenIM.pinConversation(params);
+};
+// 设置会话免打扰状态
+const setNodisturbing = async () => {
+  const params = {
+    conversationID: groupChatConfig.value.conversationID,
+    opt: checkedList.value.checked3 ? 1 : 0
+  };
+  await OpenIM.setConversationRecvMessageOpt(params);
+};
+// 删除解散 / 已退出 的群聊
+const deleteGroupClick = () => {
+  // 从本地和服务器删除指定会话及会话中的消息
+  OpenIM.deleteConversationAndDeleteAllMsg(
+    groupChatConfig.value.conversationID
+  ).then(res => {
+    console.log(res);
+    router.push("/home/dialogue");
+  });
+};
+// 判断自己是否在群聊中
+const isInGroupchat = computed(() => {
+  // if (
+  //   Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) &&
+  //   groupMemberInfo.value[groupChatConfig.value.groupID].length > 0
+  // ) {
+  //   return true;
+  // } else {
+  //   return false;
+  // }
+  
+  return userFlag.value
+});
+// 判断是否有修改群公告权限
+const hasEditGroupNotificationPermissionValue = computed(() => {
+  // if (
+  //   Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) &&
+  //   groupMemberInfo.value[groupChatConfig.value.groupID].length > 0
+  // ) {
+  //   let ex = groupMemberInfo.value[groupChatConfig.value.groupID].filter(
+  //     d => d.userID === userInfo.value.userID
+  //   )[0]?.ex;
+  //   if (ex && ex !== "") {
+  //     return JSON.parse(ex).hasEditGroupNotificationPermission.value;
+  //   } else {
+  //     return 0;
+  //   }
+  // }
+
+  if (isInGroupchat) {
+    let ex = groupMemberInfo.value[groupChatConfig.value.groupID].filter(
+      d => d.userID === userInfo.value.userID
+    )[0]?.ex;
+    if (ex && ex !== "") {
+      return JSON.parse(ex).hasEditGroupNotificationPermission.value;
+    } else {
+      return 0;
+    }
+  }
+});
+const showBurning = ref(false);
+const incinerationStatus = ref(1);
+
+// 消息焚烧时长列表
+let burningTimeList = ref([]);
+// 时间转换
+const getCompleteTime = time => {
+  const timer = time / 60;
+  if (timer < 1) {
+    return time + t("seconds");
+  } else if (timer >= 1 && timer < 60) {
+    return Math.ceil(timer) + t("minute");
+  }
+  if (timer >= 60) {
+    return Math.ceil(timer / 60) + t("hourOut");
+  }
+};
+
+let selectTime = ref({});
+const onReadTime = t => {
+  selectTime.value.time = t;
+  showBurning.value = true;
+};
+// 选择时长
+const onSelectTime = item => {
+  selectTime.value.time = item.time;
+};
+
+// 保存焚烧时长选择
+let saveLoading = ref(false);
+const onSaveBurning = async () => {
+  if (saveLoading.value) return;
+  saveLoading.value = true;
+  try {
+    onAfterRead();
+  } catch {
+  } finally {
+    showBurning.value = false;
+    saveLoading.value = false;
+  }
+};
+
+const onAfterRead = async () => {
+  let e = {
+    ...ex.value,
+    burnButton: checkedList.value.burnButton,
+    readDeleteTime: selectTime.value.time
+      ? selectTime.value.time
+      : ex.value.readDeleteTime
+  };
+  let data = {
+    ex: JSON.stringify(e),
+    device_id: useUid,
+    platform: 5,
+    is_send: true,
+    conversation: sessionInfo.value.conversationID
+  };
+  const res = await $api.contact.setConversationBurnAfterReading(data);
+  if (res.code !== 0) return;
+  checkedList.value.readDeleteTime = selectTime.value.time;
+};
+// 监听数据
+watch(
+  () => storeHistoryMessageList.value,
+  (newVal, oldVal) => {
+    console.log('groupDetails.vue--------群聊消息:', newVal)
+    //判断是否有群公告,如果有群公告,取最新一条展示
+    const notificationList = newVal.filter(item => item.contentType===1519)
+    if(notificationList&&notificationList.length>0){
+      const {group} = JSON.parse(notificationList[notificationList.length-1]?.notificationElem?.detail||'{}')
+      if(group){
+        groupChatConfig.value.notification = group.notification
+      }
+
+    }
+  },
+  { deep: true }
+);
+
+// 聊天记录保存时间
+const showChatRecordTime = ref(false); // 聊天记录保存时间弹窗开关
+let chatRecordTimeConfig = ref({
+  msgDestructTime: 0, // 设置删除时间
+  lastMsgDestructTimeNote: 0, // 上次删除节点
+});
+const msgDestructTime = ref(0) // 当前选择的时间
+const chatRecordTimeData = ref([]) // 聊天记录保存时间列表
+
+// 打开聊天记录保存时间弹窗
+const onChaRecordTimeSheet = t => {
+  if(!isMsgDestructTime.value) return
+  msgDestructTime.value = t;
+  showChatRecordTime.value = true;
+};
+// 选择聊天记录保存时间
+const onSelectChaRecordTime = t => {
+  msgDestructTime.value = t.time;
+};
+// 保存聊天记录保留时间选择
+const onSaveChatRecordTime = async () => {
+  if (saveLoading.value) return;
+  saveLoading.value = true;
+  showConfirmDialog({
+    title: t('dialog_tip1'),
+    message: t('selectMsgDeleteTimeTip'),
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+  }).then(async (res) => {
+    // 设置群扩展字段消息 定时删除时间
+    const params = {
+      groupId: groupId.value,
+      msgDestructTime: msgDestructTime.value
+    };
+   const resData = await $api.contact.setGroupInfoEx(params);
+    showToast(t("saveSuccessfully"));
+    showChatRecordTime.value = false;
+    saveLoading.value = false;
+  }).catch((err) => {
+    showChatRecordTime.value = false;
+    saveLoading.value = false;
+  })
+};
+const onTimeFormatter = (time) => {
+  return time ? (time / (24 * 60 * 60)) + t("day") : t("forever")
+}
+let exData = ref({})
+let isMsgDestructTime = ref(true)
+watchEffect(() => {
+  exData.value = gruopInfoData.value.ex ? JSON.parse(gruopInfoData.value.ex) : {};
+  let myGroupInfoEx = myGroupInfo.value.ex ? JSON.parse(myGroupInfo.value.ex) : {};
+  // 群主及管理员聊天记录保留时间设置入口控制
+  if(gruopInfoData.value.groupID === myGroupInfo.value.groupID){
+    if(myGroupInfo.value.roleLevel === 100 || myGroupInfoEx?.hasSetSaveMsgTimePermission?.value === 1){
+      isMsgDestructTime.value = true
+    } else {
+      isMsgDestructTime.value = false
+    }
+  }
+  // 聊天记录保留时间后台配置选项
+  let rules = appConfig.value?.msg_subsist_rules?.rule || [
+  {
+    time: 0
+  }
+];
+  chatRecordTimeData.value = rules.sort((a, b) => a.time - b.time)
+  // 聊天记录保留时间
+  // 扩展字段-定时删除时间-单位：秒  设置删除时间
+  chatRecordTimeConfig.value.msgDestructTime = exData.value?.msgDestructTime || 0
+  // 扩展字段-定时删除时间-单位：秒  上次删除时间点
+  chatRecordTimeConfig.value.lastMsgDestructTimeNote = exData.value?.lastMsgDestructTimeNote || 0
+})
+watchEffect(() => {
+  if (!hisLock.value) return;
+  trueDel();
+  hisLock.value = false;
+  hisLastMinSeq = 0;
+  hisStartClientMsgID = "";
+});
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <div style="flex: 1;position: relative; height: 100%;">
+      <AppNavBar
+        :title="$t('gsvTitle')"
+        left-arrow
+        views_grade="thirdly_view"
+        @click-left="router.push(`/home/dialogue/groupChat/${groupId}`)"
+      >
+      </AppNavBar>
+      <div class="detailSet-wrap">
+        <van-loading v-if="loading" />
+        <div v-else>
+          <div class="detailSet-content">
+            <van-cell-group :border="true">
+              <van-cell
+                :border="false"
+                class="avatar-cell"
+                is-link
+                @click="handleClickItem('editNameAvatar', { type: 'group' })"
+                style="height:84px"
+              >
+                <template #title>
+                  <van-image
+                    class="avatar-img"
+                    round
+                    width="50"
+                    height="50"
+                    :src="groupChatConfig.faceURL || defaultAvatar"
+                    :show-error="false"
+                    fit="cover"
+                    @error="e => handleImgCdnError(e, groupChatConfig, 'faceURL')"
+                  />
+                  <span class="custom-title">{{
+                    groupChatConfig.groupName
+                  }}</span>
+                </template>
+                <template #right-icon>
+                  <img
+                    v-if="
+                      myGroupInfo.roleLevel === 100 ||
+                        (myGroupInfo.roleLevel === 60 &&
+                          JSON.parse(myGroupInfo.ex)
+                            .hasEditGroupNamePermission == 1)
+                    "
+                    class="notice-value-link"
+                    src="@/assets/right-small2.svg"
+                    alt=""
+                  />
+                </template>
+              </van-cell>
+              <van-cell
+                class="mb"
+                :border="false"
+                is-link
+                :title="$t('gsvGroupId')"
+              >
+                <template #title>
+                  <span class="custom-title">{{ $t("gsvGroupId") }}</span>
+                </template>
+                <template #right-icon>
+                  <span class="custom-title">{{
+                    groupChatConfig.groupID
+                  }}</span>
+                </template>
+              </van-cell>
+              <div v-if="groupChatConfig.status !== 2 && isInGroupchat">
+                <van-cell
+                  is-link
+                  :title="$t('gsvGroupMember')"
+                  @click="handleClickItem('groupchatMember')"
+                >
+                  <template #title>
+                    <span class="custom-title">{{ $t("gsvGroupMember") }}</span>
+                  </template>
+                  <template #right-icon>
+                    <span class="right-text">{{
+                      $t("cvUserCount", { count: groupChatConfig.memberCount })
+                    }}</span>
+                    <img
+                      class="notice-value-link"
+                      src="@/assets/right-small2.svg"
+                      alt=""
+                    />
+                  </template>
+                </van-cell>
+                <van-cell
+                  :class="{ 'notice-cell': groupChatConfig?.notification }"
+                  is-link
+                  :title="$t('groupAc')"
+                  @click="handleClickItem('groupNotice')"
+                >
+                  <template #title>
+                    <span class="custom-title">{{ $t("groupAc") }}</span>
+                  </template>
+                  <template #label>
+                    <!-- 群详情页设置群公告 -->
+                    <span>{{ groupChatConfig?.notification }}</span>
+                  </template>
+                  <template #value>
+                    <span class="right-text">{{
+                      (userInfo.isGroupAdmin || userInfo.isGroupOwner) &&
+                      !groupChatConfig.notification
+                        ? $t("gmsvToSet")
+                        : ""
+                    }}</span>
+                  </template>
+                </van-cell>
+                <van-cell
+                  v-if="showGroupMap"
+                  @click="
+                    handleClickItems('editNameAvatar', { type: 'myself' })
+                  "
+                  :border="false"
+                  is-link
+                  :title="$t('groupMask')"
+                >
+                  <template #title>
+                    <span class="custom-title">{{ $t("groupMask") }}</span>
+                  </template>
+                  <template #right-icon>
+                    <span class="right-text">{{
+                      $t("groupMaskDescription")
+                    }}</span>
+                  </template>
+                </van-cell>
+                <van-cell
+                  v-if="
+                    myGroupInfo.roleLevel === 100 ||
+                      myGroupInfo.roleLevel === 60
+                  "
+                  is-link
+                  :title="$t('gmsvTitle')"
+                  @click="handleClickItem('manageGrounp')"
+                >
+                  <template #title>
+                    <span class="custom-title">{{ $t("gmsvTitle") }}</span>
+                  </template>
+                  <template #right-icon>
+                    <img
+                      class="notice-value-link"
+                      src="@/assets/right-small2.svg"
+                      alt=""
+                    />
+                  </template>
+                </van-cell>
+                <van-cell
+                  is-link
+                  :title="$t('gmsvFindMsg')"
+                  @click="
+                    router.push('/home/contact/groupDetails/groupChatLogs')
+                  "
+                >
+                  <template #title>
+                    <span class="custom-title">{{ $t("gmsvFindMsg") }}</span>
+                  </template>
+                </van-cell>
+                <van-cell is-link :title="$t('top')" @click="pinnedClick">
+                  <template #title>
+                    <span class="custom-title">{{ $t("top") }}</span>
+                  </template>
+                  <template #right-icon>
+                    <van-switch
+                      v-model="checkedList.checked2"
+                      size="16px"
+                      @change="changeSwitch('pinned')"
+                    />
+                  </template>
+                </van-cell>
+                <van-cell
+                  class="mb"
+                  is-link
+                  :title="$t('messageNotDisturb')"
+                  @click="setNodisturbing"
+                >
+                  <template #title>
+                    <span class="custom-title">{{
+                      $t("messageNotDisturb")
+                    }}</span>
+                  </template>
+                  <template #right-icon>
+                    <van-switch
+                      v-model="checkedList.checked3"
+                      :active-value="1"
+                      :inactive-value="0"
+                      size="16px"
+                      @change="changeSwitch('noDisturbing')"
+                    />
+                  </template>
+                </van-cell>
+                <van-cell
+                  :title="$t('readDeleteTime')"
+                  @click="onChaRecordTimeSheet(chatRecordTimeConfig.msgDestructTime)"
+                >
+                  <template #title>
+                    <div class="chat-title">
+                      <div class="custom-title">{{ $t("msgSaveTime") }}</div>
+                      <div class="custom-title chat-tips">{{ $t("msgSaveTimeDesc") }}</div>
+                    </div>
+                  </template>
+                  <template #right-icon>
+                    <span class="read-time" :class="{'text-opacity': !isMsgDestructTime && myGroupInfo.roleLevel == 20}">{{ onTimeFormatter(chatRecordTimeConfig.msgDestructTime) }}</span>
+                    <img
+                      v-if="isMsgDestructTime && myGroupInfo.roleLevel != 20"
+                      style="margin-left: 10px;"
+                      src="@/assets/right-small1.svg"
+                      alt=""
+                    />
+                  </template>
+                </van-cell>
+                <van-cell
+                  class="mb"
+                  is-link
+                  :title="$t('gsvDeleteMsg')"
+                  @click="deleteaAtionClick"
+                >
+                  <template #title>
+                    <span class="custom-title">{{ $t("gsvDeleteMsg") }}</span>
+                  </template>
+                </van-cell>
+                <van-cell
+                  v-if="myGroupInfo.roleLevel === 100 && isPermissionBtnGroupChat"
+                  class="last_cell dissolve-btn"
+                  :title="$t('dismissGroup')"
+                  @click="dissolveDialogShow = true"
+                >
+                  <template #title>
+                    <span class="custom-title last_cell_title">{{
+                      $t("dismissGroup")
+                    }}</span>
+                  </template>
+                </van-cell>
+                <van-cell
+                  v-if="myGroupInfo.roleLevel === 20"
+                  class="last_cell"
+                  :title="$t('exitGroup')"
+                  @click="logoutDialogShow = true"
+                >
+                  <template #title>
+                    <span class="custom-title last_cell_title">{{
+                      $t("exitGroup")
+                    }}</span>
+                  </template>
+                </van-cell>
+              </div>
+            </van-cell-group>
+            <van-action-sheet
+              v-model:show="actionShow"
+              :actions="actions"
+              :cancel-text="$t('cancel')"
+              close-on-click-action
+              @select="actionSelect"
+              class="my-action-sheet"
+            />
+            <van-dialog
+              v-model:show="dissolveDialogShow"
+              :title="$t('gsvGroupDelete')"
+              show-cancel-button
+              @confirm="submitDissolve"
+            >
+              <div class="dialog-text">{{ $t("dismissGroupHint") }}</div>
+            </van-dialog>
+            <van-dialog
+              v-model:show="logoutDialogShow"
+              :title="$t('gsvOutGroup')"
+              show-cancel-button
+              @confirm="submitLogout"
+            >
+              <div class="dialog-text">{{ $t("quitGroupHint") }}</div>
+            </van-dialog>
+          </div>
+          <div
+            v-if="groupChatConfig.status === 2 || !isInGroupchat"
+            class="del_content"
+          >
+            <div class="del_btn" @click="deleteGroupClick">
+              <!-- <van-cell-group :border="true"> -->
+              <van-cell class="last_cell" :title="$t('delete')">
+                <template #title>
+                  <span class="custom-title last_cell_title">{{
+                    $t("delete")
+                  }}</span>
+                </template>
+              </van-cell>
+              <!-- </van-cell-group> -->
+            </div>
+          </div>
+          <!-- 阅后即焚-时间设置 -->
+          <van-action-sheet v-model:show="showBurning">
+            <div class="burning-time">
+              <div class="title">
+                {{ $t("readDeleteTimeTitle") }}
+              </div>
+              <div class="close" @click="showBurning = false">
+                {{ $t("cancel") }}
+              </div>
+              <div class="close save" @click="onSaveBurning">
+                {{ $t("save") }}
+              </div>
+              <div class="content">
+                <div class="srocll">
+                  <div
+                    class="item"
+                    v-for="(item, index) in burningTimeList"
+                    :key="index"
+                    @click="onSelectTime(item)"
+                  >
+                    <div class="item-name">
+                      {{ getCompleteTime(item.time) }}
+                    </div>
+                    <div
+                      class="item-select"
+                      v-if="item.time == selectTime.time"
+                    >
+                      <img src="@/assets/svg/list_hook.svg" alt="" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-action-sheet>
+
+          <!-- 聊天记录保留时间设置 -->
+          <van-action-sheet v-model:show="showChatRecordTime">
+            <div class="burning-time">
+              <div class="title">
+                {{ $t("selectMsgDeleteTime") }}
+              </div>
+              <div class="close" @click="showChatRecordTime = false">
+                {{ $t("cancel") }}
+              </div>
+              <div class="close save" @click="onSaveChatRecordTime">
+                {{ $t("confirm") }}
+              </div>
+              <div class="content">
+                <div class="srocll">
+                  <div
+                    class="item"
+                    v-for="(t, index) in chatRecordTimeData"
+                    :key="index"
+                    @click="onSelectChaRecordTime(t)"
+                  >
+                    <div class="item-name">{{ onTimeFormatter(t.time) }}</div>
+                    <div class="item-select" v-if="t.time == msgDestructTime" >
+                      <img src="@/assets/svg/list_hook.svg" alt="" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-action-sheet>
+        </div>
+      </div>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (max-width: 750px) {
+    .thirdly_view {
+      border-radius: 16px 16px 0 0;
+    }
+    :deep(.van-popup) {
+      position: fixed !important;
+    }
+}
+.detailSet-wrap {
+  // background: #F8F8FB;
+  height: 100%;
+  padding: 56px 0 120px 0;
+  width: 100%;
+  overflow-y: auto;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .van-cell__title {
+        img {
+          // width: 24px;
+          // height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1b1b22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+
+    .avatar {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 0 30px 0;
+
+      img {
+        width: 60px;
+        height: 60px;
+        margin-bottom: 16px;
+      }
+
+      span {
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+
+    :deep(.van-cell-group) {
+      background-color: #f8f8fb;
+    }
+
+    :deep(.van-cell) {
+      padding-right: 16px;
+      height: 60px;
+      line-height: 60px;
+    }
+
+    .last_cell {
+      text-align: center;
+      padding: 0 !important;
+    }
+
+    .last_cell_title {
+      color: #fc5a50 !important;
+    }
+  }
+
+  .del_content {
+    height: calc(100% - 152px);
+    background-color: #fff;
+
+    .del_btn {
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fc5a50;
+
+      .last_cell {
+        text-align: center;
+        padding: 0 !important;
+      }
+
+      .last_cell_title {
+        color: #fc5a50 !important;
+      }
+    }
+  }
+
+  .mb {
+    margin-bottom: 8px;
+  }
+
+  .right-text {
+    color: var(--60, #76767a);
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+}
+
+.dialog-text {
+  padding: 20px 0 24px 0;
+  text-align: center;
+  color: #76767a;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+  /* 150% */
+  letter-spacing: 0.28px;
+}
+
+:deep(.van-dialog__confirm) {
+  color: #fc5a50;
+}
+
+:deep(.van-popup) {
+  position: absolute;
+}
+
+.avatar-cell {
+  :deep(.van-cell__title) {
+    display: flex;
+    align-items: center;
+  }
+
+  .avatar-img {
+    margin-left: 16px;
+  }
+}
+
+:deep(.notice-cell) {
+  min-height: 60px;
+  height: auto !important;
+
+  .van-cell__title {
+    flex: auto;
+
+    .van-cell__label {
+      padding-left: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      margin-bottom: 20px;
+
+      span {
+        // padding-left: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        word-break: break-word;
+        // margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+:deep(.van-loading) {
+  text-align: center;
+  top: calc(50% - 56px);
+}
+.read-time {
+  color: #1b1b2299;
+}
+.text-opacity {
+  opacity: 0.6;
+}
+.burning-time {
+  position: relative;
+
+  .title {
+    text-align: center;
+    padding: 13px 0;
+    font-size: 1rem;
+    color: #1b1b22;
+  }
+
+  .close {
+    top: 16px;
+    left: 16px;
+    position: absolute;
+    font-size: 0.875rem;
+    color: #1b1b2299;
+  }
+  .save {
+    right: 16px;
+    left: auto;
+    color: #538fe1;
+  }
+
+  .content {
+    height: calc(100% - 48px);
+    overflow: hidden;
+    // margin: 0 16px;
+
+    .item {
+      padding: 20px 16px;
+      border-bottom: 1px solid #f2f4f5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-name {
+        font-size: 1rem;
+      }
+      .item-select {
+        line-height: 0;
+      }
+    }
+  }
+}
+.chat-title {
+  .custom-title {
+    display: block !important;
+    line-height: 22px;
+  }
+  .chat-tips {
+    line-height: 18px;
+    color: #76767A !important;
+    font-size: var(--size-12px) !important;
+  }
+}
+
+.scroll-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  /* 显示横向滚动条 */
+  -ms-overflow-style: none;
+  /* 隐藏 IE 浏览器的滚动条 */
+  scrollbar-width: none;
+  /* 隐藏 Firefox 浏览器的滚动条 */
+}
+
+/* 隐藏非 Webkit 浏览器的滚动条 */
+.scroll-wrapper::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/src/views/contact/chat/index.vue b/src/views/contact/chat/index.vue
new file mode 100644
index 0000000..c63d2e9
--- /dev/null
+++ b/src/views/contact/chat/index.vue
@@ -0,0 +1,270 @@
+<script setup>
+import { ref, computed ,watch} from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useRouter } from 'vue-router'
+import { getSDK } from '@/utils/openIM'
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/dialog/plus.svg"
+import { useI18n } from "vue-i18n"
+import axios from 'axios';
+import { storeToRefs } from 'pinia'
+import { uploadFileByOss } from "@/utils/tools"
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { setGroupChatConfig } = userStore
+const $api = inject("$api");
+const OpenIM = getSDK()
+const router = useRouter()
+const chatRef = ref(null)
+useGrade(chatRef, 2)
+const buttonLoading = ref(false)
+const inputVal = ref('')
+const avatarUrl = ref('')
+const handleClick = async () => {
+  buttonLoading.value = true
+  const params = {
+    groupInfo: {
+      groupName: inputVal.value, // 群名称
+      faceURL: avatarUrl.value, //群头像
+      groupType: 2, // 工作群
+      needVerification: 2 // 0	申请需要同意 邀请直接进1	所有人进群需要验证，除了群主管理员邀2	直接进群
+    },
+    // 改成ownerUserID 群主id放的值
+    memberUserIDs: [userInfo.value.userID],
+    ownerUserID: userInfo.value.userID
+  }
+  try {
+    const { data: res } = await OpenIM.createGroup(params)
+    showToast({ position: "top", message: t('cvGroupCreateSuccess') })
+    const { data } = await OpenIM.getOneConversation({
+      sourceID: res.groupID,
+      sessionType: 3
+    })
+    const { data: result } = await $api.msg_privateChat.query_public_userInfo({
+      UserIDs: [userInfo.value.userID],
+    })
+    setGroupChatConfig({
+      ...data,
+      ...res,
+      showCheck: false,
+      type: '',
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      msg: [],
+      isMultipleChoice: false,
+      groupChecked: [],
+      contactChecked: [],
+      chatDataList: [],
+      isGroupAdmin: result[0].isGroupAdmin,
+      isGroupOwner: result[0].isGroupOwner,
+    })
+    // todo 跳转到对话群聊页面
+    router.push({
+      name: 'groupChat',
+      params: { groupID: data.groupID },
+      state: {
+        msg: JSON.stringify({
+          groupID: data.groupID,
+          faceURL: data.faceURL,
+          showName: data.showName,
+          conversationType: data.conversationType,
+          conversationID: data.conversationID
+        })
+      }
+    })
+    buttonLoading.value = false
+  } catch (error) {
+    const { errCode } = error
+    buttonLoading.value = false
+    if (errCode === 100000) {
+      showToast({ position: "top", message: t('groupSizeUpperLimit') })
+      return
+    }
+    if (errCode === 100001) {
+      showToast({ position: "top", message: t('groupNumberToTop') })
+      return
+    }
+    if (errCode === 100002) {
+      showToast({ position: "top", message: t('topUpperLimit') })
+      return
+    }
+    if (errCode === 100003) {
+      showToast({ position: "top", message: t('topMessageRepeate') })
+      return
+    }
+    if (errCode === 100004) {
+      showToast({ position: "top", message: t('userHasReadMessage') })
+      return
+    }
+    showToast({ position: "top", message: t('createFail') })
+  } finally {
+  }
+
+}
+
+const afterRead = async (fileObj) => {
+  // 此时可以自行将文件上传至服务器
+  const file = fileObj.file
+  const { access_url, fileRes } = await uploadFileByOss(file)
+  // const ossData = {
+  //   file_name: file.name,
+  //   content_type: file.type,
+  //   uuid: file.uid,
+  //   file_from: 1
+  // }
+  // const res = await $api.contact.ossPutUrls(ossData)
+  // if (res.code != 0) return
+  // const { access_url, put_url } = res.data;
+  // const headers = {
+  //   'token': window.localStorage.getItem('token'),
+  //   'Content-Type': file.type,
+  //   'operationID': +new Date()
+  // };
+  // const fileRes = await axios({
+  //   method: 'put',
+  //   url: put_url,
+  //   data: file,
+  //   headers: {
+  //     'Content-Type': file.type
+  //   }
+  // });
+  avatarUrl.value = access_url
+}
+/**
+ * 选择头像
+ */
+const handleSelectImg = () =>{
+  router.push({ name: 'editGroupChatAvatarUrl', query: { avatarUrl: avatarUrl.value } })
+}
+
+watch(() => router.currentRoute.value.path,(newValue, oldValue) => {
+  const imgUrl = localStorage.getItem('editGroupChatAvatarUrl')
+  if(imgUrl) {
+    avatarUrl.value = imgUrl
+    localStorage.removeItem('editGroupChatAvatarUrl')
+  }
+},{ immediate: true });
+</script>
+
+<template>
+  <div ref="chatRef" class="chat">
+    <AppNavBar :title="$t('createGroup')" views_grade="secondary_view" @click-left="router.push('/home/contact')" />
+    <div class="chat-wrap">
+      <div class="chat-content">
+        <div class="uploader">
+          <div class="qrcode-ico" @click="handleSelectImg">
+            <div class="img">
+              <cdnSource :defaultUrl="avatarUrl ? avatarUrl : defaultAvatar">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image :src="cdnUrl" round width="70" height="70" />
+                </template>
+              </cdnSource>
+            </div>
+          </div>
+        </div>
+        <div class="center-title">{{ $t('uploadGroupAvatar') }}</div>
+        <div class="title">{{ $t('groupName') }}</div>
+        <van-field maxlength="15" v-model="inputVal" label="" :placeholder="$t('egnpSetGroupName')" clearable />
+        <div class="titles">{{ $t('egnpSetTextDesc') }}</div>
+        <van-button class="b-btn" type="default" :loading="buttonLoading" :disabled="!inputVal" @click="handleClick">{{
+      $t('create') }}</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.chat-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .chat-content {
+    margin-top: 40px;
+    width: 100%;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .uploader {
+      margin-bottom: 10px;
+
+      :deep(.van-uploader) {
+        width: 70px;
+        height: 70px;
+      }
+
+      :deep(.van-uploader__upload) {
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        margin: 0;
+      }
+    }
+
+    .center-title {
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 600;
+      padding: 12px 0;
+      height: 44px;
+      width: 100%;
+      text-align: center;
+      margin-bottom: 8px;
+    }
+
+    .title {
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 600;
+      padding: 12px 0;
+      height: 44px;
+      width: 100%;
+    }
+
+    :deep(.van-cell) {
+      padding: 19px 0;
+      height: 60px;
+      border-bottom: 1px solid #F2F4F5;
+      font-size: 1rem;
+    }
+
+    .titles {
+      color: #76767A;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding: 12px 0;
+      height: 44px;
+      width: 100%;
+      margin-bottom: 200px;
+    }
+
+    .b-btn {
+      background: #1B1B22;
+      width: 335px;
+      height: 52px;
+      padding: 15px 0;
+      border-radius: 14px;
+      color: #FFFFFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      text-align: center;
+    }
+
+    .btn {
+      background: #F6F6F6;
+
+      .txt {
+        color: #D1D1D3;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/chatFriendsList.vue b/src/views/contact/chatFriendsList.vue
new file mode 100644
index 0000000..4e13c13
--- /dev/null
+++ b/src/views/contact/chatFriendsList.vue
@@ -0,0 +1,344 @@
+<script setup>
+import { ref, onMounted, computed, watch, provide } from "vue";
+import { CommonLottie } from "@/components/index.js";
+import { storeToRefs } from "pinia";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { getSDK } from "@/utils/openIM";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const $api = inject("$api");
+const OpenIM = getSDK();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setFriendDetailId } = contactStore;
+const { contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const router = useRouter();
+
+const handleClickItems = ({ userID }) => {
+  setFriendDetailId(userID);
+  router.push({
+    path: "/home/contact/detail",
+    query: {
+      label: "detail",
+      id: userID,
+    },
+  });
+};
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {},
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    // 先判断是否是群组成员
+    if (isMemberFriendIds.value.includes(userID)) return "group";
+    // 如果不是群组成员，则查找是否为群主或管理员
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    }
+    return "";
+  };
+});
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+onMounted(async () => {
+  // console.error("执行了");
+});
+</script>
+<template>
+  <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden">
+    <van-index-anchor :index="source.type" v-if="source.type" />
+    <van-cell
+      :title="source.remark || source.nickname"
+      @click="handleClickItems(source)"
+    >
+      <template #title>
+        <div class="contact-container-wrap" ref="messageContainerRef">
+          <!-- source.online  fix 2024-8-7 改成全局的暂时注释-->
+          <van-badge :dot="isOnLineState(source.userID)" color="#43FA51" :offset="[-3, 3]">
+            <Avatar
+              width="32"
+              height="32"
+              :url="source.faceURL"
+              :name="source.showName"
+              @updateUrl="url => source.faceURL = url"
+            ></Avatar>
+          </van-badge>
+          <CommonLottie
+            v-if="showGroupOwner(source.userID) != ''"
+            :isGroup="showGroupOwner(source.userID)"
+            :width="140"
+            :height="56"
+            :marginLeft="10"
+            :showName="source.showName"
+          ></CommonLottie>
+          <span
+            class="custom-titles"
+            v-else
+          >
+            {{ source.showName }}
+          </span>
+        </div>
+      </template>
+    </van-cell>
+  </div>
+</template>
+<style scoped lang="less">
+.contact-container-wrap {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+:deep(.van-nav-bar__text) {
+  font-weight: 600 !important;
+  color: #1b1b22;
+  font-family: "PingFang SC";
+  font-size: 1.5rem;
+}
+
+:deep(.van-nav-bar__left),
+:deep(.van-nav-bar__right) {
+  padding: 0 16px;
+}
+
+.contact-wrap {
+  padding-top: 56px;
+  height: calc(100vh - 50px);
+  overflow-y: auto;
+  background: #fff;
+  overflow-y: auto;
+  position: relative;
+
+  .search-box {
+    padding: 6px 16px;
+    height: 48px;
+
+    .custom-input {
+      border-radius: 8px;
+      background: #f8f8fb;
+      height: 36px;
+      padding: 8px 12px;
+
+      :deep(.van-field__left-icon) {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        background: url("@/assets/search-icon.svg") no-repeat center / cover;
+
+        .van-icon {
+          font-size: 1.5rem;
+          line-height: 24px;
+        }
+        > i {
+          display: none;
+        }
+      }
+
+      :deep(.van-field__control) {
+        color: #76767a;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        height: 20px;
+      }
+    }
+  }
+
+  /deep/.van-cell {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 60px;
+    line-height: 60px;
+
+    .van-cell__title {
+      .img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        margin-bottom: 6px;
+      }
+
+      .custom-title {
+        padding-left: 16px;
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+
+    .badge-wrapper {
+      display: flex;
+      align-items: center;
+
+      .badge {
+        min-width: 16px;
+        padding: 0 2px;
+        color: #fff;
+        line-height: 16px;
+        text-align: center;
+        background: var(--c-blue-color);
+        border-radius: 50%;
+      }
+    }
+
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .notice-value-links {
+      margin-top: 18px;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .content {
+      margin-right: 8px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .contents {
+      padding-right: 16px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+
+  .contact-item {
+    // padding-left: 16px;
+  }
+
+  .contact-list {
+    .empty-list {
+      margin: 122px auto 0 auto;
+      width: 100px;
+      padding-bottom: 40px;
+      text-align: center;
+      position: relative;
+      cursor: pointer;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+      > p {
+        position: absolute;
+        width: 200px;
+        font-size: var(--size-14px);
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .empty-lists {
+      padding: 0 8px 0 16px;
+      position: relative;
+      height: 100%;
+
+      :deep(.van-index-bar) {
+        height: 100%;
+      }
+
+      :deep(.van-index-bar__index) {
+        font-weight: normal;
+        color: #76767a;
+      }
+
+      @media screen and (min-width: 750px) {
+        :deep(.van-index-bar__sidebar) {
+          left: 332px !important;
+          right: auto !important;
+        }
+      }
+
+      :deep(.van-index-anchor) {
+        padding: 0;
+        line-height: 40px;
+      }
+
+      :deep(.van-cell) {
+        padding: 0;
+        height: 56px;
+        line-height: 56px;
+        align-items: center;
+      }
+
+      :deep(.van-cell__title) {
+        display: flex;
+        align-items: center;
+      }
+
+      .custom-titles {
+        display: inline-block;
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 120px;
+        white-space: nowrap;
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .empty-img {
+    img {
+      width: 100%;
+      height: 8px;
+    }
+  }
+
+  :deep(.van-badge__wrapper) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+:deep(.bind_dialog) {
+  .van-action-sheet__header {
+    padding: 20px 50px;
+    line-height: 30px;
+  }
+}
+
+:deep(.van-cell:after) {
+  border: none;
+}
+</style>
diff --git a/src/views/contact/detail/index.vue b/src/views/contact/detail/index.vue
new file mode 100644
index 0000000..f310b54
--- /dev/null
+++ b/src/views/contact/detail/index.vue
@@ -0,0 +1,368 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import {
+  AppNavBar,
+  CommonLottie,
+  DeleteDialog,
+  ApplyDialog
+} from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from "@/utils/openIM";
+import { getGender } from "@/utils/tools";
+import defaultAvatar from "@/assets/mine-avatar.png";
+import contactMore from "@/assets/contact-more.svg";
+import { storeToRefs } from "pinia";
+import { copyUserId } from "@/utils/tools.js";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import { showToast } from "vant";
+import { burnMsgByClearMsg } from '@/utils/common'
+import { useFriendStore } from '@/stores/modules/membership-info'
+import useConversationStore from "@/stores/modules/conversation";
+
+const conversationStore = useConversationStore()
+const friendState = useFriendStore()
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const detailRef = ref(null);
+useGrade(detailRef, 2);
+const contactStore = useContactStore();
+const { friendDetailId, contactList, allGroupOwnerOrAdmin } = storeToRefs(
+  contactStore
+);
+const { setDetailSearch, updateContact } = contactStore;
+const OpenIM = getSDK();
+const router = useRouter();
+const route = useRoute();
+const $api = inject("$api");
+const applyVisable = ref(false);
+const deleteVisable = ref(false);
+const detailSearch = reactive({
+  nickname: "",
+  remark: "",
+  gender: "",
+  age: "",
+  signature: "",
+  faceURL: "",
+  userId: "",
+  internal_uid: ""
+});
+const getList = async () => {
+  // const res = await OpenIM.getUsersInfo([friendDetailId.value])
+  const index = contactList.value.findIndex(
+    item => item.userID === friendDetailId.value
+  );
+  if (index != -1) {
+    const { nickname, remark, faceURL, userID } = contactList.value[index];
+    detailSearch.nickname = nickname;
+    detailSearch.remark = remark;
+    detailSearch.faceURL = faceURL;
+    detailSearch.userId = userID;
+    setDetailSearch({ ...contactList.value[index], isFriend: true });
+  }
+  const result = await $api.contact.queryInfoByuserId({
+    UserIDs: [friendDetailId.value]
+  });
+  if (result.code != 0) return;
+  if (Array.isArray(result.data.users) && result.data.users.length > 0) {
+    const { gender, age, signature, internal_uid } = result.data.users[0];
+    detailSearch.gender = gender;
+    detailSearch.age = age;
+    detailSearch.signature = signature;
+    detailSearch.internal_uid = internal_uid;
+    setDetailSearch({
+      ...result.data.users[0],
+      ...contactList.value[index],
+      isFriend: true
+    });
+  }
+};
+onMounted(() => {
+  getList();
+});
+const handleSend = () => {
+  router.push(`/home/dialogue/privatechat/${friendDetailId.value}`);
+};
+const handleLeft = () => {
+  if (route.query.label === "detailed") {
+    router.push("/home/contact/group/detailed");
+  } else if (route.query.label === "detail") {
+    router.push("/home/contact");
+  } else if (route.query.label === "details") {
+    router.push("/home/dialogue/chatSetings");
+  } else {
+    router.push("/home/contact");
+  }
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+const handleEdit = () => {
+  applyVisable.value = true;
+};
+const getRemarkList = async val => {
+  // todo 刷新接口
+  const res = await OpenIM.setFriendRemark({
+    toUserID: detailSearch.userId,
+    remark: val
+  });
+  showToast({ message: t("saveSuccessfully") });
+  applyVisable.value = false;
+  detailSearch.remark = val;
+  setDetailSearch({ ...detailSearch, remark: val });
+};
+const getDeleteLists = async () => {
+  const idList = [userInfo.value.userID, detailSearch.userId].sort(
+    (a, b) => a - b
+  ); // id排序 然后拼接生成会话id 小的在前面大的在后面
+  const conversationID = `si_${idList[0]}_${idList[1]}`;
+  // 刪之前清掉焚烧消息
+  await burnMsgByClearMsg(conversationID)
+  // todo 删除接口
+  const { operationID } = await OpenIM.deleteFriend(detailSearch.userId);
+  // 删除会话列表
+  const {
+    operationID: operationID1
+  } = await OpenIM.deleteConversationAndDeleteAllMsg(conversationID);
+  if (operationID && operationID1) {
+    showToast({ message: t("deleteSuccessfully") });
+    deleteVisable.value = false;
+    setDetailSearch({ ...detailSearch, isFriend: false });
+  }
+  // 手动删除会话列表
+  conversationStore.delConversationByCID(conversationID)
+  // 这里跳转联系人列表
+  updateContact(detailSearch, true);
+  router.push("/home/contact");
+};
+</script>
+
+<template>
+  <div ref="detailRef" class="detail">
+    <AppNavBar title="" views_grade="secondary_view" @click-left="handleLeft">
+    </AppNavBar>
+    <div class="detail-wrap">
+      <div class="detail-content">
+        <Avatar
+          width="90"
+          height="90"
+          :url="detailSearch.faceURL"
+          :name="
+            detailSearch.remark ? detailSearch.remark : detailSearch.nickname
+          "
+          @updateUrl="url => detailSearch.faceURL = url"
+        ></Avatar>
+        <div
+          v-if="showGroupOwner(detailSearch.userId) != ''"
+        >
+          <CommonLottie
+            :isGroup="showGroupOwner(detailSearch.userId)"
+            :width="140"
+            :showName="detailSearch.nickname"
+          ></CommonLottie>
+        </div>
+        <div class="title" v-if="showGroupOwner(detailSearch.userId) == ''">
+          {{ detailSearch.nickname }}
+        </div>
+        <div class="remark">
+          <span class="remark-txt">{{ $t("remark") }}:{{ detailSearch.remark ? detailSearch.remark : t('notSet2') }}</span>
+          <img src="@/assets/svg/edit-remark.svg" alt="" @click="handleEdit" />
+        </div>
+        <div
+          class="detail_id"
+          v-if="userInfo.isGroupOwner || userInfo.isGroupAdmin || userInfo.isInternalUser"
+        >
+          <span
+            >{{ $t("userId")
+            }}{{
+              detailSearch.internal_uid
+                ? detailSearch.internal_uid
+                : detailSearch.userId
+            }}</span
+          >
+          <img
+            src="@/assets/svg/fuzhi.svg"
+            alt=""
+            @click="
+              copyUserId(
+                detailSearch.internal_uid
+                  ? detailSearch.internal_uid
+                  : detailSearch.userId
+              )
+            "
+          />
+        </div>
+        <div class="sex-age">
+          {{ getGender(detailSearch.gender) }}
+          {{ detailSearch.age > 0 ? `${detailSearch.age}${$t("age")}` : "" }}
+        </div>
+        <div class="description">
+          {{
+            detailSearch.signature ? detailSearch.signature : $t("mineSigEmpty")
+          }}
+        </div>
+        <div class="btn" @click="handleSend">
+          <p class="txt">{{ $t("sendMessage") }}</p>
+        </div>
+        <div class="delete-btn">
+          <van-button class="btns" type="default" @click="deleteVisable = true">{{ $t('deleteFriend') }}</van-button>
+        </div>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <!-- <RouterView /> -->
+    <ApplyDialog
+      v-model="applyVisable"
+      @getList="getRemarkList"
+      :remark="detailSearch.remark"
+    ></ApplyDialog>
+    <DeleteDialog
+      v-model="deleteVisable"
+      @getList="getDeleteLists"
+    ></DeleteDialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detail-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .detail-content {
+    padding-top: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    // .img {
+    //   width: 90px;
+    //   height: 90px;
+    //   margin: 0 auto 20px auto;
+    // }
+    .title {
+      color: #000;
+      font-family: PingFang SC;
+      font-size: 1.125rem;
+      font-weight: 600;
+      text-align: center;
+      margin: 20px 0 4px 0;
+    }
+
+    .remark {
+      color: #1b1b22;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 18px;
+      text-align: center;
+      margin: 8px;
+      display: flex;
+      align-items: center;
+      .remark-txt {
+        max-width: 326px;
+        text-align: left;
+        word-break: break-all;
+      }
+    }
+
+    .sex-age {
+      margin: 4px 0 20px 0;
+      color: #76767A;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+
+    .detail_id {
+      display: flex;
+      align-items: center;
+
+      span {
+        margin-right: 5px;
+        color: #76767a;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    .remarks {
+      color: #76767a;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 18px;
+      text-align: center;
+    }
+
+    .description {
+      color: #000;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      margin-bottom: 48px;
+    }
+
+    .btn {
+      display: flex;
+      height: 48px;
+      padding: 15px 65px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 12px;
+      background: #131415;
+      cursor: pointer;
+      width: calc(100% - 40px);
+      .txt {
+        color: #fff;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        cursor: pointer;
+        margin: auto;
+      }
+    }
+  }
+}
+.delete-btn {
+  margin-top: 10px;
+  cursor: pointer;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 19px 0;
+  border-radius: 12px;
+  width: calc(100% - 40px);
+  .btns {
+    width: 100%;
+    color: rgba(27, 27, 34, 1);
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 400;
+    border-radius: 12px;
+  }
+}
+</style>
diff --git a/src/views/contact/detail/set.vue b/src/views/contact/detail/set.vue
new file mode 100644
index 0000000..ee3e68c
--- /dev/null
+++ b/src/views/contact/detail/set.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar, DeleteDialog, ApplyDialog } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useRouter } from 'vue-router'
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from '@/utils/openIM'
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore()
+const { detailSearch } = storeToRefs(contactStore)
+const { setDetailSearch, updateContact } = contactStore;
+const OpenIM = getSDK()
+const $api = inject("$api");
+
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 3)
+const applyVisable = ref(false)
+const deleteVisable = ref(false)
+const handleRemark = () => {
+  applyVisable.value = true
+}
+const getList = async(val) => {
+  console.log(1111, val)
+  // todo 刷新接口
+  const res = await OpenIM.setFriendRemark({
+    toUserID: detailSearch.value.userID,
+    remark: val,
+  })
+  showToast({ message: t('saveSuccessfully') })
+  applyVisable.value = false
+  detailSearch.value.remark = val
+  setDetailSearch({ ...detailSearch.value, remark: val })
+}
+const getLists = async () => {
+  const idList = [userInfo.value.userID, detailSearch.value.userID].sort((a, b) => a - b) // id排序 然后拼接生成会话id 小的在前面大的在后面
+  const conversationID = `si_${idList[0]}_${idList[1]}`
+  // todo 删除接口
+  const { operationID } = await OpenIM.deleteFriend(detailSearch.value.userID)
+  // 删除会话列表
+  const { operationID: operationID1 } = await OpenIM.deleteConversationAndDeleteAllMsg(conversationID)
+  if (operationID && operationID1) {
+    showToast({ message: t('deleteSuccessfully') })
+    deleteVisable.value = false
+    setDetailSearch({ ...detailSearch.value, isFriend: false })
+  }
+  // 这里跳转联系人列表
+  router.push('/home/contact')
+  // 这里调用store中的方法
+  updateContact(detailSearch.value, true)
+}
+
+onMounted(() => {
+
+})
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('friendSetup')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/contact/detail')">
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <van-cell-group :border="false">
+          <van-cell :title="$t('remark')" is-link :border="false" @click="handleRemark">
+            <template #title>
+              <span class="custom-title">{{ $t('remark') }}</span>
+            </template>
+            <template #right-icon>
+              <span class="custom-titles">{{ detailSearch.remark }}</span>
+              <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+      <div class="delete-btn" @click="deleteVisable = true">
+        <div class="btn">{{ $t('deleteFriend') }}</div>
+      </div>
+      <ApplyDialog v-model="applyVisable" @getList="getList" :remark="detailSearch.remark"></ApplyDialog>
+      <DeleteDialog v-model="deleteVisable" @getList="getLists"></DeleteDialog>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+
+      .custom-titles {
+        color: #76767A;
+        text-align: right;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        display: inline-block;
+        margin-right: 4px;
+      }
+
+      .notice-value-link {
+        margin-top: 18px;
+        width: 24px;
+        height: 24px;
+        margin-right: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 19px 0;
+    border-top: 1px solid #F2F4F5;
+    border-bottom: 1px solid #F2F4F5;
+
+    .btn {
+      color: #FC5A50;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 400;
+    }
+  }
+
+}
+</style>
diff --git a/src/views/contact/face/index.vue b/src/views/contact/face/index.vue
new file mode 100644
index 0000000..8082110
--- /dev/null
+++ b/src/views/contact/face/index.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue'
+import { AppNavBar, CodeInput } from '@/components/index.js'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const faceAddRef = ref(null)
+useGrade(faceAddRef, 2)
+const inputVal = ref('');
+const showKeyboard = ref(true);
+const handleBack = () => {
+  if (route.query.label) {
+    router.push('/home/contact/add')
+  } else {
+    router.push('/home/contact')
+  }
+}
+const handleCodeChange = (val) => {
+  inputVal.value = val
+  if (val.length === 4) {
+    router.push({
+      path: '/home/contact/face/next',
+      query: {
+        number: inputVal.value
+      }
+    })
+    inputVal.value = ''
+  }
+}
+
+
+</script>
+
+<template>
+  <div ref="faceAddRef" class="faceAdd">
+    <AppNavBar :title="$t('faceToFace')" views_grade="secondary_view">
+      <template #left>
+        <van-icon @click="handleBack"  name="cross" size="18" />
+      </template>
+    </AppNavBar>
+    <div class="faceAdd-wrap">
+      <div class="faceAdd-content">
+        <div class="content">{{ $t('sameKeyAddFriend') }}</div>
+        <CodeInput class="input-num" @change="handleCodeChange" />
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.faceAdd-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 46px;
+
+  .faceAdd-content {
+    margin: 58px auto 0 auto;
+    width: 262.5px;
+
+    .content {
+      margin-bottom: 42px;
+      text-align: center;
+    }
+
+    :deep(.van-password-input) {
+      margin: 0;
+    }
+
+    :deep(.van-password-input__security) {
+      height: 60px;
+
+      li {
+        border-radius: 10px;
+        background: #F2F4F5;
+        width: 52.5px;
+        height: 60px;
+      }
+    }
+  }
+}
+:deep(.validate_label) {
+  .validate_item:last-child {
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/src/views/contact/face/nextStep.vue b/src/views/contact/face/nextStep.vue
new file mode 100644
index 0000000..4fa6bdd
--- /dev/null
+++ b/src/views/contact/face/nextStep.vue
@@ -0,0 +1,396 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import { useUserStore } from "@/stores/user";
+import defaultImg1 from '@/assets/dialog/default1.png'
+import { getGender } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const nextStepRef = ref(null)
+useGrade(nextStepRef, 3)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const numList = ref([])
+const onlyKey = ref('')
+const matchUserInfo = reactive({
+  age: '',
+  faceURL: "",
+  gender: '',
+  nickname: "",
+  userID: "",
+  username: "",
+})
+onMounted(async () => {
+  numList.value = route.query.number.split('')
+  // 匹配输入的值
+  const res = await $api.contact.userBindCode({ code: route.query.number })
+  onlyKey.value = res.data.onlyKey
+  // 每隔1S查询
+  startGetMatchUser()
+})
+const pollingTimer = ref(null)
+// 秘钥计时 5分钟
+const timeOut = 5 * 60 * 1000
+const timeOutTimer = ref(null)
+const addTimeOut = ref(false)
+const startGetMatchUser = () => {
+  getMateUsers()
+  clearInterval(pollingTimer.value)
+  clearTimeout(timeOutTimer.value)
+  pollingTimer.value = setInterval(() => {
+    getMateUsers()
+  }, 1000)
+  timeOutTimer.value = setTimeout(() => {
+    addTimeOut.value = true
+    clearTimeout(timeOutTimer.value)
+  }, timeOut)
+}
+onBeforeUnmount(() => {
+  clearInterval(pollingTimer.value)
+  clearTimeout(timeOutTimer.value)
+})
+const flag = ref(false)
+const addLoading = ref(false)
+const getMateUsers = async () => {
+  if (!numList.value) {
+    return
+  }
+  const res = await $api.contact.getMateUser({ code: route.query.number, onlyKey: onlyKey.value })
+  // 码已失效
+  if (res.code === 6055) {
+    showToast({ position: "top", message: t('codeInvalid') })
+    clearInterval(pollingTimer.value)
+    return
+  }
+  // 码已有匹配
+  if (res.code === 6033) {
+    showToast({ position: "top", message: t('codeInvalid') })
+    clearInterval(pollingTimer.value)
+    return
+  } else if (res.code === 1004) {
+    showToast({ position: "top", message: t('error_6054') })
+    clearInterval(pollingTimer.value)
+    router.push('/home/contact')
+    return
+  } else if (res.code === 6055) {
+    showToast({ position: "top", message: res.msg })
+    return
+  } else if (res.code === 6054) {
+    showToast({ position: "top", message: t('error_6054') })
+    clearInterval(pollingTimer.value)
+    router.push('/home/contact')
+    return
+  }
+  if (res.data) {
+    flag.value = true
+    const { age, faceURL, gender, nickname, userID, username } = res.data
+    matchUserInfo.age = age
+    matchUserInfo.faceURL = faceURL
+    matchUserInfo.gender = gender
+    matchUserInfo.nickname = nickname
+    matchUserInfo.userID = userID
+    matchUserInfo.username = username
+  }
+}
+const checkPreAdd = async () => {
+  const res = await $api.contact.checkFriendTotal()
+  if (res.code === 6034) {
+    showToast({ position: "top", message: t('friendNumberCatchTopLimit') })
+    return false
+  }
+  if (res.code === 6035) {
+    showToast({ position: "top", message: t('error_6035') })
+    return false
+  }
+  return true
+}
+const handleClick = async () => {
+  if(!flag.value) return
+  // 超时需要重新发起提示
+  if (addTimeOut.value) {
+    showToast({ position: "top", message: t('codeInvalid') })
+    return
+  }
+  // loading判断
+  if (addLoading.value) return
+  addLoading.value = true
+  const friNumLimit = await checkPreAdd()
+  if (!friNumLimit) {
+    addLoading.value = false
+    return
+  }
+  // 添加好友
+  const res = await $api.contact.addFaceFriend({
+    code: route.query.number,
+    reason: `${t('iAm')}${userInfo.value.nickname}`,
+    userId: matchUserInfo.userID,
+  })
+  // 已经是好友的情况
+  if (res.code === 6054) {
+    showToast({ position: "top", message: t('error_6054') })
+    addLoading.value = false
+    router.push('/home/contact')
+    return
+  }
+  // 已经是好友的情况
+  if (res.code === 6055) {
+    showToast({ position: "top", message: t('codeInvalid') })
+    addLoading.value = false
+    router.push('/home/contact/face')
+    return
+  }
+  // 这里自动帮对方同意
+  const confirmRes = await $api.contact.applyFriend({
+    code: route.query.number,
+    handleMsg: '',
+    // 1=>同意，-1拒绝
+    handleResult: 1,
+    onlyKey: onlyKey.value,
+    toUserID: matchUserInfo.userID,
+  })
+  if (confirmRes.code === 1001) {
+    showToast({ position: "top", message: '已存在该关系' })
+    addLoading.value = false
+    return
+  }
+  addLoading.value = false
+  showToast({ position: "top", message: t('addSuccessfully') })
+  router.push('/home/contact')
+
+}
+const handleLeft = async () => {
+  const res = await $api.contact.deleteMateCode({ code: route.query.number })
+  router.push('/home/contact')
+}
+</script>
+
+<template>
+  <div ref="nextStepRef" class="nextStep">
+    <AppNavBar :title="$t('faceToFace')" views_grade="thirdly_view">
+      <template #left>
+        <van-icon @click="handleLeft"  name="cross" size="18" />
+      </template>
+    </AppNavBar>
+    <div class="nextStep-wrap">
+      <div class="nextStep-content">
+        <div class="num-wrap">
+          <div class="num-item" v-for="(item, index) in numList" :key="index">{{ item }}</div>
+        </div>
+        <div class="title">{{ $t('inputSameKey') }}</div>
+        <div class="contact-list">
+          <div class="contact-left">
+            <Avatar width="60" height="60" :url="userInfo.faceURL" :name="userInfo.nickname" @updateUrl="url => userInfo.faceURL = url"></Avatar>
+            <div class="txt">{{ $t('self') }}</div>
+            <div class="sex-age">{{ getGender(userInfo.gender) }} {{ userInfo.age > 0 ? `${userInfo.age}${$t('age')}` : '' }}</div>
+          </div>
+          <div class="contact-rights" :class="{
+            'real-img': flag
+          }">
+            <img v-if="!flag" class="img" :src="defaultImg1" alt="">
+            <Avatar v-if="flag" width="60" height="60" :url="matchUserInfo.faceURL" :name="matchUserInfo.nickname" @updateUrl="url => matchUserInfo.faceURL = url"></Avatar>
+            <div class="txt">{{
+              matchUserInfo.nickname ? matchUserInfo.nickname : $t('waitOtherEnter')
+            }}</div>
+            <div class="sex-age">{{ getGender(matchUserInfo.gender) }} {{ matchUserInfo.age > 0 ? `${matchUserInfo.age}${$t('age')}` : '' }}</div>
+          </div>
+        </div>
+        <div class="b-btn" @click="handleClick" :class="{
+            'btn': !flag
+          }">
+          <div class="txt">{{ $t('confirmAddFriend') }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.nextStep-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .nextStep-content {
+    height: 100%;
+    overflow-y: auto;
+
+    .num-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 12px 0;
+
+      .num-item {
+        margin-right: 24px;
+        color: #0095F6;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 2.1875rem;
+        font-weight: 600;
+        height: 50px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .title {
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      padding-bottom: 15px;
+      text-align: center;
+      border-bottom: 0.48px solid #E5E5E5;
+    }
+
+    .contact-list {
+      padding: 30px 16px 0 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 200px;
+
+      .contact-left {
+        margin-right: 15px;
+        width: 164px;
+        height: 150px;
+        border-radius: 12px;
+        border: 1px solid #F2F4F5;
+        background: #FFF;
+        padding: 21px 0 24px 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        // .img {
+        //   width: 60px;
+        //   height: 60px;
+        //   border-radius: 55px;
+        //   margin-bottom: 8px;
+        // }
+
+        .txt {
+          color: #000;
+          text-align: center;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 600;
+          margin-top: 8px;
+        }
+        .sex-age {
+          color: #76767A;
+          text-align: center;
+          font-family: "PingFang SC";
+          font-size: 0.75rem;
+          font-weight: 400;
+        }
+      }
+
+      .contact-right {
+        width: 164px;
+        height: 150px;
+        border-radius: 12px;
+        border: 1px solid #F2F4F5;
+        background: #FFF;
+        padding: 21px 0 24px 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        .img {
+          width: 60px;
+          height: 60px;
+          border-radius: 55px;
+          margin-bottom: 8px;
+        }
+
+        .txt {
+          color: #000;
+          text-align: center;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 600;
+          margin-top: 8px;
+        }
+      }
+
+      .contact-rights {
+        width: 164px;
+        height: 150px;
+        border-radius: 12px;
+        border: 1px solid #F2F4F5;
+        background: #FFF;
+        padding: 62px 0 24px 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        .img {
+          width: 34px;
+          height: 6px;
+          margin-bottom: 41px;
+        }
+
+        .txt {
+          color: #76767A;
+          text-align: center;
+          font-family: PingFang SC;
+          font-size: 0.75rem;
+          font-weight: 400;
+          margin-top: 8px;
+        }
+      }
+
+      .real-img {
+        padding: 21px 0 24px 0;
+
+        .img {
+          width: 60px;
+          height: 60px;
+          border-radius: 55px;
+          margin-bottom: 8px;
+        }
+      }
+    }
+
+    .b-btn {
+      background: #1B1B22;
+      width: 335px;
+      height: 52px;
+      padding: 15px 0;
+      border-radius: 14px;
+      cursor: pointer;
+      margin: 0 auto;
+      box-sizing: border-box;
+
+      .txt {
+        color: #FFFFFF;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 500;
+        text-align: center;
+        // fix :【IM-H5】点击面对面加好友，确认加为好友按钮位置错误2024-8-17
+        // margin-top: 8px;
+      }
+    }
+
+    .btn {
+      background: #F6F6F6;
+
+      .txt {
+        color: #D1D1D3;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/group/details.vue b/src/views/contact/group/details.vue
new file mode 100644
index 0000000..75f3082
--- /dev/null
+++ b/src/views/contact/group/details.vue
@@ -0,0 +1,396 @@
+<script setup>
+import { ref, onMounted, nextTick, watch, inject } from 'vue'
+import { AppNavBar, DeleteDialog, GroupDialog, EmptyData, CommonLottie } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM'
+import { filterCity } from '@/utils/tools'
+import { useContactStore } from "@/stores/contact";
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { friendGroupId, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setIsFriendList, setFriendDetailId } = contactStore;
+const OpenIM = getSDK()
+const groupDetailsRef = ref(null)
+useGrade(groupDetailsRef, 3)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const dialogVisable = ref(false)
+const deleteVisable = ref(false)
+const searchVal = ref('')
+const dataList = ref([])
+const searchFlag = ref(false)
+const dataArr = ref([])
+const searchList = ref([])
+const resultList = ref([])
+const indexList = ref([])
+const indexList1 = ref([])
+const isCheckedNum = ref(500) // 还能添加多少人 上限
+const detailObj = reactive({
+  visable: false,
+  inputVal: '',
+  id: '',
+  type: '',
+  member_total: 0
+})
+const dialogList = [
+  {
+    name: t('modifyGroupName'),
+    id: 1
+  },
+  {
+    name: t('deleteGround'),
+    id: 2
+  }
+]
+
+const getList = async () => {
+  const res = await $api.contact.getFriendsGroupList()
+  if (res.code != 0) return
+  const obj = {}
+  res.data.forEach((item) => {
+    obj[item.id] = item
+  })
+  if (friendGroupId.value) {
+    detailObj.inputVal = obj[friendGroupId.value]['group_name']
+    detailObj.id = obj[friendGroupId.value]['id']
+    detailObj.member_total = obj[friendGroupId.value]['member_total']
+  }
+  //获取好友列表
+  if (detailObj.member_total > 0) {
+    try {
+      const { data } = await OpenIM.getFriendList()
+      const list = data.map((item) => item.friendInfo)
+      list.forEach((item) => {
+        item.showName = item.remark !== '' ? item.remark : item.nickname
+        item.checked = false
+      })
+      getFriendList(list)
+    } catch (error) {
+      console.log(error)
+    }
+  } else {
+    setIsFriendList({ [friendGroupId.value]: [] })
+  }
+}
+const getFriendList = async (list) => {
+  const res = await $api.contact.getFriendsGroupListById({ friends_group_id: friendGroupId.value * 1 })
+  if (res.code != 0) return
+  isCheckedNum.value = res.data ? (isCheckedNum.value - res.data.friend_ids.length) : 500
+  const arr = list.filter((item) => {
+    return res.data && res.data.friend_ids.includes(item.userID)
+  })
+  dataArr.value = arr
+  setIsFriendList({ [friendGroupId.value]: arr })
+  dataList.value = filterCity(arr)
+}
+onMounted(() => {
+  getList()
+})
+
+const clickFn = (val) => {
+  setFriendDetailId(val.userID)
+  router.push({
+    path: '/home/contact/detail',
+    query: {
+      label: 'detailed'
+    }
+  })
+}
+const handleClick = (val) => {
+  if (val === 1) {
+    detailObj.type = 'edit'
+    detailObj.visable = true
+  } else if (val === 2) {
+    deleteVisable.value = true
+  }
+  dialogVisable.value = false
+}
+
+const getLists = async () => {
+  const res = await $api.contact.deleteFriendsGroup({ id: detailObj.id })
+  if (res.code != 0) return
+  deleteVisable.value = false
+  getList()
+  router.push({
+    path: '/home/contact/group'
+  })
+}
+
+const handleSubmit = async ({ inputVal, id, type }) => {
+  const res = await $api.contact.updateFriendsGroup({ group_name: inputVal, id: id })
+  if (res.code != 0) return
+  detailObj.inputVal = ''
+  detailObj.id = ''
+  detailObj.type = ''
+  detailObj.visable = false
+  getList()
+}
+
+const handleSearch = () => {
+  // 这里搜索群
+  searchList.value = []
+  if (searchVal.value) {
+    dataArr.value.forEach((item) => {
+      if (item.showName.toUpperCase().includes(searchVal.value.toUpperCase())) {
+        searchList.value.push(item);
+      }
+    })
+    resultList.value = filterCity(searchList.value)
+    searchFlag.value = true
+  }
+}
+
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') {
+    searchFlag.value = false
+    searchList.value = []
+    resultList.value = []
+  }
+})
+
+const handleClickItem = (type) => {
+  if(type === 'groupAdd') {
+    console.log('dataArr.value',dataArr.value);
+    if(dataArr.value.length >= 500) {
+      showToast({ position: "top", message: t('group_limit500') })
+      return
+    }
+  }
+  router.push(`/home/contact/group/detailed/${type}?isCheckedNum=${isCheckedNum.value}`)
+}
+watch(() => dataList.value, (newValue, oldValue) => {
+  // 在这里可以执行相应的操作
+  indexList.value = dataList.value.map(item => item.type)
+}, { immediate: true });
+watch(() => resultList.value, (newValue, oldValue) => {
+  // 在这里可以执行相应的操作
+  indexList1.value = resultList.value.map(item => item.type)
+}, { immediate: true });
+
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+</script>
+
+<template>
+  <div ref="groupDetailsRef" class="groupDetails">
+    <div style="flex: 1; position: relative;height: 100%;">
+      <AppNavBar :title="detailObj.inputVal" left-arrow views_grade="thirdly_view"
+        @click-left="router.push('/home/contact/group')">
+        <template #right>
+          <van-popover class="contact-dialog" placement="bottom-end" v-model:show="dialogVisable" :actions="dialogList">
+            <div class="item-small" @click="handleClick(1)">
+              <div class="txt">{{ $t('modifyGroupName') }}</div>
+            </div>
+            <div class="item-small" @click="handleClick(2)">
+              <div class="txt txt-red">{{ $t('deleteGround') }}</div>
+            </div>
+            <template #reference>
+              <img src="@/assets/contact-more.svg" alt="" />
+            </template>
+          </van-popover>
+        </template>
+      </AppNavBar>
+      <div class="groupDetails-wrap">
+        <div class="groupDetails-content" style="overflow: hidden;;" v-if="detailObj.member_total !== 0">
+          <van-search class="search-input" :disabled="dataList.length === 0" v-model="searchVal"
+            @keypress.enter="handleSearch" :placeholder="$t('search')" />
+            
+          <div class="search-result">
+            <van-index-bar  v-if="searchFlag && searchList.length > 0" class="index-bar" :sticky-offset-top="56"
+              highlight-color="#A4A4A7" :index-list="indexList1">
+              <template v-for="item in resultList" :key="item.type">
+                <van-index-anchor :index="item.type" />
+                <van-cell :right-width="70" v-for="data in item.list" :key="data.cityId" :title="data.name">
+                  <template #title>
+                    <!-- fix 2024-8-30 【IM- H5】【好友分组】好友分组，搜索出的结果，H5多了“单选按钮” -->
+                    <!-- <van-checkbox v-model="data.checked">
+                      <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                      <span v-if="showGroupOwner(data.userID)">
+                          <CommonLottie
+                            :isGroup="showGroupOwner(data.userID)"
+                            :width="140"
+                            :showName="data.showName"
+                            :bottom="-1"
+                          ></CommonLottie>
+                        </span>
+                        <span v-else class="custom-title">{{ data.showName }}</span>
+                    </van-checkbox> -->
+                    <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                    <span v-if="showGroupOwner(data.userID)">
+                        <CommonLottie
+                          :isGroup="showGroupOwner(data.userID)"
+                          :width="140"
+                          :showName="data.showName"
+                          :bottom="-1"
+                        ></CommonLottie>
+                      </span>
+                      <span v-else class="custom-title">{{ data.showName }}</span>
+                  </template>
+                </van-cell>
+              </template>
+            </van-index-bar>
+          </div>
+
+          <div v-if="searchList.length === 0 && searchFlag" class="content-boxs">{{ $t('notContacts') }}</div>
+          <div class="group-contact" style="overflow: auto;height: 100%;" v-if="!searchFlag">
+            <van-index-bar v-if="!searchFlag && dataList.length > 0" :index-list="indexList" class="index-bar" :sticky-offset-top="0"
+              highlight-color="#A4A4A7">
+              <div v-for="item in dataList" :key="item.type">
+                <van-index-anchor :index="item.type" />
+                <van-cell :right-width="70" v-for="(data, i) in item.list" :key="data.cityId" :title="data.name"
+                  @click="clickFn(data, i)">
+                  <template #title>
+                    <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                    <span v-if="showGroupOwner(data.userID)">
+                      <CommonLottie
+                        :isGroup="showGroupOwner(data.userID)"
+                        :width="140"
+                        :showName="data.showName"
+                        :bottom="-1"
+                      ></CommonLottie>
+                    </span>
+                    <span v-else class="custom-title">{{ data.showName }}</span>
+                  </template>
+                </van-cell>
+              </div>
+            </van-index-bar>
+          </div>
+        </div>
+        <EmptyData v-if="detailObj.member_total === 0" :description="$t('noAddGround')"></EmptyData>
+        <div class="footer">
+          <van-button block @click="handleClickItem('groupRemove')">{{ $t('remove') }}</van-button>
+          <van-button block color="#1B1B22" @click="handleClickItem('groupAdd')">{{ $t('add') }}</van-button>
+        </div>
+      </div>
+      <GroupDialog v-model="detailObj.visable" :dialogObj="detailObj" @getVal="handleSubmit"></GroupDialog>
+      <DeleteDialog v-model="deleteVisable" :remark="$t('deleteGroups')" @getList="getLists"></DeleteDialog>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView :key="route.fullPath"/>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.groupDetails {
+  background-color: #fff;
+}
+.groupDetails-wrap {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  padding: 56px 0 72px 0;
+  .groupDetails-content {
+    // height: calc(100% - 40px);
+    height:100%;
+    overflow-y: auto;
+    .search-input {
+      :deep(.van-cell) {
+        height: 36px !important;
+      }
+    }
+    .custom-title {
+      // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 400;
+      display: inline-block;
+      margin-left: 8px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 120px;
+      white-space: nowrap;
+    }
+    .group-contact,
+    .search-result {
+      :deep(.van-cell) {
+        height: 56px;
+        padding: 12px 16px;
+      }
+      :deep(.van-cell__title) {
+        align-items: center !important;
+        display: flex;
+      }
+      :deep(.van-checkbox__label) {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .group-contact {
+      padding-bottom: 54px;
+    }
+    .content-boxs {
+      color: #76767A;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 21px;
+      margin-top: 30px;
+    }
+  }
+}
+
+.footer {
+  height: 66px;
+  padding: 10px 16px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  // position: absolute;
+  // bottom: 20px;
+  // left: 0;
+  .van-button {
+    border-radius: 12px;
+    border: 0.5px solid #000;
+    height: 48px;
+    flex-grow: 1;
+    &:nth-child(1) {
+      margin-right: 12px;
+    }
+
+    &::before {
+      border: none;
+    }
+  }
+}
+
+.index-bar {
+  :deep(.van-index-bar__sidebar) {
+    color: #A4A4A7;
+
+    :deep(.van-index-anchor) {
+      color: #A4A4A7 !important;
+    }
+  }
+}
+@media screen and (min-width: 750px) {
+  :deep(.van-index-bar__sidebar) {
+    right: 16% !important;
+  }
+}
+.empty-list {
+  height: 300px;
+}
+</style>
diff --git a/src/views/contact/group/groupAdd.vue b/src/views/contact/group/groupAdd.vue
new file mode 100644
index 0000000..01ec856
--- /dev/null
+++ b/src/views/contact/group/groupAdd.vue
@@ -0,0 +1,374 @@
+<script setup>
+import { AppNavBar, EmptyData, CommonLottie } from '@/components/index.js'
+import { useRouter,useRoute } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import { computed, ref, watch, onMounted, reactive } from "vue";
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useContactStore } from "@/stores/contact";
+import { filterCity, getDifference } from '@/utils/tools'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n()
+const $api = inject("$api");
+const addFriendRef = ref()
+useGrade(addFriendRef, 4)
+const contactStore = useContactStore();
+const { isFriendList, friendGroupId, contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setIsFriendList } = contactStore;
+const router = useRouter()
+const route = useRoute()
+const searchVal = ref('')
+const dataList = ref([])
+const searchFlag = ref(false)
+const searchList = ref([])
+const resultList = ref([])
+const friendList = ref([])
+const indexList = ref([])
+const indexList1 = ref([])
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const isChecked1 = ref([]);
+const checkboxRefs1 = ref([]);
+// const isCheckedNum = ref(0) // 还能添加多少人 上限
+const handleSearch = () => {
+  // 这里搜索群
+  searchList.value = []
+  if (searchVal.value) {
+    friendList.value.forEach((item) => {
+      let name = item.remark + item.nickname + item.showName
+      if (name.toUpperCase().includes(searchVal.value.toUpperCase())) {
+        searchList.value.push(item);
+      }
+    })
+    resultList.value = filterCity(searchList.value)
+    searchFlag.value = true
+  }
+}
+onMounted(async () => {
+  // isCheckedNum.value = route.query.isCheckedNum || 500
+  if (isFriendList.value && isFriendList.value[friendGroupId.value]) {
+    if (isFriendList.value[friendGroupId.value].length === 0) {
+      friendList.value = contactList.value
+    } else {
+      friendList.value = getDifference(contactList.value, isFriendList.value[friendGroupId.value], 'userID')
+    }
+  } else {
+    friendList.value = contactList.value
+  }
+  friendList.value.forEach(item => {
+    item.showName = item.remark !== "" ? item.remark : item.nickname;
+  });
+  dataList.value = filterCity(friendList.value)
+})
+const selectItem = computed(() => {
+  if (searchFlag.value) {
+    // 此时为搜索框
+    return isChecked1.value.length
+  } else {
+    return isChecked.value.length
+  }
+})
+
+const handleLeft = () => {
+  router.push('/home/contact/group/detailed')
+}
+const handleAdd = async () => {
+  let arr = []
+  // if (searchFlag.value) {
+  //   // 此时为搜索框
+  //   arr = isChecked1.value
+  // } else {
+  //   arr = isChecked.value
+  // }
+  arr = isChecked.value
+  const res = await $api.contact.batchAddFriends({
+    friends_group_id: friendGroupId.value * 1,
+    user_ids: arr
+  })
+  if(res.code === 6102) {
+    showToast({ position: "top", message: t('group_limit500') })
+    return
+  }
+  if (res.code != 0) return
+  showToast({ position: "top", message: t('addSuccessfully') })
+  if (arr.length > 0) {
+    dataList.value = filterCity(getDifference(friendList.value, arr, 'userID'))
+    setIsFriendList(getDifference(friendList.value, arr, 'userID'))
+  } else {
+    dataList.value = filterCity(friendList.value)
+    setIsFriendList(friendList.value)
+  }
+  router.push('/home/contact/group/detailed')
+  searchList.value.forEach(item => item.checked = false)
+  friendList.value.forEach(item => item.checked = false)
+}
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') {
+    searchFlag.value = false
+    searchList.value = []
+    resultList.value = []
+  }
+})
+watch(() => dataList.value, (newValue, oldValue) => {
+  // 在这里可以执行相应的操作
+  indexList.value = dataList.value.map(item => item.type)
+}, { immediate: true });
+watch(() => resultList.value, (newValue, oldValue) => {
+  // 在这里可以执行相应的操作
+  indexList1.value = resultList.value.map(item => item.type)
+}, { immediate: true });
+const onToggle = (id) => {
+  const index = isChecked.value.indexOf(id);
+  if (index === -1) {
+    // 前端选择人数校验
+    // if(isChecked.value.length >= isCheckedNum.value) {
+    //   onNumTips()
+    //   return
+    // }
+    isChecked.value.push(id)
+  } else {
+    isChecked.value.splice(index, 1)
+  }
+}
+const onToggle1 = (id) => {
+  const index = isChecked1.value.indexOf(id);
+  if (index === -1) {
+    isChecked1.value.push(id)
+  } else {
+    isChecked1.value.splice(index, 1)
+  }
+}
+const getCurrentTitle = (val) => {
+  return val.showName ? val.showName : val.nickname
+}
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+
+const getItem = (item) => {
+  console.log('getItem',item);
+}
+// 上限提示
+// const onNumTips = () => {
+//       if (isChecked.value.length >= isCheckedNum.value) {
+//         showToast({ message: t('group_limit500'), position: 'top' })
+//     }
+// }
+
+</script>
+
+<template>
+  <div ref="addFriendRef">
+    <div class="addFriend_container">
+      <AppNavBar :title="`${$t('addFriend')} ${isChecked.length}`" left-arrow views_grade="fourth_view"
+        @click-left="handleLeft">
+        <template #right>
+          <van-button v-if="isChecked.length > 0" @click="handleAdd" class="special-btn" type="default">{{ $t('add')
+            }}</van-button>
+        </template>
+      </AppNavBar>
+      <div class="groupDetails-wrap">
+        <div class="groupDetails-content">
+          <van-search :disabled="dataList.length === 0" class="search-input" v-model="searchVal"
+            @keypress.enter="handleSearch" :placeholder="$t('search')" />
+          <div class="search-addFriend">
+            <van-index-bar v-if="searchFlag && searchList.length > 0" :index-list="indexList1" class="index-bar"
+              :sticky-offset-top="56" highlight-color="#A4A4A7">
+              <div v-for="item in resultList" :key="item.type">
+                <van-index-anchor :index="item.type" />
+                <van-checkbox-group v-model="isChecked" :border="false">
+                  <van-cell-group inset>
+                    <van-cell :right-width="70" v-for="data in item.list" :key="data.cityId"
+                      @click="onToggle(data.userID)" :title="data.name">
+                      <template #title>
+                        <!-- <van-checkbox :name="data.userID" @click.stop="onNumTips"> -->
+                        <van-checkbox :name="data.userID" @click.stop>
+                          <template #icon="props">
+                            <div class="select1">
+                              <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                            </div>
+                          </template>
+                        </van-checkbox>
+                        <div class="avatar">
+                          <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                          <div class="dot" v-if="data.online">
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="custom-name">
+                          <span v-if="showGroupOwner(data.userID)">
+                            <CommonLottie
+                              :isGroup="showGroupOwner(data.userID)"
+                              :width="140"
+                              :showName="data.showName"
+                              :bottom="-1"
+                            ></CommonLottie>
+                          </span>
+                          <span v-if="showGroupOwner(data.userID) == ''" class="custom-title">{{ data.showName }}{{ getItem(data) }}</span>
+                          <div v-if="data.remark && data.nickname" class="custom-nickname">{{$t('nicknames') + ':' + data.nickname }}</div>
+                        </div>
+                      </template>
+                    </van-cell>
+                  </van-cell-group>
+                </van-checkbox-group>
+              </div>
+            </van-index-bar>
+          </div>
+          <div v-if="searchList.length === 0 && searchFlag" class="content-boxs">{{ $t('notContacts') }}</div>
+          <div class="group-contact" v-if="!searchFlag">
+            <van-index-bar v-if="!searchFlag && dataList.length > 0" class="index-bar" :index-list="indexList"
+              :sticky-offset-top="56">
+              <div v-for="item in dataList" :key="item.type">
+                <van-index-anchor :index="item.type" />
+                <van-checkbox-group v-model="isChecked" :border="false">
+                  <van-cell-group inset>
+                    <van-cell :right-width="70" v-for="data in item.list" :key="data.cityId"
+                      @click="onToggle(data.userID)" :title="data.name">
+                      <template #title>
+                        <van-checkbox :name="data.userID" @click.stop>
+                          <template #icon="props">
+                            <div class="select1">
+                              <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                            </div>
+                          </template>
+                        </van-checkbox>
+                        <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                        <span v-if="showGroupOwner(data.userID)">
+                          <CommonLottie
+                            :isGroup="showGroupOwner(data.userID)"
+                            :width="140"
+                            :showName="data.showName"
+                            :bottom="-1"
+                          ></CommonLottie>
+                        </span>
+                        <span v-if="showGroupOwner(data.userID) == ''" class="custom-title">{{ data.showName }}</span>
+                      </template>
+                    </van-cell>
+                  </van-cell-group>
+                </van-checkbox-group>
+              </div>
+            </van-index-bar>
+          </div>
+        </div>
+        <EmptyData v-if="dataList.length === 0" :description="$t('noFriendAdd')"></EmptyData>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.addFriend_container {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  padding: 56px 0 0 0;
+  overflow-y: auto;
+
+  :deep(.van-nav-bar--fixed) {
+    z-index: 2;
+  }
+
+  .groupDetails-wrap {
+    .groupDetails-content {
+      .search-input {
+        :deep(.van-cell) {
+          height: 36px !important;
+        }
+      }
+
+      .group-contact,
+      .search-addFriend {
+        :deep(.van-cell) {
+          height: 56px;
+          padding: 12px 16px;
+        }
+
+        :deep(.van-checkbox__label) {
+          display: flex;
+          align-items: center;
+        }
+      }
+      .custom-title {
+        // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+        margin-left: 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 120px;
+        white-space: nowrap;
+      }
+      .custom-nickname {
+          font-size: 0.75rem;
+          color: #76767A;
+          margin-left: 8px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 292px;
+          white-space: nowrap;
+        }
+    }
+
+    .content-boxs {
+      color: #76767A;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 21px;
+      margin-top: 30px;
+    }
+  }
+
+  .special-btn {
+    background: transparent;
+    border: none;
+    color: #0095F6;
+    text-align: center;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  :deep(.van-index-anchor) {
+    line-height: 40px;
+  }
+}
+
+.select1 {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-right: 8px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid #d9d9d9;
+}
+
+:deep(.van-cell__title) {
+  display: flex;
+  align-items: center;
+}
+:deep(.van-cell:after) {
+  border: none;
+}
+</style>
diff --git a/src/views/contact/group/groupRemove.vue b/src/views/contact/group/groupRemove.vue
new file mode 100644
index 0000000..356ddc6
--- /dev/null
+++ b/src/views/contact/group/groupRemove.vue
@@ -0,0 +1,327 @@
+<script setup>
+import { AppNavBar, EmptyData, CommonLottie } from '@/components/index.js'
+import { useRouter } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import { computed, ref, watch, onMounted, reactive } from "vue";
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useContactStore } from "@/stores/contact";
+import { filterCity, getDifference } from '@/utils/tools'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+const { t } = useI18n()
+const $api = inject("$api");
+const removeFriendRef = ref()
+useGrade(removeFriendRef, 4)
+const contactStore = useContactStore();
+const { isFriendList, friendGroupId, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setIsFriendList } = contactStore;
+const router = useRouter()
+const searchVal = ref('')
+const dataList = ref([])
+const searchFlag = ref(false)
+const searchList = ref([])
+const resultList = ref([])
+const indexList = ref([])
+const indexList1 = ref([])
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const isChecked1 = ref([]);
+const checkboxRefs1 = ref([]);
+const handleSearch = () => {
+  // 这里搜索群
+  searchList.value = []
+  if (searchVal.value && isFriendList.value && isFriendList.value[friendGroupId.value]) {
+    isFriendList.value[friendGroupId.value].forEach((item) => {
+      if (item.showName.toUpperCase().includes(searchVal.value.toUpperCase())) {
+        searchList.value.push(item);
+      }
+    })
+    resultList.value = filterCity(searchList.value)
+    searchFlag.value = true
+  }
+}
+
+onMounted(() => {
+  if (isFriendList.value && isFriendList.value[friendGroupId.value]) {
+    dataList.value = filterCity(isFriendList.value[friendGroupId.value])
+  }
+})
+
+const handleLeft = () => {
+  router.push('/home/contact/group/detailed')
+}
+
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') {
+    searchFlag.value = false
+    searchList.value = []
+    resultList.value = []
+  }
+})
+const selectItem = computed(() => {
+  if (searchFlag.value) {
+    // 此时为搜索框
+    return isChecked1.value.length
+  } else {
+    return isChecked.value.length
+  }
+})
+const handleDelete = async () => {
+  let arr = []
+  if (searchFlag.value) {
+    // 此时为搜索框
+    arr = isChecked1.value
+  } else {
+    arr = isChecked.value
+  }
+  const res = await $api.contact.batchRemoveFriends({
+    friends_group_id: friendGroupId.value * 1,
+    user_ids: arr
+  })
+  if (res.code != 0) return
+  showToast({ position: "top", message: t('deleteSuccess') })
+  if (arr.length > 0) {
+    dataList.value = filterCity(getDifference(isFriendList.value[friendGroupId.value] || [], arr, 'userID'))
+    setIsFriendList(getDifference(isFriendList.value[friendGroupId.value] || [], arr, 'userID'))
+  } else {
+    dataList.value = filterCity(isFriendList.value[friendGroupId.value])
+    setIsFriendList(isFriendList.value[friendGroupId.value])
+  }
+
+  router.push('/home/contact/group/detailed')
+}
+watch(() => dataList.value, (newValue, oldValue) => {
+  // 在这里可以执行相应的操作
+  indexList.value = dataList.value.map(item => item.type)
+}, { immediate: true });
+watch(() => resultList.value, (newValue, oldValue) => {
+  // 在这里可以执行相应的操作
+  indexList1.value = resultList.value.map(item => item.type)
+}, { immediate: true });
+const onToggle = (id) => {
+  const index = isChecked.value.indexOf(id);
+  if (index === -1) {
+    isChecked.value.push(id)
+  } else {
+    isChecked.value.splice(index, 1)
+  }
+}
+const onToggle1 = (id) => {
+  const index = isChecked1.value.indexOf(id);
+  if (index === -1) {
+    isChecked1.value.push(id)
+  } else {
+    isChecked1.value.splice(index, 1)
+  }
+}
+const getCurrentTitle = (val) => {
+  return val.showName ? val.showName : val.nickname
+}
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+</script>
+
+<template>
+  <div ref="removeFriendRef">
+    <div class="removeFriend_container">
+      <AppNavBar :title="`${$t('removeFriend')} ${selectItem}`" left-arrow views_grade="fourth_view"
+        @click-left="handleLeft">
+        <template #right>
+          <van-button v-if="selectItem > 0" @click="handleDelete" class="special-btn" type="default">{{ $t('remove')
+            }}</van-button>
+        </template>
+      </AppNavBar>
+      <div class="groupDetails-wrap">
+        <div class="groupDetails-content">
+          <van-search class="search-input" :disabled="dataList.length === 0" v-model="searchVal"
+            @keypress.enter="handleSearch" :placeholder="$t('search')" />
+          <div class="search-addFriend" v-if="searchFlag && searchList.length > 0">
+            <van-index-bar v-if="searchFlag && searchList.length > 0" :index-list="indexList1"  class="index-bar" :sticky-offset-top="56">
+              <div v-for="item in resultList" :key="item.type">
+                <van-index-anchor :index="item.type" />
+                <van-checkbox-group v-model="isChecked1" :border="false">
+                  <van-cell-group inset>
+                    <van-cell :right-width="70" v-for="(data, i) in item.list" :key="data.cityId"
+                      @click="onToggle(data.userID)" :title="data.name">
+                      <template #title>
+                        <van-checkbox :name="data.userID" @click.stop>
+                          <template #icon="props">
+                            <div class="select1">
+                              <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                            </div>
+                          </template>
+                        </van-checkbox>
+                        <div class="avatar">
+                          <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                          <div class="dot" v-if="data.online">
+                            <div></div>
+                          </div>
+                        </div>
+                        <span v-if="showGroupOwner(data.userID)">
+                          <CommonLottie
+                            :isGroup="showGroupOwner(data.userID)"
+                            :width="140"
+                            :showName="data.showName"
+                            :bottom="-1"
+                          ></CommonLottie>
+                        </span>
+                        <span v-if="showGroupOwner(data.userID) == ''" class="custom-title">{{ data.showName }}</span>
+                      </template>
+                    </van-cell>
+                  </van-cell-group>
+                </van-checkbox-group>
+              </div>
+            </van-index-bar>
+          </div>
+          <div v-if="searchList.length === 0 && searchFlag" class="content-boxs">{{ $t('notContacts') }}</div>
+          <div class="group-contact" v-if="!searchFlag">
+            <van-index-bar v-if="!searchFlag && dataList.length > 0" :index-list="indexList" class="index-bar" :sticky-offset-top="56">
+              <div v-for="item in dataList" :key="item.type">
+                <van-index-anchor :index="item.type" />
+                <van-checkbox-group v-model="isChecked" :border="false">
+                  <van-cell-group inset>
+                    <van-cell :right-width="70" v-for="(data, i) in item.list" :key="data.cityId"
+                      @click="onToggle1(data.userID)" :title="data.name">
+                      <template #title>
+                        <van-checkbox :name="data.userID" @click.stop>
+                          <template #icon="props">
+                            <div class="select1">
+                              <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                            </div>
+                          </template>
+                        </van-checkbox>
+                        <Avatar width="32" height="32" :url="data.faceURL" :name="data.showName" @updateUrl="url => data.faceURL = url"></Avatar>
+                        <span v-if="showGroupOwner(data.userID)">
+                          <CommonLottie
+                            :isGroup="showGroupOwner(data.userID)"
+                            :width="140"
+                            :showName="data.showName"
+                            :bottom="-1"
+                          ></CommonLottie>
+                        </span>
+                        <span v-if="showGroupOwner(data.userID) == ''" class="custom-title">{{ data.showName }}</span>
+                      </template>
+                    </van-cell>
+                  </van-cell-group>
+                </van-checkbox-group>
+              </div>
+            </van-index-bar>
+          </div>
+        </div>
+        <EmptyData v-if="dataList.length === 0" :description="$t('noFriendDelete')"></EmptyData>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.removeFriend_container {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  padding: 56px 0 0 0;
+  overflow-y: auto;
+  :deep(.van-nav-bar--fixed) {
+    z-index: 2;
+  }
+  .groupDetails-wrap {
+    .groupDetails-content {
+      .search-input {
+        :deep(.van-cell) {
+          height: 36px !important;
+        }
+      }
+
+      .group-contact,
+      .search-addFriend {
+        :deep(.van-cell) {
+          height: 56px;
+          padding: 12px 16px;
+        }
+
+        :deep(.van-checkbox__label) {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .custom-title {
+        // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+        margin-left: 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 120px;
+        white-space: nowrap;
+      }
+    }
+
+    .content-boxs {
+      color: #76767A;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 21px;
+      margin-top: 30px;
+    }
+  }
+
+  .special-btn {
+    background: transparent;
+    border: none;
+    color: #FC5A50;
+    text-align: center;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  :deep(.van-index-anchor) {
+    line-height: 40px;
+  }
+}
+
+.select1 {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-right: 8px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid #d9d9d9;
+}
+
+:deep(.van-cell__title) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.van-cell:after) {
+  border: none;
+}
+</style>
diff --git a/src/views/contact/group/index.vue b/src/views/contact/group/index.vue
new file mode 100644
index 0000000..4c556ad
--- /dev/null
+++ b/src/views/contact/group/index.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { ref, reactive, watch, provide } from 'vue'
+import { AppNavBar, DeleteDialog, GroupDialog, EmptyData } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const friendGroupRef = ref(null)
+useGrade(friendGroupRef, 2)
+const { setFriendGroupId } = useContactStore();
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const checked = ref(true)
+const deleteVisable = ref(false)
+const dialogObj = reactive({
+  visable: false,
+  type: '',
+  inputVal: '',
+  id: ''
+})
+const groupList = ref([])
+const hanldClickItem = (id) => {
+  setFriendGroupId(id)
+  router.push('/home/contact/group/detailed')
+}
+const handleRight = () => {
+  dialogObj.type = 'add'
+  dialogObj.inputVal = ''
+  dialogObj.id = ''
+  dialogObj.visable = true
+}
+
+const handleCancel = () => {
+  dialogObj.inputVal = ''
+  dialogObj.visable = false
+}
+const getList = async () => {
+  const res = await $api.contact.getFriendsGroupList()
+  if (res.code != 0) return
+  groupList.value = res.data
+}
+watch(() => route.fullPath, (val) => {
+  getList()
+})
+onMounted(() => {
+  getList()
+})
+const handleEdit = ({ group_name, id }) => {
+  dialogObj.type = 'edit'
+  dialogObj.inputVal = group_name
+  dialogObj.id = id
+  dialogObj.visable = true
+}
+const handleDelete = (id) => {
+  dialogObj.id = id
+  deleteVisable.value = true
+}
+const getLists = async() => {
+  const res = await $api.contact.deleteFriendsGroup({ id: dialogObj.id })
+  if (res.code != 0) return
+  deleteVisable.value = false
+  getList()
+}
+
+const handleSubmit = async ({ inputVal, id, type }) => {
+  if (type === 'add') {
+    const res = await $api.contact.createFriendsGroup({ group_name: inputVal })
+    if (res.code != 0) return
+    dialogObj.inputVal = ''
+    dialogObj.type = ''
+    dialogObj.visable = false
+    getList()
+  } else if (type === 'edit') {
+    const res = await $api.contact.updateFriendsGroup({ group_name: inputVal, id: id })
+    if (res.code != 0) return
+    dialogObj.inputVal = ''
+    dialogObj.id = ''
+    dialogObj.type = ''
+    dialogObj.visable = false
+    getList()
+  }
+}
+</script>
+
+<template>
+  <div ref="friendGroupRef" class="friendGroup">
+    <AppNavBar :title="$t('friendGrouping')" views_grade="secondary_view" @click-left="router.push('/home/contact')">
+      <template #right>
+        <img @click="handleRight" src="@/assets/dialog/group.svg" alt="">
+      </template>
+    </AppNavBar>
+    <div class="friendGroup-wrap">
+      <div class="friendGroup-content">
+        <div class="group-list" v-if="groupList.length > 0">
+          <van-swipe-cell v-for="item in groupList" :key="item.id">
+            <van-cell title="" :border="true" @click="hanldClickItem(item.id)">
+              <template #title >
+                <span class="custom-title">{{ item.group_name }}</span>
+              </template>
+              <template #right-icon>
+                <span class="custom-number">{{ item.member_total }}</span>
+                <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+              </template>
+            </van-cell>
+            <template #right>
+              <van-button @click="handleEdit(item)" square color="#A4A4A7" :text="$t('change')" />
+              <van-button @click="handleDelete(item.id)" square color="#FC5A50" :text="$t('delete')" />
+            </template>
+          </van-swipe-cell>
+        </div>
+        <EmptyData v-if="groupList.length === 0"></EmptyData>
+        <GroupDialog v-model="dialogObj.visable" :dialogObj="dialogObj" @getVal="handleSubmit"></GroupDialog>
+        <DeleteDialog v-model="deleteVisable" :remark="$t('deleteGroups')" @getList="getLists"></DeleteDialog>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView :key="route.fullPath"/>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.friendGroup-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .friendGroup-content {
+    .group-list {
+      height: calc(100vh - 56px);
+      overflow-y: auto;
+      :deep(.van-cell) {
+        height: 60px;
+        padding: 19px 16px;
+      }
+
+      .custom-title {
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        width: 200px;
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .custom-number {
+        color: #76767A;
+        text-align: right;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        margin-right: 4px;
+      }
+
+      .notice-value-link {
+        width: 16px;
+        height: 16px;
+        margin-top: 3px;
+      }
+
+      :deep(.van-swipe-cell__right) {
+        .van-button {
+          height: 60px;
+        }
+
+        .van-button--normal {
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/index.vue b/src/views/contact/index.vue
new file mode 100644
index 0000000..eb42042
--- /dev/null
+++ b/src/views/contact/index.vue
@@ -0,0 +1,718 @@
+<script setup>
+import { ref, onMounted,onUnmounted, computed, watch, provide, onBeforeUnmount } from "vue";
+import { useGrade } from "@/utils/levelConfig";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { storeToRefs } from "pinia";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import scan from "@/assets/dialog/search.svg";
+import add from "@/assets/dialog/add.svg";
+import face from "@/assets/dialog/face.svg";
+import chat from "@/assets/dialog/chat.svg";
+import massTextingIcon from "@/assets/contact-mass-texting.svg";
+import defaultAvatar from "@/assets/mine-avatar.png";
+import { getSDK } from "@/utils/openIM";
+import { filterCity } from "@/utils/tools";
+import { useContactStore } from "@/stores/contact";
+import { useConfigStore } from "@/stores/config.js";
+import { CbEvents } from "@/utils/openIM/constant";
+import { useI18n } from "vue-i18n";
+import { showToast } from "vant";
+import addfriendbindDialog from "../dialogue/components/addfriendbindDialog.vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import {isMobile} from '@/utils/common'
+import chatFriendsList from "./chatFriendsList.vue"; // 导入好友列表组件
+import VirtualList from "@/components/virtualList";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const $api = inject("$api");
+const OpenIM = getSDK();
+const userStore = useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const {
+  setContactList,
+  setFriendDetailId,
+  updateNewFriendApply,
+  setNewFriendApplyCount,
+  getAllGroupOwnerOrAdmin,
+  getContactListFromReq
+} = contactStore;
+const {
+  hasNewFriendApply,
+  friendCreateCount,
+  contactList,
+  newFriendApplyCount,
+  allGroupOwnerOrAdmin,
+  isGroupSend
+} = storeToRefs(contactStore);
+const router = useRouter();
+const route = useRoute();
+const contactRef = ref(null);
+const searchVal = ref(null);
+const contactLists = ref([]);
+const dialogVisable = ref(false);
+const showFriendCount = ref(0);
+const bindDialogShow = ref(false);
+const addfriendbindType = ref(0);
+const indexList = ref([]);
+const theoreticalListRef = ref(null);// 虚拟列表的实例
+const messageContainerRef = ref(null);
+const handleAdd = () => {
+  if (checkAddFriend()) {
+    bindDialogShow.value = true;
+    return;
+  }
+  router.push(`/home/contact/add`);
+};
+
+const handleClickItem = type => {
+  if (type === "new") {
+    updateNewFriendApply(false);
+  }
+  router.push(`/home/contact/${type}`);
+};
+const handleClickItems = ({ userID }) => {
+  setFriendDetailId(userID);
+  router.push({
+    path: "/home/contact/detail",
+    query: {
+      label: "detail",
+      id: userID
+    }
+  });
+};
+const addFriendVerify = computed(()=> appConfig.value.user_permission?.addFriendVerify)
+const arr = computed(() => {
+  const {isAddFriendByQRCode ,isAddFriendByUid, isAddFriendByFaceToFace } = (appConfig.value || {}).user_permission || {}
+  return [
+    {
+      id: 1,
+      name: t("scan"),
+      url: scan,
+      label: "scan",
+      isShow: isAddFriendByQRCode
+    },
+    {
+      id: 2,
+      name: t("addFriend"),
+      url: add,
+      label: "add",
+      isShow:isAddFriendByUid
+    },
+    {
+      id: 3,
+      name: t("faceToFace"),
+      url: face,
+      label: "face",
+      isShow: isAddFriendByFaceToFace
+    },
+    {
+      id: 4,
+      name: t("createGroup"),
+      url: chat,
+      label: "chat",
+      isShow: userInfo.value.isGroupOwner
+    },
+    {
+      id: 5,
+      name: t("groupSendMsg"),
+      url: massTextingIcon,
+      label: "massTexting/selectPage",
+      isShow: isGroupSend.value
+    }
+  ]
+})
+if(arr.value[0].isShow)arr.value[0].isShow = isMobile() || false
+const dialogList = computed(() => {
+  return arr.value.filter(item => item.isShow != false)
+});
+
+watch(()=> arr.value,(val)=>{
+  console.log('arr.value',arr.value);
+})
+function handleResize() {
+  arr.value[0].isShow = isMobile() || false
+}
+const handleClick = label => {
+  let labelArr = ['chat','massTexting/selectPage']
+  if (!labelArr.includes(label) && checkAddFriend()) {
+    bindDialogShow.value = true;
+    return;
+  }
+  router.push(`/home/contact/${label}`);
+  dialogVisable.value = false;
+};
+// 添加好友门槛校验
+const checkAddFriend = () => {
+  let flag = false;
+  console.log(
+    "userInfo.value.isInternalUser",
+    userInfo.value.isGroupOwner ||
+      userInfo.value.isGroupAdmin ||
+      userInfo.value.isInternalUser
+  );
+  if (
+    userInfo.value.isGroupOwner ||
+    userInfo.value.isGroupAdmin ||
+    userInfo.value.isInternalUser
+  )
+    return false;
+  addfriendbindType.value = addFriendVerify.value;
+  switch (addFriendVerify.value) {
+    case 0: // 无门槛
+      flag = false;
+      break;
+    case 1: // 绑定手机号
+      flag = userInfo.value.phone ? false : true;
+      break;
+    case 2: // 绑定邮箱
+      flag = userInfo.value.email ? false : true;
+      break;
+    case 3: // 绑定手机号或邮箱
+      flag = userInfo.value.email || userInfo.value.phone ? false : true;
+      break;
+    case 4: // 绑定手机号和邮箱
+      flag = userInfo.value.email && userInfo.value.phone ? false : true;
+      break;
+    default:
+      false;
+  }
+  return flag;
+};
+
+// 2024-7-9 此段代码无用暂时注释 ==== fix 优化好友数量多的时候重复触发问题
+// watch(
+//   () => contactList.value,
+//   val => {
+//     getList();
+//   },
+//   { deep: true }
+// );
+
+// fix 优化轮询好友状态重复触发问题
+// 声明一个变量来记录最后一次的触发
+let lastTrigger = null;
+// 监听 contactList.value 的变化，优化调用逻辑
+watch(
+  () => contactList.value,
+  (newVal, oldVal) => {
+    if (lastTrigger !== null) {
+      clearTimeout(lastTrigger);
+    }
+    lastTrigger = setTimeout(() => {
+      getList(); // 在延迟后调用 getList()
+      lastTrigger = null;
+    }, 500); // 500 毫秒内不再触发，视为最后一次触发
+  },
+  { deep: true, flush: 'post' }
+);
+
+// 优化说明：
+// 浅拷贝优化： 使用 map 方法在复制 list 时同时设置 showName 和 checked 属性，避免了深拷贝的开销。
+// 数组操作简化： 使用 reduce 方法替代 forEach 循环，一次性将符合条件的元素合并到 arr1 数组中。
+// 代码逻辑简化： 简化了在线状态的判断逻辑，使用 find 方法代替 filter + length 判断，减少了不必要的遍历。
+// 好友在线状态
+const onlineStatus = ref({})
+const getList = async () => {
+  try {
+    const list = contactList.value.map(item => ({
+      ...item,
+      showName: item.remark !== "" ? item.remark : item.nickname,
+      checked: false
+    }));
+    const arr = filterCity(list);
+    contactLists.value = arr.reduce((acc, item) => {
+      if (item.type) {
+        item.list[0].type = item.type;
+        acc.push(...item.list);
+      }
+      return acc;
+    }, []);
+    extractTypes(contactLists.value);
+    const userIDs = list.map(item => item.userID);
+    const res = await $api.login.userLoginStatus({ userIDs });
+    if (res.code !== 0) return;
+    res.data?.forEach(item => {
+      // 存储在线状态
+      onlineStatus.value[item.userID] =  item.status === 1 ? true : false;
+      // 把查询到用户的，在线状态存储起来
+      friendState.SetOnlineStatus(onlineStatus.value)
+    })
+    // fix 2024-8-7 改成全局的暂时注释
+    // const statusList = (res.data || []).filter(item => item.status === 1);
+    // console.log(statusList, '在线');
+    // contactLists.value.forEach(item => {
+    //   const _status = statusList.find(val => val.userID === item.userID);
+    //   item.online = !!_status;
+    // });
+  } catch (error) {
+    console.error(error);
+  }
+};
+// 提取 type 并赋值给 indexList.value 的函数
+const extractTypes = (cityList) => {
+  // 提取所有的 type 字段
+  const types = cityList
+    .filter((item, index) => cityList[index].type !== undefined)
+    .map(item => item.type);
+  // 将提取的 types 数组赋值给 indexList.value
+  indexList.value = types;
+};
+
+onMounted(() => {
+  if(arr.value[0].isShow)window.addEventListener('resize', handleResize);
+  getList();
+  getAllGroupOwnerOrAdmin();
+  if (contactList.value.length === 0) {
+    getContactListFromReq();
+  }
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+watch(
+  () => route.fullPath,
+  async val => {
+    if (friendCreateCount.value) {
+      const time = friendCreateCount.value * 1;
+      if (localStorage.getItem("friendCreateCount")) {
+        const time = localStorage.getItem("friendCreateCount") * 1;
+        const res1 = await $api.contact.getRespondFriendApplyByTime({
+          time: time 
+        });
+        if (res1.code != 0) return;
+        setNewFriendApplyCount(res1.data.count);
+        updateNewFriendApply(res1.data.count > 0);
+        showFriendCount.value = res1.data.count;
+      }
+    }
+  }
+);
+// 动态计算虚拟列表的高度
+const estimateSize = computed(() => {
+  const itemHeight = 50;
+  return contactLists.value.length * itemHeight;
+});
+const handeBarClick = (event) => {
+  // 获取点击的文本内容
+  const clickedText = event.target.innerText;
+  // 查找数组中符合条件的元素索引
+  const index = contactLists.value.findIndex(item => item.type === clickedText);
+  if (index !== -1) {
+    console.error('找到了',index);
+    if (index===0) {
+      // 找到了匹配的元素，滚动到该索引位置
+      theoreticalListRef.value.scrollToIndex(0);
+    } else {
+      theoreticalListRef.value.scrollToIndex(index);
+    }
+  } else {
+    console.error(`未找到与 "${clickedText}" 匹配的元素。`);
+  }
+ 
+};
+const scrollTop = ref(0);
+const handleScroll = (event) => {
+ scrollTop.value = event.target.scrollTop;
+};
+</script>
+<template>
+  <div style="flex: 1; display: flex; flex-direction: column;overflow: hidden;" >
+    <div ref="contactRef" class="contact-wrap" :scrollTop="scrollTop">
+      <div class="search-box">
+        <van-field
+          class="custom-input"
+          @focus="handleClick('mySearch')"
+          label=""
+          left-icon="search"
+          :placeholder="$t('search')"
+        />
+      </div>
+      <div class="contact-item">
+        <van-cell-group :border="false">
+          <van-cell
+            :title="$t('newFriend')"
+            is-link
+            :border="true"
+            @click="handleClickItem('new')"
+          >
+            <template #title>
+              <img class="img" src="@/assets/contact-frend.svg" alt="" />
+              <span class="custom-title">{{ $t("newFriend") }}</span>
+            </template>
+            <template #right-icon>
+              <div class="badge-wrapper">
+                <div class="badge">
+                  {{
+                    (hasNewFriendApply &&
+                      (newFriendApplyCount > 99
+                        ? "99+"
+                        : newFriendApplyCount)) ||
+                      ""
+                  }}
+                </div>
+              </div>
+              <img
+                class="notice-value-link"
+                style="margin-left: 10px;"
+                src="@/assets/right-small1.svg"
+                alt=""
+              />
+            </template>
+          </van-cell>
+          <van-cell
+            :title="$t('myGroup')"
+            is-link
+            to=""
+            :border="true"
+            @click="handleClickItem('myChat')"
+          >
+            <template #title>
+              <img class="img" src="@/assets/friend-chat.svg" alt="" />
+              <span class="custom-title">{{ $t("myGroup") }}</span>
+            </template>
+            <template #right-icon>
+              <img
+                class="notice-value-link"
+                src="@/assets/right-small1.svg"
+                alt=""
+              />
+            </template>
+          </van-cell>
+          <van-cell
+            :title="$t('friendGrouping')"
+            is-link
+            to=""
+            :border="true"
+            @click="handleClickItem('massTexting')"
+            v-if="isGroupSend"
+          >
+            <template #title>
+              <img class="img" src="@/assets/contact-mass-texting.svg" alt="" />
+              <span class="custom-title">{{ $t("groupSendMsg") }}</span>
+            </template>
+            <template #right-icon>
+              <img
+                class="notice-value-link"
+                src="@/assets/right-small1.svg"
+                alt=""
+              />
+            </template>
+          </van-cell>
+          <van-cell
+            :title="$t('friendGrouping')"
+            is-link
+            to=""
+            :border="true"
+            @click="handleClickItem('group')"
+          >
+            <template #title>
+              <img class="img" src="@/assets/contact-group.svg" alt="" />
+              <span class="custom-title">{{ $t("friendGrouping") }}</span>
+            </template>
+            <template #right-icon>
+              <img
+                class="notice-value-link"
+                src="@/assets/right-small1.svg"
+                alt=""
+              />
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+      <div class="empty-img">
+        <img src="@/assets/contact-empty.png" alt="" />
+      </div>
+      <div class="contact-list">
+        <div
+          @click="handleAdd"
+          v-if="contactLists.length === 0"
+          class="empty-list"
+        >
+          <img src="@/assets/img/addFriend.png"  alt="" />
+          <p >{{ $t('gotoAddFriend') }}</p>
+        </div> 
+        <div class="empty-lists" v-else>
+          <van-index-bar :sticky-offset-top="56" v-if="indexList.length>0" :index-list="indexList" @click="handeBarClick" >
+            <virtual-list
+                  ref="theoreticalListRef"
+                  class="theoretical-list"
+                  :data-index="'index'"
+                  :data-key="'pinyin'" 
+                  :data-sources="contactLists"
+                  :data-component="message => chatFriendsList"
+                  :estimate-size="estimateSize"
+                  :keeps="60"
+                  @scroll="handleScroll"
+                >
+                </virtual-list>
+          </van-index-bar>
+        </div>
+      </div>
+    </div>
+    <AppNavBar
+      :left-text="$t('globalSearchContacts')"
+      title=""
+      views_grade="firstly_view"
+    >
+      <template #right>
+        <van-popover
+          class="contact-dialog"
+          placement="bottom-end"
+          v-model:show="dialogVisable"
+          :actions="dialogList"
+        >
+          <div
+            class="item"
+            v-for="item in dialogList"
+            :key="item.id"
+            @click="handleClick(item.label)"
+          >
+            <img :src="item.url" alt="" />
+            <div class="txt">{{ item.name }}</div>
+          </div>
+          <template #reference>
+            <img
+              v-show="dialogList.length > 0"
+              class="add-img"
+              src="@/assets/contact-add.svg"
+              alt=""
+            />
+          </template>
+        </van-popover>
+      </template>
+    </AppNavBar>
+    <addfriendbindDialog
+      class="bind_dialog"
+      :show="bindDialogShow"
+      :addfriendbindType="addfriendbindType"
+      @close="bindDialogShow = false"
+    ></addfriendbindDialog>
+    <!-- 二级视图 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+<style scoped lang="less">
+@media screen and (max-width: 750px) {
+  .contact-wrap { 
+    padding-bottom: 56px;
+  }
+}
+.theoretical-list {
+  height: auto;
+  // max-height:calc(100% - 260px);
+  // max-height: 86vh;
+  // max-height: 100%;
+  overflow-y: auto; /* 启用垂直滚动 */
+  scrollbar-width: none; /* Firefox 隐藏滚动条 */
+  -ms-overflow-style: none; /* IE 隐藏滚动条 */
+  max-height: 100vh;
+}
+.theoretical-list::-webkit-scrollbar { /* Chrome | Safari 隐藏滚动条 */
+	display: none;
+}
+
+:deep(.van-nav-bar__text) {
+  font-weight: 600 !important;
+  color: #1b1b22;
+  font-family: "PingFang SC";
+  font-size: 1.5rem;
+}
+
+:deep(.van-nav-bar__left),
+:deep(.van-nav-bar__right) {
+  padding: 0 16px;
+}
+
+.contact-wrap {
+  padding-top: 56px;
+  height: calc(100vh - 50px);
+  overflow-y: auto;
+  background: #fff;
+  overflow-y: auto;
+  position: relative;
+
+  .search-box {
+    padding: 6px 16px;
+    height: 48px;
+
+    .custom-input {
+      border-radius: 8px;
+      background: #f8f8fb;
+      height: 36px;
+      padding: 8px 12px;
+
+      :deep(.van-field__left-icon) {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        background: url('@/assets/search-icon.svg') no-repeat center / cover;
+
+        .van-icon {
+          font-size: 1.5rem;
+          line-height: 24px;
+        }
+        > i {
+          display: none;
+        }
+      }
+
+      :deep(.van-field__control) {
+        color: #76767a;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        height: 20px;
+      }
+    }
+  }
+
+  /deep/.van-cell {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 60px;
+    line-height: 60px;
+
+    .van-cell__title {
+      .img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        margin-bottom: 6px;
+      }
+
+      .custom-title {
+        padding-left: 16px;
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+
+    .badge-wrapper {
+      display: flex;
+      align-items: center;
+
+      .badge {
+        min-width: 16px;
+        padding: 0 2px;
+        color: #fff;
+        line-height: 16px;
+        text-align: center;
+        background: var(--c-blue-color);
+        border-radius: 50%;
+      }
+    }
+
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+    .content {
+      margin-right: 8px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+    }
+  }
+
+  .contact-item {
+    // padding-left: 16px;
+  }
+
+  .contact-list {
+    .empty-list {
+      margin: 122px auto 0 auto;
+      width: 100px;
+      padding-bottom: 40px;
+      text-align: center;
+      position: relative;
+      cursor: pointer;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+      >p{
+        position: absolute;
+        width: 200px;
+        font-size: var(--size-14px);
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%)
+      }
+    }
+
+    .empty-lists {
+      padding: 0 8px 0 16px;
+      position: relative;
+      height: 100%;
+
+      :deep(.van-index-bar) {
+        height: 100%;
+      }
+
+      :deep(.van-index-bar__index) {
+        font-weight: normal;
+        color: #76767a;
+      }
+
+      @media screen and (min-width: 750px) {
+        :deep(.van-index-bar__sidebar) {
+          left: 332px !important;
+          right: auto !important;
+        }
+      }
+
+      :deep(.van-index-anchor) {
+        padding: 0;
+        line-height: 40px;
+      }
+
+      :deep(.van-cell) {
+        padding: 0;
+        height: 56px;
+        line-height: 56px;
+        align-items: center;
+      }
+
+      :deep(.van-cell__title) {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .empty-img {
+    img {
+      width: 100%;
+      height: 8px;
+    }
+  }
+
+  :deep(.van-badge__wrapper) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+:deep(.bind_dialog) {
+  .van-action-sheet__header {
+    padding: 20px 50px;
+    line-height: 30px;
+  }
+}
+
+:deep(.van-cell:after) {
+  border: none;
+}
+</style>
diff --git a/src/views/contact/massTexting/friendDetails.vue b/src/views/contact/massTexting/friendDetails.vue
new file mode 100644
index 0000000..7e79ce1
--- /dev/null
+++ b/src/views/contact/massTexting/friendDetails.vue
@@ -0,0 +1,338 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, TransmitDataDialog } from '@/components/index'
+import IMG from '@/assets/chatbg.png'
+import defaultSearch from '@/assets/search-icon.svg'
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user.js";
+import { parseMsg } from '@/utils/tools'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+
+const contactStore = useContactStore();
+const { chatList, contactList } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig, setMassTextDataChecked } = userStore;
+const { groupChatConfig, privateChatConfig, appConfig, massTextDataChecked } = storeToRefs(userStore);
+const $api = inject("$api");
+
+// 选中的列表
+const selectChatDataList = ref([])
+
+const groupDetailsRef = ref(null)
+useGrade(groupDetailsRef, 4)
+const router = useRouter()
+const route = useRoute()
+// const isChecked = ref(JSON.parse(window.sessionStorage.getItem('MassTextDataChecked')) || []);
+const isChecked = ref(massTextDataChecked.value || []);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const isMultipleChoice = ref(false)
+const list = ref([])
+let page_num = ref(1)
+const { t } = useI18n()
+
+
+
+const showList = computed(() => {
+  let arr = []
+  arr = list.value.filter(item => {
+    let str = item.nickname + item.remark
+    return str.indexOf(searchForm.value) != -1
+  }).slice(0, (page_num.value * 10))
+  return arr || []
+})
+const getData = async() => {
+  const res = await $api.contact.getFriendsGroupListById({ friends_group_id: +route.query.id })
+  if (res.code != 0) return
+  const arr = contactList.value.filter((item) => res.data.friend_ids.includes(item.userID))
+  list.value = arr
+  console.log('getData',list.value);
+}
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (showList.value.length >= list.value.length) {
+    finished.value = true;
+  }
+  console.log('showList+list', list.value);
+}
+const toggle = (item, index) => {
+  checkboxRefs.value[index].toggle();
+  onNumTips()
+};
+const MAX_GROUP_COUNT = computed(()=> appConfig.value.batch_send?.group_send_limit || 0)
+watch(()=>isChecked.value,() => {
+  onNumTips()
+  setMassTextDataChecked(isChecked.value)
+}, { deep: true })
+
+const onNumTips = () => {
+      if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }
+}
+const onStop = () => {
+}
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+getData()
+
+const messageDescText = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    if (groupChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (groupChatConfig.value.type == 'single') {
+      //逐条转发
+      if (groupChatConfig.value.msg.length == 1) {
+        return parseMsg(groupChatConfig.value.msg[0], false, false, false);
+      } else {
+        return t('singleMlCount', { count: groupChatConfig.value.msg.length });
+      }
+    }
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    if (privateChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (privateChatConfig.value.type == 'single') {
+      //逐条转发
+      if (privateChatConfig.value.msg.length == 1) {
+        return parseMsg(privateChatConfig.value.msg[0], false, false, false);
+      } else {
+        return t('singleMlCount', { count: privateChatConfig.value.msg.length });
+      }
+    }
+  }
+})
+const chatDataList = computed(() => selectChatDataList.value)
+const handleClick = (type) => {
+  // window.sessionStorage.setItem('MassTextDataChecked',JSON.stringify(isChecked.value))
+  setMassTextDataChecked(isChecked.value)
+  router.replace('/home/contact/massTexting/selectPage/friendGroup')
+}
+
+const isCheckAll = computed(()=>{
+  const arr = list.value.filter(el => isChecked.value.includes(el.userID))
+  return arr.length === list.value.length
+})
+// 全选
+const onCheckAll = () => {
+  // 未勾选的数据
+  const arr = list.value.filter(el => !isChecked.value.includes(el.userID));
+  arr.forEach(i => {
+    if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }else {
+      isChecked.value.push(i.userID)
+    }
+  })
+}
+// 反选
+const onInvertSelect = () => {
+  const newList = list.value.map(i => i.userID)
+  const arr = isChecked.value.filter(el => !newList.includes(el))
+  isChecked.value = arr
+}
+
+// 监听选择会话
+watch(() => massTextDataChecked.value, (newVal) => {
+  isChecked.value = newVal
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="group-details" ref="groupDetailsRef">
+    <div class="content">
+      <AppNavBar :title="$t('select_group')" views_grade="fourth_view" left-arrow @click-left="handleClick" >
+        <template #right>
+          <span class="confirm">
+            <img class="check_all" @click="onCheckAll" src="@/assets/svg/check_all.svg" alt="" v-if="!isCheckAll">
+            <img class="check_all" @click="onInvertSelect" src="@/assets/svg/check_all_active.svg" alt="" v-else>
+          </span>
+        </template>
+      </AppNavBar>
+      <div class="select-search">
+        <van-search v-model="searchForm" class="c-search" :left-icon="defaultSearch" :placeholder="$t('search')" />
+      </div>
+      <div class="recent-chat">
+        <div class="chat-content" v-if="showList.length">
+          <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+            <div class="multiple-choice">
+              <van-checkbox-group v-model="isChecked" :border="false" :max="MAX_GROUP_COUNT">
+                <van-cell-group inset>
+                  <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showList"
+                    :key="item.userID" @click="toggle(item, i)">
+                    <template #title>
+                      <van-checkbox :name="item.userID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop="onNumTips">
+                        <template #icon="props">
+                          <div class="select1">
+                            <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                          </div>
+                        </template>
+                      </van-checkbox>
+                      <Avatar width="32" height="32" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                      <div class="chat-name">
+                        <span class="chat-title">{{ item.showName }}</span>
+                      </div>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </van-checkbox-group>
+            </div>
+          </van-list>
+        </div>
+        <div class="empty" v-else>
+          <!-- <span v-if="!searchForm">{{ $t('cvNotAtUser') }}</span> -->
+          <span>{{ $t('notGroupFound',{name:searchForm}) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.group-details {
+  background-color: #fff;
+  height: 100%;
+  .confirm {
+    color: #0095F6;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+
+    .select-search {
+      padding: 0 10px;
+    }
+
+    .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+    }
+
+    .multiple {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .recent-chat {
+      padding: 0 16px;
+      overflow: auto;
+      height: calc(100% - 60px);
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content {
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 10px 0;
+
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chat-content::-webkit-scrollbar,
+  .recent-chat::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contact/massTexting/friendGroup.vue b/src/views/contact/massTexting/friendGroup.vue
new file mode 100644
index 0000000..fed6a27
--- /dev/null
+++ b/src/views/contact/massTexting/friendGroup.vue
@@ -0,0 +1,232 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, TransmitDataDialog } from '@/components/index'
+import IMG from '@/assets/chatbg.png'
+import defaultSearch from '@/assets/search-icon.svg'
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user.js";
+import { parseMsg } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const $api = inject("$api");
+const friendGroupRef = ref(null)
+useGrade(friendGroupRef, 4)
+
+const contactStore = useContactStore();
+const { chatList } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { groupChatConfig, privateChatConfig } = storeToRefs(userStore);
+// 选中的列表
+const selectChatDataList = ref([])
+
+const router = useRouter()
+const route = useRoute()
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const isMultipleChoice = ref(false)
+const list = ref([])
+let page_num = ref(1)
+onMounted(() => {
+})
+
+const groupList = ref([])
+const getList = async () => {
+  const res = await $api.contact.getFriendsGroupList()
+  if (res.code != 0) return
+  groupList.value = res.data
+}
+const showList = computed(() => {
+  let arr = []
+  arr = groupList.value.filter(item => item.group_name.indexOf(searchForm.value) != -1).slice(0, (page_num.value * 10))
+  return arr || []
+})
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (showList.value.length >= list.value.length) {
+    finished.value = true;
+  }
+  console.log('showList+list', list.value);
+}
+const toggle = (item, index) => {
+  router.replace(`/home/contact/massTexting/selectPage/friendDetails?id=${item.id}`)  
+};
+
+const handleClick = (type) => {
+  router.replace('/home/contact/massTexting/selectPage')
+}
+
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+getList()
+</script>
+
+<template>
+  <div class="friend-group" ref="friendGroupRef">
+    <div class="content">
+      <AppNavBar :title="$t('select_group')" views_grade="fourth_view" left-arrow @click-left="handleClick" ></AppNavBar>
+      <!-- <div class="select-search">
+        <van-search v-model="searchForm" class="c-search" :left-icon="defaultSearch" :placeholder="'搜索'" />
+      </div> -->
+      <div class="recent-chat">
+        <div class="chat-content" v-if="showList.length">
+          <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+            <div class="multiple-choice">
+              <van-cell clickable :border="false" :title="item.group_name" v-for="(item, i) in showList"
+                    :key="item.id" @click="toggle(item, i)">
+                <template #title>
+                  <div class="group-name">{{item.group_name}}</div>
+                </template>
+                <template #right-icon>
+                  <span class="custom-number">{{ item.member_total }}</span>
+                  <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+                </template>
+              </van-cell>
+            </div>
+          </van-list>
+        </div>
+        <div class="empty" v-else>
+          <EmptyData :description="$t('createdGroup')"></EmptyData>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.friend-group {
+  background-color: #fff;
+  height: 100%;
+  .confirm {
+    color: #0095F6;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+
+    .select-search {
+      padding: 0 10px;
+    }
+
+    .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+    }
+
+    .multiple {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .recent-chat {
+      // padding: 0 16px;
+      overflow: auto;
+      height: calc(100% - 60px);
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content {
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 19px 16px;
+          border-bottom: 1px solid #F2F4F5;
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        .group-name {
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+
+  .chat-content::-webkit-scrollbar,
+  .recent-chat::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contact/massTexting/index.vue b/src/views/contact/massTexting/index.vue
new file mode 100644
index 0000000..5b06405
--- /dev/null
+++ b/src/views/contact/massTexting/index.vue
@@ -0,0 +1,430 @@
+<script setup>
+import { ref, reactive, watch, provide } from 'vue'
+import { AppNavBar, DeleteDialog, GroupDialog, EmptyData } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import IMG from '@/assets/chatbg.png'
+import { showToast } from 'vant'
+const { t } = useI18n()
+const massTextingRef = ref(null)
+useGrade(massTextingRef, 2)
+const { setfriendGroupId } = useContactStore();
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const checkboxGroup = ref(null);
+const isDelChecked = ref(false);
+const loading = ref(false);
+const finished = ref(false);
+const page_num = ref(1);
+const groupList = ref([]);
+
+const getList = async () => {
+  const res = await $api.contact.getBatchConversationList({
+    page_number: page_num.value,
+    page_size: 15
+  })
+  if (res.code != 0) return
+  groupList.value = res.data.list || []
+  console.log('groupList',groupList.value);
+}
+
+onMounted(() => {
+  getList()
+})
+
+const onToggle = (id) => {
+  const index = isChecked.value.indexOf(id);
+  if (index === -1) {
+    isChecked.value.push(id)
+  } else {
+    isChecked.value.splice(index, 1)
+  }
+};
+
+const isChoice = ref(false)
+const onEdit = () => {
+  isChoice.value = true
+}
+const delDialogShow = ref(false)
+const onDelete = async () => {
+  if(isChecked.value.length <= 0) return showToast(t('notSelect'))
+  const res = await $api.contact.batchDeleteConversation({
+    batch_id: isChecked.value
+  })
+  if (res.code != 0) return
+  showToast(t('deleteSuccessfully'))
+  delDialogShow.value = false
+  page_num.value = 1
+  getList()
+}
+
+const onComplete = () => {
+  isChoice.value = false
+  isDelChecked.value = false
+  isChecked.value = []
+}
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (groupList.value.length >= page_num.value * 15) {
+    finished.value = true;
+  }
+}
+
+// 头像
+const generateRandomArray = (maxNumber) => Array(maxNumber).fill().map((_, index) => index + 1)
+
+// const list = ref(generateRandomArray(2))
+
+const iconClass = (list = []) => {
+  let length = list.length
+  // let className = 'icon-1'
+  let className = '30px'
+  let width = '30px'
+
+  if (length > 1) {
+    // className = 'icon-2'
+    className = '20px'
+  }
+
+  if (length > 4) {
+    // className = 'icon-3'
+    className = '13px'
+  }
+
+  return className
+}
+const showAllName = computed(() => {
+  return (arr) => {
+    return arr.map((item) => item.nick_name).join('、')
+  }
+})
+const showAllAvatar = computed(() => {
+  return (arr) => {
+    return generateRandomArray(arr.length)
+  }
+})
+const handleSelectAll = () => {
+  if (isDelChecked.value) {
+    checkboxGroup.value.toggleAll(true)
+  } else {
+    checkboxGroup.value.toggleAll();
+  }
+}
+
+watch(()=>isChecked.value, () => {
+  isDelChecked.value = isChecked.value.length === groupList.value.length
+},{
+  deep: true
+})
+
+const handleSelectItem = (val) => {
+  router.push({
+    path: '/home/contact/msgSend',
+    state: {
+      msg: JSON.stringify(val)
+    }
+  })
+}
+
+// 发起群发
+const onMassText = () => {
+  router.push('/home/contact/massTexting/selectPage')
+}
+</script>
+
+<template>
+  <div ref="massTextingRef" class="massTexting">
+    <AppNavBar :title="$t('groupSendMsg')" views_grade="secondary_view" @click-left="router.push('/home/contact')">
+      <template #right>
+        <span v-if="groupList.length">
+          <div class="nav-right" @click="onEdit" v-if="!isChoice">{{ $t('edit') }}</div>
+          <div class="nav-right" @click="onComplete" style="color: #0095F6;font-weight: 600;" v-else>{{ $t('finish') }}</div>
+        </span>
+      </template>
+    </AppNavBar>
+    <div class="massTexting-wrap">
+      <div class="massTexting-content">
+        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+          <div class="group-list">
+            <van-checkbox-group v-model="isChecked" :border="false" ref="checkboxGroup">
+              <van-cell-group inset>
+                <template v-if="isChoice">
+                  <van-cell clickable :border="false" v-for="(item, index) in groupList" :key="index" title=""
+                  @click="onToggle(item.batch_id)">
+                    <template #title>
+                      <van-checkbox :name="item.batch_id" :ref="(el) => (checkboxRefs[i] = el)" @click.stop>
+                        <template #icon="props">
+                          <div class="select1">
+                            <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                          </div>
+                        </template>
+                      </van-checkbox>
+                      <div class="wrap">
+                        <div class="icon-wrap" :style="{ gap: item.member_list.length > 4 ? '1px' : '2px' }">
+                          <Avatar :class="iconClass(item.member_list)" :width="iconClass(item.member_list)" :height="iconClass(item.member_list)" :is-group="true" :url="items.head_url"
+                            :name="items.nick_name" v-for="items in item.member_list" :key="items"  @updateUrl="url => items.head_url = url">
+                          </Avatar>
+                        </div>
+                      </div>
+                      <div class="chat-content">
+                        <div class="chat-name">
+                          <span class="chat-title">{{ showAllName(item.member_list) }}</span>
+                          <span class="custom-number">{{ $t('gsvGroupMemberValue',{num:item.member_list.length}) }}</span>
+                        </div>
+                      </div>
+                    </template>
+                  </van-cell>
+                </template>
+                <template v-else>
+                  <van-cell v-for="item in groupList" :key="item.batch_id" title="" :border="true"
+                    @click="handleSelectItem(item)">
+                    <template #title>
+                      <div class="wrap">
+                        <div class="icon-wrap" :style="{ gap: item.member_list.length > 4 ? '1px' : '2px' }">
+                          <Avatar :class="iconClass(item.member_list)" :width="iconClass(item.member_list)" :height="iconClass(item.member_list)" :is-group="true" :url="items.head_url"
+                            :name="items.nick_name" v-for="items in item.member_list" :key="items" @updateUrl="url => items.head_url = url">
+                          </Avatar>
+                        </div>
+                      </div>
+                      <div class="chat-content">
+                        <div class="chat-name">
+                          <span class="chat-title">{{ showAllName(item.member_list) }}</span>
+                          <span class="custom-number">{{ $t('gsvGroupMemberValue',{num:item.member_list.length}) }}</span>
+                        </div>
+                      </div>
+                    </template>
+                  </van-cell>
+                </template>
+              </van-cell-group>
+            </van-checkbox-group>
+            <div class="btn" v-if="!isChoice">
+              <van-button @click="onMassText">{{$t('addGroupSend')}}</van-button>
+            </div>
+            <div class="del" v-else>
+              <div class="del-checked" @click="handleSelectAll">
+                <van-checkbox v-model="isDelChecked">
+                  <template #icon="props">
+                    <div class="select1">
+                      <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                    </div>
+                  </template>
+                  <template #default>{{$t('selectAll')}}</template>
+                </van-checkbox>
+              </div>
+              <div class="del-btn" @click="delDialogShow = true">{{$t('delete')}}</div>
+            </div>
+            <EmptyData v-if="groupList.length === 0" :description="$t('groupSendNoData')"></EmptyData>
+          </div>
+        </van-list>
+        <van-dialog v-model:show="delDialogShow" :title="$t('confirmDeleteTitle')" :confirmButtonText="$t('delete')" show-cancel-button
+          @confirm="onDelete">
+          <!-- <div class="dialog-text">将同时删除本地聊天记录</div> -->
+        </van-dialog>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+  .btn {
+    width: calc(100% - 375px) !important;
+    left: 375px !important;
+    right: 0 !important;
+  }
+}
+
+.massTexting-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .massTexting-content {
+    .group-list {
+      height: calc(100vh - 56px);
+      overflow-y: auto;
+      padding-bottom: 150px;
+
+      .select1 {
+        width: 16px;
+        height: 16px;
+        display: flex;
+        margin-right: 8px;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        border-radius: 50%;
+        border: 1px solid #d9d9d9;
+      }
+
+      :deep(.van-cell-group--inset) {
+        margin: auto;
+      }
+
+      :deep(.van-cell) {
+        padding: 12px 16px;
+
+        .van-cell__title {
+          display: flex;
+          align-items: center;
+
+          .chat-title {
+            display: inline-block;
+            color: #1B1B22;
+            font-family: PingFang SC;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .chat-content {
+        margin-left: 8px;
+        width: 247px;
+        flex: 1;
+
+        .chat-name,
+        .chat-msg {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+        }
+
+        .chat-name {
+          .chat-title {
+            width: 190px;
+            color: #1B1B22;
+            white-space: nowrap;
+            /* 不换行 */
+            overflow: hidden;
+            /* 超出部分隐藏 */
+            text-overflow: ellipsis;
+            /* 超出部分显示省略号 */
+          }
+
+          .custom-number {
+            font-size: 0.875rem;
+            color: #538FE1;
+          }
+        }
+
+        .chat-msg {}
+      }
+
+      .btn {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        padding: 10px 16px;
+        background: #fff;
+
+        :deep(.van-button--normal) {
+          height: 46px;
+          width: 100%;
+          color: #FFF;
+          background-color: #1B1B22;
+          border: none;
+          border-radius: 12px;
+        }
+      }
+
+      .del {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 16px;
+        background: #fff;
+        border-top: 1px solid #0000001A;
+
+        .select1 {
+          margin-right: auto;
+
+          :deep(.van-checkbox__label) {
+            color: #1B1B22;
+            font-size: 1rem;
+          }
+        }
+
+        .del-btn {
+          font-size: 0.875rem;
+          color: #EA6558;
+        }
+      }
+    }
+  }
+
+  .dialog-text {
+    padding: 20px 0 24px 0;
+    text-align: center;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    /* 150% */
+    letter-spacing: 0.28px;
+  }
+
+  :deep(.van-dialog__confirm) {
+    color: #FC5A50;
+  }
+
+  .group-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .wrap {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .icon-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1px;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    padding: 3px;
+    background-color: #1B1B221A;
+  }
+
+  .icon.icon-1 {
+    width: 30px;
+    height: 30px;
+  }
+
+  .icon.icon-2 {
+    width: 20px;
+    height: 20px;
+  }
+
+  .icon.icon-3 {
+    width: 13px;
+    height: 13px;
+  }
+}
+</style>
diff --git a/src/views/contact/massTexting/msgSend.vue b/src/views/contact/massTexting/msgSend.vue
new file mode 100644
index 0000000..67ca82e
--- /dev/null
+++ b/src/views/contact/massTexting/msgSend.vue
@@ -0,0 +1,1970 @@
+<script setup>
+import { useGrade } from "@/utils/levelConfig";
+import { storeToRefs } from "pinia";
+import { AppNavBar, CommonFooter } from "@/components/index.js";
+import {
+  onActivated,
+  reactive,
+  inject,
+  ref,
+  onUpdated,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  computed
+} from "vue";
+import popover from "@/views/dialogue/privateChat/components/popover.vue";
+import { useRoute, useRouter } from "vue-router";
+import recorder from "@/views/dialogue/privateChat/components/recorder.js";
+import emoji from "@/views/dialogue/privateChat/components/emoji.vue";
+import MsgMedia from "@/views/dialogue/privateChat/components/media.vue";
+import { showImagePreview, showToast, showConfirmDialog } from "vant";
+import { AppPopup, CommonPreview } from "@/components/index.js";
+import { getSDK } from "@/utils/openIM";
+import { useUserStore } from "@/stores/user.js";
+import appAudio from "@/views/dialogue/privateChat/components/audio.vue";
+import { useContactStore } from "@/stores/contact";
+import { formatMinutestamp, parseMsg, splitArray } from "@/utils/tools";
+import { getPicInfo } from "@/utils/common";
+import usePasteImg from '@/use/usePasteImg'
+import { base64toFile } from "@/utils/sendMessage.js";
+import { checkMessage } from "@/utils/chatRule";
+import { useFriendStore } from '@/stores/modules/membership-info'
+
+const friendState = useFriendStore()
+const contactStore = useContactStore();
+const {
+  getChatGroupList,
+} = contactStore
+const { contactList,chatList,allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const actionsFoward = reactive([
+  { name: t("singleShareMsg"), color: "" },
+  { name: t("groupShareMsg"), color: "" }
+]);
+const userStore = useUserStore();
+const { setPrivateChatConfig } = userStore;
+const { userBgSettings, userInfo, privateChatConfig } = storeToRefs(userStore);
+const $api = inject("$api");
+const route = useRoute();
+const router = useRouter();
+const fowardVisible = ref(false);
+const showFoward = ref(false);
+const OpenIM = getSDK();
+const enablePull = ref(false);
+
+// 截图逻辑
+usePasteImg({
+  targetId: 'sendInput',
+  parseOk: (url) => {
+    handle_send_img({
+      file: base64toFile(url)
+    })
+  }
+})
+
+//群发 ref
+const msgSend = ref();
+let MsgData = JSON.parse(history.state.msg);
+const showSendNumber = computed(() => MsgData.member_list.length);
+const showSendMember = computed(() => MsgData.member_list);
+
+// 处理拿到的数据，来判断这个好友或者群聊存不存在
+const processMemberList = () => {
+  MsgData.member_list.forEach(member => {
+    if (member.type === 1) {
+      const found = contactList.value.find(contact => contact.userID === member.member_id);
+      if (!found) {
+        member.isNothingness = true; // 添加 isNothingness 属性
+      }
+    } else if (member.type === 2) {
+      const found = chatList.value.find(chat => chat.groupID === member.member_id);
+      if (!found) {
+        member.isNothingness = true; // 添加 isNothingness 属性
+      }
+    }
+  });
+};
+const msgSend_footer = ref();
+//是否展示表情包
+const isShow_emoji = ref(false);
+//是否展示更多信息
+const isShow_media = ref(false);
+//下拉刷新
+const loadingRefresh = ref(false);
+//语音显示
+const isShow_recorder = ref(false);
+//语音初始化
+const REC = recorder();
+//消息删除弹窗显示控制
+const isShow_msg_delete = reactive({
+  show: false,
+  currentIndex: 0, //当前删除索引
+  sendID: "0",
+  status: 2
+});
+const user_info_recv = reactive({
+  online: true,
+  nickName: "",
+  userID: route.params.userID,
+  faceURL: ""
+});
+
+const user_info_send = {
+  nickName: userInfo.value.nickname,
+  userID: userInfo.value.userID
+};
+const curLastMinSeq = ref(0);
+const startClientMsgID = ref("");
+//当前会话ID
+const conversationID = ref("");
+//拉取当前页数
+const msg_pageIndex = ref(1);
+//创建消息体 字段描述地址： https://docs.openim.io/zh-Hans/sdks/class/message/messageInfo
+// 预览组件
+const showPreview = ref(false);
+const previewArr = ref([]);
+// 传入预览组件当前消息id
+const currentId = ref("");
+const create_msg_info = () => ({
+  //1 单聊 3群聊 4通知
+  sessionType: "",
+  clientMsgID: "1",
+  sendTime: "",
+  sendID: user_info_send.userID,
+  recvID: user_info_recv.userID,
+  senderFaceUrl: "", //发送头像
+  isRead: false,
+  isLoading: true,
+  isSend: true, //是否发送成功
+  contentType: 101, // 101文本 102图片 104视频 301时间(自定义)
+  showPopover: false, //每个消息选项显示
+  senderNickname: userInfo.value.nickname,
+  status: 1, //消息状态 1 发送中 2成功 3失败
+  textElem: {
+    content: ""
+  },
+  videoElem: {
+    videoUrl: ""
+  },
+  pictureElem: {
+    sourcePath: "",
+    sourcePicture: {
+      url: ""
+    },
+    bigPicture: "",
+    snapshotPicture: ""
+  },
+  soundElem: {
+    sourceUrl: "",
+    duration: 0
+  },
+  quoteElem: {
+    text: "",
+    quoteMessage: {
+      contentType: 101,
+      senderNickname: ""
+    }
+  } //引用消息
+});
+//引用消息
+const isShow_msgQuote = reactive({
+  show: false
+});
+useGrade(msgSend, 2);
+//消息内容
+const msg_info = reactive(create_msg_info());
+//消息数据
+const msg_list = ref([]);
+// 图片视频预览
+const imagePreviewShow = ref(false);
+// 图片视频预览数据
+const images = ref([]);
+//根据不同类型发消息
+const send_msg = async msg => {
+  let file = msg.file;
+  const list = {
+    //文本消息
+    101: async () => {
+      return await OpenIM.createTextMessage(msg.textElem.content);
+    },
+    //图片消息
+    102: async () => {
+      // const res = useUpload_oss(2,file)
+      const {
+        data: { url }
+      } = await OpenIM.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: OpenIM.createuuid(),
+        file,
+        size: file.size
+      });
+      file.url = url;
+      msg.pictureElem.sourcePicture.url = url;
+      const PictureInfo = {
+        uuID: OpenIM.createuuid(),
+        size: file.size,
+        type: file.type,
+        url: file.url,
+        width: 100,
+        height: 100
+      };
+      return await OpenIM.createImageMessage({
+        sourcePicture: PictureInfo,
+        bigPicture: PictureInfo,
+        snapshotPicture: PictureInfo,
+        sourcePath: ""
+      });
+    },
+    //视频消息
+    104: async () => {
+      //避免资源浪费
+      let {
+        data: { url }
+      } = await OpenIM.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: OpenIM.createuuid(),
+        file,
+        size: file.size
+      });
+      // let url= 'https://dev-openim.exchangs.top/chat-server-api/object/8553286385/测试.mp4'
+      //获取封面
+      const snapshotFile = await getVideoFrameImage(url, file);
+      const res = await OpenIM.uploadFile({
+        name: snapshotFile.name,
+        contentType: snapshotFile.type,
+        uuid: OpenIM.createuuid(),
+        file: snapshotFile,
+        size: snapshotFile.size
+      });
+      snapshotFile.url = res.data.url;
+      file.url = url;
+      msg.videoElem.videoUrl = url;
+      return await OpenIM.createVideoMessage({
+        videoPath: "",
+        duration: 30,
+        videoType: file.type,
+        snapshotPath: "",
+        videoUUID: OpenIM.createuuid(),
+        videoUrl: file.url,
+        videoSize: file.size,
+        snapshotUUID: OpenIM.createuuid(),
+        snapshotSize: snapshotFile.size,
+        snapshotUrl: snapshotFile.url,
+        snapshotWidth: snapshotFile.width,
+        snapshotHeight: snapshotFile.height,
+        snapShotType: snapshotFile.type
+      });
+    },
+    //音频消息
+    103: async () => {
+      const {
+        data: { url }
+      } = await OpenIM.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: OpenIM.createuuid(),
+        file,
+        size: file.size
+      });
+
+      return await OpenIM.createSoundMessage({
+        uuid: OpenIM.createuuid(),
+        soundPath: "",
+        sourceUrl: url,
+        dataSize: file.size,
+        duration: file.duration,
+        soundType: file.type
+      });
+    }
+  };
+  const msgItem = await list[msg.contentType]();
+  if (typeof msgItem["data"] === "string") {
+    console.warn("初始化数据错误为空:", msg);
+  }
+  await handleMessage(msgItem["data"]);
+};
+const handleMessage = async msgItem => {
+  console.log('msgItem1',msgItem);
+  let cType = msgItem.contentType
+  if(cType === 101 || cType === 102 || cType === 104 || cType === 105 || cType === 106){
+  // 发言连续校验
+  const messageList = msg_list.value.map(item => item.content)
+  let checkMessageRes = await checkMessage(messageList,msgItem);
+  console.log('msgItem',msg_list.value,msgItem,checkMessageRes,msg_info);
+  if (checkMessageRes.code === 101) {
+    await showConfirmDialog({
+      title: t("dialog_tip1"),
+      message: ('请勿重复多次发送相同内容'),
+      confirmButtonText: t('confirm'),
+      confirmButtonColor: "#5F97E3",
+      showCancelButton: false
+    });
+    handle_reset()
+    return
+  }
+  }
+  if (msgItem.contentType === 101) {
+    showSendMember.value.forEach(async item => {
+      if (item.type === 1) {
+        try {
+          await OpenIM.sendMessage({
+            recvID: item.member_id,
+            groupID: "",
+            message: msgItem,
+            offlinePushInfo: createByData(msgItem, true, "")
+          });
+        } catch (error) {}
+      } else if (item.type === 2) {
+        await OpenIM.sendMessage({
+          recvID: "",
+          groupID: item.member_id,
+          message: msgItem,
+          offlinePushInfo: createByData(msgItem, false, item.nick_name)
+        });
+      }
+    });
+    await $api.contact.sendMessageByBatchConversation({
+      batch_id: MsgData.batch_id,
+      client_message_id: msgItem.clientMsgID,
+      content: JSON.stringify(msgItem)
+    });
+    msg_list.value = [];
+    pageNumber.value = 0;
+    msg_info.textElem.content = "";
+    onRefresh();
+    return;
+  } else {
+    showSendMember.value.forEach(async item => {
+      if (item.type === 1) {
+        try {
+          await OpenIM.sendMessageNotOss({
+            recvID: item.member_id,
+            groupID: "",
+            message: msgItem,
+            offlinePushInfo: createByData(msgItem, true, "")
+          });
+        } catch (error) {}
+      } else if (item.type === 2) {
+        await OpenIM.sendMessageNotOss({
+          recvID: "",
+          groupID: item.member_id,
+          message: msgItem,
+          offlinePushInfo: createByData(msgItem, false, item.nick_name)
+        });
+      }
+    });
+    await $api.contact.sendMessageByBatchConversation({
+      batch_id: MsgData.batch_id,
+      client_message_id: msgItem.clientMsgID,
+      content: JSON.stringify(msgItem)
+    });
+    pageNumber.value = 0;
+    msg_list.value = [];
+    msg_info.textElem.content = "";
+    onRefresh();
+    handle_reset()
+  }
+};
+const createByData = (message, isSingleChat, groupName = "") => {
+  let title = "";
+  let desc = "";
+  if (isSingleChat) {
+    title = message.senderNickname ?? "-";
+    desc = getMsgContentTipTexts(message, false);
+  } else {
+    title = groupName ?? "-";
+    desc = getMsgContentTipText(message);
+  }
+  return {
+    title: title,
+    desc: desc,
+    iOSBadgeCount: true,
+    iOSPushSound: "+1"
+  };
+};
+///超过36个字符部分，使用...代替
+const getMsgContentTipTexts = (msg, showSendName = true) => {
+  let text = parseMsg(msg, true, true, true, contactList.value);
+  text = subCharacter(text, 8, 0, 12, "...");
+  return text;
+};
+///超过36个字符部分，使用...代替
+const getMsgContentTipText = (msg, showSendName = true) => {
+  let text = parseMsg(msg, true, true, true, contactList.value);
+  const nickName = subCharacter(msg.senderNickname, 8, 0, 12, "...");
+  text = subCharacter(text, 8, 0, 12, "...");
+  return `${nickName}:${text}`;
+};
+///对文本进行裁剪
+const subCharacter = (
+  text,
+  maxLength,
+  start = 0,
+  end,
+  endStr,
+  charactersLength
+) => {
+  const characters = text;
+  if ((charactersLength ? charactersLength : characters.length) > maxLength) {
+    return characters.substring(start, end) + endStr;
+  } else {
+    return text;
+  }
+};
+/**
+ * 处理消息发送
+ * @param  msg_info_new  消息结构体
+ * @param {boolean} repeat 是否二次发送
+ * @param {Number} currentIndex 当前索引，二次发送才有
+ * ***/
+const handle_send_message = async (
+  msg_info_new,
+  repeat = false,
+  currentIndex
+) => {
+  await send_msg(msg_info_new);
+  scrollToBottom();
+};
+// 图片、视频消息处理
+const handle_send_media_message = async (mediaObj) => {
+  const { urlList, urlMsg } = mediaObj
+  if(urlList.length > 0) {
+    if(urlMsg.contentType === 102) {
+    // 图片消息处理
+      const limit = 1
+      const arr = splitArray(urlList, limit)
+      for (const files of arr) {
+        await Promise.all([...files.map(file => handle_send_img(file))])
+      }
+    }else if(urlMsg.contentType === 104) {
+      // 视频消息处理
+      urlList.forEach( async(item) => {
+        let file = item.file;
+        let msgItem;
+            //避免资源浪费
+            let {
+          data: { url }
+        } = await OpenIM.uploadFile({
+          name: file.name,
+          contentType: file.type,
+          uuid: OpenIM.createuuid(),
+          file,
+          size: file.size
+        });
+        // let url= 'https://dev-openim.exchangs.top/chat-server-api/object/8553286385/测试.mp4'
+        //获取封面
+        const snapshotFile = await getVideoFrameImage(url, file);
+        const res = await OpenIM.uploadFile({
+          name: snapshotFile.name,
+          contentType: snapshotFile.type,
+          uuid: OpenIM.createuuid(),
+          file: snapshotFile,
+          size: snapshotFile.size
+        });
+        snapshotFile.url = res.data.url;
+        file.url = url;
+        const { data: videoMsgData } =  await OpenIM.createVideoMessage({
+            videoPath: "",
+            duration: 30,
+            videoType: file.type,
+            snapshotPath: "",
+            videoUUID: OpenIM.createuuid(),
+            videoUrl: file.url,
+            videoSize: file.size,
+            snapshotUUID: OpenIM.createuuid(),
+            snapshotSize: snapshotFile.size,
+            snapshotUrl: snapshotFile.url,
+            snapshotWidth: snapshotFile.width,
+            snapshotHeight: snapshotFile.height,
+            snapShotType: snapshotFile.type
+          });
+          handleMessage(videoMsgData)
+      })
+    }
+  }
+}
+
+// 单独发送图片处理
+const handle_send_img = async (fileObject) => {
+  const { file } = fileObject
+  const { width, height } = await getPicInfo(file);
+  // const imgMsgItem = JSON.parse(JSON.stringify(defaultInfo))
+  // console.log('handle_send_img::', fileObject, imgMsgItem)
+  // imgMsgItem.pictureElem.sourcePicture = {
+  //   url: content,
+  //   uuID: OpenIM.createuuid(),
+  //   width,
+  //   height
+  // }
+  // 上传图片
+  const {
+    data: { url }
+  } = await OpenIM.uploadFile({
+    name: file.name,
+    contentType: file.type,
+    uuid: OpenIM.createuuid(),
+    file,
+    size: file.size
+  });
+  file.url = url;
+  const PictureInfo = {
+    uuID: OpenIM.createuuid(),
+    size: file.size,
+    type: file.type,
+    url: file.url,
+    width,
+    height
+  };
+  // 创建图片消息
+  const { data: imgMsgData } = await OpenIM.createImageMessage({
+    sourcePicture: PictureInfo,
+    bigPicture: PictureInfo,
+    snapshotPicture: PictureInfo,
+    sourcePath: "",
+  })
+  console.log('imgMsgData',imgMsgData);
+  await handleMessage(imgMsgData);
+}
+
+//处理表情与媒体切换
+const handle_switch_emoji = val => {
+  isShow_emoji.value = !isShow_emoji.value;
+  isShow_media.value = false;
+};
+const handle_switch_media = () => {
+  isShow_media.value = !isShow_media.value;
+  isShow_emoji.value = false;
+};
+//失去焦点 重置显示
+const handle_reset = () => {
+  isShow_emoji.value = false;
+  isShow_media.value = false;
+  isShow_msgQuote.show = false;
+  Object.assign(msg_info, create_msg_info());
+};
+//canvas视频截图
+const getVideoFrameImage = (url, file, currentTime = 1, width = 160) => {
+  const fileName = file.name.split(".")[0];
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.setAttribute("crossOrigin", "anonymous");
+    video.setAttribute("preload", "metadata");
+    video.setAttribute("src", url);
+    video.setAttribute("style", `width:${width}px`);
+
+    video.currentTime = currentTime;
+    document.body.appendChild(video);
+    video.addEventListener("loadeddata", function() {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      const height = video.clientHeight;
+      video.height = height;
+      canvas.height = height;
+      canvas.getContext("2d").drawImage(video, 0, 0, width, height);
+      const base64String = canvas.toDataURL("image/png");
+      const binaryData = atob(base64String.split(",")[1]);
+      const uint8Array = new Uint8Array(binaryData.length);
+      for (let i = 0; i < binaryData.length; i++) {
+        uint8Array[i] = binaryData.charCodeAt(i);
+      }
+      const blob = new Blob([uint8Array], { type: "image/png" });
+      const file = new File([blob], fileName + "image.png", {
+        type: "image/png"
+      });
+      file.width = width;
+      file.height = height;
+      video.remove();
+      resolve(file);
+    });
+  });
+};
+//开始录制
+const recorder_open = () => {
+  isShow_recorder.value = true;
+  REC.open(
+    async () => {
+      console.log("录音已打开");
+      //创建音频可视化图形绘制对象
+      REC.start();
+      const el = document.querySelector(".recorder_wave");
+      el.appendChild(REC.wave.canvas);
+    },
+    (msg, isUserNotAllow) => {
+      //用户拒绝了录音权限，或者浏览器不支持录音
+      console.log(
+        (isUserNotAllow ? "UserNotAllow，" : "") + t("unRecard") + msg
+      );
+      showToast((isUserNotAllow ? "UserNotAllow，" : "") + t("unRecard") + msg);
+    }
+  );
+};
+//删除 语音
+const recorder_delete = () => {
+  isShow_recorder.value = false;
+  REC.stop(
+    (blob, duration) => {
+      //blob就是我们要的录音文件对象，可以上传，或者本地播放
+      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
+      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+
+      console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+      msg_info.file = new File([blob], OpenIM.createuuid() + ".mp3", {
+        type: blob.type
+      });
+      msg_info.file.duration = duration;
+    },
+    err => {
+      console.error("结束录音出错：" + err);
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    }
+  );
+};
+//发送语音消息
+const recorder_send = () => {
+  isShow_recorder.value = false;
+  REC.stop(
+    (blob, duration) => {
+      //blob就是我们要的录音文件对象，可以上传，或者本地播放
+      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
+      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+      console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+      msg_info.file = new File([blob], OpenIM.createuuid() + ".mp3", {
+        type: blob.type
+      });
+      msg_info.contentType = 103;
+      msg_info.file.duration = msg_info.soundElem.duration = Math.floor(
+        duration / 1000
+      );
+      handle_send_message(msg_info);
+    },
+    err => {
+      console.error("结束录音出错：" + err);
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    }
+  );
+};
+/**
+ * 设置时间
+ * @param {Array} msgList 消息列表
+ * @param {Number} interval 间隔时间毫秒 默认1分钟
+ * ***/
+const setTime = (msgList, interval = 60000 * 5) => {
+  const msgList_new = [...msgList];
+  if (msgList.length > 0) {
+    let time = msgList[0].createTime;
+    let i = 0;
+    msgList.forEach((msg, index) => {
+      if (msg.createTime - time > interval) {
+        msgList_new.splice(index + i, 0, {
+          ...msg,
+          contentType: 301,
+          createTime: msg.createTime
+        });
+        i++;
+        time = msg.createTime;
+      }
+    });
+  }
+  return msgList_new;
+};
+// /**
+//  * 下拉刷新
+//  * ***/
+let pageNumber = ref(0);
+const onRefresh = async () => {
+  let params = {
+    batch_id: MsgData.batch_id,
+    page_number: pageNumber.value + 1,
+    page_size: 20
+  };
+  const res = await $api.contact.getMessageListByBatchConversation(params);
+  if (res.code !== 0) return;
+  const arr = res.data.list || [];
+  let list = arr.map(item => {
+    return {
+      ...item,
+      content: JSON.parse(item.content)
+    };
+  });
+  if (msg_list.value.length >= res.data.total) {
+    return;
+  }
+  msg_list.value = [...list, ...msg_list.value].slice().reverse();
+  scrollToBottom();
+  console.log("MsgData555", msg_list.value);
+};
+onRefresh();
+const handlePreview = val => {
+  currentId.value = val.clientMsgID;
+  const tempArr = [];
+  msg_list.value.forEach(item => {
+    if (item.content.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = item.content.videoElem;
+      tempArr.push({
+        type: videoType,
+        snapshotUrl: snapshotUrl,
+        url: videoUrl,
+        id: item.content.clientMsgID
+      });
+    } else if (item.content.contentType === 102) {
+      tempArr.push({
+        ...item.content.pictureElem.snapshotPicture,
+        id: item.content.clientMsgID
+      });
+    }
+  });
+  const currentIndex = tempArr.findIndex(item => item.id === val.clientMsgID);
+  if (currentIndex > -1) {
+    const currentItem = tempArr[currentIndex];
+    tempArr.splice(currentIndex, 1); // 从当前位置移除
+    tempArr.unshift(currentItem); // 将当前元素插入到数组的第一项
+  }
+  previewArr.value = tempArr;
+  showPreview.value = true;
+};
+const closePreview = val => {
+  showPreview.value = false;
+  currentId.value = "";
+  previewArr.value = [];
+};
+const chatBox = ref("");
+const scrollToBottom = () => {
+  const element = chatBox.value;
+  if (element?.scrollHeight) {
+    const isScrolledToBottom =
+      element?.scrollHeight - element?.scrollTop === element?.clientHeight;
+    if (!isScrolledToBottom) {
+      element.scrollTop = element.scrollHeight; // 将滚动条滚动到底部
+    }
+  }
+};
+// 向上滚动加载更多
+const handleScroll = () => {
+  const element = chatBox.value;
+  if (element.scrollTop < 4) {
+    if (loadingRefresh.value) return;
+    onRefresh();
+  }
+};
+const showPopover = ref(false);
+const transformText = val => {
+  return JSON.parse(val.customElem.data);
+};
+
+const handleClick = () => {
+  // router.go(-1)
+  router.push("/home/contact/massTexting");
+};
+
+// 查看全部
+const onView = () => {
+  showFoward.value = true;
+};
+
+const getMsgData = async () => {};
+
+// pc滚动
+const onWheel = e => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+};
+const handleCloseActionBar = () => {
+  isShow_media.value = false;
+};
+const hanldeEmojiselect = () => {
+  isShow_emoji.value = false;
+};
+const windows_or_mac = ref(1);//false--windows系统；true--mac系统
+const pc_or_mobile_flag = ref(false)
+//如果是pc端，需要提示按钮作用，pc端需要区分是window还是mac
+//如果是手机端，需要在输入框有值时，需要将文件选择功能变成发送按钮
+function handleResize() {
+  pc_or_mobile_flag.value = pc_or_mobile()
+  checkOS()
+}
+
+function pc_or_mobile(){
+  const userAgent = navigator.userAgent;
+  const mobileKeywords = [
+    "Android",
+    "webOS",
+    "iPhone",
+    "iPad",
+    "iPod",
+    "BlackBerry",
+    "Windows Phone"
+  ];
+  for (let i = 0; i < mobileKeywords.length; i++) {
+    if (userAgent.indexOf(mobileKeywords[i]) > -1) {
+      return true;
+    }
+  }
+  return false;
+}
+/**
+ * 判断是mac还是win
+ */
+function checkOS() {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const isWindows = userAgent.toLowerCase().indexOf('win') > -1;
+    if(isWindows)return windows_or_mac.value = 1
+    const isMacOS = userAgent.toLowerCase().indexOf('mac') > -1;
+    windows_or_mac.value = 2
+}
+const currentEvent = ref()
+/**
+ * 输入框组合键换行，空格键发送功能
+ * @param event 
+ */
+const handle_send_message_keyDown = (event) => {
+  const keyCode = event.keyCode || event.which || event.charCode;
+  //组合键 Enter+Ctrl或者Enter+Alt进行换行
+  if((event.ctrlKey||event.altKey)&&keyCode === 13){
+    currentEvent.value = event.target 
+    const cursorPosition = currentEvent.value.selectionStart
+    // 拆分成两段文本
+    const textBeforeCursor = msg_info.textElem.content.slice(0, cursorPosition)
+    const textAfterCursor =msg_info.textElem.content.slice(cursorPosition)
+    // 合并为带有换行符的新文本
+    const newText = textBeforeCursor + '\n' + textAfterCursor  
+    // 更新输入框的值
+    msg_info.textElem.content = newText  
+    nextTick(() => {
+      // 设置光标位置为: start 和 end 相同，光标会移动到换行符后面的新行首
+      currentEvent.value.setSelectionRange(cursorPosition + 1, cursorPosition + 1)
+    })
+
+    return 
+  }
+  if (keyCode === 13&&!pc_or_mobile_flag.value ) {
+    event.preventDefault(); //阻止回车键默认行为，内容为空时，不允许按空格
+    
+    if(!event.shiftKey && msg_info.textElem.content.length){
+    
+      handle_send_message(msg_info)
+    }
+  }
+};
+// 群聊-好友点击事件：当点击的好友或者群聊不存在的时候给提示
+const handeAvatarBar = (item) => {
+  // 好友不存在
+  if (item.type===1 && item.isNothingness) {
+    showToast(t("notShouldFoundUser"));
+  }
+  // 群聊不存在
+  if (item.type===2 && item.isNothingness) {
+    showToast(t("notFoundGroup"));
+  }
+};
+
+onMounted(async () => {
+  await handleResize()
+  await getChatGroupList()
+  await processMemberList()
+  window.addEventListener('resize', handleResize);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds)
+// 判断是管理员还是群主
+const showGroupOwner = computed(() => {
+  return (val) => {
+    if (!val) return "";
+    const userID = val.member_id
+    // 先判断是否是群组成员
+    if (isMemberFriendIds.value.includes(userID)) return "group";
+    // 如果不是群组成员，则查找是否为群主或管理员
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) {
+        return "group";
+      } else if (mapObj.roleLevel === 60) {
+        return "admin";
+      }
+    }
+    return "";
+  };
+});
+</script>
+
+<template>
+  <!---私聊--->
+  <div class="msg-send" ref="msgSend">
+    <AppNavBar
+      :title="$t('sendTotalGe',{num: showSendNumber})"
+      left-arrow
+      views_grade="secondary_view"
+      @click-left="handleClick"
+    >
+    </AppNavBar>
+    <div class="send-list">
+      <div class="selected">
+        <div class="left scroll-wrapper" @wheel="onWheel">
+          <div class="left-content">
+            <div class="item" v-for="item in showSendMember" :key="item">
+              <div :class="{ 'avatar': true, 'is-not-inexistence': item.isNothingness }">
+                <Avatar
+                  width="36"
+                  height="36"
+                  :url="item.head_url"
+                  :is-group="item.type === 2"
+                  :name="item.nick_name"
+                  @updateUrl="url => item.head_url = url"
+                >
+                </Avatar>
+                <div class="name">{{ item.nick_name }}</div>
+              </div>
+            </div>
+            <div class="placeholder-item"></div>
+          </div>
+        </div>
+        <div class="righ">
+          <div class="linear"></div>
+          <div class="num" @click="onView">{{ $t("showAll") }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!---刷新层--->
+    <div :class="['chatBox']">
+      <div
+        ref="chatBox"
+        class="chatBox_content msg-send_body"
+        @scroll="handleScroll"
+      >
+        <div
+          class="cell"
+          v-for="(val, index) in msg_list"
+          :key="index"
+        >
+          <!--消息主体 begin-->
+          <div
+            class="cell_right"
+            :class="{
+              cell_background_none:
+                val.content?.contentType === 102 ||
+                val.content?.contentType === 104
+            }"
+            @contextmenu="e => e.preventDefault()"
+          >
+            <div
+              class="cell-text cell_msg"
+              v-if="val.content?.contentType === 101"
+            >
+              <!--文本内容-->
+              {{ val.content.textElem.content}}
+            </div>
+            <div
+              class="cell-img cell_msg"
+              v-if="val.content?.contentType === 102"
+            >
+              <!--图片  @click="showImagePreview([val.content.content])"-->
+              <cdnSource v-if="val.content.pictureElem.snapshotPicture.url" :defaultUrl="val.content.pictureElem.snapshotPicture.url" :source="val">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image
+                    class="message_img"
+                    width="90px"
+                    height="160px"
+                    fit="cover"
+                    @click="handlePreview(val.content)"
+                    :src="cdnUrl"
+                    :show-error="true"
+                  />
+                </template>
+              </cdnSource>
+            </div>
+
+            <div
+              class="cell-video cell_msg"
+              v-if="val.content?.contentType === 104"
+              @click="handlePreview(val.content)"
+            >
+              <!----aa视频---->
+              <video
+                class="video"
+                :src="val.content.videoElem.videoUrl"
+                crossOrigin="anonymous"
+                preload="metadata"
+              ></video>
+              <div class="video_icon">
+                <img src="@/assets/svg/bofang.svg" alt="" />
+              </div>
+            </div>
+            <div
+              class="cell-audio cell_msg"
+              v-if="val.content?.contentType === 103"
+            >
+              <!--语音消息-->
+              <app-audio :msg="val.content"></app-audio>
+            </div>
+          </div>
+          <!--消息主体 end-->
+          <!-- <div v-if="val.content.contentType === 301" class="withdraw">
+            {{ formatMinutestamp(val.content.createTime) }}
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <!--底部消息输入-->
+    <div class="privateChat_footer" ref="privateChat_footer">
+      <div class="container" v-if="!isShow_recorder">
+        <van-field
+          v-model.trim="msg_info.textElem.content"
+          rows="1"
+          :autosize="{ maxHeight: 160, minHeight: 30 }"
+          label=""
+          type="textarea"
+          :placeholder="pc_or_mobile_flag?'':`${windows_or_mac==1?$t('enterAndCtrl'):$t('enterAndCtrlIOS')}`" 
+          class="msg_txt"
+          id="sendInput"
+          @keydown.enter="handle_send_message_keyDown"
+        >
+          <template #left-icon>
+            <div class="icon_recording" @click="recorder_open">
+              <img src="@/assets/img/msg_recording.svg" alt="" />
+            </div>
+          </template>
+        </van-field>
+        <van-icon name="smile-o" @click="handle_switch_emoji" />
+        <img
+          class="icon_send"
+          @click="handle_send_message(msg_info)"
+          src="@/assets/img/msg_Vector.svg"
+          alt=""
+          v-if="msg_info.textElem.content.length"
+        />
+        <van-icon name="add-o" v-else @click="handle_switch_media" />
+      </div>
+      <!--录音-->
+      <div class="recorder" v-if="isShow_recorder">
+        <img
+          src="@/assets/img/msg_delete_blue.svg"
+          alt=""
+          @click="recorder_delete"
+        />
+        <div ref="recorder_wave" class="recorder_wave"></div>
+        <img src="@/assets/img/msg_Vector.svg" alt="" @click="recorder_send" />
+      </div>
+
+      <emoji
+        @closeEmojiselect="hanldeEmojiselect"
+        :msg="msg_info"
+        v-if="isShow_emoji"
+      ></emoji>
+      <MsgMedia
+        @closeActionBar="handleCloseActionBar"
+        v-if="isShow_media"
+        @handle_send_message="handle_send_media_message"
+        :msg="msg_info"
+        :isFilesUpload="false"
+      >
+      </MsgMedia>
+    </div>
+
+    <CommonPreview
+      v-model="showPreview"
+      :currentId="currentId"
+      :images="previewArr"
+      @getList="closePreview"
+    >
+    </CommonPreview>
+    <van-action-sheet v-model:show="showFoward">
+      <div class="send-object">
+        <div class="title">{{ $t('allCount',{num: showSendNumber}) }}</div>
+        <div class="close" @click="showFoward = false">
+          <img src="@/assets/svg/close-down.svg" alt="" />
+        </div>
+        <div class="content">
+          <div class="srocll">
+            <template v-for="item in showSendMember" :key="item">
+              <div class="item" :class="{'is-not-inexistence': item.isNothingness }" @click="handeAvatarBar(item)">
+                <div class="item-avatar">
+                  <Avatar
+                    width="40"
+                    height="40"
+                    round
+                    :url="item.head_url"
+                    :is-group="item.type === 2"
+                    :name="item.nick_name"
+                    @updateUrl="url => item.head_url = url"
+                  >
+                  </Avatar>
+                </div>
+                <div class="name" v-if="item.type === 2 || !showGroupOwner(item)">
+                  <img
+                    v-if="item.type === 2"
+                    class="flag"
+                    src="@/assets/qunzu-3.svg"
+                    alt=""
+                  />
+                  <span>{{ item.nick_name }}</span>
+                </div>
+                <CommonLottie
+                  class="new-friend-name"
+                  v-if="item.type === 1"
+                  :isGroup="showGroupOwner(item)"
+                  :width="140"
+                  :bottom="3"
+                  :showName="item.nick_name"
+                  :left="25"
+                  :marginLeft="0"
+                ></CommonLottie>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </van-action-sheet>
+    <router-view></router-view>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.msg-send {
+  background: rgba(248, 248, 251, 1);
+  height: 100%;
+  .is-not-inexistence {
+    opacity: 0.2;
+  }
+  &.useUserAppearance {
+    &::before {
+      background-image: var(--preview-bg, none);
+      background-size: contain;
+      background-repeat: repeat;
+      width: 100%;
+      height: 100%;
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      filter: var(--preview-bg-alpha);
+    }
+  }
+
+  .popup_select {
+    display: flex;
+    flex-direction: column;
+    background: white;
+
+    &_cell {
+      height: 60px;
+    }
+
+    &_cell:nth-child(2) {
+      color: red;
+    }
+  }
+
+  .chatBox {
+    padding: 10px 0 56px 0;
+    width: 100%;
+    height: calc(100vh - 56px);
+
+    .chatBox_content {
+      height: 100%;
+      padding: 0 12px;
+      overflow-y: auto;
+      padding-bottom: 150px;
+    }
+  }
+
+  .active_chatBox {
+    height: calc(100vh - 130px) !important;
+  }
+
+  .msg-send_body {
+    & .cell {
+      display: flex;
+      margin: 8px 0;
+      color: white;
+      font-size: 1rem;
+      font-weight: 400;
+      width: 100%;
+      position: relative;
+      flex-direction: column;
+
+      .withdraw {
+        color: rgba(27, 27, 34, 0.4);
+        font-size: 0.625rem;
+        text-align: center;
+
+        .active-add {
+          color: rgba(0, 149, 246, 1);
+          cursor: pointer;
+        }
+      }
+
+      .FriendNotifications {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        color: black;
+        font-size: 0.75rem;
+
+        & > span:nth-child(1) {
+          background: rgba(228, 240, 251, 1);
+          color: rgba(0, 149, 246, 1);
+          border-radius: 37px;
+          padding: 10px 16px;
+        }
+
+        & > span:nth-child(2) {
+          color: rgba(27, 27, 34, 0.4);
+          padding-top: 18px;
+          font-size: 0.625rem;
+        }
+      }
+
+      .video {
+        max-width: 200px;
+        max-height: 160px;
+      }
+
+      .quoteElem {
+        background: rgba(0, 0, 0, 0.03);
+        margin: 4px 0;
+        border-radius: 10px;
+        max-width: 255px;
+        padding: 8px 12px;
+        color: rgba(118, 118, 122, 1);
+        font-size: 0.75rem;
+
+        & > span {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+        }
+
+        .quoteElem_recorder {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          & > span:nth-child(1) {
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .quoteElem_left {
+        align-self: flex-start;
+
+        .content_image,
+        .content_video {
+          display: flex;
+          position: relative;
+
+          > div {
+            margin-right: 10px;
+            max-width: 100px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          video {
+            position: relative;
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            object-fit: contain;
+            object-position: center;
+          }
+
+          :deep(.van-image) {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+
+            .van-image__img {
+              border-radius: 3px;
+            }
+          }
+
+          .video_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            top: calc(50% - 8px);
+            right: 8px;
+            margin-right: 0;
+
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+
+      .quoteElem_right {
+        align-self: flex-end;
+
+        .content_image,
+        .content_video {
+          display: flex;
+          position: relative;
+
+          > div {
+            margin-right: 10px;
+            max-width: 100px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          video {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            object-fit: contain;
+            object-position: center;
+          }
+
+          :deep(.van-image) {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+
+            .van-image__img {
+              border-radius: 3px;
+            }
+          }
+
+          .video_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            top: calc(50% - 8px);
+            right: 8px;
+            margin-right: 0;
+
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+
+      .cell_state {
+        font-size: 0.625rem;
+        position: absolute;
+        bottom: -14px;
+        right: 0;
+
+        &_read {
+          color: rgba(0, 149, 246, 1);
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+
+        &_unread {
+          color: rgba(27, 27, 34, 0.4);
+        }
+      }
+
+      .cell_right {
+        align-self: end;
+        background: #4c8be0;
+        border-radius: 10px 10px 0 10px;
+        max-width: 80%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        width: fit-content;
+        position: relative;
+        .cell_msg {
+          margin: 6px 10px;
+        }
+        .cell-img,
+        .cell-video {
+          margin: auto;
+        }
+        :deep(.van-popover__wrapper) {
+          width: 100%;
+        }
+
+        &_loading {
+          color: black;
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+          left: -24px;
+        }
+
+        &_failed {
+          width: 20px;
+          height: 20px;
+        }
+
+        :deep(.van-image__img) {
+          border-radius: 10px;
+        }
+
+        .video {
+          border-radius: 10px;
+          position: relative;
+        }
+
+        .video_icon {
+          position: absolute;
+          top: calc(50% - 16px);
+          left: calc(50% - 16px);
+        }
+      }
+      .cell_left {
+        position: relative;
+        align-self: start;
+        background: white;
+        color: rgba(27, 27, 34, 1);
+        border-radius: 0 10px 10px 10px;
+        max-width: 80%;
+        white-space: pre-wrap;
+        word-break: break-all;
+
+        :deep(.van-image__img) {
+          border-radius: 10px;
+        }
+
+        .video {
+          border-radius: 10px;
+        }
+
+        .video_icon {
+          position: absolute;
+          top: calc(50% - 16px);
+          left: calc(50% - 16px);
+        }
+      }
+
+      .active_cell {
+        background: white;
+
+        :deep(.popover) {
+          padding: 0;
+        }
+      }
+    }
+
+    & .special-cell {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .cell_background_none {
+    background-color: transparent !important;
+  }
+  .msg-send_footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 8px 12px;
+    width: 100%;
+    background: white;
+    display: flex;
+    font-weight: 500;
+    font-size: 1.625rem;
+    flex-direction: column;
+
+    .choose_color {
+      color: var(--van-blue);
+    }
+
+    .container {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+    }
+
+    .recorder {
+      display: flex;
+      justify-content: space-between;
+      color: var(--van-blue);
+      align-items: center;
+      border-radius: 10px;
+      background: rgba(235, 247, 254, 1);
+      padding: 4px 10px;
+
+      .recorder_wave {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+      }
+    }
+
+    .van-icon {
+      padding: 0 0 5px 12px;
+    }
+
+    .icon_recording {
+      align-items: flex-end;
+      display: flex;
+      height: 100%;
+
+      & > img {
+        width: 30px;
+        height: 30px;
+        padding: 2px;
+      }
+    }
+
+    .icon_send {
+      width: 22px;
+      height: 22px;
+      margin: 0 0 8px 12px;
+    }
+
+    .msg_txt {
+      background: rgba(245, 246, 250, 1);
+      border-radius: 10px;
+      padding: 4px;
+      font-size: 1rem;
+      line-height: 30px;
+    }
+
+    .msgQuote {
+      position: absolute;
+      top: -33px;
+      left: 0;
+      background: white;
+      height: 33px;
+      width: 100%;
+      border-bottom: 1px solid rgba(242, 244, 245, 1);
+      display: flex;
+      font-size: 0.75rem;
+      color: rgba(118, 118, 122, 1);
+      padding: 8px 12px;
+      align-items: center;
+
+      & > .left {
+        // margin-right: 5px;
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      & > .center {
+        flex: 1;
+        max-width: 200px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-left: 5px;
+      }
+
+      & > .right {
+        position: absolute;
+        top: 0;
+        right: 12px;
+        bottom: 0;
+        margin: auto;
+        font-size: 1.125rem;
+        height: 18px;
+      }
+
+      .van-icon {
+        padding: 0 !important;
+      }
+    }
+  }
+
+  :deep(.van-nav-bar__content) {
+    background: #f5f5f5;
+  }
+
+  .send-list {
+    margin-top: 56px;
+    .selected {
+      padding: 12px 0 8px 0;
+      position: relative;
+      overflow-x: hidden;
+      background: #fff;
+
+      .left {
+        // width: 290px;
+        overflow-x: auto;
+        /* 横向溢出内容显示滚动条 */
+        white-space: nowrap;
+
+        /* 横向内容不换行 */
+        .left-content {
+          width: 290px;
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          padding: 0 16px;
+          padding-right: 104px;
+
+          .item {
+            position: relative;
+            margin-right: 16px;
+
+            .avatar {
+              text-align: center;
+
+              img {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+              }
+
+              .name {
+                font-size: 0.75rem;
+                color: #1b1b2299;
+                width: 44px;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+            .delete {
+              position: absolute;
+              top: 0;
+              right: -2px;
+
+              img {
+                width: 16px;
+                height: 16px;
+              }
+            }
+          }
+        }
+        .placeholder-item {
+          height: 58px;
+          padding-left: 84px;
+        }
+      }
+
+      .righ {
+        height: 70px;
+        display: flex;
+        line-height: 70px;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        .linear {
+          width: 24px;
+          height: 100%;
+          background: linear-gradient(
+            270deg,
+            #ffffff 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+        }
+
+        .num {
+          width: 80px;
+          background: #fff;
+          text-align: center;
+          font-size: 0.875rem;
+          color: #538fe1;
+        }
+      }
+    }
+  }
+}
+
+.message_img {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.video {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.select-item {
+  width: 16px;
+  margin-right: 12px;
+
+  .check-box {
+    width: 16px;
+    height: 16px;
+    border: 1px solid #d1d1d3;
+    border-radius: 50%;
+
+    &.checked {
+      border-color: var(--c-blue-color);
+      background: var(--c-blue-color) url(@/assets/group-check.svg) no-repeat
+        center / cover;
+    }
+  }
+}
+
+.forward {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .share {
+    margin-right: 80px;
+    cursor: pointer;
+  }
+
+  .delete {
+    cursor: pointer;
+  }
+}
+
+.custom-dialog {
+  .van-dialog__content {
+    padding: 0;
+
+    .content {
+      margin-top: 24px;
+      text-align: center;
+      font-family: PingFang SC;
+      border-bottom: 0.5px solid #f2f4f5;
+
+      .title {
+        color: #1b1b22;
+        margin-bottom: 16px;
+        font-size: 1rem;
+        font-weight: 600;
+      }
+
+      .contents {
+        color: #76767a;
+        font-size: 0.875rem;
+        margin-bottom: 22px;
+      }
+    }
+  }
+
+  .dialog-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    padding: 11px 0;
+  }
+
+  .btn {
+    color: #1b1b22 !important;
+    text-align: center;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 500;
+    background: #fff !important;
+    border-color: #fff !important;
+    width: 50%;
+  }
+
+  .line {
+    width: 1px;
+    height: 44px;
+    background: #f5f8ff;
+  }
+
+  .btn1 {
+    color: #0095f6 !important;
+  }
+}
+
+.send-object {
+  position: relative;
+
+  .title {
+    text-align: center;
+    padding: 13px 0;
+    font-size: 1rem;
+    color: #1b1b22;
+  }
+
+  .close {
+    width: 24px;
+    height: 24px;
+    top: 12px;
+    left: 16px;
+    position: absolute;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    height: calc(100% - 48px);
+    overflow: hidden;
+
+    .item {
+      padding: 8px 16px;
+      display: flex;
+      align-items: center;
+
+      .item-avatar {
+        margin-right: 8px;
+      }
+
+      .name {
+        display: flex;
+        align-items: center;
+        span {
+          width: 200px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .flag {
+          margin-right: 1px;
+        }
+      }
+    }
+  }
+}
+
+.scroll-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  /* 显示横向滚动条 */
+  -ms-overflow-style: none;
+  /* 隐藏 IE 浏览器的滚动条 */
+  scrollbar-width: none;
+  /* 隐藏 Firefox 浏览器的滚动条 */
+}
+
+/* 隐藏非 Webkit 浏览器的滚动条 */
+.scroll-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.privateChat_footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 8px 12px;
+  width: 100%;
+  background: white;
+  display: flex;
+  font-weight: 500;
+  font-size: 1.625rem;
+  flex-direction: column;
+
+  .choose_color {
+    color: var(--van-blue);
+  }
+
+  .container {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .recorder {
+    display: flex;
+    justify-content: space-between;
+    color: var(--van-blue);
+    align-items: center;
+    border-radius: 10px;
+    background: rgba(235, 247, 254, 1);
+    padding: 4px 10px;
+
+    .recorder_wave {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 20px;
+    }
+  }
+
+  .van-icon {
+    padding: 0 0 5px 12px;
+  }
+
+  .icon_recording {
+    align-items: flex-end;
+    display: flex;
+    height: 100%;
+
+    & > img {
+      width: 30px;
+      height: 30px;
+      padding: 2px;
+    }
+  }
+
+  .icon_send {
+    width: 22px;
+    height: 22px;
+    margin: 0 0 8px 12px;
+  }
+
+  .msg_txt {
+    background: rgba(245, 246, 250, 1);
+    border-radius: 10px;
+    padding: 4px;
+    font-size: 1rem;
+    line-height: 30px;
+  }
+
+  .msgQuote {
+    position: absolute;
+    top: -33px;
+    left: 0;
+    background: white;
+    height: 33px;
+    width: 100%;
+    border-bottom: 1px solid rgba(242, 244, 245, 1);
+    display: flex;
+    font-size: 0.75rem;
+    color: rgba(118, 118, 122, 1);
+    padding: 8px 12px;
+    align-items: center;
+
+    & > .left {
+      // margin-right: 5px;
+      max-width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & > .center {
+      flex: 1;
+      max-width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-left: 5px;
+    }
+
+    & > .right {
+      position: absolute;
+      top: 0;
+      right: 12px;
+      bottom: 0;
+      margin: auto;
+      font-size: 1.125rem;
+      height: 18px;
+    }
+
+    .van-icon {
+      padding: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/massTexting/selectGroup.vue b/src/views/contact/massTexting/selectGroup.vue
new file mode 100644
index 0000000..404bb16
--- /dev/null
+++ b/src/views/contact/massTexting/selectGroup.vue
@@ -0,0 +1,336 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, TransmitDataDialog } from '@/components/index'
+import IMG from '@/assets/chatbg.png'
+import defaultSearch from '@/assets/search-icon.svg'
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user.js";
+import { parseMsg } from '@/utils/tools'
+import { showToast } from 'vant';
+import { useI18n } from "vue-i18n"
+
+const contactStore = useContactStore();
+const { chatList } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig, setMassTextDataChecked } = userStore;
+const { groupChatConfig, privateChatConfig, appConfig, massTextDataChecked } = storeToRefs(userStore);
+// 选中的列表
+const selectChatDataList = ref([])
+
+const selectGroupRef = ref(null)
+useGrade(selectGroupRef, 4)
+const router = useRouter()
+const route = useRoute()
+// const isChecked = ref(JSON.parse(window.sessionStorage.getItem('MassTextDataChecked')) || []);
+const isChecked = ref(massTextDataChecked.value || []);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const isMultipleChoice = ref(false)
+const list = ref([])
+let page_num = ref(1)
+const { t } = useI18n()
+
+
+
+const showList = computed(() => {
+  let arr = []
+  arr = list.value.filter(item => item.groupName.indexOf(searchForm.value) != -1).slice(0, (page_num.value * 10))
+  return arr || []
+})
+const getData = () => {
+  list.value = chatList.value || []
+}
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (showList.value.length >= list.value.length) {
+    finished.value = true;
+  }
+  console.log('showList+list', list.value);
+}
+const toggle = (item, index) => {
+  checkboxRefs.value[index].toggle();
+  onNumTips()
+};
+const MAX_GROUP_COUNT = computed(()=> appConfig.value.batch_send?.group_send_limit || 0)
+watch(()=>isChecked.value,() => {
+  onNumTips()
+  setMassTextDataChecked(isChecked.value)
+}, { deep: true })
+
+const onNumTips = () => {
+      if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }
+}
+const onStop = () => {
+}
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+getData()
+
+const messageDescText = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    if (groupChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (groupChatConfig.value.type == 'single') {
+      //逐条转发
+      if (groupChatConfig.value.msg.length == 1) {
+        return parseMsg(groupChatConfig.value.msg[0], false, false, false);
+      } else {
+        return t('singleMlCount', { count: groupChatConfig.value.msg.length });
+      }
+    }
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    if (privateChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (privateChatConfig.value.type == 'single') {
+      //逐条转发
+      if (privateChatConfig.value.msg.length == 1) {
+        return parseMsg(privateChatConfig.value.msg[0], false, false, false);
+      } else {
+        return t('singleMlCount', { count: privateChatConfig.value.msg.length });
+      }
+    }
+  }
+})
+const chatDataList = computed(() => selectChatDataList.value)
+const handleClick = (type) => {
+  setMassTextDataChecked(isChecked.value)
+  router.go(-1)
+}
+// 确定
+const onConfirm = () => {
+  router.push(`/home/contact/massTexting/msgSend`)
+}
+
+const isCheckAll = computed(()=>{
+  console.log('isChecked',isChecked.value,list.value);
+  const arr = list.value.filter(el => isChecked.value.includes(el.groupID))
+  return arr.length === list.value.length
+})
+// 全选
+const onCheckAll = () => {
+  // 未勾选的数据
+  const arr = list.value.filter(el => !isChecked.value.includes(el.groupID));
+  arr.forEach(i => {
+    if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }else {
+      isChecked.value.push(i.groupID)
+    }
+  })
+  setMassTextDataChecked(isChecked.value)
+}
+// 反选
+const onInvertSelect = () => {
+  const newList = list.value.map(i => i.groupID)
+  const arr = isChecked.value.filter(el => !newList.includes(el))
+  isChecked.value = arr
+  setMassTextDataChecked(isChecked.value)
+}
+
+// 监听选择会话
+watch(() => massTextDataChecked.value, (newVal) => {
+  isChecked.value = newVal
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="select-group" ref="selectGroupRef">
+    <div class="content">
+      <AppNavBar :title="$t('selectGroup')" views_grade="fourth_view" left-arrow @click-left="handleClick" >
+        <template #right>
+          <span class="confirm">
+            <img class="check_all" @click="onCheckAll" src="@/assets/svg/check_all.svg" alt="" v-if="!isCheckAll">
+            <img class="check_all" @click="onInvertSelect" src="@/assets/svg/check_all_active.svg" alt="" v-else>
+          </span>
+        </template>
+      </AppNavBar>
+      <div class="select-search">
+        <van-search v-model="searchForm" class="c-search" :left-icon="defaultSearch" :placeholder="$t('search')" />
+      </div>
+      <div class="recent-chat">
+        <div class="chat-content" v-if="showList.length">
+          <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+            <div class="multiple-choice">
+              <van-checkbox-group v-model="isChecked" :border="false" :max="MAX_GROUP_COUNT">
+                <van-cell-group inset>
+                  <van-cell clickable :border="false" :title="item.groupName" v-for="(item, i) in showList"
+                    :key="item.groupID" @click="toggle(item, i)">
+                    <template #title>
+                      <van-checkbox :name="item.groupID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop="onNumTips">
+                        <template #icon="props">
+                          <div class="select1">
+                            <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                          </div>
+                        </template>
+                      </van-checkbox>
+                      <Avatar width="48" height="48" :is-group="true" :url="item.faceURL" :name="item.groupName" @updateUrl="url => item.faceURL = url">
+                      </Avatar>
+                      <div class="chat-name">
+                        <span class="chat-title">{{ item.groupName }}</span>
+                      </div>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </van-checkbox-group>
+            </div>
+          </van-list>
+        </div>
+        <div class="empty" v-else>
+          <!-- <span v-if="!searchForm">{{ $t('cvNotAtUser') }}</span> -->
+          <span>{{ $t('notGroupFound',{name:searchForm}) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.select-group {
+  background-color: #fff;
+  height: 100%;
+  .confirm {
+    color: #0095F6;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+
+    .select-search {
+      padding: 0 10px;
+    }
+
+    .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+    }
+
+    .multiple {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .recent-chat {
+      padding: 0 16px;
+      overflow: auto;
+      height: calc(100% - 60px);
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content {
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 10px 0;
+
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chat-content::-webkit-scrollbar,
+  .recent-chat::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contact/massTexting/selectPage.vue b/src/views/contact/massTexting/selectPage.vue
new file mode 100644
index 0000000..cda3f91
--- /dev/null
+++ b/src/views/contact/massTexting/selectPage.vue
@@ -0,0 +1,803 @@
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
+import { AppNavBar, TransmitDataDialog, CommonLottie } from '@/components/index'
+import defaultSearch from '@/assets/search-icon.svg'
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useI18n } from "vue-i18n"
+import { useContactStore } from "@/stores/contact.js";
+import { useUserStore } from "@/stores/user.js";
+import { showToast } from "vant";
+import { parseMsg } from '@/utils/tools'
+const { t } = useI18n()
+const IMSDK = getSDK()
+const selectPageRef = ref(null)
+useGrade(selectPageRef, 3)
+const contactStore = useContactStore();
+const { contactList, chatList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig, setMassTextDataChecked } = userStore;
+const { groupChatConfig, privateChatConfig, appConfig, massTextDataChecked } = storeToRefs(userStore);
+const router = useRouter()
+const route = useRoute()
+// const isChecked = ref(JSON.parse(window.sessionStorage.getItem('MassTextDataChecked')) || []);
+const isChecked = ref(massTextDataChecked.value || []);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const showList = ref()
+let page_num = ref(1)
+const $api = inject("$api")
+
+
+// 群聊
+const showChatList = computed(() => {
+  // 当前会话与群聊列表合并后去重
+  let arr = [...chatList.value,...showList.value].filter(item => item.groupID != '')
+  let resultArr = uniqueByIdUsingMap(arr,'groupID').filter(item => {
+    let name = item.showName + item.groupName
+    return item.groupID != '' && name.indexOf(searchForm.value) != -1
+  })
+  return resultArr || []
+})
+// 联系人
+const showContactList = computed(() => {  
+  // 当前会话与联系人列表合并后去重
+  let arr = [...contactList.value,...showList.value].filter(item => item.userID != '')
+  // 去重并筛选搜索的用户
+  let rArr = uniqueByIdUsingMap(arr,'userID').filter(item => {
+        let name = ''
+      if(item.remark) name += item.remark
+      if(item.showName) name += item.showName
+      if(item.nickname) name += item.nickname
+      if(item.nickName) name += item.nickName
+    return item.userID != '' && name.indexOf(searchForm.value) != -1
+  })
+  // 显示名称和用户名处理
+  let resultArr = rArr.map(item => {
+    return {
+      ...item,
+      showName: transformName(item),
+      nickName: getNickName(item)
+    }
+  })
+  return resultArr || []
+})
+
+// 去重
+const uniqueByIdUsingMap = (arr, key) => {
+  const map = new Map();
+  arr.forEach(item => {
+    if (!map.has(item[key])) {
+      map.set(item[key], item);
+    }
+  });
+  return [...map.values()];
+}
+
+const getConversationListFromReq = async (isScrollLoad = false) => {
+  try {
+    const { data } = await IMSDK.getConversationListSplit({
+      offset: isScrollLoad ? showList.value.length : 0,
+      count: 20 * page_num.value,
+    });
+    const cves = data;
+    showList.value = [
+      ...(isScrollLoad ? showList.value : []),
+      ...cves,
+    ].map(item => {
+      return {
+        ...item,
+        id: item.userID || item.groupID,
+        showName: transformName(item),
+        nickName: getNickName(item)
+      }
+    })
+    return cves.length === 20 * page_num.value;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}
+
+const onLoad = async () => {
+  const flag = await getConversationListFromReq();
+  loading.value = false;
+  page_num.value++;
+  if (!flag) {
+    finished.value = true;
+  }
+}
+// 确定
+const onConfirm = async () => {
+  let data = []
+  let val = {
+    batch_id: '',
+    member_list: []
+  }
+  chatList.value.forEach((item) => {
+      isChecked.value.forEach((items) => {
+        if (items === item.groupID) {
+          data.push({
+            member_id: items,
+            type: 2
+          })
+          val.member_list.push({
+            head_url: item.faceURL || '',
+            member_id: item.groupID || '',
+            nick_name: item.groupName || '',
+            type: 2
+          })
+        }
+      })
+    })
+  contactList.value.forEach((item) => {
+    isChecked.value.forEach((items) => {
+      if (items === item.userID) {
+        data.push({
+          member_id: items,
+          type: 1
+        })
+        console.log('itemmember_list',item);
+        val.member_list.push({
+          head_url: item.faceURL || '',
+          member_id: item.userID || '',
+          nick_name: item.nickname || '',
+          type: 1
+        })
+      }
+    })
+  })
+  if(data.length <= 0) return
+  const res = await $api.contact.createBatchConversation({data})
+  if(res.code !== 0) return
+  val.batch_id = res.data.batch_id
+  router.push({
+    path: '/home/contact/msgSend',
+    state: {
+      msg: JSON.stringify(val)
+    }
+  })
+  setMassTextDataChecked([])
+  window.sessionStorage.removeItem('MassTextDataChecked')
+}
+// 删除
+const onDelete = (item) => {
+  const id = item.groupID ? item.groupID : item.userID
+  onSlice(id)
+}
+const toggleItem = ref()
+const toggle = (item, index) => {
+  checkboxRefs.value[index].toggle();
+  onNumTips()
+};
+
+// 已选
+const checkedList = ref([])
+
+// const MAX_GROUP_COUNT = computed(()=> appConfig.value.user_permission.batchNumber)
+const MAX_GROUP_COUNT = computed(()=> appConfig.value.batch_send?.group_send_limit || 0)
+const batchSend = computed(()=> appConfig.value.batch_send)
+console.log('batchSend',batchSend.value,MAX_GROUP_COUNT.value);
+watch(()=>isChecked.value,() => {
+  onNumTips()
+}, { deep: true })
+
+const onNumTips = () => {
+      if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }
+}
+watch(() => isChecked.value, (n, o) => {
+  if (isChecked.value.length > 0) {
+    let res = []
+    let arr2 = [...chatList.value, ...contactList.value]
+    chatList.value.forEach((item) => {
+      isChecked.value.forEach((items) => {
+        if (items === item.groupID) {
+          item.onlyId = item.groupID
+          res.push(item)
+        }
+      })
+    })
+    contactList.value.forEach((item) => {
+      isChecked.value.forEach((items) => {
+        if (items === item.userID) {
+          item.onlyId = item.userID
+          res.push(item)
+        }
+      })
+    })
+    res = res.reduce((accumulator, current) => {
+      // 判断当前对象的id属性在新数组中是否已经存在
+      const existingItem = accumulator.find(item => item.onlyId === current.onlyId);
+      // 如果不存在，则将当前对象添加到新数组中
+      if (!existingItem) {
+        accumulator.push(current);
+      }
+      return accumulator;
+    }, [])
+    console.log('checkedList',res);
+    checkedList.value = res
+  }else {
+    checkedList.value = []
+  }
+  setMassTextDataChecked(isChecked.value)
+}, { 
+  immediate: true,
+  deep: true
+ })
+
+
+
+watch(() => isChecked.value, async (newVal, oldVal) => {
+  await nextTick()
+  // 筛选添加的id
+  if (newVal.length > oldVal.length) {
+    let id
+    newVal.forEach(i => {
+      let find = oldVal.findIndex(item => i == item)
+      if (find == -1) {
+        id = i
+      }
+    })
+    // 是否搜索
+    if (!searchForm.value) {
+      const find = showList.value.find(item => item.groupID == id || item.userID == id)
+    } else {
+      const groupFind = showChatList.value.find(item => item.groupID == id)
+      const contactFind = showContactList.value.find(item => item.groupID == id)
+    }
+  }
+})
+
+const onSlice = (id) => {
+  let groupIdx = isChecked.value.findIndex(item => item === id);
+  if (groupIdx != -1) {
+      let arr = [...isChecked.value].filter(item => item !== id)
+      isChecked.value = arr
+      // window.sessionStorage.setItem('MassTextDataChecked',JSON.stringify(isChecked.value))
+      setMassTextDataChecked(isChecked.value)
+      return
+    }
+}
+
+
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+const handleClick = (type) => {
+  // window.sessionStorage.setItem('MassTextDataChecked',JSON.stringify(isChecked.value))
+  setMassTextDataChecked(isChecked.value)
+  if(type === 'friendGroup') {
+    router.replace(`/home/contact/massTexting/selectPage/${type}`)
+  } else {
+    router.push(`/home/contact/massTexting/selectPage/${type}`)
+  }
+}
+
+
+const handleBack = () => {
+  // window.sessionStorage.removeItem('MassTextDataChecked')
+  setMassTextDataChecked([])
+  router.go(-1);
+}
+// 显示名称
+const transformName = (val) => {
+  if (val.groupID) {
+    // 群
+    return val.showName
+  } else if (val.userID) {
+    const index = contactList.value.findIndex((item) => item.userID === val.userID)
+    if (index !== -1) {
+      return contactList.value[index].remark ? contactList.value[index].remark : (contactList.value[index].nickname || val.showName)
+    }
+    return val.nickname || val.showName
+  }
+}
+// 有备注则显示用户昵称
+const getNickName = (val) => {
+  if (val.groupID) {
+    // 群
+    return undefined
+  } else if (val.userID) {
+    const index = contactList.value.findIndex((item) => item.userID === val.userID)
+    if (index !== -1) {
+      return contactList.value[index].remark != '' ? contactList.value[index].nickname : ''
+    }
+    return ''
+  }
+}
+
+// 是否是群主/群管理员
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+// 监听选择会话
+watch(() => massTextDataChecked.value, (newVal) => {
+  console.log('selectPage',newVal);
+  isChecked.value = newVal
+}, { immediate: true })
+
+</script>
+
+<template>
+  <div ref="selectPageRef" class="select-page">
+    <div style="flex: 1; position: relative;height: 100%;">
+      <AppNavBar :title="$t('groupSend')" views_grade="thirdly_view">
+        <template #left>
+          <span class="cancel" @click="handleBack">{{$t('cancel')}}</span>
+        </template>
+        <template #right>
+          <span class="confirm" @click="onConfirm">{{$t('determine')}}</span>
+        </template>
+      </AppNavBar>
+      <div class="content">
+        <!-- 搜索框 -->
+        <van-search v-model="searchForm" class="c-search" :left-icon="defaultSearch" :placeholder="$t('search')" />
+        <div class="selected" v-if="checkedList.length">
+          <div class="left scroll-wrapper" @wheel="onWheel">
+            <div class="left-content">
+              <div class="item" v-for="item in checkedList" :key="item">
+                <div class="avatar">
+                  <Avatar width="36" height="36" :url="item.faceURL"
+                    :is-group="item.conversationType === 3 || item.groupID" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                  <div class="name">{{ item.remark || item.showName || item.nickname || item.groupName }}</div>
+                  <div class="delete" @click="onDelete(item)">
+                    <img src="@/assets/delete-red.svg" alt="">
+                  </div>
+                </div>
+              </div>
+              <div class="placeholder-item"></div>
+            </div>
+          </div>
+          <div class="righ">
+            <div class="linear"></div>
+            <div class="num">{{ $t('hasSelect')+'（'+ checkedList.length + '）' }}</div>
+          </div>
+        </div>
+        <div class="my-list" :class="{'list-h1': checkedList.length > 0}">
+          <div class="choose" v-if="!searchForm" :class="{ 'choose-border': checkedList.length }">
+            <div class="cell" @click="handleClick('selectPerson')">
+              <div class="title">{{$t('selectContact')}}</div>
+              <div class="arrow-icon">
+                <img src="@/assets/right-small1.svg" alt="">
+              </div>
+            </div>
+            <div class="cell" @click="handleClick('selectGroup')">
+              <div class="title">{{$t('selectGroup')}}</div>
+              <div class="arrow-icon">
+                <img src="@/assets/right-small1.svg" alt="">
+              </div>
+            </div>
+            <div class="cell" @click="handleClick('friendGroup')">
+              <div class="title">{{$t('selectGroups')}}</div>
+              <div class="arrow-icon">
+                <img src="@/assets/right-small1.svg" alt="">
+              </div>
+            </div>
+          </div>
+          <div class="recent-chat" v-if="searchForm == ''">
+            <div class="title">{{$t('recentConversation')}}</div>
+            <div class="chat-content" :class="{'select-chat-content':checkedList.length > 0}">
+              <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+                <div class="multiple-choice">
+                  <van-checkbox-group v-model="isChecked" :border="false" :max="MAX_GROUP_COUNT">
+                    <van-cell-group inset>
+                      <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showList" :key="i"
+                        @click="toggle(item, i)">
+                        <template #title>
+                          <van-checkbox :name="item.id" :ref="(el) => (checkboxRefs[i] = el)" @click.stop="onNumTips">
+                            <template #icon="props">
+                              <div class="select1">
+                                <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                              </div>
+                            </template>
+                          </van-checkbox>
+                          <Avatar width="36" height="36" :url="item.faceURL" :is-group="item.conversationType === 3"
+                            :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                          <div class="chat-name">
+                            <!-- 群管理标识 -->
+                            <!-- <span class="chat-title">{{ item.showName }}</span> -->
+                            <CommonLottie
+                                v-if="showGroupOwner(item.userID) != ''"
+                                :isGroup="showGroupOwner(item.userID)"
+                                :width="140"
+                                :height="56"
+                                :showName="item.showName"
+                            ></CommonLottie>
+                            <span class="chat-title" v-if="showGroupOwner(item.userID) === ''">{{ item.showName }}</span>
+                          </div>
+                        </template>
+                      </van-cell>
+                    </van-cell-group>
+                  </van-checkbox-group>
+                </div>
+              </van-list>
+            </div>
+          </div>
+          <div class="search-chat" v-else>
+            <div class="search-content">
+              <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+                <div class="multiple-choice">
+                  <van-checkbox-group v-model="isChecked" :border="false">
+                    <van-cell-group inset>
+                      <div class="contacts" v-if="showContactList.length">
+                        <div class="title">{{$t('globalSearchContacts')}}</div>
+                        <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showContactList"
+                          :key="i" @click="toggle(item, i)">
+                          <template #title>
+                            <van-checkbox :name="item.userID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop>
+                              <template #icon="props">
+                                <div class="select1">
+                                  <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                                </div>
+                              </template>
+                            </van-checkbox>
+                            <Avatar width="36" height="36" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                            <!-- <div class="chat-name"> -->
+                            <!-- 群管理标识2 -->
+                            <!-- <span class="chat-title">{{ item.showName }}</span>
+                            </div> -->
+                            <div class="chat-name">
+                                <!-- 群管理标识 -->
+                                <CommonLottie
+                                    v-if="showGroupOwner(item.userID) != ''"
+                                    :isGroup="showGroupOwner(item.userID)"
+                                    :width="140"
+                                    :height="56"
+                                    :showName="item.showName"
+                                ></CommonLottie>
+                                <span class="chat-title" v-if="showGroupOwner(item.userID) === ''">{{ item.showName }}</span>
+                                <!-- <span class="custom-title">{{ getCurrentTitle(data) }}</span> -->
+                                <div v-if="searchForm && item.nickName" class="custom-nickname" :class="{'group-owner-nickname':showGroupOwner(item.userID) !== ''}">{{$t('nicknames') + ':' + item.nickName }}</div>
+                            </div>
+                          </template>
+                        </van-cell>
+                      </div>
+                      <div class="group-chat" v-if="showChatList.length">
+                        <div class="title">{{$t('groupChat')}}</div>
+                        <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showChatList"
+                          :key="i" @click="toggle(item, i)">
+                          <template #title>
+                            <van-checkbox :name="item.groupID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop>
+                              <template #icon="props">
+                                <div class="select1">
+                                  <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                                </div>
+                              </template>
+                            </van-checkbox>
+                            <Avatar width="36" height="36" :url="item.faceURL" :name="item.showName || item.groupName" @updateUrl="url => item.faceURL = url"></Avatar>
+                            <div class="chat-name">
+                              <span class="chat-title">{{ item.showName || item.groupName}}</span>
+                            </div>
+                          </template>
+                        </van-cell>
+                      </div>
+                    </van-cell-group>
+                  </van-checkbox-group>
+                </div>
+              </van-list>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style scoped lang="less">
+
+.select-page {
+  // display: flex;
+  // justify-content: center;
+  background-color: #fff;
+  // overflow: auto;
+  .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  .content {
+    padding-top: 56px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    :deep(.van-search) {
+      padding: 4px 12px;
+    }
+    :deep(.van-search__content) {
+      border-radius: 8px;
+    }
+
+    // .multiple {
+    //   font-size: 0.875rem;
+    //   font-weight: 600;
+    // }
+
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .selected {
+      margin: 12px 0 8px 0;
+      position: relative;
+      overflow-x: hidden;
+
+      .left {
+        // width: 290px;
+        // width: calc(70% - 84px);
+        overflow-x: auto;
+        /* 横向溢出内容显示滚动条 */
+        white-space: nowrap;
+
+        /* 横向内容不换行 */
+        .left-content {
+          width: 294px;
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          padding: 0 16px;
+          padding-right: 104px;
+
+          .item {
+            position: relative;
+            margin-right: 16px;
+
+            .avatar {
+              text-align: center;
+
+              img {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+              }
+
+              .name {
+                font-size: 0.75rem;
+                color: #1B1B2299;
+                width: 44px;
+                ;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+
+            .delete {
+              position: absolute;
+              top: 0;
+              right: -2px;
+
+              img {
+                width: 16px;
+                height: 16px;
+              }
+            }
+          }
+          .placeholder-item {
+            height: 58px;
+            padding-left: 84px;
+          }
+        }
+      }
+
+      .righ {
+        height: 58px;
+        display: flex;
+        line-height: 58px;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        .linear {
+          width: 24px;
+          height: 100%;
+          background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+        }
+
+        .num {
+          width: 80px;
+          background: #fff;
+          text-align: center;
+          font-size: 0.875rem;
+          color: #1B1B2299;
+        }
+      }
+    }
+
+    .choose {
+      margin-top: 8px;
+      .cell {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 19px 16px;
+        border-bottom: 0.5px solid #F2F4F5;
+
+        .title {
+          color: #1B1B22;
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .choose-border {
+      border-top: 0.5px solid #F2F4F5;
+    }
+
+    .recent-chat,
+    .search-chat {
+      padding: 10px 16px;
+      height: 100%;
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content,
+      .search-content {
+        // height: calc(100% - 273px);
+        // overflow: auto;
+
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 0;
+          height: 56px;
+          line-height: 56px;
+          align-items: center;
+
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+      
+      .chat-content {
+        // height: calc(100% - 273px);
+        // overflow: auto;
+      }
+      .select-chat-content {
+        height: calc(100% - 320px) !important;
+      }
+    }
+  }
+  .search-content-h1 {
+    height: calc(100% - 60px) !important;
+  }
+  .search-content-h2 {
+    height: calc(100% - 120px) !important;
+  }
+  .custom-nickname {
+    font-size: 0.75rem;
+    color: #76767A;
+    margin: 2px 0 0 12px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 290px;
+    white-space: nowrap;
+    position: absolute;
+    line-height: normal;
+    bottom: 6px;
+  }
+  .group-owner-nickname {
+    bottom: -2px !important;
+}
+  .chat-content::-webkit-scrollbar,
+  .search-content::-webkit-scrollbar,
+  .avatar-wrap::-webkit-scrollbar,
+  .selected::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  // .empty {
+  //   width: 100%;
+  //   height: 100%;
+  //   display: flex;
+  //   justify-content: center;
+  //   // align-items: center;
+  //   color: #979797;
+  //   font-family: PingFang SC;
+  //   font-size: 1rem;
+  //   font-style: normal;
+  //   font-weight: 400;
+  //   line-height: normal;
+  //   padding-top: 26px;
+  // }
+  .my-list {
+    height: calc(100% - 60px);
+    overflow: auto;
+  }
+  // 已选会话
+  .list-h1 {
+    height: calc(100% - 124px);
+  }
+}
+@media screen and (max-width: 750px) {
+  .content {
+    padding-bottom: 90px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contact/massTexting/selectPerson.vue b/src/views/contact/massTexting/selectPerson.vue
new file mode 100644
index 0000000..5267ada
--- /dev/null
+++ b/src/views/contact/massTexting/selectPerson.vue
@@ -0,0 +1,555 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { ref, onMounted } from 'vue'
+import { AppNavBar, CommonLottie } from '@/components'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import pinyin from 'js-pinyin'
+import shanchu from "@/assets/chanchu.svg"
+import shanchu2 from "@/assets/svg/shanchu2.svg"
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import defaultSearch from '@/assets/search-icon.svg'
+import { parseMsg } from '@/utils/tools'
+const selectPersonRef = ref(null)
+useGrade(selectPersonRef, 4)
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { groupInfo, myGroupInfo, groupMemberInfo, contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setGroupMemberInfo, updateGroupMemberInfo } = contactStore
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig, setMassTextDataChecked } = userStore;
+const { userInfo, groupChatConfig, privateChatConfig, appConfig, massTextDataChecked } = storeToRefs(userStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const searchValue = ref('')
+const dataList = ref([])
+const groupOwnerList = ref([])
+const adminList = ref([])
+const isEdit = ref(false)
+const actionShow = ref(false)
+const currentUserID = ref('')
+const actions = [
+    { id: 1, name: t('deleteMemberTitle'), color: '#ee0a24' },
+]
+const searchList = ref([])
+const indexList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'])
+const searchForm = ref('')
+
+// const isChecked = ref(JSON.parse(window.sessionStorage.getItem('MassTextDataChecked')) || []);
+const isChecked = ref(massTextDataChecked.value || []);
+
+const checkboxRefs = ref([]);
+
+
+onMounted(async () => {
+    try {
+        const userIDs = contactList.value.map((item) => item.userID)
+        const res = await $api.login.userLoginStatus({
+            userIDs: userIDs
+        })
+        if (res.code != 0) return
+        const obj = {}
+        if (Array.isArray(res.data)) {
+            res.data.forEach((item) => {
+                obj[item.userID] = item
+            })
+        }
+        contactList.value.forEach((item) => {
+            item.showName = item.remark !== '' ? item.remark : item.nickname
+            item.checked = false
+            item.online = obj[item.userID]['status'] === 1 ? true : false
+        })
+    } catch (error) {
+        console.log(error)
+    }
+})
+
+// 分组函数
+const filterData = (list) => {
+    let ortherArr = []
+    list.forEach(el => {
+        el.pinyin = pinyin.getFullChars(getCurrentTitle(el)) || el.nickname
+    })
+    let letterArray = [];
+    for (let i = 65; i < 91; i++) {
+        letterArray.push(String.fromCharCode(i));
+    }
+    let newCities = []
+    letterArray.forEach(item => {
+        newCities.push({
+            type: `${item}`,
+            list: list.filter(item1 => item1.pinyin.substring(0, 1).toUpperCase() === `${item}`)
+        })
+    })
+    list.forEach(el => {
+        if (!letterArray.includes(el.pinyin.substring(0, 1).toUpperCase())) {
+            ortherArr.push(el)
+        }
+    })
+    newCities.push({
+        type: '#',
+        list: ortherArr
+    })
+    newCities = newCities.filter(item => item.list.length)
+    console.log(newCities);
+    return newCities;
+}
+const getCurrentTitle = (val) => {
+    return val.showName ? val.showName : val.nickname
+}
+const showList = computed(() => {
+    let arr = []
+    const res = contactList.value.filter(item => {
+        let str = item.nickname + item.remark
+        return str.indexOf(searchValue.value) != -1
+    })
+    arr = filterData(res) || []
+    return arr || []
+})
+watch(() => showList.value, (newValue, oldValue) => {
+    // 在这里可以执行相应的操作
+    indexList.value = showList.value.map(item => item.type)
+}, { immediate: true });
+
+const MAX_GROUP_COUNT = computed(()=> appConfig.value.batch_send?.group_send_limit || 0)
+watch(()=>isChecked.value,() => {
+    onNumTips()
+    setMassTextDataChecked(isChecked.value)
+}, { deep: true })
+
+const toggle = (item, index) => {
+    checkboxRefs.value[index].toggle();
+};
+const onToggle = (id) => {
+    let isExist = isChecked.value.includes(id)
+    if (isChecked.value.length >= MAX_GROUP_COUNT.value && !isExist) {
+       return showToast({ message: t('selectMax'), position: 'top' })
+    }
+    const index = isChecked.value.indexOf(id);
+    if (index === -1) {
+        isChecked.value.push(id)
+    } else {
+        isChecked.value.splice(index, 1)
+    }
+}
+const onNumTips = () => {
+      if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }
+}
+const messageDescText = computed(() => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        if (groupChatConfig.value.type == 'group') {
+            //合并转发
+            return t('mergeMessageList');
+        } else if (groupChatConfig.value.type == 'single') {
+            //逐条转发
+            if (groupChatConfig.value.msg.length == 1) {
+                return parseMsg(groupChatConfig.value.msg[0], false, false, false);
+            } else {
+                return t('singleMlCount', { count: groupChatConfig.value.msg.length });
+            }
+        }
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        if (privateChatConfig.value.type == 'group') {
+            //合并转发
+            return t('mergeMessageList');
+        } else if (privateChatConfig.value.type == 'single') {
+            //逐条转发
+            if (privateChatConfig.value.msg.length == 1) {
+                return parseMsg(privateChatConfig.value.msg[0], false, false, false);
+            } else {
+                return t('singleMlCount', { count: privateChatConfig.value.msg.length });
+            }
+        }
+    }
+})
+const handleClick = (type) => {
+    // 储存选择的会话id
+    setMassTextDataChecked(isChecked.value)
+    router.go(-1)
+}
+
+// 确定
+const onConfirm = () => {
+  router.push(`/home/contact/massTexting/msgSend`)
+}
+
+// 是否是群主/群管理员
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+const isCheckAll = computed(()=>{
+  console.log('isChecked',isChecked.value,contactList.value);
+  const arr = contactList.value.filter(el => isChecked.value.includes(el.userID))
+  return arr.length === contactList.value.length
+})
+// 全选
+const onCheckAll = () => {
+    // 按字母排序之后的数组
+   let sortArr = filterData(contactList.value) || []
+   let filterArr = []
+   if(sortArr.length > 0) {
+    sortArr.forEach(i => {
+        filterArr.push(...i.list)
+    })
+   }
+  // 未勾选的数据
+  const arr = filterArr.filter(el => !isChecked.value.includes(el.userID));
+  arr.forEach(i => {
+    if (isChecked.value.length >= MAX_GROUP_COUNT.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }else {
+      isChecked.value.push(i.userID)
+    }
+  })
+  console.log('onCheckAll',arr);
+}
+// 反选
+const onInvertSelect = () => {
+    const newList = contactList.value.map(i => i.userID)
+    const arr = isChecked.value.filter(el => !newList.includes(el))
+    isChecked.value = arr
+}
+
+// 监听选择会话
+watch(() => massTextDataChecked.value, (newVal) => {
+  isChecked.value = newVal
+}, { immediate: true })
+</script>
+
+<template>
+    <div ref="selectPersonRef" class="select-person">
+        <div class="detail_content">
+            <AppNavBar :title="$t('selectContact')" left-arrow views_grade="fourth_view" @click-left="handleClick" >
+                <template #right>
+                    <span class="confirm">
+                        <img class="check_all" @click="onCheckAll" src="@/assets/svg/check_all.svg" alt="" v-if="!isCheckAll">
+                        <img class="check_all" @click="onInvertSelect" src="@/assets/svg/check_all_active.svg" alt="" v-else>
+                    </span>
+                </template>
+            </AppNavBar>
+            <div class="select-person-wrap">
+                <div class="select-person-content">
+                    <van-search class="search-input" :left-icon="defaultSearch" v-model="searchValue"
+                        :placeholder="$t('search')" />
+                    <van-index-bar v-if="showList.length" class="index-bar" :sticky-offset-top="0"
+                        highlight-color="#0095f6" :index-list="indexList">
+                        <div v-for="item in showList" :key="item.type">
+                            <van-index-anchor :index="item.type" />
+                            <div class="multiple-choice">
+                                <van-checkbox-group v-model="isChecked" :border="false" :max="MAX_GROUP_COUNT">
+                                    <van-cell-group inset>
+                                        <van-cell :border="false" v-for="(data, i) in item.list" :key="i"
+                                            :title="getCurrentTitle(data)" @click="onToggle(data.userID)">
+                                            <template #title>
+                                                <van-checkbox :name="data.userID" :ref="(el) => (checkboxRefs[i] = el)"
+                                                    @click.stop="onNumTips">
+                                                    <template #icon="props">
+                                                        <div class="select1">
+                                                            <img v-if="props.checked"
+                                                                src="@/assets/svg/radio-check.svg" />
+                                                        </div>
+                                                    </template>
+                                                </van-checkbox>
+                                                <div class="avatar">
+                                                    <Avatar width="32" height="32" :url="data.faceURL"
+                                                        :name="getCurrentTitle(data)" @updateUrl="url => data.faceURL = url" />
+                                                    <div class="dot" v-if="data.online">
+                                                        <div></div>
+                                                    </div>
+                                                </div>
+                                                <div class="custom-name">
+                                                    <!-- 群管理标识 -->
+                                                    <CommonLottie
+                                                        v-if="showGroupOwner(data.userID) != ''"
+                                                        :isGroup="showGroupOwner(data.userID)"
+                                                        :width="140"
+                                                        :height="56"
+                                                        :showName="getCurrentTitle(data)"
+                                                    ></CommonLottie>
+                                                    <span class="custom-title" v-if="showGroupOwner(data.userID) === ''">{{ getCurrentTitle(data) }}</span>
+                                                    <!-- <span class="custom-title">{{ getCurrentTitle(data) }}</span> -->
+                                                    <div v-if="searchValue && data.remark" class="custom-nickname" :class="{'group-owner-nickname':showGroupOwner(data.userID) !== ''}">{{$t('nicknames') + ':' + data.nickname }}</div>
+                                                </div>
+                                            </template>
+                                        </van-cell>
+                                    </van-cell-group>
+                                </van-checkbox-group>
+                            </div>
+                        </div>
+                    </van-index-bar>
+                    <div class="empty" v-else>
+                        <span>{{ $t('notContactsFound',{name:searchValue}) }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+    :deep(.van-index-bar__sidebar) {
+        right: 15% !important;
+    }
+}
+
+.select-person {
+    overflow-y: auto;
+    background-color: #fff;
+
+    // position: relative;
+    .detail_content {
+        height: 100%;
+        // position: relative;
+        flex: 1;
+    }
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+}
+
+.select-person-wrap {
+    background: #FFF;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+    position: relative;
+
+    .select-person-content {
+        // padding-bottom: 66px;
+        height: 100%;
+        flex: 1;
+        overflow: auto;
+
+        :deep(.van-cell) {
+            display: flex;
+            align-items: center;
+            padding-right: 16px;
+
+            .first-cell {
+                :deep(.van-cell) {
+                    height: 40px;
+                }
+            }
+
+            .second-cell {
+                :deep(.van-cell) {
+                    height: 72px;
+                }
+            }
+        }
+
+        .custom-title {
+            // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+            font-family: PingFang SC;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            display: inline-block;
+            width: 246px;
+            white-space: nowrap; 
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .custom-nickname {
+          font-size: 0.75rem;
+          color: #76767A;
+          margin: 2px 0 0 12px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 290px;
+          white-space: nowrap;
+          position: absolute;
+          bottom: 0px;
+        }
+
+        :deep(.van-swipe-cell__right) {
+            right: -1px;
+
+            .van-button {
+                width: 70px;
+                height: 56px;
+            }
+        }
+
+        :deep(.van-cell) {
+            height: 56px;
+        }
+
+        .add-cell {
+            :deep(.van-cell__title) {
+                display: flex;
+                align-items: center;
+
+                .custom-title {
+                    width: 250px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    display: inline-block;
+                    // margin-left: 10px;
+                    color: #1B1B22;
+                    font-family: PingFang SC;
+                    font-size: 1rem;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                }
+            }
+        }
+
+        :deep(.van-swipe-cell__wrapper) {
+            .custom-title {
+                margin-left: 10px;
+            }
+        }
+        :deep(.special-title-name){
+            bottom: 15px !important;
+        }
+    }
+}
+
+:deep(.van-dialog__confirm) {
+    color: #FC5A50;
+}
+
+.search-input {
+    margin: 8px 0;
+
+    :deep(.van-cell) {
+        height: 36px !important;
+    }
+}
+
+.index-bar {
+    :deep(.van-index-bar__sidebar) {
+        color: #A4A4A7;
+    }
+
+    :deep(.van-index-anchor) {
+        font-size: 0.875rem;
+        font-weight: 400;
+        color: #A4A4A7 !important;
+    }
+}
+
+:deep(.van-cell__title) {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.van-search__action) {
+    color: #0095F6;
+}
+
+:deep(.van-cell) {
+    .van-cell__title {
+        .custom-title {
+            margin-left: 10px;
+        }
+    }
+}
+
+:deep(.van-badge__wrapper) {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.van-cell__value) {
+    padding-right: 10px;
+}
+
+.select1 {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    margin-right: 8px;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border-radius: 50%;
+    border: 1px solid #d9d9d9;
+}
+
+:deep(.van-cell-group--inset) {
+    margin: auto;
+}
+
+:deep(.van-checkbox__icon) {
+    height: unset;
+}
+
+.avatar {
+    position: relative;
+    display: flex;
+
+    .dot {
+        position: absolute;
+        top: 0;
+        right: -4px;
+        padding: 2px;
+        background: #fff;
+        border-radius: 50%;
+
+        div {
+            width: 8px;
+            height: 8px;
+            background: #43FA51;
+            border-radius: 50%;
+            // position: absolute;
+        }
+    }
+}
+
+.empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+}
+
+.select-person-content::-webkit-scrollbar {
+    display: none;
+}
+.group-owner-nickname {
+    bottom: -7px !important;
+}
+</style>
diff --git a/src/views/contact/myChat/index.vue b/src/views/contact/myChat/index.vue
new file mode 100644
index 0000000..e64d57f
--- /dev/null
+++ b/src/views/contact/myChat/index.vue
@@ -0,0 +1,316 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { AppNavBar, EmptyData } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import defaultAvatar from "@/assets/dialog/groupChat.png"
+import { useUserStore } from "@/stores/user";
+import { getSDK } from '@/utils/openIM'
+import { useContactStore } from "@/stores/contact";
+import { handleImgCdnError } from "@/utils/tools"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+
+const { t } = useI18n()
+const myChatRef = ref(null)
+useGrade(myChatRef, 2)
+const OpenIM = getSDK()
+const userStore = useUserStore();
+const { setGroupChatConfig } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { chatList } = storeToRefs(contactStore);
+const activeName = ref([]);
+const router = useRouter()
+const showGroupTab = ref(true)
+const $api = inject("$api");
+
+const hanldSearch = () => {
+  router.push('/home/contact/myChat/mySearchs')
+}
+
+const createData = reactive({
+  type: 1,
+  title: t('myCreatedGroup'),
+  open: false,
+  dataList: []
+})
+const managerData = reactive({
+  type: 2,
+  title: t('myManageGroup'),
+  open: false,
+  dataList: []
+})
+const joinData = reactive({
+  type: 3,
+  title: t('myJoinGroup'),
+  open: false,
+  dataList: []
+})
+
+const groupListViewData = reactive([{
+  itemList: [createData, managerData, joinData],
+  viewData: []
+}])
+
+watch(() => chatList.value, () => {
+  getGroupList();
+}, { deep: true })
+
+//获取群聊分组列表
+const getGroupList = async () => {
+  try {
+    // 我创建的
+    const iCreatedList = []
+    //我加入的
+    const iJoinedList = [];
+    //我管理的
+    const iManagerList = [];
+    for (let element of chatList.value) {
+      if (element.ownerUserID === userInfo.value.userID) {
+        iCreatedList.push(element);
+      }
+      try {
+        const { data: managerList }  = await OpenIM.getSpecifiedGroupMembersInfo({
+          groupID: element.groupID,
+          userIDList: [userInfo.value.userID]
+        });
+        
+        // [GroupRoleLevel] 20普通成员, 100群主，60管理员
+        const iMemberInfo = managerList[0];
+        if (iMemberInfo.roleLevel === 60) {
+          iManagerList.push(element);
+        } else {
+          if (element.ownerUserID !== userInfo.value.userID) {
+            iJoinedList.push(element);
+          }
+        }
+      } catch (e) {
+        iJoinedList.push(element);
+      }
+    }
+    createData.dataList = iCreatedList;
+    managerData.dataList = iManagerList;
+    joinData.dataList = iJoinedList;
+    //显示规则
+    // 1.如果只有一个TAB（我创建的群聊、我管理的群聊、我加入的群聊）有群列表数据，则不显示TAB。
+    // 2. 如果TAB把下面没数据，则不显示tab
+    let tabCount = 0;
+    if (iCreatedList.length > 0) {
+      tabCount += 1;
+    }
+    if (iManagerList.length > 0) {
+      tabCount += 1;
+    }
+    if (iJoinedList.length > 0) {
+      tabCount += 1;
+    }
+    showGroupTab.value = tabCount > 1;
+    if (!showGroupTab.value) {
+      createData.open = true;
+      managerData.open = true;
+      joinData.open = true;
+    }
+    onListChanged();
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const onListChanged = () => {
+  let viewData = [];
+  for (let element of groupListViewData[0].itemList) {
+    viewData.push(element);
+    if (element.open) {
+      const list = element.dataList;
+      if (list && list.length > 0) {
+        viewData.push(...list);
+      }
+    }
+  }
+  if (showGroupTab.value) {
+    viewData = viewData.filter((item) => item.type && item.dataList.length > 0)
+  } else {
+    viewData = viewData.filter((item) => !item.type)
+  }
+  groupListViewData[0].viewData = viewData
+}
+
+onMounted(() => {
+  getGroupList()
+})
+
+const hanldClickItem = async (item) => {
+   // sessionType 参考 ConversationType
+  let conversationParams = {
+    sourceID: item.groupID,
+    sessionType: 3
+  }
+  // 获取群会话消息
+  const conversationRes = await OpenIM.getOneConversation(conversationParams)
+    // 获取当前角色是否是群主和管理员
+  const { data: result } = await OpenIM.getSpecifiedGroupsInfo([item.groupID]);
+  const { data } = await $api.msg_privateChat.query_public_userInfo({ UserIDs: [userInfo.value.userID] });
+  // 设置群消息
+  setGroupChatConfig({
+      ...conversationRes.data,
+      isGroupAdmin: data[0].isGroupAdmin,
+      isGroupOwner: data[0].isGroupOwner,
+      showCheck: false,
+      type: "",
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      msg: [],
+      isMultipleChoice: false,
+      groupChecked: [],
+      contactChecked: [],
+      chatDataList: [],
+      ...result[0]
+    });
+  router.push({
+      name: "groupChat",
+      params: { groupID: conversationRes.data.groupID },
+      state: {
+        msg: JSON.stringify({
+          groupID: conversationRes.data.groupID,
+          faceURL: conversationRes.data.faceURL,
+          showName: conversationRes.data.showName,
+          conversationType: conversationRes.data.conversationType,
+          conversationID: conversationRes.data.conversationID
+        })
+      }
+    });
+  // router.push(`/home/dialogue/groupChat/${groupID}`)
+}
+
+
+</script>
+
+<template>
+  <div ref="myChatRef" class="myChat">
+    <AppNavBar :title="$t('myGroup')" views_grade="secondary_view" @click-left="router.push('/home/contact')">
+    </AppNavBar>
+    <div class="myChat-wrap">
+      <div class="myChat-content">
+        <div class="search-box">
+          <van-field class="custom-input" clearable @focus="hanldSearch" label="" left-icon="search"
+            :placeholder="$t('search')" />
+        </div>
+        <div class="group-list">
+          <div class="open-item" v-if="showGroupTab && groupListViewData[0].viewData.length > 0">
+            <van-collapse v-model="activeName">
+              <van-collapse-item v-for="item in groupListViewData[0].viewData" :key="item.type" :class="[`collapse-item-${item.type}`]" :title="item.title" :name="item.type" >
+                <div class="content-item" v-for="items in item.dataList" :key="items.groupID" @click="hanldClickItem(items)">
+                  <van-image round width="48" height="48" :src="items.faceURL ? items.faceURL : defaultAvatar" @error="e => handleImgCdnError(e, items, 'faceURL')" />
+                  <div class="txt">{{ items.groupName }}</div>
+                </div>
+              </van-collapse-item>
+            </van-collapse>
+          </div>
+          <div class="no-item" v-if="!showGroupTab && groupListViewData[0].viewData.length > 0">
+            <div class="content-item" v-for="item in groupListViewData[0].viewData" :key="item.groupID" @click="hanldClickItem(item)">
+              <van-image round width="48" height="48" :src="item.faceURL ? item.faceURL : defaultAvatar" @error="e => handleImgCdnError(e, item, 'faceURL')" />
+              <div class="txt">{{ item.groupName }}</div>
+            </div>
+          </div>
+        </div>
+        <EmptyData v-if="groupListViewData[0].viewData.length === 0" :description="$t('notGroupTip')"></EmptyData>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.myChat-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .myChat-content {
+    .search-box {
+      height: 60px;
+      padding: 12px 16px;
+      margin-bottom: 0;
+
+      .custom-input {
+        border-radius: 8px;
+        border: 0.5px solid rgba(84, 84, 84, 0.05);
+        background: #F8F8FB;
+        height: 36px;
+        padding: 6px 8px;
+
+        :deep(.van-field__left-icon) {
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+
+          .van-icon {
+            font-size: 1.5rem;
+            line-height: 24px;
+          }
+        }
+
+        :deep(.van-field__control) {
+          color: #76767A;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+        }
+      }
+    }
+
+    .group-list {
+      height: 100%;
+      .open-item {
+        height: 100%;
+        overflow-y: auto;
+        :deep(.van-cell) {
+          height: 48px;
+          padding: 14px 16px;
+          color: #1B1B22;
+          line-height: 20px;
+        }
+      }
+
+      .no-item {
+        padding: 9px 16px;
+        height: calc(100vh - 110px);
+        overflow-y: auto;
+      }
+
+      .content-item {
+        display: flex;
+        align-items: center;
+        height: 66px;
+        .txt {
+          margin-left: 12px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+        }
+      }
+
+    }
+    .collapse-item-1 {
+      :deep(.van-collapse-item__content) {
+        max-height: calc(100vh - 164px);
+        overflow-y: auto;
+      }
+    }
+    .collapse-item-2 {
+      :deep(.van-collapse-item__content) {
+        max-height: calc(100vh - 212px);
+        overflow-y: auto;
+      }
+    }
+    .collapse-item-3 {
+      :deep(.van-collapse-item__content) {
+        max-height: calc(100vh - 260px);
+        overflow-y: auto;
+      }
+    }
+  }
+}</style>
diff --git a/src/views/contact/myChat/mySearchs.vue b/src/views/contact/myChat/mySearchs.vue
new file mode 100644
index 0000000..4d57b3f
--- /dev/null
+++ b/src/views/contact/myChat/mySearchs.vue
@@ -0,0 +1,154 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { useContactStore } from "@/stores/contact";
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { handleImgCdnError } from "@/utils/tools"
+const { t } = useI18n()
+const myChatSearchRef = ref(null)
+useGrade(myChatSearchRef, 3)
+const contactStore = useContactStore();
+const { chatList } = storeToRefs(contactStore);
+const router = useRouter()
+const searchVal = ref('')
+const searchFlag = ref(false)
+const searchList = ref([])
+const handleSearch = async () => {
+  // 这里搜索群
+  searchList.value = []
+  if (searchVal.value) {
+    chatList.value.forEach((item) => {
+      if (item.groupName.toUpperCase().includes(searchVal.value.toUpperCase())) {
+        searchList.value.push(item);
+      }
+    })
+    searchFlag.value = true
+  }
+}
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') {
+    searchFlag.value = false
+    searchList.value = []
+  }
+})
+const handleCancel = () => {
+  router.push(`/home/contact/myChat`)
+}
+const handleClickItem = ({ groupID }) => {
+  router.push(`/home/dialogue/groupChat/${groupID}`)
+}
+</script>
+
+<template>
+  <div ref="myChatSearchRef" class="myChatSearch">
+    <AppNavBar title="" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/contact/myChat')">
+    </AppNavBar>
+    <div class="myChatSearch-wrap">
+      <div class="myChatSearch-content">
+        <div class="search-box">
+          <van-field class="custom-input" v-model="searchVal" clearable label="" left-icon="search" :placeholder="$t('search_hine_1')"
+            @keypress.enter="handleSearch">
+          </van-field>
+          <div class="txt" @click="handleCancel">{{ $t('cancel') }}</div>
+        </div>
+        <div v-if="searchList.length > 0" class="content-box">
+          <div class="content-item" v-for="item in searchList" :key="item.userID" @click="handleClickItem(item)">
+            <van-image round width="48" height="48" :src="item.faceURL ? item.faceURL : defaultAvatar" @error="e => handleImgCdnError(e, item, 'faceURL')" />
+            <div class="txt">{{ item.groupName }}</div>
+          </div>
+        </div>
+        <div v-if="searchList.length === 0 && searchFlag" class="content-boxs">{{ $t('searchNotFound') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.myChatSearch-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .myChatSearch-content {
+    height: 100%;
+    .search-box {
+      height: 60px;
+      padding: 12px 0 12px 16px;
+      display: flex;
+      align-items: center;
+
+      .custom-input {
+        border-radius: 8px;
+        border: 0.5px solid rgba(84, 84, 84, 0.05);
+        background: #F8F8FB;
+        height: 36px;
+        padding: 6px 8px;
+        width: calc(100% - 56px);
+        margin-right: 12px;
+
+        :deep(.van-field__left-icon) {
+          width: 24px;
+          height: 24px;
+          margin-right: 8px;
+
+          .van-icon {
+            font-size: 1.5rem;
+            line-height: 24px;
+          }
+        }
+
+        :deep(.van-field__control) {
+          color: #76767A;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+        }
+      }
+
+      .txt {
+        color: #0095F6;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        margin-right: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .content-box {
+      height: calc(100vh - 116px);
+      overflow-y: auto;
+      .content-item {
+        height: 66px;
+        display: flex;
+        align-items: center;
+        padding: 9px 16px;
+
+        .txt {
+          margin-left: 12px;
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .content-boxs {
+      color: #76767A;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 21px;
+      margin-top: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/mySearch/index.vue b/src/views/contact/mySearch/index.vue
new file mode 100644
index 0000000..36fba97
--- /dev/null
+++ b/src/views/contact/mySearch/index.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { useContactStore } from "@/stores/contact";
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setFriendDetailId } = contactStore;
+const router = useRouter()
+const detailSearchRef = ref(null)
+useGrade(detailSearchRef, 2)
+const searchVal = ref('')
+const searchFlag = ref(false)
+const searchList = ref([])
+const handleSearch = async () => {
+  searchList.value = []
+  if (searchVal.value) {
+    contactList.value.forEach((item) => {
+      // 原来没有contactList中没有showName字段，不知道为啥要用这个字段，还是被谁删了？ 这里重新加一下
+      item.showName = item.remark || item.nickname;
+      if (item.showName.toUpperCase().includes(searchVal.value.toUpperCase()) || item.nickname.toUpperCase().includes(searchVal.value.toUpperCase())) {
+        searchList.value.push(item);
+      }
+    })
+    searchFlag.value = true
+  }
+}
+
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') {
+    searchFlag.value = false
+    searchList.value = []
+  }
+})
+const handleCancel = () => {
+  router.push(`/home/contact`)
+}
+const handleClickItem = ({ userID }) => {
+  setFriendDetailId(userID)
+  router.push({
+    path: '/home/contact/detail',
+    query: {
+      label: 'detail'
+    }
+  })
+}
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+// 判断是管理员还是群主
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    // 先判断是否是群组成员
+    if (isMemberFriendIds.value.includes(userID)) return "group";
+    // 如果不是群组成员，则查找是否为群主或管理员
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    }
+    return "";
+  };
+});
+</script>
+
+<template>
+  <div ref="detailSearchRef" class="detailSearch">
+    <AppNavBar title="" left-arrow views_grade="secondary_view" @click-left="router.push('/home/contact')"></AppNavBar>
+    <div class="detailSearch-wrap">
+      <van-search
+        v-model="searchVal"
+        show-action
+        :placeholder="$t('searchContact')"
+        @search="handleSearch"
+        @cancel="handleCancel"
+      />
+      <template v-if="searchList.length > 0">
+        <div class="content-item" v-for="item in searchList" :key="item.userID" @click="handleClickItem(item)">
+          <Avatar width="48" height="48" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+            <div class="search-for-contacts">
+              <CommonLottie
+              v-if="showGroupOwner(item.userID) != ''"
+              :isGroup="showGroupOwner(item.userID)"
+              :showName="item.showName"
+              :bottom="1"
+            ></CommonLottie>
+            <div v-else class="txt">{{ item.showName }}</div>
+            <div v-if="item.remark && item.nickname" class="nickname">{{$t('nicknames') + ':' + item.nickname }}</div>
+          </div>
+        </div>
+      </template>
+      <div v-if="searchList.length === 0 && searchFlag" class="content-boxs">{{ $t('searchNotFound') }}</div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSearch-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  :deep(.van-search__action) {
+    color: #0095F6;
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+  :deep(.van-search__content) {
+    border-radius: 8px;
+    border: 0.5px solid rgba(84, 84, 84, 0.05);
+    // height: 36px;
+    // background: #F8F8FB;
+  }
+    .content-item {
+      height: 66px;
+      display: flex;
+      align-items: center;
+      padding: 9px 16px;
+      .search-for-contacts{
+        width: 100%;
+      }
+      .txt {
+        margin-left: 12px;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        width: 220px;
+        word-wrap: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .nickname {
+        font-size: 0.75rem;
+        color: #76767A;
+        margin: 2px 0 0 12px;
+      }
+    }
+    .content-boxs {
+      color: #76767A;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 21px;
+      margin-top: 30px;
+    }
+}
+</style>
diff --git a/src/views/contact/qrcode/index.vue b/src/views/contact/qrcode/index.vue
new file mode 100644
index 0000000..430223f
--- /dev/null
+++ b/src/views/contact/qrcode/index.vue
@@ -0,0 +1,427 @@
+<script setup>
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import { AppNavBar, CodeInput } from '@/components/index'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router'
+import scans from '@/assets/dialog/scans.svg'
+import share from '@/assets/dialog/share.svg'
+import download from '@/assets/dialog/download.svg'
+import { useUserStore } from "@/stores/user";
+import { formatTimestamp, copyUserId, showPhone } from '@/utils/tools'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import QRCodeVue3 from 'qrcode-vue3'
+import html2canvas from 'html2canvas';
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import LogoImg from '@/assets/logo1.png'
+
+const { t } = useI18n()
+const qrcodeRef = ref(null)
+useGrade(qrcodeRef, 2)
+const userStore = useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const qrcodeImgRef = ref(null)
+const qrcodeContentsRef = ref(null)
+const detailObj = reactive({
+  faceUrl: '',
+  userId: '',
+  expireTime: '',
+  availableCount: '',
+  uniqueId: ''
+})
+
+const handleBack = () => {
+  if (route.query.label) {
+    router.go(-1)
+  } else {
+    router.push('/home/my/profile')
+  }
+}
+const { isAddFriendByQRCode } = appConfig.value.user_permission
+const arr = reactive([{
+  id: 1,
+  name: t('scan'),
+  url: scans,
+  isShow: isAddFriendByQRCode,
+},
+{
+  id: 3,
+  name: t('savePhoto'),
+  url: download,
+  isShow: true,
+}])
+const dialogList = computed(() => {
+  if (showPhone.value) {
+    return arr.filter(item => item.isShow != false)
+  } else {
+    arr.splice(0, 1)
+    return arr.filter(item => item.isShow != false)
+  }
+})
+// 生成新的二维码
+const getNewQrcode = async () => {
+  const res = await $api.contact.addQrCode()
+  if (res.code != 0) {
+    if (res.code === 1003) {
+      showToast(t('error_1003'))
+    }
+    return
+  }
+  const { uniqueId, userId, expireTime, availableCount } = res.data
+  detailObj.userId = userId
+  detailObj.availableCount = availableCount
+  detailObj.expireTime = expireTime
+  detailObj.uniqueId = uniqueId
+}
+
+const qrCodeText = ref('')
+
+
+const imgUrl = ref('')
+onMounted(async () => {
+  console.log('12', userInfo.value.faceURL);
+  const res = await $api.contact.getLastestQrCode()
+  if (res.code != 0) {
+    return
+  }
+  const { uniqueId, userId, expireTime, availableCount } = res.data
+  detailObj.userId = userId
+  detailObj.availableCount = availableCount
+  detailObj.expireTime = expireTime
+  detailObj.uniqueId = uniqueId
+  if (detailObj.uniqueId === '') {
+    await getNewQrcode()
+  }
+  // await nextTick();
+  qrCodeText.value = `com.neway.im/addFriend/add?qrUniqueId=${detailObj.uniqueId}`
+  imgUrl.value = userInfo.value.faceURL ? userInfo.value.faceURL : defaultAvatar
+  useUrlToBase64(imgUrl)
+})
+
+// 远程图片地址
+const useUrlToBase64 = (imgUrl) => {
+  const image = new Image()
+  image.crossOrigin = 'Anonymous'
+  image.src = `${imgUrl.value}&datenow=${Date.now()}`
+  image.onload = () => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+
+    canvas.height = image.naturalHeight
+    canvas.width = image.naturalWidth
+    ctx.drawImage(image, 0, 0)
+
+    imgUrl.value = canvas.toDataURL('image/jpeg')
+  }
+}
+
+
+const handleClick = (id) => {
+  if (id === 1) {
+    router.push({
+      path: '/home/contact/scan',
+      query: {
+        label: 'scan'
+      }
+    })
+  } else if (id === 3) {
+    // 保存图片
+    if (qrcodeContentsRef.value) {
+      const element = qrcodeContentsRef.value
+      html2canvas(element).then((canvas) => {
+        // 将 canvas 转换为图片
+        const dataURL = canvas.toDataURL('image/png');
+        // 创建一个 <a> 元素
+        const link = document.createElement('a');
+        link.href = dataURL;
+        // 设置下载文件名
+        link.download = 'qrcode.png';
+        // 触发点击事件以下载图片
+        link.click();
+        link.remove()
+      });
+    }
+  } else if (id === 2) {
+    sharePicture();
+  }
+}
+//调用手机自带分享页面
+const sharePicture = () => {
+  if (qrcodeContentsRef.value) {
+    // const element = qrcodeContentsRef.value
+    // html2canvas(element).then((canvas) => {
+    //   // 将 canvas 转换为图片
+    //   const dataURL = canvas.toDataURL('image/png');
+    //   // 创建一个 <a> 元素
+    //   const link = document.createElement('a');
+    //   link.href = dataURL;
+    //   // 设置下载文件名
+    //   link.download = 'qrcode.png';
+    //   const nativeShare = new NativeShare()
+    //   const shareData = {
+    //     title: 'qrcode.png',
+    //     desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
+    //     // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
+    //     link: 'https://github.com/fa-ge/NativeShare',
+    //     icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
+    //     // 不要过于依赖以下两个回调，很多浏览器是不支持的
+    //     success: function () {
+    //     },
+    //     fail: function () {
+    //     }
+    //   }
+    //   nativeShare.setShareData(shareData)
+    //   nativeShare.call()
+    // });
+  }
+}
+const handleRefresh = () => {
+  getNewQrcode()
+  qrCodeText.value = `com.neway.im/addFriend/add?qrUniqueId=${detailObj.uniqueId}`
+}
+
+</script>
+
+<template>
+  <div ref="qrcodeRef" class="qrcode">
+    <AppNavBar :forceShowArrow="true" :title="$t('myQr')" views_grade="secondary_view" @click-left="handleBack"></AppNavBar>
+    <div class="qrcode-wrap">
+      <div class="qrcode-content">
+        <div class="qrcode-contents" ref="qrcodeContentsRef">
+          <div class="top">
+            <div class="top-left">
+              <cdnSource v-if="imgUrl" :defaultUrl="imgUrl">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image round width="60" height="60" :src="cdnUrl" />
+                </template>
+              </cdnSource>
+            </div>
+            <div class="top-right">
+              <div class="title">{{ userInfo.nickname }}</div>
+              <div class="user-id">
+                <div class="id">{{ $t('userId') }}{{ userInfo.isInternalUser ? userInfo.internal_uid : detailObj.userId
+                  }}</div>
+                <div class="copy"
+                  @click="copyUserId(userInfo.isInternalUser ? userInfo.internal_uid : detailObj.userId)">
+                  <img src="@/assets/copy1.svg" alt="">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div ref="qrcodeImgRef" class="qrcode-img">
+            <QRCodeVue3 v-if="qrCodeText" :width="300" :height="300" :value="qrCodeText" :key="qrCodeText" :margin="0"
+              :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
+              :imageOptions="{ hideBackgroundDots: true, imageSize: 0.2, margin: 0 }" :dotsOptions="{
+      type: 'dots',
+      color: '#6898E6'
+    }" :backgroundOptions="{ color: '#fff' }" :cornersSquareOptions="{ type: 'dot', color: '#6898E6' }"
+              :cornersDotOptions="{ type: 'dot', color: '#6898E6' }" myclass="my-qur" imgclass="img-qr"
+              :image="LogoImg" />
+          </div>
+          <p class="scan-tips">{{ `${$t('scan')}，${$t('addMeToFriend')}!` }}</p>
+          <div class="tips-wrap">
+            <div class="tips"> {{ $t('qrUseCount', { count: detailObj.availableCount }) }}</div>
+            <div class="tips tips1">{{ $t('validTime') + (detailObj.expireTime ? formatTimestamp(detailObj.expireTime,
+      '/') : '')
+              }}</div>
+          </div>
+        </div>
+        <div class="btn-wrap" @click="handleRefresh">
+          <img class="icons" src="@/assets/dialog/recycle.svg" alt="">
+          <div class="btn">{{ $t('clickRefresh') }}</div>
+        </div>
+        <div class="share-wrap">
+          <div class="share-item" v-for="item in dialogList" :key="item.id" @click="handleClick(item.id)">
+            <img :src="item.url" alt="">
+            <p>{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.qrcode-wrap {
+  background: #FFF;
+  height: 100%;
+  padding: 56px 0 110px 0;
+  overflow-y: auto;
+
+  .qrcode-content {
+    padding-top: 67px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .qrcode-contents {
+    .top {
+      display: flex;
+      height: 60px;
+
+      &-left {
+        margin-right: 16px;
+      }
+
+      &-right {
+        padding: 2px 0;
+
+        .title {
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          margin-bottom: 4px;
+          padding-top: 5px;
+        }
+
+        .user-id {
+          display: flex;
+
+          .id {
+            color: #76767A;
+            font-family: PingFang SC;
+            font-size: 0.75rem;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+
+    .qrcode-img {
+      position: relative;
+      overflow: hidden;
+      margin: 24px 0;
+      width: 300px;
+      height: 300px;
+      background: rgba(27, 27, 34, 0.03);
+      border-radius: 16px;
+
+      .qr-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .scan-tips {
+      color: #76767A;
+      font-size: 1rem;
+      margin-bottom: 28px;
+      text-align: center;
+    }
+
+    // .middle {
+    //   height: 48px;
+    //   display: flex;
+    //   justify-content: space-between;
+    //   margin-bottom: 26px;
+
+    //   &-left {
+    //     color: #76767A;
+    //     font-family: PingFang SC;
+    //     font-size: 0.75rem;
+    //     font-weight: 400;
+    //     padding-top: 14px;
+    //   }
+
+    //   &-right {
+    //     // width: 48px;
+    //     // height: 48px;
+    //     // padding: 7.125px;
+    //     // border-radius: 9.6px;
+    //     // border: 0.5px solid rgba(0, 0, 0, 0.10);
+    //     // background: #FFF;
+
+    //     .img {
+    //       width: 48px;
+    //       height: 48px;
+    //     }
+    //   }
+    // }
+
+    .tips-wrap {
+      margin-bottom: 16px;
+
+      .tips {
+        color: #A4A4A7;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .btn-wrap {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 28px;
+
+    .icons {
+      padding: 0.5px 0;
+      width: 16px;
+      height: 16px;
+    }
+
+    .btn {
+      margin-left: 4px;
+      color: #0095F6;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+  }
+
+  .share-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .share-item {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      height: 80px;
+      padding: 12px;
+      margin-right: 24px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      img {
+        width: 24px;
+        height: 24px;
+        margin-bottom: 12px;
+      }
+
+      p {
+        color: #11121D;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .copy {
+    margin-left: 4px;
+    cursor: pointer;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/contact/scan/index.vue b/src/views/contact/scan/index.vue
new file mode 100644
index 0000000..f94cfd3
--- /dev/null
+++ b/src/views/contact/scan/index.vue
@@ -0,0 +1,304 @@
+<script setup>
+import { ref, onMounted, watch, onUnmounted } from "vue";
+import QRCode from 'llqrcode'
+import jsQR from "jsqr";
+import { showToast } from "vant";
+import { useRouter, useRoute } from "vue-router";
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from '@/utils/openIM'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore()
+const { appConfig } = storeToRefs(userStore)
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { setDetailSearch } = contactStore;
+const scanRef = ref(null)
+useGrade(scanRef, 2)
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter();
+const route = useRoute();
+let canvas;
+let video;
+let canvasElement;
+let $stream;
+let fontColorBlack = ref(true)
+const handleClick = (type) => {
+
+}
+onMounted(() => {
+  video = document.createElement("video");
+  canvasElement = document.getElementById("canvas");
+  canvas = canvasElement.getContext("2d");
+  // 尝试打开手机上安装后置摄像头
+  navigator.mediaDevices
+    .getUserMedia({
+      video: { facingMode: "environment" },
+    })
+    .then(function (stream) {
+      fontColorBlack.value = false
+      video.srcObject = stream;
+      $stream = stream
+      // 阻止IOS视频全屏
+      video.setAttribute("playsinline", true);
+      video.play();
+      requestAnimationFrame(tick);
+    })
+    .catch((e) => {
+      // showToast(e);
+    });
+});
+onUnmounted(() => {
+  $stream && $stream.getTracks().forEach(track => track.stop())
+})
+const tick = () => {
+  if (video.readyState === video.HAVE_ENOUGH_DATA) {
+    canvasElement.hidden = false;
+    canvasElement.height = video.videoHeight;
+    canvasElement.width = video.videoWidth;
+    canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+    var imageData = canvas.getImageData(
+      0,
+      0,
+      canvasElement.width,
+      canvasElement.height
+    );
+
+    // QR码解析
+    var code = jsQR(
+      imageData.data, // 图像数据
+      imageData.width, // 宽度
+      imageData.height, // 高度
+      {
+        inversionAttempts: "dontInvert",
+      }
+    );
+
+    if (code) {
+      const text = code.data;
+      if (text) {
+        const qrUniqueId = text.split('=')[1];
+        console.log(qrUniqueId, '2222')
+        checkQrAddFriend(qrUniqueId)
+      }
+    }
+  }
+  requestAnimationFrame(tick);
+}
+
+const checkQrAddFriend = async (id) => {
+  const res1 = await $api.contact.getQrCode({ unique_id: id })
+  if (res1.code !== 0) {
+    return
+  }
+  if (!res1.data.userId) {
+    showToast(t('unableToRecognize'))
+    return
+  }
+  // 先调用SDK
+  const res = await OpenIM.getUsersInfo([res1.data.userId])
+  if (res.data[0].friendInfo) {
+    const { nickname, remark, signature, faceURL } = res.data[0].friendInfo
+    setDetailSearch({ ...res.data[0].friendInfo, remark: remark, isFriend: true })
+  } else {
+    setDetailSearch({ remark: '', isFriend: false })
+  }
+  const result = await $api.contact.getUserById({ UserIDs: [res1.data.userId] });
+  if (!result.data.users) return showToast({ position: "top", message: t('notExsit') })
+  if (result.data.users.length === 0) {
+    return
+  }
+  // 判断该用户是否达到添加好友条件
+  if (checkoutBindType(result.data.users[0])) return showToast({ position: "top", message: t('withoutQualification') })
+  setDetailSearch({...result.data.users[0], ...res.data[0].friendInfo})
+
+  router.push({
+    path: '/home/contact/add/search/result',
+    query: {
+      id: res1.data.userId,
+      uniqueId: res1.data.uniqueId
+    }
+  })
+}
+const checkoutBindType = (friendInfo) => {
+  let flag = false
+  if (friendInfo.isGroupAdmin || friendInfo.isGroupOwner) return flag = false
+  switch(appConfig.value.user_permission.addFriendVerify) {
+    case 0:
+      break;
+    case 1:
+      flag = friendInfo.phone? false : true
+      break;
+    case 2:
+      flag = friendInfo.email? false : true
+      break;
+    case 3:
+      flag = (friendInfo.email || friendInfo.phone)? false : true
+      break;
+    case 4:
+      flag = (friendInfo.email && friendInfo.phone)? false : true
+      break;
+  }
+  return flag
+}
+const handleBack = () => {
+  if (route.query.label) {
+    router.push('/home/contact/add')
+  } else {
+    router.push('/home/contact')
+  }
+}
+const afterUploadRead = (file) => {
+  const URL = window.URL || window.webkitURL; // 兼容
+  const url = URL.createObjectURL(file.file)
+  QRCode.callback = function (text) {
+    console.log('text', text)
+    if (text === 'error decoding QR Code') {
+      showToast(t('unableToRecognize'))
+      return
+    }
+    if (text) {
+      const qrUniqueId = text.split('=')[1];
+      checkQrAddFriend(qrUniqueId)
+    }
+  }
+  QRCode.decode(url)
+};
+</script>
+
+<template>
+  <div ref="scanRef" class="scan">
+    <div class="scan-wrap">
+      <div class="scan-code-page">
+        <div class="scan-box">
+          <div class="back-btn" @click="handleBack">
+            <van-icon name="arrow-left" color="#fff" size="20px" />
+          </div>
+          <video id="video" autoplay class="scan-video"></video>
+          <div class="other-btn">
+            <div class="btn right">
+              <van-uploader :after-read="afterUploadRead">
+                <div class="icon-wrap">
+                  <img src="../../../assets/dialog/pic.svg" />
+                </div>
+              </van-uploader>
+              <div class="name" :class="{ 'black': fontColorBlack }">{{ $t('toolboxAlbum') }}</div>
+            </div>
+          </div>
+        </div>
+        <canvas id="canvas"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (max-width:750px) {
+  .other-btn {
+    bottom: 16px !important;
+  }
+}
+.scan-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .scan-code-page {
+    height: 100%;
+    width: 100%;
+
+    @media screen and (min-width:750px) {
+      width: calc(100vw - 375px);
+    }
+  }
+
+  .scan-box {
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+
+    @media screen and (min-width:750px) {
+      width: calc(100vw - 375px);
+      position: relative;
+    }
+  }
+
+  .scan-video {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .other-btn {
+    position: absolute;
+    bottom: 120px;
+    left: 0;
+    width: 100%;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      .icon-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 48px;
+        width: 48px;
+        border-radius: 50%;
+
+        img {
+          height: 48px;
+          width: 48px;
+        }
+      }
+
+      .name {
+        margin-top: 7px;
+        font-size: 0.75rem;
+        color: #fff;
+
+        &.black {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  .back-btn {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    top: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(66, 67, 73, 1);
+    z-index: 999;
+  }
+
+  #canvas {
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    width: 100% !important;
+    height: 100vh;
+  }
+}
+</style>
diff --git a/src/views/dialogue/charts/index.vue b/src/views/dialogue/charts/index.vue
new file mode 100644
index 0000000..4e21027
--- /dev/null
+++ b/src/views/dialogue/charts/index.vue
@@ -0,0 +1,114 @@
+<script setup >
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig'
+import { Chart } from '@/components'
+
+const router = useRouter()
+const barOption = {
+  title: {},
+  tooltip: {},
+  xAxis: {
+    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: 'sales',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+}
+
+const lineOption = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line',
+    },
+  ],
+}
+
+const scoreOption = {
+  tooltip: {
+    formatter: '{a} <br/>{b} : {c}%',
+  },
+  series: [
+    {
+      name: 'Pressure',
+      type: 'gauge',
+      detail: {
+        formatter: '{value}',
+      },
+      data: [
+        {
+          value: 50,
+          name: 'SCORE',
+        },
+      ],
+    },
+  ],
+}
+
+const refBarOption = ref(barOption)
+const refLineOption = ref(lineOption)
+const refScoreOption = ref(scoreOption)
+const chart_container = ref('')
+useGrade(chart_container, 2)
+// back
+const onClickLeft = () => router.push('/home/dialogue')
+</script>
+
+<template>
+  <div ref="chart_container">
+    <VanNavBar title="📊 Echarts" left-arrow @click-left="onClickLeft" />
+
+    <div class="container">
+      <div class="chart">
+        <Chart :option="refBarOption" :style="{ height: '330px' }" />
+      </div>
+
+      <div class="chart item">
+        <Chart :option="refLineOption" :style="{ height: '330px' }" />
+      </div>
+
+      <div class="chart item">
+        <Chart :option="refScoreOption" :style="{ height: '330px' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 60px 16px;
+  position: relative;
+}
+
+.chart {
+  width: 100%;
+  height: 300px;
+  background: #fff;
+}
+
+.chart.item {
+  margin-top: 15px;
+}
+
+[data-theme='dark'] {
+  .chart {
+    color: #fff;
+    background: #222;
+  }
+}
+</style>
diff --git a/src/views/dialogue/components/addfriendbindDialog.vue b/src/views/dialogue/components/addfriendbindDialog.vue
new file mode 100644
index 0000000..257b77b
--- /dev/null
+++ b/src/views/dialogue/components/addfriendbindDialog.vue
@@ -0,0 +1,88 @@
+<template>
+    <van-action-sheet
+    v-model:show="props.show"
+    :actions="actions"
+    :cancel-text="$t('cancel')"
+    :title="title"
+    close-on-click-action
+    :close-on-click-overlay="false"
+    :closeable="false"
+    @cancel="cancel"
+    @select="selectClick"
+    @close="cancel"
+    />
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { ref, onMounted, reactive, computed, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from "vue-i18n"
+import { useUserStore } from "@/stores/user";
+const router = useRouter()
+const userStore = useUserStore()
+const { t } = useI18n()
+const { userInfo, appConfig } = storeToRefs(userStore)
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  addfriendbindType: {
+    type: Number,
+    default: 0
+  },
+
+})
+const emits = defineEmits(['close'])
+const actions = ref([])
+const title = ref('')
+watchEffect(() => {
+    switch(props.addfriendbindType) {
+    case 0: // 无门槛
+        actions.value = []
+        break;
+    case 1: // 绑定手机号
+        actions.value = [{ type: 'phone', name: t('bindPhone'), color: '#0095F6' },]
+        title.value = t('pleaseBind') + t('phoneNumber')
+        break;
+    case 2: // 绑定邮箱
+        actions.value = [{ type: 'email', name: t('bind_email'),color: '#0095F6' },]
+        title.value =  t('pleaseBind') + t('email')
+        break;
+    case 3: // 绑定手机号或邮箱
+        actions.value = [
+            { type: 'phone', name: t('bindPhone'),color: '#0095F6' },
+            { type: 'email', name: t('bind_email'),color: '#0095F6' },
+        ]
+        title.value =  t('pleaseBind') + t('phoneNumber') + t('orStr') + t('email')
+        break; 
+    case 4: // 绑定手机号和邮箱
+        if (userInfo.value.email) {
+            actions.value = [{ type: 'phone', name: t('bindPhone'),color: '#0095F6' },]
+        } else if (userInfo.value.phone) {
+            actions.value = [{ type: 'email', name: t('bind_email'),color: '#0095F6' },]
+        } else {
+            actions.value = [
+                { type: 'phone', name: t('bindPhone'),color: '#0095F6' },
+                { type: 'email', name: t('bind_email'),color: '#0095F6' },
+            ]
+        }
+        title.value = t('pleaseBind') + t('phoneNumber') + t('andStr') + t('email')
+        break; 
+  }
+})
+const cancel = () => {
+    emits('close')
+}
+const selectClick = (item) => {
+    if (item.type === 'email') {
+        router.push({path: '/home/my/security/bindEmail',query: {labels: 'main'}})
+    } else if (item.type === 'phone') {
+        router.push({path: '/home/my/security/bindPhone',query: {labels: 'main'}})
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/components/conversationList.vue b/src/views/dialogue/components/conversationList.vue
new file mode 100644
index 0000000..b6f468e
--- /dev/null
+++ b/src/views/dialogue/components/conversationList.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { reactive, ref, watchEffect } from 'vue'
+import useConversationStore from "@/stores/modules/conversation"
+import VirtualList from '@/components/virtualList'
+import ConversationListItemVue from './conversationListItem.vue';
+import { useContactStore } from "@/stores/contact";
+const contactStore = useContactStore();
+const { getAllGroupOwnerOrAdmin ,contactList} = contactStore
+
+const conversationStore = useConversationStore()
+const loadState = reactive({
+  loading: false,
+  hasMore: true
+});
+const pullDisabled = ref(false)
+
+const onBottom = async () => {
+  if (loadState.hasMore && !loadState.loading) {
+    loadState.loading = true
+    loadState.hasMore = await conversationStore.getConversationListFromReq(true)
+    loadState.loading = false
+  }
+}
+
+const onScoll = (e) => {
+  pullDisabled.value = e.target.scrollTop > 0
+}
+
+const onRefresh = async () => {
+  conversationStore.getConversationListFromReq()
+  getAllGroupOwnerOrAdmin();
+  setTimeout(() => {
+    loadState.pullLoading = false
+    loadState.hasMore = false
+  }, 1000);
+}
+
+const updateHasMore = value => {
+  loadState.hasMore = value
+}
+
+defineExpose(({
+  updateHasMore
+}))
+
+</script>
+
+<template>
+  <van-pull-refresh v-model="loadState.pullLoading" :disabled="pullDisabled" @refresh="onRefresh" :pull-distance="80" v-if="conversationStore.storeConversationList.length">
+    <template #pulling="props">
+      <img src="@/assets/pull-refresh-arrow-down.svg" width="24" height="24" />
+    </template>
+    <template #loosing>
+      <img src="@/assets/pull-refresh-arrow-up.svg" width="24" height="24" />
+    </template>
+    <template #conversationStore.storeLoading>
+      <van-loading />
+    </template>
+    <virtual-list ref="vsl" class="vir-list" :data-key="'conversationID'"
+      :data-sources="conversationStore.storeConversationList" :data-component="ConversationListItemVue"
+      :estimate-size="88" @tobottom="onBottom" @scroll="onScoll" />
+  </van-pull-refresh>
+</template>
+
+<style scoped lang="less">
+.van-pull-refresh {
+  flex: 1;
+}
+
+.vir-list {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/components/conversationListItem.vue b/src/views/dialogue/components/conversationListItem.vue
new file mode 100644
index 0000000..98b96a2
--- /dev/null
+++ b/src/views/dialogue/components/conversationListItem.vue
@@ -0,0 +1,657 @@
+<script setup>
+import { computed, watchEffect, inject, onMounted, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
+import { getSDK } from "@/utils/openIM";
+import { useUserStore } from "@/stores/user";
+import useConversationStore from "@/stores/modules/conversation";
+import ExpandBox from "./expandBox.vue";
+import { useRoute, useRouter } from "vue-router";
+import { storeToRefs } from "pinia";
+import { showConfirmDialog } from "vant";
+import { CommonLottie } from "@/components/index.js";
+import { useContactStore } from "@/stores/contact";
+import { burnMsgByClearMsg } from "@/utils/common";
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+const contactStore = useContactStore();
+const { allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+// const { getAllGroupOwnerOrAdmin } = contactStore
+const { t } = useI18n();
+const router = useRouter();
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {},
+  },
+});
+const $api = inject("$api");
+const IMSDK = getSDK();
+const networkOnline = inject("networkOnline");
+const init = inject("dialogInit");
+// 有两条置顶就展示折叠按钮
+const MIN_EXPAND_NUM = 2;
+const conversationStore = useConversationStore();
+
+const userStore = useUserStore();
+const { setToken, setUserInfo, setGroupChatConfig, setPrivateChatConfig } =
+  userStore;
+const { userInfo } = storeToRefs(userStore);
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+// 把原数据浅拷贝一份，给模板处理逻辑使用
+const cloneSource = ref({});
+
+const selectedItems = ref([]);
+const selectedItemMap = computed(() =>
+  Object.fromEntries(selectedItems.value.map((val) => [val, true]))
+);
+const isActiveCheck = computed(() =>
+  conversationStore.storeSelectedItems
+    .map((item) => item.conversationID)
+    .includes(props.source.conversationID)
+);
+
+const handleOpConversation = async (type) => {
+  const { conversationID, recvMsgOpt, groupID } = props.source;
+
+  // 已读
+  if (type === "readed") {
+    await IMSDK.markConversationMessageAsRead(conversationID);
+  }
+
+  // 勿扰
+  if (type === "disturb") {
+    await IMSDK.setConversationRecvMessageOpt({
+      conversationID,
+      opt: recvMsgOpt === 0 ? 2 : 0,
+    });
+  }
+
+  // 置顶
+  if (type === "totop") {
+    await IMSDK.pinConversation({
+      conversationID,
+      isPinned: !props.source.isPinned,
+    });
+  }
+
+  // 删除
+  if (type === "delete") {
+    await showConfirmDialog({
+      title: t("clDelete"),
+      message: t("clDeleteDesc"),
+      className: "custom-del",
+      confirmButtonText: t("delete"),
+      confirmButtonColor: "#FC5A50",
+    });
+    // 删除后offset主动减1
+    const nextOffset = conversationStore.conversationOffset - 1;
+    conversationStore.updateConversationOffset(nextOffset);
+    // 私聊 删除前也要调用方法，把里面的焚烧内容删掉 是否是私聊用groupID判断
+    if (!groupID) {
+      await burnMsgByClearMsg(conversationID);
+    }
+    // 调用删除方法
+    await IMSDK.deleteConversationAndDeleteAllMsg(conversationID);
+    conversationStore.delConversationByCID(conversationID);
+    // init();
+  }
+};
+// 去除艾特类型
+const resetConversationGroupAtType = (conversationID, groupAtType) => {
+  if (groupAtType !== 0) {
+    IMSDK.resetConversationGroupAtType(conversationID);
+  }
+};
+const handleDetail = async () => {
+  if (conversationStore.storeConversationEditing) return;
+  const { conversationID } = props.source;
+  IMSDK.markConversationMessageAsRead(conversationID);
+  // 1单聊 2 群聊
+  if (props.source.conversationType === 1) {
+    setPrivateChatConfig({
+      ...props.source,
+      showCheck: false,
+      type: "",
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      msg: [],
+      isMultipleChoice: false,
+      groupChecked: [],
+      contactChecked: [],
+      chatDataList: [],
+    });
+    router.push({
+      name: "privatechat",
+      params: { userID: props.source.userID },
+      state: {
+        msg: JSON.stringify({
+          userID: props.source.userID,
+          faceURL: props.source.faceURL,
+          nickname: props.source.showName,
+        }),
+      },
+    });
+  }
+  if (props.source.conversationType === 3) {
+    // 获取当前角色是否是群主和
+    const { data: result } = await IMSDK.getSpecifiedGroupsInfo([
+      props.source.groupID,
+    ]);
+    const { data } = await $api.msg_privateChat.query_public_userInfo({
+      UserIDs: [userInfo.value.userID],
+    });
+    setGroupChatConfig({
+      ...props.source,
+      isGroupAdmin: data[0]?.isGroupAdmin,
+      isGroupOwner: data[0]?.isGroupOwner,
+      showCheck: false,
+      type: "",
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      msg: [],
+      isMultipleChoice: false,
+      groupChecked: [],
+      contactChecked: [],
+      chatDataList: [],
+      ...result[0],
+    });
+    router.push({
+      name: "groupChat",
+      params: { groupID: props.source.groupID },
+      state: {
+        msg: JSON.stringify({
+          groupID: props.source.groupID,
+          faceURL: props.source.faceURL,
+          showName: props.source.showName,
+          conversationType: props.source.conversationType,
+          conversationID: props.source.conversationID,
+        }),
+      },
+    });
+    resetConversationGroupAtType(
+      props.source.conversationID,
+      props.source.groupAtType
+    );
+  }
+};
+
+const handleSlectItem = () => {
+  const arr = [...conversationStore.storeSelectedItems];
+  const idx = arr.findIndex(
+    (val) => val.conversationID === props.source.conversationID
+  );
+  if (idx > -1) {
+    arr.splice(idx, 1);
+  } else {
+    arr.push({
+      conversationID: props.source.conversationID,
+      groupID: props.source.groupID,
+    });
+  }
+  conversationStore.updateSelectItems(arr);
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    // 先判断是否是群组成员
+    if (isMemberFriendIds.value.includes(userID)) return "group";
+    // 如果不是群组成员，则查找是否为群主或管理员
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    }
+    return "";
+  };
+});
+
+// 群成员退群的服务信息仅本群群主、群管理员、退群本人可查看，其余都无权限查看
+const checkConditions = (json) => {
+  try {
+    const parsed = JSON.parse(json?.latestMsg || '{}');
+    if (parsed.notificationElem && parsed.notificationElem.detail) {
+      parsed.notificationElem.detail = JSON.parse(parsed.notificationElem.detail);
+    }
+    const contentType = parsed.contentType;
+    const roleLevel = parsed.notificationElem?.detail?.quitUser?.roleLevel;
+    const leaveGroupUserID = parsed.notificationElem?.detail?.quitUser?.userID;
+    // 如果退群的用户是当前用户则返回 false
+    if (leaveGroupUserID === userInfo.value.userID) {
+      return; // 可以直接返回，不需要继续处理
+    }
+    // 获取当前用户的消息权限列表
+    const messagePermissionList = isMessagePermissionList?.value || [];
+    messagePermissionList.forEach(element => {
+      // 当前群聊
+      if (element.groupID === json.groupID) {
+         // 当前角色在这个群中的类型
+        if (element.roleLevel === 20) {
+          // 消息类型
+          const validContentTypes = [1504, 2101, 1508, 1513, 1512];
+          if (validContentTypes.includes(contentType)) {
+            return json.isFlag = true;
+          }
+        }
+      }
+    });
+    // // 查找是否有权限查看群成员退群信息
+    // const hasPermission = messagePermissionList.some(item => {
+    //   return item.groupID === json.groupID && item.roleLevel === 20;
+    // });
+    // // const validContentTypes = [1504, 2101, 1508, 1513, 1512];
+    // // 只有退群的消息类型才展示...
+    // const validContentTypes = [1504,1513];
+    // // 如果有权限且消息类型符合要求，则设置标志为 true
+    // if (hasPermission && validContentTypes.includes(contentType)) {
+    //   json.isFlag = true;
+    // }
+  } catch (error) {
+    console.error("解析失败 JSON:", error);
+  }
+};
+
+// 是否有查看消息的权限
+const isMessagePermissionList = ref();
+// 获取当前用户在群聊中的角色
+const  getGroupChatRole = async () => {
+  if (props.source?.groupID) {
+    const { data } = await IMSDK.getSpecifiedGroupMembersInfo({
+      groupID: props.source?.groupID,
+      userIDList: [userInfo.value?.userID],
+    });
+    isMessagePermissionList.value = data;
+  }
+};
+
+// fix 2024-8-6 这个不知道是干嘛用的暂时注释掉
+watchEffect(async ()=>{
+  // console.error('props?.source?.groupID',props?.source?.groupID);
+  if (props?.source?.groupID) {
+    cloneSource.value = props.source
+    await checkConditions(cloneSource.value);
+  }
+})
+
+// 页面初始化
+onMounted(() => {
+  nextTick(async () => {
+    if (props.source.groupID) {
+      cloneSource.value = props.source
+      await getGroupChatRole();
+    }
+  });
+});
+</script>
+
+<template>
+  <VanCellGroup class="cus-cell-group">
+    <div
+      class="group_cell"
+      v-show="!source.isPinned || !conversationStore.storeIsExpand"
+      :class="{ isPinned: source.isPinned, selected: isActiveCheck }"
+      v-long-press:500="
+        () => {
+          if (!conversationStore.storeConversationEditing)
+            conversationStore.updateConversationEditing(true);
+        }
+      "
+    >
+      <ExpandBox
+        :expandedNum="conversationStore.storeExpandedNum"
+        @toggleExpand="conversationStore.updateExpanded"
+        v-if="
+          conversationStore.storeExpandedNum >= MIN_EXPAND_NUM &&
+          source.idx === conversationStore.showExpandedIdx
+        "
+      />
+      <van-swipe-cell :left-width="76" :right-width="228">
+        <template #left>
+          <div class="opbtn blue-color" @click="handleOpConversation('readed')">
+            <img src="@/assets/readed.svg" width="24" height="24" alt="" />
+          </div>
+        </template>
+        <template #right>
+          <div
+            class="opbtn gray-color"
+            @click="handleOpConversation('disturb')"
+          >
+            <img
+              v-if="source.recvMsgOpt === 0"
+              src="@/assets/notDisturb.svg"
+              width="24"
+              height="24"
+              alt=""
+            />
+            <img
+              v-else
+              src="@/assets/notDisturb1.svg"
+              width="24"
+              height="24"
+              alt=""
+            />
+          </div>
+          <div class="opbtn blue-color" @click="handleOpConversation('totop')">
+            <img
+              v-if="source.isPinned"
+              src="@/assets/toTop.svg"
+              width="24"
+              height="24"
+              alt=""
+            />
+            <img
+              v-else
+              src="@/assets/toTop1.svg"
+              width="24"
+              height="24"
+              alt=""
+            />
+          </div>
+          <div class="opbtn red-color" @click="handleOpConversation('delete')">
+            <img src="@/assets/deleteDia.svg" width="24" height="24" alt="" />
+          </div>
+        </template>
+        <div class="cell-item" @click="handleDetail">
+          <!-- 会话序号添加测试 -->
+          <span>{{ source.idx+1 }}</span>
+          <div
+            class="select-item"
+            v-if="conversationStore.storeConversationEditing"
+            @click.stop="handleSlectItem"
+          >
+            <div class="check-box" :class="{ checked: isActiveCheck }"></div>
+          </div>
+          <van-badge
+            :dot="isOnLineState(source.userID)"
+            color="#43FA51"
+            :offset="[-6, 6]"
+            class="custom-badge"
+          >
+            <Avatar
+              width="48"
+              height="48"
+              :url="source.faceURL"
+              :is-group="source.conversationType === 3"
+              :name="source.showName"
+              @updateUrl="url => source.faceURL = url"
+            ></Avatar>
+          </van-badge>
+          <div class="item-info">
+            <div class="name-item">
+              <div class="name">
+                <img
+                  v-if="source.conversationType === 3"
+                  class="group-icon"
+                  src="@/assets/qunzu-3.svg"
+                  width="16"
+                  height="16"
+                  alt=""
+                />
+                <span
+                  class="showName"
+                  v-if="
+                    source.conversationType === 1 &&
+                    showGroupOwner(source.userID) != ''
+                  "
+                >
+                  <CommonLottie
+                    :isGroup="showGroupOwner(source.userID)"
+                    :left="35"
+                    :marginLeft="-5"
+                    :showName="source.showName"
+                  ></CommonLottie>
+                </span>
+                <span
+                  class="showName"
+                  v-else-if="
+                    source.conversationType === 1 &&
+                      showGroupOwner(source.userID) === ''
+                  "
+                >
+                  {{source.showName  }}
+                </span>
+                <span class="showName" v-if="source.conversationType === 3">
+                  {{ source.showName }}
+                </span>
+              </div>
+              <div class="time">{{ source.latestMsgSendTimeFormat }}</div>
+            </div>
+            <div class="msg-item">
+              <div
+                class="last-msg"
+                v-if="source.conversationType == 1"
+                v-html="source.latestInfo"
+              ></div>
+              <div class="last-msg" v-if="source.conversationType == 3">
+                <!-- {{ cloneSource.isFlag }}=== -->
+                <span v-if="cloneSource.isFlag">...</span>
+                <span v-else v-html="source.latestInfo" class="groupchat-lastmessage"></span>
+              </div>
+              <img
+                v-if="source.recvMsgOpt !== 0"
+                class="revc"
+                src="@/assets/recvMsgOpt.svg"
+                width="16"
+                height="16"
+                alt=""
+              />
+              <div
+                class="unread-count"
+                v-if="source.unreadCount > 0 && source.recvMsgOpt === 0"
+              >
+                {{ source.unreadCount > 99 ? "99+" : source.unreadCount }}
+              </div>
+              <div
+                class="notdisturb"
+                v-if="source.unreadCount > 0 && source.recvMsgOpt !== 0"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </van-swipe-cell>
+    </div>
+    <ExpandBox
+      :expandedNum="conversationStore.storeExpandedNum"
+      v-if="
+        conversationStore.showExpandedIdx === -1 &&
+        conversationStore.storeExpandedNum === source.idx + 1
+      "
+      @toggleExpand="conversationStore.updateExpanded"
+    />
+  </VanCellGroup>
+</template>
+
+<style scoped lang="less">
+.cus-cell-group {
+  /deep/.attext {
+    color: rgba(0, 149, 246, 1);
+  }
+
+  &.flex-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  .no-data-tips {
+    margin-top: 154px;
+    color: #1b1b22;
+
+    > div {
+      opacity: 0.6;
+      text-align: center;
+      font-size: 0.875rem;
+    }
+  }
+
+  .cell-item {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    height: 76px;
+    padding: 0 16px;
+
+    .item-info {
+      flex: 1;
+      margin-left: 12px;
+      font-size: 0.875rem;
+      color: #1b1b22;
+
+      .name-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 2px;
+        font-size: 1rem;
+        line-height: 22px;
+        width: 265px;
+        .name {
+          display: flex;
+          align-items: center;
+          color: #1b1b22;
+          // width: 185px;
+
+          .showName {
+            display: inline-block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            max-width: 160px;
+            white-space: nowrap;
+          }
+
+          .group-icon {
+            margin-top: -3px;
+            margin-right: 2px;
+          }
+        }
+
+        .time {
+          font-size: 0.75rem;
+          opacity: 0.4;
+          position: absolute;
+          right: 16px;
+        }
+      }
+    }
+
+    .msg-item {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+
+      .last-msg {
+        width: calc(100vw - 150px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #1b1b22;
+        opacity: 0.6;
+        .groupchat-lastmessage {
+          display: inline-block;
+          vertical-align: middle;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 100%;
+        }
+      }
+
+      .unread-count {
+        position: relative;
+        z-index: 0;
+        color: #fff;
+        text-align: center;
+        background: var(--c-blue-color);
+        border-radius: 10px;
+        font-size: 0.75rem;
+        line-height: 1;
+        padding: 0 4px;
+        min-width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      .revc {
+        margin-top: -6px;
+      }
+
+      .notdisturb {
+        width: 6px;
+        height: 6px;
+        background: var(--c-blue-color);
+        border-radius: 50%;
+        flex: 0 0 6px;
+      }
+    }
+  }
+
+  .group_cell {
+    &.selected,
+    &.isPinned {
+      background: #f8f8fb;
+    }
+  }
+}
+
+:deep(.van-swipe-cell__left),
+:deep(.van-swipe-cell__right) {
+  display: flex;
+}
+
+.opbtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 76px;
+  height: 100%;
+
+  &.gray-color {
+    background: #e9ebf2;
+  }
+
+  &.blue-color {
+    background: #0095f6;
+  }
+
+  &.red-color {
+    background: #fc5a50;
+  }
+}
+
+.custom-del {
+  :deep(.van-dialog__header) {
+    color: #1b1b22;
+    padding-top: 25px;
+    font-size: 1rem;
+  }
+
+  :deep(.van-dialog__content) {
+    color: #76767a;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .item-info {
+    width: 284px;
+  }
+}
+
+.select-item {
+  width: 16px;
+  margin-right: 12px;
+
+  .check-box {
+    width: 16px;
+    height: 16px;
+    border: 1px solid #d1d1d3;
+    border-radius: 50%;
+
+    &.checked {
+      border-color: var(--c-blue-color);
+      background: var(--c-blue-color) url(../../../assets/group-check.svg)
+        no-repeat center / cover;
+    }
+  }
+}
+</style>
diff --git a/src/views/dialogue/components/expandBox.vue b/src/views/dialogue/components/expandBox.vue
new file mode 100644
index 0000000..64b6699
--- /dev/null
+++ b/src/views/dialogue/components/expandBox.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { computed, watch } from 'vue'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from "pinia"
+import useConversationStore from "@/stores/modules/conversation"
+
+const { t } = useI18n()
+const conversationStore = useConversationStore()
+const { conversationList } = storeToRefs(conversationStore);
+const emit = defineEmits(['update:modelValue', 'toggleExpand'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  expandedNum: {
+    type: Number,
+    default: 0
+  },
+})
+
+const expandText = computed(() => expandPinnedItem.value ? `${props.expandedNum}${t('clOpenConversation')}` : t('clCloseConversation'))
+
+// 置顶相关逻辑
+const expandPinnedItem = ref(false)
+const toggleExpand = (record) => {
+  expandPinnedItem.value = !expandPinnedItem.value
+  emit('toggleExpand', expandPinnedItem.value)
+  // emit('update:modelValue', expandPinnedItem.value)
+}
+
+const isAllPinned = computed(() => conversationList.value.every(item => !!item.isPinned))
+
+watch(() => isAllPinned.value, (val, oldVal) => {
+  if (val && !oldVal && !expandPinnedItem.value) {  
+    expandPinnedItem.value = true
+  }
+}, { deep: true, immediate: true })
+</script>
+
+<template>
+  <div class="expand-box" @click.stop="toggleExpand(item)">
+    <div class="expand-item">
+      <div class="l-side">
+        <img src="@/assets/expand-list-icon.svg" width="20" height="20" alt="">
+        <span>{{ expandText }}</span>
+      </div>
+      <div class="r-side">
+        <img v-if="!expandPinnedItem" src="@/assets/arrow-up.svg" width="16" height="16" alt="">
+        <img v-else src="@/assets/arrow-down.svg" width="16" height="16" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.expand-box {
+  padding: 0 16px;
+  background: #F8F8FB;
+
+  .expand-item {
+    height: 34px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+
+    .l-side {
+      display: flex;
+      align-items: center;
+      span {
+        margin-left: 6px;
+        color: rgba(0, 0, 0, .4);
+      }
+    }
+    .r-side {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/components/fileDownload.vue b/src/views/dialogue/components/fileDownload.vue
new file mode 100644
index 0000000..045b9ad
--- /dev/null
+++ b/src/views/dialogue/components/fileDownload.vue
@@ -0,0 +1,208 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { showToast } from 'vant';
+import clipboard3 from "vue-clipboard3";
+import { useUserStore } from "@/stores/user.js";
+import { storeToRefs } from "pinia";
+import { useRouter } from 'vue-router'
+import { getFileTypeIconName, formatFileSize, copyUserId } from '@/utils/tools'
+
+const router = useRouter();
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { privateChatConfig, groupChatConfig } = storeToRefs(userStore);
+
+const { t } = useI18n()
+const emit = defineEmits(['update:modelValue'])
+
+// fileItem中需要有以下字段
+// fileType 文件类型 fileName2没有.xxx的文件名 fileIconName 文件对应icon fileSizeText文件大小
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  fileItem: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  }
+})
+
+const showPopover = ref(false);
+const actions = [
+  { text: t('copyLink'), actionNum: 1 },
+  { text: t('transmit'), actionNum: 2 },
+];
+const handleSelectAction = (action) => {
+  const { actionNum } = action
+  // 复制链接
+  if (actionNum === 1) {
+    copyUserId(props.fileItem.fileElem.sourceUrl)
+  }
+  // 转发？？
+  console.log('props', props.fileItem)
+  if (actionNum === 2) {
+    // 有groupID 就是群聊
+    if (props.fileItem.groupID) {
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        showCheck: false,
+        type: "single", // 逐条转发
+        msg: [props.fileItem],
+        hiddenSource: 1, // 隐藏消息来源1， 2不隐藏
+        isMultipleChoice: false,
+        groupChecked: [], // 选择的群
+        contactChecked: [], // 选择的联系人
+        chatDataList: []
+      });
+    } else {
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        showCheck: false,
+        type: "single", // 逐条转发
+        msg: [props.fileItem],
+        hiddenSource: 1, // 隐藏消息来源1， 2不隐藏
+        isMultipleChoice: false,
+        groupChecked: [], // 选择的群
+        contactChecked: [], // 选择的联系人
+        chatDataList: []
+      });
+    }
+    
+    router.push("/home/dialogue/transmitPage");
+  }
+}
+
+const handleDownload = () => {
+  const link = document.createElement('a');
+  link.href = props.fileItem.fileElem.sourceUrl;
+  link.download = '';
+  link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
+  link.click();
+}
+
+
+const fromMediaBack = () => {
+  emit('update:modelValue', false)
+}
+
+const getImgUrl = (type) => {
+  return new URL(`../../../assets/filesvg/${type}.svg`, import.meta.url).href
+}
+</script>
+
+<template>
+  <div class="file-download-wrapper" v-if="visible">
+    <div class="file-download">
+      <div class="m-header">
+        <div class="bk" @click="fromMediaBack">
+          <img src="@/assets/arrow-left-black.svg" alt="" srcset="">
+        </div>
+        <van-popover v-model:show="showPopover" placement="bottom-end" :actions="actions" @select="handleSelectAction">
+          <template #reference>
+            <img src="@/assets/more.svg" alt="">
+          </template>
+        </van-popover>
+      </div>
+      <div class="file-content">
+        <div class="file-icon">
+          <img :src="getImgUrl(fileItem.fileIconName || 'apk')" width="96" height="96" alt="">
+        </div>
+        <div class="file-name">
+          {{ fileItem.fileName2 }}.{{ fileItem.fileType }}
+        </div>
+        <div class="file-size">{{ fileItem.fileSizeText }}</div>
+      </div>
+      <div class="download-btn" @click="handleDownload">
+        {{ $t('download') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.file-download-wrapper {
+  position: fixed;
+  z-index: 110;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  .file-download {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    overflow-y: auto;
+    font-size: 1rem;
+  }
+}
+.file-content {
+  margin-top: 24px;
+  margin-bottom: 44px;
+  padding: 0 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 162px;
+  color: #1B1B22;
+
+  .file-icon {
+    width: 96px;
+    margin-bottom: 16px;
+  }
+
+  .file-name {
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .file-size {
+    opacity: .6;
+    font-size: 0.875rem;
+  }
+}
+.download-btn {
+  cursor: pointer;
+  margin: 0 20px;
+  display: block;
+  height: 52px;
+  line-height: 52px;
+  color: #fff;
+  background: #1B1B22;
+  border-radius: 14px;
+  text-align: center;
+}
+.m-header {
+  position: relative;
+  height: 56px;
+  padding-right: 16px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: #1B1B22;
+  font-size: 1rem;
+  font-weight: bold;
+  .bk {
+    position: absolute;
+    top: 12px;
+    left: 5px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/dialogue/components/infoItem.vue b/src/views/dialogue/components/infoItem.vue
new file mode 100644
index 0000000..3fcc11c
--- /dev/null
+++ b/src/views/dialogue/components/infoItem.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  expandedNum: {
+    type: Number,
+    default: 0
+  },
+})
+
+const expandText = computed(() => expandPinnedItem.value ? `${props.expandedNum}${t('clOpenConversation')}` : t('clCloseConversation'))
+
+// 置顶相关逻辑
+const expandPinnedItem = ref(false)
+const toggleExpand = (record) => {
+  expandPinnedItem.value = !expandPinnedItem.value
+  emit('update:modelValue', expandPinnedItem.value)
+}
+</script>
+
+<template>
+  <div class="expand-box" @click.stop="toggleExpand(item)">
+    <div class="expand-item">
+      <div class="l-side">
+        <img src="@/assets/expand-list-icon.svg" width="20" height="20" alt="">
+        <span>{{ expandText }}</span>
+      </div>
+      <div class="r-side">
+        <img v-if="!expandPinnedItem" src="@/assets/arrow-up.svg" width="16" height="16" alt="">
+        <img v-else src="@/assets/arrow-down.svg" width="16" height="16" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.expand-box {
+  padding: 0 16px;
+  background: #F8F8FB;
+
+  .expand-item {
+    height: 34px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+
+    .l-side {
+      display: flex;
+      align-items: center;
+      span {
+        margin-left: 6px;
+        color: rgba(0, 0, 0, .4);
+      }
+    }
+    .r-side {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/components/navBar.vue b/src/views/dialogue/components/navBar.vue
new file mode 100644
index 0000000..0c2dd57
--- /dev/null
+++ b/src/views/dialogue/components/navBar.vue
@@ -0,0 +1,304 @@
+<script setup>
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useAttrs, defineProps,onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user.js";
+import defaultGroupAvatar from "@/assets/dialog/groupChat.png";
+import { useMessageStore } from "@/stores/modules/message";
+import { useContactStore } from "@/stores/contact";
+import { useFriendStore } from '@/stores/modules/membership-info'
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+const $api = inject("$api");
+const OpenIM = getSDK();
+const friendState = useFriendStore()
+const messageStore = useMessageStore();
+const { updateCheckConcat } = messageStore;
+const props = defineProps(["info", "toShare", "toDetails", "conversationType",'onlineState']);
+const router = useRouter();
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { groupChatConfig, privateChatConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { allGroupOwnerOrAdmin,groupMemberInfo } = storeToRefs(contactStore);
+const { groupInfo } = storeToRefs(contactStore);
+const attrs = useAttrs();
+const emits = defineEmits(["goback"]);
+const goback = () => {
+  emits("goback");
+};
+// 获取计算属性：在线状态
+const isOnLineState = friendState.computedOnLineState;
+// 根据群聊id来判断当前用户是否在群聊当中如果在返回true不在返回false
+const hasWhetherGroup = (key) => {
+  return !!groupMemberInfo.value[key]?.length;
+};
+
+const userFlag = ref(false)
+const groupOnlienCount = ref(0)//群在线人数
+const userGroupInfo = ref({})
+/**
+ * 获取再群中的个人权限
+ */
+const getGroupData = async() =>{
+   //获取当前群在线人数
+   const res = await $api.msg_privateChat.queryGroupMemberOnlineCount({
+    GroupID: groupChatConfig.value.groupID,
+  });
+  console.error(res,'获取当前群消息')
+  if(res.code==0)groupOnlienCount.value = res?.data?.count || 0
+  const { data } = await OpenIM.getSpecifiedGroupMembersInfo({
+    groupID:groupChatConfig.value.groupID,
+    userIDList: [localStorage.getItem('user_id')],
+  });
+  console.error(data,'登录用户再群聊的权限')
+  userFlag.value = data&&data[0]?true:false
+  userGroupInfo.value = data&&data[0]?data[0]:{}
+ 
+}
+
+if(props.conversationType===3){
+  getGroupData()
+}
+const handleCancel = () => {
+  if (props.conversationType === 1) {
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      showCheck: false,
+      type: "",
+      msg: [],
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+  } else if (props.conversationType === 3) {
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      showCheck: false,
+      type: "",
+      msg: [],
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+  }
+  updateCheckConcat([]);
+};
+const showIcon = computed(() => {
+  if (props.conversationType === 3 && !groupChatConfig.value.showCheck) {
+    return true;
+  }
+  if (props.conversationType === 1 && !privateChatConfig.value.showCheck) {
+    return true;
+  }
+  return false;
+});
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    } else {
+      if (isMemberFriendIds.value.includes(userID)) return "group";
+    }
+    return "";
+  };
+});
+
+// 计算群名称
+const isGroupName = computed(() => {
+  // 当 groupInfo.value?.groupName 变化时返回它的值，否则返回 info.groupName
+  return groupInfo.value?.groupName || props.info.groupName;
+});
+</script>
+
+<template>
+  <AppNavBar v-bind="attrs" @click-left="goback">
+    <template #title>
+      <!--群样式-->
+      <div
+        class="chat_nav_left chat_nav_left_group"
+        v-if="conversationType === 3"
+      >
+      <cdnSource :defaultUrl="info.faceURL">
+        <template #cdnSlot="{ cdnUrl }">
+          <van-image
+            round
+            width="40"
+            height="40"
+            :src="cdnUrl ? cdnUrl : defaultGroupAvatar"
+            fit="cover"
+          />
+        </template>
+      </cdnSource>
+        <div class="header_content">
+          <div class="header_box">
+            <span class="nickname nicknames">{{ isGroupName }}</span>
+            <!-- <div class="header_box_bottom" v-if="info.roleLevel !== 20"> -->
+            <div class="header_box_bottom" v-if="userGroupInfo?.roleLevel !== 20">
+              <div class="online"></div>
+              <span>{{
+                // $t("cvOnlineCount", { count: info.memberCount })
+                $t("cvOnlineCount", { count: groupOnlienCount })
+              }}</span>
+            </div>
+          </div>
+          <!-- fix 2027-7-24修复用户退群后人或者群聊解散，人数直接不展示了 -->
+          <!-- <div class="header_box_bottom" v-if="info.roleLevel == 20 && hasWhetherGroup(info.groupID)">
+            <span class="nickname">共{{ hasWhetherGroup(info.groupID)?info.memberCount:0 }}人</span>
+          </div> -->
+          <div class="header_box_bottom" v-if="userGroupInfo?.roleLevel == 20&&userFlag ">
+            <span class="nickname">共{{userFlag? info.memberCount:0 }}人</span>
+          </div>
+        </div>
+      </div>
+      <!---私聊样式-->
+      <div class="chat_nav_left" v-else>
+        <Avatar
+          width="40"
+          height="40"
+          :url="info.faceURL"
+          :name="info.showName ? info.showName : info.nickname"
+          @updateUrl="url => info.faceURL = url"
+        >
+        </Avatar>
+        <div class="online" v-if="isOnLineState(info.userID)"></div>
+        <div class="info">
+          <div v-if="showGroupOwner(info.userID)">
+            <CommonLottie
+              :isGroup="showGroupOwner(info.userID)"
+              :width="140"
+              :showName="info.showName ? info.showName : info.nickname"
+            ></CommonLottie>
+          </div>
+          <span v-else class="nickname nicknames">{{ info.showName ? info.showName : info.nickname }}</span>
+          <div class="online-state">{{onlineState}}</div>
+        </div>
+      </div>
+    </template>
+    <template #right>
+      <div class="chat_nav_right">
+        <van-icon
+          v-show="showIcon"
+          name="ellipsis"
+          @click="router.push(toDetails)"
+        />
+        <span class="right_span" @click="handleCancel" v-show="!showIcon">{{
+          $t("cancel")
+        }}</span>
+      </div>
+    </template>
+  </AppNavBar>
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+  .chat_nav_left {
+    left: 12px !important;
+  }
+}
+
+.chat_nav_left_group {
+  display: flex;
+  justify-content: flex-start;
+  position: absolute;
+  top: 0;
+  left: 50px;
+
+  .header_box_bottom {
+    display: flex;
+    align-items: center;
+
+    .online {
+      position: static !important;
+      margin: 0 4px 0 8px;
+    }
+
+    & > span {
+      font-size: 0.75rem;
+      font-weight: 400;
+      color: rgba(27, 27, 34, 1);
+    }
+  }
+}
+
+.chat_nav_left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: absolute;
+  // width: 110px;
+  height: 40px;
+  top: 0;
+  left: 45px;
+  bottom: 0;
+  margin: auto 0;
+
+  .img_header {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .online {
+    background: #43fa51;
+    width: 9px;
+    height: 9px;
+    border: 1px solid white;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 30px;
+  }
+
+  .nickname {
+    margin-left: 8px;
+    font-weight: 500;
+    font-size: 1rem;
+    font-family: PingFangSC-Regular, sans-serif;
+  }
+
+  .nicknames {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 180px;
+    text-align: left;
+  }
+}
+
+.chat_nav_right {
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .right_span {
+    color: #979797;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+}
+
+.header_content {
+  display: flex;
+  flex-direction: column;
+}
+.online-state {
+  text-align: left;
+  font-size: 0.75rem;
+  color: #1B1B22;
+  opacity: 60%;
+  font-weight: 400;
+  margin-left: 8px;
+}
+</style>
diff --git a/src/views/dialogue/components/searchLogs.vue b/src/views/dialogue/components/searchLogs.vue
new file mode 100644
index 0000000..330feac
--- /dev/null
+++ b/src/views/dialogue/components/searchLogs.vue
@@ -0,0 +1,872 @@
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import pinyin from 'js-pinyin'
+import icon2 from '@/assets/shanchu.png'
+import shanchu from "@/assets/chanchu.svg"
+import shanchu2 from "@/assets/svg/shanchu2.svg"
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import defaultSearch from '@/assets/tupian.png'
+import { fileIcon } from "@/utils/fileUtils";
+import { replaceSearchText, parseMsg, isSelf, isZhFn,getChatTimeline, getFileTypeIconName, formatFileSize } from '@/utils/tools'
+import { CommonLottie } from "@/components/index.js";
+import fileDownload from "./fileDownload.vue";
+import { storeToRefs } from 'pinia'
+import dayjs from 'dayjs';
+const contactStore = useContactStore();
+const { contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const emit = defineEmits(['update:modelValue', 'cancel'])
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  conversationList: {
+    type: Array,
+    default: () => []
+  },
+  toDetail: {
+    type: Function,
+    default: () => { }
+  }
+})
+
+const { t } = useI18n()
+const IMSDK = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const searchForm = ref('')
+const searchBox = ref(null)
+
+watch(() => props.modelValue, async (val) => {
+  if (val && searchBox.value) {
+    await nextTick()
+    searchBox.value.focus()
+  } else {
+    reset()
+  }
+})
+const reset = () => {
+  searchStatus.value = 'beforeSearch'
+  searchList.value = []
+  searchForm.value = ''
+  expandItem1.value = true
+  expandItem2.value = true
+  expandItem3.value = true
+}
+const onCancel = () => {
+  reset()
+  emit('update:modelValue', false)
+}
+
+const expandItem1 = ref(true)
+const expandItem2 = ref(true)
+const expandItem3 = ref(true)
+// 1 对话 2 聊天
+const toggleExpand = (type) => {
+  if (type === 1) {
+    expandItem1.value = !expandItem1.value
+  }
+  if (type === 2) {
+    expandItem2.value = !expandItem2.value
+  }
+  if (type === 3) {
+    expandItem3.value = !expandItem3.value
+  }
+}
+const searchStatus = ref('beforeSearch')
+const searchList = ref([])
+const matchedConList = ref([])
+const onSearch = async () => {
+  let params = {
+    conversationID: '',
+    keywordList: [searchForm.value],
+    messageTypeList: [101, 106, 105], // 101	文本消息 ,102	图片消息, 104	视频消息 106 @消息 105 文件
+    searchTimePosition: 0,
+    searchTimePeriod: 0,
+    pageIndex: 1,
+    count: 100000000,
+  }
+  searchStatus.value = 'searchResult'
+  if (searchForm.value) {
+    // 搜索聊天记录匹配内容
+    const { data } = await IMSDK.searchLocalMessages(params)
+    searchList.value = (data.searchResultItems || []).map(item => {
+      let userID = ''
+      let groupID = ''
+      item.showNameWithSty = replaceSearchText(item.showName, searchForm.value)
+      item.isShowNameMatch = item.showName === item.showNameWithSty
+      item.messageList?.forEach((msg) => {
+        const { recvID, sendID, senderFaceUrl, senderNickname } = msg
+        let content = ''
+        if (msg.contentType === 101) {
+          content = msg.textElem && msg.textElem.content
+        }
+        if (msg.contentType === 105) {
+          content = msg.fileElem?.fileName
+        }
+        if (msg.contentType === 106) {
+          content = parseMsg(msg, true, true, true, contactList.value)
+        }
+        // 单聊的时候才需要
+        if (item.conversationType === 1) {
+          userID = isSelf(recvID) ? sendID : recvID
+        }
+        // 群聊需要groupID
+        if (item.conversationType === 3) {
+          groupID = msg.groupID
+        }
+        msg.conversationType = item.conversationType
+        msg.conversationID = item.conversationID
+        msg.userID = userID
+        msg.groupID = groupID
+        msg.faceURL = senderFaceUrl
+        msg.nickname = senderNickname
+        msg.showName = msg.nickname
+        msg.textElmWithSty = replaceSearchText(content, searchForm.value)
+        if (msg.contentType === 105) {
+          msg.textElmWithSty = `[${t('file')}]${msg.textElmWithSty}`
+        }
+      })
+      item.userID = userID
+      item.groupID = groupID
+      return item
+    })
+    // 给联系人加备注与昵称
+    const newArr = props.conversationList.map(item => {
+      let contactItem = contactList.value.find(i => item.userID === i.userID)
+      if(contactItem) {
+        return {
+          ...item,
+          remark: contactItem.remark,
+          nickname: contactItem.nickname
+        }
+      }else {
+        return item
+      }
+    })
+    // 搜索对话列表中匹配的内容
+    matchedConList.value = newArr.filter(item => {
+      if(item.remark && item.nickname) {
+        return item.remark.includes(searchForm.value) || item.nickname.includes(searchForm.value)
+      }
+      return item.showName.includes(searchForm.value)
+    }).map(item => ({ ...item, showNameWithSty: replaceSearchText(item.showName, searchForm.value) }))
+    console.log('筛选：', searchList.value, matchedConList.value);
+    if (!searchList.value.length && !matchedConList.value.length) {
+      searchStatus.value = 'noData'
+    }
+  } else {
+    searchStatus.value = 'beforeSearch'
+    searchList.value = []
+  }
+  
+}
+
+const activeMutiMatchGroup = ref({})
+const handleSearchNext = (record, type) => {
+  if (type === 'singleRecord') {
+    onCancel()
+    props.toDetail(record)
+    return
+  }
+  activeMutiMatchGroup.value = record
+  searchStatus.value = 'groupDetail'
+}
+const handleBack = () => {
+  expandItem3.value = true
+  searchStatus.value = 'searchResult'
+}
+const mediaResultList = ref([])
+const mediaResulGrouptList = ref([])
+const activeSearchType = ref(1)
+const handleSearchMediaRecord = async (searchType) => {
+  try {
+    activeSearchType.value = searchType
+    // 这里keyword随便填个值就行
+    const params = {
+      conversationID: '',
+      keywordList: [''], // 默认为空字符串拿所有的
+      messageTypeList: searchType === 1 ? [102, 104] : [105], // 102	图片消息, 104	视频消息 106 105文件
+      searchTimePosition: 0,
+      searchTimePeriod: 0,
+      pageIndex: 1,
+      count: 100000000,
+    }
+    const { data } = await IMSDK.searchLocalMessages(params)
+    // 没有内容
+    if (data.totalCount === 0) {
+      searchStatus.value = 'mediaSearchResultNoData'
+      return
+    }
+    searchStatus.value = 'mediaSearchResult'
+    mediaResultList.value = data.searchResultItems.reduce((arr, item) => {
+      arr.push(...item.messageList)
+      return arr
+    }, [])
+    .filter(item => item.sendTime > 0)
+    .sort((a, b) => b.sendTime - a.sendTime)
+    .map(item => {
+      const customParams = {
+        sendTimeText: dayjs(item.sendTime).format(isZhFn ? 'YYYY年MM月' : 'YYYY/MM/DD'),
+      }
+      // 搜文件的时候截一下文件名
+      if (searchType === 2) {
+        const fileSplits = item.fileElem?.fileName?.split('.')
+        customParams.fileType = fileSplits[fileSplits.length - 1]
+        fileSplits.pop()
+        // 没有文件类型了的文件名
+        customParams.fileName2 = fileSplits.join('')
+        customParams.fileIconName = getFileTypeIconName(customParams.fileType)
+        customParams.fileSizeText = formatFileSize(item.fileElem?.fileSize)
+      }
+      return {
+        ...item,
+        ...customParams
+      }
+    })
+
+    mediaResulGrouptList.value = mediaResultList.value.reduce((arr, item) => {
+      const group = arr[arr.length - 1]
+      if (group && group[0].sendTimeText === item.sendTimeText) {
+        group.push(item)
+      } else {
+        arr.push([item])
+      }
+      return arr
+    }, [])
+  } catch(e) {
+    console.log('err', e)
+  }
+}
+
+// 预览组件
+const showPreview = ref(false)
+// 传入预览组件当前消息id
+const currentId = ref('')
+const currentIndex = ref(0)
+const previewArr = ref([])
+
+const fromMediaBack = () => {
+  searchStatus.value = 'beforeSearch'
+}
+
+const handlePreview = (item) => {
+  currentId.value = item.clientMsgID
+  previewArr.value = mediaResultList.value.map((resl) => {
+    const isVideo = resl.contentType === 104
+    return {
+      type: isVideo ? resl.videoElem.videoType : resl.pictureElem.sourcePicture.type,
+      snapshotUrl: isVideo ? resl.videoElem.snapshotUrl : resl.pictureElem.sourcePicture.url,
+      url: isVideo ? resl.videoElem.videoUrl : resl.pictureElem.sourcePicture.url,
+      id: resl.clientMsgID
+    }
+  })
+  currentIndex.value = previewArr.value.findIndex(val => val.id === item.clientMsgID)
+  showPreview.value = true
+}
+
+const closePreview = (val) => {
+  showPreview.value = false
+  currentId.value = ''
+  // previewArr.value = []
+}
+const searchMediaHeight = ref(0)
+onMounted(() => {
+  searchMediaHeight.value = (document.body.clientWidth - 15) / 4
+
+  searchBox.value.focus()
+})
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds);
+// 判断是管理员还是群主
+const showGroupOwner = computed(() => {
+  return (userID) => {
+    if (!userID) return "";
+    // 先判断是否是群组成员
+    if (isMemberFriendIds.value.includes(userID)) return "group";
+    // 如果不是群组成员，则查找是否为群主或管理员
+    const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+    if (Object.keys(mapObj).length > 0) {
+      if (mapObj.roleLevel === 100) return "group";
+      if (mapObj.roleLevel === 60) return "admin";
+    }
+    return "";
+  };
+});
+const activeFileItem = ref({})
+const fileDetailVisible = ref(false)
+const openFileDetail = (item) => {
+  activeFileItem.value = item
+  fileDetailVisible.value = true
+}
+</script>
+
+<template>
+  <div class="detailSet" v-show="modelValue">
+    <div class="search-warp">
+      <div class="search-box-wrapper">
+        <div v-if="searchStatus === 'groupDetail'" class="back" @click="handleBack"><img
+            src="@/assets/arrow-left-black.svg" width="24" height="24" alt=""></div>
+        <van-search ref="searchBox" v-model="searchForm" show-action class="c-search" :left-icon="defaultSearch"
+          :placeholder="$t('search_hine_1')" @search="onSearch" @cancel="onCancel" />
+      </div>
+      <div v-if="searchStatus === 'beforeSearch'">
+        <div class="content-warp">
+          <div class="content-top">{{ $t('savSearchTip') }}</div>
+          <div class="content-type-wrapper">
+            <div class="content-img" @click="handleSearchMediaRecord(1)">
+              <img src="@/assets/s_image.svg" alt="">
+              <div class="content-bottom">{{ $t('savMedia') }}</div>
+            </div>
+            <div class="content-img" @click="handleSearchMediaRecord(2)">
+              <img src="@/assets/s_file.svg" alt="">
+              <div class="content-bottom">{{ $t('file') }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="list-items" v-if="searchStatus === 'searchResult'">
+        <template v-if="matchedConList.length">
+          <div class="list-area">
+            <div class="list-ttl" @click="toggleExpand(1)">
+              <div class="l-side">{{ $t('clTitle') }}</div>
+              <div class="r-side">
+                <img v-if="expandItem1" src="@/assets/arrow-up.svg" width="16" height="16" alt="">
+                <img v-else src="@/assets/arrow-down.svg" width="16" height="16" alt="">
+              </div>
+            </div>
+            <template v-if="expandItem1" >
+              <div class="list-item" v-for="item in matchedConList" :key="item.conversationID"
+                @click="handleSearchNext(item, 'singleRecord')">
+                <div class="info">
+                  <Avatar width="40" height="40" :url="item.faceURL" :name="item.showName"
+                    :is-group="item.conversationType === 3" @updateUrl="url => item.faceURL = url" />
+                    <div class="search-name">
+                    <div v-if="showGroupOwner(item.userID) === ''" class="name common-name">{{ item.showName }}</div>
+                    <CommonLottie
+                      v-else
+                      :isGroup="showGroupOwner(item.userID)"
+                      :showName="item.showName"
+                      :bottom="1"
+                    ></CommonLottie>
+                    <div v-if="item.remark && item.nickname" class="nickname">{{$t('nicknames') + ':' + item.nickname }}</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="middle"></div>
+        </template>
+        <div class="list-area" v-if="searchList.length">
+          <div class="list-ttl" @click="toggleExpand(2)">
+            <div class="l-side">{{ $t('chatRecord') }}</div>
+            <div class="r-side">
+              <img v-if="expandItem2" src="@/assets/arrow-up.svg" width="16" height="16" alt="">
+              <img v-else src="@/assets/arrow-down.svg" width="16" height="16" alt="">
+            </div>
+          </div>
+          <template v-if="expandItem2">
+            <div class="list-item" v-for="item in searchList" :key="item.conversationID"
+              @click="handleSearchNext(item, item.messageCount > 1 ? 'mutiRecord' : 'singleRecord')">
+              <div class="info">
+                <Avatar width="40" height="40" :url="item.faceURL" :name="item.showName"
+                    :is-group="item.conversationType === 3" @updateUrl="url => item.faceURL = url" />
+                <div class="name">
+                  <div class="show-name">{{ item.showName }}</div>
+                  <div class="matched-text muti-matched" v-if="item.messageCount > 1">{{ item.messageCount }}{{
+                    t('savSearchMsg') }}</div>
+                  <div class="matched-text record-detail" v-else
+                    v-html="item.messageList.length && item.messageList[0].textElmWithSty"></div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div v-if="searchStatus === 'groupDetail'" class="group-match-detail list-items">
+        <div class="list-area">
+          <div class="list-item" @click="handleSearchNext(activeMutiMatchGroup, 'singleRecord')">
+            <div class="info">
+              <Avatar width="40" height="40" :url="activeMutiMatchGroup.faceURL" :name="activeMutiMatchGroup.showName"
+                :is-group="activeMutiMatchGroup.conversationType === 3" @updateUrl="url => activeMutiMatchGroup.faceURL = url" />
+              <div class="name">
+                <div class="show-name">{{ activeMutiMatchGroup.showName }}</div>
+                <div class="matched-text muti-matched">{{ activeMutiMatchGroup.messageCount }}{{ t('savSearchMsg') }}
+                </div>
+                <div class="to-detail">
+                  <img src="@/assets/arrow-right.svg" width="16" height="16" alt="">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="middle"></div>
+          <div class="list-ttl" @click="toggleExpand(3)">
+            <div class="l-side">{{ $t('chatRecord') }}</div>
+            <div class="r-side">
+              <img v-if="expandItem3" src="@/assets/arrow-up.svg" width="16" height="16" alt="">
+              <img v-else src="@/assets/arrow-down.svg" width="16" height="16" alt="">
+            </div>
+          </div>
+          <template v-if="expandItem3" >
+            <div class="list-item" v-for="item in activeMutiMatchGroup.messageList"
+              :key="item.clientMsgID" @click="handleSearchNext(item, 'singleRecord')">
+              <div class="info">
+                <Avatar width="40" height="40" :url="item.senderFaceUrl || ''" :name="item.senderNickname" @updateUrl="url => item.senderFaceUrl = url"  />
+                <div class="name">
+                  <div class="show-name setShowTime">
+                    {{ item.senderNickname }}
+                    <div class="item-time">{{ getChatTimeline(item.createTime) }}</div>
+                  </div>
+                  <div class="matched-text record-detail" v-html="item.textElmWithSty"></div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div v-if="searchStatus === 'noData'" class="empty-warp">
+        <div><img src="@/assets/empety.svg" alt=""></div>
+        <div>{{ $t('searchEmptyTip') }}</div>
+      </div>
+      <div v-if="searchStatus === 'mediaSearchResultNoData' || searchStatus === 'mediaSearchResult'" class="media-result">
+        <div class="m-header">
+          <div class="bk" @click="fromMediaBack">
+            <img src="@/assets/arrow-left-black.svg" alt="" srcset="">
+          </div>
+          <div class="ttl">{{ activeSearchType === 1 ? $t('media') : $t('file') }}</div>
+        </div>
+        <div class="m-content">
+          <div class="no-data" v-if="searchStatus === 'mediaSearchResultNoData'">
+            <div><img src="@/assets/empety.svg" alt=""></div>
+            <div>没有找到相关媒体记录</div>
+          </div>
+          <div class="m-list" v-if="searchStatus === 'mediaSearchResult'">
+            <div class="m-list-group-item" v-for="(group, idx) in mediaResulGrouptList" :key="idx">
+              <div class="date">{{ group[0].sendTimeText }}</div>
+              <div class="img-view-wrap" v-if="activeSearchType === 1">
+                <div class="img-view" v-for="item in group" :key="item.clientMsgID" :style="{ height: `${searchMediaHeight}px` }">
+                  <cdnSource v-if="item.contentType === 102" :defaultUrl="item.pictureElem.snapshotPicture.url" :source="item" style="width: 100%; height: 100%">
+                    <template #cdnSlot="{ cdnUrl }">
+                      <img :src="cdnUrl" alt="" @click="handlePreview(item)">
+                    </template>
+                  </cdnSource>
+                  <!----视频---->
+                  <cdnSource v-if="item.contentType === 104 && item.videoElem.videoUrl" :defaultUrl="item.videoElem.videoUrl" :source="item" sourceType="video" style="width: 100%; height: 100%">
+                    <template #cdnSlot="{ cdnUrl }">
+                      <div class="vidio-content" @click="handlePreview(item)">
+                        <video class="video" :src="cdnUrl"
+                          crossOrigin="anonymous" preload="metadata"></video>
+                        <div class="video_icon"><img src="@/assets/svg/bofang.svg" alt=""></div>
+                      </div>
+                    </template>
+                  </cdnSource>
+                </div>
+              </div>
+              <!-- 文件类型 -->
+              <div class="file-view-wrap" v-else>
+                <div class="file-view" v-for="item in group" :key="item.clientMsgID" @click="openFileDetail(item)">
+                  <div class="file-con">
+                    <div class="file-icon">
+                      <img :src="fileIcon(item)" width="40" height="40" alt="">
+                    </div>
+                    <div class="file-name">{{ item.fileName2 }}</div>
+                    <div class="file-type">.{{ item.fileType }}</div>
+                  </div>
+                  <div class="file-size">{{ item.fileSizeText }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <CommonPreview v-model="showPreview" :currentId="currentId" :images="previewArr" :initialSwipe="currentIndex" @getList="closePreview">
+  </CommonPreview>
+  <!-- 四级视图 -->
+  <RouterView />
+  <fileDownload v-model="fileDetailVisible" :fileItem="activeFileItem" />
+</template>
+
+<style lang="less" scoped>
+:deep(.van-hairline--top-bottom:after),
+:deep(.van-hairline--bottom:after) {
+  border: none;
+}
+
+.middle {
+  height: 10px;
+  background-color: #F8F8FB;
+}
+
+.van-search {
+  :deep(&.c-search) {
+    padding: 0;
+    width: 100%;
+    height: 36px;
+
+    .van-search__content {
+      padding-left: 12px;
+      border-radius: 8px;
+    }
+
+    .van-field__left-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      background: url('@/assets/search-icon.svg') no-repeat center / cover;
+
+      i {
+        display: none;
+      }
+    }
+
+    .van-search__action {
+      color: var(--c-blue-color);
+    }
+  }
+}
+
+.detailSet {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+
+  &.hide {
+    display: none;
+  }
+}
+
+.search-warp {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+
+  .search-box-wrapper {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    padding: 0 16px;
+
+    .back {
+      margin-right: 8px;
+    }
+  }
+}
+
+.list-items {
+  margin-top: 8px;
+
+  .list-area {
+    .list-item {
+      display: flex;
+      align-items: center;
+      height: 64px;
+      padding: 0 16px;
+      color: var(--c-text-color);
+
+      .info {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        font-size: 1rem;
+
+        .name {
+          position: relative;
+          flex: 1;
+          margin-left: 8px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 236px;
+
+          .matched-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: calc(100vw - 130px);
+            font-size: 0.75rem;
+            color: #76767A;
+          }
+
+          .to-detail {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            margin-top: -8px;
+            width: 16px;
+            height: 16px;
+          }
+        }
+        .nickname {
+          font-size: 0.75rem;
+          color: #76767A;
+          margin-top: 2px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 294px;
+          padding-left: 8px;
+        }
+
+        .setShowTime{
+          display: flex;
+          justify-content: space-between;
+          .item-time{
+            font-size: 0.75rem;
+          }
+        }
+      }
+    }
+  }
+
+  .list-ttl {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 36px;
+    padding: 0 16px;
+    margin-bottom: 4px;
+    color: #49494E;
+    border-bottom: 1px solid #F2F4F5;
+  }
+}
+
+.empty-warp {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin-top: 135px;
+
+  div {
+    display: flex;
+    justify-content: center;
+  }
+
+  div:nth-child(2) {
+    margin-top: 30px;
+    color: var(--60, #76767A);
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    /* 150% */
+    letter-spacing: 0.5px;
+  }
+}
+
+.content-warp {
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .content-top {
+    margin-bottom: 16px;
+    color: #1B1B22;
+    opacity: .6;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  .content-type-wrapper {
+    display: flex;
+    gap: 80px;
+    
+    .content-img {
+      width: 62px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .content-bottom {
+    margin-top: 10px;
+    color: #0095F6;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    width: max-content;
+  }
+}
+
+.media-result {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  
+  .m-header {
+    position: relative;
+    height: 56px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #1B1B22;
+    font-size: 1rem;
+    font-weight: bold;
+    .bk {
+      position: absolute;
+      top: 12px;
+      left: 5px;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .m-content {
+    flex: 1;
+    overflow-y: auto;
+
+    .no-data {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-content: center;
+      margin-top: 135px;
+      div {
+        display: flex;
+        justify-content: center;
+      }
+      div:nth-child(2) {
+        margin-top: 30px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px; /* 150% */
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .m-list {
+      .m-list-group-item {
+        margin-bottom: 24px;
+        color: #76767A;
+
+        .date {
+          font-size: 0.75rem;
+          padding: 0 12px;
+          margin-bottom: 12px;
+        }
+        .img-view-wrap {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 3px;
+          padding-left: 3px;
+        }
+        .img-view {
+          width: calc((100vw - 15px) / 4);
+          height: 90px;
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            // padding-top: 100%;
+          }
+
+          .vidio-content {
+            position: relative;
+            width: 100%;
+            height: 100%;
+
+            .video {
+              width: 100%;
+              height: 100%;
+            }
+            
+            .video_icon {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+            }
+          }
+        }
+
+        .file-view-wrap {
+          overflow: hidden;
+          margin-left: 16px;
+          .file-view {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px;
+            padding-right: 16px;
+            position: relative;
+            font-size: 0.75rem;
+            color: #1B1B22;
+
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              border-bottom: 1px solid #F6F6F6;
+              transform: scaley(.5);
+            }
+
+            .file-con {
+              display: flex;
+              align-items: center;
+              font-size: 0.875rem;
+              .file-icon {
+                width: 40px;
+                margin-right: 8px;
+              }
+              .file-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                max-width: calc(100vw - 168px);
+              }
+            }
+            .file-size {
+              opacity: .6;
+            }
+          }
+        }
+        
+      }
+    }
+  }
+}
+.search-name {
+  padding-left: 4px;
+}
+:deep(.common-lottie-wrap) {
+  margin-left: unset !important;
+}
+</style>
diff --git a/src/views/dialogue/components/unread.vue b/src/views/dialogue/components/unread.vue
new file mode 100644
index 0000000..46fadff
--- /dev/null
+++ b/src/views/dialogue/components/unread.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { defineProps, onMounted, defineExpose } from 'vue'
+
+const { unread_num } = defineProps(['unread_num'])
+const emits = defineEmits(['beClick'])
+// const toBottom = () => {
+//   const el = document.querySelector('.privateChat_body')
+
+//   el.scrollTop = el.scrollHeight + el.offsetHeight
+//   el.addEventListener('scroll', e => {
+//     const scrollHeight = el.scrollHeight
+//     const elHeight = el.offsetHeight
+//     const bottom_range = scrollHeight - elHeight
+//     if ((bottom_range - el.scrollTop) < 10) {
+//       unread_num.num = 0
+//     }
+//   })
+// }
+watch(() => unread_num.num, val => {
+  const el = document.querySelector('.privateChat_body')
+
+  if ((el.scrollHeight - el.offsetHeight - el.scrollTop) < 10) {
+    unread_num.num = 0
+  }
+})
+defineExpose({
+  // toBottom
+})
+</script>
+
+<template>
+  <div class="unread" @click="emits('beClick')" v-if="unread_num.num !== 0">
+    <img src="@/assets/img/msg_unread.svg" alt="">
+    <div class="unread_num">{{ unread_num.num }}</div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.unread {
+  position: absolute;
+  bottom: 55px;
+  right: 16px;
+
+  &>img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .unread_num {
+    background: white;
+    position: absolute;
+    top: -2px;
+    right: -5px;
+    width: 20px;
+    font-size: 0.75rem;
+    height: 15px;
+    text-align: center;
+    border-radius: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/MessageItem/CatchMsgRenderer.vue b/src/views/dialogue/groupChat/MessageItem/CatchMsgRenderer.vue
new file mode 100644
index 0000000..bd6310e
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/CatchMsgRenderer.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="need_bg"></div>
+</template>
+
+<script setup>
+const val = useAttrs()
+console.log(val)
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/dialogue/groupChat/MessageItem/GroupInfoRenderer.vue b/src/views/dialogue/groupChat/MessageItem/GroupInfoRenderer.vue
new file mode 100644
index 0000000..0ea9344
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/GroupInfoRenderer.vue
@@ -0,0 +1,500 @@
+<template>
+  <!-- 群聊：消息类型通知 -->
+   <div class="withdraw message-type-notification" ref="notificationElement" v-if="isRenderNot">
+    <!--更改群聊面具-->
+    <template v-if="val.contentType === 110">
+      <div class="message-wrap" v-if="getCurrentMsgs(val).customType === 1006">
+        <div class="chat-blue" style="height: 20px;line-height: 20px;" @click="handleGoSetting(val.camouflageFlag)">{{ getCurrentMsgs(val, "nickname")+'&nbsp;' }}</div>
+        <div class="Group-chat-mask">{{`${$t('open')}${$t('groupMaskOpenTipNew')}${val.camouflageFlag?',':''}` }}</div>
+        <div class="chat-blue" style="height: 20px;line-height: 20px;" v-if="val.camouflageFlag" @click="handleGoSetting(val.camouflageFlag)">{{$t('go_to_settings')}}</div>
+      </div>
+      <div class="message-wrap" v-if="JSON.parse(val.customElem.data || '').customType === 1001">
+        {{
+          (isShowYou(val.sendID)
+            ? $t("me")
+            : val.senderNickname || '') +
+          $t("cvClearMsgTip")
+        }}
+      </div>
+    </template>
+    <template v-if="val.contentType === 1501">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+        <div class="group-notification">{{ $t("hasCreateGroup") + ' ' + getGroupName(val) }}</div>
+      </div>
+    </template>
+    <!--退出群聊-->
+    <template v-if="val.contentType === 1504 && hasUserExitedGroup(val) &&
+      (groupInfo.roleLevel !== 20 || val.recvID === userInfo.userID)
+      ">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'quitUser', 1))">{{ getCurrentMsg(val, "quitUser") }}</div>
+        <div class="quit-group">{{ $t("exitGroup") }}</div>
+      </div>
+    </template>
+    <!--群主变更-->
+    <template v-if="val.contentType === 1507">
+      <div class="message-wrap">
+        {{ replaceStringWithValues(
+          t("transferredGroupNtf"),
+          val.senderNickname || 'admin',
+          groupInfo.ownerUserName
+        ) }}
+      </div>
+    </template>
+    <!--踢出群聊-->
+    <template v-if="val.contentType === 1508 &&
+      (groupInfo.roleLevel !== 20 || showGroupMute(val, 'kickedUserList'))">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'kickedUserList', 1))">{{ getCurrentMsg(val, "kickedUserList") }}</div>
+        <div class="public-notification">{{ $t("be") }} </div>
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 2))">{{ getCurrentMsg(val) }}</div>
+        <div class="public-notification">{{ $t("moveoutGroup") }}</div>
+      </div>
+    </template>
+    <!--邀请群成员通知-->
+    <template v-if="val.contentType === 1509">
+      <div class="message-wrap">
+            <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+            <div class="public-notification">{{ $t("invite") }}</div>
+            <div class="chat-blue" @click="onDetail(item.userID)" v-for="(item, index) in invitedUserList" :key="index">{{ invitedUserList.length -1 === index ? `${mapContact(item)}` : `${mapContact(item)}、` }}</div>
+            <div class="public-notification">{{ $t("joinGroup") }}</div>
+        </div>
+    </template>
+    <!--加入群聊-->
+    <template v-if="val.contentType === 1510">
+      <div class="message-wrap"><span class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val, "entrantUser") }}</span>{{ $t("joinGroup")
+        }}</div>
+    </template>
+    <!--群解散通知-->
+    <template v-if="val.contentType === 1511">
+      <div class="message-wrap"><span>{{ getCurrentMsg(val)+ ' ' + $t("disbandedGroup") }}</span></div>
+    </template>
+    <!--群成员禁言通知-->
+    <template v-if="val.contentType === 1512 &&
+      (groupInfo.roleLevel !== 20 || showGroupMute(val, 'mutedUser'))
+    ">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'mutedUser', 1))">{{ getCurrentMsg(val, "mutedUser") }}</div>
+        <div class="public-notification">{{ $t("be") }}</div>
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+        {{ $t("bannedFromSpeaking") }}
+        <div class="public-notification"> {{ getCurrentMsg(val, "mutedSeconds") }}</div>
+      </div>
+    </template>
+    <!--群成员取消禁言通知-->
+    <template v-if="val.contentType === 1513 &&
+      (groupInfo.roleLevel !== 20 || showGroupMute(val, 'mutedUser'))
+    ">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'mutedUser', 1))">{{ getCurrentMsg(val, "mutedUser") }}</div>
+        <div class="public-notification">{{ $t("be") }}</div>
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+        <div class="public-notification">{{ $t("gagWasLifted") }}</div>
+      </div>
+    </template>
+    <!--群禁言通知-->
+    <template v-if="val.contentType === 1514">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+        {{ $t("initiatedGroupGag") }}
+      </div>
+    </template>
+    <!--群禁言取消通知-->
+    <template v-if="val.contentType === 1515">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+        {{ $t("shutDownGroupGag") }}
+      </div>
+    </template>
+    <!--群公告修改--->
+    <template v-if="val.contentType === 1519">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val) }}</div>
+        {{handleClearOrEidt(val) ? $t("w_edit_group_notification"): $t("clearGroupNotification") }}
+      </div>
+    </template>
+    <!--群名更改通知--->
+    <template v-if="val.contentType === 1520">
+      <div class="message-wrap">
+        <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'groupAdmin', 1))">{{getCurrentMsg(val,'groupAdmin')}}</div>
+        <div class="group-notification">{{$t("whoModifyGroupName") }} {{ getCurrentMsg(val) }}</div>
+      </div>
+    </template>
+    <!--撤回消息-->
+    <template v-if="val.contentType === 2101 && (groupInfo.roleLevel !== 20 || val.sendID === userInfo.userID)"> 
+      <div class="message-wrap">
+        <template v-if="getCurrentMsg(val, 'val').sourceMessageSendID === userInfo.userID || 
+                        getCurrentMsg(val, 'val').sourceMessageSendID === getCurrentMsg(val, 'val').revokerID" >
+          <div class="chat-flex" v-if="getCurrentMsg(val, 'val').sourceMessageSendID === getCurrentMsg(val, 'val').revokerID">
+            <div class="chat-blue 1" @click="onDetail(getCurrentMsg(val,'revokerRole', 1))">
+              {{ getCurrentMsg(val, 'revokerRole') }} 
+            </div>
+            <div class="group-notification">{{ $t("revokeMsg") }}</div>
+          </div>
+          <div class="chat-flex" v-if="getCurrentMsg(val, 'val').sourceMessageSendID !== getCurrentMsg(val, 'val').revokerID">
+            <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">
+              {{ getCurrentMsg(val, '') }} 
+            </div>{{ $t("retracted_h5") }}
+            <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'revokerRoles', 2))">
+              {{ getCurrentMsg(val, 'revokerRoles') }}
+            </div>{{ $t("message_h5") }}
+          </div>
+        </template>
+        <template v-if="getCurrentMsg(val, 'val').sourceMessageSendID !== userInfo.userID && getCurrentMsg(val, 'val').sourceMessageSendID !== getCurrentMsg(val, 'val').revokerID">
+          <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'', 1))">{{ getCurrentMsg(val, '')}}</div>{{ $t("retracted_h5") }}
+          <div class="chat-blue" @click="onDetail(getCurrentMsg(val,'revokerRoles', 2))">{{ getCurrentMsg(val, 'revokerRoles') }}</div>{{ $t("message_h5") }}
+        </template>
+      </div>
+    </template>
+</div>
+</template>
+
+<script setup>
+import { useUserStore } from "@/stores/user.js";
+import { useContactStore } from "@/stores/contact.js";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { computed,onMounted } from "vue";
+import {
+  replaceStringWithValues,
+  isSelf,
+} from "@/utils/tools";
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => { }
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  showCheck: {
+    type: Boolean,
+    default: false
+  }
+});
+const { source: val, index } = toRefs(props);
+const { t } = useI18n();
+const router = useRouter();
+const userStore = useUserStore();
+const contactStore = useContactStore();
+const { userInfo,groupChatConfig } = storeToRefs(userStore);
+const { groupInfo, contactList,groupMemberInfo } = storeToRefs(contactStore);
+const isSelfMsgs = computed(() => userInfo.value.userID === val.value.recvID);
+const isSelfMsg = computed(() => userInfo.value.userID === val.value.sendID);
+// 使用 ref 创建对应的 DOM 引用
+const notificationElement = ref(null);
+// 是否渲染页面
+const isRenderNot = ref(true);
+const isShowYou = (id) => {
+  return userInfo.value.userID === id
+}
+const isSelfGroup = computed(
+  () => groupInfo.value.ownerUserID === userInfo.value.userID
+);
+// 判断自己是否在群聊中
+const isInGroupchat = computed(() => {
+  if (
+    Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) &&
+    groupMemberInfo.value[groupChatConfig.value.groupID].length > 0
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+// 群成员退群的服务信息仅本群群主、群管理员、退群本人可查看，其余都无权限查看
+const hasUserExitedGroup = computed(() => {
+  return (val) => {
+    const detail = JSON.parse(val.notificationElem?.detail)
+    // 退群用户id
+    const leaveGroupUserID = detail.quitUser.userID;
+    // 如果退群的用户是当前用户则返回 true
+    if (leaveGroupUserID===userInfo.value.userID) {
+      return true
+    } else {
+      // 100 是群主 60是管理员 20是普通成员
+      return groupInfo.value.roleLevel === 100 || groupInfo.value.roleLevel === 60;
+    }  
+  }
+})
+const mapContact = val => {
+  const index = contactList.value.findIndex(
+    items => items.userID === val.userID
+  );
+  if (index != -1) {
+    return contactList.value[index].remark
+      ? contactList.value[index].remark
+      : contactList.value[index].nickname;
+  }
+  return val.userID === userInfo.value.userID ? t("you") : val.nickname;
+};
+const getCurrentMsg = (val, flag = "", num) => {
+  // num 点击前面或者后面
+  let msgStr = "";
+  let detail = {};
+  let detailId = ''
+  if (val.notificationElem) {
+    detail = JSON.parse(val.notificationElem.detail);
+    if (val.contentType === 1501) {
+      msgStr = isSelfGroup.value ? t("you") : mapContact(detail.opUser);
+      detailId = detail.opUser.userID
+    } else if (val.contentType === 1504) {
+      if (flag === "quitUser") {
+        msgStr = mapContact(detail.quitUser);
+        detailId = detail.quitUser.userID
+      } else {
+        msgStr = isSelfMsg.value ? t("you") : mapContact(detail.opUser);
+        detailId = detail.opUser.userID
+      }
+    } else if (val.contentType === 1509) {
+      if (flag === "joinSource") {
+        msgStr = detail.opUser?.joinSource;
+        detailId = detail.opUser.userID
+      } else if (flag === "invitedUserList") {
+        msgStr = detail.invitedUserList;
+      }else {
+        msgStr = isSelfMsg.value ? t("you") : mapContact(detail.opUser);
+        detailId = detail.opUser.userID
+      }
+    } else if (val.contentType === 1508) {
+      if (flag === "kickedUserList") {
+        msgStr =
+          detail.kickedUserList[0].userID === userInfo.value.userID
+            ? t("you")
+            : mapContact(detail.kickedUserList[0]);
+        detailId = num == 2 ? detail.kickedUserList[0].operatorUserID : detail.kickedUserList[0].userID
+      } else {
+        msgStr = isSelfMsg.value ? t("you") : mapContact(detail.opUser);
+        detailId = detail.opUser.userID
+      }
+    } else if (
+      val.contentType === 1514 ||
+      val.contentType === 1515 ||
+      val.contentType === 1519
+    ) {
+      msgStr = isSelfMsg.value ? t("you") : mapContact(detail.opUser);
+      detailId = detail.opUser.userID
+    } else if (val.contentType === 1513 || val.contentType === 1512) {
+      if (flag === "mutedUser") {
+        msgStr = isShowYou(detail.mutedUser.userID) ? t("you") : mapContact(detail.mutedUser);
+      detailId = detail.mutedUser.userID
+      } else if (flag === "mutedSeconds") {
+        msgStr = handle_Prohibition_time(detail.mutedSeconds);
+      detailId = detail.mutedSeconds.userID
+      } else {
+        msgStr = isSelfMsg.value ? t("you") : mapContact(detail.opUser);
+        detailId = detail.opUser.userID
+      }
+    } else if (val.contentType === 1510) {
+      if (flag === "entrantUser") {
+        msgStr = mapContact(detail.entrantUser);
+        detailId = detail.entrantUser.userID
+      }
+    } else if (val.contentType === 2101) {
+      const data = {
+        userID: num === 2 ? detail.sourceMessageSendID : detail.revokerID,
+        nickname:num ? detail.sourceMessageSenderNickname : detail.revokerNickname
+      }
+      if (flag === "revokerRole") {
+        msgStr = isShowYou(detail.revokerID) ? t("you") : mapContact({userID:detail.sourceMessageSendID,nickname:detail.sourceMessageSenderNickname})
+      } else if (flag === "revokerRoles") {
+        msgStr = isShowYou(detail.sourceMessageSendID) ? t("you") : mapContact({userID:detail.sourceMessageSendID,nickname:detail.sourceMessageSenderNickname})
+      }else if (flag === "val") {
+        msgStr = detail
+      } else {
+        // console.log('revokerNickname',detail,detail.revokerNickname);
+        let admin = detail.revokerNickname === "admin" || detail.revokerNickname === "管理员"
+        let name = admin ? detail.revokerNickname : mapContact(data)
+        msgStr = isShowYou(detail.revokerID) ? t("you") : name;
+      }
+      detailId = num === 2 ? detail.sourceMessageSendID : detail.revokerID
+    }else if(val.contentType === 1520) {
+     if(flag === 'groupAdmin' ) {
+      msgStr = isShowYou(detail.opUser.userID) ? t("you") : mapContact(detail.opUser);
+     } else {
+      msgStr = detail.group.groupName
+     }
+     detailId = detail.opUser.userID
+    }else if(val.contentType === 1511) {
+      msgStr = isSelfGroup.value ? t("you") : mapContact(detail.opUser);
+      detailId = detail.opUser.userID
+    }
+  }
+  return num ? detailId : msgStr;
+};
+
+const getCurrentMsgs = (val, flag) => {
+  let msgStr = "";
+  let detail = {};
+  if (val.customElem) {
+    detail = JSON.parse(val.customElem.data);
+    if (val.contentType === 110) {
+      if (flag === "nickname") {
+        msgStr = isSelfMsg.value ? t("you") : mapContact(detail.data.opUser);
+      } else {
+        msgStr = detail;
+      }
+    }
+  }
+  return msgStr;
+};
+// 方法：解析 val 中的 JSON 字符串，返回 groupName 或空字符串（或其他默认值）以处理异常
+const getGroupName = (val) => {
+  try {
+    const parsedDetail = JSON.parse(val.notificationElem.detail);
+    if (parsedDetail && parsedDetail.group && parsedDetail.group.groupName) {
+      return parsedDetail.group.groupName;
+    } else {
+      return groupInfo.groupName; // 或者返回其他默认值
+    }
+  } catch (error) {
+    console.error('Error parsing JSON:', error);
+    return groupInfo.groupName; // 或者返回其他默认值
+  }
+};
+const handleGoSetting = (flag) => {
+  if(!flag)return
+  router.push({
+    path: "/home/contact/groupDetails/editNameAvatar",
+    query: {
+      type: "myself",
+      label: "myself"
+    }
+  });
+};
+
+const invitedUserList = computed(() => {
+  if (props.source.contentType === 1509) {
+    return JSON.parse(props.source.notificationElem.detail).invitedUserList
+  }
+})
+/*
+ * 处理禁言时间格式化
+ * @param {Number} seconds 秒
+ * **/
+const handle_Prohibition_time = seconds => {
+  if (!seconds) return "";
+  const toMinutes = num => num / 60;
+  const toHours = num => toMinutes(num) / 60;
+  const toDays = num => toHours(num) / 60;
+  const day = toDays(seconds);
+  const hour = toHours(seconds);
+  const minutes = toMinutes(seconds);
+  if (day >= 1) {
+    return day + t("day");
+  } else if (hour >= 1) {
+    return hour % 24 === 0 ? `${hour / 24}${t("day")}` : hour + t("hours");
+  } else if (minutes >= 1) {
+    return minutes + t("minute");
+  }
+};
+
+// 跳转详情
+const onDetail = (id) => {
+  router.push(`/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${id}`)
+}
+const showGroupMute = computed(() => {
+  return (val, type) => {
+    const detail = JSON.parse(val.notificationElem.detail)
+    let userID = ''
+    if (type === 'mutedUser') {
+      userID = detail.mutedUser.userID
+    } else if (type === 'kickedUserList') {
+      userID = detail.kickedUserList[0].userID
+    }
+    return isShowYou(userID)
+  }
+})
+
+/**
+ * @param val 判断当前是清空群公告还是编辑群公告
+ */
+const handleClearOrEidt = (val) =>{
+  let detail = JSON.parse(val.notificationElem.detail)
+  return detail.group?.notification ?true : false
+}
+
+ // 监听组件挂载后的事件
+ onMounted(() => {
+  // 需要在dom更新后执行
+  nextTick(()=>{
+    const children = notificationElement.value?.children;
+    if (children.length === 0) {
+      // 如果视图上没有数据则不需要在渲染这个页面了
+      // 有没有数据根据notificationElement节点下是否有children决定
+      isRenderNot.value = false
+    }
+  })
+});
+</script>
+
+<style lang="less" scoped>
+// Mixin for common styles
+.common-notification-styles() {
+  // display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--size-12px);
+}
+.withdraw {
+  color: rgba(27, 27, 34, 0.4);
+  font-size: 0.75rem;
+  text-align: center;
+  margin: 5px 0;
+}
+.message-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  height: auto;
+  // fix 通知消息不居中问题
+  .quit-group {
+    font-size: var(--size-12px);
+  }
+  // fix 群名称样式 不居中问题
+  .group-notification {
+    font-size: var(--size-12px);
+    margin-left: 4px;
+  }
+}
+.public-notification {
+  font-size: var(--size-12px);
+  margin: 0 2px;
+  // height: max-content;
+}
+.Group-chat-mask {
+  .common-notification-styles();
+  height: 20px;
+  line-height: 20px;
+}
+.chat-blue {
+  .common-notification-styles();
+  color: #0095f6;
+  max-width: 70px;
+  overflow: hidden;
+}
+.line-feed {
+  width: 100%;
+  overflow: auto;
+  white-space: normal;
+  // padding-top: 12px;
+  .message-wrap {
+    // display: inline-block;
+    display: flex;
+    align-items: center;
+  }
+}
+// .flex-center {
+//   overflow: hidden;
+//   display: inline-block;
+//   font-size: 0.875rem;
+// }
+.chat-flex {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/views/dialogue/groupChat/MessageItem/MediaMessageRenderer.vue b/src/views/dialogue/groupChat/MessageItem/MediaMessageRenderer.vue
new file mode 100644
index 0000000..0105adb
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/MediaMessageRenderer.vue
@@ -0,0 +1,75 @@
+<template>
+  <div @click="clickMediaItem" class="media_message_container">
+    <van-image height="160px" fit="cover" class="max-w-[32vw] need_preload_message" :class="{ 'w-8 h-8': isError }" radius="6"
+      :src="imageUrl" @error="isError = true">
+      <template v-slot:loading>
+        <van-loading type="spinner" size="20" />
+      </template>
+      <template v-slot:error>{{ $t('failLoad') }}</template>
+    </van-image>
+    <img v-if="isVideo" class="play_icon" :src="play_icon" alt="" />
+  </div>
+</template>
+
+<script setup>
+import play_icon from "@/assets/svg/bofang.svg"
+import { useMessageStore } from '@/stores/modules/message';
+import { MessageType } from "@/utils/constant";
+import { showImagePreview } from 'vant';
+const val = useAttrs()
+
+const messageStore = useMessageStore();
+const router = useRouter()
+
+const isError = ref(false)
+
+const isVideo = val.contentType === MessageType.VideoMessage
+const imageUrl = isVideo ? val.videoElem.snapshotUrl : val.pictureElem.snapshotPicture.url;
+
+
+const clickMediaItem = () => {
+  if (props.disabled) {
+    return;
+  }
+  if (isVideo) {
+    router.push({
+      path: '/previewVideo',
+      query: {
+        url: props.message.videoElem.videoUrl,
+        poster: props.message.videoElem.snapshotUrl
+      }
+    })
+  } else {
+    const idx = messageStore.storePreviewImgList.findIndex(item => item === props.message.pictureElem.sourcePicture.url)
+    showImagePreview({
+      images: messageStore.storePreviewImgList,
+      startPosition: idx > -1 ? idx : 0,
+      closeable: true,
+    })
+  }
+}
+
+</script>
+
+<style lang='less' scoped>
+.media_message_container {
+  position: relative;
+  overflow: hidden;
+
+  .play_icon {
+    width: 36px;
+    height: 36px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .video_duration {
+    position: absolute;
+    bottom: 6px;
+    right: 12px;
+    color: #fff;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/MessageItem/RedCardRenderer.vue b/src/views/dialogue/groupChat/MessageItem/RedCardRenderer.vue
new file mode 100644
index 0000000..d278675
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/RedCardRenderer.vue
@@ -0,0 +1,635 @@
+<template>
+  <div
+    v-if="isSelfMsg && val.contentType === 110"
+    class="cell_right"
+    @click="clickRedPackageMsg(getCurrentMsg(val), val)"
+  >
+    <popover :msg_info="val" :isShow_msg_delete="isShow_msg_delete">
+      <template #content>
+        <div
+          v-if="
+            val.contentType === 110 && getCurrentMsg(val).customType === 1003
+          "
+          class="custom-type"
+        >
+          <div
+            class="redPackage"
+            :class="{ 'active-redPackage': !val.localEx }"
+          >
+            <div class="txt">{{ getCurrentMsg(val).data.remark }}</div>
+            <div class="bottom">
+              <div class="left">
+                {{ transferText(getCurrentMsg(val).data) }}
+              </div>
+              <div class="right">
+                {{ val.localEx ? transferText(getRedMsg(val), "status") : "" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </popover>
+  </div>
+  <!-----红包消息 end----->
+  <div
+    class="senderInfo"
+    v-if="
+      !isSelfMsg &&
+        val.contentType === 110 &&
+        getCurrentMsg(val).customType === 1003
+    "
+  >
+    <div class="senderInfo_left">
+      <Avatar
+        width="40"
+        height="40"
+        :url="val.senderFaceUrl"
+        :name="val.senderNickname"
+        @click="
+          router.push(
+            `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${val.sendID}`
+          )
+        "
+        @updateUrl="url => val.senderFaceUrl = url"
+      >
+      </Avatar>
+    </div>
+    <div class="senderInfo_left_bottom">
+      <CommonLottie
+        :isGroup="showGroupOwner(val.sendID)"
+        :width="120"
+        :showName="getGroupRemark(val, true)"
+        :bottom="2"
+      ></CommonLottie>
+      <popover :msg_info="val" :isShow_msg_delete="isShow_msg_delete">
+        <template #content>
+          <div
+            class="senderInfo_right"
+            @click="clickRedPackageMsg(getCurrentMsg(val), val)"
+          >
+            <div
+              class="redPackage"
+              :class="{ 'active-redPackage': !val.localEx }"
+            >
+              <div class="txt">{{ getCurrentMsg(val).data.remark }}</div>
+              <div class="bottom">
+                <div class="left">
+                  {{ transferText(getCurrentMsg(val).data) }}
+                </div>
+                <!-- <div class="right">{{ val.localEx }}</div> -->
+                <div class="right">
+                  {{
+                    val.localEx ? transferText(getRedMsg(val), "status") : ""
+                  }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </popover>
+    </div>
+  </div>
+  <div
+    v-if="val.contentType === 110 && getCurrentMsg(val).customType === 1004"
+    class="redPackage-txt"
+  >
+    <img class="img-red" src="@/assets/svg/redPackage.svg" alt="" />
+    <span class="txt">
+      <span v-if="getCurrentMsg(val).data">
+        <span class="txt_content">
+          <span
+            class="redpack_name"
+            @click="onDetail(getCurrentMsg(val).data.receiverUserId)"
+            >{{
+              isSelf(getCurrentMsg(val).data.receiverUserId)
+                ? t("you")
+                : mapContact(getCurrentMsg(val).data,1)
+            }}</span
+          >
+          <span>{{ $t("envelope_get") }}</span>
+          <span
+            class="redpack_name"
+            @click="onDetail(getCurrentMsg(val).data.userId)"
+            >{{
+              isSelf(getCurrentMsg(val).data.userId)
+                ? t("you")
+                : mapContact(getCurrentMsg(val).data) ?? "-"
+            }}</span
+          >
+          <span>{{ $t("de") }}</span>
+          <span class="red" @click="clickRedPackageMsg(getCurrentMsg(val))">{{
+            $t("envelope")
+          }}</span>
+          <template v-if="getCurrentMsg(val).data.lastAmountOver">
+            <span class="omit_name" @click="onDetail(getCurrentMsg(val).data.userId)"
+              >,{{
+                isSelf(getCurrentMsg(val).data.userId)
+                  ? t("you")
+                  : mapContact(getCurrentMsg(val).data) ?? "-"
+              }} </span
+            >
+            <span>{{ $t("envelope_get_over") }}</span>
+          </template>
+        </span>
+      </span>
+      <span v-else>{{ $t("envelope_get_message") }}</span>
+      <!-- {{ getRedPackageTxt(getCurrentMsg(val).data) }} -->
+    </span>
+    <!-- <span class="red" @click="clickRedPackageMsg(getCurrentMsg(val))">{{ $t('envelope') }}</span> -->
+  </div>
+  <RedPacKDialog v-model="showRedCard" :info="reddpktInfo"></RedPacKDialog>
+  <!--删除消息提示-->
+  <AppPopup v-model:show="isShow_msg_delete.show">
+    <div class="popup_select">
+      <div class="popup_select_cell" @click="handle_delete_msg">
+        {{ $t("cvdeleteLocal") }}
+      </div>
+    </div>
+  </AppPopup>
+</template>
+
+<script setup>
+import { useUserStore } from "@/stores/user.js";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+import { AppPopup } from "@/components/index.js";
+import popover from "@/views/dialogue/groupChat/components/popover.vue";
+import { RedPacKDialog } from "@/components/index.js";
+import {
+  formatMinutestamp,
+  getDate,
+  getAtNickname,
+  isSelf
+} from "@/utils/tools";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useContactStore } from "@/stores/contact.js";
+const contactStore = useContactStore();
+const { groupMemberInfo, contactList, myGroupInfo } = storeToRefs(contactStore);
+
+const IMSDK = getSDK();
+const $api = inject("$api");
+const { t } = useI18n();
+const router = useRouter();
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {}
+  },
+  // fix修复 2024-6-4 此属性为了解决动态组件属性传递警告问题
+  readDeleteMsg: {
+    type: Object,
+    default: () => {}
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  showCheck: {
+    type: Boolean,
+    default: false
+  }
+});
+const { source: val, index } = toRefs(props);
+const isSelfMsg = computed(() => userInfo.value.userID === val.value.sendID);
+const getCurrentMsg = val => {
+  return JSON.parse(val.customElem.data);
+};
+//消息删除弹窗显示控制
+const isShow_msg_delete = reactive({
+  show: false,
+  currentIndex: 0, //当前删除索引
+  sendID: "0"
+});
+const getRedMsg = val => {
+  if (val.localEx) {
+    const obj =
+      typeof val.localEx == "string" ? JSON.parse(val.localEx) : val.localEx;
+    if (Object.keys(obj).length > 0) {
+      return obj.status;
+    } else {
+      return "";
+    }
+  }
+};
+const reddpktInfo = ref({});
+// 红包
+const showRedCard = ref(false);
+// xxx 領取了xxx的紅包
+const getRedPackageTxt = info => {
+  let content = "";
+  if (info) {
+    const receiverName = isSelf(info.receiverUserId)
+      ? t("you")
+      : info.receiverNickName;
+    const sendName = isSelf(info.userId) ? t("you") : info.nickName ?? "-";
+    // xxx 領取了xxx的紅包
+    content = `${receiverName}${t("envelope_get")}${sendName}${t("de")}`;
+
+    if (info.lastAmountOver) {
+      content += `,${sendName}${t("envelope_get_over")}`;
+    }
+  } else {
+    content = t("envelope_get_message");
+  }
+  return content;
+};
+const redPackageStatus = [
+  {
+    name: t("get"), //已领取
+    id: 1
+  },
+  {
+    name: t("get_envelope_completed"), // 已被领完
+    id: 2
+  },
+  {
+    name: t("hasOut"), //已过期
+    id: 3
+  }
+];
+const redPackageType = [
+  {
+    name: t("putong"),
+    id: 1
+  },
+  {
+    name: t("zhuanshu"),
+    id: 2
+  },
+  {
+    name: t("pin"),
+    id: 3
+  }
+];
+const transferText = (val, type) => {
+  if (type === "status") {
+    const arr = redPackageStatus.filter(item => item.id === val);
+    return arr[0]?.name;
+  } else {
+    const arr = redPackageType.filter(item => item.id === val.type);
+    if (val.type === 2) {
+      return `给${getGroupRemark({ sendID: val.personalId }, true)}的${arr[0].name}`;
+    } else {
+      return arr[0]?.name;
+    }
+  }
+};
+// 点击红包消息
+const clickRedPackageMsg = async (val, msg) => {
+  if (val.customType === 1004) {
+    // 跳转红包详情
+    router.push(`/home/dialogue/redpktDetail?id=${val.data.id}`);
+  } else if (val.customType === 1003) {
+    if (val.data) {
+      const res = await $api.contact.getRedpktgetDetail({
+        envelopeId: JSON.parse(msg.customElem.data).data.id
+      });
+      if (msg != null && groupChatConfig.value.conversationID != null) {
+        checkMessageStatus(res.data, msg, groupChatConfig.value.conversationID);
+      }
+      if (res.data.receivers && res.data.receivers.length) {
+        let ids = res.data.receivers.map(el => el.userId);
+        if (ids.includes(userInfo.value.userID)) {
+          router.push(`/home/dialogue/redpktDetail?id=${val.data.id}`);
+          return;
+        }
+      }
+      reddpktInfo.value = { ...res.data, clientMsgID: msg.clientMsgID, nickName: getGroupRemark(msg) };
+      if (reddpktInfo.value.personalUserId) {
+        reddpktInfo.value.personalNameOrigin = reddpktInfo.value.personalName
+        reddpktInfo.value.personalName = getGroupRemark({ sendID: reddpktInfo.value.personalUserId }, true)
+      }
+      console.log('----------', reddpktInfo.value)
+      // 这里弹红包弹窗
+      showRedCard.value = true;
+    }
+  }
+};
+//检查红包是否可以操作，
+const checkMessageStatus = async (detail, msg, conversationID) => {
+  const clientMsgID = msg.clientMsgID;
+  if (clientMsgID == null) return;
+  if (msg["localEx"] && msg["localEx"]["status"]) return;
+  const receiver = detail.receivers[0];
+  let status = 0;
+  if (receiver?.userId == userInfo.value.userID) {
+    //1-我已领取
+    status = 1;
+  } else if (detail.status === 3) {
+    //2-已被领完
+    status = 2;
+  } else if (detail.status === 4) {
+    //3-已过期
+    status = 3;
+  }
+  if (status > 0) {
+    try {
+      const localExStr = { status: status };
+      //标记红包已经过期，或者已经领完，或者我已经领取
+      await IMSDK.setMessageLocalEx({
+        conversationID: conversationID,
+        clientMsgID: clientMsgID,
+        localEx: JSON.stringify(localExStr)
+      });
+      msg.localEx = localExStr;
+      // eventBus.fire(RedPackageMsgStatusChanged());
+      // 刷新会话列表消息
+    } catch (e) {}
+  }
+};
+const updateRedpkt = async () => {
+  const localExStr = { status: 1 };
+  //标记红包已经过期，或者已经领完，或者我已经领取
+  await IMSDK.setMessageLocalEx({
+    conversationID: conversationID,
+    clientMsgID: clientMsgID,
+    localEx: JSON.stringify(localExStr)
+  });
+};
+/**
+ * 删除聊天记录
+ * @param { Boolean } isLocal 是否只删除本地消息
+ * **/
+const handle_delete_msg = async (isLocal = true) => {
+  const msg = storeHistoryMessageList.value[isShow_msg_delete.currentIndex];
+  storeHistoryMessageList.value.splice(isShow_msg_delete.currentIndex, 1);
+  await IMSDK.deleteMessageFromLocalStorage({
+    conversationID: groupChatConfig.value.conversationID,
+    clientMsgID: msg.clientMsgID
+  });
+  showToast(t("deleteSuccessfully"));
+  isShow_msg_delete.show = false;
+  isShow_msg_delete.currentIndex = 0;
+};
+
+// 跳转详情
+const onDetail = id => {
+  router.push(
+    `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${id}`
+  );
+};
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+      const index = arr.findIndex(item => item.userID === userID);
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        if (userID === groupChatConfig.value.ownerUserID) {
+          return "group";
+        }
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+const mapContact = (val,type) => {
+  // type 1前 
+  let userId = type == 1 ? val.receiverUserId : val.userId
+  let name = type == 1 ? val.receiverNickName : val.nickName
+  const index = contactList.value.findIndex(
+    items => items.userID === userId
+  );
+  // 在群聊中找到群聊备注
+  const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+  const groupItem = arr.find(item => item.userID === userId)
+  let groupRemark = groupItem ? (JSON.parse(groupItem.ex || '{}')?.remark?.value || '') : ''
+  if (myGroupInfo.value.roleLevel === 20) {
+    groupRemark = ''
+  }
+  if (index != -1) {
+    // 好友备注 -->  群聊备注 --> 用户个人昵称  --> 群聊昵称
+    const friendItem = contactList.value[index]
+    return friendItem.remark ? friendItem.remark : (groupRemark || friendItem.nickname);
+  }
+  return val.userID === userInfo.value.userID ? t("you") : (groupRemark || name);
+};
+
+// 第二个参数，是否检查当前用户权限
+const getGroupRemark = (val, needCheckAuth = false) => {
+  if (!val.sendID) return ''
+  const index = contactList.value.findIndex(
+    items => items.userID === val.sendID
+  );
+  // 在群聊中找到群聊备注
+  const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+  const groupItem = arr.find(item => item.userID === val.sendID) || {}
+  let groupRemark = groupItem ? (JSON.parse(groupItem.ex || '{}')?.remark?.value || '') : ''
+  // 需要检查权限，就检查是不是管理员，如果是普通角色就清空
+  const noAuth = needCheckAuth && myGroupInfo.value.roleLevel === 20
+  // 没有权限（普通）的话直接为空
+  if (noAuth) {
+    groupRemark = ''
+  }
+
+  // 在好友中找到好友备注
+  if (index != -1) {
+    // 群聊中展示权限
+    // 好友备注 -->  群聊备注 --> 用户个人昵称  --> 群聊昵称
+    return groupItem.remark ? groupItem.remark : (groupRemark || groupItem.nickname);
+  } else {
+    return groupRemark || groupItem.groupNickName || groupItem.nickname;
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.redPackage {
+  background-image: url("@/assets/img/unclaimed.png");
+  height: 94px;
+  width: 246px;
+  padding: 16px 16px 5px 16px;
+
+  .txt {
+    color: #fff;
+    font-family: "PingFang SC";
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin: 0 0 36px 44px;
+  }
+
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      color: #887978;
+      font-family: "PingFang SC";
+      font-size: 0.75rem;
+      font-weight: 400;
+      max-width: 70%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .right {
+      color: #d1d1d3;
+      text-align: right;
+      font-family: "PingFang SC";
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+  }
+}
+
+.active-redPackage {
+  background-image: url("@/assets/img/receive.png") !important;
+}
+
+.redPackage-txt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  padding:16px 0;
+
+  .img-red {
+    height: 16px;
+    margin-right: 10px;
+  }
+
+  .txt_content {
+    display: flex;
+    flex-wrap: wrap;
+    vertical-align: middle;
+    font-family: "PingFang SC";
+    font-size: 0.75rem;
+    font-weight: 400;
+  }
+
+  .txt {
+    color: #a4a4a7;
+  }
+
+  .red {
+    color: #ff0000;
+  }
+}
+
+.cell_right {
+  align-self: end;
+  // background: #0095F6;
+  border-radius: 10px 0 10px 10px;
+  max-width: 80%;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  // word-wrap: break-word;
+  word-break: break-all;
+  position: relative;
+  overflow: hidden;
+
+  &_loading {
+    color: black;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    left: -24px;
+  }
+
+  &_failed {
+    width: 20px;
+    height: 20px;
+  }
+
+  :deep(.van-image__img) {
+    border-radius: 10px;
+  }
+
+  .video {
+    border-radius: 10px;
+    position: relative;
+  }
+
+  .video_icon {
+    position: absolute;
+    // top: calc(50% - 16px);
+    // left: calc(50% - 16px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.senderInfo {
+  display: flex;
+  margin: 5px 0;
+  .senderInfo_left_bottom {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .lottie-animation-container {
+      margin: 0 !important;
+    }
+  }
+
+  &_left {
+    margin-right: 8px;
+
+    & > img {
+      display: inline-block;
+      height: 40px;
+      width: 40px;
+      border-radius: 20px;
+      overflow: hidden;
+    }
+  }
+
+  &_right {
+    &_nickname {
+      color: rgba(27, 27, 34, 0.4);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      // width: 150px;
+      font-size: 0.75rem;
+      margin-bottom: 4px;
+    }
+
+    &_msg {
+      display: block;
+    }
+  }
+}
+
+.redpack_name {
+  display: inline-block;
+  max-width: 100px;
+  overflow: hidden;
+  /* 当内容溢出时隐藏 */
+  text-overflow: ellipsis;
+  /* 使用省略号表示被隐藏的内容 */
+  white-space: nowrap;
+  /* 不自动换行 */
+  color: #0095f6;
+}
+.omit_name {
+  display: inline-block;
+  max-width: 100px;
+  overflow: hidden;
+  /* 当内容溢出时隐藏 */
+  text-overflow: ellipsis;
+  /* 使用省略号表示被隐藏的内容 */
+  white-space: nowrap;
+  /* 不自动换行 */
+}
+</style>
diff --git a/src/views/dialogue/groupChat/MessageItem/TextMessageRenderer.vue b/src/views/dialogue/groupChat/MessageItem/TextMessageRenderer.vue
new file mode 100644
index 0000000..007903e
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/TextMessageRenderer.vue
@@ -0,0 +1,2058 @@
+<template>
+  <div class="senderInfo" v-if="!isSelfMsg">
+    <div class="senderInfo_left">
+      <cdnSource :defaultUrl="val.senderFaceUrl">
+        <template #cdnSlot="{ cdnUrl }">
+          <Avatar
+            width="40"
+            height="40"
+            :url="cdnUrl"
+            :name="val.senderNickname"
+            @click="
+              router.push(
+                `/home/contact/groupDetails/groupchatMember/groupUserDetail?userID=${val.sendID}`
+              )
+            "
+          >
+          </Avatar>
+        </template>
+      </cdnSource>
+    </div>
+    <div class="senderInfo_right">
+      <div class="senderInfo_right_nickname">
+        <template v-if="showGroupOwner(val.sendID) != '' && hasWhetherGroup(val.groupID)">
+          <CommonLottie
+            :isGroup="showGroupOwner(val.sendID)"
+            :width="140"
+            :showName="transformTexts(val)"
+            :bottom="3"
+            :left="25"
+          ></CommonLottie>
+        </template>
+        <template v-else>
+          <span>{{ transformTexts(val) }}</span>
+        </template>
+      </div>
+      <div class="senderInfo_right_msg">
+        <div
+          :class="[
+            'cell_left',
+            {
+              active_cell_left:
+                val.contentType === 1519 ||
+                val.contentType === 101 ||
+                val.contentType === 114 ||
+                val.contentType === 103 ||
+                val.contentType === 106 ||
+                val.contentType === 110
+            }
+          ]"
+        >
+          <popover
+            :isShow_msgQuote="isShow_msgQuote"
+            :msg_info="val"
+            :isShow_msg_delete="isShow_msg_delete"
+          >
+            <template #content>
+              <div v-if="val.contentType === 110">
+                <!--群公告文本内容-->
+                <div
+                  v-if="getCurrentMsg(val).customType === 1005"
+                  @click="goToGroupNotice"
+                >
+                  <div style="margin-bottom: 5px;">
+                    {{ `[${$t("gsvGroupNotification")}]` }}
+                  </div>
+                  {{ getCurrentMsg(val).data.text }}
+                </div>
+                <!--合并转发-->
+                <div
+                  v-if="getCurrentMsg(val).customType === 1100"
+                  class="special-forward"
+                  @click.stop="handleDetail(val)"
+                >
+                  <div class="special-forward-top">
+                    <div class="title">{{ $t("globalSearchChatHistory") }}</div>
+                    <div class="count" v-if="getCurrentMsg(val).data.count > 1">
+                      {{ getCurrentMsg(val).data.count }}
+                    </div>
+                  </div>
+                  <div
+                    class="special-forward-bottom"
+                    v-for="item in getCurrentMsg(val).data.summaryList"
+                    :key="item"
+                  >
+                    {{ item }}
+                  </div>
+                </div>
+              </div>
+              <!-- 对方发来的文本消息 -->
+              <template v-if="val.contentType === 101">
+                <!-- 文本消息【图片类型】 -->
+                <div v-if="processedContent(val.textElem.content)===1" class="text-bilder-type public-fdcc">
+                  <van-image
+                    :src="val.textElem.content"
+                    :style="{ maxWidth: '200px',width: 'auto', height: 'auto'}"
+                    :show-error="false"
+                  />
+                  <div class="linked-content">
+                    <div class="interlink-text" @click="handeOpenLink(val.textElem.content)">{{val.textElem.content}}</div>
+                    <img
+                      src="@/assets/svg/fuzhi.svg"
+                      alt=""
+                      @click="copyUserId(val.textElem.content)"
+                    />
+                  </div>
+                </div>
+                <!-- 文本消息【超链接类型】 -->
+                <div v-else-if="processedContent(val.textElem.content)===2" class="text-bilder-type">
+                  <h4>分享链接</h4>
+                  <div class="linked-content">
+                    <div class="interlink-text" @click="handeOpenLink(val.textElem.content)">{{val.textElem.content}}</div>
+                    <img
+                      src="@/assets/svg/fuzhi.svg"
+                      alt=""
+                      @click="copyUserId(val.textElem.content)"
+                    />
+                  </div>
+                </div>
+                <!--文本消息【普通类型】-->
+                <div v-else class="public-wrap-text">
+                  {{ escape2Html(val.textElem.content) }}
+                </div>
+              </template>
+              <div v-if="val.contentType === 106" class="public-wrap-text">
+                <!--@消息-->
+                {{ transformText(val.atTextElem) }}
+              </div>
+              <div class="relative_box left-media" v-if="val.contentType === 102">
+                <cdnSource :defaultUrl="val.pictureElem.sourcePicture.url || val.pictureElem.bigPicture.url" :source="val">
+                  <template #cdnSlot="{ cdnUrl }">
+                    <van-image
+                      v-if="isMobileBrowser"
+                      class="message_img"
+                      :width="setImgStyle(val.pictureElem.sourcePicture).width+'px'"
+                      fit="cover"
+                      @click.stop="handlePreview(val)"
+                      :src="cdnUrl"
+                      :show-error="true"
+                    />
+                    <a-image
+                      v-if="!isMobileBrowser"
+                      class="message_img"
+                      :width="setImgStyle(val.pictureElem.sourcePicture).width+'px'"
+                      fit="cover"
+                      :src="cdnUrl"
+                      :show-error="true"
+                      :preview="{
+                        visible: isUpload,
+                        onVisibleChange: setVisible,
+                      }"
+                    />
+                  </template>
+                </cdnSource>
+                <teleport to="body" v-if="isUpload">
+                  <div class="img-download">
+                    <van-button
+                      @click="handleDownLoad"
+                      class="btn"
+                      size="small"
+                      :icon="defaultDownload"
+                      round
+                      type="default"
+                      >{{ $t('download')}}</van-button
+                    >
+                  </div>
+                </teleport>
+                <!-- 阅后即焚样式0 -->
+                <div v-if="isReadDeleteMsg(val)" class="incineration-pic" :style="{'width':setImgStyle(val.pictureElem.sourcePicture).width+'px',
+              height:setImgStyle(val.pictureElem.sourcePicture).height+'px'}">
+                  <van-image
+                    class="message_img"
+                    width="60px"
+                    height="60px"
+                    fit="cover"
+                    @click="handlePreview(val)"
+                    :src="incinerationPicture"
+                    :show-error="true"
+                  />
+                </div>
+              </div>
+
+              <div
+                class="relative_box left-media"
+                v-if="val.contentType === 104"
+                @click.stop="handlePreview(val)"
+              >
+                <!----视频---->
+                <cdnSource :defaultUrl="val.videoElem.snapshotUrl" :source="val" sourceType="video">
+                  <template #cdnSlot="{ cdnUrl }">
+                    <img class="video" :src="cdnUrl" alt="" />
+                  </template>
+                </cdnSource>
+                <div class="video_icon">
+                  <img src="@/assets/svg/bofang.svg" alt="" />
+                </div>
+                <!-- 阅后即焚样式 -->
+                <div v-if="isReadDeleteMsg(val)" class="incineration-video">
+                  <van-image
+                    class="message_img"
+                    width="60px"
+                    height="60px"
+                    fit="cover"
+                    :src="incinerationVideo"
+                    :show-error="true"
+                  />
+                </div>
+              </div>
+              <div v-if="val.contentType === 114">
+                <!--引用消息-->
+                {{ val.quoteElem.text }}
+              </div>
+              <div v-if="val.contentType === 103">
+                <!--语音消息-->
+                <app-audio :msg="val" @complete="burnAudioFn"></app-audio>
+              </div>
+              <!--文件消息-->
+              <div v-if="val.contentType === 105"  class="FileStyleBox" @click="handeDownloadFile(val)">
+                <div class="file-left">
+                  <div class="file-name">{{ val.fileElem?.fileName }}</div>
+                  <van-progress v-if="val.filePercentage !== undefined" :percentage="val.filePercentage" />
+                  <div class="file-schedule">
+                    <div v-if="val.Filetext">{{val.Filetext}}</div>
+                    <div class="file-size">{{formatFileSize(val.fileElem?.fileSize)}}</div>
+                  </div>
+                </div>
+                <div class="file-right">
+                  <img class="file-img" :src="fileIcon(val)" alt="" />
+                </div>
+              </div>     
+              <van-loading
+                color="#1989fa"
+                class="cell_right_loading"
+                v-if="val.status === 1"
+              />
+              <!--发消息失败-->
+              <img
+                src="@/assets/img/msg_failed.svg"
+                class="cell_right_loading cell_right_failed"
+                alt=""
+                v-if="val.status === 3"
+                @click="handle_send_message(val, true, '', index)"
+              />
+            </template>
+          </popover>
+          <!-- 阅后即焚图标 -->
+          <div
+            class="incineration-svg"
+            v-if="
+              isReadDeleteMsg(val) &&
+              (
+                val.contentType === 102 ||
+                val.contentType === 104
+              )
+            "
+          >
+            <img src="@/assets/svg/incineration.svg" alt="" />
+            <!-- 消息依次轮流倒计时, 逐个消失 -->
+            <span class="incineration-time"></span>
+          </div>
+        </div>
+      </div>
+      <!--文本发送引用消息-->
+      <div
+        class="quoteElem"
+        v-if="val.contentType === 114"
+        :class="{
+          quoteElem_left: userInfo.userID !== val.sendID,
+          quoteElem_right: userInfo.userID === val.sendID
+        }"
+      >
+        <span v-if="val.quoteElem?.quoteMessage?.contentType === 2101">
+          {{ $t('qmvMsgNotExit') }}
+        </span>
+        <div
+          class="content_image"
+          v-if="val.quoteElem.quoteMessage.contentType === 101"
+        >
+          <div class="quote_name">
+            {{ transformTexts(val.quoteElem.quoteMessage) }}
+          </div>
+          <span class="icon">:</span>
+          <span class="text">{{
+            val.quoteElem.quoteMessage.textElem?.content
+          }}</span>
+        </div>
+        <div
+          class="content_image"
+          v-if="val.quoteElem.quoteMessage.contentType === 106"
+        >
+          <div class="quote_name">
+            {{ transformTexts(val.quoteElem.quoteMessage) }}
+          </div>
+          <span class="icon">:</span>
+          <span class="text">{{
+            val.quoteElem.quoteMessage.textElem?.content
+          }}</span>
+        </div>
+        <div
+          class="content_image"
+          v-if="val.quoteElem.quoteMessage.contentType === 102"
+        >
+          <div>{{ transformTexts(val.quoteElem.quoteMessage) }}</div>
+          <span class="icon">:</span>
+          <cdnSource :defaultUrl="val.quoteElem.quoteMessage.pictureElem.bigPicture.url" :source="val">
+            <template #cdnSlot="{ cdnUrl }">
+              <van-image
+                :src="cdnUrl"
+                @click="handlePreviews(val.quoteElem.quoteMessage)"
+                :show-error="true"
+              />
+            </template>
+          </cdnSource>
+        </div>
+        <div
+          class="content_video"
+          v-if="val.quoteElem.quoteMessage.contentType === 104"
+        >
+          <div>{{ transformTexts(val.quoteElem.quoteMessage) }}</div>
+          <span class="icon">:</span>
+          <video
+            :src="val.quoteElem.quoteMessage.videoElem.videoUrl"
+            crossOrigin="anonymous"
+            preload="metadata"
+            @click="handlePreviews(val.quoteElem.quoteMessage)"
+          ></video>
+          <div class="video_icon">
+            <img src="@/assets/svg/bofang.svg" alt="" />
+          </div>
+        </div>
+        <span
+          v-if="val.quoteElem.quoteMessage.contentType === 103"
+          class="quoteElem_recorder"
+        >
+          <span>{{ transformTexts(val.quoteElem.quoteMessage) }}:</span>
+          <app-audio
+            :msg="val.quoteElem.quoteMessage"
+            @complete="burnAudioFn"
+          ></app-audio>
+        </span>
+        <!-- 引用消息-文件类型-右侧 -->
+        <div
+          v-if="val.quoteElem.quoteMessage.contentType === 105"
+          class="quoteElem_recorder quoteElem_file"
+        >
+          <span>{{ transformTexts(val.quoteElem.quoteMessage) }}:</span>
+          <span class="quoteElem-message">
+            <span class="quoteElem-name">{{ val.quoteElem.quoteMessage.fileElem.fileName }}</span>
+            <img
+              class="recorder-img"
+              :src="fileIcon(val.quoteElem.quoteMessage)"
+              alt=""
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="isSelfMsg"
+    :class="{
+      cell_right: true,
+      cell_right_special: !showCheck,
+      cell_right_specials: showCheckBox
+    }"
+  >
+    <div
+      :class="{
+        active_cell_right:
+          val.contentType === 1519 ||
+          val.contentType === 101 ||
+          val.contentType === 114 ||
+          val.contentType === 103 ||
+          val.contentType === 106 ||
+          val.contentType === 110,
+        special_cell_right:
+          val.contentType === 110 && getCurrentMsg(val).customType === 1100,
+        isCommonMsgBg: isActiveBgLink(val),
+      }"
+      style="display: flex;align-items: center;"
+    >
+      <!-- 阅后即焚图标 -->
+      <div
+        class="my-incineration"
+        v-if="
+          isReadDeleteMsg(val) &&
+          (
+            val.contentType === 102 ||
+            val.contentType === 104
+           )
+        "
+      >
+        <img src="@/assets/svg/incineration.svg" alt="" />
+      </div>
+      <van-loading color="#1989fa" size="16" v-if="val.status === 1" />
+      <div class="my-incineration"  v-if="val.status === 3" >
+        <!--发消息失败-->
+        <img
+          src="@/assets/img/msg_failed.svg"
+          alt=""
+          @click="handeResendMessage(val, true, index)"
+        />
+      </div>
+      <popover
+        :isBgColor="isActiveBgLink(val) ? '#FFFFFF' : '' "
+        :isShow_msgQuote="isShow_msgQuote"
+        :msg_info="val"
+        :isShow_msg_delete="isShow_msg_delete"
+      >
+        <template #content>
+          <div v-if="val.contentType === 110">
+            <!--群公告文本内容-->
+            <div
+              v-if="getCurrentMsg(val).customType === 1005"
+              @click="goToGroupNotice"
+            >
+              <div style="margin-bottom: 5px;">
+                {{ `[${$t("gsvGroupNotification")}]` }}
+              </div>
+              {{ getCurrentMsg(val).data.text }}
+            </div>
+            <!--合并转发-->
+            <div
+              v-if="getCurrentMsg(val).customType === 1100"
+              :class="{
+                'special-forward': true,
+                'special-forwards': isSelfMsg
+              }"
+              class="special-forward"
+              @click="handleDetail(val)"
+            >
+              <div class="special-forward-top">
+                <div class="title">{{ `${"聊天记录"}` }}</div>
+                <div class="count" v-if="getCurrentMsg(val).data.count > 1">
+                  {{ getCurrentMsg(val).data.count }}
+                </div>
+              </div>
+              <div
+                class="special-forward-bottom"
+                v-for="item in getCurrentMsg(val).data.summaryList"
+                :key="item"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <!-- 我发出去的文本消息 -->
+          <template v-if="val.contentType === 101">
+            <!-- 文本消息【图片类型】 -->
+            <div v-if="processedContent(val.textElem.content)===1" class="text-bilder-type public-fdcc">
+              <van-image
+                :src="val.textElem.content"
+                :style="{ maxWidth: '200px',width: 'auto', height: 'auto'}"
+                :show-error="false"
+              />
+              <div class="linked-content">
+                <div class="interlink-text" @click="handeOpenLink(val.textElem.content)">{{val.textElem.content}}</div>
+                <img
+                  src="@/assets/svg/fuzhi.svg"
+                  alt=""
+                  @click="copyUserId(val.textElem.content)"
+                />
+              </div>
+            </div>
+            <!-- 文本消息【超链接类型】 -->
+            <div v-else-if="processedContent(val.textElem.content)===2" class="text-bilder-type">
+              <h4>分享链接</h4>
+              <div class="linked-content">
+                <div class="interlink-text" @click="handeOpenLink(val.textElem.content)">{{val.textElem.content}}</div>
+                <img
+                  src="@/assets/svg/fuzhi.svg"
+                  alt=""
+                  @click="copyUserId(val.textElem.content)"
+                />
+              </div>
+            </div>
+            <!--文本消息【普通类型】-->
+            <div v-else class="public-wrap-text 222">
+              {{ escape2Html(val.textElem.content) }}
+            </div>
+          </template>
+          <div v-if="val.contentType === 106" class="public-wrap-text atText">
+            <!--@消息-->
+            {{ transformText(val.atTextElem) }}
+          </div>
+          <div class="relative_box right-media" v-if="val.contentType === 102">
+            <!-- 获取图片宽高，如果图片宽度小于200，就按照图片本来宽高展示；如果图片宽度大于200，限制宽度为200，然后高度等比例缩小 -->
+            <cdnSource :defaultUrl="val.pictureElem.sourcePicture.url || val.pictureElem.bigPicture.url" :source="val">
+              <template #cdnSlot="{ cdnUrl }">
+                <van-image
+                  v-if="isMobileBrowser"
+                  class="message_img"
+                  :width="setImgStyle(val.pictureElem.sourcePicture).width+'px'"
+                  fit="cover"
+                  :src="cdnUrl"
+                  :show-error="true"
+                  @click="handlePreview(val)"
+                />
+                <!-- pc显示图片组件 -->
+                <a-image
+                  v-if="!isMobileBrowser"
+                  class="message_img"
+                  :width="setImgStyle(val.pictureElem.sourcePicture).width+'px'"
+                  @click="onImage(cdnUrl)"
+                  fit="cover"
+                  :src="cdnUrl"
+                  :show-error="true"
+                  :preview="{
+                    visible: isUpload,
+                    onVisibleChange: setVisible,
+                  }"
+                />
+              </template>
+            </cdnSource>
+            <teleport to="body" v-if="isUpload">
+              <div class="img-download">
+                <van-button
+                  @click="handleDownLoad"
+                  class="btn"
+                  size="small"
+                  :icon="defaultDownload"
+                  round
+                  type="default"
+                  >{{ $t('download')}}</van-button
+                >
+              </div>
+            </teleport>
+            <!-- 阅后即焚样式1 -->
+            <div v-if="isReadDeleteMsg(val)" class="incineration-pic" :style="{'width':setImgStyle(val.pictureElem.sourcePicture).width+'px',
+              height:setImgStyle(val.pictureElem.sourcePicture).height+'px'}">
+              <van-image
+                class="message_img"
+                width="60px"
+                height="60px"
+                fit="cover"
+                @click="handlePreview(val)"
+                :src="incinerationPicture"
+                :show-error="true"
+              />
+            </div>
+            <van-loading
+              color="#1989fa"
+              class="cell_right_loading"
+              v-if="val.status === 1"
+            />
+            <!--发消息失败-->
+            <img
+              src="@/assets/img/msg_failed.svg"
+              class="cell_right_loading cell_right_failed"
+              alt=""
+              v-if="val.status === 3"
+            />
+          </div>
+          <div
+            class="relative_box right-media"
+            v-if="val.contentType === 104"
+            @click="handlePreview(val)"
+          >
+            <!----群聊视频---->
+            <cdnSource :defaultUrl="val.videoElem.snapshotUrl" :source="val" sourceType="video">
+              <template #cdnSlot="{ cdnUrl }">
+                <img class="video" :src="cdnUrl" alt="" />
+              </template>
+            </cdnSource>
+            <div class="video_icon">
+              <img src="@/assets/svg/bofang.svg" alt="" />
+            </div>
+            <!-- 阅后即焚样式 -->
+            <div v-if="isReadDeleteMsg(val)" class="incineration-video">
+              <van-image
+                class="message_img"
+                width="60px"
+                height="60px"
+                fit="cover"
+                :src="incinerationVideo"
+                :show-error="true"
+              />
+            </div>
+          </div>
+          <div v-if="val.contentType === 114">
+            <!--引用消息-->
+            {{ val.quoteElem.text }}
+          </div>
+          <div v-if="val.contentType === 103">
+            <!--语音消息-->
+            <app-audio :msg="val"></app-audio>
+          </div>
+            <!--文件消息-->
+          <div v-if="val.contentType === 105" class="FileTopping">
+            <img class="file-cancel-button"  v-if="val.Filetext" src="@/assets/filesvg/CloseShape.svg" @click="handeEmitFile(val)" />
+            <div class="FileStyleBox" @click="handeDownloadFile(val)">
+              <div class="file-left">
+                <div class="file-name chitchat-message">
+                  {{ val.fileElem?.fileName || val.cloneFileName }}
+                </div>
+                <van-progress
+                  :show-pivot="false"
+                  v-if="val.filePercentage !== undefined"
+                  :percentage="val.filePercentage"
+                />
+                <div class="file-schedule">
+                  <div v-if="val.Filetext">{{ val.Filetext }}</div>
+                  {{formatFileSize(val.fileElem?.fileSize || val.cloneFileSize)}}
+                </div>
+              </div>
+              <div class="file-right">
+                <img class="file-img" :src="fileIcon(val)" alt="" />
+              </div>
+            </div>
+          </div>
+          <!-- fix 2024- 8-9 这段代码没看到什么作用 -->
+          <!-- <van-loading
+            color="#1989fa"
+            class="cell_right_loading"
+            v-if="val.status === 1"
+          /> -->
+        </template>
+      </popover>
+    </div>
+    <!--@他人 发送引用消息-->
+    <div
+      class="quoteElem"
+      v-if="
+        val.contentType === 106 && val.atTextElem?.quoteMessage?.contentType
+      "
+      :class="{
+        quoteElem_left: userInfo.userID !== val.sendID,
+        quoteElem_right: userInfo.userID === val.sendID
+      }"
+    >
+      <span v-if="val.quoteElem?.quoteMessage?.contentType === 2101">
+        {{ $t('qmvMsgNotExit') }}
+      </span>
+      <span v-if="val.atTextElem?.quoteMessage?.contentType === 101">
+        {{ val.atTextElem.quoteMessage.senderNickname }}:{{
+          val.atTextElem.quoteMessage.textElem?.content
+        }}
+      </span>
+      <span v-if="val.quoteElem?.quoteMessage?.contentType === 101">
+        {{ val.quoteElem.quoteMessage.senderNickname }}:{{
+          val.quoteElem.quoteMessage.textElem?.content
+        }}
+      </span>
+      <span v-if="val.atTextElem?.quoteMessage?.contentType === 106">
+        {{ val.atTextElem.quoteMessage.senderNickname }}:{{
+          val.atTextElem.quoteMessage.atTextElem.text
+        }}
+      </span>
+      <div
+        class="content_image"
+        v-if="val.atTextElem?.quoteMessage?.contentType === 102"
+      >
+        <div>{{ val.atTextElem.quoteMessage.senderNickname }}</div>
+        <span class="icon">:</span>
+        <cdnSource :defaultUrl="val.atTextElem.quoteMessage.pictureElem.bigPicture.url" :source="val">
+          <template #cdnSlot="{ cdnUrl }">
+            <van-image
+              :src="cdnUrl"
+              @click="
+                showImagePreview([
+                  val.atTextElem.quoteMessage.pictureElem.bigPicture.url
+                ])
+              "
+              fit="contain"
+              :show-error="true"
+            />
+          </template>
+        </cdnSource>
+      </div>
+      <div
+        class="content_video"
+        v-if="val.atTextElem?.quoteMessage?.contentType === 104"
+      >
+        <div>{{ val.atTextElem.quoteMessage.senderNickname }}</div>
+        <span class="icon">:</span>
+        <video
+          :src="val.atTextElem.quoteMessage.videoElem.videoUrl"
+          crossOrigin="anonymous"
+          preload="metadata"
+        ></video>
+        <div class="video_icon">
+          <img src="@/assets/svg/bofang.svg" alt="" />
+        </div>
+      </div>
+      <span
+        v-if="val.atTextElem?.quoteMessage?.contentType === 103"
+        class="quoteElem_recorder"
+      >
+        <span>{{ val.atTextElem.quoteMessage.senderNickname }}:</span>
+        <app-audio :msg="val.atTextElem.quoteMessage"></app-audio>
+      </span>
+    </div>
+
+    <div
+      class="quoteElem"
+      v-if="val.contentType === 114"
+      :class="{
+        quoteElem_left: userInfo.userID !== val.sendID,
+        quoteElem_right: userInfo.userID === val.sendID
+      }"
+    >
+      <span v-if="val.quoteElem?.quoteMessage?.contentType === 2101">
+        {{ $t('qmvMsgNotExit') }}
+      </span>
+      <span v-if="val.quoteMessage?.contentType === 101">
+        {{ val.quoteElem.quoteMessage.senderNickname }}:{{
+          val.quoteElem.quoteMessage.textElem?.content
+        }}
+      </span>
+      <span v-if="val.quoteElem?.quoteMessage?.contentType === 101">
+        {{ val.quoteElem.quoteMessage.senderNickname }}:{{
+          val.quoteElem.quoteMessage.textElem?.content
+        }}
+      </span>
+      <span v-if="val.quoteElem?.quoteMessage?.contentType === 106">
+        {{ val.quoteElem.quoteMessage.senderNickname }}:{{
+          val.quoteElem.quoteMessage.atTextElem.text
+        }}
+      </span>
+      <div
+        class="content_image"
+        v-if="val.quoteElem?.quoteMessage?.contentType === 102"
+      >
+        <div>{{ val.quoteElem.quoteMessage.senderNickname }}</div>
+        <span class="icon">:</span>
+        <cdnSource :defaultUrl="val.quoteElem.quoteMessage.pictureElem.bigPicture.url" :source="val">
+          <template #cdnSlot="{ cdnUrl }">
+            <van-image
+              :src="cdnUrl"
+              @click="
+                showImagePreview([
+                  val.quoteElem.quoteMessage.pictureElem.bigPicture.url
+                ])
+              "
+              fit="contain"
+              :show-error="true"
+            />
+          </template>
+        </cdnSource>
+      </div>
+      <div
+        class="content_video"
+        v-if="val.quoteElem?.quoteMessage?.contentType === 104"
+      >
+        <div>{{ val.quoteElem.quoteMessage.senderNickname }}</div>
+        <span class="icon">:</span>
+        <video
+          :src="val.quoteElem.quoteMessage.videoElem.videoUrl"
+          crossOrigin="anonymous"
+          preload="metadata"
+        ></video>
+        <div class="video_icon">
+          <img src="@/assets/svg/bofang.svg" alt="" />
+        </div>
+      </div>
+      <span
+        v-if="val.quoteElem?.quoteMessage?.contentType === 103"
+        class="quoteElem_recorder"
+      >
+        <span>{{ val.quoteElem.quoteMessage.senderNickname }}:</span
+        ><app-audio :msg="val.quoteElem.quoteMessage"></app-audio>
+      </span>
+     <!-- 引用消息-文件类型-右侧 -->
+     <div
+        v-if="val.quoteElem.quoteMessage.contentType === 105"
+        class="quoteElem_recorder quoteElem_file"
+      >
+        <div>{{ val.quoteElem.quoteMessage.senderNickname }}：</div>
+        <span class="quoteElem-message">
+          <span class="quoteElem-name">{{ val.quoteElem.quoteMessage.fileElem.fileName }}</span>
+          <img
+            class="recorder-img"
+            :src="fileIcon(val.quoteElem.quoteMessage)"
+            alt=""
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <!--已读与未读 群管理员 本人可见 2024-6-12不要全部已读了 val.unreadCount === 0-->
+  <div
+    class="cell_state_read cell_state"
+    @click="open_read_list(val)"
+    v-if="
+        val && val.attachedInfoElem && 
+        val.attachedInfoElem?.groupHasReadInfo?.hasReadCount!== 0 &&
+        msg_mainstay_type.includes(val.contentType) &&
+        groupInfo.roleLevel !== 20 &&
+        userInfo.userID === val.sendID &&
+        isInGroupchat
+    "
+  >
+    {{ unreadCountComputed(val).value }}
+    <img src="@/assets/img/msg_read.svg" alt="" />
+  </div>
+  <!-- 这个代码测试用的
+   <span style="color: #000;">{{ val.attachedInfoElem?.groupHasReadInfo?.groupMemberCount }}=={{ val.attachedInfoElem?.groupHasReadInfo?.hasReadCount }}</span> 
+  -->
+  <CommonPreview
+    v-model="showPreview"
+    :initialSwipe="currentIndex"
+    :currentId="currentId"
+    :images="previewArr"
+    :time="currentBurnTime"
+    :defaultTime="currentDefaultBurnTime"
+    @getList="closePreview"
+    @burnImageOrVideo="deleteBurn"
+    :currentType="currentPreviewType"
+    :isCurrentSend="currentPreviewSend"
+    previewType="group"
+  >
+  </CommonPreview>
+  <!--删除消息提示-->
+  <AppPopup v-model:show="isShow_msg_delete.show">
+    <div class="popup_select">
+      <div class="popup_select_cell" @click="handle_delete_msg">
+        {{ $t("cvdeleteLocal") }}
+      </div>
+      <!-- 在群聊中，用户可以删除自己发送的信息 -->
+      <div
+        v-if="groupInfo.roleLevel===100||(groupInfo.roleLevel !== 20&&hasDeleteGroupMemberMessage())||userInfo.userID==isShow_msg_delete.sendID"
+        class="popup_select_cell"
+        @click="handle_delete_msg(false)"
+      >
+        {{ $t("cvdeleteLocalAndServer") }}
+      </div>
+    </div>
+  </AppPopup>
+  <!--已读列表-->
+  <read-list v-model:show="isShow_readList" v-if="isShow_readList" :msg="readData"></read-list>
+</template>
+
+<script setup>
+import { showToast, showConfirmDialog, showSuccessToast,showImagePreview } from "vant";
+import { AppPopup, CommonPreview, CommonLottie } from "@/components/index.js";
+import { formatLink, parseBr } from "@/utils/imCommon";
+import { MessageType } from "@/utils/constant";
+import popover from "@/views/dialogue/groupChat/components/popover.vue";
+import appAudio from "@/views/dialogue/privateChat/components/audio.vue";
+import { computed, reactive,onMounted } from "vue";
+import { useUserStore } from "@/stores/user.js";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useMessageStore } from "@/stores/modules/message";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import readList from "../components/readList.vue";
+import { useContactStore } from "@/stores/contact.js";
+import { useI18n } from "vue-i18n";
+import { getAtNickname, escape2Html } from "@/utils/tools";
+import incinerationPicture from "@/assets/svg/incineration-picture.svg";
+import incinerationVideo from "@/assets/svg/incineration-video.svg";
+import defaultDownload from "@/assets/svg/download.svg";
+import { formatFileSize,fileErrorsToast,fileIcon,publicDownloadFile } from "@/utils/fileUtils";
+import { isHttpLink,isImageLink} from "@/utils/common";
+import { copyUserId } from "@/utils/tools.js";
+import emitter from "@/utils/events";
+import { CustomMessageType } from "@/utils/constant";
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { groupInfo, contactList, groupMemberInfo,myGroupInfo } = storeToRefs(contactStore);
+const { setGroupInfo,getGroupMemberInfo } = contactStore;
+const IMSDK = getSDK();
+const $api = inject("$api");
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
+const messageStore = useMessageStore();
+const { storeHistoryMessageList } = storeToRefs(messageStore);
+const {
+  userInfo,
+  groupChatList,
+  groupChatConfig,
+  userBgSettings,
+  appConfig
+} = storeToRefs(userStore);
+const {getNewsMessageListData } = messageStore;
+const showCheckBox = computed(() => groupChatConfig.value.showCheck === true);
+// 是否返回显示阅后弹窗
+const status = computed(
+  () => appConfig.value?.burn_after_reading?.group_chat.status
+);
+// 根据群聊id来判断当前用户是否在群聊当中如果在返回true不在返回false
+const hasWhetherGroup = (key) => {
+  return !!groupMemberInfo.value[key]?.length;
+};
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {}
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  showCheck: {
+    type: Boolean,
+    default: false
+  },
+  readDeleteMsg: {
+    type: Object
+  }
+});
+const { source: val, index } = toRefs(props);
+const isSelfMsg = computed(() => userInfo.value.userID === val.value.sendID);
+//消息主体UI-对应显示类型
+const msg_mainstay_type = reactive([101, 102, 103, 104, 105, 106, 114, 1519]);
+//引用消息
+const isShow_msgQuote = reactive({
+  show: false
+});
+const msg_info = ref(val.value);
+// 传递给已读弹框组件
+const readData = ref();
+//已读人群弹窗控制
+const isShow_readList = ref(false);
+//消息删除弹窗显示控制
+const isShow_msg_delete = reactive({
+  show: false,
+  currentIndex: 0, //当前删除索引
+  sendID: "0"
+});
+// 传入预览组件当前消息id
+const currentId = ref("");
+const currentIndex = ref(0);
+// 预览组件
+const showPreview = ref(false);
+const previewArr = ref([]);
+const currentBurnTime = ref(0); // 当前图片或视频焚毁的时间
+const currentDefaultBurnTime = ref(0); // 当前图片或视频配置的焚毁时间
+const currentPreviewType = ref("image");
+const currentPreviewSend = ref(false);
+// 计算已读数量[待优化]
+const unreadCountComputed = (val) => {
+  return computed(() => {
+    // 群聊总人数-减去自己
+    const totalMembers = val.attachedInfoElem?.groupHasReadInfo?.groupMemberCount -1;
+    // 已读总数
+    const unreadCount = val.attachedInfoElem?.groupHasReadInfo?.hasReadCount;
+    // 群聊总人数 === 已读总数则是全部已读
+    if (totalMembers > 200 && unreadCount >= 200) {
+      return t("nPerson", { count: 200 }) + t("hasRead");
+    } else {
+      return t("nPerson", { count: unreadCount }) + t("hasRead");
+    }
+  });
+};
+
+// 群聊焚毁时间按照发送时间开始计算，所以实际的焚毁时间需要减去与当期时间的差额, 过期了就返回-1 commonPreview中就用-1做判断
+const getRestBurnTime = (readDelTime, sendTime) => {
+  if (!readDelTime || !sendTime || currentPreviewSend.value) return 0
+  const diff = Date.now() - sendTime
+  const rest = Math.floor(((readDelTime * 1000) - diff) / 1000)
+  return rest <= 0 ? -1 : rest
+}
+
+// 预览图片或者视频消息
+const handlePreview = val => {
+  console.log('预览：',val)
+  if (status.value == 1) {
+    currentId.value = val.clientMsgID;
+    currentPreviewSend.value = val.sendID === userInfo.value.userID;
+    const tempArr = [];
+    if (val.contentType === 104) {
+      currentPreviewType.value = "video";
+      const { videoType, snapshotUrl, videoUrl } = val.videoElem;
+      const detail = val.ex || "";
+      // if (detail && JSON.parse(detail)) {
+      //   // 消息焚毁时间
+      //   const readDelTime = JSON.parse(detail)["burn_msg"][
+      //     "read_delete_time"
+      //   ]
+      //   const realBurnTime = getRestBurnTime(readDelTime, val.sendTime)
+      //   currentBurnTime.value = realBurnTime
+      //   currentDefaultBurnTime.value = readDelTime
+      // }
+      const JSON_detail = detail?JSON.parse(detail) || {} : {}
+      if (JSON_detail?.burn_msg?.read_delete_time) {
+        // 消息焚毁时间
+        const readDelTime = JSON_detail.burn_msg.read_delete_time
+        const realBurnTime = getRestBurnTime(readDelTime, val.sendTime)
+        currentBurnTime.value = realBurnTime
+        currentDefaultBurnTime.value = readDelTime
+      }
+      tempArr.push({
+        type: videoType,
+        snapshotUrl: snapshotUrl,
+        url: videoUrl,
+        id: val.clientMsgID
+      });
+    } else if (val.contentType === 102) {
+      currentPreviewType.value = "image";
+      const detail = val.ex || "";
+      // if (detail && JSON.parse(detail)) {
+      //   // 消息焚毁时间
+      //   const readDelTime = JSON.parse(detail)["burn_msg"][
+      //     "read_delete_time"
+      //   ]
+      //   const realBurnTime = getRestBurnTime(readDelTime, val.sendTime)
+      //   currentBurnTime.value = realBurnTime
+      //   currentDefaultBurnTime.value = readDelTime
+      // }
+      const JSON_detail = detail?JSON.parse(detail) || {} :{}
+      if (JSON_detail?.burn_msg?.read_delete_time) {
+        // 消息焚毁时间
+        const readDelTime = JSON_detail.burn_msg.read_delete_time
+        const realBurnTime = getRestBurnTime(readDelTime, val.sendTime)
+        currentBurnTime.value = realBurnTime
+        currentDefaultBurnTime.value = readDelTime
+      }
+      tempArr.push({ ...val.pictureElem.sourcePicture, id: val.clientMsgID });
+    }
+    currentIndex.value = tempArr.findIndex(item => item.id === val.clientMsgID);
+    // 找到当前索引，传递到swipe组件中initial-swipe
+    previewArr.value = tempArr;
+    showPreview.value = true;
+    return;
+  }
+  currentId.value = val.clientMsgID;
+  const tempArr = [];
+  storeHistoryMessageList.value.forEach(item => {
+    if (item.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = item.videoElem;
+      tempArr.push({
+        type: videoType,
+        snapshotUrl: snapshotUrl,
+        url: videoUrl,
+        id: item.clientMsgID
+      });
+    } else if (item.contentType === 102) {
+      tempArr.push({ ...item.pictureElem.sourcePicture, id: item.clientMsgID });
+    }
+  });
+  currentIndex.value = tempArr.findIndex(item => item.id === val.clientMsgID);
+  // 找到当前索引，传递到swipe组件中initial-swipe
+  previewArr.value = tempArr;
+  currentBurnTime.value = 0;
+  currentDefaultBurnTime.value = 0
+  showPreview.value = true;
+};
+const handlePreviews = val => {
+  currentId.value = val.clientMsgID;
+  const tempArr = [];
+  if (val.contentType === 104) {
+    const { videoType, snapshotUrl, videoUrl } = val.videoElem;
+    tempArr.push({
+      type: videoType,
+      snapshotUrl: snapshotUrl,
+      url: videoUrl,
+      id: val.clientMsgID
+    });
+  } else if (val.contentType === 102) {
+    tempArr.push({ ...val.pictureElem.sourcePicture, id: val.clientMsgID });
+  }
+  previewArr.value = tempArr;
+  showPreview.value = true;
+};
+const closePreview = async (val, time, clientMsgID) => {
+  try {
+    // 到时间或者过期就直接关掉，否则关之前二次确认一下
+    if (time <= 0) {
+      showPreview.value = false
+      currentId.value = ""
+      previewArr.value = []
+      currentIndex.value = 0
+      return
+    }
+    await showConfirmDialog({
+      title: "温馨提示",
+      message: "消息正在焚毁中，是否退出并一键焚毁？",
+      className: "custom-del",
+      cancelButtonText: "我再看看",
+      confirmButtonText: "立即焚烧",
+      confirmButtonColor: "#0095F6"
+    })
+    // 点击确定操作
+    // 到期后需要删除数据库中的记录
+    await IMSDK.burnMessage({
+      conversationID: groupChatConfig.value.conversationID,
+      clientMsgID
+    });
+    // 删除此条消息（产品设计如此，只删本地和本地数据库）
+    const index = storeHistoryMessageList.value.findIndex(
+      item => clientMsgID === item.clientMsgID
+    );
+    storeHistoryMessageList.value.splice(index, 1);
+    showPreview.value = false;
+    currentId.value = "";
+    previewArr.value = [];
+  } catch(e) {
+    console.log('e', e)
+  }
+};
+const getCurrentMsg = val => {
+  return JSON.parse(val.customElem.data);
+};
+/**
+ * 删除聊天记录
+ * @param { Boolean } isLocal 是否只删除本地消息
+ * **/
+const handle_delete_msg = async (isLocal = true) => {
+  const msg = storeHistoryMessageList.value[isShow_msg_delete.currentIndex];
+  //判断是否本地删除
+  if (isLocal) {
+    storeHistoryMessageList.value.splice(isShow_msg_delete.currentIndex, 1);
+    await IMSDK.deleteMessageFromLocalStorage({
+      conversationID: groupChatConfig.value.conversationID,
+      clientMsgID: msg.clientMsgID
+    });
+  } else {
+    //撤回消息
+    await IMSDK.revokeMessage({
+      conversationID: groupChatConfig.value.conversationID,
+      clientMsgID: msg.clientMsgID
+    });
+  }
+  showToast(t("deleteSuccessfully"));
+
+  isShow_msg_delete.show = false;
+  isShow_msg_delete.currentIndex = 0;
+};
+/*
+ *打开已读列表
+ */
+const open_read_list = msg => {
+  readData.value = msg
+  // Object.assign(msg_info, msg);
+  isShow_readList.value = true;
+};
+const transformText = atTextElem => {
+  let content = atTextElem?.text?.trim() ?? "";
+  if (content) {
+    let list = atTextElem?.atUsersInfo;
+    list.forEach(item => {
+      content = content?.replaceAll(
+        `@${item.atUserID}`,
+        `@${getAtNickname(item.atUserID, item.groupNickname, groupInfo.value.roleLevel > 20)}`
+      );
+    });
+  }
+  return content;
+};
+const transformTexts = val => {
+  // senderNickname
+  const index = contactList.value.findIndex(
+    items => items.userID === val.sendID
+  );
+  // 在群聊中找到群聊备注
+  const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+  const groupItem = arr.find(item => item.userID === val.sendID)
+  const groupRemark = groupItem ? (JSON.parse(groupItem.ex || '{}')?.remark?.value || '') : ''
+  // 在好友中找到好友备注
+  if (index != -1) {
+    // 群聊中展示权限
+    // 好友备注 -->  群聊备注 --> 用户个人昵称  --> 群聊昵称
+    const friendItem = contactList.value[index]
+    return friendItem.remark ? friendItem.remark : (groupRemark || friendItem.nickname);
+  } else {
+    return groupRemark || val.senderNickname;
+  }
+};
+const handleDetail = val => {
+  const detail = JSON.parse(val.customElem.data);
+  if (detail.data.serverID) {
+    router.push(`/home/dialogue/logDisplay?relay_id=${detail.data.serverID}`);
+  } else {
+    router.push({
+      path: "/home/dialogue/logDisplay",
+      state: {
+        msg: detail.data
+      }
+    });
+  }
+};
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+      const index = arr.findIndex(item => item.userID === userID);
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        if (userID === groupChatConfig.value.ownerUserID) {
+          return "group";
+        }
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+// 文件终止上传-兄弟组件之间通讯
+const handeEmitFile = async (item) => {
+  // 给兄弟组件发射事件
+  emitter.emit('cancelGroupChatFile',item)
+};
+// 文件下载
+const handeDownloadFile = (item) => {
+  // 在需要文件下载的地方调用公共下载方法
+  publicDownloadFile(item, showCheckBox.value);
+};
+// 判断自己是否在群聊中
+const isInGroupchat = computed(() => {
+  if (
+    Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) &&
+    groupMemberInfo.value[groupChatConfig.value.groupID].length > 0
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+const goToGroupNotice = () => {
+  router.push("/home/contact/groupDetails/groupNotice");
+};
+
+const deleteBurn = async (clientMsgID, flag = true) => {
+  const index = storeHistoryMessageList.value.findIndex(
+    item => clientMsgID === item.clientMsgID
+  );
+  storeHistoryMessageList.value.splice(index, 1);
+  // 到期后需要删除本地的数据库中的记录
+  await IMSDK.burnMessage({
+    conversationID: groupChatConfig.value.conversationID,
+    clientMsgID
+  });
+  if (flag) {
+    showPreview.value = false;
+    currentId.value = "";
+    previewArr.value = [];
+    currentIndex.value = 0;
+    currentBurnTime.value = 0;
+    currentDefaultBurnTime.value = 0
+  }
+};
+
+const burnAudioFn = val => {
+  deleteBurn(val.clientMsgID, false);
+};
+const isReadDeleteMsg = computed(() => {
+  return msg => {
+    if (msg.ex && JSON.parse(msg.ex)["burn_msg"]) {
+      return true;
+    }
+    return false;
+  };
+});
+
+/**
+ * 计算图片宽度
+ * @param val 
+ */
+const setImgStyle = (val) =>{
+  const {width,height} = val
+  let obj = {
+    width:width,
+    height:width
+  }
+  if(width>180){
+    obj.width = 180
+    obj.height = height/(width/180)
+  }
+  if(width>height){
+    obj.width = 220
+    obj.height = height/(width/220)
+  }
+  // 纵向小图
+  if (width <= 180 && width < height) {
+    obj.width = width
+    obj.height = height
+  }
+  return obj
+}
+
+/**
+ * 判断是否拥有移除本地和服务器会话信息的功能
+ */
+const hasDeleteGroupMemberMessage = () =>{
+  const {ex} = myGroupInfo._rawValue||{}
+  if(ex){
+    const {hasDeleteGroupMemberMessagePermission} = JSON.parse(ex)||{}
+    if(hasDeleteGroupMemberMessagePermission.value==1)return true
+  }
+  return false
+}
+
+// 判断是PC浏览器还是手机浏览器
+const isMobileBrowser = computed(() => {
+  return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|Macintosh|Mac OS X)/i);
+})
+
+// pc图片下载
+const isUpload = ref(false)
+const uploadImgSrc = ref(null)
+
+const onImage = (src) => {
+  console.log('onImage',src);
+  // 下载地址
+  uploadImgSrc.value = src
+  // 预览开启
+  isUpload.value = true
+}
+const setVisible = (val) => {
+  console.log('setVisible',val);
+  // 关闭预览
+  isUpload.value = val
+}
+// 图片下载
+const handleDownLoad = event => {
+  // 创建一个 <a> 元素
+  const link = document.createElement("a");
+  link.href = uploadImgSrc.value;
+  // 设置下载文件名
+  link.download = "";
+  // 触发点击事件以下载图片
+  link.click();
+  link.remove();
+};
+// 打开URL站内链接
+const handeOpenLink = (url) => {
+  // 使用正则表达式判断url是否以http://或https://开头
+  const httpRegex = /^https?:\/\//i;
+  // 如果url以www.开头，则在前面加上http://
+  if (!httpRegex.test(url)) {
+    url = 'http://' + url;
+  }
+  // 使用window.open打开链接
+  window.open(url);
+};
+// 计算处理后的内容
+const processedContent = computed(() => (content) => {
+  // 判断是否是 http 链接
+  if (isHttpLink(content)) {
+    // 判断链接的后缀是否是图片类型
+    // 1、图片链接  2、普通文本链接
+    if (isImageLink(content)) {
+      return 1; // 返回状态1
+    } else {
+      return 2; // 返回状态2
+    }
+  } else {
+    return content; // 如果不是链接格式，则返回内容本身
+  }
+});
+// 计算是否是链接类型的文本消息在添加样式
+const isActiveBgLink = computed(() => {
+  return (items) => {
+    if (items.contentType === 101 && items.textElem?.content) {
+      let isLinkState = processedContent.value(items.textElem.content);
+      // 1、图片链接  2、普通文本链接
+      return isLinkState === 1 || isLinkState === 2;
+    }
+    return false;
+  };
+});
+
+// 消息发送失败-重试发送方法
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+const handeResendMessage = async ( item, repeat = false, currentIndex) => {
+  console.log("handeResendMessage", item);
+  try {
+    item.status = 1
+    // await sleep(2000);
+    const { data } = await IMSDK.sendMessageNotOss({
+    groupID: groupInfo.value.groupID,
+    message: item,
+    recvID: "",
+  });
+    item.status = 2
+    if (data.status === 2) {
+      showSuccessToast("重新发送成功");
+      // 更新数据
+      refreshGroupChat(item, currentIndex)
+    }
+  } catch (error) {
+    console.log("消息重新发送失败11111111", error,item);
+    // 发送失败 更新状态
+    item.status = 3
+  }
+};
+
+const refreshGroupChat = (item, index) => {
+  storeHistoryMessageList.value.splice(index, 1)
+  storeHistoryMessageList.value.push(item)
+}
+onMounted(()=>{})
+</script>
+
+<style lang="less" scoped>
+// 导入公共样式文件
+@import '@/style/common-styles.less';
+
+.text_content {
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.senderInfo {
+  display: flex;
+  margin: 5px 0;
+  // padding: 10px 0;
+  &_left {
+    margin-right: 8px;
+
+    & > img {
+      display: inline-block;
+      height: 40px;
+      width: 40px;
+      border-radius: 20px;
+      overflow: hidden;
+    }
+  }
+
+  &_right {
+    &_nickname {
+      color: rgba(27, 27, 34, 0.4);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: calc(100vw - 88px);
+      font-size: 0.75rem;
+      margin-bottom: 4px;
+    }
+
+    &_msg {
+      display: block;
+    }
+  }
+}
+
+.reverse-senderInfo {
+  flex-direction: row-reverse;
+}
+
+.senderInfo_right {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+}
+.cell_right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-width: 80%;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  // word-wrap: break-word;
+  word-break: break-all;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 10px;
+  &_loading {
+    color: black;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    left: -24px;
+  }
+
+  &_failed {
+    width: 20px;
+    height: 20px;
+  }
+  // .cdn-source-wrapper{
+    :deep(.van-image__img) {
+      border-radius: 10px;
+    }
+  // }
+
+  .video {
+    background-size: contain;
+    border-radius: 10px;
+    position: relative;
+  }
+
+  .video_icon {
+    position: absolute;
+    // top: calc(50% - 16px);
+    // left: calc(50% - 16px);
+    left:50%;
+    top:50%;
+    transform: translate(-50%,-50%);
+  }
+}
+
+.cell_right_special {
+  max-width: 100%;
+  padding-left: 20%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  .quoteElem_right {
+    justify-content: flex-end;
+  }
+
+  .video_icon {
+    position: absolute;
+    // top: calc(50% - 16px);
+    // left: calc(84% - 16px);
+    left:50%;
+    top:50%;
+    transform: translate(-50%,-50%);
+  } 
+}
+
+.cell_right_specials {
+  .video_icon {
+    position: absolute;
+    left:50%;
+    top:50%;
+    transform: translate(-50%,-50%);
+  }
+}
+
+.active_cell_right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  :deep(.van-popover__wrapper) {
+    border-radius: 10px 0 10px 10px;
+    .popover {
+      background: #0095f6;
+    }
+  }
+}
+// 如果是链接类型的文本消息则需要把背景去掉
+.isCommonMsgBg {
+  :deep(.van-popover__wrapper) {
+    background: #fff;
+  }
+}
+
+.special_cell_right {
+  :deep(.van-popover__wrapper) {
+    background: transparent;
+  }
+}
+
+.active_cell_left {
+  background: white;
+}
+
+.cell_left {
+  // background: white;
+  color: rgba(27, 27, 34, 1);
+  border-radius: 0 10px 10px 10px;
+  word-break: break-all;
+  max-width: 100%;
+  width: fit-content;
+  position: relative;
+  .cdn-source-wrapper{
+    :deep(.van-image__img) {
+      border-radius: 10px;
+    }
+  }
+
+  .video {
+    background-size: cover;
+    border-radius: 10px;
+  }
+
+  .video_icon {
+    position: absolute;
+    // top: calc(50% - 16px);
+    // left: calc(50% - 16px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.video {
+  max-width: 200px;
+  max-height: 160px;
+}
+
+.quoteElem {
+  background: rgba(0, 0, 0, 0.03);
+  margin: 4px 0;
+  border-radius: 10px;
+  max-width: 255px;
+  padding: 8px 12px;
+  color: rgba(118, 118, 122, 1);
+  font-size: 0.75rem;
+
+  & > span {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
+
+  .quoteElem_recorder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > span:nth-child(1) {
+      margin-right: 10px;
+    }
+  }
+  .quoteElem_file {
+    max-width: max-content;
+    .quoteElem-message {
+      display: flex;
+      align-items: center;
+      .quoteElem-name {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2; /* 控制显示的行数 */
+        max-height: 3.6em; /* 控制最大高度，2行文本的高度是1.8em，这里设置成2行文本的两倍 */
+      }
+    }
+    .recorder-img {
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.quoteElem_left {
+  align-self: flex-start;
+
+  .content_image,
+  .content_video {
+    display: flex;
+    position: relative;
+
+    // align-items: center;
+    > div {
+      // margin-right: 10px;
+      max-width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .text {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+    }
+
+    video {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      border-radius: 3px;
+      // object-fit: contain; /* 设置视频的尺寸适配模式 */
+      object-fit: contain;
+      object-position: center;
+    }
+
+    :deep(.van-image) {
+      width: 30px;
+      height: 30px;
+      border-radius: 3px;
+
+      .van-image__img {
+        border-radius: 3px;
+      }
+    }
+
+    .video_icon {
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      top: calc(50% - 8px);
+      right: 8px;
+      margin-right: 0;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  .quote_name {
+    // margin-right: 10px;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    margin-right: 10px;
+  }
+}
+
+.quoteElem_right {
+  align-self: flex-end;
+
+  .content_image,
+  .content_video {
+    display: flex;
+    position: relative;
+
+    // align-items: center;
+    > div {
+      // margin-right: 10px;
+      max-width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .text {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+    }
+
+    video {
+      width: 30px;
+      height: 30px;
+      border-radius: 3px;
+      // object-fit: contain; /* 设置视频的尺寸适配模式 */
+      object-fit: contain;
+      object-position: center;
+    }
+
+    :deep(.van-image) {
+      width: 30px;
+      height: 30px;
+      border-radius: 3px;
+
+      .van-image__img {
+        border-radius: 3px;
+      }
+    }
+
+    .video_icon {
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      top: calc(50% - 8px);
+      right: 4px;
+      margin-right: 0;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  .quote_name {
+    // margin-right: 10px;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    margin-right: 10px;
+  }
+}
+
+.popup_select {
+  display: flex;
+  flex-direction: column;
+  background: white;
+
+  &_cell {
+    height: 60px;
+  }
+
+  &_cell:nth-child(2) {
+    color: red;
+  }
+}
+
+.msgQuote {
+  position: absolute;
+  top: -33px;
+  left: 0;
+  background: white;
+  height: 33px;
+  width: 100%;
+  border-bottom: 1px solid rgba(242, 244, 245, 1);
+  display: flex;
+  font-size: 0.75rem;
+  color: rgba(118, 118, 122, 1);
+  padding: 8px 12px;
+  align-items: center;
+
+  & > .left {
+    margin-right: 5px;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & > .center {
+    flex: 1;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  & > .right {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    bottom: 0;
+    margin: auto;
+    font-size: 1.125rem;
+    height: 18px;
+  }
+
+  .van-icon {
+    padding: 0 !important;
+  }
+}
+
+.cell_state {
+  font-size: 0.625rem;
+  position: absolute;
+  // bottom: -14px;
+  bottom: 0;
+  right: 0;
+
+  &_read {
+    color: #0095f6;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  &_unread {
+    color: rgba(27, 27, 34, 0.4);
+  }
+}
+
+.message_img {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.video {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.special-forward {
+  background: #ffffff;
+  // padding: 10px 12px 14px 12px;
+  border-radius: 10px 0px 10px 10px;
+
+  &-top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+
+    .title {
+      font-size: 1rem;
+      color: #1b1b22;
+    }
+
+    .count {
+      background-color: #f8f8fb;
+      font-size: 0.75rem;
+      color: #1b1b2299;
+      border-radius: 17px;
+      padding: 2px 8px;
+    }
+  }
+
+  &-bottom {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #76767a;
+    font-size: 0.875rem;
+    max-width: 200px;
+  }
+}
+
+.special-forwards {
+  padding: 10px 12px 14px 12px;
+  width: 180px;
+  overflow: hidden;
+}
+.spcial-cell_right {
+  background: transparent !important;
+}
+.incineration-svg {
+  position: absolute;
+  // left: -30px;
+  right: -40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  .incineration-time {
+    font-size: 0.75rem;
+    color: #ff5017;
+  }
+}
+.incineration-right {
+  right: 40px;
+  left: auto;
+  text-align: end;
+}
+.relative_box {
+  position: relative;
+
+  &.left-media {
+    margin-left: -12px;
+  }
+  &.right-media {
+    margin-right: -12px;
+  }
+}
+.text-bilder-type {
+  // max-width: 272px;
+  max-width: 265px;
+  h4 {
+    color: rgba(27, 27, 34, 1);
+    font-weight: 600;
+    font-size:  0.875rem;
+  }
+  .linked-content {
+    background-color: rgba(246, 246, 246, 1);
+    border-radius: 8px;
+    padding: 10px 8px;
+    color: rgba(83, 143, 225, 1);
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    .interlink-text {
+      .public-text-overflow-2-lines;
+      padding-right: 10px;
+    }
+  }
+}
+.FileTopping {
+    display: flex;
+    align-items: center;
+    .file-cancel-button {
+      margin-right: 5px;
+    }
+  }
+.FileStyleBox {
+    min-width: 235px;
+    height: 60px;
+    border-radius: 12px;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    justify-content: space-between;
+    .file-left {
+      flex: 1;
+      color: #000;
+      .file-name {
+        font-family: PingFang SC;
+        font-weight: 400;
+        display: inline-block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 130px;
+        white-space: nowrap;
+      }
+      .file-schedule {
+        margin-top: 5px;
+        display: flex;
+        align-items: center;
+        color: #ccc;
+        font-size: 0.6875rem;
+      }
+    }
+    .file-right {
+      .file-img {
+        width: 55px;
+        height: 55px;
+        background-size: 100% 100%;
+      }
+    }
+  }
+.incineration-pic {
+  width: 200px;
+  height: 160px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #7b8fa7cc;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+  .message_img {
+    border: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.incineration-video {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #7b8fa7cc;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+  .message_img {
+    border: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.my-incineration {
+  margin-right: 4px;
+}
+.img-download {
+  position: absolute;
+  right: 20px;
+  bottom: 30px;
+  z-index: 1086;
+
+  :deep(.van-button--default) {
+    background: #ffffff21;
+    color: white;
+    border-color: #ffffff21;
+  }
+}
+</style>
diff --git a/src/views/dialogue/groupChat/MessageItem/index.vue b/src/views/dialogue/groupChat/MessageItem/index.vue
new file mode 100644
index 0000000..4031a49
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="message-item-wrapper">
+    <div ref="messageContainerRef" :class="{
+      'message_item_self': true,
+      'active_message_item_self': !showCheckFlag && showCheck,
+      'message_item_active': source.jump,
+      'message_item_selfs': isSelfMsg && showCheck,
+      'special_message_item': showSpecialMessage && showCheck,
+      'special_message_items': !showCheck,
+    }" @click="clickMessage">
+      <div class="select-item" v-if="showCheckFlag && showCheck">
+        <div class="check-box" :class="{ 'checked': getFlag }"></div>
+      </div>
+      <component :readDeleteMsg="readDeleteMsg" :source="source" :index="index" :is="getRenderComp"></component>
+    </div>
+    <div v-if="getTimeLine(source, storeHistoryMessageList[index - 1])" class="time_gap_line">
+      {{ getTimeLine(source, storeHistoryMessageList[index - 1]) }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getChatTimeline } from '@/utils/tools'
+import { storeToRefs } from 'pinia'
+import TextMessageRenderer from "./TextMessageRenderer.vue";
+import RedCardRenderer from "./RedCardRenderer.vue";
+import GroupInfoRenderer from "./GroupInfoRenderer.vue";
+import MediaMessageRenderer from "./MediaMessageRenderer.vue";
+import CatchMsgRenderer from "./CatchMsgRenderer.vue";
+import { AllowType, MessageType, SessionType } from "@/utils/constant";
+import { useUserStore } from "@/stores/user";
+import { useMessageIsRead } from "./useMessageIsRead";
+import { useContactStore } from "@/stores/modules/contact";
+import { watchEffect } from 'vue';
+import { useMessageStore } from '@/stores/modules/message';
+import { LogJump } from '@/components/index'
+
+// import MessageSendState from './MessageSendState.vue'
+
+const userStore = useUserStore();
+const { setGroupChatConfig } = userStore;
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const messageStore = useMessageStore();
+const { updateCheckConcat } = messageStore;
+const { storeHistoryMessageList, checkedConcat } = storeToRefs(messageStore);
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => { }
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  readDeleteMsg: {
+    type: Object,
+    default: () => { }
+  }
+  // showCheck: {
+  //   type: Boolean,
+  //   default: false
+  // }
+});
+
+const { source,readDeleteMsg } = toRefs(props);
+const messageContainerRef = ref();
+const arr1 = ref([1501, 1504, 1507, 1508, 1509, 1510, 1511, 1512, 1513, 1514, 1515, 1519, 1520, 2101])
+
+const isSing = computed(() => groupChatConfig.value.conversationType === SessionType.Single);
+const showCheck = computed(() => groupChatConfig.value.showCheck === true);
+const isSelfMsg = computed(() => userInfo.value.userID === source?.value?.sendID);
+const groupAnnounceData = computed(() => {
+  let detail
+  if (props.source.contentType === MessageType.GroupAnnouncementUpdated) {
+    try {
+      detail = JSON.parse(props.source?.notificationElem?.detail)
+    } catch (e) {
+    }
+  }
+  return {
+    notification: detail?.group?.notification,
+    opUser: detail?.opUser
+  }
+})
+const showSpecialMessage = computed(() => {
+  if (props.source.contentType === 110) {
+    if (JSON.parse(props.source.customElem.data).customType === 1005) {
+      return true
+    }
+  } else {
+    return false
+  }
+})
+const showCheckFlag = computed(() => {
+  if (arr1.value.includes(props.source.contentType)) {
+    return false
+  } else if (props.source.contentType === 110) {
+    if (JSON.parse(props.source.customElem.data).customType === 1006 
+    || JSON.parse(props.source.customElem.data).customType === 1005 || 
+    JSON.parse(props.source.customElem.data).customType === 1004) {
+      return false
+    } else {
+      return true
+    }
+  } else {
+    return true
+  }
+})
+const getCurrentMsg = (val) => {
+  return JSON.parse(val.customElem.data)
+}
+const getRenderComp = computed(() => {
+  const arr = [101, 102, 103, 104, 105, 114, 106]
+  if (arr.includes(props.source.contentType)) {
+    return TextMessageRenderer;
+  } else if (arr1.value.includes(props.source.contentType)) {
+    return GroupInfoRenderer;
+  } else if (props.source.contentType === 110) {
+    if (getCurrentMsg(props.source).customType === 1005) {
+      return TextMessageRenderer;
+    } else if (getCurrentMsg(props.source).customType === 1003 || getCurrentMsg(props.source).customType === 1004) {
+      return RedCardRenderer;
+    } else if (getCurrentMsg(props.source).customType === 1006) {
+      return GroupInfoRenderer;
+    } else if (getCurrentMsg(props.source).customType === 1100) {
+      return TextMessageRenderer; // 转发聊天记录
+    } else {
+      return GroupInfoRenderer
+    }
+  } else {
+    return CatchMsgRenderer;
+  }
+})
+
+useMessageIsRead({
+  messageContainerRef,
+  isSelfMsg,
+  isRead: props.source?.isRead,
+  isPreView: props.isPreView,
+  isGroupAnnounce: !!groupAnnounceData.value.notification,
+  clientMsgID: props.source?.clientMsgID,
+});
+const getFlag = computed(() => {
+  const index = checkedConcat.value.findIndex((item) => item.clientMsgID === props.source.clientMsgID)
+  if (index > -1) {
+    return true
+  } else {
+    return false
+  }
+})
+const clickMessage = () => {
+  const idx = checkedConcat.value.findIndex((item) => item.clientMsgID === props.source.clientMsgID)
+  if (idx > -1) {
+    checkedConcat.value.splice(idx, 1)
+  } else {
+    checkedConcat.value.push(props.source)
+  }
+}
+// 消息列表超过5分钟则显示时间
+const getTimeLine = computed(() => {
+  return (message, preMessage) => {
+    if (!message || !preMessage) {
+      return false; // 如果没有传入有效的 message 或 preMessage，直接返回 false
+    }
+    // const arr1 = [1501, 1504, 1507, 1508, 1509, 1510, 1511, 1512, 1513, 1514, 1515, 1519, 1520, 2101]
+    // if (arr1.includes(props.source.contentType)) {
+    //   return null;
+    // }
+    // if (props.source.contentType === 110) {
+    //   if (getCurrentMsg(props.source).customType === 1006) {
+    //     return null;
+    //   }
+    // }
+    const sendTime = message.sendTime;
+    const preSendTime = preMessage?.sendTime || 0;
+    if (sendTime - preSendTime > 5 * 60 * 1000) {
+      return getChatTimeline(sendTime);
+    }
+    return null;
+  };
+});
+
+
+</script>
+
+<style lang="less" scoped>
+.time_gap_line {
+  display: flex;
+  justify-content: center;
+  color: #76767a;
+  font-size: 0.75rem;
+  margin: 8px 0;
+}
+.chatBox_content {
+  height: 100%;
+  padding: 0 12px;
+  overflow-y: auto;
+}
+
+.message_item {
+  display: flex;
+  align-items: center;
+  padding: 12px 22px;
+  color: #333;
+  min-height: 40px;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+
+  .check_wrap {
+    min-width: 20px;
+    margin-top: 10px;
+    margin-right: 12px;
+  }
+
+  .need_bg {
+    padding: 10px 12px;
+    border-radius: 6px;
+    background-color: #F4F5F7;
+  }
+
+  .message_container_wrap {
+    display: flex;
+  }
+
+  .message_container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 12px;
+    max-width: 80%;
+    position: relative;
+
+    .message_content_wrap {
+      position: relative;
+    }
+
+    .time_line {
+      font-size: 0.75rem;
+      color: #999;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 100%)
+    }
+
+  }
+
+  &_self {
+    display: flex;
+    color: white;
+    font-size: 1rem;
+    font-weight: 400;
+    width: 100%;
+    position: relative;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .van-checkbox {
+      margin: 10px 10px 0 0;
+      overflow: initial;
+    }
+
+    .check_wrap {
+      margin-right: 0;
+      margin-left: 12px;
+    }
+
+    .need_bg {
+      border-radius: 6px;
+      background-color: #CCE7FE;
+    }
+
+    .message_container_wrap {
+      flex-direction: row-reverse;
+    }
+
+    .message_container {
+      margin-left: 0;
+      margin-right: 12px;
+      align-items: flex-end;
+    }
+  }
+
+  &_selfs {
+    justify-content: space-between;
+    // 20245-29 单选不居中问题
+    align-items: center;
+  }
+
+  &_checked {
+    align-items: flex-start;
+    padding: 12px;
+  }
+
+  &_active {
+    background-color: rgba(32, 107, 237, 0.2);
+    animation: fadeOut 3s forwards;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    background-color: rgba(32, 107, 237, 0.2);
+  }
+
+  to {
+    background-color: transparent;
+  }
+}
+
+.active_message_item_self {
+  justify-content: center;
+}
+
+.special_message_item {
+  justify-content: flex-end;
+}
+
+.special_message_items {
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: initial;
+}
+
+.select-item {
+  width: 16px;
+  margin-right: 12px;
+
+  .check-box {
+    width: 16px;
+    height: 16px;
+    border: 1px solid #D1D1D3;
+    border-radius: 50%;
+
+    &.checked {
+      border-color: var(--c-blue-color);
+      background: var(--c-blue-color) url(@/assets/group-check.svg) no-repeat center / cover;
+    }
+  }
+}
+
+.message_item_self:empty{
+  & + div {
+    display: none;
+  }
+}
+
+.message-item-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+}
+</style>
diff --git a/src/views/dialogue/groupChat/MessageItem/useMessageIsRead.js b/src/views/dialogue/groupChat/MessageItem/useMessageIsRead.js
new file mode 100644
index 0000000..6ef9ae8
--- /dev/null
+++ b/src/views/dialogue/groupChat/MessageItem/useMessageIsRead.js
@@ -0,0 +1,52 @@
+import { useMessageStore } from "@/stores/modules/message";
+import { getSDK } from '@/utils/openIM'
+import { useIntersectionObserver } from "@vueuse/core";
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user.js";
+
+export function useMessageIsRead({
+  messageContainerRef,
+  isSelfMsg,
+  isRead,
+  isPreView,
+  isGroupAnnounce,
+  clientMsgID,
+}) {
+  const IMSDK = getSDK()
+  const userStore = useUserStore();
+  const { groupChatConfig  } = storeToRefs(userStore);
+  const messageStore = useMessageStore();
+
+  const markC2CAsRead = () => {
+    IMSDK.markMessagesAsReadByMsgID({
+      conversationID: groupChatConfig.value.conversationID,
+      clientMsgIDList: [clientMsgID],
+    });
+    messageStore.updateOneMessage({
+      clientMsgID,
+      isRead: true,
+      isAppend: false,
+    });
+  };
+
+  const getMessageVisible = () => {
+    if (isRead || isPreView || isGroupAnnounce) {
+      return;
+    }
+
+    const { stop } = useIntersectionObserver(
+      messageContainerRef,
+      ([{ isIntersecting }], observerElement) => {
+        if (isIntersecting) {
+          markC2CAsRead();
+          stop();
+        }
+      }
+    );
+  };
+
+  onMounted(() => {
+    getMessageVisible();
+  });
+}
diff --git a/src/views/dialogue/groupChat/chartFooter.vue b/src/views/dialogue/groupChat/chartFooter.vue
new file mode 100644
index 0000000..c8c751c
--- /dev/null
+++ b/src/views/dialogue/groupChat/chartFooter.vue
@@ -0,0 +1,2228 @@
+<template>
+  <!--群聊-底部消息输入-->
+  <div class="privateChat_footer" ref="privateChat_footer">
+    <!-- 不是发送语音及禁言显示 -->
+    <div
+      class="container"
+      v-if="
+        !isShow_recorder &&
+          !isMute &&
+          isInGroupchat &&
+          !groupChatConfig.showCheck
+      "
+    >
+      <van-field 
+          v-model.trim="msg_info.textElem.content"  ref="inputRef" rows="1" :autosize="{ maxHeight: 160, minHeight: 30 }" label=""
+          type="textarea" 
+          :placeholder="pc_or_mobile_flag?'':`${windows_or_mac==1?$t('enterAndCtrl'):$t('enterAndCtrlIOS')}`" 
+          class="msg_txt" 
+          id="groupSendInput"
+          @input="handleFieldInput"
+          @keydown="handle_send_message_keyDown">
+              <template #left-icon>
+                <div class="icon_recording" @click="recorder_open">
+                  <img src="@/assets/img/msg_recording.svg" alt="">
+                </div>
+              </template>
+      </van-field>
+      <van-icon name="smile-o" @click="handle_switch_emoji" />
+      <img
+        class="icon_send"
+        @click="handle_send_message(msg_info)"
+        src="@/assets/img/msg_Vector.svg"
+        alt=""
+        v-if="msg_info.textElem.content.length"
+      />
+      <van-icon name="add-o" v-else @click="handle_switch_media" />
+    </div>
+    <!--录音-->
+    <div class="recorder" v-else-if="isShow_recorder">
+      <img
+        src="@/assets/img/msg_delete_blue.svg"
+        alt=""
+        @click="recorder_delete"
+      />
+      <div ref="recorder_wave" class="recorder_wave"></div>
+      <img src="@/assets/img/msg_Vector.svg" alt="" @click="recorder_send" />
+    </div>
+    <emoji
+      :msg="msg_info"
+      v-if="isShow_emoji"
+      @closeEmojiselect="isShow_emoji = false"
+      
+    ></emoji>
+    <MsgMedia
+      v-if="isShow_media"
+      @closeActionBar="isShow_media = false"
+      @handle_send_message="handle_send_message_media"
+      @handle_send_message_video="handle_send_message_video"
+      @handle_send_file="handle_send_files"
+      :msg="msg_info"
+    />
+    <!--引用消息-->
+    <div class="msgQuote" v-if="popoverObj && popoverObj.isShow_msgQuote">
+      <div class="left">
+        {{ popoverObj.msg_info.quoteElem.quoteMessage.senderNickname }}
+      </div>
+      <div><span>:</span></div>
+      <div class="center">
+        <span
+          v-if="popoverObj.msg_info.quoteElem?.quoteMessage.contentType === 101"
+          >{{
+            popoverObj.msg_info.quoteElem.quoteMessage.textElem.content
+          }}</span
+        >
+        <span
+          v-if="popoverObj.msg_info.quoteElem?.quoteMessage.contentType === 106"
+          >{{
+            popoverObj.msg_info.quoteElem.quoteMessage.atTextElem.text
+          }}</span
+        >
+        <span
+          v-if="popoverObj.msg_info.quoteElem?.quoteMessage.contentType === 102"
+          >{{ $t("cvPicture") }}</span
+        >
+        <span
+          v-if="popoverObj.msg_info.quoteElem?.quoteMessage.contentType === 104"
+          >{{ $t("cvVideo") }}</span
+        >
+        <span
+          v-if="popoverObj.msg_info.quoteElem?.quoteMessage.contentType === 103"
+          >{{ $t("cvVoice") }}</span
+        >
+        <span v-if="popoverObj.msg_info.quoteElem.quoteMessage.contentType === 105">{{$t("cvFile")}}
+            {{ popoverObj.msg_info.quoteElem.quoteMessage.fileElem.fileName }}</span>
+      </div>
+      <div class="right">
+        <van-icon name="close" @click="handle_reset" />
+      </div>
+    </div>
+    <!--禁言层-->
+    <div
+      class="prohibition"
+      v-else-if="isInGroupchat && isMute && !groupChatConfig.showCheck"
+    >
+      <span v-if="groupInfo.status === 3"
+        ><img src="@/assets/svg/Union.svg" alt="" />{{
+          $t("groupMuteing")
+        }}</span
+      >
+      <span v-if="groupInfo.status !== 3">
+        <img src="@/assets/svg/Union.svg" alt="" />
+        <span style="margin:4px 5px 0 0">{{
+          formatsTimestamp(myGroupInfo.muteEndTime)
+        }}</span>
+        {{ $t("muteLate") }}</span
+      >
+    </div>
+    <!--已退出群聊底部层-->
+    <div
+      class="prohibition"
+      v-else-if="!isInGroupchat && !isMute && !groupChatConfig.showCheck"
+    >
+      <span
+        ><img src="@/assets/svg/Union.svg" alt="" />{{
+          $t("exit_group_tip")
+        }}</span
+      >
+    </div>
+    <div v-if="groupChatConfig.showCheck" class="forward">
+      <div class="share" @click="handleShare" v-if="isTransmitSend">
+        <img src="@/assets/svg/share.svg" alt="" />
+      </div>
+      <div class="delete" @click="handleDelete">
+        <img src="@/assets/svg/delete.svg" alt="" />
+      </div>
+    </div>
+    <!-- 艾特弹层 -->
+    <chart-artuser
+      :showBottom="artPopupShow"
+      :maxSelectNum="maxAtNum"
+      @close="closeArtpop"
+    ></chart-artuser>
+    <van-action-sheet
+      v-model:show="showFoward"
+      :actions="actionsFoward"
+      :cancel-text="$t('cancel')"
+      close-on-click-action
+      @cancel="handleCancel"
+      @select="selectFoward"
+    />
+    <van-dialog className="custom-dialog" v-model:show="fowardVisible" title="">
+      <template #default>
+        <div class="content">
+          <div class="title">{{ $t("hiddenMsg") }}</div>
+          <div class="contents">{{ $t("hiddenMsgTip") }}</div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleConfirm('no')">{{
+            $t("no")
+          }}</van-button>
+          <div class="line"></div>
+          <van-button
+            class="btn btn1"
+            type="default"
+            @click="handleConfirm('yes')"
+            >{{ $t("yes") }}</van-button
+          >
+        </div>
+      </template>
+    </van-dialog>
+    <!--删除消息提示-->
+    <AppPopup v-model:show="isShow_msg_delete">
+      <div class="popup_select">
+        <div class="popup_select_cell" @click="handle_delete_msg">
+          {{ $t("cvdeleteLocal")}}
+        </div>
+        <div
+          v-if="showDeleteLocal"
+          class="popup_select_cell"
+          @click="handle_delete_msg(false)"
+        >
+          {{ $t("cvdeleteLocalAndServer") }}
+        </div>
+      </div>
+    </AppPopup>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import {
+  onActivated,
+  ref,
+  reactive,
+  inject,
+  onUpdated,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+  computed,
+  watch,
+  defineExpose,
+  defineProps,
+  watchEffect
+} from "vue";
+import recorder from "@/views/dialogue/privateChat/components/recorder.js";
+import emoji from "@/views/dialogue/privateChat/components/emoji.vue";
+import MsgMedia from "@/views/dialogue/groupChat/components/media.vue";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user.js";
+import { useContactStore } from "@/stores/contact.js";
+import { showToast, showLoadingToast, showFailToast, showConfirmDialog } from "vant";
+import { useI18n } from "vue-i18n";
+import {
+  formatsTimestamp,
+  parseMsg,
+  replaceStringWithValues
+} from "@/utils/tools";
+import { useMessageStore } from "@/stores/modules/message";
+import CustomEdit from "@/components/CustomEdit/index.vue";
+import { checkIsSafari, handle_Prohibition_time } from "@/utils/index";
+import emitter from "@/utils/events";
+import chartArtuser from "./components/chartArtuser.vue";
+import { useRouter,useRoute } from "vue-router";
+import { AppPopup } from "@/components/index.js";
+import { getPicInfo, canDeleteFromServer } from "@/utils/common";
+import { base64toFile, createFileMessage } from "@/utils/sendMessage.js";
+import { formatFileSize,fileErrorsToast,fileIcon,groupChatFileMap } from "@/utils/fileUtils";
+import { checkMessage } from "@/utils/chatRule";
+import usePasteImg from '@/use/usePasteImg'
+import { CustomMessageType } from "@/utils/constant";
+const networkOnline = inject('networkOnline')
+const props = defineProps({
+  onload: Boolean,
+})
+const emits = defineEmits(['getLoadingPopupStatus'])
+const router = useRouter();
+const route = useRoute();
+const fowardVisible = ref(false);
+const showFoward = ref(false);
+const inputRef = ref();
+const atUserNames = ref([])
+const messageStore = useMessageStore();
+const { closeQuoteObj, updateCheckConcat,getNewsMessageListData } = messageStore;
+const {
+  storeHistoryMessageList,
+  storeHistoryMessageHasMore,
+  quoteObj,
+  checkedConcat,
+  state
+} = storeToRefs(messageStore);
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { groupInfo, groupMemberInfo, contactList, groupMemberLoading, myGroupInfo } = storeToRefs(contactStore);
+const IMSDK = getSDK();
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { userInfo, groupChatConfig, appConfig } = storeToRefs(userStore);
+const privateChat_footer = ref();
+const user_info_send = {
+  nickName: userInfo.value.nickname,
+  userID: userInfo.value.userID
+};
+const actionsFoward = reactive([
+  { name: t("singleShareMsg"), color: "" },
+  { name: t("groupShareMsg"), color: "" }
+]);
+const user_info_recv = reactive({
+  online: true,
+  nickName: "",
+  userID: userInfo.value.userID,
+  faceURL: ""
+});
+
+// popover组件传递的属性
+const popoverObj = computed(
+  () => quoteObj.value[groupChatConfig.value.groupID]
+);
+//消息主体UI-对应显示类型
+const msg_mainstay_type = reactive([101, 102, 103, 104, 106, 114, 1519]);
+//消息删除弹窗显示控制
+const isShow_msg_delete = ref(false);
+//语音初始化
+const REC = recorder();
+//语音显示
+const isShow_recorder = ref(false);
+//是否展示表情包
+const isShow_emoji = ref(false);
+//是否展示更多信息
+const isShow_media = ref(false);
+//创建消息体 字段描述地址： https://docs.openim.io/zh-Hans/sdks/class/message/messageInfo
+const create_msg_info = () => ({
+  //1 单聊 3群聊 4通知
+  sessionType: "",
+  faceURL: "",
+  clientMsgID: "1",
+  sendTime: "",
+  sendID: user_info_send.userID,
+  recvID: user_info_recv.userID,
+  senderFaceUrl: "", //发送头像
+  isRead: false,
+  isLoading: true,
+  isSend: true, //是否发送成功
+  contentType: 101, // 101文本 102图片 104视频 301时间(自定义)
+  showPopover: false, //每个消息选项显示
+  senderNickname: userInfo.value.nickname,
+  status: 1, //消息状态 1 发送中 2成功 3失败
+  textElem: {
+    content: ""
+  },
+  videoElem: {
+    videoUrl: ""
+  },
+  pictureElem: {
+    sourcePath: "",
+    sourcePicture: {
+      url: ""
+    },
+    bigPicture: "",
+    snapshotPicture: ""
+  },
+  soundElem: {
+    sourceUrl: "",
+    duration: 0
+  },
+  quoteElem: {
+    text: "",
+    quoteMessage: {
+      contentType: 0,
+      senderNickname: ""
+    }
+  }, //引用消息
+  exMap: {
+    showTime: false
+  }
+});
+
+const MAX_AT_NUM_ONCE = 10
+const maxAtNum = computed(() => MAX_AT_NUM_ONCE - artUserList.value.length)
+
+//消息内容
+let msg_info = reactive(create_msg_info());
+//开始录制
+const recorder_open = () => {
+  if (isShow_emoji.value) {
+    isShow_emoji.value = false;
+  }
+  if (isShow_media.value) {
+    isShow_media.value = false;
+  }
+  isShow_recorder.value = true;
+  REC.open(
+    async () => {
+      console.log("录音已打开");
+      //创建音频可视化图形绘制对象
+      REC.start();
+      const el = document.querySelector(".recorder_wave");
+      el.appendChild(REC.wave.canvas);
+    },
+    (msg, isUserNotAllow) => {
+      //用户拒绝了录音权限，或者浏览器不支持录音
+      console.log(
+        (isUserNotAllow ? "UserNotAllow，" : "") + t("unRecard") + msg
+      );
+      showToast((isUserNotAllow ? "UserNotAllow，" : "") + t("unRecard") + msg);
+    }
+  );
+};
+//删除 语音
+const recorder_delete = () => {
+  isShow_recorder.value = false;
+  REC.stop(
+    (blob, duration) => {
+      //blob就是我们要的录音文件对象，可以上传，或者本地播放
+      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
+      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+
+      console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+      msg_info.file = new File([blob], IMSDK.createuuid() + ".mp3", {
+        type: blob.type
+      });
+      msg_info.file.duration = duration;
+    },
+    err => {
+      console.error("结束录音出错：" + err);
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    }
+  );
+};
+//发送语音消息
+const recorder_send = () => {
+  isShow_recorder.value = false;
+  REC.stop(
+    (blob, duration) => {
+      //blob就是我们要的录音文件对象，可以上传，或者本地播放
+      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
+      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+
+      console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+      // const burnStatus = appConfig.value?.burn_after_reading?.group_chat?.status
+      // const min = appConfig.value?.burn_after_reading?.group_chat?.speech_quality?.min
+      // const max = appConfig.value?.burn_after_reading?.group_chat?.speech_quality?.max
+      // if (burnStatus === 1 && (duration > max * 1000 || duration < min * 1000)) {
+      //   showToast({ message: replaceStringWithValues(t("voiceSendErrTip1"), min, max), position: "top" });
+      //   return
+      // }
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+      msg_info.file = new File([blob], IMSDK.createuuid() + ".mp3", {
+        type: blob.type
+      });
+      msg_info.contentType = 103;
+      msg_info.file.duration = msg_info.soundElem.duration = Math.floor(
+        duration / 1000
+      );
+      handle_send_message(msg_info);
+    },
+    err => {
+      console.error("结束录音出错：" + err);
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    }
+  );
+};
+// 抽离 判断isMute 方法
+const isMuteFn = () => {
+  let flag = false;
+  if (groupChatConfig.value.ownerUserID === userInfo.value.userID) {
+    return false;
+  }
+  // 如果查不到群成员消息，则表明人不在群聊中
+  if (
+    Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) &&
+    groupMemberInfo.value[groupChatConfig.value.groupID].length > 0
+  ) {
+    if (
+      groupChatConfig.value.status == 3 &&
+      myGroupInfo.value.roleLevel !== 60 &&
+      myGroupInfo.value.roleLevel !== 100
+    ) {
+      return true;
+    } else if (myGroupInfo.value.muteEndTime !== 0 && myGroupInfo.value.muteEndTime !== undefined) {
+      const currentDate = new Date();
+      console.log(`time`, currentDate.getTime());
+      if (myGroupInfo.value.muteEndTime < currentDate.getTime()) {
+        return false;
+      }
+      return true;
+    }
+  } else {
+    return false;
+  }
+};
+// 获取正在发送中的文件 【当前会话还在上传的文件消息】
+// const handleUploadingFileMessages = () => {
+//   let resFile = [];
+//   for (const [_, value] of groupChatFileMap) {
+//     if (value.conversationID === groupChatConfig.value.conversationID) {
+//       resFile = []
+//       resFile.push(value);
+//     }
+//   }
+//   // 当前会话还在上传的文件消息
+//   if (resFile.length) {
+//     resFile.forEach((item) => {
+//       const index = storeHistoryMessageList.value.findIndex(
+//         (msg) => msg.clientMsgID === item.clientMsgID
+//       );
+//       if (index === -1) {
+//         if (item.messageItem.filePercentage < 100) {
+//           // 增加文件进度，但不超过 100
+//           item.messageItem.filePercentage = Math.min(item.messageItem.filePercentage + 10, 100);
+//         }
+//         storeHistoryMessageList.value.push(item.messageItem);
+//       }
+//       startFileProgressInterval(storeHistoryMessageList.value.length - 1, item.signal, item.fileObj);
+//       setTimeout(() => emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", true));
+//     });
+//   }
+//   console.error('群聊：上次没上传完的文件消息>>', resFile);
+// };
+let currenDateTime2 = ref(new Date());
+let currentDateTime = ref();
+const currentConversationID = ref('')
+const userFlag = ref(false)
+onMounted(async() => {
+  handleResize()
+  window.addEventListener('resize', handleResize);
+  // 每隔一秒更新时间戳
+  currentDateTime.value = setInterval(() => {
+    currenDateTime2.value = new Date();
+  }, 1000);
+  currentConversationID.value = groupChatConfig.value.conversationID
+  if (groupChatConfig.value.draftText) {
+    msg_info.textElem.content = groupChatConfig.value.draftText
+  }
+  if(!userInfo.value.userID)return
+  const { data } = await IMSDK.getSpecifiedGroupMembersInfo({
+    groupID:groupChatConfig.value.groupID,
+    userIDList: [userInfo.value.userID],
+  });
+  userFlag.value = data&&data[0]?true:false
+});
+
+watchEffect(()=>{
+  // 等待父组件的接口都加载完之后在执行定时器
+  if (props.onload) {
+    // 群聊：获取上次没执行完的消息=继续执行操作
+    // handleUploadingFileMessages()
+  }
+})
+
+watch(
+  () => currenDateTime2.value,
+  (val, oldVal) => {
+    isMute.value = isMuteFn();
+  }
+);
+watch(
+  () => msg_info.textElem.content,
+  (val, oldVal) => {
+    // 清掉输入框内容
+    if (val === '' && oldVal !== '') {
+      artUserList.value = []
+      atUserNames.value = []
+    }
+  }
+);
+onBeforeUnmount(() => {
+  clearInterval(currentDateTime.value);
+  IMSDK.setConversationDraft({
+    conversationID: currentConversationID.value,
+    draftText: msg_info.textElem.content,
+  });
+});
+onUnmounted(() => {
+  clearInterval(currentDateTime.value);
+  window.removeEventListener('resize', handleResize);
+  emitter.off('cancelGroupChatFile',handeCloseFile)
+});
+// 判断当前用户是否禁言
+const isMute = ref();
+
+
+// 判断自己是否在群聊中
+const isInGroupchat = computed(() => {
+  // if (
+  //   Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) &&
+  //   groupMemberInfo.value[groupChatConfig.value.groupID].length > 0 && groupMemberLoading.value === false
+  // ) {
+  //   return true;
+  // } else {
+  //   return false;
+  // }
+  return userFlag.value
+});
+
+//处理表情与媒体切换
+const handle_switch_emoji = val => {
+  isShow_emoji.value = !isShow_emoji.value;
+  isShow_media.value = false;
+};
+const handle_switch_media = () => {
+  isShow_media.value = !isShow_media.value;
+  isShow_emoji.value = false;
+};
+//失去焦点 重置显示
+const handle_reset = () => {
+  isShow_emoji.value = false;
+  isShow_media.value = false;
+  // 储存控制引用弹窗组件
+  closeQuoteObj(groupInfo.value.groupID);
+};
+const resetMsgInfo = () => {
+  // 重置该对象
+  const resetMsgInfo = create_msg_info();
+  Object.keys(resetMsgInfo).forEach(key => {
+    if (msg_info[key]) {
+      msg_info[key] = resetMsgInfo[key];
+    } else {
+      delete msg_info[key];
+    }
+  });
+};
+
+const windows_or_mac = ref(1);//false--windows系统；true--mac系统
+const pc_or_mobile_flag = ref(false)
+//如果是pc端，需要提示按钮作用，pc端需要区分是window还是mac
+//如果是手机端，需要在输入框有值时，需要将文件选择功能变成发送按钮
+function handleResize() {
+  pc_or_mobile_flag.value = pc_or_mobile()
+  checkOS()
+}
+
+function pc_or_mobile(){
+  const userAgent = navigator.userAgent;
+  const mobileKeywords = [
+    "Android",
+    "webOS",
+    "iPhone",
+    "iPad",
+    "iPod",
+    "BlackBerry",
+    "Windows Phone"
+  ];
+  for (let i = 0; i < mobileKeywords.length; i++) {
+    if (userAgent.indexOf(mobileKeywords[i]) > -1) {
+      return true;
+    }
+  }
+  return false;
+}
+/**
+ * 判断是mac还是win
+ */
+function checkOS() {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const isWindows = userAgent.toLowerCase().indexOf('win') > -1;
+    if(isWindows)return windows_or_mac.value = 1
+    const isMacOS = userAgent.toLowerCase().indexOf('mac') > -1;
+    windows_or_mac.value = 2
+}
+const currentEvent = ref()
+const editorRef = ref()
+const cursorPosition = ref(0)
+const handleFieldInput = e => {
+  // console.log('光标::', e.target.selectionStart, msg_info.textElem.content.length)
+  // cursorPosition.value = e.target.selectionStart
+  if(e.data == "@") {
+    tryToAtPage()
+  }
+}
+/**
+ * 输入框组合键换行，空格键发送功能
+ * @param event 
+ */
+const handle_send_message_keyDown = (event) => {
+  const keyCode = event.keyCode || event.which || event.charCode;
+  if(keyCode===8){
+    //表示用户正在删除输入框的内容
+    cursorPosition.value = event.target.selectionStart
+    deleteMsg()
+    return 
+  }
+  // if(event.shiftKey&&event.key=="@"){
+  //   return tryToAtPage()
+  // }
+  //组合键 Enter+Ctrl或者Enter+Alt进行换行
+  if((event.ctrlKey||event.altKey)&&keyCode === 13){
+    currentEvent.value = event.target 
+    const cursorPosition = currentEvent.value.selectionStart
+    // 拆分成两段文本
+    const textBeforeCursor = msg_info.textElem.content.slice(0, cursorPosition)
+    const textAfterCursor =msg_info.textElem.content.slice(cursorPosition)
+    // 合并为带有换行符的新文本
+    const newText = textBeforeCursor + '\n' + textAfterCursor 
+    // 更新输入框的值
+    msg_info.textElem.content = newText  
+    nextTick(() => {
+      // 设置光标位置为: start 和 end 相同，光标会移动到换行符后面的新行首
+      currentEvent.value.setSelectionRange(cursorPosition + 1, cursorPosition + 1)
+    })
+
+    return 
+  }
+  if (keyCode === 13&&!pc_or_mobile_flag.value ) {
+    event.preventDefault(); //阻止回车键默认行为，内容为空时，不允许按空格
+    if(!event.shiftKey && msg_info.textElem.content.length){
+      handle_send_message(msg_info)
+    }
+  }
+};
+/**
+ * 删除输入框的内容
+ */
+const deleteMsg = async () =>{
+  const latestHtml = msg_info.textElem.content.slice(0, cursorPosition.value)
+  const restTxt = msg_info.textElem.content.slice(cursorPosition.value)
+  const aIdx = latestHtml.lastIndexOf('@')
+  const userName = latestHtml.slice(aIdx)
+  console.log('最后保留的位数', cursorPosition.value, latestHtml, aIdx, userName)
+  const atUserIdx = atUserNames.value.map(item => item.trim()).lastIndexOf(userName)
+  // 表示正在删除 而且有@的
+  if (atUserIdx !== -1 && aIdx !== -1) {
+    // 构建正则表达式
+    const regex = new RegExp(`(${userName})(?!.*${userName})`);
+    // 使用 replace 方法去掉最后一个 
+    const replaceRes = msg_info.textElem.content.replace(regex, '')
+    console.log('msg_info.textElem.content-------', msg_info.textElem.content)
+    atUserNames.value.splice(atUserIdx, 1)
+    // 如果删到没有了，就把atuser中的数据删掉
+    if (!atUserNames.value.map(item => item.trim()).includes(userName)) {
+      artUserList.value = artUserList.value.filter(item => item.showName.trim() !== userName)
+    }
+    await nextTick()
+    console.log('replaceRes>>', replaceRes)
+    msg_info.textElem.content = replaceRes
+    // 将光标设置到文本末尾
+    setTimeout(() => {
+      document.querySelector('#groupSendInput').value = replaceRes
+      msg_info.textElem.content = replaceRes
+      inputRef.value.selectionStart = inputRef.value.selectionEnd = msg_info.textElem.content.length;
+    }, 200)
+    console.log('msg_info.textElem.content', msg_info.textElem.content, artUserList.value, atUserNames.value)
+    // msg_info.textElem.content = latestHtml.slice(0, aIdx==0?0:aIdx+1)
+  }
+}
+
+// 设置光标位置  这里是到最后
+const setRange = () => {
+  const range = document.createRange();
+  range.selectNodeContents(inputRef.value);
+  range.collapse(false);
+  let sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+usePasteImg({
+  targetId: 'groupSendInput',
+  parseOk: (url) => {
+    handleParseImg(url)
+  }
+})
+const tryToAtPage = () => {
+  if (artUserList.value.length >= MAX_AT_NUM_ONCE) {
+    showToast(`@最多 ${MAX_AT_NUM_ONCE} 人`);
+    return
+  }
+  artPopupShow.value = true;
+};
+// 艾特功能
+let artPopupShow = ref(false);
+const artUserList = ref([]);
+const transformText = val => {
+  let nickName = "";
+  const groupRemark = (JSON.parse(val.ex || '{}')?.remark?.value || '')
+  if (val.isFriend) {
+    nickName = val.remark || groupRemark || val.nickname;
+  } else {
+    nickName = groupRemark || val.groupNickname || val.nickname;
+  }
+  return nickName;
+};
+
+const revertTransformText = (val) => {
+  return artUserList.value.reduce((res, item) => res.replaceAll(item.showName.trim(), `@${item.userID}`), val)
+}
+// 群成员列表
+const closeArtpop = info => {
+  console.log("closeArtpop::", info);
+  artPopupShow.value = false;
+  // 多选最多选10个
+  if (info && Array.isArray(info)) {
+    msg_info.textElem.content += info
+      .map((item, index) => {
+        if (index == 0) {
+          return transformText(item) + " ";
+        } else {
+          return "@" + transformText(item) + " ";
+        }
+      })
+      .join("");
+    info.forEach(i => {
+      if(inputRef.value&&inputRef.value.addUserName){
+        inputRef.value?.addUserName(`@${transformText(i)}`)
+      }
+      addUserName(`@${transformText(i)} `)
+      artUserList.value.push({
+        ...i,
+        showName: `@${transformText(i)} `
+      });
+    });
+  } else if (info && info === t("everyone")) {
+    msg_info.textElem.content += info + " ";
+    if(inputRef.value&&inputRef.value.addUserName){
+      inputRef.value?.addUserName(`@${info}`)
+    }
+    addUserName(`@${info}`)
+    artUserList.value = groupMemberInfo.value[groupInfo.value.groupID].filter(
+      el => el.userID !== userInfo.value.userID
+    );
+  } else if (info) {
+    // 已经在at里面了就不重复加了, 处理一下从中间加的
+    msg_info.textElem.content = `${msg_info.textElem.content.slice(0, Math.max(cursorPosition.value - 1, 0))}${msg_info.textElem.content.slice(Math.max(cursorPosition.value - 1, 0))}${transformText(info)} `;
+    if(inputRef.value&&inputRef.value.addUserName){
+      inputRef.value?.addUserName(`@${transformText(info)}`)
+    }
+    addUserName(`@${transformText(info)}`)
+    // 已经在at里面了就不重复加了
+    if (!artUserList.value.find(item => item.userID === info.userID)) {
+      artUserList.value.push({
+        ...info,
+        showName: `@${transformText(info)} `
+      });
+    }
+  }
+
+  // 去掉重复选择的
+  artUserList.value = Object.values(Object.fromEntries(artUserList.value.map(item => ([item.userID, item]))))
+
+  if(inputRef.value&&inputRef.value.updateInnerHTML)inputRef.value.updateInnerHTML(msg_info.textElem.content);
+};
+/**
+ * 当@群成员时，将成员存储起来，后面如果删除的时候，删除一个就需要将整个@名称删除！
+ * @param name 
+ */
+const addUserName = (name) => {
+  // atUserNames.value = Array.from(new Set([...atUserNames.value, name]))
+  atUserNames.value.push(name)
+  console.error('获取数据----：',atUserNames.value)
+}
+/**
+ * 消息队列修饰处理-新增时间 判断本人
+ * @param {Array} msgList 消息列表
+ * @param {Number} interval 间隔时间毫秒 默认5分钟
+ * ***/
+const handle_msgList_change = (msgList, interval = 60000 * 5) => {
+  const msgList_new = [...msgList];
+  let time = msgList[0]?.createTime;
+  let i = 0;
+  msgList.forEach((msg, index) => {
+    //计算未读人数  -1 计算本人
+    if (msg.attachedInfoElem) {
+      msg.unreadCount =
+        msg.attachedInfoElem.groupHasReadInfo.groupMemberCount -
+        msg.attachedInfoElem.groupHasReadInfo.hasReadCount -
+        1;
+    }
+    if (msg.notificationElem) {
+      const detail = msg.notificationElem.detail;
+      if (detail.mutedUser) {
+        //处理禁言时间
+        detail.mutedSeconds = handle_Prohibition_time(detail.mutedSeconds);
+      }
+    }
+  });
+
+  return msgList_new;
+};
+
+const getImageEl = () => {
+  const imageEls = [...document.querySelectorAll(".image-el")];
+  imageEls.map(async el => {
+    const file = base64toFile(el.src);
+    const message = await createFileMessage(file);
+    await IMSDK.sendMessage({
+      groupID: "386190284",
+      message: message,
+      recvID: ""
+      // offlinePushInfo: createByData(msgItem['data'], false, groupInfo.value.groupName)
+    });
+  });
+};
+
+/**
+ * 处理消息发送
+ * @param  msg_info_new  消息结构体
+ * @param {boolean} repeat 是否二次发送
+ * @param {Number} currentIndex 当前索引，二次发送才有
+ * ***/
+
+// 发送没有发完的时候不能发第二条
+const msgSending = ref(false);
+const handle_send_message = async (
+  msg_info_new,
+  repeat = false,
+  currentIndex
+) => {
+  // 发言连续校验
+  let checkMessageRes = await checkMessage(storeHistoryMessageList.value,msg_info_new);
+  if (checkMessageRes.code === 101) {
+    await showConfirmDialog({
+      title: t("dialog_tip1"),
+      message: ('请勿重复多次发送相同内容'),
+      confirmButtonText: t('confirm'),
+      confirmButtonColor: "#5F97E3",
+      showCancelButton: false
+    });
+    isShow_emoji.value = false;
+    isShow_media.value = false;
+    resetMsgInfo()
+    if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+    atUserNames.value = []
+    closeQuoteObj(groupInfo.value.groupID);
+    return
+  }
+  if (msgSending.value) return;
+  msgSending.value = true;
+  // getImageEl();
+  // 判断是否为@消息
+  if (artUserList.value.length) {
+    if (msg_info_new.textElem.content.indexOf(`@${t("everyone")}`) === -1) {
+      artUserList.value = artUserList.value.filter(
+        el => msg_info_new.textElem.content.indexOf(`@${el.nickname}`) !== -1 || msg_info_new.textElem.content.indexOf(`@${el.remark}`) !== -1
+      );
+    }
+  }
+  if (artUserList.value.length) {
+    msg_info_new.contentType = 106;
+  }
+  //二次发送 跳过当前逻辑
+  if (!repeat) {
+    msg_info_new.createTime = new Date().getTime();
+    msg_info_new = Object.assign({}, msg_info_new);
+    // currentIndex = storeHistoryMessageList.value.length;
+    //跳转到底部
+
+    //解决回车键自动换行
+    setTimeout(() => {
+      msg_info.content = "";
+    }, 10);
+  }
+
+  try {
+    if (popoverObj.value && popoverObj.value.isShow_msgQuote) {
+      msg_info_new.contentType = 114;
+      msg_info_new.quoteElem = popoverObj.value.msg_info.quoteElem;
+    }
+      // console.log("网络连接错误", networkOnline.value);
+    const { data } = await send_msg(msg_info_new);
+    msgSending.value = false;
+    storeHistoryMessageList.value.push({
+      ...data,
+      retain: "retain"
+    });
+    const cloneList = JSON.parse(JSON.stringify(storeHistoryMessageList.value));
+    await nextTick();
+    if (!repeat) {
+      currentIndex = cloneList.length - 1;
+    }
+    // 最后一条消息更新已读数量
+    storeHistoryMessageList.value[currentIndex] = {
+      ...handle_msgList_change([data])[0],
+      // 这里 加一个需要留存的标志
+      retain: "retain"
+    };
+    setTimeout(() => emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false));
+  } catch (error) {
+    console.log("errCode:<<", error);
+    // 网络连接错误
+    if(!networkOnline.value) {
+      showToast("网络连接错误");
+    }
+    msgSending.value = false;
+    const { errCode } = error;
+    msg_info_new.status = 3;
+    // 1203 用户不在群组中
+    // 1204 群组已解散
+    if (
+      (errCode == 1203 || errCode == 1204) &&
+      null == groupInfo.value.groupID
+    ) {
+      // 群状态：0正常，1被封，2解散，3禁言
+      const status = groupInfo.value.status;
+      let customType = 0;
+      if (status === 2) {
+        customType = CustomMessageType.groupDisbanded;
+      } else {
+        customType = CustomMessageType.removedFromGroup;
+      }
+      const res = await IMSDK.createCustomMessage({
+        data: JSON.stringify({
+          // 定1303为不是好友场景
+          customType: customType,
+          data: {}
+        }),
+        extension: "",
+        description: ""
+      });
+      const message = {
+        ...res.data,
+        ...{ isRead: true },
+        ...{ status: 2 },
+        ...msg_info_new
+      };
+      storeHistoryMessageList.value.push(message);
+      IMSDK.insertGroupMessageToLocalStorage({
+        message: message,
+        groupID: groupInfo.value.groupID,
+        senderID: userInfo.value.userID
+      });
+      return;
+      // 1402 你已被禁言，不能在群里发言
+      // 1403 群已被禁言，不能发言
+    } else if (errCode === 1402 || errCode === 1403) {
+      //群禁言中或被禁言
+      showToast(t("cvSendMsgPnMute"));
+      return;
+    }
+    storeHistoryMessageList.value.push(msg_info_new);
+  }
+
+  isShow_emoji.value = false;
+  isShow_media.value = false;
+  resetMsgInfo();
+  if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+  atUserNames.value = []
+  closeQuoteObj(groupInfo.value.groupID);
+};
+
+const splitArray = (arr, size) => {
+  return arr.reduce((acc, cur, index) => {
+    const chunkIndex = Math.floor(index / size);
+    if (!acc[chunkIndex]) {
+      acc[chunkIndex] = []; // 初始化子数组
+    }
+    acc[chunkIndex].push(cur);
+    return acc;
+  }, []);
+}
+
+const handleParseImg = (base64url) => {
+  const fileObject = {
+    file: base64toFile(base64url),
+    content: base64url
+  }
+
+  handle_send_img(fileObject)
+}
+
+const checkAndSendImgTag = async (msg_info_new) => {
+  // 是否存在tag
+  const matchesUrls = (msg_info_new.textElem.content.match(/(<img[^>]*>)/g) || []).map(imgtag => (imgtag.match(/src=['"](.*?)['"]/) || [])[1]);
+  const urlList = matchesUrls.map(base64 => ({
+    file: base64toFile(base64),
+    content: base64,
+  }))
+
+  // 看看要不要限制并发，默认1
+  const limit = 1
+  const arr = splitArray(urlList, limit)
+
+  for (const files of arr) {
+    await Promise.all([...files.map(file => handle_send_img(file))])
+  }
+  const realText = msg_info_new.textElem.content.replace(/<img[^>]*>/g, '');
+  msg_info_new.textElem.content = realText
+  return !realText.length
+}
+
+// 单独发送图片处理
+// fileObject: { file: file对象, content: base64图片内容 }
+const handle_send_img = async (fileObject) => {
+  const { file } = fileObject
+  const { width, height } = await getPicInfo(fileObject.content);
+  const imgMsgItem = JSON.parse(JSON.stringify(msg_info))
+  // 这个是用来阅后即焚的
+  imgMsgItem.retain = 'retain'
+  imgMsgItem.pictureElem.sourcePicture = {
+    url: fileObject.content,
+    uuID: IMSDK.createuuid(),
+    width,
+    height
+  }
+  // 上传图片
+  const {
+    data: { url }
+  } = await IMSDK.uploadFile({
+    name: file.name,
+    contentType: file.type,
+    uuid: IMSDK.createuuid(),
+    file,
+    size: file.size
+  });
+  file.url = url;
+  const PictureInfo = {
+    uuID: IMSDK.createuuid(),
+    size: file.size,
+    type: file.type,
+    url: file.url,
+    width,
+    height
+  };
+  // 创建图片消息
+  const { data: imgMsgData } = await IMSDK.createImageMessageByFile({
+    sourcePicture: PictureInfo,
+    bigPicture: PictureInfo,
+    snapshotPicture: PictureInfo,
+    sourcePath: "",
+    file: file
+  })
+  // 创建完消息后， 把最新的一条加到记录中
+  const len = storeHistoryMessageList.value.push({
+    ...imgMsgItem,
+    ...imgMsgData,
+  });
+  setTimeout(() => emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false), 200);
+
+  const sendRes = await IMSDK.sendMessageNotOss({
+    groupID: groupInfo.value.groupID,
+    message: imgMsgData,
+    recvID: "",
+    offlinePushInfo: createByData(
+      imgMsgData,
+      false,
+      groupInfo.value.groupName
+    )
+  })
+  // 发送完成把最新的内容跟新到前面添加的列表
+  storeHistoryMessageList.value[len - 1] = {
+    ...handle_msgList_change([sendRes.data])[0],
+    // 这里 加一个需要留存的标志
+    retain: "retain"
+  };
+}
+
+let close_showLoadingToast = null
+/**
+ * 处理多张图片上传问题
+ * @param imgArrs  
+ */
+const handle_send_message_media = async (imgArrs) =>{
+  console.log('上传图片',imgArrs)
+  const {urlList,urlMsg} = imgArrs||{}
+  if(close_showLoadingToast)close_showLoadingToast.close()
+  if(urlList.length>0){
+    close_showLoadingToast =  showLoadingToast({
+      message: '加载中...',
+      forbidClick: true,
+      loadingType: 'spinner',
+      duration:0
+    });
+    //这是发送图片异步处理
+    urlList.forEach((item,index)=>{
+      urlMsg.file = item.file
+      let file = urlMsg.file
+      IMSDK.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: IMSDK.createuuid(),
+        file,
+        size: file.size
+      }).then(res=>{
+        const {data: { url }} = res||{}
+        file.url = url;
+        urlMsg.pictureElem.sourcePicture.url = url;
+        getPicInfo(file).then(imgRes=>{
+          const { width, height } =  imgRes||{}
+          const PictureInfo = {
+            uuID: IMSDK.createuuid(),
+            size: file.size,
+            type: file.type,
+            url: file.url,
+            width,
+            height
+          };
+          IMSDK.createImageMessageByFile({
+            sourcePicture: PictureInfo,
+            bigPicture: PictureInfo,
+            snapshotPicture: PictureInfo,
+            sourcePath: "",
+            file: file
+          }).then(async (msgItem)=>{
+            Object.assign(urlMsg, msgItem["data"]);
+            if (typeof msgItem["data"] === "string") {
+              console.warn("初始化数据错误为空:", urlMsg);
+            }
+            // 发言连续校验
+            let checkMessageRes = await checkMessage(storeHistoryMessageList.value,msgItem.data);
+            if (checkMessageRes.code === 101) {
+              close_showLoadingToast.close()
+              await showConfirmDialog({
+                title: t("dialog_tip1"),
+                message: ('请勿重复多次发送相同内容'),
+                confirmButtonText: t('confirm'),
+                confirmButtonColor: "#5F97E3",
+                showCancelButton: false
+              });
+              isShow_emoji.value = false;
+              isShow_media.value = false;
+              resetMsgInfo()
+              if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+              atUserNames.value = []
+              closeQuoteObj(groupInfo.value.groupID);
+              return
+            }
+            // 群聊閲後即焚
+            const burnStatus = appConfig.value?.burn_after_reading?.group_chat.status
+            const needBurn = burnStatus === 1;
+            // burnStatus为后台配置，为是否开启阅后即焚状态，burnTime为media组件选择时间后带过来的直接使用
+            if (needBurn && urlMsg.burnTime && urlMsg.burnTime !== 0) {
+              if (
+                urlMsg.contentType === 102 ||
+                urlMsg.contentType === 104
+              ) {
+                msgItem["data"]["ex"] = JSON.stringify({
+                  burn_msg: {
+                    read_delete_time: urlMsg.burnTime
+                  }
+                });
+              }
+            }
+            IMSDK.sendMessageNotOss({
+              groupID: groupInfo.value.groupID,
+              message: msgItem["data"],
+              recvID: "",
+              offlinePushInfo: createByData(
+                msgItem["data"],
+                false,
+                groupInfo.value.groupName
+              )
+            }).then( resData=>{
+              const {data} = resData||{}
+              msgSending.value = false
+              storeHistoryMessageList.value.push({
+                ...data,
+                retain: 'retain',
+              })
+              const cloneList = JSON.parse(JSON.stringify(storeHistoryMessageList.value))
+              emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false)
+              close_showLoadingToast.close()
+            }).catch(err=>{
+              close_showLoadingToast.close()
+            })
+          }).catch(err=>{
+            close_showLoadingToast.close()
+          })
+        }).catch(err=>{
+          close_showLoadingToast.close()
+        })
+      }).catch(err=>{
+        close_showLoadingToast.close()
+      })
+      
+    })
+  }
+  setTimeout(() => {
+    isShow_emoji.value = false;
+    isShow_media.value = false;
+    resetMsgInfo()
+    if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+    atUserNames.value = []
+    closeQuoteObj(groupInfo.value.groupID);
+  }, 0);
+}
+const groupChatFilesMsg = ref(); // 记录本地创建的消息体
+let filesToSend = 0; // 记录是否为最后一个文件
+let filesSent = 0; // 如果是最后一个文件则重新获取列表数据
+// 文件消息发送
+const handle_send_files = async (fileObj) => {
+  let FileData; // 将 FileData 变量声明在 try 块外部
+  try {
+    // 是否是文件类型
+    if (fileObj.contentType !== 105) {
+      return;
+    }
+    // 发言连续校验
+    let checkMessageRes = await checkMessage(storeHistoryMessageList.value,fileObj);
+    if (checkMessageRes.code === 101) {
+      await showConfirmDialog({
+        title: t("dialog_tip1"),
+        message: ('请勿重复多次发送相同内容'),
+        confirmButtonText: t('confirm'),
+        confirmButtonColor: "#5F97E3",
+        showCancelButton: false
+      });
+      isShow_emoji.value = false;
+      isShow_media.value = false;
+      resetMsgInfo()
+      if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+      atUserNames.value = []
+      closeQuoteObj(groupInfo.value.groupID);
+      return
+    }
+    // 如果文件名以.apk结尾，则修改文件名
+    if (fileObj.file.name.toLowerCase().endsWith(".apk")) {
+      const newName = fileObj.file.name.replace(".apk", ".apk1");
+      fileObj.file = new File([fileObj.file], newName, { type: fileObj.file.type });
+      console.error("文件名以.apk结尾，则修改文件名", fileObj.file);
+    }
+    // 创建 AbortController 实例
+    const controller = new AbortController();
+    const signal = controller.signal;
+    // 增加要发送的文件总数
+    filesToSend++;
+    // 创建文件消息并返回
+    FileData = await IMSDK.createFileMessageByFile({
+      filePath: fileObj.filePath,
+      fileName: fileObj.file.name,
+      uuid: IMSDK.createuuid(),
+      sourceUrl: '',
+      fileSize: fileObj.file.size,
+      fileType: fileObj.file.type,
+      file: fileObj.file,
+    });
+    if (FileData.data.contentType === 105) {
+      FileData.data.filePercentage = 0;
+      FileData.data.Filetext = "发送中";
+      FileData.data.showFile = true;
+    }
+    groupChatFileMap.set(FileData.data?.clientMsgID, {
+      controller,
+      clientMsgID: FileData.data?.clientMsgID,
+      conversationID: groupChatConfig.value.conversationID,
+      file: fileObj.file,
+      messageItem: FileData.data,
+    });
+    storeHistoryMessageList.value.push(FileData.data);
+    console.error('--群聊--groupChatFileMap---------',groupChatFileMap);
+    // 启动文件上传进度定时器
+    const index = storeHistoryMessageList.value.length - 1;
+    // 创建定时器并处理
+    startFileProgressInterval(index, signal, fileObj);
+    setTimeout(() => emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", true));
+    // 在发送消息之前检查是否已经取消
+    signal.addEventListener("abort", () => {
+      throw new Error('请求已被取消');
+    });
+    const { data } = await IMSDK.sendMessage({
+      recvID: '',
+      groupID: groupInfo.value.groupID,
+      message: FileData.data,
+      offlinePushInfo: createByData(FileData.data, false,groupInfo.value.groupName),
+    });
+    console.error('发送成功的数据',data);
+    // 更新文件状态而不是直接操作数组
+    const showFileIndex = storeHistoryMessageList.value.findIndex((item) => item.clientMsgID === FileData.data.clientMsgID);
+    console.error('群聊文件索引=======================', showFileIndex);
+    if (showFileIndex !== -1) {
+      // storeHistoryMessageList.value[showFileIndex].filePercentage = 100;
+      filesSent++;
+      setTimeout(() => {
+        console.error('群聊ssssssssssssssssssssssss');
+        storeHistoryMessageList.value[showFileIndex].filePercentage = undefined;
+        storeHistoryMessageList.value[showFileIndex].Filetext = '';
+        storeHistoryMessageList.value.splice(showFileIndex, 1);
+        storeHistoryMessageList.value.push(data);
+        groupChatFileMap.delete(FileData.data.clientMsgID);
+        // 检查是否为最后一个文件
+        if (filesSent === filesToSend) {
+          console.error('检查是否为最后一个文件');
+          get_session_data();
+        }
+      }, 500);
+    } else {
+      // showFailToast('文件上传成功，取消失败');
+      get_session_data();
+    }
+    setTimeout(() => emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", true));
+  } catch (error) {
+    console.error("群聊：文件消息发送失败", error);
+   await get_session_data()
+  } finally {
+    handle_reset();
+  }
+};
+// 文件下载
+const handeDownloadFile = (item) => {
+  showConfirmDialog({
+    title: "温馨提示",
+    message: `文件大小${formatFileSize(item.fileElem.fileSize)}是否下载文件？`,
+    confirmButtonText: "下载",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      // 获取文件的 URL
+      const fileUrl = item.fileElem.sourceUrl;
+      // 创建一个 <a> 元素
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      // 设置下载的文件名
+      link.download = item.fileName;
+      // 将链接添加到页面中，这样它就可以被点击
+      document.body.appendChild(link);
+      // 模拟用户点击下载链接
+      link.click();
+      // 清理创建的链接
+      document.body.removeChild(link);
+    })
+    .catch(() => {
+      // on cancel
+    });
+};
+/**
+ * 处理多个视频一次性发送问题
+ * @param videoArrs 
+ */
+const handle_send_message_video = async (videoArrs) =>{
+  console.log('上传视频',videoArrs)
+  if(close_showLoadingToast)close_showLoadingToast.close()
+  const {urlList,urlMsg} = videoArrs||{}
+  if(urlList.length>0){
+    close_showLoadingToast =  showLoadingToast({
+      message: '加载中...',
+      forbidClick: true,
+      loadingType: 'spinner',
+      duration:0,//设置为0必须主动调用方法关闭
+      // overlay:true,
+    });
+    //视频上传同步处理方法
+    try{
+      urlList.forEach(async (item,index)=>{
+        urlMsg.file = item.file
+        let file = urlMsg.file
+        const resData = await IMSDK.uploadFile({
+          name: file.name,
+          contentType: file.type,
+          uuid: IMSDK.createuuid(),
+          file,
+          size: file.size
+        });
+        const {
+          data: { url }
+        }  = resData || {}
+        const snapshotFile = await getVideoFrameImage(url, file);
+        const res = await IMSDK.uploadFile({
+          name: snapshotFile.name,
+          contentType: snapshotFile.type,
+          uuid: IMSDK.createuuid(),
+          file: snapshotFile,
+          size: snapshotFile.size
+        });
+        snapshotFile.url = res.data.url;
+        file.url = url;
+        urlMsg.videoElem.videoUrl = url;
+        const msgItem =  await IMSDK.createVideoMessageByFile({
+          videoPath: "",
+          duration: 30,
+          videoType: file.type,
+          snapshotPath: "",
+          videoUUID: IMSDK.createuuid(),
+          videoUrl: file.url,
+          videoSize: file.size,
+          snapshotUUID: IMSDK.createuuid(),
+          snapshotSize: snapshotFile.size,
+          snapshotUrl: snapshotFile.url,
+          snapshotWidth: snapshotFile.width,
+          snapshotHeight: snapshotFile.height,
+          snapShotType: snapshotFile.type,
+          snapshotFile,
+          videoFile: file
+        });
+        Object.assign(urlMsg, msgItem["data"]);
+        if (typeof msgItem["data"] === "string") {
+          console.warn("初始化数据错误为空:", urlMsg);
+        }
+        // 发言连续校验
+        let checkMessageRes = await checkMessage(storeHistoryMessageList.value,msgItem.data);
+        if (checkMessageRes.code === 101) {
+          close_showLoadingToast.close()
+          await showConfirmDialog({
+            title: t("dialog_tip1"),
+            message: ('请勿重复多次发送相同内容'),
+            confirmButtonText: t('confirm'),
+            confirmButtonColor: "#5F97E3",
+            showCancelButton: false
+          });
+          isShow_emoji.value = false;
+          isShow_media.value = false;
+          resetMsgInfo()
+          if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+          atUserNames.value = []
+          closeQuoteObj(groupInfo.value.groupID);
+          return
+        }
+        // 群聊閲後即焚
+        const burnStatus = appConfig.value?.burn_after_reading?.group_chat.status
+        const needBurn = burnStatus === 1;
+        // burnStatus为后台配置，为是否开启阅后即焚状态，burnTime为media组件选择时间后带过来的直接使用
+        if (needBurn && urlMsg.burnTime && urlMsg.burnTime !== 0) {
+          if (
+            urlMsg.contentType === 102 ||
+            urlMsg.contentType === 104
+          ) {
+            msgItem["data"]["ex"] = JSON.stringify({
+              burn_msg: {
+                read_delete_time: urlMsg.burnTime
+              }
+            });
+          }
+        }
+        const {data} = await  IMSDK.sendMessageNotOss({
+          groupID: groupInfo.value.groupID,
+          message: msgItem["data"],
+          recvID: "",
+          offlinePushInfo: createByData(
+            msgItem["data"],
+            false,
+            groupInfo.value.groupName
+          )
+        });
+        msgSending.value = false
+        storeHistoryMessageList.value.push({
+          ...data,
+          retain: 'retain',
+        })
+        const cloneList = JSON.parse(JSON.stringify(storeHistoryMessageList.value))
+        await nextTick()
+        setTimeout(() => emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false));
+        close_showLoadingToast.close()
+      })
+    }catch(error){
+      close_showLoadingToast.close()
+    }
+  }
+  isShow_emoji.value = false;
+  isShow_media.value = false;
+  resetMsgInfo()
+  if (inputRef.value&&inputRef.value.clear) inputRef.value.clear();
+  atUserNames.value = []
+  closeQuoteObj(groupInfo.value.groupID);
+}
+
+//根据不同类型发消息===接收 controller 参数
+const send_msg = async (msg,controller,localFakeFile) => {
+  let file = msg.file;
+  const list = {
+    //文本消息
+    101: async () => {
+      console.log(msg.textElem.content);
+      return await IMSDK.createTextMessage(msg.textElem.content);
+    },
+    //图片消息
+    102: async () => {
+      const {
+        data: { url }
+      } = await IMSDK.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: IMSDK.createuuid(),
+        file,
+        size: file.size
+      });
+      file.url = url;
+      msg.pictureElem.sourcePicture.url = url;
+      const { width, height } = await getPicInfo(file);
+      const PictureInfo = {
+        uuID: IMSDK.createuuid(),
+        size: file.size,
+        type: file.type,
+        url: file.url,
+        width,
+        height
+      };
+      return await IMSDK.createImageMessageByFile({
+        sourcePicture: PictureInfo,
+        bigPicture: PictureInfo,
+        snapshotPicture: PictureInfo,
+        sourcePath: "",
+        file: file
+      });
+    },
+    //视频消息
+    104: async () => {
+      //避免资源浪费
+      let {
+        data: { url }
+      } = await IMSDK.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: IMSDK.createuuid(),
+        file,
+        size: file.size
+      });
+      // let url= 'https://dev-openim.exchangs.top/chat-server-api/object/8553286385/测试.mp4'
+      //获取封面
+      const snapshotFile = await getVideoFrameImage(url, file);
+      const res = await IMSDK.uploadFile({
+        name: snapshotFile.name,
+        contentType: snapshotFile.type,
+        uuid: IMSDK.createuuid(),
+        file: snapshotFile,
+        size: snapshotFile.size
+      });
+      snapshotFile.url = res.data.url;
+      file.url = url;
+      msg.videoElem.videoUrl = url;
+      return await IMSDK.createVideoMessageByFile({
+        videoPath: "",
+        duration: 30,
+        videoType: file.type,
+        snapshotPath: "",
+        videoUUID: IMSDK.createuuid(),
+        videoUrl: file.url,
+        videoSize: file.size,
+        snapshotUUID: IMSDK.createuuid(),
+        snapshotSize: snapshotFile.size,
+        snapshotUrl: snapshotFile.url,
+        snapshotWidth: snapshotFile.width,
+        snapshotHeight: snapshotFile.height,
+        snapShotType: snapshotFile.type,
+        snapshotFile,
+        videoFile: file
+      });
+    },
+    //音频消息
+    103: async () => {
+      const {
+        data: { url }
+      } = await IMSDK.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: IMSDK.createuuid(),
+        file,
+        size: file.size
+      });
+      return await IMSDK.createSoundMessageByFile({
+        uuid: IMSDK.createuuid(),
+        soundPath: "",
+        sourceUrl: url,
+        dataSize: file.size,
+        duration: file.duration,
+        soundType: file.type,
+        file
+      });
+    },
+    //引用消息
+    114: async () => {
+      //文本複製
+      msg.quoteElem.text = msg.textElem.content;
+      return await IMSDK.createQuoteMessage({
+        text: msg.textElem.content,
+        message: JSON.stringify(msg.quoteElem.quoteMessage)
+      });
+    },
+    // @消息
+    106: async () => {
+      const atParams = {
+        text: revertTransformText(msg.textElem.content),
+        atUserIDList: artUserList.value.map(el => el.userID),
+        atUsersInfo: artUserList.value.map(el => {
+          return { atUserID: el.userID, groupNickname: el.nickname };
+        }),
+        message: msg.quoteElem.text ? msg.quoteElem.text : null
+      }
+      return await IMSDK.createTextAtMessage(atParams);
+    },
+  };
+  const msgItem = await list[msg.contentType]();
+  Object.assign(msg, msgItem["data"]);
+  if (typeof msgItem["data"] === "string") {
+    console.warn("初始化数据错误为空:", msg);
+  }
+  // 群聊閲後即焚
+  const burnStatus = appConfig.value?.burn_after_reading?.group_chat.status;
+  const needBurn = burnStatus === 1;
+  // burnStatus为后台配置，为是否开启阅后即焚状态，burnTime为media组件选择时间后带过来的直接使用
+  if (needBurn && msg.burnTime && msg.burnTime !== 0) {
+    if (msg.contentType === 102 || msg.contentType === 104) {
+      msgItem["data"]["ex"] = JSON.stringify({
+        burn_msg: {
+          read_delete_time: msg.burnTime
+        }
+      });
+    }
+  }
+  return await IMSDK.sendMessageNotOss({
+    groupID: groupInfo.value.groupID,
+    message: msgItem["data"],
+    recvID: "",
+    offlinePushInfo: createByData(
+      msgItem["data"],
+      false,
+      groupInfo.value.groupName
+    )
+  });
+};
+const createByData = (message, isSingleChat, groupName = "") => {
+  let title = "";
+  let desc = "";
+  if (isSingleChat) {
+    title = message.senderNickname ?? "-";
+    desc = getMsgContentTipText(message, false);
+  } else {
+    title = groupName ?? "-";
+    desc = getMsgContentTipText(message);
+  }
+  return {
+    title: title,
+    desc: desc,
+    iOSBadgeCount: true,
+    iOSPushSound: "+1"
+  };
+};
+///超过36个字符部分，使用...代替
+const getMsgContentTipText = (msg, showSendName = true) => {
+  let text = parseMsg(msg, true, true, true, contactList.value);
+  const nickName = subCharacter(msg.senderNickname, 8, 0, 12, "...");
+  text = subCharacter(text, 8, 0, 12, "...");
+  return `${nickName}:${text}`;
+};
+///对文本进行裁剪
+const subCharacter = (
+  text,
+  maxLength,
+  start = 0,
+  end,
+  endStr,
+  charactersLength
+) => {
+  const characters = text;
+  if ((charactersLength ? charactersLength : characters.length) > maxLength) {
+    return characters.substring(start, end) + endStr;
+  } else {
+    return text;
+  }
+};
+// canvas视频截图
+// 群聊-fix :20247-22 部分视频还是显示不了预览问题修改
+const getVideoFrameImage = (url, file, currentTime = 1, width = 160) => {
+  const fileName = file.name.split(".")[0];
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.setAttribute("crossOrigin", "anonymous");
+    video.setAttribute("preload", "metadata");
+    // Handle different video sources based on URL or file type
+    if (url) {
+      video.setAttribute("src", url);
+    } else {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        video.src = event.target.result;
+      };
+      reader.readAsDataURL(file);
+    }
+    video.setAttribute("style", `width:${width}px`);
+    video.currentTime = currentTime;
+    document.body.appendChild(video);
+    // Check every 100 milliseconds if the video is ready
+    const checkVideoReady = setInterval(() => {
+      if (video.readyState >= 4) { // Video is loaded enough to extract frames
+        clearInterval(checkVideoReady); // Stop checking
+        // Ensure width and height are integers
+        const canvas = document.createElement("canvas");
+        const aspectRatio = video.videoWidth / video.videoHeight;
+        const canvasWidth = width;
+        const canvasHeight = Math.round(width / aspectRatio);
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+        const base64String = canvas.toDataURL("image/png");
+        const blob = base64ToBlob(base64String);
+        const imageFile = new File([blob], `${fileName}`, { type: "image/png" });
+        imageFile.width = canvasWidth;
+        imageFile.height = canvasHeight;
+        video.remove();
+        resolve(imageFile); // Resolve with the image file
+      }
+    }, 100); // Check every 100ms
+    video.onerror = (error) => {
+      showFailToast('视频截取失败!');
+      reject(error);
+    };
+    // Function to convert base64 to Blob
+    function base64ToBlob(base64String) {
+      const binaryData = atob(base64String.split(",")[1]);
+      const array = new Uint8Array(binaryData.length);
+      for (let i = 0; i < binaryData.length; i++) {
+        array[i] = binaryData.charCodeAt(i);
+      }
+      return new Blob([array], { type: "image/png" });
+    }
+  });
+};
+const handleCancel = () => {
+  showFoward.value = false;
+  // 将
+  setGroupChatConfig({
+    ...groupChatConfig.value,
+    showCheck: false,
+    type: "", // 逐条转发
+    msg: [],
+    hiddenSource: 2, // 隐藏消息来源1， 2不隐藏
+    isMultipleChoice: false,
+    groupChecked: [], // 选择的群
+    contactChecked: [], // 选择的联系人
+    chatDataList: []
+  });
+};
+const selectFoward = (val, index) => {
+  if (index === 0) {
+    // 这里要传类型，单条还是合并
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      showCheck: false,
+      type: "single", // 逐条转发
+      msg: checkedConcat.value,
+      hiddenSource: 2, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+    setPrivateChatConfig({})
+    router.push("/home/dialogue/transmitPage");
+    return;
+  } else {
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      showCheck: false,
+      type: "group", // 逐条转发
+      msg: checkedConcat.value,
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+    fowardVisible.value = true;
+  }
+};
+const handleShare = () => {
+  showFoward.value = true;
+};
+// 删除本地消息
+const handleDelete = () => {
+  isShow_msg_delete.value = true;
+};
+const handleConfirm = type => {
+  // type为no,展示不隐藏，反之展示
+  setGroupChatConfig({
+    ...groupChatConfig.value,
+    hiddenSource: type === "no" ? 2 : 1 // 隐藏消息来源1， 2不隐藏
+  });
+  fowardVisible.value = false;
+  setPrivateChatConfig({})
+  router.push("/home/dialogue/transmitPage");
+};
+const handle_delete_msg = (isLocal = true) => {
+  //判断是否本地删除
+  if (isLocal) {
+    Promise.all(
+      checkedConcat.value.map(async items => {
+        const index = storeHistoryMessageList.value.findIndex(
+          item => item.clientMsgID === items.clientMsgID
+        );
+        if (index !== -1) {
+          await IMSDK.deleteMessageFromLocalStorage({
+            conversationID: groupChatConfig.value.conversationID,
+            clientMsgID: storeHistoryMessageList.value[index].clientMsgID
+          });
+          storeHistoryMessageList.value.splice(index, 1);
+        }
+      })
+    ).then(() => {
+      isShow_msg_delete.value = false;
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        showCheck: false,
+        type: "",
+        msg: [],
+        hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+        isMultipleChoice: false,
+        groupChecked: [], // 选择的群
+        contactChecked: [], // 选择的联系人
+        chatDataList: []
+      });
+    });
+  } else {
+    //撤回消息
+    Promise.all(
+      checkedConcat.value.map(async items => {
+        if (items.clientMsgID) {
+          const canDelete = canDeleteFromServer(items, true);
+          if (canDelete) {
+            await IMSDK.revokeMessage({
+              conversationID: groupChatConfig.value.conversationID,
+              clientMsgID: items.clientMsgID
+            });
+          }
+        }
+      })
+    ).then(() => {
+      isShow_msg_delete.value = false;
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        showCheck: false,
+        type: "",
+        msg: [],
+        hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+        isMultipleChoice: false,
+        groupChecked: [], // 选择的群
+        contactChecked: [], // 选择的联系人
+        chatDataList: []
+      });
+    });
+  }
+};
+const timeInterVal = computed(() => {
+  const date = new Date().getSeconds();
+  if (groupInfo.muteEndTime > date) {
+    return false;
+  } else {
+    return true;
+  }
+});
+const showDeleteLocal = computed(() => {
+  // 只需要判断当前人是否在群中，和是否为管理员
+  if (isInGroupchat.value) {
+    if (
+      groupChatConfig.value.isGroupAdmin ||
+      groupChatConfig.value.isGroupOwner
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+});
+
+// 转发入口显示/隐藏
+const isTransmitSend = computed(() => {
+  const transmit_role_type =
+    appConfig.value.batch_send?.transmit_role_type || [];
+  // 群发功能可选角色
+  if (transmit_role_type.length > 0) {
+    let isGroupOwner =
+      transmit_role_type.includes(1) && userInfo.value.isGroupOwner;
+    let isGroupAdmin =
+      transmit_role_type.includes(2) && userInfo.value.isGroupAdmin;
+    let isNormalUser =
+      transmit_role_type.includes(3) &&
+      !userInfo.value.isGroupAdmin &&
+      !userInfo.value.isGroupOwner &&
+      !userInfo.value.isInternalUser;
+    let isInternalUser =
+      transmit_role_type.includes(4) && userInfo.value.isInternalUser;
+    return isGroupOwner || isGroupAdmin || isNormalUser || isInternalUser;
+  } else {
+    return false;
+  }
+});
+// 重置当前群聊会话数据
+const get_session_data = async () => {
+  if (route.path.startsWith('/home/dialogue/groupChat/')) {
+    const hrefUrl = window.location.href.split("/");
+    let params = {
+      conversationID: "sg_" + hrefUrl[hrefUrl.length - 1],
+      groupID: hrefUrl[hrefUrl.length - 1],
+      count: 30,
+    };
+    // 取消成功之后重新初始化群聊信息
+    await getNewsMessageListData(params);
+  }
+};
+// 群聊-文件取消方法
+const handeCloseFile = async (item) => {
+  console.error('群聊:文件上传终止了', item);
+  try {
+    const { controller } = groupChatFileMap.get(item.clientMsgID);
+    if (controller) {
+      // 调用后台sdk 文件切片终止
+      await IMSDK.cancelUploadFile({uuid: item.fileElem.uuid});
+      const indexToRemove = storeHistoryMessageList.value.findIndex(msg => msg.clientMsgID === item.clientMsgID);
+      if (indexToRemove !== -1) {
+        storeHistoryMessageList.value.splice(indexToRemove, 1);
+        // 取消上传成功
+        showFailToast('取消上传成功');
+      }
+      controller.abort(); 
+      groupChatFileMap.delete(item.clientMsgID);
+    } else {
+      console.error('controller 未定义');
+    }
+  } catch (error) {
+    // 如果请求被取消，则会捕获 AbortError
+    if (error.name === 'AbortError') {
+      console.error('请求被取消');
+    } else {
+      console.error('群聊：文件取消报错了====', error);
+    }
+  }
+};
+// 公共的定时器方法
+function startFileProgressInterval(index, signal, fileObj) {
+  const intervalId = setInterval(() => {
+    // 在定时器内部获取当前文件消息
+    const currentMessage = storeHistoryMessageList.value[index];
+    // 如果消息存在且进度未达到100%
+    if (currentMessage && currentMessage.filePercentage < 100) {
+      currentMessage.filePercentage += 1; // 增加进度
+    } else {
+      clearInterval(intervalId); // 清除定时器
+      console.error('定时器被清除了---------',intervalId);
+    }
+  }, 500);
+}
+// 监听兄弟组件文件取消事件，更新数据
+emitter.on('cancelGroupChatFile',handeCloseFile)
+// 子组件中定义方法并通过defineExpose暴露出去
+// defineExpose({
+//   startFileProgressInterval,
+// });
+</script>
+
+<style lang="less" scoped>
+.privateChat_footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 8px 12px;
+  width: 100%;
+  background: white;
+  display: flex;
+  font-weight: 500;
+  font-size: 1.625rem;
+  flex-direction: column;
+
+  .prohibition {
+    background: #f5f6fa;
+    width: 100%;
+    height: 36px;
+    font-size: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(27, 27, 34, 0.26);
+    border-radius: 10px;
+
+    span {
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-right: 8px;
+        margin-top: 3px;
+      }
+    }
+  }
+
+  .choose_color {
+    color: var(--van-blue);
+  }
+
+  .container {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .msg-txt-box {
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+    background: #f5f6fa;
+    border-radius: 10px;
+    padding: 4px;
+    font-size: 1rem;
+    line-height: 30px;
+  }
+
+  .recorder {
+    display: flex;
+    justify-content: space-between;
+    color: var(--van-blue);
+    align-items: center;
+    border-radius: 10px;
+    background: rgba(235, 247, 254, 1);
+    padding: 4px 10px;
+
+    .recorder_wave {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 20px;
+    }
+  }
+
+  .van-icon {
+    padding: 0 0 5px 12px;
+  }
+
+  .icon_recording {
+    align-items: flex-end;
+    display: flex;
+    height: 100%;
+    margin-right: 4px;
+
+    & > img {
+      width: 30px;
+      height: 30px;
+      padding: 2px;
+    }
+  }
+
+  .icon_send {
+    width: 22px;
+    height: 22px;
+    margin: 0 0 8px 12px;
+  }
+
+  .msg_txt {
+    background: rgba(245, 246, 250, 1);
+    border-radius: 10px;
+    padding: 4px;
+    font-size: 1rem;
+    line-height: 30px;
+  }
+
+  .msgQuote {
+    position: absolute;
+    top: -33px;
+    left: 0;
+    background: white;
+    height: 33px;
+    width: 100%;
+    border-bottom: 1px solid rgba(242, 244, 245, 1);
+    display: flex;
+    font-size: 0.75rem;
+    color: rgba(118, 118, 122, 1);
+    padding: 8px 12px;
+    align-items: center;
+
+    & > .left {
+      // margin-right: 5px;
+      max-width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & > .center {
+      flex: 1;
+      max-width: 200px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-left: 5px;
+    }
+
+    & > .right {
+      position: absolute;
+      top: 0;
+      right: 12px;
+      bottom: 0;
+      margin: auto;
+      font-size: 1.125rem;
+      height: 18px;
+    }
+
+    .van-icon {
+      padding: 0 !important;
+    }
+  }
+
+  .forward {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .share {
+      margin-right: 80px;
+      cursor: pointer;
+    }
+
+    .delete {
+      cursor: pointer;
+    }
+  }
+
+  :deep(.van-dialog) {
+    padding: 24px 0 0 0;
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #f2f4f5;
+      padding: 0;
+
+      .content {
+        text-align: center;
+        font-family: PingFang SC;
+
+        .title {
+          color: #1b1b22;
+          margin-bottom: 16px;
+          font-size: 1rem;
+          font-weight: 600;
+        }
+
+        .contents {
+          color: #76767a;
+          font-size: 0.875rem;
+          margin-bottom: 22px;
+        }
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1b1b22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #fff !important;
+      border-color: #fff !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #f5f8ff;
+    }
+
+    .btn1 {
+      color: #0095f6 !important;
+    }
+  }
+}
+
+.popup_select {
+  display: flex;
+  flex-direction: column;
+  background: white;
+
+  &_cell {
+    height: 60px;
+  }
+
+  &_cell:nth-child(2) {
+    color: red;
+  }
+}
+
+
+</style>
diff --git a/src/views/dialogue/groupChat/components/audio.vue b/src/views/dialogue/groupChat/components/audio.vue
new file mode 100644
index 0000000..8ee6d68
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/audio.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { defineProps, ref, onMounted, onUnmounted } from 'vue'
+const { msg } = defineProps(['msg'])
+const audioRef = ref()
+const isStart = ref(false)
+
+const currentID = (new Date()).getTime()
+onMounted(() => {
+  if (!window.audioRefList) {
+    window.audioRefList = []
+  }
+  window.audioRefList.push({ currentID, audioRef: audioRef.value, isStart })
+})
+const handle_start = () => {
+  isStart.value = !isStart.value
+  window.audioRefList.forEach(el => {
+    if (el.currentID !== currentID) {
+      el.isStart.value = false
+    }
+  })
+}
+watch(isStart, value => {
+  //开始播放
+  if (value) {
+    audioRef.value.play()
+  } else {
+    audioRef.value.pause()
+  }
+})
+onUnmounted(() => {
+  window.audioRefList = []
+})
+</script>
+
+<template>
+  <div class="audio-wrap">
+    <audio ref="audioRef" style="display: none;" :src=msg.soundElem.sourceUrl></audio>
+    <img src="@/assets/img/msg_pause.svg" height="20" width="20" v-if="isStart" @click="handle_start">
+    <img src="@/assets/img/msg_audio_start.svg" height="20" v-else @click="handle_start">
+    <span>{{ msg.soundElem.duration }}"</span>
+  </div>
+</template>
+
+<style scoped lang="less">
+.audio-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &>span {
+    margin-left: 10px;
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/components/chartArtuser.vue b/src/views/dialogue/groupChat/components/chartArtuser.vue
new file mode 100644
index 0000000..34edb6a
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/chartArtuser.vue
@@ -0,0 +1,470 @@
+<template>
+  <van-popup
+    v-model:show="props.showBottom"
+    position="bottom"
+    :style="{ height: '80%' }"
+    @click-overlay="close"
+    v-if="props.showBottom"
+  >
+    <div class="popup-top">
+      <div class="popup-header">
+        <div class="pack-up">
+          <img
+            @click="close"
+            v-if="!isMultiple"
+            src="@/assets/svg/pack-up.svg"
+          />
+          <span @click="onCancelMultiple" v-else>{{$t('cancel')}}</span>
+        </div>
+        <div class="select-title">
+          {{ $t('selectAt') }}
+          <span v-if="isChecked.length">({{ isChecked.length }})</span>
+        </div>
+        <div class="controls">
+          <div class="choice" @click="isMultiple = true" v-if="!isMultiple">
+            {{ $t('menuMulti') }}
+          </div>
+          <div class="complete" @click="onComplete" v-else>{{ $t('finish') }}</div>
+        </div>
+      </div>
+      <div class="select-search">
+        <van-search
+          v-model="searchForm"
+          class="c-search"
+          :left-icon="defaultSearch"
+          :placeholder="$t('search')"
+          @cancel="onCancel"
+        />
+      </div>
+    </div>
+    <div class="content">
+      <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+        <div class="single-choice" v-if="!isMultiple">
+          <van-cell-group v-if="showList.length" :border="false">
+            <van-cell
+              class="cell_top"
+              :title="'@' + $t('everyone')"
+              @click="selectClick($t('everyone'))"
+            >
+              <template #title>
+                <span class="custom-title">{{ "@" + $t("everyone") }}</span>
+              </template>
+            </van-cell>
+            <van-cell
+              :title="item.showName"
+              v-for="(item, index) in showList"
+              :key="index"
+              @click="selectClick(item)"
+            >
+              <template #title>
+                <Avatar
+                  width="36"
+                  height="36"
+                  :url="item.faceURL"
+                  :name="item.showName"
+                  @updateUrl="url => item.faceURL = url"
+                ></Avatar>
+                <div class="custom-name">
+                  <div v-if="showGroupOwner(item.userID) != ''">
+                    <CommonLottie
+                      :isGroup="showGroupOwner(item.userID)"
+                      :width="140"
+                      :showName="item.showName"
+                      :bottom="-2"
+                    ></CommonLottie>
+                  </div>
+                  <span
+                    class="custom-title"
+                    v-if="showGroupOwner(item.userID) == ''"
+                  >{{ item.showName }}</span>
+                  <div class="nick-name" v-if="searchForm">
+                    <div
+                      class="custom-group-name"
+                      v-if="item.nickname && item.groupNickName"
+                    >
+                      {{ $t('searchGroupNicknameIs',{name:item.groupNickName}) }}
+                    </div>
+                    <div class="custom-user-name" v-if="item.remark && item.nickname">
+                      {{$t('nicknames')}}：{{ item.nickname }}
+                    </div>
+                    <div class="custom-user-name" v-if="myGroupInfo.roleLevel !== 20">
+                      {{$t('group_remark')}}：{{ item.groupRemark || '-' }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+          <div v-else class="empty">
+            <span v-if="!searchForm">{{ $t("cvNotAtUser") }}</span>
+            <span v-else>{{ $t("notFoundUser") }}</span>
+          </div>
+        </div>
+        <div class="multiple-choice" v-else>
+          <van-checkbox-group
+            v-model="isChecked"
+            v-if="showList.length"
+            :border="false"
+            :max="props.maxSelectNum"
+          >
+            <van-cell-group inset>
+              <van-cell
+                clickable
+                :title="item.showName"
+                v-for="(item, i) in showList"
+                :key="i"
+                @click="toggle(item, i)"
+              >
+                <template #title>
+                  <van-checkbox
+                    :name="item.userID"
+                    :ref="el => (checkboxRefs[i] = el)"
+                    @click.stop
+                  >
+                    <template #icon="props">
+                      <div class="select1">
+                        <img
+                          v-if="props.checked"
+                          src="../../../../assets/svg/radio-check.svg"
+                        />
+                      </div>
+                    </template>
+                  </van-checkbox>
+                  <Avatar
+                    width="36"
+                    height="36"
+                    :url="item.faceURL"
+                    :name="item.showName"
+                    @updateUrl="url => item.faceURL = url"
+                  ></Avatar>
+                  <div class="custom-name">
+                    <div v-if="showGroupOwner(item.userID) != ''">
+                      <CommonLottie
+                        :isGroup="showGroupOwner(item.userID)"
+                        :width="140"
+                        :showName="item.showName"
+                        :bottom="-2"
+                      ></CommonLottie>
+                    </div>
+                    <span class="custom-title" v-if="showGroupOwner(item.userID) == ''">{{ item.showName }}</span>
+                    <div class="nick-name" v-if="searchForm">
+                      <div
+                        class="custom-group-name"
+                        v-if="item.nickname && item.groupNickName"
+                      >
+                        {{$t('searchGroupNicknameIs',{name:item.groupNickName}) }}
+                      </div>
+                      <div class="custom-user-name" v-if="item.remark && item.nickname">
+                        {{$t('nicknames')}}：{{ item.nickname }}
+                      </div>
+                    <div class="custom-user-name" v-if="myGroupInfo.roleLevel !== 20">
+                      {{$t('group_remark')}}：{{ item.groupRemark || '-' }}
+                    </div>
+                    </div>
+                  </div>
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-checkbox-group>
+          <div v-else class="empty">
+            {{$t('notFoundUser')}}
+          </div>
+        </div>
+      </van-list>
+    </div>
+  </van-popup>
+</template>
+<script setup>
+import {
+  ref,
+  onMounted,
+  watchEffect,
+  watch,
+  defineProps,
+  defineEmits
+} from "vue";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useI18n } from "vue-i18n";
+import defaultSearch from "@/assets/tupian.png";
+import { storeToRefs } from "pinia";
+import { CommonLottie } from "@/components/index.js";
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const { groupId } = useContactStore();
+const contactStore = useContactStore();
+const { groupInfo, groupMemberInfo,groupMemberInfoObj, myGroupInfo } = storeToRefs(contactStore);
+
+const $api = inject("$api");
+const OpenIM = getSDK();
+const router = useRouter();
+const props = defineProps(["showBottom", "maxSelectNum"]);
+const emits = defineEmits(["close"]);
+const userList = ref([]);
+const searchForm = ref("");
+const isMultiple = ref(false);
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const selectList = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+onMounted(() => {
+  getMemberList();
+});
+watch(
+  () => props.showBottom,
+  (newVal, oldVal) => {
+    if (newVal) {
+      getMemberList();
+    } else {
+      onCancel()
+    }
+  }
+);
+watch(
+  () => isMultiple.value,
+  (newVal, oldVal) => {
+    if (newVal) {
+      onLoad();
+    }
+  }
+);
+let page_num = ref(1);
+
+const showList = computed(() => {
+  let arr = [];
+  // arr = userList.value.filter(item => [item.nickname,item.remark].includes(searchForm.value)).slice(0,(page_num.value * 10))
+  arr = userList.value
+    .filter(item => {
+      let groupRemarkStr = ''
+      if (myGroupInfo.value.roleLevel !== 20) {
+        groupRemarkStr = JSON.parse(item.ex || '{}').remark?.value || ''
+      }
+      let str = item.nickname + item.remark + item.groupNickName + groupRemarkStr;
+      return str.indexOf(searchForm.value) != -1;
+    })
+    .slice(0, page_num.value * 10)
+    console.log('@showList',arr);
+  return arr || [];
+});
+// 获取指定群的群成员信息
+const getMemberList = async() => {
+  const params = {
+      groupID: groupInfo.value.groupID, // 群 ID
+      filter: 0, // 群成员角色 0所有成员  1群主 2群管理员  3群普通成员  4群管理员和普通成员  5群主和群管理员
+      offset: 0,
+      count: 10000
+    }
+  const res = await OpenIM.getGroupMemberList(params);
+  let list = res.data||[]
+  // let list = groupMemberInfo.value[groupInfo.value.groupID] || [];
+  userList.value = list
+    .map(item => {
+      const groupRemark = JSON.parse(item.ex || '{}').remark?.value || ''
+      return {
+        ...item,
+        showName: item.remark || (groupRemark || item.nickname) || item.groupNickName,
+        groupRemark,
+      };
+    })
+    .filter(item => item.userID !== userInfo.value.userID);
+};
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (showList.value.length >= userList.value.length) {
+    finished.value = true;
+  }
+};
+const close = () => {
+  emits("close");
+  isChecked.value = [];
+  checkboxRefs.value = [];
+  isMultiple.value = false;
+};
+const selectClick = item => {
+  emits("close", item);
+};
+// 搜索
+const onSearch = async () => {};
+// 搜索取消
+const onCancel = () => {
+  searchForm.value = "";
+};
+const toggle = (item, index) => {
+  checkboxRefs.value[index].toggle();
+};
+const onStop = () => {};
+// 完成
+const onComplete = () => {
+  // if(!isChecked.value.length) return
+  let arr = userList.value.filter(item =>
+    isChecked.value.includes(item.userID)
+  );
+  emits("close", arr);
+  isChecked.value = [];
+  checkboxRefs.value = [];
+  isMultiple.value = false;
+};
+onBeforeUpdate(() => {
+  checkboxRefs.value = [];
+});
+// 取消多选
+const onCancelMultiple = () => {
+  isChecked.value = [];
+  checkboxRefs.value = [];
+  isMultiple.value = false;
+};
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      // const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+      const arr = userList.value
+      const index = arr.findIndex(item => item.userID === userID);
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+</script>
+<style lang="less" scoped>
+.cell_top {
+  height: 60px !important;
+}
+
+:deep(.van-cell__title) {
+  display: flex;
+  align-items: center;
+
+  .custom-title {
+    color: #1b1b22;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+}
+
+.empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #979797;
+  font-family: PingFang SC;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding-top: 49px;
+}
+
+.van-popup {
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+}
+
+.popup-header {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .pack-up {
+    font-size: 0.875rem;
+  }
+
+  .select-title {
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  .controls {
+    font-size: 0.875rem;
+
+    .complete {
+      color: #0095f6;
+    }
+  }
+}
+
+.select-search {
+  padding: 0 16px;
+}
+
+.select1 {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-right: 8px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid #d9d9d9;
+}
+
+.select-bg {
+  background-color: #5f97e3;
+  border: none;
+}
+
+.multiple-choice {
+  .van-checkbox__icon {
+    height: auto;
+  }
+}
+
+.content {
+  height: calc(100% - 85px);
+  overflow: auto;
+}
+
+.custom-name {
+  .nick-name {
+    color: #76767a;
+    font-size: 0.75rem;
+    .custom-group-name,
+    .custom-user-name {
+      // width: 294px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.custom-name,
+.custom-title {
+  width: calc(100vw - 100px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:deep(.van-image), .avatar {
+  margin-right: 10px;
+}
+:deep(.common-lottie-wrap) {
+  margin-left: unset !important;
+}
+:deep(.van-cell-group--inset) {
+  margin: auto;
+}
+</style>
diff --git a/src/views/dialogue/groupChat/components/checkTopMessage.vue b/src/views/dialogue/groupChat/components/checkTopMessage.vue
new file mode 100644
index 0000000..c275542
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/checkTopMessage.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { reactive } from "vue";
+import { showToast } from "vant";
+import appAudio from "@/views/dialogue/privateChat/components/audio.vue";
+
+const emit = defineEmits(['getcheckTopMessageFlag'])
+const props = defineProps({
+  operandObj: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const audioRef = ref();
+const isStart = ref(false);
+const contentValue = computed(() => {
+  const { content } = props.operandObj;
+  console.log("获取的文件消息：", JSON.parse(content));
+  return JSON.parse(content);
+});
+
+const handle_start = () => {
+  isStart.value = !isStart.value;
+};
+let timer = null;
+watch(isStart, (value) => {
+  //开始播放
+  if (value) {
+    audioRef.value.play();
+    console.log(contentValue.value.duration, "hhhhhhhhh");
+    if (contentValue?.value?.duration > 0 && !timer) {
+      let count = contentValue.value.duration;
+      timer = setInterval(() => {
+        if (count < 1) {
+          isStart.value = false;
+          clearInterval(timer);
+          timer = null;
+        }
+        count--;
+      }, 1000);
+    }
+  } else {
+    clearInterval(timer);
+    timer = null;
+  }
+});
+
+onUnmounted(()=>{
+    if(timer){
+        clearInterval(timer);
+        timer = null;
+    }
+})
+const handleClose = () => {
+    emit('getcheckTopMessageFlag')
+};
+</script>
+<template>
+  <div class="showPopoverBox" @click.stop>
+    <div class="header">{{ $t('checkTopMessage') }}</div>
+    <div class="main">
+      <p v-if="props.operandObj.contentType === 101" class="text">
+        {{ contentValue.content || "" }}
+      </p>
+      <p v-if="props.operandObj.contentType === 114" class="text">
+        {{ contentValue.text || "" }}
+      </p>
+      <div
+        v-if="props.operandObj.contentType === 103 && contentValue"
+        class="audio-wrap"
+      >
+        <audio
+          ref="audioRef"
+          style="display: none"
+          :src="contentValue.sourceUrl"
+        ></audio>
+
+        <img
+          src="@/assets/dialog/audioPlay.png"
+          height="20"
+          @click="handle_start"
+          v-if="!isStart"
+        />
+        <img
+          src="@/assets/dialog/audioStop.png"
+          height="20"
+          width="20"
+          @click="handle_start"
+          v-else
+        />
+
+        <p class="plays">
+          <span v-for="i in 6" :key="i"></span>
+        </p>
+        <span>{{ contentValue.duration }}"</span>
+      </div>
+    </div>
+    <div class="footer">
+      <span class="setbule" @click="handleClose"> {{ $t("back") }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.showPopoverBox {
+  position: fixed;
+  width: 320px;
+  min-height: 180px;
+  background-color: #fff;
+  border-radius: 16px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  .header {
+    height: 60px;
+    line-height: 60px;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    color: #1b1b22;
+  }
+  .main {
+    min-height: 60px;
+    padding: 10px 16px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center; /* 横向居中 */
+    .text {
+      padding: 8px 12px;
+      box-sizing: border-box;
+      background-color: #f6f6f6;
+      border-radius: 12px;
+      flex-wrap: wrap;
+      max-width: 100%;
+      word-wrap: break-word; /* 强制长单词换行 */
+      overflow-wrap: break-word; /* 启用换行以防止内容溢出 */
+      line-height: 20px;
+      max-height: 160px;
+      overflow-y: auto;
+      text-align: justify;
+    }
+    .audio-wrap {
+      padding: 8px 12px;
+      box-sizing: border-box;
+      background-color: #f6f6f6;
+      border-radius: 12px;
+      color: #538fe1;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .plays {
+        display: flex;
+        margin: 0 8px;
+        padding-top: 3px;
+        box-sizing: border-box;
+        span {
+          justify-content: center;
+          width: 2px;
+          background-color: #538fe1;
+          height: 10px;
+          margin: 2px 0;
+        }
+        span:nth-of-type(2n + 2) {
+          height: 14px;
+          margin: 0 3px;
+        }
+      }
+      & > span {
+        // margin-left: 10px;
+        padding-top: 3px;
+      }
+    }
+  }
+  .footer {
+    height: 60px;
+    line-height: 60px;
+    .setbule {
+      color: #538fe1;
+    }
+  }
+}
+</style>
diff --git a/src/views/dialogue/groupChat/components/emoji.vue b/src/views/dialogue/groupChat/components/emoji.vue
new file mode 100644
index 0000000..1a69c8f
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/emoji.vue
@@ -0,0 +1,44 @@
+<script setup >
+import data from '@emoji-mart/data'
+import { Picker } from 'emoji-mart'
+import {ref,onMounted,defineProps} from 'vue'
+const { msg } = defineProps(['msg', 'closeEmojiselect'])
+
+const emoji_ref = ref()
+
+onMounted(async ()=>{
+  const lang = await import('@emoji-mart/data/i18n/zh.json')
+  //表情插件初始化
+  new Picker({
+    data ,
+    // locale:"zh",
+    i18n: lang.default,
+    searchPosition:"none",
+    parent:emoji_ref.value,
+    set:"",
+    onEmojiSelect:e=>{
+      msg.textElem.content += e.native
+    }
+  })
+})
+onClickOutside(emoji_ref, () => emits('closeEmojiselect'), {
+  
+})
+</script>
+
+<template>
+    <div class="emoji" ref="emoji_ref">
+
+    </div>
+</template>
+
+<style scoped>
+.emoji{
+  width: 100vw;
+  height: 300px;
+  padding: 10px 0;
+  .search{
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/components/media.vue b/src/views/dialogue/groupChat/components/media.vue
new file mode 100644
index 0000000..3cb91d8
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/media.vue
@@ -0,0 +1,433 @@
+<script setup>
+// 【群聊-】
+import { CommonPay } from "@/components/index.js"
+import { ref, onMounted, defineProps, defineEmits } from 'vue'
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user.js";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n";
+import { formatTime } from "@/utils/tools";
+import { onClickOutside } from "@vueuse/core";
+import { showToast } from "vant";
+import { CbEvents } from "@/utils/openIM/constant";
+import { getSDK } from "@/utils/openIM";
+const OpenIM = getSDK();
+const { msg } = defineProps(["msg"]);
+const emits = defineEmits([
+  "handle_send_message",
+  "handle_send_message_video",
+  "closeActionBar",
+  "handle_send_file",
+]);
+const { t } = useI18n();
+const contactStore = useContactStore();
+const { groupInfo, myGroupInfo } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo, groupChatConfig, appConfig } = storeToRefs(userStore);
+
+// 绑定手机号
+const bindPhoneVisible = ref(false);
+// 存储上传文件路径
+const uploaderFilePath = ref(null);
+const router = useRouter();
+//重置 msg 数据
+const handle_reset_msg = () => {
+  msg.contentType = 101;
+  msg.content = "";
+};
+const checkQuality = (file, min, max) => {
+  // 必须都有值才可以判断
+  if ([file, min, max].some((arg) => Boolean(arg) === false)) return false;
+  const status = appConfig.value.burn_after_reading.group_chat.status;
+  return status === 1 && (file.size > min || file.size < max);
+};
+
+// 图片消息 + 视频消息 +上传后回调
+const handleMediaAfterRead = async (dataArray) => {
+  // 确保dataArray是数组
+  if (!Array.isArray(dataArray)) {
+    dataArray = [dataArray];
+  }
+  const videoFiles = dataArray.filter(data => getFileType(data.file.name) === "视频");
+  const imageFiles = dataArray.filter(data => getFileType(data.file.name) === "图片");
+  // 如果同时存在视频和图片文件
+  if (videoFiles.length > 0 && imageFiles.length > 0) {
+    // 分别处理视频和图片
+    // activeContentType.value = 102
+    // activeContentType.value = 104
+    fileList.value = [];
+    showBurning.value = false;
+    showToast("暂不支持同时发送视频和图片")
+    return
+  } else if (videoFiles.length > 0) {
+    // 只有视频文件
+    activeContentType.value = 104
+  } else if (imageFiles.length > 0) {
+    // 只有图片文件
+    activeContentType.value = 102
+  } else {
+    showToast(`不支持此类型`);
+    fileList.value = [];
+    showBurning.value = false;
+    return
+  }
+  showBurning.value = true;
+};
+
+// 阅后即焚【确认弹框】
+const handleOk = () => {
+  msg.contentType = activeContentType.value;
+  msg.burnTime = activeTime.value || 0;
+  const eventType = msg.contentType === 102 ? "handle_send_message" : "handle_send_message_video";
+  emits(eventType, { urlList: fileList.value, urlMsg: msg }, false);
+  showBurning.value = false;
+  handle_reset_msg();
+};
+
+// 视频消息 【视频读取前的回调函数-返回布尔值】
+// tips：在上传视频消息的时候，也支持上传图片消息
+const handeVideoBeforeRead = (files) => {
+  if (!Array.isArray(files)) {
+    // 如果不是数组，说明是单个文件，转换为数组处理
+    files = [files];
+  }
+  // 如果选取的视频数量超出设置的数量则给出提示，每次最多选择4条
+  if (files.length > 4 ) {
+    showToast("视频选择数量超出限制")
+    return
+  }
+  let allFilesValid = true;
+  // 遍历每个文件
+  files.forEach(file => {
+    // 获取文件类型
+    const fileType = getFileType(file.name);
+    // 判断文件类型是否为图片如果是，则不允许上传
+    if (fileType === "图片") {
+      allFilesValid = true;
+      return;
+    }
+    if (fileType === "其他") {
+      // showToast(`${t("unsupportedVideoFormat")}${file.type}`);
+      showToast(`${t("unsupportedVideoFormat")}`);
+      allFilesValid = false;
+      return;
+    }
+    // 获取文件大小
+    const fileSize = file.size / 1024 / 1024; // 转换为MB
+    // 校验文件大小
+    if (!isValidFileSize(fileType, fileSize)) {
+      showToast(`${fileType}文件大小不可超过${getMaxFileSize(fileType)}MB`);
+      allFilesValid = false;
+      return;
+    }
+  });
+  return allFilesValid;
+};
+
+//点击红包开关
+const onTapRedPackages = () => {
+  // 没有手机号
+  // 2.0.0版本，改动 如果没有支付密码则弹窗--需要电话号码和支付密码都存在才允许发红包
+  if (!userInfo.value.has_property_pwd || !userInfo.value.phone) {
+    // 提示弹窗
+    bindPhoneVisible.value = true;
+  } else {
+    // 跳转发红包页面 群ID已存store
+    router.push({ path: "/home/dialogue/sendRedpkt" });
+  }
+};
+const handleBindPhone = () => {
+  //如果电话号码为空，需要先去设置电话号码
+  router.push({
+    path: !userInfo.value.phone
+      ? "/home/my/security/bindPhone"
+      : "/home/my/security",
+    query: {
+      labels: "dialogue",
+    },
+  });
+  bindPhoneVisible.value = false;
+};
+const showRedPackage = computed(() => {
+  // 本群群主可以发红包
+  if (myGroupInfo.value.roleLevel == 100) {
+    return true;
+  }
+  if (appConfig.value.envelope_permission.role.length > 1) {
+    if (myGroupInfo.value.roleLevel == 60) {
+      return true;
+    }
+  }
+  return false;
+});
+
+const activeContentType = ref(102);
+const fileList = ref([]);
+const showBurning = ref(false);
+const activeTime = ref(0);
+const mediaBox = ref(null);
+onClickOutside(mediaBox, () => emits("closeActionBar"), {});
+
+const burnTimes = computed(() => [
+  { text: "暂不设置", time: 0 },
+  ...appConfig.value.burn_after_reading["group_chat"]["incineration_times"].map(
+    ({ time }) => ({ text: formatTime(time, "txt"), time })
+  ),
+]);
+
+const handleSetTime = ({ time }) => {
+  // 設置閲後即焚時間
+  activeTime.value = time;
+};
+
+// 返回布尔值
+const handeBeforeRead = (file) => {
+  uploaderFilePath.value = document.getElementsByClassName("van-uploader__input")[2].value
+  // 获取文件类型
+  const fileType = getFileType(file.name);
+  // 判断文件类型是否为图片或视频，如果是，则不允许上传
+  if (fileType === "图片" || fileType === "视频") {
+    showToast("图片和视频类型的文件不能上传");
+    return false;
+  }
+  if (fileType === "其他") {
+    showToast("不支持上传该文件格式");
+    return false;
+  }
+  // 获取文件大小
+  const fileSize = file.size / 1024 / 1024; // 转换为MB
+  // 校验文件大小
+  if (!isValidFileSize(fileType, fileSize)) {
+    showToast(`${fileType}文件大小不可超过${getMaxFileSize(fileType)}MB`);
+    return false;
+  }
+  return true;
+};
+// 根据文件名获取文件类型
+const getFileType = (fileName) => {
+  // 使用正则表达式匹配最后一个点后面的内容作为文件后缀
+  const regex = /[^.]+$/;
+  const match = fileName.match(regex);
+  const fileExtension = match ? match[0].toLowerCase() : '';
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(fileExtension)) {
+    return "图片";
+  } else if (["mp4","mov","mkv","wmv",'webm'].includes(fileExtension)) {
+    return "视频";
+  } else if (["mp3", "wav", "flac", "aac", "wma","m4a","alff","alac","midi","ogg"].includes(fileExtension)) {
+    return "音频";
+  } else if (["doc", "docx", "xls","xlsx", "pdf","ppt","pptx","numbers","pages","key","txt","epub"].includes(fileExtension)) {
+    return "文档";
+  } else if (["exe", "msi", "apk","apk1","ipa","app","deb","rpm"].includes(fileExtension)) {
+    return "安装包";
+  } else if (["zip", "rar", "7z", "iso", "dmg"].includes(fileExtension)) {
+    return "压缩包";
+  } else if (['py', 'java', 'cpp', 'html', 'css', 'js', 'php', 'pyc', 'json', 'xml', 'sql', 'sqlite', 'csv'].includes(fileExtension)) {
+    return "代码";
+  } else {
+    return "其他";
+  }
+};
+// 校验文件大小是否符合要求
+const isValidFileSize = (fileType, fileSize) => {
+  const maxFileSize = getMaxFileSize(fileType);
+  return fileSize <= maxFileSize;
+};
+// 获取文件类型的最大允许大小
+const getMaxFileSize = (fileType) => {
+  switch (fileType) {
+    case "音频":
+      return 100;
+    case "文档":
+      return 100;
+    case "代码":
+      return 100;
+    case "视频":
+      return 200;
+    case "安装包":
+      return 300;
+    case "压缩包":
+      return 300;
+    default:
+      return 0;
+  }
+};
+// 文件上传方法
+const handeFilesUpload = async (data) => {
+  try {
+    const msg = {
+      contentType: 105,
+      file: data.file,
+      filePath: uploaderFilePath.value,
+    };
+    emits("handle_send_file", msg);
+  } catch (error) {
+    console.error('文件上传失败:', error);
+  }
+};
+// 关闭面板时触发
+const handeSheetClose = async (data) => {
+  fileList.value = []
+  handle_reset_msg();
+};
+</script>
+
+<template>
+  <div ref="mediaBox" class="media_box">
+    <!-- 每个元素的两侧间隔相等 -->
+    <van-row justify="space-around">
+      <van-col span="6">
+        <!-- 图片类型 102 -->
+        <van-uploader
+          multiple
+          v-model="fileList"
+          :after-read="handleMediaAfterRead"
+          max-count="9"
+          :name="102"
+        >
+          <div class="cell">
+            <img src="@/assets/img/msg_pic.svg" alt="" />
+            <span>{{ $t("picture") }}</span>
+          </div>
+        </van-uploader>
+      </van-col>
+      <van-col span="6">
+        <!-- 视频类型 104 -->
+        <van-uploader
+          accept="video/mp4,video/mov,video/mkv,video/wmv,video/webm"
+          multiple
+          v-model="fileList"
+          max-count="5"
+          :before-read="handeVideoBeforeRead"
+          :after-read="handleMediaAfterRead"
+          :name="104"
+        >
+          <div class="cell">
+            <img src="@/assets/img/msg_camera.svg" alt="" />
+            <span>{{ $t("video") }}</span>
+          </div>
+        </van-uploader>
+      </van-col>
+      <!-- 红包类型 -->
+      <van-col span="6" v-if="showRedPackage">
+        <div class="cell" @click="onTapRedPackages">
+          <img src="@/assets/img/msg_redPkt.svg" alt="" />
+          <span>{{ $t("envelope") }}</span>
+        </div>
+      </van-col>
+      <van-col span="6">
+        <!-- 文件类型 105 -->
+        <van-uploader
+          accept="*"
+          max-count="1"
+          :after-read="handeFilesUpload"
+          :before-read="handeBeforeRead"
+          :name="105"
+        >
+          <div class="cell">
+            <img src="@/assets/img/filed.svg" alt="" />
+            <span>{{ $t("file") }}</span>
+          </div>
+        </van-uploader>
+      </van-col>
+    </van-row>
+    <CommonPay
+      v-model="bindPhoneVisible"
+      @getList="handleBindPhone"
+    ></CommonPay>
+    <!-- 阅后即焚-时间设置 -->
+    <van-action-sheet v-model:show="showBurning" @close="handeSheetClose">
+      <div class="burning-setting">
+        <div class="title">
+          {{ $t("burnAfterReading") }}
+        </div>
+        <div class="burning-option-wrap">
+          <div
+            class="burning-option"
+            v-for="time in burnTimes"
+            @click="handleSetTime(time)"
+            :key="time"
+          >
+            <img
+              src="@/assets/svg/Group56.svg"
+              :style="`opacity: ${activeTime === time.time ? '1' : '0'}`"
+              alt=""
+            />
+            {{ time.text }}
+          </div>
+        </div>
+        <div class="divider"></div>
+        <div class="burning-option ok-btn" @click="handleOk">
+          {{ $t("determine") }}
+        </div>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<style scoped lang="less">
+.burning-setting {
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  text-align: center;
+  max-height: 500px;
+
+  .title {
+    height: 48px;
+    line-height: 48px;
+    font-weight: bold;
+    color: #1b1b22;
+  }
+
+  .burning-option {
+    cursor: pointer;
+    height: 60px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    img {
+      margin-right: 6px;
+    }
+  }
+
+  .burning-option-wrap {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .divider {
+    height: 8px;
+    background: #f8f8fb;
+  }
+
+  .ok-btn {
+    color: var(--c-blue-color);
+    justify-content: center;
+  }
+}
+.media_box {
+  padding-top: 20px;
+
+  .cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    margin: 0 15px; /* 添加这一行，设置固定的左右外边距值 */
+    // margin-right: 30px;
+    & > span {
+      font-size: 0.75rem;
+      color: rgba(118, 118, 122, 1);
+      margin-top: 5px;
+    }
+    & > img {
+      width: 63px;
+      height: 60px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/components/popover.vue b/src/views/dialogue/groupChat/components/popover.vue
new file mode 100644
index 0000000..dde0e46
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/popover.vue
@@ -0,0 +1,476 @@
+<script setup>
+import {
+  defineProps,
+  ref,
+  onMounted,
+  reactive,
+  provide,
+  inject,
+  computed,
+  defineEmits
+} from "vue";
+import { storeToRefs } from "pinia";
+import { useRect } from "@vant/use";
+import { useContactStore } from "@/stores/contact";
+import { showImagePreview, showToast } from "vant";
+import { useI18n } from "vue-i18n";
+import { useUserStore } from "@/stores/user.js";
+import { useMessageStore } from "@/stores/modules/message";
+import emitter from "@/utils/events";
+import { useRouter } from "vue-router";
+import { color2bgCCss } from "@/utils/index";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+const OpenIM = getSDK();
+const router = useRouter();
+const messageStore = useMessageStore();
+const { setQuoteObj, updateCheckConcat } = messageStore;
+const { storeHistoryMessageList, checkedConcat } = storeToRefs(messageStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { groupChatConfig, userInfo, userBgSettings, appConfig } = storeToRefs(userStore);
+const { t } = useI18n();
+const $api = inject("$api");
+const showPopover = ref(false);
+const quoteMsg = ref(null);
+import { copyUserId } from "@/utils/tools";
+const emits = defineEmits(["handlePinned"]);
+const contactStore = useContactStore();
+const { setToppingList } = contactStore;
+const { groupMemberInfo, myGroupInfo } = storeToRefs(contactStore);
+const placement = ref("bottom-end");
+const create_actions = () => [
+  { text: t("top"), icon: "@/assets/zhiding.png" },
+  { text: t("quote"), icon: "@/assets/img/msg_quote.svg" },
+  { text: t("menuCopy"), icon: "music-o" },
+  { text: t("delete"), icon: "more-o" }
+];
+const actions = reactive({
+  options: create_actions()
+});
+const { isShow_msgQuote, msg_info, isShow_msg_delete,isBgColor } = defineProps([
+  "isShow_msgQuote",
+  "msg_info",
+  "isShow_msg_delete",
+  'isBgColor'
+]);
+const popoverRef = ref();
+const copy_text = async text => {
+  try {
+    await copyUserId(text);
+  } catch (error) {
+    throw new Error(error);
+  }
+};
+//处理 消息 选择
+const handle_popover_onSelect = async (text, val) => {
+  const index = storeHistoryMessageList.value.findIndex(
+    msg => msg.clientMsgID === msg_info.clientMsgID
+  );
+  if (text === t("menuCopy")) {
+    if (val.contentType === 114) {
+      copy_text(val.quoteElem.text);
+    } else if (val.contentType === 1519) {
+      copy_text(val.notificationElem.detail.group.notification);
+    } else {
+      copy_text(val.textElem.content);
+    }
+  } else if (text === t("delete")) {
+    //唤起删除弹窗
+    isShow_msg_delete.show = true;
+    isShow_msg_delete.currentIndex = index;
+    isShow_msg_delete.sendID = val.sendID;
+    // msg_list.splice(index,1)
+  } else if (text === t("quote")) {
+    const msg_info = Object.assign({}, val);
+    const msg_new = Object.assign({}, msg_info);
+    isShow_msgQuote.show = true;
+    msg_info.contentType = 114;
+    msg_info.quoteElem = {
+      text: "",
+      quoteMessage: { ...msg_new }
+    };
+    if (msg_new.contentType === 114) {
+      msg_info.quoteElem.quoteMessage = {
+        contentType: 101,
+        textElem: {
+          content: msg_new.quoteElem.text
+        },
+        senderNickname: msg_new.senderNickname
+      };
+    }
+    quoteMsg.value = msg_info;
+    // 储存控制引用弹窗组件
+    setQuoteObj({
+      [msg_info.groupID]: {
+        isShow_msgQuote: true,
+        msg_info: msg_info
+      }
+    });
+  } else if (text === t("top")) {
+    const { seq, clientMsgID } = val;
+    const res = await $api.contact.setGroupTopMsg({
+      groupId: groupChatConfig.value.groupID,
+      data: [{ seq, clientMsgId: clientMsgID }],
+      operate: "add"
+    });
+    if (res.code === 100003) {
+      showToast({ message: t("error_100003"), position: "top" });
+      return;
+    }
+    if (res.code === 100002) {
+      showToast({ message: t("error_100002"), position: "top" });
+      return;
+    }
+    if (res.code === 1002) {
+      console.log("不是群主");
+      return;
+    }
+    setToppingList();
+  } else if (text === t("menuMulti")) {
+    updateCheckConcat([]);
+    const idx = checkedConcat.value.findIndex(
+      item => item.clientMsgID === val.clientMsgID
+    );
+    if (idx > -1) {
+      checkedConcat.value.splice(idx, 1);
+    } else {
+      checkedConcat.value.push(val);
+    }
+    updateCheckConcat(checkedConcat.value);
+    // 多选
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      showCheck: true,
+      type: "",
+      msg: [],
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+  } else if (text === t("menuForward")) {
+    // debugger
+    // 转发的时候要把当前消息传递过去
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      showCheck: false,
+      type: "single", // 逐条转发
+      msg: [val],
+      hiddenSource: 1, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+    setPrivateChatConfig({})
+    router.push("/home/dialogue/transmitPage");
+  }
+  showPopover.value = false;
+};
+const getPosition = () => {
+  const rect = useRect(popoverRef.value);
+  if (rect.left < 100) {
+    if (rect.top > 500) {
+      placement.value = "top";
+    } else if (rect.top > 200 && rect.top < 499) {
+      placement.value = "top";
+    } else {
+      placement.value = "bottom";
+    }
+  } else {
+    if (rect.top > 500) {
+      placement.value = "left-end";
+    } else if (rect.top > 200 && rect.top < 499) {
+      placement.value = "top-end";
+    }
+  }
+};
+const userFlag = ref(false)
+const isOwner = computed(() => myGroupInfo.value.roleLevel === 100 || myGroupInfo.value.roleLevel === 60);
+// 判断自己是否在群聊中
+const isInGroupchat = computed(() => {
+  // if (Array.isArray(groupMemberInfo.value[groupChatConfig.value.groupID]) && groupMemberInfo.value[groupChatConfig.value.groupID].length > 0) {
+  //   return true;
+  // } else {
+  //   return false;
+  // }
+  return userFlag.value
+});
+const getCurrentMsg = val => {
+  return JSON.parse(val.customElem.data);
+};
+const judgeTop = computed(() => {
+  if (isInGroupchat.value) {
+    if (isOwner.value) {
+      if (msg_info.contentType === 110) {
+        if (
+          getCurrentMsg(msg_info).customType === 1003 ||
+          getCurrentMsg(msg_info).customType === 1004 ||
+          getCurrentMsg(msg_info).customType === 1005
+        ) {
+          return false;
+        }
+      } else {
+        return true;
+      }
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+});
+const judgeQuote = computed(() => {
+  if (isInGroupchat.value) {
+    if (msg_info.contentType === 110) {
+      if (
+        getCurrentMsg(msg_info).customType === 1003 ||
+        getCurrentMsg(msg_info).customType === 1004 ||
+        getCurrentMsg(msg_info).customType === 1005 ||
+        getCurrentMsg(msg_info).customType === 1100
+      ) {
+        return false;
+      }
+    }
+    return true;
+  } else {
+    return false;
+  }
+});
+const judgeCopy = computed(() => {
+  if (isInGroupchat.value) {
+    if (
+      msg_info.contentType === 101 ||
+      msg_info.contentType === 106 ||
+      msg_info.contentType === 114 ||
+      (msg_info.contentType === 110 &&
+        getCurrentMsg(msg_info).customType === 1005)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+});
+const judgeForward = computed(() => {
+  if (isInGroupchat.value) {
+    if (msg_info.contentType === 110) {
+      if (getCurrentMsg(msg_info).customType === 1005) {
+        return false;
+      }
+    }
+    return true;
+  } else {
+    return false;
+  }
+});
+// 文件消息的类型不支持置顶
+const isFileStick = computed(() => {
+  return msg_info.contentType !== 105
+})
+const hanldeLongPress = () => {
+  if (msg_info.ex  && (msg_info.contentType === 102 || msg_info.contentType === 104 )) {
+    // 阅后即焚不展示popover
+    return;
+  }
+  getPosition();
+  showPopover.value = true;
+};
+const isShowPopover = computed(() => {
+  if (msg_info.sendID === userInfo.value.userID) {
+    if (
+      msg_info.contentType === 101 ||
+      msg_info.contentType === 103 ||
+      msg_info.contentType === 106 ||
+      msg_info.contentType === 114 ||
+      (msg_info.contentType === 110 &&
+        getCurrentMsg(msg_info).customType === 1005)
+    ) {
+      return true;
+    }
+    return false;
+  }
+});
+// 转发入口显示/隐藏
+const isTransmitSend = computed(()=> {
+  const transmit_role_type = appConfig.value.batch_send?.transmit_role_type || []
+  // 群发功能可选角色
+  if(transmit_role_type.length > 0) {
+   let isGroupOwner = (transmit_role_type.includes(1) && userInfo.value.isGroupOwner)
+   let isGroupAdmin  = (transmit_role_type.includes(2) && userInfo.value.isGroupAdmin)
+   let isNormalUser  = (transmit_role_type.includes(3) && !userInfo.value.isGroupAdmin && !userInfo.value.isGroupOwner && !userInfo.value.isInternalUser)
+   let isInternalUser  = (transmit_role_type.includes(4) && userInfo.value.isInternalUser)
+   return isGroupOwner || isGroupAdmin || isNormalUser || isInternalUser
+  }else {
+    return false
+  }
+})
+// 计算属性，根据 isShowPopover 和 userBgSettings 动态计算样式对象
+const popoverStyle = computed(() => {
+  let style = {
+    background: isShowPopover.value ? color2bgCCss(userBgSettings.value && userBgSettings.value.bubbleColor, true) : 'transparent',
+    whiteSpace: 'pre',
+    borderRadius: isShowPopover.value ? '10px 10px 0 10px' : '',
+  };
+  // 如果存在 isBgColor，覆盖 background 样式
+  if (isBgColor) {
+    style.background = isBgColor;
+    style.borderRadius = '14px';
+  }
+  return style;
+});
+
+onMounted(async() => {
+  if(groupChatConfig?.value?.groupID&&userInfo?.value?.userID){
+    const { data } = await OpenIM.getSpecifiedGroupMembersInfo({
+      groupID:groupChatConfig.value.groupID,
+      userIDList: [userInfo.value.userID],
+    });
+    userFlag.value = data&&data[0]?true:false
+  }
+  
+});
+</script>
+
+<template>
+  <van-popover
+    :overlay-class="{ disabled: showPopover }"
+    v-model:show="showPopover"
+    :placement="placement"
+    trigger="manual"
+    :actions="actions.options"
+    @select="handle_popover_onSelect($event, msg_info)"
+  >
+    <template #reference>
+      <div
+        class="popover"
+        :style="popoverStyle"
+        v-long-press:500="hanldeLongPress"
+        ref="popoverRef"
+        @contextmenu.prevent="hanldeLongPress"
+      >
+        <slot name="content" ></slot>
+      </div>
+    </template>
+
+    <template #default>
+      <div class="select">
+        <div
+          v-if="judgeTop && isFileStick"
+          class="cell"
+          @click="handle_popover_onSelect($t('top'), msg_info)"
+        >
+          <div class="left">{{ $t("top") }}</div>
+          <div class="right"><img src="@/assets/zhiding.png" alt="" /></div>
+        </div>
+        <div
+          v-if="judgeQuote"
+          class="cell"
+          @click="handle_popover_onSelect($t('quote'), msg_info)"
+        >
+          <div class="left">{{ $t("quote") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_quote.svg" alt="" />
+          </div>
+        </div>
+        <div
+          v-if="isTransmitSend"
+          class="cell"
+          @click="handle_popover_onSelect($t('menuForward'), msg_info)"
+        >
+          <div class="left">{{ $t("menuForward") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_shares.svg" alt="" />
+          </div>
+        </div>
+        <div
+          v-if="judgeForward"
+          class="cell"
+          @click="handle_popover_onSelect($t('menuMulti'), msg_info)"
+        >
+          <div class="left">{{ $t("menuMulti") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_forward.svg" alt="" />
+          </div>
+        </div>
+        <div
+          class="cell"
+          @click="handle_popover_onSelect($t('menuCopy'), msg_info)"
+          v-if="judgeCopy"
+        >
+          <div class="left">{{ $t("menuCopy") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_copy.svg" alt="" />
+          </div>
+        </div>
+        <div
+          class="cell"
+          @click="handle_popover_onSelect($t('delete'), msg_info)"
+        >
+          <div class="left">{{ $t("delete") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_delete.svg" alt="" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </van-popover>
+</template>
+
+<style scoped lang="less">
+.active-popup {
+  background-color: #fff !important; // 遮罩层颜色
+  backdrop-filter: blur(6px); // 模糊效果
+}
+
+.prevent-menu {
+  -webkit-touch-callout: none;
+  /*系统默认菜单被禁用*/
+  -webkit-user-select: none;
+  /*webkit浏览器*/
+  -khtml-user-select: none;
+  /*早期浏览器*/
+  -moz-user-select: none;
+  /*火狐*/
+  -ms-user-select: none;
+  /*IE10*/
+  user-select: none;
+}
+
+.popover {
+  padding: 10px 12px;
+}
+
+.select {
+  width: 130px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 12px;
+  border-radius: 10px;
+  font-size: 1rem;
+
+  & > .cell {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+
+    & > .right {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  & > .cell:nth-child(n + 1) {
+    border-bottom: 1px solid rgba(242, 244, 245, 1);
+  }
+}
+</style>
diff --git a/src/views/dialogue/groupChat/components/readList.vue b/src/views/dialogue/groupChat/components/readList.vue
new file mode 100644
index 0000000..5080e72
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/readList.vue
@@ -0,0 +1,168 @@
+<script setup>
+import { useAttrs, defineProps, inject, onMounted, useSlots, onUpdated } from 'vue'
+import { useI18n } from "vue-i18n"
+import { CommonLottie } from "@/components/index.js";
+import { storeToRefs } from "pinia";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+const contactStore = useContactStore();
+const {
+  groupMemberInfo,
+  contactList
+} = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const { t } = useI18n()
+const attrs = useAttrs()
+// const { msg } = defineProps(['msg'])
+const props = defineProps({
+  msg: Object,
+})
+const $api = inject('$api')
+const userList = ref([])
+// const get_user_data = async msg => {
+//   if (!msg.attachedInfoElem || !msg.attachedInfoElem.groupHasReadInfo || !msg.attachedInfoElem.groupHasReadInfo.hasReadUserIDList) return
+//   const UserIDs = msg.attachedInfoElem.groupHasReadInfo.hasReadUserIDList
+//   const { data } = await $api.msg_privateChat.query_public_userInfo({ UserIDs })
+//   console.error('UserIDs',UserIDs);
+//   console.error('datadatadata',data);
+//   userList.value = data
+// }
+
+const get_user_data = async msg => {
+  if (!msg.attachedInfoElem || !msg.attachedInfoElem.groupHasReadInfo || !msg.attachedInfoElem.groupHasReadInfo.hasReadUserIDList) return
+  const UserIDs = msg.attachedInfoElem.groupHasReadInfo.hasReadUserIDList;
+  try {
+    // 调用 API 获取用户信息
+    const { data: userData } = await $api.msg_privateChat.query_public_userInfo({ UserIDs });
+    // 将 userData 根据 UserIDs 进行重新排序
+    const sortedData = UserIDs.map(userID => userData.find(user => user.userID === userID));
+    // 更新 data 变量
+    userList.value = sortedData
+  } catch (error) {
+    console.error('获取已读消息失败', error);
+  }
+}
+// 这代码有bug 暂时注释
+// watch(() => attrs.show, async val => {
+//   if (val) await get_user_data(msg)
+// })
+onMounted(async ()=>{
+  await get_user_data(props.msg)
+})
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || []
+      const index = arr.findIndex((item) => item.userID === userID)
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+// const mapContact = val => {
+//   const index = contactList.value.findIndex(
+//     items => items.userID === val.userID
+//   );
+//   if (index != -1) {
+//     return contactList.value[index].remark
+//       ? contactList.value[index].remark
+//       : contactList.value[index].nickname;
+//   }
+//   return val.userID === userInfo.value.userID ? t("you") : val.nickname;
+// };
+// fix 2024-6-13【修复】用户设置群聊备注，在已读人数列表没有显示的群聊备注，与APP不一致问题
+const mapContact = val => {
+  const index = contactList.value.findIndex(
+    items => items.userID === val.userID
+  );
+  const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+  const groupItem = arr.find(item => item.userID === val.userID)
+  const groupRemark = groupItem ? (JSON.parse(groupItem.ex || '{}')?.remark?.value || '') : ''
+  // 在好友中找到好友备注
+  if (index != -1) {
+    const friendItem = contactList.value[index]
+    return friendItem.remark ? friendItem.remark : (groupRemark || friendItem.nickname);
+  } else {
+    return groupRemark || val.nickname;
+  }
+};
+</script>
+
+<template>
+  <!--已读列表-->
+  <van-popup position="bottom" v-bind="attrs" round :style="{ padding: '0' ,height:'60%',}">
+    <div class="readList_box">
+      <div class="title">{{ $t('hasRead') }}</div>
+      <div class="content">
+        <div class="cell" v-for="(val, index) in userList" :key=index>
+          <img :src="val.faceURL.length ? val.faceURL : '/src/assets/svg/msg_user_default.svg'" alt="">
+          <span v-if=" showGroupOwner(val.userID) == ''"  class="nickname">{{ mapContact(val) }}</span>
+          <CommonLottie
+            v-if=" showGroupOwner(val.userID) != ''" 
+            :isGroup="showGroupOwner(val.userID)"
+            :showName="mapContact(val)"
+            :marginLeft="0"
+            :bottom="3"
+          ></CommonLottie>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<style scoped lang="less">
+.readList_box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 16px;
+
+  &>.title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1B1B22;
+  }
+
+  &>.content {
+    align-self: start;
+    width: 100%;
+
+    &>.cell {
+      display: flex;
+      align-items: center;
+      font-size: 1rem;
+      font-weight: 400;
+      margin-top: 20px;
+      .nickname {
+        color: #1B1B22;
+        //超出的文本隐藏
+        overflow:hidden;
+        //溢出用省略号显示
+        text-overflow:ellipsis; 
+        //溢出不换行 
+        white-space:nowrap;
+      }
+      &>img {
+        min-width: 32px;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/components/recorder.js b/src/views/dialogue/groupChat/components/recorder.js
new file mode 100644
index 0000000..dbd3aac
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/recorder.js
@@ -0,0 +1,26 @@
+
+import Recorder from 'recorder-core/recorder.mp3.min' //已包含recorder-core和mp3格式支持
+import { useWindowSize } from '@vant/use';
+
+//可选的插件支持项
+import 'recorder-core/src/extensions/waveview'
+
+
+export default function init() {
+  const { width, height } = useWindowSize();
+  console.log(width.value)
+  let wave = Recorder.WaveView({ width: width.value, height: 10 });
+  const rec = Recorder({ //本配置参数请参考下面的文档，有详细介绍
+    type: "mp3", sampleRate: 16000, bitRate: 16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
+    ,
+    onProcess: function (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
+      //录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)
+      //可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式
+      //可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
+      //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
+      wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
+    }
+  })
+  rec.wave = wave
+  return rec
+}
\ No newline at end of file
diff --git a/src/views/dialogue/groupChat/components/redpktDetail.vue b/src/views/dialogue/groupChat/components/redpktDetail.vue
new file mode 100644
index 0000000..a713803
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/redpktDetail.vue
@@ -0,0 +1,535 @@
+<script setup>
+import { formatTimestamps } from "@/utils/tools";
+import { ref, onMounted, watchEffect, computed, reactive } from "vue";
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRoute, useRouter } from "vue-router";
+import { showToast } from "vant";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import defaultStar from "@/assets/star.svg";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo, appConfig, groupChatConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setGroupId, setGroupSessionInfo, setmyGroupInfo } = contactStore;
+const { groupId, groupMemberInfo, contactList, myGroupInfo } = storeToRefs(contactStore);
+const $api = inject("$api");
+const router = useRouter();
+const route = useRoute();
+const OpenIM = getSDK();
+const redpktDetailRef = ref(null);
+useGrade(redpktDetailRef, 3);
+const loading = ref(false);
+const redpktInfo = ref({});
+const data = reactive({
+  redpktgetList: []
+});
+const myAmount = ref("");
+onMounted(() => {
+  getDetail();
+  getRedpktgetList();
+});
+// 获取红包领取详情
+const getDetail = async () => {
+  if (route.query.id) {
+    loading.value = true;
+    const res = await $api.contact.getRedpktgetDetail({
+      envelopeId: route.query.id
+    });
+    loading.value = false;
+    redpktInfo.value = res.data;
+  }
+};
+// 获取红包领取人员列表
+const getRedpktgetList = async () => {
+  const res = await $api.contact.getRedpktgetList({
+    envelopeId: route.query.id,
+    pageCount: 10000000,
+    pageIndex: 1
+  });
+  if (res.code === 0) {
+    data.redpktgetList = res.data.receivers ? [...res.data.receivers] : [];
+    console.log('redpktgetList',data.redpktgetList);
+  }
+};
+const amountFilter = val => {
+  return val ? val.toFixed(2) : "";
+};
+// 红包全部领取完成时间计算
+const getCompleteTime = () => {
+  const timer =
+    (data.redpktgetList[0].receiveTime - redpktInfo.value.sendTime) / 60; // 领取完毕时间转为分钟
+  if (timer < 1) {
+    return 1 + t("minuteOut");
+  } else if (timer <= 60) {
+    return Math.ceil(timer) + t("minuteOut");
+  }
+  if (timer > 60) {
+    return Math.ceil(timer / 60) + t("hourOut");
+  }
+};
+// 红包领取状态判断
+const filterStatus = item => {
+  let text = "";
+  let amount = amountFilter(redpktInfo.value.totalAmount);
+  switch (item.type) {
+    case 1:
+      if (data.redpktgetList.length) {
+        if (
+          redpktInfo.value.receivedQuantity !== redpktInfo.value.totalQuantity
+        ) {
+          text = `${t("get")}${redpktInfo.value.receivedQuantity}/${
+            redpktInfo.value.totalQuantity
+          }`;
+        } else if (
+          redpktInfo.value.receivedQuantity === redpktInfo.value.totalQuantity
+        ) {
+          text =
+            redpktInfo.value.totalQuantity +
+            t("gong") +
+            amountFilter(redpktInfo.value.totalAmount) +
+            "," +
+            getCompleteTime();
+        }
+      } else {
+        text = `${redpktInfo.value.totalQuantity}${t("gong")}${amount}, ${t(
+          "waiting"
+        )}`;
+      }
+      break;
+    case 2:
+      if (data.redpktgetList.length) {
+        text = `${redpktInfo.value.totalQuantity}${t("gong")}${amount}`;
+      } else {
+        text = `${redpktInfo.value.totalQuantity}${t("gong")}${amount}, ${t(
+          "waiting"
+        )}`;
+      }
+      break;
+    case 3:
+      if (data.redpktgetList.length) {
+        if (
+          redpktInfo.value.receivedQuantity !== redpktInfo.value.totalQuantity
+        ) {
+          text = `${t("get")}${redpktInfo.value.receivedQuantity}/${
+            redpktInfo.value.totalQuantity
+          }`;
+        } else if (
+          redpktInfo.value.receivedQuantity === redpktInfo.value.totalQuantity
+        ) {
+          text =
+            redpktInfo.value.totalQuantity +
+            t("gong") +
+            amountFilter(redpktInfo.value.totalAmount) +
+            "," +
+            getCompleteTime();
+        }
+      } else {
+        text = `${redpktInfo.value.totalQuantity}${t("gong")}${amount}, ${t(
+          "waiting"
+        )}`;
+      }
+      break;
+  }
+  return text;
+};
+const myAmountFilter = computed(() => {
+  const myArr = data.redpktgetList.length
+    ? data.redpktgetList.filter(el => el.userId === userInfo.value.userID)
+    : [];
+  myAmount.value = myArr.length ? myArr[0].amount.toFixed(2) : "";
+  return myAmount.value;
+});
+const handleLeft = () => {
+  if (route.query.label) {
+  } else {
+    router.push(`/home/dialogue/groupChat/${groupId.value}`);
+  }
+};
+const showGroupOwner = computed(() => {
+    return userID => {
+    if (userID) {
+      const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || []
+      const index = arr.findIndex((item) => item.userID === userID)
+      if (index != -1) {
+        if (arr[index].roleLevel === 100) {
+          return "group";
+        }
+        if (arr[index].roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+const mapContact = val => {
+  let id = val.userId ? val.userId :val.userID
+  const index = contactList.value.findIndex(
+    items => items.userID === id
+  );
+  // 在群聊中找到群聊备注
+  const arr = groupMemberInfo.value[groupChatConfig.value.groupID] || [];
+  const groupItem = arr.find(item => item.userID === id)
+  const groupRemark = groupItem && myGroupInfo.value.roleLevel !== 20 ? (JSON.parse(groupItem.ex || '{}')?.remark?.value || '') : ''
+  // 在好友中找到好友备注
+  if (index != -1) {
+    // 群聊中展示权限
+    // 好友备注 -->  群聊备注 --> 用户个人昵称  --> 群聊昵称
+    const friendItem = contactList.value[index]
+    return friendItem.remark ? friendItem.remark : (groupRemark || friendItem.nickname);
+  } else {
+    return groupRemark || val.nickName;
+  }
+};
+</script>
+
+<template>
+  <div ref="redpktDetailRef" class="detailSet-wrap ">
+    <div class="content">
+      <AppNavBar
+        :title="$t('redPacketInfo')"
+        left-arrow
+        views_grade="thirdly_view"
+        @click-left="handleLeft"
+      >
+      </AppNavBar>
+      <div class="content_center">
+        <van-loading v-if="loading" />
+        <div v-else>
+          <div class="content_center_top">
+            <Avatar
+              width="24"
+              height="24"
+              :url="redpktInfo.avatar"
+              :name="redpktInfo.nickName"
+              @updateUrl="url => redpktInfo.avatar = url"
+            ></Avatar>
+            <span class="top_text"
+              ><span class="top_name">{{ mapContact(redpktInfo) }}</span>
+              {{
+                $t("sended") +
+                  (redpktInfo.type === 2 ? $t("x_is_personal") : "") +
+                  $t("envelope")
+              }}</span
+            >
+          </div>
+          <div class="content_center_text">{{ redpktInfo.remark }}</div>
+          <div v-if="myAmountFilter" class="content_center_num">
+            {{ myAmountFilter }}
+          </div>
+          <div
+            v-if="myAmountFilter"
+            class="content_center_bottom"
+            @click="
+              router.push({
+                path: '/home/my/balance',
+                query: { source: 'redpktDetail', id: redpktInfo.envelopeId }
+              })
+            "
+          >
+            <img
+              :src="
+                appConfig.envelope_permission.intergralIcon
+                  ? appConfig.envelope_permission.intergralIcon
+                  : defaultStar
+              "
+              alt=""
+            /><span>{{ $t("saveToAccount") }}</span
+            ><img src="@/assets/svg/youjiantou.svg" alt="" />
+          </div>
+        </div>
+        <div class="center_icon">
+          <img src="@/assets/hongbao.svg" alt="" />
+        </div>
+      </div>
+      <div class="content_bottom">
+        <div class="content_bottom_title">
+          <span>{{ filterStatus(redpktInfo) }}</span>
+        </div>
+        <div class="content_bottom_item">
+          <van-cell-group :border="false">
+            <van-cell v-for="(item, index) in data.redpktgetList" :key="index">
+              <template #title>
+                <div class="item-content">
+                  <div class="item-img">
+                    <Avatar
+                      width="40"
+                      height="40"
+                      :url="item.avatar"
+                      :name="item.nickName"
+                      @updateUrl="url => item.avatar = url"
+                    >
+                    </Avatar>
+                  </div>
+                  <div class="item-text">
+                    <template v-if="showGroupOwner(item.userId) != ''">
+                      <CommonLottie
+                        :isGroup="showGroupOwner(item.userId)"
+                        :width="120"
+                        :height="20"
+                        :showName="mapContact(item)"
+                      >
+                      </CommonLottie>
+                    </template>
+                    <div
+                      class="item-name"
+                      v-if="showGroupOwner(item.userId) == ''"
+                    >
+                      {{ mapContact(item) }}
+                    </div>
+                    <div class="item-date">
+                      {{ formatTimestamps(item.receiveTime) }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template #value>
+                <div class="content_item_right">
+                  <span class="right_num"
+                    >+{{ amountFilter(item.amount) }}
+                    <img
+                      :src="
+                        appConfig.envelope_permission.intergralIcon
+                          ? appConfig.envelope_permission.intergralIcon
+                          : defaultStar
+                      "
+                      alt=""
+                  /></span>
+
+                  <span class="right_text">{{
+                    item.isMax ? $t("best") : ""
+                  }}</span>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </div>
+      </div>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #f8f8fb;
+  //   height: 100vh;
+  //   padding-top: 56px;
+  //   width: 100%;
+  overflow-y: auto;
+}
+
+:deep(.van-cell) {
+  justify-content: space-between;
+
+  .van-cell__title {
+    width: 200px;
+    flex: none;
+  }
+}
+
+.content {
+  padding: 0 12px;
+  flex: 1;
+  position: relative;
+}
+
+.content_center {
+  position: relative;
+  width: 100%;
+  // height: 116px;
+  margin: 103px 0px 20px;
+  background-color: #fff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 38px 0 30px 0;
+
+  > div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .content_center_top {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    justify-content: center;
+
+    .top_text {
+      display: flex;
+      margin-left: 5px;
+      color: #000;
+      text-align: center;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+
+      .top_name {
+        max-width: 100px;
+        overflow: hidden;
+        /* 当内容溢出时隐藏 */
+        text-overflow: ellipsis;
+        /* 使用省略号表示被隐藏的内容 */
+        white-space: nowrap;
+        /* 不自动换行 */
+      }
+    }
+  }
+
+  .content_center_text {
+    width: 100%;
+    text-align: center;
+    padding: 0 20px;
+    // height: 40px;
+    margin: 8px 0;
+    color: #000;
+    opacity: 0.4;
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    // display: -webkit-box;
+    // -webkit-line-clamp: 3;
+    // -webkit-box-orient: vertical;
+  }
+
+  .content_center_num {
+    color: #000;
+    text-align: center;
+    font-family: "PingFang SC";
+    font-size: 2.1875rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    margin: 5px 0;
+  }
+
+  .content_center_bottom {
+    display: flex;
+    align-items: center;
+    // margin: 8px 0;
+    color: #000;
+    font-size: 0.75rem;
+    cursor: pointer;
+
+    span {
+      opacity: 0.4;
+      margin-left: 5px;
+    }
+
+    img {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  .center_icon {
+    width: 54px;
+    height: 54px;
+    position: absolute;
+    top: -27px;
+    left: calc(50% - 27px);
+  }
+}
+
+.content_bottom {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+
+  .content_bottom_title {
+    height: 40px;
+    color: #76767a;
+    text-align: center;
+    font-family: "PingFang SC";
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 40px;
+    border-bottom: 1px solid #f4f4f4;
+  }
+
+  .content_bottom_item {
+    .item-content {
+      display: flex;
+      justify-content: flex-start;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .item-img {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+
+    .item-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      font-family: PingFang SC;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      width: 100%;
+      position: relative;
+
+      .item-name {
+        color: #000;
+        font-size: 0.875rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100px;
+      }
+
+      .item-date {
+        color: #979797;
+        font-size: 0.75rem;
+      }
+    }
+
+    .content_item_right {
+      display: flex;
+      flex-direction: column;
+
+      .right_num {
+        color: #000;
+        font-size: 0.875rem;
+        display: flex;
+        justify-content: flex-end;
+
+        img {
+          width: 20px;
+          height: 20px;
+          margin-left: 5px;
+        }
+      }
+
+      .right_text {
+        color: #f5465d;
+        font-size: 0.75rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dialogue/groupChat/components/selectUser.vue b/src/views/dialogue/groupChat/components/selectUser.vue
new file mode 100644
index 0000000..ec304ba
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/selectUser.vue
@@ -0,0 +1,271 @@
+<script setup>
+import { ref ,onMounted, defineProps, defineEmits } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import icon2 from '@/assets/shanchu.png'
+import { getSDK } from '@/utils/openIM/sdk/index.js' 
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from "pinia";
+import { CommonLottie } from "@/components/index.js";
+const { t } = useI18n()
+const contactStore = useContactStore();
+const {
+    groupId,
+    myGroupInfo,
+    groupMemberInfo,
+    groupInfo,
+} = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { userInfo, groupChatConfig } = storeToRefs(userStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 4)
+const dataList = ref([])
+const currentUserID = ref('')
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+const emits = defineEmits(['close'])
+onMounted(() => {
+    getMemberList()
+    console.log(dataList.value);
+})
+
+// 获取指定群的群成员信息
+const getMemberList = () => {
+  let list = groupMemberInfo.value[groupInfo.value.groupID] || [];
+  dataList.value = list
+    .map(item => {
+      const groupRemark = JSON.parse(item.ex || '{}').remark?.value || ''
+      return {
+        ...item,
+        showName: item.remark || (groupRemark || item.nickname) || item.groupNickName,
+        groupRemark,
+      };
+    })
+    .filter(item => item.userID !== userInfo.value.userID);
+};
+const changeColor = (text) => {
+    if (text.includes(searchForm.value)) { // 判断段落内容是否包含指定文本
+        var regex = new RegExp(searchForm.value, 'g'); // 创建正则表达式对象，设置全局标志'g'
+        var replacedText = text.replace(regex, `<span style="color: #0095F6;">${searchForm.value}</span>`); // 将匹配到的文本用红色样式包裹起来
+        return replacedText; // 更新段落内容
+    }
+}
+const submitUser = (item) => {
+    emits('close',item)
+}
+
+</script>
+
+<template>
+  <div v-if="props.show" class="detailSet">
+    <div class="detail_content" >
+        <AppNavBar :title="$t('groupMember')" left-arrow views_grade="fourth_view" @click-left="emits('close')">
+        </AppNavBar>
+        <div class="detailSet-wrap">
+            <div class="detailSet-content">
+                <div v-for="(item, index) in dataList" :key="index">
+                        <van-cell :title="item.nickname" @click="submitUser(item)">
+                            <template #title>
+                                    <Avatar width="32" height="32" :url="item.faceURL" :name="item.nickname" @updateUrl="url => item.faceURL = url"></Avatar>
+                                <span class="custom-title">{{ item.showName }}</span>
+                            </template>
+                        </van-cell>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+    :deep(.van-index-bar__sidebar) {
+        right: 15% !important;
+    }
+    .fourth_view_nav {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        left: 0;
+    }
+}
+.detailSet {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow-y: auto;
+    background-color: #fff;
+    // position: relative;
+    .detail_content {
+        height: 100%;
+        // position: relative;
+        flex: 1;
+    }
+}
+.detailSet-wrap, .search-warp {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+//   overflow-y:auto;
+  padding: 56px 0 66px 0;
+  position: relative;
+  .detailSet-content  {
+    // padding-bottom: 66px;
+    height: calc(100%);
+    overflow: auto;
+    :deep(.van-cell) {
+        display: flex;
+        align-items: center;
+        padding-right: 16px;
+        .first-cell {
+            :deep(.van-cell) {
+                height: 40px;
+            }
+        }
+        .second-cell {
+            :deep(.van-cell) {
+                height: 72px;
+            }
+        }
+    }
+    .custom-title {
+        // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    :deep(.van-swipe-cell__right) {
+        right: -1px;
+        .van-button {
+            width: 70px;
+            height: 56px;
+        }
+    }
+    :deep(.van-cell) {
+        height: 56px;
+    }
+    .add-cell {
+        :deep(.van-cell__title) {
+            display: flex;
+            align-items: center;
+            .custom-title {
+                // margin-left: 10px;
+                color: #1B1B22;
+                font-family: PingFang SC;
+                font-size: 1rem;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+            }
+        }
+    }
+    :deep(.van-swipe-cell__wrapper) {
+        .custom-title {
+            margin-left: 10px;
+        }
+    }
+  }
+}
+.footer {
+        position: absolute;
+        bottom: 0;
+        height: 66px;
+        width: 100%;
+        padding: 10px 16px;
+        background-color: #fff;
+    }
+.dialog-text {
+    padding: 20px 0 24px 0;
+    text-align: center;
+    color: #76767A;
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+    letter-spacing: 0.28px;
+  }
+:deep(.van-dialog__confirm) {
+color: #FC5A50;
+}
+.search-input {
+margin: 8px 0;
+:deep(.van-cell) {
+    height: 36px !important;
+}
+}
+.index-bar {
+:deep(.van-index-bar__sidebar) {
+    color: #A4A4A7;
+    :deep(.van-index-anchor) {
+        color: #A4A4A7 !important;
+    }
+}
+}
+:deep(.van-cell__title) {
+    display: flex;
+    align-items: center;
+}
+:deep(.van-search__action) {
+    color: #0095F6;
+}
+:deep(.van-cell) {
+    .van-cell__title {
+        .custom-title {
+            margin-left: 10px;
+        }
+    }
+}
+.del-icon {
+    margin-right: 10px;
+}
+.empety-warp {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    margin-top: 135px;
+    div {
+        display: flex;
+        justify-content: center;
+    }
+    div:nth-child(2) {
+        margin-top: 30px;
+        color: var(--60, #76767A);
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 21px; /* 150% */
+        letter-spacing: 0.5px;
+    }
+}
+:deep(.van-badge__wrapper) {
+  display: flex;
+  align-items: center;
+}
+.search-warp {
+    padding-top: 0;
+}
+:deep(.van-cell__value) {
+    padding-right: 10px;
+}
+</style>
diff --git a/src/views/dialogue/groupChat/components/sendRedpkt.vue b/src/views/dialogue/groupChat/components/sendRedpkt.vue
new file mode 100644
index 0000000..768aed0
--- /dev/null
+++ b/src/views/dialogue/groupChat/components/sendRedpkt.vue
@@ -0,0 +1,512 @@
+<script setup>
+import { ref, onMounted, watchEffect, computed } from 'vue'
+import { AppNavBar, CodeInput } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import selectUser from "./selectUser.vue"
+import { storeToRefs } from "pinia";
+import { encrypt } from "@/utils/index.js";
+import use from "@/use";
+const { useUid } = use;
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { setUserInfo } = userStore;
+const contactStore = useContactStore();
+const { setGroupId, setmyGroupInfo } = contactStore;
+const { groupId, } = storeToRefs(contactStore);
+const $api = inject("$api");
+const router = useRouter()
+const OpenIM = getSDK()
+const redpktDetailRef = ref(null)
+useGrade(redpktDetailRef, 3,'',()=>{
+    router.back()
+});
+const loading = ref(false)
+const props = defineProps({
+})
+const actions = [
+    { name: t('pin'), type: 3 },
+    { name: t('putong'), type: 1 },
+    { name: t('zhuanshu'), type: 2 },
+];
+const detailList = ref([
+    {
+        userInfo: {
+            nickname: '张三'
+        }
+    },
+])
+const form = ref({
+    type: 3,
+    amount: null,
+    quantity: "",
+    remark: t('dajidali'),
+    code: '',
+    receiverAvatar: '',
+    receiverNickName: '',
+    userID: '',
+    allAmount: ''
+})
+const selectTypeShow = ref(false)
+const showPop = ref(false)
+const showKeyboard = ref(true)
+const myGroupInfo = ref({})
+const selectUserShow = ref(false)
+const groupMemberCount = ref('')
+// const noticeText = ref('')
+onMounted(() => {
+    getMyGroupInfo()
+    getGroupInfo()
+})
+const btnDisabled = computed(() => {
+    if (form.value.type === 2) {
+        if (form.value.amount >= 0.01) {
+            return false
+        } else {
+            return true
+        }
+    } else if (form.value.type === 3) {
+        if ((form.value.amount / form.value.quantity) >= 0.01 && form.value.quantity > 0 && form.value.quantity <= groupMemberCount.value) {
+            return false // 拼手气单个红包不能小于0.01
+        } else {
+            return true
+        }
+    } else if (form.value.type === 1) {
+        if (form.value.amount >= 0.01 && form.value.quantity > 0 && form.value.quantity <= groupMemberCount.value) {
+            return false
+        } else {
+            return true
+        }
+    }
+})
+// 获取指定群信息
+const getGroupInfo = () => {
+    let groupID = []
+    groupID = [groupId.value]
+    OpenIM.getSpecifiedGroupsInfo(groupID).then(async res => {
+        console.log(res, 111);
+        groupMemberCount.value = res.data.length ? res.data[0].memberCount : 0
+    })
+}
+// 获取我的群信息
+const getMyGroupInfo = () => {
+    let params = {
+        groupID: '',
+        keywordList: [userInfo.value.userID],
+        isSearchUserID: true,
+        isSearchMemberNickname: false,
+        offset: 0,
+        count: 20,
+    }
+    params.groupID = groupId.value
+    OpenIM.searchGroupMembers(params).then(res => {
+        console.log(res, 'res');
+        if (res.data.length) {
+            myGroupInfo.value = res.data[0]
+            myGroupInfo.value.ex = myGroupInfo.value.ex && JSON.parse(myGroupInfo.value.ex)
+            setmyGroupInfo(myGroupInfo.value)
+            console.log(res, 'res', myGroupInfo.value.ex);
+        }
+    })
+}
+const onCancel = () => {
+
+}
+const selectClick = (item) => {
+    if (item.type === form.value.type) return
+    form.value.type = item.type
+    switch (item.type) {
+        case 1:
+            form.value.type = item.type
+            break;
+        case 2:
+            form.value.quantity = 1
+            break;
+        case 3:
+            form.value.type = item.type
+            break;
+    }
+    console.log(form.value.type);
+}
+const redPacketTypeFilter = computed(() => {
+    return actions.filter(el => el.type === form.value.type)[0].name
+})
+// 发红包
+const sendClick = async () => {
+    loading.value = true
+    // const res = await getCode()
+    loading.value = false
+    showPop.value = true
+    // if (res.code === 0) {
+    //     showPop.value = true
+    // }
+}
+// 发送验证码
+const getCode = async () => {
+    let params = {
+        device_id: useUid(),
+        platform: 5,
+        verify_type: 4,
+        area_code: userInfo.value.areaCode,
+        phone: userInfo.value.phone,
+        verify_by: 1
+    }
+    const res = await $api.login.sendCode(params)
+    return res
+}
+// 验证验证码
+const checkCode = async () => {
+    let params = {
+        area_code: userInfo.value.areaCode,
+        phone: userInfo.value.phone,
+        verify_by: 1,
+        verify_code: form.value.code
+    }
+    const res = await $api.login.checkCode(params)
+    if (res.code === 0) {
+        submitSend()
+    }
+}
+const submitSend = async () => {
+    let params = {
+        amount: parseFloat(form.value.amount), // 红包金额
+        groupId: groupId.value, // 群ID
+        platform: 5, // 平台Id
+        quantity: parseFloat(form.value.quantity), // 红包数量
+        receiverAvatar: '', // 专属红包的用户的群头像
+        receiverNickName: '', // 专属红包的用户的群昵称
+        remark: form.value.remark, // 红包的备注
+        senderAvatar: myGroupInfo.value.faceURL, // 发送人的群头像
+        senderNickname: myGroupInfo.value.nickname, // 发送人的群昵称
+        toUserId: '', // 专属红包的用户ID
+        type: form.value.type, // 红包类型 1.普通红包 2.专属红包 3.拼手气红包
+    }
+    if (form.value.type === 2) { // 专属红包
+        form.value.quantity = 1
+        params.receiverAvatar = form.value.receiverAvatar
+        params.receiverNickName = form.value.receiverNickName
+        params.toUserId = form.value.userID
+    } else {
+        if (form.value.type === 1) {
+            params.amount = params.amount * params.quantity
+        }
+        params.receiverAvatar = ''
+        params.receiverNickName = ''
+        params.toUserId = ''
+    }
+    const res = await $api.contact.sendRedpkt(params)
+    if (res.code === 0) {
+        router.push(`/home/dialogue/groupChat/${groupId.value}`)
+    }
+    form.value.code = ''
+    showPop.value = false
+    const result = await $api.login.userInfo();
+    if (result.code != 0) return
+    setUserInfo(result.data);
+}
+const selectUserClose = (item) => {
+    console.log(item);
+    if (item) {
+        form.value.receiverAvatar = item.faceURL
+        form.value.receiverNickName = item.showName
+        form.value.userID = item.userID
+    }
+    selectUserShow.value = false
+}
+const handleCodeChange = async (val) => {
+    form.value.code = val
+    if (val.length === 6) {
+        const params = {
+            property_password: encrypt(val),
+            user_id: userInfo.value.userID
+        };
+        // 验证支付密码是否正确
+        const res = await $api.user.checkPayPassword(params)
+        
+        if (res.code != 0) return;
+        submitSend()
+    }
+}
+const filterPhone = (phone) => {
+    return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
+}
+const noticeText = computed(() => {
+    if (form.value.quantity > groupMemberCount.value) {
+        return t('maxMemberNumber')
+    } else if (form.value.type === 1 && form.value.amount < 0.01) {
+        return t('redPackageCountTip')
+    } else if (form.value.type === 3 && form.value.amount / form.value.quantity < 0.01) {
+        return t('redPackageCountTip')
+    }
+})
+const formatter = (val) => {
+    if (val.indexOf(".")) {
+        let result = val.slice(val.indexOf('.') + 1)
+        console.log(result, val);
+        if (result.length > 2) {
+            return parseFloat(val).toFixed(2)
+        }
+    }
+}
+
+const codeInputRef = ref(null)
+const payClose = () => {
+    codeInputRef.value.handleCodeClose()
+    form.value.code = ''
+    showPop.value = false
+}
+</script>
+
+<template>
+    <div ref="redpktDetailRef" class="detailSet-wrap">
+        <div class="content">
+            <AppNavBar :title="$t('sendRedPacket')" left-arrow views_grade="thirdly_view" @click-left="router.back()">
+                <template #left>
+                    <img src="@/assets/svg/guanbi.svg" alt="">
+                </template>
+            </AppNavBar>
+            <van-notice-bar
+                v-if="form.quantity > groupMemberCount || (form.type === 1 && form.amount && form.amount < 0.01) || (form.type === 3 && form.amount && (form.amount / form.quantity < 0.01))"
+                color="#E85D4B" background="#FFEDEF">
+                {{ noticeText }}
+            </van-notice-bar>
+            <div class="content_center">
+                <div class="content_type" @click="selectTypeShow = true">
+                    <span>{{$t('redPacketType')}}</span>
+                    <div><span>{{ redPacketTypeFilter }}</span><img src="@/assets/svg/youjiantou.svg" alt=""></div>
+                </div>
+                <div v-if="form.type === 2">
+                    <van-cell class="select_user" :title="$t('selectUser')" is-link @click="selectUserShow = true">
+                        <template #value>
+                            <div v-if="form.receiverNickName">
+                                <Avatar width="28" height="28" :url="form.receiverAvatar" :name="form.receiverNickName" @updateUrl="url => form.receiverAvatar = url">
+                                </Avatar>
+                                <span>{{ form.receiverNickName }}</span>
+                            </div>
+                        </template>
+                    </van-cell>
+                </div>
+                <div v-if="form.type !== 2">
+                    <van-field v-model="form.quantity" :label="$t('redPacketNumber')" placeholder="0" input-align="right"
+                        autocomplete="off" type="digit">
+                        <template #left-icon>
+                            <div class="field_icon">
+                                <img src="@/assets/svg/hongbao-small.svg" alt="">
+                            </div>
+                        </template>
+                        <template #extra>
+                            <div class="extra_right" style="margin-left: 5px;">{{$t('ge')}}</div>
+                        </template>
+                    </van-field>
+                </div>
+                <div>
+                    <van-field v-model="form.amount" :label="form.type === 1 ? $t('eachNumber') : $t('number')"
+                        placeholder="0.00" input-align="right" autocomplete="off" type="number">
+                        <template #left-icon>
+                            <div class="field_icon">
+                                <img src="@/assets/svg/zuanshi.svg" alt="">
+                            </div>
+                        </template>
+                    </van-field>
+                </div>
+                <div>
+                    <van-field v-model="form.remark" :maxlength="25" />
+                </div>
+            </div>
+            <div class="content_bottom">
+                <div class="content_bottom_num">
+                    {{ form.type === 1 ? form.amount * form.quantity : form.amount }}
+                </div>
+                <div class="btn">
+                    <van-button :loading="loading" :disabled="btnDisabled" color="#1B1B22"
+                        @click="sendClick">{{$t('sendRedPacket')}}</van-button>
+                </div>
+            </div>
+        </div>
+        <van-action-sheet v-model:show="selectTypeShow" :actions="actions" :cancel-text="$t('cancel')" close-on-click-action
+            @cancel="onCancel" @select="selectClick" />
+        <!-- 圆角弹窗（底部） -->
+        <van-popup v-model:show="showPop" round position="bottom" :style="{ height: '310px' }" @close="payClose">
+            <van-nav-bar :title="$t('checkVerity')" left-arrow @click-left="payClose">
+                <template #left>
+                    <img src="@/assets/svg/guanbi.svg" alt="">
+                </template>
+            </van-nav-bar>
+            <div class="pop_center">
+                <div class="text">{{ $t('sendRedPacket') }}</div>
+                <div class="content_bottom_num">
+                    {{ form.type === 1 ? form.amount * form.quantity : form.amount }}
+                </div>
+
+            </div>
+            <div>
+                <van-cell :title="$t('balance')">
+                    <template #right-icon>
+                        <div class="balance" @click="router.push({ path: `/home/my/balance`, query: { suorce: 'redpkt' } })">
+                            <span>{{ userInfo.balance }}</span>
+                            <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+                        </div>
+                    </template>
+                </van-cell>
+            </div>
+            <CodeInput ref="codeInputRef" :inputType="'password'" class="input-num" :len="6" @change="handleCodeChange"/>
+            <div class="button_num">
+                {{ $t('inputPayPassword') }}
+                <!-- <span style="margin-left: 5px;">{{ filterPhone(userInfo.phone) }}</span> -->
+            </div>
+        </van-popup>
+    </div>
+    <selectUser :show="selectUserShow" @close="selectUserClose"></selectUser>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+    // position: relative;
+    background: #F8F8FB;
+    overflow-y: auto;
+}
+
+.content {
+    padding: 0 16px;
+    flex: 1;
+    position: relative;
+    padding-top: 56px;
+}
+
+.content_center {
+    >div {
+        margin-bottom: 12px;
+    }
+
+    .content_type {
+        height: 52px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0;
+        cursor: pointer;
+    }
+
+    .field_icon {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+}
+
+.content_bottom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-top: 30px;
+
+    .content_bottom_num {
+        color: #000;
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 2.125rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin-bottom: 18px;
+    }
+
+    .btn {
+        width: 160px;
+
+        :deep(.van-button) {
+            width: 100%;
+        }
+    }
+
+    .extra_right {
+        padding-left: 10px;
+    }
+}
+
+.pop_center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .text {
+        margin: 10px 0;
+    }
+
+    :deep(.content_bottom_num) {
+        color: #000;
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 2.125rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin-bottom: 5px;
+    }
+
+}
+
+:deep(.van-password-input__item) {
+    background-color: #eff2f5;
+    border-radius: 10px;
+}
+
+.balance {
+    display: flex;
+    align-items: center;
+
+    span {
+        color: #979797;
+    }
+}
+
+.select_user {
+    :deep(.van-cell__value) {
+        display: flex;
+        justify-content: flex-end;
+
+        div {
+            display: flex;
+        }
+    }
+
+    span {
+        display: flex;
+        align-self: center;
+        margin-left: 10px;
+    }
+}
+
+.input-num {
+    :deep(.validate_label) {
+        justify-content: space-around;
+        padding: 0 16px;
+        width: 100%;
+
+        .validate_item {
+            width: 45px;
+            height: 48px;
+            margin-right: 0;
+        }
+    }
+}
+
+.button_num {
+    color: #979797;
+    padding: 0 16px;
+    font-size: 0.75rem;
+    margin: 10px 0;
+}
+
+:deep(.van-button) {
+    border-radius: 12px;
+}
+</style>
diff --git a/src/views/dialogue/groupChat/groupChat.js b/src/views/dialogue/groupChat/groupChat.js
new file mode 100644
index 0000000..b295957
--- /dev/null
+++ b/src/views/dialogue/groupChat/groupChat.js
@@ -0,0 +1,164 @@
+import { ref, reactive } from 'vue';
+import { getSDK } from "@/utils/openIM";
+const OpenIM = getSDK();
+class BurnMsg {
+  constructor(readDeleteTime = 0) {
+    this.readDeleteTime = readDeleteTime;
+  }
+
+  static fromJson(json) {
+    const readDeleteTime = json['read_delete_time'] ?? 0;
+    return new BurnMsg(readDeleteTime);
+  }
+
+  toJson() {
+    const data = {};
+    data['read_delete_time'] = this.readDeleteTime;
+    return data;
+  }
+}
+class ExElem {
+  constructor() {
+    this.burnMsg = null;
+  }
+
+  static fromJson(json) {
+    const exElem = new ExElem();
+    exElem.burnMsg = json['burn_msg'] !== null ? BurnMsg.fromJson(json['burn_msg']) : null;
+    return exElem;
+  }
+
+  toJson() {
+    const data = {};
+    data['burn_msg'] = this.burnMsg !== null ? this.burnMsg.toJson() : null;
+    return data;
+  }
+}
+
+class LocalExElem {
+  constructor() {
+    this.status = null;
+    this.playState = null;
+    this.surplusRDTime = null;
+  }
+
+  static fromJson(json) {
+    const localExElem = new LocalExElem();
+    localExElem.status = json['status'];
+    localExElem.playState = json['playState'];
+    localExElem.surplusRDTime = json['surplusRDTime'];
+    return localExElem;
+  }
+
+  toJson() {
+    const data = {};
+    data['status'] = this.status;
+    data['playState'] = this.playState;
+    data['surplusRDTime'] = this.surplusRDTime;
+    return data;
+  }
+}
+
+
+export class MessageExData {
+  constructor(message) {
+    this.message = message;
+    this.exElem = null;
+    this.localExElem = null;
+    this.delete = false;
+    this.remainTime = 0;
+
+    console.log("new==>" + message.ex + "," + message.localEx);
+
+    if (message.localEx === "delete") {
+      this.delete = true;
+      return;
+    }
+
+    if (message.ex !== null && message.ex !== "") {
+      try {
+        this.exElem = ExElem.fromJson(JSON.parse(message.ex));
+      } catch (e) {}
+    }
+
+    if (message.localEx !== null && message.localEx !== "") {
+      try {
+        if (message.localEx === "delete") {
+          this.delete = true;
+        } else {
+          this.localExElem = LocalExElem.fromJson(JSON.parse(message.localEx));
+        }
+      } catch (e) {}
+    }
+
+    this.exElem = this.exElem || new ExElem();
+    this.localExElem = this.localExElem || new LocalExElem();
+
+    if (this.delete) {
+      this.remainTime = 0;
+    } else {
+      this.remainTime = this.localExElem.surplusRDTime || this.exElem.burnMsg?.readDeleteTime || 0;
+    }
+
+    console.log("new==>remainTime=" + this.remainTime);
+  }
+  //标记这个消息删除
+  setDelete() {
+    this.delete = true;
+  }
+  //语音消息-视频消息-文本消息-设置加载、播放完毕
+  setPlayCompleted() {
+    this.localExElem.playState = "1";
+  }
+  //语音消息-视频消息-文本消息返回
+  isPlayCompleted() {
+    return this.localExElem.playState === "1";
+  }
+  //设置阅读时间
+  setReadDeleteTime(seconds) {
+    if (!this.exElem.burnMsg) {
+      this.exElem.burnMsg = new BurnMsg(seconds);
+    } else {
+      this.exElem.burnMsg.readDeleteTime = seconds;
+    }
+  }
+  //设置剩余阅读时间
+  saveSurplusReadDeleteTime(seconds) {
+    if (this.delete) return;
+    this.localExElem.surplusRDTime = seconds;
+  }
+
+  getLocalExStr() {
+    return JSON.stringify(this.localExElem.toJson());
+  }
+
+  downTime() {
+    this.remainTime--;
+    console.log("downTime:" + this.remainTime);
+    return this.remainTime;
+  }
+
+  pause(conversationID) {
+    if (this.remainTime > 0) {
+      this.saveSurplusReadDeleteTime(this.remainTime);
+    } else {
+      this.setDelete();
+    }
+    this.saveLocalExToDB(conversationID);
+  }
+
+  saveLocalExToDB(conversationID) {
+    if (this.delete) {
+      this.message.localEx = "delete";
+    } else {
+      this.message.localEx = JSON.stringify(this.localExElem.toJson());
+    }
+    try {
+      OpenIM.iMManager.messageManager.setMessageLocalEx(
+        conversationID,
+        this.message.clientMsgID,
+        this.message.localEx || ""
+      );
+    } catch (e) {}
+  }
+}
diff --git a/src/views/dialogue/groupChat/index.vue b/src/views/dialogue/groupChat/index.vue
new file mode 100644
index 0000000..9de81c1
--- /dev/null
+++ b/src/views/dialogue/groupChat/index.vue
@@ -0,0 +1,1410 @@
+<script setup>
+import { storeToRefs } from "pinia";
+import { useMessageStore } from "@/stores/modules/message";
+import useHistoryMessageList from "../useHistoryMessageList.js";
+import { useUserStore } from "@/stores/user.js";
+import VirtualList from "@/components/virtualList";
+import AppNavBar from "../components/navBar.vue";
+import MessageItemVue from "./MessageItem/index.vue";
+import ChartFooter from "./chartFooter.vue";
+import { color2bgCCss } from "@/utils/index";
+import { useGrade } from "@/utils/levelConfig";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+const IMSDK = getSDK();
+import {
+  ref,
+  reactive,
+  inject,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
+import { useContactStore } from "@/stores/contact";
+import { useRoute, useRouter } from "vue-router";
+import unRead from "../components/unread.vue";
+import {
+  showToast,
+  showConfirmDialog,
+  Loading,
+  showLoadingToast,
+  showDialog,
+} from "vant";
+import { useI18n } from "vue-i18n";
+import { CbEvents } from "@/utils/openIM/constant";
+import { useCommonStore } from "@/stores/modules/common";
+import MessageTimeDeleteHelper from "@/utils/messageTimeDeleteHelper";
+import emitter from "@/utils/events";
+import checkTopMessage from "./components/checkTopMessage.vue";
+const messageTimeDeleteHelper = new MessageTimeDeleteHelper();
+
+const commonStore = useCommonStore();
+const { timestamp } = storeToRefs(commonStore);
+const { t } = useI18n();
+const showPinnedPop = ref(false);
+const route = useRoute();
+const router = useRouter();
+const $api = inject("$api");
+const contactStore = useContactStore();
+// 获取群置顶信息
+const { toppingList, groupMemberInfo, contactList, myGroupInfo } =
+  storeToRefs(contactStore);
+const {
+  setGroupId,
+  setGroupInfo,
+  getGroupMemberInfo,
+  setGroupMemberInfo,
+  setToppingList,
+  pinnedPopupClose,
+  setGroupSessionInfo,
+  setmyGroupInfo,
+  getMyGroupInfo,
+} = contactStore;
+//群聊 ref
+const privateChat = ref(null);
+useGrade(privateChat, 2);
+const messageStore = useMessageStore();
+const {
+  getNewsMessageListData,
+  pushNewMessage,
+  clearHistoryMessage,
+  getHistoryMessageListFromReq,
+} = messageStore;
+const { storeHistoryMessageList, storeHistoryMessageHasMore, state } =
+  storeToRefs(messageStore);
+//存放群聊天列表的数据记录
+// const groupChatList_guhong = ref(JSON.parse(JSON.stringify(storeHistoryMessageList.value)))
+const groupChatList_guhong = ref([]);
+const userStore = useUserStore();
+const { setGroupChatConfig } = userStore;
+const { userInfo, groupChatList, groupChatConfig, userBgSettings, appConfig } =
+  storeToRefs(userStore);
+const cancelMultiple = () => {};
+
+const historyMessageState = useHistoryMessageList({ cancelMultiple });
+const {
+  onItemRendered,
+  onTotop,
+  onScoll,
+  getScrollPosition,
+  scrollToUnread,
+  setAllReadedAndScrollToBottom,
+  scroll2ClientMsgID,
+  getChatList_kds,
+} = historyMessageState;
+const vsl = toRef(historyMessageState, "vsl");
+const overflow = toRef(historyMessageState, "overflow");
+const loadState = toRef(historyMessageState, "loadState");
+const notScroll = toRef(historyMessageState, "notScroll");
+const unReadCount = toRef(historyMessageState, "unReadCount");
+const initLoading = toRef(historyMessageState, "initLoading");
+let LoadingSignTimer = null;
+const isLoadingCompleted = ref(false);
+const checkTopMessageShow = ref(false); //查看置顶消息弹出框
+const checkTopMessageItem = ref({});
+//监控时间戳是否发生变化
+watch(
+  () => timestamp.value,
+  (newV, oldV) => {
+    if (!groupChatList_guhong.value || groupChatList_guhong.value.length < 1) {
+      console.log("------获取群消息异常--------");
+      if (!sessionStorage.getItem("againLoadingSign")) {
+        sessionStorage.setItem("againLoadingSign", true);
+        //有一种情况，即使强制重新加载后，依旧无法触发监听群聊数据是否改变的情况，所以执行过一次如果还是没法继续获取数据，就不强制执行了
+        if (LoadingSignTimer) return;
+        LoadingSignTimer = setTimeout(() => {
+          if (
+            !groupChatList_guhong.value ||
+            groupChatList_guhong.value.length < 1
+          )
+            location.reload();
+          clearTimeout(LoadingSignTimer);
+          LoadingSignTimer = null;
+        }, 1500);
+      } else {
+        //如果强制刷新后依旧无法获取数据
+      }
+    }
+  }
+);
+
+const create_group_info = () => {
+  const info = groupChatConfig.value;
+  setGroupId(info.groupID || route.params.groupID);
+  return {
+    notificationUpdateTime: "", //公告更新时间
+    notification: "", //公告
+    groupName: info.showName,
+    faceURL: info.faceURL,
+    groupID: info.groupID || route.params.groupID,
+    memberCount: info.memberCount,
+    conversationID: info.conversationID,
+    unreadCount: 0, // 未读人数 自定义字段 handle_msgList_change函数内计算未读
+    ownerUserID: "",
+    ownerUserName: "", //群主对应昵称 自定义字段
+    roleLevel: 20, //自定义字段 当前角色类型 100群主 60 群管理员 20普通成员
+    muteEndTime: 0, //自定义字段 当前角色被禁言时间
+  };
+};
+//群信息 详细字段描述打开：https://docs.openim.io/zh-Hans/sdks/class/group/groupInfo
+let groupInfo = reactive(create_group_info());
+onMounted(async () => {
+  if (groupChatConfig.value.groupID) {
+    await get_group_data();
+  }
+  await setToppingList();
+  // 如果配置有全局背景啥的这里加
+  if (
+    userBgSettings.value &&
+    userBgSettings.value.image.imagePath &&
+    privateChat.value
+  ) {
+    privateChat.value.classList.add("useUserAppearance");
+    if (userBgSettings.value.image.color) {
+      privateChat.value.style.background = color2bgCCss(
+        userBgSettings.value.image.color,
+        true
+      );
+    }
+  }
+  getMyGroupInfo();
+  // 设置聊天内容高度，兼容各个浏览器
+  observeDomChange();
+  window.addEventListener("resize", setImContent);
+
+  //获取群聊列表数据
+  let close_showLoadingToast;
+  try {
+    close_showLoadingToast = showLoadingToast({
+      message: "加载中...",
+      forbidClick: true,
+      loadingType: "spinner",
+      duration: 0,
+    });
+    await getChatList_kds();
+    close_showLoadingToast.close();
+    setTimeout(() => {
+      //然后判断是否获取到值，如果没有获取到，就重新获取一次
+      commonStore.getNewTimestamp(new Date().getTime());
+    }, 0);
+  } catch {
+    console.log("报错");
+    if (close_showLoadingToast) close_showLoadingToast.close();
+  }
+  setEventListener();
+  // fix 网络低速模式下需要等待上面的请求都加载完之后在请求子组件的数据
+  isLoadingCompleted.value = true;
+});
+
+const checkScrollBottom = () => {
+  const isScroll = getScrollPosition();
+  notScroll.value = isScroll;
+  if (!isScroll) {
+    emitter.emit("CHAT_MAIN_SCROLL_TO_BOTTOM", false);
+  }
+};
+
+const setEventListener = () => {
+  emitter.on("CHECK_SCROLL_BOTTOM", checkScrollBottom);
+};
+
+const disposeEvemtListener = () => {
+  emitter.off("CHECK_SCROLL_BOTTOM", checkScrollBottom);
+};
+//获取当前群聊会话数据
+const get_group_data = async () => {
+  const { data } = await IMSDK.getSpecifiedGroupsInfo([
+    groupChatConfig.value.groupID,
+  ]);
+  let memberCount = 0;
+  const groupInfoRes = data[0];
+  Object.assign(groupInfo, data[0]);
+  const res = await $api.msg_privateChat.query_public_userInfo({
+    UserIDs: [groupInfoRes.ownerUserID],
+  });
+  if (Array.isArray(res.data) && res.data.length > 0) {
+    groupInfoRes.ownerUserName = res.data[0].nickname;
+  }
+  //获取当前角色
+  const { data: resq } = await IMSDK.getSpecifiedGroupMembersInfo({
+    groupID: groupInfoRes.groupID,
+    userIDList: [userInfo.value.userID],
+  });
+  //退出-提出群 消息为空
+  if (Array.isArray(resq) && resq.length > 0) {
+    groupInfoRes.roleLevel = resq[0].roleLevel;
+    groupInfoRes.muteEndTime = resq[0].muteEndTime;
+    if (groupInfoRes.roleLevel !== 20) {
+      // 非普通群成员角色查询在线群人数，普通群成员角色显示总人数
+      let memberCount = 0;
+      const res = await $api.msg_privateChat.queryGroupMemberOnlineCount({
+        GroupID: groupInfoRes.groupID,
+      });
+      if (res.code != 0) return;
+      memberCount = res.data.count;
+      Object.assign(groupInfo, groupInfoRes, { memberCount: memberCount });
+    } else {
+      Object.assign(groupInfo, groupInfoRes);
+    }
+  }
+  // 存储群信息以及当前角色类型和禁言时间
+  setGroupInfo(groupInfo);
+  //获取我在当前的群信息--比如管理员有权限删除用户信息的参数
+  const params = {
+    groupID: groupChatConfig.value.groupID,
+    keywordList: [userInfo.value.userID],
+    isSearchUserID: true,
+    isSearchMemberNickname: false,
+    offset: 0,
+    count: 20,
+  };
+  const myGroupRes = await IMSDK.searchGroupMembers(params);
+  myGroupRes.data && setmyGroupInfo(myGroupRes.data[0]);
+
+  if (
+    groupInfo.groupID &&
+    Array.isArray(groupMemberInfo.value[groupInfo.groupID]) &&
+    groupMemberInfo.value[groupInfo.groupID].length > 0
+  ) {
+    return;
+  }
+
+  //查询群成员列表
+  // await getMemberList();
+};
+//当前会话ID
+const conversationID = ref(groupInfo.conversationID);
+// 获取指定群的群成员信息
+const getMemberList = async () => {
+  // if (groupMemberInfo.value[groupInfo.groupID]) {
+  //   // 有数据就不请求
+  //   return;
+  // }
+  getGroupMemberInfo(groupInfo.groupID);
+};
+
+watch(
+  () => contactList.value,
+  (val) => {
+    if (groupInfo.groupID) {
+      getMemberList(groupInfo.groupID);
+    }
+  },
+  { deep: true }
+);
+
+/**
+ * 判断是否展示群公告
+ */
+const showGroupNotification = computed(() => {
+  //判断时间之前起码要判断群公告是否存在
+  if (!groupInfo.notification) return false;
+
+  const time = groupInfo.notificationUpdateTime;
+  const currentTime = window.localStorage.getItem(
+    `np_hide${groupInfo.groupID}`
+  );
+  return time && currentTime != time;
+});
+const hideGroupNotification = (event) => {
+  event.stopPropagation();
+  window.localStorage.setItem(
+    `np_hide${groupInfo.groupID}`,
+    groupInfo.notificationUpdateTime
+  );
+};
+// 移除置顶信息
+const setGroupTopMsg = async (item) => {
+  const arr = toppingList.value.filter(
+    (el) => el.clientMsgID === item.clientMsgID
+  );
+  // const { seq, clientMsgID } = msg_list.value
+  const res = await $api.contact.setGroupTopMsg({
+    groupId: groupInfo.groupID,
+    data: arr.map((el) => {
+      return { seq: el.seq, clientMsgId: el.clientMsgID };
+    }),
+    operate: "del",
+  });
+  if (res.code === 0) {
+    showPinnedPop.value = false;
+    showToast({ message: t("deleteSuccess"), position: "top" });
+    setToppingList();
+  }
+};
+
+const handle_msgList_change = (msgList, interval = 60000 * 5) => {
+  const msgList_new = [...msgList];
+  let time = msgList[0]?.createTime;
+  let i = 0;
+  msgList.forEach((msg, index) => {
+    //计算未读人数  -1 计算本人
+    if (msg.attachedInfoElem) {
+      msg.unreadCount =
+        msg.attachedInfoElem.groupHasReadInfo.groupMemberCount -
+        msg.attachedInfoElem.groupHasReadInfo.hasReadCount -
+        1;
+    }
+    if (msg.notificationElem) {
+      const detail = msg.notificationElem.detail;
+      if (detail.mutedUser) {
+        //处理禁言时间
+        detail.mutedSeconds = handle_Prohibition_time(detail.mutedSeconds);
+      }
+    }
+  });
+
+  return msgList_new;
+};
+const curLastMinSeq = ref(0);
+const startClientMsgID = ref("");
+const topMessagePupop = reactive({
+  showPreview: false,
+  currentId: "",
+  previewArr: [],
+  currentIndex: 0,
+});
+
+/**
+ * 关闭置顶预览图片和视频模态框
+ */
+const closePreview = () => {
+  topMessagePupop.showPreview = false;
+};
+
+
+/**
+ * 查看置顶消息
+ */
+const getMessageListByLocation = async (item, clientMsgID) => {
+  //如果置顶消息多于一条且未展开点击的时候默认展开
+  if(toppingList.value.length>1&&!showPinnedPop.value){
+    return showPinnedPop.value=true
+  }
+  const { contentType, content } = item;
+  showPinnedPop.value = false;
+  //如果是图片或者视频置顶，直接开启预览功能即可
+  if (contentType === 102 || contentType === 104) {
+    setTimeout(() => {
+      const contentJson = JSON.parse(content);
+      let arr = [];
+      if (contentType === 104) {
+        const { videoType, snapshotUrl, videoUrl } = contentJson || {};
+        arr = [
+          {
+            type: videoType,
+            snapshotUrl: snapshotUrl,
+            url: videoUrl,
+            id: item.clientMsgID,
+          },
+        ];
+      } else if (contentType === 102) {
+        arr = [{ ...contentJson.sourcePicture, id: clientMsgID }];
+      }
+      topMessagePupop.previewArr = arr;
+      topMessagePupop.currentId = clientMsgID;
+      topMessagePupop.showPreview = true;
+    }, 300);
+    return;
+  }
+
+  setTimeout(() => {
+    checkTopMessageItem.value = item;
+    checkTopMessageShow.value = true;
+  }, 300);
+
+  // let params = {
+  //   lastMinSeq: 0, // lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传
+  //   count: 100000000, // 一次拉取的数量
+  //   startClientMsgID: clientMsgID, // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+  //   conversationID: conversationID.value //  会话 ID
+  // };
+  // console.log('getMessageListByLocation',params,item);
+  // const res = await IMSDK.getAdvancedHistoryMessageListReverse(params);
+  // const messageList = res.data.messageList;
+  // state.value.historyMessageList = [...handle_msgList_change([...messageList])];
+  // const params1 = {
+  //   lastMinSeq: 0, //lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传 number
+  //   count: 1, // 一次拉取的数量
+  //  // startClientMsgID: storeHistoryMessageList.value[0].clientMsgID, // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+  //   startClientMsgID:groupChatList_guhong.value[0].clientMsgID,
+  //   conversationID: conversationID.value // 会话 ID
+  // };
+  // const res1 = await IMSDK.getAdvancedHistoryMessageList(params1);
+  // // 更新下一次的拉取参数
+  // curLastMinSeq.value = res1.data.lastMinSeq;
+  // startClientMsgID.value = res1.data.messageList[0]?.clientMsgID;
+  // state.value.historyMessageList = [
+  //   ...handle_msgList_change(res1.data.messageList),
+  //   // ...storeHistoryMessageList.value
+  //   ...groupChatList_guhong.value
+  // ];
+  // scroll2ClientMsgID(clientMsgID);
+  // showPinnedPop.value = false;
+};
+const chatBoxActiveClass = computed(() => {
+  if (
+    toppingList.value.length &&
+    (!showGroupNotification.value || !groupInfo.notification)
+  ) {
+    return "chatBox_active1";
+  } else if (
+    !toppingList.value.length &&
+    showGroupNotification.value &&
+    groupInfo.notification
+  ) {
+    return "chatBox_active2";
+  } else if (
+    toppingList.value.length &&
+    showGroupNotification.value &&
+    groupInfo.notification
+  ) {
+    return "chatBox_active3";
+  }
+});
+
+// 从历史聊天中删除强制删除阅后焚毁类型非自己发的消息
+const deleteListMessage = async () => {
+  const arr = currentBurnList.value
+    .map((item) => item.message)
+    .filter((item) => !!item.clientMsgID);
+  // 退出会话时候需要把仍然未过期的焚毁消息删掉
+  for (const element of arr) {
+    // 找到当前焚烧信息的index
+    const index = groupChatList_guhong.value.findIndex(
+      (item) => item.clientMsgID === element.clientMsgID
+    );
+    // 判断是否自己发的，不是自己发的用sdk删除，自己发的则是进入的时候删除就行
+    if (
+      index > -1 &&
+      groupChatList_guhong.value[index].sendID != userInfo.value.userID
+    ) {
+      // 删除远端数据库消息记录
+      try {
+        await IMSDK.burnMessage({
+          conversationID: conversationID.value,
+          clientMsgID: element.clientMsgID,
+        });
+      } catch (e) {
+        console.log("eeeeeee>>>", e);
+        await IMSDK.deleteMessageFromLocalStorage({
+          conversationID: conversationID.value,
+          clientMsgID: element.clientMsgID,
+        });
+      } finally {
+        groupChatList_guhong.value.splice(index, 1);
+      }
+    }
+  }
+};
+
+const goback = async () => {
+  if (status.value == 1) {
+    const arr = currentBurnList.value.filter((item) => item.delete === false);
+    if (arr.length > 0) {
+      // 焚烧消息未看完, 退出时,才会出现“温馨提示”
+      await showConfirmDialog({
+        title: "温馨提示",
+        message: "消息正在焚毁中，是否退出并一键焚毁？",
+        className: "custom-del",
+        cancelButtonText: "我再看看",
+        confirmButtonText: "立即焚烧",
+        confirmButtonColor: "#0095F6",
+      });
+      // 点击立即焚烧，删除还未过期的该焚烧的消息
+      await deleteListMessage();
+      setGroupChatConfig({});
+      // 路由跳转
+      router.push("/home/dialogue");
+    } else {
+      router.push("/home/dialogue");
+    }
+  } else {
+    // 清空
+    setGroupChatConfig({});
+    // 路由跳转
+    router.push("/home/dialogue");
+  }
+  // 清除焚烧消息逻辑
+
+  // 清除群聊信息
+  setGroupInfo({});
+  // setGroupMemberInfo({});
+  setToppingList([]);
+  setGroupId("");
+  setGroupChatConfig({});
+  setGroupSessionInfo({});
+  setmyGroupInfo({});
+  clearHistoryMessage();
+  router.push("/home/dialogue");
+};
+
+// 阅后即焚开始逻辑
+import { MessageExData } from "./groupChat.js";
+// 当前需要焚烧的列表
+const currentBurnList = ref([]);
+// 自己已经过期了的消息
+// let timerInterval = null;
+let currentDownTimeMsg = null;
+const readDeleteMsg = ref({
+  clientMsgID: "",
+  seconds: 0,
+});
+
+// 监听数据
+watch(
+  () => storeHistoryMessageList.value,
+  async (newVal, oldVal) => {
+    console.log("群聊消息：：", newVal);
+    // refactorMessageList 根据显示时间筛选聊天记录
+    groupChatList_guhong.value =
+      messageTimeDeleteHelper.refactorMessageList(newVal);
+    // groupChatList_guhong.value = refactorMessageList(newVal)
+    const burnMsgs = newVal.filter(
+      (item) => item.ex && item.ex.includes("burn_msg")
+    );
+    let index_1001 = 0;
+    let result = [];
+    const flag = newVal.forEach((msg, index) => {
+      result.push(msg);
+      const { customElem, contentType, groupID } = msg;
+      if (customElem && customElem.data) {
+        if (JSON.parse(customElem.data).customType == 1001) {
+          index_1001 = index;
+          result = [msg];
+        }
+      }
+      if (contentType == 1511) {
+        setGroupMemberInfo({
+          ...groupMemberInfo.value,
+          [groupID]: [],
+        });
+      }
+    });
+    // console.log("获取下标值：", index_1001);
+    // console.log("获取最新可展示数据：", result);
+    if (index_1001 > 0) {
+      // 1001的时候只保留当前这条消息，设置currentDownTimeMsg = null是为了清除倒计时的定时器
+      currentDownTimeMsg = null;
+      state.value.historyMessageList = result;
+    }
+    if (
+      burnMsgs.length !== currentBurnList.value.length ||
+      currentBurnList.value.length === 0
+    ) {
+      findNextListOrStopTimer();
+    }
+    //判断是否有群公告,如果有群公告,取最新一条展示
+    const notificationList = newVal.filter((item) => item.contentType === 1519);
+    if (notificationList && notificationList.length > 0) {
+      const { group } = JSON.parse(
+        notificationList[notificationList.length - 1]?.notificationElem
+          ?.detail || "{}"
+      );
+      if (group) {
+        groupInfo.notification = group.notification;
+        groupChatConfig.value.notification = group.notification;
+        setGroupInfo(groupInfo);
+        setGroupChatConfig(groupChatConfig.value);
+      }
+    }
+
+    getCamouflage();
+  },
+  { deep: true }
+);
+
+const setGroupMemberHeadUrl = ({ data }) => {
+  //判断群面具配置是否发生改变
+  if (data && data.ex && JSON.parse(data.ex || {}).setGroupMemberHeadUrl) {
+    //判断是否开启过群聊面具
+    if (groupChatList_guhong.value && groupChatList_guhong.value.length > 0) {
+      const camouflageFlag =
+        JSON.parse(data.ex).setGroupMemberHeadUrl.value == 0 ? true : false;
+      groupChatList_guhong.value.forEach((item) => {
+        if (
+          item.contentType == 110 &&
+          item.customElem &&
+          item.customElem.data
+        ) {
+          const { customElem } = item;
+          const info = JSON.parse(customElem.data);
+          if (info.customType == "1006") {
+            item.camouflageFlag = camouflageFlag;
+          }
+        }
+      });
+    }
+  }
+};
+
+/**
+ * 监听群设置改变事件事件
+ */
+IMSDK.on(CbEvents.OnGroupInfoChanged, setGroupMemberHeadUrl);
+
+/**
+ * 查询是否开启了群聊面具
+ */
+const getCamouflage = async () => {
+  const res = await IMSDK.getSpecifiedGroupsInfo([groupInfo.groupID]);
+  if (
+    res.data &&
+    res.data[0] &&
+    JSON.parse(res.data[0].ex || {}).setGroupMemberHeadUrl
+  ) {
+    if (groupChatList_guhong.value && groupChatList_guhong.value.length > 0) {
+      const camouflageFlag =
+        JSON.parse(res.data[0].ex).setGroupMemberHeadUrl.value == 0
+          ? true
+          : false;
+      groupChatList_guhong.value.forEach((item) => {
+        if (
+          item.contentType == 110 &&
+          item.customElem &&
+          item.customElem.data
+        ) {
+          const { customElem } = item;
+          const info = JSON.parse(customElem.data);
+          if (info.customType == "1006") {
+            item.camouflageFlag = camouflageFlag;
+          }
+        }
+      });
+    }
+  }
+};
+// 发送逻辑
+const isSendFn = (msg) => {
+  return msg.sendID == userInfo.value.userID;
+};
+// 是否删除消息
+const isReadDeleteMsg = (msg) => {
+  if (msg.ex && JSON.parse(msg.ex)["burn_msg"]) {
+    return true;
+  }
+  return false;
+};
+
+// 是否过期
+const checkTimeExpire = (sendTime, read_delete_time) => {
+  let sendTimes = parseInt(sendTime);
+  let read_delete_times = parseInt(read_delete_time * 1000);
+  // 如果当前时间晚于发送时间加上有效期时间，则已超过有效期
+  return sendTimes + read_delete_times < Date.now();
+};
+
+// 进入群聊逻辑处理
+const findNextListOrStopTimer = () => {
+  currentBurnList.value = [];
+  for (const msg of groupChatList_guhong.value) {
+    // for (const msg of storeHistoryMessageList.value) {
+    // 没有clientMsgID或者不是阅后即焚消息的跳过
+    if (msg.clientMsgID === "" || !isReadDeleteMsg(msg)) continue;
+    // 图片或者视频
+    if (msg.contentType === 102 || msg.contentType === 104) {
+      const messageExData = new MessageExData(msg);
+      // 不是自己发并且剩余时间仍有则放入当前需要焚毁列表中
+      if (!isSendFn(msg) && messageExData.remainTime > 0) {
+        currentBurnList.value.push(messageExData);
+      }
+    }
+    // 如果是自己发的，并且已经过期了，就销毁删除
+    if (isSendFn(msg) && isReadDeleteMsg(msg) && msg.sendTime) {
+      // 阅后即焚删除时间
+      const burnTime = JSON.parse(msg.ex)["burn_msg"].read_delete_time;
+      if (checkTimeExpire(msg.sendTime, burnTime) && msg.retain !== "retain") {
+        console.log("删除消息------", msg);
+        deleteMsg(msg, 2);
+      }
+    }
+  }
+};
+
+// 删除消息
+const deleteMsg = (message, type) => {
+  //撤回消息
+  if (message) {
+    burnMessage(message, type);
+  }
+};
+
+// 删除消息-撤回消息
+const burnMessage = (message, type) => {
+  if (message.clientMsgID && isReadDeleteMsg(message)) {
+    const msgExData = new MessageExData(message);
+    msgExData.setDelete();
+    msgExData.saveLocalExToDB(conversationID.value);
+    try {
+      // 删除此条消息
+      burnAndremoveMsgFromList(message.clientMsgID);
+    } catch (e) {
+      console.log(e, "error----");
+    }
+  }
+};
+
+// 销毁计时器
+onBeforeUnmount(() => {
+  // if (timerInterval != null) {
+  //   clearInterval(timerInterval);
+  //   timerInterval = null;
+  // }
+
+  window.removeEventListener("resize", setImContent);
+  // 接触监听
+  if (observerRef.value) {
+    observerRef.value.disconnect();
+  }
+});
+// 是否返回显示阅后弹窗
+const status = computed(
+  () => appConfig.value?.burn_after_reading?.group_chat.status
+);
+
+const imContentHeight = ref(0);
+const setImContent = () => {
+  const footerDom = document.querySelector(".privateChat_footer");
+  if (footerDom) {
+    const { top } = footerDom.getBoundingClientRect();
+    imContentHeight.value = top;
+  }
+};
+
+const observerRef = ref(null);
+const observeDomChange = () => {
+  observerRef.value = new ResizeObserver((entries, observer) => {
+    for (let entry of entries) {
+      const { width, height } = entry.contentRect;
+
+      setImContent();
+    }
+  });
+  const footerDom = document.querySelector(".privateChat_footer");
+  if (observerRef.value) {
+    observerRef.value.observe(footerDom);
+  }
+};
+//焚烧消息
+IMSDK.on(CbEvents.OnNewRecvMessageBurned, ({ data: messageBurn }) => {
+  console.log("群聊阅读即焚回调==========", messageBurn);
+  burnAndremoveMsgFromList(messageBurn.clientMsgID);
+});
+//焚烧消息
+IMSDK.on(
+  CbEvents.OnNewRecvMessageBurnedBatch,
+  async ({ data: messageBurn }) => {
+    const { clientMsgIDs, conversationID } = messageBurn;
+    console.log("群聊批量阅读即焚回调", messageBurn);
+    for (const clientMsgID of clientMsgIDs) {
+      burnAndremoveMsgFromList(clientMsgID);
+    }
+  }
+);
+// 删除单个用户群消息
+IMSDK.on(CbEvents.OnDeleteUserMsg, async ({ data: messageDel }) => {
+  const { conversationID, userID } = messageDel;
+  const cloneList = JSON.parse(JSON.stringify(groupChatList_guhong.value));
+  const filterList = cloneList.filter(
+    (item) => `${item.sendID}` !== `${userID}`
+  );
+  console.log(
+    "删除单个用户群消息",
+    conversationID,
+    userID,
+    cloneList,
+    filterList
+  );
+  state.value.historyMessageList = filterList.map((item) => {
+    const clientMsgID = item.quoteElem?.quoteMessage?.clientMsgID;
+    // 原来老的引用消息也要改一下状态
+    if (
+      item.quoteElem &&
+      item.quoteElem.quoteMessage &&
+      `${item.quoteElem.quoteMessage.sendID}` === `${userID}`
+    ) {
+      item.quoteElem.quoteMessage.contentType = 2101;
+    }
+    return item;
+  });
+  // 刪除后更新置頂消息
+  setToppingList();
+});
+// 自己发出的群聊消息被群成员标记为已读后，消息发送者和标记者均会收到此回调。
+IMSDK.on(CbEvents.OnRecvGroupReadReceipt, async ({ data }) => {
+  
+  // 判断是否是群主还是管理员,100 是群主 60是管理员 20是普通成员-普通成员没有已读未读功能则不调用
+  if (route.path.startsWith("/home/dialogue/groupChat/")) {
+    const hrefUrl = window.location.href.split("/");
+    if(data?.groupID!= hrefUrl[hrefUrl.length - 1])return 
+    if (
+      myGroupInfo.value.roleLevel === 100 ||
+      myGroupInfo.value.roleLevel === 60
+    ) {
+     
+      let params = {
+        conversationID: "sg_" + hrefUrl[hrefUrl.length - 1],
+        groupID: hrefUrl[hrefUrl.length - 1],
+        count: 30,
+        // startClientMsgID: storeHistoryMessageList.value[0]?.clientMsgID || "",
+        // lastMinSeq: storeHistoryMessageList.value[0]?.seq,
+      };
+      console.error(params, "初始化群聊天记录-----------参数");
+      // 当收到群聊消息后必须重新调用此方法，在方法内部给 state.historyMessageList 重新赋值
+      await getNewsMessageListData(params);
+    }
+    console.log("---已读回执列表", data);
+  }
+});
+
+// 删除内存中个某条消息
+const burnAndremoveMsgFromList = (clientMsgID) => {
+  // 删除此条消息
+  const index = groupChatList_guhong.value.findIndex(
+    (item) => item.clientMsgID === clientMsgID
+  );
+  if (index === -1) return;
+  groupChatList_guhong.value.splice(index, 1);
+};
+
+messageTimeDeleteHelper.updateGroupCheck(groupChatConfig.value, true);
+// updateGroupCheck(groupChatConfig.value)
+// 页面销毁时关闭已读未读回调
+onUnmounted(() => {
+  IMSDK.off(CbEvents.OnRecvGroupReadReceipt);
+  IMSDK.off(CbEvents.OnGroupInfoChanged, setGroupMemberHeadUrl);
+  clearTimeout(LoadingSignTimer);
+  LoadingSignTimer = null;
+  disposeEvemtListener();
+});
+
+const handleScrollToUnread = () => {
+  const unreadClientMsgIDs = setAllReadedAndScrollToBottom();
+  IMSDK.markMessagesAsReadByMsgID({
+    conversationID: conversationID.value,
+    clientMsgIDList: unreadClientMsgIDs,
+  });
+};
+
+// 监听群聊信息更新
+watch(
+  () => groupChatConfig.value,
+  (newVal) => {
+    groupInfo = create_group_info();
+  },
+  {
+    deep: true,
+  }
+);
+</script>
+
+<template>
+  <!---群聊--->
+  <div class="privateChat" ref="privateChat">
+    <AppNavBar
+      views_grade="secondary_view"
+      :info="groupInfo"
+      :conversation-type="3"
+      @goback="goback"
+      :toDetails="{
+        path: '/home/contact/groupDetails',
+        state: { groupID: groupChatConfig.groupID },
+      }"
+    />
+    <!-- 置顶消息  -->
+    <van-notice-bar
+      v-if="toppingList.length"
+      :scrollable="false"
+      class="group_pinned"
+    >
+      <template #default>
+        <div class="pinned_item">
+          <div
+            class="pinned_content"
+            @click="
+              getMessageListByLocation(
+                toppingList[0],
+                toppingList[0].clientMsgID
+              )
+            "
+          >
+            <span v-if="toppingList[0].contentType === 101">{{
+              toppingList[0].senderNickname +
+              ":" +
+              JSON.parse(toppingList[0].content).content
+            }}</span>
+            <span v-else-if="toppingList[0].contentType === 102">{{
+              toppingList[0].senderNickname + ":" + $t("cvPicture")
+            }}</span>
+            <span v-else-if="toppingList[0].contentType === 104">{{
+              toppingList[0].senderNickname + ":" + $t("cvVideo")
+            }}</span>
+            <span v-else-if="toppingList[0].contentType === 106">{{
+              toppingList[0].senderNickname +
+              ":" +
+              JSON.parse(toppingList[0].content).text
+            }}</span>
+            <span v-else-if="toppingList[0].contentType === 103">{{
+              toppingList[0].senderNickname + ":" + $t("cvVoice")
+            }}</span>
+            <span v-else-if="toppingList[0].contentType === 114">{{
+              toppingList[0].senderNickname +
+              ":" +
+              JSON.parse(toppingList[0].content).text
+            }}</span>
+            <span v-else>{{ $t("cvNotSupportMsg") }}</span>
+          </div>
+          <div
+            class="pinned_count"
+            v-if="toppingList.length > 1"
+            @click="showPinnedPop = true"
+          >
+            <span>{{
+              $t("ctmTopMsgCount", { count: toppingList.length })
+            }}</span>
+          </div>
+          <div
+            class="pinned_count"
+            v-else-if="toppingList.length === 1 && myGroupInfo.roleLevel !== 20"
+          >
+            <span
+              v-if="toppingList[0].isDelStatus === 0"
+              @click="toppingList[0].isDelStatus = 1"
+              >{{ $t("remove") }}</span
+            >
+            <span
+              v-else-if="toppingList[0].isDelStatus === 1"
+              class="sub_del"
+              @click="setGroupTopMsg(toppingList[0])"
+              >{{ $t("ctmOkRemove") }}</span
+            >
+          </div>
+        </div>
+      </template>
+    </van-notice-bar>
+    <van-popup
+      class="pinned_popup"
+      v-model:show="showPinnedPop"
+      position="top"
+      :style="{ top: '56px', left: 'auto' }"
+      overlayClass="hide-mask"
+      transition="none"
+      @close="pinnedPopupClose"
+    >
+      <div
+        class="pinned_list"
+        v-for="(item, index) in toppingList"
+        :key="index"
+      >
+        <div class="pinned_item">
+          <div
+            class="pinned_content"
+            v-if="item.content"
+            @click="getMessageListByLocation(item, item.clientMsgID)"
+          >
+            <span v-if="item.contentType === 101">{{
+              item.senderNickname + ":" + JSON.parse(item.content).content
+            }}</span>
+            <span v-else-if="item.contentType === 106">{{
+              item.senderNickname + ":" + JSON.parse(item.content).text
+            }}</span>
+            <span v-else-if="item.contentType === 102">{{
+              item.senderNickname + ":" + $t("cvPicture")
+            }}</span>
+            <span v-else-if="item.contentType === 104">{{
+              item.senderNickname + ":" + $t("cvVideo")
+            }}</span>
+            <span v-else-if="item.contentType === 103">{{
+              item.senderNickname + ":" + $t("cvVoice")
+            }}</span>
+            <span v-else-if="item.contentType === 114">{{
+              item.senderNickname + ":" + JSON.parse(item.content).text
+            }}</span>
+            <span v-else>{{ $t("cvNotSupportMsg") }}</span>
+          </div>
+          <div
+            v-if="myGroupInfo.roleLevel !== 20"
+            class="pinned_count"
+            @click="showPinnedPop = true"
+          >
+            <span v-if="item.isDelStatus === 0" @click="item.isDelStatus = 1">{{
+              $t("remove")
+            }}</span>
+            <span
+              v-else-if="item.isDelStatus === 1"
+              class="sub_del"
+              @click="setGroupTopMsg(item)"
+              >{{ $t("ctmOkRemove") }}</span
+            >
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <img src="@/assets/shouqi.svg" alt="" @click="showPinnedPop = false" />
+      </div>
+    </van-popup>
+    <!---群公告-->
+    <van-notice-bar
+      v-if="showGroupNotification"
+      left-icon="volume-o"
+      mode="closeable"
+      :text="`${$t('cvGroupNotification')} ${groupInfo.notification}`"
+      :class="['group_notice', toppingList.length ? 'group_notice1' : '']"
+      @close="hideGroupNotification"
+      @click="router.push({ path: `/home/contact/groupDetails/groupNotice` })"
+    />
+    <!-- <div :class="['chatBox']" v-if="storeHistoryMessageList.length > 0" :style="`height: ${imContentHeight === 0 ? '100%' : `${imContentHeight}px`}`"> -->
+    <!-- :data-sources="storeHistoryMessageList" -->
+    <div
+      :class="['chatBox']"
+      v-if="groupChatList_guhong.length > 0"
+      :style="`height: ${
+        imContentHeight === 0 ? '100%' : `${imContentHeight}px`
+      }`"
+    >
+      <virtual-list
+        :class="{ '!flex-col': overflow, top_notice: toppingList?.length > 0 }"
+        ref="vsl"
+        class="chatBox_content privateChat_body"
+        :data-key="'clientMsgID'"
+        :data-sources="groupChatList_guhong"
+        :data-index="'index'"
+        :keeps="180"
+        :data-component="(message) => MessageItemVue"
+        :extra-props="{ readDeleteMsg: readDeleteMsg }"
+        :estimate-size="80"
+        :topThreshold="80"
+        @totop="onTotop"
+        @resized="onItemRendered"
+        @scroll="onScoll"
+      >
+        <template #header>
+          <div v-if="overflow && !initLoading" class="pt-2">
+            <div class="spinner" v-show="loadState.loading"></div>
+            <!-- fix 2024-8-1 群聊暂注无用代码 -->
+            <!-- <div class="finished" v-show="!storeHistoryMessageHasMore">
+              {{ $t("noMore") }}
+            </div> -->
+          </div>
+        </template>
+      </virtual-list>
+      <div v-show="!initLoading && !state.isSdkErr" class="loading-wrap">
+        <van-loading v-show="loadState.loading" type="spinner" size="30" />
+      </div>
+      <div v-show="state.isSdkErr" class="loading-wrap">
+        <van-icon name="replay" />
+        <p class="msg">{{ $t("groupChatError") }}</p>
+      </div>
+    </div>
+    <!--未读消息logo-->
+    <div
+      v-show="unReadCount && notScroll"
+      class="unread"
+      @click="handleScrollToUnread"
+    >
+      <img src="@/assets/img/msg_unread.svg" alt="" />
+      <div class="unread_num">{{ unReadCount }}</div>
+    </div>
+    <ChartFooter :onload="isLoadingCompleted"></ChartFooter>
+
+    <!-- 查看置顶消息弹出框 -->
+    <van-overlay
+      v-model:show="checkTopMessageShow"
+      @click="checkTopMessageShow = false"
+    >
+      <checkTopMessage
+        :operandObj="checkTopMessageItem"
+        @getcheckTopMessageFlag="
+          () => {
+            checkTopMessageShow = false;
+          }
+        "
+      ></checkTopMessage>
+    </van-overlay>
+    <!-- 查看置顶图片和视频消息弹框 -->
+    <CommonPreview
+      v-model="topMessagePupop.showPreview"
+      :initialSwipe="topMessagePupop.currentIndex"
+      :currentId="topMessagePupop.currentId"
+      :images="topMessagePupop.previewArr"
+      @getList="closePreview"
+      previewType="group"
+    >
+    </CommonPreview>
+
+    <router-view></router-view>
+  </div>
+</template>
+
+<style lang="less" scoped>
+* {
+  -webkit-touch-callout: none;
+  /*系统默认菜单被禁用*/
+  -webkit-user-select: none;
+  /*webkit浏览器*/
+  -khtml-user-select: none;
+  /*早起浏览器*/
+  -moz-user-select: none;
+  /*火狐浏览器*/
+  -ms-user-select: none;
+  /*IE浏览器*/
+  user-select: none;
+  /*用户是否能够选中文本*/
+}
+.privateChat {
+  background: rgba(248, 248, 251, 1);
+  height: 100%;
+
+  &.useUserAppearance {
+    &::before {
+      background-image: var(--preview-bg, none);
+      background-size: contain;
+      background-repeat: repeat;
+      width: 100%;
+      height: 100%;
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      filter: var(--preview-bg-alpha);
+    }
+  }
+
+  .group_notice {
+    position: absolute;
+    top: 55px;
+    left: 0;
+    width: 100%;
+    background: white;
+    z-index: 1;
+    height: 36px;
+    color: rgba(27, 27, 34, 1);
+    font-size: 0.75rem;
+  }
+
+  .group_notice1 {
+    top: 100px;
+  }
+
+  .pinned_count {
+    color: #0095f6;
+    font-family: "PingFang SC";
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-left: 15px;
+
+    .sub_del {
+      color: #fc5a50;
+    }
+  }
+
+  .group_pinned {
+    position: absolute;
+    top: 56px;
+    left: 0;
+    width: 100%;
+    background: white;
+    z-index: 1;
+    height: 36px;
+    color: rgba(27, 27, 34, 1);
+    font-size: 0.75rem;
+    height: 44px;
+    padding: 5px 10px;
+
+    :deep(.van-notice-bar__wrap) {
+      border-radius: 10px;
+      background: #f8f8fb;
+      padding: 0 10px;
+    }
+
+    .pinned_item {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .pinned_content {
+        width: 85%;
+        overflow: hidden;
+        /* 当内容溢出时隐藏 */
+        text-overflow: ellipsis;
+        /* 使用省略号表示被隐藏的内容 */
+        white-space: nowrap;
+        /* 不自动换行 */
+      }
+    }
+
+    :deep(.van-notice-bar__content) {
+      width: 95%;
+    }
+  }
+
+  .popup_select {
+    display: flex;
+    flex-direction: column;
+    background: white;
+
+    &_cell {
+      height: 60px;
+    }
+
+    &_cell:nth-child(2) {
+      color: red;
+    }
+  }
+
+  .chatBox {
+    padding: 56px 0 0 0;
+    width: 100%;
+    height: calc(100vh - 56px);
+    .chatBox_content {
+      height: 100%;
+      padding: 16px 12px 0 12px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+  .privateChat_body {
+    & .cell {
+      display: flex;
+      margin: 15px 0;
+      color: white;
+      font-size: 1rem;
+      font-weight: 400;
+      width: 100%;
+      position: relative;
+      flex-direction: column;
+    }
+
+    .active-cell {
+      padding: 0;
+    }
+  }
+
+  :deep(.van-overlay) {
+    top: 0;
+    left: 0;
+    // background: transparent;
+  }
+
+  .pinned_popup {
+    width: calc(100%);
+
+    .pinned_list {
+      background: white;
+      color: rgba(27, 27, 34, 1);
+      font-size: 0.75rem;
+      height: 44px;
+      padding: 5px 10px;
+      margin-bottom: 5px;
+
+      .pinned_item {
+        width: 100%;
+        display: flex;
+        height: 36px;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 10px;
+        background: #f8f8fb;
+        padding: 0 10px;
+
+        .pinned_content {
+          // width: 95%;
+          overflow: hidden;
+          /* 当内容溢出时隐藏 */
+          text-overflow: ellipsis;
+          /* 使用省略号表示被隐藏的内容 */
+          white-space: nowrap;
+          /* 不自动换行 */
+        }
+
+        .pinned_count {
+          white-space: nowrap;
+          margin-left: 15px;
+
+          .sub_del {
+            color: #fc5a50;
+          }
+        }
+      }
+    }
+
+    .footer {
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  @media screen and (min-width: 750px) {
+    .pinned_popup {
+      width: calc(100% - 375px);
+    }
+  }
+}
+
+.unread {
+  position: absolute;
+  bottom: 55px;
+  right: 16px;
+
+  & > img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .unread_num {
+    background: white;
+    position: absolute;
+    top: -2px;
+    right: -5px;
+    width: 20px;
+    font-size: 0.75rem;
+    height: 15px;
+    text-align: center;
+    border-radius: 10px;
+  }
+}
+
+.chatBox_active1 {
+  padding-top: 100px !important;
+}
+
+.chatBox_active2 {
+  padding-top: 92px !important;
+}
+
+.chatBox_active3 {
+  padding-top: 136px !important;
+}
+
+.loading-wrap {
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+  // height: 100%;
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 20px);
+  .msg {
+    position: absolute;
+    width: 200px;
+    left: calc(-80px);
+    top: 15px;
+    color: #1b1b22b3;
+  }
+}
+
+.active_chatBox {
+  height: calc(100vh - 130px) !important;
+}
+.hide-mask {
+  display: none;
+}
+// 是否有置顶消息
+.top_notice {
+  padding-top: 48px !important;
+}
+</style>
diff --git a/src/views/dialogue/index.vue b/src/views/dialogue/index.vue
new file mode 100644
index 0000000..e858c2a
--- /dev/null
+++ b/src/views/dialogue/index.vue
@@ -0,0 +1,795 @@
+<script setup>
+import { ref, onMounted,onUnmounted,reactive, nextTick, computed, watchEffect, provide,inject} from 'vue'
+import { showToast } from "vant";
+import { getSDK } from '@/utils/openIM'
+import { storeToRefs } from 'pinia'
+import scan from '@/assets/dialog/search.svg'
+import add from '@/assets/dialog/add.svg'
+import face from '@/assets/dialog/face.svg'
+import chat from '@/assets/dialog/chat.svg'
+import massTextingIcon from '@/assets/contact-mass-texting.svg'
+import { CbEvents } from '@/utils/openIM/constant'
+import { burnMsgByClearMsg } from '@/utils/common'
+import { AppNavBar } from "@/components/index.js";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+import { showConfirmDialog } from 'vant'
+import { useRoute, useRouter } from 'vue-router'
+import { removeAllLocalstorage } from '@/utils/tools'
+import ExpandBox from './components/expandBox.vue'
+import SearchLogs from './components/searchLogs.vue'
+import usePolling from '@/use/usePolling'
+import { useContactStore } from "@/stores/contact";
+import useConversationStore from "@/stores/modules/conversation";
+import addfriendbindDialog from "./components/addfriendbindDialog.vue"
+import ConversationList from "./components/conversationList.vue"
+import bindactionSheet from "@/components/bindactionSheet/index.vue"
+import {isMobile} from '@/utils/common'
+import use from "@/use";
+import { useFriendStore } from '@/stores/modules/membership-info'
+import { getUserInfo } from '@/utils/imCommon'
+const friendState = useFriendStore()
+const { useUid, useSystem } = use;
+const contactStore = useContactStore();
+const {
+  setGroupInfo,
+  setGroupId,
+  getContactListFromReq,
+  getChatGroupList,
+  updateNewFriendApply,
+  getAllGroupOwnerOrAdmin
+} = contactStore
+const { contactList, isGroupSend } = storeToRefs(contactStore)
+const conversationStore = useConversationStore()
+const { storeLoading } = conversationStore
+const IMSDK = getSDK()
+const { t } = useI18n()
+const $api = inject("$api");
+const networkOnline = inject('networkOnline')
+const userStore = useUserStore()
+const { setToken, setUserInfo } = userStore;
+const { setGroupChatConfig, setPrivateChatConfig } = userStore
+const { userInfo, appConfig } = storeToRefs(userStore)
+const router = useRouter()
+const dialogVisable = ref(false)
+const conversationListRef = ref(null)
+const conversationList = ref([])
+const actionsButton = ref([
+  { type: 'phone', name: t('bindPhone'), color: '#0095F6' },
+  { type: 'email', name: t('bind_email'), color: '#0095F6' },
+])
+const route = useRoute()
+// 好友在线状态
+const onlineStatus = ref({})
+const getAllUsersList = async () => {
+  try {
+    if (!conversationStore.storeDialogueUsers.length) return
+    const res = await $api.login.userLoginStatus({
+      userIDs: conversationStore.storeDialogueUsers
+    })
+    if (res.code != 0) return
+    res.data.forEach(item => {
+      // 存储在线状态
+      onlineStatus.value[item.userID] =  item.status === 1 ? true : false;
+      // 把查询到用户的，在线状态存储起来
+      friendState.SetOnlineStatus(onlineStatus.value)
+    })
+  } catch (error) {
+    console.error('好友在线状态查询失败error',error);
+  }
+}
+const { manualCallPollingFunction } = usePolling(getAllUsersList, 3 * 60 * 1000)
+
+watch(() => route.fullPath, async (val) => {
+  // 路由变化
+  searchVisible.value = false
+  // init()
+  // 回到当前页面
+  if (val === '/home/dialogue') {
+    await conversationStore.getConversationListFromReq()
+    await conversationStore.getUnReadCountFromReq()
+  }
+})
+
+const init = async () => {
+  await nextTick()
+  // await getAllConversationList()
+  // await conversationStore.getConversationListFromReq()
+  // await conversationStore.getUnReadCountFromReq()
+  if (conversationListRef.value) {
+    conversationListRef.value.updateHasMore(true)
+  }
+  // 检查在线状态
+  manualCallPollingFunction()
+}
+provide('dialogInit', init)
+const addFriendVerify = computed(()=> appConfig.value.user_permission?.addFriendVerify)
+const arr = ref([]);
+const generateMenuItems = () => {
+  const { isAddFriendByQRCode, isAddFriendByUid, isAddFriendByFaceToFace } = (appConfig.value || {}).user_permission || {};
+  // 准备菜单项数据
+  const menuItems = [
+    {
+      id: 2,
+      name: t('addFriend'),
+      url: add,
+      label: 'add',
+      isShow: isAddFriendByUid
+    },
+    {
+      id: 3,
+      name: t('faceToFace'),
+      url: face,
+      label: 'face',
+      isShow: isAddFriendByFaceToFace
+    },
+    {
+      id: 4,
+      name: t('createGroup'),
+      url: chat,
+      label: 'chat',
+      isShow: userInfo.value.isGroupOwner
+    },
+    {
+      id: 5,
+      name: t('groupSendMsg'),
+      url: massTextingIcon,
+      label: 'massTexting/selectPage',
+      isShow: isGroupSend.value
+    }
+  ];
+  // 根据 isMobile() 决定是否添加第一个菜单项
+  if (isMobile()) {
+    menuItems.unshift({
+      id: 1,
+      name: t('scan'),
+      url: scan,
+      label: 'scan',
+      isShow: isAddFriendByQRCode
+    });
+  }
+  // 将生成的菜单项数组赋值给 arr.value
+  arr.value = menuItems;
+};
+// fix 2024-8-6【IM-H5】从联系人页面点击右上角加号没有扫一扫这个选项
+const dialogList = computed(() => {
+  return arr.value.filter(item => item.isShow)
+})
+const handleDetail = async (item) => {
+  if (conversationStore.storeConversationEditing) return;
+  const { conversationID } = item
+  IMSDK.markConversationMessageAsRead(conversationID)
+  // 1单聊 2 群聊
+  if (item.conversationType === 1) {
+    setPrivateChatConfig(item)
+    router.push({
+      name: 'privatechat',
+      params: { userID: item.userID },
+      state: {
+        msg: JSON.stringify({ userID: item.userID, faceURL: item.faceURL, nickname: item.showName })
+      }
+    })
+  }
+  if (item.conversationType === 3) {
+    // 获取当前角色是否是群主和
+    const { data } = await $api.msg_privateChat.query_public_userInfo({
+      UserIDs: [userInfo.value.userID],
+    })
+    setGroupChatConfig({
+      ...item,
+      isGroupAdmin: data[0].isGroupAdmin,
+      isGroupOwner: data[0].isGroupOwner,
+    })
+    router.push({
+      name: 'groupChat',
+      params: { groupID: item.groupID },
+      state: {
+        msg: JSON.stringify({
+          groupID: item.groupID,
+          faceURL: item.faceURL,
+          showName: item.showName,
+          conversationType: item.conversationType,
+          conversationID: item.conversationID
+        })
+      }
+    })
+    
+  }
+}
+
+const handleClick = (label) => {
+  let labelArr = ['chat','massTexting/selectPage']
+  if (!labelArr.includes(label) && checkAddFriend()) {
+    bindDialogShow.value = true
+    return
+  }
+  router.push(`/home/contact/${label}`)
+  dialogVisable.value = false
+
+}
+// 添加好友门槛校验
+const checkAddFriend = () => {
+  let flag = false
+  if (userInfo.value.isGroupOwner || userInfo.value.isGroupAdmin || userInfo.value.isInternalUser) return false
+  addfriendbindType.value = addFriendVerify.value
+  switch (addFriendVerify.value) {
+    case 0: // 无门槛
+      flag = false;
+      break;
+    case 1: // 绑定手机号
+      flag = userInfo.value.phone ? false : true
+      break;
+    case 2: // 绑定邮箱
+      flag = userInfo.value.email ? false : true
+      break;
+    case 3: // 绑定手机号或邮箱
+      flag = (userInfo.value.email || userInfo.value.phone) ? false : true
+      break;
+    case 4: // 绑定手机号和邮箱
+      flag = (userInfo.value.email && userInfo.value.phone) ? false : true
+      break;
+    default: false;
+  }
+  return flag
+}
+const handleBindEmail = () => {
+  router.push({
+    path: '/home/my/security/bindEmail',
+    query: {
+      labels: 'dialogue'
+    }
+  })
+}
+// 设备类型检测
+function isMobileDevice() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+// 窗口大小
+function handleResize() {
+  dialogVisable.value = false;
+  if (isMobileDevice()) {
+    generateMenuItems()
+    console.error('User is likely using a mobile device');
+  } else {
+    generateMenuItems()
+    console.error('User is likely using a desktop device');
+  }
+}
+const bindEmailDialogVisible = ref(false)
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+  // updateNewFriendApply(false) // 初次进入设置为false
+  onFirstLogin()
+  init()
+  if (contactList.value.length === 0) {
+    getContactListFromReq();
+  }
+  getChatGroupList(); // 加入的群聊列表
+  getAllGroupOwnerOrAdmin();
+  // 获取群主和群管理员标识
+  friendState.fetchMemberIdentification()
+  // 生成菜单项数组
+  generateMenuItems()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
+const selectedItems = ref([])
+const selectedAll = computed(() => conversationStore.storeSelectedItems.length > 0 && conversationStore.storeConversationList.length === conversationStore.storeSelectedItems.length)
+
+const toggleAllSelect = () => {
+  if (selectedAll.value) {
+    conversationStore.updateSelectItems([])
+  } else {
+    conversationStore.updateSelectItems(conversationStore.storeConversationList.map(item => ({conversationID: item.conversationID, groupId: item.groupID })))
+  }
+}
+
+const editFinish = () => {
+  conversationStore.updateConversationEditing(false)
+  conversationStore.updateSelectItems([])
+}
+
+const delConversation = async () => {
+  if (!conversationStore.storeSelectedItems.length) return
+  await showConfirmDialog({
+    title: t('clDeleteSel2'),
+    message: t('clDeleteDesc2'),
+    className: 'custom-del',
+    confirmButtonText: t('delete'),
+    confirmButtonColor: '#FC5A50'
+  })
+  const list = conversationStore.storeSelectedItems.map(({conversationID, groupID}) => {
+    conversationStore.delConversationByCID(conversationID)
+    return delConversationApi(conversationID, !Boolean(groupID))
+  })
+  const res = await Promise.all(list)
+  // 删除后offset主动减去删的值
+  const nextOffset = conversationStore.conversationOffset - list.length
+  conversationStore.updateConversationOffset(nextOffset)
+  editFinish()
+  // 刪除不重新获取，只是删除会话
+  // init()
+}
+
+const delConversationApi = async (conversationID, isPriviteChat = false) => {
+  // 为了兼容阅后即焚消息，私聊的时候需要调用删除阅后即焚消息接口
+  if (isPriviteChat) {
+    await burnMsgByClearMsg(conversationID)
+  }
+  await IMSDK.deleteConversationAndDeleteAllMsg(conversationID)
+}
+
+
+// 搜索逻辑
+const searchVisible = ref(false)
+const handleSearch = () => {
+  searchVisible.value = true
+}
+// 绑定邮箱手机号
+const bindDialogShow = ref(false)
+const addfriendbindType = ref(0)
+
+const actionShow = ref(false)
+const handleConfirm = async () => {
+  const res = await $api.login.logout({
+    device_id: useUid,
+    platform: useSystem()
+  });
+  setToken('');
+  setUserInfo({});
+  removeAllLocalstorage();
+  OpenIM.logout()
+  router.push('/firstScreen');
+}
+
+const onFirstLogin = async () => {
+   // 第一次弹窗 获取用户信息进行判断 防止用户信息没有及时获取
+  const userInfoRes =  await getUserInfo ()
+  if (!userInfoRes.email && !userInfoRes.phone) {
+    let firstLogin = JSON.parse(localStorage.getItem('firstLogin') || '[]')
+    let notFirstLoginArr = []
+    // 兼容之前的版本
+    if (firstLogin == '2') {
+      notFirstLoginArr.push(userInfoRes.userID)
+      localStorage.setItem('firstLogin', JSON.stringify(notFirstLoginArr))
+    }else if (Array.isArray(firstLogin)) {
+      notFirstLoginArr.push(...firstLogin)
+    }
+    const notFirstLogin = notFirstLoginArr.includes(userInfoRes.userID)
+    // 第一次登录进去才弹窗
+    // bindEmailDialogVisible.value = !notFirstLogin
+    actionShow.value = !notFirstLogin
+    if (!notFirstLogin) {
+      notFirstLoginArr.push(userInfoRes.userID)
+      localStorage.setItem('firstLogin', JSON.stringify(notFirstLoginArr))
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="dialogue-wrap">
+    <AppNavBar :left-text="$t('clTitle')" views_grade="firstly_view">
+      <template #right>
+        <div v-if="conversationStore.storeConversationEditing" class="edit-finish blue-text" @click="editFinish">{{
+      t('finish') }}</div>
+        <van-popover v-else class="contact-dialog" placement="bottom-end" v-model:show="dialogVisable"
+          :actions="dialogList">
+          <div class="item" v-for="item in dialogList" :key="item.id" @click="handleClick(item.label)">
+            <img :src="item.url" alt="">
+            <div class="txt">{{ item.name }}</div>
+          </div>
+          <template #reference>
+            <img v-show="dialogList.length > 0" class="add-img" src="@/assets/contact-add.svg" alt="">
+          </template>
+        </van-popover>
+      </template>
+    </AppNavBar>
+    <div class="emptybox" style="height: 56px;flex-shrink: 0;"></div>
+    <div class="search-box">
+      <van-search class="c-search" @click="handleSearch" :placeholder="$t('search')" />
+    </div>
+    <!-- 长按编辑 -->
+    <div v-if="conversationStore.storeConversationEditing" class="editing-footer">
+      <div class="all-select" @click="toggleAllSelect">
+        <div class="select-item">
+          <div class="check-box" :class="{ checked: selectedAll }"></div>
+        </div>
+        <span>{{ $t('selectAll') }}</span>
+      </div>
+      <div class="delete-op red-text" @click="delConversation">{{ $t('delete') }}</div>
+    </div>
+    <div v-if="!networkOnline" class="online-status">
+      <div class="l">
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFrSURBVHgBtVTLUcMwEH1SbBhzwakgLoEOCB2IWwgH0kGGChIqADqwZ5hMjuogpoOUEDrwgckwY1tizQEZW/4MSd5FY+3T89PuaoETgHURtBB+7mFMTF8r7JwvbJmUyb9E04kYM4YFMcb1PyFWGtHZWoa9RAtn6gLPGpihG+Fgj8eqc6fKUh42JHiFfphRagJab8qbvPyRT8VCM6tgQo6GtH7UIpQeStXSKqonIiCHS9iRtBWHccyLtNVEc1gK0h9+6pkamOsP8IADwLQxxUubPg4A5xjVRCmfQxwJZdFtCy9I78QLraMmglKmM4wovRK0gF7XvC2uOWRN1D1HSEtT24TOSjK6TtQQR66MKVOoUCaUgtemQz99yHBpjSk8eWu5+9WqErJ7sYHu37Nk5N1dyT98XiUNXNy2XbOiGDl7iOp24+jLpmJWTCoiXMPijuws3TcZ2852D2maCZmDgCmaRpwGyyfiriF9EnwD7Bhz03S7cQkAAAAASUVORK5CYII="
+          alt=""
+        />
+        <span>{{ $t("net_error_no_net") }}</span>
+      </div>
+      <div class="r">
+        <img
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACJSURBVHgB5dCxEYMwDAXQLx9N0iQjZINkhLCBSqBiI0aAjhJvwAxsQgUNxnD0tnSU8BsXX/d8EnCPLBmXnvmtmTXBhvBfn+g1EMXKJeeGCF8zISVrx1OIFjISkrS29B6De6ALzYjIEcIrVicQ4gqu9+djZqThP2TgJx02uI7LudIAUcQTBg1wwWxD5S613cGgbQAAAABJRU5ErkJggg=="
+          alt=""
+        />
+      </div>
+    </div>
+    <!-- 渲染会话 -->
+    <ConversationList ref="conversationListRef" />
+    <div class="emptybox" style="height: 50px;flex-shrink: 0;"></div>
+    <div v-if="!conversationStore.storeLoading && !conversationStore.storeConversationList.length" class="flex-center" style="flex: 1;">
+      <div class="no-data-tips">
+        <img src="@/assets/no-data.png" width="120" height="120" alt="">
+        <div>{{ $t('clNoConversation') }}</div>
+      </div>
+    </div>
+    <CommonDialog v-model="bindEmailDialogVisible" :title="$t('bind_email')" :content="$t('bindEmailTipContent')"
+      :ok-text="$t('delay_bind')" :cancel-text="$t('go_to_binding')" @onOk="handleBindEmail" />
+    <SearchLogs v-if="searchVisible" v-model="searchVisible" :conversationList="conversationStore.storeConversationList"
+      :toDetail="handleDetail" />
+    <addfriendbindDialog class="bind_dialog" :show="bindDialogShow" :addfriendbindType="addfriendbindType"
+      @close="bindDialogShow = false"></addfriendbindDialog>
+    <bindactionSheet :show="actionShow" :actions="actionsButton" @logout="handleConfirm" @close="actionShow = false">
+    </bindactionSheet>
+    <!-- 二级路由 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.custom-badge {
+  :deep(.van-badge) {
+    border: 1px solid #fff;
+  }
+
+  :deep(.van-badge--dot) {
+    width: 10px;
+  }
+}
+.no-data-tips {
+  // margin-top: 154px;
+  color: #1B1B22;
+  text-align: center;
+
+  >div {
+    opacity: .6;
+    text-align: center;
+    font-size: 0.875rem;
+  }
+}
+:deep(.van-nav-bar__text) {
+  font-weight: 600 !important;
+  color: #1B1B22;
+  font-family: "PingFang SC";
+  font-size: 1.5rem;
+}
+
+:deep(.van-hairline--top-bottom:after),
+:deep(.van-hairline--bottom:after) {
+  border: none;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+.van-search {
+  :deep(&.c-search) {
+    padding: 0;
+    height: 36px;
+
+    .van-search__content {
+      padding-left: 12px;
+      border-radius: 8px;
+      // 字体大小不一致问题
+      .van-field__value {
+        .van-field__control {
+          color: #76767a;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+        }
+      }
+    }
+
+    .van-field__left-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      background: url('@/assets/search-icon.svg') no-repeat center / cover;
+
+      i {
+        display: none;
+      }
+    }
+  }
+}
+
+.edit-finish {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.editing-footer {
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--van-padding-md);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  font-size: 1rem;
+  color: #1B1B22;
+  background: #fff;
+
+  .all-select {
+    display: flex;
+    align-items: center;
+  }
+
+  .delete-op {
+    font-size: 0.875rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .editing-footer {
+    max-width: 375px;
+  }
+}
+
+
+
+.online-status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 36px;
+  padding: 0 16px;
+  color: var(--c-red-color);
+  font-size: 0.875rem;
+  background: #FFEDEF;
+
+  .l {
+    display: flex;
+
+    img {
+      margin-right: 8px;
+    }
+  }
+}
+
+
+.select-item {
+  width: 16px;
+  margin-right: 12px;
+
+  .check-box {
+    width: 16px;
+    height: 16px;
+    border: 1px solid #D1D1D3;
+    border-radius: 50%;
+
+    &.checked {
+      border-color: var(--c-blue-color);
+      background: var(--c-blue-color) url(../../assets/group-check.svg) no-repeat center / cover;
+    }
+  }
+}
+
+.dialogue-wrap {
+  // padding-top: 53px;
+  // height: 100vh;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #FFF;
+  // overflow-y: auto;
+  overflow: hidden;
+  position: relative;
+
+  .search-box {
+    padding: 6px 16px;
+    height: 48px;
+
+    .custom-input {
+      border-radius: 8px;
+      background: #F8F8FB;
+      height: 36px;
+      padding: 8px 12px;
+
+      :deep(.van-field__left-icon) {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+
+        .van-icon {
+          font-size: 1.5rem;
+          line-height: 24px;
+        }
+      }
+
+      :deep(.van-field__control) {
+        color: #76767A;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        height: 20px;
+      }
+    }
+  }
+
+  .my-scrollbar {
+    flex: 1;
+    overflow: hidden;
+    // height: 100%;
+    // overflow-y: auto;
+  }
+
+  .cus-cell-group {
+    flex: 1;
+    // margin: 0;
+    // height: calc(100vh - 156px);
+    // overflow-y: auto;
+
+    .cell-item {
+      user-select: none;
+      display: flex;
+      align-items: center;
+      height: 76px;
+      padding: 0 16px;
+
+      .item-info {
+        flex: 1;
+        margin-left: 12px;
+        font-size: 0.875rem;
+        color: #1B1B22;
+
+        .name-item {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 6px;
+          font-size: 1rem;
+          line-height: 22px;
+
+          .name {
+            display: flex;
+            align-items: center;
+            color: #1B1B22;
+
+            .showName {
+              display: inline-block;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              width: 160px;
+            }
+
+            .group-icon {
+              margin-top: -1px;
+              margin-right: 2px;
+            }
+
+            .revc {
+              margin-top: -4px;
+              margin-left: 5px;
+            }
+          }
+
+          .time {
+            font-size: 0.75rem;
+            opacity: .4;
+          }
+        }
+      }
+
+      .msg-item {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+
+        .last-msg {
+          width: calc(100vw - 136px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #1B1B22;
+          opacity: .6;
+        }
+
+        .unread-count {
+          padding: 0 5px;
+          color: #fff;
+          text-align: center;
+          background: var(--c-blue-color);
+          border-radius: 10px;
+          font-size: 0.75rem;
+          line-height: 18px;
+        }
+
+        .notdisturb {
+          width: 6px;
+          height: 6px;
+          background: var(--c-blue-color);
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .group_cell {
+
+      &.selected,
+      &.isPinned {
+        background: #F8F8FB;
+      }
+    }
+  }
+
+  // 获取类名下最后一个https://blog.csdn.net/qq_36904182/article/details/130848684
+  // .isPinned:not(.show-expand :has(+ .isPinned)) {
+  //   .expand-box {
+  //     display: block;
+  //   }
+  // }
+
+  :deep(.van-swipe-cell__left),
+  :deep(.van-swipe-cell__right) {
+    display: flex;
+  }
+
+  .opbtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 76px;
+    height: 100%;
+
+    &.gray-color {
+      background: #E9EBF2;
+    }
+
+    &.blue-color {
+      background: #0095F6;
+    }
+
+    &.red-color {
+      background: #FC5A50;
+    }
+  }
+
+  .custom-del {
+    :deep(.van-dialog__header) {
+      color: #1B1B22;
+      padding-top: 25px;
+      font-size: 1rem;
+    }
+
+    :deep(.van-dialog__content) {
+      color: #76767A;
+    }
+  }
+}
+
+@media screen and (min-width:750px) {
+  .item-info {
+    width: 284px;
+  }
+
+  .last-msg {
+    width: 284px !important;
+  }
+}
+
+:deep(.bind_dialog) {
+  .van-action-sheet__header {
+    padding: 20px 50px;
+    line-height: 30px;
+  }
+}
+</style>
diff --git a/src/views/dialogue/privateChat/components/audio.vue b/src/views/dialogue/privateChat/components/audio.vue
new file mode 100644
index 0000000..4f2783d
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/audio.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { defineProps, ref, onMounted, onUnmounted } from "vue";
+import { isSelf } from "@/utils/tools";
+
+const props = defineProps({
+  msg: {
+    type: Object
+  }
+})
+const emit = defineEmits(["complete"]);
+const audioRef = ref();
+const isStart = ref(false);
+const isMe = ref(false)
+
+const currentID = new Date().getTime();
+const handlePlayEnd = () => {
+  // 在此触发删除焚毁消息
+  emit('complete', props.msg)
+}
+onMounted(() => {
+  if (!window.audioRefList) {
+    window.audioRefList = [];
+  }
+  isMe.value = isSelf(props.msg.sendID)
+  window.audioRefList.push({ currentID, audioRef: audioRef.value, isStart });
+  audioRef.value.addEventListener("ended", handlePlayEnd);
+});
+const handle_start = () => {
+  isStart.value = !isStart.value;
+  window.audioRefList.forEach(el => {
+    if (el.currentID !== currentID) {
+      el.isStart.value = false;
+    }
+  });
+};
+watch(isStart, value => {
+  //开始播放
+  if (value) {
+    audioRef.value.play();
+  } else {
+    audioRef.value.pause();
+  }
+});
+onUnmounted(() => {
+  window.audioRefList = [];
+  audioRef.value = null;
+});
+</script>
+
+<template>
+  <div class="audio-wrap">
+    <audio
+      ref="audioRef"
+      style="display: none;"
+      :src="msg.soundElem.sourceUrl"
+    ></audio>
+    <template v-if="isMe">
+      <img
+        src="@/assets/img/msg_pause.svg"
+        height="20"
+        width="20"
+        v-if="isStart"
+        @click="handle_start"
+      />
+      <img
+        src="@/assets/img/msg_audio_start1.svg"
+        height="20"
+        v-else
+        @click="handle_start"
+      />
+    </template>
+    <template v-else>
+      <img
+        src="@/assets/img/msg_pause1.svg"
+        height="20"
+        width="20"
+        v-if="isStart"
+        @click="handle_start"
+      />
+      <img
+        src="@/assets/img/msg_audio_start.svg"
+        height="20"
+        v-else
+        @click="handle_start"
+      />
+    </template>
+    <span>{{ msg.soundElem.duration }}"</span>
+  </div>
+</template>
+
+<style scoped lang="less">
+.audio-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > span {
+    margin-left: 10px;
+  }
+}
+</style>
diff --git a/src/views/dialogue/privateChat/components/chatSeting.vue b/src/views/dialogue/privateChat/components/chatSeting.vue
new file mode 100644
index 0000000..b608c75
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/chatSeting.vue
@@ -0,0 +1,802 @@
+<script setup>
+import { ref, onMounted, watchEffect } from "vue";
+import { AppNavBar, CommonLottie,TipDialog } from "@/components/index";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { showConfirmDialog, showToast } from "vant";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import { getSDK } from "@/utils/openIM/sdk/index.js";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import use from "@/use";
+import { formatTime } from "@/utils/tools";
+import { CbEvents } from "@/utils/openIM/constant";
+import { burnMsgByClearMsg } from '@/utils/common'
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+
+const { t } = useI18n();
+const $api = inject("$api");
+const router = useRouter();
+const detailSetRef = ref(null);
+useGrade(detailSetRef, 3,'',()=>{
+  router.back()
+});
+const contactStore = useContactStore();
+const { setFriendDetailId } = contactStore;
+const { friendDetailId, allGroupOwnerOrAdmin,detailSearch } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setPrivateChatConfig } = userStore;
+const { userInfo, appConfig, privateChatConfig } = storeToRefs(userStore);
+const { useUid } = use;
+const OpenIM = getSDK();
+const checkedList = ref({
+  isPinned: false,
+  siRecvMsgOpt: 0,
+  recvMsgOpt: 0,
+  burnButton: 0,
+  readDeleteTime: 5
+});
+const showBottom = ref(false);
+const warmChatSettingsVisible  = ref(false); // 温馨提示弹框
+const resultMsg = ref(); // 温馨提示弹框-内容
+const friendInfo = ref({});
+const sessionInfo = ref("");
+const actionShow = ref(false);
+const showBurning = ref(false);
+const actions = ref([
+  { name: t("csvClearLocal") }, // 仅清空本地聊天记录
+  { name: t("gsvDeleteOtherMsg"), color: "#ee0a24" } // 清空本地和对方的聊天记录
+]);
+const incinerationStatus = ref(0);
+onMounted(() => {
+  getFriendInfo();
+  getSessionInfo();
+});
+
+// 获取指定用户的个人信息
+const getFriendInfo = () => {
+  OpenIM.getSpecifiedFriendsInfo([friendDetailId.value]).then(res => {
+    friendInfo.value = res.data.length && res.data[0].friendInfo;
+  });
+};
+
+const ex = ref({});
+
+const getSessionInfo = () => {
+  OpenIM.getOneConversation({
+    sourceID: friendDetailId.value,
+    sessionType: 1
+  }).then(res => {
+    sessionInfo.value = res.data;
+    checkedList.value.isPinned = sessionInfo.value.isPinned;
+    checkedList.value.siRecvMsgOpt = sessionInfo.value.ex
+      ? JSON.parse(sessionInfo.value.ex).siRecvMsgOpt?.value
+      : 0;
+    checkedList.value.recvMsgOpt = sessionInfo.value.recvMsgOpt;
+    // 设置焚毁时间列表
+    let arr =
+      appConfig.value?.burn_after_reading?.private_chat?.incineration_times ||
+      [];
+    incinerationStatus.value =
+      appConfig.value?.burn_after_reading?.private_chat?.status || 0;
+    burningTimeList.value = arr.sort((a, b) => a.time - b.time);
+    // 因为useGlobalEvent中已经监听到OnConversationChanged的会话变更了，所以只用privateChatConfig中的ex设置最新的
+    setDefaultCheckedListByEx()
+  });
+};
+
+// 阅后即焚相关的设置不能用getOneConversation（拿不到最新的）的设置，需要单独设置
+const setDefaultCheckedListByEx = () => {
+  ex.value = privateChatConfig.value.ex ? JSON.parse(privateChatConfig.value.ex) : {};
+  checkedList.value.siRecvMsgOpt = privateChatConfig.value.ex
+      ? JSON.parse(privateChatConfig.value.ex).siRecvMsgOpt?.value
+      : 0;
+  if (ex.value.readDeleteTime) {
+    checkedList.value.readDeleteTime = ex.value.readDeleteTime
+      ? ex.value.readDeleteTime
+      : 5;
+  } else {
+    const bol = burningTimeList.value.some(
+      i => i.time == checkedList.value.readDeleteTime
+    );
+    if (!bol) {
+      checkedList.value.readDeleteTime =
+        burningTimeList.value.length > 0 ? burningTimeList.value[0].time : 5;
+    }
+  }
+  checkedList.value.burnButton = ex.value.burnButton
+    ? ex.value.burnButton
+    : 0;
+}
+
+// 置顶
+const onUntop = async () => {
+  const res = await OpenIM.pinConversation({
+    conversationID: sessionInfo.value.conversationID,
+    isPinned: checkedList.value.isPinned
+  });
+};
+
+// 屏蔽消息
+const onRecvMsgOpt = async () => {
+  let opt = checkedList.value.recvMsgOpt;
+  const res = await OpenIM.setConversationRecvMessageOpt({
+    conversationID: sessionInfo.value.conversationID,
+    opt
+  });
+};
+
+// 0 免打扰 2 取消免打扰
+const onNoDis = async () => {
+  let ex = {
+    siRecvMsgOpt: { value: 0, update: 1 }
+  };
+  ex.siRecvMsgOpt.value = checkedList.value.siRecvMsgOpt;
+  const params = {
+    userIDs: [userInfo.value.userID],
+    conversation: {
+      conversationID: sessionInfo.value.conversationID,
+      ex: JSON.stringify(ex)
+    }
+  };
+  await $api.contact.setConversationsApi(params);
+};
+
+// 清除聊天记录
+const actionSelect = async (action, index) => {
+  if (index === 0) {
+    await burnMsgByClearMsg(sessionInfo.value.conversationID)
+    OpenIM.clearConversationAndDeleteAllMsg(
+      sessionInfo.value.conversationID
+    ).then(res => {
+      showToast({ message: t("clearSuccessfully"), position: "top" });
+    });
+  } else if (index === 1) {
+    const res = await $api.contact.deleteConversationMsgApi({
+      conversationID: sessionInfo.value.conversationID,
+      senderPlatformID: 5
+    });
+    if (res.code === 0) {
+      getHistoryMsgList();
+    }
+  }
+};
+
+// 清空本地和所有成员的聊天记录
+let hisLastMinSeq = 0;
+let hisConversationID = "";
+let hisStartClientMsgID = "";
+let hisArr = [];
+const hisLock = ref(false);
+const getHistoryMsgList = async () => {
+  if (hisLock.value) return;
+  let params = {
+    lastMinSeq: hisLastMinSeq, //lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传 number
+    count: 3, // 一次拉取的数量
+    startClientMsgID: hisStartClientMsgID, // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+    conversationID: sessionInfo.value.conversationID // 会话 ID
+  };
+  const re = await OpenIM.getAdvancedHistoryMessageList(params);
+  if (re.data.messageList && re.data.messageList.length > 0) {
+    hisArr = [...hisArr, ...re.data.messageList];
+    hisLastMinSeq = re.data?.lastMinSeq || 0;
+    hisStartClientMsgID = re.data.messageList[0]?.clientMsgID || "";
+    getHistoryMsgList();
+  } else {
+    hisLock.value = true;
+    showToast({ message: t("clearSuccessfully"), position: "top" });
+  }
+};
+
+const trueDel = () => {
+  hisArr.forEach(async item => {
+    if (
+      item.contentType === 110 &&
+      item.customElem?.data?.customType === 1001
+    ) {
+      return;
+    }
+    OpenIM.deleteMessage({
+      conversationID: sessionInfo.value.conversationID,
+      clientMsgID: item.clientMsgID
+    });
+  });
+};
+
+watchEffect(() => {
+  if (!hisLock.value) return;
+  trueDel();
+  hisLock.value = false;
+  hisLastMinSeq = 0;
+  hisStartClientMsgID = "";
+});
+
+// 清空本地和所有成员的聊天记录
+const toUserDetail = () => {
+  setFriendDetailId(friendInfo.userID);
+  router.push(`/home/dialogue/chatSetings/detail`);
+};
+// 获取群主和群管理员标识
+const isMemberFriendIds = computed(() => friendState.memberFriendIds)
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        if (isMemberFriendIds.value.includes(userID)) {
+          return "group";
+        } else {
+          return "";
+        }
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+// 消息焚烧时长列表
+let burningTimeList = ref();
+let selectTime = ref({});
+const onReadTime = t => {
+  selectTime.value.time = t;
+  showBurning.value = true;
+};
+
+// 选择时长
+const onSelectTime = item => {
+  selectTime.value.time = item.time;
+  let e = {
+    ...ex.value,
+    burnButton: checkedList.value.burnButton,
+    readDeleteTime: item.time
+  };
+  setPrivateChatConfig({
+    ...privateChatConfig.value,
+    ex: JSON.stringify(e)
+  });
+};
+
+// 保存焚烧时长选择
+let saveLoading = ref(false);
+const onSaveBurning = async () => {
+  if (saveLoading.value) return;
+  saveLoading.value = true;
+  try {
+    onAfterRead();
+  } catch {
+  } finally {
+    showBurning.value = false;
+    saveLoading.value = false;
+  }
+};
+
+const onAfterRead = async (newChecked = 1) => {
+  // 阅后即焚时间如果没有设置过默认都是5s
+  const readDelTime = selectTime.value.time || ex.value.readDeleteTime || 5
+  let e = {
+    ...ex.value,
+    burnButton: newChecked,
+    readDeleteTime: readDelTime
+  };
+  let data = {
+    ex: JSON.stringify(e),
+    device_id: useUid(),
+    platform: 5,
+    is_send: true,
+    conversation: sessionInfo.value.conversationID
+  };
+
+  const res = await $api.contact.setConversationBurnAfterReading(data);
+  if (res.code !== 0) return;
+  // 默认都是5s
+  checkedList.value.readDeleteTime = readDelTime
+  checkedList.value.burnButton = newChecked
+  setPrivateChatConfig({
+    ...privateChatConfig.value,
+    ex: JSON.stringify(e)
+  });
+};
+
+// 聊天记录保存时间
+const showChatRecordTime = ref(false); // 聊天记录保存时间弹窗开关
+let chatRecordTimeConfig = ref({
+  msgDestructTime: 0, // 设置删除时间
+  lastMsgDestructTimeNote: 0, // 上次删除节点
+});
+const msgDestructTime = ref(0) // 当前选择的时间
+const chatRecordTimeData = ref([]) // 聊天记录保存时间列表
+
+// 打开聊天记录保存时间弹窗
+const onChaRecordTimeSheet = t => {
+  msgDestructTime.value = t;
+  showChatRecordTime.value = true;
+};
+// 选择聊天记录保存时间
+const onSelectChaRecordTime = t => {
+  msgDestructTime.value = t.time;
+};
+// 保存聊天记录保留时间选择
+const onSaveChatRecordTime = async () => {
+  if (saveLoading.value) return;
+  saveLoading.value = true;
+  showConfirmDialog({
+    title: t('dialog_tip1'),
+    message: t('selectMsgDeleteTimeTip'),
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+  }).then(async (res) => {
+    // 接口调用
+    let exData = {
+      ...ex.value,
+      msgDestructTime: msgDestructTime.value,
+    };
+    const params = {
+      userIDs: [userInfo.value.userID],
+      conversation: {
+        conversationID: sessionInfo.value.conversationID,
+        ex: JSON.stringify(exData)
+      }
+    };
+   const resData = await $api.contact.setConversationsApi(params);
+   showToast(t("saveSuccessfully"));
+    showChatRecordTime.value = false;
+    saveLoading.value = false;
+  }).catch((err) => {
+    showChatRecordTime.value = false;
+    saveLoading.value = false;
+  })
+}
+const onTimeFormatter = (time) => {
+  return time ? (time / (24 * 60 * 60)) + t("day") : t("forever")
+}
+// 【聊天设置】fix 2024-8-1 H5修复删除好友后用户信息逻辑处理
+// 【聊天设置】好友被删了，或者是在app端被删了，即不存在好友关系，添加好友
+const handleInexistenceAdd = async () => {
+  try {
+    // 获取用户信息
+    const result = await $api.contact.getUserById({
+      UserIDs: [detailSearch.value.userID],
+    });
+    // 判断用户是否存在
+    const isInUser = result.data.users && result.data.users[0]?.internal_uid !== "";
+    // 检查好友总数
+    const res = await $api.contact.checkFriendTotal();
+    if (res.code === 6034) {
+      // 好友数量已达上限
+      resultMsg.value = t("friendNumberCatchTopLimit");
+      warmChatSettingsVisible.value = true;
+      return;
+    } else if (res.code === 6035) {
+      // 当天添加的好友已达上限
+      resultMsg.value = t("error_6035");
+      warmChatSettingsVisible.value = true;
+      return;
+    } else if (res.code !== 0) {
+      // 其他错误，暂不处理
+      return;
+    }
+    // 验证是否有资格添加好友
+    const res2 = await $api.contact.validateAddFriendByUser({
+      userID: detailSearch.value.userID,
+    });
+    if (res2.code === 6083) {
+      // 没有资格添加好友=====该用户未达到添加好友条件
+      resultMsg.value = t("withoutQualification");
+      warmChatSettingsVisible.value = true;
+      return;
+    }
+    // 跳转到添加好友页面
+    router.push(`/home/contact/add/search/result/apply?isValidate=false`);
+  } catch (error) {
+    // 处理异常情况
+    console.error("Error occurred while handling friend addition:", error);
+    showToast({ position: "top", message: t("error_api") });
+  }
+};
+
+watchEffect(() => {
+  ex.value = privateChatConfig.value.ex ? JSON.parse(privateChatConfig.value.ex) : {};
+  // 聊天记录保留时间后台配置选项
+  let rules = appConfig.value?.msg_subsist_rules?.rule || [
+  {
+    time: 0
+  }
+];
+  chatRecordTimeData.value = rules.sort((a, b) => a.time - b.time)
+  // 聊天记录保留时间
+  // 扩展字段-定时删除时间-单位：秒  设置删除时间
+  chatRecordTimeConfig.value.msgDestructTime = ex.value?.msgDestructTime || 0
+  // 扩展字段-定时删除时间-单位：秒  上次删除时间点
+  chatRecordTimeConfig.value.lastMsgDestructTimeNote = ex.value?.lastMsgDestructTimeNote || 0
+})
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <div style="flex: 1; position: relative; height: 100%;">
+      <AppNavBar
+        :title="$t('csvTitle')"
+        left-arrow
+        views_grade="thirdly_view"
+        @click-left="router.back()"
+      ></AppNavBar>
+      <div class="detailSet-wrap">
+        <div class="detailSet-content">
+          <div class="particulars-avatar">
+            <Avatar
+              @click="toUserDetail"
+              width="60"
+              height="60"
+              :url="friendInfo.faceURL || detailSearch.faceURL"
+              :name="
+                friendInfo.remark ? friendInfo.remark : friendInfo.nickname
+              "
+              @updateUrl="url => friendInfo.faceURL = url"
+            ></Avatar>
+            <div v-if="showGroupOwner(friendInfo.userID || detailSearch.userID) !== ''">
+              <CommonLottie
+                :isGroup="showGroupOwner(friendInfo.userID || detailSearch.userID)"
+                :bottom="2"
+                :showName="friendInfo.remark ? friendInfo.remark : friendInfo.nickname || detailSearch.username"
+              ></CommonLottie>
+            </div>
+            <span v-else>{{
+              friendInfo.remark ? friendInfo.remark : friendInfo.nickname  || detailSearch.username
+            }}</span>
+            <van-button
+              v-if="!detailSearch.isFriend"
+              class="particulars-add-btn" 
+              round color="rgb(19, 20, 21)"
+              @click="handleInexistenceAdd"
+              >{{ $t("addFriend")  }}</van-button>
+          </div>
+          <van-cell-group :border="true">
+            <van-cell :title="$t('csvSetTopMsg')">
+              <template #title>
+                <span class="custom-title">{{ $t("csvSetTopMsg") }}</span>
+              </template>
+              <template #right-icon>
+                <van-switch
+                  v-model="checkedList.isPinned"
+                  size="16px"
+                  @change="onUntop"
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('burnAfterReading')"
+              v-if="incinerationStatus == 1"
+            >
+              <template #title>
+                <span class="custom-title">{{ $t("burnAfterReading") }}</span>
+              </template>
+              <template #right-icon>
+                <!-- 这里使用异步switch -->
+                <van-switch
+                  :active-value="1"
+                  :inactive-value="0"
+                  size="16px"
+                  :model-value="checkedList.burnButton"
+                  @update:model-value="onAfterRead"
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('readDeleteTime')"
+              v-if="incinerationStatus == 1 && checkedList.burnButton === 1"
+              @click="onReadTime(checkedList.readDeleteTime)"
+            >
+              <template #title>
+                <span class="custom-title">{{ $t("readDeleteTime") }}</span>
+              </template>
+              <template #right-icon>
+                <span class="read-time">{{ formatTime(checkedList.readDeleteTime, 'txt') }}</span>
+                <img
+                  style="margin-left: 10px;"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell :title="$t('messageNotDisturb')">
+              <template #title>
+                <span class="custom-title">{{ $t("messageNotDisturb") }}</span>
+              </template>
+              <template #right-icon>
+                <van-switch
+                  v-model="checkedList.siRecvMsgOpt"
+                  :active-value="1"
+                  :inactive-value="0"
+                  size="16px"
+                  @change="onNoDis"
+                />
+              </template>
+            </van-cell>
+            <van-cell :title="$t('csvSetDisableMsg')">
+              <template #title>
+                <span class="custom-title">{{ $t("csvSetDisableMsg") }}</span>
+              </template>
+              <template #right-icon>
+                <van-switch
+                  v-model="checkedList.recvMsgOpt"
+                  :active-value="1"
+                  :inactive-value="0"
+                  size="16px"
+                  @change="onRecvMsgOpt"
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('readDeleteTime')"
+              @click="onChaRecordTimeSheet(chatRecordTimeConfig.msgDestructTime)"
+            >
+              <template #title>
+                <div class="chat-title">
+                  <div class="custom-title">{{ $t("msgSaveTime") }}</div>
+                  <div class="custom-title chat-tips">{{ $t("msgSaveTimeDesc") }}</div>
+                </div>
+              </template>
+              <template #right-icon>
+                <span class="read-time">{{ onTimeFormatter(chatRecordTimeConfig.msgDestructTime) }}</span>
+                <img
+                  style="margin-left: 10px;"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('clearChatHistory')"
+              @click="actionShow = true"
+            >
+              <template #title>
+                <span class="custom-title">{{ $t("clearChatHistory") }}</span>
+              </template>
+            </van-cell>
+          </van-cell-group>
+          <van-action-sheet
+            v-model:show="actionShow"
+            :actions="actions"
+            :cancel-text="$t('cancel')"
+            close-on-click-action
+            @select="actionSelect"
+          />
+          <!-- 阅后即焚-时间设置 -->
+          <van-action-sheet v-model:show="showBurning">
+            <div class="burning-time">
+              <div class="title">
+                {{ $t("readDeleteTimeTitle") }}
+              </div>
+              <div class="close" @click="showBurning = false">
+                {{ $t("cancel") }}
+              </div>
+              <div class="close save" @click="onSaveBurning">
+                {{ $t("save") }}
+              </div>
+              <div class="content">
+                <div class="srocll">
+                  <div
+                    class="item"
+                    v-for="(item, index) in burningTimeList"
+                    :key="index"
+                    @click="onSelectTime(item)"
+                  >
+                    <div class="item-name">{{ formatTime(item.time, 'txt') }}</div>
+                    <div
+                      class="item-select"
+                      v-if="item.time == selectTime.time"
+                    >
+                      <img src="@/assets/svg/list_hook.svg" alt="" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-action-sheet>
+          <!-- 聊天记录保留时间设置 -->
+          <van-action-sheet v-model:show="showChatRecordTime">
+            <div class="burning-time">
+              <div class="title">
+                {{ $t("selectMsgDeleteTime") }}
+              </div>
+              <div class="close" @click="showChatRecordTime = false">
+                {{ $t("cancel") }}
+              </div>
+              <div class="close save" @click="onSaveChatRecordTime">
+                {{ $t("confirm") }}
+              </div>
+              <div class="content">
+                <div class="srocll">
+                  <div
+                    class="item"
+                    v-for="(t, index) in chatRecordTimeData"
+                    :key="index"
+                    @click="onSelectChaRecordTime(t)"
+                  >
+                    <div class="item-name">{{ onTimeFormatter(t.time) }}</div>
+                    <div class="item-select" v-if="t.time == msgDestructTime" >
+                      <img src="@/assets/svg/list_hook.svg" alt="" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-action-sheet>
+        </div>
+      </div>
+      <!-- 温馨提示弹框 -->
+      <TipDialog v-model="warmChatSettingsVisible" :resultMsg="resultMsg"></TipDialog>
+    </div>
+    <!-- 四级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+  overflow-y: auto;
+
+  .detailSet-content {
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+
+        .custom-title {
+          padding-left: 16px;
+          color: #1b1b22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+    }
+
+    .particulars-avatar {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 0 30px 0;
+      .particulars-add-btn {
+        margin-top: 15px;
+        min-width: 130px;
+      }
+      img {
+        width: 60px;
+        height: 60px;
+        margin-bottom: 16px;
+      }
+
+      span {
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+  }
+}
+.special-title-name {
+  position: absolute;
+  left: 32px;
+  bottom: 0;
+  width: 100%;
+}
+
+.group-title-name {
+  color: rgba(252, 90, 80, 1) !important;
+}
+.group-title-names {
+  color: rgba(124, 73, 26, 1) !important;
+  margin-right: 5px;
+}
+.admin-title-names {
+  color: rgba(63, 111, 177, 1) !important;
+  margin-right: 5px;
+}
+.admin-title-name {
+  color: rgba(250, 152, 55, 1) !important;
+}
+.read-time {
+  color: #1b1b2299;
+}
+
+.burning-time {
+  position: relative;
+
+  .title {
+    text-align: center;
+    padding: 13px 0;
+    font-size: 1rem;
+    color: #1b1b22;
+  }
+
+  .close {
+    top: 16px;
+    left: 16px;
+    position: absolute;
+    font-size: 0.875rem;
+    color: #1b1b2299;
+  }
+  .save {
+    right: 16px;
+    left: auto;
+    color: #538fe1;
+  }
+
+  .content {
+    height: calc(100% - 48px);
+    overflow: hidden;
+
+    .item {
+      padding: 20px 16px;
+      border-bottom: 1px solid #f2f4f5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-name {
+        font-size: 1rem;
+      }
+      .item-select {
+        line-height: 0;
+      }
+    }
+  }
+}
+.chat-title {
+  .custom-title {
+    display: block !important;
+    line-height: 22px;
+  }
+  .chat-tips {
+    line-height: 18px;
+    color: #76767A !important;
+    font-size: var(--size-12px) !important;
+  }
+}
+
+.scroll-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  /* 显示横向滚动条 */
+  -ms-overflow-style: none;
+  /* 隐藏 IE 浏览器的滚动条 */
+  scrollbar-width: none;
+  /* 隐藏 Firefox 浏览器的滚动条 */
+}
+
+/* 隐藏非 Webkit 浏览器的滚动条 */
+.scroll-wrapper::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/src/views/dialogue/privateChat/components/chatSetingDetail.vue b/src/views/dialogue/privateChat/components/chatSetingDetail.vue
new file mode 100644
index 0000000..5526bfb
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/chatSetingDetail.vue
@@ -0,0 +1,392 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import {
+  AppNavBar,
+  CommonLottie,
+  DeleteDialog,
+  ApplyDialog,
+  TipDialog
+} from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from "@/utils/openIM";
+import { getGender } from "@/utils/tools";
+import { storeToRefs } from "pinia";
+import { copyUserId } from "@/utils/tools.js";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import { showToast } from "vant";
+import { burnMsgByClearMsg } from '@/utils/common'
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo, privateChatConfig } = storeToRefs(userStore);
+const chatSetingDetailRef = ref(null);
+useGrade(chatSetingDetailRef, 4);
+const contactStore = useContactStore();
+const { friendDetailId, contactList, allGroupOwnerOrAdmin,detailSearch } = storeToRefs(
+  contactStore
+);
+const { setDetailSearch, updateContact } = contactStore;
+const OpenIM = getSDK();
+const router = useRouter();
+const route = useRoute();
+const $api = inject("$api");
+const applyVisable = ref(false);
+const deleteVisable = ref(false);
+const chatSettingsDetailsVisible  = ref(false); // 温馨提示弹框
+const resultMsg = ref(); // 温馨提示弹框-内容
+const detailObj = reactive({
+  nickname: "",
+  remark: "",
+  gender: "",
+  age: "",
+  signature: "",
+  faceURL: "",
+  userId: "",
+  internal_uid: ""
+});
+const getList = async () => {
+  // const res = await OpenIM.getUsersInfo([friendDetailId.value])
+  const index = contactList.value.findIndex(
+    item => item.userID === friendDetailId.value
+  );
+  if (index != -1) {
+    const { nickname, remark, faceURL, userID } = contactList.value[index];
+    detailObj.nickname = nickname;
+    detailObj.remark = remark;
+    detailObj.faceURL = faceURL;
+    detailObj.userId = userID;
+    setDetailSearch({ ...contactList.value[index], isFriend: true });
+  }
+  const result = await $api.contact.queryInfoByuserId({
+    UserIDs: [friendDetailId.value]
+  });
+  if (result.code != 0) return;
+  if (Array.isArray(result.data.users) && result.data.users.length > 0) {
+    const { gender, age, signature, internal_uid } = result.data.users[0];
+    detailObj.gender = gender;
+    detailObj.age = age;
+    detailObj.signature = signature;
+    detailObj.internal_uid = internal_uid;
+    setDetailSearch({
+      ...result.data.users[0],
+      ...contactList.value[index],
+      isFriend: true
+    });
+  }
+};
+onMounted(() => {
+  getList();
+});
+const handleSend = () => {
+  router.push(`/home/dialogue/privatechat/${friendDetailId.value}`);
+};
+const handleLeft = () => {
+  router.replace("/home/dialogue/chatSetings");
+};
+// 【聊天设置详情】fix 2024-8-1 H5修复删除好友后用户信息逻辑处理
+// 【聊天设置详情】好友被删了，或者是在app端被删了，即不存在好友关系，添加好友
+const handleInexistenceAdd = async () => {
+  try {
+    // 获取用户信息
+    const result = await $api.contact.getUserById({
+      UserIDs: [detailSearch.value.userID],
+    });
+    // 判断用户是否存在
+    const isInUser = result.data.users && result.data.users[0]?.internal_uid !== "";
+    // 检查好友总数
+    const res = await $api.contact.checkFriendTotal();
+    if (res.code === 6034) {
+      // 好友数量已达上限
+      resultMsg.value = t("friendNumberCatchTopLimit");
+      chatSettingsDetailsVisible.value = true;
+      return;
+    } else if (res.code === 6035) {
+      // 当天添加的好友已达上限
+      resultMsg.value = t("error_6035");
+      chatSettingsDetailsVisible.value = true;
+      return;
+    } else if (res.code !== 0) {
+      // 其他错误，暂不处理
+      return;
+    }
+    // 验证是否有资格添加好友
+    const res2 = await $api.contact.validateAddFriendByUser({
+      userID: detailSearch.value.userID,
+    });
+    if (res2.code === 6083) {
+      // 没有资格添加好友=====该用户未达到添加好友条件
+      resultMsg.value = t("withoutQualification");
+      chatSettingsDetailsVisible.value = true;
+      return;
+    }
+    // 跳转到添加好友页面
+    router.push(`/home/contact/add/search/result/apply?isValidate=false`);
+  } catch (error) {
+    // 处理异常情况
+    console.error("Error occurred while handling friend addition:", error);
+    showToast({ position: "top", message: t("error_api") });
+  }
+};
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+const handleEdit = () => {
+  applyVisable.value = true;
+};
+const getRemarkList = async val => {
+  // todo 刷新接口
+  const res = await OpenIM.setFriendRemark({
+    toUserID: detailObj.userId,
+    remark: val
+  });
+  showToast({ message: t("saveSuccessfully") });
+  applyVisable.value = false;
+  detailObj.remark = val;
+  setDetailSearch({ ...detailObj, remark: val });
+};
+const getDeleteLists = async () => {
+  const idList = [userInfo.value.userID, detailObj.userId].sort(
+    (a, b) => a - b
+  ); // id排序 然后拼接生成会话id 小的在前面大的在后面
+  const conversationID = `si_${idList[0]}_${idList[1]}`;
+  // 刪之前清掉焚烧消息
+  await burnMsgByClearMsg(conversationID)
+  // todo 删除接口
+  const { operationID } = await OpenIM.deleteFriend(detailObj.userId);
+  // 删除会话列表
+  const {
+    operationID: operationID1
+  } = await OpenIM.deleteConversationAndDeleteAllMsg(conversationID);
+  if (operationID && operationID1) {
+    showToast({ message: t("deleteSuccessfully") });
+    deleteVisable.value = false;
+    setDetailSearch({ ...detailObj, isFriend: false });
+  }
+  // 这里跳转联系人列表
+  updateContact(detailObj, true);
+  router.push("/home/dialogue");
+};
+</script>
+
+<template>
+  <div ref="chatSetingDetailRef" class="detail">
+    <AppNavBar title="" left-arrow views_grade="fourth_view" @click-left="handleLeft">
+    </AppNavBar>
+    <div class="detail-wrap">
+      <div class="detail-content">
+        <Avatar
+          width="90"
+          height="90"
+          :url="detailObj.faceURL || detailSearch.faceURL"
+          :name="
+            detailObj.remark ? detailObj.remark : detailObj.nickname
+          "
+          @updateUrl="url => detailObj.faceURL = url"
+        ></Avatar>
+        <div
+          v-if="showGroupOwner(detailObj.userId || detailSearch.userID) != ''"
+        >
+          <CommonLottie
+            :isGroup="showGroupOwner(detailObj.userId || detailSearch.userID)"
+            :width="140"
+            :showName="detailObj.nickname || detailSearch.username"
+          ></CommonLottie>
+        </div>
+        <div class="title" v-else>
+          {{ detailObj.nickname || detailSearch.username }}
+        </div>
+        <div class="remark">
+          <span>{{ $t("remark") }}:</span>
+          <span class="remark-txt">{{ detailObj.remark ? detailObj.remark : t('notSet2') }}</span>
+          <img src="@/assets/svg/edit-remark.svg" alt="" @click="handleEdit" />
+        </div>
+        <div
+          class="detail_id"
+          v-if="userInfo.isGroupOwner || userInfo.isGroupAdmin"
+        >
+          <span
+            >{{ $t("userId")
+            }}{{
+              detailObj.internal_uid
+                ? detailObj.internal_uid
+                : detailObj.userId
+            }}</span
+          >
+          <img
+            src="@/assets/svg/fuzhi.svg"
+            alt=""
+            @click="
+              copyUserId(
+                detailObj.internal_uid
+                  ? detailObj.internal_uid
+                  : detailObj.userId
+              )
+            "
+          />
+        </div>
+        <div class="sex-age">
+          {{ getGender(detailObj.gender) }}
+          {{ detailObj.age > 0 ? `${detailObj.age}${$t("age")}` : "" }}
+        </div>
+        <div class="description">
+          {{
+            detailObj.signature ? detailObj.signature : $t("mineSigEmpty")
+          }}
+        </div>
+        <!-- 当detailObj 下属性为空的时候即代表好友关系不存在了 -->
+        <template v-if="detailObj.nickname && detailObj.faceURL">
+          <div class="send-btn">
+          <van-button class="btns" color="#131415" type="default" @click="handleSend">{{ $t("sendMessage")  }}</van-button>
+          </div>
+          <div class="delete-btn">
+            <van-button class="btns" type="default" @click="deleteVisable = true">{{ $t('deleteFriend') }}</van-button>
+          </div>
+        </template>
+        <!-- 不存在好友关系显示添加好友界面 -->
+        <template v-else>
+          <div class="send-btn">
+            <van-button class="btns" color="#131415" type="default" @click="handleInexistenceAdd">{{ $t("addFriend")  }}</van-button>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <!-- <RouterView /> -->
+    <ApplyDialog
+      v-model="applyVisable"
+      @getList="getRemarkList"
+      :remark="detailObj.remark"
+    ></ApplyDialog>
+    <DeleteDialog
+      v-model="deleteVisable"
+      @getList="getDeleteLists"
+    ></DeleteDialog>
+    <!-- 温馨提示弹框 -->
+    <TipDialog v-model="chatSettingsDetailsVisible" :resultMsg="resultMsg"></TipDialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detail-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .detail-content {
+    padding-top: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .title {
+      color: #000;
+      font-family: PingFang SC;
+      font-size: 1.125rem;
+      font-weight: 600;
+      text-align: center;
+      margin: 20px 0 4px 0;
+    }
+    .remark {
+      color: #1b1b22;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 18px;
+      text-align: center;
+      margin: 8px;
+      display: flex;
+      align-items: center;
+      .remark-txt {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 120px;
+        white-space: nowrap;
+      }
+    }
+    .sex-age {
+      margin: 4px 0 20px 0;
+      color: #76767A;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+    .detail_id {
+      display: flex;
+      align-items: center;
+      span {
+        margin-right: 5px;
+        color: #76767a;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+    .remarks {
+      color: #76767a;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 18px;
+      text-align: center;
+    }
+    .description {
+      color: #000;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      margin-bottom: 48px;
+    }
+  }
+}
+/* 定义公共基类 */
+.btn-base {
+  margin-top: 10px;
+  cursor: pointer;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 19px 0;
+  border-radius: 12px;
+  width: calc(100% - 40px);
+  .btns {
+    width: 100%;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 400;
+  }
+}
+/* send-btn 继承公共基类 */
+.send-btn {
+  .btn-base;
+}
+/* delete-btn 继承公共基类并添加特有样式 */
+.delete-btn {
+  .btn-base;
+  .btns {
+    color: rgba(27, 27, 34, 1);
+  }
+}
+</style>
diff --git a/src/views/dialogue/privateChat/components/emoji.vue b/src/views/dialogue/privateChat/components/emoji.vue
new file mode 100644
index 0000000..897a7b5
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/emoji.vue
@@ -0,0 +1,48 @@
+<script setup >
+import data from '@emoji-mart/data'
+import { Picker } from 'emoji-mart'
+import { ref, onMounted, defineProps } from 'vue'
+const { msg } = defineProps(['msg'])
+import { onClickOutside } from '@vueuse/core'
+const emits = defineEmits(["onEmojiselect", 'closeEmojiselect']);
+
+const emoji_ref = ref()
+
+onMounted(async () => {
+  //表情插件初始化
+  const lang = await import('@emoji-mart/data/i18n/zh.json')
+  new Picker({
+    data,
+    // locale: "zh",
+    i18n: lang.default,
+    searchPosition: "none",
+    parent: emoji_ref.value,
+    set: "",
+    onEmojiSelect: e => {
+      msg.textElem.content += e.native
+      emits('onEmojiselect')
+    }
+  })
+})
+onClickOutside(emoji_ref, () => emits('closeEmojiselect'), {
+  
+})
+</script>
+
+<template>
+  <div class="emoji" ref="emoji_ref">
+
+  </div>
+</template>
+
+<style scoped>
+.emoji {
+  width: 100vw;
+  height: 300px;
+  padding: 10px 0;
+
+  .search {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/privateChat/components/media.vue b/src/views/dialogue/privateChat/components/media.vue
new file mode 100644
index 0000000..f15659a
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/media.vue
@@ -0,0 +1,335 @@
+<script setup>
+// 【单聊-】
+import { get_sdk } from "@/utils/sdkInit.js";
+import { getSDK } from "@/utils/openIM";
+import { useI18n } from "vue-i18n";
+import { onClickOutside } from "@vueuse/core";
+import { useUserStore } from "@/stores/user.js";
+import { replaceStringWithValues } from "@/utils/tools";
+import { CbEvents } from "@/utils/openIM/constant";
+import { ref, onMounted, defineProps, defineEmits } from "vue";
+import { storeToRefs } from "pinia";
+import { showToast } from "vant";
+const OpenIM = getSDK();
+// 接收父组件传递的参数
+const props = defineProps({
+  isFilesUpload: {
+    type: Boolean,
+    default: true,
+  },
+  msg: {
+    type: Object,
+    default: () => {},
+  },
+});
+const { msg, isFilesUpload } = props;
+const emits = defineEmits([
+  "handle_send_message",
+  "closeActionBar",
+  "handle_send_file",
+]);
+const { t } = useI18n();
+const mediaBox = ref(null);
+const uploaderFilePath = ref(null);
+const userStore = useUserStore();
+const { appConfig, privateChatConfig } = storeToRefs(userStore);
+const { burn_after_reading } = appConfig.value;
+let minImg = 0
+let maxImg = 0
+let minVideo = 0
+let maxVideo = 0
+let minImgB = 0
+let maxImgB = 0
+let minVideoB = 0
+let maxVideoB = 0
+
+watch(() => appConfig.value.burn_after_reading, (val) => {
+  minImg = appConfig.value.burn_after_reading.private_chat?.picture_quality?.min || 0
+  maxImg = appConfig.value.burn_after_reading.private_chat?.picture_quality?.max || 0;
+  minVideo = appConfig.value.burn_after_reading.private_chat?.video_quality?.min || 0;
+  maxVideo = appConfig.value.burn_after_reading.private_chat?.video_quality?.max || 0;
+  minImgB = minImg * 1024 * 1024;
+  maxImgB = maxImg * 1024 * 1024;
+  minVideoB = minVideo * 1024 * 1024;
+  maxVideoB = maxVideo * 1024 * 1024;
+}, {
+  immediate: true,
+  deep: true
+})
+//重置 msg 数据
+const handle_reset_msg = () => {
+  msg.contentType = 101;
+  msg.content = "";
+};
+
+const checkQuality = (file, min, max) => {
+  // 最小可能为0 所以我注释掉了
+  // 必须都有值才可以判断
+  // if ([file, min, max].some((arg) => Boolean(arg) === false)) return false;
+  const privateChatEx = JSON.parse(privateChatConfig.value.ex || "{}");
+  const isBurnStatus =
+    privateChatEx && privateChatEx.burnButton && privateChatEx.burnButton === 1;
+  return isBurnStatus && (file.size < min || file.size > max);
+};
+
+// 图片和视频的处理方法
+const handleData = async (dataList, contentType) => {
+  let minB = contentType === 102 ? minImgB : minVideoB;
+  let maxB = contentType === 102 ? maxImgB : maxVideoB;
+  let minTip = contentType === 102 ? minImg : minVideo;
+  let maxTip = contentType === 102 ? maxImg : maxVideo;
+  let tips = contentType === 102 ? t("pictureSendErrTip1") : t("videoSendErrTip1");
+  const fileList = [];
+  for (const data of dataList) {
+    const { file } = data;
+    if (checkQuality(file, minB, maxB)) {
+      showToast({
+        message: replaceStringWithValues(tips, minTip, maxTip),
+        position: "top",
+      });
+    } else {
+      fileList.push(data);
+    }
+  }
+  if (fileList.length > 0) {
+    const msg = { contentType }; // 假设msg是你要发送的消息对象
+    emits("handle_send_message", { urlList: fileList, urlMsg: msg });
+    console.error('ccccccc触发了',msg);
+  }
+};
+// 使用闭包或者外部变量来存储上传状态
+let isUploading = false;
+// 文件上传方法
+const handleFilesUpload = async (data, contentType) => {
+  // 创建消息对象
+  const msg = {
+    contentType: contentType,
+    file: data.file,
+    filePath: uploaderFilePath.value,
+  };
+  try {
+    emits("handle_send_file", msg);
+  } catch (error) {
+    console.error('文件上传失败:', error);
+  }
+};
+
+// 图片消息 + 视频消息
+const handleMediaAfterRead = async (dataArray) => {
+  // 确保dataArray是数组
+  if (!Array.isArray(dataArray)) {
+    dataArray = [dataArray];
+  }
+  const videoFiles = dataArray.filter(data => getFileType(data.file.name) === "视频");
+  const imageFiles = dataArray.filter(data => getFileType(data.file.name) === "图片");
+  // 如果同时存在视频和图片文件
+  if (videoFiles.length > 0 && imageFiles.length > 0) {
+    // 分别处理视频和图片
+    // await handleData(videoFiles, 104); // 处理视频文件
+    //  setTimeout(async () => {
+    //   await handleData(imageFiles, 102); // 处理图片文件 
+    // }, 2000);
+    showToast("暂不支持同时发送视频和图片")
+  } else if (videoFiles.length > 0) {
+    // 只有视频文件
+    await handleData(videoFiles, 104);
+  } else if (imageFiles.length > 0) {
+    // 只有图片文件
+    await handleData(imageFiles, 102);
+  } else {
+    // 既没有视频文件也没有图片文件
+    showToast(`不支持此类型`);
+  }
+};
+
+// 文件消息
+const handeFilesUpload = async (data) => {
+  await handleFilesUpload(data, 105);
+};
+// 文件消息 【文件读取前的回调函数-返回布尔值】
+const handeFilesBeforeRead = (file) => {
+  uploaderFilePath.value = document.getElementsByClassName("van-uploader__input")[2].value
+  // 获取文件类型
+  const fileType = getFileType(file.name);
+  // 判断文件类型是否为图片或视频，如果是，则不允许上传
+  if (fileType === "图片" || fileType === "视频") {
+    showToast("图片和视频类型的文件不能上传");
+    return false;
+  }
+  if (fileType === "其他") {
+    showToast("不支持上传该文件格式");
+    return false;
+  }
+  // 获取文件大小
+  const fileSize = file.size / 1024 / 1024; // 转换为MB
+  // 校验文件大小
+  if (!isValidFileSize(fileType, fileSize)) {
+    showToast(`${fileType}文件大小不可超过${getMaxFileSize(fileType)}MB`);
+    return false;
+  }
+  return true;
+};
+// 视频消息 【视频读取前的回调函数-返回布尔值】
+// tips：在上传视频消息的时候，也支持上传图片消息
+const handeVideoBeforeRead = (files) => {
+  if (!Array.isArray(files)) {
+    // 如果不是数组，说明是单个文件，转换为数组处理
+    files = [files];
+  }
+  //  如果选取的视频数量超出设置的数量则给出提示，每次最多选择4条
+  if (files.length > 4 ) {
+    showToast("视频选择数量超出限制")
+    return
+  }
+  console.error('filesfiles',files);
+  let allFilesValid = true;
+  // 遍历每个文件
+  files.forEach(file => {
+    // 获取文件类型
+    const fileType = getFileType(file.name);
+    if (fileType === "图片") {
+      allFilesValid = true;
+      return;
+    }
+    if (fileType === "其他") {
+      showToast(`${t("unsupportedVideoFormat")}`);
+      allFilesValid = false;
+      return;
+    }
+    // 获取文件大小
+    const fileSize = file.size / 1024 / 1024; // 转换为MB
+    // 校验文件大小
+    if (!isValidFileSize(fileType, fileSize)) {
+      showToast(`${fileType}文件大小不可超过${getMaxFileSize(fileType)}MB`);
+      allFilesValid = false;
+      return;
+    }
+  });
+  return allFilesValid;
+};
+
+// 根据文件名获取文件类型
+const getFileType = (fileName) => {
+  // 使用正则表达式匹配最后一个点后面的内容作为文件后缀
+  const regex = /[^.]+$/;
+  const match = fileName.match(regex);
+  const fileExtension = match ? match[0].toLowerCase() : '';
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(fileExtension)) {
+    return "图片";
+  } else if (["mp4","mov","mkv","wmv",'webm'].includes(fileExtension)) {
+    return "视频";
+  } else if (["mp3", "wav", "flac", "aac", "wma","m4a","alff","alac","midi","ogg"].includes(fileExtension)) {
+    return "音频";
+  } else if (["doc", "docx", "xls","xlsx", "pdf","ppt","pptx","numbers","pages","key","txt","epub"].includes(fileExtension)) {
+    return "文档";
+  } else if (["exe", "msi", "apk","apk1","ipa","app","deb","rpm"].includes(fileExtension)) {
+    return "安装包";
+  } else if (["zip", "rar", "7z", "iso", "dmg"].includes(fileExtension)) {
+    return "压缩包";
+  } else if (['py', 'java', 'cpp', 'html', 'css', 'js', 'php', 'pyc', 'json', 'xml', 'sql', 'sqlite', 'csv'].includes(fileExtension)) {
+    return "代码";
+  } else {
+    return "其他";
+  }
+};
+
+// 校验文件大小是否符合要求
+const isValidFileSize = (fileType, fileSize) => {
+  const maxFileSize = getMaxFileSize(fileType);
+  return fileSize <= maxFileSize;
+};
+
+// 获取文件类型的最大允许大小
+const getMaxFileSize = (fileType) => {
+  switch (fileType) {
+    case "音频":
+      return 100;
+    case "文档":
+      return 100;
+    case "代码":
+      return 100;
+    case "视频":
+      return 200;
+    case "安装包":
+      return 300;
+    case "压缩包":
+      return 300;
+    default:
+      return 0;
+  }
+};
+onClickOutside(mediaBox, () => emits("closeActionBar"), {});
+watchEffect(()=>{})
+onMounted(()=>{})
+</script>
+
+<template>
+  <!-- 图片类型 102 -->
+  <div ref="mediaBox" class="media_box">
+    <van-uploader
+      multiple
+      :after-read="handleMediaAfterRead"
+      max-count="9"
+      :name="102"
+    >
+      <div class="cell">
+        <img src="@/assets/img/msg_pic.svg" alt="" />
+        <span>{{ $t("picture") }}</span>
+      </div>
+    </van-uploader>
+    <!-- 视频类型 104 -->
+    <van-uploader
+      accept="video/mp4,video/mov,video/mkv,video/wmv,video/webm"
+      multiple
+      :before-read="handeVideoBeforeRead"
+      :after-read="handleMediaAfterRead"
+      max-count="5"
+      :name="104"
+    >
+      <div class="cell">
+        <img src="@/assets/img/msg_camera.svg" alt="" />
+        <span>{{ $t("video") }}</span>
+      </div>
+    </van-uploader>
+    <!-- 文件类型 105 -->
+    <van-uploader
+      v-if="isFilesUpload"
+      accept="*"
+      max-count="1"
+      :after-read="handeFilesUpload"
+      :before-read="handeFilesBeforeRead"
+      :name="105"
+    >
+      <div class="cell">
+        <img src="@/assets/img/filed.svg" alt="" />
+        <span>{{ $t("file") }}</span>
+      </div>
+    </van-uploader>
+  </div>
+</template>
+
+<style scoped lang="less">
+.media_box {
+  display: flex;
+  align-items: center;
+  padding: 20px 0 8px 0;
+
+  .cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    margin-right: 30px;
+    & > span {
+      font-size: 0.75rem;
+      color: rgba(118, 118, 122, 1);
+      margin-top: 5px;
+    }
+    & > img {
+      width: 63px;
+      height: 60px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/privateChat/components/popover.vue b/src/views/dialogue/privateChat/components/popover.vue
new file mode 100644
index 0000000..2b5e8fa
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/popover.vue
@@ -0,0 +1,309 @@
+<script setup>
+import { defineProps, ref, onMounted, reactive, watch } from 'vue'
+import { color2bgCCss } from "@/utils";
+import { useRect } from '@vant/use';
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from "pinia";
+const { t } = useI18n()
+const showPopover = ref(false)
+import { copyUserId } from '@/utils/tools'
+import { useUserStore } from "@/stores/user.js";
+import { useRoute, useRouter } from 'vue-router'
+import { useMessageStore } from '@/stores/modules/message';
+const messageStore = useMessageStore();
+const { updateCheckConcat } = messageStore;
+const { checkedConcat } = storeToRefs(messageStore);
+const router = useRouter()
+const placement = ref('left-start')
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { privateChatConfig, userBgSettings, userInfo, appConfig } = storeToRefs(userStore);
+const create_actions = () => [
+  { text: t('quote'), icon: '@/assets/img/msg_quote.svg' },
+  { text: t('menuCopy'), icon: 'music-o' },
+  { text: t('delete'), icon: 'more-o' },
+]
+const actions = reactive({
+  options: create_actions()
+}
+)
+const { msg_list, currentIndex, isShow_msgQuote, msg_info, isShow_msg_delete,isBgColor } = defineProps(['msg_list', 'currentIndex', 'isShow_msgQuote', 'msg_info', 'isShow_msg_delete','isBgColor'])
+const emits = defineEmits(['openPopover'])
+const popoverRef = ref(null)
+const copy_text = async (text) => {
+  try {
+    await copyUserId(text)
+
+  } catch (error) {
+
+    throw new Error(error)
+  }
+}
+//处理 消息 选择
+const handle_popover_onSelect = (text, msg_list, index) => {
+  if (text === t('menuCopy')) {
+    if (msg_list[index].contentType === 114) {
+      copy_text(msg_list[index].quoteElem.text)
+    } else {
+      copy_text(msg_list[index].textElem.content)
+    }
+  } else if (text === t('delete')) {
+    //唤起删除弹窗
+    isShow_msg_delete.show = true
+    isShow_msg_delete.currentIndex = index
+    isShow_msg_delete.sendID = msg_list[index].sendID
+    isShow_msg_delete.status = msg_list[index].status
+    // msg_list.splice(index,1)
+  } else if (text === t('quote')) {
+    const msg_new = Object.assign({}, msg_list[index])
+    isShow_msgQuote.show = true
+    msg_info.contentType = 114
+    msg_info.quoteElem = {
+      text: "",
+      quoteMessage: { ...msg_new }
+    }
+    if (msg_new.contentType === 114) {
+      msg_info.quoteElem.quoteMessage = {
+        contentType: 101,
+        textElem: {
+          content: msg_new.quoteElem.text
+        },
+        senderNickname: msg_new.senderNickname
+      }
+    }
+  } else if (text === t("menuMulti")) {
+    updateCheckConcat([])
+    const idx = checkedConcat.value.findIndex((item) => item.clientMsgID === msg_list[index].clientMsgID)
+    if (idx > -1) {
+      checkedConcat.value.splice(idx, 1)
+    } else {
+      checkedConcat.value.push(msg_list[index])
+    }
+    updateCheckConcat(checkedConcat.value)
+    // 多选
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      showCheck: true,
+      type: "",
+      msg: [],
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+
+    });
+  } else if (text === t("menuForward")) {
+    // debugger
+    // 转发的时候要把当前消息传递过去
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      showCheck: false,
+      type: "single", // 逐条转发
+      msg: [msg_list[index]],
+      hiddenSource: 1, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: []
+    });
+    setGroupChatConfig({})
+    router.push("/home/dialogue/transmitPage");
+  }
+  showPopover.value = false
+}
+
+watch(() => showPopover.value, (val) => {
+  if (val) {
+    emits('openPopover', true)
+  } else {
+    emits('openPopover', false)
+  }
+}, { deep: true })
+const hanldeLongPress = () => {
+  msg_info.contentType = msg_list[currentIndex]
+  if (msg_list[currentIndex].ex) {
+    // 阅后即焚不展示popover
+    return;
+  }
+  getPosition();
+  showPopover.value = true;
+}
+const getPosition = () => {
+  const rect = useRect(popoverRef.value)
+  if (rect.left < 100) {
+    if (rect.top > 500) {
+      placement.value = 'top-start'
+    } else if (rect.top > 200 && rect.top < 499) {
+      placement.value = 'top-start'
+    } else {
+      placement.value = 'bottom-start'
+    }
+  } else {
+    if (rect.top > 500) {
+      placement.value = 'top-end'
+    } else if (rect.top > 200 && rect.top < 499) {
+      placement.value = 'top-end'
+    }
+  }
+}
+const getCurrentMsg = val => {
+  return JSON.parse(val.customElem.data);
+};
+// 是否可以查看复制按钮
+const judgeCopy = computed(() => {
+  return (val) => {
+    if (val.contentType.contentType === 101) {
+      return true;
+    }
+    if (val.contentType === 101 || val.contentType === 114) {
+      return true;
+    }
+    if (val.contentType === 110 && getCurrentMsg(val).customType === 1100) {
+      return false;
+    }
+    // 文件消息不可以复制
+    if (val.contentType === 105) {
+      return false;
+    }
+    return false; // 或者根据具体需求返回 false
+  };
+});
+const judgeForward = computed(() => {
+  return (val) => {
+    if (val.status !== 3) {
+      return true
+    }
+    return false
+  }
+})
+const isShowPopover = computed(() => {
+  if (msg_list[currentIndex] && msg_list[currentIndex].sendID === userInfo.value.userID) {
+    if (msg_list[currentIndex].contentType === 101 ||
+      msg_list[currentIndex].contentType === 103 ||
+      msg_list[currentIndex].contentType === 106 ||
+      msg_list[currentIndex].contentType === 114 ||
+      (msg_list[currentIndex].contentType === 110 && getCurrentMsg(msg_list[currentIndex]).customType === 1005) || 
+      (msg_list[currentIndex].contentType === 110 && getCurrentMsg(msg_list[currentIndex]).customType === 1013) // 通话消息
+    ) {
+      return true
+    }
+    return false
+  }
+})
+// 转发入口显示/隐藏
+const isTransmitSend = computed(()=> {
+  const transmit_role_type = appConfig.value.batch_send?.transmit_role_type || []
+  // 群发功能可选角色
+  if(transmit_role_type.length > 0) {
+   let isGroupOwner = (transmit_role_type.includes(1) && userInfo.value.isGroupOwner)
+   let isGroupAdmin  = (transmit_role_type.includes(2) && userInfo.value.isGroupAdmin)
+   let isNormalUser  = (transmit_role_type.includes(3) && !userInfo.value.isGroupAdmin && !userInfo.value.isGroupOwner && !userInfo.value.isInternalUser)
+   let isInternalUser  = (transmit_role_type.includes(4) && userInfo.value.isInternalUser)
+   return isGroupOwner || isGroupAdmin || isNormalUser || isInternalUser
+  }else {
+    return false
+  }
+})
+const isCallMsg = computed(() => {
+  return (msg_list[currentIndex].contentType === 110 && getCurrentMsg(msg_list[currentIndex]).customType === 1013) // 通话消息
+})
+// 计算属性，根据 isShowPopover 和 userBgSettings 动态计算样式对象
+const popoverStyle = computed(() => {
+  let style = {
+    background: isShowPopover.value ? color2bgCCss(userBgSettings.value && userBgSettings.value.bubbleColor, true) : 'transparent',
+    whiteSpace: 'pre',
+    borderRadius: isShowPopover.value ? '10px 10px 0 10px' : '',
+  };
+  // 如果存在 isBgColor，覆盖 background 样式
+  if (isBgColor) {
+    style.background = isBgColor;
+    style.borderRadius = '14px';
+  }
+  return style;
+});
+onMounted(() => {})
+</script>
+
+<template>
+  <van-popover v-model:show="showPopover" :placement="placement" trigger="manual" :actions="actions.options"
+    @select="handle_popover_onSelect($event, msg_list, currentIndex)">
+    <template #reference>
+      <div class="popover" :style="popoverStyle" v-long-press:500="hanldeLongPress" @contextmenu.prevent="hanldeLongPress" ref="popoverRef">
+        <slot name="content"></slot>
+      </div>
+    </template>
+    <template #default>
+      <div class="select">
+        <div v-if="msg_list[currentIndex].status !== 3 && !isCallMsg" class="cell"
+          @click="handle_popover_onSelect($t('quote'), msg_list, currentIndex)">
+          <div class="left">{{ $t('quote') }}</div>
+          <div class="right"><img src="@/assets/img/msg_quote.svg" alt=""></div>
+        </div>
+        <div v-if="isTransmitSend && !isCallMsg" class="cell"
+          @click="handle_popover_onSelect($t('menuForward'), msg_list, currentIndex)">
+          <div class="left">{{ $t("menuForward") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_shares.svg" alt="" />
+          </div>
+        </div>
+        <div v-if="judgeForward(msg_info) && !isCallMsg" class="cell"
+          @click="handle_popover_onSelect($t('menuMulti'), msg_list, currentIndex)">
+          <div class="left">{{ $t("menuMulti") }}</div>
+          <div class="right">
+            <img src="@/assets/img/msg_forward.svg" alt="" />
+          </div>
+        </div>
+        <div class="cell" @click="handle_popover_onSelect($t('menuCopy'), msg_list, currentIndex)"
+          v-if="judgeCopy(msg_info) && !isCallMsg">
+          <div class="left">{{ $t('menuCopy') }}</div>
+          <div class="right"><img src="@/assets/img/msg_copy.svg" alt=""></div>
+        </div>
+        <div class="cell" @click="handle_popover_onSelect($t('delete'), msg_list, currentIndex)">
+          <div class="left">{{ $t('delete') }}</div>
+          <div class="right"><img src="@/assets/img/msg_delete.svg" alt=""></div>
+        </div>
+      </div>
+    </template>
+  </van-popover>
+</template>
+
+<style scoped lang="less">
+.popover {
+  padding: 10px 12px;
+  div{
+    white-space:pre-line;
+  }
+}
+
+.select {
+  width: 130px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 12px;
+  border-radius: 10px;
+  font-size: 1rem;
+
+  &>.cell {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+
+    &>.right {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &>.cell:nth-child(n+1) {
+    border-bottom: 1px solid rgba(242, 244, 245, 1);
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dialogue/privateChat/components/privateMessage.vue b/src/views/dialogue/privateChat/components/privateMessage.vue
new file mode 100644
index 0000000..6066c4a
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/privateMessage.vue
@@ -0,0 +1,1743 @@
+<template>
+  <!-- 私聊消息体-虚拟列表 -->
+  <div
+    @click="clickMessage(source)"
+    :class="{
+        'special-cell': showCheckFlag(source) && showCheck,
+        cell: source.clientMsgID,
+        hide: [2300].includes(source.contentType),
+    }"
+  >
+    <div class="select-item" v-if="showCheckFlag(source) && showCheck">
+      <div class="check-box" :class="{ checked: getFlag(source) }"></div>
+    </div>
+    <div
+      v-if="
+        getTimeLine(source, msg_list[index - 1]) &&
+        transformText(source).customType !== 1001
+      "
+      class="private-chat-time"
+    >
+      {{ getTimeLine(source, msg_list[index - 1]) }}
+    </div>
+    <!--消息主体 begin-->
+    <div
+      :class="[
+        {
+          // 判断当前用户是和发送者是否是同一个人如果是则添加cell_right类消息右侧展示
+          // 否则就是别人发的消息左边展示
+          'spcial-cell_right':
+            privInfo.userID !== source.sendID &&
+            source.contentType === 110 &&
+            transformText(source).customType == 1100,
+            active_cell: isActiveCell(source.contentType),
+            cell_right: privUserInfo.userID == source.sendID,
+            cell_left: privUserInfo.userID !== source.sendID,
+        },
+        {
+          // 添加 isCommonMsgBg 类的条件，排除 active_cell 的情况
+          isCommonMsgBg: !isActiveCell(source.contentType) && !isActiveBgLink(source),
+        },
+      ]"
+      v-if="
+        msg_mainstay_type.includes(source.contentType) &&
+        transformText(source).customType != 1011 &&
+        transformText(source).customType != 911 &&
+        transformText(source).customType != 1001
+      "
+      @contextmenu="(e) => e.preventDefault()"
+    >
+      <popover
+        :isBgColor="isActiveBgLink(source) ? '#FFFFFF' : ''"
+        :msg_list="props.privList || msg_list"
+        :current-index="props.index"
+        :isShow_msgQuote="props.privMsgQuote"
+        :msg_info="props.privMsgInfo"
+        :isShow_msg_delete="props.privDelMsg"
+        @openPopover="(val) => (showPopover = val)"
+      >
+        <template #content>
+          <template v-if="source.contentType === 101">
+            <!-- 文本消息【图片类型】 -->
+            <div
+              v-if="processedContent(source.textElem.content) === 1"
+              class="text-bilder-type public-fdcc"
+            >
+              <van-image
+                :src="source.textElem.content"
+                :style="{ maxWidth: '200px', width: 'auto', height: 'auto' }"
+                :show-error="false"
+              />
+              <div class="linked-content">
+                <div
+                  class="interlink-text"
+                  @click="handeOpenLink(source.textElem.content)"
+                >
+                  {{ source.textElem.content }}
+                </div>
+                <img
+                  src="@/assets/svg/fuzhi.svg"
+                  alt=""
+                  @click="copyUserId(source.textElem.content)"
+                />
+              </div>
+            </div>
+            <!-- 文本消息【超链接类型】 -->
+            <div
+              v-else-if="processedContent(source.textElem.content) === 2"
+              class="text-bilder-type"
+            >
+              <h4>分享链接</h4>
+              <div class="linked-content">
+                <div
+                  class="interlink-text"
+                  @click="handeOpenLink(source.textElem.content)"
+                >
+                  {{ source.textElem.content }}
+                </div>
+                <img
+                  src="@/assets/svg/fuzhi.svg"
+                  alt=""
+                  @click="copyUserId(source.textElem.content)"
+                />
+              </div>
+            </div>
+            <!--文本消息【普通类型】-->
+            <div v-else class="chitchat-message text-content">
+              {{ source.textElem.content }}
+            </div>
+          </template>
+          <div class="relative_box" v-if="source.contentType === 102">
+            <!--图片  @click="showImagePreview([source.content])"-->
+            <cdnSource
+              :defaultUrl="
+                source.pictureElem.sourcePicture.url ||
+                source.pictureElem.bigPicture.url
+              "
+              :source="source"
+            >
+              <template #cdnSlot="{ cdnUrl }">
+                <van-image
+                  v-if="isMobileBrowser"
+                  class="message_img"
+                  :class="{ 'burn-img': isReadDeleteMsg(source) }"
+                  :width="setImgStyle(source.pictureElem.sourcePicture).width"
+                  :height="
+                    isReadDeleteMsg(source)
+                      ? setImgStyle(source.pictureElem.sourcePicture).height
+                      : 'auto'
+                  "
+                  fit="cover"
+                  @click="handlePreview(source)"
+                  :src="cdnUrl"
+                  :show-error="true"
+                />
+                <a-image
+                  v-if="!isMobileBrowser"
+                  class="message_img"
+                  :class="{ 'burn-img': isReadDeleteMsg(source) }"
+                  :width="setImgStyle(source.pictureElem.sourcePicture).width"
+                  fit="cover"
+                  :src="cdnUrl"
+                  :show-error="true"
+                  :preview="{
+                    visible: uploadImgSrc === cdnUrl,
+                    onVisibleChange: setVisible,
+                  }"
+                  @click="onImage(cdnUrl)"
+                />
+              </template>
+            </cdnSource>
+            <teleport
+              to="body"
+              v-if="
+                uploadImgSrc ===
+                (source.pictureElem.sourcePicture.url ||
+                source.pictureElem.bigPicture.url)
+              "
+            >
+              <div class="img-download">
+                <van-button
+                  @click="handleDownLoad"
+                  class="btn"
+                  size="small"
+                  :icon="defaultDownload"
+                  round
+                  type="default"
+                  >{{ $t("download") }}</van-button
+                >
+              </div>
+            </teleport>
+            <!-- 阅后即焚样式 -->
+            <div
+              v-if="isReadDeleteMsg(source)"
+              class="incineration-pic"
+              :style="{
+                width: setImgStyle(source.pictureElem.sourcePicture).width + 'px',
+                height:
+                  setImgStyle(source.pictureElem.sourcePicture).height + 'px',
+              }"
+            >
+              <cdnSource :defaultUrl="incinerationPicture" :source="source">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image
+                    class="message_img"
+                    width="60px"
+                    height="60px"
+                    fit="cover"
+                    @click="handlePreview(source)"
+                    :src="cdnUrl"
+                    :show-error="true"
+                  />
+                </template>
+              </cdnSource>
+            </div>
+          </div>
+          <div
+            class="relative_box"
+            v-if="source.contentType === 104"
+            @click="handlePreview(source)"
+          >
+            <!----私聊视频--->
+            <video
+              class="video"
+              :src="source.videoElem.videoUrl"
+              crossOrigin="anonymous"
+              preload="none"
+              :poster="source.videoElem.snapshotUrl"
+            ></video>
+            <div class="video_icon">
+              <img src="@/assets/svg/bofang.svg" alt="" />
+            </div>
+            <!-- 阅后即焚样式 -->
+            <div v-if="isReadDeleteMsg(source)" class="incineration-video">
+              <cdnSource :defaultUrl="incinerationVideo" :source="source">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image
+                    class="message_img"
+                    width="60px"
+                    height="60px"
+                    fit="cover"
+                    :src="cdnUrl"
+                    :show-error="true"
+                  />
+                </template>
+              </cdnSource>
+            </div>
+          </div>
+          <div v-if="source.contentType === 114">
+            <!--引用消息 111-->
+            {{ source.quoteElem.text }}
+          </div>
+          <!-- 110 自定义事件 -->
+          <div v-if="source.contentType === 110">
+            <!--合并转发-->
+            <div
+              v-if="transformText(source).customType === 1100"
+              :class="{ 'special-forward': true }"
+              class="special-forward"
+              @click="handleDetail(source)"
+            >
+              <div class="special-forward-top">
+                <div class="title">
+                  {{ $t("globalSearchChatHistory") }}
+                </div>
+                <div class="count" v-if="transformText(source).data.count > 1">
+                  {{ transformText(source).data.count }}
+                </div>
+              </div>
+              <div
+                class="special-forward-bottom"
+                v-for="item in transformText(source).data.summaryList"
+                :key="item"
+              >
+                {{ item }}
+              </div>
+            </div>
+            <div v-if="transformText(source).customType === 1013">
+              <img
+                v-if="privInfo.userID !== source.sendID"
+                src="@/assets/svg/phone-call.svg"
+                alt=""
+                style="margin-right: 2px; vertical-align: -6px"
+              />
+              {{ getCallShowText(transformText(source).data) }}
+              <img
+                v-if="privInfo.userID === source.sendID"
+                src="@/assets/svg/phone-call-black.svg"
+                alt=""
+                style="margin-left: 2px; vertical-align: -6px"
+              />
+            </div>
+            <template v-if="transformText(source).customType === 911">
+              <!-- 发布出去的消息展示 语音 -->
+              <div v-if="source.defaultContentType === 103">
+                <app-audio :msg="source"></app-audio>
+              </div>
+
+              <!-- 不是好友发不出去 -->
+              <div v-if="source.defaultContentType === 101">
+                {{ source.textElem?.content }}
+              </div>
+            </template>
+          </div>
+          <div v-if="source.contentType === 103">
+            <!--语音消息-->
+            <app-audio :msg="source" @complete="burnAudioFn"></app-audio>
+          </div>
+          <!--文件消息-->
+          <div v-if="source.contentType === 105" class="FileTopping">
+            <img
+              class="file-cancel-button"
+              v-if="source.Filetext"
+              src="@/assets/filesvg/CloseShape.svg"
+              @click="handeCloseFile(source)"
+            />
+            <div class="FileStyleBox" @click="handeDownloadFile(source)">
+              <div class="file-left">
+                <div class="file-name chitchat-message">
+                  {{ source.fileElem?.fileName }}
+                </div>
+                <van-progress
+                  :show-pivot="false"
+                  v-if="source.filePercentage !== undefined"
+                  :percentage="source.filePercentage"
+                />
+                <div class="file-schedule">
+                  <div v-if="source.Filetext">{{ source.Filetext }}</div>
+                  {{ formatFileSize(source.fileElem?.fileSize) }}
+                </div>
+              </div>
+              <div class="file-right">
+                <img class="file-img" :src="fileIcon(source)" alt="" />
+              </div>
+            </div>
+          </div>
+          <van-loading
+            color="#1989fa"
+            class="cell_right_loading"
+            v-if="source.status === 1"
+          />
+          <img
+            src="@/assets/img/msg_failed.svg"
+            class="cell_right_loading cell_right_failed"
+            alt=""
+            v-if="source.status === 3"
+            @click="handeResendMessage(source, true, index)"
+          />
+        </template>
+      </popover>
+      <!-- 阅后即焚图标 -->
+      <div
+        class="incineration-svg"
+        :class="[
+          { 'incineration-right': privInfo.userID === source.sendID },
+        ]"
+        v-if="
+          (source.contentType === 101 ||
+            source.contentType === 102 ||
+            source.contentType === 103 ||
+            source.contentType === 104 ||
+            source.contentType === 114) &&
+          source.status !== 3
+        "
+      >
+        <img
+          v-if="isActiveBurnMsg(source)"
+          src="@/assets/svg/incineration.svg"
+          alt=""
+        />
+        <!-- 消息依次轮流倒计时, 逐个消失 -->
+        <span
+          class="incineration-time"
+          v-if="privInfo.userID === source.sendID"
+          >{{ showBurnTime(source) }}{{ showBurnTime(source) > 0 ? "s" : "" }}</span
+        >
+      </div>
+    </div>
+    <!--消息主体 end-->
+    <div v-if="source.contentType === 2101" class="withdraw">
+      <!--撤回消息-->
+      {{
+        privInfo.userID !== source.sendID
+          ? $t("you")
+          : source?.senderNickname || $t("target")
+      }}
+      {{ $t("revokeMsg") }}
+    </div>
+    <div v-if="source.contentType === 0" class="withdraw">
+      <!--删除消息-->
+      <!-- {{ user_info_recv.userID !== val.sendID ? $t('you') : $t('target') }}删除了一条消息 -->
+    </div>
+    <div v-if="source.contentType === 2300" class="withdraw"></div>
+    <div v-if="source.contentType === 1201" class="FriendNotifications">
+      <!-- 时间显示 -->
+      <!-- <div class="private-chat-time">{{ formatTtamp(val.createTime) }}</div> -->
+      <!--成为好友通知-->
+      <span class="inform-tips">{{ $t("cvFirstTip") }}</span>
+      <span class="become-friend-tips">{{ $t("friendAddedNtf") }}</span>
+    </div>
+    <!-- 阅后即焚 -->
+    <div
+      class="FriendNotifications"
+      v-if="transformText(source).customType === 1011"
+    >
+      <span
+        class="inform-tips"
+        v-if="onJson(transformText(source).data?.ex).burnButton == 1"
+      >
+        {{
+          $t("burnMsgOpen", {
+            name: transformNickName(transformText(source)),
+            time: getCompleteTime(
+              onJson(transformText(source).data?.ex).readDeleteTime
+            ),
+          })
+        }}
+      </span>
+      <span
+        class="become-friend-tips"
+        v-if="onJson(transformText(source).data?.ex).burnButton == 0"
+        >{{
+          $t("burnMsgClose", {
+            name: transformNickName(transformText(source)),
+          })
+        }}</span
+      >
+    </div>
+
+    <div
+      v-if="
+        source.contentType === 110 &&
+        transformText(source).customType !== 1100 &&
+        transformText(source).customType !== 1011
+      "
+      class="withdraw"
+    >
+      <!--自定义消息-->
+      <p v-if="transformText(source).customType === 1001">
+        {{
+          (source.sendID === user_info_send.userID
+            ? $t("me")
+            : source.senderNickname || privateChatConfig.showName) +
+          $t("cvClearMsgTip")
+        }}
+      </p>
+      <p v-else-if="transformText(source).customType === 911">
+        {{ $t("deletedByFriendHint1") }}
+        <span class="active-add" @click="hanldeAdd(source)">{{
+          $t("deletedByFriendHint2")
+        }}</span>
+        {{ $t("deletedByFriendHint3") }}
+      </p>
+    </div>
+    <!--已读与未读-->
+    <div
+      class="cell_state_read cell_state"
+      v-if="
+        source.isRead &&
+        privInfo.userID !== source.sendID &&
+        msg_mainstay_type.includes(source.contentType) &&
+        transformText(source).customType != 1011 &&
+        transformText(source).customType != 1001
+      "
+    >
+      <!-- <span>已读</span>-->
+      <img src="@/assets/img/msg_read.svg" alt="" />
+    </div>
+    <div
+      class="cell_state_unread cell_state"
+      v-if="
+        !source.isRead &&
+        privInfo.userID !== source.sendID &&
+        msg_mainstay_type.includes(source.contentType)
+      "
+    >
+      <!-- 未读 -->
+    </div>
+    <!--引用消息222-->
+    <div
+      class="quoteElem"
+      v-if="source.contentType === 114"
+      :class="{
+        quoteElem_left: privInfo.userID === source.sendID,
+        quoteElem_right: privInfo.userID !== source.sendID,
+        'is-reference-msg': showCheckFlag(source) && showCheck && source.quoteElem.quoteMessage.contentType === 101,
+      }"
+    >
+      <span v-if="source.quoteElem?.quoteMessage?.contentType === 2101">
+        {{ $t("qmvMsgNotExit") }}
+      </span>
+      <span v-if="source.quoteElem.quoteMessage.contentType === 101">
+        {{ judgeIsFriend(source.quoteElem.quoteMessage) }}:{{
+          source.quoteElem.quoteMessage.textElem.content
+        }}
+      </span>
+      <div
+        class="content_image"
+        v-if="source.quoteElem.quoteMessage.contentType === 102"
+      >
+        <div>{{ judgeIsFriend(source.quoteElem.quoteMessage) }}:</div>
+        <cdnSource
+          :defaultUrl="source.quoteElem.quoteMessage.pictureElem.bigPicture.url"
+          :source="source"
+        >
+          <template #cdnSlot="{ cdnUrl }">
+            <van-image
+              :src="cdnUrl"
+              @click="
+                showImagePreview([
+                  source.quoteElem.quoteMessage.pictureElem.bigPicture.url,
+                ])
+              "
+              :show-error="true"
+            />
+          </template>
+        </cdnSource>
+      </div>
+      <div
+        class="content_video"
+        v-if="source.quoteElem.quoteMessage.contentType === 104"
+      >
+        <div>{{ judgeIsFriend(source.quoteElem.quoteMessage) }}:</div>
+        <video
+          :src="source.quoteElem.quoteMessage.videoElem.videoUrl"
+          crossOrigin="anonymous"
+          preload="metadata"
+        ></video>
+        <div class="video_icon">
+          <img src="@/assets/svg/bofang.svg" alt="" />
+        </div>
+      </div>
+      <span
+        v-if="source.quoteElem.quoteMessage.contentType === 103"
+        class="quoteElem_recorder"
+      >
+        <span>{{ judgeIsFriend(source.quoteElem.quoteMessage) }}:</span
+        ><app-audio :msg="source.quoteElem.quoteMessage"></app-audio>
+      </span>
+      <!-- 文件类型-引用消息 -->
+      <div
+        v-if="source.quoteElem.quoteMessage.contentType === 105"
+        class="quoteElem_recorder quoteElem_file"
+      >
+        <div>{{ judgeIsFriend(source.quoteElem.quoteMessage) }}:</div>
+        <span class="quoteElem-message">
+          <span class="quoteElem-name">{{
+            source.quoteElem.quoteMessage.fileElem.fileName
+          }}</span>
+          <img
+            class="recorder-img"
+            :src="fileIcon(source.quoteElem.quoteMessage)"
+            alt=""
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import {
+  reactive,
+  inject,
+  ref,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+  nextTick,
+  computed,
+  watch,
+  watchEffect,
+} from "vue";
+import popover from "@/views/dialogue/privateChat/components/popover.vue";
+import { CbEvents } from "@/utils/openIM/constant";
+import { useRoute, useRouter } from "vue-router";
+import recorder from "@/views/dialogue/privateChat/components/recorder.js";
+import emoji from "@/views/dialogue/privateChat/components/emoji.vue";
+import MsgMedia from "@/views/dialogue/privateChat/components/media.vue";
+import {
+  showImagePreview,
+  showToast,
+  showConfirmDialog,
+  showLoadingToast,
+  showFailToast,
+  showSuccessToast,
+} from "vant";
+import { AppPopup, CommonPreview } from "@/components/index.js";
+import { getSDK } from "@/utils/openIM";
+import { useUserStore } from "@/stores/user.js";
+import appAudio from "@/views/dialogue/privateChat/components/audio.vue";
+import { useContactStore } from "@/stores/contact";
+import {
+  formatMinutestamp,
+  parseMsg,
+  formatTime,
+  replaceStringWithValues,
+  isSelf,
+  formatTtamp,
+  getChatTimeline,
+} from "@/utils/tools";
+import { CustomMessageType } from "@/utils/constant";
+import { useMessageStore } from "@/stores/modules/message";
+import { base64toFile } from "@/utils/sendMessage.js";
+import incinerationPicture from "@/assets/svg/incineration-picture.svg";
+import incinerationVideo from "@/assets/svg/incineration-video.svg";
+import {
+  getPicInfo,
+  canDeleteFromServer,
+  burnMsgByClearMsg,
+  isHttpLink,
+  isImageLink,
+} from "@/utils/common";
+import {
+  formatFileSize,
+  fileErrorsToast,
+  fileIcon,
+  publicDownloadFile,
+  privateChatFileMap,
+} from "@/utils/fileUtils";
+import defaultDownload from "@/assets/svg/download.svg";
+import msg_Vector from "@/assets/img/msg_Vector.svg";
+import usePasteImg from "@/use/usePasteImg";
+import { checkMessage } from "@/utils/chatRule";
+import MessageTimeDeleteHelper from "@/utils/messageTimeDeleteHelper";
+import { color2bgCCss, setGlobalProperty } from "@/utils";
+import { useI18n } from "vue-i18n";
+import { IMSDK } from "@/utils/imCommon";
+import { copyUserId, getCallShowText } from "@/utils/tools.js";
+import emitter from "@/utils/events";
+import { useFriendStore } from "@/stores/modules/membership-info";
+const friendState = useFriendStore();
+const { t } = useI18n();
+const contactStore = useContactStore();
+const messageStore = useMessageStore();
+const { updateCheckConcat } = messageStore;
+const { checkedConcat } = storeToRefs(messageStore);
+const { groupMemberInfo, contactList, allGroupOwnerOrAdmin } =
+  storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { userBgSettings, userInfo, privateChatConfig, appConfig } =
+  storeToRefs(userStore);
+const $api = inject("$api");
+const route = useRoute();
+const router = useRouter();
+const OpenIM = getSDK();
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {},
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+  privList: {
+    type: Array,
+    default: () => [],
+  },
+  privInfo: {
+    type: Object,
+    default: () => {},
+  },
+  privMsgQuote: {
+    type: Object,
+    default: () => {},
+  },
+  // 原来消息体
+  privMsgInfo: {
+    type: Object,
+    default: () => {},
+  },
+  // 弹框删除的消息体
+  privDelMsg: {
+    type: Object,
+    default: () => {},
+  },
+  // 已读消息
+  privReadMsg: {
+    type: Object,
+    default: () => {},
+  },
+  privInfoSend: {
+    type: Object,
+    default: () => {},
+  },
+  privUserInfo: {
+    type: Object,
+    default: () => {},
+  },
+});
+//消息数据
+const msg_list = ref([]);
+const showPopover = ref(false);
+const readDeleteMsg = ref(props.privReadMsg);
+const uploadImgSrc = ref(null);
+const isUpload = ref(false); // pc图片下载
+// 引用消息
+const isShow_msgQuote = computed(() => props.privMsgQuote);
+const user_info_send = computed(() => props.privInfoSend);
+
+//消息主体UI-对应显示类型
+const msg_mainstay_type = reactive([101, 102, 103, 104, 105, 110, 114]);
+const showCheck = computed(() => privateChatConfig.value.showCheck === true);
+// 判断是PC浏览器还是手机浏览器
+const isMobileBrowser = computed(() => {
+  return !!navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|Macintosh|Mac OS X)/i
+  );
+});
+// 阅后即焚后台开关
+const showOpenPrivateBurn = computed(
+  () => appConfig.value.burn_after_reading.private_chat.status === 1
+);
+const showCheckFlag = computed(() => {
+  return (val) => {
+    if (val.contentType === 2101) {
+      return false;
+    }
+    if (val.contentType === 301) {
+      return false;
+    }
+    if (val.contentType === 1201) {
+      return false;
+    }
+    return true;
+  };
+});
+const getFlag = computed(() => {
+  return (val) => {
+    const index = checkedConcat.value.findIndex(
+      (item) => item.clientMsgID === val.clientMsgID
+    );
+    if (index > -1) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+});
+const judgeIsFriend = computed(() => {
+  return (val) => {
+    const index = contactList.value.findIndex(
+      (item) => item.userID === val.sendID
+    );
+    let remark = "";
+    if (index != -1) {
+      remark = contactList.value[index].remark
+        ? contactList.value[index].remark
+        : contactList.value[index].nickname;
+    } else {
+      remark = val.senderNickname;
+    }
+    return remark;
+  };
+});
+const showBurnTime = computed(() => {
+  return (val) => {
+    if (val.clientMsgID === readDeleteMsg.value.clientMsgID) {
+      let time = readDeleteMsg.value?.seconds;
+      if (!readDeleteMsg.value.clientMsgID) {
+        const cur = currentDownTimeMsg;
+        if (val.clientMsgID == cur?.message.clientMsgID) {
+          time = cur?.remainTime;
+        }
+      }
+      return time;
+    }
+  };
+});
+// json转换
+const onJson = (val) => {
+  return JSON.parse(val || "{}");
+};
+const transformNickName = (data) => {
+  if (!data || !Object.keys(data).length) return "";
+  return isSelf(data.data.opUserID) ? t("your") : data.data.NickName;
+};
+const clickMessage = (val) => {
+  const idx = checkedConcat.value.findIndex(
+    (item) => item.clientMsgID === val.clientMsgID
+  );
+  if (idx > -1) {
+    checkedConcat.value.splice(idx, 1);
+  } else {
+    checkedConcat.value.push(val);
+  }
+};
+// 时间转换
+const getCompleteTime = (seconds) => {
+  // 计算天数、小时数、分钟数和剩余秒数
+  const days = Math.floor(seconds / (24 * 3600));
+  seconds %= (24 * 3600);
+  const hours = Math.floor(seconds / 3600);
+  seconds %= 3600;
+  const minutes = Math.floor(seconds / 60);
+  seconds %= 60;
+  // 构建时间字符串
+  let timeString = '';
+  if (days > 0) {
+      timeString += days + t("day");
+  }
+  if (hours > 0) {
+      timeString += hours + t("hours");
+  }
+  if (minutes > 0) {
+      timeString += minutes + t("minute");
+  }
+  if (seconds > 0) {
+      timeString += seconds + t("seconds");
+  }
+  return timeString.trim();
+};
+// 消息列表超过5分钟则显示时间
+const getTimeLine = computed(() => {
+  return (message, preMessage) => {
+    const sendTime = message.sendTime;
+    const preSendTime = preMessage?.sendTime || 0;
+    if (sendTime - preSendTime > 5 * 60 * 1000) {
+      return getChatTimeline(sendTime);
+    }
+    return null;
+  };
+});
+const transformText = (val) => {
+  return JSON.parse(val.customElem?.data || "{}");
+};
+// 图片下载
+const handleDownLoad = (event) => {
+  // 创建一个 <a> 元素
+  const link = document.createElement("a");
+  link.href = uploadImgSrc.value;
+  // 设置下载文件名
+  link.download = "";
+  // 触发点击事件以下载图片
+  link.click();
+  link.remove();
+};
+// 打开URL站内链接
+const handeOpenLink = (url) => {
+  // 使用正则表达式判断url是否以http://或https://开头
+  const httpRegex = /^https?:\/\//i;
+  // 如果url以www.开头，则在前面加上http://
+  if (!httpRegex.test(url)) {
+    url = "http://" + url;
+  }
+  // 使用window.open打开链接
+  window.open(url);
+};
+// 计算处理后的内容
+const processedContent = computed(() => (content) => {
+  // 判断是否是 http 链接
+  if (isHttpLink(content)) {
+    // 判断链接的后缀是否是图片类型
+    // 1、图片链接  2、普通文本链接
+    if (isImageLink(content)) {
+      return 1; // 返回状态1
+    } else {
+      return 2; // 返回状态2
+    }
+  } else {
+    return content; // 如果不是链接格式，则返回内容本身
+  }
+});
+// 消息主体：高亮展示
+function isActiveCell(contentType) {
+  return contentType === 102 || contentType === 104 || contentType === 105;
+}
+// 计算是否是链接类型的文本消息在添加样式
+const isActiveBgLink = computed(() => {
+  return (items) => {
+    if (items.contentType === 101 && items.textElem?.content) {
+      let isLinkState = processedContent.value(items.textElem.content);
+      // 1、图片链接  2、普通文本链接
+      return isLinkState === 1 || isLinkState === 2;
+    }
+    return false;
+  };
+});
+const isActiveBurnMsg = computed(() => {
+  return (val) => {
+    if (!val) return false;
+    const activeItemEx = JSON.parse(val.ex || "{}");
+    const isBurnMsg = Boolean(
+      activeItemEx.burn_msg && activeItemEx.burn_msg.read_delete_time
+    );
+    return isBurnMsg;
+  };
+});
+const isReadDeleteMsg = (msg) => {
+  if (msg && msg.ex && JSON.parse(msg.ex)["burn_msg"]) {
+    return true;
+  }
+  return false;
+};
+/**
+ * 计算图片宽度
+ * @param val
+ */
+const setImgStyle = (val) => {
+  // 104 129
+  const { width, height } = val;
+  let obj = {
+    width: width,
+    height: width,
+  };
+  // 宽度大于180的图片
+  if (width > 180) {
+    obj.width = 180;
+    obj.height = height / (width / 180);
+  }
+  // 横向图片
+  if (width > height) {
+    obj.width = 220;
+    obj.height = height / (width / 220);
+  }
+  // 纵向小图
+  if (width <= 180 && width < height) {
+    obj.width = width;
+    obj.height = height;
+  }
+  return obj;
+};
+const handleDetail = (val) => {
+  const detail = JSON.parse(val.customElem.data);
+  if (detail.data.serverID) {
+    router.push(`/home/dialogue/logDisplay?relay_id=${detail.data.serverID}`);
+  } else {
+    router.push({
+      path: "/home/dialogue/logDisplay",
+      state: {
+        msg: detail.data,
+      },
+    });
+  }
+};
+const onImage = (src) => {
+  console.log("onImage", src);
+  // 下载地址
+  uploadImgSrc.value = src;
+};
+const setVisible = (val) => {
+  console.log("setVisible", val);
+  // 关闭预览
+  isUpload.value = val;
+  uploadImgSrc.value = null;
+};
+
+const showShareImg = computed(() => privateChatConfig.value.showCheck);
+// 文件下载
+const handeDownloadFile = (item) => {
+  // 在需要文件下载的地方调用公共下载方法
+  publicDownloadFile(item, showShareImg.value);
+};
+// 私聊-视频图片打开方法
+const handlePreview = (val) => {
+  emitter.emit("handlePreview", val);
+};
+// 私聊-文件取消方法
+const handeCloseFile = async (item) => {
+  emitter.emit("handeCloseFile", item);
+};
+// 消息发送失败-重试发送方法
+const handeResendMessage = async (item) => {
+  emitter.emit("handeResendMessage", item);
+};
+// 私聊-语音方法
+const burnAudioFn = (val) => {
+  emitter.emit("burnAudioFn", val);
+};
+// 私聊-未满足好友条件方法
+const hanldeAdd = async (item) => {
+  emitter.emit("handeUnmetFriend", item);
+};
+onMounted(() => {
+  if (props.privList) {
+    msg_list.value = props.privList;
+  }
+});
+</script>
+
+<style lang="less" scoped>
+// 导入公共样式文件
+@import "@/style/common-styles.less";
+
+.privateChat {
+  background: rgba(248, 248, 251, 1);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &.useUserAppearance {
+    &::before {
+      background-image: var(--preview-bg, none);
+      background-size: contain;
+      background-repeat: repeat;
+      width: 100%;
+      height: 100%;
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      filter: var(--preview-bg-alpha);
+    }
+  }
+
+  .popup_select {
+    display: flex;
+    flex-direction: column;
+    background: white;
+
+    &_cell {
+      height: 60px;
+    }
+
+    &_cell:nth-child(2) {
+      color: red;
+    }
+  }
+
+  .chatBox {
+    flex: 1;
+
+    .chatBox_content {
+      height: 100%;
+      padding: 0 12px;
+      overflow-y: auto;
+      // scroll-behavior: smooth;
+      // padding-bottom: 60px;
+    }
+  }
+  .FileTopping {
+    display: flex;
+    align-items: center;
+    .file-cancel-button {
+      margin-right: 5px;
+    }
+    .FileStyleBox {
+      min-width: 235px;
+      height: 60px;
+      border-radius: 12px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      justify-content: space-between;
+      .file-left {
+        flex: 1;
+        color: #000;
+        .file-name {
+          font-family: PingFang SC;
+          font-weight: 400;
+          display: inline-block;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 130px;
+          white-space: nowrap;
+        }
+        .file-schedule {
+          margin-top: 5px;
+          display: flex;
+          align-items: center;
+          color: #ccc;
+          font-size: 0.6875rem;
+        }
+      }
+      .file-right {
+        .file-img {
+          width: 55px;
+          height: 55px;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+
+  .privateChat_body {
+    & .cell {
+      display: flex;
+      // margin: 15px 0;
+      padding: 15px 0;
+      color: white;
+      font-size: 1rem;
+      font-weight: 400;
+      width: 100%;
+      position: relative;
+      flex-direction: column;
+
+      &.hide {
+        display: none;
+      }
+
+      .withdraw {
+        color: rgba(27, 27, 34, 0.4);
+        font-size: 0.625rem;
+        text-align: center;
+
+        .active-add {
+          color: rgba(0, 149, 246, 1);
+          cursor: pointer;
+        }
+      }
+
+      .FriendNotifications {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        color: black;
+        font-size: 0.75rem;
+        .inform-tips {
+          background: rgba(228, 240, 251, 1);
+          color: rgba(0, 149, 246, 1);
+          border-radius: 37px;
+          padding: 10px 16px;
+        }
+        .become-friend-tips {
+          color: rgba(27, 27, 34, 0.4);
+          padding-top: 18px;
+          font-size: 0.625rem;
+        }
+      }
+
+      .video {
+        max-width: 200px;
+        max-height: 160px;
+      }
+
+      .quoteElem {
+        background: rgba(0, 0, 0, 0.03);
+        margin: 4px 0;
+        border-radius: 10px;
+        max-width: 255px;
+        padding: 8px 12px;
+        color: rgba(118, 118, 122, 1);
+        font-size: 0.75rem;
+
+        & > span {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+        }
+
+        .quoteElem_recorder {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          & > span:nth-child(1) {
+            margin-right: 10px;
+          }
+        }
+        .quoteElem_file {
+          max-width: max-content;
+          .quoteElem-message {
+            display: flex;
+            align-items: center;
+            .quoteElem-name {
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-line-clamp: 2; /* 控制显示的行数 */
+              max-height: 3.6em; /* 控制最大高度，2行文本的高度是1.8em，这里设置成2行文本的两倍 */
+            }
+          }
+          .recorder-img {
+            width: 14px;
+            height: 14px;
+            vertical-align: middle;
+          }
+        }
+      }
+      .is-reference-msg {
+        position: absolute;
+        right: 0;
+        top: 50px;
+      }
+      .quoteElem_left {
+        align-self: flex-start;
+        .content_image,
+        .content_video {
+          display: flex;
+          position: relative;
+
+          > div {
+            margin-right: 10px;
+            max-width: 100px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          video {
+            position: relative;
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            object-fit: contain;
+            object-position: center;
+          }
+
+          :deep(.van-image) {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+
+            .van-image__img {
+              border-radius: 3px;
+            }
+          }
+
+          .video_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            top: calc(50% - 8px);
+            right: 8px;
+            margin-right: 0;
+
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+
+      .quoteElem_right {
+        align-self: flex-end;
+
+        .content_image,
+        .content_video {
+          display: flex;
+          position: relative;
+
+          > div {
+            margin-right: 10px;
+            max-width: 100px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          video {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            object-fit: contain;
+            object-position: center;
+          }
+
+          :deep(.van-image) {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+
+            .van-image__img {
+              border-radius: 3px;
+            }
+          }
+
+          .video_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            top: calc(50% - 8px);
+            right: 8px;
+            margin-right: 0;
+
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+
+      .cell_state {
+        font-size: 0.625rem;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        &_read {
+          color: rgba(0, 149, 246, 1);
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+
+        &_unread {
+          color: rgba(27, 27, 34, 0.4);
+        }
+      }
+
+      .cell_right {
+        align-self: end;
+        max-width: 80%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        width: fit-content;
+        position: relative;
+
+        :deep(.van-popover__wrapper) {
+          width: 100%;
+        }
+
+        &_loading {
+          color: black;
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+          left: -24px;
+        }
+
+        &_failed {
+          width: 20px;
+          height: 20px;
+        }
+        :deep(.van-image__img) {
+          border-radius: 10px;
+        }
+        .video {
+          border-radius: 10px;
+          position: relative;
+        }
+
+        .video_icon {
+          position: absolute;
+          // top: calc(50% - 16px);
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      // 如果为普通消息则添加其背景
+      .cell_right.isCommonMsgBg {
+        background: rgba(0, 149, 246, 1);
+        border-radius: 10px 10px 0;
+      }
+      .cell_left {
+        position: relative;
+        align-self: start;
+        background: white;
+        color: rgba(27, 27, 34, 1);
+        border-radius: 0 10px 10px 10px;
+        max-width: 80%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        .cdn-source-wrapper {
+          :deep(.van-image__img) {
+            border-radius: 10px;
+          }
+        }
+        .video {
+          border-radius: 10px;
+        }
+        .video_icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      .active_cell {
+        background: transparent;
+        :deep(.popover) {
+          padding: 0;
+        }
+      }
+    }
+    & .special-cell {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .privateChat_footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 8px 12px;
+    width: 100%;
+    background: white;
+    display: flex;
+    font-weight: 500;
+    font-size: 1.625rem;
+    flex-direction: column;
+    .choose_color {
+      color: var(--van-blue);
+    }
+    .container {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+    }
+    .recorder {
+      display: flex;
+      justify-content: space-between;
+      color: var(--van-blue);
+      align-items: center;
+      border-radius: 10px;
+      background: rgba(235, 247, 254, 1);
+      padding: 4px 10px;
+      .recorder_wave {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+      }
+    }
+    .van-icon {
+      padding: 0 0 5px 12px;
+    }
+    .icon_recording {
+      align-items: flex-end;
+      display: flex;
+      height: 100%;
+
+      & > img {
+        width: 30px;
+        height: 30px;
+        padding: 2px;
+      }
+    }
+
+    .icon_send {
+      width: 22px;
+      height: 22px;
+      margin: 0 0 8px 12px;
+    }
+
+    .msg_txt {
+      background: rgba(245, 246, 250, 1);
+      border-radius: 10px;
+      padding: 4px;
+      font-size: 1rem;
+      line-height: 30px;
+    }
+
+    .msgQuote {
+      position: absolute;
+      top: -33px;
+      left: 0;
+      background: white;
+      height: 33px;
+      width: 100%;
+      border-bottom: 1px solid rgba(242, 244, 245, 1);
+      display: flex;
+      font-size: 0.75rem;
+      color: rgba(118, 118, 122, 1);
+      padding: 8px 12px;
+      align-items: center;
+
+      & > .left {
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      & > .center {
+        flex: 1;
+        max-width: 200px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-left: 5px;
+      }
+
+      & > .right {
+        position: absolute;
+        top: 0;
+        right: 12px;
+        bottom: 0;
+        margin: auto;
+        font-size: 1.125rem;
+        height: 18px;
+      }
+
+      .van-icon {
+        padding: 0 !important;
+      }
+    }
+  }
+}
+
+.message_img {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+:deep(.message_img.burn-img) {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.video {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.select-item {
+  width: 16px;
+  margin-right: 12px;
+
+  .check-box {
+    width: 16px;
+    height: 16px;
+    border: 1px solid #d1d1d3;
+    border-radius: 50%;
+
+    &.checked {
+      border-color: var(--c-blue-color);
+      background: var(--c-blue-color) url(@/assets/group-check.svg) no-repeat
+        center / cover;
+    }
+  }
+}
+.private-chat-time {
+  text-align: center;
+  color: #76767a;
+  font-size: 0.75rem;
+  height: 24px;
+}
+
+.forward {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .share {
+    margin-right: 80px;
+    cursor: pointer;
+  }
+
+  .delete {
+    cursor: pointer;
+  }
+}
+
+.custom-dialog {
+  .van-dialog__content {
+    padding: 0;
+
+    .content {
+      margin-top: 24px;
+      text-align: center;
+      font-family: PingFang SC;
+      border-bottom: 0.5px solid #f2f4f5;
+
+      .title {
+        color: #1b1b22;
+        margin-bottom: 16px;
+        font-size: 1rem;
+        font-weight: 600;
+      }
+
+      .contents {
+        color: #76767a;
+        font-size: 0.875rem;
+        margin-bottom: 22px;
+      }
+    }
+  }
+
+  .dialog-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    padding: 11px 0;
+  }
+
+  .btn {
+    color: #1b1b22 !important;
+    text-align: center;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 500;
+    background: #fff !important;
+    border-color: #fff !important;
+    width: 50%;
+  }
+
+  .line {
+    width: 1px;
+    height: 44px;
+    background: #f5f8ff;
+  }
+
+  .btn1 {
+    color: #0095f6 !important;
+  }
+}
+
+.special-forward {
+  background: #ffffff;
+  padding: 10px 12px 14px 12px;
+  border-radius: 10px 0px 10px 10px;
+
+  &-top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+
+    .title {
+      font-size: 1rem;
+      color: #1b1b22;
+    }
+
+    .count {
+      background-color: #f8f8fb;
+      font-size: 0.75rem;
+      color: #1b1b2299;
+      border-radius: 17px;
+      padding: 2px 8px;
+    }
+  }
+
+  &-bottom {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #76767a;
+    font-size: 0.875rem;
+    max-width: 250px;
+  }
+}
+
+.special-forwards {
+  padding: 10px 12px 14px 12px;
+}
+
+.spcial-cell_right {
+  background: transparent !important;
+}
+.text-bilder-type {
+  // max-width: 272px;
+  max-width: 265px;
+  h4 {
+    color: rgba(27, 27, 34, 1);
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+  .linked-content {
+    background-color: rgba(246, 246, 246, 1);
+    border-radius: 8px;
+    padding: 10px 8px;
+    color: rgba(83, 143, 225, 1);
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    .interlink-text {
+      .public-text-overflow-2-lines;
+      padding-right: 10px;
+    }
+  }
+}
+// 文字超出换行展示
+.text-content {
+  .public-wrap-text;
+}
+.incineration-svg {
+  position: absolute;
+  left: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  .incineration-time {
+    font-size: 0.75rem;
+    color: #ff5017;
+  }
+}
+.incineration-right {
+  left: auto;
+  text-align: end;
+  right: 0;
+  white-space: nowrap;
+  transform: translate(100%, -50%);
+}
+.relative_box {
+  position: relative;
+}
+.incineration-pic {
+  width: 200px;
+  height: 160px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #7b8fa7cc;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+  .message_img {
+    border: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.incineration-video {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #7b8fa7cc;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+  .message_img {
+    border: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.burn-time-wrap {
+  text-align: center;
+  margin-left: 10px;
+  max-width: 50px;
+  .burn-img {
+    width: 20px;
+    height: 20px;
+  }
+  .burn-time {
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 50px;
+  }
+}
+.img-download {
+  position: absolute;
+  right: 20px;
+  bottom: 30px;
+  z-index: 1086;
+
+  :deep(.van-button--default) {
+    background: #ffffff21;
+    color: white;
+    border-color: #ffffff21;
+  }
+}
+</style>
diff --git a/src/views/dialogue/privateChat/components/recorder.js b/src/views/dialogue/privateChat/components/recorder.js
new file mode 100644
index 0000000..2751688
--- /dev/null
+++ b/src/views/dialogue/privateChat/components/recorder.js
@@ -0,0 +1,26 @@
+
+import Recorder from 'recorder-core/recorder.mp3.min' //已包含recorder-core和mp3格式支持
+import { useWindowSize } from '@vant/use';
+
+//可选的插件支持项
+import 'recorder-core/src/extensions/waveview'
+
+
+export default function init() {
+  const { width, height } = useWindowSize();
+  let wave = Recorder.WaveView({ width: width.value, height: 10 });
+  const rec = Recorder({ //本配置参数请参考下面的文档，有详细介绍
+    type: "mp3",
+    sampleRate: 16000,
+    bitRate: 16, //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
+    onProcess: function (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
+      //录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)
+      //可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式
+      //可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
+      //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
+      wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
+    }
+  })
+  rec.wave = wave
+  return rec
+}
\ No newline at end of file
diff --git a/src/views/dialogue/privateChat/index.vue b/src/views/dialogue/privateChat/index.vue
new file mode 100644
index 0000000..e143fc7
--- /dev/null
+++ b/src/views/dialogue/privateChat/index.vue
@@ -0,0 +1,3938 @@
+<script setup>
+import { useGrade } from "@/utils/levelConfig";
+import { storeToRefs } from "pinia";
+import AppNavBar from "../components/navBar.vue";
+import { MessageExData } from "./privateChat.js";
+import {
+  reactive,
+  inject,
+  ref,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+  nextTick,
+  computed,
+  watch,
+  watchEffect,
+} from "vue";
+import popover from "@/views/dialogue/privateChat/components/popover.vue";
+import { CbEvents } from "@/utils/openIM/constant";
+import { useRoute, useRouter } from "vue-router";
+import recorder from "@/views/dialogue/privateChat/components/recorder.js";
+import emoji from "@/views/dialogue/privateChat/components/emoji.vue";
+import MsgMedia from "@/views/dialogue/privateChat/components/media.vue";
+import {
+  showImagePreview,
+  showToast,
+  showConfirmDialog,
+  showLoadingToast,
+  showFailToast,
+  showSuccessToast,
+} from "vant";
+import { AppPopup, CommonPreview } from "@/components/index.js";
+import { getSDK } from "@/utils/openIM";
+import { useUserStore } from "@/stores/user.js";
+import appAudio from "@/views/dialogue/privateChat/components/audio.vue";
+import { useContactStore } from "@/stores/contact";
+import {
+  formatMinutestamp,
+  parseMsg,
+  formatTime,
+  replaceStringWithValues,
+  isSelf,
+  formatTtamp,
+  getChatTimeline,
+} from "@/utils/tools";
+import { CustomMessageType } from "@/utils/constant";
+import { useMessageStore } from "@/stores/modules/message";
+import { base64toFile } from "@/utils/sendMessage.js";
+import incinerationPicture from "@/assets/svg/incineration-picture.svg";
+import incinerationVideo from "@/assets/svg/incineration-video.svg";
+import { getPicInfo, canDeleteFromServer,burnMsgByClearMsg,isHttpLink,isImageLink} from "@/utils/common";
+import { formatFileSize, fileErrorsToast, fileIcon,publicDownloadFile,privateChatFileMap } from "@/utils/fileUtils";
+import defaultDownload from "@/assets/svg/download.svg";
+import msg_Vector from '@/assets/img/msg_Vector.svg'
+import usePasteImg from '@/use/usePasteImg'
+import { checkMessage } from "@/utils/chatRule";
+import MessageTimeDeleteHelper from "@/utils/messageTimeDeleteHelper";
+import { color2bgCCss, setGlobalProperty } from "@/utils";
+import { useI18n } from "vue-i18n";
+import { IMSDK } from "@/utils/imCommon";
+import { copyUserId, getCallShowText } from "@/utils/tools.js";
+import { TipDialog } from "@/components/index";
+import emitter from "@/utils/events";
+import privateMessageList from "./components/privateMessage.vue"; // 私聊虚拟列表组件
+import VirtualList from "@/components/virtualList";
+import { useFriendStore } from "@/stores/modules/membership-info";
+import { debounce } from 'lodash';
+const friendState = useFriendStore();
+const messageTimeDeleteHelper = new MessageTimeDeleteHelper();
+const networkOnline = inject('networkOnline')
+
+usePasteImg({
+  targetId: 'privateSendInput',
+  parseOk: (url) => {
+    const msgInfo = create_msg_info()
+    msgInfo.createTime = new Date().getTime();
+    msgInfo.status = 1
+    msgInfo.isLoading = true
+    msgInfo.contentType = 102
+    msgInfo.file = base64toFile(url)
+    handle_send_message(msgInfo);
+  }
+})
+const messageStore = useMessageStore();
+const { updateCheckConcat } = messageStore;
+const { checkedConcat } = storeToRefs(messageStore);
+const contactStore = useContactStore();
+const { setFriendDetailId, setDetailSearch } = contactStore;
+const { contactList, detailSearch } = storeToRefs(contactStore);
+
+const { t } = useI18n();
+const actionsFoward = reactive([
+  { name: t("singleShareMsg"), color: "" },
+  { name: t("groupShareMsg"), color: "" },
+]);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { userBgSettings, userInfo, privateChatConfig, appConfig } =
+  storeToRefs(userStore);
+const $api = inject("$api");
+const route = useRoute();
+const router = useRouter();
+const fowardVisible = ref(false);
+const showFoward = ref(false);
+const OpenIM = getSDK();
+const enablePull = ref(false);
+//私聊 ref
+const privateChat = ref();
+const privateChat_footer = ref();
+//是否展示表情包
+const isShow_emoji = ref(false);
+//是否展示更多信息
+const isShow_media = ref(false);
+//下拉刷新
+const loadingRefresh = ref(false);
+//语音显示
+const isShow_recorder = ref(false);
+//语音初始化
+const REC = recorder();
+const currentSwipeIndex = ref(0);
+const currentBurnTime = ref(0); // 当前图片或视频焚毁的时间
+const privateChatListRef = ref(null);// 虚拟列表的实例
+//消息删除弹窗显示控制
+const isShow_msg_delete = reactive({
+  show: false,
+  currentIndex: 0, //当前删除索引
+  sendID: "0",
+  status: 2,
+});
+const user_info_recv = reactive({
+  nickName: "",
+  userID: route.params.userID,
+  faceURL: "",
+});
+const user_info_send = {
+  nickName: userInfo.value.nickname,
+  userID: userInfo.value.userID,
+};
+const curLastMinSeq = ref(0);
+const startClientMsgID = ref("");
+//当前会话ID
+const conversationID = ref("");
+//创建消息体 字段描述地址： https://docs.openim.io/zh-Hans/sdks/class/message/messageInfo
+// 预览组件
+const showPreview = ref(false);
+const previewArr = ref([]);
+// 传入预览组件当前消息id
+const currentId = ref("");
+const create_msg_info = () => ({
+  //1 单聊 3群聊 4通知
+  sessionType: "",
+  clientMsgID: "1",
+  sendTime: "",
+  sendID: user_info_send.userID,
+  recvID: user_info_recv.userID,
+  senderFaceUrl: "", //发送头像
+  isRead: false,
+  isLoading: true,
+  isSend: true, //是否发送成功
+  contentType: 101, // 101文本 102图片 104视频 301时间(自定义)
+  showPopover: false, //每个消息选项显示
+  senderNickname: userInfo.value.nickname,
+  status: 1, //消息状态 1 发送中 2成功 3失败
+  textElem: {
+    content: "",
+  },
+  videoElem: {
+    videoUrl: "",
+  },
+  pictureElem: {
+    sourcePath: "",
+    sourcePicture: {
+      url: "",
+    },
+    bigPicture: "",
+    snapshotPicture: "",
+  },
+  soundElem: {
+    sourceUrl: "",
+    duration: 0,
+  },
+  quoteElem: {
+    text: "",
+    quoteMessage: {
+      contentType: 101,
+      senderNickname: "",
+    },
+  }, //引用消息
+});
+//消息主体UI-对应显示类型
+const msg_mainstay_type = reactive([101, 102, 103, 104, 105, 110, 114]);
+//引用消息
+const isShow_msgQuote = reactive({
+  show: false,
+});
+useGrade(privateChat, 2);
+const onlineState = ref("");
+//获取当前单聊会话数据
+const get_session_data = async () => {
+  if (history.state.msg) {
+    const current_userInfo = JSON.parse(history.state.msg);
+    Object.assign(user_info_recv, current_userInfo);
+  }
+  const { data } = await OpenIM.getOneConversation({
+    sourceID: user_info_recv.userID,
+    sessionType: 1,
+  });
+  const res = await $api.msg_privateChat.query_public_userInfo({
+    UserIDs: [user_info_recv.userID],
+  });
+  /**
+   * 检测双方是否为好友 
+   * inUser1Friends inUser2Friends 都返回为true 则是好友 
+   * 只返回一个为true 则是单方面删除好友
+   */ 
+  const friendsInfo = await $api.contact.friendIsFriend({
+    userID1: user_info_recv.userID,
+    userID2: userInfo.value.userID,
+  })
+  let info =  (res.data && res.data[0]) || {}
+    setDetailSearch({
+      ...detailSearch.value,
+      ...info,
+      isFriend: friendsInfo.data && friendsInfo.data.inUser1Friends && friendsInfo.data.inUser2Friends ? true : false,
+    })
+  const res_user = await $api.user.getUserStatus({
+    userIDs: [user_info_recv.userID],
+  });
+  
+  //用户不存在
+  if (!res.data[0]) {
+    res.data[0] = {
+      faceURL: "",
+      nickName: user_info_recv.nickName,
+    };
+  }
+
+  Object.assign(user_info_recv, res.data[0]);
+  user_info_recv.faceURL = user_info_recv.faceURL.length
+    ? user_info_recv.faceURL
+    : res.data[0].faceURL || "";
+  conversationID.value = data.conversationID;
+  const arr = contactList.value.filter(
+    (msg) => user_info_recv.userID == msg.userID
+  );
+  user_info_recv.showName = arr[0]?.remark
+    ? arr[0].remark
+    : user_info_recv.showName;
+  let userStatusRes = res_user.data || [];
+  if (userStatusRes.length > 0) {
+    
+    onlineState.value = getDTimeStr(
+      userStatusRes[0].serverTime - userStatusRes[0].lastLogoutTime,
+      userStatusRes[0].lastLogoutTime,
+      userStatusRes[0].serverTime,
+      userStatusRes[0]
+    );
+    console.error('获取当前聊天窗口用户的状态：,',res_user, onlineState.value)
+    // 更新全局当中的在线状态
+    const updatedFriendState = updateFriendState(userStatusRes, friendState.onLineState);
+    friendState.SetOnlineStatus(updatedFriendState);
+  }
+  await get_msgList(10000);
+};
+
+// 更新 friendState.onLineState
+function updateFriendState(userStatusRes, friendState) {
+  const { userID, status } = userStatusRes[0];
+  // 判断status状态
+  const statusToUpdate = status === 1 ? true : false;
+  // 过滤和更新friendState
+  // 创建一个副本以避免直接修改原始对象
+  const updatedFriendState = { ...friendState };
+  if (userID in updatedFriendState) {
+    updatedFriendState[userID] = statusToUpdate;
+  }
+  return updatedFriendState;
+}
+
+//消息内容
+const msg_info = reactive(create_msg_info());
+//消息数据
+const msg_list = ref([]);
+// 图片视频预览数据
+const images = ref([]);
+// 当前需要焚烧的列表
+const currentBurnList = ref([]);
+// 当前需要焚烧的图片/视频列表
+const currentBurnMediaList = ref([]);
+const currentPreviewType = ref("image");
+const currentPreviewSend = ref(false);
+// 阅后即焚后台开关
+const showOpenPrivateBurn = computed(
+  () => appConfig.value.burn_after_reading.private_chat.status === 1
+);
+let timerInterval = null;
+let currentDownTimeMsg = null;
+const readDeleteMsg = ref({
+  clientMsgID: "",
+  seconds: 0,
+});
+//监听对方撤回消息
+OpenIM.on(CbEvents.OnNewRecvMessageRevoked, ({ data }) => {
+  console.log("监听对方测回消息", data);
+  // data 撤回信息详情
+  //如果有引用消息也被撤回了。
+  msg_list.value.forEach((msg) => {
+    if (data.clientMsgID === msg.clientMsgID) {
+      msg.notificationElem = {
+        detail: JSON.stringify(data),
+      };
+      msg.contentType = 2101;
+    } else {
+      const quote = msg.quoteElem?.quoteMessage;
+      if (quote != null && quote.clientMsgID == data.clientMsgID) {
+        quote.notificationElem = {
+          detail: JSON.stringify(data),
+        };
+        quote.contentType = 2101;
+      }
+    }
+  });
+});
+//焚烧消息
+OpenIM.on(CbEvents.OnNewRecvMessageBurned, ({ data: messageBurn }) => {
+  console.log("阅读即焚回调==========", messageBurn);
+});
+//焚烧消息
+OpenIM.on(CbEvents.OnNewRecvMessageBurnedBatch, ({ data: messageBurn }) => {
+  const { clientMsgIDs, conversationID } = messageBurn;
+  console.log("私聊批量阅读即焚回调", messageBurn);
+  for (const clientMsgID of clientMsgIDs) {
+    burnAndremoveMsgFromList(clientMsgID);
+  }
+  const restNeedBurnList = msg_list.value.filter(
+    (item) => item.ex && item.ex.includes("burn_msg") && !isSelf(item.sendID)
+  );
+  // 如何没有需要焚毁的消息了，就把定时器关掉
+  if (!restNeedBurnList.length) {
+    currentDownTimeMsg = null
+  }
+  console.log('restNeedBurnList:>>', restNeedBurnList)
+});
+//已读消息
+OpenIM.on(CbEvents.OnRecvC2CReadReceipt, ({ data }) => {
+  // data 已读回执列表
+  msg_list.value.forEach((msg, key) => {
+    data.forEach((el) => {
+      el.msgIDList.forEach((id) => {
+        if (id === msg.clientMsgID) {
+          msg_list.value[key].isRead = true;
+        }
+      });
+    });
+  });
+});
+//监听 收消息
+OpenIM.on(CbEvents.OnRecvNewMessages, ({ data }) => {
+
+  if (data[0]["typingElem"]) {
+    return;
+  }
+  // 群聊就不做处理
+  if (data[0].sessionType === 3) {
+    return;
+  }
+  // fix 2024-7-30 判断监听接收的聊天数据是否是当前打开的聊天窗口，如果不是，数据不需要渲染
+  if (data[0].recvID != route.params.userID && data[0].sendID != route.params.userID) return
+  console.log("监听收到的信息--与当前聊天窗口相关的消息：", data);
+  if (data[0].contentType == 2300) {
+    checkMessageBurned(data[0]);
+    return;
+  }
+  if (data[0].customElem) {
+    if (
+      data[0].customElem &&
+      data[0].customElem.data &&
+      JSON.parse(data[0].customElem.data).customType == 1001
+    ) {
+      // 1001的时候只保留当前这条消息，设置currentDownTimeMsg = null是为了清除倒计时的定时器
+      currentDownTimeMsg = null;
+      msg_list.value = [...data];
+      return;
+    }
+  }
+
+  // 某些会话的关键信息发生变化时，会触发该回调，例如会话的未读数发生变化，会话的最后一条消息发生变化等。
+  // OpenIM.on(CbEvents.OnConversationChanged, ({ data }) => {
+  //   localStorage.setItem('isUploadDisabled',data[0].recvMsgOpt)
+  // }),
+
+  const idx = msg_list.value.findIndex(
+    (msg) => msg.clientMsgID === data[0].clientMsgID
+  );
+  const chatBoxElm = document.querySelector(".chatBox_content")
+  // const notNeedRead = chatBoxElm?.scrollHeight - (chatBoxElm.scrollTop + imContentHeight.value) > imContentHeight.value * 0.3
+  const notNeedRead = notScroll.value
+  console.log("接收消息", notNeedRead, data, msg_list.value, idx, chatBoxElm.scrollTop);
+  // 在消息列表中没有才加进去
+  if (idx === -1) {
+    msg_list.value.push({
+      ...data[0],
+      isAppend: notNeedRead,
+    });
+  }
+  // data 新消息列表
+  if (!notNeedRead) {
+    setTimeout(() => {
+      // 在这个页面接收到就把它设成已读
+      let r = route.fullPath;
+      if (r.includes("/home/dialogue/privatechat")) {
+        IMSDK.markMessagesAsReadByMsgID({
+          conversationID: conversationID.value,
+          clientMsgIDList: [data[0].clientMsgID],
+        });
+      }
+      scrollToBottom();
+    }, 200)
+  }
+});
+// 删除内存中个某条消息
+const burnAndremoveMsgFromList = (clientMsgID) => {
+  // 删除此条消息
+  const index = msg_list.value.findIndex(
+    (item) => item.clientMsgID === clientMsgID
+  );
+  console.log("私聊批量阅读即焚回调 index:::", index);
+  if (index === -1) return;
+  msg_list.value.splice(index, 1);
+};
+watch(
+  () => msg_list.value,
+  (newVal, oldVal) => {
+    const burnMsgs = newVal.filter(
+      (item) => item.ex && item.ex.includes("burn_msg") && !isSelf(item.sendID)
+    );
+    console.log("消息列表", newVal);
+    // cvClearMsgTip---清除了会话信息
+    let index_1001 = 0;
+    let result = [];
+    const flag = newVal.forEach((msg, index) => {
+      result.push(msg);
+      const { customElem } = msg;
+      if (customElem && customElem.data) {
+        if (JSON.parse(customElem.data).customType == 1001) {
+          index_1001 = index;
+          result = [msg];
+        }
+      }
+    });
+    // console.log("获取下标值：", index_1001);
+    // console.log("获取最新可展示数据：", result);
+    if (index_1001 > 0) {
+      // 1001的时候只保留当前这条消息，设置currentDownTimeMsg = null是为了清除倒计时的定时器
+      currentDownTimeMsg = null;
+      msg_list.value = result;
+    }
+    if (
+      burnMsgs.length !== currentBurnList.value.length ||
+      currentBurnList.value.length === 0
+    ) {
+      findNextListOrStopTimer();
+    }
+  },
+  { deep: true }
+);
+const idList = ref([]);
+//检查消息阅读即焚
+const checkMessageBurned = (message) => {
+  try {
+    const detail = message.notificationElem?.detail;
+    if (detail) {
+      const burnMsg = JSON.parse(detail)["burnMsg"] || [];
+      if (Array.isArray(burnMsg) && burnMsg.length != 0) {
+        for (let i = 0; i < burnMsg.length; i++) {
+          const element = burnMsg[i];
+          if (element.clientMsgId) {
+            idList.value.push(element.clientMsgId);
+          }
+        }
+        if (idList.value.length != 0) {
+          for (let i = msg_list.value.length - 1; i >= 0; i--) {
+            const element = msg_list.value[i];
+            if (idList.value.includes(element.clientMsgID)) {
+              msg_list.value.splice(i, 1);
+            }
+          }
+        }
+      }
+    }
+  } catch (error) {}
+};
+//根据不同类型发消息
+const send_msg = async (msg,controller,localFakeFile) => {
+  let file = msg.file;
+  const list = {
+    //文本消息
+    101: async () => {
+      return await OpenIM.createTextMessage(msg.textElem.content);
+    },
+    //图片消息
+    102: async () => {
+      const {data: { url }} = await OpenIM.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: OpenIM.createuuid(),
+        file,
+        size: file.size,
+      });
+      file.url = url;
+      msg.pictureElem.sourcePicture.url = url;
+      const { width, height } = await getPicInfo(file);
+      const PictureInfo = {
+        uuID: OpenIM.createuuid(),
+        size: file.size,
+        type: file.type,
+        url: file.url,
+        width,
+        height,
+      };
+      return await OpenIM.createImageMessage({
+        sourcePicture: PictureInfo,
+        bigPicture: PictureInfo,
+        snapshotPicture: PictureInfo,
+        sourcePath: "",
+      });
+    },
+    //视频消息
+    104: async () => {
+      //避免资源浪费
+      let {
+        data: { url },
+      } = await OpenIM.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: OpenIM.createuuid(),
+        file,
+        size: file.size,
+      });
+      // let url= 'https://dev-openim.exchangs.top/chat-server-api/object/8553286385/测试.mp4'
+      //获取封面
+      const snapshotFile = await getVideoFrameImage(url, file);
+      const res = await OpenIM.uploadFile({
+        name: snapshotFile.name,
+        contentType: snapshotFile.type,
+        uuid: OpenIM.createuuid(),
+        file: snapshotFile,
+        size: snapshotFile.size,
+      });
+      snapshotFile.url = res.data.url;
+      file.url = url;
+      msg.videoElem.videoUrl = url;
+      return await OpenIM.createVideoMessage({
+        videoPath: "",
+        duration: 30,
+        videoType: file.type,
+        snapshotPath: "",
+        videoUUID: OpenIM.createuuid(),
+        videoUrl: file.url,
+        videoSize: file.size,
+        snapshotUUID: OpenIM.createuuid(),
+        snapshotSize: snapshotFile.size,
+        snapshotUrl: snapshotFile.url,
+        snapshotWidth: snapshotFile.width,
+        snapshotHeight: snapshotFile.height,
+        snapShotType: snapshotFile.type,
+      });
+    },
+    //音频消息
+    103: async () => {
+      const {
+        data: { url },
+      } = await OpenIM.uploadFile({
+        name: file.name,
+        contentType: file.type,
+        uuid: OpenIM.createuuid(),
+        file,
+        size: file.size,
+      });
+      return await OpenIM.createSoundMessage({
+        uuid: OpenIM.createuuid(),
+        soundPath: "",
+        sourceUrl: url,
+        dataSize: file.size,
+        duration: file.duration,
+        soundType: file.type,
+      });
+    },
+    //引用消息
+    114: async () => {
+      //文本複製
+      msg.quoteElem.text = msg.textElem.content;
+      return await OpenIM.createQuoteMessage({
+        text: msg.textElem.content,
+        message: JSON.stringify(msg.quoteElem.quoteMessage),
+      });
+    },
+  };
+  // 二次检查是否已经中止
+  if (controller?.signal?.aborted) {
+    return;
+  }
+  const msgItem = await list[msg.contentType]();
+  Object.assign(msg, msgItem["data"]);
+  if (typeof msgItem["data"] === "string") {
+    console.warn("初始化数据错误为空:", msg);
+  }
+  // appconfig中的private_chat.status控制的是是否展示阅后即焚开关，privateChatConfigex中的burnButton控制是否开启阅读即焚readDeleteTime控制倒计时时间
+  const detail = privateChatConfig.value.ex || "";
+  if (detail && JSON.parse(detail)["burnButton"] == 1) {
+    if (
+      msg.contentType === 101 ||
+      msg.contentType === 103 ||
+      msg.contentType === 102 ||
+      msg.contentType === 104 ||
+      msg.contentType === 106 ||
+      msg.contentType === 114
+    ) {
+      const exData = new MessageExData(msgItem["data"]);
+      if (privateChatConfig.value.ex) {
+        exData.setReadDeleteTime(
+          JSON.parse(privateChatConfig.value.ex)["readDeleteTime"]
+        );
+      }
+      msgItem["data"]["ex"] = JSON.stringify({
+        burn_msg: {
+          read_delete_time: exData.exElem["burnMsg"]["readDeleteTime"],
+        },
+      });
+    }
+  }
+  return await OpenIM.sendMessageNotOss({
+    recvID: user_info_recv.userID,
+    message: msgItem["data"],
+    groupID: "",
+    offlinePushInfo: createByData(msgItem["data"], true, ""),
+  });
+};
+const createByData = (message, isSingleChat, groupName = "") => {
+  let title = "";
+  let desc = "";
+  if (isSingleChat) {
+    title = message.senderNickname ?? "-";
+    desc = getMsgContentTipText(message, false);
+  }
+  return {
+    title: title,
+    desc: desc,
+    iOSBadgeCount: true,
+    iOSPushSound: "+1",
+  };
+};
+///超过36个字符部分，使用...代替
+const getMsgContentTipText = (msg, showSendName = true) => {
+  let text = parseMsg(msg, true, true, true, contactList.value);
+  text = subCharacter(text, 8, 0, 12, "...");
+  return `${text}`;
+};
+///对文本进行裁剪
+const subCharacter = (
+  text,
+  maxLength,
+  start = 0,
+  end,
+  endStr,
+  charactersLength
+) => {
+  const characters = text;
+  if ((charactersLength ? charactersLength : characters.length) > maxLength) {
+    return characters.substring(start, end) + endStr;
+  } else {
+    return text;
+  }
+};
+/**
+ * 处理消息发送
+ * @param  msg_info_new  消息结构体
+ * @param {boolean} repeat 是否二次发送
+ * @param {Number} currentIndex 当前索引，二次发送才有
+ * ***/
+// 发送没有发完的时候不能发第二条
+const msgSending = ref(false);
+const handle_send_message = async (
+  msg_info_new,
+  repeat = false,
+  currentIndex
+) => {
+  // 发言连续校验
+  let checkMessageRes = await checkMessage(msg_list.value,msg_info_new,userInfo.value.userID);
+  if (checkMessageRes.code === 101) {
+    await showConfirmDialog({
+      title: t("dialog_tip1"),
+      message: ('请勿重复多次发送相同内容'),
+      confirmButtonText: t('confirm'),
+      confirmButtonColor: "#5F97E3",
+      showCancelButton: false
+    });
+    handle_reset();
+    return
+  }
+  // 发送中不能发第二条
+  if (msgSending.value) return;
+  msgSending.value = true;
+  msg_info_new.status = 1;
+  //二次发送 跳过当前逻辑
+  if (!repeat) {
+    msg_info_new.createTime = new Date().getTime();
+    msg_info_new = Object.assign({}, msg_info_new);
+    //解决回车键自动换行
+    setTimeout(() => {
+      msg_info.content = "";
+    }, 10);
+  }
+  msg_info_new.isLoading = true;
+  // console.log("网络连接错误", networkOnline.value);
+    // 网络连接错误
+    if(!networkOnline.value) {
+      showToast("网络连接错误");
+    }
+  try {
+    const { data } = await send_msg(msg_info_new);
+    msgSending.value = false;
+    msg_list.value.push(data);
+    // 默认滚动到底部
+    setTimeout(() => {
+      if (privateChatListRef.value) {
+        privateChatListRef.value.scrollToBottom()
+      }
+    }, 300);
+  } catch (error) {
+    handleSendError(error, msg_info_new)
+  }
+  handle_reset();
+};
+// 发送失败重试方法
+const handleSendError = async (error, msg_info_new) => {
+  // debugger
+  console.error("发送出错了", error, msg_info_new);
+  // 网络连接错误
+  if(!networkOnline.value) {
+    showToast("网络连接错误");
+    msg_info_new.status = 3;
+  }
+  const defaultMsg = msg_info_new ? JSON.parse(JSON.stringify(msg_info_new)) : null
+  msgSending.value = false;
+  const { errCode } = error;
+  let customType = 0;
+  if (errCode === 1303) {
+    // 对方不是你的好友
+    customType = CustomMessageType.deletedByFriend;
+  } else if (errCode === 13) {
+    // 这个是对方已经屏蔽你
+    showToast(t("cvSendMsgErrorNoPermission"));
+  } else if (errCode === 1302) {
+    // 对方已经拉黑你
+    customType = CustomMessageType.blockedByFriend;
+  }
+  msg_info_new.status = 3;
+  if (customType != 0) {
+    const res = await OpenIM.createCustomMessage({
+      data: JSON.stringify({
+        // 定1303为不是好友场景
+        customType: customType,
+        data: {},
+      }),
+      extension: "",
+      description: "",
+    });
+    const errMessage = { ...res.data, ...{ isRead: false }, ...{ status: 2 } };
+    // 文件单独处理, 更新文件上传状态
+    if (defaultMsg.contentType === 105) {
+      const showFileIndex = msg_list.value.findIndex(
+        (item) => item.showFile === true
+      );
+      if (showFileIndex !== -1) {
+        msg_list.value[showFileIndex] = {
+          ...msg_list.value[showFileIndex],
+          showFile: false,
+          filePercentage: undefined,
+          status: 3,
+        }
+      }
+    } else {
+      msg_list.value.push({
+        ...msg_info_new,
+        isLoading: false,
+        status: 3,
+      });
+    }
+    msg_list.value.push(errMessage);
+    // 911消息在本地数据库中插入一条
+    OpenIM.insertSingleMessageToLocalStorage({
+      message: errMessage,
+      recvID: user_info_recv.userID,
+      sendID: userInfo.value.userID,
+    });
+  }else{
+      msg_list.value.push({
+      ...msg_info_new,
+      isLoading: false,
+      status: 3,
+    });
+  }
+}
+let filesToSend = 0; // 记录是否为最后一个文件
+let filesSent = 0; // 如果是最后一个文件则重新获取列表数据
+// 文件消息发送
+const handle_send_files = async (fileObj) => {
+  let FileData; // 将 FileData 变量声明在 try 块外部
+  try {
+    // 发言连续校验
+    let checkMessageRes = await checkMessage(msg_list.value,fileObj);
+    if (checkMessageRes.code === 101) {
+      await showConfirmDialog({
+        title: t("dialog_tip1"),
+        message: ('请勿重复多次发送相同内容'),
+        confirmButtonText: t('confirm'),
+        confirmButtonColor: "#5F97E3",
+        showCancelButton: false
+      });
+      handle_reset()
+      return
+    }
+    // 如果文件名以.apk结尾，则修改文件名
+    if (fileObj.file.name.toLowerCase().endsWith(".apk")) {
+      const newName = fileObj.file.name.replace(".apk", ".apk1");
+      fileObj.file = new File([fileObj.file], newName, { type: fileObj.file.type });
+      console.error("如果文件名以.apk结尾，则修改文件名", fileObj.file);
+    }
+    // 创建 AbortController 实例
+    const controller = new AbortController();
+    const signal = controller.signal;
+    // 增加要发送的文件总数
+    filesToSend++;
+    // 创建文件消息并返回
+     FileData = await OpenIM.createFileMessageByFile({
+      filePath: fileObj.filePath,
+      fileName: fileObj.file.name,
+      uuid: OpenIM.createuuid(),
+      sourceUrl: '',
+      fileSize: fileObj.file.size,
+      fileType: fileObj.file.type,
+      file: fileObj.file,
+    });
+    if (FileData.data.contentType === 105) {
+      FileData.data.filePercentage = 0;
+      FileData.data.Filetext = "发送中";
+      FileData.data.showFile = true;
+    }
+    privateChatFileMap.set(FileData.data?.clientMsgID, {
+      controller,
+      conversationID: conversationID.value,
+      file: fileObj.file,
+      messageItem: FileData.data,
+      clientMsgID: FileData.data?.clientMsgID
+    });
+    msg_list.value.push(FileData.data);
+    // 启动文件上传进度定时器
+    const index = msg_list.value.length - 1;
+    // 创建定时器并处理
+    startFileProgressInterval(index, signal, fileObj);
+    // 在发送消息之前检查是否已经取消
+    signal.addEventListener("abort", () => {
+      throw new Error('私聊：请求已被取消');
+      // return
+    });
+    const { data } = await OpenIM.sendMessage({
+      recvID: user_info_recv.userID,
+      message: FileData.data,
+      groupID: "",
+      offlinePushInfo: createByData(FileData.data, true, ""),
+    });
+    console.error('发送成功的数据',data);
+    // 更新文件状态而不是直接操作数组
+    const showFileIndex = msg_list.value.findIndex((item) => item.clientMsgID === FileData.data.clientMsgID);
+    console.error('私聊文件索引=======================', showFileIndex);
+      if (showFileIndex !== -1) {
+        // msg_list.value[showFileIndex].filePercentage = 100;
+        filesSent++;
+        setTimeout(() => {
+          console.error('私聊文件上传完了开始删除本地sssss');
+          msg_list.value[showFileIndex].filePercentage = undefined;
+          msg_list.value[showFileIndex].Filetext = '';
+          msg_list.value.splice(showFileIndex, 1);
+          msg_list.value.push(data);
+          privateChatFileMap.delete(FileData.data.clientMsgID);
+          // 检查是否为最后一个文件
+          if (filesSent === filesToSend) {
+            console.error('检查是否为最后一个文件');
+            get_session_data();
+          }
+        }, 500);
+      } else {
+        console.error('文件上传成功，取消失败');
+        get_session_data();
+      }
+    scrollToBottom();
+  } catch (error) {
+    console.error("私聊：文件消息发送失败", error);
+    await get_session_data()
+    // if (FileData && FileData.data) {
+    //   const showFileIndex = msg_list.value.findIndex((item) => item.clientMsgID === FileData.data.clientMsgID);
+    //   if (showFileIndex !== -1) {
+    //     msg_list.value.splice(showFileIndex, 1);
+    //   }
+    // }
+    // // 网络请求超时错误
+    // if(error.errCode=== 10001) {
+    //   // 如果还有没上传完的map则直接全部清空
+    //   return
+    // }
+    // 重新获取初始化接口
+    // get_session_data();
+  } finally {
+    console.error('文件发送完毕');
+  }
+};
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+// 消息发送失败-重试发送方法
+const handeResendMessage = async (item) => {
+  try {
+    item.status = 1
+    // await sleep(1500);
+    const { data } = await OpenIM.sendMessageNotOss({
+      recvID: item.recvID,
+      groupID: "",
+      message: item,
+    });
+    item.status = 2
+    if (data.status === 2) {
+      showSuccessToast("重新发送成功");
+      // 重新获取初始化接口
+      get_session_data();
+    }
+  } catch (error) {
+    item.status = 2
+    // 文件上传错误的状态集合
+    fileErrorsToast(error);
+    // 对方不是你的好友
+    if(error.errCode === 1303) {
+    // 发送失败
+      // handleSendError(error,item);
+    }
+    // 重新获取初始化接口
+    get_session_data();
+  }
+};
+// 私聊-文件取消方法
+const handeCloseFile = async (item) => {
+  console.error('私聊:文件上传终止了', item);
+  try {
+    const { controller } = privateChatFileMap.get(item.clientMsgID);
+    if (controller) {
+      // 调用后台sdk 文件切片终止
+      await IMSDK.cancelUploadFile({uuid: item.fileElem.uuid});
+      const indexToRemove = msg_list.value.findIndex(msg => msg.clientMsgID === item.clientMsgID);
+      if (indexToRemove !== -1) {
+        msg_list.value.splice(indexToRemove, 1);
+        // 取消上传成功
+        showFailToast('取消上传成功');
+      }
+      controller.abort();
+      privateChatFileMap.delete(item.clientMsgID);
+    } else {
+      console.error('controller 未定义');
+    }
+  } catch (error) {
+    // 如果请求被取消，则会捕获 AbortError
+    if (error.name === 'AbortError') {
+      console.error('请求被取消');
+    } else {
+      console.error('私聊：文件取消报错了====', error);
+    }
+  }
+};
+// 文件下载
+const handeDownloadFile = (item) => {
+  // 在需要文件下载的地方调用公共下载方法
+  publicDownloadFile(item, showShareImg.value);
+};
+// 公共的定时器方法
+function startFileProgressInterval(index, signal, fileObj) {
+  const intervalId = setInterval(() => {
+    // 在定时器内部获取当前文件消息
+    const currentMessage = msg_list.value[index];
+    // 如果消息存在且进度未达到100%
+    if (currentMessage && currentMessage.filePercentage < 100) {
+      currentMessage.filePercentage += 1; // 增加进度
+    } else {
+      clearInterval(intervalId); // 清除定时器
+    }
+  }, 500);
+}
+
+let close_showLoadingToast;
+/**
+ * 处理发送的图片和视频
+ */
+const handle_send_message_media = async (arrayObj) => {
+  console.error('处理发送的图片和视频',arrayObj);
+  const { urlList, urlMsg } = arrayObj || {};
+  if (close_showLoadingToast) close_showLoadingToast.close();
+  if (urlList.length > 0) {
+    close_showLoadingToast = showLoadingToast({
+      message: "加载中...",
+      forbidClick: true,
+      loadingType: "spinner",
+      duration: 0,
+    });
+    //上传图片视频异步处理方法
+    urlList.forEach((item) => {
+      let file = item.file;
+      let msgItem;
+      if (urlMsg.contentType === 102) {
+        OpenIM.uploadFile({
+          name: file.name,
+          contentType: file.type,
+          uuid: OpenIM.createuuid(),
+          file,
+          size: file.size,
+        })
+          .then((res) => {
+            const {
+              data: { url },
+            } = res || {};
+            file.url = url;
+            getPicInfo(file)
+              .then((resItem) => {
+                const { width, height } = resItem || {};
+                const PictureInfo = {
+                  uuID: OpenIM.createuuid(),
+                  size: file.size,
+                  type: file.type,
+                  url: file.url,
+                  width,
+                  height,
+                };
+                OpenIM.createImageMessage({
+                  sourcePicture: PictureInfo,
+                  bigPicture: PictureInfo,
+                  snapshotPicture: PictureInfo,
+                  sourcePath: "",
+                })
+                  .then((msgItem) => {
+                    sendData(msgItem);
+                  })
+                  .catch((err) => {
+                    close_showLoadingToast.close();
+                    get_error(err);
+                  });
+              })
+              .catch((err) => {
+                close_showLoadingToast.close();
+                get_error(err);
+              });
+          })
+          .catch((err) => {
+            close_showLoadingToast.close();
+            get_error(err);
+          });
+      } else if (urlMsg.contentType === 104) {
+        let snapshotFile;
+        OpenIM.uploadFile({
+          name: file.name,
+          contentType: file.type,
+          uuid: OpenIM.createuuid(),
+          file,
+          size: file.size,
+        })
+          .then((resItem) => {
+            const { data: { url } } = resItem || {};
+            getVideoFrameImage(url, file).then((resFile) => {
+                console.error('处理完视频后的文件',resFile);
+                snapshotFile = resFile;
+                OpenIM.uploadFile({
+                  name: snapshotFile.name,
+                  contentType: snapshotFile.type,
+                  uuid: OpenIM.createuuid(),
+                  file: snapshotFile,
+                  size: snapshotFile.size,
+                })
+                  .then((res) => {
+                    snapshotFile.url = res.data.url;
+                    file.url = url;
+                    OpenIM.createVideoMessage({
+                      videoPath: "",
+                      duration: 30,
+                      videoType: file.type,
+                      snapshotPath: "",
+                      videoUUID: OpenIM.createuuid(),
+                      videoUrl: file.url,
+                      videoSize: file.size,
+                      snapshotUUID: OpenIM.createuuid(),
+                      snapshotSize: snapshotFile.size,
+                      snapshotUrl: snapshotFile.url,
+                      snapshotWidth: snapshotFile.width,
+                      snapshotHeight: snapshotFile.height,
+                      snapShotType: snapshotFile.type,
+                    })
+                      .then((msgItem) => {
+                        sendData(msgItem);
+                      })
+                      .catch((err) => {
+                        close_showLoadingToast.close();
+                        get_error(err);
+                      });
+                  })
+                  .catch((err) => {
+                    close_showLoadingToast.close();
+                    get_error(err);
+                  });
+              })
+              .catch((err) => {
+                close_showLoadingToast.close();
+                get_error(err);
+              });
+          })
+          .catch((err) => {
+            close_showLoadingToast.close();
+            get_error(err);
+          });
+      }
+    });
+   async function sendData(msgItem) {
+      Object.assign(urlMsg, msgItem["data"]);
+      if (typeof msgItem["data"] === "string") {
+        // console.warn("初始化数据错误为空:", msg);
+        close_showLoadingToast.close();
+      }
+      const detail = privateChatConfig.value.ex || "";
+      if (detail && JSON.parse(detail)["burnButton"] == 1) {
+        if (
+          urlMsg.contentType === 101 ||
+          urlMsg.contentType === 103 ||
+          urlMsg.contentType === 102 ||
+          urlMsg.contentType === 104 ||
+          urlMsg.contentType === 106 ||
+          urlMsg.contentType === 114
+        ) {
+          const exData = new MessageExData(msgItem["data"]);
+          if (privateChatConfig.value.ex) {
+            exData.setReadDeleteTime(
+              JSON.parse(privateChatConfig.value.ex)["readDeleteTime"]
+            );
+          }
+          msgItem["data"]["ex"] = JSON.stringify({
+            burn_msg: {
+              read_delete_time: exData.exElem["burnMsg"]["readDeleteTime"],
+            },
+          });
+        }
+      }
+      OpenIM.sendMessageNotOss({
+        recvID: user_info_recv.userID,
+        message: msgItem["data"],
+        groupID: "",
+        offlinePushInfo: createByData(msgItem["data"], true, ""),
+      })
+        .then((res) => {
+          msgSending.value = false;
+          msg_list.value.push(res.data);
+          close_showLoadingToast.close();
+          setTimeout(() => {
+            scrollToBottom();
+          }, 200);
+        })
+        .catch((err) => {
+          console.error("最外层---0：创建失败", err);
+          close_showLoadingToast.close();
+          get_error(err, msgItem);
+        })
+        .finally(() => {
+          handle_reset();
+        });
+    }
+  }
+
+  async function get_error(error, msgItem) {
+    msgSending.value = false;
+    const { errCode } = error;
+    let customType = 0;
+    if (errCode === 1303) {
+      // 对方不是你的好友
+      customType = CustomMessageType.deletedByFriend;
+    } else if (errCode === 13) {
+      // 这个是对方已经屏蔽你
+      showToast(t("cvSendMsgErrorNoPermission"));
+    } else if (errCode === 1302) {
+      // 对方已经拉黑你
+      customType = CustomMessageType.blockedByFriend;
+    }
+    if (customType != 0) {
+      const res = await OpenIM.createCustomMessage({
+        data: JSON.stringify({
+          // 定1303为不是好友场景
+          customType: customType,
+          data: {},
+        }),
+        extension: "",
+        description: "",
+      });
+      const errMessage = { ...res.data, ...{ isRead: false }, ...{ status: 2 } };
+      
+      if (msgItem && msgItem.data) {
+        msg_list.value.push({
+          ...msgItem.data,
+          status: 3,
+        });
+      }
+      msg_list.value.push(errMessage);
+      console.log('msgItem::', msgItem.data, errMessage)
+      // // 911消息在本地数据库中插入一条
+      OpenIM.insertSingleMessageToLocalStorage({
+        message: errMessage,
+        recvID: user_info_recv.userID,
+        sendID: userInfo.value.userID,
+      });
+    }
+  await get_msgList();
+  }
+  handle_reset();
+};
+
+
+const windows_or_mac = ref(1);//false--windows系统；true--mac系统
+const pc_or_mobile_flag = ref(false)
+//如果是pc端，需要提示按钮作用，pc端需要区分是window还是mac
+//如果是手机端，需要在输入框有值时，需要将文件选择功能变成发送按钮
+function handleResize() {
+  pc_or_mobile_flag.value = pc_or_mobile()
+  checkOS()
+}
+
+function pc_or_mobile(){
+  const userAgent = navigator.userAgent;
+  const mobileKeywords = [
+    "Android",
+    "webOS",
+    "iPhone",
+    "iPad",
+    "iPod",
+    "BlackBerry",
+    "Windows Phone"
+  ];
+  for (let i = 0; i < mobileKeywords.length; i++) {
+    if (userAgent.indexOf(mobileKeywords[i]) > -1) {
+      return true;
+    }
+  }
+  return false;
+}
+/**
+ * 判断是mac还是win
+ */
+function checkOS() {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const isWindows = userAgent.toLowerCase().indexOf('win') > -1;
+    if(isWindows)return windows_or_mac.value = 1
+    const isMacOS = userAgent.toLowerCase().indexOf('mac') > -1;
+    windows_or_mac.value = 2
+}
+
+const currentEvent = ref()
+const editorRef = ref()
+/**
+ * 输入框组合键换行，空格键发送功能
+ * @param event 
+ */
+const handle_send_message_keyDown = (event) => {
+  const keyCode = event.keyCode || event.which || event.charCode;
+  //组合键 Enter+Ctrl或者Enter+Alt进行换行
+  if((event.ctrlKey||event.altKey)&&keyCode === 13){
+    currentEvent.value = event.target 
+    const cursorPosition = currentEvent.value.selectionStart
+    // 拆分成两段文本
+    const textBeforeCursor = msg_info.textElem.content.slice(0, cursorPosition)
+    const textAfterCursor =msg_info.textElem.content.slice(cursorPosition)
+    // 合并为带有换行符的新文本
+    const newText = textBeforeCursor + '\n' + textAfterCursor 
+    // 更新输入框的值
+    msg_info.textElem.content = newText  
+    nextTick(() => {
+      // 设置光标位置为: start 和 end 相同，光标会移动到换行符后面的新行首
+      currentEvent.value.setSelectionRange(cursorPosition + 1, cursorPosition + 1)
+    })
+
+    return 
+  }
+  if (keyCode === 13&&!pc_or_mobile_flag.value ) {
+    event.preventDefault(); //阻止回车键默认行为，内容为空时，不允许按空格
+    
+    if(!event.shiftKey && msg_info.textElem.content.length){
+
+      handle_send_message(msg_info)
+    }
+  }
+};
+
+
+
+//处理表情与媒体切换
+const handle_switch_emoji = (val) => {
+  isShow_emoji.value = !isShow_emoji.value;
+  isShow_media.value = false;
+};
+const handle_switch_media = () => {
+  isShow_media.value = !isShow_media.value;
+  isShow_emoji.value = false;
+};
+//失去焦点 重置显示
+const handle_reset = () => {
+  isShow_emoji.value = false;
+  isShow_media.value = false;
+  isShow_msgQuote.show = false;
+  // Object.assign(msg_info, create_msg_info()); 这个重置对象有问题，重置对象中如果有新的key，不会被删除，会被带到新的值中，原来的设计不合理
+  // 重置该对象
+  const resetMsgInfo = create_msg_info();
+  Object.keys(resetMsgInfo).forEach((key) => {
+    if (msg_info[key]) {
+      msg_info[key] = resetMsgInfo[key];
+    } else {
+      delete msg_info[key];
+    }
+  });
+};
+
+/**
+ * 删除聊天记录
+ * @param { Boolean } isLocal 是否只删除本地消息
+ * **/
+const handle_delete_msg = async (isLocal = true) => {
+  const msg = msg_list.value[isShow_msg_delete.currentIndex];
+  //判断是否本地删除
+  if (isLocal) {
+    if (privateChatConfig.value.showCheck) {
+      Promise.all(
+        checkedConcat.value.map(async (items) => {
+          const index = msg_list.value.findIndex(
+            (item) => item.clientMsgID === items.clientMsgID
+          );
+          if (index !== -1) {
+            await OpenIM.deleteMessageFromLocalStorage({
+              conversationID: conversationID.value,
+              clientMsgID: msg_list.value[index].clientMsgID,
+            });
+            msg_list.value.splice(index, 1);
+          }
+        })
+      ).then(() => {
+        isShow_msg_delete.value = false;
+      });
+    } else {
+      msg_list.value.splice(isShow_msg_delete.currentIndex, 1);
+      await OpenIM.deleteMessageFromLocalStorage({
+        conversationID: conversationID.value,
+        clientMsgID: msg.clientMsgID,
+      });
+    }
+  } else {
+    //撤回消息
+    await OpenIM.revokeMessage({
+      conversationID: conversationID.value,
+      clientMsgID: msg.clientMsgID,
+    });
+    console.error('撤回了消息',msg_list.value);
+  }
+  showToast(t("deleteSuccessfully"));
+  isShow_msg_delete.show = false;
+  isShow_msg_delete.currentIndex = 0;
+};
+// 私聊-fix :20247-22 部分视频还是显示不了预览问题修改
+const getVideoFrameImage = (url, file, currentTime = 1, width = 160) => {
+  const fileName = file.name.split(".")[0];
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.setAttribute("crossOrigin", "anonymous");
+    video.setAttribute("preload", "metadata");
+    // Handle different video sources based on URL or file type
+    if (url) {
+      video.setAttribute("src", url);
+    } else {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        video.src = event.target.result;
+      };
+      reader.readAsDataURL(file);
+    }
+    video.setAttribute("style", `width:${width}px`);
+    video.currentTime = currentTime;
+    document.body.appendChild(video);
+    // Check every 100 milliseconds if the video is ready
+    const checkVideoReady = setInterval(() => {
+      if (video.readyState >= 4) { // Video is loaded enough to extract frames
+        clearInterval(checkVideoReady); // Stop checking
+        // Ensure width and height are integers
+        const canvas = document.createElement("canvas");
+        const aspectRatio = video.videoWidth / video.videoHeight;
+        const canvasWidth = width;
+        const canvasHeight = Math.round(width / aspectRatio);
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+        const base64String = canvas.toDataURL("image/png");
+        const blob = base64ToBlob(base64String);
+        const imageFile = new File([blob], `${fileName}`, { type: "image/png" });
+        imageFile.width = canvasWidth;
+        imageFile.height = canvasHeight;
+        video.remove();
+        resolve(imageFile); // Resolve with the image file
+      }
+    }, 100); // Check every 100ms
+    video.onerror = (error) => {
+      showFailToast('视频截取失败!');
+      reject(error);
+    };
+    // Function to convert base64 to Blob
+    function base64ToBlob(base64String) {
+      const binaryData = atob(base64String.split(",")[1]);
+      const array = new Uint8Array(binaryData.length);
+      for (let i = 0; i < binaryData.length; i++) {
+        array[i] = binaryData.charCodeAt(i);
+      }
+      return new Blob([array], { type: "image/png" });
+    }
+  });
+};
+//开始录制
+const recorder_open = () => {
+  isShow_recorder.value = true;
+  REC.open(
+    async () => {
+      console.log("录音已打开");
+      //创建音频可视化图形绘制对象
+      REC.start();
+      const el = document.querySelector(".recorder_wave");
+      el.appendChild(REC.wave.canvas);
+    },
+    (msg, isUserNotAllow) => {
+      //用户拒绝了录音权限，或者浏览器不支持录音
+      console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
+      showToast((isUserNotAllow ? "UserNotAllow，" : "") + t("unRecard") + msg);
+    }
+  );
+};
+//删除 语音
+const recorder_delete = () => {
+  isShow_recorder.value = false;
+  REC.stop(
+    (blob, duration) => {
+      //blob就是我们要的录音文件对象，可以上传，或者本地播放
+      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
+      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+
+      console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+      msg_info.file = new File([blob], OpenIM.createuuid() + ".mp3", {
+        type: blob.type,
+      });
+      msg_info.file.duration = duration;
+    },
+    (err) => {
+      console.error("结束录音出错：" + err);
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    }
+  );
+};
+//发送语音消息
+const recorder_send = () => {
+  isShow_recorder.value = false;
+  REC.stop(
+    (blob, duration) => {
+      //blob就是我们要的录音文件对象，可以上传，或者本地播放
+      //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
+      const localUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+
+      console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");
+      const min =
+        appConfig.value?.burn_after_reading?.private_chat?.speech_quality?.min;
+      const max =
+        appConfig.value?.burn_after_reading?.private_chat?.speech_quality?.max;
+      const privateChatEx = JSON.parse(privateChatConfig.value.ex || "{}");
+      const burnStatus =
+        privateChatEx &&
+        privateChatEx.burnButton &&
+        privateChatEx.burnButton === 1;
+      if (burnStatus && (duration > max * 1000 || duration < min * 1000)) {
+        showToast({
+          message: replaceStringWithValues(t("voiceSendErrTip1"), min, max),
+          position: "top",
+        });
+        return;
+      }
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+      msg_info.file = new File([blob], OpenIM.createuuid() + ".mp3", {
+        type: blob.type,
+      });
+      msg_info.contentType = 103;
+      msg_info.file.duration = msg_info.soundElem.duration = Math.floor(
+        duration / 1000
+      );
+      handle_send_message(msg_info);
+    },
+    (err) => {
+      console.error("结束录音出错：" + err);
+      REC.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
+    }
+  );
+};
+let initLoading = ref(false);
+let isSdkErr = ref(false);
+
+const privateChatParams = reactive({
+  lastMinSeq:0,
+  count:30,
+  startClientMsgID:'',
+  conversationID:conversationID.value,
+  nextPage:false,
+})
+
+/**
+ * 获取消息记录
+ *@param {Number} count 获取数量
+ * **/
+const get_msgList = async (count = 30) => {
+  // const params = {
+  //   lastMinSeq: 0, //lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传 number
+  //   count: count, // 一次拉取的数量
+  //   startClientMsgID: "", // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+  //   conversationID: conversationID.value, // 会话 ID
+  // };
+  const params = {
+    lastMinSeq: privateChatParams.lastMinSeq, //lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传 number
+    count: privateChatParams.count, // 一次拉取的数量
+    startClientMsgID: privateChatParams.startClientMsgID, // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+    conversationID: conversationID.value, // 会话 ID
+  };
+  loadingRefresh.value = true;
+  initLoading.value = true;
+  try {
+    console.log(params,'分页请求入参')
+    const res = await OpenIM.getAdvancedHistoryMessageList(params);
+    isSdkErr.value = false;
+    initLoading.value = false;
+    loadingRefresh.value = false;
+    if (res.data.isEnd) {
+      enablePull.value = true;
+    }
+   
+    const messageList = res.data.messageList;
+    curLastMinSeq.value = res.data.lastMinSeq;
+    if(res?.data?.lastMinSeq)privateChatParams.lastMinSeq=res.data.lastMinSeq
+    if(res?.data?.messageList?.length)privateChatParams.clientMsgID = res.data.messageList[0].clientMsgID
+    console.log("初始化进入获取的msg_list", res, messageList);
+    msg_list.value = messageTimeDeleteHelper.refactorMessageList([...messageList,...msg_list.value]);
+
+    //假如一页请求数量是30条，但是返回的数量是少于15条，res.data.isEnd：true才表示数据全部请求完毕，如果不是就需要重新请求
+    //因为出现滚动条滑动滚动条才会触发加载下一页，所有一定要加载到出现滚动条，这样用户可以通过滑动获取下一页数据
+    if(!res?.data?.isEnd&&messageList.length<15&&msg_list.value.length<privateChatParams.count){
+      return get_msgList()
+    }
+
+    if(messageList.length>0)privateChatListRef.value.scrollToIndex(msg_list.value.length-messageList.length<31?15:messageList.length);
+    // .map(item => ({
+    //   ...item,
+    //   customElemParse: JSON.parse(item.customElem?.data || '{}')
+    // }));
+    if (currentBurnList.value.length === 0) {
+      findNextListOrStopTimer();
+    }
+    // 这里的startClientMsgID因为数据反转了，所以需要取第一个
+    if (Array.isArray(messageList) && messageList.length > 0) {
+      startClientMsgID.value = messageList[0].clientMsgID;
+    } else {
+      startClientMsgID.value = "";
+    }
+  } catch (error) {
+    isSdkErr.value = true;
+  }
+  privateChatParams.nextPage = true
+};
+
+/**
+ * 设置时间
+ * @param {Array} msgList 消息列表
+ * @param {Number} interval 间隔时间毫秒 默认1分钟
+ * ***/
+const setTime = (msgList, interval = 60000 * 5) => {
+  const msgList_new = [...msgList];
+  if (msgList.length > 0) {
+    let time = msgList[0].createTime;
+    let i = 0;
+    msgList.forEach((msg, index) => {
+      if (msg.createTime - time > interval) {
+        msgList_new.splice(index + i, 0, {
+          ...msg,
+          contentType: 301,
+          createTime: msg.createTime,
+        });
+        i++;
+        time = msg.createTime;
+      }
+    });
+  }
+  return msgList_new;
+};
+// /**
+//  * 上拉加载
+//  * ***/
+const onRefresh = async () => {
+  const params = {
+    lastMinSeq: curLastMinSeq.value, //lastMinSeq 是上一次拉取回调给的值，上下文，第二次拉取需要回传 number
+    count: 1, // 一次拉取的数量
+    // startClientMsgID: startClientMsgID.value, // 起始的消息 clientMsgID，第一次拉取为""，后续为上一次拉取的最后一条消息的 clientMsgID
+    conversationID: conversationID.value, // 会话 ID
+  };
+  loadingRefresh.value = true;
+  const res = await OpenIM.getAdvancedHistoryMessageList(params);
+  setTimeout(() => {
+    chatBox.value.scrollTop = 5;
+  }, 100);
+  loadingRefresh.value = false;
+  if (res.data.isEnd) {
+    // 查询到最后一条则不再继续查询
+    loadingRefresh.value = true;
+  }
+  const messageList = res.data.messageList.filter(item => !msg_list.value.map(item => item.clientMsgID).includes(item.clientMsgID));
+  // 更新下一次的拉取参数
+  curLastMinSeq.value = res.data.lastMinSeq;
+  msg_list.value = [...messageList, ...msg_list.value];
+  let msgArr = msg_list.value.map((item) => {
+    return {
+      ...item,
+      ex: JSON.stringify(item.ex || {}),
+    };
+  });
+  findNextListOrStopTimer();
+};
+// 判断是否是ios手机端，如果是，返回true
+const isMobile = computed(() => {
+  let flag = /(iPhone|iPad|iPod)/i.test(navigator.userAgent);
+  if (flag) {
+    return true;
+  } else {
+    return false;
+  }
+});
+const showShareImg = computed(() => privateChatConfig.value.showCheck);
+
+onMounted(async () => {
+  handleResize()
+  window.addEventListener('resize', handleResize);
+  setFriendDetailId(route.params.userID);
+  await get_session_data();
+  // 如果配置有全局背景啥的这里加
+  if (
+    userBgSettings.value &&
+    userBgSettings.value.image.imagePath &&
+    privateChat.value
+  ) {
+    privateChat.value.classList.add("useUserAppearance");
+    if (userBgSettings.value.image.color) {
+      privateChat.value.style.background = color2bgCCss(userBgSettings.value.image.color, true)
+    }
+  }
+  // 设置聊天内容高度，兼容各个浏览器
+  observeDomChange();
+  window.addEventListener("resize", setImContent);
+  // // 根据头部消息列表的搜索结果来决定是否执行消息定位
+  // scrollToMessageIfNeeded();
+  // 草稿默认值
+  const { draftText } = privateChatConfig.value
+  if (draftText) {
+    msg_info.textElem.content = draftText
+  }
+  // 默认滚动到底部
+  setTimeout(() => {
+    if (privateChatListRef.value) {
+      privateChatListRef.value.scrollToBottom()
+    }
+  }, 300);
+});
+// 在组件即将卸载时更新页面状态
+onBeforeUnmount(() => {
+  OpenIM.setConversationDraft({
+    conversationID: conversationID.value,
+    draftText: msg_info.textElem.content,
+  });
+  OpenIM.markConversationMessageAsRead(conversationID.value);
+  window.removeEventListener("resize", setImContent);
+  // 接触监听
+  if (observerRef.value) {
+    observerRef.value.disconnect();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  emitter.off('handeCloseFile',handeCloseFile)
+  emitter.off('handeResendMessage',handeResendMessage)
+  emitter.off('burnAudioFn',burnAudioFn)
+  emitter.off('handlePreview',handlePreview)
+  emitter.off('handeUnmetFriend',hanldeAdd)
+});
+let showCenter = ref(false); // 温馨提示弹框
+const resultMsg = ref(); // 温馨提示弹框-内容
+const hanldeAdd = async (val) => {
+  // fix  UPD 2024-8-1 【新的添加好友逻辑和app 保持一致】  
+  try {
+    // 获取用户信息
+    const result = await $api.contact.getUserById({
+      UserIDs: [val.recvID || route.params.userID],
+    });
+    // 判断用户是否存在
+    const isInUser = result.data.users && result.data.users[0]?.internal_uid !== "";
+    // 检查好友总数
+    const res = await $api.contact.checkFriendTotal();
+    if (res.code === 6034) {
+      // 好友数量已达上限
+      resultMsg.value = t("friendNumberCatchTopLimit");
+      showCenter.value = true;
+      return;
+    } else if (res.code === 6035) {
+      // 当天添加的好友已达上限
+      resultMsg.value = t("error_6035");
+      showCenter.value = true;
+      return;
+    } else if (res.code !== 0) {
+      // 其他错误，暂不处理
+      return;
+    }
+    // 验证是否有资格添加好友
+    const res2 = await $api.contact.validateAddFriendByUser({
+      userID: val.recvID || route.params.userID,
+    });
+    if (res2.code === 6083) {
+      // 没有资格添加好友=====该用户未达到添加好友条件
+      resultMsg.value = t("withoutQualification");
+      showCenter.value = true;
+      return;
+    }
+    // 跳转到添加好友页面
+    router.push("/home/contact/add/search/result/apply");
+  } catch (error) {
+    // 处理异常情况
+    console.error("Error occurred while handling friend addition:", error);
+    showToast({ position: "top", message: t("error_api") });
+  }
+};
+const handlePreview = (val) => {
+  const detail = privateChatConfig.value.ex || "";
+  console.log("val:::", val);
+  // 当前这条消息是不是焚毁消息
+  const isActiveBurnItem = val.ex && val.ex.includes("burn_msg");
+  // 这是私聊打开了阅后即焚开关的判断
+  if (
+    showOpenPrivateBurn.value &&
+    detail &&
+    JSON.parse(detail)["burnButton"] == 1 &&
+    isActiveBurnItem
+  ) {
+    // 阅后即焚默认只展示单张图片和视频
+    currentId.value = val.clientMsgID;
+    currentPreviewSend.value = val.sendID === userInfo.value.userID;
+    const tempArr = [];
+    if (val.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = val.videoElem;
+      const detail = val.ex || "";
+      if (detail && JSON.parse(detail)) {
+        currentBurnTime.value =
+          JSON.parse(detail)["burn_msg"]["read_delete_time"];
+      }
+      tempArr.push({
+        type: videoType,
+        snapshotUrl: snapshotUrl,
+        url: videoUrl,
+        id: val.clientMsgID,
+      });
+      currentPreviewType.value = "video";
+    } else if (val.contentType === 102) {
+      const detail = val.ex || "";
+      if (detail && JSON.parse(detail)) {
+        currentBurnTime.value =
+          JSON.parse(detail)["burn_msg"]["read_delete_time"];
+      }
+      tempArr.push({
+        ...val.pictureElem.sourcePicture,
+        id: val.clientMsgID,
+      });
+      currentPreviewType.value = "image";
+    }
+    currentSwipeIndex.value = 0;
+    previewArr.value = tempArr;
+    showPreview.value = true;
+    return;
+  }
+  // 关闭私聊阅后即焚开关后相关判断,仍然打开阅后即焚图片或视频
+  const activeItemEx = JSON.parse(val.ex || "{}");
+  const isBurnMsg = Boolean(
+    activeItemEx.burn_msg && activeItemEx.burn_msg.read_delete_time
+  );
+  if (detail && JSON.parse(detail)["burnButton"] === 0 && isBurnMsg) {
+    currentId.value = val.clientMsgID;
+    // 预览图片列表
+    const tempArr = [];
+    currentBurnTime.value = activeItemEx.burn_msg.read_delete_time;
+    if (val.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = val.videoElem;
+      tempArr.push({
+        type: videoType,
+        snapshotUrl: snapshotUrl,
+        url: videoUrl,
+        id: val.clientMsgID,
+      });
+      currentPreviewType.value = "video";
+    } else if (val.contentType === 102) {
+      tempArr.push({
+        ...val.pictureElem.sourcePicture,
+        url: val.pictureElem.sourcePicture.url || val.pictureElem.bigPicture.url,
+        id: val.clientMsgID,
+      });
+      currentPreviewType.value = "image";
+    }
+    currentSwipeIndex.value = 0;
+    previewArr.value = tempArr;
+    showPreview.value = true;
+    return;
+  }
+  currentId.value = val.clientMsgID;
+  const tempArr = [];
+  msg_list.value.forEach((item) => {
+    if (item.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = item.videoElem;
+      tempArr.push({
+        type: videoType,
+        snapshotUrl: snapshotUrl,
+        url: videoUrl,
+        id: item.clientMsgID,
+      });
+    } else if (item.contentType === 102) {
+      tempArr.push({
+        ...item.pictureElem.sourcePicture,
+        url: item.pictureElem.sourcePicture.url || item.pictureElem.bigPicture.url,
+        id: item.clientMsgID,
+      });
+    }
+  });
+  currentSwipeIndex.value = tempArr.findIndex(
+    (item) => item.id === val.clientMsgID
+  );
+  currentBurnTime.value = 0;
+  previewArr.value = tempArr;
+  showPreview.value = true;
+};
+const closePreview = async (val, time, clientMsgID) => {
+  if (time > 0) {
+    await showConfirmDialog({
+      title: "温馨提示",
+      message: "消息正在焚毁中，是否退出并一键焚毁？",
+      className: "custom-del",
+      cancelButtonText: "我再看看",
+      confirmButtonText: "立即焚烧",
+      confirmButtonColor: "#0095F6",
+    }).then(() => {
+      try {
+        OpenIM.burnMessage({
+          conversationID: conversationID.value,
+          clientMsgID: clientMsgID,
+        });
+        // 删除此条消息
+        const index = msg_list.value.findIndex(
+          (item) => clientMsgID === item.clientMsgID
+        );
+        msg_list.value.splice(index, 1);
+        showPreview.value = false;
+        currentId.value = "";
+        previewArr.value = [];
+      } catch (e) {
+        console.log(e, "error----");
+      }
+    });
+  }
+  showPreview.value = false;
+  currentId.value = "";
+  previewArr.value = [];
+};
+const chatBox = ref("");
+// 定义一个标记
+let isInitialLoad = true;
+// 初始化时候滚动到页面最底部
+const scrollToBottom = async () => {
+  const element = document.querySelector('.virtual-list');
+  if (element) {
+    // 获取滚动条的当前顶部位置
+    const scrollTop = element.scrollTop;
+    // 获取滚动容器的总高度
+    const scrollHeight = element.scrollHeight;
+    // 获取视口高度
+    const clientHeight = element.clientHeight;
+    // 计算是否离开底部三分之一的位置
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) <= clientHeight * 0.3;
+    // console.error('Scroll Top:', scrollTop);
+    // console.error('Scroll Height:', scrollHeight);
+    // console.error('Client Height:', clientHeight);
+    // console.error('Is Near Bottom:', isNearBottom);
+    if (isNearBottom) {
+      // 如果离开底部三分之一的位置
+      privateChatListRef.value.scrollToBottom()
+    }
+  }
+};
+// 遍历消息元素，查找包含指定文字内容的消息，并将视口滚动到该消息所在的位置。
+// const scrollToMessage = (targetText) => {
+//   if (!targetText) {
+//     return; // 如果 targetText 为空或未定义，直接返回，不执行滚动操作
+//   }
+//   const messages = document.querySelectorAll(".chitchat-message");
+//   let targetMessage = null;
+//   // 遍历消息元素，查找包含指定文字内容的消息
+//   for (let message of messages) {
+//     if (message.textContent.includes(targetText)) {
+//       targetMessage = message;
+//       break;
+//     }
+//   }
+//   if (targetMessage) {
+//     targetMessage.scrollIntoView({ behavior: "smooth", block: "end" });
+//   }
+// };
+// 根据搜索消息的-来决定是否执行消息定位
+// const scrollToMessageIfNeeded = () => {
+//   // 获取私聊配置中的消息列表
+//   const messageList = privateChatConfig.value?.messageList || [];
+//   // 判断 privateChatConfig.value.textElem.content 是否有值，如果有则使用该值作为 startMsgText
+//   let startMsgText = "";
+//   if (privateChatConfig.value?.textElem?.content) {
+//     startMsgText = privateChatConfig.value.textElem.content;
+//   } else {
+//     // 如果 privateChatConfig.value.textElem.content 没有值，则取消息列表中的第一条消息的内容作为 startMsgText
+//     startMsgText =
+//       messageList.length > 0 ? messageList[0].textElem?.content || messageList[0].fileElem?.fileName: "";
+//   }
+//   // 如果 startMsgText 不为空，则延迟一定时间后执行消息定位
+//   if (startMsgText) {
+//     setTimeout(() => {
+//       scrollToMessage(startMsgText);
+//     }, 700);
+//   }
+// };
+// 向上滚动加载更多
+const notScroll = ref(false);
+// 旧的方法
+// const handleScroll = () => {
+//   const element = chatBox.value;
+//   // 判断是否离开底部3分之一的位置
+//   const scrollVal = element?.scrollHeight - (element.scrollTop + imContentHeight.value) > imContentHeight.value * 0.3
+//   notScroll.value = scrollVal
+//   if (!scrollVal) {
+//     markAppendAsRead()
+//   }
+//   if (element.scrollTop < 4) {
+//     if (loadingRefresh.value) return;
+//     // onRefresh();
+//   }
+// };
+
+
+// 记录上一次滚动索引
+let lastScrollIndex = -1;
+// 使用 debounce 函数来包装 handleScroll
+// const handleScroll = debounce(() => {
+//   const itemIndex = privateChatListRef.value?.getSizes();
+//   console.error('当前滚动索引:', itemIndex);
+//   console.error('消息列表:', msg_list.value);
+//   // 检查是否与上一次滚动索引相同
+//   if (itemIndex === lastScrollIndex) {
+//     console.error('滚动索引未变化，跳过处理');
+//     return;
+//   }
+//   // 更新上一次滚动索引
+//   lastScrollIndex = itemIndex;
+//   // 确保 itemIndex 不超出消息列表的长度
+//   const totalMessages = msg_list.value.length;
+//   const messagesToFetch = Math.min(itemIndex, totalMessages);
+//   const unreadMessages = msg_list.value.slice(0, messagesToFetch);
+//   console.error('提取的未读消息:', unreadMessages);
+//   // 提取未读消息的 clientMsgID
+//   const clientMsgIDList = unreadMessages.map(message => message.clientMsgID);
+//   // 调用接口标记消息为已读
+//   if (clientMsgIDList.length > 0) {
+//     IMSDK.markMessagesAsReadByMsgID({
+//       conversationID: conversationID.value,
+//       clientMsgIDList,
+//     });
+//   }
+// }, 2500);
+
+const handleScroll = debounce((event) => {
+  const element = document.querySelector('.virtual-list');
+  if (element) {
+    // 获取滚动条的当前顶部位置
+    const scrollTop = element.scrollTop;
+    // 获取滚动容器的总高度
+    const scrollHeight = element.scrollHeight;
+    // 获取视口高度
+    const clientHeight = element.clientHeight;
+    // 计算是否离开底部三分之一的位置
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) <= clientHeight * 0.3;
+    notScroll.value = !isNearBottom
+    //如果滚动到了最底部，需要将未读数更改为已读
+    if(isNearBottom)markAppendAsRead()
+  }
+  if(enablePull.value)return //表示已经请求到所有接口数据
+  if(event.target.scrollTop<20&&privateChatParams.nextPage){
+    privateChatParams.nextPage = false
+    get_msgList()
+  }
+
+  // // 提取未读消息的 clientMsgID
+  // const clientMsgIDList = unreadMessages.map(message => message.clientMsgID);
+  // // 调用接口标记消息为已读
+  // if (clientMsgIDList.length > 0) {
+  //   IMSDK.markMessagesAsReadByMsgID({
+  //     conversationID: conversationID.value,
+  //     clientMsgIDList,
+  //   });
+  // } 
+
+}, 500);
+
+
+// const handleScroll = debounce(() => {
+//   const element = document.querySelector('.virtual-list');
+//   if (element) {
+//     // 获取滚动条的当前顶部位置
+//     const scrollTop = element.scrollTop;
+//     // 获取滚动容器的总高度
+//     const scrollHeight = element.scrollHeight;
+//     // 获取视口高度
+//     const clientHeight = element.clientHeight;
+//     // 计算是否离开底部三分之一的位置
+//     const isNearBottom = scrollHeight - (scrollTop + clientHeight) <= clientHeight * 0.3;
+//     notScroll.value = !isNearBottom
+//   }
+//   const itemIndex = privateChatListRef.value?.getSizes();
+//   console.error('当前滚动索引:', itemIndex);
+//   console.error('消息列表:', msg_list.value);
+//   // 检查是否与上一次滚动索引相同
+//   if (itemIndex === lastScrollIndex) {
+//     console.error('滚动索引未变化，跳过处理');
+//     return;
+//   }
+//   // 更新上一次滚动索引
+//   lastScrollIndex = itemIndex;
+//   // 确保 itemIndex 不超出消息列表的长度
+//   const totalMessages = msg_list.value.length;
+//   const messagesToFetch = Math.min(itemIndex, totalMessages);
+//   const unreadMessages = msg_list.value.slice(0, messagesToFetch);
+//   console.error('提取的未读消息:', unreadMessages);
+//   // 提取未读消息的 clientMsgID
+//   const clientMsgIDList = unreadMessages.map(message => message.clientMsgID);
+//   // 调用接口标记消息为已读
+//   if (clientMsgIDList.length > 0) {
+//     IMSDK.markMessagesAsReadByMsgID({
+//       conversationID: conversationID.value,
+//       clientMsgIDList,
+//     });
+//   }
+// }, 2000);
+const showPopover = ref(false);
+const showCheckFlag = computed(() => {
+  return (val) => {
+    if (val.contentType === 2101) {
+      return false;
+    }
+    if (val.contentType === 301) {
+      return false;
+    }
+    if (val.contentType === 1201) {
+      return false;
+    }
+    return true;
+  };
+});
+const handleCancel = () => {
+  showFoward.value = false;
+  // 将
+  setPrivateChatConfig({
+    ...privateChatConfig.value,
+    showCheck: false,
+    type: "", // 逐条转发
+    msg: [],
+    hiddenSource: 2, // 隐藏消息来源1， 2不隐藏
+    isMultipleChoice: false,
+    groupChecked: [], // 选择的群
+    contactChecked: [], // 选择的联系人
+    chatDataList: [],
+  });
+};
+const selectFoward = (val, index) => {
+  if (index === 0) {
+    // 这里要传类型，单条还是合并
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      showCheck: false,
+      type: "single", // 逐条转发
+      msg: checkedConcat.value,
+      hiddenSource: 2, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: [],
+    });
+    setGroupChatConfig({});
+    router.push("/home/dialogue/transmitPage");
+    return;
+  } else {
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      showCheck: false,
+      type: "group", // 逐条转发
+      msg: checkedConcat.value,
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [], // 选择的联系人
+      chatDataList: [],
+    });
+    fowardVisible.value = true;
+  }
+};
+const handleShare = () => {
+  showFoward.value = true;
+};
+// 删除本地消息
+const handleDelete = () => {
+  isShow_msg_delete.show = true;
+};
+const handleConfirm = (type) => {
+  // type为no,展示不隐藏，反之展示
+  setPrivateChatConfig({
+    ...privateChatConfig.value,
+    hiddenSource: type === "no" ? 2 : 1, // 隐藏消息来源1， 2不隐藏
+  });
+  fowardVisible.value = false;
+  setGroupChatConfig({});
+  router.push("/home/dialogue/transmitPage");
+};
+const getFlag = computed(() => {
+  return (val) => {
+    const index = checkedConcat.value.findIndex(
+      (item) => item.clientMsgID === val.clientMsgID
+    );
+    if (index > -1) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+});
+// 消息列表超过5分钟则显示时间
+const getTimeLine = computed(() => {
+  return (message, preMessage) => {
+    // 红包消息不展示时间
+    // if (message.contentType === 110) {
+    //   return null;
+    // }
+    // 自定义消息类型判断不展示时间
+    // const MessageTypeList = [1501, 1504, 1507, 1508, 1509, 1510, 1511, 1512, 1513, 1514, 1515, 1519, 1520, 2101]
+    // if (MessageTypeList.includes(message.contentType)) {
+    //   return null;
+    // }
+    const sendTime = message.sendTime;
+    const preSendTime = preMessage?.sendTime || 0;
+    if (sendTime - preSendTime > 5 * 60 * 1000) {
+      return getChatTimeline(sendTime);
+    }
+    return null;
+  };
+})
+const clickMessage = (val) => {
+  const idx = checkedConcat.value.findIndex(
+    (item) => item.clientMsgID === val.clientMsgID
+  );
+  if (idx > -1) {
+    checkedConcat.value.splice(idx, 1);
+  } else {
+    checkedConcat.value.push(val);
+  }
+};
+const showCheck = computed(() => privateChatConfig.value.showCheck === true);
+const goback = async () => {
+  // 不管焚烧开关设置与否，只要消息列表中还有已收到的未焚毁的消息都要清掉
+  // 焚烧消息未看完, 退出时,才会出现“温馨提示”
+  const arr = currentBurnList.value.filter((item) => item.delete === false);
+  const burnImgVideoList = currentBurnMediaList.value.filter(
+    (item) => item.delete === false
+  );
+  const seqsId = [...arr, ...burnImgVideoList]
+    .map((item) => item.message)
+    .map((items) => items.seq);
+  if (seqsId.length > 0) {
+    await showConfirmDialog({
+      title: "温馨提示",
+      message: "消息正在焚毁中，是否退出并一键焚毁？",
+      className: "custom-del",
+      cancelButtonText: "我再看看",
+      confirmButtonText: "立即焚烧",
+      confirmButtonColor: "#0095F6",
+    });
+    // FIXME: 这里批量删除有问题，调不到sql
+    try {
+      await OpenIM.burnMessageBatch({
+        conversationID: conversationID.value,
+        seqs: JSON.stringify(seqsId),
+      });
+      setPrivateChatConfig({});
+      router.push("/home/dialogue");
+    } catch (e) {
+      console.log("接口调用失败： ", e);
+      // 焚烧不成功也让他出去
+      router.push("/home/dialogue");
+    }
+  } else {
+    setPrivateChatConfig({});
+    router.push("/home/dialogue");
+  }
+};
+const transformText = (val) => {
+  return JSON.parse(val.customElem?.data || "{}");
+};
+const transformNickName = (data) => {
+  if (!data || !Object.keys(data).length) return "";
+  return isSelf(data.data.opUserID) ? t("your") : data.data.NickName;
+};
+const handleDetail = (val) => {
+  const detail = JSON.parse(val.customElem.data);
+  if (detail.data.serverID) {
+    router.push(`/home/dialogue/logDisplay?relay_id=${detail.data.serverID}`);
+  } else {
+    router.push({
+      path: "/home/dialogue/logDisplay",
+      state: {
+        msg: detail.data,
+      },
+    });
+  }
+};
+
+const judgeIsFriend = computed(() => {
+  return (val) => {
+    const index = contactList.value.findIndex(
+      (item) => item.userID === val.sendID
+    );
+    let remark = "";
+    if (index != -1) {
+      remark = contactList.value[index].remark
+        ? contactList.value[index].remark
+        : contactList.value[index].nickname;
+    } else {
+      remark = val.senderNickname;
+    }
+    return remark;
+  };
+});
+const handleCloseActionBar = () => {
+  isShow_media.value = false;
+};
+const hanldeEmojiselect = () => {
+  isShow_emoji.value = false;
+};
+
+// json转换
+const onJson = (val) => {
+  return JSON.parse(val || "{}");
+};
+// 时间转换
+const getCompleteTime = (seconds) => {
+  // 计算天数、小时数、分钟数和剩余秒数
+  const days = Math.floor(seconds / (24 * 3600));
+  seconds %= (24 * 3600);
+  const hours = Math.floor(seconds / 3600);
+  seconds %= 3600;
+  const minutes = Math.floor(seconds / 60);
+  seconds %= 60;
+  // 构建时间字符串
+  let timeString = '';
+  if (days > 0) {
+      timeString += days + t("day");
+  }
+  if (hours > 0) {
+      timeString += hours + t("hours");
+  }
+  if (minutes > 0) {
+      timeString += minutes + t("minute");
+  }
+  if (seconds > 0) {
+      timeString += seconds + t("seconds");
+  }
+
+  return timeString.trim();
+};
+
+// 筛选阅后即焚消息
+const filterBurnMsg = (arr = []) => {
+  return arr.filter((item) => {
+    item.ex = JSON.parse(item.ex || "{}");
+    if (item.ex.burn_msg && item.ex.burn_msg.read_delete_time) {
+      return {
+        ...item,
+        ex: item.ex,
+      };
+    }
+  });
+};
+
+const isSendFn = (msg) => {
+  return msg.sendID == userInfo.value.userID;
+};
+const isReadDeleteMsg = (msg) => {
+  if (msg && msg.ex && JSON.parse(msg.ex)["burn_msg"]) {
+    return true;
+  }
+  return false;
+};
+const findNextListOrStopTimer = () => {
+  currentBurnList.value = [];
+  // 因为语言文字等消息焚毁的逻辑和图片视频的不一样（图片视频是需要点开详情加载完成才开始倒计时）所以这里用另一个变量存图片和视频的焚毁消息
+  currentBurnMediaList.value = [];
+  for (const msg of msg_list.value) {
+    // 没有clientMsgID或者非阅后即焚消息跳过
+    if (!msg || msg.clientMsgID === "" || !isReadDeleteMsg(msg)) continue;
+    if (msg.contentType === 101 || msg.contentType === 114) {
+      const messageExData = new MessageExData(msg);
+      if (messageExData.remainTime > 0 && !isSelf(msg.sendID)) {
+        currentBurnList.value.push(messageExData);
+      } else {
+        //------需要销毁的消息-以前可能没有焚毁
+        messageExData.setDelete();
+        messageExData.saveLocalExToDB(conversationID.value);
+      }
+    }
+
+    // 私聊自己发的图片或视频和语音都留
+    if (
+      msg.contentType === 103 ||
+      msg.contentType === 102 ||
+      msg.contentType === 104
+    ) {
+      const mediaMsgExData = new MessageExData(msg);
+      // 别人的发的图片或视频的阅读即焚消息
+      if (
+        !isSendFn(msg) &&
+        isReadDeleteMsg(msg) &&
+        mediaMsgExData.remainTime > 0
+      ) {
+        currentBurnMediaList.value.push(mediaMsgExData);
+      }
+    }
+  }
+
+  // 只有在没有获取到文本已读即焚并且当前没有正在倒计时的消息的时候才关闭
+  console.log(
+    "currentBurnList.value:::",
+    currentBurnList.value,
+    currentDownTimeMsg
+  );
+  if (currentBurnList.value.length === 0 && !currentDownTimeMsg) {
+    startTimer(false);
+  } else {
+    startTimer(true);
+    downloadTime();
+  }
+};
+const checkStartTimer = () => {
+  if (currentBurnList.value.length === 0) {
+    startTimer(false);
+  } else {
+    if (timerInterval != null) {
+      return;
+    }
+    startTimer(true);
+    downloadTime();
+  }
+};
+const startTimer = (start) => {
+  if (!start) {
+    if (timerInterval != null) {
+      clearInterval(timerInterval);
+      timerInterval = null;
+    }
+    return;
+  }
+  // if (_state !== LifeState.start) return;
+  if (currentBurnList.value.length === 0) return;
+  if (start && timerInterval == null) {
+    timerInterval = setInterval(() => {
+      downloadTime();
+    }, 1000);
+  }
+};
+const downloadTime = () => {
+  const msg = currentDownTimeMsg;
+  if (msg != null) {
+    if (!route.path.startsWith("/home/dialogue/privatechat")) {
+      return;
+    }
+    const time = msg.downTime();
+    // console.log("${msg.message.clientMsgID} -- $time", msg, time);
+    //发送消息
+    if (time <= 0) {
+      currentDownTimeMsg = null;
+      msg.pause(conversationID.value);
+      ///删除消息
+      deleteMsg(msg.message);
+      ///找到下一个消息
+      downloadTime();
+    } else if (msg.message.clientMsgID != null) {
+      readDeleteMsg.value.clientMsgID = msg.message.clientMsgID;
+      readDeleteMsg.value.seconds = time;
+    }
+  } else {
+    const nextMsg = findNext();
+    console.log("下一条需要焚烧的消息", nextMsg);
+    if (nextMsg == null) {
+      findNextListOrStopTimer();
+    } else {
+      readDeleteMsg.value.clientMsgID = nextMsg.message.clientMsgID;
+      readDeleteMsg.value.seconds = nextMsg.remainTime;
+      currentDownTimeMsg = nextMsg;
+    }
+  }
+};
+const deleteMsg = (message) => {
+  //撤回消息
+  if (message) {
+    burnMessage(message);
+  }
+};
+const burnMessage = (message) => {
+  console.log("准备焚毁的消息：：：", message, message.clientMsgID);
+  if (message.clientMsgID) {
+    try {
+      // 删除此条消息
+      const index = msg_list.value.findIndex(
+        (item) => message.clientMsgID === item.clientMsgID
+      );
+      console.log(
+        "倒计时焚毁的消息：：：",
+        index,
+        message,
+        currentBurnList.value
+      );
+      if (index === -1) return;
+      OpenIM.burnMessage({
+        conversationID: conversationID.value,
+        clientMsgID: message.clientMsgID,
+      });
+      const burnTxtIdx = currentBurnList.value.findIndex(
+        (item) => item.message.clientMsgID === message.clientMsgID
+      );
+      if (burnTxtIdx !== -1) {
+        currentBurnList.value.splice(burnTxtIdx, 1);
+      }
+      const burnMediaIdx = currentBurnMediaList.value.findIndex(
+        (item) => item.message.clientMsgID === message.clientMsgID
+      );
+      if (burnMediaIdx !== -1) {
+        currentBurnList.value.splice(burnMediaIdx, 1);
+      }
+
+      console.log("剩下的消息消息：：：", burnTxtIdx, burnMediaIdx);
+      // 查一下即将焚毁的消息（语音或者音视频，把它也删了
+      msg_list.value.splice(index, 1);
+    } catch (e) {
+      console.log(e, "error----");
+    }
+  }
+};
+const findMsg = (clientMsgID) => {
+  return msg_list.value.findIndex(
+    (element) => element.clientMsgID === clientMsgID
+  );
+};
+const findNext = () => {
+  for (let i = 0; i < currentBurnList.value.length; i++) {
+    const element = currentBurnList.value[i];
+    if (element.remainTime > 0) {
+      // if (element.message.contentType === 103) {
+      //   if (!element.isPlayCompleted()) {
+      //     continue;
+      //   }
+      // }
+      //需要看这个消息是否还在消息列表里面
+      if (findMsg(element.message.clientMsgID ?? "") != -1) {
+        return element;
+      }
+    }
+  }
+  return null;
+};
+onBeforeUnmount(() => {
+  if (timerInterval != null) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+});
+const showBurnTime = computed(() => {
+  return (val) => {
+    if (val.clientMsgID === readDeleteMsg.value.clientMsgID) {
+      let time = readDeleteMsg.value?.seconds;
+      if (!readDeleteMsg.value.clientMsgID) {
+        const cur = currentDownTimeMsg;
+        if (val.clientMsgID == cur?.message.clientMsgID) {
+          time = cur?.remainTime;
+        }
+      }
+      return time;
+    }
+  };
+});
+const deleteBurn = (clientMsgID) => {
+  const index = msg_list.value.findIndex(
+    (item) => clientMsgID === item.clientMsgID
+  );
+  const message = msg_list.value[index];
+  if (message && isReadDeleteMsg(message)) {
+    const msgExData = new MessageExData(message);
+    msgExData.setDelete();
+    msgExData.saveLocalExToDB(conversationID.value);
+  }
+  try {
+    OpenIM.burnMessage({
+      conversationID: conversationID.value,
+      clientMsgID: clientMsgID,
+    });
+    // 删除此条消息
+    msg_list.value.splice(index, 1);
+    showPreview.value = false;
+    currentId.value = "";
+    previewArr.value = [];
+  } catch (e) {
+    console.log(e, "error----");
+  }
+};
+const burnAudioFn = (val) => {
+  if (isSendFn(val)) return;
+  const mediaMsgExData = new MessageExData(val);
+  // 读完把当前消息加入到焚烧队列中
+  currentBurnList.value.push(mediaMsgExData);
+  if (!timerInterval) {
+    startTimer(true);
+  }
+  // deleteBurn(val.clientMsgID);
+};
+const showPrivateBurnTime = computed(() => {
+  const detail = privateChatConfig.value.ex;
+  if (detail) {
+    // 阅后即焚关闭
+    if (JSON.parse(detail)["burnButton"] == 0) {
+      return -1;
+    } else {
+      return JSON.parse(detail)["readDeleteTime"];
+    }
+  } else {
+    return -1;
+  }
+});
+const isActiveBurnMsg = computed(() => {
+  return (val) => {
+    if (!val) return false;
+    const activeItemEx = JSON.parse(val.ex || "{}");
+    const isBurnMsg = Boolean(
+      activeItemEx.burn_msg && activeItemEx.burn_msg.read_delete_time
+    )
+    return isBurnMsg
+  };
+});
+watchEffect(() => {
+  const msgLen = msg_info.textElem.content.length;
+  const limitLen =
+    appConfig.value.burn_after_reading.private_chat.message_length;
+  const privateChatEx = JSON.parse(privateChatConfig.value.ex || "{}");
+  const isBurnStatus =
+    privateChatEx && privateChatEx.burnButton && privateChatEx.burnButton === 1;
+  if (isBurnStatus && msgLen >= limitLen) {
+    showToast({
+      message: replaceStringWithValues(t("textSendErrTip1"), limitLen),
+      position: "top",
+    });
+  }
+});
+const privateBurnStatus = computed(
+  () => JSON.parse(privateChatConfig.value.ex || "{}")?.burnButton
+);
+
+const imContentHeight = ref(0);
+const setImContent = () => {
+  if (privateChat_footer.value) {
+    const { top } = privateChat_footer.value.getBoundingClientRect();
+    imContentHeight.value = top - 56;
+  }
+};
+
+const observerRef = ref(null);
+const observeDomChange = () => {
+  observerRef.value = new ResizeObserver((entries, observer) => {
+    for (let entry of entries) {
+      const { width, height } = entry.contentRect;
+      setImContent();
+    }
+  });
+  observerRef.value.observe(privateChat_footer.value);
+};
+
+// 转发入口显示/隐藏
+const isTransmitSend = computed(() => {
+  const transmit_role_type =
+    appConfig.value.batch_send?.transmit_role_type || [];
+  // 群发功能可选角色
+  if (transmit_role_type.length > 0) {
+    let isGroupOwner =
+      transmit_role_type.includes(1) && userInfo.value.isGroupOwner;
+    let isGroupAdmin =
+      transmit_role_type.includes(2) && userInfo.value.isGroupAdmin;
+    let isNormalUser =
+      transmit_role_type.includes(3) &&
+      !userInfo.value.isGroupAdmin &&
+      !userInfo.value.isGroupOwner &&
+      !userInfo.value.isInternalUser;
+    let isInternalUser =
+      transmit_role_type.includes(4) && userInfo.value.isInternalUser;
+    return isGroupOwner || isGroupAdmin || isNormalUser || isInternalUser;
+  } else {
+    return false;
+  }
+});
+
+///多少分钟前在线--单位是：秒
+///一小时以内，显示多少分钟前在线
+///小于24小时，显示xx小时前在线
+///离线大于15天，显示很久没上线
+///检测是否是昨天在线-显示昨天在线
+///其他，显示近期在线
+// dTime=serverTime-lastLogoutTime
+const getDTimeStr = (dTime, lastLogoutTime, serverTime, row) => {
+  var minute = Math.floor(dTime / 60);
+  if (row.status === 1) {
+    return "";
+  }
+
+  if (row.lastLogoutTime == 0 && row.serverTime == 0) {
+    return "从未登录";
+  }
+  if (minute === 0) {
+    minute = 1;
+  }
+  if (minute < 60) {
+    return minute + "分钟前在线";
+  }
+
+  var hour = Math.floor(minute / 60);
+  if (hour < 24) {
+    return hour + "小时前在线";
+  }
+
+  if (hour > 24 * 15) {
+    return "很久没上线";
+  }
+
+  // 超过24小时，判断是否是昨天
+  var currentTime = new Date(serverTime * 1000);
+  var todayStart = new Date(
+    currentTime.getFullYear(),
+    currentTime.getMonth(),
+    currentTime.getDate()
+  );
+  // 昨天开始的时间
+  var ms = todayStart.getTime() - 1000 * 60 * 60 * 24;
+  if (lastLogoutTime * 1000 > ms) {
+    return "昨天在线";
+  } else {
+    return "近期在线";
+  }
+};
+
+/**
+ * 计算图片宽度
+ * @param val
+ */
+const setImgStyle = (val) => {
+  // 104 129
+  const { width, height } = val;
+  let obj = {
+    width: width,
+    height: width,
+  };
+  // 宽度大于180的图片
+  if (width > 180) {
+    obj.width = 180;
+    obj.height = height / (width / 180);
+  }
+  // 横向图片
+  if (width > height) {
+    obj.width = 220;
+    obj.height = height / (width / 220);
+  }
+  // 纵向小图
+  if (width <= 180 && width < height) {
+    obj.width = width
+    obj.height = height
+  }
+  return obj;
+};
+
+// 判断是PC浏览器还是手机浏览器
+const isMobileBrowser = computed(() => {
+  return !!navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|Macintosh|Mac OS X)/i
+  );
+});
+
+// pc图片下载
+const isUpload = ref(false);
+const uploadImgSrc = ref(null);
+
+const onImage = (src) => {
+  console.log("onImage", src);
+  // 下载地址
+  uploadImgSrc.value = src;
+  // 预览开启
+  // isUpload.value = true;
+};
+const setVisible = (val) => {
+  console.log("setVisible", val);
+  // 关闭预览
+  isUpload.value = val;
+  uploadImgSrc.value = null;
+};
+
+// 图片下载
+const handleDownLoad = (event) => {
+  // 创建一个 <a> 元素
+  const link = document.createElement("a");
+  link.href = uploadImgSrc.value;
+  // 设置下载文件名
+  link.download = "";
+  // 触发点击事件以下载图片
+  link.click();
+  link.remove();
+};
+// 打开URL站内链接
+const handeOpenLink = (url) => {
+  // 使用正则表达式判断url是否以http://或https://开头
+  const httpRegex = /^https?:\/\//i;
+  // 如果url以www.开头，则在前面加上http://
+  if (!httpRegex.test(url)) {
+    url = 'http://' + url;
+  }
+  // 使用window.open打开链接
+  window.open(url);
+};
+// 计算处理后的内容
+const processedContent = computed(() => (content) => {
+  // 判断是否是 http 链接
+  if (isHttpLink(content)) {
+    // 判断链接的后缀是否是图片类型
+    // 1、图片链接  2、普通文本链接
+    if (isImageLink(content)) {
+      return 1; // 返回状态1
+    } else {
+      return 2; // 返回状态2
+    }
+  } else {
+    return content; // 如果不是链接格式，则返回内容本身
+  }
+});
+// 消息主体：高亮展示
+function isActiveCell(contentType) {
+  return (
+    contentType === 102 ||
+    contentType === 104 ||
+    contentType === 105
+  )
+}
+// 计算是否是链接类型的文本消息在添加样式
+const isActiveBgLink = computed(() => {
+  return (items) => {
+    if (items.contentType === 101 && items.textElem?.content) {
+      let isLinkState = processedContent.value(items.textElem.content);
+      // 1、图片链接  2、普通文本链接
+      return isLinkState === 1 || isLinkState === 2;
+    }
+    return false;
+  };
+});
+messageTimeDeleteHelper.updateSingleCheck(privateChatConfig.value,true)
+// updateSingleCheck(privateChatConfig.value,true)
+
+const unReadCount = computed(
+  () => msg_list.value.filter(
+    (message) => message.isAppend === true&&message?.sendID!==userInfo?.value?.userID
+  ).length
+);
+
+const markAppendAsRead = () => {
+  const unreadClientMsgIDs = msg_list.value.filter(item => item.isAppend === true).map(item => item.clientMsgID)
+  msg_list.value = msg_list.value.map(item => ({ ...item, isAppend: false }));
+  if (unreadClientMsgIDs.length) {
+    IMSDK.markMessagesAsReadByMsgID({
+      conversationID: conversationID.value,
+      clientMsgIDList: unreadClientMsgIDs,
+    });
+  }
+}
+const scrollToUnread = () => {
+  markAppendAsRead()
+  // 把虚拟列表设置到最底部
+  if (privateChatListRef.value) {
+    privateChatListRef.value.scrollToBottom()
+  }
+}
+// 文件取消成功回调
+OpenIM.on(CbEvents.CancelSuccess, ({ data }) => {
+  console.error('-------------文件取消成功回调',data);
+  // 收到此回调代表文件上传取消成功，没收到取消失败
+})
+// 动态计算虚拟列表的高度
+const estimateSize = computed(() => {
+  const itemHeight = 200;
+  return msg_list.value.length * itemHeight;
+});
+// 监听事件，更新数据
+emitter.on('handlePreview',handlePreview)
+emitter.on('handeCloseFile',handeCloseFile)
+emitter.on('handeResendMessage',handeResendMessage)
+emitter.on('burnAudioFn',burnAudioFn)
+emitter.on('handeUnmetFriend',hanldeAdd)
+// 私聊-视频图片打开方法
+// 私聊-文件取消方法 handeCloseFile()
+// 私聊-消息发送失败-重试发送方法   handeResendMessage()
+// 私聊-语音方法 burnAudioFn()
+// 私聊-未满足好友条件弹框
+</script>
+
+<template>
+  <!---私聊--->
+  <div class="privateChat" ref="privateChat">
+    <AppNavBar
+      :conversation-type="1"
+      views_grade="secondary_view"
+      :onlineState="onlineState"
+      :info="user_info_recv"
+      :toShare="{ path: '/home/dialogue', state: { info: '填写信息' } }"
+      :toDetails="{
+        path: '/home/dialogue/chatSetings',
+        state: { info: '填写信息' },
+      }"
+      @goback="goback"
+    />
+    <div class="placeholder-box" style="width: 100%; height: 56px"></div>
+    <!---刷新层  @scroll="handleScroll"--->
+    <div :class="['chatBox', isMobile ? 'active_chatBox' : '']" v-if="msg_list.length">
+      <div
+        ref="chatBox"
+        class="chatBox_content privateChat_body"
+      >
+        <!-- 私聊-虚拟列表 -->
+        <virtual-list
+          ref="privateChatListRef"
+          :style="`height: ${imContentHeight}px`"
+          class="virtual-list"
+          @scroll="handleScroll"
+          :data-index="'index'"
+          :data-key="'clientMsgID'" 
+          :data-sources="msg_list"
+          :data-component="message => privateMessageList"
+          :estimate-size="estimateSize"
+          :keeps="200"
+          :extra-props="{
+            privList: msg_list,
+            privInfo:user_info_recv,
+            privMsgQuote:isShow_msgQuote,
+            privMsgInfo:msg_info,
+            privDelMsg:isShow_msg_delete,
+            privReadMsg:readDeleteMsg,
+            privInfoSend:user_info_send,
+            privUserInfo:userInfo
+          }"
+        >
+        </virtual-list>
+      </div>
+    </div>
+    <div v-show="initLoading && !isSdkErr" class="loading-wrap">
+      <van-loading type="spinner" size="30" />
+    </div>
+    <div
+      class="unread"
+      v-show="unReadCount && notScroll"
+      @click="scrollToUnread"
+    >
+      <img src="@/assets/img/msg_unread.svg" alt="" />
+      <div class="unread_num">{{ unReadCount }}</div>
+    </div>
+    <!--底部消息输入-->
+    <div class="privateChat_footer" ref="privateChat_footer">
+      <div class="container" v-if="!isShow_recorder && !showShareImg">
+        <van-field
+          rows="1"
+          :autosize="{ maxHeight: 160, minHeight: 30 }"
+          label=""
+          id="privateSendInput"
+          type="textarea"
+          ref="editorRef"
+          v-model.trim="msg_info.textElem.content"
+          :placeholder="pc_or_mobile_flag?'':`${windows_or_mac==1?$t('enterAndCtrl'):$t('enterAndCtrlIOS')}`" 
+          class="msg_txt"
+          :maxlength="
+            privateBurnStatus === 1
+              ? appConfig.burn_after_reading.private_chat.message_length
+              : 9999
+          "
+          @keydown="handle_send_message_keyDown"
+        >
+          <template #left-icon>
+            <div class="icon_recording" @click="recorder_open">
+              <img src="@/assets/img/msg_recording.svg" alt="" />
+            </div>
+          </template>
+        </van-field>
+        <div
+          v-if="showOpenPrivateBurn && showPrivateBurnTime > 0"
+          class="burn-time-wrap"
+        >
+          <img class="burn-img" src="@/assets/svg/incineration.svg" alt="" />
+          <div class="burn-time">{{ formatTime(showPrivateBurnTime) }}</div>
+        </div>
+        <van-icon name="smile-o" @click="handle_switch_emoji" />
+        <img
+          class="icon_send"
+          @click="handle_send_message(msg_info)"
+          :src="msg_Vector"
+          alt=""
+          v-if="msg_info.textElem.content.length"
+        />
+        <van-icon name="add-o" v-else @click="handle_switch_media" />
+      </div>
+      <!--录音-->
+      <div class="recorder" v-if="isShow_recorder && !showShareImg">
+        <img
+          src="@/assets/img/msg_delete_blue.svg"
+          alt=""
+          @click="recorder_delete"
+        />
+        <div ref="recorder_wave" class="recorder_wave"></div>
+        <img src="@/assets/img/msg_Vector.svg" alt="" @click="recorder_send" />
+      </div>
+
+      <emoji
+        @closeEmojiselect="hanldeEmojiselect"
+        :msg="msg_info"
+        v-if="isShow_emoji && !showShareImg"
+      ></emoji>
+      <MsgMedia
+        @closeActionBar="handleCloseActionBar"
+        v-if="isShow_media && !showShareImg"
+        @handle_send_message="handle_send_message_media"
+        @handle_send_file="handle_send_files"
+        :msg="msg_info"
+      >
+      </MsgMedia>
+      <!--消息-->
+      <div class="msgQuote" v-if="isShow_msgQuote.show">
+        <div class="left">
+          {{ msg_info.quoteElem.quoteMessage.senderNickname }}
+        </div>
+        <div><span>:</span></div>
+        <div class="center">
+          <span v-if="msg_info.quoteElem.quoteMessage.contentType === 101">
+            {{ msg_info.quoteElem.quoteMessage.textElem.content }}
+          </span>
+          <span v-if="msg_info.quoteElem.quoteMessage.contentType === 102">{{
+            $t("cvPicture")
+          }}</span>
+          <span v-if="msg_info.quoteElem.quoteMessage.contentType === 104">{{
+            $t("cvVideo")
+          }}</span>
+          <span v-if="msg_info.quoteElem.quoteMessage.contentType === 103">{{
+            $t("cvVoice")
+          }}</span>
+          <span v-if="msg_info.quoteElem.quoteMessage.contentType === 105"
+            >{{ $t("cvFile") }}
+            {{ msg_info.quoteElem.quoteMessage.fileElem.fileName }}</span
+          >
+        </div>
+        <div class="right">
+          <van-icon name="close" @click="handle_reset" />
+        </div>
+      </div>
+      <div v-if="showShareImg" class="forward">
+        <div class="share" @click="handleShare" v-if="isTransmitSend">
+          <img src="@/assets/svg/share.svg" alt="" />
+        </div>
+        <div class="delete" @click="handleDelete">
+          <img src="@/assets/svg/delete.svg" alt="" />
+        </div>
+      </div>
+    </div>
+    <!--删除消息提示-->
+    <AppPopup v-model:show="isShow_msg_delete.show">
+      <div class="popup_select">
+        <div class="popup_select_cell" @click="handle_delete_msg">
+          {{ $t("cvdeleteLocal") }}
+        </div>
+        <!-- 这个是判断自己发的消息就显示删除-->
+        <div
+          v-if="
+            isShow_msg_delete.sendID === userInfo.userID &&
+            isShow_msg_delete.status !== 3 &&
+            !privateChatConfig.showCheck
+          "
+          class="popup_select_cell"
+          @click="handle_delete_msg(false)"
+        >
+          {{
+            $t("cvdeleteLocalAndServerUser", { name: user_info_recv.nickname })
+          }}
+        </div>
+      </div>
+    </AppPopup>
+
+    <CommonPreview
+      v-model="showPreview"
+      :currentId="currentId"
+      :initialSwipe="currentSwipeIndex"
+      :images="previewArr"
+      :time="currentBurnTime"
+      @getList="closePreview"
+      @burnImageOrVideo="deleteBurn"
+      :currentType="currentPreviewType"
+      :isCurrentSend="currentPreviewSend"
+      previewType="private"
+    >
+    </CommonPreview>
+    <van-action-sheet
+      v-model:show="showFoward"
+      :actions="actionsFoward"
+      :cancel-text="$t('cancel')"
+      close-on-click-action
+      @cancel="handleCancel"
+      @select="selectFoward"
+    />
+    <van-dialog className="custom-dialog" v-model:show="fowardVisible" title="">
+      <template #default>
+        <div class="content">
+          <div class="title">{{ "隐藏消息" }}</div>
+          <div class="contents">{{ "是否隐藏消息来源?" }}</div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button class="btn" type="default" @click="handleConfirm('no')">{{
+            "否"
+          }}</van-button>
+          <div class="line"></div>
+          <van-button
+            class="btn btn1"
+            type="default"
+            @click="handleConfirm('yes')"
+            >{{ "是" }}</van-button
+          >
+        </div>
+      </template>
+    </van-dialog>
+    <!-- 添加好友未达条件弹窗 -->
+    <TipDialog v-model="showCenter" :resultMsg="resultMsg"></TipDialog>
+    <router-view></router-view>
+  </div>
+  <!-- 毛玻璃层 -->
+  <!-- <div v-if="showPopover" class="backdrop"></div> -->
+</template>
+
+<style lang="less" scoped>
+// 导入公共样式文件
+@import '@/style/common-styles.less';
+.virtual-list {
+  max-height: 86vh;
+  overflow-y: auto; /* 启用垂直滚动 */
+  // scrollbar-width: none;  // Firefox 隐藏滚动条
+  // -ms-overflow-style: none; // IE 隐藏滚动条
+  -webkit-overflow-scrolling: touch;
+}
+// * {
+//   -webkit-touch-callout: none;
+//   /*系统默认菜单被禁用*/
+//   -webkit-user-select: none;
+//   /*webkit浏览器*/
+//   -khtml-user-select: none;
+//   /*早起浏览器*/
+//   -moz-user-select: none;
+//   /*火狐浏览器*/
+//   -ms-user-select: none;
+//   /*IE浏览器*/
+//   user-select: none;
+//   /*用户是否能够选中文本*/
+// }
+.loading-wrap {
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+  // height: 100%;
+  position: absolute;
+  top: 50%;
+  left: calc(50% - 20px);
+  .msg {
+    position: absolute;
+    width: 200px;
+    left: calc(-80px);
+    top: 15px;
+    color: #1b1b22b3;
+  }
+}
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  letter-spacing: 0.5em;
+  backdrop-filter: blur(20px);
+  z-index: 9;
+}
+
+.privateChat {
+  background: rgba(248, 248, 251, 1);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &.useUserAppearance {
+    &::before {
+      background-image: var(--preview-bg, none);
+      background-size: contain;
+      background-repeat: repeat;
+      width: 100%;
+      height: 100%;
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      filter: var(--preview-bg-alpha);
+    }
+  }
+
+  .popup_select {
+    display: flex;
+    flex-direction: column;
+    background: white;
+
+    &_cell {
+      height: 60px;
+    }
+
+    &_cell:nth-child(2) {
+      color: red;
+    }
+  }
+
+  .chatBox {
+    // padding: 56px 0 0 0;
+    // width: 100%;
+    // height: calc(100vh - 56px);
+    flex: 1;
+
+    .chatBox_content {
+      height: 100%;
+      padding: 0 12px;
+      // overflow-y: auto; // 注释滚动条
+      // scroll-behavior: smooth;
+      // padding-bottom: 60px;
+    }
+  }
+  .FileTopping {
+    display: flex;
+    align-items: center;
+    .file-cancel-button {
+      margin-right: 5px;
+    }
+    .FileStyleBox {
+      min-width: 235px;
+      height: 60px;
+      border-radius: 12px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+      justify-content: space-between;
+      .file-left {
+        flex: 1;
+        color: #000;
+        .file-name {
+          font-family: PingFang SC;
+          font-weight: 400;
+          display: inline-block;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 130px;
+          white-space: nowrap;
+        }
+        .file-schedule {
+          margin-top: 5px;
+          display: flex;
+          align-items: center;
+          color: #ccc;
+          font-size: 0.6875rem;
+        }
+      }
+      .file-right {
+        .file-img {
+          width: 55px;
+          height: 55px;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+
+  .privateChat_body {
+    & .cell {
+      display: flex;
+      // margin: 15px 0;
+      padding:15px 0;
+      color: white;
+      font-size: 1rem;
+      font-weight: 400;
+      width: 100%;
+      position: relative;
+      flex-direction: column;
+
+      &.hide {
+        display: none;
+      }
+
+      .withdraw {
+        color: rgba(27, 27, 34, 0.4);
+        font-size: 0.625rem;
+        text-align: center;
+
+        .active-add {
+          color: rgba(0, 149, 246, 1);
+          cursor: pointer;
+        }
+      }
+
+      .FriendNotifications {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        color: black;
+        font-size: 0.75rem;
+        .inform-tips{
+          background: rgba(228, 240, 251, 1);
+          color: rgba(0, 149, 246, 1);
+          border-radius: 37px;
+          padding: 10px 16px;
+        }
+        .become-friend-tips {
+          color: rgba(27, 27, 34, 0.4);
+          padding-top: 18px;
+          font-size: 0.625rem;
+        }
+      }
+
+      .video {
+        max-width: 200px;
+        max-height: 160px;
+      }
+
+      .quoteElem {
+        background: rgba(0, 0, 0, 0.03);
+        margin: 4px 0;
+        border-radius: 10px;
+        max-width: 255px;
+        padding: 8px 12px;
+        color: rgba(118, 118, 122, 1);
+        font-size: 0.75rem;
+
+        & > span {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: ellipsis;
+        }
+
+        .quoteElem_recorder {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          & > span:nth-child(1) {
+            margin-right: 10px;
+          }
+        }
+        .quoteElem_file {
+          max-width: max-content;
+          .quoteElem-message {
+            display: flex;
+            align-items: center;
+            .quoteElem-name {
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-line-clamp: 2; /* 控制显示的行数 */
+              max-height: 3.6em; /* 控制最大高度，2行文本的高度是1.8em，这里设置成2行文本的两倍 */
+            }
+          }
+          .recorder-img {
+            width: 14px;
+            height: 14px;
+            vertical-align: middle;
+          }
+        }
+      }
+
+      .quoteElem_left {
+        align-self: flex-start;
+
+        .content_image,
+        .content_video {
+          display: flex;
+          position: relative;
+
+          > div {
+            margin-right: 10px;
+            max-width: 100px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          video {
+            position: relative;
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            object-fit: contain;
+            object-position: center;
+          }
+
+          :deep(.van-image) {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+
+            .van-image__img {
+              border-radius: 3px;
+            }
+          }
+
+          .video_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            top: calc(50% - 8px);
+            right: 8px;
+            margin-right: 0;
+
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+
+      .quoteElem_right {
+        align-self: flex-end;
+
+        .content_image,
+        .content_video {
+          display: flex;
+          position: relative;
+
+          > div {
+            margin-right: 10px;
+            max-width: 100px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          video {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+            object-fit: contain;
+            object-position: center;
+          }
+
+          :deep(.van-image) {
+            width: 30px;
+            height: 30px;
+            border-radius: 3px;
+
+            .van-image__img {
+              border-radius: 3px;
+            }
+          }
+
+          .video_icon {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            top: calc(50% - 8px);
+            right: 8px;
+            margin-right: 0;
+
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+
+      .cell_state {
+        font-size: 0.625rem;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        &_read {
+          color: rgba(0, 149, 246, 1);
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+
+        &_unread {
+          color: rgba(27, 27, 34, 0.4);
+        }
+      }
+
+      .cell_right {
+        align-self: end;
+        max-width: 80%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        width: fit-content;
+        position: relative;
+
+        :deep(.van-popover__wrapper) {
+          width: 100%;
+        }
+
+        &_loading {
+          color: black;
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+          left: -24px;
+        }
+
+        &_failed {
+          width: 20px;
+          height: 20px;
+        }
+        // .cdn-source-wrapper{
+          :deep(.van-image__img) {
+            border-radius: 10px;
+          }
+        // }
+
+        .video {
+          border-radius: 10px;
+          position: relative;
+        }
+
+        .video_icon {
+          position: absolute;
+          // top: calc(50% - 16px);
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      // 如果为普通消息则添加其背景
+      .cell_right.isCommonMsgBg {
+        background: rgba(0, 149, 246, 1);
+        border-radius: 10px 10px 0;
+      }
+      .cell_left {
+        position: relative;
+        align-self: start;
+        background: white;
+        color: rgba(27, 27, 34, 1);
+        border-radius: 0 10px 10px 10px;
+        max-width: 80%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        .cdn-source-wrapper{
+          :deep(.van-image__img) {
+            border-radius: 10px;
+          }
+        }
+        .video {
+          border-radius: 10px;
+        }
+        .video_icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      .active_cell {
+        background: transparent;
+        :deep(.popover) {
+          padding: 0;
+        }
+      }
+    }
+    & .special-cell {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .privateChat_footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 8px 12px;
+    width: 100%;
+    background: white;
+    display: flex;
+    font-weight: 500;
+    font-size: 1.625rem;
+    flex-direction: column;
+    .choose_color {
+      color: var(--van-blue);
+    }
+    .container {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+    }
+    .recorder {
+      display: flex;
+      justify-content: space-between;
+      color: var(--van-blue);
+      align-items: center;
+      border-radius: 10px;
+      background: rgba(235, 247, 254, 1);
+      padding: 4px 10px;
+      .recorder_wave {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+      }
+    }
+    .van-icon {
+      padding: 0 0 5px 12px;
+    }
+    .icon_recording {
+      align-items: flex-end;
+      display: flex;
+      height: 100%;
+
+      & > img {
+        width: 30px;
+        height: 30px;
+        padding: 2px;
+      }
+    }
+
+    .icon_send {
+      width: 22px;
+      height: 22px;
+      margin: 0 0 8px 12px;
+    }
+
+    .msg_txt {
+      background: rgba(245, 246, 250, 1);
+      border-radius: 10px;
+      padding: 4px;
+      font-size: 1rem;
+      line-height: 30px;
+    }
+
+    .msgQuote {
+      position: absolute;
+      top: -33px;
+      left: 0;
+      background: white;
+      height: 33px;
+      width: 100%;
+      border-bottom: 1px solid rgba(242, 244, 245, 1);
+      display: flex;
+      font-size: 0.75rem;
+      color: rgba(118, 118, 122, 1);
+      padding: 8px 12px;
+      align-items: center;
+
+      & > .left {
+        // margin-right: 5px;
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      & > .center {
+        flex: 1;
+        max-width: 200px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-left: 5px;
+      }
+
+      & > .right {
+        position: absolute;
+        top: 0;
+        right: 12px;
+        bottom: 0;
+        margin: auto;
+        font-size: 1.125rem;
+        height: 18px;
+      }
+
+      .van-icon {
+        padding: 0 !important;
+      }
+    }
+  }
+}
+
+.message_img {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+:deep(.message_img.burn-img) {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.video {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.select-item {
+  width: 16px;
+  margin-right: 12px;
+
+  .check-box {
+    width: 16px;
+    height: 16px;
+    border: 1px solid #d1d1d3;
+    border-radius: 50%;
+
+    &.checked {
+      border-color: var(--c-blue-color);
+      background: var(--c-blue-color) url(@/assets/group-check.svg) no-repeat
+        center / cover;
+    }
+  }
+}
+.private-chat-time {
+  text-align: center;
+  color: #76767a;
+  font-size: 0.75rem;
+  // margin: 2px 0;
+  height: 24px;
+}
+
+.forward {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .share {
+    margin-right: 80px;
+    cursor: pointer;
+  }
+
+  .delete {
+    cursor: pointer;
+  }
+}
+
+.custom-dialog {
+  .van-dialog__content {
+    padding: 0;
+
+    .content {
+      margin-top: 24px;
+      text-align: center;
+      font-family: PingFang SC;
+      border-bottom: 0.5px solid #f2f4f5;
+
+      .title {
+        color: #1b1b22;
+        margin-bottom: 16px;
+        font-size: 1rem;
+        font-weight: 600;
+      }
+
+      .contents {
+        color: #76767a;
+        font-size: 0.875rem;
+        margin-bottom: 22px;
+      }
+    }
+  }
+
+  .dialog-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    padding: 11px 0;
+  }
+
+  .btn {
+    color: #1b1b22 !important;
+    text-align: center;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 500;
+    background: #fff !important;
+    border-color: #fff !important;
+    width: 50%;
+  }
+
+  .line {
+    width: 1px;
+    height: 44px;
+    background: #f5f8ff;
+  }
+
+  .btn1 {
+    color: #0095f6 !important;
+  }
+}
+
+.special-forward {
+  background: #ffffff;
+  padding: 10px 12px 14px 12px;
+  border-radius: 10px 0px 10px 10px;
+
+  &-top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+
+    .title {
+      font-size: 1rem;
+      color: #1b1b22;
+    }
+
+    .count {
+      background-color: #f8f8fb;
+      font-size: 0.75rem;
+      color: #1b1b2299;
+      border-radius: 17px;
+      padding: 2px 8px;
+    }
+  }
+
+  &-bottom {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #76767a;
+    font-size: 0.875rem;
+    max-width: 250px;
+  }
+}
+
+.special-forwards {
+  padding: 10px 12px 14px 12px;
+}
+
+.spcial-cell_right {
+  background: transparent !important;
+}
+.text-bilder-type {
+  // max-width: 272px;
+  max-width: 265px;
+  h4 {
+    color: rgba(27, 27, 34, 1);
+    font-weight: 600;
+    font-size:  0.875rem;
+  }
+  .linked-content {
+    background-color: rgba(246, 246, 246, 1);
+    border-radius: 8px;
+    padding: 10px 8px;
+    color: rgba(83, 143, 225, 1);
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    .interlink-text {
+      .public-text-overflow-2-lines;
+      padding-right: 10px;
+    }
+  }
+}
+// 文字超出换行展示
+.text-content {
+  .public-wrap-text;
+}
+.incineration-svg {
+  position: absolute;
+  left: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  .incineration-time {
+    font-size: 0.75rem;
+    color: #ff5017;
+  }
+}
+.incineration-right {
+  left: auto;
+  text-align: end;
+  right: 0;
+  white-space: nowrap;
+  transform: translate(100%, -50%);
+}
+.relative_box {
+  position: relative;
+}
+.incineration-pic {
+  width: 200px;
+  height: 160px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #7b8fa7cc;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+  .message_img {
+    border: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.incineration-video {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #7b8fa7cc;
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  overflow: hidden;
+  .message_img {
+    border: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+.burn-time-wrap {
+  text-align: center;
+  margin-left: 10px;
+  max-width: 50px;
+  .burn-img {
+    width: 20px;
+    height: 20px;
+  }
+  .burn-time {
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 50px;
+  }
+}
+.img-download {
+  position: absolute;
+  right: 20px;
+  bottom: 30px;
+  z-index: 1086;
+
+  :deep(.van-button--default) {
+    background: #ffffff21;
+    color: white;
+    border-color: #ffffff21;
+  }
+}
+
+.unread {
+  position: absolute;
+  bottom: 55px;
+  right: 16px;
+
+  & > img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .unread_num {
+    background: white;
+    position: absolute;
+    top: -2px;
+    right: -5px;
+    width: 20px;
+    font-size: 0.75rem;
+    height: 15px;
+    text-align: center;
+    border-radius: 10px;
+  }
+}
+</style>
diff --git a/src/views/dialogue/privateChat/privateChat.js b/src/views/dialogue/privateChat/privateChat.js
new file mode 100644
index 0000000..b295957
--- /dev/null
+++ b/src/views/dialogue/privateChat/privateChat.js
@@ -0,0 +1,164 @@
+import { ref, reactive } from 'vue';
+import { getSDK } from "@/utils/openIM";
+const OpenIM = getSDK();
+class BurnMsg {
+  constructor(readDeleteTime = 0) {
+    this.readDeleteTime = readDeleteTime;
+  }
+
+  static fromJson(json) {
+    const readDeleteTime = json['read_delete_time'] ?? 0;
+    return new BurnMsg(readDeleteTime);
+  }
+
+  toJson() {
+    const data = {};
+    data['read_delete_time'] = this.readDeleteTime;
+    return data;
+  }
+}
+class ExElem {
+  constructor() {
+    this.burnMsg = null;
+  }
+
+  static fromJson(json) {
+    const exElem = new ExElem();
+    exElem.burnMsg = json['burn_msg'] !== null ? BurnMsg.fromJson(json['burn_msg']) : null;
+    return exElem;
+  }
+
+  toJson() {
+    const data = {};
+    data['burn_msg'] = this.burnMsg !== null ? this.burnMsg.toJson() : null;
+    return data;
+  }
+}
+
+class LocalExElem {
+  constructor() {
+    this.status = null;
+    this.playState = null;
+    this.surplusRDTime = null;
+  }
+
+  static fromJson(json) {
+    const localExElem = new LocalExElem();
+    localExElem.status = json['status'];
+    localExElem.playState = json['playState'];
+    localExElem.surplusRDTime = json['surplusRDTime'];
+    return localExElem;
+  }
+
+  toJson() {
+    const data = {};
+    data['status'] = this.status;
+    data['playState'] = this.playState;
+    data['surplusRDTime'] = this.surplusRDTime;
+    return data;
+  }
+}
+
+
+export class MessageExData {
+  constructor(message) {
+    this.message = message;
+    this.exElem = null;
+    this.localExElem = null;
+    this.delete = false;
+    this.remainTime = 0;
+
+    console.log("new==>" + message.ex + "," + message.localEx);
+
+    if (message.localEx === "delete") {
+      this.delete = true;
+      return;
+    }
+
+    if (message.ex !== null && message.ex !== "") {
+      try {
+        this.exElem = ExElem.fromJson(JSON.parse(message.ex));
+      } catch (e) {}
+    }
+
+    if (message.localEx !== null && message.localEx !== "") {
+      try {
+        if (message.localEx === "delete") {
+          this.delete = true;
+        } else {
+          this.localExElem = LocalExElem.fromJson(JSON.parse(message.localEx));
+        }
+      } catch (e) {}
+    }
+
+    this.exElem = this.exElem || new ExElem();
+    this.localExElem = this.localExElem || new LocalExElem();
+
+    if (this.delete) {
+      this.remainTime = 0;
+    } else {
+      this.remainTime = this.localExElem.surplusRDTime || this.exElem.burnMsg?.readDeleteTime || 0;
+    }
+
+    console.log("new==>remainTime=" + this.remainTime);
+  }
+  //标记这个消息删除
+  setDelete() {
+    this.delete = true;
+  }
+  //语音消息-视频消息-文本消息-设置加载、播放完毕
+  setPlayCompleted() {
+    this.localExElem.playState = "1";
+  }
+  //语音消息-视频消息-文本消息返回
+  isPlayCompleted() {
+    return this.localExElem.playState === "1";
+  }
+  //设置阅读时间
+  setReadDeleteTime(seconds) {
+    if (!this.exElem.burnMsg) {
+      this.exElem.burnMsg = new BurnMsg(seconds);
+    } else {
+      this.exElem.burnMsg.readDeleteTime = seconds;
+    }
+  }
+  //设置剩余阅读时间
+  saveSurplusReadDeleteTime(seconds) {
+    if (this.delete) return;
+    this.localExElem.surplusRDTime = seconds;
+  }
+
+  getLocalExStr() {
+    return JSON.stringify(this.localExElem.toJson());
+  }
+
+  downTime() {
+    this.remainTime--;
+    console.log("downTime:" + this.remainTime);
+    return this.remainTime;
+  }
+
+  pause(conversationID) {
+    if (this.remainTime > 0) {
+      this.saveSurplusReadDeleteTime(this.remainTime);
+    } else {
+      this.setDelete();
+    }
+    this.saveLocalExToDB(conversationID);
+  }
+
+  saveLocalExToDB(conversationID) {
+    if (this.delete) {
+      this.message.localEx = "delete";
+    } else {
+      this.message.localEx = JSON.stringify(this.localExElem.toJson());
+    }
+    try {
+      OpenIM.iMManager.messageManager.setMessageLocalEx(
+        conversationID,
+        this.message.clientMsgID,
+        this.message.localEx || ""
+      );
+    } catch (e) {}
+  }
+}
diff --git a/src/views/dialogue/useHistoryMessageList.js b/src/views/dialogue/useHistoryMessageList.js
new file mode 100644
index 0000000..bbf2522
--- /dev/null
+++ b/src/views/dialogue/useHistoryMessageList.js
@@ -0,0 +1,245 @@
+import { useMessageStore } from "@/stores/modules/message";
+import { storeToRefs } from 'pinia'
+import emitter from "@/utils/events";
+import { useThrottleFn } from "@vueuse/core";
+import { useUserStore } from "@/stores/user.js";
+import { useContactStore } from "@/stores/contact";
+import { computed, ref, reactive, watch, onMounted, onUnmounted } from "vue";
+
+export default function useHistoryMessageList({
+  cancelMultiple = () => {}
+}) {
+  const userStore = useUserStore();
+  const contactStore = useContactStore();
+  const { groupId} = storeToRefs(contactStore);
+  const { userInfo, groupChatList, groupChatConfig  } = storeToRefs(userStore);
+  const messageStore = useMessageStore();
+  const { getHistoryMessageListFromReq, resetHistoryMessageList } = messageStore;
+  const { storeHistoryMessageList, storeHistoryMessageHasMore  } = storeToRefs(messageStore);
+  const vsl = ref();
+  const overflow = ref(false);
+  const isFirstPage = ref(true);
+  const loadState = reactive({
+    loading: false,
+    lastMinSeq: 0,
+  });
+  const initLoading = ref(false);
+  const notScroll = ref(false);
+
+  const unReadCount = computed(
+    () => storeHistoryMessageList.value.filter(
+      (message) => message.isAppend === true
+    ).length
+  );
+
+  const onScoll = useThrottleFn(() => {
+    if(!vsl.value)return 
+    const scrollVal = vsl.value.getScrollSize() - vsl.value.getOffset() > vsl.value.getClientSize() * 1.3;
+    notScroll.value = scrollVal
+  }, 500);
+
+  const setAllReadedAndScrollToBottom = () => {
+    const msgIds = []
+    storeHistoryMessageList.value.forEach(message => {
+      if (message.isAppend) {
+        msgIds.push(message.clientMsgID)
+        message.isAppend = false
+      }
+    })
+
+    setVirtualListToBottom()
+    return msgIds
+  }
+
+  const getScrollPosition = () => {
+    if(!vsl.value)return false
+    const scrollVal = vsl.value.getScrollSize() - vsl.value.getOffset() > vsl.value.getClientSize() * 1.3;
+    return scrollVal
+  }
+
+  const onTotop = async () => {
+    if (storeHistoryMessageHasMore && !loadState.loading) {
+      const { messageIDList } = await getMessageData();
+      await nextTick();
+      getOffset(messageIDList);
+    }
+  };
+
+  const getMessageData = async () => {
+    const hrefUrl = window.location.href.split('/')
+    loadState.loading = true;
+    //存在一个问题groupChatConfig或者groupId.value取不到值,或者取的值是上一个群聊里面的id值   
+    const data = await getHistoryMessageListFromReq({
+      // conversationID:groupChatConfig.value.conversationID,
+      conversationID:'sg_'+hrefUrl[hrefUrl.length-1],//groupChatConfig.value.conversationID,   
+      userID: "",
+      // groupID:groupId.value,
+      groupID:hrefUrl[hrefUrl.length-1],
+      count: 30,
+      startClientMsgID:
+      storeHistoryMessageList.value[0]?.clientMsgID || "",
+      lastMinSeq: isFirstPage.value ? 0 : loadState.lastMinSeq,
+    });
+    if (data.lastMinSeq) {
+      loadState.lastMinSeq = data.lastMinSeq;
+    }
+    return data;
+  };
+
+  const onItemRendered = () => {
+    if (!vsl.value || !isFirstPage.value) {
+      return;
+    }
+    const els = Array.from(document.querySelectorAll(".need_preload_message"));
+    const idx = els.findIndex((el) => el.clientHeight < 2);
+
+    if (idx === -1) {
+      // first page items are all mounted, scroll to bottom
+      setTimeout(() => {
+        setVirtualListToBottom();
+        initLoading.value = false;
+        loadState.loading = false;
+      });
+      isFirstPage.value = false;
+      checkOverFlow();
+    }
+  };
+
+  const getOffset = (clientMsgIDList) => {
+    const offset = clientMsgIDList.reduce((previousValue, currentSid) => {
+      const previousSize =
+        typeof previousValue === "string" && previousValue !== 0
+          ? vsl.value.getSize(previousValue)
+          : previousValue;
+      return previousSize + vsl.value.getSize(currentSid);
+    }, 0);
+    setVirtualListToOffset(Number(offset));
+  };
+
+  const setVirtualListToOffset = (offset) => {
+    if (vsl.value) {
+      vsl.value.scrollToOffset(offset);
+      nextTick(() => (loadState.loading = false));
+    }
+  };
+
+  const checkOverFlow = () => {
+    if (vsl.value) {
+      overflow.value = vsl.value.getScrollSize() > vsl.value.getClientSize();
+    }
+  };
+
+  const setVirtualListToBottom = (isAppend) => {
+    if (isAppend && notScroll.value) {
+      return;
+    }
+    if (vsl.value) {
+      nextTick(() => vsl.value.scrollToBottom());
+    }
+  };
+
+  const setVirtualListToIndex = (idx) => {
+    if (vsl.value) {
+      vsl.value.scrollToIndex(idx);
+    }
+  };
+
+  const scroll2ClientMsgID = (clientMsgID) => {
+    const idx = storeHistoryMessageList.value.findIndex(
+      (message) => message.clientMsgID === clientMsgID
+    );
+    if (idx > -1) {
+      storeHistoryMessageList.value[idx].jump = true;
+      setTimeout(() => {
+        storeHistoryMessageList.value[idx].jump = false;
+      }, 3000);
+      setVirtualListToIndex(idx);
+    }
+  };
+
+  const scrollToUnread = () => {
+    const idx = storeHistoryMessageList.value.findIndex(
+      (message) => message.isAppend === true && !message.isRead
+    );
+    console.log(idx);
+
+    if (idx > -1) {
+      setVirtualListToIndex(idx);
+    }
+  };
+  
+  /**
+   * 获取群聊记录数据
+   * @returns 
+   */
+  const getGroupChatList = () =>{
+    return storeHistoryMessageList.value || []
+  };
+  // events
+  const setEventListener = () => {
+    emitter.on("CHAT_MAIN_SCROLL_TO_BOTTOM", setVirtualListToBottom);
+    emitter.on("CHAT_MAIN_SCROLL_TO_CLIENTMSGID", scroll2ClientMsgID);
+  };
+
+  const disposeEvemtListener = () => {
+    emitter.off("CHAT_MAIN_SCROLL_TO_BOTTOM", setVirtualListToBottom);
+    emitter.off("CHAT_MAIN_SCROLL_TO_CLIENTMSGID", scroll2ClientMsgID);
+  };
+  onMounted(() => {
+    setEventListener();
+  });
+  onUnmounted(() => {
+    disposeEvemtListener();
+  });
+
+  watch(
+    () => groupChatConfig.value.conversationID,
+    async (newVal) => {
+      if (newVal) {
+        cancelMultiple();
+        isFirstPage.value = true;
+        resetHistoryMessageList();
+        initLoading.value = true;
+        // const { messageIDList } = await getMessageData();
+        // if (messageIDList.length === 0) {
+        //   isFirstPage.value = false;
+        //   initLoading.value = false;
+        //   loadState.loading = false;
+        // }
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+  const getChatList_kds = async () =>{
+    cancelMultiple();
+    isFirstPage.value = true;
+    resetHistoryMessageList();
+    initLoading.value = true;
+    const { messageIDList } = await getMessageData();
+    if (messageIDList.length === 0) {
+      isFirstPage.value = false;
+      initLoading.value = false;
+      loadState.loading = false;
+    }
+  }
+  return {
+    vsl,
+    overflow,
+    initLoading,
+    loadState,
+    notScroll,
+    unReadCount,
+    setAllReadedAndScrollToBottom,
+    onTotop,
+    onItemRendered,
+    onScoll,
+    getScrollPosition,
+    scrollToUnread,
+    scroll2ClientMsgID,
+    getMessageData,
+    getGroupChatList,
+    getChatList_kds
+  };
+}
diff --git a/src/views/index.vue b/src/views/index.vue
new file mode 100644
index 0000000..c5d638f
--- /dev/null
+++ b/src/views/index.vue
@@ -0,0 +1,784 @@
+<script setup>
+import { ref, onMounted, watch, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useGrade } from "@/utils/levelConfig";
+import logo from "@/assets/svg/logo.svg";
+import logoActive from "@/assets/svg/logo-active.svg";
+import mine from "@/assets/svg/mine.svg";
+import mineActive from "@/assets/svg/mine-active.svg";
+import contact from "@/assets/svg/contact.svg";
+import contactActive from "@/assets/svg/contact-active.svg";
+import community from "@/assets/svg/community.svg";
+import communityActive from "@/assets/svg/community-active.svg";
+import { useRoute, useRouter } from "vue-router";
+import { CbEvents } from "@/utils/openIM/constant";
+import { IMSDK } from "@/utils/imCommon";
+import { setGlobalProperty, clearGlobalProperty } from "@/utils";
+import { useContactStore } from "@/stores/contact";
+import { useUserStore } from "@/stores/user";
+import useConversationStore from "@/stores/modules/conversation";
+import NoticeLogo from "@/assets/notice-logo.png";
+import { getChatTimeline, getAtNickname } from "@/utils/tools";
+import { useI18n } from "vue-i18n";
+import defaultEmpty from '@/assets/default_empty.svg'
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const home = ref("");
+const $api = inject("$api");
+const showDot = ref(0);
+useGrade(home, 1);
+const route = useRoute();
+const router = useRouter();
+const active = ref(history.state.activeIndex);
+const contactStore = useContactStore();
+const {
+  hasNewFriendApply,
+  newFriendApplyCount,
+  contactList,
+  chatList,
+} = storeToRefs(contactStore);
+const userStore = useUserStore();
+const {
+  userInfo,
+  appConfig,
+  groupChatConfigs,
+  privateChatConfigs,
+  friendApplication
+} = storeToRefs(userStore);
+const {
+  setUserBgSettings,
+  setAppConfig,
+  setGroupChatConfig,
+  setPrivateChatConfig,
+  setGroupChatConfigs,
+  setPrivateChatConfigs,
+  setFriendApplication
+} = userStore;
+const { setIsGroupSend } = contactStore
+const conversationStore = useConversationStore();
+
+onMounted(async () => {
+  if (!showMsgRid.value) {
+    // webPushInit();
+  }
+  if (route.fullPath.startsWith("/home/dialogue")) {
+    active.value = 0;
+  } else if (route.fullPath.startsWith("/home/contact")) {
+    active.value = 1;
+  } else if (route.fullPath.startsWith("/home/community")) {
+    active.value = 2;
+  }else if (route.fullPath.startsWith("/home/my")) {
+    active.value = 3;
+  }
+  getApprearanceConfig();
+  getAppConfig();
+  getGlobalFont();
+});
+
+watch(
+  () => route.fullPath,
+  val => {
+    if (route.fullPath.startsWith("/home/dialogue")) {
+      active.value = 0;
+    } else if (route.fullPath.startsWith("/home/contact")) {
+      showDot.value = 0;
+      active.value = 1;
+    } else if (route.fullPath.startsWith("/home/community")) {
+      active.value = 2;
+    } else if (route.fullPath.startsWith("/home/my")) {
+      active.value = 3;
+    }
+  }
+);
+
+const friendApplicationProcessedHandler = ({ data }) => {
+  showDot.value = 1;
+};
+// IMSDK.on(CbEvents.OnFriendApplicationAdded, friendApplicationProcessedHandler);
+// IMSDK.on(CbEvents.OnFriendApplicationAccepted, friendApplicationProcessedHandler);
+// IMSDK.on(CbEvents.OnFriendApplicationRejected, friendApplicationProcessedHandler);
+
+// 全局获取用户配置
+const getApprearanceConfig = async () => {
+  const res = await $api.setting.getUserBgSettings({
+    background_type: 1,
+    userID: localStorage.getItem("user_id")
+  });
+  if (res.code !== 0 || res.data.userID === "") {
+    clearGlobalProperty();
+    return;
+  }
+  setUserBgSettings(res.data);
+  if (res.data.image && res.data.image.imagePath) {
+    const { imagePath, alpha } = res.data.image;
+    setGlobalProperty(imagePath, alpha);
+  }
+};
+// 全局获取用户字体大小
+const getGlobalFont = async () => {
+  // 从会话中获取全局文字大小
+  let fontSize = friendState.fontSize || 16
+  const html = document.querySelector("html");
+  // 动态设置根元素的字体大小
+  html.style.fontSize = `${fontSize}px`;
+};
+
+const getAppConfig = async () => {
+  const configRes = await $api.login.getConfigInfo();
+  const groupRes = await $api.login.getGroupSettings();
+  if (configRes.code != 0) return;
+  setAppConfig({
+    ...appConfig.value,
+    ...configRes.data,
+    ...groupRes.data
+  });
+  setIsGroupSend(appConfig.value,userInfo.value) // 设置群发消息入口
+};
+const showMsgContent = ref("");
+const showMsgRid = ref("");
+const pwaVisible = ref(false);
+const pwaTime = ref("");
+// 推送初始话
+const webPushInit = () => {
+  MTpushInterface.init({
+    // 测试只需要修改以下两个参数
+    appkey: "39e134a9588a74496085960f", //appkey信息 测试用
+    user_str: userInfo.value.userID, //用户标识 测试用
+    is_temporary: "n",
+    fail(err) {
+      console.log("在线推送创建失败", err);
+    },
+    success(data) {
+      onEvent();
+      console.log("在线推送创建成功", data);
+    },
+    webPushcallback(code, tip) {
+      console.log("用户得到的状态码及提示", code, tip);
+    },
+    swUrl: "sw.produce.min.2.1.6", //默认 "/sw_xs.min." + sdkEnv.version + ".js"
+    canGetInfo(data) {
+      //此时可以得到通知的一些配置数据，在此回调函数之后可以得到RegId
+      console.log(data); //相关配置信息
+      showMsgRid.value = MTpushInterface.getRegistrationID();
+    },
+    custom: res => {
+      //当使用自定义提示配置时，需手动调用fuc()来请求通知权限。只能通过custom得到请求通知权限函数。
+      //fuc() 调用时会请求通知权限
+      // document.getElementById("applyNoti")?.addEventListener("click", res);
+      console.log("申请通知权限：" + res);
+    }
+  });
+};
+const onEvent = () => {
+  // 极光通道断开连接时的回调
+  MTpushInterface.mtPush.onDisconnect(function() {
+    console.log("onDisconnect");
+  });
+  //得到推送消息(web推送，浏览器厂商通道)
+  MTpushInterface.onMsgReceive(msgData => {
+    //msgData数据结构{data:{xxx},type:0} type:0是极光通道，1是系统通道
+    console.log("得到推送消息:", msgData);
+    showMsgContent.value = msgData["data"]["messages"][0]["content"];
+    showMsgTitle.value = msgData["data"]["messages"][0]["title"];
+    pwaVisible.value = true;
+    // if (msgData["type"] == 1) {
+    //   if (msgData["data"]["data"]["ntf_or_msg"] != 1) {
+    //     MTpushInterface.customClickReport(msgData["data"]["tag"], "W3Push");
+    //   }
+    // }
+    // if (msgData["type"] == 0) {
+    //   if (msgData["data"]["messages"][0]["ntf_or_msg"] != 1) {
+    //     MTpushInterface.customClickReport(msgData["data"]["messages"][0]["msg_id"]);
+    //   }
+    // }
+  });
+};
+
+const openAddFlow = () => {
+  pwaVisible.value = false;
+};
+// const pwaContent = ref("您有新的朋友，点击查看");
+const pwaContent = ref(t('newFriendApply'));
+const pwaNickname = ref("");
+const pwaTitle = ref("球帝带群聊");
+const pwaUrl = ref("");
+const showRecvMsgOpt = ref(true);
+watch(
+  () => hasNewFriendApply.value,
+  () => {
+    if (hasNewFriendApply.value) {
+      console.log('hasNewFriendApply',hasNewFriendApply.value,'-----------------------------');
+      pwaVisible.value = true;
+      setTimeout(() => {
+        pwaVisible.value = false;
+      }, 5000);
+    }
+  }
+);
+// 哪些消息可以提示
+const ringTipMsgList = [
+  101, // 普通文本
+  102, // 图片
+  103, // 语音
+  104, // 视频
+  105, // 文件
+  106, // @消息
+  107, // 合并
+  108, // 名片
+  110, // 自定义消息-只允许红包消息显示
+  114 // 引用回复
+];
+const transformByType = val => {
+  let content = "";
+  const { contentType, textElem, customElem, atTextElem, quoteElem } = val;
+  switch (contentType) {
+    // 普通文本
+    case 101:
+      content = textElem?.content?.trim();
+      break;
+    // 图片
+    case 102:
+      content = `[${t("picture")}]`;
+      break;
+    // 语音
+    case 103:
+      content = `[${t("voice")}]`;
+      break;
+    // 视频
+    case 104:
+      content = `[${t("video")}]`;
+      break;
+    // 文件
+    case 105:
+      content = `[${t("file")}]`;
+      break;
+    // @消息
+    case 106:
+      content = atTextElem?.text?.trim() ?? "";
+      if (content) {
+        let list = atTextElem?.atUsersInfo;
+        list.forEach(item => {
+          content = content?.replaceAll(
+            `@${item.atUserID}`,
+            `@${getAtNickname(item.atUserID, item.groupNickname)}`
+          );
+        });
+      }
+      break;
+    // 自定义
+    case 110:
+      const cusData = JSON.parse(customElem?.data);
+      const remark = cusData?.data.remark || "";
+      content = remark
+        ? `[${t("envelope")}]${remark}`
+        : `[${t("envelope")}]${t("dajidali")}`;
+      break;
+    // 引用
+    case 114:
+      content = quoteElem?.text?.trim();
+      break;
+  }
+  return content;
+};
+const transformData = () => {
+  if (Object.keys(groupChatConfigs.value).length > 0) {
+    const { msg, group } = groupChatConfigs.value;
+    pwaTitle.value = group.showName;
+    pwaUrl.value = group.faceURL;
+    showRecvMsgOpt.value = group.recvMsgOpt !== 0 ? true : false;
+    pwaTime.value = getChatTimeline(msg.sendTime);
+    const index = contactList.value.findIndex(
+      item => item.userID === msg.sendID
+    );
+    const msgs = transformByType(msg);
+    if (index != -1) {
+      const remark = contactList.value[index].remark
+        ? contactList.value[index].remark
+        : contactList.value[index].nickname;
+      if (msg.contentType === 110) {
+        pwaNickname.value = "";
+      } else {
+        pwaNickname.value = remark;
+      }
+      pwaContent.value = `${msgs}`;
+    } else {
+      if (msg.contentType === 110) {
+        pwaNickname.value = "";
+      } else {
+        pwaNickname.value = msg.senderNickname;
+      }
+      pwaContent.value = `${msgs}`;
+    }
+  } else if (Object.keys(privateChatConfigs.value).length > 0) {
+    const { msg, group } = privateChatConfigs.value;
+    const index = contactList.value.findIndex(
+      item => item.userID === msg.sendID
+    );
+    if (index < 0){
+      return
+    }
+    pwaTitle.value = contactList.value[index].remark
+      ? contactList.value[index].remark
+      : contactList.value[index].nickname;
+    pwaUrl.value = group.faceURL;
+    showRecvMsgOpt.value = group.recvMsgOpt !== 0 ? true : false;
+    pwaTime.value = getChatTimeline(msg.sendTime);
+    const msgs = transformByType(msg);
+    pwaContent.value = msgs;
+    pwaNickname.value = "";
+  } else if (Object.keys(friendApplication.value).length > 0) {
+    pwaTitle.value = t("private_chat");
+    pwaUrl.value = "";
+    pwaTime.value = getChatTimeline(friendApplication.value.createTime);
+    pwaNickname.value = "";
+    // pwaContent.value = "您有新的朋友，点击查看";
+    pwaContent.value = t('newFriendApply');
+  }
+  console.error('hasNewFriendApply',pwaUrl.value);
+  
+};
+const transformDatas = val => {
+  if (typeof val === "string") {
+    return JSON.parse(val);
+  } else {
+    return val;
+  }
+};
+watch(
+  () => groupChatConfigs.value,
+  () => {
+    if (Object.keys(groupChatConfigs.value).length > 0) {
+      if (route.fullPath === "/home/dialogue") {
+        return;
+      }
+      const { msg } = groupChatConfigs.value;
+      if (!ringTipMsgList.includes(msg.contentType)) {
+        return;
+      }
+      if (
+        msg.contentType === 110 &&
+        transformDatas(msg.customElem.data).customType !== 1003
+      ) {
+        return;
+      }
+      transformData();
+      if (showRecvMsgOpt.value) {
+        // 群消息是否勿扰
+        return;
+      }
+      pwaVisible.value = true;
+      setTimeout(() => {
+        pwaVisible.value = false;
+      }, 5000);
+    }
+  }
+);
+watch(
+  () => friendApplication.value,
+  () => {
+    if (Object.keys(friendApplication.value).length > 0) {
+      if (route.fullPath === "/home/dialogue") {
+        return;
+      }
+      transformData();
+      pwaVisible.value = true;
+      setTimeout(() => {
+        pwaVisible.value = false;
+      }, 5000);
+    }
+  }
+);
+watch(
+  () => privateChatConfigs.value,
+  () => {
+    if (Object.keys(privateChatConfigs.value).length > 0) {
+      if (route.fullPath === "/home/dialogue") {
+        return;
+      }
+      const { msg } = privateChatConfigs.value;
+      if (!ringTipMsgList.includes(msg.contentType)) {
+        return;
+      }
+      transformData();
+      if (showRecvMsgOpt.value) {
+        // 群消息是否勿扰
+        return;
+      }
+      pwaVisible.value = true;
+      setTimeout(() => {
+        pwaVisible.value = false;
+      }, 5000);
+    }
+  }
+);
+watch(
+  () => pwaVisible.value,
+  () => {
+    if (!pwaVisible.value) {
+      setGroupChatConfigs({});
+      setPrivateChatConfigs({});
+      setFriendApplication({});
+      showRecvMsgOpt.value = false;
+    }
+  }
+);
+const handleClick = async () => {
+  if (Object.keys(groupChatConfigs.value).length > 0) {
+    const { data } = await $api.msg_privateChat.query_public_userInfo({
+      UserIDs: [userInfo.value.userID]
+    });
+    setPrivateChatConfigs({});
+    setFriendApplication({});
+    setGroupChatConfig({
+      ...groupChatConfigs.value.group,
+      showCheck: false,
+      type: "",
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      msg: [],
+      isMultipleChoice: false,
+      groupChecked: [],
+      contactChecked: [],
+      chatDataList: [],
+      isGroupAdmin: data[0].isGroupAdmin,
+      isGroupOwner: data[0].isGroupOwner
+    });
+    showRecvMsgOpt.value = false;
+    router.push({
+      name: "groupChat",
+      params: { groupID: groupChatConfigs.value.group.groupID },
+      state: {
+        msg: JSON.stringify({
+          groupID: groupChatConfigs.value.group.groupID,
+          faceURL: groupChatConfigs.value.group.faceURL,
+          showName: groupChatConfigs.value.group.showName,
+          conversationType: groupChatConfigs.value.group.conversationType,
+          conversationID: groupChatConfigs.value.group.conversationID
+        })
+      }
+    });
+  } else if (Object.keys(privateChatConfigs.value).length > 0) {
+    setGroupChatConfigs({});
+    setFriendApplication({});
+    setPrivateChatConfig({
+      ...privateChatConfigs.value.group,
+      showCheck: false,
+      type: "",
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      msg: [],
+      isMultipleChoice: false,
+      groupChecked: [],
+      contactChecked: [],
+      chatDataList: []
+    });
+    router.push({
+      name: "privatechat",
+      params: { userID: privateChatConfigs.value.group.userID },
+      state: {
+        msg: JSON.stringify({
+          userID: privateChatConfigs.value.group.userID,
+          faceURL: privateChatConfigs.value.group.faceURL,
+          nickname: privateChatConfigs.value.group.showName
+        })
+      }
+    });
+  } else {
+    setPrivateChatConfigs({});
+    setGroupChatConfigs({});
+    setFriendApplication({});
+    router.push("/home/contact/new");
+  }
+};
+// fix 修复 2024-7-26 【IM-H5】登录成功后点击切换联系人无响应
+// 【问题原因主要是文件内容被修改后，此时的hash值和之前不同，
+// 从而导致打包后最终产物的文件名变更，但此时如果不刷新的话运行时加载的文件名称还是旧的名称，
+// 最终因找不到文件而报错：Failed to fetch dynamically imported module】
+// 目前vite官方也没有解决这个问题。
+router.onError((error, to) => {
+  console.error('跳转失败---errorerror',error);
+  console.error('跳转失败---to',to);
+  if (error.message.includes('Failed to fetch dynamically imported module')) {
+    window.location = to.fullPath
+  }
+})
+</script>
+
+<template>
+  <div ref="home" class="container">
+    <van-notify
+      className="notice-dialog"
+      v-model:show="pwaVisible"
+      type="success"
+    >
+      <template #default>
+        <div class="content-wrap">
+          <div class="image-wrap">
+            <van-image
+              v-if="
+                Object.keys(friendApplication).length > 0 &&
+                  Object.keys(groupChatConfigs).length == 0 &&
+                  Object.keys(privateChatConfigs).length == 0 &&
+                  hasNewFriendApply
+              "
+              round
+              width="48"
+              height="48"
+              :src="NoticeLogo"
+            />
+            <Avatar
+              v-if="
+                Object.keys(groupChatConfigs).length > 0 &&
+                  Object.keys(friendApplication).length === 0 &&
+                  Object.keys(privateChatConfigs).length == 0 &&
+                  hasNewFriendApply
+              "
+              width="48"
+              height="48"
+              :is-group="true"
+              :url="pwaUrl"
+              :name="pwaTitle"
+            ></Avatar>
+            <Avatar
+              v-else
+              width="48"
+              height="48"
+              :url="pwaUrl || privateChatConfigs.msg?.senderFaceUrl"
+              :name="pwaTitle"
+              @updateUrl="url => pwaUrl = url"
+            ></Avatar>
+          </div>
+          <div class="contents-wrap" @click="handleClick">
+            <div class="contents-top">
+              <div class="subtitle">{{ pwaTitle }}</div>
+              <div class="time">{{ pwaTime }}</div>
+            </div>
+            <div class="title">
+              <div class="quote-name" v-if="pwaContent.includes('@')">
+                {{ "[有人@你]" }}
+              </div>
+              <div v-if="pwaNickname" class="title-name">
+                {{ pwaNickname }}:
+              </div>
+              <div class="title-content">{{ pwaContent }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </van-notify>
+    <router-view />
+    <van-tabbar v-model="active" class="nav" :fixed="true" route>
+      <van-tabbar-item
+        :to="{ path: '/home/dialogue', state: { activeIndex: 0 } }"
+        :badge="
+          conversationStore.storeUnReadCount > 0
+            ? conversationStore.storeUnReadCount > 99
+              ? '99+'
+              : conversationStore.storeUnReadCount
+            : ''
+        "
+      >
+        <span>{{ $t("clTitle") }}</span>
+        <template #icon="props">
+          <img :src="props.active ? logoActive : logo" />
+        </template>
+      </van-tabbar-item>
+      <van-tabbar-item
+        replace
+        icon="search"
+        :badge="
+          hasNewFriendApply ?
+            (newFriendApplyCount > 99
+              ? '99+'
+              : newFriendApplyCount > 0
+              ? newFriendApplyCount
+              : ''):''
+        "
+        :to="{ path: '/home/contact', state: { activeIndex: 1 } }"
+      >
+        <span>{{ $t("globalSearchContacts") }}</span>
+        <template #icon="props">
+          <img :src="props.active ? contactActive : contact"  />
+        </template>
+      </van-tabbar-item>
+      <van-tabbar-item
+        icon="search"
+        :to="{ path: '/home/community', state: { activeIndex: 2 } }"
+      >
+        <span>{{ $t('community') }}</span>
+        <template #icon="props">
+          <img :src="props.active ? communityActive : community" />
+        </template>
+      </van-tabbar-item>
+      <van-tabbar-item
+        icon="friends-o"
+        :to="{ path: '/home/my', state: { activeIndex: 3 } }"
+      >
+        <span>{{ $t("mine") }}</span>
+        <template #icon="props">
+          <img :src="props.active ? mineActive : mine" />
+        </template>
+      </van-tabbar-item>
+    </van-tabbar>
+  </div>
+  <van-empty
+    :image="defaultEmpty"
+    image-size="90" class="van_empty" />
+</template>
+
+<style lang="less" scoped>
+.container {
+  // width: 100vw;
+  // height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+
+  .nav {
+    :deep(.van-badge),
+    :deep(.van-badge--dot) {
+      background: var(--c-blue-color);
+    }
+  }
+
+  .main_view {
+    width: 100%;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
+:deep(.van-tabbar-item__icon img) {
+  height: 28px;
+}
+
+:deep(.van-tabbar-item) {
+  color: #76767a;
+  font-family: "PingFang SC";
+  font-size: 0.625rem;
+  font-weight: 400;
+}
+
+:deep(.van-tabbar-item--active) {
+  color: #1b1b22;
+}
+
+.van_empty {
+  display: none;
+}
+
+:deep(.notice-dialog) {
+  top: 20px !important;
+  background-color: #eeeeee;
+  border-radius: 20px;
+  width: calc(100% - 32px);
+  box-shadow: rgba(238, 238, 238, 0.8);
+  left: 16px !important;
+  justify-content: space-between !important;
+  text-align: left;
+  padding: 14px;
+
+  .content-wrap {
+    display: flex;
+    width: 100% !important;
+
+    .image-wrap {
+      width: 48px;
+      height: 48px;
+      margin-right: 10px;
+    }
+
+    .contents-wrap {
+      width: calc(100% - 60px);
+
+      .contents-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .subtitle {
+          color: #1b1b22;
+          margin-bottom: 2px;
+          height: 20px;
+          font-weight: 600;
+          font-size: 0.9375rem;
+          width: 100px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .time {
+          height: 20px;
+          font-size: 0.875rem;
+          color: rgba(127, 127, 127, 0.5);
+          font-weight: 600;
+        }
+      }
+      .title {
+        height: 20px;
+        color: #1b1b22;
+        font-size: 0.8125rem;
+        display: flex;
+        align-items: center;
+
+        .quote-name {
+          color: red;
+          width: 60px;
+        }
+        .title-name {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 100px;
+        }
+        .title-content {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 160px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .van_empty {
+    // background: #84e09f;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: calc(100vw - 375px);
+    z-index: 1;
+
+    :deep(img) {
+      opacity: 0.6;
+    }
+  }
+
+  .nav {
+    width: 375px !important;
+  }
+
+  :deep(.notice-dialog) {
+    .title-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100px;
+    }
+
+    .title-content {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: calc(100% - 260px) !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/log/logDisplay.vue b/src/views/log/logDisplay.vue
new file mode 100644
index 0000000..0c69025
--- /dev/null
+++ b/src/views/log/logDisplay.vue
@@ -0,0 +1,392 @@
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, LogJump } from '@/components'
+import IMG from '@/assets/chatbg.png'
+import { getChatTimeline } from '@/utils/tools'
+import { useGrade } from '@/utils/levelConfig'
+import { formatFileSize,fileIcon } from "@/utils/fileUtils";
+import { showConfirmDialog} from "vant";
+import { useI18n } from "vue-i18n";
+import { isHttpLink,isImageLink} from "@/utils/common";
+import { copyUserId } from "@/utils/tools.js";
+const { t } = useI18n();
+const router = useRouter()
+const route = useRoute()
+const $api = inject("$api");
+const logDisplayRef = ref(null)
+useGrade(logDisplayRef, 3)
+
+// 传入预览组件当前消息id
+const currentId = ref('')
+const currentIndex = ref(0)
+// 预览组件
+const showPreview = ref(false)
+const previewArr = ref([])
+const handlePreview = (val) => {
+  currentId.value = val.clientMsgID
+  const tempArr = []
+  list.value.forEach((item) => {
+    if (item.contentType === 104) {
+      const { videoType, snapshotUrl, videoUrl } = item.videoElem
+      tempArr.push({ type: videoType, snapshotUrl: snapshotUrl, url: videoUrl, id: item.clientMsgID })
+    } else if (item.contentType === 102) {
+      tempArr.push({ ...item.pictureElem.sourcePicture, id: item.clientMsgID })
+    }
+  })
+  currentIndex.value = tempArr.findIndex(item => item.id === val.clientMsgID);
+  // 找到当前索引，传递到swipe组件中initial-swipe
+  previewArr.value = tempArr
+  showPreview.value = true
+}
+const closePreview = (val) => {
+  showPreview.value = false
+  currentId.value = ''
+  previewArr.value = []
+  currentIndex.value = 0
+}
+
+const onJump = (logData) => {
+  if (logData.serverID == 'undefined' || logData.serverID == undefined) {
+    list.value = JSON.parse(logData.messageList)
+    return
+  }
+  router.push(`/home/dialogue/logDisplay?relay_id=${logData.serverID}`)
+}
+let relayId = ref()
+const list = ref([])
+const getData = async () => {
+  if (route.query.relay_id == 'undefined' || route.query.relay_id == undefined) {
+    list.value = JSON.parse(history.state.msg.messageList)
+    list.value = list.value.map(item => {
+      if (item.contentType === 110) {
+        item.customElem.data = JSON.parse(item.customElem.data)
+        return item
+      } else {
+        return item
+      }
+    })
+    return
+  }
+  if (route.query.relay_id != 'undefined' || route.query.relay_id != undefined) {
+    relayId.value = route.query.relay_id
+    const res = await $api.contact.getTransmitMessage({ relay_id: relayId.value });
+    list.value = JSON.parse(res.data.content)
+    list.value = list.value.map(item => {
+      if (item.contentType === 110) {
+        item.customElem.data = JSON.parse(item.customElem.data)
+        return item
+      } else {
+        return item
+      }
+    })
+  }
+}
+// 文件下载
+const handeDownloadFile = (item) => {
+  showConfirmDialog({
+    title: "温馨提示",
+    message: `文件大小${formatFileSize(item.fileElem.fileSize)}是否下载文件？`,
+    confirmButtonText: "下载",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      // 获取文件的 URL
+      const fileUrl = item.fileElem.sourceUrl;
+      // 创建一个 <a> 元素
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      // 设置下载的文件名
+      link.download = item.fileName;
+      // 将链接添加到页面中，这样它就可以被点击
+      document.body.appendChild(link);
+      // 模拟用户点击下载链接
+      link.click();
+      // 清理创建的链接
+      document.body.removeChild(link);
+    })
+    .catch(() => {
+      // on cancel
+    });
+};
+watch(() => route.query.relay_id, (newVal, oldVal) => {
+  if (route.query.relay_id != 'undefined' || route.query.relay_id != undefined) {
+    getData()
+  }
+})
+getData()
+
+const transformData = (val) => {
+  if (typeof val === 'string') {
+    return JSON.parse(val)
+  } else {
+    return val
+  }
+}
+// 打开URL站内链接
+const handeOpenLink = (url) => {
+  // 使用正则表达式判断url是否以http://或https://开头
+  const httpRegex = /^https?:\/\//i;
+  // 如果url以www.开头，则在前面加上http://
+  if (!httpRegex.test(url)) {
+    url = 'http://' + url;
+  }
+  // 使用window.open打开链接
+  window.open(url);
+};
+// 计算处理后的内容
+const processedContent = computed(() => (content) => {
+  // 判断是否是 http 链接
+  if (isHttpLink(content)) {
+    // 判断链接的后缀是否是图片类型
+    // 1、图片链接  2、普通文本链接
+    if (isImageLink(content)) {
+      return 1; // 返回状态1
+    } else {
+      return 2; // 返回状态2
+    }
+  } else {
+    return content; // 如果不是链接格式，则返回内容本身
+  }
+});
+</script>
+
+<template>
+  <div ref="logDisplayRef" class="log-display">
+    <AppNavBar :title="$t('chatRecord')" left-arrow views_grade="thirdly_view" @click-left="router.go(-1)" />
+    <div class="log-content">
+      <div class="log-item" v-for="i in list" :key="i">
+        <div class="log-item-left" v-if="i.senderNickname">
+          <Avatar width="40" height="40" :url="i.senderFaceUrl" :is-group="i.conversationType === 3"
+            :name="i.senderNickname" @updateUrl="url => i.senderFaceUrl = url"></Avatar>
+        </div>
+        <div class="log-item-content" :style="{ 'max-width': true ? '64%' : '70%' }">
+          <div class="name" v-if="true">{{ i.senderNickname }}</div>
+          <div class="msg">
+            <!-- 文本消息 -->
+            <template v-if="i.contentType === 101">
+              <!-- 文本消息【图片类型】 -->
+              <div v-if="processedContent(i.textElem.content)===1" class="text-bilder-type public-fdcc">
+                <van-image
+                  :src="i.textElem.content"
+                  :style="{ maxWidth: '200px',width: 'auto', height: 'auto'}"
+                  :show-error="false"
+                />
+                <div class="linked-content">
+                  <div class="interlink-text" @click="handeOpenLink(i.textElem.content)">{{i.textElem.content}}</div>
+                  <img
+                    src="@/assets/svg/fuzhi.svg"
+                    alt=""
+                    @click="copyUserId(i.textElem.content)"
+                  />
+                </div>
+              </div>
+              <!-- 文本消息【超链接类型】 -->
+              <div v-else-if="processedContent(i.textElem.content)===2" class="text-bilder-type">
+                <h4>分享链接</h4>
+                <div class="linked-content">
+                  <div class="interlink-text" @click="handeOpenLink(i.textElem.content)">{{i.textElem.content}}</div>
+                  <img
+                    src="@/assets/svg/fuzhi.svg"
+                    alt=""
+                    @click="copyUserId(i.textElem.content)"
+                  />
+                </div>
+              </div>
+                <!--文本消息【普通类型】-->
+              <div v-else class="text-msg">
+                {{ i.textElem.content }}
+              </div>
+            </template>
+            <!-- 文本消息 -->
+            <div class="text-msg" v-if="i.contentType === 106">{{ i.atTextElem.text }}</div>
+            <!-- 图片 -->
+            <!-- v-if="val.contentType === 102" -->
+            <div class="img-msg" v-if="i.contentType === 102">
+              <cdnSource :defaultUrl="i.pictureElem.sourcePicture.url" :source="i">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image class="message_img" height="118px" fit="cover" @click="handlePreview(i)"
+                    :src="cdnUrl" :show-error="true" />
+                </template>
+              </cdnSource>
+            </div>
+            <!----视频---->
+            <!-- v-if="val.contentType === 104"  -->
+            <div class="video-msg" v-if="i.contentType === 104" @click="handlePreview(i)">
+              <img class="video" :src="i.videoElem.snapshotUrl" alt="">
+              <div class="video_icon"><img src="@/assets/svg/bofang.svg" alt=""></div>
+            </div>
+            <!-- 文件 -->
+            <div class="file-msg" v-if="i.contentType === 105" @click="handeDownloadFile(i)">
+              <span class="file-text">
+                <span class="file-name">{{ i.fileElem?.fileName }}</span>
+                <span class="file-size">{{ formatFileSize(i.fileElem?.fileSize) }}</span>
+              </span>
+              <img class="file-img" :src="fileIcon(i)" alt="" />
+            </div>
+            <!-- 语音消息 -->
+            <div class="redcard-msg" v-if="i.contentType === 110 && transformData(i.customElem.data).customType === 1013">
+              <div class="text-msg">{{`[${$t('voice')}${$t('message')}]`}}</div>
+            </div>
+            <!-- 红包 -->
+            <div class="redcard-msg" v-if="i.contentType === 110 && transformData(i.customElem.data).customType === 1003">
+              <div class="text-msg">{{ `[${$t("envelope")}]${transformData(i.customElem.data).data?.remark}` }}</div>
+            </div>
+            <!-- 语音 -->
+            <div class="voice-msg" v-if="i.contentType === 103">
+              <div class="text-msg">{{$t('cvVoice')}}</div>
+            </div>
+            <!-- 文本发送引用消息 -->
+            <div class="voice-msg" v-if="i.contentType === 114">
+              <div class="text-msg">{{ i.quoteElem.text }}</div>
+            </div>
+            <!-- 转发消息 -->
+            <div class="transmit-msg"
+              v-if="i.contentType === 110 && transformData(i.customElem.data).customType === 1100">
+              <logJump :logData="transformData(i.customElem.data).data" :msgBorder="false" @onJump="onJump" />
+            </div>
+          </div>
+        </div>
+        <div class="log-item-right">{{ getChatTimeline(i.sendTime) }}</div>
+      </div>
+    </div>
+  </div>
+  <CommonPreview v-model="showPreview" :initialSwipe="currentIndex" :currentId="currentId" :images="previewArr"
+    @getList="closePreview">
+  </CommonPreview>
+</template>
+
+<style scoped lang="less">
+// 导入公共样式文件
+@import '@/style/common-styles.less';
+
+.log-display {
+  height: 100%;
+  overflow: auto;
+  background: #f8f8fb;
+
+  .log-content {
+    padding: 56px 12px 20px;
+
+    .log-item {
+      display: flex;
+      margin-top: 20px;
+      width: 100%;
+
+      .log-item-left {
+        margin-right: 8px;
+      }
+
+      .log-item-content {
+        flex: 0 0 auto;
+        max-width: 64%;
+
+        .text-bilder-type {
+          max-width: 272px;
+          background: #fff;
+          border-radius: 14px;
+          padding: 5px 5px;
+          h4 {
+            color: rgba(27, 27, 34, 1);
+            font-weight: 600;
+            font-size:  0.875rem;
+            margin-top: 2px;
+          }
+          .linked-content {
+            // background-color: rgba(246, 246, 246, 1);
+            border-radius: 8px;
+            padding: 5px 8px;
+            color: rgba(83, 143, 225, 1);
+            display: flex;
+            align-items: center;
+            .interlink-text {
+              .public-text-overflow-2-lines;
+              padding-right: 10px;
+            }
+          }
+        }
+
+        .name {
+          font-size: 0.75rem;
+          color: #00000066;
+          margin-bottom: 4px;
+        }
+
+        .text-msg {
+          padding: 10px 12px;
+          border-radius: 0px 10px 10px 10px;
+          background: #FFFFFF;
+          //  max-width: 80%;
+          white-space: pre-wrap;
+          white-space: -moz-pre-wrap;
+          white-space: -o-pre-wrap;
+          word-break: break-all;
+          position: relative;
+        }
+
+        .img-msg {
+          .message_img {
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            border-radius: 10px;
+            overflow: hidden;
+          }
+        }
+        .file-msg {
+          padding: 10px 12px;
+          border-radius: 10px;
+          background: #f2f4f5;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          .file-text{
+            display: flex;
+            flex-direction: column;
+            .file-size {
+              color: #ccc;
+              font-size: 0.6875rem;
+              margin-top: 5px;
+            }
+            .file-name {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              max-width: 200px;
+              width: 180px;
+            }
+          }
+          .file-img{
+            width: 40px;
+            height: 40px;
+          }
+        }
+
+        .video-msg {
+          background-size: cover;
+          border-radius: 10px;
+          position: relative;
+
+          .video {
+            max-width: 73.8px;
+            max-height: 160px;
+            background-size: cover;
+            border-radius: 10px;
+          }
+
+          .video_icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+
+      .log-item-right {
+        text-align: right;
+        font-size: 0.75rem;
+        color: #00000066;
+        margin-left: auto;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login.vue b/src/views/login.vue
new file mode 100644
index 0000000..8d160c2
--- /dev/null
+++ b/src/views/login.vue
@@ -0,0 +1,1084 @@
+<template>
+  <div class="login-box">
+  <div class="flex-col page">
+    <!-- 返回图标 -->
+    <van-image
+      class="self-start image_4"
+      :src="imgURL('return-icon.svg')"
+       @click="goBack()"
+    ></van-image>
+    <!-- 二维码登录 -->
+    <div class="login-type-switch" v-if="!isMobileBrowser() && appConfig.scan_code_login">
+      <div :class="{'form-login': isFormLogin, 'qrcode-login': !isFormLogin}">
+        <div class="login-txt">{{ isFormLogin ? t('scanLogin') : t('formLogin') }}</div>
+        <img @click="isFormLogin = !isFormLogin" :src="isFormLogin ? qrcodeLogin : fromLogin" alt="" />
+      </div>
+    </div>
+    <template v-if="isFormLogin">
+      <!-- 欢迎信息 -->
+      <div class="flex-col self-stretch group_2 view">
+        <van-image
+          class="flex-col justify-start items-start group_1"
+          :src="imgURL('avatar-hint.svg')"
+        ></van-image>
+        <span class="self-start text_2 mt-21">{{ $t("hiWelcomeLogin") }}</span>
+      </div>
+      <!-- 登录表单 -->
+      <div class="flex-col self-stretch group_4">
+        <!-- 手机号 -->
+        <CommonInput
+          type="text"
+          v-model="formData.username"
+          :placeholder="showName(true)"
+          @onClear="formData.username = ''"
+          ></CommonInput
+        >
+        <!-- 密码 -->
+        <CommonInput
+          :placeholder="$t('password')"
+          className="mt-8 field_1"
+          type="password"
+          v-model="formData.password"
+          @onClear="formData.password = ''"
+          ></CommonInput
+        >
+        <!-- 记住密码和忘记密码 -->
+        <div class="flex-row justify-between items-center view_2">
+          <div class="flex-row items-center">
+            <div class="image_12 image_10"></div>
+            <AppCheckBox v-model="rememberPwd.checked" :sizeH="10" :sizeW="10"
+              >{{ $t("rememberPassword") }}
+            </AppCheckBox>
+          </div>
+          <span class="font_2 text_4" @click="toForgotpassword">{{ $t("forgetPassword") }}?</span>
+        </div>
+        <!-- 登录按钮和注册链接 -->
+        <div class="flex-col group_2 view_3">
+          <van-button
+            :loading="loading"
+            loading-type="spinner"
+            class="cf-button"
+            color="#1B1B22"
+            block
+            :disabled="!formData.username || !formData.password"
+            @click="loginClick"
+          >
+            {{ $t("login") }}</van-button
+          >
+          <div class="flex-col justify-start items-center group_5 mt-10">
+            <div class="group_6">
+              <span class="font_3 text_6">{{ $t("noAccountYet") }}</span>
+              <span
+                class="font_3 text_7"
+                v-if="
+                  appConfig.name_reg ||
+                  appConfig.email_reg ||
+                  appConfig.phone_reg
+                "
+                @click="signIn"
+                >{{ $t("register_user") }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div 
+      class="login-for-qrcode"
+      v-show="!isFormLogin"
+      v-if="!isMobileBrowser()"
+    >
+        <div class="qr-ttl">
+          <div class="qr-text">{{ $t("scanText") }}</div>
+          <div class="sub-text">{{ $t("scanSubText") }}</div>
+        </div>
+        <div class="qrcode-wrapper">
+          <div class="qrcode">
+            <QRCodeVue3
+              v-if="qrCodeText"
+              :width="264"
+              :height="264"
+              :value="qrCodeText"
+              :key="qrCodeText"
+              :margin="12"
+              :qrOptions="{
+                typeNumber: 0,
+                mode: 'Byte',
+                errorCorrectionLevel: 'H',
+              }"
+              :imageOptions="{
+                hideBackgroundDots: true,
+                imageSize: 0.2,
+                margin: 0,
+              }"
+              :dotsOptions="{
+                type: 'dots',
+                color: '#6898E6',
+              }"
+              :backgroundOptions="{ color: '#fff' }"
+              :cornersSquareOptions="{ type: 'dot', color: '#6898E6' }"
+              :cornersDotOptions="{ type: 'dot', color: '#6898E6' }"
+              myclass="my-qur"
+              imgclass="img-qr"
+              :image="LogoImg"
+            >
+            </QRCodeVue3>
+          <!-- 二维码过期 -->
+          <div class="expired" v-if="scanStatus === 4">
+            {{ $t("qrcodeExpired") }}
+          </div>
+          <div class="scan-success" v-if="[1, 2].includes(scanStatus)">
+            <img :src="scanSuccess" alt="" />
+            <dl>
+              <dt>{{ $t("scanSuccess") }}</dt>
+              <dd>{{ $t("confromLogin") }}</dd>
+            </dl>
+          </div>
+        </div>
+        <div class="tips">{{ $t("expiredTime10") }}</div>
+        <div class="reflesh-btn" @click="onRefleshQrCode">
+          <img :src="qrcodeReflesh" alt="" />{{ $t("reflesh") }}
+        </div>
+        </div>
+      </div>
+  </div>
+</div>
+<div class="footer-box-content">
+  <!-- 其他登录方式 -->
+    <div class="flex-col self-stretch view_4">
+      <van-divider class="divider" v-if="appConfig.phone_login || appConfig.email_login || isGoogleLoginShowBtn">{{ $t("otherLoginStyle") }}</van-divider>
+      <div class="flex-row justify-between equal-division group_7">
+        <template v-if="appConfig.phone_login || appConfig.email_login">
+        <!-- 手机号登录 -->
+          <img
+            class="equal-division-item_1"
+            :src="imgURL('sg-login.svg')"
+            v-if="appConfig.phone_login"
+            @click="otherLogin('phone')"
+          />
+        <!-- 邮箱登录 -->
+          <img
+            class="equal-division-item_1"
+            :src="imgURL('yx-login.svg')"
+            v-if="appConfig.email_login"
+            @click="otherLogin('email')"
+          />
+        </template>
+        <!-- 谷歌登录 -->
+        <div class="equal-division-item_1" v-if="isGoogleLoginShowBtn">
+          <GoogleLogin :callback="googleLoginFn" popup-type="TOKEN">
+          <img ref="signinBtn" :src="googleLogin" alt="" />
+          </GoogleLogin>
+        </div>
+      </div>
+    </div>
+  </div>
+  <van-dialog
+    v-model:show="googleModel"
+    :title="'谷歌验证码'"
+    show-cancel-button
+    confirmButtonColor="#538FE1"
+    @confirm="confirmGoogleCode"
+    @cancel="cancelGoogleCode"
+  >
+    <div class="google-code">
+      <van-field
+        v-model="googleCode"
+        maxlength="6"
+        :placeholder="'请输入谷歌验证码'"
+      />
+    </div>
+  </van-dialog>  
+</template>
+
+<script setup>
+import ABPInput from "@/components/ABPPInput.vue";
+// import userService from "@/views/login/components/userService.vue";
+import { ref, defineProps, reactive, onMounted, onUnmounted, computed } from "vue";
+import { storeToRefs } from "pinia";
+import QRCodeVue3 from 'qrcode-vue3'
+import { showToast, showConfirmDialog,Sticky } from "vant";
+import { encrypt } from "@/utils/index.js";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useRouter } from "vue-router";
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useI18n } from "vue-i18n";
+import { AppCheckBox } from "@/components";
+import googleLogin from "@/assets/svg/google-login.svg";
+import facebookLogin from "@/assets/svg/facebook-login.svg";
+import qrcodeLogin from "@/assets/svg/qrcode-login.svg";
+import fromLogin from "@/assets/svg/form-login.svg";
+import qrcodeReflesh from "@/assets/svg/qrcodereflesh.svg";
+import scanSuccess from "@/assets/svg/scan-success.svg";
+import moreLogin from "@/assets/svg/more-login.svg";
+import FingerprintJS from "@fingerprintjs/fingerprintjs";
+import { useFriendStore } from '@/stores/modules/membership-info'
+import LogoImg from '@/assets/logo1.png'
+import usePolling from '@/use/usePolling'
+import use from "@/use";
+import { isMobileBrowser } from "@/utils/tools"
+import { CommonInput } from "@/components/index.js";
+const friendState = useFriendStore()
+const { t } = useI18n();
+const IMSDK = getSDK();
+const { useUid, useCoinId, useEmailLang,useSystem } = use;
+const router = useRouter();
+const userStore = useUserStore();
+const { setToken, setUserInfo, setAppConfig } = userStore;
+const { appConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { setNewFriendApplyCount, updateNewFriendApply } = contactStore
+const { friendCreateCount } = storeToRefs(contactStore)
+const $api = inject("$api");
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+// 登录类型 默认为账号密码登录
+const isFormLogin = ref(true)
+const qrCodeText = ref('')
+const data = reactive({
+  form: {
+    checked: false
+  }
+});
+const showPicker = ref(false);
+const activeCode = ref(0);
+const formData = ref({
+  username: "",
+  area_code: "",
+  phone: "",
+  password: ""
+});
+const loading = ref(false);
+const googleModel = ref(false)
+const isGoogleLoginShowBtn = ref(false) // 是否展示谷歌登录按钮
+
+onMounted(async () => {
+  console.log(window.navigator, "设备1");
+  console.log(window.navigator.userAgent, "设备2");
+  // 存储设备id防止wss断连
+  sessionStorage.setItem('usePlatformID', useSystem());
+  isGoogleLoginShowBtn.value = showThirdLogin()
+  let rememberInfo = JSON.parse(window.localStorage.getItem("rememberPwd"));
+  if (rememberInfo?.checked) {
+    formData.value.username = rememberInfo.username;
+    formData.value.password = window.atob(rememberInfo.password)
+    rememberPwd.value.checked = rememberInfo.checked;
+  }
+  let login =
+    !appConfig.value.name_login &&
+    !appConfig.value.email_pwd_login &&
+    !appConfig.value.phone_pwd_login;
+  if (appConfig.value && login) {
+    router.push(`/firstScreen`);
+  }
+});
+
+
+const getVisitorId = async () => {
+  const localVisitorId = localStorage.getItem("visitorId");
+  if (localVisitorId) return localVisitorId
+  const fpPromise = await FingerprintJS.load();
+  const { visitorId } = await fpPromise.get();
+  return visitorId
+}
+const genLoginParams = async () => {
+  const params = {}
+  const simpleDevice = navigator.userAgent.match(/\((.*?)\)/g);
+  params.device_id = await getVisitorId();
+  params.device_model =
+    simpleDevice && simpleDevice.length
+      ? simpleDevice[0].split(";")[0].slice(1)
+      : "unknown";
+  params.platform = useSystem(); // 1ios 2安卓 3pc 4h5
+  params.login_type = 6; // 登录类型 1用户名 2手机号码 3邮箱
+  params.email_pwd_login = appConfig.value.email_pwd_login;
+  params.phone_pwd_login = appConfig.value.phone_pwd_login;
+  params.username_pwd_login = appConfig.value.name_login;
+  if (googleCode.value) {
+    params.google_code = googleCode.value
+  } else {
+    delete params.google_code
+  }
+  return params
+}
+// const loginClick = async () => {
+//   const formDataValue = formData.value;
+//   const formDataClone = await genLoginParams();
+//   formDataClone.username = formDataValue.username;
+//   formDataClone.password = encrypt(formDataValue.password);
+//   formDataClone.account = formDataValue.username || undefined;
+//   console.log(formDataClone);
+//   // 记住密码
+//   rememberPwd.value.password = formDataValue.password;
+//   rememberPwd.value.username = formDataClone.username;
+//   let rememberPwdStr = {
+//     ...rememberPwd.value,
+//     password: window.btoa(rememberPwd.value.password)
+//   }
+//   window.localStorage.setItem(
+//     "rememberPwd",
+//     JSON.stringify(rememberPwdStr || {})
+//   );
+//   login(formDataClone);
+// };
+// fix 2024-8-21 修复【IM-H5】优化-登录页面UI优化：登录按钮点不了
+const loginClick = async () => {
+  try {
+    // 获取表单数据
+    const { username, password } = formData.value;
+    // 生成登录参数
+    const formDataClone = await genLoginParams();
+    // 设置登录参数
+    Object.assign(formDataClone, {
+      username,
+      password: encrypt(password),
+      account: username || undefined
+    });
+    // 记住密码
+    rememberPwd.value = {
+      ...rememberPwd.value,
+      username,
+      password,
+    };
+    // 存储加密后的密码到 localStorage
+    const encodedPassword = encodeURIComponent(rememberPwd.value.password);
+    const rememberPwdStr = {
+      ...rememberPwd.value,
+      password: window.btoa(encodedPassword)
+    };
+    window.localStorage.setItem("rememberPwd", JSON.stringify(rememberPwdStr));
+    // 执行登录操作
+    await login(formDataClone);
+  } catch (error) {
+    console.error('登录失败:', error);
+  }
+};
+const login = async formDataClone => {
+  loading.value = true;
+  try{
+    const loginRes = await $api.login.login(formDataClone);
+    loading.value = false;
+    // 用户注销
+    if (loginRes.code === 6077) {
+      window.sessionStorage.setItem(
+        "loginUserInfo",
+        JSON.stringify({ ...formDataClone, password: formData.value.password })
+      );
+      router.push(`/restoreAccount`);
+      return;
+    }
+    // 内部用户
+    if (loginRes.code === 6110) {
+      googleModel.value = true
+      return
+    }
+    // 设备不可信6105 皆是与后端约定好的code码  6107 设备审核失败
+    if (loginRes.code === 6105 || loginRes.code === 6107) {
+      await showConfirmDialog({
+        title: t("apply_ttl"),
+        message: t('apply_tips'),
+        confirmButtonText: t('apply_send'),
+        confirmButtonColor: "#5F97E3"
+      });
+      await $api.login.addVerify({
+        device_id: formDataClone.device_id,
+        device_model: formDataClone.device_model,
+        platform: 5,
+        user_id: loginRes.data.user_id
+      });
+
+      showToast({
+        position: "top",
+        message: t('await_accepting')
+      });
+      // 如果是扫码登录，刷新二维码
+      if (!isFormLogin.value) {
+        qrCodeInit()
+      }
+      return;
+    }
+    // 设备审核中
+    if (loginRes.code === 6106) {
+      showToast({ position: "top", message: t('error_6106') });
+      // 如果是扫码登录
+      if (!isFormLogin.value) {
+        qrCodeInit()
+      }
+      return;
+    }
+    // 谷歌验证码错误
+    if (loginRes.code === 6082) {
+      googleCode.value = ''
+      if (!isFormLogin.value) {
+        qrCodeInit()
+      }
+      return
+    }
+    if (loginRes.code === 6018) {
+      showToast({ position: "top", message: t('error_6018') });
+    }
+    if (loginRes.code === 6093) {
+      getAppConfig();
+      showToast({ position: "top", message: t('error_6093') });
+    }
+    if (loginRes.code !== 0) {
+      googleCode.value = ''
+      return
+    };
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem("token", token);
+    localStorage.setItem("im_token", im_token);
+    localStorage.setItem("user_id", user_id);
+    // fix 2024-8-31 注释原有的登录后 逻辑
+    // 登录成功后获取用户配置信息【字体大小、聊天背景、】
+    // await getUserSettings()
+    // let userRes = await $api.login.userInfo();
+    // if (userRes.code !== 0) return;
+    // setUserInfo(userRes.data);
+    // // 用户活跃
+    // await $api.user.accountActive({user_id})
+    // showToast({ position: "top", message: t("LoginSuccess") });
+    // 是否设置用户昵称
+    // if (userRes.data && !userRes.data.nickname) {
+    //   router.push("/welcomePage");
+    // } else {
+    //   // 找出后端返回的线路中最优的那一条
+    //   // let resLine =  await findFastestCdn()
+    //   // console.error('登录后找出最优线路',resLine);
+    //   router.push({ path: "/home" });
+    // }
+    await loginProcess(user_id)
+    let searchTime = !!friendCreateCount.value ? Number(friendCreateCount.value) : Date.now()
+    const res = await $api.contact.getRespondFriendApplyByTime({
+      time: searchTime
+    })
+    if (res.code != 0) return
+    setNewFriendApplyCount(res.data.count)
+    updateNewFriendApply(res && res.data && res.data.count && res.data.count > 0 ? true : false)
+  } catch(err) {
+    if (err === 'cancel' && !isFormLogin.value) {
+      qrCodeInit()
+    }
+    // fix 登录状态500时候无反应问题
+    if (err.response?.status===500) {
+      showToast({ position: "top", message: t('error_500') });
+    }
+    loading.value = false;
+    console.error('登录接口报错拉',err);
+  }
+};
+// fix 2024-8-31 把登录后的调用 抽离到一个方法
+async function loginProcess(user_id) {
+  try {
+    // 登录成功后获取用户配置信息【字体大小、聊天背景】
+    await getUserSettings();
+    // 获取用户信息
+    const userRes = await $api.login.userInfo();
+    if (userRes.code !== 0) {
+      throw new Error('登录userInfo--Failed to fetch user info');
+    }
+    setUserInfo(userRes.data);
+    // 用户活跃
+    const accountActiveRes = await $api.user.accountActive({ user_id });
+    if (accountActiveRes.code !== 0) {
+      throw new Error('登录accountActive to');
+    }
+    // 显示成功提示
+    showToast({ position: 'top', message: t('LoginSuccess') });
+    // 是否设置用户昵称
+    if (userRes.data && !userRes.data.nickname) {
+      await router.push("/welcomePage");
+    } else {
+      await router.push({ path: "/home" });
+    }
+  } catch (error) {
+    // 显示失败提示
+    showToast({ position: 'top', message: t('Login_failed') });
+    console.error(error); // 可选：输出错误到控制台
+  }
+}
+const otherLogin = async type => {
+  router.push({ name: "otherLogin", query: { type } });
+};
+const signIn = () => {
+  if (appConfig.value.name_reg) {
+    router.push({ name: "signinAccount" });
+  } else {
+    router.push({ name: "otherSignin", query: { type: "phone" } });
+  }
+};
+const toForgotpassword = () => {
+  router.push({ name: "forgotPassword" });
+};
+const isInputGoogleCode = ref(false)
+const googleCode = ref('')
+const confirmGoogleCode = (val) => {
+  if (googleCode.value.length !== 6) {
+    showToast({
+      position: "top",
+      message: '请输入谷歌验证码'
+    });
+    return
+  }
+  if (isFormLogin.value) {
+    loginClick()
+  } else {
+    qrCodeLogin()
+  }
+}
+const cancelGoogleCode = () => {
+  googleCode.value = ''
+  isInputGoogleCode.value = false
+  qrCodeInit()
+}
+
+// 记住密码
+const rememberPwd = ref({
+  checked: true,
+  username: "",
+  password: ""
+});
+
+// fix 优化代码:减少条件分支、简化筛选逻辑、some() 方法在找到符合条件的元素后会立即返回 true，不会继续遍历剩余的元素
+const showThirdLogin = () => {
+  const thirdPartyLogins = appConfig.value.third_party_login_list;
+  // 如果 thirdPartyLogins 不是数组或者长度为 0，直接返回 false
+  if (!Array.isArray(thirdPartyLogins) || thirdPartyLogins.length === 0) {
+    return false;
+  }
+  // 使用 some() 方法来检查是否有开启的第三方登录项
+  return thirdPartyLogins.some(item => item.open && item.name === "google");
+};
+
+const signinBtn = ref(null);
+
+const googleLoginFn = async response => {
+  const params = {
+    provider: "google",
+    access_token: response.access_token,
+    platform: useSystem(),
+    device_id: useUid(),
+    device_model: navigator.userAgent
+  };
+  const res = await $api.user.sdkLogin(params);
+  // 账号被禁用
+  if (res.code === 6018) {
+    showToast({ position: "top", message: t("error_6018") });
+  }
+  // 用户注销
+  if (res.code === 6077) {
+    window.sessionStorage.setItem(
+      "loginUserInfo",
+      JSON.stringify({
+        area_code: "",
+        email: "",
+        login_type: 14,
+        password: "",
+        phone: "",
+        username: "",
+        token: res.data.token
+      })
+    );
+    router.push(`/restoreAccount`);
+    return;
+  }
+  if (res.code !== 0) return;
+  const { token, im_token, user_id, is_register } = res.data;
+  localStorage.setItem("token", token);
+  localStorage.setItem("im_token", im_token);
+  localStorage.setItem("user_id", user_id);
+  showToast({ position: "top", message: t("LoginSuccess") });
+  const userRes = await $api.login.userInfo();
+  setUserInfo(userRes.data);
+  //二次登录
+  // if (IMSDK) {
+  //   await IMSDK.login(im_config());
+  // }
+  if (is_register) {
+    // 去选择头像页面
+    router.push({ path: "/welcomePage" });
+  } else {
+    router.push({ path: "/home" });
+  }
+};
+
+// 用户名输入框展示文字
+const showName = bol => {
+  let name = "";
+  let placeholder = "";
+  let { name_login, phone_pwd_login, email_pwd_login } = appConfig.value;
+  if (name_login && email_pwd_login && phone_pwd_login) {
+    name = `${t("username")}/${t("phoneNumber")}/${t("email")}`;
+    placeholder = `${t("placeholder.pleaseInput") + " " + t("username")}、${t(
+      "phoneNumber"
+    ) +
+      t("orStr") +
+      t("email")}`;
+  } else if (name_login && !email_pwd_login && !phone_pwd_login) {
+    name = `${t("username")}`;
+    placeholder = `${t("placeholder.pleaseInput") + " " + t("username")}`;
+  } else if (!name_login && !email_pwd_login && phone_pwd_login) {
+    name = `${t("phoneNumber")}`;
+    placeholder = `${t("placeholder.pleaseInput") + " " + t("phoneNumber")}`;
+  } else if (!name_login && email_pwd_login && !phone_pwd_login) {
+    name = `${t("email")}`;
+    placeholder = `${t("placeholder.pleaseInput") + " " + t("email")}`;
+  } else if (name_login && !email_pwd_login && phone_pwd_login) {
+    name = `${t("username")}/${t("phoneNumber")}`;
+    placeholder = `${t("placeholder.pleaseInput") +
+      " " +
+      t("username") +
+      t("orStr") +
+      t("phoneNumber")}`;
+  } else if (name_login && email_pwd_login && !phone_pwd_login) {
+    name = `${t("username")}/${t("email")}`;
+    placeholder = `${t("placeholder.pleaseInput") +
+      " " +
+      t("username") +
+      t("orStr") +
+      t("email")}`;
+  } else if (!name_login && email_pwd_login && phone_pwd_login) {
+    name = `${t("phoneNumber")}/${t("email")}`;
+    placeholder = `${t("placeholder.pleaseInput") +
+      " " +
+      t("phoneNumber") +
+      t("orStr") +
+      t("email")}`;
+  }
+  return bol ? name : placeholder;
+};
+const getAppConfig = async () => {
+  const configRes = await $api.login.getConfigInfo();
+  const groupRes = await $api.login.getGroupSettings();
+  if (configRes.code != 0) return;
+  setAppConfig({
+    ...appConfig.value,
+    ...configRes.data,
+    ...groupRes.data
+  });
+};
+// 获取用户配置
+const getUserSettings = async () => {
+  const params = {
+    user_id: localStorage.getItem("user_id"),
+  };
+  const res = await $api.setting.getUserInfoSettings(params);
+  if (res.code !== 0) return;
+  // 设置字体大小
+  const fontSize = res.data?.fontSize || 16
+  // 将字体大小存储到pinia中
+  friendState.seGlobalFontSize(fontSize)
+  const html = document.querySelector('html');
+  // 动态设置根元素的字体大小
+  html.style.fontSize = `${fontSize}px`;
+};
+
+const onRefleshQrCode = async () => {
+  qrCodeText.value = await genQrCode()
+  scanStatus.value = 0
+  manualCallPollingFunction()
+  checkExpiredFun()
+}
+
+const codeId = ref('')
+const genQrCode = async () => {
+  const res = await $api.login.generateQrcode();
+  if (res.code !== 0) return '';
+  codeId.value = res.data.result.split('?')[1].split('=')[1]
+  return res.data.result
+}
+
+// 状态 初始化状态：0；已经扫码：1；登录确认：2；取消登录：3 ;本地超时 4
+const scanStatus = ref(0)
+const getScanStatus = async () => {
+  const res = await $api.login.getLoginQrcode({ code: codeId.value })
+  console.log('getScanStatus::', res)
+  scanStatus.value = res.data.status
+  // 确认登录
+  if (res.data.status === 2) {
+    // 成功
+    // 关掉轮询定时器
+    manualStopInterval()
+    qrCodeLogin()
+  } else if (res.data.status === 3) {
+    // 取消登录
+    resetPolling()
+    qrCodeInit()
+  }
+}
+
+const { manualCallPollingFunction, manualStopInterval } = usePolling(getScanStatus, 2000)
+
+const qrCodeLogin = async () => {
+  const loginParams = await genLoginParams();
+  loginParams.login_type = 15
+  loginParams.qr_code = codeId.value
+  login(loginParams)
+}
+const resetPolling = () => {
+  scanStatus.value = 0
+  manualStopInterval()
+  if (expiredTimer.value) {
+    window.clearTimeout(expiredTimer.value)
+    expiredTimer.value = null
+  }
+}
+const qrCodeInit = async () => {
+  // 打开轮询定时器
+  qrCodeText.value = await genQrCode()
+  manualCallPollingFunction()
+  checkExpiredFun()
+}
+
+const expiredTimer = ref(null)
+watch(() => isFormLogin.value, async (val) => {
+  // 密码登录
+  if (val) {
+    // 关掉轮询定时器
+    resetPolling()
+  } else {
+    // 打开轮询定时器
+    qrCodeInit()
+  }
+})
+
+const EXPIRED_TIME = 10 * 60 * 1000
+
+const checkExpiredFun = () => {
+  expiredTimer.value = setTimeout(() => {
+    console.log('10分钟超时----------------')
+    resetPolling()
+    scanStatus.value = 4
+  }, EXPIRED_TIME)
+}
+// 组件开发 测试
+const codeInputRef = ref(null)
+const codeSendStatus = ref('')
+const onCodeSend = async () => {
+  console.log('codeSend',2);
+  codeSendStatus.value = 'sended'
+  codeInputRef.value.start()
+};
+const onCodeFinish = () => {
+  codeSendStatus.value = 'finished'
+}
+// 返回上一级
+const goBack = () => {
+  if (isFormLogin.value === false) {
+    isFormLogin.value = true
+  } else {
+    router.back()
+  }
+}
+
+// 退出当前页面的时候清掉定时器
+onUnmounted(() => {
+  resetPolling()
+})
+</script>
+
+<style lang="less" scoped>
+@import "@/style/common-styles.less";
+// @media (min-width: 450px) { /* PC 端样式 */
+//   .page {
+//     min-width: 375px;
+//     max-width: 750px;
+//     width: 375px !important;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//   }
+// }
+.login-box {
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+}
+.mt-21 {
+  margin-top: 21px;
+}
+.page {
+  padding: 16.5px 15.5px 15px 16px;
+  background-color: #ffffff;
+  min-width: 375px;
+  max-width: 750px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative; /* 确保内部绝对定位的元素以容器为基准 */
+  .login-type-switch {
+    .login-txt {
+      position: relative;
+      padding: 0 12px;
+      margin-right: 11px;
+      line-height: 36px;
+      font-size: 14px;
+      color: rgba(27, 27, 34, 0.6);
+      border: 1px solid rgba(232, 232, 233, 1);
+      border-radius: 10px;
+      background: #fff;
+      cursor: pointer;
+
+      &::after {
+        position: absolute;
+        right: -5px;
+        top: 14px;
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-top: 1px solid rgba(232, 232, 233, 1);
+        border-right: 1px solid rgba(232, 232, 233, 1);
+        background: #fff;
+        border-top-right-radius: 2px;
+        transform: rotate(45deg);
+        transform-origin: center;
+      }
+    }
+
+    > div {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .group {
+    padding-left: 18px;
+    .text {
+      color: #1b1b22;
+      font-size: 15px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      line-height: 11px;
+    }
+    .image {
+      width: 17px;
+      height: 11px;
+    }
+    .image_2 {
+      width: 15px;
+      height: 11px;
+    }
+    .image_3 {
+      width: 24px;
+      height: 11.5px;
+    }
+  }
+  .image_4 {
+    width: 24px;
+    height: 25px;
+  }
+  .group_2 {
+    padding: 0 4px;
+    .group_1 {
+      position: relative;
+      align-self: stretch;
+      width: 110.21px;
+      height: 90px;
+    }
+    .text_2 {
+      margin-left: 1.5px;
+      color: #1b1b22;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      line-height: 17px;
+    }
+    .cf-button {
+      padding: 16px 0px;
+      border-radius: 16px;
+      background-color: #1b1b22;
+      height: 48px;
+      color: #ffffff !important;
+      font-family: PingFang SC;
+      font-size: 16px;
+      line-height: 15px;
+      font-weight: 600;
+      &.van-button--disabled {
+        background-color: #f6f6f6 !important;
+        border: 1px solid #f6f6f6 !important;
+        color: #d1d1d3 !important;
+      }
+    }
+    .group_5 {
+      padding: 17.5px 0 17.5px;
+      border-radius: 16px;
+      overflow: hidden;
+      .group_6 {
+        line-height: 13px;
+        .font_3 {
+          font-size: 14px;
+          font-family: PingFang SC;
+          line-height: 13px;
+        }
+        .text_6 {
+          color: #1b1b2266;
+        }
+        .text_7 {
+          color: #528fe1;
+          line-height: 13px;
+        }
+      }
+    }
+  }
+  .view {
+    margin-top: 27.5px;
+  }
+  .group_4 {
+    margin-top: 22px;
+    .field {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+    }
+    :deep(.field_1) {
+      margin-top: 8px;
+    }
+    .view_2 {
+      margin-top: 12px;
+      padding-left: 4px;
+      padding-right: 3px;
+      .image_12 {
+        flex-shrink: 0;
+      }
+      .image_10 {
+        width: 16px;
+        height: 16px;
+      }
+      .text_4 {
+        line-height: 11px;
+      }
+    }
+    .view_3 {
+      margin-top: 20px;
+    }
+  }
+  .font_2 {
+    font-size: 12px;
+    font-family: PingFang SC;
+    line-height: 11px;
+    color: #1b1b2299;
+  }
+}
+.view_4 {
+  width: 100%;
+  background-color: #fff;
+  min-width: 375px;
+  max-width: 750px;
+  box-sizing: border-box; /* 确保内边距和边框不会影响元素的实际宽度 */
+  :deep(.divider){
+    border-color: #f6f6f6;
+    margin:0 0 1rem 0;
+    font-size: 0.75rem;
+    color: var(--Font-40, #1B1B2266);
+  }
+  .equal-division {
+    align-self: center;
+    .equal-division-item_1 {
+      border-radius: 45px;
+      width: 48px;
+      height: 48px;
+    }
+    .equal-division-item {
+      border-radius: 45px;
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .group_7 {
+    .equal-division-item_1{
+      margin: 0 20px;
+    }
+  }
+}
+.login-for-qrcode {
+  .qr-ttl {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 364px;
+    height: 60px;
+    margin: 46px 0 36px;
+    font-size: 14px;
+    color: rgba(27, 27, 34, 0.6);
+    text-align: center;
+    width: 100%;
+    .qr-text {
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: bold;
+      color: rgba(27, 27, 34, 1);
+    }
+  }
+
+  .qrcode-wrapper {
+    height: 322px;
+    margin-bottom: 72px;
+    font-size: 12px;
+    text-align: center;
+
+    .qrcode {
+      position: relative;
+      width: 264px;
+      height: 264px;
+      margin: 0 auto;
+      color: rgba(27, 27, 34, 0.6);
+      font-size: 14px;
+      > div:not(:first-of-type) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        border-radius: 24px;
+        border: 1px solid rgba(246, 246, 246, 1);
+      }
+
+      .expired {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .scan-success {
+        img {
+          margin-top: 74px;
+          width: 52px;
+          height: 52px;
+        }
+
+        dl {
+          dt {
+            font-weight: bold;
+            margin: 8px 0;
+            font-size: 20px;
+            color: rgba(83, 143, 225, 1);
+          }
+        }
+      }
+    }
+    .tips {
+      margin: 12px 0;
+      color: rgba(27, 27, 34, 0.4);
+    }
+    .reflesh-btn {
+      cursor: pointer;
+      color: rgba(83, 143, 225, 1);
+
+      img {
+        margin-right: 2px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/login/components/firstScreen.vue b/src/views/login/components/firstScreen.vue
new file mode 100644
index 0000000..802fc45
--- /dev/null
+++ b/src/views/login/components/firstScreen.vue
@@ -0,0 +1,578 @@
+<template>
+  <!-- 引导登录页 -->
+  <div class="login">
+    <div class="login-box">
+      <!-- fix 线路检测逻辑暂时注释 -->
+      <!-- <div class="container">
+      <div class="item" :style="{ backgroundColor: isOnline ? '#266fff' : 'red' }">
+        <p>网络状态：{{ isOnline ? netWorkStatus.effectiveType : '离线' }}</p>
+        <p>延迟：{{ isOnline ? netWorkStatus.rtt + 'ms' : '离线' }}</p>
+        <p>带宽：{{ isOnline ? netWorkStatus.downlink + 'mb/s' : '离线' }}</p>
+      </div>
+    </div> -->
+      <!-- <div class="logo-left">
+        <img class="img1" src="@/assets/svg/logo-cn.svg" alt="" v-if="useEmailLang() == 'zh-cn' || useEmailLang() == 'zh-hant-cn'" />
+        <img class="img1" src="@/assets/svg/logo-us.svg" alt="" v-else />
+      </div> -->
+      <div class="logo-center">
+        <!-- <img class="img" src="@/assets/svg/Group625882.svg" alt="" />
+        <img class="img" src="@/assets/svg/球帝带1.svg" alt="" /> -->
+        <img class="img1" src="@/assets/svg/logo-cn.svg" alt="" v-if="useEmailLang() == 'zh-cn' || useEmailLang() == 'zh-hant-cn'" />
+        <img class="img1" src="@/assets/svg/logo-us.svg" alt="" v-else />
+      </div>
+      <div class="operate-area">
+        <div class="btn">
+          <!-- <div class="img">
+            <img class="img" src="@/assets/Group 625883.png" alt="" />
+          </div> -->
+          <div class="btn1" style="margin-bottom: 20px;">
+            <van-button type="default" block @click="toLogin">{{
+              $t("gotoLogin")
+            }}</van-button>
+          </div>
+          <div class="btn2">
+            <van-button block @click="toCreateAccount">{{
+              $t("gotoRegister")
+            }}</van-button>
+          </div>
+        </div>
+        <div class="login-radio">
+          <AppCheckBox
+            v-model="modelChecked"
+            :sizeH="16"
+            :sizeW="16"
+          ></AppCheckBox>
+          <div class="link" style="margin-left: 4px;">
+            {{ $t("init_text_1") }}
+            <span @click="toUserService($t('用户服务协议'))">{{
+              $t("init_text_2")
+            }}</span>
+            {{ $t("init_text_3") }}
+            <span @click="toUserService($t('隐私政策'))">{{
+              $t("init_text_4")
+            }}</span>
+          </div>
+        </div>        
+        <div class="third-login-wrap" v-if="isGoogleLoginShowBtn">
+          <div class="third-login">
+            <div class="third-login-line"></div>
+            <div class="third-login-title">{{ $t("otherLoginStyle") }}</div>
+            <div class="third-login-line"></div>
+          </div>
+          <div class="third-methods">
+            <GoogleLogin :callback="googleLoginFn" popup-type="TOKEN">
+              <img ref="signinBtn" :src="googleLogin" alt="" />
+            </GoogleLogin>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 用户服务协议-隐私政策 -->
+  <userService
+    :type="serviceType"
+    :show="serviceShow"
+    @close="serviceShow = false"
+  ></userService>
+  <!-- 用户服务协议-隐私政策 弹框 -->
+  <policyDialog :agreementDialog="modelChecked && isChecked" @agreement="handeAgreement" />
+</template>
+<script setup>
+import { ref, defineProps, reactive, onMounted, watchEffect } from "vue";
+import { showToast } from "vant";
+import { storeToRefs } from "pinia";
+import use from "@/use";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { getSDK } from "@/utils/openIM";
+import { useI18n } from "vue-i18n";
+import googleLogin from "@/assets/login/bg-login-guge.svg";
+import {removeAllLocalstorage} from "@/utils/tools";
+import { useContactStore } from "@/stores/contact";
+import { AppCheckBox } from "@/components";
+import policyDialog from "../components/policy-dialog.vue";
+import userService from "@/views/login/components/userService.vue";
+import { findFastestCdn } from '@/utils/cdnUtils';
+const contactStore = useContactStore();
+const { clearStore } = contactStore;
+import useConversationStore from "@/stores/modules/conversation";
+const conversationStore = useConversationStore();
+// fix 线路检测逻辑暂时注释 
+// const netWorkStatus = reactive({
+//   effectiveType: null,
+//   rtt: null,
+//   downlink: null,
+// })
+// const isOnline = ref(true)
+// navigator.connection.addEventListener('change', function (e) {
+//   updateNetWorkStatus(e.target)
+// })
+// window.addEventListener('online', () => {
+//   isOnline.value = true
+// })
+// window.addEventListener('offline', () => {
+//   isOnline.value = false
+// })
+// function updateNetWorkStatus(data) {
+//   netWorkStatus.effectiveType = data.effectiveType
+//   netWorkStatus.rtt = data.rtt
+//   netWorkStatus.downlink = data.downlink
+// }
+
+// onBeforeMount(() => {
+//   updateNetWorkStatus(navigator.connection)
+// })
+const { t } = useI18n();
+const OpenIM = getSDK();
+// const IMSDK = get_sdk();
+const userStore = useUserStore();
+const { setAppConfig, setAreaDictList, setUserInfo,setToken } = userStore;
+const { appConfig, firstScreenChecked } = storeToRefs(userStore);
+const { useUid,useEmailLang, useSystem } = use;
+const $api = inject("$api");
+const router = useRouter();
+const isChecked = ref(false);
+const isLoginState = ref(1); // 当前状态:1、登录2、注册
+const modelChecked = ref(false)
+const serviceType = ref("");
+const serviceShow = ref(false);
+const isGoogleLoginShowBtn = ref(false) // 是否展示谷歌登录按钮
+// 登录
+const toLogin = () => {
+  isLoginState.value = 1
+  const {name_login,email_pwd_login,phone_pwd_login,email_login,phone_login } = appConfig.value;
+  if (modelChecked.value) {
+    if (name_login || email_pwd_login || phone_pwd_login) return router.push( "/login");
+    if(phone_login) return router.push('/otherLogin?type=phone');
+    if(email_login) return router.push('/otherLogin?type=email');
+  } else {
+    isChecked.value = true
+    modelChecked.value = true
+  }
+};
+// 注册
+const toCreateAccount = () => {
+  isLoginState.value = 2
+  const {name_reg, email_reg, phone_reg} = appConfig.value;
+  if (modelChecked.value) {
+    if (name_reg) return router.push({ path: "/signinAccount" });
+    if (phone_reg) return router.push({ path: "/otherSignin", query: { type: "phone" } });
+    if (email_reg) return router.push({ path: "/otherSignin", query: { type: "email" } });
+  } else {
+    isChecked.value = true
+    modelChecked.value = true
+  }
+};
+// 隐私政策弹框
+const handeAgreement = (isShow) => {
+  modelChecked.value = isShow ? true : false
+  const {name_login,email_pwd_login,phone_pwd_login,email_login,phone_login,name_reg,phone_reg,email_reg } = appConfig.value;
+  if (modelChecked.value) {
+    if (isLoginState.value===1) {
+      if (name_login || email_pwd_login || phone_pwd_login) return router.push( "/login");
+      if(phone_login) return router.push('/otherLogin?type=phone');
+      if(email_login) return router.push('/otherLogin?type=email');
+    } else {
+      if (name_reg) return router.push({ path: "/signinAccount" });
+      if (phone_reg) return router.push({ path: "/otherSignin", query: { type: "phone" } });
+      if (email_reg) return router.push({ path: "/otherSignin", query: { type: "email" } });
+    }
+  }
+};
+// 隐私政策内容
+const toUserService = title => {
+  serviceType.value = title;
+  serviceShow.value = true;
+};
+
+// 获取浏览器版本号
+const browserVersion = () => {
+  const userAgent = window.navigator.userAgent;
+  const match = userAgent.match(
+    /(chrome|firefox|opera|safari|edge|ie)\/*\s*([\d.]+)/i
+  );
+  return match ? match[2] : "Unknown";
+};
+
+// 获取设备型号
+const deviceModel = () => {
+  const userAgent = window.navigator.userAgent;
+  const match = userAgent.match(
+    /(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/
+  );
+  return match ? match[1] : "Unknown";
+};
+onMounted(async () => {
+  isGoogleLoginShowBtn.value = showThirdLogin()
+  sessionStorage.setItem('close_showLoadingToast',1)//页面重新登录后，数据初始化时，允许loading
+  sessionStorage.setItem('againLoadingSign','')
+  // setToken("");
+  // setUserInfo({});
+  // removeAllLocalstorage();
+  // clearStore();
+  // conversationStore.clearConversationStore();
+  // localStorage.removeItem("im_token");
+  // localStorage.removeItem("token");
+  // localStorage.removeItem("user_id");
+  // console.log(browserVersion(), "browserVersion");
+  // console.log(deviceModel(), "deviceModel");
+  // 如果存在token跳转到登录页。需要清除token，退出登录
+  if (localStorage.getItem("token")) {
+    const res = await $api.login.logout({
+      device_id: localStorage.getItem('visitorId'),
+      platform: useSystem()
+    });
+    OpenIM.logout();
+  }
+  // 找出后端返回的线路中最优的那一条
+  let resLine =  await findFastestCdn()
+  console.error('resLine',resLine);
+  // const configRes = await $api.login.getConfigInfo();
+  // if (configRes.code != 0) return;
+  // setAppConfig(configRes.data);
+  // fix 2024-9-1 优化登录的时候加载慢问题:这个接口没啥用不用调用了
+  // const res = await $api.login.getAreaList();
+  // if (res.code != 0) return;
+  // const { areas } = res.data;
+  // setAreaDictList(areas);
+});
+const showThirdLogin = () => {
+  if (
+    Array.isArray(appConfig.value.third_party_login_list) &&
+    appConfig.value.third_party_login_list.length > 0
+  ) {
+    const arr = appConfig.value.third_party_login_list.filter(
+      item => item.open
+    );
+    if (arr.length > 0) {
+      const index = arr.findIndex(item => item.name === "google");
+      if (index != -1) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  } else {
+    return false;
+  }
+};
+const googleLoginFn = async response => {
+  const params = {
+    provider: "google",
+    access_token: response.access_token,
+    platform: 5,
+    device_id: useUid(),
+    device_model: navigator.userAgent
+  };
+  const res = await $api.user.sdkLogin(params);
+  // 账号被禁用
+  if (res.code === 6018) {
+    showToast(t("error_6018"));
+  }
+  // 用户注销
+  if (res.code === 6077) {
+    window.sessionStorage.setItem(
+      "loginUserInfo",
+      JSON.stringify({
+        area_code: "",
+        email: "",
+        login_type: 14,
+        password: "",
+        phone: "",
+        username: "",
+        token: res.data.token
+      })
+    );
+    router.push(`/restoreAccount`);
+    return;
+  }
+  if (res.code !== 0) return;
+  const { token, im_token, user_id, is_register } = res.data;
+  localStorage.setItem("token", token);
+  localStorage.setItem("im_token", im_token);
+  localStorage.setItem("user_id", user_id);
+  showToast({ position: "top", message: t("LoginSuccess") });
+  const userRes = await $api.login.userInfo();
+  setUserInfo(userRes.data);
+  //二次登录
+  // if (IMSDK) {
+  //   await IMSDK.login(im_config());
+  // }
+  if (is_register) {
+    // 去选择头像页面
+    router.push({ path: "/welcomePage" });
+  } else {
+    router.push({ path: "/home" });
+  }
+};
+watchEffect(() => {
+  if (firstScreenChecked.value) {
+    modelChecked.value = true;
+  }
+ })
+</script>
+<style scoped lang="less">
+.login {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("@/assets/shouyebeijing.png");
+  background-color: #101218;
+  // fix 线路检测逻辑暂时注释 
+  // .container {
+  //   width: 100%;
+  //   height: 5vh;
+  //   display: flex;
+  //   justify-content: center;
+  //   .item {
+  //     width: 200px;
+  //     color: #fff;
+  //     height: 200px;
+  //     display: flex;
+  //     flex-direction: column;
+  //     align-items: center;
+  //     justify-content: space-around;
+  //     z-index: 11111;
+  //   }
+  // }
+
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
+
+  .login-box {
+    min-width: 375px;
+    max-width: 750px;
+    padding: 0 10px;
+    border-radius: 5px;
+    margin-bottom: 150px;
+    height: 100%;
+    overflow: auto;
+
+    .logo-left {
+      /* position: fixed;
+                left: 104px;
+                top: 0; */
+      height: 60px;
+      display: flex;
+      align-items: center;
+
+      .img {
+        width: 30px;
+        height: 30px;
+      }
+
+      .img:nth-child(1) {
+        margin-right: 7px;
+      }
+
+      .img1 {
+        width: 100px;
+        // height: 60px;
+      }
+    }
+
+    .logo-center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: calc(100vh - 281px);
+      max-height: 480px;
+
+      .img:nth-child(1) {
+        width: 60px;
+        height: 60px;
+        margin-right: 20px;
+      }
+    }
+    .operate-area {
+      position: relative;
+      bottom: 0;
+    }
+  }
+
+  .btn {
+    :deep(.van-button) {
+      border-radius: 12px;
+    }
+
+    .img > img {
+      margin: 217px 0 10px 210px;
+      width: 36px;
+      height: 36px;
+    }
+
+    .btn1 {
+      color: #101218;
+      font-family: PingFang SC;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
+
+    .btn2 {
+      :deep(.van-button) {
+        border-color: #fff;
+        background: #101218;
+        color: #fff;
+        text-align: center;
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+  }
+}
+.login-radio {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin: 12px 0 16px 0;
+  font-size: 0.75rem;
+  span {
+    color: #a4a4a7;
+  }
+  .link {
+    color: #717175;
+    font-family: PingFang SC;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    width: 346px;
+  }
+  .link > span {
+    color: #0095f6;
+  }
+}
+:deep(.van-button) {
+  font-size: 1rem;
+}
+.third-login-wrap {
+  margin-top: 24px;
+  padding: 12px 20px;
+
+  .third-login {
+    margin-bottom: 16px;
+    height: 17px;
+    display: flex;
+    align-items: center;
+    &-line {
+      width: 100%;
+      border: 0.5px solid rgba(255, 255, 255, 0.15);
+    }
+    &-title {
+      color: rgba(255, 255, 255, 0.25);
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      margin: 0 8px;
+      // width: 74px;
+      white-space: nowrap;
+    }
+  }
+
+  .third-methods {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .methods-item {
+      width: 48px;
+      height: 48px;
+      margin-right: 20px;
+    }
+  }
+}
+@media screen and (max-width: 750px) {
+  .login {
+    width: 100vw;
+    height: 100%;
+    background-image: url("@/assets/shouyebeijing.png");
+    background-color: #101218;
+
+    display: flex;
+    justify-content: center;
+    padding: 0 20px;
+
+    .login-box {
+      min-width: 375px;
+      max-width: 750px;
+      padding: 0 16px;
+      border-radius: 5px;
+      margin-bottom: 150px;
+      height: 100%;
+      overflow: auto;
+
+      .logo-left {
+        /* position: fixed;
+                left: 104px;
+                top: 0; */
+        height: 60px;
+        display: flex;
+        align-items: center;
+
+        .img {
+          width: 30px;
+          height: 30px;
+        }
+
+        .img:nth-child(1) {
+          margin-right: 7px;
+        }
+
+        .img1 {
+          width: 100px;
+          // height: 60px;
+        }
+      }
+
+      .logo-center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .img:nth-child(1) {
+          width: 60px;
+          height: 60px;
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .btn {
+      :deep(.van-button) {
+        border-radius: 12px;
+      }
+
+      .img > img {
+        margin: 217px 0 10px 210px;
+        width: 36px;
+        height: 36px;
+        margin-top: 80px;
+      }
+
+      .btn1 {
+        color: #101218;
+        font-family: PingFang SC;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+
+      .btn2 {
+        :deep(.van-button) {
+          border-color: #fff;
+          background: #101218;
+          color: #fff;
+          text-align: center;
+          font-family: PingFang SC;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/login/components/forgotPassword.vue b/src/views/login/components/forgotPassword.vue
new file mode 100644
index 0000000..c2e8480
--- /dev/null
+++ b/src/views/login/components/forgotPassword.vue
@@ -0,0 +1,461 @@
+<template>
+  <!--手机登录 - 忘记密码 -->
+  <div class="forget-box">
+  <div class="flex-col page">
+    <van-image
+      class="self-start image_4"
+      :src="imgURL('return-icon.svg')"
+      @click="router.back()"
+    ></van-image>
+    <div class="flex-col self-stretch group_2" v-if="isMobel">
+      <van-image
+        class="self-start image_5"
+        :src="imgURL('sg-wjmm.svg')"
+      ></van-image>
+      <span class="self-start text_2">{{ $t("forgetPassword") }}</span>
+      <span class="self-start text_3">{{ $t("usePhoneRecovery") }}</span>
+      <div class="flex-col self-stretch group_3">
+        <!-- 手机号 -->
+        <CommonInput
+          v-model="formData.phone"
+          v-model:prepend="formData.area_code"
+          :placeholder="$t('inputNumber')"
+          :columns="areaDict"
+          @onClear="formData.phone = ''"
+          >{{ $t("password") }}</CommonInput
+        >
+        <div class="section_2 field_1">
+          <!--  手机验证码 -->
+          <CommonInput
+            ref="codeInputRef"
+            type="code"
+            v-model="formData.sms"
+            :placeholder="$t('verificationCode')"
+            :codeTime="60"
+            :codeSendStatus="codeSendStatus"
+            @onCodeSend="onCodeSend('mobel')"
+            @onCodeFinish="onCodeFinish"
+            @onClear="formData.sms=''"
+            autocomplete="off"
+            :disabledCodeSend="disabledPhoneCodeSend"
+            >{{ $t("password") }}</CommonInput
+          >
+        </div>
+        <van-button
+          class="text-wrapper_2 cf-button_1"
+          color="#1B1B22"
+          loading-type="spinner"
+          :disabled="!(formData.phone && formData.sms)" 
+          @click="handeNextStep"
+          >{{ $t("nextStep") }}</van-button
+        >
+      </div>
+    </div>
+    <div class="flex-col self-stretch group_2" v-else>
+      <van-image
+        class="self-start image_5"
+        :src="imgURL('sg-yxwjmm.svg')"
+      ></van-image>
+      <span class="self-start text_2">{{ $t("forgetPassword") }}</span>
+      <span class="self-start text_3">{{ $t("useEmailRecovery") }}</span>
+      <div class="flex-col self-stretch group_3">
+        <!-- 邮箱 -->
+        <CommonInput
+          v-model="formData.email"
+          :placeholder="$t('emailAddress')"
+          @onClear="formData.email = ''"
+          >{{ $t("password") }}</CommonInput
+        >
+        <div class="section_2 field_1">
+          <!-- 邮箱验证码 -->
+          <CommonInput
+            ref="codeInputRef"
+            type="code"
+            v-model="formData.sms"
+            :placeholder="$t('verificationCode')"
+            :codeTime="60"
+            :codeSendStatus="codeSendStatus"
+            @onCodeSend="onCodeSend"
+            @onCodeFinish="onCodeFinish"
+            @onClear="formData.sms=''"
+            :disabledCodeSend="disabledEmailCodeSend"
+            >{{ $t("password") }}</CommonInput
+          >
+        </div>
+        <van-button
+          class="text-wrapper_2 cf-button_1"
+          color="#1B1B22"
+          loading-type="spinner"
+          :disabled="!(formData.email && formData.sms)" 
+          @click="handeNextStep"
+          >{{ $t("nextStep") }} </van-button
+        >
+      </div>
+    </div>
+  </div>
+</div>
+<div class="footer-box-content">
+  <div class="flex-col self-stretch group_4">
+    <van-divider class="divider">{{ $t("otherRecoveryMethods") }}</van-divider>
+    <img class="self-center image_7" v-if="isMobel" :src="imgURL('yx-login.svg')"  @click="handeEmil(false)"/>
+    <img class="self-center image_7" v-else :src="imgURL('sg-login.svg')"  @click="handeEmil(true)"/>
+  </div>
+</div>
+</template>
+<script setup>
+import ABPInput from "@/components/ABPPInput1.vue";
+import headerNavbar from "@/components/header/headerNavbar.vue";
+import IconEyeHide from "@/components/icons/IconEyeHide.vue";
+import IconRemove from "@/components/icons/IconRemove.vue";
+import { phoneReg, emailReg } from "@/utils/index.js";
+import { isValidEmail } from "@/utils/tools";
+import { showToast,showFailToast,showSuccessToast } from "vant";
+import { ref, defineProps, reactive, onMounted } from "vue";
+import use from "@/use";
+import { useRouter, useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { CommonInput } from "@/components/index.js";
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+const $api = inject("$api");
+const { useUid, useEmailLang } = use;
+const formData = ref({
+  username: "",
+  area_code: "",
+  phone: "",
+  password: "",
+  email: "",
+  sms: "",
+});
+// 是否显示按钮
+const loading = ref(false);
+const isMobel = ref(true);
+const isVerificationCode = ref(false);
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+// 组件开发 测试
+const codeInputRef = ref(null);
+const codeSendStatus = ref("");
+// 手机号/邮箱输入框是否有值，是否可以发送验证码
+const disabledPhoneCodeSend = computed(() => {
+  if (formData.value.phone) {
+    return false
+  }
+  return true
+});
+// 手机号/邮箱输入框是否有值，是否可以发送验证码
+const disabledEmailCodeSend = computed(() => {
+  if (formData.value.email) {
+    return false
+  }
+  return true
+});
+// 校验手机号
+const validatePhone = (phone) => {
+  const phoneRegex = /^1[3-9]\d{9}$/;
+  return phoneRegex.test(phone);
+};
+// 校验邮箱邮箱正则表达式
+const validateEmail = (email) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+// 发送验证码
+const onCodeSend = async (type) => {
+  try {
+    if (type==='mobel') {
+      // 校验手机号
+      if (!validatePhone(formData.value.phone)) {
+        showToast({ message: t('phoneErrorOrNotExist') });
+        return;
+      }
+    } else {
+      if (!validateEmail(formData.value.email)) {
+        showToast({ message: t('error_6007') });
+        return;
+      }
+    }
+    // 获取验证码
+    const response = await getCode();
+    console.error('response',response);
+    if (response.code===0) {
+      codeSendStatus.value = "sended"; // 更新状态为已发送
+      codeInputRef.value.start(); // 启动验证码输入框的倒计时或动画效果
+      isVerificationCode.value = true
+      showToast(t('verificationCodeSent'));
+    } else if(response.code===6087){
+      showToast(t('phoneNotExist'))
+    } else if(response.code===6088){
+      showToast(t('error_6015'))
+    } else {
+      showToast(t('verificationCodeFailure'));
+    }
+  } catch (error) {
+    console.error(error);
+    showToast(t('verificationCodeFailure'));
+  }
+};
+
+const onCodeFinish = () => {
+  codeSendStatus.value = "unsent";
+  codeInputRef.value.reset()
+};
+// 下一步
+const handeNextStep = async () => {
+  try {
+    // 手机号和验证码必须有值才可以进入到忘记密码
+    if (formData.value.sms && isVerificationCode.value) {
+      // 校验验证码是否正确在进行跳转
+      let params = {
+        device_id: useUid(),
+        multi_step_verify:true,
+        platform: 4,
+        verify_code:formData.value.sms,
+        "verify_by": 1,
+      };
+      if (isMobel.value) {
+        params.area_code = formData.value.area_code;
+        params.phone = formData.value.phone;
+      } else {
+        params.verify_by = 2;
+        params.email = formData.value.email;
+      }
+      const res = await $api.login.checkCode(params);
+      console.error('========resres',res);
+      if (res.code === 0) {
+        let routerParams = {
+          ...formData.value,
+          isMobel:isMobel.value,
+          verify_key:res.data.verify_key,
+          device_id:params.device_id,
+        }
+        router.push({ name: "resetPassword",query: routerParams });
+      }
+    } else {
+      // 没有获取验证码直接点击了下一步
+      // 手机号
+      if (isMobel.value) {
+        // 校验手机号
+        if (!validatePhone(formData.value.phone)) {
+          showToast({ message: t('phoneErrorOrNotExist') });
+          return;
+        }
+        // 获取验证码
+        const response = await getCode();
+        console.error('手机号response',response);
+        if (response.code===0) {
+          codeSendStatus.value = "sended"; // 更新状态为已发送
+          codeInputRef.value.start(); // 启动验证码输入框的倒计时或动画效果
+          isVerificationCode.value = true
+          showToast(t('verificationCodeSent'));
+        } else if(response.code===6087){
+          showToast(t('phoneNotExist'))
+        } else if(response.code===6088){
+          showToast(t('error_6015'))
+        } else {
+          showToast(t('verificationCodeFailure'));
+        }
+      // 邮箱
+      } else {
+        if (!validateEmail(formData.value.email)) {
+          showToast({ message: t('error_6007') });
+          return;
+        }
+        // 获取验证码
+        const response = await getCode();
+        console.error('邮箱response',response);
+        if (response.code===0) {
+          codeSendStatus.value = "sended"; // 更新状态为已发送
+          codeInputRef.value.start(); // 启动验证码输入框的倒计时或动画效果
+          isVerificationCode.value = true
+          showToast(t('verificationCodeSent'));
+        } else if(response.code===6087){
+          showToast(t('phoneNotExist'))
+        } else if(response.code===6088){
+          showToast(t('error_6015'))
+        } else {
+          showToast(t('verificationCodeFailure'));
+        }
+      }
+    }
+  } catch (error) {
+    console.error('error',error);
+  }
+};
+// 邮箱登录
+const handeEmil = (val) => {
+  isMobel.value = val;
+  // 每次切换置空数据
+  formData.value.phone = ''
+  formData.value.username = ''
+  formData.value.password = ''
+  formData.value.email = ''
+  formData.value.sms = ''
+};
+// =======================================
+const areaDict = ref([]);
+const initArea = async () => {
+  const res = await $api.login.getAreaList();
+  const { areas } = res.data;
+  areaDict.value = areas;
+  formData.value.area_code = areas[0].areaCode;
+};
+
+// 发送验证码
+const getCode = async () => {
+  let params = {
+    device_id: useUid(),
+    platform: 5,
+    verify_type: 3,
+  };
+  const language = useEmailLang();
+  if (isMobel.value) {
+    params.area_code = formData.value.area_code;
+    params.phone = formData.value.phone;
+    params.verify_by = 1;
+    params.email = "";
+  } else{
+    params.email = formData.value.email;
+    params.verify_by = 2;
+    params.area_code = "";
+    params.phone = "";
+    params.language = language;
+  }
+  const res = await $api.login.sendCode(params);
+  return res;
+};
+
+// 键盘弹出与隐藏的处理函数
+function handleKeyboard(e) {
+  const { keyboardHeight } = e;
+  console.error('keyboardHeight',keyboardHeight);
+  document.body.style.height = '100%';
+  document.body.style.height = `${window.innerHeight - keyboardHeight}px`;
+}
+ 
+// 监听键盘显示事件
+function setupKeyboardListener() {
+  window.addEventListener('resize', handleKeyboard);
+  window.addEventListener('orientationchange', handleKeyboard);
+}
+ 
+// 移除监听器
+function removeKeyboardListener() {
+  window.removeEventListener('resize', handleKeyboard);
+  window.removeEventListener('orientationchange', handleKeyboard);
+}
+
+onMounted(() => {
+  initArea();
+  setupKeyboardListener();
+});
+
+onUnmounted(() => {
+  removeKeyboardListener();
+});
+</script>
+<style scoped lang="less">
+@import "@/style/common-styles.less";
+// @media (min-width: 450px) { /* PC 端样式 */
+//   .page {
+//     min-width: 375px;
+//     width: 375px !important;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//   }
+// }
+.forget-box{
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+}
+.page {
+  padding: 27px 15.5px 89.5px 16px;
+  background-color: #ffffff;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-width: 375px;
+  max-width: 750px;
+  position: relative; /* 确保内部绝对定位的元素以容器为基准 */
+  .image_4 {
+    width: 24px;
+    height: 25px;
+  }
+  .group_2 {
+    margin-top: 27.5px;
+    .image_5 {
+      border-radius: 50%;
+      width: 48px;
+      height: 48px;
+    }
+    .text_2 {
+      margin-top: 21px;
+      color: #1b1b22;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      line-height: 17px;
+    }
+    .text_3 {
+      margin-top: 9.5px;
+      color: #1b1b2266;
+      font-size: 14px;
+      font-family: PingFang SC;
+      line-height: 13px;
+    }
+    .group_3 {
+      margin-top: 19.5px;
+      .field {
+        background-color: #f6f6f6;
+        border-radius: 16px;
+      }
+      .field_1 {
+        background-color: #f6f6f6;
+        border-radius: 16px;
+        margin-top: 8px;
+      }
+      .text-wrapper_2 {
+        margin: 16px 4.5px 0 4px;
+      }
+      .cf-button_1 {
+        padding: 16px 0px;
+        border-radius: 16px;
+        border: unset !important;
+        height: 48px;
+        font-family: PingFang SC;
+        font-size: 16px;
+        line-height: 15px;
+        &.van-button--disabled {
+          background-color: #f6f6f6 !important;
+          border: 1px solid #f6f6f6 !important;
+          color: #d1d1d3 !important;
+        }
+      }
+    }
+  }
+}
+.group_4 {
+  width: 100%;
+  background-color: #fff;
+  min-width: 375px;
+  max-width: 750px;
+  box-sizing: border-box; /* 确保内边距和边框不会影响元素的实际宽度 */
+  :deep(.divider){
+    border-color: #f6f6f6;
+    margin:0 0 1rem 0;
+    font-size: 0.75rem;
+  }
+  .image_7 {
+    border-radius: 45px;
+    width: 48px;
+    height: 48px;
+  }
+}
+</style>
diff --git a/src/views/login/components/otherLogin.vue b/src/views/login/components/otherLogin.vue
new file mode 100644
index 0000000..3b355ba
--- /dev/null
+++ b/src/views/login/components/otherLogin.vue
@@ -0,0 +1,1196 @@
+<template>
+  <div class="login">
+    <div class="login-box">
+      <headerNavbar></headerNavbar>
+      <!-- 二维码登录  只有密码登录不存在的时候才展示-->
+      <div class="login-type-switch" v-if="!isMobileBrowser() && appConfig.scan_code_login && appConfig.name_login===false">
+        <div :class="{'form-login': isFormLogin, 'qrcode-login': !isFormLogin}">
+          <div class="login-txt">{{ isFormLogin ? t('scanLogin') : t('formLogin') }}</div>
+          <img @click="isFormLogin = !isFormLogin" :src="isFormLogin ? qrcodeLogin : fromLogin" alt="" />
+        </div>
+      </div>
+      <!-- 二维码登录 -->
+      <div 
+        class="login-for-qrcode"
+        v-show="!isFormLogin"
+        v-if="!isMobileBrowser()"
+      >
+        <div class="qr-ttl">
+          <div class="qr-text">{{ $t("scanText") }}</div>
+          <div class="sub-text">{{ $t("scanSubText") }}</div>
+        </div>
+        <div class="qrcode-wrapper">
+          <div class="qrcode">
+            <QRCodeVue3
+              v-if="qrCodeText"
+              :width="264"
+              :height="264"
+              :value="qrCodeText"
+              :key="qrCodeText"
+              :margin="12"
+              :qrOptions="{
+                typeNumber: 0,
+                mode: 'Byte',
+                errorCorrectionLevel: 'H',
+              }"
+              :imageOptions="{
+                hideBackgroundDots: true,
+                imageSize: 0.2,
+                margin: 0,
+              }"
+              :dotsOptions="{
+                type: 'dots',
+                color: '#6898E6',
+              }"
+              :backgroundOptions="{ color: '#fff' }"
+              :cornersSquareOptions="{ type: 'dot', color: '#6898E6' }"
+              :cornersDotOptions="{ type: 'dot', color: '#6898E6' }"
+              myclass="my-qur"
+              imgclass="img-qr"
+              :image="LogoImg"
+            >
+            </QRCodeVue3>
+          <!-- 二维码过期 -->
+          <div class="expired" v-if="scanStatus === 4">
+            {{ $t("qrcodeExpired") }}
+          </div>
+          <div class="scan-success" v-if="[1, 2].includes(scanStatus)">
+            <img :src="scanSuccess" alt="" />
+            <dl>
+              <dt>{{ $t("scanSuccess") }}</dt>
+              <dd>{{ $t("confromLogin") }}</dd>
+            </dl>
+          </div>
+        </div>
+        <div class="tips">{{ $t("expiredTime10") }}</div>
+        <div class="reflesh-btn" @click="onRefleshQrCode">
+          <img :src="qrcodeReflesh" alt="" />{{ $t("reflesh") }}
+        </div>
+        </div>
+      </div>
+      <!-- 这里是默认邮箱和手机号登录 -->
+      <span v-if="isFormLogin===true">
+        <div class="logo-center">
+          <div class="icon">
+            <img v-if=" loginType == 'phone' " class="img" src="@/assets/login/iphone.svg" alt="" />
+            <img v-if=" loginType == 'email' "  class="img" src="@/assets/login/email.svg" alt="" />
+          </div>
+          <div class="title">{{ title }}</div>
+        </div>
+        <!-- 手机号登录 -->
+        <div style="padding-top:20px"  v-if="loginType == 'phone'">
+          <div class="input-wrap">
+            <CommonInput 
+              v-model="formData.phone"
+              v-model:prepend="formData.area_code"
+              :placeholder="$t('phoneNumber')"
+              :columns="areaDict"
+              @onClear="onClear('phone')"
+              ></CommonInput>
+          </div>
+          <div class="input-wrap">
+            <CommonInput 
+              ref="codeInputRef"
+              @onClear="onClear('phoneSms')"
+              type="code"
+              v-model="formData.phoneSms"
+              maxlength="6"
+              :placeholder="$t('verificationCode')"
+              :codeTime="60"
+              :codeSendStatus="verifyCodeForm.status"
+              @onCodeSend="getCodeClick"
+              @onCodeFinish="onCodeFinish"
+              autocomplete="off"
+              :codeText="verifyCodeForm.text"
+              :disabledCodeSend="disabledCodeSend"
+              ></CommonInput>
+          </div>
+        </div>
+        <!-- 邮箱登录 -->
+        <div style="padding-top:20px"  v-if="loginType == 'email'">
+          <div class="input-wrap">
+            <CommonInput 
+              v-model="formData.email"
+              :placeholder="$t('please_input_email')"
+              @onClear="onClear('email')"
+              ></CommonInput>
+          </div>
+          <div class="input-wrap">
+            <CommonInput 
+              ref="codeInputRef"
+              @onClear="onClear('emailSms')"
+              type="code"
+              v-model="formData.emailSms"
+              maxlength="6"
+              :placeholder="$t('verificationCode')"
+              :codeTime="60"
+              :codeSendStatus="verifyCodeForm.status"
+              @onCodeSend="getCodeClick"
+              @onCodeFinish="onCodeFinish"
+              autocomplete="off"
+              :codeText="verifyCodeForm.text"
+              :disabledCodeSend="disabledCodeSend"
+              ></CommonInput>
+          </div>
+        </div>
+        <div style="margin: 16px 4px;">
+          <van-button
+            class="login_btn"
+            :loading="loading"
+            color="#1B1B22"
+            block
+            @click="loginClick"
+            :disabled="isDisabled"
+          >
+            {{ $t("login") }}
+          </van-button>
+        </div>
+      </span>
+    </div>
+  </div>
+  <!-- 底部导航栏 -->
+  <div class="footer-box-content">
+    <!-- 其他登录方式 -->
+    <div class="flex-col self-stretch view_4" v-if="appConfig.phone_login || appConfig.email_login">
+      <van-divider class="divider" v-if="appConfig.phone_login || appConfig.email_login || isGoogleLoginShowBtn">{{ $t("otherLoginStyle") }}</van-divider>
+      <div class="flex-row justify-between equal-division group_7">
+        <img
+          class="equal-division-item_1"
+          :src="imgURL('sg-login.svg')"
+          v-if="appConfig.phone_login && loginType == 'email'"
+          @click="otherLogin('phone')"
+        />
+        <img
+          class="equal-division-item_1"
+          :src="imgURL('yx-login.svg')"
+          v-if="appConfig.email_login && loginType == 'phone'"
+          @click="otherLogin('email')"
+        />
+        <!-- 谷歌登录 -->
+        <div class="equal-division-item_1" v-if="isGoogleLoginShowBtn && appConfig.name_login===false">
+          <GoogleLogin :callback="googleLoginFn" popup-type="TOKEN">
+          <img ref="signinBtn" :src="googleLogin" alt="" />
+          </GoogleLogin>
+        </div>
+      </div>
+    </div>
+  </div>
+  <userService
+    :type="serviceType"
+    :show="serviceShow"
+    @close="serviceShow = false"
+  ></userService>
+  <van-dialog
+    v-model:show="googleModel"
+    :title="'谷歌验证码'"
+    show-cancel-button
+    confirmButtonColor="#538FE1"
+    @confirm="confirmGoogleCode"
+    @cancel="cancelGoogleCode"
+  >
+    <div class="google-code">
+      <van-field
+        v-model="googleCode"
+        maxlength="6"
+        :placeholder="'请输入谷歌验证码'"
+      />
+    </div>
+  </van-dialog>
+</template>
+<script setup>
+import ABPInput from "@/components/ABPPInput2.vue";
+import headerNavbar from "@/components/header/headerNavbar.vue";
+import userService from "@/views/login/components/userService.vue";
+import { showToast,showConfirmDialog } from "vant";
+import { ref, defineProps, reactive, onMounted, computed,onUnmounted } from "vue";
+import qrcodeReflesh from "@/assets/svg/qrcodereflesh.svg";
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from "pinia";
+import use from "@/use";
+import { encrypt } from "@/utils/index.js";
+import { CommonInput } from "@/components/index.js";
+import { isMobileBrowser } from "@/utils/tools"
+import qrcodeLogin from "@/assets/svg/qrcode-login.svg";
+import fromLogin from "@/assets/svg/form-login.svg";
+import usePolling from '@/use/usePolling'
+import QRCodeVue3 from 'qrcode-vue3'
+import LogoImg from '@/assets/logo1.png'
+import { useRouter, useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import IconRemoveBG from "@/components/icons/IconRemoveBG.vue";
+import scanSuccess from "@/assets/svg/scan-success.svg";
+import FingerprintJS from "@fingerprintjs/fingerprintjs";
+import googleLogin from "@/assets/svg/google-login.svg";
+import { useContactStore } from "@/stores/contact";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const contactStore = useContactStore();
+const { friendCreateCount } = storeToRefs(contactStore)
+const agreementDialog = ref(false);
+const router = useRouter();
+const route = useRoute();
+const { useUid, useCoinId, useEmailLang, useSystem } = use;
+const { setNewFriendApplyCount, updateNewFriendApply } = contactStore
+
+const userStore = useUserStore();
+const {
+  setToken,
+  setUserInfo,
+  setAppConfig,
+  setRememberEmail,
+  setRememberPhone
+} = userStore;
+const { appConfig, rememberPhone, rememberEmail } = storeToRefs(userStore);
+const googleModel = ref(false)
+const { t } = useI18n();
+const $api = inject("$api");
+// 登录类型 默认为账号密码登录
+const isFormLogin = ref(true)
+const qrCodeText = ref('')
+const isGoogleLoginShowBtn = ref(false) // 是否展示谷歌登录按钮
+
+
+// const data = reactive({
+//   form: {
+//     checked: false
+//   }
+// });
+const formData = ref({
+  phone: window.localStorage.getItem("rememberPhone") || "",
+  email: window.localStorage.getItem("rememberEmail") || "",
+  area_code: "",
+  password: "",
+  phoneSms: "",
+  emailSms: ""
+});
+const serviceType = ref("");
+const serviceShow = ref(false);
+const verifyCodeForm = ref({
+  text: t("getVerifyCode"),
+  status: "unsent"
+});
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+const expiredTimer = ref(null)
+const EXPIRED_TIME = 10 * 60 * 1000
+const checkExpiredFun = () => {
+  expiredTimer.value = setTimeout(() => {
+    console.log('10分钟超时----------------')
+    resetPolling()
+    scanStatus.value = 4
+  }, EXPIRED_TIME)
+}
+const codeId = ref('')
+const genQrCode = async () => {
+  const res = await $api.login.generateQrcode();
+  if (res.code !== 0) return '';
+  codeId.value = res.data.result.split('?')[1].split('=')[1]
+  return res.data.result
+}
+const onRefleshQrCode = async () => {
+  qrCodeText.value = await genQrCode()
+  scanStatus.value = 0
+  manualCallPollingFunction()
+  checkExpiredFun()
+}
+const qrCodeInit = async () => {
+  // 打开轮询定时器
+  qrCodeText.value = await genQrCode()
+  manualCallPollingFunction()
+  checkExpiredFun()
+}
+// 状态 初始化状态：0；已经扫码：1；登录确认：2；取消登录：3 ;本地超时 4
+const scanStatus = ref(0)
+const getScanStatus = async () => {
+  const res = await $api.login.getLoginQrcode({ code: codeId.value })
+  console.log('getScanStatus::', res)
+  scanStatus.value = res.data.status
+  // 确认登录
+  if (res.data.status === 2) {
+    // 成功
+    // 关掉轮询定时器
+    manualStopInterval()
+    qrCodeLogin()
+  } else if (res.data.status === 3) {
+    // 取消登录
+    resetPolling()
+    qrCodeInit()
+  }
+}
+const qrCodeLogin = async () => {
+  const loginParams = await genLoginParams();
+  loginParams.login_type = 15
+  loginParams.qr_code = codeId.value
+  login(loginParams)
+}
+const resetPolling = () => {
+  scanStatus.value = 0
+  manualStopInterval()
+  if (expiredTimer.value) {
+    window.clearTimeout(expiredTimer.value)
+    expiredTimer.value = null
+  }
+}
+
+const getVisitorId = async () => {
+  const localVisitorId = localStorage.getItem("visitorId");
+  if (localVisitorId) return localVisitorId
+  const fpPromise = await FingerprintJS.load();
+  const { visitorId } = await fpPromise.get();
+  return visitorId
+}
+const genLoginParams = async () => {
+  const params = {}
+  const simpleDevice = navigator.userAgent.match(/\((.*?)\)/g);
+  params.device_id = await getVisitorId();
+  params.device_model =
+    simpleDevice && simpleDevice.length
+      ? simpleDevice[0].split(";")[0].slice(1)
+      : "unknown";
+  params.platform = useSystem(); // 1ios 2安卓 3pc 4h5
+  params.login_type = 6; // 登录类型 1用户名 2手机号码 3邮箱
+  params.email_pwd_login = appConfig.value.email_pwd_login;
+  params.phone_pwd_login = appConfig.value.phone_pwd_login;
+  params.username_pwd_login = appConfig.value.name_login;
+  if (googleCode.value) {
+    params.google_code = googleCode.value
+  } else {
+    delete params.google_code
+  }
+  return params
+}
+
+const login = async formDataClone => {
+  loading.value = true;
+  try{
+    const loginRes = await $api.login.login(formDataClone);
+    loading.value = false;
+    console.error('==================loginRes',loginRes);
+    // 用户注销
+    if (loginRes.code === 6077) {
+      window.sessionStorage.setItem(
+        "loginUserInfo",
+        JSON.stringify({ ...formDataClone, password: formData.value.password })
+      );
+      router.push(`/restoreAccount`);
+      return;
+    }
+    // 内部用户
+    if (loginRes.code === 6110) {
+      googleModel.value = true
+      return
+    }
+    // 设备不可信6105 皆是与后端约定好的code码  6107 设备审核失败
+    if (loginRes.code === 6105 || loginRes.code === 6107) {
+      await showConfirmDialog({
+        title: t("apply_ttl"),
+        message: t('apply_tips'),
+        confirmButtonText: t('apply_send'),
+        confirmButtonColor: "#5F97E3"
+      });
+      await $api.login.addVerify({
+        device_id: formDataClone.device_id,
+        device_model: formDataClone.device_model,
+        platform: 5,
+        user_id: loginRes.data.user_id
+      });
+
+      showToast({
+        position: "top",
+        message: t('await_accepting')
+      });
+      // 如果是扫码登录，刷新二维码
+      if (!isFormLogin.value) {
+        qrCodeInit()
+      }
+      return;
+    }
+    // 设备审核中
+    if (loginRes.code === 6106) {
+      showToast({ position: "top", message: t('error_6106') });
+      // 如果是扫码登录
+      if (!isFormLogin.value) {
+        qrCodeInit()
+      }
+      return;
+    }
+    // 谷歌验证码错误
+    if (loginRes.code === 6082) {
+      googleCode.value = ''
+      if (!isFormLogin.value) {
+        qrCodeInit()
+      }
+      return
+    }
+    if (loginRes.code === 6018) {
+      showToast({ position: "top", message: t('error_6018') });
+    }
+    if (loginRes.code === 6093) {
+      getAppConfig();
+      showToast({ position: "top", message: t('error_6093') });
+    }
+    if (loginRes.code !== 0) {
+      googleCode.value = ''
+      return
+    };
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem("token", token);
+    localStorage.setItem("im_token", im_token);
+    localStorage.setItem("user_id", user_id);
+    showToast({ position: "top", message: t("LoginSuccess") });
+    // 登录成功后获取用户配置信息【字体大小、聊天背景、】
+    await getUserSettings()
+    let userRes = await $api.login.userInfo();
+    console.error('userResuserResuserResuserRes22222222',userRes);
+    if (userRes.code !== 0) return;
+    setUserInfo(userRes.data);
+    // 用户活跃
+    await $api.user.accountActive({user_id})
+    /* 
+    ** 2024-6-27 偶现【IM- H5】【登录】H5登录 经常出现，提示登录成后， 但是无法入到会话列表
+    const { data } = await IMSDK.getLoginStatus()
+    if (IMSDK) {
+        await IMSDK.login(im_config());
+    }
+    */ 
+   console.error('userRes.data',userRes.data);
+   
+    // 是否设置用户昵称
+    if (userRes.data && !userRes.data.nickname) {
+      router.push("/welcomePage");
+    } else {
+      router.push({ path: "/home" });
+    }
+    let searchTime = !!friendCreateCount.value ? Number(friendCreateCount.value) : Date.now()
+    const res = await $api.contact.getRespondFriendApplyByTime({
+      time: searchTime
+    })
+    if (res.code != 0) return
+    setNewFriendApplyCount(res.data.count)
+    updateNewFriendApply(res && res.data && res.data.count && res.data.count > 0 ? true : false)
+  } catch(err) {
+    if (err === 'cancel' && !isFormLogin.value) {
+      qrCodeInit()
+    }
+    loading.value = false;
+  }
+};
+
+const googleLoginFn = async response => {
+  const params = {
+    provider: "google",
+    access_token: response.access_token,
+    platform: useSystem(),
+    device_id: useUid(),
+    device_model: navigator.userAgent
+  };
+  const res = await $api.user.sdkLogin(params);
+  // 账号被禁用
+  if (res.code === 6018) {
+    showToast({ position: "top", message: t("error_6018") });
+  }
+  // 用户注销
+  if (res.code === 6077) {
+    window.sessionStorage.setItem(
+      "loginUserInfo",
+      JSON.stringify({
+        area_code: "",
+        email: "",
+        login_type: 14,
+        password: "",
+        phone: "",
+        username: "",
+        token: res.data.token
+      })
+    );
+    router.push(`/restoreAccount`);
+    return;
+  }
+  if (res.code !== 0) return;
+  const { token, im_token, user_id, is_register } = res.data;
+  localStorage.setItem("token", token);
+  localStorage.setItem("im_token", im_token);
+  localStorage.setItem("user_id", user_id);
+  showToast({ position: "top", message: t("LoginSuccess") });
+  const userRes = await $api.login.userInfo();
+  setUserInfo(userRes.data);
+  //二次登录
+  // if (IMSDK) {
+  //   await IMSDK.login(im_config());
+  // }
+  if (is_register) {
+    // 去选择头像页面
+    router.push({ path: "/welcomePage" });
+  } else {
+    router.push({ path: "/home" });
+  }
+};
+const getAppConfig = async () => {
+  const configRes = await $api.login.getConfigInfo();
+  const groupRes = await $api.login.getGroupSettings();
+  if (configRes.code != 0) return;
+  setAppConfig({
+    ...appConfig.value,
+    ...configRes.data,
+    ...groupRes.data
+  });
+};
+const { manualCallPollingFunction, manualStopInterval } = usePolling(getScanStatus, 2000)
+
+
+onMounted(async () => {
+  console.error(1111,route.query.type);
+  // 获取谷歌登录状态
+  isGoogleLoginShowBtn.value = showThirdLogin()
+  initArea();
+  //   if (!appConfig.value.phone_login) {
+  //     loginType.value = "email";
+  //     router.push({ name: "otherLogin", query: { type: "email" } });
+  //   }
+  const configRes = await $api.login.getConfigInfo();
+  if (configRes.code != 0) return;
+  setAppConfig(configRes.data);
+  if (route.query.type === "email") {
+    // loginType.value = "email";
+    if (appConfig.value.email_login) {
+      router.push({ name: "otherLogin", query: { type: "email" } });
+    } else {
+      router.push("/firstScreen");
+    }
+  }
+  if (route.query.type === "phone") {
+    // loginType.value = "phone";
+    if (appConfig.value.phone_login) {
+      router.push({ name: "otherLogin", query: { type: "phone" } });
+    } else {
+      router.push("/firstScreen");
+    }
+  }
+});
+// 标题
+const title = computed(() => {
+  if (loginType.value === "phone") {
+    return t("mobileLogin");
+  }
+  if (loginType.value === "email") {
+    return t("emailLogin");
+  }
+ })
+const isDisabled = computed(() => {
+  let flag = false;
+  if (
+    route.query.type === "phone" &&
+    (!formData.value.phone || !formData.value.phoneSms)
+  ) {
+    flag = true;
+  } else if (
+    route.query.type === "email" && 
+    (!formData.value.email || !formData.value.emailSms)
+  ) {
+    flag = true;
+  } else {
+    flag = false;
+  }
+  return flag;
+});
+const areaDict = ref([]);
+const initArea = async () => {
+  const res = await $api.login.getAreaList();
+  const { areas } = res.data;
+
+  areaDict.value = areas;
+  formData.value.area_code = areas[0].areaCode;
+};
+
+// 手机号/邮箱输入框是否有值，是否可以发送验证码
+const disabledCodeSend = computed(()=>{
+    const type = route.query.type
+    if(type === 'phone'){
+        return !formData.value.phone
+    }else if(type === 'email') {
+        return !formData.value.email
+    }
+    return true
+})
+const loginType = computed(() => {
+  return route.query.type;
+});
+watch(() => loginType.value, () => {
+    codeInputRef.value && codeInputRef.value.reset()
+    verifyCodeForm.value = {
+    text: t('getVerifyCode'),
+    status: 'unsent'
+    }
+    formData.value = {
+      phone: window.localStorage.getItem("rememberPhone") || "",
+      email: window.localStorage.getItem("rememberEmail") || "",
+      area_code: "",
+      password: "",
+      phoneSms: "",
+      emailSms: ""
+    }
+    initArea()
+})
+
+watch(() => isFormLogin.value, async (val) => {
+  // 密码登录
+  if (val) {
+    // 关掉轮询定时器
+    resetPolling()
+  } else {
+    // 打开轮询定时器
+    qrCodeInit()
+  }
+})
+// fix 优化代码:减少条件分支、简化筛选逻辑、some() 方法在找到符合条件的元素后会立即返回 true，不会继续遍历剩余的元素
+const showThirdLogin = () => {
+  const thirdPartyLogins = appConfig.value.third_party_login_list;
+  // 如果 thirdPartyLogins 不是数组或者长度为 0，直接返回 false
+  if (!Array.isArray(thirdPartyLogins) || thirdPartyLogins.length === 0) {
+    return false;
+  }
+  // 使用 some() 方法来检查是否有开启的第三方登录项
+  return thirdPartyLogins.some(item => item.open && item.name === "google");
+};
+const loading = ref(false);
+const onFinish = () => {
+  verifyCodeForm.value.status = "finished";
+  verifyCodeForm.value.text = t("reget");
+};
+// 发送验证码
+const getCode = async () => {
+  let params = {
+    device_id: useUid(),
+    platform: 5,
+    verify_type: 2
+  };
+  const language = useEmailLang();
+  if (loginType.value === "phone") {
+    params.area_code = formData.value.area_code;
+    params.phone = formData.value.phone;
+    params.verify_by = 1;
+  } else if (loginType.value === "email") {
+    params.email = formData.value.email;
+    (params.verify_by = 2), (params.language = language);
+  }
+  const res = await $api.login.sendCode(params);
+  return res;
+};
+const codeInputRef = ref(null)
+const onCodeFinish = () => {
+  verifyCodeForm.value.status = "finished";
+  verifyCodeForm.value.text = t("reget");
+}
+const getCodeClick = async () => {
+  if (loginType.value === "phone" && formData.value.phone === "") return;
+  if (loginType.value === "email" && formData.value.email === "") return;
+  if (verifyCodeForm.value.status == "sended") return;
+  if (verifyCodeForm.value.status == "unsent") {
+    verifyCodeForm.value.status = "sended";
+    codeInputRef.value.start();
+    const res = await getCode();
+    if (res.code === 0) {
+      showToast({ message: t("verificationCodeSent"), position: "top" });
+    } else {
+      codeInputRef.value.reset();
+      verifyCodeForm.value.status = "finished";
+      verifyCodeForm.value.text = t("reget");
+    }
+  } else if (verifyCodeForm.value.status == "finished") {
+    verifyCodeForm.value.status = "sended";
+    codeInputRef.value.reset();
+    codeInputRef.value.start();
+    const res = await getCode();
+    if (res.code === 0) {
+      showToast({ message: t("verificationCodeSent"), position: "top" });
+    } else {
+      codeInputRef.value.reset();
+      verifyCodeForm.value.status = "finished";
+      verifyCodeForm.value.text = t("reget");
+    }
+  }
+};
+
+const loginClick = async () => {
+  if (loginType.value === "mobile" && !formData.value.phone) {
+    return showToast({ position: "top", message: "请先输入手机号或密码" });
+  } else if (loginType.value === "email" && !formData.value.email) {
+    return showToast({ position: "top", message: "请先输入邮箱或密码" });
+  }
+  const formDataValue = formData.value;
+  const formDataClone = {};
+  formDataClone.device_id = useUid();
+  formDataClone.device_model = navigator.userAgent;
+  formDataClone.platform = useSystem(); // 1ios 2安卓 3pc 4h5
+  formDataValue.phone && (formDataClone.phone = formDataValue.phone);
+  formDataValue.email && (formDataClone.email = formDataValue.email);
+  // formDataClone.password = encrypt(formDataValue.password);
+  if (googleCode.value) {
+    formDataClone.google_code = googleCode.value
+  } else {
+    delete formDataClone.google_code
+  }
+  if (loginType.value === "phone") {
+    formDataClone.area_code = formDataValue.area_code;
+    formDataClone.login_type = 2;
+    formDataClone.verify_code = formData.value.phoneSms;
+    // 记住手机号
+    formDataClone.email = undefined; // 因为记住邮箱了 所以在用手机号登录的时候要清空邮箱
+    setRememberPhone(formDataClone.phone);
+  } else if (loginType.value === "email") {
+    formDataClone.login_type = 3;
+    formDataClone.verify_code = formData.value.emailSms;
+    // 记住邮箱
+    formDataClone.phone = undefined; // 因为记住手机号了 所以在用手机号登录的时候要清空手机号
+    setRememberEmail(formDataClone.email);
+  }
+  login(formDataClone);
+};
+
+const isInputGoogleCode = ref(false)
+const googleCode = ref('')
+
+// const confirmGoogleCode = (val) => {
+//   if (googleCode.value.length !== 6) {
+//     showToast({
+//       position: "top",
+//       message: '请输入谷歌验证码'
+//     });
+//     return
+//   }
+//   loginClick()
+// }
+const confirmGoogleCode = (val) => {
+  if (googleCode.value.length !== 6) {
+    showToast({
+      position: "top",
+      message: '请输入谷歌验证码'
+    });
+    return
+  }
+  if (isFormLogin.value) {
+    loginClick()
+  } else {
+    qrCodeLogin()
+  }
+}
+
+const cancelGoogleCode = () => {
+  googleCode.value = ''
+  isInputGoogleCode.value = false
+  qrCodeInit()
+}
+
+// 清空输入框
+const onClear = (val) => {
+  formData.value[val] = "";
+}
+const otherLogin = async type => {
+  router.replace({ name: "otherLogin", query: { type } });
+};
+// 获取用户配置
+const getUserSettings = async () => {
+  const params = {
+    user_id: localStorage.getItem("user_id"),
+  };
+  const res = await $api.setting.getUserInfoSettings(params);
+  if (res.code !== 0) return;
+  // 设置字体大小
+  const fontSize = res.data?.fontSize || 16
+  // 将字体大小存储到pinia中
+  friendState.seGlobalFontSize(fontSize)
+  const html = document.querySelector('html');
+  // 动态设置根元素的字体大小
+  html.style.fontSize = `${fontSize}px`;
+};
+// 退出当前页面的时候清掉定时器
+onUnmounted(() => {
+  resetPolling()
+})
+</script>
+<style scoped lang="less">
+.footer-box-content {
+  background-color: #fff;
+  min-width: 375px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  bottom: 16px;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}
+.login-type-switch {
+    .login-txt {
+      position: relative;
+      padding: 0 12px;
+      margin-right: 11px;
+      line-height: 36px;
+      font-size: 14px;
+      color: rgba(27, 27, 34, 0.6);
+      border: 1px solid rgba(232, 232, 233, 1);
+      border-radius: 10px;
+      background: #fff;
+      cursor: pointer;
+
+      &::after {
+        position: absolute;
+        right: -5px;
+        top: 14px;
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-top: 1px solid rgba(232, 232, 233, 1);
+        border-right: 1px solid rgba(232, 232, 233, 1);
+        background: #fff;
+        border-top-right-radius: 2px;
+        transform: rotate(45deg);
+        transform-origin: center;
+      }
+    }
+
+    > div {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .login-for-qrcode {
+  .qr-ttl {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 364px;
+    height: 60px;
+    margin: 46px 0 36px;
+    font-size: 14px;
+    color: rgba(27, 27, 34, 0.6);
+    text-align: center;
+    width: 100%;
+    .qr-text {
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: bold;
+      color: rgba(27, 27, 34, 1);
+    }
+  }
+
+  .qrcode-wrapper {
+    height: 322px;
+    margin-bottom: 72px;
+    font-size: 12px;
+    text-align: center;
+
+    .qrcode {
+      position: relative;
+      width: 264px;
+      height: 264px;
+      margin: 0 auto;
+      color: rgba(27, 27, 34, 0.6);
+      font-size: 14px;
+      > div:not(:first-of-type) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        border-radius: 24px;
+        border: 1px solid rgba(246, 246, 246, 1);
+      }
+
+      .expired {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .scan-success {
+        img {
+          margin-top: 74px;
+          width: 52px;
+          height: 52px;
+        }
+
+        dl {
+          dt {
+            font-weight: bold;
+            margin: 8px 0;
+            font-size: 20px;
+            color: rgba(83, 143, 225, 1);
+          }
+        }
+      }
+    }
+    .tips {
+      margin: 12px 0;
+      color: rgba(27, 27, 34, 0.4);
+    }
+    .reflesh-btn {
+      cursor: pointer;
+      color: rgba(83, 143, 225, 1);
+
+      img {
+        margin-right: 2px;
+      }
+    }
+  }
+}
+
+.login {
+  width: 100vw;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+
+  .login-box {
+    min-width: 375px;
+    max-width: 750px;
+    /* padding: 0px 30px; */
+    border-radius: 5px;
+    padding: 0 10px;
+    position: relative;
+    .logo-left {
+      height: 60px;
+      display: flex;
+      align-items: center;
+
+      .img {
+        width: 30px;
+        height: 30px;
+      }
+
+      .img:nth-child(1) {
+        margin-right: 7px;
+      }
+    }
+
+    .logo-center {
+      margin: 16px 0 0 16px;
+      .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        // margin: 72px 0 66px 0;
+        width: 48px;
+        height: 48px;
+        background-color: #F6F6F6;
+        border-radius: 50%;
+        .img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+      .title {
+        margin-top: 16px;
+        font-weight: 600;
+        font-size: var(--size-18px);
+      }
+    }
+
+    .login-radio {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 43px 0 20px 0;
+      font-size: 0.75rem;
+
+      span {
+        color: #a4a4a7;
+      }
+
+      .link {
+        color: #717175;
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        width: 328px;
+      }
+
+      .link > span {
+        color: #0095f6;
+      }
+    }
+
+    .login-box-footer {
+      height: 46px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 0.875rem;
+      color: #76767a;
+
+      div {
+        width: 50%;
+        text-align: center;
+      }
+
+      div:first-of-type {
+        border-right: 1px solid #eee;
+      }
+
+      .active {
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1.25rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+
+    .input-wrap {
+      margin-top: 20px;
+      // padding: 0 20px;
+    }
+    :deep(.van-tab) {
+      font-size: 1.25rem;
+    }
+  }
+
+  .footer {
+    margin-top: 88px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .footer-title {
+      font-size: 0.75rem;
+      color: #a4a4a7;
+    }
+
+    .footer-img {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      /* padding: 0 50px; */
+      margin-top: 10px;
+
+      div {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background-color: rgba(246, 246, 246);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.dialog {
+  color: #1b1b22;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 1px;
+  padding: 24px 32px;
+
+  .link > span {
+    color: #0095f6;
+  }
+}
+
+.dialog-but {
+  display: flex;
+  justify-content: space-around;
+  padding: 0 16px 16px;
+
+  .btn:nth-child(1) {
+    width: 98px;
+  }
+
+  .btn:nth-child(2) {
+    width: 157px;
+  }
+}
+.remove-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.lingheigth-avtive {
+  color: #0095f6;
+  text-align: center;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.btn {
+  /* width: 100px; */
+  height: 36px;
+  // flex-shrink: 0;
+  border-radius: 23px;
+  background: var(--3, #f6f6f6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  font-size: 0.75rem;
+  :deep(.van-count-down) {
+    background: var(--3, #f6f6f6);
+  }
+}
+.login_btn {
+  border-radius: 12px;
+  font-size: 1rem;
+}
+:deep(.van-button) {
+  height: 48px;
+}
+:deep(.van-button--disabled) {
+  background: #F6F6F6 !important;
+  color: #1B1B2233 !important;
+  border: none;
+  font-size: 16px;
+  font-weight: 400;
+}
+.view_4 {
+    width: 100%;
+    background-color: #fff;
+    min-width: 375px;
+    max-width: 750px;
+    box-sizing: border-box; /* 确保内边距和边框不会影响元素的实际宽度 */
+    :deep(.divider){
+      border-color: #f6f6f6;
+      margin:0 0 1rem 0;
+      font-size: 0.75rem;
+      color: var(--Font-40, #1B1B2266);
+    }
+    .equal-division {
+      align-self: center;
+      .equal-division-item_1 {
+        border-radius: 45px;
+        width: 48px;
+        height: 48px;
+        margin: 0 20px;
+      }
+      .equal-division-item {
+        border-radius: 45px;
+        width: 48px;
+        height: 48px;
+      }
+    }
+    .group_7 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+  }
+</style>
diff --git a/src/views/login/components/otherSignin.vue b/src/views/login/components/otherSignin.vue
new file mode 100644
index 0000000..01f048b
--- /dev/null
+++ b/src/views/login/components/otherSignin.vue
@@ -0,0 +1,538 @@
+<template>
+    <div class="login">
+        <div class="login-box">
+            <headerNavbar></headerNavbar>
+            <div class="logo-center">
+                <div class="icon">
+                <img v-if=" signinType == 'phone' " class="img" src="@/assets/login/iphone.svg" alt="" />
+                <img v-if=" signinType == 'email' "  class="img" src="@/assets/login/email.svg" alt="" />
+                </div>
+                <div class="title">{{ title }}</div>
+            </div>
+            <!-- 手机号登录 -->
+            <div style="padding-top:20px"  v-if="signinType == 'phone'">
+                <van-form>
+                <div class="input-wrap">
+                    <CommonInput 
+                    v-model="formData.phone"
+                    v-model:prepend="formData.area_code"
+                    :placeholder="$t('phoneNumber')"
+                    :columns="areaDict"
+                    @onClear="onClear('phone')"
+                    ></CommonInput>
+                </div>
+                <div class="input-wrap">
+                    <CommonInput 
+                    ref="codeInputRef"
+                    @onClear="onClear('phoneSms')"
+                    type="code"
+                    v-model="formData.phoneSms"
+                    maxlength="6"
+                    :placeholder="$t('verificationCode')"
+                    :codeTime="60"
+                    :codeSendStatus="verifyCodeForm.status"
+                    @onCodeSend="clickBtn"
+                    @onCodeFinish="onCodeFinish"
+                    autocomplete="off"
+                    :codeText="verifyCodeForm.text"
+                    :disabledCodeSend="disabledCodeSend"
+                    ></CommonInput>
+                </div>
+                </van-form>
+            </div>
+            <!-- 邮箱登录 -->
+            <div style="padding-top:20px"  v-if="signinType == 'email'">
+                <van-form>
+                <div class="input-wrap">
+                    <CommonInput 
+                    v-model="formData.email"
+                    :placeholder="$t('please_input_email')"
+                    @onClear="onClear('email')"
+                    ></CommonInput>
+                </div>
+                <div class="input-wrap">
+                    <CommonInput 
+                    ref="codeInputRef"
+                    @onClear="onClear('emailSms')"
+                    type="code"
+                    v-model="formData.emailSms"
+                    maxlength="6"
+                    :placeholder="$t('verificationCode')"
+                    :codeTime="60"
+                    :codeSendStatus="verifyCodeForm.status"
+                    @onCodeSend="clickBtn"
+                    @onCodeFinish="onCodeFinish"
+                    autocomplete="off"
+                    :codeText="verifyCodeForm.text"
+                    :disabledCodeSend="disabledCodeSend"
+                    ></CommonInput>
+                </div>
+                </van-form>
+            </div>
+            <div style="margin: 16px 4px;">
+                <van-button class="reg_btn" color="#1B1B22" :disabled="isDisabled" block @click="handleClick">
+                {{ $t('register') }}
+                </van-button>
+            </div>
+            <!-- 其他登录方式 -->
+            <div class="flex-col self-stretch view_4" v-if="appConfig.email_reg || appConfig.phone_reg">
+                <van-divider class="divider" v-if="(appConfig.phone_reg && signinType == 'email') || (appConfig.email_reg && signinType == 'phone')">{{ $t("otherRegisterStyle") }}</van-divider>
+                <div class="flex-row justify-between equal-division group_7">
+                    <img
+                    class="equal-division-item_1"
+                    :src="imgURL('sg-login.svg')"
+                    v-if="appConfig.phone_reg && signinType == 'email'"
+                    @click="otherLogin('phone')"
+                    />
+                    <img
+                    class="equal-division-item_1"
+                    :src="imgURL('yx-login.svg')"
+                    v-if="appConfig.email_reg && signinType == 'phone'"
+                    @click="otherLogin('email')"
+                    />
+                </div>
+            </div>
+          </div>
+    </div>
+      <userService :type="serviceType" :show="serviceShow" @close="serviceShow=false"></userService>
+</template>
+<script setup >
+import ABPInput from "@/components/ABPPInput.vue"; 
+import headerNavbar from "@/components/header/headerNavbar.vue"
+import userService from "@/views/login/components/userService.vue"
+import { phoneReg, emailReg} from "@/utils/index.js"
+import { showToast } from 'vant';
+import { ref ,defineProps,reactive,onMounted}  from 'vue'
+import { useUserStore } from "@/stores/user";
+const agreementDialog = ref(false)
+import { useRouter,useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { CommonInput } from "@/components/index.js";
+import use from "@/use";
+
+const userStore = useUserStore();
+const { appConfig } = storeToRefs(userStore)
+import { useI18n } from 'vue-i18n'
+const { t }= useI18n()
+const router = useRouter()
+const route = useRoute()
+const $api = inject("$api");
+const { useUid, useEmailLang} = use;
+
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+const data = reactive({
+    form: {
+        checked: false,
+        username: '',
+        password: ''
+    }
+})
+const formData = ref({
+  username: "",
+  area_code: "",
+  phone: "",
+  password: "",
+  email: '',
+  phoneSms: "",
+  emailSms: ""
+});
+const signinType = computed(() => {
+  return route.query.type;
+});
+watch(() => signinType.value, () => {
+    codeInputRef.value && codeInputRef.value.reset()
+    verifyCodeForm.value = {
+    text: t('getVerifyCode'),
+    status: 'unsent'
+    }
+    formData.value = {
+        username: "",
+        area_code: "",
+        phone: "",
+        password: "",
+        email: '',
+        phoneSms: "",
+        emailSms: ""
+    }
+    initArea()
+})
+const serviceType = ref('')
+const serviceShow = ref(false)
+const verifyCodeForm = ref({
+    text: t('getVerifyCode'),
+    status: 'unsent'
+})
+// 手机号/邮箱输入框是否有值，是否可以发送验证码
+const disabledCodeSend = computed(()=>{
+    const type = route.query.type
+    if(type === 'phone'){
+        return !formData.value.phone
+    }else if(type === 'email') {
+        return !formData.value.email
+    }
+    return true
+})
+onMounted(() => {
+    initArea()
+    console.log('signinType.value',signinType.value);
+    
+})
+const areaDict = ref([]);
+const initArea = async () => {
+  const res = await $api.login.getAreaList();
+  const { areas } = res.data;
+
+  areaDict.value = areas;
+  formData.value.area_code = areas[0].areaCode;
+};
+
+const clickBtn = async() => {
+    console.log(signinType.value);
+    console.log(formData.value.area_code)
+    let query = {}
+    let params = {}
+    if (signinType.value === 'phone') {
+        if (!phoneReg(formData.value.phone)) {
+            let flag = false
+            //检验是否为香港手机号
+            if(formData.value.area_code=='+852' ){
+                let reg = /^([4|5|6|7|8|9])\d{7}$/  
+                flag = reg.test(formData.value.phone)
+            }
+            if(!flag){
+                showToast({ position: 'top', message: t('plsEnterRightPhone') })
+                return
+            }
+            
+        }
+        query = {type: signinType.value, area_code:  formData.value.area_code,value: formData.value.phone}
+        params = {area_code:  formData.value.area_code,phone: formData.value.phone,reg_type: 1}
+    } else if (signinType.value === 'email') {
+        if (!emailReg(formData.value.email)) {
+            showToast({ position: 'top', message: t('correct_email_address') })
+            return
+        }
+        query = {type: signinType.value, value: formData.value.email}
+        params = {email: formData.value.email,reg_type: 2}
+    }
+    const res = await $api.login.isRegister(params)
+    if (res.data.is_register) {
+        if (signinType.value === 'phone') {
+            showToast({ position: 'top', message: t('alreadyRegister') })
+        } else {
+            showToast({ position: 'top', message: t('alreadyRegister2') })
+        }
+        return
+    }
+    getCodeClick()
+}
+// 标题
+const title = computed(() => {
+  if (signinType.value === "phone") {
+    return t("phoneNumber") + t("register");
+  }
+  if (signinType.value === "email") {
+    return t("email") + t("register");
+  }
+ })
+
+// 清空输入框
+const onClear = (val) => {
+  formData.value[val] = "";
+}
+
+const codeInputRef = ref(null)
+const onCodeFinish = () => {
+  verifyCodeForm.value.status = "finished";
+  verifyCodeForm.value.text = t("reget");
+}
+
+const getCodeClick = async () => {
+    if (verifyCodeForm.value.status == 'sended') return
+    if (verifyCodeForm.value.status == 'unsent') {
+        verifyCodeForm.value.status = 'sended'
+        codeInputRef.value.start()
+        const res = await getCode()
+        if (res.code === 0) {
+            verifyCodeForm.value.text = t('reget')
+            showToast({message: t('sentSuccessfully'),position: 'top',});
+        } else {
+            codeInputRef.value.reset()
+            verifyCodeForm.value.status = 'finished'
+            verifyCodeForm.value.text = t('reget')
+        }
+    } else if (verifyCodeForm.value.status == 'finished') {
+        verifyCodeForm.value.status = 'sended'
+        codeInputRef.value.reset()
+        codeInputRef.value.start() 
+        const res = await getCode()
+        if (res.code === 0) {
+            showToast({message: t('sentSuccessfully'),position: 'top',});
+        } else {
+            codeInputRef.value.reset()
+            verifyCodeForm.value.status = 'finished'
+            verifyCodeForm.value.text = t('reget')
+        }
+    }
+}
+// 发送验证码
+const getCode = async () => {
+    let params = {
+        device_id: useUid(),
+        platform: 5,
+        verify_type: 1
+    }
+    const language = useEmailLang()
+    if ( signinType.value === 'phone') {
+        params.area_code = formData.value.area_code
+        params.phone = formData.value.phone
+        params.verify_by = 1
+    } else if (signinType.value === 'email') {
+        params.email = formData.value.email
+        params.verify_by = 2
+        params.language = language
+
+    }
+    const res = await $api.login.sendCode(params)
+    return res
+}
+
+const handleClick = async () => {
+    let params = {}
+    let {area_code,phone,email,phoneSms,emailSms} = formData.value
+    if (signinType.value === 'phone') {
+        params.area_code = area_code
+        params.phone = phone
+        params.verify_by = 1
+        params.verify_code = phoneSms
+    } else if (signinType.value === 'email') {
+        params.email = email
+        params.verify_by = 2
+        params.verify_code = emailSms
+    }
+    const res = await $api.login.checkCode(params)
+    if (res.code === 0) {
+        let query = {}
+        if (signinType.value === 'phone') {
+            query.area_code = area_code
+            query.phone =  phone
+        } else if (signinType.value === 'email') {
+            query.email = email
+        }
+        showToast({message: t('successful_home'),position: 'top',});
+        query.type = signinType.value
+        router.push({name: 'setPassword',query})
+    }
+}
+// 按钮状态
+const isDisabled = computed(() => {
+  let flag = false;
+  if (
+    route.query.type === "phone" &&
+    (!formData.value.phone || !formData.value.phoneSms)
+  ) {
+    flag = true;
+  } else if (
+    route.query.type === "email" && 
+    (!formData.value.email || !formData.value.emailSms)
+  ) {
+    flag = true;
+  } else {
+    flag = false;
+  }
+  return flag;
+});
+const otherLogin = async type => {
+  router.replace({ name: "otherSignin", query: { type } });
+};
+</script>
+<style scoped lang="less">
+    .login {
+        width: 100vw;
+        height: 100%;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        .login-box {
+            min-width: 375px;
+            max-width: 750px;
+            border-radius: 5px;
+            padding: 0 10px;
+            // fix 6-25 修复 【IM- h5】【注册】三星S8手机，注册，选择区别页面，“取消” 2个字没有显示全问题
+            // width: 100vw;
+            position: relative;
+            .logo-left {
+                height: 60px;
+                display: flex;
+                align-items: center;
+                .img {
+                    width: 30px;
+                    height: 30px;
+                }
+                .img:nth-child(1) {
+                    margin-right: 7px;
+                }
+            }
+            .logo-center {
+                margin: 16px 0 0 16px;
+                .icon {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    // margin: 72px 0 66px 0;
+                    width: 48px;
+                    height: 48px;
+                    background-color: #F6F6F6;
+                    border-radius: 50%;
+                    .img {
+                    width: 28px;
+                    height: 28px;
+                    }
+                }
+                .title {
+                    margin-top: 16px;
+                    font-weight: 600;
+                    font-size: var(--size-18px);
+                }
+            }
+            .login-radio {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 43px 0 20px 0;
+                font-size: 0.75rem;
+                span {
+                    color: #A4A4A7;
+                }
+                .link {
+                    color: #717175;
+                    font-family: PingFang SC;
+                    font-size: 0.75rem;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                    width: 328px;
+                }
+                .link > span {
+                    color: #0095F6;
+                }
+            }
+            .loginBtn {
+                text-align: center;
+                margin-top: 16px;
+                color: #181818;
+                font-family: PingFang SC;
+                font-size: 0.875rem;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+            }
+
+            .input-wrap {
+                margin-top: 20px;
+                // padding: 0 20px;
+            }
+        }
+        .footer {
+            margin-top: 88px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .footer-title {
+                font-size: 0.75rem;
+                color: #A4A4A7;
+            }
+            .footer-img {
+                width: 100%;
+                display: flex;
+                justify-content: space-around;
+                /* padding: 0 50px; */
+                margin-top: 10px;
+                div {
+                width: 48px;
+                height: 48px;
+                border-radius: 50%;
+                background-color: rgba(246, 246, 246);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                }
+            }
+        }
+    }
+    .dialog {
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        letter-spacing: 1px;
+        padding: 24px 32px;
+        .link > span{
+            color: #0095F6;
+        }
+    }
+    .dialog-but {
+        display: flex;
+        justify-content: space-around;
+        padding: 0 16px 16px;
+        .btn:nth-child(1) {
+            width: 98px;
+        }
+        .btn:nth-child(2) {
+            width: 157px;
+        }
+    }
+    .reg_btn {
+        border-radius: 12px;
+        font-size: 1rem;
+    }
+    :deep(.van-button) {
+    height: 48px;
+    }
+    :deep(.van-button--disabled) {
+    background: #F6F6F6 !important;
+    color: #1B1B2233 !important;
+    border: none;
+    font-size: 16px;
+    font-weight: 400;
+    }
+.view_4 {
+    padding-left: 4px;
+    padding-right: 4px;
+    position: absolute; /* 使用固定定位 */
+    bottom: 40px; /* 距离视口底部 120px */
+    left: 0; /* 靠左对齐 */
+    width: 100%; /* 宽度占满视口宽度 */
+    background-color: #fff; /* 可选背景色 */
+    :deep(.divider){
+      border-color: #f6f6f6;
+      margin:0 0 1rem 0;
+      font-size: 0.75rem;
+      color: var(--Font-40, #1B1B2266);
+    }
+    .equal-division {
+      align-self: center;
+      .equal-division-item_1 {
+        border-radius: 45px;
+        width: 48px;
+        height: 48px;
+      }
+      .equal-division-item {
+        border-radius: 45px;
+        width: 48px;
+        height: 48px;
+      }
+    }
+    .group_7 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/policy-dialog.vue b/src/views/login/components/policy-dialog.vue
new file mode 100644
index 0000000..f1499c3
--- /dev/null
+++ b/src/views/login/components/policy-dialog.vue
@@ -0,0 +1,89 @@
+<template>
+  <!-- 隐私弹框 -->
+  <van-dialog v-model:show="props.agreementDialog" :title="$t('init_text_5')">
+    <template #default>
+      <div class="dialog">
+        <div class="link">
+          {{ $t("init_text_6") }}
+          <span @click="toUserService($t('用户服务协议'))">{{
+            $t("init_text_2")
+          }}</span>
+          {{ $t("init_text_3") }}
+          <span @click="toUserService($t('隐私政策'))">{{
+            $t("init_text_4")
+          }}</span>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="dialog-but">
+        <van-button class="btn" type="default" @click="refuseAreement">{{
+          $t("rejectCall")
+        }}</van-button>
+        <van-button class="btn" color="#1B1B22" @click="sumAreement">{{
+          $t("refuse_continue")
+        }}</van-button>
+      </div>
+    </template>
+  </van-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch, watchEffect } from "vue";
+// 接收父组件传递的参数
+const props = defineProps({
+  agreementDialog: Boolean,
+});
+
+//分发事件给父组件
+let emits = defineEmits(["agreement"]);
+
+// 取消
+const refuseAreement = () => {
+  emits("agreement",0);
+};
+// 同意
+const sumAreement = () => {
+  emits("agreement", 1);
+};
+
+onMounted(() => {
+});
+</script>
+
+<style lang="less" scoped>
+.dialog {
+  color: #1b1b22;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 1px;
+  padding: 24px 32px;
+
+  .link>span {
+    color: #0095f6;
+  }
+}
+
+.dialog-but {
+  display: flex;
+  justify-content: space-around;
+  padding: 0 16px 16px;
+
+  .btn:nth-child(1) {
+    width: 98px;
+  }
+
+  .btn:nth-child(2) {
+    width: 157px;
+  }
+}
+
+.login_btn {
+  border-radius: 12px;
+  font-size: 1rem;
+  height: 48px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/resetPassword.vue b/src/views/login/components/resetPassword.vue
new file mode 100644
index 0000000..ffad254
--- /dev/null
+++ b/src/views/login/components/resetPassword.vue
@@ -0,0 +1,214 @@
+<template>
+    <!-- 重设置密码页 -->
+  <div class="reset-password">
+  <div class="flex-col page">
+    <!-- 返回图标 -->
+    <van-image
+      class="self-start image_4"
+      :src="imgURL('return-icon.svg')"
+      @click="router.back()" 
+    ></van-image>
+    <div class="flex-col items-start self-stretch group_2">
+      <img
+        class="image_5"
+        :src="imgURL('wj-password.svg')"
+      />
+      <span class="text_2 mt-21">{{ $t('resetPass') }}</span>
+    </div>
+    <div class="flex-col self-stretch group_3">
+      <CommonInput
+        type="password"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.password"
+        :placeholder="$t('plsEnterPassword6_15')"
+        @onClear="formData.password = ''"
+        >{{ $t("password") }}</CommonInput
+      >
+      <CommonInput
+        type="password"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.password_2"
+        :placeholder="$t('plsConfirmPasswordAgain')"
+        @onClear="formData.password_2 = ''"
+        >{{ $t('confirmPassword') }}</CommonInput
+      >
+      <van-button
+        class="text-wrapper_4 cf-button"
+        color="#1B1B22"
+        loading-type="spinner"
+        @click="handleClick"
+        :disabled="isDisabled"
+        >{{ $t('determine') }}</van-button
+      >
+    </div>
+  </div>
+</div>
+</template>
+<script setup>
+import headerNavbar from "@/components/header/headerNavbar.vue"
+import { showToast } from 'vant';
+import { encrypt } from "@/utils/index.js"
+import { ref, defineProps, reactive, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { hidePhoneNumber, hideEmailNumber } from '@/utils/tools'
+import use from "@/use";
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const { useUid, useEmailLang } = use;
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const signinType = ref('')
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+
+onMounted(() => {
+    if (route.query.isMobel==='true') {
+      signinType.value = 'phone'
+    }
+    console.log('sssssssssssssssssss',route.query);
+})
+
+const formData = ref({
+    sms: route.query.sms,
+    password: '',
+    password_2: ''
+})
+
+// 校验禁用按钮
+const isDisabled = computed(() => {
+    if (formData.value.password === "" || formData.value.password_2 === "") {
+        return true
+    } else {
+        return false
+    }
+})
+
+// 确定
+const handleClick = async () => {
+    if (!(formData.value.password.length >= 6 && formData.value.password.length <= 15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.password))) {
+        showToast({ position: 'top', message: t('init_validate_5') })
+        return
+    }
+    if (formData.value.password !== formData.value.password_2) {
+        showToast({ position: 'top', message: t('twicePwdNoSame') })
+        return
+    }
+    // 校验验证码
+    let checkCodeForm = {
+        verify_code: formData.value.sms,
+        verify_key: route.query.verify_key,
+        device_id: route.query.device_id,
+    }
+    // 手机号
+    if (route.query.isMobel==='true') {
+        checkCodeForm.phone = route.query.phone
+        checkCodeForm.area_code = route.query.area_code
+        checkCodeForm.verify_by = 1
+        // 邮箱
+    } else {
+        checkCodeForm.email = route.query.email
+        checkCodeForm.verify_by = 2
+    }
+    let params = {}
+    for (let key in checkCodeForm) {
+        params[key] = checkCodeForm[key]
+    }
+    params.password = encrypt(formData.value.password)
+    const res = await $api.login.resetPas(params)
+    if (res.code === 0) {
+        showToast({
+            message: t('useNewPassword'),
+            position: 'top',
+        });
+        setTimeout(() => {
+            router.push({ path: '/login' })
+        }, 2000)
+    }
+}
+</script>
+<style scoped lang="less">
+@import "@/style/common-styles.less";
+.reset-password{
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+}
+.mt-21 {
+  margin-top: 21px;
+}
+.page {
+  padding: 16.5px 15.5px 61px 16px;
+  background-color: #ffffff;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  min-width: 375px;
+  max-width: 750px;
+  :deep(.wp-input){
+    .field_1 {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+      margin-top: 8px;
+    }
+    .field_2 {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+      margin-top: 8px;
+    }
+  }
+  .image_4 {
+    width: 24px;
+    height: 25px;
+  }
+  .group_2 {
+    margin-top: 27.5px;
+    .image_5 {
+      border-radius: 50%;
+      width: 48px;
+      height: 48px;
+    }
+    .text_2 {
+      color: #1b1b22;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      line-height: 17px;
+    }
+  }
+  .group_3 {
+    margin-top: 22px;
+    :deep(.text-wrapper_1) {
+      margin-top: 8px;
+    }
+    .field {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+    }
+    .text-wrapper_4 {
+      margin: 16px 4.5px 0 4px;
+    }
+    .cf-button {
+      padding: 16px 0px;
+      border-radius: 16px;
+      background-color: #f6f6f6;
+      border: unset !important;
+      height: 48px;
+      font-family: PingFang SC;
+      font-size: 16px;
+      line-height: 15px;
+      &.van-button--disabled {
+        background-color: #f6f6f6 !important;
+        border: 1px solid #f6f6f6 !important;
+        color: #d1d1d3 !important;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/setAvatar.vue b/src/views/login/components/setAvatar.vue
new file mode 100644
index 0000000..75c64d1
--- /dev/null
+++ b/src/views/login/components/setAvatar.vue
@@ -0,0 +1,355 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/mine-avatar.svg";
+import { storeToRefs } from "pinia";
+import customAvatar from "@/components/customAvatar/index.vue";
+import { showConfirmDialog, showToast } from "vant";
+import { handleImgCdnError } from "@/utils/tools"
+
+const { t } = useI18n();
+const setAvatarRef = ref(null);
+useGrade(setAvatarRef, 3);
+const userStore = useUserStore();
+const { setUserInfo } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter();
+const headImg = ref("");
+const active = ref(0);
+const imgList = ref([]);
+onMounted(() => {
+  headImg.value = userInfo.value.faceURL || defaultAvatar;
+  getImgList();
+});
+
+// 获取头像列表
+const getImgList = async () => {
+  imgList.value = [];
+  // 默认头像
+  const res = await $api.login.getAllImageByType({ type: 2 });
+
+  if (res.code != 0) return;
+  if (Array.isArray(res.data.list)) {
+    res.data.list.forEach((item, index) => {
+      item.contentList = item.content ? JSON.parse(item.content) : [];
+      item.isCustom = false;
+    });
+    imgList.value = [...imgList.value, ...res.data.list];
+  }
+};
+// 保存
+const onSubmit = async () => {
+  const otherParams = {
+    syncAvatarToGroup: false
+  }
+  
+  const { data } = await $api.contact.countJoinedGroups({ userId: userInfo.value.userID, excludeDismiss: true });
+  try {
+    if (data.count > 0) {
+      await showConfirmDialog({
+        title: t("dialog_tip1"),
+        message: t('sync_group_avatar'),
+        confirmButtonText: t('confirm'),
+        confirmButtonColor: "#5F97E3"
+      });
+      otherParams.syncAvatarToGroup = true
+    }
+  } catch(e) {
+    otherParams.syncAvatarToGroup = false
+  } finally {
+    console.log('isSync:: 是否同步', otherParams.syncAvatarToGroup)
+    const result = await $api.login.updateUserInfo({
+      avatar: headImg.value,
+      birthday: null,
+      birth: null,
+      gender: 0,
+      language: null,
+      mail: null,
+      nickname: null,
+      phone: null,
+      signature: null,
+      globalRecvMsgOpt: 0,
+      ...otherParams,
+    });
+    if (result.code != 0) return;
+    setUserInfo({ ...userInfo.value, ...{ faceURL: headImg.value } });
+    // router.push('/home/my/profile')
+    router.back();
+  }
+};
+
+const onEdit = url => {
+  headImg.value = url;
+};
+
+const handleDelete = async (item, idx) => {
+  // 这里文案要自己补充，目前的只是cv
+  await showConfirmDialog({
+    title: "",
+    message: t("deleteIcon"),
+    className: "custom-del",
+    confirmButtonText: t("delete"),
+    confirmButtonColor: "#FC5A50"
+  });
+  // 这里需要真正删需要调接口
+  const res = await $api.avatar.avatarDelete({ id: item.id });
+  if (res.code != 0) return;
+  showToast({ message: t("deleteSuccessfully") });
+  getImgList();
+};
+
+const handleAfterUpload = async url => {
+  console.log("handleAfterUploadurl:", url);
+  // 这里调接口，如审核之类的，然后展示弹窗
+  const res = await $api.avatar.avatarAdd({
+    avatar_type: 2,
+    url
+  });
+  if (res.code !== 0) return;
+  getImgList();
+  await showConfirmDialog({
+    title: "",
+    message: t("applyIconTip"),
+    className: "custom-del",
+    confirmButtonText: t("applyIconProgress"),
+    confirmButtonColor: "#0095F6"
+  });
+  onApplicationRecord();
+};
+
+const onCancel = () => {
+  // router.push('/home/my/profile')
+  router.back();
+};
+
+</script>
+
+<template>
+  <div ref="setAvatarRef" class="set-avatar">
+    <AppNavBar
+      :title="$t('changeAvatar')"
+      left-arrow
+      views_grade="thirdly_view"
+      @click-left="router.back()"
+    ></AppNavBar>
+    <div class="set-avatar-wrap">
+      <div class="set-avatar-content">
+        <!-- 选择好的头像 -->
+        <div class="update-img">
+          <cdnSource v-if="headImg" :defaultUrl="headImg ? headImg : defaultAvatar">
+            <template #cdnSlot="{ cdnUrl }">
+              <van-image
+                fit="cover"
+                round
+                :src="cdnUrl"
+                width="168px"
+                height="168px"
+              />
+            </template>
+          </cdnSource>
+        </div>
+        <van-tabs v-model:active="active" swipeable class="img-box">
+          <van-tab
+            :title="item.name"
+            v-for="(item, index) in imgList"
+            :key="index"
+          >
+            <div class="box-item" v-if="!item.isCustom">
+              <van-image
+                v-for="img in item.contentList"
+                :key="img"
+                class="box-item-img"
+                :src="img.url"
+                round
+                :class="headImg === img.url ? 'active' : ''"
+                @click="onEdit(img.url)"
+                @error="e => handleImgCdnError(e, img, 'url')"
+              />
+            </div>
+            <customAvatar
+              v-if="item.isCustom"
+              v-model:activeImage="headImg"
+              :isCustom="item.isCustom"
+              :list="item.contentList"
+              @delete="handleDelete"
+              @afterUploaded="handleAfterUpload"
+            />
+          </van-tab>
+        </van-tabs>
+        <div class="flex-btn">
+          <van-button type="default" class="cancle-btn btn" @click="onCancel">{{
+            $t("cancel")
+          }}</van-button>
+          <van-button
+            type="default"
+            :disabled="!headImg"
+            class="btn btn1"
+            @click="onSubmit"
+            >{{ $t("save") }}</van-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 三级 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+
+.set-avatar-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .set-avatar-content {
+    padding: 10px 0;
+    height: 100%;
+    // position: relative;
+  }
+}
+
+.update-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+:deep(.van-tabs__line) {
+  max-width: 15px;
+  background-color: #0095f6;
+}
+
+:deep(.van-tab__panel) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  max-height: 280px;
+  height: 280px;
+  overflow-y: auto;
+}
+
+:deep(.van-tabs__wrap) {
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 5px;
+}
+.img-box {
+  // height: calc(100% - 360px);
+
+  /deep/.van-tabs__content--animated {
+    max-height: 240px;
+    overflow-y: auto;
+  }
+}
+.flex-btn {
+  // background: red;
+  // position: absolute;
+  // bottom: 100px;
+  display: flex;
+  align-items: center;
+  padding: 0 23px;
+  //margin-top: 80px;
+  margin-top: 20px;
+  margin-bottom: 50px;
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 1rem;
+    color: #49494e;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border-color: #d1d1d3;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  .btn {
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+    border: none;
+  }
+
+  .btn1 {
+    background-color: #1b1b22;
+    color: #fff;
+  }
+
+  .cancle-btn {
+    margin-right: 10px;
+  }
+}
+
+.box-item-img {
+  width: 60px;
+  height: 60px;
+  margin: 0 15px 30px 15px;
+}
+
+.box-item {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 68px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+}
+
+.active {
+  border: 2px solid #5f97e3;
+  box-sizing: border-box;
+  padding: 2px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: linear-gradient(
+    to bottom,
+    #b8b8b8 20%,
+    #b8b8b8 20% 50%,
+    rgba(0, 0, 0, 0) 40% 60%,
+    rgba(0, 0, 0, 0) 60% 80%,
+    rgba(0, 0, 0, 0) 80%
+  );
+  transition: color 0.2s ease;
+}
+
+:deep(.van-tab__text) {
+  font-size: 1rem;
+  color: #979797;
+}
+
+:deep(.van-tab--active .van-tab__text) {
+  color: black;
+}
+</style>
diff --git a/src/views/login/components/setPassword.vue b/src/views/login/components/setPassword.vue
new file mode 100644
index 0000000..6d64c83
--- /dev/null
+++ b/src/views/login/components/setPassword.vue
@@ -0,0 +1,248 @@
+<template>
+    <!-- 【注册】 设置密码页 -->
+    <div class="password-box">
+    <div class="flex-col page">
+    <van-image
+      class="self-start image_4"
+      :src="imgURL('return-icon.svg')"
+      @click="router.back()" 
+    ></van-image>
+    <div class="flex-col items-start self-stretch group_2">
+      <img
+        class="image_5"
+        :src="imgURL('wj-password.svg')"
+      />
+      <span class="text_2 mt-21">{{ $t('setPassword') }}</span>
+    </div>
+    <div class="flex-col self-stretch group_3">
+      <CommonInput
+        type="password"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.password"
+        :placeholder="$t('plsEnterPassword6_15')"
+        @onClear="formData.password = ''"
+        >{{ $t("password") }}</CommonInput
+      >
+      <CommonInput
+        type="password"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.password_2"
+        :placeholder="$t('plsConfirmPasswordAgain')"
+        @onClear="formData.password_2 = ''"
+        >{{ $t('confirmPassword') }}</CommonInput
+      >
+      <van-button
+        class="text-wrapper_4 cf-button"
+        color="#1B1B22"
+        loading-type="spinner"
+        @click="clickBtn"
+        :disabled="isDisabled"
+        >{{ $t('determine') }}</van-button
+      >
+    </div>
+  </div>
+</div>
+</template>
+<script setup>
+import { encrypt } from "@/utils/index.js"
+import { ref ,defineProps,reactive,onMounted}  from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import use from "@/use";
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from "@/stores/user";
+const { useUid, useSystem } = use;
+const { t }= useI18n()
+const userStore = useUserStore();
+const { setUserInfo, setRememberEmail, setRememberPhone } = userStore;
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+const formData = ref({
+    password: '',
+    password_2: ''
+})
+// 校验禁用按钮
+const isDisabled = computed(() => {
+    if (formData.value.password === "" || formData.value.password_2 === "") {
+        return true
+    } else {
+        return false
+    }
+})
+onMounted(() => {
+  console.error('route.query',route.query);
+  
+})
+const clickBtn = async () => {
+    if (!(formData.value.password.length >=6 && formData.value.password.length <=15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.password))) {
+        showToast({ position: 'top', message: t('init_validate_5')})
+        return
+    }
+    if (!(formData.value.password_2.length >=6 && formData.value.password_2.length <=15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.password_2))) {
+        showToast({ position: 'top', message: t('init_validate_5') })
+        return
+    }
+
+    if (formData.value.password !== formData.value.password_2) {
+        showToast({ position: 'top', message: t('twicePwdNoSame') })
+        return
+    }
+    const formClone = {
+        device_id: useUid(),
+        device_model: navigator.userAgent,
+        platform: 5, // 1ios 2安卓 3pc 4h5
+        password: formData.value.password,
+        reg_type: 1, // 注册类型 1.用户名 2.手机 3.邮箱,
+    }
+    if (route.query.type === 'phone') {
+        formClone.phone = route.query.phone
+        formClone.area_code = route.query.area_code
+        formClone.reg_type = 2
+    } else if (route.query.type === 'email') {
+        formClone.email = route.query.email
+        formClone.reg_type = 3
+    }
+    formClone.password = encrypt(formClone.password)
+    const res = await $api.login.register(formClone)
+    if (res.code === 0) {
+        showToast({
+            message: t('successful_home'),
+            position: 'top',
+        });
+        // setTimeout(() => {
+        //     router.push({path: '/login'})
+        // },2000)
+        let formDataClone = {}
+        formDataClone.device_id = useUid();
+        formDataClone.device_model = navigator.userAgent;
+        formDataClone.platform = useSystem(); // 1ios 2安卓 3pc 4h5
+        // formDataClone.login_type = 1;  // 登录类型 1用户名 2手机号码 3邮箱
+        formDataClone.password = formClone.password;
+        if (route.query.type === 'phone') {
+            formDataClone.phone = formClone.phone
+            formDataClone.area_code = formClone.area_code
+            formDataClone.login_type = 2
+            setRememberPhone(formDataClone.phone)
+        } else if (route.query.type === 'email') {
+            formDataClone.email = formClone.email
+            formDataClone.login_type = 3
+            setRememberEmail(formDataClone.email)
+        }
+        console.log(formDataClone);
+        login(formDataClone)
+    }
+    
+}
+const login = async (formDataClone) => {
+    const loginRes = await $api.login.login(formDataClone);
+    if (loginRes.code !== 0) return;
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem('token', token)
+    localStorage.setItem('im_token', im_token)
+    localStorage.setItem('user_id', user_id)
+    // showToast({ position: "top", message: "登录成功" });
+    const userRes = await $api.login.userInfo();
+    setUserInfo(userRes.data);
+    // 用户活跃
+    await $api.user.accountActive({user_id})
+    router.push('/welcomePage')
+}
+</script>
+<style scoped lang="less">
+@import "@/style/common-styles.less";
+// @media (min-width: 450px) { /* PC 端样式 */
+//   .page {
+//     min-width: 375px;
+//     width: 375px !important;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//   }
+// }
+.password-box{
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+}
+.mt-21 {
+  margin-top: 21px;
+}
+.page {
+  padding: 16.5px 15.5px 61px 16px;
+  background-color: #ffffff;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  min-width: 375px;
+  max-width: 750px;
+  :deep(.wp-input){
+    .field_1 {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+      margin-top: 8px;
+    }
+    .field_2 {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+      margin-top: 8px;
+    }
+  }
+  .image_4 {
+    width: 24px;
+    height: 25px;
+  }
+  .group_2 {
+    margin-top: 27.5px;
+    .image_5 {
+      border-radius: 50%;
+      width: 48px;
+      height: 48px;
+    }
+    .text_2 {
+      color: #1b1b22;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      line-height: 17px;
+    }
+  }
+  .group_3 {
+    margin-top: 22px;
+    :deep(.text-wrapper_1) {
+      margin-top: 8px;
+    }
+    .field {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+    }
+    .text-wrapper_4 {
+      margin: 16px 4.5px 0 4px;
+    }
+    .cf-button {
+      padding: 16px 0px;
+      border-radius: 16px;
+      background-color: #f6f6f6;
+      border: unset !important;
+      height: 48px;
+      font-family: PingFang SC;
+      font-size: 16px;
+      line-height: 15px;
+      &.van-button--disabled {
+        background-color: #f6f6f6 !important;
+        border: 1px solid #f6f6f6 !important;
+        color: #d1d1d3 !important;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/signinAccount.vue b/src/views/login/components/signinAccount.vue
new file mode 100644
index 0000000..c25fa16
--- /dev/null
+++ b/src/views/login/components/signinAccount.vue
@@ -0,0 +1,297 @@
+<template>
+  <!-- 用户注册页 -->
+  <div class="registration-box">
+  <div class="flex-col page">
+    <van-image
+      class="self-start image_4"
+      :src="imgURL('return-icon.svg')"
+      @click="goBack()" 
+    ></van-image>
+    <div class="flex-col items-start self-stretch group_2">
+      <img
+        class="image_5"
+        :src="imgURL('head-portrait.svg')"
+      />
+      <span class="text_2 mt-21">{{ $t("newUserRegister") }}</span>
+    </div>
+    <div class="flex-col self-stretch group_3">
+      <CommonInput
+        type="text"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.username"
+        :placeholder="$t('plsEnterAccount6_15')"
+        @onClear="formData.username = ''"
+        >{{ $t("username") }}</CommonInput
+      >
+      <CommonInput
+        type="password"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.password"
+        :placeholder="$t('plsEnterPassword6_15')"
+        @onClear="formData.password = ''"
+        >{{ $t("password") }}</CommonInput
+      >
+      <CommonInput
+        type="password"
+        :maxlength="15"
+        className="text-wrapper_1"
+        v-model="formData.password_2"
+        :placeholder="$t('plsConfirmPasswordAgain')"
+        @onClear="formData.password_2 = ''"
+        >{{ $t('confirmPassword') }}</CommonInput
+      >
+      <van-button
+        class="text-wrapper_4 cf-button"
+        color="#1B1B22"
+        loading-type="spinner"
+        @click="clickBtn"
+        :disabled="isDisabled"
+        >{{ $t("register") }}</van-button
+      >
+    </div>
+  </div>
+</div>
+<div class="footer-box-content">
+  <div class="flex-col self-stretch group_4">
+    <van-divider class="divider">{{ $t("otherRegisterStyle") }}</van-divider>
+    <div
+      class="flex-row group_5"
+      v-if="appConfig.email_reg || appConfig.phone_reg"
+    >
+      <img
+        class="image_6"
+        :src="imgURL('sg-login.svg')"
+        v-if="appConfig.phone_reg"
+        @click="otherLogin('phone')"
+      />
+      <img
+        class="image_6 image_8"
+        :src="imgURL('yx-login.svg')"
+        v-if="appConfig.email_reg"
+        @click="otherLogin('email')"
+      />
+    </div>
+  </div>
+</div>
+</template>
+<script setup >
+import ABPInput from "@/components/ABPPInput.vue"; 
+import headerNavbar from "@/components/header/headerNavbar.vue"
+import { showToast } from 'vant';
+import CryptoJS from "crypto-js";
+import { encrypt } from "@/utils/index.js"
+import { ref ,defineProps,reactive,onMounted, computed}  from 'vue'
+import { useUserStore } from "@/stores/user";
+import use from "@/use";
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { CommonInput } from "@/components/index.js";
+const { t }= useI18n()
+const { useEncryption, useUid, useCoinId, useSystem } = use;
+const userStore = useUserStore();
+const { setUserInfo } = userStore
+const { appConfig } = storeToRefs(userStore)
+const router = useRouter()
+const $api = inject("$api");
+const formData = ref({
+  username: "",
+  password: "",
+  password_2: "",
+});
+const isDisabled = computed(() => {
+    if (formData.value.username === "" || formData.value.password === "" || formData.value.password_2 === "") {
+        return true
+    } else {
+        return false
+    }
+})
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/login/${name}`, import.meta.url).href;
+};
+
+const otherLogin = (type) => {
+    router.push({name: 'otherSignin',query: {type}})
+}
+// 注册账号
+const clickBtn = async () => {
+    const formClone = {
+        device_id: useUid(),
+        device_model: navigator.userAgent,
+        platform: 5, // 1ios 2安卓 3pc 4h5
+        password: formData.value.password,
+        username: formData.value.username,
+        reg_type: 1,
+    }
+    if (!(formData.value.username.length >=6 && formData.value.username.length <=15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.username))) {
+        showToast({ position: 'top', message: t('init_validate_1') })
+        return
+    }
+    if (!(formData.value.password.length >=6 && formData.value.password.length <=15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.password))) {
+        showToast({ position: 'top', message: t('init_validate_5')})
+        return
+    }
+    if (formData.value.password !== formData.value.password_2) {
+        showToast({ position: 'top', message: t('init_validate_2') })
+        return
+    }
+    formClone.password = encrypt(formClone.password)
+    const res = await $api.login.register(formClone)
+    console.log(res);
+    if (res.code === 0) {
+        showToast({
+            message: t('successful_home'),
+            position: 'top',
+        });
+        let formDataClone = {}
+        formDataClone.device_id = useUid();
+        formDataClone.device_model = navigator.userAgent;
+        formDataClone.platform = useSystem(); // 1ios 2安卓 3pc 4h5
+        formDataClone.login_type = 1;  // 登录类型 1用户名 2手机号码 3邮箱
+        formDataClone.username = formData.value.username;
+        formDataClone.password = encrypt(formData.value.password);
+        console.log(formDataClone);
+        // 记住密码
+        let rememberInfo = {
+            checked:true,
+            password:window.btoa(formData.value.password),
+            username:formData.value.username
+        }
+        window.localStorage.setItem('rememberPwd',JSON.stringify(rememberInfo))
+        login(formDataClone)
+    }
+}
+const login = async (formDataClone) => {
+    const loginRes = await $api.login.login(formDataClone);
+    if (loginRes.code !== 0) return;
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem('token', token)
+    localStorage.setItem('im_token', im_token)
+    localStorage.setItem('user_id', user_id)
+    // showToast({ position: "top", message: "登录成功" });
+    const userRes = await $api.login.userInfo();
+    setUserInfo(userRes.data);
+    // 用户活跃
+    await $api.user.accountActive({user_id})
+    router.push('/welcomePage')
+}
+
+const goBack = () => {
+  router.back()
+}
+</script>
+<style scoped lang="less">
+@import "@/style/common-styles.less";
+// @media (min-width: 450px) { /* PC 端样式 */
+//   .page {
+//     min-width: 375px;
+//     width: 375px !important;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//   }
+// }
+.registration-box{
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+}
+.mt-21 {
+  margin-top: 21px;
+}
+.page {
+  position: relative; /* 确保内部绝对定位的元素以容器为基准 */
+  padding: 16.5px 15.5px 61px 16px;
+  background-color: #ffffff;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  min-width: 375px;
+  max-width: 750px;
+  :deep(.wp-input){
+    .field_1 {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+      margin-top: 8px;
+    }
+    .field_2 {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+      margin-top: 8px;
+    }
+  }
+  .image_4 {
+    width: 24px;
+    height: 25px;
+  }
+  .group_2 {
+    margin-top: 27.5px;
+    .image_5 {
+      border-radius: 50%;
+      width: 48px;
+      height: 48px;
+    }
+    .text_2 {
+      color: #1b1b22;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      line-height: 17px;
+    }
+  }
+  .group_3 {
+    margin-top: 22px;
+    :deep(.text-wrapper_1) {
+      margin-top: 8px;
+    }
+    .field {
+      background-color: #f6f6f6;
+      border-radius: 16px;
+    }
+    .text-wrapper_4 {
+      margin: 16px 4.5px 0 4px;
+    }
+    .cf-button {
+      padding: 16px 0px;
+      border-radius: 16px;
+      background-color: #f6f6f6;
+      height: 48px;
+      font-family: PingFang SC;
+      font-size: 16px;
+      line-height: 15px;
+      &.van-button--disabled {
+        background-color: #f6f6f6 !important;
+        border: 1px solid #f6f6f6 !important;
+        color: #d1d1d3 !important;
+      }
+    }
+  }
+}
+.group_4 {
+    width: 100%;
+    background-color: #fff;
+    min-width: 375px;
+    max-width: 750px;
+    box-sizing: border-box; /* 确保内边距和边框不会影响元素的实际宽度 */
+    :deep(.divider){
+      border-color: #f6f6f6;
+      margin:0 0 1rem 0;
+      font-size: 0.75rem;
+    }
+    .group_5 {
+      justify-content: center;
+      .image_6 {
+        border-radius: 45px;
+        width: 48px;
+        height: 48px;
+        margin: 0 20px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/signinAccount备份.vue b/src/views/login/components/signinAccount备份.vue
new file mode 100644
index 0000000..bc39ca8
--- /dev/null
+++ b/src/views/login/components/signinAccount备份.vue
@@ -0,0 +1,347 @@
+<template>
+    <div class="login">
+        <div class="login-box">
+            <headerNavbar></headerNavbar>
+            <div class="logo-center">
+                <img class="img" src="@/assets/svg/Frame 1500.svg" alt="">
+            </div>
+            <van-form >
+                <van-cell-group inset>
+                    <div class="input-wrap">
+                        <ABPInput v-model="formData.username"  @onClear="formData.username=''" autocomplete="off" maxlength="15" :placeholder="$t('plsEnterAccount6_15')">{{ $t('username') }}</ABPInput>
+                      </div>
+                      <div class="input-wrap">
+                        <ABPInput v-model="formData.password" type="password"  @onClear="formData.password=''" autocomplete="off" maxlength="15" :placeholder="$t('plsEnterPassword6_15')">{{ $t('password') }}</ABPInput>
+                      </div>
+                      <div class="input-wrap">
+                        <ABPInput v-model="formData.password_2" type="password"  @onClear="formData.password_2=''" autocomplete="off" maxlength="15" :placeholder="$t('plsConfirmPasswordAgain')">{{ $t('confirmPassword') }}</ABPInput>
+                      </div>
+                </van-cell-group>
+                <div class="login-radio">
+                    <van-checkbox v-model="data.form.checked" class="my-checkbox" @click="checkHandle"></van-checkbox>
+                        <div class="link" style="padding-left: 10px;">{{ $t('init_text_1') }}
+                            <span @click="toUserService(`用户服务协议`)">{{ $t('init_text_2') }}</span>
+                            {{ $t('init_text_3') }}
+                            <span @click="toUserService(`隐私政策`)">{{ $t('init_text_4') }}</span>
+                        </div>
+                    
+                </div>
+                <div style="margin: 16px;">
+                  <van-button class="reg_btn" color="#f6f6f6" block @click="clickBtn" :disabled="isDisabled">
+                    {{ $t('register') }}
+                  </van-button>
+                  <div class="loginBtn" style="margin-top:16px" @click="router.push({path: '/login'})">{{ $t('hasAccount') }}</div>
+                </div>
+                <div class="footer" v-if="appConfig.email_reg || appConfig.phone_reg">
+                    <van-divider style="width: 100%;">{{ $t('otherRegisterStyle') }}</van-divider>
+                    <!-- <div class="footer-title">其他注册方式</div> -->
+                    <div class="footer-img">
+                        <div v-if="appConfig.phone_reg" class="footer-img1" @click="otherLogin('phone')">
+                            <img class="img" src="@/assets/svg/shouji.svg" alt="">
+                        </div>
+                        <div v-if="appConfig.email_reg" class="footer-img2" @click="otherLogin('email')">
+                            <img class="img" src="@/assets/svg/duanxin.svg" alt="">
+                        </div>
+                    </div>
+                  </div>
+              </van-form>
+             
+          </div>
+          
+    </div>
+    <van-dialog v-model:show="agreementDialog" :title="$t('init_text_5')">
+        <template #default>
+            <div class="dialog">
+            <div class="link">
+                {{ $t('init_text_6') }}
+                <span  @click="toUserService(`用户服务协议`)">{{ $t('init_text_2') }}</span>
+                {{ $t('init_text_3') }}
+                <span  @click="toUserService(`隐私政策`)">{{ $t('init_text_4') }}</span>
+            </div>
+        </div>
+        </template>
+        <template #footer>
+            <div class="dialog-but">
+                <van-button class="btn" type="default" @click="refuseAreement">{{ $t('rejectCall') }}</van-button>
+                <van-button class="btn" color="#1B1B22" @click="sumAreement">{{ $t('refuse_continue') }}</van-button>
+            </div>
+        </template>
+      </van-dialog>
+      <userService :type="serviceType" :show="serviceShow" @close="serviceShow=false"></userService>
+</template>
+<script setup >
+import ABPInput from "@/components/ABPPInput.vue"; 
+import headerNavbar from "@/components/header/headerNavbar.vue"
+import userService from "@/views/login/components/userService.vue"
+import { showToast } from 'vant';
+import { Base64 } from 'js-base64'
+import CryptoJS from "crypto-js";
+import { encrypt } from "@/utils/index.js"
+import { ref ,defineProps,reactive,onMounted, computed}  from 'vue'
+import { useUserStore } from "@/stores/user";
+import use from "@/use";
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+
+const { t }= useI18n()
+const { useEncryption, useUid, useCoinId } = use;
+const agreementDialog = ref(false)
+const userStore = useUserStore();
+const { setUserInfo } = userStore
+const { appConfig } = storeToRefs(userStore)
+const router = useRouter()
+const $api = inject("$api");
+const data = reactive({
+    form: {
+        checked: false,
+    }
+})
+const formData = ref({
+  username: "",
+  password: "",
+  password_2: "",
+});
+const serviceType = ref('')
+const serviceShow = ref(false)
+const isDisabled = computed(() => {
+    if (formData.value.username === "" || formData.value.password === "" || formData.value.password_2 === "") {
+        return true
+    } else {
+        return false
+    }
+})
+const checkHandle = () => {
+    // if (data.form.checked) {
+    //     agreementDialog.value = true
+    // }
+}
+const refuseAreement = () => {
+    data.form.checked = false
+    agreementDialog.value = false
+}
+const sumAreement = () => {
+    data.form.checked = true
+    agreementDialog.value = false
+    clickBtn()
+}
+const toUserService = (title) => {
+    serviceType.value = title
+    serviceShow.value = true
+    agreementDialog.value = false
+}
+const otherLogin = (type) => {
+    router.push({name: 'otherSignin',query: {type}})
+}
+const clickBtn = async () => {
+    const formClone = {
+        device_id: useUid(),
+        device_model: navigator.userAgent,
+        platform: 5, // 1ios 2安卓 3pc 4h5
+        password: formData.value.password,
+        username: formData.value.username,
+        reg_type: 1,
+    }
+    if (!(formData.value.username.length >=6 && formData.value.username.length <=15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.username))) {
+        showToast({ position: 'top', message: t('init_validate_1') })
+        return
+    }
+
+    if (!(formData.value.password.length >=6 && formData.value.password.length <=15 && /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,15}$/.test(formData.value.password))) {
+        showToast({ position: 'top', message: t('init_validate_5')})
+        return
+    }
+
+    if (formData.value.password !== formData.value.password_2) {
+        showToast({ position: 'top', message: t('twicePwdNoSame') })
+        return
+    }
+    if (!data.form.checked) return agreementDialog.value = true
+    formClone.password = encrypt(formClone.password)
+    // formClone.password = 'rbYF7IkGaaZ/YKiQvKBQwQ==' // neway2023
+    const res = await $api.login.register(formClone)
+    console.log(res);
+    if (res.code === 0) {
+        showToast({
+            message: t('successful_home'),
+            position: 'top',
+        });
+        let formDataClone = {}
+        formDataClone.device_id = useUid();
+        formDataClone.device_model = navigator.userAgent;
+        formDataClone.platform = 5; // 1ios 2安卓 3pc 4h5
+        formDataClone.login_type = 1;  // 登录类型 1用户名 2手机号码 3邮箱
+        formDataClone.username = formData.value.username;
+        formDataClone.password = encrypt(formData.value.password);
+        console.log(formDataClone);
+        // 记住密码
+        let rememberInfo = {
+            checked:true,
+            password:window.btoa(formData.value.password),
+            username:formData.value.username
+        }
+        window.localStorage.setItem('rememberPwd',JSON.stringify(rememberInfo))
+        login(formDataClone)
+    }
+}
+const login = async (formDataClone) => {
+    const loginRes = await $api.login.login(formDataClone);
+    if (loginRes.code !== 0) return;
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem('token', token)
+    localStorage.setItem('im_token', im_token)
+    localStorage.setItem('user_id', user_id)
+    // showToast({ position: "top", message: "登录成功" });
+    const userRes = await $api.login.userInfo();
+    setUserInfo(userRes.data);
+    //二次登录
+    // if(IMSDK){
+    //     await  IMSDK.login(im_config())
+    // }
+    // router.push({ path: '/home' });
+    router.push('/welcomePage')
+}
+</script>
+<style scoped lang="less">
+    .login {
+        width: 100vw;
+        min-height: 100vh;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        // padding: 0 20px;
+        .login-box {
+            width: 100%;
+            // min-width: 375px;
+            // max-width: 750px;
+            border-radius: 5px;
+            // padding: 0 10px;
+            // margin-bottom: 150px;
+            background-color: #fff;
+            height: 100vh;
+            overflow-y: auto;
+            overflow-x: hidden;
+            // overflow: auto;
+            .logo-left {
+                height: 60px;
+                display: flex;
+                align-items: center;
+                .img {
+                    width: 30px;
+                    height: 30px;
+                }
+                .img:nth-child(1) {
+                    margin-right: 7px;
+                }
+            }
+            .logo-center {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 20px 0 30px 0;
+                .img {
+                    width: 60px;
+                    height: 60px;
+                }
+            }
+            .login-radio {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 20px;
+                font-size: 0.75rem;
+                span {
+                    color: #A4A4A7;
+                }
+                .link {
+                    color: #717175;
+                    font-family: PingFang SC;
+                    font-size: 0.75rem;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                    width: 100%;
+                    
+                }
+                .link > span {
+                    color: #0095F6;
+                }
+            }
+
+            .loginBtn {
+                text-align: center;
+                margin-top: 16px;
+                color: #181818;
+                font-family: PingFang SC;
+                font-size: 0.875rem;
+                font-style: normal;
+                font-weight: 400;
+                line-height: normal;
+            }
+            .input-wrap {
+                 margin-top: 20px;
+            }
+        }
+        .footer {
+            margin: 20px 16px 100px 16px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .footer-title {
+                font-size: 0.75rem;
+                color: #A4A4A7;
+            }
+            .footer-img {
+                width: 100%;
+                display: flex;
+                justify-content: space-evenly;
+                /* padding: 0 50px; */
+                // margin-top: 10px;
+                div {
+                width: 48px;
+                height: 48px;
+                border-radius: 50%;
+                background-color: rgba(246, 246, 246);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                }
+            }
+        }
+    }
+    .dialog {
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        letter-spacing: 1px;
+        padding: 24px 32px;
+        .link > span{
+            color: #0095F6;
+        }
+    }
+    .dialog-but {
+        display: flex;
+        justify-content: space-around;
+        padding: 0 16px 16px;
+        .btn:nth-child(1) {
+            width: 98px;
+        }
+        .btn:nth-child(2) {
+            width: 157px;
+        }
+    }
+    .reg_btn {
+        border-radius: 12px;
+        font-size: 1rem;
+    }
+    :deep(.van-button__text) {
+        color: rgba(209, 209, 211, 1);
+    }
+    :deep(.van-checkbox__icon) {
+        font-size:var(--size-12px);
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/userService.vue b/src/views/login/components/userService.vue
new file mode 100644
index 0000000..2d2e6d7
--- /dev/null
+++ b/src/views/login/components/userService.vue
@@ -0,0 +1,222 @@
+<template>
+    <div class="main" v-if="props.show">
+        <AppNavBar :title="title" left-arrow @click-left="close">
+        </AppNavBar>
+        <div class="text">
+            <iframe ref="iframeId" class="iframe" :src="url" frameborder="0" scrolling="yes"></iframe>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const { api_2, api_3, api_1 } = window.WEB_CONFIG
+import { AppNavBar } from '@/components'
+import { useRoute, useRouter } from 'vue-router';
+import { ref, onMounted, defineProps, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import use from "@/use";
+const { useUid } = use;
+const { t } = useI18n()
+const route = useRoute();
+const router = useRouter();
+const iframeId = ref(null)
+const title = ref('')
+const props = defineProps({
+    type: {
+        type: String,
+        default: ''
+    },
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+const emits = defineEmits(['close'])
+watch(() => props.type, (newVal, oldVal) => {
+    initSrc()
+})
+onMounted(async () => {
+    // await nextTick()
+    // // 在外部 Vue 的 window 上添加 postMessage 的监听，并且绑定处理函数 handleMessage
+    // window.addEventListener('message', handleMessage)
+})
+
+onBeforeUnmount(()=> {
+    // 注意移除监听！
+    // window.removeEventListener('message', handleMessage)
+})
+
+const handleMessage = (data) => {
+    console.log(111, data)
+}
+
+const urlObj = {
+    sit: {
+        agree: 'https://sit-im-manage-web.exchangs.top/h5/UserAgreement.html', // 用户服务协议
+        private: 'https://sit-im-manage-web.exchangs.top/h5/PrivacyClause.html', // 隐私政策
+        law: 'https://sit-im-manage-web.exchangs.top/h5/Law.html' // 法律声明
+    },
+    dev: {
+        agree: 'https://dev-im-manage-web.exchangs.top/h5/UserAgreement.html',
+        private: 'https://dev-im-manage-web.exchangs.top/h5/PrivacyClause.html',
+        law: 'https://dev-im-manage-web.exchangs.top/h5/Law.html'
+    },
+    prod: {
+        // agree: 'https://prod-im-manage-web.exchangs.top/h5/UserAgreement.html',
+        // private: 'https://prod-im-manage-web.exchangs.top/h5/PrivacyClause.html',
+        // law: 'https://prod-im-manage-web.exchangs.top/h5/Law.html'
+        agree: 'https://prod-im-manage-web.xxabc.info/h5/UserAgreement.html',
+        private: 'https://prod-im-manage-web.xxabc.info/h5/PrivacyClause.html',
+        law: 'https://prod-im-manage-web.xxabc.info/h5/Law.html'
+    },
+    uat: {
+        agree: 'https://uat-im-manage-web.exchangs.top/h5/UserAgreement.html',
+        private: 'https://uat-im-manage-web.exchangs.top/h5/PrivacyClause.html',
+        law: 'https://uat-im-manage-web.exchangs.top/h5/Law.html'
+    },
+}
+const url = ref('')
+const initSrc = () => {
+    let language = ''
+    if (window.localStorage.getItem('language')) {
+        switch (window.localStorage.getItem('language')) {
+            case 'zh-hant-cn':
+                language = 'zh_Hant'
+                break;
+            case 'us':
+                language = 'en_US'
+                break;
+            case 'zh-cn':
+                language = 'zh_CN'
+                break;
+            case 'vi-VN':
+                language = 'vi'
+                break;
+            case 'th':
+                language = 'th_TH'
+                break;
+            case 'id':
+                language = 'id_ID'
+                break;
+            case 'pt-br':
+                language = 'pt_BR'
+                break;
+        }
+    } else {
+        switch (navigator.language) {
+            case 'zh-TW':
+                language = 'zh_Hant'
+                break;
+            case 'en':
+                language = 'en_US'
+                break;
+            case 'zh-CN':
+                language = 'zh_CN'
+                break;
+            case 'vi':
+                language = 'vi'
+                break;
+            case 'th':
+                language = 'th_TH'
+                break;
+            case 'id':
+                language = 'id_ID'
+                break;
+            case 'pt-BR':
+                language = 'pt_BR'
+                break;
+            default: language = 'en_US'
+        }
+    }
+
+    if (window.WEB_CONFIG.api_1.includes('prod')) {
+        if (props.type === '用户服务协议') {
+            title.value = t('uaProtocol')
+            url.value = `${urlObj['prod']['agree']}?language=${language}`
+        } else if (props.type === '隐私政策') {
+            title.value = t('yszcTitle')
+            url.value = `${urlObj['prod']['private']}?language=${language}`
+        } else if (props.type === '法律声明') {
+            title.value = t('slsmTitle')
+            url.value = `${urlObj['prod']['law']}?language=${language}`
+        }
+    } else if (window.WEB_CONFIG.api_1.includes('sit')) {
+        if (props.type === '用户服务协议') {
+            title.value = t('uaProtocol')
+            url.value = `${urlObj['sit']['agree']}?language=${language}`
+        } else if (props.type === '隐私政策') {
+            title.value = t('yszcTitle')
+            url.value = `${urlObj['sit']['private']}?language=${language}`
+        } else if (props.type === '法律声明') {
+            title.value = t('slsmTitle')
+            url.value = `${urlObj['sit']['law']}?language=${language}`
+        }
+    } else if (window.WEB_CONFIG.api_1.includes('dev')) {
+        if (props.type === '用户服务协议') {
+            title.value = t('uaProtocol')
+            url.value = `${urlObj['dev']['agree']}?language=${language}`
+        } else if (props.type === '隐私政策') {
+            title.value = t('yszcTitle')
+            url.value = `${urlObj['dev']['private']}?language=${language}`
+        } else if (props.type === '法律声明') {
+            title.value = t('slsmTitle')
+            url.value = `${urlObj['dev']['law']}?language=${language}`
+        }
+    } else if (window.WEB_CONFIG.api_1.includes('uat')) {
+        if (props.type === '用户服务协议') {
+            title.value = t('uaProtocol')
+            url.value = `${urlObj['uat']['agree']}?language=${language}`
+            console.log('urlObj',url.value);
+        } else if (props.type === '隐私政策') {
+            title.value = t('yszcTitle')
+            url.value = `${urlObj['uat']['private']}?language=${language}`
+        } else if (props.type === '法律声明') {
+            title.value = t('slsmTitle')
+            url.value = `${urlObj['uat']['law']}?language=${language}`
+        } else if (props.type === 'google') {
+            title.value = 'Google登录'
+            url.value = `https://uat-im-manage-web.exchangs.top/h5/configPage.html?provider=${props.type}&login_type=1&platform=5&device_id=${getDeviceId.value}&device_model=${navigator.userAgent}`
+        }
+    }
+}
+const getDeviceId = computed(() => {
+    return useUid();
+})
+const close = () => {
+    emits('close')
+}
+</script>
+<style lang="less" scoped>
+.main {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+
+    // position: relative;
+    .content {
+        margin-top: 142px;
+    }
+}
+
+.text {
+    min-width: 375px;
+    max-width: 750px;
+    height: 100%;
+    margin-top: 56px;
+}
+
+.iframe-wrap {
+    height: 100%;
+}
+
+.iframe {
+    width: 100%;
+    height: calc(100% - 50px);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/verify.vue b/src/views/login/components/verify.vue
new file mode 100644
index 0000000..e659c32
--- /dev/null
+++ b/src/views/login/components/verify.vue
@@ -0,0 +1,239 @@
+<template>
+    <div class="verify">
+    
+    <div class="content">
+        <headerNavbar></headerNavbar>
+        <div class="title">
+            {{ title }}
+        </div>
+        <div class="content-num">
+            <span v-if="type === 'phone'"><span>{{ $t('codeSendTo') + area_code}}</span> {{ value }}</span>
+            <span v-else-if="type === 'email'">{{ $t('codeSendTo') + value }}</span>
+        </div>
+        <van-field
+            v-model="sms"
+            center
+            :maxlength="6"
+            :placeholder="$t('verification_code1')"
+        >
+        <template #button>
+            <div style="display: flex;">
+                <div class="remove-icon"><IconRemove v-show="sms !== ''" class="wp-input-remove" @click="sms = ''"></IconRemove></div>
+                <div class="btn">
+                    <span @click="getCodeClick" :class="[verifyCodeForm.status  !== 'sended'?'lingheigth-avtive': '']">{{ verifyCodeForm.text }} </span>
+                    <span v-show="verifyCodeForm.status === 'sended'">
+                        <!-- <span> -->
+                            <van-count-down
+                                ref="countDown"
+                                millisecond
+                                :time="60000"
+                                :auto-start="false"
+                                format="sss"
+                                @finish="onFinish"
+                                style="color:#969799;font-size:12px"
+                                />
+                        <!-- </span> -->
+                        <!-- <span>s</span> -->
+                    </span>
+                </div>
+            </div>
+        </template>
+      </van-field>
+      <div style="margin: 24px 0px;">
+        <van-button color="#1B1B22" :disabled="!sms" block @click="handleClick">
+          {{ $t('nextStep') }}
+        </van-button>
+      </div>
+    </div>
+</div>
+</template>
+<script setup>
+import headerNavbar from "@/components/header/headerNavbar.vue"
+import { ref,defineProps,reactive,onMounted}  from 'vue'
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router'
+import use from "@/use";
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const { useUid, useEmailLang} = use;
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const sms = ref('')
+const countDown = ref(null);
+const { type, area_code, value } = route.query
+const verifyCodeForm = ref({
+    text: t('getVerifyCode'),
+    status: 'unsent'
+})
+const title = ref('')
+onMounted(() => {
+    console.log(route.query);
+    init()
+    getCodeClick()
+})
+const init = () => {
+    if(type === 'phone') {
+        title.value = t('mobileCode')
+    } else if (type === 'email') {
+        title.value = t('email_verification_code')
+    }
+}
+const getCodeClick = async () => {
+    if (verifyCodeForm.value.status == 'sended') return
+    if (verifyCodeForm.value.status == 'unsent') {
+        verifyCodeForm.value.status = 'sended'
+        start()
+        const res = await getCode()
+        if (res.code === 0) {
+            verifyCodeForm.value.text = t('reget')
+            showToast({message: t('sentSuccessfully'),position: 'top',});
+        } else {
+            reset()
+            verifyCodeForm.value.status = 'finished'
+            verifyCodeForm.value.text = t('reget')
+        }
+    } else if (verifyCodeForm.value.status == 'finished') {
+        verifyCodeForm.value.status = 'sended'
+        reset()
+        start() 
+        const res = await getCode()
+        if (res.code === 0) {
+            showToast({message: t('sentSuccessfully'),position: 'top',});
+        } else {
+            reset()
+            verifyCodeForm.value.status = 'finished'
+            verifyCodeForm.value.text = t('reget')
+        }
+    }
+}
+const start = () => {
+    countDown.value.start();
+};
+const reset = () => {
+    countDown.value.reset();
+};
+const onFinish = () => {
+    verifyCodeForm.value.status = 'finished'
+    verifyCodeForm.value.text = t('reget')
+}
+// 发送验证码
+const getCode = async () => {
+    let params = {
+        device_id: useUid(),
+        platform: 5,
+        verify_type: 1
+    }
+    const language = useEmailLang()
+    if (type === 'phone') {
+        params.area_code = area_code
+        params.phone = value
+        params.verify_by = 1
+    } else if (type === 'email') {
+        params.email = value
+        params.verify_by = 2
+        params.language = language
+
+    }
+    const res = await $api.login.sendCode(params)
+    return res
+}
+const handleClick = async () => {
+    let params = {}
+    if (type === 'phone') {
+        params.area_code = area_code
+        params.phone = value
+        params.verify_by = 1
+    } else if (type === 'email') {
+        params.email = value
+        params.verify_by = 2
+    }
+    params.verify_code = sms.value
+    const res = await $api.login.checkCode(params)
+    if (res.code === 0) {
+        let query = {}
+        if (type === 'phone') {
+            query.area_code = area_code
+            query.phone =  value
+        } else if (type === 'email') {
+            query.email = value
+        }
+        query.type = type
+        router.push({name: 'setPassword',query})
+    }
+}
+</script>
+<style scoped lang="less">
+.verify {
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    // padding: 0 20px;
+}
+.content {
+    min-width: 375px;
+    max-width: 750px;
+    
+    .title {
+        margin-top: 56px;
+        padding-left: 20px;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1.25rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    }
+    .content-num {
+        padding-left: 20px;
+        margin: 10px 0 30px 0;
+        color: var(--Alpha_B40, rgba(0, 0, 0, 0.40));
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    .btn {
+        /* width: 100px; */
+        height: 36px;
+        flex-shrink: 0;
+        border-radius: 23px;
+        background: var(--3, #F6F6F6);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        font-size:12px;
+        :deep(.van-count-down) {
+            background: var(--3, #F6F6F6);
+        }
+        
+    }
+    .passBtn {
+        display: flex;
+        .icon {
+            margin-left: 30px;
+        }
+    }
+    .lingheigth-avtive {
+        color: #0095F6;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
+    .remove-icon {
+        display: flex;
+        align-items: center;
+        margin-right: 10px;
+    }
+}
+:deep(.van-button) {
+    border-radius: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/components/welcomePage.vue b/src/views/login/components/welcomePage.vue
new file mode 100644
index 0000000..edfd651
--- /dev/null
+++ b/src/views/login/components/welcomePage.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="welcome-page" ref="welcomeRef"  views_grade="secondary_view">
+    <div class="content">
+      <div class="title">{{ $t("welcomeToQDDChat") }}</div>
+      <div class="avatar">
+        <div class="img" @click="onAvatar">
+          <img
+            v-if="info.avatar"
+            :src="info.avatar"
+            @error="handleImageError"
+            alt=""
+          />
+        </div>
+        <div class="tip">{{ $t("choiceYourAvatar") }}</div>
+        <img class="hi" src="@/assets/svg/hi.svg" alt="" />
+      </div>
+      <div class="user-name">
+        <div class="label">{{ $t("nicknames") }}</div>
+        <div class="input">
+          <van-field v-model="info.nickname" maxlength="16">
+            <template #right-icon>
+              <IconRemoveBG
+                v-show="info.nickname !== ''"
+                class="input-remove"
+                @click="onClear"
+              ></IconRemoveBG>
+            </template>
+          </van-field>
+        </div>
+        <!-- <div class="tip">请设置4-15个字符</div> -->
+        <div class="tip" v-if="!appConfig?.modify_nickName_limit?.is_limit">
+          {{ $t("set_characters") }}
+        </div>
+        <div class="tip" v-if="appConfig?.modify_nickName_limit?.is_limit">
+          {{ $t("set_characters") }},{{
+            $t("setNickNameTimes", {
+              day: appConfig?.modify_nickName_limit?.day
+            })
+          }}
+        </div>
+      </div>
+      <div class="btn">
+        <van-button
+          class="complete_btn"
+          :loading="loading"
+          :disabled="info&&info.nickname&&info.nickname.length < 4"
+          color="#1B1B22"
+          block
+          @click="onComplete"
+        >
+          {{ $t("finish") }}
+        </van-button>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+import { ref, onMounted, defineProps, watch } from "vue";
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n";
+import IconRemoveBG from "@/components/icons/IconRemoveBG.vue";
+import defaultAvatar from "@/assets/svg/avatar-bg.svg";
+import { storeToRefs } from "pinia";
+import { useGrade } from '@/utils/levelConfig'
+const welcomeRef = ref(null)
+useGrade(welcomeRef, 2)
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore);
+const $api = inject("$api");
+const info = ref({
+  nickname: "",
+  avatar: ""
+});
+const loading = ref(false);
+const onClear = () => {
+  info.value.nickname = "";
+};
+const onComplete = async () => {
+  loading.value = true;
+  try {
+    const res = await $api.login.updateUserInfo({
+      nickname: info.value.nickname
+    });
+    if (res.code === 6086) return;
+    const res2 = await $api.login.updateNickname({
+      nickname: info.value.nickname,
+      user_id: userInfo.value?.userID
+    });
+    if (res2.code != 0) return;
+    router.push({ path: "/home" });
+    window.sessionStorage.removeItem("setNickname");
+  } catch (e) {
+    console.log(e);
+  } finally {
+    loading.value = false;
+  }
+};
+// 图片加载失败
+const handleImageError = e => {
+  info.value.avatar = defaultAvatar;
+};
+const onAvatar = () => {
+  window.sessionStorage.setItem("setNickname", info.value.nickname);
+  router.push("/welcomePage/setAvatar");
+};
+onMounted(() => {
+  let name = window.sessionStorage.getItem("setNickname");
+  info.value.nickname = name || userInfo.value.nickname||'';
+  info.value.avatar = userInfo.value.faceURL
+    ? userInfo.value.faceURL
+    : defaultAvatar;
+});
+watch(() => userInfo.value, () => {
+  let name = window.sessionStorage.getItem("setNickname");
+  info.value.nickname = name || userInfo.value.nickname||'';
+  info.value.avatar = userInfo.value.faceURL
+    ? userInfo.value.faceURL
+    : defaultAvatar;
+})
+</script>
+<style lang="less" scoped>
+.welcome-page {
+  width: 100vw;
+  height: 100vh;
+  background: #ffffff;
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
+  .content {
+    min-width: 375px;
+    max-width: 750px;
+    padding: 0 16px;
+    border-radius: 5px;
+    margin-bottom: 150px;
+    .title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #1b1b22;
+      margin-top: 73px;
+      margin-bottom: 35px;
+      text-align: center;
+    }
+    .avatar {
+      height: 168px;
+      width: 168px;
+      position: relative;
+      margin: 0 auto;
+      margin-bottom: 60px;
+      .img {
+        width: 100%;
+        height: 100%;
+        background-color: #f5f5f5;
+        border-radius: 50%;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+      .tip {
+        margin-top: 12px;
+        font-size: 0.875rem;
+        text-align: center;
+      }
+      .hi {
+        position: absolute;
+        right: -12px;
+        top: 17px;
+      }
+    }
+    .user-name {
+      .label {
+        color: #1b1b22;
+        font-size: 0.875rem;
+      }
+      .input {
+        margin: 12px 0;
+        :deep(.van-field) {
+          background: #1b1b2208;
+          border-radius: 12px;
+          .input-remove {
+            width: 18px;
+            height: 18px;
+          }
+          .van-field__right-icon {
+            line-height: normal;
+          }
+        }
+      }
+      .tip {
+        font-size: 0.75rem;
+        color: #76767a;
+      }
+    }
+    .btn {
+      margin-top: 24px;
+      .complete_btn {
+        border-radius: 12px;
+        font-size: 1rem;
+        height: 48px;
+      }
+      .complete_btn.van-button--disabled {
+        background-color: #f6f6f6 !important;
+        border: 1px solid #f6f6f6 !important;
+        color: #d1d1d3 !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/login/login.js b/src/views/login/login.js
new file mode 100644
index 0000000..e50ad96
--- /dev/null
+++ b/src/views/login/login.js
@@ -0,0 +1,33 @@
+
+
+
+const loginClick = async () => {
+    if (!formData.value.username || !formData.value.password) return showToast('请先输入账号或密码')
+    if (!data.form.checked) return agreementDialog.value = true
+    const formDataValue = formData.value;
+    const formDataClone = {};
+    formDataClone.device_id = useUid();
+    formDataClone.device_model = navigator.userAgent;
+    formDataClone.platform = 5; // 1ios 2安卓 3pc 4h5
+    formDataClone.login_type = 1;  // 登录类型 1用户名 2手机号码 3邮箱
+    formDataClone.username = formDataValue.username;
+    formDataClone.password = encrypt(formDataValue.password);
+    console.log(formDataClone);
+    login(formDataClone)
+}
+const login = async (formDataClone) => {
+    const loginRes = await $api.login.login(formDataClone);
+    if (loginRes.code !== 0) return;
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem('token', token)
+    localStorage.setItem('im_token', im_token)
+    localStorage.setItem('user_id', user_id)
+    showToast({ position: "top", message: "登录成功" });
+    const userRes = await $api.login.userInfo();
+    setUserInfo(userRes.data);
+    //二次登录
+    if(IMSDK){
+    await IMSDK.login(im_config())
+    }
+    router.push({ path: '/home' });
+}
\ No newline at end of file
diff --git a/src/views/my/about/index.vue b/src/views/my/about/index.vue
new file mode 100644
index 0000000..44c57e3
--- /dev/null
+++ b/src/views/my/about/index.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { AppNavBar } from '@/components/index.js'
+import { useGrade } from '@/utils/levelConfig'
+import { useI18n } from "vue-i18n"
+import defaultImg from '@/assets/about.png'
+import userService from "@/views/login/components/userService.vue"
+const { t } = useI18n()
+const $api = inject("$api");
+const router = useRouter()
+const aboutRef = ref(null)
+useGrade(aboutRef, 2)
+/**
+ * 获取版本号
+ */
+const getList = async () => {
+  const res = await $api.login.getVersion({ platform: 4 });
+  if (res.code != 0) return
+}
+const serviceType = ref('')
+const serviceShow = ref(false)
+onMounted(() => {
+  // getList();
+})
+const handleClick = (type) => {
+  serviceType.value = type
+  serviceShow.value = true
+}
+</script>
+
+<template>
+  <div ref="aboutRef" class="about">
+    <AppNavBar :title="$t('about')" views_grade="secondary_view" @click-left="router.push('/home/my')" />
+    <div class="about-wrap">
+      <div class="about-content">
+        <img :src="defaultImg" alt="">
+        <div class="title">{{ $t('private_chat') }}</div>
+        <!-- <div class="version">V0.0.1</div> -->
+      </div>
+      <div class="tabs">
+        <van-cell-group :border="true">
+          <van-cell is-link :border="true" @click="handleClick(`用户服务协议`)">
+            <template #title>
+              <span class="custom-title">{{ $t('uaProtocol') }}</span>
+            </template>
+            <template #right-icon>
+              <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+            </template>
+          </van-cell>
+          <van-cell :title="$t('yszcTitle')" is-link to="" :border="true" @click="handleClick(`隐私政策`)">
+            <template #title>
+              <span class="custom-title">{{ $t('yszcTitle') }}</span>
+            </template>
+            <template #right-icon>
+              <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+            </template>
+          </van-cell>
+          <van-cell :title="$t('slsmTitle')" is-link to="" :border="true" @click="handleClick(`法律声明`)">
+            <template #title>
+              <span class="custom-title">{{ $t('slsmTitle') }}</span>
+            </template>
+            <template #right-icon>
+              <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+    </div>
+    <userService :type="serviceType" :show="serviceShow" @close="serviceShow=false"></userService>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.about-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .about-content {
+    margin: 100px auto 48px auto;
+    width: 90px;
+
+    img {
+      width: 90px;
+      height: 90px;
+      margin-bottom: 20px;
+    }
+
+    .title {
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 4px;
+      text-align: center;
+    }
+
+    .version {
+      color: #76767A;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 18px;
+      /* 150% */
+      text-align: center;
+    }
+  }
+
+  .tabs {
+    height: calc(100vh - 286px);
+    overflow-y: auto;
+    width: 100%;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    background: #fff;
+    border-right: 1px solid #D1D1D3;
+    /deep/.van-cell {
+      height: 60px;
+      line-height: 60px;
+      padding: 0 16px;
+      &:after {
+        left: 0;
+        right: 0;
+      }
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+          margin-bottom: 4px;
+        }
+
+        .custom-title {
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+
+      .notice-value-link {
+        margin-top: 22px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/account/index.vue b/src/views/my/account/index.vue
new file mode 100644
index 0000000..214044b
--- /dev/null
+++ b/src/views/my/account/index.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGrade,useToBelow } from '@/utils/levelConfig.js'
+import { AppNavBar } from "@/components";
+const router = useRouter()
+const my_info = ref()
+const toBelow = useToBelow()
+useGrade(my_info, 2)
+
+</script>
+
+<template>
+  <div ref="my_info">
+    <div class="my_info_container">
+      <VanCellGroup title="案例" inset>
+        <!--二级跳转特殊处理 pc跳转到4级 移动跳转3级-->
+        <VanCell title="二级"  @click="toBelow('/home/my/account/info','/home/my/account/info/modify_name')" is-link />
+        <VanCell title="二级"  @click="toBelow('/home/my/account/info','/home/my/account/info/modify_name')" is-link />
+        <VanCell title="二级"  @click="toBelow('/home/my/account/info','/home/my/account/info/modify_name')" is-link />
+        <VanCell title="二级"  @click="toBelow('/home/my/account/info','/home/my/account/info/modify_name')" is-link />
+      </vancellgroup>
+    </div>
+    <AppNavBar views_grade="secondary_view" title="二级"  @click-left="router.push('/home/my')" />
+    <!-- 三级 -->
+    <RouterView />
+
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/views/my/account/info/index.vue b/src/views/my/account/info/index.vue
new file mode 100644
index 0000000..117f199
--- /dev/null
+++ b/src/views/my/account/info/index.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import {AppNavBar} from '@/components'
+const router = useRouter()
+const my_info = ref()
+useGrade(my_info, 3)
+</script>
+
+<template>
+  <div ref="my_info">
+    <div class="my_info_container">
+      <AppNavBar title="💿三级" views_grade="thirdly_view" left-arrow @click-left="router.push('/home/my/account')" />
+
+      <VanCellGroup title="案例" inset>
+        <VanCell title="📊 三级" to="/home/my/account/info/modify_name" is-link />
+        <VanCell title="📊 三级" to="/home/my/account/info/phone" is-link />
+      </vancellgroup>
+    </div>
+    <!-- 四级 -->
+      <RouterView />
+  </div>
+</template>
+
+<style scoped>
+.my_info_container{
+  flex: 1;
+  position: relative;
+}
+</style>
diff --git a/src/views/my/account/info/modify_name/details/index.vue b/src/views/my/account/info/modify_name/details/index.vue
new file mode 100644
index 0000000..68967a4
--- /dev/null
+++ b/src/views/my/account/info/modify_name/details/index.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import { AppNavBar } from '@/components'
+const router = useRouter()
+const my_info = ref()
+useGrade(my_info, 5)
+const defaultList = [
+  { id: 100, text: '轻量' },
+  { id: 101, text: '可定制的' },
+  { id: 102, text: '移动端' },
+  { id: 103, text: 'Vue' },
+  { id: 104, text: '组件库' },
+  { id: 105, text: 'VantUI' },
+  { id: 106, text: '没有下一级了' },
+]
+const list = ref([...defaultList])
+function add() {
+  list.value.push({ id: Math.random(), text: 'Barrage' })
+}
+</script>
+
+<template>
+  <div ref="my_info">
+    <div class="my_info_container">
+      <AppNavBar title="💿五级" views_grade="fifth_view" left-arrow @click-left="router.push('/home/my/account/info/modify_name')" />
+
+    </div>
+    <van-barrage v-model="list">
+      <div class="video" style="width: 100%; height: 150px"></div>
+    </van-barrage>
+    <van-space style="margin-top: 10px">
+      <van-button @click="add" type="primary" size="small"> 弹幕 </van-button>
+    </van-space>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/my/account/info/modify_name/index.vue b/src/views/my/account/info/modify_name/index.vue
new file mode 100644
index 0000000..f6e84d5
--- /dev/null
+++ b/src/views/my/account/info/modify_name/index.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import {AppNavBar} from '@/components'
+
+const router = useRouter()
+const my_info = ref()
+useGrade(my_info, 4)
+</script>
+
+<template>
+  <div ref="my_info">
+    <div >
+      <AppNavBar title="四级" views_grade="fourth_view" left-arrow @click-left="router.push('/home/my/account/info')" />
+
+      <VanCellGroup title="案例" inset>
+        <VanCell title="📊 四级" to="/home/my/account/info/modify_name/details" is-link />
+      </vancellgroup>
+    </div>
+    <!-- 五级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/my/account/info/phone/index.vue b/src/views/my/account/info/phone/index.vue
new file mode 100644
index 0000000..5b8c78b
--- /dev/null
+++ b/src/views/my/account/info/phone/index.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+
+const router = useRouter()
+const my_info = ref()
+useGrade(my_info, 4)
+</script>
+
+<template>
+  <div ref="my_info">
+    <div class="my_info_container">
+      <VanNavBar title="💿四级" left-arrow @click-left="router.push('/home/my/account/info')" />
+
+      <van-notice-bar
+        left-icon="volume-o"
+        text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
+      />
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/my/appearance/appBgConf.vue b/src/views/my/appearance/appBgConf.vue
new file mode 100644
index 0000000..0ca92ad
--- /dev/null
+++ b/src/views/my/appearance/appBgConf.vue
@@ -0,0 +1,170 @@
+<script setup>
+import { ref, watch, onMounted, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+import { AppNavBar } from '@/components'
+import { color2bgCCss } from '@/utils/index'
+import { useI18n } from "vue-i18n"
+import PreviewContent from './previewContent.vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  bubbleBgColor: {
+    type: String,
+    default: '6197EF'
+  },
+  bgColor: {
+    type: String,
+    default: ''
+  },
+  bgimgAlpha: {
+    type: Number,
+    default: 100
+  },
+  activeBgConf: {
+    type: Object,
+    default: () => {}
+  },
+})
+const emits = defineEmits(['update:visible', 'onChange'])
+
+const { t } = useI18n()
+const $api = inject("$api");
+const router = useRouter()
+const alphaNum = ref(props.bgimgAlpha)
+
+const closeBgConf = () => {
+  emits('update:visible', false)
+}
+
+const onAlphaChange = (val) => {
+  alphaNum.value = val
+  emits('update:bgimgAlpha', val)
+  document.documentElement.style.setProperty('--preview-bg-alpha', `opacity(${val}%)`)
+}
+
+const handleBgColorChange = (color) => {
+  emits('update:bgColor', color)
+}
+
+watchEffect(() => {
+  alphaNum.value = props.bgimgAlpha
+})
+
+</script>
+
+<template>
+  <div class="appbgconf" v-if="visible">
+    <AppNavBar :forceShowArrow="true" :title="$t('chatBackground')" views_grade="secondary_view" @click-left="closeBgConf" />
+    <div class="appbgconf-wrap">
+      <div class="ttl">{{ $t('skinPreview') }}</div>
+      <div class="preview-wrapper">
+        <PreviewContent :bubbleBgColor="bubbleBgColor" :bgcolor="bgColor" :imgPath="activeBgConf.imagePath" :alpha="alphaNum" />
+      </div>
+      <template v-if="activeBgConf.imagePath">
+        <div class="ttl">{{ $t('imageAlpha') }}</div>
+        <div class="appbgconf-item alpha">
+          <div class="alpha-item">
+            <div class="text">{{$t('min')}}</div>
+            <div class="slider-wrapper">
+              <van-slider v-model="alphaNum" @change="onAlphaChange" />
+            </div>
+            <div class="text">{{$t('max')}}</div>
+          </div>
+        </div>
+      </template>
+      <div class="appbgconf-item bgc">
+        <div class="ttl">{{ $t('bgColor') }}</div>
+        <div class="colors">
+          <div
+            class="color-item"
+            v-for="color in activeBgConf.colorList"
+            :key="color"
+            :data-key="color"
+            :style="`${color2bgCCss(color)};outline: 2px solid #${color === bgColor ? '6197EF' : 'fff'}`"
+            @click="handleBgColorChange(color)"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.appbgconf {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  // width: calc(100vw - 375px);
+  height: 100vh;
+  overflow-y: auto;
+  width: 100%;
+}
+.appbgconf-wrap {
+  width: 100%;
+  background: #FFF;
+  height: 100%;
+  padding: 56px 16px 0;
+
+  .preview-wrapper {
+    // height: 269px;
+  }
+
+  .appbgconf-item {
+    position: relative;
+    padding: 0 16px;
+
+    .alpha-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 48px;
+
+      .text {
+        color: #6197EF;
+      }
+
+      .slider-wrapper {
+        flex: 1;
+        margin: 0 16px;
+      }
+    }
+
+    
+    .colors {
+      display: flex;
+      align-items: center;
+      height: 84px;
+      overflow-x: auto;
+      width: 100%;
+      padding-left: 12px;
+
+      &::-webkit-scrollbar-thumb {
+        background: transparent;
+      }
+
+      .color-item {
+        flex-shrink: 0;
+        width: 60px;
+        height: 60px;
+        border-radius: 16px;
+        margin-right: 10px;
+        border: 1px solid #fff;
+      }
+    }
+  }
+  
+  .ttl {
+    display: flex;
+    align-items: flex-end;
+    height: 44px;
+    padding-left: 16px;
+    padding-bottom: 4px;
+    color: #1B1B22;
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/src/views/my/appearance/index.vue b/src/views/my/appearance/index.vue
new file mode 100644
index 0000000..4399d19
--- /dev/null
+++ b/src/views/my/appearance/index.vue
@@ -0,0 +1,388 @@
+<script setup>
+import { ref, watch, watchEffect } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useI18n } from "vue-i18n"
+import { showToast, showConfirmDialog } from 'vant'
+import AppBgConf from './appBgConf.vue'
+import PreviewContent from './previewContent.vue'
+import { color2bgCCss } from '@/utils/index'
+import { useUserStore } from "@/stores/user"
+import { setGlobalProperty } from '@/utils'
+import imgBg1 from '@/assets/chatbg.png'
+
+const userStore = useUserStore();
+const { setUserBgSettings } = userStore;
+const { userBgSettings } = storeToRefs(userStore);
+const { t } = useI18n()
+const $api = inject("$api");
+const router = useRouter()
+const appeRef = ref(null)
+useGrade(appeRef, 2)
+
+const bubbleBgColor = ref('6197EF')
+const chatBgColor = ref('EDEFF2')
+const chatImgAlpha = ref(100)
+const chatBgColorItem = ref({})
+const highPerformance = ref(localStorage.getItem('highPerformance') === 'true')
+const bgConfVisible = ref(false)
+const activeImgPath = ref('')
+
+const bubbleBgColorList = ref([])
+const imageList = ref([])
+// 获取全局颜色配置
+const getSysSettings = async () => {
+  // 默认配置
+  bubbleBgColorList.value = ['6197EF']
+  imageList.value = [{
+    alpha: 50,
+    imagePath: imgBg1,
+    colorList: [
+      "ECEDF4;D9DBE9",
+      "ECE9E8;E2DCD9",
+      "E6ECED;CFDDE1",
+    ]
+  }]
+  const res = await $api.setting.getSysBgSettings()
+  if (res.code !== 0) return
+  const bubbleColorList = res.data.bubbleColorList || []
+  const imgBgLists = res.data.imageList || []
+  const sysBubbleList = bubbleColorList.map(item => item.endsWith(';') ? item.slice(0, item.length - 1) : item)
+  const imgBgList = imgBgLists.map((item, idx) => ({...item, id: idx}))
+  bubbleBgColorList.value = [...new Set([...bubbleBgColorList.value, ...sysBubbleList].map(item => item.startsWith('#') ? item.slice(1) : item))]
+  imageList.value =  [...imageList.value, ...imgBgList]
+}
+
+const handleSetBgColor = (item) => {
+  const isPrePath = item.imagePath === activeImgPath.value
+  activeImgPath.value = item.imagePath
+  chatBgColor.value = isPrePath ? chatBgColor.value : item.colorList[0]
+  chatImgAlpha.value = item.alpha
+  chatBgColorItem.value = item
+  bgConfVisible.value = true
+  setGlobalProperty(item.imagePath, item.alpha)
+}
+
+const string2Color = (colorString) => {
+  let value = 0x00000000;
+  if (colorString.length > 0) {
+    if (colorString[0] === "#") {
+      colorString = colorString.substring(1);
+    }
+    if (colorString.length === 6) {
+      colorString = "FF" + colorString;
+    }
+    value = parseInt(colorString, 16);
+    if (value < 0xff000000) {
+      value += 0xff000000;
+    }
+  }
+  // 返回值根据实际情况进行调整，可以是字符串、数组或对象
+  return value.toString(16); // 以字符串形式返回颜色值
+}
+
+const genStyle = (item) => {
+  if (!item) return
+  const bgc = item.colorList[0].split(';')[0]
+  return `background: ${bgc.startsWith('#') ? bgc : `#${bgc}`};`
+}
+
+const handleSave = async () => {
+  const params = {
+    userID: localStorage.getItem('user_id'),
+    bubbleColor: bubbleBgColor.value,
+    background_type: 1,
+    image: {
+      alpha: chatImgAlpha.value,
+      color: chatBgColor.value,
+      imagePath: chatBgColorItem.value.imagePath
+    }
+  }
+  const res = await $api.setting.setGlobalAppearance(params)
+  setGlobalProperty(chatBgColorItem.value.imagePath, chatImgAlpha.value)
+  setUserBgSettings({
+    ...params,
+    conversation_id: '',
+  })
+  localStorage.setItem('highPerformance', highPerformance.value)
+  showToast({ position: "top", message: t('saveSuccessfully') })
+}
+
+const initUserSetting = (settings) => {
+  bubbleBgColor.value = settings.bubbleColor || '6197EF'
+  chatBgColor.value = settings.image.color || 'EDEFF2'
+  chatImgAlpha.value = settings.image.alpha || 100
+  chatBgColorItem.value = settings.image
+  activeImgPath.value = settings.image.imagePath
+  setGlobalProperty(settings.image.imagePath, settings.image.alpha)
+}
+
+const handleBack = async () => {
+  const { bubbleColor, image = {} } = userBgSettings.value || {}
+  const { imagePath, alpha, color } = image || {}
+  const preHighPerFormance = localStorage.getItem('highPerformance')
+  // 有一个不一样，证明改了没保存
+  const isChange = bubbleColor !== bubbleBgColor.value || imagePath !== activeImgPath.value || alpha !== chatImgAlpha.value || color !== chatBgColor.value || `${highPerformance.value}` !== preHighPerFormance
+  if (!isChange) {
+    setGlobalProperty(imagePath, alpha)
+    router.push('/home/my')
+    return
+  }
+  try {
+    await showConfirmDialog({
+      title: t('dialog_tip1'),
+      cancelButtonText: t('notSet'),
+      confirmButtonText: t('saveAndBack'),
+      message: t('changeSaveTip'),
+    })
+    await handleSave()
+    router.push('/home/my')
+  } catch(e) {
+    setGlobalProperty(imagePath, alpha)
+    router.push('/home/my')
+  }
+}
+
+const handleSwitchChange = (val) => {
+  // localStorage.setItem('highPerformance', val)
+}
+
+watch(() => userBgSettings.value, (val) => {
+  if (val) {
+    initUserSetting(val)
+  }
+})
+
+onMounted(async () => {
+  await getSysSettings()
+
+  if (userBgSettings.value) {
+    initUserSetting(userBgSettings.value)
+  }
+})
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+</script>
+
+<template>
+  <div ref="appeRef" class="appearance">
+    <AppNavBar
+      :title="$t('appearance')"
+      views_grade="secondary_view"
+      :right-text="$t('save')"
+      @click-left="handleBack"
+      @click-right="handleSave"
+    />
+    <div class="appearance-wrap">
+      <div class="preview-wrapper">
+        <PreviewContent
+          :bubbleBgColor="bubbleBgColor"
+          :bgcolor="chatBgColor"
+          :imgPath="chatBgColorItem.imagePath"
+          :alpha="chatImgAlpha"
+        />
+      </div>
+      <div class="appearance-conf-item">
+        <div class="ttl">{{ $t('bubbleBgColor') }}</div>
+        <div class="colors">
+          <div
+            class="color-item"
+            v-for="color in bubbleBgColorList"
+            :key="color"
+            :style="`${color2bgCCss(color)};outline: 2px solid #${color === bubbleBgColor ? color : 'fff'}`"
+            @click="bubbleBgColor = color"
+          />
+        </div>
+      </div>
+      <div class="appearance-conf-item">
+        <div class="ttl">{{ $t('chatBackground') }}</div>
+        <div class="bgs" @wheel="onWheel">
+          <div
+            class="bg-item"
+            v-for="item in imageList"
+            :key="item.colorList[0]"
+            :class="{active: activeImgPath === item.imagePath}"
+            :style="genStyle(item)"
+            @click="handleSetBgColor(item)"
+          >
+            <span :style="`background: url(${item.imagePath}) repeat center / 110px auto;filter: opacity(${item.alpha}%);`"></span>
+          </div>
+        </div>
+      </div>
+      <div class="appearance-conf-item with-boder" style="margin-top: 10px;margin-bottom: 150px;">
+        <div class="ttl">{{ $t('moreSettings') }}</div>
+        <div class="other-confs">
+          <div class="o-conf-item">
+            <div class="label">
+              <div class="dt">{{ $t('highPerformanceModel') }}</div>
+              <div class="dd">{{ $t('highPerformanceModelDesc') }}</div>
+            </div>
+            <div class="op">
+              <van-switch v-model="highPerformance" @change="handleSwitchChange" size="22px" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <AppBgConf
+      v-model:visible="bgConfVisible"
+      v-model:bgColor="chatBgColor"
+      v-model:bgimgAlpha="chatImgAlpha"
+      :activeBgConf="chatBgColorItem"
+      :bubbleBgColor="bubbleBgColor"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+:deep(.van-nav-bar__text) {
+  color: #0095F6;
+}
+.appearance-wrap {
+  background: #FFF;
+  height: 100%;
+  padding: 56px 16px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+
+  .preview-wrapper {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+  
+
+  .appearance-conf-item {
+    position: relative;
+
+    &.with-boder {
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -16px;
+        width: 100vw;
+        height: 1px;
+        // background: #000;
+        background: #D9D9D9;
+        transform: scaleY(0.5);
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -16px;
+        width: 100vw;
+        height: 1px;
+        // background: #000;
+        background: #D9D9D9;
+        transform: scaleY(0.5);
+      }
+    }
+    .ttl {
+      display: flex;
+      align-items: flex-end;
+      height: 44px;
+      padding-bottom: 4px;
+      color: #1B1B22;
+      font-weight: bold;
+    }
+
+    .colors {
+      display: flex;
+      align-items: center;
+      height: 66px;
+      overflow-x: auto;
+      width: 100%;
+      padding-left: 12px;
+      .color-item {
+        flex-shrink: 0;
+        width: 42px;
+        height: 42px;
+        border-radius: 50%;
+        margin-right: 10px;
+        border: 1px solid #fff;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: transparent;
+      }
+    }
+
+    .bgs {
+      display: flex;
+      align-items: center;
+      height: 136px;
+      overflow-x: auto;
+      width: 100%;
+      
+      &::-webkit-scrollbar-thumb {
+        background: transparent;
+      }
+      .bg-item {
+        position: relative;
+        flex-shrink: 0;
+        width: 120px;
+        height: 120px;
+        border-radius: 16px;
+        margin-right: 10px;
+        overflow: hidden;
+
+        > span {
+          z-index: 9;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+
+        &::before {
+          z-index: 10;
+          display: none;
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 40px;
+          height: 40px;
+          background: url('@/assets/activebg-icon.png') no-repeat center / cover;
+        }
+
+        &.active::before {
+          display: block;
+        }
+      }
+    }
+
+    .other-confs {
+      display: flex;
+      align-items: center;
+      height: 72px;
+
+      .o-conf-item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          font-size: 0.875rem;
+          color: rgba(27, 27, 34, 0.6);
+          line-height: 22px;
+          .dt {
+            font-size: 1rem;
+            color: #1B1B22;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/appearance/previewContent.vue b/src/views/my/appearance/previewContent.vue
new file mode 100644
index 0000000..2ba8741
--- /dev/null
+++ b/src/views/my/appearance/previewContent.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { ref, onMounted, watch,computed, onUnmounted } from 'vue'
+import { color2bgCCss } from '@/utils/index'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const previewRef = ref(null)
+
+const props = defineProps({
+  bubbleBgColor: {
+    type: String,
+    default: '6197EF'
+  },
+  bgcolor: {
+    type: String,
+    default: 'EDEFF2'
+  },
+  imgPath: {
+    type: String,
+    default: ''
+  },
+  alpha: {
+    type: Number,
+    default: 100
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+})
+// 添加文案默认值
+const information = computed(() => props.text || t('skin_item_msg1'))
+
+</script>
+
+<template>
+  <div ref="previewRef" class="preview-content" :style="color2bgCCss(bgcolor)">
+    <div class="chat-con">
+      <div class="other">
+        <Avatar width="40" height="40" :name="'张'" />
+        <div class="con">
+          <div class="name">{{$t('skin_item_user_name')}}</div>
+          <div class="bubble-con">{{information}}</div>
+        </div>
+      </div>
+      <div class="me">
+        <div class="bubble-con" :style="`${color2bgCCss(bubbleBgColor)}`">{{$t('skin_item_msg2')}}</div>
+      </div>
+    </div>
+    <div class="pre-footer">
+      <img src="@/assets/appearance-footer.png" alt="">
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.preview-content {
+  position: relative;
+  height: 100%;
+  background: #EDEFF2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: 10;
+
+  &::before {
+    background-image: var(--preview-bg, none);
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    filter: var(--preview-bg-alpha);
+  }
+
+  .chat-con {
+    padding: 16px 12px;
+
+    > div {
+      min-height: 55px;
+      &:not(:last-of-type) {
+        margin-bottom: 6px;
+      }
+    }
+
+    .name {
+      font-size: 0.75rem;
+      color: #1B1B22;
+      margin-bottom: 4px;
+    }
+
+    .bubble-con {
+      padding: 6px 10px;
+      line-height: 22px;
+      color: #1B1B22;
+      background: #fff;
+      border-radius: 1px 12px 12px 12px;
+      font-size: 1rem;
+    }
+  }
+
+  .pre-footer {
+    overflow: hidden;
+    font-size: 0;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .other {
+    display: flex;
+    .avatar {
+      min-width: 40px;
+    }
+
+    .con {
+      margin-left: 4px;
+    }
+  }
+
+  .me {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    .bubble-con {
+      border-radius: 12px 12px 1px 12px;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/balance/applyLog.vue b/src/views/my/balance/applyLog.vue
new file mode 100644
index 0000000..3529e8b
--- /dev/null
+++ b/src/views/my/balance/applyLog.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar, EmptyData } from '@/components/index.js'
+import { useGrade } from '@/utils/levelConfig'
+import IconTriangle from '@/components/icons/IconTriangle.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { hidePhoneNumber } from '@/utils/tools'
+import { showToast } from 'vant'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import VirtualList from '@/components/virtualList';
+import recordItem from './component/recordItem.vue'
+const { t } = useI18n()
+import use from "@/use";
+const { useUid } = use;
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const phoneNextRef = ref(null)
+useGrade(phoneNextRef, 4)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const active = ref(0);
+const loadState = reactive({
+  loading: false,
+  hasMore: true
+});
+const loading = ref(false);
+const finished = ref(false);
+const page_num = ref(1);
+const page_total = ref(0);
+const applyList = ref([])
+const pullDisabled = ref(false)
+const dataList = ref([
+  { name: t('inReview'), id: 1 },
+  { name: t('passTheAudit'), id: 2 },
+  { name: t('headRejected'), id: 3 },
+  { name: t('revoked'), id: 4 }
+]);
+const onBottom = async () => {
+  if (loadState.hasMore && !loadState.loading) {
+    loadState.loading = true
+    // 接口
+    loadState.hasMore = await getList(true)
+    loadState.loading = false
+  }
+}
+
+const onScoll = async (e) => {
+  pullDisabled.value = e.target.scrollTop > 0
+}
+
+const getList = async (isScrollLoad = false) => {
+  try {
+    const res = await $api.user.withdrawApplyList({
+      page_number: isScrollLoad ? ++page_num.value : 1,
+      page_size: 20,
+      user_id: userInfo.value.userID,
+      status: active.value + 1
+    })
+    if (res.code != 0) return
+    const cves = res.data.list || [];
+    applyList.value = [
+      ...(isScrollLoad ? applyList.value : []),
+      ...cves,
+    ]
+    page_total.value = res.data.total
+    if (applyList.value.length < page_total.value) {
+      return true
+    }
+    if (applyList.value.length === page_total.value) {
+      return false
+    }
+  } catch (error) {
+    return false;
+  }
+}
+const onRefresh = async () => {
+  applyList.value = [];
+  page_num.value = 1;
+  loadState.hasMore = await getList();
+  loadState.loading = false;
+  loadState.pullLoading = false
+}
+
+const handleChange = async () => {
+  applyList.value = [];
+  page_num.value = 1;
+  loadState.hasMore = await getList();
+  loadState.loading = false;
+}
+const refreshList = () => {
+  handleChange();
+}
+onMounted(() => {
+  handleChange();
+})
+</script>
+
+<template>
+  <div ref="phoneNextRef" class="phoneNext">
+    <AppNavBar :title="$t('withdrawNotes')" left-arrow views_grade="fourth_view"
+      @click-left="router.push('/home/my/balance/withdrawal')">
+    </AppNavBar>
+    <div class="phoneNext-wrap">
+      <div class="phoneNext-content">
+        <van-tabs v-model:active="active" class="img-box" @change="handleChange">
+          <van-tab :title="item.name" v-for="item in dataList" :key="item.id">
+            <van-pull-refresh v-if="applyList.length > 0" v-model="loadState.pullLoading" :disabled="pullDisabled" @refresh="onRefresh">
+              <virtual-list ref="vsl" class="vir-list" :data-key="'id'" :data-sources="applyList"
+                :data-component="recordItem" :estimate-size="104" :extra-props="{ 
+                  onGetList: refreshList
+                 }" @tobottom="onBottom"
+                @scroll="onScoll" />
+            </van-pull-refresh>
+            <EmptyData style="margin-top: 100px;" v-if="applyList.length === 0" :description="$t('str_no_data')"></EmptyData>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.phoneNext-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .phoneNext-content {
+    padding: 10px 0;
+    height: 100%;
+    width: 100%;
+
+    .vir-list {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      background: #F8F8FB;
+    }
+  }
+  :deep(.van-pull-refresh) {
+    height: 100%;
+  }
+
+  :deep(.van-tab__panel) {
+    height: 100% !important;
+  }
+  :deep(.van-tabs__content) {
+    overflow-y: auto;
+    height: calc(100vh - 410px) !important;
+  }
+}
+</style>
diff --git a/src/views/my/balance/balanceDetail.vue b/src/views/my/balance/balanceDetail.vue
new file mode 100644
index 0000000..bf84a2e
--- /dev/null
+++ b/src/views/my/balance/balanceDetail.vue
@@ -0,0 +1,228 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { formatNumber, formatTimestamps } from '@/utils/tools'
+import defaultStar from "@/assets/star.svg"
+import { storeToRefs } from 'pinia'
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const usernameSetRef = ref(null)
+useGrade(usernameSetRef, 3)
+const userStore = useUserStore();
+const { appConfig, payConfigObj } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const detailObj = reactive({
+  source: '',
+  amount: '',
+  envelope_id: '',
+  after_change_amount: '',
+  create_time: '',
+  type: '',
+  remark: ''
+})
+const balanceMap = reactive({
+  1: t('groupEnvelopeRandom'),
+  2: t('changeAccount'),
+  3: t('groupEnvelopeNormal'),
+  4: t('groupEnvelopePersonal'),
+  5: t('groupEnvelopeSomeBack'),
+  6: t('groupEnvelopeAllBack'),
+  7: t('withdrawalBack'),
+  8: t('withdrawal')
+})
+onMounted(() => {
+  if (payConfigObj.value.type === 1) {
+    // 收入
+    getList(1)
+  } else {
+    //支出
+    getList(2)
+  }
+})
+const getList = async (number) => {
+  const res = await $api.login.getUserAssetFlow({
+    page_number: 1,
+    page_size: 1000,
+    type: number
+  });
+  if (res.code != 0) return
+  const result = res.data.list.filter((item) => item.id === payConfigObj.value.id)
+  const { source, amount, id, after_change_amount, create_time, type, remark = '' } = result[0]
+  detailObj.source = source
+  detailObj.amount = amount
+  detailObj.envelope_id = id
+  detailObj.after_change_amount = after_change_amount
+  detailObj.create_time = create_time
+  detailObj.type = type
+  detailObj.remark = remark
+}
+const handleDetail = () => {
+  router.push({
+    path: '/home/my/balance/packet',
+    query: {
+      id: payConfigObj.value.id
+    }
+  })
+}
+const showDetail = computed(() => {
+  if (detailObj.source != 2) {
+    if (detailObj.source === 7 || detailObj.source === 8) {
+      return false
+    }
+    return true
+  }
+})
+const transformType = computed(() => {
+  if (detailObj.source === 2) {
+    return t('manager_change_account');
+  }
+  if (detailObj.source === 7) {
+    return t('withdrawalBack');
+  }
+  if (detailObj.source === 8) {
+    return t('withdrawal');
+  }
+  return t('groupEnvelope');
+})
+</script>
+
+<template>
+  <div ref="usernameSetRef" class="balanceDetail">
+    <AppNavBar :title="$t('balance_order_detail')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/balance')">
+    </AppNavBar>
+    <div class="balanceDetail-wrap">
+      <div class="balanceDetail-content">
+        <div class="detail">
+          <div class="type">{{ balanceMap[detailObj.source] }}</div>
+          <div class="cash">{{ detailObj.type === 1 ? `+${formatNumber(detailObj.amount)}` :
+      `-${formatNumber(detailObj.amount)}` }}</div>
+          <div class="success">{{ detailObj.type === 1 ? $t('saveToAccount') : $t('paySuccess') }}</div>
+          <div class="detail-list">
+            <div class="types">{{$t('type')}}</div>
+            <div class="title">{{ transformType }}
+              <!--红包未做，这里跳转红包详情-->
+              <span @click="handleDetail" class="title-detail" v-if="showDetail">{{$t('showDetail')}}</span>
+            </div>
+          </div>
+          <div v-if="detailObj.type === 2" class="detail-list">
+            <div class="types">{{$t('payType')}}</div>
+            <div class="title">{{$t('accountPay')}}</div>
+          </div>
+          <div class="detail-list">
+            <div class="types">{{$t('orderNo')}}</div>
+            <div class="title">{{ detailObj.envelope_id }}</div>
+          </div>
+          <div class="detail-list">
+            <div class="types">{{$t('time')}}</div>
+            <div class="title">{{ formatTimestamps(detailObj.create_time) }}</div>
+          </div>
+          <div class="detail-list">
+            <div class="types">{{$t('balance')}}</div>
+            <div class="title">{{ formatNumber(detailObj.after_change_amount) }}</div>
+          </div>
+          <div class="detail-list">
+            <div class="types">{{$t('remark')}}</div>
+            <div class="title">{{ detailObj.remark }}</div>
+          </div>
+          <img class="avatar"
+            :src="appConfig.envelope_permission.intergralIcon ? appConfig.envelope_permission.intergralIcon : defaultStar"
+            alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.balanceDetail-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .balanceDetail-content {
+    padding: 60px 12px 0 12px;
+    height: 100%;
+    background: #F8F8FB;
+
+    .detail {
+      border-radius: 8px;
+      background: #FFF;
+      padding: 38px 0 22px 18px;
+      position: relative;
+
+      .type {
+        color: #000;
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 1rem;
+        font-weight: 400;
+        margin-bottom: 6px;
+      }
+
+      .cash {
+        color: #1B1B22;
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 2.125rem;
+        font-weight: 600;
+        margin-bottom: 10px;
+      }
+
+      .success {
+        color: #000;
+        text-align: center;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+        margin-bottom: 35px;
+        opacity: 0.6;
+      }
+    }
+
+    .detail-list {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      height: 20px;
+
+      .types {
+        width: 80px;
+        margin-right: 40px;
+        color: #979797;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+
+      .title {
+        color: #000;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+        white-space: nowrap; //规定段落中的文本不进行换行
+        .title-detail {
+          color: #00A6F6;
+          font-family: "PingFang SC";
+          font-size: 0.75rem;
+          font-weight: 400;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    .avatar {
+      position: absolute;
+      left: 50%;
+      top: -22px;
+      height: 46px;
+      transform: translate(-50%);
+    }
+  }
+}
+</style>
diff --git a/src/views/my/balance/component/balanceRecord.vue b/src/views/my/balance/component/balanceRecord.vue
new file mode 100644
index 0000000..c781a02
--- /dev/null
+++ b/src/views/my/balance/component/balanceRecord.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="list-item" @click="handleClickItem(source)">
+    <div class="left">
+      <div class="type">{{ balanceMap[source.source] }}</div>
+      <div class="time">{{ formatTimestamps(source.create_time) }}</div>
+    </div>
+    <div class="right">
+      <div class="cash">{{ type === 1 ? `+${formatNumber(source.amount)}` : `-${formatNumber(source.amount)}` }}</div>
+      <div class="id">ID：{{ source.id }}</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { formatNumber, formatTimestamps } from '@/utils/tools'
+import { useUserStore } from "@/stores/user";
+import { useRouter } from 'vue-router'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const router = useRouter()
+const userStore = useUserStore();
+const { setPayConfigObj } = userStore;
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => { }
+  },
+  type: {
+    type: Number,
+    default: 1
+  }
+})
+const balanceMap = reactive({
+  1: t('groupEnvelopeRandom'),
+  2: t('changeAccount'),
+  3: t('groupEnvelopeNormal'),
+  4: t('groupEnvelopePersonal'),
+  5: t('groupEnvelopeSomeBack'),
+  6: t('groupEnvelopeAllBack'),
+  7: t('withdrawalBack'),
+  8: t('withdrawal')
+})
+const handleClickItem = ({ id, type }) => {
+  setPayConfigObj({
+    id: id,
+    type: type
+  })
+  router.push('/home/my/balance/detail')
+}
+</script>
+<style lang="less" scoped>
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px 12px 16px;
+  border-bottom: 1px solid #F2F4F5;
+  cursor: pointer;
+  .left {
+    .type {
+      color: #1B1B22;
+      font-family: "PingFang SC";
+      font-size: 1rem;
+      font-weight: 400;
+      margin-bottom: 5px;
+      line-height: 22px;
+    }
+
+    .time {
+      color: #76767A;
+      font-family: "PingFang SC";
+      font-size: 0.625rem;
+      font-weight: 400;
+      line-height: 14px;
+    }
+  }
+
+  .right {
+    .cash {
+      color: #000;
+      text-align: right;
+      font-family: "PingFang SC";
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 22px;
+      margin-bottom: 5px;
+    }
+
+    .id {
+      color: #76767A;
+      text-align: right;
+      font-family: "PingFang SC";
+      font-size: 0.625rem;
+      font-weight: 400;
+      line-height: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/my/balance/component/recordItem.vue b/src/views/my/balance/component/recordItem.vue
new file mode 100644
index 0000000..1cd3db0
--- /dev/null
+++ b/src/views/my/balance/component/recordItem.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { formatTtamp } from '@/utils/tools'
+import { showToast } from 'vant'
+import { useI18n } from "vue-i18n"
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from 'pinia'
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const emits = defineEmits(['getList'])
+const { t } = useI18n()
+const $api = inject("$api");
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => { }
+  }
+})
+const handleCancel = async () => {
+  // 撤销 todo
+  const res = await $api.user.withdrawApplyCancel({
+    userID: userInfo.value.userID,
+    pay_number: props.source.pay_number
+  })
+  if (res.code != 0) return
+  showToast({ position: "top", message: t('revokeSuccess') });
+  emits('getList')
+}
+</script>
+
+<template>
+  <div class="record-item">
+    <div class="item-content">
+      <div class="desc">
+        <div class="top">
+          <div class="name">{{$t('orderNo')}}:{{ source.pay_number }}</div>
+          <div class="status status_blue" v-if="source.status === 1">{{$t('inReview')}}</div>
+          <div class="status" v-if="source.status === 2">{{$t('passTheAudit')}}</div>
+          <div class="status status_red" v-if="source.status === 3">已驳回</div>
+          <div class="status" v-if="source.status === 4">{{$t('revoked')}}</div>
+        </div>
+        <div class="line"></div>
+        <div class="count">{{$t('withdrawalQuantity')}}:{{ (source.pay_amount * 1).toFixed(2) }}</div>
+        <div class="bottom">
+          <div class="time">{{ formatTtamp(source.create_time) }}</div>
+          <div class="btn" @click="handleCancel" v-if="source.status === 1">{{$t('undone')}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.record-item {
+  width: 100%;
+  padding: 0 16px;
+  margin: 8px 0;
+  .item-content {
+    display: flex;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 1);
+    padding: 10px 0;
+
+    .desc {
+      flex: 1;
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+
+        .name {
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 400;
+          height: 20px;
+          margin-bottom: 10px;
+        }
+
+        .status {
+          font-size: 0.875rem;
+          color: rgba(118, 118, 122, 1);
+          height: 20px;
+        }
+
+        .status_red {
+          color: #FC5A50;
+        }
+
+        .status_blue {
+          color: rgba(0, 149, 246, 1);
+        }
+      }
+
+      .line {
+        width: 100%;
+        height: 1px;
+        background: rgba(242, 244, 245, 1);
+        margin-bottom: 10px;
+      }
+
+      .count {
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 20px;
+        color: rgba(0, 0, 0, 1);
+        margin-bottom: 6px;
+        padding: 0 10px;
+      }
+
+      .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .time {
+          color: rgba(118, 118, 122, 1);
+          font-size: 0.75rem;
+          padding: 0 10px;
+          height: 17px;
+        }
+
+        .btn {
+          border: 0.5px solid rgba(118, 118, 122, 1);
+          height: 26px;
+          border-radius: 18px;
+          padding: 5px 16px 4px 16px;
+          font-family: PingFang SC;
+          font-size: 0.75rem;
+          font-weight: 400;
+          margin-right: 10px;
+          cursor: pointer;
+        }
+      }
+
+    }
+  }
+}
+</style>
diff --git a/src/views/my/balance/index.vue b/src/views/my/balance/index.vue
new file mode 100644
index 0000000..a808749
--- /dev/null
+++ b/src/views/my/balance/index.vue
@@ -0,0 +1,235 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { AppNavBar, EmptyData } from '@/components/index.js'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from "@/stores/user";
+import { formatNumber, formatTimestamps } from '@/utils/tools'
+import { storeToRefs } from 'pinia'
+import BalanceRecord from './component/balanceRecord.vue'
+import VirtualList from '@/components/virtualList';
+const userStore = useUserStore();
+const { setPayConfigObj } = userStore;
+const { appConfig } = storeToRefs(userStore);
+const { locale, t } = useI18n();
+const $api = inject("$api");
+const languageRef = ref(null)
+const router = useRouter()
+const route = useRoute()
+useGrade(languageRef, 2)
+const selected = ref('1')
+const balance = ref('')
+const active = ref(0);
+const balanceList = ref([])
+const pageNum = ref(1);
+const pageSize = ref(20);
+const pullDisabled = ref(false)
+const loadState = reactive({
+  loading: false,
+  hasMore: true
+});
+const dataList = ref([
+  { name: 'inComing', id: 1 },
+  { name: 'outGoing', id: 2 },
+]);
+const getList = async () => {
+  const res = await $api.login.getUserBalance();
+  if (res.code != 0) return
+  balance.value = res.data.balance
+}
+onMounted(() => {
+  getList();
+  if (route.query.label) {
+    active.value = 1;
+    getBalanceList();
+  } else {
+    getBalanceList();
+  }
+})
+
+const getBalanceList = async (isScrollLoad = false) => {
+  try {
+    const res = await $api.login.getUserAssetFlow({
+      page_number: isScrollLoad ? ++pageNum.value : 1,
+      page_size: pageSize.value,
+      type: active.value + 1
+    });
+    if (res.code != 0) return
+    const cves = res.data.list || [];
+    balanceList.value = [
+      ...(isScrollLoad ? balanceList.value : []),
+      ...cves,
+    ]
+    if (cves.length < 20) {
+      return false
+    }
+    if (cves.length > 0) {
+      return true
+    }
+  } catch (error) {
+    return false;
+  }
+}
+const onBottom = async () => {
+  if (loadState.hasMore && !loadState.loading) {
+    loadState.loading = true
+    // 接口
+    loadState.hasMore = await getBalanceList(true)
+    loadState.loading = false
+  }
+}
+const onScoll = async (e) => {
+  pullDisabled.value = e.target.scrollTop > 0
+}
+const onRefresh = async () => {
+  balanceList.value = []
+  pageNum.value = 1;
+  loadState.hasMore = await getBalanceList()
+  loadState.loading = false
+  loadState.pullLoading = false
+}
+const onClickTab = async () => {
+  balanceList.value = []
+  pageNum.value = 1;
+  loadState.hasMore = await getBalanceList();
+}
+const clickBack = () => {
+  router.push('/home/my')
+}
+
+const handlePay = () => {
+  router.push('/home/my/balance/withdrawal')
+}
+
+</script>
+
+<template>
+  <div ref="languageRef" class="balance">
+    <AppNavBar :title="$t('myBalance')" views_grade="secondary_view" @click-left="clickBack"></AppNavBar>
+    <div class="balance-wrap">
+      <div class="content">
+        <div class="header-wrap">
+          <img class="img1"
+            :src="appConfig.envelope_permission.intergralIcon ? appConfig.envelope_permission.intergralIcon : defaultStar"
+            alt="">
+          <div class="title">
+            {{ appConfig.envelope_permission.integralName }}
+          </div>
+        </div>
+        <div class="balance">
+          {{ formatNumber(balance) }}
+        </div>
+        <div class="withdrawal" @click="handlePay">{{ $t('withdrawal') }}</div>
+        <div class="list-wrap">
+          <van-tabs v-model:active="active" @change="onClickTab">
+            <van-tab :title="$t(item.name)" v-for="item in dataList" :key="item.id">
+              <van-pull-refresh v-if="balanceList.length > 0" v-model="loadState.pullLoading" :disabled="pullDisabled"
+                @refresh="onRefresh">
+                <VirtualList ref="vsl" class="vir-list" :data-key="'id'" :data-sources="balanceList"
+                  :data-component="BalanceRecord" :estimate-size="62" :extra-props="{
+                    type: item.id
+                  }" @tobottom="onBottom"
+                  @scroll="onScoll"></VirtualList>
+              </van-pull-refresh>
+              <EmptyData style="margin-top: 100px;" v-if="balanceList.length === 0" :description="$t('str_no_data')">
+              </EmptyData>
+            </van-tab>
+          </van-tabs>
+        </div>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.balance-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .content {
+    margin-top: 56px;
+    height: 100%;
+
+    .header-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 8px;
+
+      .img1 {
+        height: 16px;
+      }
+
+      .title {
+        margin-left: 8px;
+        color: #8C8C8C;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+
+    .balance {
+      color: #1B1B22;
+      font-family: "PingFang SC";
+      font-size: 2.125rem;
+      height: 48px;
+      font-weight: 600;
+      text-align: center;
+      margin-bottom: 8px;
+    }
+
+    .withdrawal {
+      width: 76px;
+      height: 32px;
+      line-height: 32px;
+      border-radius: 22px;
+      color: rgba(83, 143, 225, 1);
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      text-align: center;
+      border: 1px solid rgba(83, 143, 225, 1);
+      margin: 0 auto 20px auto;
+      cursor: pointer;
+    }
+  }
+
+  :deep(.van-tab) {
+    padding: 0;
+    font-size: 1rem;
+    line-height: 22px;
+    font-weight: 400;
+    color: #8C8C8C;
+  }
+
+  :deep(.van-tab--active) {
+    color: #1B1B22;
+    font-weight: 500;
+  }
+
+  :deep(.van-tabs__content) {
+    overflow-y: auto;
+    height: calc(100vh - 400px) !important;
+  }
+
+  :deep(.van-pull-refresh) {
+    height: 100%;
+  }
+
+  :deep(.van-tab__panel) {
+    height: 100% !important;
+  }
+
+  .vir-list {
+    width: 100%;
+    overflow-y: auto;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/my/balance/redPacket.vue b/src/views/my/balance/redPacket.vue
new file mode 100644
index 0000000..c1b6908
--- /dev/null
+++ b/src/views/my/balance/redPacket.vue
@@ -0,0 +1,426 @@
+<script setup>
+import { formatTimestamps } from "@/utils/tools"
+import { ref, onMounted, watchEffect, computed, reactive } from 'vue'
+import { AppNavBar, CommonLottie } from "@/components/index.js";
+import { useGrade } from '@/utils/levelConfig'
+import { useRoute, useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import defaultStar from "@/assets/star.svg"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { useContactStore } from "@/stores/contact";
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore);
+const contactStore = useContactStore();
+const { allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const OpenIM = getSDK()
+const redpktDetailRef = ref(null)
+useGrade(redpktDetailRef, 3)
+const loading = ref(false)
+const redpktInfo = ref({})
+const data = reactive({
+  redpktgetList: []
+})
+const myAmount = ref('')
+onMounted(() => {
+  getDetail()
+})
+// 获取红包领取详情
+const getDetail = async () => {
+  if (route.query.id) {
+    const result  = await $api.contact.getAssetFlowDetail({
+      id: route.query.id
+    })
+    if (result.code != 0) return
+    const envelopeId = result.data.envelope_id
+    loading.value = true
+    const res = await $api.contact.getRedpktgetDetail({ envelopeId: envelopeId })
+    await getRedpktgetList(envelopeId)
+    if (res.code != 0) return
+    loading.value = false
+    redpktInfo.value = res.data
+    // data.redpktgetList = res.data.receivers
+  }
+}
+// 获取红包领取人员列表
+const getRedpktgetList = async (id) => {
+    const res = await $api.contact.getRedpktgetList({ envelopeId: id, pageCount: 10000000, pageIndex: 1 })
+    if (res.code === 0) {
+        data.redpktgetList = res.data.receivers ? [...res.data.receivers] : []
+    }
+}
+const amountFilter = (val) => {
+  return val ? val.toFixed(2) : ''
+}
+// 红包全部领取完成时间计算
+const getCompleteTime = () => {
+  const timer = (data.redpktgetList[0].receiveTime - data.redpktgetList[data.redpktgetList.length - 1].receiveTime) / (60) // 领取完毕时间转为分钟
+  if (timer < 1) {
+    return 1 + t('minuteOut')
+  } else if (timer <= 60) {
+    return timer + t('minuteOut')
+  } if (timer > 60) {
+    return Math.ceil(timer / 60) + t('hourOut')
+  }
+}
+// 红包领取状态判断
+const filterStatus = (item) => {
+  let text = ''
+  let amount = amountFilter(redpktInfo.value.totalAmount)
+  switch (item.type) {
+    case 1:
+      if (data.redpktgetList.length) {
+        if (redpktInfo.value.receivedQuantity !== redpktInfo.value.totalQuantity) {
+          text = `${t('get')}${redpktInfo.value.receivedQuantity}/${redpktInfo.value.totalQuantity}`
+        } else if (redpktInfo.value.receivedQuantity === redpktInfo.value.totalQuantity) {
+          text = redpktInfo.value.totalQuantity + t('gong') + amountFilter(redpktInfo.value.totalAmount) + ',' + getCompleteTime()
+        }
+      } else {
+        text = `${redpktInfo.value.totalQuantity}${t('gong')}${amount}, ${t('waiting')}`
+      }
+      break;
+    case 2:
+      if (data.redpktgetList.length) {
+        text = `${redpktInfo.value.totalQuantity}${t('gong')}${amount}`
+      } else {
+        text = `${redpktInfo.value.totalQuantity}${t('gong')}${amount}, ${t('waiting')}`
+      }
+      break;
+    case 3:
+      if (data.redpktgetList.length) {
+        if (redpktInfo.value.receivedQuantity !== redpktInfo.value.totalQuantity) {
+          text = `${t('get')}${redpktInfo.value.receivedQuantity}/${redpktInfo.value.totalQuantity}`
+        } else if (redpktInfo.value.receivedQuantity === redpktInfo.value.totalQuantity) {
+          text = redpktInfo.value.totalQuantity + t('gong') + amountFilter(redpktInfo.value.totalAmount) + ',' + getCompleteTime()
+        }
+      } else {
+        text = `${redpktInfo.value.totalQuantity}${t('gong')}${amount}, ${t('waiting')}`
+      }
+      break;
+  }
+  return text
+
+}
+const myAmountFilter = computed(() => {
+  const myArr = data.redpktgetList.length ? data.redpktgetList.filter(el => el.userId === userInfo.value.userID) : []
+  myAmount.value = myArr.length ? myArr[0].amount.toFixed(2) : ""
+  return myAmount.value
+})
+const handleBack = () => {
+  router.push('/home/my/balance/detail')
+}
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+</script>
+
+<template>
+  <div ref="redpktDetailRef" class="detailSet-wrap ">
+    <div class="content">
+      <AppNavBar :title="$t('redPacketInfo')" left-arrow views_grade="thirdly_view" @click-left="handleBack">
+      </AppNavBar>
+      <div class="content_center">
+        <van-loading v-if="loading" />
+        <div v-else>
+          <div class="content_center_top">
+            <Avatar width="24" height="24" :url="redpktInfo.avatar" :name="redpktInfo.nickName" @updateUrl="url => redpktInfo.avatar = url"></Avatar>
+            <span class="top_text"><span class="top_name">{{ redpktInfo.nickName }}</span> {{ $t('sended') +
+              (redpktInfo.type === 2 ? $t('x_is_personal') : '') +
+              $t('envelope') }}</span>
+          </div>
+          <div class="content_center_text">{{ redpktInfo.remark }}</div>
+          <div v-if="myAmountFilter" class="content_center_num">{{ myAmountFilter }}</div>
+          <div v-if="myAmountFilter" class="content_center_bottom"
+            @click="router.push({ path: '/home/my/balance', query: { id: redpktInfo.envelopeId } })">
+            <img
+              :src="appConfig.envelope_permission.intergralIcon ? appConfig.envelope_permission.intergralIcon : defaultStar"
+              alt=""><span>{{ $t('saveToAccount') }}</span><img src="@/assets/svg/youjiantou.svg" alt="">
+          </div>
+        </div>
+        <div class="center_icon">
+          <img src="@/assets/hongbao.svg" alt="">
+        </div>
+      </div>
+      <div class="content_bottom">
+        <div class="content_bottom_title">
+          <span>{{ filterStatus(redpktInfo) }}</span>
+        </div>
+        <div class="content_bottom_item">
+          <van-cell-group :border="false">
+            <van-cell v-for="(item, index) in data.redpktgetList" :key="index">
+              <template #title>
+                <div class="item-content">
+                  <div class="item-img">
+                    <Avatar width="40" height="40" :url="item.avatar" :name="item.nickName" @updateUrl="url => item.avatar = url"></Avatar>
+                  </div>
+                  <div class="item-text">
+                    <template v-if="showGroupOwner(item.userId) != ''">
+                      <CommonLottie
+                        :isGroup="showGroupOwner(item.userId)"
+                        :width="120"
+                        :height="20"
+                        :showName="item.nickName"
+                      >
+                      </CommonLottie>
+                    </template>
+                    <div
+                      class="item-name"
+                      v-if="showGroupOwner(item.userId) == ''"
+                    >
+                      {{ item.nickName }}
+                    </div>
+                    <div class="item-date">{{ formatTimestamps(item.receiveTime) }}</div>
+                  </div>
+                </div>
+              </template>
+              <template #value>
+                <div class="content_item_right">
+                  <span class="right_num">+{{ amountFilter(item.amount) }} <img
+                      :src="appConfig.envelope_permission.intergralIcon ? appConfig.envelope_permission.intergralIcon : defaultStar"
+                      alt=""></span>
+                  <span class="right_text">{{ item.isMax ? $t('best') : '' }}</span>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </div>
+
+      </div>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView />
+  </div>
+</template>
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #F8F8FB;
+  //   height: 100vh;
+  //   padding-top: 56px;
+  //   width: 100%;
+  overflow-y: auto;
+}
+
+:deep(.van-cell) {
+  justify-content: space-between;
+
+  .van-cell__title {
+    width: 200px;
+    flex: none;
+  }
+}
+
+.content {
+  padding: 0 12px;
+  flex: 1;
+  position: relative;
+}
+
+.content_center {
+  position: relative;
+  width: 100%;
+  // height: 116px;
+  margin: 103px 0px 20px;
+  background-color: #fff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 38px 0 30px 0;
+
+  >div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .content_center_top {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 20px;
+    justify-content: center;
+    .top_text {
+      display: flex;
+      margin-left: 5px;
+      color: #000;
+      text-align: center;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+
+      .top_name {
+        max-width: 100px;
+        overflow: hidden;
+        /* 当内容溢出时隐藏 */
+        text-overflow: ellipsis;
+        /* 使用省略号表示被隐藏的内容 */
+        white-space: nowrap;
+        /* 不自动换行 */
+      }
+    }
+  }
+
+  .content_center_text {
+    width: 100%;
+    text-align: center;
+    padding: 0 20px;
+    // height: 40px;
+    margin: 8px 0;
+    color: #000;
+    opacity: 0.4;
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    // display: -webkit-box;
+    // -webkit-line-clamp: 3;
+    // -webkit-box-orient: vertical;
+  }
+
+  .content_center_num {
+    color: #000;
+    text-align: center;
+    font-family: "PingFang SC";
+    font-size: 2.1875rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    margin: 5px 0;
+  }
+
+  .content_center_bottom {
+    display: flex;
+    align-items: center;
+    // margin: 8px 0;
+    color: #000;
+    font-size: 0.75rem;
+    cursor: pointer;
+
+    span {
+      opacity: 0.4;
+      margin-left: 5px;
+    }
+
+    img {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  .center_icon {
+    width: 54px;
+    height: 54px;
+    position: absolute;
+    top: -27px;
+    left: calc(50% - 27px);
+  }
+}
+
+.content_bottom {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+
+  .content_bottom_title {
+    height: 40px;
+    color: #76767A;
+    text-align: center;
+    font-family: "PingFang SC";
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 40px;
+    border-bottom: 1px solid #f4f4f4
+  }
+
+  .content_bottom_item {
+    .item-content {
+      display: flex;
+      justify-content: flex-start;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .item-img {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+
+    .item-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      font-family: PingFang SC;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      width: 100%;
+      position: relative;
+
+      .item-name {
+        color: #000;
+        font-size: 0.875rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100px;
+      }
+
+      .item-date {
+        color: #979797;
+        font-size: 0.75rem;
+      }
+    }
+
+    .content_item_right {
+      display: flex;
+      flex-direction: column;
+
+      .right_num {
+        color: #000;
+        font-size: 0.875rem;
+        display: flex;
+        justify-content: flex-end;
+
+        img {
+          width: 20px;
+          height: 20px;
+          margin-left: 5px;
+        }
+      }
+
+      .right_text {
+        color: #F5465D;
+        font-size: 0.75rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/balance/withdrawal.vue b/src/views/my/balance/withdrawal.vue
new file mode 100644
index 0000000..d6dd91a
--- /dev/null
+++ b/src/views/my/balance/withdrawal.vue
@@ -0,0 +1,272 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { AppNavBar, CommonPay, CommonPayStep } from "@/components/index.js";
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import defaultStar from "@/assets/star.svg"
+import { storeToRefs } from 'pinia'
+import { encrypt } from "@/utils/index.js";
+import { showToast } from "vant";
+import ApplyWithdraw from '@/assets/svg/apply-withdraw.svg'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n();
+
+const withdrawalRef = ref(null)
+useGrade(withdrawalRef, 3)
+const userStore = useUserStore();
+const { appConfig, userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const withdrawalCount = ref()
+const remarkVal = ref('')
+const availableCount = computed(() => {
+  return userInfo.value.balance.toFixed(2)
+})
+const showLoading = ref(false);
+const bindPhoneVisible = ref(false);
+const showPayVisable = ref(false);
+const isWithdraw = ref(false)
+const handleFinish = async () => {
+  if (!userInfo.value.has_property_pwd) {
+    // 提示弹窗
+    isWithdraw.value = !userInfo.value.has_property_pwd
+    bindPhoneVisible.value = true
+    return
+  }
+  showPayVisable.value = true
+}
+const handleAll = () => {
+  withdrawalCount.value = availableCount.value
+}
+const handleBlur = () => {
+  if (withdrawalCount.value != '') {
+    withdrawalCount.value = Number(withdrawalCount.value).toFixed(2)
+  }
+}
+const handleBindPhone = () => {
+  router.push({
+    path: '/home/my/security',
+    query: {
+      labels: 'dialogue'
+    }
+  })
+  bindPhoneVisible.value = false
+}
+const handleGetCode = async (val) => {
+  const params = {
+    pay_amount: withdrawalCount.value,
+    property_password: encrypt(val),
+    userID: userInfo.value.userID,
+    remark: remarkVal.value
+  }
+  const res = await $api.user.withdrawApply(params)
+  if (res.code != 0) return
+  showToast({ position: "top", message: t('withdrawalSuccess') });
+  showPayVisable.value = false
+  withdrawalCount.value = ''
+  router.push({
+    path: '/home/my/balance',
+    query: {
+      label: 'withdrawal'
+    }
+  })
+}
+const goToApply = () => {
+  router.push('/home/my/balance/withdrawal/log')
+}
+
+</script>
+
+<template>
+  <div ref="withdrawalRef" class="balanceDetail">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar :title="$t('balanceWithdraw')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/balance')">
+        <template #right>
+          <img @click="goToApply" :src="ApplyWithdraw" width="24" height="24" alt="">
+        </template>
+      </AppNavBar>
+      <div class="balanceDetail-wrap">
+        <div class="balanceDetail-content">
+          <div class="detail">
+            <div class="title">{{ $t('withdrawalQuantity') }}</div>
+            <div class="withdrawal-wrap">
+              <van-field v-model.trim="withdrawalCount" label="" @blur="handleBlur" type="number" placeholder="0.00">
+                <template #left-icon>
+                  <img class="avatar"
+                    :src="appConfig.envelope_permission.intergralIcon ? appConfig.envelope_permission.intergralIcon : defaultStar"
+                    alt="">
+                </template>
+                <template #button>
+                  <div class="withdrawal-all" @click="handleAll">{{$t('all')}}</div>
+                </template>
+              </van-field>
+            </div>
+            <div class="line"></div>
+            <div class="available-count">{{ (`${$t('canBalanceWithdraw') + availableCount}`) }}</div>
+          </div>
+          <div class="withdrawal-remark">
+            <van-field label-align="top" :label="$t('remark')" maxlength="50" v-model="remarkVal" rows="2" autosize type="textarea" label=""
+              :placeholder="$t('inputRemark')" clearable show-word-limit />
+          </div>
+          <div class="third-step-btn">
+            <van-button :loading="showLoading" :disabled="!withdrawalCount || (withdrawalCount * 1 > availableCount * 1)" @click="handleFinish" type="default">
+              {{ $t("withdrawal") }}
+            </van-button>
+          </div>
+          <div class="apply-log" @click="goToApply">{{$t('withdrawNotes')}}</div>
+        </div>
+      </div>
+      <CommonPay v-model="bindPhoneVisible" @getList="handleBindPhone" :isWithdraw="isWithdraw"></CommonPay>
+      <CommonPayStep :inputCount="withdrawalCount" v-model="showPayVisable" @getList="handleGetCode"></CommonPayStep>
+    </div>
+    <!-- 四级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.balanceDetail-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .balanceDetail-content {
+    height: 100%;
+    padding: 16px 16px 0 16px;
+
+    .detail {
+      border-radius: 8px;
+      position: relative;
+      background: rgba(251, 251, 251, 1);
+      padding: 10px 10px;
+      margin-bottom: 30px;
+
+      .title {
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        height: 22px;
+        text-align: left;
+        color: rgba(27, 27, 34, 1);
+      }
+
+      .withdrawal-wrap {
+        height: 78px;
+        display: flex;
+        align-items: center;
+
+        :deep(.van-cell) {
+          padding: 20px 10px;
+          height: 78px;
+          background: rgba(251, 251, 251, 1);
+        }
+
+        :deep(.van-field__left-icon) {
+          margin: 4px 6px 4px 0;
+          width: 30px;
+          height: 30px;
+        }
+
+        :deep(.van-cell__value) {
+          line-height: 38px;
+          font-size: 1.9375rem;
+        }
+
+        .avatar {
+          width: 30px;
+          height: 30px;
+        }
+
+        :deep(.van-field__button) {
+          line-height: 22px;
+          padding-left: 0;
+        }
+
+        .withdrawal-all {
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          text-align: center;
+          color: rgba(0, 149, 246, 1);
+          height: 22px;
+          cursor: pointer;
+        }
+      }
+
+      .line {
+        width: 100%;
+        height: 1px;
+        background-color: rgba(232, 232, 233, 1);
+        margin-bottom: 10px;
+      }
+
+      .available-count {
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-weight: 400;
+        color: rgba(27, 27, 34, 1);
+      }
+    }
+    .withdrawal-remark {
+      margin-bottom: 73px;
+      :deep(.van-cell) {
+        background: rgba(251, 251, 251, 1);
+      }
+    }
+
+    .third-step-btn {
+      display: flex;
+      align-self: center;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      margin: 0 4px;
+      padding: 0;
+
+      :deep(.van-button) {
+        width: 100%;
+        height: 52px;
+        line-height: 52px;
+        border-radius: 14px;
+        font-size: 1rem;
+        color: #ffffff;
+        font-family: PingFang SC;
+        font-weight: 500;
+        border: none;
+        background: #1b1b22;
+
+        &::before {
+          height: 52px;
+        }
+      }
+
+      :deep(.van-button--disabled) {
+        background: rgba(242, 244, 245, 1) !important;
+        color: rgba(209, 209, 211, 1) !important;
+      }
+    }
+    .apply-log {
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 400;
+      height: 22px;
+      text-align: center;
+      margin-top: 200px;
+      color: rgba(0, 149, 246, 1);
+    }
+  }
+}
+:deep(.validate_label) {
+  justify-content: space-around;
+  width: 100%;
+  .validate_item {
+    width: 44px;
+    height: 48px;
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/src/views/my/download/index.vue b/src/views/my/download/index.vue
new file mode 100644
index 0000000..fe53c01
--- /dev/null
+++ b/src/views/my/download/index.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { copyUserId } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const router = useRouter()
+const downloadRef = ref(null)
+useGrade(downloadRef, 2)
+const handleClick = (type) => {
+
+}
+
+
+</script>
+
+<template>
+  <div ref="downloadRef" class="download">
+    <AppNavBar :title="$t('download')" views_grade="secondary_view" @click-left="router.push('/home/my')"/>
+    <div class="download-wrap">
+      <van-cell-group :border="true">
+        <van-cell :title="$t('init_hint_3')" is-link :border="true" @click="handleClick('safe')">
+          <template #title>
+            <span class="custom-title">{{ $t('init_hint_3') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{ $t('to_modify') }}</div>
+            <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('phoneNumber')" :border="true" @click="handleClick('language')">
+          <template #title>
+            <span class="custom-title">{{ $t('phoneNumber') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">188****8939</div>
+            <img class="notice-value-link" src="@/assets/right-small2.svg" @click="copyUserId('Liiuuewe123')" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('email')" is-link to="" :border="true" @click="handleClick('download')">
+          <template #title>
+            <span class="custom-title">{{$t('email')}}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">Dsah****wk@163.com</div>
+            <img class="notice-value-links" src="@/assets/qrcode1.svg" alt="">
+            <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('trusted_device')" is-link to="" :border="true" @click="handleClick('download')">
+          <template #title>
+            <span class="custom-title">{{$t('trusted_device')}}</span>
+          </template>
+          <template #right-icon>
+            <div class="content"></div>
+            <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.download-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 46px;
+
+  /deep/.van-cell {
+    padding: 0;
+    height: 60px;
+    line-height: 60px;
+
+    .van-cell__title {
+      img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+
+      .custom-title {
+        padding-left: 16px;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+    .notice-value-links {
+      margin-top: 18px;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+    .content {
+      margin-right: 8px;
+      color: #76767A;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+    }
+    .contents {
+      padding-right: 16px;
+      color: #76767A;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+
+}
+</style>
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
new file mode 100644
index 0000000..61eb0ab
--- /dev/null
+++ b/src/views/my/index.vue
@@ -0,0 +1,511 @@
+<script setup>
+import { ref, provide, reactive, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { copyUserId, formatNumber } from "@/utils/tools";
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/mine-avatar.svg";
+import defaultStar from "@/assets/star.svg";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+const myRef = ref("");
+// useGrade(myRef, 1, true)
+const $api = inject("$api");
+const userStore = useUserStore();
+const { appConfig } = storeToRefs(userStore);
+const { setUserInfo, setAppConfig } = userStore;
+const loading = ref(false);
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+const userInfoObj = reactive({
+  faceURL: "",
+  nickname: "",
+  userID: "",
+  balance: "",
+  signature: "",
+  internal_uid: "",
+  isInternalUser: ""
+});
+function handleClick(type) {
+  router.push(`/home/my/${type}`);
+}
+const onRefresh = async () => {
+  const userRes = await $api.login.userInfo();
+  if (userRes.code != 0) return;
+  setUserInfo(userRes.data);
+  const {
+    faceURL,
+    nickname,
+    userID,
+    balance,
+    signature,
+    internal_uid,
+    isInternalUser
+  } = userRes.data;
+  userInfoObj.faceURL = faceURL;
+  userInfoObj.nickname = nickname;
+  userInfoObj.userID = userID;
+  userInfoObj.balance = balance;
+  userInfoObj.signature = signature;
+  userInfoObj.internal_uid = internal_uid;
+  userInfoObj.isInternalUser = isInternalUser;
+  const configRes = await $api.login.getConfigInfo();
+  if (configRes.code != 0) return;
+  setAppConfig({
+    ...appConfig.value,
+    ...configRes.data
+  });
+  loading.value = false;
+};
+const getList = async () => {
+  const userRes = await $api.login.userInfo();
+  if (userRes.code != 0) return;
+  setUserInfo(userRes.data);
+  const {
+    faceURL,
+    nickname,
+    userID,
+    balance,
+    signature,
+    internal_uid,
+    isInternalUser
+  } = userRes.data;
+  userInfoObj.faceURL = faceURL;
+  userInfoObj.nickname = nickname;
+  userInfoObj.userID = userID;
+  userInfoObj.balance = balance;
+  userInfoObj.signature = signature;
+  userInfoObj.internal_uid = internal_uid;
+  userInfoObj.isInternalUser = isInternalUser;
+  const configRes = await $api.login.getConfigInfo();
+  if (configRes.code != 0) return;
+  setAppConfig({
+    ...appConfig.value,
+    ...configRes.data
+  });
+};
+const handleQrcode = () => {
+  router.push("/home/my/qrcode");
+};
+onMounted(() => {
+  console.log(navigator.userAgent, "设备型号");
+  getList();
+});
+let isDefaultimg = ref(false);
+watch(
+  () => route.fullPath,
+  val => {
+    getList();
+  }
+);
+</script>
+
+<template>
+  <div ref="myRef" class="my">
+    <van-pull-refresh success-text="" v-model="loading" @refresh="onRefresh">
+      <div class="my_container">
+        <div class="mine">
+          <div class="mine-top">
+            <div class="left">
+              <div class="middle-left" @click="handleClick('profile')">
+                <img
+                  class="img"
+                  :src="defaultAvatar"
+                  alt=""
+                  v-if="isDefaultimg"
+                />
+                <img
+                  v-if="!isDefaultimg"
+                  class="img"
+                  :src="
+                    userInfoObj.faceURL ? userInfoObj.faceURL : defaultAvatar
+                  "
+                  @error="isDefaultimg = true"
+                  alt=""
+                />
+              </div>
+              <div class="middle-right">
+                <div class="middle-top">{{ userInfoObj.nickname }}</div>
+                <div class="middle-middle"
+                  @click="
+                    copyUserId(
+                      userInfoObj.isInternalUser
+                        ? userInfoObj.internal_uid
+                        : userInfoObj.userID
+                    )
+                  ">
+                  <div class="userid">
+                    {{ $t("userId") }}
+                  </div>
+                  <div class="userid">
+                    {{
+                      userInfoObj.isInternalUser
+                        ? userInfoObj.internal_uid
+                        : userInfoObj.userID
+                    }}
+                  </div>
+                  <div
+                    class="copy"
+                  >
+                    <img src="@/assets/copy.svg" alt="" />
+                  </div>
+                </div>
+                <div class="middle-bottom" @click="handleClick('balance')">
+                  <img
+                    class="img1"
+                    :src="
+                      appConfig.envelope_permission?.intergralIcon
+                        ? appConfig.envelope_permission?.intergralIcon
+                        : defaultStar
+                    "
+                    alt=""
+                  />
+                  <div class="content">
+                    {{ formatNumber(userInfoObj.balance) }}
+                  </div>
+                  <img class="img1s" src="@/assets/right-small.svg" alt="" />
+                </div>
+              </div>
+            </div>
+            <div class="right">
+              <img src="@/assets/qrcode.svg" alt="" @click="handleQrcode" />
+              <img class="img1" src="@/assets/right.svg" alt="" />
+            </div>
+          </div>
+          <div class="mine-bottom" @click="handleClick('profile')">
+            <img class="imgs" src="@/assets/edit.svg" alt="" />
+            <div class="content">
+              {{
+                userInfoObj.signature
+                  ? userInfoObj.signature
+                  : $t("mineSigEmpty")
+              }}
+            </div>
+          </div>
+        </div>
+        <div class="tabs">
+          <van-cell-group :border="false">
+            <van-cell
+              is-link
+              :border="false"
+              @click="handleClick('notDisturb')"
+            >
+              <template #title>
+                <img src="@/assets/notice.svg" alt="" />
+                <span class="custom-title">{{ $t("messageNotify") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell is-link :border="false" @click="handleClick('security')">
+              <template #title>
+                <img src="@/assets/safe.svg" alt="" />
+                <span class="custom-title">{{ $t("safety") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('language')"
+              is-link
+              to=""
+              :border="false"
+              @click="handleClick('language')"
+            >
+              <template #title>
+                <img src="@/assets/language.svg" alt="" />
+                <span class="custom-title">{{ $t("language") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('appearance')"
+              is-link
+              to=""
+              :border="false"
+              @click="handleClick('appearance')"
+            >
+              <template #title>
+                <img src="@/assets/appearance.png" alt="" />
+                <span class="custom-title">{{ $t("appearance") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('fontFace')"
+              is-link
+              to=""
+              :border="false"
+              @click="handleClick('typeface')"
+            >
+              <template #title>
+                <img src="@/assets/typeface.svg" alt="" />
+                <span class="custom-title">{{ $t("fontFace") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <!-- 网络诊断 -->
+            <van-cell
+              is-link
+              :border="false"
+              @click="handleClick('network')"
+            >
+              <template #title>
+                <img src="@/assets/svg/network-check.svg" alt="" />
+                <span class="custom-title">{{ $t("networkDiagnostic") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <van-cell
+              :title="$t('about')"
+              is-link
+              to=""
+              :border="false"
+              @click="handleClick('about')"
+            >
+              <template #title>
+                <img src="@/assets/info.svg" alt="" />
+                <span class="custom-title">{{ $t("about") }}</span>
+              </template>
+              <template #right-icon>
+                <img
+                  class="notice-value-link"
+                  src="@/assets/right-small1.svg"
+                  alt=""
+                />
+              </template>
+            </van-cell>
+            <!-- <van-cell title="下载APP" is-link to="" :border="false" @click="handleClick('download')">
+              <template #title>
+                <img src="@/assets/download.png" alt="">
+                <span class="custom-title">下载APP</span>
+              </template>
+              <template #right-icon>
+                <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+              </template>
+            </van-cell> -->
+          </van-cell-group>
+        </div>
+      </div>
+    </van-pull-refresh>
+  </div>
+  <!-- <AppNavBar title="我的" views_grade="firstly_view" /> -->
+  <!-- 二级视图 -->
+  <RouterView :key="route.fullPath" />
+</template>
+
+<style lang="less" scoped>
+.my {
+  flex: 1;
+  overflow-y: auto;
+}
+.my_container {
+  width: 100%;
+  height: 100%;
+
+  // padding-top: 56px;
+  .mine {
+    height: 240px;
+    padding: 62px 16px 24px 24px;
+    background: url("../../assets/mine-top.png");
+    background-color: #1b1b22;
+
+    .mine-top {
+      display: flex;
+      margin-bottom: 34px;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+
+        .middle-left {
+          margin-right: 12px;
+          cursor: pointer;
+
+          .img {
+            width: 72px;
+            height: 72px;
+            border-radius: 50%;
+          }
+        }
+
+        .middle-right {
+          .middle-top {
+            color: #fff;
+            font-family: PingFang SC;
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1px;
+          }
+
+          .middle-middle {
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.55);
+            font-family: PingFang SC;
+            font-size: 0.75rem;
+            font-weight: 400;
+            margin-bottom: 8px;
+            display: flex;
+            height: 18px;
+            align-items: center;
+
+            .userid {
+              height: 18px;
+            }
+
+            .copy {
+              margin-left: 4px;
+              cursor: pointer;
+
+              img {
+                width: 16px;
+                height: 16px;
+              }
+            }
+          }
+
+          .middle-bottom {
+            border-radius: 28px;
+            background: rgba(255, 255, 255, 0.1);
+            display: flex;
+            padding: 2px 8px;
+            justify-content: center;
+            align-items: center;
+            width: fit-content;
+            height: 21px;
+            cursor: pointer;
+            .content {
+              color: #fff;
+              font-family: PingFang SC;
+              font-size: 0.75rem;
+              font-weight: 400;
+              margin: 0 2px;
+              width: fit-content;
+            }
+
+            .img1 {
+              width: 16px;
+              height: 14px;
+            }
+
+            .imgs {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .img1 {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .mine-bottom {
+      display: flex;
+      align-items: center;
+
+      .imgs {
+        width: 14px;
+        height: 14px;
+      }
+
+      .content {
+        color: rgba(255, 255, 255, 0.55);
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-weight: 400;
+        opacity: 0.8;
+        margin-left: 4px;
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap; //规定段落中的文本不进行换行
+      }
+    }
+  }
+
+  .tabs {
+    height: calc(100vh - 286px);
+    overflow-y: auto;
+    width: 100%;
+    padding: 12px 16px 0 16px;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    background: #fff;
+    border-right: 1px solid #d1d1d3;
+
+    /deep/.van-cell {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+
+      .van-cell__title {
+        img {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+          margin-bottom: 4px;
+        }
+
+        .custom-title {
+          margin-left: 8px;
+          color: #1b1b22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          display: inline-block;
+        }
+      }
+
+      .notice-value-link {
+        margin-top: 22px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/language/index.vue b/src/views/my/language/index.vue
new file mode 100644
index 0000000..18c3b63
--- /dev/null
+++ b/src/views/my/language/index.vue
@@ -0,0 +1,320 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { copyUserId } from "@/utils/tools";
+import clipboard3 from "vue-clipboard3";
+import { showToast } from "vant";
+import { vantLocales } from "@/lang";
+import { useI18n } from "vue-i18n";
+const { toClipboard } = clipboard3();
+const { locale, t } = useI18n();
+const $api = inject("$api");
+const languageRef = ref(null);
+const router = useRouter();
+useGrade(languageRef, 2);
+const selected = ref("system");
+onMounted(() => {
+  if (!localStorage.getItem("language")) {
+    selected.value = "system";
+  } else {
+    selected.value = localStorage.getItem("language") || "us";
+  }
+});
+const handleClick = type => {
+  selected.value = type;
+};
+const save = async () => {
+  showToast({ position: "top", message: t("setting_up") });
+  const res = await $api.setting.setLanguage({ language: selected.value });
+  if (res.code === 0) {
+    if (selected.value !== "system") {
+      localStorage.setItem("language", selected.value);
+      vantLocales(selected.value);
+      locale.value = selected.value;
+      if (selected.value === "zh-cn") {
+        document.title = "球帝带";
+      } else if (selected.value === "zh-hant-cn") {
+        document.title = "球帝帶";
+      } else {
+        document.title = "QDDchat";
+      }
+    } else {
+      let lang = "";
+      localStorage.setItem("language", "");
+      if (
+        navigator.language === "zh-CN" ||
+        navigator.language === "zh-SG" ||
+        navigator.language === "zh-Hans" ||
+        navigator.language === "zh-BR"
+      ) {
+        lang = "zh-cn";
+        document.title = "球帝带";
+      } else if (
+        navigator.language === "en" ||
+        navigator.language === "en-GB" ||
+        navigator.language === "en-US" ||
+        navigator.language === "en-CA" ||
+        navigator.language === "en-AU" ||
+        navigator.language === "en-BR"
+      ) {
+        lang = "us";
+        document.title = "QDDchat";
+      } else if (
+        navigator.language === "zh-TW" ||
+        navigator.language === "zh-Hant"
+      ) {
+        lang = "zh-hant-cn";
+        document.title = "球帝帶";
+      } else if (
+        navigator.language === "vi" ||
+        navigator.language === "vi-VN" ||
+        navigator.language === "vi-BR"
+      ) {
+        lang = "vi-VN";
+        document.title = "QDDchat";
+      } else if (
+        navigator.language === "th" ||
+        navigator.language === "th-TH" ||
+        navigator.language === "th-TH" ||
+        navigator.language === "th-TH-u-ca-buddhist" ||
+        navigator.language === "th-BR"
+      ) {
+        lang = "th";
+        document.title = "QDDchat";
+      } else if (
+        navigator.language === "id" ||
+        navigator.language === "id-ID" ||
+        navigator.language === "id-BR"
+      ) {
+        lang = "id";
+        document.title = "QDDchat";
+      } else if (
+        navigator.language === "pt-BR" ||
+        navigator.language === "pt"
+      ) {
+        lang = "pt-br";
+        document.title = "QDDchat";
+      }
+      vantLocales(lang);
+      locale.value = lang;
+    }
+  }
+};
+</script>
+
+<template>
+  <div ref="languageRef" class="language">
+    <AppNavBar
+      :title="$t('language')"
+      views_grade="secondary_view"
+      @click-left="router.push('/home/my')"
+    >
+      <template #right>
+        <span class="nav-text" @click="save">{{ $t("save") }}</span>
+      </template>
+    </AppNavBar>
+    <div class="language-wrap">
+      <van-cell-group :border="true">
+        <van-cell
+          :title="$t('followSystem')"
+          is-link
+          :border="true"
+          @click="handleClick('system')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("followSystem") }}</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'system'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <van-cell title="简体中文" :border="true" @click="handleClick('zh-cn')">
+          <template #title>
+            <span class="custom-title">简体中文</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'zh-cn'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <van-cell
+          title="繁體中文"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('zh-hant-cn')"
+        >
+          <template #title>
+            <span class="custom-title">繁體中文</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'zh-hant-cn'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <van-cell
+          title="English"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('us')"
+        >
+          <template #title>
+            <span class="custom-title">English</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'us'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <van-cell
+          title="Tiếng Việt"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('vi-VN')"
+        >
+          <template #title>
+            <span class="custom-title">Tiếng Việt</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'vi-VN'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <!-- 泰国语 -->
+        <van-cell
+          title="แบบไทย"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('th')"
+        >
+          <template #title>
+            <span class="custom-title">แบบไทย</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'th'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <!-- 印尼语 -->
+        <van-cell
+          title="bahasa Indonesia"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('id')"
+        >
+          <template #title>
+            <span class="custom-title">bahasa Indonesia</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'id'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+        <!-- 巴西语 -->
+        <van-cell
+          title="Português"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('pt-br')"
+        >
+          <template #title>
+            <span class="custom-title">Português</span>
+          </template>
+          <template #right-icon>
+            <div v-if="selected === 'pt-br'" class="content">
+              <img src="@/assets/svg/Group56.svg" alt="" />
+            </div>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.language-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+
+  /deep/.van-cell {
+    padding: 0;
+    height: 60px;
+    line-height: 60px;
+
+    .van-cell__title {
+      img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+
+      .custom-title {
+        padding-left: 16px;
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+    .notice-value-links {
+      margin-top: 18px;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      margin-right: 16px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+    }
+    .contents {
+      padding-right: 16px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+}
+.nav-text {
+  color: #0095f6;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+</style>
diff --git a/src/views/my/network/circuit.vue b/src/views/my/network/circuit.vue
new file mode 100644
index 0000000..9dbb08a
--- /dev/null
+++ b/src/views/my/network/circuit.vue
@@ -0,0 +1,472 @@
+<template>
+  <!-- 切换线路 -->
+  <div ref="circuitRef" class="circuit">
+    <AppNavBar
+      :title="$t('serverLineChange')"
+      views_grade="secondary_view"
+      @click-left="router.push('/home/my/network')"
+      @click-right="onClickRight"
+      :left-arrow="true"
+    >
+    <template #right>
+      <van-icon
+        :name="imgURL('retransmission.svg')"
+        size="18"
+        :class="{ rotate: rotating }"
+      />
+    </template>
+    </AppNavBar>
+    <div class="circuit-wrap">
+      <div class="flex-col group_2">
+        <div class="flex-col">
+          <div
+            v-for="(line, index) in computedList"
+            :key="index"
+            :class="[
+              'mt-8 flex-row justify-between items-center',
+              line.highlight ? 'relative section_3' : 'section_2',
+            ]"
+            @click="handleSetActive(line)"
+          >
+            <span class="font_2" v-if="line.name">{{ line.name }}</span>
+            <span class="font_2" v-else>{{ $t("serverLine") }} {{ index + 1 }}</span>
+            <div class="flex-row items-center">
+              <span :class="['font_3', line.class]" v-if="line.latency!=='-1'">{{ line.latency }}</span>
+              <img class="shrink-0 image_5 ml-3" v-if="line.imgSrc" :src="line.imgSrc" />
+              <CommonLottie
+                v-else
+                class="shrink-0 ml-3"
+                isGroup="line-loading"
+                :width="16"
+                :height="16"
+                :isShowTitle="false"
+              >
+              </CommonLottie>
+            </div>
+            <van-icon
+              v-if="line.highlight"
+              class="image_6"
+              :name="imgURL('check-in.svg')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+      <div class="footer-box-line">
+        <van-sticky :offset-bottom="50" position="bottom">
+          <div class="button-wrapper" v-if="computedList.length">
+            <van-button
+              class="options-bts"
+              round
+              color="rgba(27, 27, 34, 1)"
+              :disabled="disabledBtn"
+              @click="handleSwitch"
+            >
+            {{$t("autoChangeServer")}}
+            </van-button>
+          </div>
+        </van-sticky>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted,computed,watchEffect } from "vue";
+import { useRouter } from "vue-router";
+import { AppNavBar, CommonLottie } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { copyUserId } from "@/utils/tools";
+import { useI18n } from "vue-i18n";
+import request from "@/api/line-request.js";
+import { requestTimesMap} from "@/utils/common";
+import { showLoadingToast, showToast, showConfirmDialog,showSuccessToast } from "vant";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const router = useRouter();
+const circuitRef = ref(null);
+useGrade(circuitRef, 2);
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/svg/${name}`, import.meta.url).href;
+};
+const lines = ref([]); // 线路列表数据
+const rotating = ref(false); // 来控制 van-icon 的旋转动画
+const mergedList = ref([]);// 用于存储最终的计算结果
+const disabledBtn = ref(false); // 来控制线路切换的按钮点击
+// 线路数据
+const computedList = computed(() => {
+  return mergedList.value;
+});
+// 生成 100 到 300 之间的随机整数
+const getRandomLatency = () => {
+  return Math.floor(Math.random() * (300 - 100 + 1)) + 100;
+};
+// 封装的更新 mergedList 的方法
+function updateMergedList() {
+  // 从 sessionStorage 获取 appConfig
+  let appConfig = JSON.parse(sessionStorage.getItem("appConfig"));
+  // 检查 appConfig 和 site_acceleration 的有效性
+  if (!appConfig || !appConfig.site_acceleration) {
+    console.error('配置数据异常', appConfig);
+    return;
+  }
+  // 过滤出有效的 back_end_url
+  let urlsWithH5 = appConfig.site_acceleration.filter(
+    (item) => item.back_end_url && item.back_end_url.trim() !== ""
+  );
+  // 如果有 globalRequestPrefix，则将其添加到 urlsWithH5 的开头
+  if (friendState.globalRequestPrefix && urlsWithH5.length) {
+    urlsWithH5.unshift({
+      back_end_url: friendState.globalRequestPrefix,
+    });
+  }
+  // 更新 mergedList 的值
+  if (urlsWithH5.length) {
+    mergedList.value = urlsWithH5 // 线路存在
+  } else {
+    // 线路存在展示默认线路即可
+    mergedList.value = [
+      {
+        back_end_url: window.WEB_CONFIG.proxy_target,
+        highlight: true,
+        imgSrc: imgURL("xinhao-yanchi1.svg"),
+        latency: getRandomLatency()  // 随机生成的延迟
+      },
+    ];
+  }
+}
+// 刷新
+const onClickRight = async () => {
+  // disabledBtn.value = false
+  if (disabledBtn.value===false) {
+    updateMergedList()
+    // Start rotation
+    rotating.value = true;
+    // Fetch data and process
+    lines.value = await findAllBackendResponseTimes();
+    highlightMatchingLineUrls(lines.value);
+    // Stop rotation after animation completes
+    setTimeout(() => {
+      rotating.value = false;
+    }, 1000); // match the duration of the rotation animation
+  }
+};
+// 切换线路
+const handleSetActive = async (item) => {
+  showConfirmDialog({
+    title: t('serverLineChange'),
+    message: item.name,
+  }).then(() => {
+    // 重置之前的高亮项
+    lines.value.forEach((line) => {
+      line.highlight = false;
+    });
+    // 找到当前选中的线路
+    const currentIndex = lines.value.findIndex((line) => line === item);
+    lines.value[currentIndex].highlight = true;
+    // 处理 URL
+    const lineUrl = lines.value[currentIndex].lineUrl;
+    const proxyTargetUrl = lineUrl.replace("/chat-api/health", "");
+    const wsUrl = lineUrl.replace("https", "wss");
+    // 更新配置
+    sessionStorage.setItem("globalRequestPrefix", proxyTargetUrl);
+    window.WEB_CONFIG.proxy_target = proxyTargetUrl;
+    window.WEB_CONFIG.ws_url = wsUrl.replace("/chat-api/health", "");
+    console.error("切换线路后的线路", item);
+    console.error("切换线路后数组", lines.value);
+    console.error("切换线路后window", window.WEB_CONFIG);
+    showSuccessToast(t('changeSuccess'));
+  });
+};
+
+// 一键切换到最优线路
+const handleSwitch = async () => {
+  disabledBtn.value = true
+  showLoadingToast({
+    message: t('changing'),
+    forbidClick: true,
+    duration: 0,
+  });
+  lines.value = await findAllBackendResponseTimes();
+  await setOptimalRouteHighlight(lines.value)
+};
+// 查找所有后端响应时间。可以帮助确定所有后端接口的响应时间，并找出最快的响应时间。
+// 查找所有后端响应时间，并更新 Map
+async function findAllBackendResponseTimes() {
+  let appConfig = JSON.parse(sessionStorage.getItem("appConfig"));
+  if (!appConfig) {
+    console.error(`No appConfig found in session storage`);
+    return null;
+  }
+  let urlsWithH5 = appConfig.site_acceleration.filter(
+    (item) => item.back_end_url && item.back_end_url.trim() !== ""
+  );
+  if (friendState.globalRequestPrefix && urlsWithH5.length) {
+    urlsWithH5.unshift({
+      back_end_url: friendState.globalRequestPrefix,
+    });
+  } else {
+    console.error(`数据存储异常`, friendState.globalRequestPrefix);
+    return;
+  }
+  // 存储所有请求结果
+  const results = new Array(urlsWithH5.length);  // 创建一个与 urlsWithH5 长度相同的数组
+  await Promise.all(
+    urlsWithH5.map(async (item, index) => {
+      let url = item.back_end_url ? `${item.back_end_url}/chat-api/health` : undefined;
+      try {
+        if (!url) throw new Error('URL is undefined');
+        const startTime = performance.now();
+        const response = await request.get(url);
+        if (response?.code === 200) {
+          const endTime = performance.now();
+          const elapsedTime = endTime - startTime;
+          requestTimesMap.set(url, Math.round(elapsedTime));
+          results[index] = {
+            name: t("serverLine") +  `${index + 1}`,
+            latency: `${Math.round(elapsedTime)}ms`,
+            imgSrc: imgURL(elapsedTime <= 1000 ? "xinhao-yanchi1.svg" :
+                      elapsedTime <= 1550 ? "xinhao-yanchi2.svg" :
+                      elapsedTime <= 3000 ? "xinhao-yanchi3.svg" :
+                      elapsedTime <= 5000 ? "xinhao-yanchi4.svg" : "xinhao-yanchi5.svg"),
+            class: elapsedTime <= 1000 ? "text_3" :
+                   elapsedTime <= 1550 ? "text_5" :
+                   elapsedTime <= 3000 ? "text_6" :
+                   elapsedTime <= 5000 ? "text_7" : "text_7",
+            lineUrl: url,
+          };
+        } else {
+          throw new Error(`HTTP error!!!: ${response}`);
+        }
+      } catch (error) {
+        console.error(`Error fetching ${url}:`, error);
+        results[index] = {
+          name: t("serverLine") +  `${index + 1}`,
+          latency: '-1',
+          imgSrc: imgURL("error-line.svg"),
+          class: "text_7",
+          lineUrl: url,
+        };
+      }
+    })
+  );
+  console.error(`Formatted request times:`, results);
+  return results;
+}
+// 一键获取最优线路
+function setOptimalRouteHighlight(lines) {
+  // 重置所有项的 highlight 属性为 false
+  lines.forEach(line => line.highlight = false);
+  // 过滤掉 latency 为 "-1" 的线路
+  const validLines = lines.filter(line => line.latency !== "-1");
+  // 如果没有有效线路，直接返回
+  if (validLines.length === 0) {
+    showToast(t('selectPerfectLineTipNoNet'));
+    return;
+  }
+  // 找到 latency 最小的项
+  const minLatency = Math.min(...validLines.map(line => parseInt(line.latency, 10)));
+  // 设置 latency 最小项的 highlight 属性为 true
+  validLines.forEach(line => {
+    if (parseInt(line.latency, 10) === minLatency) {
+      line.highlight = true;
+      const proxyTargetUrl = line.lineUrl.replace("/chat-api/health", "");
+      const wsUrl = line.lineUrl.replace("https", "wss");
+      // 更新配置
+      sessionStorage.setItem("globalRequestPrefix", proxyTargetUrl);
+      window.WEB_CONFIG.proxy_target = proxyTargetUrl;
+      window.WEB_CONFIG.ws_url = wsUrl.replace("/chat-api/health", "");
+      showSuccessToast(t('selectPerfectLineTip'));
+      disabledBtn.value = false
+    }
+  });
+  console.log("一键切换到最优线路结果", window.WEB_CONFIG);
+}
+// 获取当前代理的线路
+function highlightMatchingLineUrls(linesList) {
+  // 获取当前代理的线路
+  const targetUrl = sessionStorage.getItem("globalRequestPrefix");
+  const proxyTarget = window.WEB_CONFIG.proxy_target || friendState.globalRequestPrefix;
+  // 标记是否已经找到匹配项
+  let foundMatch = false;
+  function normalizeUrl(url) {
+    return url ? url.replace('/chat-api/health', '') : url;
+  }
+  // 尝试找到匹配项
+  linesList?.some(item => {
+    if (item.lineUrl === targetUrl || item.lineUrl === proxyTarget) {
+      if (!foundMatch) { // 只设置一次 highlight 为 true
+        item.highlight = true;
+       const proxyTargetUrl = item.lineUrl.replace("/chat-api/health", "");
+       // 更新配置
+       sessionStorage.setItem("globalRequestPrefix", proxyTargetUrl);
+       foundMatch = true; // 标记已经找到匹配项
+      }
+      return true; // 找到匹配项后退出循环
+    }
+    return false; // 继续循环
+  });
+  // 如果没有找到匹配项，则进行 URL 归一化处理
+  if (!foundMatch) {
+    const normalizedTargetUrl = normalizeUrl(targetUrl);
+    const normalizedProxyTarget = normalizeUrl(proxyTarget);
+    linesList?.some(item => {
+      const normalizedLineUrl = normalizeUrl(item.lineUrl);
+      console.error("Checking normalized item URL:", normalizedLineUrl);
+      if (normalizedLineUrl === normalizedTargetUrl || normalizedLineUrl === normalizedProxyTarget) {
+        if (!foundMatch) { // 只设置一次 highlight 为 true
+          item.highlight = true;
+          const proxyTargetUrl = item.lineUrl.replace("/chat-api/health", "");
+          // 更新配置
+          sessionStorage.setItem("globalRequestPrefix", proxyTargetUrl);
+          foundMatch = true; // 标记已经找到匹配项
+        }
+        return true; // 找到匹配项后退出循环
+      }
+      return false; // 继续循环
+    });
+  }
+}
+
+// 当依赖变化的时候赋值
+watchEffect(()=>{
+  if (lines.value) {
+    mergedList.value = lines.value;
+  }
+})
+// 组件初始化
+onMounted(async () => {
+  updateMergedList()
+  // 在这里处理耗时最短且成功的请求信息对象
+  lines.value = await findAllBackendResponseTimes();
+  highlightMatchingLineUrls(lines.value);
+});
+// 组件销毁后的清理操作
+onUnmounted(() => {
+});
+</script>
+
+<style lang="less" scoped>
+@import "@/style/common-styles.less";
+/* 在你的 CSS 文件中 */
+.rotate {
+  animation: rotate 0.8s linear;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.circuit-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 46px;
+  .footer-box-line {
+    background-color: #fff;
+    min-width: 375px;
+    max-width: 750px;
+    box-sizing: border-box;
+    margin: 0 auto;
+  }
+}
+.ml-3 {
+  margin-left: 3px;
+  :deep(.box1){
+    margin-top: 0;
+  }
+}
+.text_6 {
+  color: #fc5a50 !important;
+  line-height: 9px;
+}
+.text_7 {
+  color: #fc5a50 !important;
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-weight: 600;
+  line-height: 11px;
+}
+.group_2 {
+  padding: 8px 16px 0;
+  overflow: auto;
+  height: inherit;
+  .section_2 {
+    padding: 12px;
+    background-color: #f6f6f6;
+    border-radius: 12px;
+    height: 42px;
+    .text_3 {
+      line-height: 9px;
+    }
+    .text_4 {
+      line-height: 9px;
+    }
+  }
+  .section_3 {
+    padding: 12px;
+    background-color: #f6f6f6;
+    border-radius: 12px;
+    border-left: solid 0.5px #57c732;
+    border-right: solid 0.5px #57c732;
+    border-top: solid 0.5px #57c732;
+    border-bottom: solid 0.5px #57c732;
+    .text_5 {
+      color: #fa9837;
+      line-height: 9px;
+    }
+    .image_6 {
+      position: absolute;
+      left: 0;
+      top: 0;
+      :deep(.van-icon__image){
+        width: 20px;
+        height: 16px;
+      }
+    }
+  }
+  .font_2 {
+    font-size: 10px;
+    font-family: PingFang SC;
+    line-height: 9px;
+    color: #1b1b2299;
+  }
+  .font_3 {
+    font-size: 12px;
+    font-family: PingFang SC;
+    line-height: 9px;
+    font-weight: 600;
+    color: #57c732;
+  }
+  .image_5 {
+    width: 16px;
+    height: 16px;
+  }
+  .text-wrapper {
+    padding: 16px 0;
+    background-color: #1b1b22;
+    border-radius: 16px;
+    overflow: hidden;
+    .font {
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 600;
+    }
+  }
+}
+.button-wrapper {
+  min-width: 375px;
+  max-width: 750px;
+  box-sizing: border-box;
+  margin: 0 auto;
+  :deep(.van-button){
+    width: -webkit-fill-available;
+    // min-width: 375px;
+    // max-width: 750px;
+    margin: 0 20px;
+  }
+}
+</style>
diff --git a/src/views/my/network/diagnosis.vue b/src/views/my/network/diagnosis.vue
new file mode 100644
index 0000000..a6d9be5
--- /dev/null
+++ b/src/views/my/network/diagnosis.vue
@@ -0,0 +1,727 @@
+<template>
+  <!-- 网络诊断 -->
+  <div ref="networkRef" class="download">
+    <AppNavBar
+      :title="$t('networkDiagnostic')"
+      views_grade="secondary_view"
+      @click-left="router.push('/home/my')"
+    />
+    <div class="network-wrap">
+      <van-cell-group inset>
+        <van-cell center>
+          <template #title>
+            <div class="network-ip">{{$t("ip")}}：{{ networkState.ip }}</div>
+          </template>
+          <template #icon>
+            <van-icon :name="imgURL('my-location.svg')" class="location-icon" />
+          </template>
+          <template #label>
+            <div class="network-text">
+              {{$t("locationAddr")}}：{{ networkState.address }}
+            </div>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <div class="network-delay">
+        <van-icon :name="imgURL('delay-detection.svg')" size="24" />
+        <div class="network-delay_dx-title">{{$t("netDelayCheck")}}</div>
+      </div>
+      <!-- Circle 环形进度条 -->
+      <van-row justify="space-between" class="Circular-progress-bar">
+        <van-col
+          v-for="(item, index) in circleItems"
+          :key="index"
+          span="8"
+          class="circle-items"
+        >
+          <van-circle
+            v-model:current-rate="item.rate"
+            :rate="item.value"
+            :color="item.color"
+            :size="105"
+            layer-color="#ebedf0"
+          >
+            <div :class="['ct-text', item.className]" v-if="item.schedule" >{{ item.schedule }}</div>
+            <van-icon v-else :name="imgURL('error-line.svg')" size="24" style="margin-top: 40px;" />
+          </van-circle>
+          <div class="bt-text">{{ item.label }}</div>
+        </van-col>
+      </van-row>
+      <div class="flex-col section_6">
+        <div class="flex-row justify-between items-start relative group_5">
+          <div class="flex-row items-center group_7">
+            <van-icon :name="imgURL('vector-icon.svg')" size="24" style="margin-top: -5px;" />
+            <span class="font_2 text_15 ml-12">{{$t("netLine")}}</span>
+          </div>
+          <div class="flex-col items-center">
+            <van-icon :name="imgURL('up-icon-straight.svg')" size="33" style="margin-top: -5px;" />
+            <span class="font_3 text_16 mt-5">{{$t("imageLoadingRoute")}}</span>
+          </div>
+        </div>
+        <div class="grid mt-14" v-if="lines.length">
+          <div
+            v-for="(line, index) in lines"
+            :key="index"
+            :class="['flex-row justify-between items-center', line.class]"
+          >
+            <span class="font_5">{{ line.label }}</span>
+            <div class="flex-row items-center">
+              <span :class="['font_6', line.textClass]">{{ line.value }}</span>
+              <CommonLottie
+                v-if="isDisabledBtn"
+                class="shrink-0 image_7"
+                isGroup="line-loading"
+                :width="16"
+                :height="16"
+                :isShowTitle="false"
+              >
+              </CommonLottie>
+              <img v-else class="shrink-0 image_7 ml-3" :src="line.imgSrc" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <van-button
+        class="diagnosis-bts"
+        round
+        color="rgba(27, 27, 34, 1)"
+        :disabled="isDisabledBtn"
+        @click="handeSwitchingRetest"
+      >
+        {{ isDisabledBtn ? $t("networkChecking") : $t("reCheck") }}</van-button
+      >
+      <van-button
+        class="diagnosis-bts"
+        round
+        type="default"
+        @click="handeSwitchingLine"
+        >{{$t("serverLineChange")}}</van-button
+      >
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted,computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { switchCdnLoadSource,getUrlPrefix } from "@/utils/tools"
+import { AppNavBar, CommonLottie } from "@/components";
+import { linesMap,delayMap} from "@/utils/common";
+import { useGrade } from "@/utils/levelConfig";
+import { useI18n } from "vue-i18n";
+import api from "@/api";
+import request from '@/api/request'
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const networkRef = ref(null);
+const circleSize = ref(110); // 环形进度条宽度
+useGrade(networkRef, 2);
+const $api = inject("$api");
+const imgURL = (name) => {
+  // 注意：不要使用@/assets的写法，可能会出现无法识别@
+  return new URL(`/src/assets/svg/${name}`, import.meta.url).href;
+};
+const networkState = ref({
+  ip: "183.14.28.251",
+  address: "中国 广东 深圳 电信",
+});
+const gradientColor1 = {
+  "0%": "rgba(35, 85, 223, 1)",
+  "50%": "rgba(0, 166, 231, 1)",
+  "100%": "rgba(0, 225, 137, 1)",
+};
+const gradientColor2 = {
+  "0%": "rgba(255, 34, 34, 1)",
+  "50%": "rgba(252, 90, 80, 1)",
+  "100%": "rgba(255, 136, 70, 1)",
+};
+const gradientColor3 = {
+  "0%": "rgba(255, 113, 52, 1)",
+  "50%": "rgba(255, 155, 56, 1)",
+  "100%": "rgba(255, 184, 0, 1)",
+};
+// 定义定时器 ID
+let updateIntervalId = null;
+// 延迟检测数据
+const circleItems = ref([
+{
+    rate: 0,
+    value: 0,
+    schedule: 0,
+    color: gradientColor1,
+    className: "T-A",
+    label:t("netDelay1Check"),
+  },
+  {
+    rate: 0,
+    value: 0,
+    schedule: 0,
+    color: gradientColor2,
+    className: "T-B",
+    label:t("msgDelay1Check"),
+  },
+  {
+    rate: 0,
+    value: 0,
+    schedule: 0,
+    color: gradientColor3,
+    className: "T-C",
+    label:t("imgDelay1Check"),
+  },
+]);
+const isDisabledBtn = ref(false); // 按钮禁用
+const lines = ref([]); // 网络线路数据
+const defaultUrl = 'https://private-im-prod.oss-cn-hongkong.aliyuncs.com/4340760807_1719555039279.jpg';
+const defaultPath = '/4340760807_1719555039279.jpg';
+// 设备类型检测
+function isMobileDevice() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+// 获取归属地和ip地址
+const fetchUserIpAndLocation = async () => {
+  const data  = await fetchIpApi();
+  if (data.ip) {
+    networkState.value = data;
+  }
+};
+// 根据接口查询ip
+const fetchIpApi = async () => {
+  try {
+    const lang = isZh() ? 'zh-CN' : 'en';
+    const { data } = await $api.login.getAddressLocationIp();
+    if (data.code === 0) {
+      return {
+        ip: data.ip,
+        address: data.address,
+      };
+    }
+  } catch (error) {
+    console.error('ipApiIP error:', error);
+  }
+  return { ip: '', desc: '' };
+};
+// 获取中英文
+const isZh = () => {
+  return navigator.language.startsWith('zh');
+};
+
+// 切换线路
+const handeSwitchingLine = async () => {
+  router.push(`/home/my/lines`);
+};
+// 再试一次重试
+const handeSwitchingRetest = async () => {
+  isDisabledBtn.value = true
+  await getNetworkLine()
+  await updateCircleItems();
+  isDisabledBtn.value = false
+};
+
+// 获取线路超时等
+const getNetworkLine = async () => {
+  const appConfig = sessionStorage.getItem("appConfig") ? JSON.parse(sessionStorage.getItem("appConfig")) : {};
+  const cdnList = appConfig.oss_cdn_list?.filter(item => defaultUrl.startsWith(item.oss_prefix));
+  cdnList.forEach(item => {
+    item.cdn_prefix = `${item.oss_prefix}${defaultPath}`;
+  });
+  // 根据 cdnList 动态生成 thresholds
+  const thresholds = cdnList.map((_, index) => {
+    return {
+      label: t("serverLine") + `${index + 1}`,
+      max: (index + 1) * 1000  // 示例的最大值，调整为实际需要的逻辑
+    };
+  });
+  // 发起所有请求并计算时间
+  const results = await Promise.all(cdnList.map(async item => {
+    const startTime = performance.now();
+    await fetch(item.cdn_prefix);
+    const endTime = performance.now();
+    return endTime - startTime;
+  }));
+  // 定义一个函数来获取属性值
+  const getAttributes = (time) => {
+    if (time > 15000) {
+      return { imgSrc: "xinhao-yanchi3.svg", className: "grid-item_3", textClass: "" };
+    } else if (time <= 1000) {
+      return { imgSrc: "xinhao-yanchi1.svg", className: "grid-item", textClass: "text_17" };
+    } else if (time <= 1550) {
+      return { imgSrc: "xinhao-yanchi2.svg", className: "grid-item_3", textClass: "text_18" };
+    } else if (time <= 3000) {
+      return { imgSrc: "xinhao-yanchi3.svg", className: "grid-item", textClass: "text_19" };
+    } else if (time <= 5000) {
+      return { imgSrc: "xinhao-yanchi3.svg", className: "grid-item", textClass: "text_19" };
+      // return { imgSrc: "xinhao-yanchi4.svg", className: "grid-item_3", textClass: "text_20" };
+    } else if (time <= 15000) {
+      // return { imgSrc: "xinhao-yanchi5.svg", className: "grid-item_1", textClass: "" };
+      return { imgSrc: "xinhao-timeout.svg", className: "grid-item_1", textClass: "text_19" };
+    }
+  };
+  // 根据时间计算每条线路的属性
+  const categorized = thresholds.map((threshold, index) => {
+    const time = results[index]; // 获取对应的请求时间
+    const { imgSrc, className, textClass } = getAttributes(time);
+    return {
+      label: threshold.label,
+      // value: time <= 10000 ? `${time.toFixed(0)}ms` : '超时',
+      value: time > 3000 ? t("timeOut") : `${time.toFixed(0)}ms`,
+      imgSrc: imgURL(imgSrc),
+      class: className,
+      textClass: textClass,
+    };
+  });
+  // 更新 Map
+  linesMap.set('lines', categorized); // 在 getNetworkLine 中计算出的数据
+  lines.value = Array.from(linesMap.get('lines')); // 将 Map 中的值转换成数组并赋给 lines.value
+};
+// 延迟测量函数
+async function measureDelay(url) {
+  const startTime = performance.now();
+  try {
+    const response = await fetch(url, { mode: 'no-cors' });
+    if (response.status === 0 || response.status === 200) {
+      const endTime = performance.now();
+      return endTime - startTime;
+    } else {
+      throw new Error(`延迟测量函数错误HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error(error);
+    // 返回 null 以便稍后处理
+    return null;
+  }
+}
+// 获取互联网延迟
+async function getInternetDelay() {
+  const urls = ['https://www.baidu.com', 'https://www.google.com'];
+  for (const url of urls) {
+    const delay = await measureDelay(url);
+    if (delay !== null) return delay;
+  }
+  return 100; // 默认延迟值
+}
+// 获取图片延迟
+async function getImageDelay() {
+  const imageUrl = 'https://private-im-prod.oss-cn-hongkong.aliyuncs.com/4340760807_1719555039279.jpg';
+  const delay = await measureDelay(imageUrl);
+  return delay !== null ? delay : 100; // 默认延迟值
+}
+// 获取消息延迟
+async function getMessageDelay() {
+  let globalRequestPrefix = sessionStorage.getItem("globalRequestPrefix")
+  let apiUr2;
+  if (globalRequestPrefix) {
+    apiUr2 = `${globalRequestPrefix}/chat-api/health`;
+  } else {
+    apiUr2 = `${window.WEB_CONFIG.proxy_target}/chat-api/health`;
+  }
+  const delay = await measureDelay(apiUr2);
+  return delay !== null ? delay : 0; // 默认延迟值
+}
+// 示例比例函数，可以根据需要调整
+function calculateProgress(delay, maxDelay = 10000) {
+  const minProgress = 0;
+  const maxProgress = 100;
+  const progress = (delay / maxDelay) * maxProgress;
+  return Math.round(Math.min(maxProgress, Math.max(minProgress, progress)));
+}
+// 根据 schedule 值动态获取 color 和 className
+function getColorAndClassName(schedule) {
+  if (schedule===0) {
+    return { color: {}, className: 'T-C' };
+  } else if (schedule >= 0 && schedule <= 1000) {
+    return { color: gradientColor1, className: 'T-A' };
+  } else if (schedule >= 1001 && schedule <= 3000) {
+    return { color: gradientColor2, className: 'T-B' };
+  } else {
+    return { color: gradientColor3, className: 'T-C' };
+  }
+}
+// 通过引入一个 calculateProgress 函数，将延迟值转换为进度值，并更新 circleItems 数据。
+async function updateCircleItems() {
+  // 重置进度数据
+  circleItems.value = [
+    {
+      rate: 0,
+      value: 0,
+      schedule: 0,
+      color: gradientColor1,
+      className: "T-A",
+      label:t("netDelay1Check"),
+    },
+    {
+      rate: 0,
+      value: 0,
+      schedule: 0,
+      color: gradientColor2,
+      className: "T-B",
+      label:t("msgDelay1Check"),
+    },
+    {
+      rate: 0,
+      value: 0,
+      schedule: 0,
+      color: gradientColor3,
+      className: "T-C",
+      label:t("imgDelay1Check"),
+    },
+  ];
+  // 获取延迟数据
+  const internetDelay = await getInternetDelay(); // 互联网延迟
+  const imageDelay = await getImageDelay(); // 图片延迟
+  const messageDelay = await getMessageDelay(); // 消息延迟
+  // 更新 delayMap 数据
+  delayMap.set('internetDelay', internetDelay);
+  delayMap.set('imageDelay', imageDelay);
+  delayMap.set('messageDelay', messageDelay);
+  // 从 delayMap 获取延迟数据，使用默认值 0 防止 Map 中没有数据时的错误
+  const updatedInternetDelay = delayMap.get('internetDelay') || 0;
+  const updatedImageDelay = delayMap.get('imageDelay') || 0;
+  const updatedMessageDelay = delayMap.get('messageDelay') || 0;
+  // 更新 circleItems.value
+  circleItems.value = [
+    {
+      rate: updatedInternetDelay,
+      value: calculateProgress(updatedInternetDelay),
+      schedule: Math.round(updatedInternetDelay),
+      ...getColorAndClassName(updatedInternetDelay),
+      label:t("netDelay1Check"),
+    },
+    {
+      rate: updatedMessageDelay,
+      value: calculateProgress(updatedMessageDelay),
+      schedule: Math.round(updatedMessageDelay),
+      ...getColorAndClassName(updatedMessageDelay),
+      label:t("msgDelay1Check"),
+    },
+    {
+      rate: updatedImageDelay,
+      value: calculateProgress(updatedImageDelay),
+      schedule: Math.round(updatedImageDelay),
+      ...getColorAndClassName(updatedImageDelay),
+      label:t("imgDelay1Check"),
+    },
+  ];
+}
+// 如果 linesMap 包含 'lines' 键且值不为空，则返回 true，否则返回 false
+const hasValidLines = () => {
+  if (linesMap.has('lines')) {
+    const linesValue = linesMap.get('lines');
+    return linesValue && linesValue.length > 0;
+  }
+  return false;
+};
+// 获取延迟值：通过 delayMap.get 获取相应的延迟值，如果不存在则设为 null。
+// 如果Map中所有值都有效，则更新 circleItems.value。
+// 如果Map中没值，则调用 updateCircleItems。
+async function checkAndUpdate() {
+  // 获取各项延迟值
+  const updatedInternetDelay = delayMap.has('internetDelay') ? delayMap.get('internetDelay') : 0;
+  const updatedImageDelay = delayMap.has('imageDelay') ? delayMap.get('imageDelay') : 0;
+  const updatedMessageDelay = delayMap.has('messageDelay') ? delayMap.get('messageDelay') : 0;
+  // 检查所有延迟值是否存在且非空
+  const hasAllValues = updatedInternetDelay && updatedImageDelay && updatedMessageDelay;
+  if (hasAllValues) {
+    // 更新 circleItems.value
+    circleItems.value = [
+      {
+        rate: updatedInternetDelay,
+        value: calculateProgress(updatedInternetDelay),
+        schedule: Math.round(updatedInternetDelay),
+        ...getColorAndClassName(updatedInternetDelay),
+        label:t("netDelay1Check"),
+      },
+      {
+        rate: updatedMessageDelay,
+        value: calculateProgress(updatedMessageDelay),
+        schedule: Math.round(updatedMessageDelay),
+        ...getColorAndClassName(updatedMessageDelay),
+        label:t("msgDelay1Check"),
+      },
+      {
+        rate: updatedImageDelay,
+        value: calculateProgress(updatedImageDelay),
+        schedule: Math.round(updatedImageDelay),
+        ...getColorAndClassName(updatedImageDelay),
+        label:t("imgDelay1Check"),
+      },
+    ];
+  } else {
+    // 调用 updateCircleItems
+    await updateCircleItems();
+  }
+}
+// 获取环境变量
+const apiUrl = import.meta.env.VITE_APP_PROXY_TARGET; // 或 process.env.VUE_APP_API_URL
+
+// 初始化
+onMounted(async () => {
+  console.error('friendState111111',friendState.globalRequestPrefix);
+  console.error('friendState22222',apiUrl);
+  // ========================================
+  if (friendState.globalRequestPrefix==='') {
+    if (window.WEB_CONFIG.proxy_target) {
+      friendState.SetRequestPrefix(window.WEB_CONFIG.proxy_target)
+    } else {
+      friendState.SetRequestPrefix(apiUrl)
+    }
+  }
+  // 如果 linesMap 有值则每次页面初始化，只更新数据，不在查询数据
+  if (hasValidLines()) {
+    lines.value = Array.from(linesMap.get('lines')); // 将 Map 中的值转换成数组并赋给 lines.value
+    lines.value.forEach((item)=>{
+      if (item.label) {
+        item.label =  `${t('serverLine')}${item.label.replace(/^线路/, '')}`
+      }
+    })
+  } else {
+    await getNetworkLine()
+  }
+  await fetchUserIpAndLocation()
+  await checkAndUpdate();
+});
+
+// 组件销毁后的清理操作
+onUnmounted(() => {
+});
+</script>
+
+<style lang="less" scoped>
+// 导入公共样式文件
+@import "@/style/common-styles.less";
+/* 使用 LESS 变量定义颜色 */
+@default-color: rgba(83, 143, 225, 1);
+@color2: rgba(252, 90, 80, 1);
+@color3: rgba(250, 152, 55, 1);
+.secondary_view {
+  background: #ffff;
+}
+.network-wrap {
+  background: #f8f8f8;
+  height: 100%;
+  padding-top: 65px;
+  .network-ip {
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 19.6px;
+  }
+  .network-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 16.8px;
+  }
+  .location-icon {
+    :deep(.van-icon__image) {
+      width: 36px;
+      height: 36px;
+      background-size: 100% 100%;
+      margin-right: 5px;
+    }
+  }
+  .network-delay {
+    margin: 16px 0;
+    padding: 0px 0px 0px 26px;
+    gap: 8px;
+    display: flex;
+    align-items: center;
+    &_dx-title {
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+  }
+  .Circular-progress-bar {
+    margin: 0 1rem;
+  }
+  .van-row {
+    .circle-items {
+      min-width: 105px;
+      min-height: 130px;
+      background: #fff;
+      border-radius: 12px;
+      text-align: center;
+      max-width: 32.333333%;
+      .ct-text {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 var(--van-padding-base);
+        font-weight: var(--van-circle-text-font-weight);
+        font-size: var(--van-circle-text-font-size);
+        line-height: var(--van-circle-text-line-height);
+        transform: translateY(-50%);
+      }
+      .T-A {
+        color: @default-color;
+        &::before {
+          content: "MS";
+          color: @default-color;
+          position: absolute;
+          top: 65%;
+          left: 0;
+          width: 100%;
+          font-size: 8px;
+        }
+        // &::after {
+        //   height: 30px;
+        //   content: "";
+        //   position: absolute;
+        //   left: 23%;
+        //   background: #fff;
+        //   bottom: -42px;
+        //   min-width: 55px;
+        // }
+      }
+      .T-B {
+        color: @color2;
+        &::before {
+          content: "MS";
+          color: @color2;
+          position: absolute;
+          top: 65%;
+          left: 0;
+          width: 100%;
+          font-size: 8px;
+        }
+      }
+      .T-C {
+        color: @color3;
+        &::before {
+          content: "MS";
+          color: @color3;
+          position: absolute;
+          top: 65%;
+          left: 0;
+          width: 100%;
+          font-size: 8px;
+        }
+      }
+      .bt-text {
+        font-size: 0.625rem;
+        font-weight: 400;
+        line-height: 14px;
+        text-align: center;
+        color: rgba(27, 27, 34, 0.6);
+        padding-bottom: 10px;
+      }
+      .van-circle {
+        margin: 10px 0;
+        :deep(svg) {
+          transform: rotate(220deg);
+        }
+      }
+    }
+  }
+  // =====================================================
+  .mt-5 {
+    margin-top: 5px;
+  }
+  .ml-3 {
+    margin-left: 3px;
+  }
+  .section_6 {
+    padding-bottom: 16px;
+    background-color: #EDEDED;
+    border-radius: 12px;
+    margin: 1rem 1rem 0 1rem;
+    // height: 207px;
+    .group_5 {
+      margin-right: 14px;
+      margin-top: -16px;
+      padding-left: 16px;
+      .group_7 {
+        margin-top: 30px;
+        .font_2 {
+          font-size: 14px;
+          font-family: PingFang SC;
+          color: #1b1b22;
+        }
+        .text_15 {
+          line-height: 13px;
+        }
+      }
+      .font_3 {
+        font-size: 12px;
+        font-family: PingFang SC;
+        line-height: 12px;
+        color: #1b1b2266;
+      }
+      .text_16 {
+        line-height: 11px;
+      }
+    }
+    .grid {
+      margin-left: 16px;
+      margin-right: 17px;
+      height: 139px;
+      display: grid;
+      grid-template-rows: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      row-gap: 9px;
+      column-gap: 9px;
+      .text_17 {
+        color: #57c732;
+        line-height: 9px;
+      }
+      .text_18 {
+        color: #fa9837;
+        line-height: 9px;
+      }
+      .text_19 {
+        color: #fc5a50;
+        line-height: 9px;
+      }
+      .text_20 {
+        color: #fc5a50;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 11px;
+      }
+      .grid-item_1 {
+        padding: 12px 12px 12px 12.5px;
+        background-color: #ffffff;
+        border-radius: 12px;
+      }
+      .grid-item {
+        padding: 12.5px 12px 12.5px 12.5px;
+        background-color: #ffffff;
+        border-radius: 12px;
+      }
+      .font_5 {
+        font-size: 10px;
+        line-height: 9px;
+        color: #1b1b2299;
+        white-space: nowrap;         /* 防止文本换行 */
+        overflow: hidden;            /* 隐藏超出容器的内容 */
+        text-overflow: ellipsis;     /* 用省略号显示超出部分 */
+      }
+      .image_7 {
+        width: 16px;
+        height: 16px;
+        :deep(.box1) {
+          margin-top: 0;
+        }
+      }
+      .grid-item_3 {
+        padding: 12.5px 12px 12.5px 12.5px;
+        background-color: #ffffff;
+        border-radius: 12px;
+      }
+      .font_6 {
+        font-size: 12px;
+        line-height: 9px;
+        font-weight: 600;
+      }
+    }
+  }
+  // 按钮样式
+  .diagnosis-bts {
+    display: block;
+    margin: 10px 16px;
+    width: calc(100% - 32px);
+  }
+}
+</style>
diff --git a/src/views/my/notDisturb/index.vue b/src/views/my/notDisturb/index.vue
new file mode 100644
index 0000000..732b3b2
--- /dev/null
+++ b/src/views/my/notDisturb/index.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from 'pinia'
+const { t } = useI18n();
+const $api = inject("$api");
+const notDisturbRef = ref(null)
+const router = useRouter()
+useGrade(notDisturbRef, 2)
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { setUserInfo } = userStore;
+const selected = ref('system')
+// 0为关闭
+const detailObj = ref(userInfo.value)
+const changeSwitch = async () => {
+  const res = await $api.login.updateUserInfo({
+    avatar: null,
+    birthday: null,
+    birth: null,
+    gender: 0,
+    language: null,
+    mail: null,
+    nickname: null,
+    phone: null,
+    signature: null,
+    globalRecvMsgOpt: userInfo.value.globalRecvMsgOpt
+  })
+  setUserInfo({ ...detailObj.value, ...{ globalRecvMsgOpt: userInfo.value.globalRecvMsgOpt } })
+}
+</script>
+
+<template>
+  <div ref="notDisturbRef" class="messageNotify">
+    <AppNavBar :title="$t('messageNotify')" views_grade="secondary_view" @click-left="router.push('/home/my')">
+    </AppNavBar>
+    <div class="messageNotify-wrap">
+      <van-cell-group :border="true">
+        <van-cell is-link :title="$t('notDisturbMode')" @click="setNodisturbing">
+          <template #title>
+            <span class="custom-title">{{ $t('notDisturbMode') }}</span>
+          </template>
+          <template #right-icon>
+            <van-switch v-model="userInfo.globalRecvMsgOpt" :active-value="2" :inactive-value="0" size="16px"
+              @change="changeSwitch('noDisturbing')" />
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.messageNotify-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  /deep/.van-cell {
+    padding: 0;
+    height: 60px;
+    line-height: 60px;
+    align-items: center;
+
+    .van-cell__title {
+      img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+
+      .custom-title {
+        padding-left: 16px;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .notice-value-links {
+      margin-top: 18px;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      margin-right: 16px;
+      color: #76767A;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .contents {
+      padding-right: 16px;
+      color: #76767A;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+  :deep(.van-switch) {
+    margin-right: 16px;
+  }
+}
+
+.nav-text {
+  color: #0095F6;
+  font-family: PingFang SC;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+</style>
diff --git a/src/views/my/profile/applicationRecord.vue b/src/views/my/profile/applicationRecord.vue
new file mode 100644
index 0000000..4b66fe5
--- /dev/null
+++ b/src/views/my/profile/applicationRecord.vue
@@ -0,0 +1,252 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import { useI18n } from "vue-i18n"
+import { AppNavBar, EmptyData } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { storeToRefs } from 'pinia'
+import { showConfirmDialog } from 'vant'
+import recordItem from './components/recordItem.vue'
+import VirtualList from '@/components/virtualList';
+
+const { t } = useI18n()
+const applicationRecordRef = ref(null)
+useGrade(applicationRecordRef, 3)
+const userStore = useUserStore();
+const { setUserInfo } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const active = ref(1);
+const dataList = ref([
+  { name: t('inReview'), id: 1 },
+  { name: t('passTheAudit'), id: 2 },
+  { name: t('rejectedPayment'), id: 3 },
+]);
+
+const loadState = reactive({
+  loading: false,
+  hasMore: true
+});
+const pullDisabled = ref(false)
+
+const onBottom = async () => {
+  if (loadState.hasMore && !loadState.loading) {
+    loadState.loading = true
+    // 接口
+    getData()
+    loadState.loading = false
+  }
+}
+
+const onScoll = (e) => {
+  pullDisabled.value = e.target.scrollTop > 0
+}
+
+const list = ref([])
+const onRefresh = async () => {
+  getData()
+  loadState.pullLoading = false
+}
+// 点击tab触发
+const onTabClick = async () => {
+  await nextTick()
+  getData()
+}
+const getData = async () => {
+  let data = {
+    avatar_type: 0,
+    status: active.value
+  }
+  const res = await $api.avatar.avatarList(data)
+  if(res.code !== 0) return
+  list.value = res.data || []
+  console.log('list.value',list.value);
+}
+const isPc = computed(() => document.documentElement.clientWidth > 750)
+getData()
+</script>
+
+<template>
+  <div ref="applicationRecordRef" class="applicationRecord">
+    <AppNavBar :title="$t('applyRecord')" left-arrow views_grade="thirdly_view" @click-left="router.back()"></AppNavBar>
+    <div class="applicationRecord-wrap">
+      <div class="applicationRecord-content">
+        <van-tabs v-model:active="active" :swipeable="!isPc" class="img-box" @click-tab="onTabClick">
+          <van-tab :title="item.name" :name="item.id" v-for="item in dataList" :key="item.id">
+            <van-pull-refresh v-model="loadState.pullLoading" :disabled="pullDisabled" @refresh="onRefresh">
+              <div v-if="list.length > 0">
+                <virtual-list ref="vsl" class="vir-list" :data-key="'id'"
+                :data-sources="list" :data-component="recordItem" :estimate-size="68" @tobottom="onBottom" @scroll="onScoll" />
+              </div>
+            </van-pull-refresh>
+            <EmptyData v-if="list.length === 0" :description="$t('noCheck')"></EmptyData>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+
+.applicationRecord-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  padding-bottom: 50px;
+  width: 100%;
+
+  .applicationRecord-content {
+    padding: 10px 0;
+    height: 100%;
+  }
+  .list-content {
+    height: 100%;
+  }
+}
+
+.vir-list {
+  height: 100%;
+}
+
+:deep(.van-tabs__line) {
+  max-width: 15px;
+  background-color: #0095F6;
+}
+
+:deep(.van-tab__panel) {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 100%;
+  overflow-y: auto;
+  height: 100%;
+}
+
+:deep(.van-tabs__wrap) {
+  border-bottom: 1px solid #ECECEC;
+  padding-bottom: 5px;
+}
+
+.img-box {
+  height: calc(100% - 60px);
+}
+
+.flex-btn {
+  display: flex;
+  align-items: center;
+  padding: 0 23px;
+
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 1rem;
+    color: #49494E;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border-color: #D1D1D3;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  .btn {
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+    border: none;
+  }
+
+  .btn1 {
+    background-color: #1B1B22;
+    color: #FFF;
+  }
+
+  .cancle-btn {
+    margin-right: 10px;
+  }
+}
+
+.box-item-img {
+  width: 60px;
+  height: 60px;
+  margin: 0 15px 30px 15px;
+}
+
+
+.box-item {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+}
+
+.active {
+  border: 2px solid #5f97e3;
+  box-sizing: border-box;
+  padding: 2px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: linear-gradient(to bottom,
+      #b8b8b8 20%,
+      #b8b8b8 20% 50%,
+      rgba(0, 0, 0, 0) 40% 60%,
+      rgba(0, 0, 0, 0) 60% 80%,
+      rgba(0, 0, 0, 0) 80%);
+  transition: color 0.2s ease;
+}
+
+:deep(.van-tab__text) {
+  font-size: 1rem;
+  color: #979797;
+}
+
+:deep(.van-tab--active .van-tab__text) {
+  color: black;
+}
+
+:deep(.van-tabs__content--animated) {
+  height: 100%
+}
+
+:deep(.van-pull-refresh) {
+  width: 100%;
+}
+:deep(.van-pull-refresh__track) {
+    overflow-y: auto;
+  }
+:deep(.van-tab__panel) {
+  height: 100%;
+  overflow-y: auto;
+}
+:deep(.van-tab__panel-wrapper) {
+  // width: 100vw !important;
+}
+</style>
diff --git a/src/views/my/profile/components/recordItem.vue b/src/views/my/profile/components/recordItem.vue
new file mode 100644
index 0000000..54a4b03
--- /dev/null
+++ b/src/views/my/profile/components/recordItem.vue
@@ -0,0 +1,81 @@
+<script setup>
+import defaultAvatar from "@/assets/mine-avatar.png"
+import { getDates } from '@/utils/tools'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+
+const props = defineProps({
+  source: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const avatarName = {
+  1:t('groupIcon'),
+  2:t('personIcon'),
+  3:t('givGroupFace'),
+}
+</script>
+
+<template>
+  <div class="record-item">
+    <div class="item-content">
+      <Avatar class="avatar" width="48" height="48" :url="source.avatar_url" :name="'1'" @updateUrl="url => source.avatar_url = url"></Avatar>
+      <div class="desc">
+        <div class="top">
+          <div class="name">{{ avatarName[source.avatar_type] }}</div>
+          <div class="status status_blue" v-if="source.status === 1">{{$t('inReview')}}</div>
+          <div class="status" v-if="source.status === 2">{{$t('passed')}}</div>
+          <div class="status status_red"  v-if="source.status === 3">{{$t('headRejected')}}</div>
+        </div>
+        <div class="time" v-if="source.status === 2 || source.status === 3">{{getDates(source.check_time)}}</div>
+        <div class="time" v-if="source.status === 1">{{getDates(source.create_time)}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.record-item {
+  width: 100%;
+  padding: 10px 16px;
+  .item-content {
+    display: flex;
+    .avatar {
+      margin-right: 12px;
+    }
+    .desc {
+      flex: 1;
+      margin: 5px 0;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        .name {
+          font-size: 0.875rem;
+          color: #1B1B22;
+          width: 208px;
+          white-space: nowrap; /* 禁止换行 */
+          overflow: hidden; /* 隐藏溢出部分的文本 */
+          text-overflow: ellipsis;
+        }
+        .status {
+          font-size: 0.75rem;
+          color: #D9D9D9;
+        }
+        .status_red {
+          color: #FC5A50;
+        }
+        .status_blue {
+          color: #5F97E3;
+        }
+      }
+      .time {
+        color: #A4A4A7;
+        font-size: 0.75rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/profile/index.vue b/src/views/my/profile/index.vue
new file mode 100644
index 0000000..f048301
--- /dev/null
+++ b/src/views/my/profile/index.vue
@@ -0,0 +1,412 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { copyUserId, getDates, handleImgCdnError } from '@/utils/tools'
+import { useUserStore } from "@/stores/user";
+import { getGender } from '@/utils/tools'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import rightLink from "@/assets/right-small2.svg"
+import axios from 'axios';
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { uploadFileByOss } from "@/utils/tools"
+const { t } = useI18n()
+const userStore = useUserStore();
+const { setUserInfo } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const profileRef = ref(null)
+useGrade(profileRef, 2)
+const handleClick = (type) => {
+  router.push(`/home/my/profile/${type}`)
+}
+const avatarUrl = ref('')
+const detailObj = ref({})
+watch(()=>userInfo.value, (val) => {
+  detailObj.value = val
+},{deep: true})
+const actionsSex = reactive([
+  { name: t('man'), color: '' },
+  { name: t('woman'), color: '' },
+  { name: t('confidential'), color: '' },
+]);
+const actionsAvatar = [
+  { name: t('toolboxAlbum') },
+  { name: t('toolboxCamera') }
+];
+const showSex = ref(false)
+const showAvatar = ref(false)
+const showDatePicker = ref(false)
+const selectSex = async (val, index) => {
+  // 男1，女2，保密3
+  const res = await $api.login.updateUserInfo({
+    "avatar": null,
+    "birthday": null,
+    "birth": null,
+    "gender": index + 1,
+    "language": null,
+    "mail": null,
+    "nickname": null,
+    "phone": null,
+    "signature": null,
+    globalRecvMsgOpt: 0
+  })
+  if (res.code != 0) return
+  const gender = index + 1
+  setUserInfo({ ...detailObj.value, ...{ gender: gender } })
+  actionsSex.forEach((item, index1) => {
+    item.color = '';
+    if (index1 === index) {
+      actionsSex[index1].color = '#0095F6';
+    }
+  })
+}
+const currentDate = ref([]);
+const minDate = computed(() => {
+  // const currentDate = new Date();
+  // const year = currentDate.getFullYear() - 124;
+  // const month = currentDate.getMonth();
+  // const day = currentDate.getDate();
+  return new Date(1900, 0, 1)
+})
+const maxDate = computed(() => {
+  const curDate = new Date();
+  const year = curDate.getFullYear();
+  const month = curDate.getMonth();
+  const day = curDate.getDate();
+  let date = [year, month + 1, day]
+  return new Date(date)
+})
+const formatter = (type, option) => {
+  if (localStorage.getItem('language') === 'zh-cn' || localStorage.getItem('language') === 'zh-hant-cn') {
+    if (type === 'year') {
+      option.text += '年';
+    }
+    if (type === 'month') {
+      option.text += '月';
+    }
+    if (type === 'day') {
+      option.text += '日';
+    }
+  }
+  return option;
+}
+const handleSave = async () => {
+  if (currentDate.value) {
+    const res = await $api.login.updateUserInfo({
+      "avatar": null,
+      "birthday": currentDate.value.join('-'),
+      "birth": null,
+      "gender": 0,
+      "language": null,
+      "mail": null,
+      "nickname": null,
+      "phone": null,
+      "signature": null,
+    })
+    const birthday = currentDate.value.join('-')
+    setUserInfo({ ...detailObj.value, ...{ birthday: birthday } })
+    if (res.code != 0) return
+    showDatePicker.value = false
+  }
+}
+onMounted(() => {
+  actionsSex.forEach((item, index1) => {
+    item.color = '';
+    if (index1 === (userInfo.value.gender - 1)) {
+      actionsSex[index1].color = '#0095F6';
+    }
+  })
+  if (userInfo.value.birthday) {
+    currentDate.value = userInfo.value.birthday.split('-')
+  } else {
+    const curDate = new Date();
+    const year = curDate.getFullYear();
+    const month = curDate.getMonth();
+    const day = curDate.getDate();
+    // currentDate.value = new Date(`${year}`, `${month + 1}`, `${day}`);
+    currentDate.value = [`${year}`, `${month + 1}`, `${day}`]
+  }
+})
+const openCameraApp = () => {
+
+}
+const afterRead = async (fileObj) => {
+  // 此时可以自行将文件上传至服务器
+  const file = fileObj.file
+  const { access_url, fileRes } = await uploadFileByOss(file)
+  // const ossData = {
+  //   file_name: file.name,
+  //   content_type: file.type,
+  //   uuid: file.uid,
+  //   file_from: 1
+  // }
+  // const res = await $api.contact.ossPutUrls(ossData)
+  // if (res.code != 0) return
+  // const { access_url, put_url } = res.data;
+  // const headers = {
+  //   'token': window.localStorage.getItem('token'),
+  //   'Content-Type': file.type,
+  //   'operationID': +new Date()
+  // };
+  // const fileRes = await axios({
+  //   method: 'put',
+  //   url: put_url,
+  //   data: file,
+  //   headers: {
+  //     'Content-Type': file.type
+  //   }
+  // });
+  const result = await $api.login.updateUserInfo({
+    "avatar": access_url,
+    "birthday": null,
+    "birth": null,
+    "gender": 0,
+    "language": null,
+    "mail": null,
+    "nickname": null,
+    "phone": null,
+    "signature": null,
+  })
+  const faceURL = access_url
+  setUserInfo({ ...detailObj.value, ...{ faceURL: faceURL } })
+  showAvatar.value = false
+}
+</script>
+
+<template>
+  <div ref="profileRef" class="profile">
+    <AppNavBar left-arrow :title="$t('personalInfo')" views_grade="secondary_view"
+      @click-left="router.push('/home/my')" />
+    <div class="profile-wrap">
+      <van-cell-group :border="true">
+        <van-cell :title="$t('avatar')" is-link :border="true" @click="handleClick('avatar')">
+          <template #title>
+            <span class="custom-titles">{{ $t('avatar') }}</span>
+          </template>
+          <template #right-icon>
+            <van-image class="avatar" round width="40" height="40"
+              :src="userInfo.faceURL ? userInfo.faceURL : defaultAvatar" @error="e => handleImgCdnError(e, userInfo, 'faceURL')" />
+            <img class="notice-value-link" :src="rightLink" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('uidStr')" :border="true">
+          <template #title>
+            <span class="custom-titles">{{ $t('uidStr') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{ userInfo.isInternalUser ? userInfo.internal_uid :userInfo.userID }}</div>
+            <span class="notice-value-title" @click="copyUserId(userInfo.isInternalUser ? userInfo.internal_uid :userInfo.userID)">{{ $t('menuCopy') }}</span>
+          </template>
+        </van-cell>
+        <van-cell :title="$t('myQr')" is-link to="" :border="true" @click="handleClick('qrcode')">
+          <template #title>
+            <span class="custom-titles">{{ $t('myQr') }}</span>
+          </template>
+          <template #right-icon>
+            <img class="notice-value-links" src="@/assets/qrcode1.svg" alt="">
+            <img class="notice-value-link" :src="rightLink" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('nicknames')" is-link to="" :border="true" @click="handleClick('user')">
+          <template #title>
+            <span class="custom-titles">{{ $t('nicknames') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{ userInfo.nickname }}</div>
+            <img class="notice-value-link" :src="rightLink" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('signature')" is-link to="" :border="true" @click="handleClick('sign')">
+          <template #title>
+            <span class="custom-titles">{{ $t('signature') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content contents1">{{ userInfo.signature ? userInfo.signature : $t('go_to_settings') }}</div>
+            <img class="notice-value-link" :src="rightLink" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('gender')" is-link to="" :border="true" @click="showSex = true">
+          <template #title>
+            <span class="custom-titles">{{ $t('gender') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{ userInfo.gender ? getGender(userInfo.gender) : $t('go_to_settings') }}</div>
+            <img class="notice-value-link" :src="rightLink" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('date_of_birth')" is-link to="" :border="true" @click="showDatePicker = true">
+          <template #title>
+            <span class="custom-titles">{{ $t('date_of_birth') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{ userInfo.birthday ? userInfo.birthday : $t('not_perfection') }}</div>
+            <img class="notice-value-link" :src="rightLink" alt="">
+          </template>
+        </van-cell>
+        <van-cell :title="$t('log_in_time1')" is-link to="" :border="false">
+          <template #title>
+            <span class="custom-titles">{{ $t('log_in_time1') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="contents">{{ getDates(userInfo.loginTime) }}</div>
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <van-action-sheet v-model:show="showSex" :actions="actionsSex" :cancel-text="$t('cancel')" close-on-click-action
+        @cancel="showSex = false" @select="selectSex" />
+      <van-popup v-model:show="showDatePicker" round position="bottom">
+        <van-date-picker v-model="currentDate" title="" :columns-type="['year', 'month', 'day']" :formatter="formatter"
+          :min-date="minDate" :max-date="maxDate" @cancel="showDatePicker = false" @confirm="handleSave" />
+      </van-popup>
+      <van-popup class="popup" v-model:show="showAvatar" round position="bottom">
+        <van-cell-group :border="true">
+          <div>
+            <van-cell :title="$t('upload')" class="second_cell">
+              <template #title>
+                <van-uploader :after-read="afterRead" :max-count="1">
+                  <span style="width: 100%;height: 100%;">{{ $t('upload') }}</span>
+                </van-uploader>
+              </template>
+            </van-cell>
+          </div>
+          <van-cell :title="$t('cancel')" @click="showAvatar = false">
+            <template #title>
+              <span class="custom-title">{{ $t('cancel') }}</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-popup>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.profile-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+
+  .profile-wrap {
+    margin-top: 4px;
+  }
+
+  /deep/.van-cell {
+    padding: 0;
+    height: 60px;
+    line-height: 60px;
+
+    .van-cell__title {
+      img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+
+      .custom-titles {
+        padding-left: 16px;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+
+    .avatar {
+      margin-top: 10px;
+      margin-right: 8px;
+    }
+
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .notice-value-title {
+      margin-right: 16px;
+      cursor: pointer;
+      display: inline-block;
+      color: #0095F6;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+
+    .notice-value-links {
+      margin-top: 18px;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .content {
+      margin-right: 8px;
+      color: #76767A;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+      min-width: 50px;
+    }
+
+    .contents {
+      padding-right: 16px;
+      color: #76767A;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+
+    .contents1 {
+      max-width: 220px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; //规定段落中的文本不进行换行
+    }
+  }
+
+  :deep(.van-action-sheet__item) {
+    padding: 19px 12px;
+    color: #1B1B22;
+  }
+
+  .popup {
+    :deep(.van-cell-group) {
+      background-color: #F8F8FB;
+    }
+
+    :deep(.van-cell) {
+      padding: 0;
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+    }
+
+    .second_cell {
+      margin-bottom: 10px;
+    }
+  }
+
+  :deep(.van-uploader) {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/views/my/profile/selectAvatar.vue b/src/views/my/profile/selectAvatar.vue
new file mode 100644
index 0000000..b12fed2
--- /dev/null
+++ b/src/views/my/profile/selectAvatar.vue
@@ -0,0 +1,373 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import defaultAvatar from "@/assets/mine-avatar.svg";
+import { storeToRefs } from "pinia";
+import customAvatar from "@/components/customAvatar/index.vue";
+import { showConfirmDialog, showToast } from "vant";
+import { handleImgCdnError } from "@/utils/tools"
+
+const { t } = useI18n();
+const avatarSetRef = ref(null);
+useGrade(avatarSetRef, 3);
+const userStore = useUserStore();
+const { setUserInfo } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter();
+const headImg = ref("");
+const active = ref(0);
+const imgList = ref([]);
+onMounted(() => {
+  headImg.value = userInfo.value.faceURL || defaultAvatar;
+  getImgList();
+});
+
+// 获取头像列表
+const getImgList = async () => {
+  imgList.value = [];
+  // 自定义头像
+  const customRes = await $api.avatar.avatarList({ avatar_type: 2, status: 0 });
+  if (customRes.code !== 0) return;
+  let customData = [
+    {
+      name: t("custom"),
+      isCustom: true,
+      contentList: customRes.data || []
+    }
+  ];
+  imgList.value = customData;
+
+  // 默认头像
+  const res = await $api.login.getAllImageByType({ type: 2 });
+
+  if (res.code != 0) return;
+  if (Array.isArray(res.data.list)) {
+    res.data.list.forEach((item, index) => {
+      item.contentList = item.content ? JSON.parse(item.content) : [];
+      item.isCustom = false;
+    });
+    imgList.value = [...imgList.value, ...res.data.list];
+  }
+};
+// 保存
+const onSubmit = async () => {
+  const otherParams = {
+    syncAvatarToGroup: false
+  }
+  
+  const { data } = await $api.contact.countJoinedGroups({ userId: userInfo.value.userID, excludeDismiss: true });
+  try {
+    if (data.count > 0) {
+      await showConfirmDialog({
+        title: t("dialog_tip1"),
+        message: t('sync_group_avatar'),
+        confirmButtonText: t('confirm'),
+        confirmButtonColor: "#5F97E3"
+      });
+      otherParams.syncAvatarToGroup = true
+    }
+  } catch(e) {
+    otherParams.syncAvatarToGroup = false
+  } finally {
+    console.log('isSync:: 是否同步', otherParams.syncAvatarToGroup)
+    const result = await $api.login.updateUserInfo({
+      avatar: headImg.value,
+      birthday: null,
+      birth: null,
+      gender: 0,
+      language: null,
+      mail: null,
+      nickname: null,
+      phone: null,
+      signature: null,
+      globalRecvMsgOpt: 0,
+      ...otherParams,
+    });
+    if (result.code != 0) return;
+    setUserInfo({ ...userInfo.value, ...{ faceURL: headImg.value } });
+    // router.push('/home/my/profile')
+    router.back();
+  }
+};
+
+const onEdit = url => {
+  headImg.value = url;
+};
+
+const handleDelete = async (item, idx) => {
+  // 这里文案要自己补充，目前的只是cv
+  await showConfirmDialog({
+    title: "",
+    message: t("deleteIcon"),
+    className: "custom-del",
+    confirmButtonText: t("delete"),
+    confirmButtonColor: "#FC5A50"
+  });
+  // 这里需要真正删需要调接口
+  const res = await $api.avatar.avatarDelete({ id: item.id });
+  if (res.code != 0) return;
+  showToast({ message: t("deleteSuccessfully") });
+  getImgList();
+};
+
+const handleAfterUpload = async url => {
+  console.log("handleAfterUploadurl:", url);
+  // 这里调接口，如审核之类的，然后展示弹窗
+  const res = await $api.avatar.avatarAdd({
+    avatar_type: 2,
+    url
+  });
+  if (res.code !== 0) return;
+  getImgList();
+  await showConfirmDialog({
+    title: "",
+    message: t("applyIconTip"),
+    className: "custom-del",
+    confirmButtonText: t("applyIconProgress"),
+    confirmButtonColor: "#0095F6"
+  });
+  onApplicationRecord();
+};
+
+const onCancel = () => {
+  // router.push('/home/my/profile')
+  router.back();
+};
+
+// 申请记录
+const onApplicationRecord = () => {
+  router.push("/home/my/profile/applicationRecord");
+};
+</script>
+
+<template>
+  <div ref="avatarSetRef" class="avatarSet">
+    <AppNavBar
+      :title="$t('changeAvatar')"
+      :right-text="$t('applyRecord')"
+      left-arrow
+      views_grade="thirdly_view"
+      @click-right="onApplicationRecord"
+      @click-left="router.back()"
+    ></AppNavBar>
+    <div class="avatarSet-wrap">
+      <div class="avatarSet-content">
+        <!-- 选择好的头像 -->
+        <div class="update-img">
+          <cdnSource v-if="headImg" :defaultUrl="headImg ? headImg : defaultAvatar">
+            <template #cdnSlot="{ cdnUrl }">
+              <van-image
+                fit="cover"
+                round
+                :src="cdnUrl"
+                width="168px"
+                height="168px"
+              />
+            </template>
+          </cdnSource>
+        </div>
+        <van-tabs v-model:active="active" swipeable class="img-box">
+          <van-tab
+            :title="item.name"
+            v-for="(item, index) in imgList"
+            :key="index"
+          >
+            <div class="box-item" v-if="!item.isCustom">
+              <van-image
+                v-for="img in item.contentList"
+                :key="img"
+                class="box-item-img"
+                :src="img.url"
+                round
+                :class="headImg === img.url ? 'active' : ''"
+                @click="onEdit(img.url)"
+                @error="e => handleImgCdnError(e, img, 'url')"
+              />
+            </div>
+            <customAvatar
+              v-if="item.isCustom"
+              v-model:activeImage="headImg"
+              :isCustom="item.isCustom"
+              :list="item.contentList"
+              @delete="handleDelete"
+              @afterUploaded="handleAfterUpload"
+            />
+          </van-tab>
+        </van-tabs>
+        <div class="flex-btn">
+          <van-button type="default" class="cancle-btn btn" @click="onCancel">{{
+            $t("cancel")
+          }}</van-button>
+          <van-button
+            type="default"
+            :disabled="!headImg"
+            class="btn btn1"
+            @click="onSubmit"
+            >{{ $t("save") }}</van-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 三级 -->
+  <RouterView />
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+
+.avatarSet-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .avatarSet-content {
+    padding: 10px 0;
+    height: 100%;
+    // position: relative;
+  }
+}
+
+.update-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+:deep(.van-tabs__line) {
+  max-width: 15px;
+  background-color: #0095f6;
+}
+
+:deep(.van-tab__panel) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  max-height: 280px;
+  height: 280px;
+  overflow-y: auto;
+}
+
+:deep(.van-tabs__wrap) {
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 5px;
+}
+.img-box {
+  // height: calc(100% - 360px);
+
+  /deep/.van-tabs__content--animated {
+    max-height: 240px;
+    overflow-y: auto;
+  }
+}
+.flex-btn {
+  // background: red;
+  // position: absolute;
+  // bottom: 100px;
+  display: flex;
+  align-items: center;
+  padding: 0 23px;
+  //margin-top: 80px;
+  margin-top: 20px;
+  margin-bottom: 50px;
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 1rem;
+    color: #49494e;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border-color: #d1d1d3;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  .btn {
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.05);
+    border: none;
+  }
+
+  .btn1 {
+    background-color: #1b1b22;
+    color: #fff;
+  }
+
+  .cancle-btn {
+    margin-right: 10px;
+  }
+}
+
+.box-item-img {
+  width: 60px;
+  height: 60px;
+  margin: 0 15px 30px 15px;
+}
+
+.box-item {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 68px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+}
+
+.active {
+  border: 2px solid #5f97e3;
+  box-sizing: border-box;
+  padding: 2px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 4px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: linear-gradient(
+    to bottom,
+    #b8b8b8 20%,
+    #b8b8b8 20% 50%,
+    rgba(0, 0, 0, 0) 40% 60%,
+    rgba(0, 0, 0, 0) 60% 80%,
+    rgba(0, 0, 0, 0) 80%
+  );
+  transition: color 0.2s ease;
+}
+
+:deep(.van-tab__text) {
+  font-size: 1rem;
+  color: #979797;
+}
+
+:deep(.van-tab--active .van-tab__text) {
+  color: black;
+}
+</style>
diff --git a/src/views/my/profile/sign.vue b/src/views/my/profile/sign.vue
new file mode 100644
index 0000000..9826aac
--- /dev/null
+++ b/src/views/my/profile/sign.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from 'pinia'
+const signSetRef = ref(null)
+useGrade(signSetRef, 3)
+const userStore = useUserStore();
+const { setUserInfo } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const inputVal = ref('')
+const detailObj = ref(userInfo.value)
+const handleSave = async () => {
+  const res = await $api.login.updateUserInfo({
+    "avatar": null,
+    "birthday": null,
+    "birth": null,
+    "gender": 0,
+    "language": null,
+    "mail": null,
+    "nickname": null,
+    "phone": null,
+    "signature": inputVal.value,
+    "globalRecvMsgOpt": 0
+  })
+  if (res.code != 0) return
+  const signature = inputVal.value
+  setUserInfo({ ...detailObj.value, ...{ signature: signature } })
+  router.push('/home/my/profile')
+}
+
+onMounted(() => {
+  inputVal.value = userInfo.value.signature
+})
+
+</script>
+
+<template>
+  <div ref="signSetRef" class="signSet">
+    <AppNavBar :title="$t('signature')" left-arrow views_grade="thirdly_view"
+      @click-left="router.push('/home/my/profile')">
+      <template #right>
+        <van-button @click="handleSave" class="special-btn" :disabled="!inputVal || inputVal.length < 6"
+          type="default">{{ $t('finish') }}</van-button>
+      </template>
+    </AppNavBar>
+    <div class="signSet-wrap">
+      <div class="signSet-content">
+        <van-field maxlength="50" v-model="inputVal" rows="2" autosize type="textarea" label=""
+          :placeholder="$t('personalized_signature')" clearable show-word-limit />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+
+:deep(.van-button--default) {
+  color: rgba(0, 149, 246, 1) !important;
+}
+
+.signSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .signSet-content {
+    margin: 8px 16px;
+
+    :deep(.van-cell) {
+      font-size: 1rem;
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-weight: 400;
+      padding: 12px 8px 12px 18px;
+      background: rgba(28, 5, 5, 0.03);
+      border-radius: 8px;
+
+      .van-field__word-limit {
+        margin-top: 48px;
+        text-align: left;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/profile/user.vue b/src/views/my/profile/user.vue
new file mode 100644
index 0000000..6848364
--- /dev/null
+++ b/src/views/my/profile/user.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar } from "@/components";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from "pinia";
+const usernameSetRef = ref(null);
+useGrade(usernameSetRef, 3);
+const userStore = useUserStore();
+const { setUserInfo, setAppConfig } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter();
+const inputVal = ref("");
+const detailObj = ref(userInfo.value);
+// const handleSave = async () => {
+//   const res = await $api.login.updateUserInfo({
+//     avatar: null,
+//     birthday: null,
+//     birth: null,
+//     gender: 0,
+//     language: null,
+//     mail: null,
+//     nickname: inputVal.value,
+//     phone: null,
+//     signature: null,
+//     globalRecvMsgOpt: 0
+//   });
+//   if (res.code != 0) return;
+//   const nickname = inputVal.value;
+//   setUserInfo({ ...detailObj.value, ...{ nickname: nickname } });
+//   router.push("/home/my/profile");
+// };
+const handleSave = async () => {
+  const res = await $api.login.updateNickname({
+    user_id: userInfo.value?.userID,
+    nickname: inputVal.value
+  });
+  if (res.code != 0) return;
+  const nickname = inputVal.value;
+  setUserInfo({ ...detailObj.value, ...{ nickname: nickname } });
+  router.push("/home/my/profile");
+};
+let appConfig = computed(() => {
+  return sessionStorage.getItem("appConfig")
+    ? JSON.parse(sessionStorage.getItem("appConfig"))
+    : {};
+});
+// let userInfo = computed(() => {
+//   return sessionStorage.getItem("userInfo")
+//     ? JSON.parse(sessionStorage.getItem("userInfo"))
+//     : {};
+// });
+onMounted(() => {
+  inputVal.value = userInfo.value.nickname;
+});
+</script>
+
+<template>
+  <div ref="usernameSetRef" class="usernameSet">
+    <AppNavBar
+      :title="$t('nicknames')"
+      left-arrow
+      views_grade="thirdly_view"
+      @click-left="router.push('/home/my/profile')"
+    >
+      <template #right>
+        <van-button
+          @click="handleSave"
+          class="special-btn"
+          :disabled="!inputVal || inputVal.length < 6"
+          type="default"
+          >{{ $t("save") }}</van-button
+        >
+      </template>
+    </AppNavBar>
+    <div class="usernameSet-wrap">
+      <div class="usernameSet-content">
+        <van-field
+          maxlength="15"
+          minLength="4"
+          v-model="inputVal"
+          label=""
+          :placeholder="$t('please_enter_user_nickname')"
+          clearable
+        />
+        <div class="titles" v-if="!appConfig?.modify_nickName_limit?.is_limit">
+          {{ $t("set_characters") }}
+        </div>
+        <div class="titles" v-if="appConfig?.modify_nickName_limit?.is_limit">
+          {{ $t("set_characters") }},{{
+            $t("setNickNameTimes", {
+              day: appConfig?.modify_nickName_limit?.day
+            })
+          }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.special-btn {
+  background: transparent;
+  border: none;
+}
+:deep(.van-button--default) {
+  color: rgba(0, 149, 246, 1) !important;
+}
+.usernameSet-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .usernameSet-content {
+    padding: 8px 16px 0 16px;
+    :deep(.van-cell) {
+      padding: 19px 0;
+      height: 60px;
+      border-bottom: 1px solid #f2f4f5;
+      font-size: 1rem;
+      color: #1b1b22;
+    }
+    .titles {
+      color: #76767a;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding: 12px 0;
+      height: 44px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/qrcode/index.vue b/src/views/my/qrcode/index.vue
new file mode 100644
index 0000000..c567deb
--- /dev/null
+++ b/src/views/my/qrcode/index.vue
@@ -0,0 +1,443 @@
+<script setup>
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import { AppNavBar, CodeInput } from '@/components/index'
+import { useGrade } from '@/utils/levelConfig'
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router'
+import scans from '@/assets/dialog/scans.svg'
+import share from '@/assets/dialog/share.svg'
+import download from '@/assets/dialog/download.svg'
+import { useUserStore } from "@/stores/user";
+import { formatTimestamp, copyUserId, showPhone } from '@/utils/tools'
+import defaultAvatar from "@/assets/mine-avatar.png"
+import QRCodeVue3 from 'qrcode-vue3'
+import html2canvas from 'html2canvas';
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import LogoImg from '@/assets/logo1.png'
+
+const { t } = useI18n()
+const myQrcodeRef = ref(null)
+useGrade(myQrcodeRef, 2)
+const userStore = useUserStore();
+const { userInfo, appConfig } = storeToRefs(userStore)
+const $api = inject("$api");
+const router = useRouter()
+const qrcodeImgRef = ref(null)
+const qrcodeContentsRef = ref(null)
+const detailObj = reactive({
+  faceUrl: '',
+  userId: '',
+  expireTime: '',
+  availableCount: '',
+  uniqueId: ''
+})
+
+const handleBack = () => {
+  router.push('/home/my')
+}
+// const { isAddFriendByQRCode } = appConfig.value.user_permission
+const arr = computed(() => {
+  const { isAddFriendByQRCode } = (appConfig.value || {}).user_permission || {}
+  console.log('dialogList', isAddFriendByQRCode);
+  return [{
+    id: 1,
+    name: t('scan'),
+    url: scans,
+    isShow: isAddFriendByQRCode,
+  },
+  {
+    id: 3,
+    name: t('savePhoto'),
+    url: download,
+    isShow: true,
+  }]
+})
+const dialogList = computed(() => {
+  if (showPhone.value) {
+    return arr.value.filter(item => item.isShow != false)
+  } else {
+    arr.value.splice(0, 1)
+    return arr.value.filter(item => item.isShow != false)
+  }
+})
+// 生成新的二维码
+const getNewQrcode = async () => {
+  const res = await $api.contact.addQrCode()
+  if (res.code != 0) {
+    if (res.code === 1003) {
+      showToast(t('error_1003'))
+    }
+    return
+  }
+  const { uniqueId, userId, expireTime, availableCount } = res.data
+  detailObj.userId = userId
+  detailObj.availableCount = availableCount
+  detailObj.expireTime = expireTime
+  detailObj.uniqueId = uniqueId
+  if (detailObj.uniqueId) {
+    qrCodeText.value = `com.neway.im/addFriend/add?qrUniqueId=${res.data.uniqueId}`
+  }
+}
+
+const qrCodeText = ref('')
+
+
+const imgUrl = ref('')
+onMounted(() => {
+  getCodeData()
+})
+
+// 远程图片地址
+const useUrlToBase64 = (imgUrl) => {
+  const image = new Image()
+  image.crossOrigin = 'Anonymous'
+  image.src = `${imgUrl.value}&datenow=${Date.now()}`
+  image.onload = () => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+
+    canvas.height = image.naturalHeight
+    canvas.width = image.naturalWidth
+    ctx.drawImage(image, 0, 0)
+
+    imgUrl.value = canvas.toDataURL('image/jpeg')
+  }
+}
+
+
+const handleClick = (id) => {
+  if (id === 1) {
+    router.push({
+      path: '/home/contact/scan',
+      query: {
+        label: 'scan'
+      }
+    })
+  } else if (id === 3) {
+    // 保存图片
+    if (qrcodeContentsRef.value) {
+      const element = qrcodeContentsRef.value
+      html2canvas(element).then((canvas) => {
+        // 将 canvas 转换为图片
+        const dataURL = canvas.toDataURL('image/png');
+        // 创建一个 <a> 元素
+        const link = document.createElement('a');
+        link.href = dataURL;
+        // 设置下载文件名
+        link.download = 'qrcode.png';
+        // 触发点击事件以下载图片
+        link.click();
+        link.remove()
+      });
+    }
+  } else if (id === 2) {
+    sharePicture();
+  }
+}
+//调用手机自带分享页面
+const sharePicture = () => {
+  if (qrcodeContentsRef.value) {
+    // const element = qrcodeContentsRef.value
+    // html2canvas(element).then((canvas) => {
+    //   // 将 canvas 转换为图片
+    //   const dataURL = canvas.toDataURL('image/png');
+    //   // 创建一个 <a> 元素
+    //   const link = document.createElement('a');
+    //   link.href = dataURL;
+    //   // 设置下载文件名
+    //   link.download = 'qrcode.png';
+    //   const nativeShare = new NativeShare()
+    //   const shareData = {
+    //     title: 'qrcode.png',
+    //     desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
+    //     // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
+    //     link: 'https://github.com/fa-ge/NativeShare',
+    //     icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
+    //     // 不要过于依赖以下两个回调，很多浏览器是不支持的
+    //     success: function () {
+    //     },
+    //     fail: function () {
+    //     }
+    //   }
+    //   nativeShare.setShareData(shareData)
+    //   nativeShare.call()
+    // });
+  }
+}
+const handleRefresh = () => {
+  getNewQrcode()
+  if (detailObj.uniqueId) {
+    qrCodeText.value = `com.neway.im/addFriend/add?qrUniqueId=${detailObj.uniqueId}`
+  }
+}
+
+ watch(() => appConfig.value.user_permission, (val) => {
+  getCodeData()
+ })
+
+ const getCodeData = async () => {
+  const res = await $api.contact.getLastestQrCode()
+  if (res.code != 0) {
+    return
+  }
+  const { uniqueId, userId, expireTime, availableCount } = res.data
+  detailObj.userId = userId
+  detailObj.availableCount = availableCount
+  detailObj.expireTime = expireTime
+  detailObj.uniqueId = uniqueId
+  if (!detailObj.uniqueId) {
+    await getNewQrcode()
+  }
+  // await nextTick();
+  if (detailObj.uniqueId) {
+    qrCodeText.value = `com.neway.im/addFriend/add?qrUniqueId=${detailObj.uniqueId}`
+  }
+  imgUrl.value = userInfo.value.faceURL ? userInfo.value.faceURL : defaultAvatar
+  useUrlToBase64(imgUrl)
+}
+</script>
+
+<template>
+  <div ref="myQrcodeRef" class="qrcode">
+    <AppNavBar :forceShowArrow="true" :title="$t('myQr')" views_grade="secondary_view" @click-left="handleBack"></AppNavBar>
+    <div class="qrcode-wrap">
+      <div class="qrcode-content">
+        <div class="qrcode-contents" ref="qrcodeContentsRef">
+          <div class="top">
+            <div class="top-left">
+              <cdnSource :defaultUrl="imgUrl">
+                <template #cdnSlot="{ cdnUrl }">
+                  <van-image round width="60" height="60" :src="cdnUrl" />
+                </template>
+              </cdnSource>
+            </div>
+            <div class="top-right">
+              <div class="title">{{ userInfo.nickname }}</div>
+              <div class="user-id">
+                <div class="id">{{ $t('userId') }}{{ userInfo.isInternalUser ? userInfo.internal_uid : detailObj.userId
+                  }}</div>
+                <div class="copy"
+                  @click="copyUserId(userInfo.isInternalUser ? userInfo.internal_uid : detailObj.userId)">
+                  <img src="@/assets/copy1.svg" alt="">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div ref="qrcodeImgRef" class="qrcode-img">
+            <QRCodeVue3 v-if="qrCodeText" :width="300" :height="300" :value="qrCodeText" :key="qrCodeText" :margin="0"
+              :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
+              :imageOptions="{ hideBackgroundDots: true, imageSize: 0.2, margin: 0 }" :dotsOptions="{
+      type: 'dots',
+      color: '#6898E6'
+    }" :backgroundOptions="{ color: '#fff' }" :cornersSquareOptions="{ type: 'dot', color: '#6898E6' }"
+              :cornersDotOptions="{ type: 'dot', color: '#6898E6' }" myclass="my-qur" imgclass="img-qr"
+              :image="LogoImg" />
+          </div>
+          <p class="scan-tips">{{ `${$t('scan')}，${$t('addMeToFriend')}!` }}</p>
+          <div class="tips-wrap">
+            <div class="tips"> {{ $t('qrUseCount', { count: detailObj.availableCount }) }}</div>
+            <div class="tips tips1">{{ $t('validTime') + (detailObj.expireTime ? formatTimestamp(detailObj.expireTime,
+      '/') : '')
+              }}</div>
+          </div>
+        </div>
+        <div class="btn-wrap" @click="handleRefresh">
+          <img class="icons" src="@/assets/dialog/recycle.svg" alt="">
+          <div class="btn">{{ $t('clickRefresh') }}</div>
+        </div>
+        <div class="share-wrap">
+          <div class="share-item" v-for="item in dialogList" :key="item.id" @click="handleClick(item.id)">
+            <img :src="item.url" alt="">
+            <p>{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.qrcode-wrap {
+  background: #FFF;
+  height: 100%;
+  padding: 56px 0 110px 0;
+  overflow-y: auto;
+
+  .qrcode-content {
+    padding-top: 67px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .qrcode-contents {
+    .top {
+      display: flex;
+      height: 60px;
+
+      &-left {
+        margin-right: 16px;
+      }
+
+      &-right {
+        padding: 2px 0;
+
+        .title {
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 1rem;
+          font-weight: 400;
+          margin-bottom: 4px;
+          padding-top: 5px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-width: 215px;
+        }
+
+        .user-id {
+          display: flex;
+
+          .id {
+            color: #76767A;
+            font-family: PingFang SC;
+            font-size: 0.75rem;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+
+    .qrcode-img {
+      position: relative;
+      overflow: hidden;
+      margin: 24px 0;
+      width: 300px;
+      height: 300px;
+      background: rgba(27, 27, 34, 0.03);
+      border-radius: 16px;
+
+      .qr-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .scan-tips {
+      color: #76767A;
+      font-size: 1rem;
+      margin-bottom: 28px;
+      text-align: center;
+    }
+
+    // .middle {
+    //   height: 48px;
+    //   display: flex;
+    //   justify-content: space-between;
+    //   margin-bottom: 26px;
+
+    //   &-left {
+    //     color: #76767A;
+    //     font-family: PingFang SC;
+    //     font-size: 0.75rem;
+    //     font-weight: 400;
+    //     padding-top: 14px;
+    //   }
+
+    //   &-right {
+    //     // width: 48px;
+    //     // height: 48px;
+    //     // padding: 7.125px;
+    //     // border-radius: 9.6px;
+    //     // border: 0.5px solid rgba(0, 0, 0, 0.10);
+    //     // background: #FFF;
+
+    //     .img {
+    //       width: 48px;
+    //       height: 48px;
+    //     }
+    //   }
+    // }
+
+    .tips-wrap {
+      margin-bottom: 16px;
+
+      .tips {
+        color: #A4A4A7;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .btn-wrap {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 28px;
+
+    .icons {
+      padding: 0.5px 0;
+      width: 16px;
+      height: 16px;
+    }
+
+    .btn {
+      margin-left: 4px;
+      color: #0095F6;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+  }
+
+  .share-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .share-item {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      height: 80px;
+      padding: 12px;
+      margin-right: 24px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      img {
+        width: 24px;
+        height: 24px;
+        margin-bottom: 12px;
+      }
+
+      p {
+        color: #11121D;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .copy {
+    margin-left: 4px;
+    cursor: pointer;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/bindEmail.vue b/src/views/my/security/bindEmail.vue
new file mode 100644
index 0000000..37c65c6
--- /dev/null
+++ b/src/views/my/security/bindEmail.vue
@@ -0,0 +1,214 @@
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { isValidEmail } from '@/utils/tools'
+import { useUserStore } from "@/stores/user";
+import { showToast } from 'vant'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import use from "@/use";
+
+const { t } = useI18n()
+const bindEmailRef = ref(null)
+useGrade(bindEmailRef, 3)
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const emailVal = ref('')
+const codeVal = ref('')
+const time = ref(0)
+const timer = ref(null)
+const flag = ref(0)
+const textVal = ref(t('getVerifyCode'))
+const { useEmailLang } = use;
+const handleSubmit = async () => {
+  if (route.query.label) {
+    const params = {
+      'new_email_code': codeVal.value,
+      'old_email_code': route.query.label,
+      'email': emailVal.value,
+      "platform": 5,
+    }
+    const res = await $api.login.changeEmail(params)
+    if (res.code != 0) return
+    showToast({ position: 'top', message: t('binding_successful') })
+    router.push('/home/my/security/email')
+  } else {
+    const params = {
+      'code': codeVal.value,
+      'email': emailVal.value,
+      "platform": 5,
+    }
+    const res = await $api.login.bindEmail(params)
+    if (res.code != 0) return
+    showToast({ position: 'top', message: t('binding_successful') })
+    if (route.query.setPassword) {
+      router.push({
+        path: "/home/my/security/setPassword",
+      });
+    } else {
+      router.push('/home/my/security')
+    }
+  }
+
+}
+
+const btnDisabled = ref(false)
+const handleGetCode = async () => {
+  if(btnDisabled.value || time.value > 0) return
+  btnDisabled.value = true
+  if (!isValidEmail(emailVal.value)) {
+    showToast({ position: 'top', message: t('correct_email_address') })
+    return
+  }
+  const language = useEmailLang()
+  const params = {
+    "area_code": '',
+    // "device_id": useUid(),
+    "email": emailVal.value,
+    "phone": '',
+    "platform": 5,
+    "username": userInfo.value.username,
+    "verify_by": 2,
+    "verify_type": 5,
+    language
+  }
+  try{
+  const res = await $api.login.sendCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('sentSuccessfully') })
+  time.value = 60
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1
+      flag.value = 1
+      textVal.value = `${t('Resend')} ${time.value}s`
+    } else {
+      time.value = 0
+      flag.value = 2
+      textVal.value = t('reget')
+      clearInterval(timer.value)
+    }
+  }, 1000)
+  }catch{}finally{
+    btnDisabled.value = false
+  }
+}
+onBeforeUnmount(() => {
+  timer.value = null
+  clearInterval(timer.value)
+})
+const handleLeft = () => {
+  if (route.query.labels === 'dialogue') {
+    router.push('/home/dialogue')
+  } else if (route.query.labels === 'main') {
+    router.back()
+  } else if (route.query.label) {
+    router.push('/home/my/security/email/emailNext')
+  } else {
+    router.push('/home/my/security')
+  }
+}
+</script>
+
+<template>
+  <div ref="bindEmailRef" class="bindEmail">
+    <AppNavBar :title="route.query.label ? $t('bind_new_email') : $t('bind_email')" left-arrow views_grade="thirdly_view"
+      @click-left="handleLeft">
+    </AppNavBar>
+    <div class="bindEmail-wrap">
+      <div class="bindEmail-content">
+        <div class="phone-txt">{{ route.query.label ? $t('bind_new_email') : $t('bindEmailTipTitle') }}</div>
+        <van-field v-model="emailVal" clearable label="" :placeholder="$t('please_input_email')" />
+        <div class="phone-txt">{{ $t('verificationCode') }}</div>
+        <van-field class="sms-input" v-model="codeVal" clearable label="" maxlength="6" :placeholder="$t('verification_code1')">
+          <template #button>
+            <van-button :disabled="!emailVal || flag === 1" @click="handleGetCode" class="send-btn" type="default"
+              :class="{ 'active-txt': flag === 1 }">{{ textVal }}</van-button>
+          </template>
+        </van-field>
+      </div>
+      <div class="delete-btn" @click="handleSubmit" :class="{ 'disable-btn': !(codeVal && emailVal) }">
+        <div class="btn">{{ $t('confirm') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.bindEmail-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .bindEmail-content {
+    margin-top: 8px;
+
+    .phone-txt {
+      padding: 20px 16px 4px 16px;
+      height: 44px;
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    :deep(.van-cell) {
+      padding: 23px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      margin: 0 20px 24px 20px;
+      border-bottom: 1px solid #ebedf0;
+    }
+  }
+
+  .send-btn {
+    background: #F6F6F6;
+    height: 36px;
+    border-radius: 23px;
+    border: none;
+    padding: 8px 12px;
+    color: #0095F6;
+  }
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1B1B22;
+    margin: 0 20px;
+
+    .btn {
+      color: #FFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #F6F6F6;
+
+    .btn {
+      color: #D1D1D3;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/bindPhone.vue b/src/views/my/security/bindPhone.vue
new file mode 100644
index 0000000..906a0d3
--- /dev/null
+++ b/src/views/my/security/bindPhone.vue
@@ -0,0 +1,358 @@
+<script setup>
+import { ref, watch,onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import IconTriangle from '@/components/icons/IconTriangle.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { showToast } from 'vant'
+import { useI18n } from "vue-i18n"
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+const contactStore = useContactStore();
+const { groupId } = storeToRefs(contactStore);
+const { t } = useI18n()
+import use from "@/use";
+const { useUid } = use;
+const userStore = useUserStore();
+// const { userInfo, areaDictList } = storeToRefs(userStore);
+const { userInfo } = storeToRefs(userStore);
+const {setUserInfo } = userStore;
+const bindPhoneRef = ref(null)
+useGrade(bindPhoneRef, 3)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const phoneVal = ref('')
+const codeVal = ref('')
+const showPicker = ref(false)
+const searchVal = ref('')
+const dataList = ref([])
+const areaInputCode = ref('+86')
+const time = ref(0)
+const timer = ref(null)
+const flag = ref(0)
+const areaDictList = ref([])
+const textVal = ref(t('getVerifyCode'))
+const handleSubmit = async () => {
+  if (route.query.label) {
+    const params = {
+      'area_code': areaInputCode.value,
+      'code': codeVal.value,
+      'phone': phoneVal.value,
+      "platform": 5,
+    }
+    const res = await $api.login.changePhone(params)
+    if (res.code != 0) return
+    showToast({ position: 'top', message: t('bindPhoneSuccess') })
+    router.push('/home/my/security/phone')
+  } else {
+    const params = {
+      'area_code': areaInputCode.value,
+      'code': codeVal.value,
+      'phone': phoneVal.value,
+      "platform": 5,
+    }
+    const res = await $api.login.bindPhone(params)
+    if (res.code != 0) return
+    showToast({ position: 'top', message: t('bindPhoneSuccess') })
+    if (route.query.setPassword) {
+      router.push({
+        path: "/home/my/security/setPassword",
+      });
+    } else {
+      // router.push('/home/my/security')
+      //如果绑定成功需要将电话号码赋值
+      userInfo.value.phone = phoneVal.value
+      setUserInfo(userInfo.value);
+      router.back()
+      
+      
+    }
+  }
+}
+const btnDisabled = ref(false)
+const handleGetCode = async () => {
+  if (!phoneVal.value) {
+    return
+  }
+  if(btnDisabled.value || time.value > 0) return
+  btnDisabled.value = true
+  const params = {
+    "area_code": areaInputCode.value,
+    // "device_id": useUid(),
+    "email": "",
+    "phone": phoneVal.value,
+    "platform": 5,
+    "username": userInfo.value.username,
+    "verify_by": 1,
+    "verify_type": 5
+  }
+  try{
+  const res = await $api.login.sendCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('sentSuccessfully') })
+  time.value = 60
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1
+      flag.value = 1
+      textVal.value = `${t('Resend')} ${time.value}s`
+    } else {
+      time.value = 0
+      flag.value = 2
+      textVal.value = t('reget')
+      clearInterval(timer.value)
+    }
+  }, 1000)
+  }catch{}finally{
+    btnDisabled.value = false
+  }
+}
+const handleSearch = async () => {
+  const res = await $api.login.searchAreaList({ keyword: searchVal.value })
+  if (res.code != 0) return
+  dataList.value = res.data.areas
+}
+watch(() => searchVal.value, () => {
+  if (searchVal.value === '') {
+    dataList.value = areaDictList.value
+  }
+})
+onMounted(async () => {
+  const res = await $api.login.getAreaList();
+  if (res.code != 0) return;
+  const { areas } = res.data;
+  areaDictList.value = areas
+  dataList.value = areaDictList.value
+})
+watch(() => showPicker.value, () => {
+  if (!showPicker.value) {
+    searchVal.value = ''
+  }
+})
+const handleClickItem = ({ areaCode }) => {
+  areaInputCode.value = areaCode
+  showPicker.value = false
+  searchVal.value = ''
+}
+const handleLeft = () => {
+  if (route.query.label) {
+    router.push('/home/my/security/phone/phoneNext')
+  } else if (route.query.labels === 'main') {
+    router.back()
+  }  else if (route.query.labels === 'dialogue') {
+    router.push(`/home/dialogue/groupChat/${groupId}`)
+  } else {
+    router.push('/home/my/security')
+  }
+}
+</script>
+
+<template>
+  <div ref="bindPhoneRef" class="bindPhone">
+    <AppNavBar :title="$t('bindPhone')" left-arrow views_grade="thirdly_view" @click-left="handleLeft">
+    </AppNavBar>
+    <div class="bindPhone-wrap">
+      <div class="bindPhone-content">
+        <div class="phone-txt">{{ route.query.label ? $t('newPhoneNumber') : $t('phoneNumber') }}</div>
+        <div class="wp-input-prepend">
+          <div class="prepend" @click="showPicker = true"><span class="prepend-value">{{ areaInputCode }}</span>
+            <IconTriangle />
+          </div>
+          <div class="line"></div>
+          <van-field type="tel" maxlength="15" v-model="phoneVal" clearable label="" :placeholder="$t('inputNumber')" />
+        </div>
+        <div class="phone-txt">{{ $t('verificationCode') }}</div>
+        <van-field class="sms-input" v-model="codeVal" maxlength="6" center clearable label="" :placeholder="$t('verification_code1')">
+          <template #button>
+            <van-button :disabled="!phoneVal || flag === 1" @click="handleGetCode" :class="{ 'active-txt': flag === 1 }"
+              class="send-btn" type="default">{{ textVal }}</van-button>
+          </template>
+        </van-field>
+      </div>
+      <div class="delete-btn" @click="handleSubmit" :class="{ 'disable-btn': !(codeVal && phoneVal) }">
+        <div class="btn">{{ $t('confirm') }}</div>
+      </div>
+    </div>
+    <van-popup overlay-class="special-popup" round v-model:show="showPicker" position="bottom" :style="{ height: '80%' }">
+      <div class="header-wrap">
+        <van-search class="search-input" v-model="searchVal" @update:model-value="handleSearch" @search="handleSearch"
+          :placeholder="$t('search')" />
+      </div>
+      <div class="content-wrap">
+        <div @click="handleClickItem(item)" :class="{ 'active-item': item.areaCode === areaInputCode }"
+          class="content-wrap-item" v-for="item in dataList" :key="item.id">
+          <div class="item-txt">{{ `${item.name}(${item.nameEn})` }}</div>
+          <div class="item-txt">{{ item.areaCode }}</div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.bindPhone-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .bindPhone-content {
+    margin-top: 8px;
+
+    .wp-input-prepend {
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px;
+
+      :deep(.van-cell) {
+        padding: 20px 20px 20px 0 !important;
+      }
+
+      .line {
+        width: 1px;
+        height: 14px;
+        background: #131415;
+        opacity: 0.1;
+        margin-right: 12px;
+      }
+
+      .prepend {
+        display: flex;
+        align-items: center;
+        font-size: 1.125rem;
+        cursor: pointer;
+
+        .prepend-value {
+          color: #1B1B22;
+          font-family: PingFang SC;
+          font-size: 0.875rem;
+          font-weight: 500;
+        }
+
+        svg {
+          width: 14px;
+          height: 14px;
+          margin: 0 8px 0 2px;
+        }
+      }
+    }
+
+    .phone-txt {
+      padding: 20px 16px 4px 16px;
+      height: 44px;
+      color: #1B1B22;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    :deep(.van-cell) {
+      padding: 20px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px 24px 20px;
+    }
+  }
+
+  .send-btn {
+    background: #F6F6F6;
+    border-radius: 23px;
+    padding: 8px 12px;
+    color: #0095F6;
+    height: 36px;
+    border: none;
+  }
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1B1B22;
+    margin: 0 20px;
+
+    .btn {
+      color: #FFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #F6F6F6;
+
+    .btn {
+      color: #D1D1D3;
+    }
+  }
+}
+
+:deep(.van-popup) {
+  .header-wrap {
+    position: fixed;
+    width: 100%;
+  }
+
+  .search-input {
+    width: 100%;
+
+    :deep(.van-cell) {
+      height: 36px !important;
+    }
+  }
+
+  .content-wrap {
+    padding-top: 54px;
+  }
+
+  .content-wrap-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 54px;
+    padding: 16px;
+    cursor: pointer;
+
+    .item-txt {
+      color: #1D2129;
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+  }
+
+  .active-item {
+    .item-txt {
+      color: #0095F6;
+    }
+  }
+}
+
+@media screen and (min-width: 750px) {
+  :deep(.van-popup) {
+    width: 70%;
+    left: 15%;
+    height: 50% !important;
+    .header-wrap {
+      width: 70%;
+    }
+  }
+  
+}
+</style>
diff --git a/src/views/my/security/component/payDialog.vue b/src/views/my/security/component/payDialog.vue
new file mode 100644
index 0000000..3b94b30
--- /dev/null
+++ b/src/views/my/security/component/payDialog.vue
@@ -0,0 +1,30 @@
+<template>
+  <van-dialog v-model:show="visible" :showConfirmButton="false">
+    <slot></slot>
+  </van-dialog>
+</template>
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  remark: {
+    type: String,
+    default: ''
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+</script>
+<style lang="less" scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/my/security/component/stepThree.vue b/src/views/my/security/component/stepThree.vue
new file mode 100644
index 0000000..4fa4560
--- /dev/null
+++ b/src/views/my/security/component/stepThree.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="third-step">
+    <div class="content-wrap">
+      <div class="content-title">{{ $t("Confirm_Payment_Password") }}</div>
+      <div class="content">{{ $t("Please_confirm_payment_password") }}</div>
+    </div>
+    <CodeInput
+      :inputType="'password'"
+      :len="6"
+      class="pay-input"
+      @change="handleCodeChange"
+    ></CodeInput>
+  </div>
+</template>
+<script setup>
+import { CodeInput } from "@/components/index.js";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const emits = defineEmits(["getThreeStep"]);
+const handleCodeChange = val => {
+  if (val.length === 6) {
+    emits("getThreeStep", val);
+  }
+};
+</script>
+<style lang="less" scoped>
+.third-step {
+  .content-wrap {
+    height: 90px;
+    padding: 18.5px 16px;
+    display: flex;
+    flex-direction: column;
+
+    .content-title {
+      color: rgba(27, 27, 34, 1);
+      font-weight: 500;
+      font-size: 1.25rem;
+      margin-bottom: 8px;
+    }
+
+    .content {
+      color: rgba(0, 0, 0, 0.4);
+      font-size: 0.75rem;
+    }
+  }
+
+  .pay-input {
+    height: 90px;
+    padding: 21px 24px;
+
+    :deep(.validate_label) {
+      justify-content: space-around;
+      width: 100%;
+
+      .validate_item {
+        width: 45px;
+        height: 48px;
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/component/stepTwo.vue b/src/views/my/security/component/stepTwo.vue
new file mode 100644
index 0000000..329961e
--- /dev/null
+++ b/src/views/my/security/component/stepTwo.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="second-step">
+    <div class="content-wrap">
+      <div class="content-title">{{ $t("set_payment_password") }}</div>
+      <div class="content">{{ $t("unset_payment_password") }}</div>
+    </div>
+    <CodeInput
+      :inputType="'password'"
+      :len="6"
+      class="pay-input"
+      @change="handleCodeChange"
+    ></CodeInput>
+  </div>
+</template>
+<script setup>
+import { CodeInput } from "@/components/index.js";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const emits = defineEmits(["getTwoStep"]);
+const handleCodeChange = val => {
+  if (val.length === 6) {
+    emits("getTwoStep", val);
+  }
+};
+</script>
+<style lang="less" scoped>
+.second-step {
+  .content-wrap {
+    height: 90px;
+    padding: 18.5px 16px;
+    display: flex;
+    flex-direction: column;
+
+    .content-title {
+      color: rgba(27, 27, 34, 1);
+      font-weight: 500;
+      font-size: 1.25rem;
+      margin-bottom: 8px;
+    }
+
+    .content {
+      color: rgba(0, 0, 0, 0.4);
+      font-size: 0.75rem;
+    }
+  }
+
+  .pay-input {
+    height: 90px;
+    padding: 21px 24px;
+    :deep(.validate_label) {
+      justify-content: space-around;
+      width: 100%;
+
+      .validate_item {
+        width: 45px;
+        height: 48px;
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/component/unBindDialog.vue b/src/views/my/security/component/unBindDialog.vue
new file mode 100644
index 0000000..91cf190
--- /dev/null
+++ b/src/views/my/security/component/unBindDialog.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="dialog-wrap">
+    <van-dialog className="special-dialog" v-model:show="visible" :title="''">
+      <template #default>
+        <div class="dialog-title">{{ $t("dialog_tip1") }}</div>
+        <div class="dialog-content">{{ `${$t("unBindToastPart1")}Google${$t("unBindToastPart2")}`}}</div>
+      </template>
+      <template #footer>
+        <div class="dialog-btn">
+          <van-button 
+            class="btn" 
+            type="default" 
+            @click="handleCancel"
+          >{{ t("cancel") }}</van-button>
+          <div class="line"></div>
+          <van-button
+            class="btn btn1"
+            type="default"
+            @click="handleSubmit"
+          >{{ t("removeBinding") }}</van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from "vue-i18n";
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:modelValue', 'getList'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const handleCancel = () => {
+  emit('update:modelValue', false)
+}
+const handleSubmit = () => {
+  emit('getList')
+}
+</script>
+
+<style scoped lang="less">
+.dialog-wrap {
+  .dialog-title {
+    height: 64px;
+    padding: 24px 24px 20px 24px;
+    text-align: center;
+    color: rgba(27, 27, 34, 1);
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .dialog-content {
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-weight: 400;
+    padding: 0 24px;
+    color: rgba(27, 27, 34, 0.6);
+    margin-bottom: 24px;
+  }
+  :deep(.van-dialog) {
+    .van-dialog__header {
+      color: #1B1B22;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 600;
+      padding-top: 0;
+      margin-bottom: 18px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 0;
+      .content {
+        margin-bottom: 76px;
+        height: 64px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .btn1 {
+      color: rgba(252, 90, 80, 1) !important;
+    }
+
+    .diable-btn {
+      opacity: 0.4 !important;
+    }
+  }
+
+  :deep(.van-cell) {
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: rgba(28, 5, 5, 0.03);
+    padding: 13.5px 12px 4px;
+
+    .van-field__control {
+      height: 21px;
+      color: #1B1B22;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+
+  :deep(.van-field__word-limit) {
+    color: #1B1B2266;
+    font-size: 0.75rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/my/security/device.vue b/src/views/my/security/device.vue
new file mode 100644
index 0000000..a2fe9c2
--- /dev/null
+++ b/src/views/my/security/device.vue
@@ -0,0 +1,235 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar, DeleteDialog, ApplyDialog } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import rightArrow from '@/assets/dialog/right-arrow.svg'
+import { getDate } from '@/utils/tools'
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+const { setDeviceConfig } = useUserStore();
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 3)
+const $api = inject("$api");
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const deviceList = ref([])
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+const pageNum = ref(1);
+const pageSize = ref(100);
+const getList = async () => {
+  const res = await $api.login.getDeviceList({
+    page_num: pageNum.value,
+    page_size: pageSize.value
+  });
+  const visitorId = window.localStorage.getItem('visitorId')
+  const deviceArr = res.data.map((item) => {
+    const simpleDevice = item.device_model.match(/\((.*?)\)/g)
+    return {
+      ...item,
+      simple_divice: simpleDevice && simpleDevice.length ? simpleDevice[0].split(';')[0].slice(1) : item.device_model,
+      secret_device_id: `${item.device_id.slice(0, 2)}${''.padStart(item.device_id.length - 6, '*')}${item.device_id.slice(-4)}`,
+      isActive: visitorId === item.device_id
+    }
+  })
+  if (refreshing.value === true) {
+    refreshing.value = false;
+    deviceList.value = [];
+    deviceList.value = deviceArr;
+    loading.value = false;
+  } else {
+    if (deviceArr.length <= pageNum.value * pageSize.value) {
+      finished.value = true;
+      deviceList.value = deviceArr
+
+      console.log('deviceList.value::', deviceList.value)
+      return
+    }
+    // 
+    deviceList.value = [...deviceList.value, ...deviceArr];
+    if (deviceArr.length === 0) {
+      finished.value = true;
+    }
+    loading.value = false;
+  }
+}
+onMounted(() => {
+  getList();
+});
+
+const loadMore = () => {
+  pageNum.value++;
+  getList();
+  // console.log("上拉", pageNum.value);
+}
+
+const onRefresh = () => {
+  refreshing.value = true;
+  finished.value = false;
+  pageNum.value = 1;
+  getList();
+}
+const handleClickItem = ({ device_id, device_model, simple_divice, secret_device_id, isActive }) => {
+  setDeviceConfig({
+    detailId: device_id,
+    detailName: device_model,
+    simple_divice, secret_device_id,
+    isActive
+  })
+  router.push(`/home/my/security/device/detailId`)
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="deviceSet">
+    <div style="flex: 1;position: relative;height: 100%;">
+      <AppNavBar :title="$t('trusted_device')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/security')">
+      </AppNavBar>
+      <div class="deviceSet-wrap">
+        <div class="deviceSet-content">
+          <div class="deviceSet-content-top">
+            <div class="title">{{ $t('text_device') }}</div>
+            <div class="records">{{ $t('text_device1') }}</div>
+          </div>
+          <div class="device-list">
+            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+              <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
+                <div @click="handleClickItem(item)" class="device-item" v-for="item in deviceList" :key="item"
+                  :title="item.device_id">
+                  <div class="device-top">
+                    <div class="device-left">
+                      <div class="device-name">{{ item.device_model }}</div>
+                    </div>
+                    <img :src="rightArrow" alt="">
+                  </div>
+                  <div class="device-bottom">
+                    验证时间：{{ getDate(item.last_login_time) }}
+                  </div>
+                </div>
+              </van-list> -->
+              <div class="device-item" @click="handleClickItem(item)" v-for="item in deviceList" :key="item.device_id"
+                :title="item.id">
+                <div class="device-top">
+                  <div class="device-left">
+                    <div class="device-name">{{ item.simple_divice }}
+                      <span v-if="item.isActive" class="is-active">当前设备</span>
+                    </div>
+                    <!-- <div class="device-safe">安全设备</div> -->
+                  </div>
+                  <img :src="rightArrow" alt="">
+                </div>
+                <div class="device-bottom">
+                  {{ $t('设备ID：') + item.secret_device_id }}
+                </div>
+              </div>
+            </van-pull-refresh>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 四级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.deviceSet {
+  &-wrap {
+    background: #FFF;
+    height: 100%;
+    padding-top: 56px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-content {
+    padding: 16px 0 0 0;
+    height: 100%;
+
+    &-top {
+      padding: 0 16px;
+
+      .title {
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 1.375rem;
+        font-weight: 500;
+        margin: 4px 0;
+      }
+
+      .records {
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+        margin-bottom: 20px;
+      }
+    }
+
+    .device-list {
+      overflow-y: auto;
+      height: calc(100% - 120px);
+    }
+
+
+    .device-item {
+      background: #FFF;
+      padding: 13px 16px 12px 16px;
+      cursor: pointer;
+      border-bottom: 1px solid #F2F4F5;
+
+      .device-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 5px;
+
+        .device-left {
+          display: flex;
+          align-items: center;
+
+          .device-name {
+            margin-right: 6px;
+            color: #1B1B22;
+            font-family: "PingFang SC";
+            font-size: 0.875rem;
+            font-weight: 400;
+
+            .is-active {
+              padding: 4px 8px;
+              color: #fff;
+              background: #1b1b1b;
+              border-radius: 16px;
+              line-height: 18px;
+              font-size: 0.75rem;
+            }
+          }
+
+          .device-safe {
+            width: 52px;
+            height: 18px;
+            line-height: 18px;
+            border-radius: 11px;
+            background: #1B1B22;
+            color: #FFF;
+            font-family: "PingFang SC";
+            font-size: 0.625rem;
+            font-weight: 400;
+            text-align: center;
+          }
+        }
+      }
+
+      .device-bottom {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/deviceDetail.vue b/src/views/my/security/deviceDetail.vue
new file mode 100644
index 0000000..fc6d05f
--- /dev/null
+++ b/src/views/my/security/deviceDetail.vue
@@ -0,0 +1,265 @@
+<script setup>
+import { AppNavBar, TipDialog } from '@/components'
+import { useRouter, useRoute } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import { computed, ref, watch, reactive, onMounted } from "vue";
+import { getDate, getDates } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+
+const resultRef = ref()
+useGrade(resultRef, 4)
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore();
+const { deviceConfig } = storeToRefs(userStore);
+const { t } = useI18n()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const showTips = ref(false)
+const pageNum = ref(1);
+const pageSize = ref(20);
+const deviceList = ref([])
+const loading = ref(false);
+const finished = ref(false);
+const refreshing = ref(false);
+const visible = ref(false)
+const loadMore = () => {
+  pageNum.value++;
+  getList();
+  // console.log("上拉", pageNum.value);
+}
+const getList = async () => {
+  const res = await $api.login.deviceDetail({
+    page_num: pageNum.value,
+    page_size: pageSize.value,
+    device_id: deviceConfig.value.detailId,
+    platform: 5
+  });
+  if (refreshing.value === true) {
+    refreshing.value = false;
+    deviceList.value = [];
+    deviceList.value = res.data && res.data.list;
+    loading.value = false;
+  } else {
+    console.log(11111)
+    deviceList.value = [...deviceList.value, ...(res.data.list ? res.data.list : [])];
+    if (Array.isArray(res.data.list)) {
+      if (res.data.list.length < pageSize.value * 1) {
+        finished.value = true;
+      }
+    } else {
+      finished.value = true;
+    }
+    loading.value = false;
+  }
+}
+const handleLeft = () => {
+  router.push('/home/my/security/device')
+}
+const onRefresh = () => {
+  refreshing.value = true;
+  finished.value = false;
+  pageNum.value = 1;
+  getList();
+}
+onMounted(() => {
+  getList();
+})
+watch(()=>deviceConfig.value,(newVal,oldVal)=>{
+  pageNum.value = 1;
+  deviceList.value = [];
+  getList()
+})
+const handleDelete = async () => {
+  // 
+  visible.value = true
+}
+const handleConfirm = async () => {
+  const res = await $api.login.deleteDevice({ device_id: deviceConfig.value.detailId })
+  if (res.code != 0) return
+  visible.value = false
+  router.push('/home/my/security/device')
+}
+</script>
+
+<template>
+  <div ref="resultRef">
+    <div class="result_container">
+      <AppNavBar :title="$t('login_details')" left-arrow views_grade="fourth_view" @click-left="handleLeft"></AppNavBar>
+      <div class="detail-content">
+        <div class="detail-top">
+          <div class="device-wrap">
+            <div class="name">{{ deviceConfig.simple_divice }}</div>
+            <div class="safe"></div>
+          </div>
+          <div class="device-tips">{{ $t('current_device_records') }}</div>
+        </div>
+        <div class="device-list">
+          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+            <van-list :immediate-check="false" v-model:loading="loading" :finished="finished" finished-text="" @load="loadMore">
+              <div class="device-bottom" v-for="item in deviceList" :key="item.device_id">
+                <!-- <div class="platform">{{ 'APP' + $t('login') }}</div> -->
+                <div class="device-time">{{ $t('verification_time') +  getDates(item.login_time) }}</div>
+                <div class="device-ip">{{ $t('login_IP') +  item.login_ip }}</div>
+              </div>
+            </van-list>
+          </van-pull-refresh>
+        </div>
+        <div class="btn-wrap" v-if="!deviceConfig.isActive">
+          <van-button @click="handleDelete" class="special-btn" type="default">{{ $t('remove_device') }}</van-button>
+        </div>
+      </div>
+      <van-dialog className="custom-dialog" v-model:show="visible" :title="$t('remove_this_device')">
+        <template #default>
+          <div class="content">
+            {{ $t('remove_this_device1') }}
+          </div>
+        </template>
+        <template #footer>
+          <div class="dialog-btn">
+            <van-button class="btn" type="default" @click="visible = false">{{ $t('cancel') }}</van-button>
+            <div class="line"></div>
+            <van-button class="btn btn1" type="default" @click="handleConfirm">{{ $t('confirm') }}</van-button>
+          </div>
+        </template>
+      </van-dialog>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.result_container {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  padding-top: 56px;
+
+  .detail-content {
+    padding-top: 16px;
+    height: 100%;
+
+    .detail-top {
+      padding: 4px 16px;
+
+      .device-wrap {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+
+        .name {
+          color: #1B1B22;
+          font-family: "PingFang SC";
+          font-size: 1.125rem;
+          font-weight: 500;
+        }
+      }
+
+      .device-tips {
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+      }
+    }
+
+    .device-list {
+      overflow-y: auto;
+      height: calc(100% - 210px);
+      margin: 20px 0;
+    }
+
+    .device-bottom {
+      padding: 12px 16px;
+      border-bottom: 1px solid #F2F4F5;
+
+      .platform {
+        margin-bottom: 10px;
+      }
+
+      .device-time {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+        margin-bottom: 5px;
+      }
+
+      .device-ip {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+    }
+
+    .btn-wrap {
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+
+      .special-btn {
+        width: 100%;
+        height: 52px;
+        line-height: 52px;
+        border-radius: 14px;
+        background: #1B1B22;
+        color: #FFF;
+        font-family: "PingFang SC";
+        font-size: 1rem;
+        font-weight: 500;
+      }
+    }
+
+  }
+
+  :deep(.van-dialog) {
+    .van-dialog__header {
+      padding-top: 24px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 19px 16px 22px 16px;
+
+      .content {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+        text-align: left;
+        line-height: 21px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .btn1 {
+      color: #0095F6 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/email.vue b/src/views/my/security/email.vue
new file mode 100644
index 0000000..49dcb9c
--- /dev/null
+++ b/src/views/my/security/email.vue
@@ -0,0 +1,123 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import defaultEmail from '@/assets/bind-email.png'
+import { hideEmailNumber } from '@/utils/tools'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from "@/stores/user";
+import { storeToRefs } from 'pinia'
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const emailSetRef = ref(null)
+useGrade(emailSetRef, 3)
+const $api = inject("$api");
+const { t } = useI18n()
+const router = useRouter()
+const handleEmail = async () => {
+  // 4是绑定，5是换绑
+  // const params = {
+  //   "area_code": "",
+  //   // "device_id": useUid(),
+  //   "email": userInfo.email,
+  //   "phone": "",
+  //   "platform": 4,
+  //   "username": userInfo.username,
+  //   "verify_by": 2,
+  //   "verify_type": 4
+  // }
+  // const res = await $api.login.sendCode(params)
+  // if (res.code != 0) return
+  router.push({
+    path: '/home/my/security/email/emailNext'
+  })
+}
+</script>
+
+<template>
+  <div ref="emailSetRef" class="emailSet">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar :title="$t('bind_email')" left-arrow views_grade="thirdly_view"
+        @click-left="router.push('/home/my/security')">
+      </AppNavBar>
+      <div class="emailSet-wrap">
+        <div class="emailSet-content">
+          <div class="emailSet-img">
+            <img :src="defaultEmail" alt="">
+          </div>
+          <div class="emailSet-txt">{{ $t('currently_bound_email') +  hideEmailNumber(userInfo.email) }}</div>
+          <div class="emailSet-tips">{{ $t('text_email') }}</div>
+          <div class="delete-btn" @click="handleEmail">
+            <div class="btn">{{ $t('change_the_binding') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 四级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.emailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .emailSet-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 20px 30px 20px;
+
+    .emailSet-img {
+      margin: 50px 0 30px 0;
+
+      img {
+        width: 120px;
+        height: 120px;
+      }
+    }
+
+    .emailSet-txt {
+      margin-bottom: 8px;
+      color: #1B1B22;
+      text-align: center;
+      font-family: "PingFang SC";
+      font-size: 1rem;
+      font-weight: 500;
+    }
+
+    .emailSet-tips {
+      color: #A4A4A7;
+      text-align: center;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 400;
+      margin-bottom: 270px;
+    }
+
+  }
+
+  .delete-btn {
+    width: 100%;
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px 0;
+    border-radius: 14px;
+    background: #1B1B22;
+    .btn {
+      color: #FFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+}</style>
diff --git a/src/views/my/security/emailNext.vue b/src/views/my/security/emailNext.vue
new file mode 100644
index 0000000..7e8c027
--- /dev/null
+++ b/src/views/my/security/emailNext.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import IconTriangle from '@/components/icons/IconTriangle.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { hidePhoneNumber } from '@/utils/tools'
+import { showToast } from 'vant'
+import use from "@/use";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+
+const emailNextRef = ref(null)
+useGrade(emailNextRef, 4)
+const { t } = useI18n()
+const { useUid, useEmailLang } = use;
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const phoneVal = ref('')
+const codeVal = ref('')
+const time = ref(0)
+const timer = ref(null)
+const flag = ref(0)
+const textVal = ref(t('getVerifyCode'))
+const handleNext = async () => {
+  const params = {
+    "area_code": "",
+    // "device_id": useUid(),
+    "email": userInfo.value.email,
+    "verify_code": codeVal.value,
+    "platform": 5,
+    "phone": "",
+    "verify_by": 2,
+  }
+  const res = await $api.login.verifyCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('verificationSuccessful') })
+  router.push({
+    path: '/home/my/security/bindEmail',
+    query: {
+      label: codeVal.value
+    }
+  })
+}
+
+const isSend = ref(false)
+const handleGetCode = async () => {
+  if(isSend.value) return
+  isSend.value = true
+  time.value = 60
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1
+      flag.value = 1
+      textVal.value = `${t('Resend')} ${time.value}s`
+    } else {
+      time.value = 0
+      flag.value = 2
+      textVal.value = t('reget')
+      clearInterval(timer.value)
+      isSend.value = false
+    }
+  }, 1000)
+  // 5是绑定，4是换绑
+  const language = useEmailLang()
+  const params = {
+    "area_code": "",
+    // "device_id": useUid(),
+    "email": userInfo.value.email,
+    "phone": "",
+    "platform": 5,
+    "username": userInfo.value.username,
+    "verify_by": 2,
+    "verify_type": 4,
+    language
+  }
+  const res = await $api.login.sendCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('sentSuccessfully') })
+}
+onMounted(() => {
+  handleGetCode()
+})
+</script>
+
+<template>
+  <div ref="emailNextRef" class="emailNext">
+    <AppNavBar :title="$t('bind_email')" left-arrow views_grade="fourth_view" @click-left="router.push('/home/my/security')">
+    </AppNavBar>
+    <div class="emailNext-wrap">
+      <div class="emailNext-content">
+        <div class="email-top">
+          <div class="email-txt">{{ $t('email_verification_code') }}</div>
+          <div class="email-tips">{{ $t('codeSendTo') + hidePhoneNumber(userInfo.email) }}</div>
+        </div>
+        <div class="email-txts">{{ $t('verificationCode') }}</div>
+        <van-field class="sms-input" v-model="codeVal" maxlength="6" center clearable label="" :placeholder="$t('verification_code1')">
+          <template #button>
+            <van-button :disabled="flag === 1" @click="handleGetCode" :class="{ 'active-txt': flag === 1 }"
+              class="send-btn" type="default">{{ textVal }}</van-button>
+          </template>
+        </van-field>
+      </div>
+      <div class="delete-btn" @click="handleNext" :class="{ 'disable-btn': !codeVal }">
+        <div class="btn">{{ $t('nextStep') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.emailNext-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .emailNext-content {
+    margin-top: 8px;
+
+    .email-top {
+      padding: 15px 16px;
+      .email-tips {
+        color: rgba(0, 0, 0, 0.40);
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+
+      .email-txt {
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+      }
+    }
+    .email-txts {
+      height: 44px;
+      padding: 20px 16px 4px 16px;
+      color: #1B1B22;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 500;
+    } 
+
+    :deep(.van-cell) {
+      padding: 20px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px 24px 20px;
+    }
+  }
+
+  .send-btn {
+    background: #F6F6F6;
+    border-radius: 23px;
+    padding: 8px 12px;
+    color: #0095F6;
+    height: 36px;
+    border: none;
+  }
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1B1B22;
+    margin: 0 20px;
+
+    .btn {
+      color: #FFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #F6F6F6;
+
+    .btn {
+      color: #D1D1D3;
+    }
+  }
+}
+:deep(.van-field__button) {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/views/my/security/index.vue b/src/views/my/security/index.vue
new file mode 100644
index 0000000..557a32b
--- /dev/null
+++ b/src/views/my/security/index.vue
@@ -0,0 +1,698 @@
+<script setup>
+import { ref, onMounted, reactive, provide } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { AppNavBar } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import {
+  copyUserId,
+  hidePhoneNumber,
+  hideEmailNumber,
+  removeAllLocalstorage
+} from "@/utils/tools";
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { getSDK } from "@/utils/openIM";
+import { useI18n } from "vue-i18n";
+import { showToast } from "vant";
+import { storeToRefs } from "pinia";
+import bindactionSheet from "@/components/bindactionSheet/index.vue";
+import PayDialog from "./component/payDialog.vue";
+import UnBindDialog from "./component/unBindDialog.vue";
+import useConversationStore from "@/stores/modules/conversation";
+const conversationStore = useConversationStore();
+const { t } = useI18n();
+const OpenIM = getSDK();
+import use from "@/use";
+const $api = inject("$api");
+const userStore = useUserStore();
+const { setToken, setUserInfo } = userStore;
+const contactStore = useContactStore();
+const { clearStore } = contactStore;
+const { userInfo } = storeToRefs(userStore);
+const actionsButton = ref([
+  { type: "phone", name: t("bindPhone"), color: "#0095F6" },
+  { type: "email", name: t("bind_email"), color: "#0095F6" },
+  { type: "logout", name: t("confirmExit"), color: "#FC5A50" }
+]);
+const { useUid, useSystem } = use;
+const router = useRouter();
+const route = useRoute();
+const securityRef = ref(null);
+useGrade(securityRef, 2);
+const visible = ref(false);
+const actionShow = ref(false);
+const showPayDialog = ref(false);
+const showUnBindDialog = ref(false);
+const setPasswordTip = ref(false)
+const handleClick = async type => {
+  if (type === "phone") {
+    if (userInfo.value.phone) {
+      router.push(`/home/my/security/phone`);
+    } else {
+      router.push(`/home/my/security/bindPhone`);
+    }
+  } else if (type === "email") {
+    if (userInfo.value.email) {
+      router.push(`/home/my/security/email`);
+    } else {
+      router.push(`/home/my/security/bindEmail`);
+    }
+  } else if (type === "google") {
+    showUnBindDialog.value = true;
+  } else if (type === "facebook") {
+  } else if (type === "pay") {
+    if (!userInfo.value.phone && !userInfo.value.email) {
+      setPasswordTip.value = true;
+      showPayDialog.value = true;
+      return;
+    }
+    if (userInfo.value.phone) {
+      if (!userInfo.value.has_property_pwd) {
+        router.push(`/home/my/security/phoneVerify`);
+        return;
+      } else {
+        // 跳转已设置的页面
+        router.push(`/home/my/security/modify`);
+      }
+    }
+    if (userInfo.value.email) {
+      if (!userInfo.value.phone && !userInfo.value.has_property_pwd) {
+        router.push(`/home/my/security/emailVerify`);
+        return;
+      } else {
+        // 跳转已设置的页面
+        router.push(`/home/my/security/modify`);
+      }
+    }
+  } else if (type === 'password') {
+    // 判断是否有设置密码
+    if (userInfo.value.has_pwd) {
+      router.push(`/home/my/security/password`);
+    } else {
+      if (!userInfo.value.phone && !userInfo.value.email) {
+        setPasswordTip.value = true;
+        showPayDialog.value = true;
+        return;
+      }
+      router.push(`/home/my/security/setPassword`);
+    }
+  } else {
+    router.push(`/home/my/security/${type}`);
+  }
+};
+const handleUnbind = async () => {
+  showUnBindDialog.value = false;
+  if (!userInfo.value.phone && !userInfo.value.email) {
+    showPayDialog.value = true;
+    return;
+  }
+  if (userInfo.value.google) {
+    // 那解绑
+    const params = {
+      unbind_type: 1
+    };
+    const res = await $api.user.sdkUnBind(params);
+    if (res.code != 0) return;
+    showToast({ position: "top", message: t("unbindingSuccess") });
+    const userRes = await $api.login.userInfo();
+    if (userRes.code !== 0) return;
+    setUserInfo(userRes.data);
+    showUnBindDialog.value = false;
+  }
+}
+const googleBindFn = async response => {
+  const params = {
+    provider: "google",
+    access_token: response.access_token,
+    platform: 5,
+    device_id: useUid(),
+    device_model: navigator.userAgent,
+    user_id: localStorage.getItem("user_id")
+  };
+  const res = await $api.user.sdkBind(params);
+  if (res.code !== 0) return;
+  showToast({ position: "top", message: t("binding_successful") });
+  const userRes = await $api.login.userInfo();
+  if (userRes.code !== 0) return;
+  setUserInfo(userRes.data);
+};
+
+const handleLogOut = () => {
+  if (!userInfo.value.phone && !userInfo.value.email) {
+    actionShow.value = true;
+  } else {
+    visible.value = true;
+  }
+};
+const handleConfirm = async () => {
+  try {
+    const res = await $api.login.logout({
+      device_id: useUid(),
+      platform: useSystem()
+    });
+    setToken("");
+    setUserInfo({});
+    removeAllLocalstorage();
+    OpenIM.logout().then(res=>{
+      console.log(res,'sdk退出登录')
+      clearStore();
+      conversationStore.clearConversationStore();
+      localStorage.removeItem("im_token");
+      localStorage.removeItem("token");
+      localStorage.removeItem("user_id");
+      // fix 修复退出登录 本地数据没有清空再次登录缓存问题
+      sessionStorage.clear();
+      router.push("/firstScreen");
+    })
+  } catch (error) {
+    console.error('error',error);
+    OpenIM.logout().then(res=>{
+      console.log(res,'sdk退出登录')
+      clearStore();
+      conversationStore.clearConversationStore();
+      localStorage.removeItem("im_token");
+      localStorage.removeItem("token");
+      localStorage.removeItem("user_id");
+      // fix 修复退出登录 本地数据没有清空再次登录缓存问题
+      sessionStorage.clear();
+      router.push("/firstScreen");
+    })
+  }
+};
+provide("refreshLogOut", handleConfirm);
+
+const handleClickItem = type => {
+  if (type === "phone") {
+    if (!userInfo.value.has_pwd) {
+      router.push({
+        path: "/home/my/security/bindPhone",
+        query: {
+          setPassword: true
+        }
+      });
+    } else if (userInfo.value.google) {
+      router.push({
+        path: "/home/my/security/bindPhone",
+        query: {
+          setPasswords: true
+        }
+      });
+    } else {
+      router.push("/home/my/security/bindPhone");
+    }
+    showPayDialog.value = false;
+  } else if (type === "email") {
+    if (!userInfo.value.has_pwd) {
+      router.push({
+        path: "/home/my/security/bindEmail",
+        query: {
+          setPassword: true
+        }
+      });
+    } else if (userInfo.value.google) {
+      router.push({
+        path: "/home/my/security/bindEmail",
+        query: {
+          setPasswords: true
+        }
+      });
+    } else {
+      router.push("/home/my/security/bindEmail");
+    }
+    showPayDialog.value = false;
+  } else {
+    showPayDialog.value = false;
+  }
+};
+const handleBack = () => {
+  if (route.query.labels) {
+    router.go(-1);
+  } else {
+    router.push("/home/my");
+  }
+};
+
+</script>
+
+<template>
+  <div ref="securityRef" class="security">
+    <AppNavBar
+      :title="$t('safety')"
+      views_grade="secondary_view"
+      @click-left="handleBack"
+    />
+    <div class="security-wrap">
+      <div class="common-title">{{ $t("accountSettings") }}</div>
+      <van-cell-group :border="true">
+        <van-cell
+          :title="$t('init_hint_3')"
+          is-link
+          :border="true"
+          @click="handleClick('password')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("init_hint_3") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{
+                userInfo.has_pwd
+                  ? $t("to_modify")
+                  : $t("go_to_settings")
+              }}</div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+        <van-cell
+          :title="$t('pay_password')"
+          is-link
+          :border="true"
+          @click="handleClick('pay')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("pay_password") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">
+              {{
+                userInfo.has_property_pwd
+                  ? $t("to_modify")
+                  : $t("go_to_settings")
+              }}
+            </div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+        <van-cell
+          :title="$t('phoneNumber')"
+          :border="true"
+          @click="handleClick('phone')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("phoneNumber") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">
+              {{
+                userInfo.phone
+                  ? hidePhoneNumber(userInfo.phone)
+                  : $t("go_to_binding")
+              }}
+            </div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+        <van-cell
+          :title="$t('email')"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('email')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("email") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">
+              {{
+                userInfo.email
+                  ? hideEmailNumber(userInfo.email)
+                  : $t("go_to_binding")
+              }}
+            </div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <div class="common-title">{{ $t("thirdPartyAccountBinding") }}</div>
+      <van-cell-group :border="true">
+        <van-cell
+          v-if="!userInfo.google"
+          :title="$t('bindGoogle')"
+          is-link
+          to=""
+          :border="true"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("bindGoogle") }}</span>
+          </template>
+          <template #right-icon>
+            <GoogleLogin :callback="googleBindFn" popup-type="TOKEN">
+              {{ $t("go_to_binding") }}
+            </GoogleLogin>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+        <van-cell
+          v-if="userInfo.google"
+          :title="$t('bindGoogle')"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('google')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("bindGoogle") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">
+              {{ $t("unbind") }}
+            </div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+
+        <!-- <van-cell :title="$t('bindFacebook')" is-link to="" :border="true" @click="handleClick('facebook')">
+          <template #title>
+            <span class="custom-title">{{ $t('bindFacebook') }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content">{{ userInfo.facebook ? userInfo.facebook : $t('go_to_binding') }}</div>
+            <img class="notice-value-link" src="@/assets/right-small2.svg" alt="">
+          </template>
+        </van-cell> -->
+      </van-cell-group>
+      <div class="common-title">{{ $t("otherSettings") }}</div>
+      <van-cell-group :border="true">
+        <van-cell
+          :title="$t('closeAccount')"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('logoutAccount')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("closeAccount") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content"></div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+        <van-cell
+          :title="$t('trusted_device')"
+          is-link
+          to=""
+          :border="true"
+          @click="handleClick('device')"
+        >
+          <template #title>
+            <span class="custom-title">{{ $t("trusted_device") }}</span>
+          </template>
+          <template #right-icon>
+            <div class="content"></div>
+            <img
+              class="notice-value-link"
+              src="@/assets/right-small2.svg"
+              alt=""
+            />
+          </template>
+        </van-cell>
+      </van-cell-group>
+      <div class="logout-btn">
+        <van-button class="btn" type="default" @click="handleLogOut">{{
+          $t("logout")
+        }}</van-button>
+      </div>
+      <van-dialog className="custom-dialog" v-model:show="visible" title="">
+        <template #default>
+          <div class="content">
+            {{ $t("logoutHint") }}
+          </div>
+        </template>
+        <template #footer>
+          <div class="dialog-btn">
+            <van-button class="btn" type="default" @click="visible = false">{{
+              $t("cancel")
+            }}</van-button>
+            <div class="line"></div>
+            <van-button
+              class="btn btn1"
+              type="default"
+              @click="handleConfirm"
+              >{{ $t("confirm") }}</van-button
+            >
+          </div>
+        </template>
+      </van-dialog>
+    </div>
+    <bindactionSheet
+      :show="actionShow"
+      :actions="actionsButton"
+      @logout="handleConfirm"
+      @close="actionShow = false"
+    >
+    </bindactionSheet>
+    <PayDialog class="special-dialog" v-model="showPayDialog">
+      <div class="dialog-title">{{ $t("dialog_tip1") }}</div>
+      <div v-if="!setPasswordTip" class="dialog-content">{{ $t("bindingPhoneOrEmail") }}</div>
+      <div v-if="setPasswordTip" class="dialog-content">{{ $t("bindingPhoneOrEmailSetPassword") }}</div>
+      <div class="bind-text" @click="handleClickItem('phone')">
+        {{ $t("bindPhone") }}
+      </div>
+      <div class="bind-text" @click="handleClickItem('email')">
+        {{ $t("bind_email") }}
+      </div>
+      <div class="bind-cancel" @click="handleClickItem('cancel')">
+        {{ $t("cancel") }}
+      </div>
+    </PayDialog>
+    <UnBindDialog class="special-dialog" v-model="showUnBindDialog" @getList="handleUnbind"></UnBindDialog>
+    <!-- 三级 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.security-wrap {
+  background: #fff;
+  height: 100vh;
+  padding: 54px 0 150px;
+  position: relative;
+  overflow-y: auto;
+
+  .common-title {
+    height: 40px;
+    padding: 16px 16px 4px 16px;
+    color: rgba(27, 27, 34, 0.6);
+    font-size: 0.875rem;
+  }
+
+  /deep/.van-cell {
+    padding: 0;
+    height: 60px;
+    line-height: 60px;
+
+    .van-cell__title {
+      img {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+
+      .custom-title {
+        padding-left: 16px;
+        color: #1b1b22;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 400;
+        display: inline-block;
+      }
+    }
+
+    .notice-value-link {
+      margin-top: 22px;
+      height: 16px;
+      margin-right: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .notice-value-links {
+      margin-top: 18px;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    .content {
+      margin-right: 8px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+      cursor: pointer;
+    }
+
+    .contents {
+      padding-right: 16px;
+      color: #76767a;
+      text-align: right;
+      font-family: PingFang SC;
+      font-size: 0.875rem;
+      font-weight: 400;
+    }
+  }
+
+  .logout-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 16px;
+    width: 100%;
+    padding: 0 20px;
+
+    :deep(.van-button) {
+      width: 100%;
+      height: 52px;
+      line-height: 52px;
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #49494e;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border-color: #d1d1d3;
+
+      &::before {
+        height: 52px;
+      }
+    }
+  }
+
+  :deep(.van-dialog) {
+    padding: 35px 0 0 0;
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #f2f4f5;
+      padding: 0;
+
+      .content {
+        color: #76767a;
+        text-align: center;
+        font-family: PingFang SC;
+        font-size: 0.875rem;
+        font-weight: 400;
+        margin-bottom: 35px;
+        height: 20px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1b1b22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #fff !important;
+      border-color: #fff !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #f5f8ff;
+    }
+
+    .btn1 {
+      color: #0095f6 !important;
+    }
+  }
+}
+
+.special-dialog {
+  .dialog-title {
+    height: 64px;
+    padding: 24px 24px 16px 24px;
+    text-align: center;
+    color: rgba(27, 27, 34, 1);
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .dialog-content {
+    font-family: PingFang SC;
+    font-size: 0.875rem;
+    font-weight: 400;
+    padding: 0 24px;
+    color: rgba(27, 27, 34, 0.6);
+    margin-bottom: 24px;
+  }
+
+  .bind-text {
+    height: 56px;
+    padding: 16px 24px;
+    color: rgba(95, 151, 227, 1);
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-align: center;
+    border-top: 1px solid rgba(229, 229, 229, 1);
+  }
+
+  .bind-cancel {
+    height: 56px;
+    padding: 16px 24px;
+    color: rgba(27, 27, 34, 0.6);
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: 1px;
+    text-align: center;
+    border-top: 1px solid rgba(229, 229, 229, 1);
+  }
+}
+
+// @media screen and (min-width:750px) {
+//   :deep(.van-popup--bottom) {
+//     left: 375px !important;
+//     width: calc(100% - 375px) !important;
+//   }
+// }
+.cell-title {
+  color: #1b1b2299;
+  font-size: 0.875rem;
+  padding: 24px 16px 4px;
+  border-bottom: 1px solid #0000000d;
+}
+</style>
diff --git a/src/views/my/security/logout/logoutAccount.vue b/src/views/my/security/logout/logoutAccount.vue
new file mode 100644
index 0000000..9a12f56
--- /dev/null
+++ b/src/views/my/security/logout/logoutAccount.vue
@@ -0,0 +1,213 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar, DeleteDialog, ApplyDialog } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import rightArrow from '@/assets/dialog/right-arrow.svg'
+import { getDate } from '@/utils/tools'
+import { useUserStore } from "@/stores/user";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import { isMobile } from '@/utils/common'
+const logoutAccountRef = ref(null)
+useGrade(logoutAccountRef, 3)
+const $api = inject("$api");
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+
+const dailogVisible = ref(false)
+
+const onLogout = () => {
+  dailogVisible.value = true
+}
+
+const loading = ref(false)
+const onConfirm = async () => {
+  loading.value = true
+  if(userInfo.value.phone !== '' || userInfo.value.email !== '') {
+    router.push(`/home/my/security/logoutAccount/secureVerify`)
+    return
+  }
+  // router.push(`/home/my/security/logoutAccount/secureVerify`)
+    const res = await $api.login.applicationApply()
+    loading.value = false
+    if(res.code !== 0) return
+    router.push(`/home/my/security/logoutAccount/submitSuccess?duration=${res.data.duration}&token=${res.data.token}`)
+    dailogVisible.value = false
+}
+</script>
+
+<template>
+  <div ref="logoutAccountRef" class="logout-account">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar :title="$t('closeAccount')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/security')">
+      </AppNavBar>
+      <div class="logout-account-wrap">
+        <div class="logout-account-content" >
+           <div class="warn" :class="{'warn-pcStyle':!isMobile()}">
+              <img src="@/assets/svg/warn.svg" alt="">
+              <div class="msg">
+                <p v-html="$t('distroyTips')"></p>
+              </div>
+           </div>
+           <div class="detail">
+            <div class="derail-item">
+              <div class="title">{{ $t('safeStatus') }}</div>
+              <div class="tips">{{ $t('safeTips') }}</div>
+            </div>
+            <div class="derail-item">
+              <div class="title">{{ $t('strikeBalance') }}</div>
+              <div class="tips">{{ $t('strikeTips') }}</div>
+            </div>
+            <div class="derail-item">
+              <div class="title">{{ $t('dataDelete') }}</div>
+              <div class="tips">{{ $t('deleteTips') }}</div>
+            </div>
+           </div>
+        </div>
+        <div class="logout-account-btn" :class="{'logout-account-btn-pcStyle':!isMobile()}" >
+          <van-button class="btn" type="default" @click="onLogout">{{ $t('applyDistroy') }}</van-button>
+        </div>
+        <van-dialog className="custom-dialog" v-model:show="dailogVisible" :title="$t('distroyConform')">
+        <template #default>
+          <div class="content">{{ $t('distroyConformTips') }}</div>
+        </template>
+        <template #footer>
+          <div class="dialog-btn">
+            <van-button class="btn" type="default" @click="dailogVisible = false">{{ $t('cancel') }}</van-button>
+            <div class="line"></div>
+            <van-button :loading="loading" class="btn confirm-btn" type="default" @click="onConfirm">{{ $t('distroy') }}</van-button>
+          </div>
+        </template>
+      </van-dialog>
+      </div>
+    </div>
+    <!-- 三级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.logout-account {
+  &-wrap {
+    background: #FFF;
+    height: 100%;
+    padding-top: 78px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-content {
+    height: 100%;
+    .warn {
+      text-align: center;
+      margin-bottom: 60px;
+      .msg {
+        margin-top: 20px;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #1B1B22;
+      }
+    }
+    .warn.warn-pcStyle{
+      margin-bottom: 40px;
+    }
+    .detail {
+      padding: 16px;
+      .derail-item {
+        margin-bottom: 24px;
+        .title {
+          font-size: 0.875rem;
+          color: #1B1B22;
+          font-weight: 600;
+          margin-bottom: 16px;
+        }
+        .tips {
+          font-size: 0.75rem;
+          color: #1B1B2266;
+        }
+      }
+    }
+  }
+  .logout-account-btn {
+    position: absolute;
+    bottom: 96px;
+    left: 0;
+    width: 100%;
+    padding: 0 20px;
+
+    :deep(.van-button) {
+      width: 100%;
+      height: 48px;
+      line-height: 48px;
+    
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #49494E;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border-color: #D1D1D3;
+
+      &::before {
+        height: 48px;
+        height: 48px;
+      }
+    }
+  }
+  .logout-account-btn.logout-account-btn-pcStyle{
+    position: sticky;
+    bottom: 30px;
+  }
+  :deep(.van-dialog) {
+    .van-dialog__header {
+      padding-top: 24px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 19px 16px 22px 16px;
+
+      .content {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+        text-align: center;
+        line-height: 21px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .confirm-btn {
+      color: #FC5A50 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/logout/restoreAccount.vue b/src/views/my/security/logout/restoreAccount.vue
new file mode 100644
index 0000000..c40cc61
--- /dev/null
+++ b/src/views/my/security/logout/restoreAccount.vue
@@ -0,0 +1,285 @@
+<script setup>
+import { AppNavBar, TipDialog } from '@/components'
+import { useRouter, useRoute } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import { computed, ref, watch, reactive, onMounted } from "vue";
+import { getDate, removeAllLocalstorage } from '@/utils/tools'
+import { getSDK } from '@/utils/openIM'
+import { useI18n } from "vue-i18n"
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { showToast,showDialog } from 'vant'
+import use from "@/use";
+import { encrypt } from "@/utils/index.js"
+
+const userStore = useUserStore();
+const { setToken, setUserInfo } = userStore;
+const contactStore = useContactStore()
+const { clearStore } = contactStore;
+
+const restoreAccountRef = ref()
+// useGrade(restoreAccountRef, 1)
+
+const { t } = useI18n()
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const { useUid } = use;
+
+const dailogVisible = ref(false)
+// 恢复账户
+const onRestore = async () => {
+  dailogVisible.value = true
+}
+
+const loading = ref(false)
+// 撤销申请-确认
+const onConfirm = async () => {
+  loading.value = true
+  try{
+  const res = await $api.login.applicationCancel({token: dataObj.value.token});
+  if(res.code !== 0) return
+  
+  showToast({ message: t('recoverSuccessLoginAgain') })
+  // let data = {
+  //   device_id: loginUserInfo.value.device_id,
+  //   device_model: loginUserInfo.value.device_model,
+  //   platform: loginUserInfo.value.platform, // 1ios 2安卓 3pc 4h5
+  //   login_type: loginUserInfo.value.login_type, // 登录类型 1用户名 2手机号码 3邮箱
+  //   username: loginUserInfo.value.username || undefined ,
+  //   password: loginUserInfo.value.password ? encrypt(loginUserInfo.value.password) : undefined,
+  //   area_code: loginUserInfo.value.area_code || undefined,
+  //   phone: loginUserInfo.value.phone || undefined,
+  //   email: loginUserInfo.value.email || undefined
+  // }
+
+  // login(data)
+  removeAllLocalstorage();
+  clearStore();
+  router.push('/firstScreen');
+  }catch{}finally{
+    loading.value = false
+    dailogVisible.value = false
+  }
+}
+
+const login = async (formDataClone) => {
+    const loginRes = await $api.login.login(formDataClone);
+    if (loginRes.code !== 0) return;
+    const { token, im_token, user_id } = loginRes.data;
+    localStorage.setItem('token', token)
+    localStorage.setItem('im_token', im_token)
+    localStorage.setItem('user_id', user_id)
+    showToast({ position: "top", message: t('LoginSuccess') });
+    const userRes = await $api.login.userInfo();
+    setUserInfo(userRes.data);
+    //二次登录
+    // if (IMSDK) {
+    //     await IMSDK.login(im_config())
+    // }
+    router.push({ path: '/home' });
+}
+
+// 获取申请详情
+let dataObj = ref({})
+let day = ref('')
+
+let loginUserInfo = ref(JSON.parse(window.sessionStorage.getItem('loginUserInfo')) || {})
+const getData = async () => {
+  let data = {
+    area_code: loginUserInfo.value.area_code || undefined,
+    email: loginUserInfo.value.email || undefined,
+    login_type: loginUserInfo.value.login_type || undefined,
+    password: loginUserInfo.value.password || undefined,
+    phone: loginUserInfo.value.phone || undefined,
+    username: loginUserInfo.value.username || undefined,
+  }
+  if (data['login_type'] === 14) {
+    data['token'] = loginUserInfo.value.token
+  }
+  const res = await $api.login.applicationGet(data);
+  if(res.code !== 0) return
+  dataObj.value = res.data
+
+    // 计算相隔的天数
+  const millisecondsPerDay = 24 * 60 * 60; // 一天的毫秒数
+  const timeDifference = dataObj.value.expire_time - dataObj.value.current_time;
+  day.value = Math.ceil(timeDifference / millisecondsPerDay);
+}
+getData()
+</script>
+
+<template>
+    <div class="restore-account">
+      <div class="restore-account-content">
+        <AppNavBar :title="$t('closeAccount')" left-arrow  @click-left="router.go(-1)" />
+        <div class="restore-account-wrap">
+          <div class="restore-account-content">
+            <div class="warn">
+                <img src="@/assets/svg/warn.svg" alt="">
+                <div class="msg" v-if="day > 0">{{$t('closingAccount')+$t('closingAccountEndTime',{'num': day})}}</div>
+                <div class="msg" v-else>{{$t('closingAccount')}}</div>
+            </div>
+            <div class="restore-account-btn">
+              <van-button class="btn know-btn" type="default" @click="onRestore">{{$t('recoverAccount')}}</van-button>
+            </div>
+          </div>
+          <van-dialog className="custom-dialog" v-model:show="dailogVisible" :title="$t('recoverAccountTipTitle')">
+          <template #default>
+            <div class="content">{{$t('recoverAccountTipDesc')}}</div>
+          </template>
+          <template #footer>
+            <div class="dialog-btn">
+              <van-button class="btn" type="default" @click="dailogVisible = false">{{ $t('cancel') }}</van-button>
+              <div class="line"></div>
+              <van-button :loading="loading" class="btn confirm-btn" type="default" @click="onConfirm">{{$t('recoverAccount')}}</van-button>
+            </div>
+          </template>
+        </van-dialog>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped lang="less">
+.restore-account {
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    padding-top: 56px;
+  &-content {
+    min-width: 375px;
+    max-width: 750px;
+    /* padding: 0px 30px; */
+    border-radius: 5px;
+    margin-bottom: 150px;
+    :deep(.van-nav-bar) {
+      display: flex;
+      justify-content: center;
+      .van-nav-bar__content {
+        min-width: 375px;
+        max-width: 750px;
+      }
+    }
+  }
+  &-wrap {
+    background: #FFF;
+    height: 100%;
+    padding-top: 40px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-content {
+    height: 100%;
+    .warn {
+      text-align: center;
+      margin-bottom: 60px;
+      .msg {
+        width: 257px;
+        margin: 20px auto;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #1B1B22;
+        p {
+        }
+      }
+    }
+    .detail {
+      padding: 16px;
+      .derail-item {
+        text-align: center;
+        margin-bottom: 24px;
+        padding: 0 20px;
+        .title {
+          font-size: 0.875rem;
+          color: #1B1B22;
+          font-weight: 600;
+          margin-bottom: 16px;
+        }
+        .tips {
+          font-size: 0.75rem;
+          color: #1B1B2266;
+        }
+      }
+    }
+    .restore-account-btn {
+      width: 100%;
+      padding: 0 20px;
+      
+      :deep(.van-button) {
+        width: 100%;
+        height: 48px;
+        line-height: 48px;
+        border-radius: 14px;
+        font-size: 1rem;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-weight: 500;
+        border-color: #D1D1D3;
+        border: 1px solid #1B1B22;
+
+        &::before {
+          height: 48px;
+        }
+      }
+      .know-btn {
+        background: #1B1B22;
+        color: #fff;
+        margin-bottom: 12px;
+      }
+    }
+  }
+  :deep(.van-dialog) {
+    .van-dialog__header {
+      padding-top: 24px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 19px 16px 22px 16px;
+
+      .content {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+        text-align: center;
+        line-height: 21px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .confirm-btn {
+      color: #0095F6 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/logout/secureVerify.vue b/src/views/my/security/logout/secureVerify.vue
new file mode 100644
index 0000000..91e6207
--- /dev/null
+++ b/src/views/my/security/logout/secureVerify.vue
@@ -0,0 +1,222 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import IconTriangle from '@/components/icons/IconTriangle.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { hidePhoneNumber } from '@/utils/tools'
+import { showToast } from 'vant'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia';
+
+const { t } = useI18n()
+import use from "@/use";
+const { useUid, useEmailLang } = use;
+const userStore = useUserStore();
+const { areaDictList } = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const secureVerifyRef = ref(null)
+useGrade(secureVerifyRef, 4)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const codeVal = ref('')
+const time = ref(0)
+const timer = ref(null)
+const flag = ref(0)
+const textVal = ref(t('getVerifyCode'))
+const loading = ref(false)
+let paramsData = ref({})
+const handleNext = async () => {
+  loading.value = true
+  const params = {
+    ... paramsData.value,
+    verify_code: codeVal.value
+  }
+  try{
+    // 验证码校验
+    const res = await $api.login.verifyCode(params)
+    loading.value = false
+    if (res.code != 0) return
+    showToast({ position: 'top', message: t('verificationSuccessful') })
+    // 撤销销毁
+    const applyRes = await $api.login.applicationApply()
+    if(applyRes.code !== 0) return
+    router.push(`/home/my/security/logoutAccount/submitSuccess?duration=${applyRes.data.duration}&token=${applyRes.data.token}`)
+    // dailogVisible.value = false
+  }finally{
+    loading.value = false
+  }
+}
+// 验证码发送
+const handleGetCode = async () => {
+  time.value = 60
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1
+      flag.value = 1
+      textVal.value = `${t('Resend')} ${time.value}s`
+    } else {
+      time.value = 0
+      flag.value = 2
+      textVal.value = t('reget')
+      clearInterval(timer.value)
+    }
+  }, 1000)
+  const res = await $api.login.sendCode({... paramsData.value})
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('sentSuccessfully') })
+}
+onMounted(() => {
+    if(userInfo.value.phone !== '') {
+        paramsData.value = {
+        area_code: userInfo.value.areaCode,
+        platform: 5, // 1ios 2安卓 3pc 4h5
+        phone: userInfo.value.phone,
+        verify_by: 1,  // 1手机 2邮箱
+        verify_type: 4
+        }
+    }
+  const language = useEmailLang()
+    if(userInfo.value.phone === '' && userInfo.value.email !== '') {
+        paramsData.value = {
+        email: userInfo.value.email || undefined,
+        platform: 5, // 1ios 2安卓 3pc 4h5
+        verify_by: 2,  // 1手机 2邮箱
+        verify_type: 4,
+        language
+        }
+    }
+    handleGetCode()
+})
+</script>
+
+<template>
+  <div ref="secureVerifyRef" class="secure-verify">
+    <AppNavBar :title="$t('checkVerity')" left-arrow views_grade="fourth_view" @click-left="router.push('/home/my/security/logoutAccount')">
+    </AppNavBar>
+    <div class="secure-verify-wrap">
+      <div class="secure-verify-content">
+        <div class="phone-top">
+          <div class="phone-txt">{{ $t('mobileCode') }}</div>
+          <div class="phone-tips">{{ $t('codeSendTo')  +`${userInfo.areaCode} ${hidePhoneNumber(userInfo.phone || userInfo.email)}` }}</div>
+        </div>
+        <div class="phone-txts">{{ $t('verificationCode') }}</div>
+        <van-field class="sms-input" v-model="codeVal" maxlength="6" center clearable label="" :placeholder="$t('verification_code1')">
+          <template #button>
+            <van-button :disabled="flag === 1" @click="handleGetCode" :class="{ 'active-txt': flag === 1 }"
+              class="send-btn" type="default">{{ textVal }}</van-button>
+          </template>
+        </van-field>
+      </div>
+      <div class="next-btn" style="margin: 24px 20px;">
+          <van-button :loading="loading" color="#1B1B22" :disabled="codeVal == ''" block @click="handleNext">{{ $t('nextStep') }}</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.secure-verify-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .secure-verify-content {
+    margin-top: 8px;
+
+    .phone-top {
+      padding: 15px 16px;
+      .phone-tips {
+        color: rgba(0, 0, 0, 0.40);
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+
+      .phone-txt {
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+      }
+    }
+    .phone-txts {
+      height: 44px;
+      padding: 20px 16px 4px 16px;
+      color: #1B1B22;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 500;
+    } 
+
+    :deep(.van-cell) {
+      padding: 20px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px 24px 20px;
+    }
+  }
+
+  .send-btn {
+    background: #F6F6F6;
+    border-radius: 23px;
+    padding: 8px 12px;
+    color: #0095F6;
+    height: 36px;
+    border: none;
+  }
+  .next-btn {
+    :deep(.van-button) {
+     border-radius: 12px;
+    }
+    :deep(.van-button--disabled) {
+        background-color: #F6F6F6 !important;
+        color: #D1D1D3 !important;
+        border: none;
+    }
+}
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1B1B22;
+    margin: 0 20px;
+
+    .btn {
+      color: #FFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #F6F6F6;
+
+    .btn {
+      color: #D1D1D3;
+    }
+  }
+}
+:deep(.van-field__button) {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/views/my/security/logout/submitSuccess.vue b/src/views/my/security/logout/submitSuccess.vue
new file mode 100644
index 0000000..68c076b
--- /dev/null
+++ b/src/views/my/security/logout/submitSuccess.vue
@@ -0,0 +1,225 @@
+<script setup>
+import { AppNavBar, TipDialog } from '@/components'
+import { useRouter, useRoute } from 'vue-router'
+import { useGrade } from '@/utils/levelConfig.js'
+import { computed, ref, watch, reactive, onMounted } from "vue";
+import { getDate, removeAllLocalstorage } from '@/utils/tools'
+import { getSDK } from '@/utils/openIM'
+import { useI18n } from "vue-i18n"
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { showToast,showDialog } from 'vant'
+import use from "@/use";
+import { storeToRefs } from 'pinia'
+
+const userStore = useUserStore();
+const { setToken, setUserInfo } = userStore;
+const { userInfo } = storeToRefs(userStore);
+const contactStore = useContactStore()
+const { clearStore } = contactStore;
+
+const submitSuccessRef = ref()
+useGrade(submitSuccessRef, 4)
+
+const { t } = useI18n()
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const { useUid, useSystem } = use;
+
+let duration = ref(0)
+let cancelToken = ref('')
+onMounted(() => {
+  duration.value = route.query.duration
+  cancelToken.value = route.query.token
+})
+const dailogVisible = ref(false)
+// 我知道了
+const onKonw = async () => {
+  const res = await $api.login.logout({
+    device_id: useUid,
+    platform: useSystem()
+  });
+  if(res.code !== 0) return
+  setToken('');
+  setUserInfo({});
+  removeAllLocalstorage();
+  OpenIM.logout();
+  clearStore();
+  router.push('/firstScreen');
+}
+// 撤销申请-确认
+const loading = ref(false)
+const onConfirm = async () => {
+  console.log('userInfo',userInfo.value);
+  loading.value = true
+  const res = await $api.login.applicationCancel({token: cancelToken.value});
+  if(res.code !== 0) return
+  onKonw()
+  loading.value = false
+  dailogVisible.value = false
+  showToast({ message: t('revokeSuccess') })
+}
+</script>
+
+<template>
+  <div ref="submitSuccessRef">
+    <div class="submit_success">
+      <AppNavBar views_grade="fourth_view" :title=" $t('closeAccount') "></AppNavBar>
+      <div class="submit_success-wrap">
+        <div class="submit_success-content">
+           <div class="success">
+              <img src="@/assets/svg/success.svg" alt="">
+              <div class="msg">{{ $t('submitSuccess') }}</div>
+           </div>
+           <div class="detail">
+              <div class="derail-item">
+                <div class="title">{{ $t('submitted') }}</div>
+                <div class="tips">{{ $t('helpWord',{'day': duration}) }}</div>
+              </div>
+           </div>
+           <div class="submit_success-btn">
+            <van-button class="btn know-btn" type="default" @click="onKonw">{{ $t('know') }}</van-button>
+            <van-button class="btn cancel-btn" type="default" @click="dailogVisible = true">{{ $t('revoke') }}</van-button>
+          </div>
+        </div>
+        <van-dialog className="custom-dialog" v-model:show="dailogVisible" :title="$t('recover')">
+        <template #default>
+          <div class="content">{{ $t('toNormal') }}！</div>
+        </template>
+        <template #footer>
+          <div class="dialog-btn">
+            <van-button class="btn" type="default" @click="dailogVisible = false">{{ $t('cancel') }}</van-button>
+            <div class="line"></div>
+            <van-button class="btn confirm-btn" type="default" :loading="loading" @click="onConfirm">{{ $t('revoke') }}</van-button>
+          </div>
+        </template>
+      </van-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.submit_success {
+  background: #FFF;
+  height: 100%;
+  width: 100%;
+  padding-top: 56px;
+
+  &-wrap {
+    background: #FFF;
+    height: 100%;
+    padding-top: 22px;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-content {
+    height: 100%;
+    .success {
+      text-align: center;
+      margin-bottom: 60px;
+      .msg {
+        margin-top: 20px;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #1B1B22;
+      }
+    }
+    .detail {
+      padding: 16px;
+      .derail-item {
+        text-align: center;
+        margin-bottom: 24px;
+        padding: 0 20px;
+        .title {
+          font-size: 0.875rem;
+          color: #1B1B22;
+          font-weight: 600;
+          margin-bottom: 16px;
+        }
+        .tips {
+          font-size: 0.75rem;
+          color: #1B1B2266;
+        }
+      }
+    }
+    .submit_success-btn {
+      width: 100%;
+      padding: 0 20px;
+      
+      :deep(.van-button) {
+        width: 100%;
+        height: 48px;
+        line-height: 48px;
+        border-radius: 14px;
+        font-size: 1rem;
+        color: #1B1B22;
+        font-family: PingFang SC;
+        font-weight: 500;
+        border-color: #D1D1D3;
+        border: 1px solid #1B1B22;
+
+        &::before {
+          height: 48px;
+        }
+      }
+      .know-btn {
+        background: #1B1B22;
+        color: #fff;
+        margin-bottom: 12px;
+      }
+    }
+  }
+  :deep(.van-dialog) {
+    .van-dialog__header {
+      padding-top: 24px;
+    }
+
+    .van-dialog__content {
+      border-bottom: 0.5px solid #F2F4F5;
+      padding: 19px 16px 22px 16px;
+
+      .content {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 400;
+        text-align: center;
+        line-height: 21px;
+      }
+    }
+
+    .dialog-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 44px;
+      padding: 11px 0;
+    }
+
+    .btn {
+      color: #1B1B22 !important;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+      background: #FFF !important;
+      border-color: #FFF !important;
+      width: 50%;
+    }
+
+    .line {
+      width: 1px;
+      height: 44px;
+      background: #F5F8FF;
+    }
+
+    .confirm-btn {
+      color: #0095F6 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/my/security/password.vue b/src/views/my/security/password.vue
new file mode 100644
index 0000000..ea37a07
--- /dev/null
+++ b/src/views/my/security/password.vue
@@ -0,0 +1,194 @@
+<script setup>
+import { ref } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { isValidPassword } from '@/utils/tools'
+import { showToast } from 'vant'
+import { encrypt } from "@/utils/index.js"
+import { useI18n } from "vue-i18n"
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const detailSetRef = ref(null)
+useGrade(detailSetRef, 3)
+const $api = inject("$api");
+const logOutApi = inject("refreshLogOut");
+const oldPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const inputType1 = ref('password')
+const inputType2 = ref('password')
+const inputType3 = ref('password')
+const handleSave = async () => {
+  if (!isValidPassword(oldPassword.value)) {
+    showToast({ position: 'top', message: t('init_validate_6') })
+    return
+  }
+  if (!isValidPassword(newPassword.value)) {
+    showToast({ position: 'top', message: t('init_validate_6') })
+    return
+  }
+  if (!isValidPassword(confirmPassword.value)) {
+    showToast({ position: 'top', message: t('init_validate_6') })
+    return
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    showToast({ position: 'top', message: t('twicePwd') })
+    return
+  }
+  const res = await $api.login.updatePas({
+    current_password: encrypt(oldPassword.value),
+    new_password: encrypt(newPassword.value),
+    platform: 5,
+  })
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('useNewPassword') })
+  // 调用退出登录接口
+  logOutApi();
+}
+</script>
+
+<template>
+  <div ref="detailSetRef" class="detailSet">
+    <AppNavBar :title="$t('init_hint_3')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/security')">
+    </AppNavBar>
+    <div class="detailSet-wrap">
+      <div class="detailSet-content">
+        <div class="password-form">
+          <div class="title-item">{{ $t('old_password') }}</div>
+          <van-field class="input-item input-items" maxlength="15" :type="inputType1" v-model="oldPassword" label=""
+            :placeholder="$t('please_enter_old_password')">
+            <template #button>
+              <div class="passBtn" style="display: flex">
+                <IconRemove v-show="oldPassword !== ''" class="wp-input-remove" @click="oldPassword = ''">
+                </IconRemove>
+                <IconEyeShow class="icon" v-show="inputType1 === 'text'" @click="inputType1 = 'password'"></IconEyeShow>
+                <IconEyeHide class="icon" v-show="inputType1 === 'password'" @click="inputType1 = 'text'"></IconEyeHide>
+              </div>
+            </template>
+          </van-field>
+          <div class="title-item">{{ $t('newPwd') }}</div>
+          <van-field class="input-item input-items" maxlength="15" :type="inputType2" v-model="newPassword" label=""
+            :placeholder="$t('plsEnterNewPwd')">
+            <template #button>
+              <div class="passBtn" style="display: flex">
+                <IconRemove v-show="newPassword !== ''" class="wp-input-remove" @click="newPassword = ''">
+                </IconRemove>
+                <IconEyeShow class="icon" v-show="inputType2 === 'text'" @click="inputType2 = 'password'"></IconEyeShow>
+                <IconEyeHide class="icon" v-show="inputType2 === 'password'" @click="inputType2 = 'text'"></IconEyeHide>
+              </div>
+            </template>
+          </van-field>
+          <div class="title-item">{{ $t('confirmPassword') }}</div>
+          <van-field class="input-item" maxlength="15" v-model="confirmPassword" :type="inputType3" label="" :placeholder="$t('please_enter_new_password_again')">
+            <template #button>
+              <div class="passBtn" style="display: flex">
+                <IconRemove v-show="confirmPassword !== ''" class="wp-input-remove" @click="confirmPassword = ''">
+                </IconRemove>
+                <IconEyeShow class="icon" v-show="inputType3 === 'text'" @click="inputType3 = 'password'"></IconEyeShow>
+                <IconEyeHide class="icon" v-show="inputType3 === 'password'" @click="inputType3 = 'text'"></IconEyeHide>
+              </div>
+            </template>
+          </van-field>
+          <!-- <div class="empty-line"></div> -->
+          <div class="tips">{{ $t('init_validate_6') }}</div>
+        </div>
+        <div class="send-btn">
+          <van-button :disabled="!(oldPassword && newPassword && confirmPassword)" @click="handleSave"
+            type="default">{{ $t('save') }}</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.detailSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .detailSet-content {
+    padding: 8px 0 30px 0;
+    height: 100%;
+    overflow-y: auto;
+
+    .password-form {
+      .title-item {
+        height: 44px;
+        padding: 12px 0 12px 16px;
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 600;
+      }
+
+      .input-item {
+        height: 60px;
+      }
+
+      :deep(.van-cell) {
+        padding: 19px 16px;
+      }
+
+      .input-items {
+        margin-bottom: 12px;
+      }
+
+      .van-cell:after {
+        border-bottom: 1px solid #F2F4F5;
+        left: 16px;
+        right: 16px;
+      }
+
+      .empty-line {
+        height: 1px;
+        background: #F2F4F5;
+      }
+
+      .tips {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+        margin: 16px 16px 12px 16px;
+      }
+
+      .wp-input-remove {
+        margin-right: 20px;
+      }
+    }
+
+
+    .send-btn {
+      display: flex;
+      align-self: center;
+      align-items: center;
+      justify-content: center;
+      margin-top: 150px;
+      width: 100%;
+      padding: 0 20px;
+
+      :deep(.van-button) {
+        width: 100%;
+        height: 52px;
+        line-height: 52px;
+        border-radius: 14px;
+        font-size: 1rem;
+        color: #FFFFFF;
+        font-family: PingFang SC;
+        font-weight: 500;
+        border: none;
+        background: #1B1B22;
+
+        &::before {
+          height: 52px;
+        }
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/views/my/security/pay/emailVerify.vue b/src/views/my/security/pay/emailVerify.vue
new file mode 100644
index 0000000..b7b83ff
--- /dev/null
+++ b/src/views/my/security/pay/emailVerify.vue
@@ -0,0 +1,304 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import IconTriangle from "@/components/icons/IconTriangle.vue";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { hideEmailNumber } from "@/utils/tools";
+import { showToast } from "vant";
+import use from "@/use";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { encrypt } from "@/utils/index.js";
+import StepTwo from "../component/stepTwo.vue";
+import StepThree from "../component/stepThree.vue";
+const emailNextRef = ref(null);
+useGrade(emailNextRef, 3);
+const { t } = useI18n();
+const { useUid, useEmailLang } = use;
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { setUserInfo } = userStore;
+const $api = inject("$api");
+const router = useRouter();
+const route = useRoute();
+const phoneVal = ref("");
+const codeVal = ref("");
+const time = ref(0);
+const timer = ref(null);
+const flag = ref(0);
+const textVal = ref(t("getVerifyCode"));
+const showLoading = ref(false);
+const finishResult = ref("");
+const stepResult = ref("");
+const stepVal = ref(1);
+const flags = ref(false)
+const handleNext = async () => {
+  const params = {
+    "area_code": "",
+    // "device_id": useUid(),
+    "email": userInfo.value.email,
+    "verify_code": codeVal.value,
+    "platform": 5,
+    "phone": "",
+    "verify_by": 2,
+  }
+  const res = await $api.login.verifyCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('verificationSuccessful') })
+  stepVal.value = 2;
+};
+const handleGetCode = async () => {
+  time.value = 60;
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1;
+      flag.value = 1;
+      textVal.value = `${t("Resend")} ${time.value}s`;
+    } else {
+      time.value = 0;
+      flag.value = 2;
+      textVal.value = t("reget");
+      clearInterval(timer.value);
+    }
+  }, 1000);
+  // 5是绑定，4是换绑
+  const language = useEmailLang()
+  const params = {
+    area_code: "",
+    // "device_id": useUid(),
+    email: userInfo.value.email,
+    phone: "",
+    platform: 5,
+    username: userInfo.value.username,
+    verify_by: 2,
+    verify_type: 4,
+    language
+  };
+  const res = await $api.login.sendCode(params);
+  if (res.code != 0) return;
+  showToast({ position: "top", message: t("sentSuccessfully") });
+};
+onMounted(() => {
+  if (route.query.label) {
+    flags.value = true
+    handleGetCode();
+  } else {
+    stepVal.value = 2;
+  }
+});
+const handleCodeChange = val => {
+  finishResult.value = val;
+};
+const handleCodeChanges = val => {
+  stepResult.value = val;
+  stepVal.value = 3;
+};
+const handleFinish = async () => {
+  showLoading.value = true;
+  if (finishResult.value !== stepResult.value) {
+    showToast({ position: "top", message: "两次密码不一致" });
+    stepVal.value = 2;
+    showLoading.value = false;
+    return;
+  }
+  const params = {
+    property_password: encrypt(finishResult.value),
+    user_id: userInfo.value.userID,
+    verify_tag: true
+  };
+  const res = await $api.user.setPayPassword(params);
+  if (res.code != 0) {
+    stepVal.value = 2;
+    showLoading.value = false;
+    return
+  };
+  showToast({ position: "top", message: t('setSuccessfully') });
+  stepVal.value = 2;
+  showLoading.value = false;
+  setUserInfo({...userInfo.value, has_property_pwd: true })
+  router.push("/home/my/security");
+};
+</script>
+
+<template>
+  <div ref="emailNextRef" class="emailNext">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar :title="(userInfo.has_property_pwd && stepVal === 1) ? $t('forgetPayPassword') : $t('pay_password')" left-arrow
+        views_grade="thirdly_view" @click-left="router.push('/home/my/security')">
+      </AppNavBar>
+      <div class="emailNext-wrap">
+        <div class="emailNext-content">
+          <div class="first-step" v-if="(stepVal === 1 && !userInfo.email && !flags) || (stepVal === 1 && userInfo.email && flags)">
+            <div class="email-top">
+              <div class="email-txt">{{ $t("email_verification_code") }}</div>
+              <div class="email-tips">
+                {{ $t("codeSendTo") + hideEmailNumber(userInfo.email) }}
+              </div>
+            </div>
+            <div class="email-txts">{{ $t("verificationCode") }}</div>
+            <van-field class="sms-input" v-model="codeVal" maxlength="6" center clearable label=""
+              :placeholder="$t('verification_code1')">
+              <template #button>
+                <van-button :disabled="flag === 1" @click="handleGetCode" :class="{ 'active-txt': flag === 1 }"
+                  class="send-btn" type="default">{{ textVal }}</van-button>
+              </template>
+            </van-field>
+            <div class="delete-btn" @click="handleNext" :class="{ 'disable-btn': !codeVal }">
+              <div class="btn">{{ $t("nextStep") }}</div>
+            </div>
+          </div>
+        </div>
+        <StepTwo v-if="stepVal === 2" @get-two-step="handleCodeChanges"></StepTwo>
+        <StepThree v-if="stepVal === 3" @get-three-step="handleCodeChange"></StepThree>
+        <div class="third-step-btn" v-if="stepVal === 3">
+          <van-button :loading="showLoading" :disabled="!finishResult" @click="handleFinish" type="default">
+            {{ $t("finish") }}
+          </van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.emailNext-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .emailNext-content {
+    margin-top: 8px;
+
+    .email-top {
+      padding: 15px 16px;
+
+      .email-tips {
+        color: rgba(0, 0, 0, 0.4);
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+
+      .email-txt {
+        color: #1b1b22;
+        font-family: "PingFang SC";
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+      }
+    }
+
+    .email-txts {
+      height: 44px;
+      padding: 20px 16px 4px 16px;
+      color: #1b1b22;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    :deep(.van-cell) {
+      padding: 20px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px 24px 20px;
+    }
+  }
+
+  .send-btn {
+    background: #f6f6f6;
+    border-radius: 23px;
+    padding: 8px 12px;
+    color: #0095f6;
+    height: 36px;
+    border: none;
+  }
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1b1b22;
+    margin: 0 20px;
+
+    .btn {
+      color: #fff;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #f6f6f6;
+
+    .btn {
+      color: #d1d1d3;
+    }
+  }
+}
+
+:deep(.van-field__button) {
+  margin-left: 16px;
+}
+
+.first-step {
+  .send-btn {
+    background: #f6f6f6;
+    border-radius: 23px;
+    padding: 8px 12px;
+    color: #0095f6;
+    height: 36px;
+    border: none;
+  }
+}
+
+
+.third-step-btn {
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  margin-top: 150px;
+  width: 100%;
+  padding: 0 20px;
+
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 1rem;
+    color: #ffffff;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border: none;
+    background: #1b1b22;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  :deep(.van-button--disabled) {
+    background: rgba(242, 244, 245, 1) !important;
+    color: rgba(209, 209, 211, 1) !important;
+  }
+}
+</style>
diff --git a/src/views/my/security/pay/modifyPassword.vue b/src/views/my/security/pay/modifyPassword.vue
new file mode 100644
index 0000000..1a2f1a7
--- /dev/null
+++ b/src/views/my/security/pay/modifyPassword.vue
@@ -0,0 +1,272 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { showToast } from "vant";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { encrypt } from "@/utils/index.js";
+import StepTwo from "../component/stepTwo.vue";
+import StepThree from "../component/stepThree.vue";
+const { t } = useI18n();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { setUserInfo } = userStore;
+const modifyPasswordRef = ref(null);
+useGrade(modifyPasswordRef, 3);
+const $api = inject("$api");
+const stepVal = ref(1);
+const router = useRouter();
+const finishResult = ref("");
+const stepResult = ref("");
+const showLoading = ref(false);
+const showSelect = ref(false);
+const actionsSelect = reactive([
+  { name: "请选择找回密码的方式", color: "rgba(27, 27, 34, 0.6)" },
+  { name: "通过邮箱地址找回", color: "" },
+  { name: "通过手机号找回", color: "" }
+]);
+const handleCodeChange = async val => {
+  if (val.length === 6) {
+    stepResult.value = val;
+    const params = {
+      property_password: encrypt(val),
+      user_id: userInfo.value.userID
+    };
+    // 验证支付密码是否正确
+    const res = await $api.user.checkPayPassword(params);
+    if (res.code != 0) return;
+    stepVal.value = 2;
+  }
+};
+const handleCodeChanges = val => {
+  stepResult.value = val;
+  stepVal.value = 3;
+};
+const handleCodeChange1 = val => {
+  finishResult.value = val;
+};
+const handlePay = () => {
+  if (userInfo.value.phone && userInfo.value.email) {
+    showSelect.value = true;
+    return;
+  }
+  if (userInfo.value.phone) {
+    router.push({
+      path: `/home/my/security/phoneVerify`,
+      query: {
+        label: "forget"
+      }
+    });
+    return;
+  }
+  if (userInfo.value.email) {
+    if (!userInfo.value.phone) {
+      router.push({
+        path: `/home/my/security/emailVerify`,
+        query: {
+          label: "forget"
+        }
+      });
+      return;
+    }
+  }
+};
+const handleFinish = async () => {
+  showLoading.value = true;
+  if (finishResult.value !== stepResult.value) {
+    showToast({ position: "top", message: "两次密码不一致" });
+    stepVal.value = 2;
+    showLoading.value = false;
+    return;
+  }
+  const params = {
+    property_password: encrypt(finishResult.value),
+    user_id: userInfo.value.userID,
+    verify_tag: true
+  };
+  const res = await $api.user.setPayPassword(params);
+  if (res.code != 0) {
+    showLoading.value = false;
+    stepVal.value = 1;
+    return;
+  }
+  showToast({ position: "top", message: t("setSuccessfully") });
+  stepVal.value = 1;
+  showLoading.value = false;
+  setUserInfo({ ...userInfo.value, has_property_pwd: true });
+  router.push("/home/my/security");
+};
+const selectSex = (val, index) => {
+  if (index === 1) {
+    router.push({
+      path: `/home/my/security/emailVerify`,
+      query: {
+        label: "forget"
+      }
+    });
+    return;
+  }
+  if (index === 2) {
+    router.push({
+      path: `/home/my/security/phoneVerify`,
+      query: {
+        label: "forget"
+      }
+    });
+    return;
+  }
+};
+</script>
+
+<template>
+  <div ref="modifyPasswordRef" class="modifyPassword">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar
+        :title="$t('pay_password')"
+        left-arrow
+        views_grade="thirdly_view"
+        @click-left="router.push('/home/my/security')"
+      >
+      </AppNavBar>
+      <div class="modifyPassword-wrap">
+        <div class="modifyPassword-content">
+          <div class="first-step" v-if="stepVal === 1">
+            <div class="content-wrap">
+              <div class="content-title">
+                {{ userInfo.has_pwd ?  $t("verifyPassword") : $t("set_payment_password")}}
+              </div>
+              <div class="content">{{ userInfo.has_pwd ? $t("verifyCurrentPassword") : $t("unset_payment_password")}}</div>
+            </div>
+            <CodeInput
+              :inputType="'password'"
+              :len="6"
+              class="pay-input"
+              @change="handleCodeChange"
+            ></CodeInput>
+            <div class="forget-password" @click="handlePay">
+              {{ $t("forgetPayPassword") }}?
+            </div>
+          </div>
+          <StepTwo
+            v-if="stepVal === 2"
+            @get-two-step="handleCodeChanges"
+          ></StepTwo>
+          <StepThree
+            v-if="stepVal === 3"
+            @get-three-step="handleCodeChange1"
+          ></StepThree>
+          <div v-if="stepVal === 3" class="send-btn">
+            <van-button
+              :loading="showLoading"
+              :disabled="!finishResult"
+              @click="handleFinish"
+              type="default"
+              >{{ $t("finish") }}</van-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <van-action-sheet
+      v-model:show="showSelect"
+      :actions="actionsSelect"
+      :cancel-text="$t('cancel')"
+      close-on-click-action
+      @cancel="showSelect = false"
+      @select="selectSex"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.modifyPassword-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .modifyPassword-content {
+    height: 100%;
+
+    .content-wrap {
+      height: 90px;
+      padding: 18.5px 16px;
+      display: flex;
+      flex-direction: column;
+
+      .content-title {
+        color: rgba(27, 27, 34, 1);
+        font-weight: 500;
+        font-size: 1.25rem;
+        margin-bottom: 8px;
+      }
+
+      .content {
+        color: rgba(0, 0, 0, 0.4);
+        font-size: 0.75rem;
+      }
+    }
+
+    .pay-input {
+      height: 90px;
+      padding: 21px 24px;
+
+      :deep(.validate_label) {
+        justify-content: space-around;
+        width: 100%;
+
+        .validate_item {
+          width: 45px;
+          height: 48px;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .forget-password {
+      font-family: PingFang SC;
+      font-size: 0.75rem;
+      font-weight: 400;
+      text-align: right;
+      color: rgba(27, 27, 34, 0.6);
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+}
+
+.send-btn {
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  margin-top: 150px;
+  width: 100%;
+  padding: 0 20px;
+
+  :deep(.van-button) {
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-radius: 14px;
+    font-size: 1rem;
+    color: #ffffff;
+    font-family: PingFang SC;
+    font-weight: 500;
+    border: none;
+    background: #1b1b22;
+
+    &::before {
+      height: 52px;
+    }
+  }
+
+  :deep(.van-button--disabled) {
+    background: rgba(242, 244, 245, 1) !important;
+    color: rgba(209, 209, 211, 1) !important;
+  }
+}
+</style>
diff --git a/src/views/my/security/pay/phoneVerify.vue b/src/views/my/security/pay/phoneVerify.vue
new file mode 100644
index 0000000..204f652
--- /dev/null
+++ b/src/views/my/security/pay/phoneVerify.vue
@@ -0,0 +1,328 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { AppNavBar } from "@/components/index.js";
+import { useGrade } from "@/utils/levelConfig";
+import IconTriangle from "@/components/icons/IconTriangle.vue";
+import { useRouter, useRoute } from "vue-router";
+import { useUserStore } from "@/stores/user";
+import { hidePhoneNumber } from "@/utils/tools";
+import { showToast } from "vant";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { encrypt } from "@/utils/index.js";
+import StepTwo from "../component/stepTwo.vue";
+import StepThree from "../component/stepThree.vue";
+const { t } = useI18n();
+import use from "@/use";
+const { useUid } = use;
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { setUserInfo } = userStore;
+const phoneVerifyRef = ref(null);
+useGrade(phoneVerifyRef, 3);
+const $api = inject("$api");
+const router = useRouter();
+const route = useRoute();
+const phoneVal = ref("");
+const codeVal = ref("");
+const time = ref(0);
+const timer = ref(null);
+const flag = ref(0);
+const textVal = ref(t("getVerifyCode"));
+const showLoading = ref(false);
+const finishResult = ref("");
+const stepResult = ref("");
+const stepVal = ref(1);
+const flags = ref(false)
+const handleNext = async () => {
+  const params = {
+    area_code: userInfo.value.areaCode,
+    // "device_id": useUid(),
+    email: "",
+    verify_code: codeVal.value,
+    platform: 5,
+    phone: userInfo.value.phone,
+    verify_by: 1
+  };
+  const res = await $api.login.verifyCode(params);
+  if (res.code != 0) return;
+  showToast({ position: "top", message: t("verificationSuccessful") });
+  stepVal.value = 2;
+};
+const handleGetCode = async () => {
+  time.value = 60;
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1;
+      flag.value = 1;
+      textVal.value = `${t("Resend")} ${time.value}s`;
+    } else {
+      time.value = 0;
+      flag.value = 2;
+      textVal.value = t("reget");
+      clearInterval(timer.value);
+    }
+  }, 1000);
+  const params = {
+    area_code: userInfo.value.areaCode,
+    // "device_id": useUid(),
+    email: "",
+    phone: userInfo.value.phone,
+    platform: 5,
+    username: userInfo.value.username,
+    verify_by: 1,
+    verify_type: 4
+  };
+  const res = await $api.login.sendCode(params);
+  if (res.code != 0) return;
+  showToast({ position: "top", message: t('sentSuccessfully') });
+};
+onMounted(() => {
+  if (route.query.label) {
+    flags.value = true
+    handleGetCode();
+  } else {
+    stepVal.value = 2;
+  }
+});
+const handleCodeChange = val => {
+  finishResult.value = val;
+};
+const handleCodeChanges = val => {
+  stepResult.value = val;
+  stepVal.value = 3;
+};
+const handleFinish = async () => {
+  showLoading.value = true;
+  if (finishResult.value !== stepResult.value) {
+    showToast({ position: "top", message: "两次密码不一致" });
+    stepVal.value = 2;
+    showLoading.value = false;
+    return;
+  }
+  const params = {
+    property_password: encrypt(finishResult.value),
+    user_id: userInfo.value.userID,
+    verify_tag: true
+  };
+  const res = await $api.user.setPayPassword(params);
+  if (res.code != 0) {
+    stepVal.value = 2;
+    showLoading.value = false;
+    return
+  };
+  showToast({ position: "top", message: t('setSuccessfully') });
+  stepVal.value = 2;
+  showLoading.value = false;
+  setUserInfo({...userInfo.value, has_property_pwd: true })
+  router.push("/home/my/security");
+};
+</script>
+
+<template>
+  <div ref="phoneVerifyRef" class="phoneVerify">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar
+        :title="
+          userInfo.has_property_pwd && stepVal === 1
+            ? $t('forgetPayPassword')
+            : $t('pay_password')
+        "
+        left-arrow
+        views_grade="thirdly_view"
+        @click-left="router.push('/home/my/security')"
+      >
+      </AppNavBar>
+      <div class="phoneVerify-wrap">
+        <div class="phoneVerify-content">
+          <div class="first-step" v-if="(stepVal === 1 && !userInfo.phone && !flags) || (stepVal === 1 && userInfo.phone && flags)">
+            <div class="phone-top">
+              <div class="phone-txt">{{ $t("mobileCode") }}</div>
+              <div class="phone-tips">
+                {{
+                  $t("codeSendTo") +
+                    `${userInfo.areaCode} ${hidePhoneNumber(userInfo.phone)}`
+                }}
+              </div>
+            </div>
+            <div class="phone-txts">{{ $t("verificationCode") }}</div>
+            <van-field
+              class="sms-input"
+              v-model="codeVal"
+              maxlength="6"
+              center
+              clearable
+              label=""
+              :placeholder="$t('verification_code1')"
+            >
+              <template #button>
+                <van-button
+                  :disabled="flag === 1"
+                  @click="handleGetCode"
+                  :class="{ 'active-txt': flag === 1 }"
+                  class="send-btn"
+                  type="default"
+                  >{{ textVal }}</van-button
+                >
+              </template>
+            </van-field>
+            <div
+              class="delete-btn"
+              @click="handleNext"
+              :class="{ 'disable-btn': !codeVal }"
+            >
+              <div class="btn">{{ $t("nextStep") }}</div>
+            </div>
+          </div>
+        </div>
+        <StepTwo
+          v-if="stepVal === 2"
+          @get-two-step="handleCodeChanges"
+        ></StepTwo>
+        <StepThree
+          v-if="stepVal === 3"
+          @get-three-step="handleCodeChange"
+        ></StepThree>
+        <div class="third-step-btn" v-if="stepVal === 3">
+          <van-button
+            :loading="showLoading"
+            :disabled="!finishResult"
+            @click="handleFinish"
+            type="default"
+          >{{ $t("finish") }}</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.phoneVerify-wrap {
+  background: #fff;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .phoneVerify-content {
+    margin-top: 8px;
+
+    .phone-top {
+      padding: 15px 16px;
+
+      .phone-tips {
+        color: rgba(0, 0, 0, 0.4);
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+
+      .phone-txt {
+        color: #1b1b22;
+        font-family: "PingFang SC";
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+      }
+    }
+
+    .phone-txts {
+      height: 44px;
+      padding: 20px 16px 4px 16px;
+      color: #1b1b22;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    :deep(.van-cell) {
+      padding: 20px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px 24px 20px;
+    }
+  }
+
+  .first-step {
+    .send-btn {
+      background: #f6f6f6;
+      border-radius: 23px;
+      padding: 8px 12px;
+      color: #0095f6;
+      height: 36px;
+      border: none;
+    }
+  }
+
+  .third-step-btn {
+    display: flex;
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    margin-top: 150px;
+    width: 100%;
+    padding: 0 20px;
+
+    :deep(.van-button) {
+      width: 100%;
+      height: 52px;
+      line-height: 52px;
+      border-radius: 14px;
+      font-size: 1rem;
+      color: #ffffff;
+      font-family: PingFang SC;
+      font-weight: 500;
+      border: none;
+      background: #1b1b22;
+
+      &::before {
+        height: 52px;
+      }
+    }
+
+    :deep(.van-button--disabled) {
+      background: rgba(242, 244, 245, 1) !important;
+      color: rgba(209, 209, 211, 1) !important;
+    }
+  }
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1b1b22;
+    margin: 0 20px;
+
+    .btn {
+      color: #fff;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #f6f6f6;
+
+    .btn {
+      color: #d1d1d3;
+    }
+  }
+}
+
+:deep(.van-field__button) {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/views/my/security/phone.vue b/src/views/my/security/phone.vue
new file mode 100644
index 0000000..cd73a5a
--- /dev/null
+++ b/src/views/my/security/phone.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import defaultPhone from '@/assets/bind-phone.png'
+import { hidePhoneNumber } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+const { t } = useI18n()
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const phoneSetRef = ref(null)
+useGrade(phoneSetRef, 3)
+const $api = inject("$api");
+const router = useRouter()
+const handlePhone = async () => {
+  // 4是绑定，5是换绑
+  // const params = {
+  //   "area_code": userInfo.areaCode,
+  //   // "device_id": useUid(),
+  //   "email": "",
+  //   "phone": userInfo.phone,
+  //   "platform": 4,
+  //   "username": userInfo.username,
+  //   "verify_by": 1,
+  //   "verify_type": 4
+  // }
+  // const res = await $api.login.sendCode(params)
+  // if (res.code != 0) return
+  router.push({
+    path: '/home/my/security/phone/phoneNext'
+  })
+}
+</script>
+
+<template>
+  <div ref="phoneSetRef" class="phoneSet">
+    <div style="flex: 1 1 0%; position: relative; height: 100%;">
+      <AppNavBar :title="$t('bindPhone')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/security')">
+      </AppNavBar>
+      <div class="phoneSet-wrap">
+        <div class="phoneSet-content">
+          <div class="phoneSet-img">
+            <img :src="defaultPhone" alt="">
+          </div>
+          <div class="phoneSet-txt">{{ $t('current_bind_phone') + hidePhoneNumber(userInfo.phone) }}</div>
+          <div class="phoneSet-tips">{{ $t('bindPhoneTipChange') }}</div>
+          <div class="delete-btn" @click="handlePhone">
+            <div class="btn">{{ $t('change_the_binding') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 四级 -->
+    <RouterView />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.phoneSet-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .phoneSet-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 20px 30px 20px;
+
+    .phoneSet-img {
+      margin: 50px 0 30px 0;
+
+      img {
+        width: 120px;
+        height: 120px;
+      }
+    }
+
+    .phoneSet-txt {
+      margin-bottom: 8px;
+      color: #1B1B22;
+      text-align: center;
+      font-family: "PingFang SC";
+      font-size: 1rem;
+      font-weight: 500;
+    }
+
+    .phoneSet-tips {
+      color: #A4A4A7;
+      text-align: center;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 400;
+      margin-bottom: 270px;
+    }
+
+    .delete-btn {
+      width: 100%;
+      cursor: pointer;
+      height: 52px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 15px 0;
+      border-radius: 14px;
+      background: #1B1B22;
+
+      .btn {
+        color: #FFF;
+        font-family: PingFang SC;
+        font-size: 1rem;
+        font-weight: 500;
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/views/my/security/phoneNext.vue b/src/views/my/security/phoneNext.vue
new file mode 100644
index 0000000..c5bd569
--- /dev/null
+++ b/src/views/my/security/phoneNext.vue
@@ -0,0 +1,203 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import IconTriangle from '@/components/icons/IconTriangle.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from "@/stores/user";
+import { hidePhoneNumber } from '@/utils/tools'
+import { showToast } from 'vant'
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+const { t } = useI18n()
+import use from "@/use";
+const { useUid } = use;
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const phoneNextRef = ref(null)
+useGrade(phoneNextRef, 4)
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const phoneVal = ref('')
+const codeVal = ref('')
+const time = ref(0)
+const timer = ref(null)
+const flag = ref(0)
+const textVal = ref(t('getVerifyCode'))
+const handleNext = async () => {
+  const params = {
+    "area_code": userInfo.value.areaCode,
+    // "device_id": useUid(),
+    "email": "",
+    "verify_code": codeVal.value,
+    "platform": 5,
+    "phone": userInfo.value.phone,
+    "verify_by": 1,
+  }
+  const res = await $api.login.verifyCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('verificationSuccessful') })
+  router.push({
+    path: '/home/my/security/bindPhone',
+    query: {
+      label: 'update'
+    }
+  })
+}
+
+const isSend = ref(false)
+const handleGetCode = async () => {
+  if(isSend.value) return
+  isSend.value = true
+  time.value = 60
+  timer.value = setInterval(() => {
+    if (time.value > 0) {
+      time.value = time.value - 1
+      flag.value = 1
+      textVal.value = `${t('Resend')} ${time.value}s`
+    } else {
+      time.value = 0
+      flag.value = 2
+      textVal.value = t('reget')
+      clearInterval(timer.value)
+      isSend.value = false
+    }
+  }, 1000)
+  const params = {
+    "area_code": userInfo.value.areaCode,
+    // "device_id": useUid(),
+    "email": "",
+    "phone": userInfo.value.phone,
+    "platform": 5,
+    "username": userInfo.value.username,
+    "verify_by": 1,
+    "verify_type": 4
+  }
+  const res = await $api.login.sendCode(params)
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('sentSuccessfully') })
+}
+onMounted(() => {
+  handleGetCode()
+})
+</script>
+
+<template>
+  <div ref="phoneNextRef" class="phoneNext">
+    <AppNavBar :title="$t('bindPhone')" left-arrow views_grade="fourth_view" @click-left="router.push('/home/my/security')">
+    </AppNavBar>
+    <div class="phoneNext-wrap">
+      <div class="phoneNext-content">
+        <div class="phone-top">
+          <div class="phone-txt">{{ $t('mobileCode') }}</div>
+          <div class="phone-tips">{{ $t('codeSendTo')  + `${userInfo.areaCode} ${hidePhoneNumber(userInfo.phone)}` }}</div>
+        </div>
+        <div class="phone-txts">{{ $t('verificationCode') }}</div>
+        <van-field class="sms-input" v-model="codeVal" maxlength="6" center clearable label="" :placeholder="$t('verification_code1')">
+          <template #button>
+            <van-button :disabled="flag === 1" @click="handleGetCode" :class="{ 'active-txt': flag === 1 }"
+              class="send-btn" type="default">{{ textVal }}</van-button>
+          </template>
+        </van-field>
+      </div>
+      <div class="delete-btn" @click="handleNext" :class="{ 'disable-btn': !codeVal }">
+        <div class="btn">{{ $t('nextStep') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.phoneNext-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .phoneNext-content {
+    margin-top: 8px;
+
+    .phone-top {
+      padding: 15px 16px;
+      .phone-tips {
+        color: rgba(0, 0, 0, 0.40);
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+      }
+
+      .phone-txt {
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin-bottom: 10px;
+      }
+    }
+    .phone-txts {
+      height: 44px;
+      padding: 20px 16px 4px 16px;
+      color: #1B1B22;
+      font-family: "PingFang SC";
+      font-size: 0.875rem;
+      font-weight: 500;
+    } 
+
+    :deep(.van-cell) {
+      padding: 20px 20px;
+      height: 60px;
+    }
+
+    .sms-input {
+      width: calc(100% - 40px);
+      padding: 12px 0;
+      border-bottom: 1px solid #ebedf0;
+      margin: 0 20px 24px 20px;
+    }
+  }
+
+  .send-btn {
+    background: #F6F6F6;
+    border-radius: 23px;
+    padding: 8px 12px;
+    color: #0095F6;
+    height: 36px;
+    border: none;
+  }
+
+  .active-txt {
+    color: rgba(0, 0, 0, 0.26);
+  }
+
+  .delete-btn {
+    cursor: pointer;
+    height: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    border-radius: 14px;
+    background: #1B1B22;
+    margin: 0 20px;
+
+    .btn {
+      color: #FFF;
+      font-family: PingFang SC;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  .disable-btn {
+    background: #F6F6F6;
+
+    .btn {
+      color: #D1D1D3;
+    }
+  }
+}
+:deep(.van-field__button) {
+  margin-left: 16px;
+}
+</style>
diff --git a/src/views/my/security/setPassword.vue b/src/views/my/security/setPassword.vue
new file mode 100644
index 0000000..3b5418f
--- /dev/null
+++ b/src/views/my/security/setPassword.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { ref } from 'vue'
+import { AppNavBar } from '@/components'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { isValidPassword } from '@/utils/tools'
+import { showToast } from 'vant'
+import { encrypt } from "@/utils/index.js"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const setPasswordRef = ref(null)
+useGrade(setPasswordRef, 3)
+const $api = inject("$api");
+const logOutApi = inject("refreshLogOut");
+const newPassword = ref('')
+const confirmPassword = ref('')
+const inputType2 = ref('password')
+const inputType3 = ref('password')
+const handleSave = async () => {
+  if (!isValidPassword(newPassword.value)) {
+    showToast({ position: 'top', message: t('init_validate_6') })
+    return
+  }
+  if (!isValidPassword(confirmPassword.value)) {
+    showToast({ position: 'top', message: t('init_validate_6') })
+    return
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    showToast({ position: 'top', message: t('twicePwd') })
+    return
+  }
+  const res = await $api.login.setThirdLoginPas({
+    password: encrypt(newPassword.value),
+    code: userInfo.value.phone ? userInfo.value.phone : userInfo.value.email,
+  })
+  if (res.code != 0) return
+  showToast({ position: 'top', message: t('setSuccessfully') })
+  router.push('/home/my/security')
+}
+</script>
+
+<template>
+  <div ref="setPasswordRef" class="setPassword">
+    <AppNavBar :title="$t('init_hint_3')" left-arrow views_grade="thirdly_view" @click-left="router.push('/home/my/security')">
+    </AppNavBar>
+    <div class="setPassword-wrap">
+      <div class="setPassword-content">
+        <div class="password-form">
+          <div class="title-item">{{ $t('newPwd') }}</div>
+          <van-field class="input-item input-items" maxlength="15" :type="inputType2" v-model="newPassword" label=""
+            :placeholder="$t('plsEnterNewPwd')">
+            <template #button>
+              <div class="passBtn" style="display: flex">
+                <IconRemove v-show="newPassword !== ''" class="wp-input-remove" @click="newPassword = ''">
+                </IconRemove>
+                <IconEyeShow class="icon" v-show="inputType2 === 'text'" @click="inputType2 = 'password'"></IconEyeShow>
+                <IconEyeHide class="icon" v-show="inputType2 === 'password'" @click="inputType2 = 'text'"></IconEyeHide>
+              </div>
+            </template>
+          </van-field>
+          <div class="title-item">{{ $t('confirmPassword') }}</div>
+          <van-field class="input-item" maxlength="15" v-model="confirmPassword" :type="inputType3" label="" :placeholder="$t('please_enter_new_password_again')">
+            <template #button>
+              <div class="passBtn" style="display: flex">
+                <IconRemove v-show="confirmPassword !== ''" class="wp-input-remove" @click="confirmPassword = ''">
+                </IconRemove>
+                <IconEyeShow class="icon" v-show="inputType3 === 'text'" @click="inputType3 = 'password'"></IconEyeShow>
+                <IconEyeHide class="icon" v-show="inputType3 === 'password'" @click="inputType3 = 'text'"></IconEyeHide>
+              </div>
+            </template>
+          </van-field>
+          <!-- <div class="empty-line"></div> -->
+          <div class="tips">{{ $t('init_validate_6') }}</div>
+        </div>
+        <div class="send-btn">
+          <van-button :disabled="!(newPassword && confirmPassword)" @click="handleSave"
+            type="default">{{ $t('save') }}</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.setPassword-wrap {
+  background: #FFF;
+  height: 100%;
+  padding-top: 56px;
+  width: 100%;
+
+  .setPassword-content {
+    padding: 8px 0 30px 0;
+    height: 100%;
+    overflow-y: auto;
+
+    .password-form {
+      .title-item {
+        height: 44px;
+        padding: 12px 0 12px 16px;
+        color: #1B1B22;
+        font-family: "PingFang SC";
+        font-size: 0.875rem;
+        font-weight: 600;
+      }
+
+      .input-item {
+        height: 60px;
+      }
+
+      :deep(.van-cell) {
+        padding: 19px 16px;
+      }
+
+      .input-items {
+        margin-bottom: 12px;
+      }
+
+      .van-cell:after {
+        border-bottom: 1px solid #F2F4F5;
+        left: 16px;
+        right: 16px;
+      }
+
+      .empty-line {
+        height: 1px;
+        background: #F2F4F5;
+      }
+
+      .tips {
+        color: #76767A;
+        font-family: "PingFang SC";
+        font-size: 0.75rem;
+        font-weight: 400;
+        margin: 16px 16px 12px 16px;
+      }
+
+      .wp-input-remove {
+        margin-right: 20px;
+      }
+    }
+
+
+    .send-btn {
+      display: flex;
+      align-self: center;
+      align-items: center;
+      justify-content: center;
+      margin-top: 150px;
+      width: 100%;
+      padding: 0 20px;
+
+      :deep(.van-button) {
+        width: 100%;
+        height: 52px;
+        line-height: 52px;
+        border-radius: 14px;
+        font-size: 1rem;
+        color: #FFFFFF;
+        font-family: PingFang SC;
+        font-weight: 500;
+        border: none;
+        background: #1B1B22;
+
+        &::before {
+          height: 52px;
+        }
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/views/my/typeface/index.vue b/src/views/my/typeface/index.vue
new file mode 100644
index 0000000..f12ef5a
--- /dev/null
+++ b/src/views/my/typeface/index.vue
@@ -0,0 +1,270 @@
+<script setup>
+import { ref, watchEffect, reactive, onMounted } from "vue";
+import { useRouter, onBeforeRouteLeave } from "vue-router";
+import { AppNavBar } from "@/components";
+import { copyUserId } from "@/utils/tools";
+import { useI18n } from "vue-i18n";
+import { useGrade } from "@/utils/levelConfig";
+import { showToast, showConfirmDialog } from "vant";
+import PreviewContent from "../appearance/previewContent.vue";
+import { useFriendStore } from '@/stores/modules/membership-info'
+const friendState = useFriendStore()
+const { t } = useI18n();
+const router = useRouter();
+const $api = inject("$api");
+const fontConmontRef = ref(null);
+useGrade(fontConmontRef, 2);
+const sliderValue = ref();
+const messageContent = ref("");
+// 滑块组件实例
+const sliderRef = ref();
+// 保存【按钮】的高亮展示状态 初始化为 false
+const isActive = ref(false);
+// 存储的滑块默认值
+const initializeValue = ref();
+
+// 设置字体大小
+const handleSetFontSize = async (val) => {
+  const params = {
+    user_id: localStorage.getItem("user_id"),
+    font_size: sliderValue.value,
+  };
+  const res = await $api.setting.setGlobalFontSize(params);
+  if (res.code !== 0) return;
+  console.error("设置字体大小", res);
+};
+
+// 获取用户配置
+const getUserSettings = async () => {
+  const params = {
+    user_id: localStorage.getItem("user_id"),
+  };
+  const res = await $api.setting.getUserInfoSettings(params);
+  if (res.code !== 0) return;
+  // 设置字体大小
+  sliderValue.value = res.data?.fontSize || 16;
+  // 将全局字体大小存储到pinia中
+  friendState.seGlobalFontSize(sliderValue.value)
+  // 对后台获取的值进行克隆一份用于保存按钮高亮展示
+  initializeValue.value = res.data?.fontSize || 16;
+  const html = document.querySelector("html");
+  // 动态设置根元素的字体大小
+  html.style.fontSize = `${sliderValue.value}px`;
+};
+
+// 根据滑块来设置字体大小
+const onSliderChange = async (value) => {
+  // 设置字体大小
+  const html = document.querySelector("html");
+  // 动态设置根元素的字体大小
+  html.style.fontSize = `${value}px`;
+};
+
+// 添加滑块刻度
+const addTicks = async () => {
+  const slider = sliderRef.value.$el;
+  const ticksContainer = document.createElement("div");
+  ticksContainer.className = "ticks-container";
+  // 添加左侧文字
+  const leftText = document.createElement("div");
+  leftText.className = "slider-text slider-text-left";
+  leftText.textContent = "A";
+  slider.appendChild(leftText);
+  // 添加右侧文字
+  const rightText = document.createElement("div");
+  rightText.className = "slider-text slider-text-right";
+  rightText.textContent = "A";
+  slider.appendChild(rightText);
+  // 计算刻度线应该出现的位置
+  const min = sliderRef.value.min;
+  const max = sliderRef.value.max;
+  const step = sliderRef.value.step;
+  const tickCount = (max - min) / step + 1;
+  for (let i = 0; i < tickCount; i++) {
+    const tickValue = min + i * step;
+    const tick = document.createElement("span");
+    tick.className = "tick";
+    const position = ((tickValue - min) / (max - min)) * 100;
+    tick.style.left = `${position}%`;
+    // 判断是否为16
+    if (tickValue === 16) {
+      const tickText = document.createElement("div");
+      tickText.className = "tick-text";
+      tickText.textContent = t("defaultText");
+      tick.appendChild(tickText);
+    }
+    ticksContainer.appendChild(tick);
+  }
+  slider.appendChild(ticksContainer);
+};
+
+// 保存
+const handleSave = async () => {
+  await handleSetFontSize();
+  showToast({ position: "top", message: t("saveSuccessfully") });
+  // 重置高亮状态
+  isActive.value = false;
+};
+// 返回
+const handleBack = async () => {
+  // 判断值是否修改,如果修改则弹框,不修改则不弹框
+  if (!isActive.value) {
+    router.push("/home/my");
+    return;
+  }
+  try {
+    await showConfirmDialog({
+      title: t("dialog_tip1"),
+      cancelButtonText: t("notSet"),
+      confirmButtonText: t("saveAndBack"),
+      message: t("changeSaveTip"),
+    });
+    await handleSave();
+    router.push("/home/my");
+  } catch (e) {
+    await getUserSettings();
+    router.push("/home/my");
+  }
+};
+
+// 当滑块依赖变化的时候对比新值和旧值
+watchEffect(() => {
+  if (sliderValue.value != initializeValue.value) {
+    // 当 sliderValue 发生变化时，设置 isActive 为 true
+    isActive.value = true;
+  } else {
+    isActive.value = false;
+  }
+});
+
+// 在页面即将离开时执行的逻辑
+onBeforeRouteLeave(async (to, from, next) => {
+  // 检查是否在当前页面中
+  if (from.path === "/home/my/typeface") {
+    console.log("用户即将离开当前页面");
+    // 执行离开当前页面时的逻辑
+    await getUserSettings();
+  }
+  next(); // 继续导航
+});
+
+// 挂载初始化
+onMounted(async () => {
+  await getUserSettings();
+  await addTicks();
+});
+</script>
+
+<template>
+  <div class="typeface" ref="fontConmontRef">
+    <span :class="{ active: isActive }">
+      <AppNavBar
+        :title="$t('fontFace')"
+        views_grade="secondary_view"
+        :right-text="$t('save')"
+        @click-left="handleBack"
+        @click-right="handleSave"
+      />
+    </span>
+    <div class="typeface-title">{{ $t("skinPreview") }}</div>
+    <div class="preview-wrapper">
+      <PreviewContent imgPath="@/assets/chatbg.png" :text="$t('fontSizePreview')" />
+    </div>
+    <div class="typeface-footer">
+      <div class="ttl">{{ $t("appFontSize") }}</div>
+      <div class="slider-with-ticks">
+        <van-slider
+          ref="sliderRef"
+          v-model="sliderValue"
+          @change="onSliderChange"
+          :max="18"
+          :step="1"
+          :min="14"
+        >
+        </van-slider>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.typeface {
+  background: #fff;
+  height: 100%;
+  padding: 56px 16px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  &-title {
+    height: 44px;
+    line-height: 44px;
+    padding-left: 25px;
+    color: rgba(27, 27, 34, 1);
+    font-weight: 500;
+    font-size: 0.875rem;
+  }
+  .preview-wrapper {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+  // 高亮保存按钮
+  .active {
+    :deep(.van-nav-bar__text) {
+      color: #0095f6;
+    }
+  }
+  &-footer {
+    padding: 0 45px 20px;
+    margin-top: 10px;
+    .ttl {
+      color: #1b1b22;
+      font-weight: bold;
+      padding: 20px 0;
+      font-size: 1rem;
+    }
+    .van-slider {
+      margin-top: 40px;
+      /deep/ .van-slider__bar {
+        z-index: 11;
+      }      
+      /deep/ .ticks-container {
+        position: relative;
+        height: 2px; /* 刻度线的高度 */
+        width: 100%;
+      }
+      /deep/ .tick {
+        position: absolute;
+        width: 1px; /* 刻度线的宽度 */
+        height: 8px; /* 刻度线的高度 */
+        background-color: #000; /* 刻度线的颜色 */
+        top: 50%; /* 将刻度线垂直居中 */
+        transform: translate(-50%, -50%);
+        opacity: 0.4;
+        .tick-text {
+          position: absolute;
+          top: -40px;
+          font-size: 0.75rem;
+          color: #666;
+          width: 35px;
+          left: -12px;
+          font-weight: 400;
+        }
+      }
+      /deep/ .slider-text {
+        position: absolute;
+        bottom: -8px; /* 调整垂直位置 */
+        color: rgba(27, 27, 34, 1); /* 调整字体颜色 */
+        font-weight: 600;
+      }
+      :deep(.slider-text-left) {
+        left: -30px;
+        font-size: 0.875rem;
+      }
+      :deep(.slider-text-right) {
+        right: -30px;
+        font-size: 1.125rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sw.produce.min.2.1.6.js b/src/views/sw.produce.min.2.1.6.js
new file mode 100644
index 0000000..67a18b5
--- /dev/null
+++ b/src/views/sw.produce.min.2.1.6.js
@@ -0,0 +1 @@
+(()=>{"use strict";const t={cache:"no-cache",headers:{},redirect:"follow",mode:"cors"};function e(e,s="POST",a,n,i="json"){var o;const c=n||{};const r=Object.assign(t,{method:s});Object.keys(t.headers||{}).length>0&&(r.headers=t.headers);const l=Object.assign(r,c);if(l.method=null===(o=l.method)||void 0===o?void 0:o.toUpperCase(),"GET"===l.method){if(a){let t="";const s=/([?&])_=[^&]*/,n=/\?/;"object"==typeof a&&(t=function(t){let e="";for(const s in t)t.hasOwnProperty(s)&&(e+=s+"="+encodeURIComponent(t[s])+"&");return e.slice(0,-1)}(a)),e=s.test(e)?e.replace(s,"$1"+t):e+(n.test(e)?"&":"?")+t}}else[FormData,ArrayBuffer,Blob].filter((t=>a instanceof t)).length>0?l.body=a:(l.headers=Object.assign({"Content-Type":"application/json"},l.headers),a&&(l.body="string"==typeof a?a:JSON.stringify(a)));return fetch(e,l).then((t=>{const{status:e}=t;if(e>=200&&e<400){let e;switch(i){case"json":e=new Promise((e=>{t.text().then((t=>{try{e(JSON.parse(t))}catch(s){e(t)}}))}));break;case"text":e=t.text();break;case"blob":e=t.blob();break;case"arraybuffer":e=t.arrayBuffer();break;default:e=t.json()}return e}return Promise.reject(t)})).catch((t=>Promise.reject(t)))}const s=(t,s,a,n)=>e(t,"POST",s,a,n);function a(t,e,a="W3Push"){t.forEach((t=>{const e=(new Date).getTime()/1e3|0;t.itime=e,t.msg_id&&(t.msg_id=t.msg_id.toString())}));const n={platform:"b",uid:e.engagelab_uid,app_key:e.engagelab_appkey,channel:a,content:t};s("https://webpushstat.api.engagelab.cc/v4/web/report",n,{headers:{Authorization:"Basic "+btoa(n.uid+":"+e.engagelab_passwd)}})}self.addEventListener("install",(function(){self.skipWaiting()})),self.addEventListener("message",(function(t){const e=t.data||{code:0,msg:{}};var n;9999===e.code&&(n=e.msg,s("https://webpushstat.api.engagelab.cc/v4/web/report",n.data,{headers:{Authorization:n.Authorization}})),6666===t.data.code&&a([{type:"msg_status",msg_id:e.msg.msg_id,result:3018}],e.msg)})),self.addEventListener("activate",(function(){return self.clients.claim()})),self.addEventListener("notificationclick",(function(t){const e=t.notification.data;if(e){const s="MTPush"===e.engagelab_mesg_type?"MTPush":"W3Push";a([{type:"msg_status",msg_id:t.notification.tag,result:3002}],e,s);let n=null==e?void 0:e.engagelab_url;t.action&&e.engagelab_action_urls&&e.engagelab_action_urls[t.action]&&(n=e.engagelab_action_urls[t.action]),n&&(t.notification.close(),t.waitUntil(self.clients.openWindow(n)))}})),self.addEventListener("notificationclose",(function(t){})),self.addEventListener("push",(function(t){if(!t.data)return;const e=t.data.json();var s;if(e.locationTestDempWebPush52755665)self.registration.showNotification(e.title,e);else if(a([{type:"msg_status",msg_id:e.tag,result:3001}],e.data),self.clients.matchAll().then((t=>{t&&t.length&&t.forEach((t=>{t.postMessage(e)}))})),(s=e.data.ntf_or_msg)&&(1===s||3===s)){a([{type:"msg_status",msg_id:e.tag,result:3018}],e.data);const s=self.registration.showNotification(e.title,e);t.waitUntil(s)}}))})();
\ No newline at end of file
diff --git a/src/views/transmit/contactPerson.vue b/src/views/transmit/contactPerson.vue
new file mode 100644
index 0000000..dc00e7f
--- /dev/null
+++ b/src/views/transmit/contactPerson.vue
@@ -0,0 +1,698 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { ref, onMounted } from 'vue'
+import { AppNavBar, CommonLottie } from '@/components'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant';
+import pinyin from 'js-pinyin'
+import shanchu from "@/assets/chanchu.svg"
+import shanchu2 from "@/assets/svg/shanchu2.svg"
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import defaultSearch from '@/assets/search-icon.svg'
+import { parseMsg } from '@/utils/tools'
+const contactPersonRef = ref(null)
+useGrade(contactPersonRef, 4)
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { groupInfo, myGroupInfo, groupMemberInfo, contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setGroupMemberInfo, updateGroupMemberInfo } = contactStore
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { userInfo, groupChatConfig, privateChatConfig,appConfig } = storeToRefs(userStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const searchValue = ref('')
+const dataList = ref([])
+const groupOwnerList = ref([])
+const adminList = ref([])
+const isEdit = ref(false)
+const actionShow = ref(false)
+const currentUserID = ref('')
+const actions = [
+    { id: 1, name: t('deleteMemberTitle'), color: '#ee0a24' },
+]
+const searchList = ref([])
+const indexList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'])
+const searchForm = ref('')
+
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const isMultipleChoice = ref(false)
+// 选中的列表
+const showTransmitDialog = ref(false)
+const selectChatDataList = ref([])
+
+const max_count = computed(()=> appConfig.value.batch_send?.transmit_limit || 0)
+
+onMounted(async () => {
+    console.log('groupChatConfig.value',groupChatConfig.value);
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        isMultipleChoice.value = groupChatConfig.value.isMultipleChoice
+        // isChecked.value = groupChatConfig.value.contactChecked
+        let groupChecked = groupChatConfig.value.groupChecked || []
+        let contactChecked = groupChatConfig.value.contactChecked || []
+        isChecked.value = [...groupChecked,...contactChecked]
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        isMultipleChoice.value = privateChatConfig.value.isMultipleChoice
+        // isChecked.value = privateChatConfig.value.contactChecked
+        let groupChecked = privateChatConfig.value.groupChecked || []
+        let contactChecked = privateChatConfig.value.contactChecked || []
+        isChecked.value = [...groupChecked,...contactChecked]
+    }
+    try {
+        const userIDs = contactList.value.map((item) => item.userID)
+        const res = await $api.login.userLoginStatus({
+            userIDs: userIDs
+        })
+        if (res.code != 0) return
+        const obj = {}
+        if (Array.isArray(res.data)) {
+            res.data.forEach((item) => {
+                obj[item.userID] = item
+            })
+        }
+        contactList.value.forEach((item) => {
+            item.showName = item.remark !== '' ? item.remark : item.nickname
+            item.checked = false
+            item.online = obj[item.userID]['status'] === 1 ? true : false
+        })
+    } catch (error) {
+        console.log(error)
+    }
+})
+
+// 分组函数
+const filterData = (list) => {
+    let ortherArr = []
+    list.forEach(el => {
+        el.pinyin = pinyin.getFullChars(getCurrentTitle(el)) || el.nickname
+    })
+    let letterArray = [];
+    for (let i = 65; i < 91; i++) {
+        letterArray.push(String.fromCharCode(i));
+    }
+    let newCities = []
+    letterArray.forEach(item => {
+        newCities.push({
+            type: `${item}`,
+            list: list.filter(item1 => item1.pinyin.substring(0, 1).toUpperCase() === `${item}`)
+        })
+    })
+    list.forEach(el => {
+        if (!letterArray.includes(el.pinyin.substring(0, 1).toUpperCase())) {
+            ortherArr.push(el)
+        }
+    })
+    newCities.push({
+        type: '#',
+        list: ortherArr
+    })
+    newCities = newCities.filter(item => item.list.length)
+    console.log(newCities);
+    return newCities;
+}
+const getCurrentTitle = (val) => {
+    return val.showName ? val.showName : val.nickname
+}
+
+const showList = computed(() => {
+    let arr = []
+    const res = contactList.value.filter(item => {
+        let str = item.nickname + item.remark
+        return str.indexOf(searchValue.value) != -1
+    })
+    arr = filterData(res) || []
+    return arr || []
+})
+watch(() => showList.value, (newValue, oldValue) => {
+    // 在这里可以执行相应的操作
+    indexList.value = showList.value.map(item => item.type)
+}, { immediate: true });
+
+const toggle = (item, index) => {
+    console.log('checkboxRefs.value', checkboxRefs.value, showList.value);
+    onNumTips()
+    checkboxRefs.value[index].toggle();
+    onUpdate()
+};
+
+// 单选点击
+const selectClick = (item) => {
+    selectChatDataList.value = [item]
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        setGroupChatConfig({
+            ...groupChatConfig.value,
+            chatDataList: [item]
+        })
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        setPrivateChatConfig({
+            ...privateChatConfig.value,
+            chatDataList: [item]
+        })
+    }
+
+    showTransmitDialog.value = true
+}
+const messageDescText = computed(() => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        if (groupChatConfig.value.type == 'group') {
+            //合并转发
+            return t('mergeMessageList');
+        } else if (groupChatConfig.value.type == 'single') {
+            //逐条转发
+            if (groupChatConfig.value.msg.length == 1) {
+                return parseMsg(groupChatConfig.value.msg[0], false, false, false, contactList.value);
+            } else {
+                return t('singleMlCount', { count: groupChatConfig.value.msg.length });
+            }
+        }
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        if (privateChatConfig.value.type == 'group') {
+            //合并转发
+            return t('mergeMessageList');
+        } else if (privateChatConfig.value.type == 'single') {
+            //逐条转发
+            if (privateChatConfig.value.msg.length == 1) {
+                return parseMsg(privateChatConfig.value.msg[0], false, false, false, contactList.value);
+            } else {
+                return t('singleMlCount', { count: privateChatConfig.value.msg.length });
+            }
+        }
+    }
+})
+const chatDataList = computed(() => selectChatDataList.value)
+const handleClick = (type) => {
+    let chatCheckedArr = [] // 已选好友
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...groupChatConfig.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...groupChatConfig.value.chatDataList, ...chatArr],
+        }
+        setGroupChatConfig(item)
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...privateChatConfig.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...privateChatConfig.value.chatDataList, ...chatArr],
+        }
+        setPrivateChatConfig(item)
+    }
+    router.go(-1)
+}
+
+const onToggle = (id) => {
+    let isExist = isChecked.value.includes(id)
+    if (isChecked.value.length >= max_count.value && !isExist) {
+       return showToast({ message: t('selectMax'), position: 'top' })
+    }
+    const index = isChecked.value.indexOf(id);
+    if (index === -1) {
+        isChecked.value.push(id)
+    } else {
+        isChecked.value.splice(index, 1)
+    }
+    onUpdate()
+}
+
+// 是否是群主/群管理员
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+const onNumTips = () => {
+    if (isChecked.value.length >= max_count.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }
+    onUpdate()
+}
+
+const isCheckAll = computed(()=>{
+  const arr = contactList.value.filter(el => isChecked.value.includes(el.userID))
+  return arr.length === contactList.value.length
+})
+// 全选
+const onCheckAll = () => {
+    // 按字母排序之后的数组
+   let sortArr = filterData(contactList.value) || []
+   let filterArr = []
+   if(sortArr.length > 0) {
+    sortArr.forEach(i => {
+        filterArr.push(...i.list)
+    })
+   }
+  // 未勾选的数据
+  const arr = filterArr.filter(el => !isChecked.value.includes(el.userID));
+  arr.forEach(i => {
+    if (isChecked.value.length >= max_count.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }else {
+      isChecked.value.push(i.userID)
+    }
+  })
+  onUpdate()
+  console.log('onCheckAll',arr);
+}
+// 反选
+const onInvertSelect = () => {
+    const newList = contactList.value.map(i => i.userID)
+    const arr = isChecked.value.filter(el => !newList.includes(el))
+    isChecked.value = arr
+    onUpdate()
+}
+
+// 选择项改变数据更新
+const onUpdate = () => {
+    let chatCheckedArr = [] // 已选好友
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...groupChatConfig.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...groupChatConfig.value.chatDataList, ...chatArr],
+        }
+        setGroupChatConfig(item)
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...privateChatConfig.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...privateChatConfig.value.chatDataList, ...chatArr],
+        }
+        setPrivateChatConfig(item)
+    }
+}
+// 监听选择数据
+watch(() => groupChatConfig.value,(newVal) => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        isChecked.value = [...groupChatConfig.value.contactChecked, ...groupChatConfig.value.groupChecked]
+    }
+})
+watch(() => privateChatConfig.value,(newVal) => {
+    if (Object.keys(privateChatConfig.value).length > 0) {
+        isChecked.value = [...privateChatConfig.value.contactChecked, ...privateChatConfig.value.groupChecked]
+    }
+})
+</script>
+
+<template>
+    <div ref="contactPersonRef" class="contact-person">
+        <div class="detail_content">
+            <AppNavBar :title="$t('selectContact')" left-arrow views_grade="fourth_view" @click-left="handleClick" >
+                <template #right>
+                    <span class="confirm" v-if="isMultipleChoice">
+                        <img class="check_all" @click="onCheckAll" src="@/assets/svg/check_all.svg" alt="" v-if="!isCheckAll">
+                        <img class="check_all" @click="onInvertSelect" src="@/assets/svg/check_all_active.svg" alt="" v-else>
+                    </span>
+                </template>
+            </AppNavBar>
+            <div class="contact-person-wrap">
+                <div class="contact-person-content">
+                    <van-search class="search-input" :left-icon="defaultSearch" v-model="searchValue"
+                        :placeholder="$t('search')" />
+                    <van-index-bar v-if="showList.length" class="index-bar" :sticky-offset-top="0"
+                        highlight-color="#0095f6" :index-list="indexList">
+                        <div v-for="item in showList" :key="item.type">
+                            <van-index-anchor :index="item.type" />
+                            <div class="single-choice" v-if="!isMultipleChoice">
+                                <van-cell-group :border="false">
+                                    <van-cell :border="false" v-for="(data, i) in item.list" :key="i"
+                                        :title="getCurrentTitle(data)" @click="selectClick(data)">
+                                        <template #title>
+                                            <div class="avatar">
+                                                <Avatar width="32" height="32" :url="data.faceURL"
+                                                    :name="getCurrentTitle(data)" @updateUrl="url => item.faceURL = url" />
+                                                <div class="dot" v-if="data.online">
+                                                    <div></div>
+                                                </div>
+                                            </div>
+                                            <div class="custom-name">
+                                                <!-- 群管理标识 -->
+                                                <!-- <CommonLottie
+                                                    v-if="showGroupOwner(data.userID) != ''"
+                                                    :isGroup="showGroupOwner(data.userID)"
+                                                    :width="140"
+                                                    :height="56"
+                                                    :showName="getCurrentTitle(data)"
+                                                ></CommonLottie>
+                                                <span class="custom-title" v-if="showGroupOwner(data.userID) === ''">{{ getCurrentTitle(data) }}</span> -->
+                                                <span class="custom-title">{{ getCurrentTitle(data) }}</span>
+                                                <div v-if="searchValue && data.remark" class="custom-nickname">{{$t('nicknames') + ':' + data.nickname }}</div>
+                                            </div>
+                                        </template>
+                                    </van-cell>
+                                </van-cell-group>
+                            </div>
+                            <div class="multiple-choice" v-else>
+                                <van-checkbox-group v-model="isChecked" :border="false" :max="max_count" @change="onChange">
+                                    <van-cell-group inset>
+                                        <!-- @click="toggle(item, i)" -->
+                                        <van-cell clickable :border="false" v-for="(data, i) in item.list" :key="i"
+                                            :title="getCurrentTitle(data)" @click="onToggle(data.userID)">
+                                            <template #title>
+                                                <van-checkbox :name="data.userID" :ref="(el) => (checkboxRefs[i] = el)"
+                                                @click.stop="onNumTips">
+                                                    <template #icon="props">
+                                                        <div class="select1">
+                                                            <img v-if="props.checked"
+                                                                src="@/assets/svg/radio-check.svg" />
+                                                        </div>
+                                                    </template>
+                                                </van-checkbox>
+                                                <div class="avatar">
+                                                    <Avatar width="32" height="32" :url="data.faceURL"
+                                                        :name="getCurrentTitle(data)" @updateUrl="url => item.faceURL = url" />
+                                                    <div class="dot" v-if="data.online">
+                                                        <div></div>
+                                                    </div>
+                                                </div>
+                                                <div class="custom-name">
+                                                    <!-- 群管理标识 -->
+                                                    <!-- <CommonLottie
+                                                        v-if="showGroupOwner(data.userID) != ''"
+                                                        :isGroup="showGroupOwner(data.userID)"
+                                                        :width="140"
+                                                        :height="56"
+                                                        :showName="getCurrentTitle(data)"
+                                                    ></CommonLottie>
+                                                    <span class="custom-title" v-if="showGroupOwner(data.userID) === ''">{{ getCurrentTitle(data) }}</span> -->
+                                                    <span class="custom-title">{{ getCurrentTitle(data) }}</span>
+                                                    <div v-if="searchValue && data.remark" class="custom-nickname">{{$t('nicknames') + ':' + data.nickname }}</div>
+                                                </div>
+                                            </template>
+                                        </van-cell>
+                                    </van-cell-group>
+                                </van-checkbox-group>
+                            </div>
+                        </div>
+                    </van-index-bar>
+                    <div class="empty" v-else>
+                        <!-- <span v-if="!searchForm">{{ $t('cvNotAtUser') }}</span> -->
+                        <span>{{ $t('cantfind',{name:searchValue}) }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <TransmitDataDialog v-model="showTransmitDialog">
+            <div class="wrap-content">
+                <div class="title">{{ $t('sentTo') }}</div>
+                <div class="avatar-wrap" @wheel="onWheel">
+                    <div class="left-content">
+                        <div class="item-wrap" v-for="item in chatDataList" :key="item">
+                            <div class="avatar" :class="{ 'special-item-wrap': chatDataList.length === 1 }">
+                                <Avatar width="32" height="32" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url">
+                                </Avatar>
+                                <div class="name">{{ item.showName }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="content-wrap">{{ messageDescText }}</div>
+            </div>
+        </TransmitDataDialog>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+    :deep(.van-index-bar__sidebar) {
+        right: 15% !important;
+    }
+}
+
+.contact-person {
+    overflow-y: auto;
+    background-color: #fff;
+
+    // position: relative;
+    .detail_content {
+        height: 100%;
+        // position: relative;
+        flex: 1;
+    }
+}
+
+.contact-person-wrap {
+    background: #FFF;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+    position: relative;
+
+    .contact-person-content {
+        // padding-bottom: 66px;
+        height: 100%;
+        flex: 1;
+        overflow: auto;
+
+        :deep(.van-cell) {
+            display: flex;
+            align-items: center;
+            padding-right: 16px;
+
+            .first-cell {
+                :deep(.van-cell) {
+                    height: 40px;
+                }
+            }
+
+            .second-cell {
+                :deep(.van-cell) {
+                    height: 72px;
+                }
+            }
+        }
+
+        .custom-title {
+            // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+            font-family: PingFang SC;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            display: inline-block;
+            width: 246px;
+            white-space: nowrap; 
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+        }
+        .custom-nickname {
+          font-size: 0.75rem;
+          color: #76767A;
+          margin: 2px 0 0 12px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 290px;
+          white-space: nowrap;
+        }
+        :deep(.van-swipe-cell__right) {
+            right: -1px;
+
+            .van-button {
+                width: 70px;
+                height: 56px;
+            }
+        }
+
+        :deep(.van-cell) {
+            height: 56px;
+        }
+
+        .add-cell {
+            :deep(.van-cell__title) {
+                display: flex;
+                align-items: center;
+
+                .custom-title {
+                    width: 250px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    display: inline-block;
+                    // margin-left: 10px;
+                    color: #1B1B22;
+                    font-family: PingFang SC;
+                    font-size: 1rem;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                }
+            }
+        }
+        :deep(.van-swipe-cell__wrapper) {
+            .custom-title {
+                margin-left: 10px;
+            }
+        }
+        :deep(.special-title-name){
+            bottom: 15px !important;
+        }
+    }
+}
+
+:deep(.van-dialog__confirm) {
+    color: #FC5A50;
+}
+
+.search-input {
+    margin: 8px 0;
+
+    :deep(.van-cell) {
+        height: 36px !important;
+    }
+}
+
+.index-bar {
+    :deep(.van-index-bar__sidebar) {
+        color: #A4A4A7;
+    }
+
+    :deep(.van-index-anchor) {
+        font-size: 0.875rem;
+        font-weight: 400;
+        color: #A4A4A7 !important;
+    }
+}
+
+:deep(.van-cell__title) {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.van-search__action) {
+    color: #0095F6;
+}
+
+:deep(.van-cell) {
+    .van-cell__title {
+        .custom-title {
+            margin-left: 10px;
+        }
+    }
+}
+
+:deep(.van-badge__wrapper) {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.van-cell__value) {
+    padding-right: 10px;
+}
+
+.select1 {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    margin-right: 8px;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border-radius: 50%;
+    border: 1px solid #d9d9d9;
+}
+
+:deep(.van-cell-group--inset) {
+    margin: auto;
+}
+
+:deep(.van-checkbox__icon) {
+    height: unset;
+}
+
+.avatar {
+    position: relative;
+    display: flex;
+
+    .dot {
+        position: absolute;
+        top: 0;
+        right: -4px;
+        padding: 2px;
+        background: #fff;
+        border-radius: 50%;
+
+        div {
+            width: 8px;
+            height: 8px;
+            background: #43FA51;
+            border-radius: 50%;
+            // position: absolute;
+        }
+    }
+}
+
+.empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+}
+
+.contact-person-content::-webkit-scrollbar {
+    display: none;
+}
+</style>
diff --git a/src/views/transmit/selectGroupChat.vue b/src/views/transmit/selectGroupChat.vue
new file mode 100644
index 0000000..f96ae1b
--- /dev/null
+++ b/src/views/transmit/selectGroupChat.vue
@@ -0,0 +1,464 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, TransmitDataDialog } from '@/components/index'
+import IMG from '@/assets/chatbg.png'
+import defaultSearch from '@/assets/search-icon.svg'
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user.js";
+import { parseMsg } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+import { showToast } from 'vant';
+
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { chatList, contactList } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { groupChatConfig, privateChatConfig,appConfig } = storeToRefs(userStore);
+// 选中的列表
+const showTransmitDialog = ref(false)
+const selectChatDataList = ref([])
+
+const selectGroupChatRef = ref(null)
+useGrade(selectGroupChatRef, 4)
+const router = useRouter()
+const route = useRoute()
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const isMultipleChoice = ref(false)
+const list = ref([])
+let page_num = ref(1)
+const max_count = computed(()=> appConfig.value.batch_send?.transmit_limit || 0)
+
+
+onMounted(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    isMultipleChoice.value = groupChatConfig.value.isMultipleChoice
+    // isChecked.value = groupChatConfig.value.groupChecked
+    let groupChecked = groupChatConfig.value.groupChecked || []
+    let contactChecked = groupChatConfig.value.contactChecked || []
+    isChecked.value = [...groupChecked,...contactChecked]
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    isMultipleChoice.value = privateChatConfig.value.isMultipleChoice
+    let groupChecked = privateChatConfig.value.groupChecked || []
+    let contactChecked = privateChatConfig.value.contactChecked || []
+    isChecked.value = [...groupChecked,...contactChecked]
+  }
+  if(groupChatConfig.value && groupChatConfig.value.groupMax) {
+    }
+})
+const showList = computed(() => {
+  let arr = []
+  arr = list.value.filter(item => item.groupName.indexOf(searchForm.value) != -1).slice(0, (page_num.value * 10))
+  return arr || []
+})
+const getData = () => {
+  list.value = chatList.value || []
+}
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (showList.value.length >= list.value.length) {
+    finished.value = true;
+  }
+  console.log('showList+list', list.value);
+}
+const toggle = (item, index) => {
+  onNumTips()
+  checkboxRefs.value[index].toggle();
+  onUpdate()
+};
+const onStop = () => {
+}
+// 单选点击
+const selectClick = (item) => {
+  selectChatDataList.value = [item]
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      chatDataList: [item]
+    })
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      chatDataList: [item]
+    })
+  }
+  showTransmitDialog.value = true
+}
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+getData()
+
+const messageDescText = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    if (groupChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (groupChatConfig.value.type == 'single') {
+      //逐条转发
+      if (groupChatConfig.value.msg.length == 1) {
+        return parseMsg(groupChatConfig.value.msg[0], false, false, false, contactList.value);
+      } else {
+        return  t('singleMlCount', { count: groupChatConfig.value.msg.length });
+      }
+    }
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    if (privateChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (privateChatConfig.value.type == 'single') {
+      //逐条转发
+      if (privateChatConfig.value.msg.length == 1) {
+        return parseMsg(privateChatConfig.value.msg[0], false, false, false, contactList.value);
+      } else {
+        return  t('singleMlCount', { count: privateChatConfig.value.msg.length });
+      }
+    }
+  }
+})
+const chatDataList = computed(() => selectChatDataList.value)
+const handleClick = (type) => {
+  let chatCheckedArr = [] // 已选好友
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    let chatArr = []
+    list.value.forEach(item => {
+      const index = isChecked.value.indexOf(item.groupID)
+      if (index != -1) {
+        chatArr.push(item)
+        chatCheckedArr.push(item.groupID)
+      }
+    })
+    console.log('chatCheckedArr',chatCheckedArr);
+    let item = {
+      ...groupChatConfig.value,
+      // groupChecked: isChecked.value,
+      groupChecked: chatCheckedArr,
+      chatDataList: [...groupChatConfig.value.chatDataList, ...chatArr],
+    }
+    setGroupChatConfig(item)
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    let chatArr = []
+    list.value.forEach(item => {
+      const index = isChecked.value.indexOf(item.groupID)
+      if (index != -1) {
+        chatArr.push(item)
+        chatCheckedArr.push(item.groupID)
+      }
+    })
+    let item = {
+      ...privateChatConfig.value,
+      // groupChecked: isChecked.value,
+      groupChecked: chatCheckedArr,
+      chatDataList: [...privateChatConfig.value.chatDataList, ...chatArr],
+    }
+    setPrivateChatConfig(item)
+  }
+  router.go(-1)
+}
+
+const onNumTips = () => {
+  if (isChecked.value.length >= max_count.value) {
+    showToast({ message: t('selectMax'), position: 'top' })
+  }
+  onUpdate()
+}
+
+const isCheckAll = computed(()=>{
+  const arr = list.value.filter(el => isChecked.value.includes(el.groupID))
+  return arr.length === list.value.length
+})
+// 全选
+const onCheckAll = () => {
+  // 未勾选的数据
+  const arr = list.value.filter(el => !isChecked.value.includes(el.groupID));
+  arr.forEach(i => {
+    if (isChecked.value.length >= max_count.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }else {
+      isChecked.value.push(i.groupID)
+    }
+  })
+  onUpdate()
+}
+// 反选
+const onInvertSelect = () => {
+  const newList = list.value.map(i => i.groupID)
+  const arr = isChecked.value.filter(el => !newList.includes(el))
+  isChecked.value = arr
+  onUpdate()
+}
+
+// 选择项改变数据更新
+const onUpdate = () => {
+  let chatCheckedArr = [] // 已选好友
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    let chatArr = []
+    list.value.forEach(item => {
+      const index = isChecked.value.indexOf(item.groupID)
+      if (index != -1) {
+        chatArr.push(item)
+        chatCheckedArr.push(item.groupID)
+      }
+    })
+    console.log('chatCheckedArr',chatCheckedArr);
+    let item = {
+      ...groupChatConfig.value,
+      // groupChecked: isChecked.value,
+      groupChecked: chatCheckedArr,
+      chatDataList: [...groupChatConfig.value.chatDataList, ...chatArr],
+    }
+    setGroupChatConfig(item)
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    let chatArr = []
+    list.value.forEach(item => {
+      const index = isChecked.value.indexOf(item.groupID)
+      if (index != -1) {
+        chatArr.push(item)
+        chatCheckedArr.push(item.groupID)
+      }
+    })
+    let item = {
+      ...privateChatConfig.value,
+      // groupChecked: isChecked.value,
+      groupChecked: chatCheckedArr,
+      chatDataList: [...privateChatConfig.value.chatDataList, ...chatArr],
+    }
+    setPrivateChatConfig(item)
+  }
+}
+// 监听选择数据
+watch(() => groupChatConfig.value,(newVal) => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        isChecked.value = [...groupChatConfig.value.contactChecked, ...groupChatConfig.value.groupChecked]
+    }
+})
+watch(() => privateChatConfig.value,(newVal) => {
+    if (Object.keys(privateChatConfig.value).length > 0) {
+        isChecked.value = [...privateChatConfig.value.contactChecked, ...privateChatConfig.value.groupChecked]
+    }
+})
+</script>
+
+<template>
+  <div class="select-group-chat" ref="selectGroupChatRef">
+    <div class="content">
+      <AppNavBar :title="$t('selectGroup')" views_grade="fourth_view" left-arrow @click-left="handleClick" >
+        <template #right>
+          <span class="confirm" v-if="isMultipleChoice">
+            <img class="check_all" @click="onCheckAll" src="@/assets/svg/check_all.svg" alt="" v-if="!isCheckAll">
+            <img class="check_all" @click="onInvertSelect" src="@/assets/svg/check_all_active.svg" alt="" v-else>
+          </span>
+        </template>
+      </AppNavBar>
+      <div class="select-search">
+        <van-search v-model="searchForm" class="c-search" :left-icon="defaultSearch" :placeholder="$t('search')" />
+      </div>
+      <div class="recent-chat">
+        <div class="chat-content" v-if="showList.length">
+          <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+            <div class="multiple-choice" v-if="isMultipleChoice">
+              <van-checkbox-group v-model="isChecked" :border="false" :max="max_count">
+                <van-cell-group inset>
+                  <van-cell clickable :border="false" :title="item.groupName" v-for="(item, i) in showList"
+                    :key="item.groupID" @click="toggle(item, i)">
+                    <template #title>
+                      <van-checkbox :name="item.groupID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop="onNumTips">
+                        <template #icon="props">
+                          <div class="select1">
+                            <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                          </div>
+                        </template>
+                      </van-checkbox>
+                      <Avatar width="48" height="48" :is-group="true" :url="item.faceURL" :name="item.groupName" @updateUrl="url => item.faceURL = url">
+                      </Avatar>
+                      <div class="chat-name">
+                        <span class="chat-title">{{ item.groupName }}</span>
+                      </div>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+              </van-checkbox-group>
+            </div>
+            <div class="single-choice" v-else>
+              <van-cell-group :border="false">
+                <van-cell :border="false" :title="item.groupName" v-for="(item, index) in showList" :key="item.groupID"
+                  @click="selectClick(item)">
+                  <template #title>
+                    <Avatar width="48" height="48" :is-group="true" :url="item.faceURL" :name="item.groupName" @updateUrl="url => item.faceURL = url"></Avatar>
+                    <div class="chat-name">
+                      <span class="chat-title">{{ item.groupName }}</span>
+                    </div>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </div>
+          </van-list>
+        </div>
+        <div class="empty" v-else>
+          <!-- <span v-if="!searchForm">{{ $t('cvNotAtUser') }}</span> -->
+          <span>{{ $t('notGroupFound',{name:searchForm}) }}</span>
+        </div>
+      </div>
+    </div>
+    <TransmitDataDialog v-model="showTransmitDialog">
+      <div class="wrap-content">
+        <div class="title">{{ $t('sentTo') }}</div>
+        <div class="avatar-wrap" @wheel="onWheel">
+          <div class="left-content">
+            <div class="item-wrap" v-for="item in chatDataList" :key="item">
+              <div class="avatar" :class="{ 'special-item-wrap': chatDataList.length === 1 }">
+                <Avatar width="32" height="32" :url="item.faceURL" :is-group="true" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                <div class="name">{{ item.groupName }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-wrap">{{ messageDescText }}</div>
+      </div>
+    </TransmitDataDialog>
+  </div>
+</template>
+
+<style scoped lang="less">
+.select-group-chat {
+  background-color: #fff;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+
+    .select-search {
+      padding: 0 10px;
+    }
+
+    .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+    }
+
+    .multiple {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .recent-chat {
+      padding: 0 16px;
+      overflow: auto;
+      height: calc(100% - 60px);
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content {
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 10px 0;
+
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chat-content::-webkit-scrollbar,
+  .recent-chat::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/transmit/transmitFriendGroup.vue b/src/views/transmit/transmitFriendGroup.vue
new file mode 100644
index 0000000..dd623d8
--- /dev/null
+++ b/src/views/transmit/transmitFriendGroup.vue
@@ -0,0 +1,230 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, TransmitDataDialog } from '@/components/index'
+import IMG from '@/assets/chatbg.png'
+import defaultSearch from '@/assets/search-icon.svg'
+import { useContactStore } from "@/stores/contact";
+import { storeToRefs } from 'pinia'
+import { useUserStore } from "@/stores/user.js";
+import { parseMsg } from '@/utils/tools'
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+const $api = inject("$api");
+const friendGroupRef = ref(null)
+useGrade(friendGroupRef, 4)
+
+const contactStore = useContactStore();
+const { chatList } = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { groupChatConfig, privateChatConfig } = storeToRefs(userStore);
+// 选中的列表
+const selectChatDataList = ref([])
+
+const router = useRouter()
+const route = useRoute()
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const isMultipleChoice = ref(false)
+const list = ref([])
+let page_num = ref(1)
+onMounted(() => {
+})
+
+const groupList = ref([])
+const getList = async () => {
+  const res = await $api.contact.getFriendsGroupList()
+  if (res.code != 0) return
+  groupList.value = res.data
+}
+const showList = computed(() => {
+  let arr = []
+  arr = groupList.value.filter(item => item.group_name.indexOf(searchForm.value) != -1).slice(0, (page_num.value * 10))
+  return arr || []
+})
+const onLoad = () => {
+  page_num.value++;
+  loading.value = false;
+  if (showList.value.length >= list.value.length) {
+    finished.value = true;
+  }
+  console.log('showList+list', list.value);
+}
+const toggle = (item, index) => {
+  router.replace(`/home/dialogue/transmitPage/transmitGroupDetails?id=${item.id}`)  
+};
+
+const handleClick = (type) => {
+  router.replace('/home/dialogue/transmitPage')
+}
+
+
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+getList()
+</script>
+
+<template>
+  <div class="friend-group" ref="friendGroupRef">
+    <div class="content">
+      <AppNavBar :title="$t('select_group')" views_grade="fourth_view" left-arrow @click-left="handleClick"></AppNavBar>
+      <div class="recent-chat">
+        <div class="chat-content" v-if="showList.length">
+          <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+            <div class="multiple-choice">
+              <van-cell clickable :border="false" :title="item.group_name" v-for="(item, i) in showList"
+                    :key="item.id" @click="toggle(item, i)">
+                <template #title>
+                  <div class="group-name">{{item.group_name}}</div>
+                </template>
+                <template #right-icon>
+                  <span class="custom-number">{{ item.member_total }}</span>
+                  <img class="notice-value-link" src="@/assets/right-small1.svg" alt="">
+                </template>
+              </van-cell>
+            </div>
+          </van-list>
+        </div>
+        <div class="empty" v-else>
+          <EmptyData :description="$t('createdGroup')"></EmptyData>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.friend-group {
+  background-color: #fff;
+  height: 100%;
+  .confirm {
+    color: #0095F6;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+
+    .select-search {
+      padding: 0 10px;
+    }
+
+    .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+    }
+
+    .multiple {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .recent-chat {
+      // padding: 0 16px;
+      overflow: auto;
+      height: calc(100% - 60px);
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content {
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 19px 16px;
+          border-bottom: 1px solid #F2F4F5;
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        .group-name {
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+
+  .chat-content::-webkit-scrollbar,
+  .recent-chat::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/transmit/transmitGroupDetails.vue b/src/views/transmit/transmitGroupDetails.vue
new file mode 100644
index 0000000..9a32366
--- /dev/null
+++ b/src/views/transmit/transmitGroupDetails.vue
@@ -0,0 +1,650 @@
+<script setup>
+import { useGrade } from '@/utils/levelConfig'
+import { ref, onMounted } from 'vue'
+import { AppNavBar, CommonLottie } from '@/components'
+import { useRouter, useRoute } from 'vue-router'
+import { showToast } from 'vant';
+import pinyin from 'js-pinyin'
+import shanchu from "@/assets/chanchu.svg"
+import shanchu2 from "@/assets/svg/shanchu2.svg"
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useUserStore } from "@/stores/user";
+import { useContactStore } from "@/stores/contact";
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from 'pinia'
+import defaultSearch from '@/assets/search-icon.svg'
+import { parseMsg } from '@/utils/tools'
+const transmitGroupDetailsRef = ref(null)
+useGrade(transmitGroupDetailsRef, 4)
+const { t } = useI18n()
+const contactStore = useContactStore();
+const { groupInfo, myGroupInfo, groupMemberInfo, contactList, allGroupOwnerOrAdmin } = storeToRefs(contactStore);
+const { setGroupMemberInfo, updateGroupMemberInfo } = contactStore
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig } = userStore;
+const { userInfo, groupChatConfig, privateChatConfig,appConfig } = storeToRefs(userStore);
+const OpenIM = getSDK()
+const $api = inject("$api");
+const router = useRouter()
+const route = useRoute()
+const searchValue = ref('')
+const searchForm = ref('')
+
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const isMultipleChoice = ref(false)
+// 选中的列表
+const showTransmitDialog = ref(false)
+const selectChatDataList = ref([])
+
+const max_count = computed(()=> appConfig.value.batch_send?.transmit_limit || 0)
+onMounted(async () => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        isMultipleChoice.value = groupChatConfig.value.isMultipleChoice
+        // isChecked.value = groupChatConfig.value.contactChecked
+        let groupChecked = groupChatConfig.value.groupChecked || []
+        let contactChecked = groupChatConfig.value.contactChecked || []
+        isChecked.value = [...groupChecked,...contactChecked]
+        // isChecked.value = [...groupChatConfig.value.groupChecked,...groupChatConfig.value.contactChecked]
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        isMultipleChoice.value = privateChatConfig.value.isMultipleChoice
+        // isChecked.value = privateChatConfig.value.contactChecked
+        let groupChecked = privateChatConfig.value.groupChecked || []
+        let contactChecked = privateChatConfig.value.contactChecked || []
+        isChecked.value = [...groupChecked,...contactChecked]
+    }
+    try {
+        const userIDs = contactList.value.map((item) => item.userID)
+        const res = await $api.login.userLoginStatus({
+            userIDs: userIDs
+        })
+        if (res.code != 0) return
+        const obj = {}
+        if (Array.isArray(res.data)) {
+            res.data.forEach((item) => {
+                obj[item.userID] = item
+            })
+        }
+        contactList.value.forEach((item) => {
+            item.showName = item.remark !== '' ? item.remark : item.nickname
+            item.checked = false
+            item.online = obj[item.userID]['status'] === 1 ? true : false
+        })
+    } catch (error) {
+        console.log(error)
+    }
+})
+
+const getCurrentTitle = (val) => {
+    return val.showName ? val.showName : val.nickname
+}
+
+const showList = computed(() => {
+    const res = friendsGroupList.value.filter(item => {
+        let str = item.nickname + item.remark
+        return str.indexOf(searchValue.value) != -1
+    })
+    return res || []
+})
+
+const toggle = (item, index) => {
+    console.log('checkboxRefs.value', checkboxRefs.value, showList.value);
+    onNumTips()
+    checkboxRefs.value[index].toggle();
+    onUpdate()
+};
+
+// 单选点击
+const selectClick = (item) => {
+    selectChatDataList.value = [item]
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        setGroupChatConfig({
+            ...groupChatConfig.value,
+            chatDataList: [item]
+        })
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        setPrivateChatConfig({
+            ...privateChatConfig.value,
+            chatDataList: [item]
+        })
+    }
+
+    showTransmitDialog.value = true
+}
+const messageDescText = computed(() => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        if (groupChatConfig.value.type == 'group') {
+            //合并转发
+            return t('mergeMessageList');
+        } else if (groupChatConfig.value.type == 'single') {
+            //逐条转发
+            if (groupChatConfig.value.msg.length == 1) {
+                return parseMsg(groupChatConfig.value.msg[0], false, false, false, contactList.value);
+            } else {
+                return t('singleMlCount', { count: groupChatConfig.value.msg.length });
+            }
+        }
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        if (privateChatConfig.value.type == 'group') {
+            //合并转发
+            return t('mergeMessageList');
+        } else if (privateChatConfig.value.type == 'single') {
+            //逐条转发
+            if (privateChatConfig.value.msg.length == 1) {
+                return parseMsg(privateChatConfig.value.msg[0], false, false, false, contactList.value);
+            } else {
+                return t('singleMlCount', { count: privateChatConfig.value.msg.length });
+            }
+        }
+    }
+})
+const chatDataList = computed(() => selectChatDataList.value)
+const handleClick = (type) => {
+    let chatCheckedArr = [] // 已选好友
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...groupChatConfig.value,
+            // contactChecked: isChecked.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...groupChatConfig.value.chatDataList, ...chatArr],
+        }
+        setGroupChatConfig(item)
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...privateChatConfig.value,
+            // contactChecked: isChecked.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...privateChatConfig.value.chatDataList, ...chatArr],
+        }
+        setPrivateChatConfig(item)
+    }
+    router.replace('/home/dialogue/transmitPage/transmitFriendGroup')
+    // router.go(-1)
+}
+
+const onToggle = (id) => {
+    let isExist = isChecked.value.includes(id)
+    if (isChecked.value.length >= max_count.value && !isExist) {
+       return showToast({ message: t('selectMax'), position: 'top' })
+    }
+    const index = isChecked.value.indexOf(id);
+    if (index === -1) {
+        isChecked.value.push(id)
+    } else {
+        isChecked.value.splice(index, 1)
+    }
+    onUpdate()
+}
+
+// 是否是群主/群管理员
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+const onNumTips = () => {
+    if (isChecked.value.length >= max_count.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }
+    onUpdate()
+}
+
+const isCheckAll = computed(()=>{
+  const arr = friendsGroupList.value.filter(el => isChecked.value.includes(el.userID))
+  return arr.length === friendsGroupList.value.length
+})
+// 全选
+const onCheckAll = () => {
+  // 未勾选的数据
+  const arr = friendsGroupList.value.filter(el => !isChecked.value.includes(el.userID));
+  arr.forEach(i => {
+    if (isChecked.value.length >= max_count.value) {
+        showToast({ message: t('selectMax'), position: 'top' })
+    }else {
+      isChecked.value.push(i.userID)
+    }
+  })
+  onUpdate()
+}
+// 反选
+const onInvertSelect = () => {
+  const newList = friendsGroupList.value.map(i => i.userID)
+  const arr = isChecked.value.filter(el => !newList.includes(el))
+  isChecked.value = arr
+  onUpdate()
+}
+
+// 选择项改变数据更新
+const onUpdate = () => {
+    let chatCheckedArr = [] // 已选好友
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...groupChatConfig.value,
+            // contactChecked: isChecked.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...groupChatConfig.value.chatDataList, ...chatArr],
+        }
+        setGroupChatConfig(item)
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+        let chatArr = []
+        contactList.value.forEach(item => {
+            const index = isChecked.value.indexOf(item.userID)
+            if (index != -1) {
+                chatArr.push(item)
+                chatCheckedArr.push(item.userID)
+            }
+        })
+        let item = {
+            ...privateChatConfig.value,
+            // contactChecked: isChecked.value,
+            contactChecked: chatCheckedArr,
+            chatDataList: [...privateChatConfig.value.chatDataList, ...chatArr],
+        }
+        setPrivateChatConfig(item)
+    }
+}
+// 监听选择数据
+watch(() => groupChatConfig.value,(newVal) => {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+        isChecked.value = [...groupChatConfig.value.contactChecked, ...groupChatConfig.value.groupChecked]
+    }
+})
+watch(() => privateChatConfig.value,(newVal) => {
+    if (Object.keys(privateChatConfig.value).length > 0) {
+        isChecked.value = [...privateChatConfig.value.contactChecked, ...privateChatConfig.value.groupChecked]
+    }
+})
+
+const friendsGroupList = ref([])
+const getData = async() => {
+  const res = await $api.contact.getFriendsGroupListById({ friends_group_id: +route.query.id })
+  if (res.code != 0) return
+  const arr = contactList.value.filter((item) => res.data.friend_ids.includes(item.userID))
+  friendsGroupList.value = arr
+  console.log('getData',friendsGroupList.value);
+}
+getData()
+
+</script>
+
+<template>
+    <div ref="transmitGroupDetailsRef" class="transmit-group-details">
+        <div class="detail_content">
+            <AppNavBar :title="$t('select_group')" left-arrow views_grade="fourth_view" @click-left="handleClick">
+              <template #right>
+                <span class="confirm">
+                  <img class="check_all" @click="onCheckAll" src="@/assets/svg/check_all.svg" alt="" v-if="!isCheckAll">
+                  <img class="check_all" @click="onInvertSelect" src="@/assets/svg/check_all_active.svg" alt="" v-else>
+                </span>
+              </template>
+            </AppNavBar>
+            <div class="transmit-group-details-wrap">
+                <div class="transmit-group-details-content">
+                    <van-search class="search-input" :left-icon="defaultSearch" v-model="searchValue" :placeholder="$t('search')" />
+                      <div class="single-choice" v-if="!isMultipleChoice">
+                          <van-cell-group :border="false">
+                              <van-cell :border="false" v-for="(data, i) in showList" :key="i"
+                                  :title="getCurrentTitle(data)" @click="selectClick(data)">
+                                  <template #title>
+                                      <div class="avatar">
+                                          <Avatar width="32" height="32" :url="data.faceURL"
+                                              :name="getCurrentTitle(data)" @updateUrl="url => data.faceURL = url" />
+                                          <div class="dot" v-if="data.online">
+                                              <div></div>
+                                          </div>
+                                      </div>
+                                      <div class="custom-name">
+                                          <!-- 群管理标识 -->
+                                          <!-- <CommonLottie
+                                              v-if="showGroupOwner(data.userID) != ''"
+                                              :isGroup="showGroupOwner(data.userID)"
+                                              :width="140"
+                                              :height="56"
+                                              :showName="getCurrentTitle(data)"
+                                          ></CommonLottie>
+                                          <span class="custom-title" v-if="showGroupOwner(data.userID) === ''">{{ getCurrentTitle(data) }}</span> -->
+                                          <span class="custom-title">{{ getCurrentTitle(data) }}</span>
+                                          <div v-if="searchValue && data.remark" class="custom-nickname">{{$t('nicknames') + ':' + data.nickname }}</div>
+                                      </div>
+                                  </template>
+                              </van-cell>
+                          </van-cell-group>
+                      </div>
+                      <div class="multiple-choice" v-else>
+                          <van-checkbox-group v-model="isChecked" :border="false" :max="max_count">
+                              <van-cell-group inset>
+                                  <!-- @click="toggle(item, i)" -->
+                                  <van-cell clickable :border="false" v-for="(data, i) in showList" :key="i"
+                                      :title="getCurrentTitle(data)" @click="onToggle(data.userID)">
+                                      <template #title>
+                                          <van-checkbox :name="data.userID" :ref="(el) => (checkboxRefs[i] = el)"
+                                          @click.stop="onNumTips">
+                                              <template #icon="props">
+                                                  <div class="select1">
+                                                      <img v-if="props.checked"
+                                                          src="@/assets/svg/radio-check.svg" />
+                                                  </div>
+                                              </template>
+                                          </van-checkbox>
+                                          <div class="avatar">
+                                              <Avatar width="32" height="32" :url="data.faceURL"
+                                                  :name="getCurrentTitle(data)" @updateUrl="url => data.faceURL = url" />
+                                              <div class="dot" v-if="data.online">
+                                                  <div></div>
+                                              </div>
+                                          </div>
+                                          <div class="custom-name">
+                                              <!-- 群管理标识 -->
+                                              <!-- <CommonLottie
+                                                  v-if="showGroupOwner(data.userID) != ''"
+                                                  :isGroup="showGroupOwner(data.userID)"
+                                                  :width="140"
+                                                  :height="56"
+                                                  :showName="getCurrentTitle(data)"
+                                              ></CommonLottie>
+                                              <span class="custom-title" v-if="showGroupOwner(data.userID) === ''">{{ getCurrentTitle(data) }}</span> -->
+                                              <span class="custom-title">{{ getCurrentTitle(data) }}</span>
+                                              <div v-if="searchValue && data.remark" class="custom-nickname">{{$t('nicknames') + ':' + data.nickname }}</div>
+                                          </div>
+                                      </template>
+                                  </van-cell>
+                              </van-cell-group>
+                          </van-checkbox-group>
+                      </div>
+                    <div class="empty" v-if="!showList.length">
+                        <!-- <span v-if="!searchForm">{{ $t('cvNotAtUser') }}</span> -->
+                        <span>{{ $t('cantfind',{name:searchValue}) }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <TransmitDataDialog v-model="showTransmitDialog">
+            <div class="wrap-content">
+                <div class="title">{{ $t('sentTo') }}</div>
+                <div class="avatar-wrap" @wheel="onWheel">
+                    <div class="left-content">
+                        <div class="item-wrap" v-for="item in chatDataList" :key="item">
+                            <div class="avatar" :class="{ 'special-item-wrap': chatDataList.length === 1 }">
+                                <Avatar width="32" height="32" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url">
+                                </Avatar>
+                                <div class="name">{{ item.showName }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="content-wrap">{{ messageDescText }}</div>
+            </div>
+        </TransmitDataDialog>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@media screen and (min-width: 750px) {
+    :deep(.van-index-bar__sidebar) {
+        right: 15% !important;
+    }
+}
+
+.transmit-group-details {
+    overflow-y: auto;
+    background-color: #fff;
+
+    // position: relative;
+    .detail_content {
+        height: 100%;
+        // position: relative;
+        flex: 1;
+    }
+}
+
+.transmit-group-details-wrap {
+    background: #FFF;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    //   overflow-y:auto;
+    padding: 56px 0 0 0;
+    position: relative;
+
+    .transmit-group-details-content {
+        // padding-bottom: 66px;
+        height: 100%;
+        flex: 1;
+        overflow: auto;
+
+        :deep(.van-cell) {
+            display: flex;
+            align-items: center;
+            padding-right: 16px;
+
+            .first-cell {
+                :deep(.van-cell) {
+                    height: 40px;
+                }
+            }
+
+            .second-cell {
+                :deep(.van-cell) {
+                    height: 72px;
+                }
+            }
+        }
+
+        .custom-title {
+            // color: var(--Font-L2, rgba(27, 27, 34, 0.60));
+            font-family: PingFang SC;
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            display: inline-block;
+            width: 246px;
+            white-space: nowrap; 
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .custom-nickname {
+          font-size: 0.75rem;
+          color: #76767A;
+          margin: 2px 0 0 12px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          max-width: 290px;
+          white-space: nowrap;
+        }
+        :deep(.van-swipe-cell__right) {
+            right: -1px;
+
+            .van-button {
+                width: 70px;
+                height: 56px;
+            }
+        }
+
+        :deep(.van-cell) {
+            height: 56px;
+        }
+
+        .add-cell {
+            :deep(.van-cell__title) {
+                display: flex;
+                align-items: center;
+
+                .custom-title {
+                    width: 250px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    display: inline-block;
+                    // margin-left: 10px;
+                    color: #1B1B22;
+                    font-family: PingFang SC;
+                    font-size: 1rem;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                }
+            }
+        }
+        :deep(.van-swipe-cell__wrapper) {
+            .custom-title {
+                margin-left: 10px;
+            }
+        }
+        :deep(.special-title-name){
+            bottom: 15px !important;
+        }
+    }
+}
+
+:deep(.van-dialog__confirm) {
+    color: #FC5A50;
+}
+
+.search-input {
+    margin: 8px 0;
+
+    :deep(.van-cell) {
+        height: 36px !important;
+    }
+}
+
+.index-bar {
+    :deep(.van-index-bar__sidebar) {
+        color: #A4A4A7;
+    }
+
+    :deep(.van-index-anchor) {
+        font-size: 0.875rem;
+        font-weight: 400;
+        color: #A4A4A7 !important;
+    }
+}
+
+:deep(.van-cell__title) {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.van-search__action) {
+    color: #0095F6;
+}
+
+:deep(.van-cell) {
+    .van-cell__title {
+        .custom-title {
+            margin-left: 10px;
+        }
+    }
+}
+
+:deep(.van-badge__wrapper) {
+    display: flex;
+    align-items: center;
+}
+
+:deep(.van-cell__value) {
+    padding-right: 10px;
+}
+
+.select1 {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    margin-right: 8px;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border-radius: 50%;
+    border: 1px solid #d9d9d9;
+}
+
+:deep(.van-cell-group--inset) {
+    margin: auto;
+}
+
+:deep(.van-checkbox__icon) {
+    height: unset;
+}
+
+.avatar {
+    position: relative;
+    display: flex;
+
+    .dot {
+        position: absolute;
+        top: 0;
+        right: -4px;
+        padding: 2px;
+        background: #fff;
+        border-radius: 50%;
+
+        div {
+            width: 8px;
+            height: 8px;
+            background: #43FA51;
+            border-radius: 50%;
+            // position: absolute;
+        }
+    }
+}
+
+.empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+}
+
+.transmit-group-details-content::-webkit-scrollbar {
+    display: none;
+}
+</style>
diff --git a/src/views/transmit/transmitPage.vue b/src/views/transmit/transmitPage.vue
new file mode 100644
index 0000000..c889c78
--- /dev/null
+++ b/src/views/transmit/transmitPage.vue
@@ -0,0 +1,982 @@
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useGrade } from '@/utils/levelConfig'
+import { useRouter, useRoute } from 'vue-router'
+import { AppNavBar, TransmitDataDialog, CommonLottie } from '@/components/index'
+import IMG from '@/assets/chatbg.png'
+import defaultSearch from '@/assets/search-icon.svg'
+import { getSDK } from '@/utils/openIM/sdk/index.js'
+import { useI18n } from "vue-i18n"
+import { useContactStore } from "@/stores/contact.js";
+import { useUserStore } from "@/stores/user.js";
+import { showToast } from "vant";
+import { parseMsg } from '@/utils/tools'
+import { replace } from 'lodash'
+const { t } = useI18n()
+const IMSDK = getSDK()
+const transmitPageRef = ref(null)
+useGrade(transmitPageRef, 3)
+const showTransmitDialog = ref(false)
+const contactStore = useContactStore();
+const { contactList, chatList, allGroupOwnerOrAdmin} = storeToRefs(contactStore);
+const userStore = useUserStore();
+const { setGroupChatConfig, setPrivateChatConfig} = userStore;
+const { groupChatConfig, privateChatConfig, appConfig } = storeToRefs(userStore);
+const router = useRouter()
+const route = useRoute()
+const isChecked = ref([]);
+const checkboxRefs = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const searchForm = ref('')
+const isMultipleChoice = ref(false)
+const showList = ref()
+let page_num = ref(1)
+const selectChatDataList = ref([])
+const max_count = computed(()=> appConfig.value.batch_send?.transmit_limit || 0)
+// let max_count = ref(500) // 转发选择人数上限
+
+onMounted(()=>{
+  // isMultipleChoice.value = groupChatConfig.value.isMultipleChoice
+})
+// 群聊
+const showChatList = computed(() => {
+  console.log('群聊', showList.value);
+  let arr = []
+  arr = showList.value.filter(item => item.groupID != '' && item.showName.indexOf(searchForm.value) != -1)
+  return arr || []
+})
+// 联系人
+const showContactList = computed(() => {
+  let arr = []
+  arr = showList.value.filter(item => {
+    // let str = item.nickname + item.remark
+    return item.userID != '' && item.showName.indexOf(searchForm.value) != -1
+  })
+
+  return arr || []
+})
+
+const getConversationListFromReq = async (isScrollLoad = false) => {
+  try {
+    const { data } = await IMSDK.getConversationListSplit({
+      offset: isScrollLoad ? showList.value.length : 0,
+      count: 20 * page_num.value,
+    });
+    const cves = data;
+    showList.value = [
+      ...(isScrollLoad ? showList.value : []),
+      ...cves,
+    ].map(item => {
+      return {
+        ...item,
+        id: item.userID || item.groupID,
+        showName: transformName(item)
+      }
+    })
+    return cves.length === 20 * page_num.value;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}
+
+const onLoad = async () => {
+  const flag = await getConversationListFromReq();
+  loading.value = false;
+  page_num.value++;
+  if (!flag) {
+    finished.value = true;
+  }
+}
+// 确定
+const onConfirm = () => {
+  if (checkedList.value.length > 0) {
+    if (Object.keys(groupChatConfig.value).length > 0) {
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        chatDataList: checkedList.value
+      })
+    } else if (Object.keys(privateChatConfig.value).length > 0) {
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        chatDataList: checkedList.value
+      })
+    }
+    showTransmitDialog.value = true
+  }
+
+}
+// 多选
+const onMultiple = () => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      isMultipleChoice: true,
+    })
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      isMultipleChoice: true,
+    })
+  }
+}
+// 删除
+const onDelete = (item) => {
+  const id = item.groupID ? item.groupID : item.userID
+  onSlice(id)
+}
+const toggleItem = ref()
+const toggle = (item, index) => {
+  onNumTips()
+  checkboxRefs.value[index].toggle();
+};
+
+// 已选
+const checkedList = ref([])
+const groupChecked = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    return groupChatConfig.value.groupChecked
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    return privateChatConfig.value.groupChecked
+  }
+})
+const contactChecked = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    return groupChatConfig.value.contactChecked
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    return privateChatConfig.value.contactChecked
+  }
+})
+watch(() => groupChatConfig.value, (o, n) => {
+  console.log('groupChatConfig');
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    isMultipleChoice.value = groupChatConfig.value.isMultipleChoice
+    isChecked.value = [...groupChatConfig.value.groupChecked, ...groupChatConfig.value.contactChecked]
+    let res = []
+    let arr2 = [...chatList.value, ...contactList.value]
+    chatList.value.forEach((item) => {
+      groupChecked.value.forEach((items) => {
+        if (items === item.groupID) {
+          item.onlyId = item.groupID
+          res.push(item)
+        }
+      })
+    })
+    contactList.value.forEach((item) => {
+      contactChecked.value.forEach((items) => {
+        if (items === item.userID) {
+          item.onlyId = item.userID
+          res.push(item)
+        }
+      })
+    })
+    res = res.reduce((accumulator, current) => {
+      // 判断当前对象的id属性在新数组中是否已经存在
+      const existingItem = accumulator.find(item => item.onlyId === current.onlyId);
+      // 如果不存在，则将当前对象添加到新数组中
+      if (!existingItem) {
+        accumulator.push(current);
+      }
+
+      return accumulator;
+    }, [])
+    checkedList.value = res
+  }
+}, { immediate: true })
+
+watch(() => privateChatConfig.value, (o, n) => {
+  if (Object.keys(privateChatConfig.value).length > 0) {
+    isMultipleChoice.value = privateChatConfig.value.isMultipleChoice
+    isChecked.value = [...privateChatConfig.value.groupChecked, ...privateChatConfig.value.contactChecked]
+    let res = []
+    let arr2 = [...chatList.value, ...contactList.value]
+    chatList.value.forEach((item) => {
+      groupChecked.value.forEach((items) => {
+        if (items === item.groupID) {
+          item.onlyId = item.groupID
+          res.push(item)
+        }
+      })
+    })
+    contactList.value.forEach((item) => {
+      contactChecked.value.forEach((items) => {
+        if (items === item.userID) {
+          item.onlyId = item.userID
+          res.push(item)
+        }
+      })
+    })
+    res = res.reduce((accumulator, current) => {
+      // 判断当前对象的id属性在新数组中是否已经存在
+      const existingItem = accumulator.find(item => item.onlyId === current.onlyId);
+      // 如果不存在，则将当前对象添加到新数组中
+      if (!existingItem) {
+        accumulator.push(current);
+      }
+      return accumulator;
+    }, [])
+    checkedList.value = res
+  }
+}, { immediate: true })
+
+
+
+watch(() => isChecked.value, async (newVal, oldVal) => {
+  await nextTick()
+  // 筛选添加的id
+  if (newVal.length > oldVal.length) {
+    let id
+    newVal.forEach(i => {
+      let find = oldVal.findIndex(item => i == item)
+      if (find == -1) {
+        id = i
+      }
+    })
+    // 是否搜索
+    if (!searchForm.value) {
+      const find = showList.value.find(item => item.groupID == id || item.userID == id)
+      onFind(find)
+    } else {
+      const groupFind = showChatList.value.find(item => item.groupID == id)
+      const contactFind = showContactList.value.find(item => item.groupID == id)
+      onFind(groupFind || contactFind)
+    }
+  }
+  if (newVal.length < oldVal.length) {
+    // 筛选删除的id
+    let id
+    oldVal.forEach(i => {
+      let find = newVal.findIndex(item => i == item)
+      if (find == -1) {
+        id = i
+      }
+    })
+    onSlice(id)
+  }
+})
+
+const onSlice = (id) => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    let groupIdx = groupChecked.value.findIndex(item => item === id);
+    if (groupIdx != -1) {
+      groupChecked.value = groupChecked.value.splice(groupIdx, 1)
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        groupChecked: groupChecked.value,
+      })
+      return
+    }
+    let contactIdx = contactChecked.value.findIndex(item => item === id);
+    if (contactIdx != -1) {
+      contactChecked.value = contactChecked.value.splice(contactIdx, 1)
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        contactChecked: contactChecked.value,
+      })
+      return
+    }
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    let groupIdx = groupChecked.value.findIndex(item => item === id);
+    if (groupIdx != -1) {
+      groupChecked.value = groupChecked.value.splice(groupIdx, 1)
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        groupChecked: groupChecked.value,
+      })
+      return
+    }
+    let contactIdx = contactChecked.value.findIndex(item => item === id);
+    if (contactIdx != -1) {
+      contactChecked.value = contactChecked.value.splice(contactIdx, 1)
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        contactChecked: contactChecked.value,
+      })
+      return
+    }
+  }
+}
+
+const onFind = (item) => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    if (item && item.groupID) {
+      groupChecked.value.push(item.groupID)
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        groupChecked: groupChecked.value,
+      })
+    }
+
+    if (item && item.userID) {
+      contactChecked.value.push(item.userID)
+      setGroupChatConfig({
+        ...groupChatConfig.value,
+        contactChecked: contactChecked.value,
+
+      })
+    }
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    if (item && item.groupID) {
+      groupChecked.value.push(item.groupID)
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        groupChecked: groupChecked.value,
+      })
+    }
+
+    if (item && item.userID) {
+      contactChecked.value.push(item.userID)
+      setPrivateChatConfig({
+        ...privateChatConfig.value,
+        contactChecked: contactChecked.value,
+      })
+    }
+  }
+
+}
+
+
+const onStop = () => {
+}
+// 单选点击
+const selectClick = (item) => {
+  selectChatDataList.value = [item]
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    // todo 判断
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      chatDataList: [item]
+    })
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    // todo 判断
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      chatDataList: [item]
+    })
+  }
+  showTransmitDialog.value = true
+}
+// pc滚动
+const onWheel = (e) => {
+  e.preventDefault();
+  e.currentTarget.scrollLeft += e.deltaY;
+}
+const handleClick = (type) => {
+  if(type == 'transmitFriendGroup'){
+    router.replace(`/home/dialogue/transmitPage/${type}`)
+  }else{
+    router.push(`/home/dialogue/transmitPage/${type}`)
+  }
+}
+
+
+const messageDescText = computed(() => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    if (groupChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (groupChatConfig.value.type == 'single') {
+      //逐条转发
+      if (groupChatConfig.value.msg.length == 1) {
+        return parseMsg(groupChatConfig.value.msg[0], false, false, false, contactList.value);
+      } else {
+        return t('singleMlCount', { count: groupChatConfig.value.msg.length });
+      }
+    }
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    if (privateChatConfig.value.type == 'group') {
+      //合并转发
+      return t('mergeMessageList');
+    } else if (privateChatConfig.value.type == 'single') {
+      //逐条转发
+      if (privateChatConfig.value.msg.length == 1) {
+        return parseMsg(privateChatConfig.value.msg[0], false, false, false, contactList.value);
+      } else {
+        return t('singleMlCount', { count: privateChatConfig.value.msg.length });
+      }
+    }
+  }
+})
+/***
+ *     
+ */
+
+const handleBack = () => {
+  if (Object.keys(groupChatConfig.value).length > 0) {
+    setGroupChatConfig({
+      ...groupChatConfig.value,
+      showCheck: false,
+      type: '', // 逐条转发
+      msg: [],
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [],  // 选择的联系人
+    })
+  } else if (Object.keys(privateChatConfig.value).length > 0) {
+    setPrivateChatConfig({
+      ...privateChatConfig.value,
+      showCheck: false,
+      type: '', // 逐条转发
+      msg: [],
+      hiddenSource: 0, // 隐藏消息来源1， 2不隐藏
+      isMultipleChoice: false,
+      groupChecked: [], // 选择的群
+      contactChecked: [],  // 选择的联系人
+    })
+  }
+  router.go(-1);
+}
+const chatDataList = computed(() => {
+  // 多选
+  if (isMultipleChoice.value) {
+    return checkedList.value
+  } else {
+    // 单选
+    return selectChatDataList.value
+  }
+})
+const transformName = (val) => {
+  if ('conversationID' in val) {
+    if (val.groupID) {
+      return val.showName ? val.showName : val.groupName
+    } else if (val.userID) {
+      const index = contactList.value.findIndex((item) => item.userID === val.userID)
+      if (index !== -1) {
+        return contactList.value[index].remark ? contactList.value[index].remark : contactList.value[index].nickname
+      }
+    }
+  }
+  if ('userID' in val) {
+    const index = contactList.value.findIndex((item) => item.userID === val.userID)
+    if (index !== -1) {
+      return contactList.value[index].remark ? contactList.value[index].remark : contactList.value[index].nickname
+    }
+    return val.nickname
+  }
+  if ('groupID' in val) {
+    // 群
+    return val.groupName
+  }
+}
+
+// 是否管理员/群主
+const showGroupOwner = computed(() => {
+  return userID => {
+    if (userID) {
+      const mapObj = allGroupOwnerOrAdmin.value[userID] || {};
+      if (Object.keys(mapObj).length > 0) {
+        if (mapObj.roleLevel === 100) {
+          return "group";
+        }
+        if (mapObj.roleLevel === 60) {
+          return "admin";
+        }
+        return "";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  };
+});
+
+// 选择上限
+const onNumTips = () => {
+    if (isChecked.value.length >= max_count.value) {
+      showToast({ message: t('selectMax'), position: 'top' })
+  }
+}
+</script>
+
+<template>
+  <div ref="transmitPageRef" class="transmit-page">
+    <div style="flex: 1; position: relative;height: 100%;">
+      <AppNavBar :title="$t('transmit')" views_grade="thirdly_view">
+        <template #left>
+          <span class="cancel" @click="handleBack">{{$t('cancel')}}</span>
+        </template>
+        <template #right>
+          <span class="confirm" @click="onConfirm" v-if="isMultipleChoice">{{$t('determine')}}</span>
+          <span class="multiple" @click="onMultiple" v-else>{{$t('menuMulti')}}</span>
+        </template>
+      </AppNavBar>
+      <div class="content">
+        <div class="select-search">
+          <van-search v-model="searchForm" class="c-search" :left-icon="defaultSearch" :placeholder="$t('search')" />
+        </div>
+        <div class="selected" v-if="isMultipleChoice">
+          <div class="left scroll-wrapper" @wheel="onWheel">
+            <div class="left-content">
+              <div class="item" v-for="item in checkedList" :key="item">
+                <div class="avatar">
+                  <Avatar width="36" height="36" :url="item.faceURL"
+                    :is-group="item.conversationType === 3 || item.groupID" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                  <div class="name">{{ item.remark || item.showName || item.nickname || item.groupName }}</div>
+                  <div class="delete" @click="onDelete(item)">
+                    <img src="@/assets/delete-red.svg" alt="">
+                  </div>
+                </div>
+              </div>
+              <div class="placeholder-item"></div>
+            </div>
+          </div>
+          <div class="righ">
+            <div class="linear"></div>
+            <div class="num">{{$t('hasSelect')}}（{{ checkedList.length }}）</div>
+          </div>
+        </div>
+        <div class="choose" :class="{ 'choose-border': isMultipleChoice && checkedList.length }">
+          <div class="cell" @click="handleClick('contactPerson')">
+            <div class="title">{{$t('selectContact')}}</div>
+            <div class="arrow-icon">
+              <img src="@/assets/right-small1.svg" alt="">
+            </div>
+          </div>
+          <div class="cell" @click="handleClick('selectGroupChat')">
+            <div class="title">{{$t('selectGroup')}}</div>
+            <div class="arrow-icon">
+              <img src="@/assets/right-small1.svg" alt="">
+            </div>
+          </div>
+          <div class="cell" @click="handleClick('transmitFriendGroup')">
+            <div class="title">{{$t('selectGroups')}}</div>
+            <div class="arrow-icon">
+              <img src="@/assets/right-small1.svg" alt="">
+            </div>
+          </div>
+        </div>
+        <div class="recent-chat" v-if="searchForm == ''">
+          <div class="title">{{$t('recentConversation')}}</div>
+          <div class="chat-content">
+            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+              <div class="multiple-choice" v-if="isMultipleChoice">
+                <van-checkbox-group v-model="isChecked" :border="false" :max="max_count">
+                  <van-cell-group inset>
+                    <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showList" :key="i"
+                      @click="toggle(item, i)">
+                      <template #title>
+                        <van-checkbox :name="item.id" :ref="(el) => (checkboxRefs[i] = el)" @click.stop="onNumTips">
+                          <template #icon="props">
+                            <div class="select1">
+                              <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                            </div>
+                          </template>
+                        </van-checkbox>
+                        <Avatar width="36" height="36" :url="item.faceURL" :is-group="item.conversationType === 3"
+                          :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                        <div class="chat-name">
+                          <!-- 群管理标识 -->
+                          <!-- <CommonLottie
+                            v-if="showGroupOwner(item.userID) != ''"
+                            :isGroup="showGroupOwner(item.userID)"
+                            :width="140"
+                            :height="56"
+                            :showName="item.showName"
+                          ></CommonLottie>
+                          <span v-if="showGroupOwner(item.userID) === ''" class="chat-title">{{ item.showName }}</span> -->
+                          <span class="chat-title">{{ item.showName }}</span>
+                        </div>
+                      </template>
+                    </van-cell>
+                  </van-cell-group>
+                </van-checkbox-group>
+              </div>
+              <div class="single-choice" v-else>
+                <van-cell-group :border="false">
+                  <van-cell :border="false" :title="item.showName" v-for="(item, index) in showList" :key="index"
+                    @click="selectClick(item)">
+                    <template #title>
+                      <Avatar width="36" height="36" :url="item.faceURL" :is-group="item.conversationType === 3"
+                        :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                      <div class="chat-name">
+                          <!-- 群管理标识 -->
+                        <!-- <CommonLottie
+                            v-if="showGroupOwner(item.userID) != ''"
+                            :isGroup="showGroupOwner(item.userID)"
+                            :width="140"
+                            :height="56"
+                            :showName="item.showName"
+                          ></CommonLottie>
+                          <span v-if="showGroupOwner(item.userID) === ''" class="chat-title">{{ item.showName }}</span> -->
+                          <span class="chat-title">{{ item.showName }}</span>
+                      </div>
+                    </template>
+                  </van-cell>
+                </van-cell-group>
+                <!-- <div v-else class="empty">
+                      <span v-if="!searchForm">{{ $t('cvNotAtUser') }}</span>
+                      <span v-else>{{ $t('未找到用户') }}</span>
+                  </div> -->
+              </div>
+            </van-list>
+          </div>
+        </div>
+        <div class="search-chat" v-else>
+          <div class="search-content">
+            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+              <div class="multiple-choice" v-if="isMultipleChoice">
+                <van-checkbox-group v-model="isChecked" :border="false">
+                  <van-cell-group inset>
+                    <div class="contacts" v-if="showContactList.length">
+                      <div class="title">{{$t('globalSearchContacts')}}</div>
+                      <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showContactList"
+                        :key="i" @click="toggle(item, i)">
+                        <template #title>
+                          <van-checkbox :name="item.userID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop>
+                            <template #icon="props">
+                              <div class="select1">
+                                <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                              </div>
+                            </template>
+                          </van-checkbox>
+                          <Avatar width="36" height="36" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                          <div class="chat-name">
+                          <!-- 群管理标识 -->
+                            <!-- <CommonLottie
+                            v-if="showGroupOwner(item.userID) != ''"
+                            :isGroup="showGroupOwner(item.userID)"
+                            :width="140"
+                            :height="56"
+                            :showName="item.showName"
+                          ></CommonLottie>
+                          <span v-if="showGroupOwner(item.userID) === ''" class="chat-title">{{ item.showName }}</span> -->
+                          <span class="chat-title">{{ item.showName }}</span>
+                          </div>
+                        </template>
+                      </van-cell>
+                    </div>
+                    <div class="group-chat" v-if="showChatList.length">
+                      <div class="title">{{$t('groupChat')}}</div>
+                      <van-cell clickable :border="false" :title="item.showName" v-for="(item, i) in showChatList"
+                        :key="i" @click="toggle(item, i)">
+                        <template #title>
+                          <van-checkbox :name="item.groupID" :ref="(el) => (checkboxRefs[i] = el)" @click.stop>
+                            <template #icon="props">
+                              <div class="select1">
+                                <img v-if="props.checked" src="@/assets/svg/radio-check.svg" />
+                              </div>
+                            </template>
+                          </van-checkbox>
+                          <Avatar width="36" height="36" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                          <div class="chat-name">
+                            <span class="chat-title">{{ item.showName }}</span>
+                          </div>
+                        </template>
+                      </van-cell>
+                    </div>
+                  </van-cell-group>
+                </van-checkbox-group>
+              </div>
+              <div class="single-choice" v-else>
+                <van-cell-group :border="false">
+                  <div class="contacts" v-if="showContactList.length">
+                    <div class="title">{{$t('globalSearchContacts')}}</div>
+                    <van-cell :border="false" :title="item.showName" v-for="(item, index) in showContactList"
+                      :key="index" @click="selectClick(item)">
+                      <template #title>
+                        <Avatar width="36" height="36" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                        <div class="chat-name">
+                          <span class="chat-title">{{ item.showName }}</span>
+                        </div>
+                      </template>
+                    </van-cell>
+                  </div>
+                  <div class="group-chat" v-if="showChatList.length">
+                    <div class="title">{{$t('groupChat')}}</div>
+                    <van-cell :border="false" :title="item.showName" v-for="(item, index) in showChatList" :key="index"
+                      @click="selectClick(item)">
+                      <template #title>
+                        <Avatar width="36" height="36" :url="item.faceURL" :name="item.showName" @updateUrl="url => item.faceURL = url"></Avatar>
+                        <div class="chat-name">
+                          <span class="chat-title">{{ item.showName }}</span>
+                        </div>
+                      </template>
+                    </van-cell>
+                  </div>
+                </van-cell-group>
+              </div>
+            </van-list>
+          </div>
+        </div>
+      </div>
+      <TransmitDataDialog v-model="showTransmitDialog">
+        <div class="wrap-content">
+          <div class="title">{{ $t('sentTo') }}</div>
+          <div class="avatar-wrap" @wheel="onWheel">
+            <div class="left-content">
+              <div class="item-wrap" v-for="item in chatDataList" :key="item">
+                <div class="avatar" :class="{ 'special-item-wrap': chatDataList.length === 1 }">
+                  <Avatar width="32" height="32" :url="item.faceURL" :is-group="item.conversationType === 3"
+                    :name="transformName(item)" @updateUrl="url => item.faceURL = url"></Avatar>
+                  <div class="name">{{ transformName(item) }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="content-wrap">{{ messageDescText }}</div>
+        </div>
+      </TransmitDataDialog>
+    </div>
+    <!-- 四级视图 -->
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.transmit-page {
+  // display: flex;
+  // justify-content: center;
+  background-color: #fff;
+  // overflow: auto;
+
+  .content {
+    padding-top: 70px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    .cancel {
+      color: #1B1B2299;
+      font-size: 0.875rem;
+    }
+
+    .confirm {
+      color: #0095F6;
+      font-size: 0.875rem;
+    }
+
+    .multiple {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+    :deep(.van-search__field) {
+      border-radius: 8px;
+
+      .van-icon__image {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .selected {
+      margin: 12px 0 8px 0;
+      position: relative;
+      overflow-x: hidden;
+
+      .left {
+        // width: 290px;
+        overflow-x: auto;
+        /* 横向溢出内容显示滚动条 */
+        white-space: nowrap;
+
+        /* 横向内容不换行 */
+        .left-content {
+          width: 290px;
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          padding: 0 16px;
+          padding-right: 104px;
+
+          .item {
+            position: relative;
+            margin-right: 16px;
+
+            .avatar {
+              text-align: center;
+
+              img {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+              }
+
+              .name {
+                font-size: 0.75rem;
+                color: #1B1B2299;
+                width: 44px;
+                ;
+                white-space: nowrap;
+                overflow: hidden;
+              }
+            }
+
+            .delete {
+              position: absolute;
+              top: 0;
+              right: -2px;
+
+              img {
+                width: 16px;
+                height: 16px;
+              }
+            }
+          }
+        }
+        .placeholder-item {
+          height: 58px;
+          padding-left: 84px;
+        }
+      }
+
+      .righ {
+        height: 58px;
+        display: flex;
+        line-height: 58px;
+        position: absolute;
+        top: 0;
+        right: 0;
+
+        .linear {
+          width: 24px;
+          height: 100%;
+          background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+        }
+
+        .num {
+          width: 80px;
+          background: #fff;
+          text-align: center;
+          font-size: 0.875rem;
+          color: #1B1B2299;
+        }
+      }
+    }
+
+    .choose {
+      margin-top: 16px;
+
+      .cell {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 19px 16px;
+        border-bottom: 0.5px solid #F2F4F5;
+
+        .title {
+          color: #1B1B22;
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .choose-border {
+      border-top: 0.5px solid #F2F4F5;
+    }
+
+    .recent-chat,
+    .search-chat {
+      padding: 10px 16px;
+      height: 100%;
+
+      .title {
+        padding-bottom: 10px;
+        font-size: 0.875rem;
+        color: #1B1B2299;
+      }
+
+      .chat-content,
+      .search-content {
+        height: calc(100% - 200px);
+        overflow: auto;
+
+        .select1 {
+          width: 16px;
+          height: 16px;
+          display: flex;
+          margin-right: 8px;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid #d9d9d9;
+        }
+
+        :deep(.van-cell-group--inset) {
+          margin: auto;
+        }
+
+        :deep(.van-cell) {
+          padding: 10px 0;
+
+          .van-cell__title {
+            display: flex;
+            align-items: center;
+
+            .chat-title {
+              display: inline-block;
+              width: 263px;
+              margin-left: 10px;
+              color: #1B1B22;
+              font-family: PingFang SC;
+              font-size: 1rem;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+    :deep(.van-cell){
+      padding: 0;
+      height: 56px;
+      line-height: 56px;
+      align-items: center;
+    }
+    .select-search {
+      padding: 0 16px;
+      :deep(.van-cell){
+        padding: 0;
+        height: 36px;
+        line-height: 36px;
+        align-items: center;
+      }
+    }
+  }
+
+  .chat-content::-webkit-scrollbar,
+  .search-content::-webkit-scrollbar,
+  .avatar-wrap::-webkit-scrollbar,
+  .selected::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    /* 显示横向滚动条 */
+    -ms-overflow-style: none;
+    /* 隐藏 IE 浏览器的滚动条 */
+    scrollbar-width: none;
+    /* 隐藏 Firefox 浏览器的滚动条 */
+  }
+
+  /* 隐藏非 Webkit 浏览器的滚动条 */
+  .scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
+  .empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    color: #979797;
+    font-family: PingFang SC;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding-top: 26px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/unocss/index.vue b/src/views/unocss/index.vue
new file mode 100644
index 0000000..5fa25f0
--- /dev/null
+++ b/src/views/unocss/index.vue
@@ -0,0 +1,12 @@
+<script setup >
+// back
+const onClickLeft = () => history.back()
+</script>
+
+<template>
+  <VanNavBar title="🪶 Unocss" left-arrow  @click-left="onClickLeft" />
+
+  <div class="w-full h-100vh py-60 px-20">
+    <span class="color-pink font-semibold"> Unocss </span>示例（WIP）...
+  </div>
+</template>
diff --git a/tests/index.spec.ts b/tests/index.spec.ts
new file mode 100644
index 0000000..279ce3c
--- /dev/null
+++ b/tests/index.spec.ts
@@ -0,0 +1,3 @@
+it('first test', () => {
+  expect(1 + 1).toBe(2)
+})
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9431577
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "preserve",
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["node"],
+    "allowJs": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "importHelpers": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/App.vue",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    "components.d.ts",
+    "auto-imports.d.ts",
+    "tests/*.ts"
+, "src/views/my/language/index.js", "src/views/dialogue/groupChat/MessageItem/useMessageIsRead.js"  ]
+}
diff --git a/typed-router.d.ts b/typed-router.d.ts
new file mode 100644
index 0000000..ef0ff02
--- /dev/null
+++ b/typed-router.d.ts
@@ -0,0 +1,154 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+/// <reference types="unplugin-vue-router/client" />
+
+import type {
+  // type safe route locations
+  RouteLocationTypedList,
+  RouteLocationResolvedTypedList,
+  RouteLocationNormalizedTypedList,
+  RouteLocationNormalizedLoadedTypedList,
+  RouteLocationAsString,
+  RouteLocationAsRelativeTypedList,
+  RouteLocationAsPathTypedList,
+
+  // helper types
+  // route definitions
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+
+  // vue-router extensions
+  _RouterTyped,
+  RouterLinkTyped,
+  RouterLinkPropsTyped,
+  NavigationGuard,
+  UseLinkFnTyped,
+
+  // data fetching
+  _DataLoader,
+  _DefineLoaderOptions,
+} from 'unplugin-vue-router/types'
+
+declare module 'vue-router/auto/routes' {
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/charts/': RouteRecordInfo<'/charts/', '/charts', Record<never, never>, Record<never, never>>,
+    '/contact/': RouteRecordInfo<'/contact/', '/contact', Record<never, never>, Record<never, never>>,
+    '/dialogue/': RouteRecordInfo<'/dialogue/', '/dialogue', Record<never, never>, Record<never, never>>,
+    '/dialogue/charts/': RouteRecordInfo<'/dialogue/charts/', '/dialogue/charts', Record<never, never>, Record<never, never>>,
+    '/dialogue/mock/': RouteRecordInfo<'/dialogue/mock/', '/dialogue/mock', Record<never, never>, Record<never, never>>,
+    '/mock/': RouteRecordInfo<'/mock/', '/mock', Record<never, never>, Record<never, never>>,
+    '/my/': RouteRecordInfo<'/my/', '/my', Record<never, never>, Record<never, never>>,
+    '/my/account/': RouteRecordInfo<'/my/account/', '/my/account', Record<never, never>, Record<never, never>>,
+    '/my/account/info/': RouteRecordInfo<'/my/account/info/', '/my/account/info', Record<never, never>, Record<never, never>>,
+    '/my/account/info/modify_name/': RouteRecordInfo<'/my/account/info/modify_name/', '/my/account/info/modify_name', Record<never, never>, Record<never, never>>,
+    '/my/account/info/modify_name/details/': RouteRecordInfo<'/my/account/info/modify_name/details/', '/my/account/info/modify_name/details', Record<never, never>, Record<never, never>>,
+    '/my/account/info/phone/': RouteRecordInfo<'/my/account/info/phone/', '/my/account/info/phone', Record<never, never>, Record<never, never>>,
+    '/unocss/': RouteRecordInfo<'/unocss/', '/unocss', Record<never, never>, Record<never, never>>,
+  }
+}
+
+declare module 'vue-router/auto' {
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
+
+  export type RouterTyped = _RouterTyped<RouteNamedMap>
+
+  /**
+   * Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
+   * Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic.
+   */
+  export type RouteLocationRaw<Name extends keyof RouteNamedMap = keyof RouteNamedMap> =
+    | RouteLocationAsString<RouteNamedMap>
+    | RouteLocationAsRelativeTypedList<RouteNamedMap>[Name]
+    | RouteLocationAsPathTypedList<RouteNamedMap>[Name]
+
+  /**
+   * Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
+   */
+  export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
+  /**
+   * Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
+   */
+  export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
+
+  export function useRouter(): RouterTyped
+  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
+
+  export const useLink: UseLinkFnTyped<RouteNamedMap>
+
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
+
+  export const RouterLink: RouterLinkTyped<RouteNamedMap>
+  export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
+
+  // Experimental Data Fetching
+
+  export function defineLoader<
+    P extends Promise<any>,
+    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
+    isLazy extends boolean = false,
+  >(
+    name: Name,
+    loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
+  export function defineLoader<
+    P extends Promise<any>,
+    isLazy extends boolean = false,
+  >(
+    loader: (route: RouteLocationNormalizedLoaded) => P,
+    options?: _DefineLoaderOptions<isLazy>,
+  ): _DataLoader<Awaited<P>, isLazy>
+
+  export {
+    _definePage as definePage,
+    _HasDataLoaderMeta as HasDataLoaderMeta,
+    _setupDataFetchingGuard as setupDataFetchingGuard,
+    _stopDataFetchingScope as stopDataFetchingScope,
+  } from 'unplugin-vue-router/runtime'
+}
+
+declare module 'vue-router' {
+  import type { RouteNamedMap } from 'vue-router/auto/routes'
+
+  export interface TypesConfig {
+    beforeRouteUpdate: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave: NavigationGuard<RouteNamedMap>
+
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
+
+    RouterLink: RouterLinkTyped<RouteNamedMap>
+  }
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..73019b3
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,177 @@
+/* eslint-disable node/prefer-global/process */
+import path from 'node:path'
+import { loadEnv } from 'vite'
+import {writeFileSync} from "fs"
+import { visualizer } from 'rollup-plugin-visualizer'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
+import vue from '@vitejs/plugin-vue'
+import legacy from '@vitejs/plugin-legacy'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import autoprefixer from 'autoprefixer'
+import { viteVConsole } from 'vite-plugin-vconsole'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
+import viteCompression from 'vite-plugin-compression'
+
+function writeWebConfig(env){
+  const config = {}
+  const keys = ["api_1", "api_2", "api_3", "ws_url", "proxy_target", "backup_http_addrs"]
+  const prefix = "VITE_APP_"
+  for(const prop in env){
+    for(const i in keys){
+      const k = keys[i]
+      if (prop.toLowerCase()===(prefix+k).toLowerCase()){
+        if(prop.toLowerCase().includes("backup_http_addrs")){
+          config[k] = JSON.parse(env[prop])
+          break
+        }
+        config[k] = env[prop]
+        break
+      }
+    }
+  }
+  for(const i in keys) {
+    const k = keys[i]
+    if(config[k]===""|| !config[k]){
+      console.error('env config not empty: '+ k, config);
+      return null
+    }
+  }
+  try {
+    const filePath = './public/web_config.js';
+    writeFileSync(filePath, `window.WEB_CONFIG = ${JSON.stringify(config)}`);
+  } catch (err) {
+    console.error('write web_config.js occur error', err);
+    return null
+  }
+  return config
+}
+
+export default ({ command, mode }) => {
+  const root = process.cwd()
+  const env = loadEnv(mode, root)
+  console.log("current environment: "+ mode);
+
+  // 动态生成 public/web_config.js
+  const config = writeWebConfig(env)
+  const target = config["proxy_target"]
+  let withPort = false
+  if(target === 'http://192.168.0.111' || target === 'http://localhost'){
+    withPort = true
+  }
+  const apiv1 = `${target}${withPort?':8081':''}/manage-api`
+  const apiv2 = `${target}${withPort?':10008':''}/chat-api`
+  const apiv3 = `${target}${withPort?':10002':''}/chat-server-api`
+  
+  console.log("apiv1",apiv1)
+  console.log("apiv2",apiv2)
+  console.log("apiv3",apiv3)
+  return {
+    base: env.VITE_APP_PUBLIC_PATH, 
+    plugins: [
+      vue(),
+      vueJsx(),
+      visualizer(),
+      // UnoCSS(),
+      mockDevServerPlugin(),
+      ViteImageOptimizer(),
+      legacy({
+        targets: ['defaults', 'not IE 11'],
+      }),
+      Components({
+        dts: true,
+        resolvers: [VantResolver()],
+        types: [],
+      }),
+      AutoImport({
+        include: [
+          /\.[tj]sx?$/,
+          /\.vue$/,
+          /\.vue\?vue/,
+        ],
+        imports: [
+          'vue',
+          'vue-router',
+          'vitest',
+        ],
+        dts: true,
+      }),
+      viteVConsole({
+        entry: [path.resolve('src/main.js')],
+        localEnabled: command === 'serve',
+        enabled: false,
+        config: {
+          maxLogNumber: 1000,
+          theme: 'light',
+        },
+      }),
+      //在plugins配置数组里添加gzip插件
+      viteCompression({
+        verbose: true, // 默认即可
+        disable: false, // 开启压缩(不禁用)，默认即可
+        deleteOriginFile: true, // 删除源文件
+        threshold: 5120, // 压缩前最小文件大小
+        algorithm: 'gzip', // 压缩算法
+        ext: '.gz' // 文件类型
+        // filter: /\.(js|css|json|txt|ico|svg|png)(\?.*)?$/i, // 需要压缩的文件
+      })
+    ],
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer(),
+        ],
+      },
+    },
+    build: {
+      cssCodeSplit: false,
+      chunkSizeWarningLimit: 2048,
+      rollupOptions: {
+        output: {
+          // 静态资源打包做处理
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js',
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+          manualChunks(id) {
+          if (id.includes('node_modules')) {
+              return id.toString().split('node_modules/')[1].split('/')[0].toString();
+            }
+          },
+        }
+      }
+    },
+    resolve: {
+      alias: {
+        '~@': path.join(__dirname, './src'),
+        '@': path.join(__dirname, './src'),
+        '~': path.join(__dirname, './src/assets'),
+      },
+    },
+
+    server: {
+      host: '0.0.0.0',
+      strictPort: false,
+      port: 5178,
+     
+      proxy: {
+        '/api_2': {
+          target: apiv2,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api_2/, '')
+        },
+        '/api_3': {
+          target: apiv3, 
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api_3/, '')
+        },
+        '/api_1': {
+          target: apiv1,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api_1/, '')
+        },
+      },
+    },
+  }
+}