瀏覽代碼

feat(app): добавлены мета-теги для управления масштабированием; улучшена обработка ошибок и обновлений

horanchikk 3 月之前
父節點
當前提交
a873893d1c
共有 14 個文件被更改,包括 97 次插入31 次删除
  1. 5 1
      app.vue
  2. 11 2
      components/Form/OTA.vue
  3. 1 1
      components/Wall/Post.vue
  4. 6 0
      composables/useLogger.ts
  5. 21 9
      composables/useOTA.ts
  6. 1 0
      error.vue
  7. 2 1
      package.json
  8. 13 0
      pages/about.vue
  9. 3 0
      pages/auth.vue
  10. 3 4
      pages/index.vue
  11. 29 3
      pages/news/index.vue
  12. 1 1
      store/useHeader.ts
  13. 0 8
      store/useSideBar.ts
  14. 1 1
      store/useUser.ts

+ 5 - 1
app.vue

@@ -9,7 +9,11 @@
 </template>
 
 <script setup lang="ts">
-
+definePageMeta({
+  head: [
+    { name: 'meta', content: 'width=480, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no' }
+  ]
+})
 </script>
 
 <style>

+ 11 - 2
components/Form/OTA.vue

@@ -4,7 +4,7 @@
     mode="out-in"
   >
     <div
-      v-show="showForm"
+      v-if="showForm"
       class="fixed z-[1000] top-0 left-0 w-screen h-screen bg-black bg-opacity-70 flex justify-center items-end"
     >
       <div
@@ -12,6 +12,11 @@
         :class="showForm ? 'show-up' : 'show-down'"
         class="w-full bg-background-200 flex flex-col gap-1 rounded-t-xl text-foreground p-5 justify-center items-center"
       >
+        <div @click="showForm = false" class="absolute top-3 right-1">
+          <IClose
+            class="h-[48px] w-[48px] fill-red-400 stroke-red-400"
+          />
+        </div>
         <h1 class="text-2xl font-semibold">
           Обновление
         </h1>
@@ -123,17 +128,21 @@ import { Browser } from '@capacitor/browser'
 import { useOTA } from '~/composables/useOTA'
 
 const { needsUpdate, getDescription } = await useOTA()
+const log = useLogger('OTAComponent')
 const update = needsUpdate()
 
 const description = ref()
 const target = ref(null)
 const showForm = ref(false)
 
-if (update[0]) {
+if (update) {
   showForm.value = true
   description.value = getDescription()
 }
 
+log.log(update);
+
+
 async function installUpdate() {
   await Browser.open({ url: update[3] })
 }

+ 1 - 1
components/Wall/Post.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-2 text-foreground bg-background-100 rounded-lg overflow-hidden show">
     <img
       :src="$props.image"
-      :alt="$props.title"
+      :alt="'Возникла проблема с загрузкой фото, попробуйте позже.'"
       class="h-[170px] object-cover object-center"
     >
     <div class="px-2 leading-none text-xl font-semibold">

+ 6 - 0
composables/useLogger.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/nuxt'
 import { createConsola, consola } from 'consola'
 
 export function useLogger(tag: string) {
@@ -16,9 +17,14 @@ export function useLogger(tag: string) {
           if (import.meta.dev) {
             consola._log(ctx)
           }
+
+          if (ctx.type === 'error') {
+            Sentry.captureException(ctx)
+          }
         },
       },
     ],
+
   })
 
   return log

+ 21 - 9
composables/useOTA.ts

@@ -1,4 +1,5 @@
 import { useSettings } from '~/store/useSettings';
+import type { Tota } from '~/types/ota';
 
 export async function useOTA() {
   const { 
@@ -8,16 +9,27 @@ export async function useOTA() {
   const { $state: { settings } } = useSettings()
   const log = useLogger('OTA')
 
-  const latestUpdate = await $api.ota.getVersion(settings.dev)
-  log.success(`Последняя актуальная версия: ${latestUpdate.version}`)
+  const latestUpdate = ref<Tota>({} as Tota)
+
+  try {
+    log.info('Получение обновлений...')
+    
+    latestUpdate.value = await $api.ota.getVersion(settings.dev)
+    
+    log.info(`Последняя актуальная версия: ${latestUpdate.value.version}`)
+  } catch (e) {
+    log.error('Ошибка получения обновлений ', e)
+  }
   
   function needsUpdate() {
-    return [
-      latestUpdate.version !== APP_VERSION,
-      latestUpdate.version,
-      APP_VERSION,
-      latestUpdate.apkfile,
-    ]
+    if (Object.keys(latestUpdate.value).includes('version')) {
+      return [
+        latestUpdate.value.version !== APP_VERSION,
+        latestUpdate.value.version,
+        APP_VERSION,
+        latestUpdate.value.apkfile,
+      ]
+    }
   }
 
   function parseUpdateLog(text: string) {
@@ -48,7 +60,7 @@ export async function useOTA() {
   }
 
   function getDescription() {
-    const data = parseUpdateLog(latestUpdate.description)
+    const data = parseUpdateLog(latestUpdate.value.description)
     log.info('Описание обновления:', data)
     return data;
   }

+ 1 - 0
error.vue

@@ -29,6 +29,7 @@ import * as Sentry from "@sentry/nuxt";
 const router = useRouter()
 const error = useError()
 
+console.error(error.value)
 Sentry.captureException(error);
 
 definePageMeta({

+ 2 - 1
package.json

@@ -50,7 +50,8 @@
     "pako": "^2.1.0",
     "turndown": "^7.2.0",
     "vue": "latest",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "vue-virtual-scroller": "2.0.0-beta.8"
   },
   "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c",
   "devDependencies": {

+ 13 - 0
pages/about.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Раздел в разработке
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

+ 3 - 0
pages/auth.vue

@@ -121,6 +121,7 @@
 </template>
 
 <script setup lang="ts">
+import { SplashScreen } from '@capacitor/splash-screen';
 import { useUser } from '~/store/useUser'
 import { useDebug } from '~/store/useDebug'
 
@@ -167,4 +168,6 @@ async function auth() {
 
   isLoading.value = false
 }
+
+SplashScreen.hide()
 </script>

+ 3 - 4
pages/index.vue

@@ -5,12 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import { SplashScreen } from '@capacitor/splash-screen';
-
 definePageMeta({
   layout: 'none',
 })
 
-SplashScreen.hide()
-navigateTo('/auth')
+const router = useRouter()
+
+router.push('/auth')
 </script>

+ 29 - 3
pages/news/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full overflow-y-scroll flex flex-col p-2 gap-5">
+  <div class="w-full flex flex-col p-2 gap-5">
     <div
       v-if="!newsList"
       class="w-full h-full"
@@ -12,7 +12,7 @@
       />
     </div>
     <template v-else>
-      <WallPost
+      <!-- <WallPost
         v-for="news in newsList"
         :key="news.id"
         :image="news.preview.length > 0 ? news.preview : `/nophoto.png`"
@@ -20,13 +20,39 @@
         :description="news.description"
         :date="news.date"
         @click="navigateTo(`/news/${news.id}`)"
-      />
+      /> -->
+      <DynamicScroller
+        :items="newsList"
+        :min-item-size="20"
+        class="h-full"
+      >
+        <template v-slot="{ item, index, active }">
+          <DynamicScrollerItem
+            :item="item"
+            :active="active"
+            :data-index="index"
+            :size-dependencies="[
+              item.title
+            ]"
+          >
+          <WallPost
+            :key="item.id"
+            :image="item.preview.length > 0 ? item.preview : `/nophoto.png`"
+            :title="item.title"
+            :description="item.description"
+            :date="item.date"
+            @click="navigateTo(`/news/${item.id}`)"
+          />
+          </DynamicScrollerItem>
+        </template>
+      </DynamicScroller>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { NewsList } from '~/types/news'
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 
 definePageMeta({
   name: 'Новости',

+ 1 - 1
store/useHeader.ts

@@ -5,7 +5,7 @@ interface MenuRoute {
 }
 
 export const useHeader = defineStore('useHeader', () => {
-  const log = useLogger('useHeader')
+  const log = useLogger('headerStore')
   const menu = ref<[] | MenuRoute[]>([])
   const router = useRouter()
 

+ 0 - 8
store/useSideBar.ts

@@ -1,27 +1,19 @@
 export const useSideBar = defineStore('useSideBar', () => {
   const isVisible = ref(false)
   const isRendered = ref(false)
-  const log = useLogger('useSidebar')
 
   function show() {
-    log.log('show')
     if (isRendered.value === false) {
       isRendered.value = true
       isVisible.value = true
     }
   }
   function hide() {
-    log.log('hide')
     isVisible.value = false
     setTimeout(() => {
       isRendered.value = false
     }, 500)
   }
 
-  if (import.meta.dev) {
-    watch(isRendered, val => log.log(`isRendered: ${val}`))
-    watch(isVisible, val => log.log(`isVisible: ${val}`))
-  }
-
   return { isVisible, isRendered, show, hide }
 })

+ 1 - 1
store/useUser.ts

@@ -24,7 +24,7 @@ function findNewKeys(oldObj: object, newObj: object) {
 }
 
 export const useUser = defineStore('useUser', () => {
-  const log = useLogger('useUser')
+  const log = useLogger('userStore')
   const data = ref<TUserData>(JSON.parse(localStorage.getItem('ktc_data')!) || {})
 
   function setAuthData(access_token: string, user_id: number) {