Merge branch 'master' into dev

# Conflicts: # README.de.md # README.en.md # README.fr.md
2024-04-05 15:41:12 +08:00 · 2024-04-05 15:41:12 +08:00 · d60287e7c7
commit d60287e7c7
parent af8d48b068 a896db418e
6 changed files with 59 additions and 10 deletions
--- a/README.de.md
+++ b/README.de.md
@ -13,7 +13,7 @@
  <a><img src="https://img.shields.io/badge/Powered%20by-Vue-blue"/></a>
 </p>

-`douyin-vue`ist eine Parodie`抖音|TikTok`mobiles Kurzvideoprojekt, das auf basiert[Sicht](https://cn.vuejs.org/)、[Schnell](https://cn.vitejs.dev/)erreichen. Habe das Neueste verwendet`Vue`FamilyMart-Technologie-Stack. API-Daten werden lokal im Projekt gespeichert und das Video wird daraus gesammelt`抖音|TikTok`, der Atlas stammt aus`小红书|Xiaohongshu`,passieren[Axios-Mock-Adapter](https://github.com/ctimmerm/axios-mock-adapter)Die Bibliothek fängt die API ab und gibt lokale JSON-Daten zurück, um echte Back-End-Anfragen zu simulieren.
+`douyin-vue`ist eine Parodie`抖音|TikTok`mobiles Kurzvideoprojekt, das auf basiert[`Vue`](https://cn.vuejs.org/)、[`Vite`](https://cn.vitejs.dev/)Realisieren. Habe das Neueste verwendet`Vue`FamilyMart-Technologie-Stack. API-Daten werden lokal im Projekt gespeichert und das Video wird daraus gesammelt`抖音|TikTok`, der Atlas stammt aus`小红书|Xiaohongshu`,passieren[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)Die Bibliothek fängt die API ab und gibt lokale JSON-Daten zurück, um echte Back-End-Anfragen zu simulieren.

 <div>
 <img width="150px" src='docs/imgs/1.gif' />
@ -32,11 +32,11 @@

 Vercel:<http://dy.ttentau.top/>(China empfiehlt den Besuch hier)

-Netlify:<https://douyins.netlify.app/>(Für Gebiete außerhalb Chinas empfehlen wir den Besuch hier)
+Netlify:<https://douyins.netlify.app/>(Empfehlenswert für Gebiete außerhalb Chinas, dies zu besuchen)

 **Beachten**：`PC`Sie müssen den Browser in den mobilen Modus schalten, zuerst drücken`F12`Um die Konsole aufzurufen, drücken Sie`Ctrl+Shift+M`um eine normale Vorschau anzuzeigen

-**Beachten**: Bitte benutzen Sie Ihr Mobiltelefon[über Browser](https://viayoo.com/zh-cn/)oder Chrome-Browservorschau. Andere Browser erzwingen möglicherweise, dass das Video im Vollbildmodus angezeigt wird, was dazu führt, dass es nicht richtig angezeigt wird.
+**Beachten**: Bitte benutzen Sie Ihr Mobiltelefon[über Browser](https://viayoo.com/zh-cn/)oder Chrome-Browservorschau. Andere Browser erzwingen möglicherweise die Vollbilddarstellung des Videos, wodurch es nicht richtig angezeigt wird.

 ## Haftungsausschluss

@ -57,9 +57,9 @@ npm install
 npm run dev
 ```

-Öffnen Sie Ihren Browser und besuchen Sie:<http://127.0.0.1:3000>
+Öffnen Sie Ihren Browser und besuchen Sie<http://127.0.0.1:3000>

-**Hinweis: Der PC muss den Browser in den Mobilmodus schalten, zuerst drücken`F12`Um die Konsole aufzurufen, drücken Sie`Ctrl+Shift+M`um eine normale Vorschau anzuzeigen**
+**Hinweis: Der PC-Browser muss zuerst in den Mobilmodus geschaltet werden`F12`Um die Konsole aufzurufen, drücken Sie`Ctrl+Shift+M`um eine normale Vorschau anzuzeigen**

 ## Verknüpfung

--- a/README.es.md
+++ b/README.es.md
@ -36,7 +36,7 @@ Netlificar:<https://douyins.netlify.app/>(Recomiende visitar esto para áreas fu

 **Aviso**：`PC`Debes cambiar el navegador al modo móvil, primero presiona`F12`Para abrir la consola, presione`Ctrl+Shift+M`para obtener una vista previa normalmente

-**Aviso**: Por favor utilice su teléfono móvil[a través del navegador](https://viayoo.com/zh-cn/)o vista previa del navegador Chrome. Otros navegadores pueden forzar el vídeo a pantalla completa, lo que hace que no se muestre correctamente.
+**Aviso**:Por favor utilice el teléfono móvil[a través del navegador](https://viayoo.com/zh-cn/)o vista previa del navegador Chrome. Otros navegadores pueden forzar el vídeo a pantalla completa, lo que hace que no se muestre correctamente.

 ## Descargo de responsabilidad

@ -92,7 +92,7 @@ El contenido anterior es toda información pública en Internet.
 ## Funciones y sugerencias

 El proyecto se encuentra actualmente en las primeras etapas de desarrollo y continuamente se agregan nuevas características. Si tiene alguna característica o sugerencia para el software, no dude en contactarnos.`Issues`criado en
-Si también le gustan las ideas de diseño de este software, envíelas.`PR`, ¡Muchas gracias por tu apoyo!
+Si también le gustan las ideas de diseño de este software, envíelas.`PR`，非常感谢你对我们的支持！

 ## contáctame

--- a/README.ja.md
+++ b/README.ja.md
@ -36,7 +36,7 @@

 **注意**：`PC`ブラウザをモバイル モードに切り替えて、最初に を押す必要があります。`F12`コンソールを表示するには、 を押します。`Ctrl+Shift+M`通常にプレビューする

-**注意**: 携帯電話をご利用ください[ブラウザ経由](https://viayoo.com/zh-cn/)またはChromeブラウザのプレビュー。他のブラウザではビデオが強制的に全画面表示になり、正しく表示されない場合があります。
+**注意**：携帯電話をご利用ください[ブラウザ経由](https://viayoo.com/zh-cn/)またはChromeブラウザのプレビュー。他のブラウザではビデオが強制的に全画面表示になり、正しく表示されない場合があります。

 ## 免責事項

@ -91,8 +91,8 @@ npm run dev

 ## 特徴と提案

-現在、プロジェクトは開発の初期段階にあり、新しい機能が継続的に追加されていますが、ソフトウェアの機能や提案がありましたら、お気軽にお問い合わせください。`Issues`で育ちました
-このソフトウェアのデザインアイデアも気に入っていただけましたら、ぜひ送信してください`PR`、 ご支援ありがとうございました！
+現在、プロジェクトは開発の初期段階にあり、新しい機能が継続的に追加されていますが、ソフトウェアの機能や提案がありましたら、お気軽にお問い合わせください。`Issues` 中提出
+如果你也喜欢本软件的设计思想，欢迎提交 `PR`、 ご支援ありがとうございました！

 ## 私に連絡して

--- a/README.md
+++ b/README.md
@ -35,10 +35,13 @@ Vercel:  [http://dy.ttentau.top/](http://dy.ttentau.top/) (中国推荐访问这

 Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/) (中国以外地区推荐访问这个)

+Android Apk: https://github.com/zyronon/douyin/releases
+
 **注意**：`PC` 必须将浏览器切到手机模式，先按 `F12` 调出控制台，再按 `Ctrl+Shift+M`才能正常预览

 **注意**：手机请用  [Via 浏览器](https://viayoo.com/zh-cn/)  或 Chrome 浏览器预览。其它浏览器可能会强制将视频全屏，导致无法正常显示

+
 ## 免责声明

 本项目仅适用于学习和研究，不得用于商业使用
--- a/src/App.vue
+++ b/src/App.vue
@ -6,6 +6,15 @@
      </keep-alive>
    </transition>
  </router-view>
+  <div v-if="!isMobile" class="guide">
+    <Icon icon="mynaui:danger-triangle" />
+    <div class="txt">
+      <h2>切换至手机模式才可正常使用</h2>
+      <h3>1. 按 F12 调出控制台</h3>
+      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
+    </div>
+    <img src="@/assets/img/guide.png" alt="" />
+  </div>
  <Call />
 </template>
 <script>
@ -17,9 +26,17 @@ import { mapActions, mapState } from 'pinia'
 import routes from './router/routes'
 import Call from './components/Call'
 import { useBaseStore } from '@/store/pinia'
+import { onMounted, ref } from 'vue'

 export default {
  name: 'App',
+  setup() {
+    const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
+    onMounted(() => {
+      console.log('asdf', isMobile.value)
+    })
+    return { isMobile }
+  },
  components: {
    Call
  },
@ -96,6 +113,35 @@ export default {
  height: 100%;
  width: 100%;
  position: relative;
+  font-size: 14rem;
+  color: white;
+}
+
+.guide {
+  background: var(--active-main-bg);
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 16rem;
+  overflow: hidden;
+  text-align: center;
+
+  svg {
+    margin-top: 10rem;
+    font-size: 40rem;
+    color: red;
+  }
+
+  .txt {
+    text-align: left;
+    padding: 0 24rem;
+  }
+
+  img {
+    display: block;
+    width: 350rem;
+  }
 }

 .go-enter-from {
--- a/src/assets/img/guide.png
+++ b/src/assets/img/guide.png