feat: use nuxtjs/device

Author: wiidede

README.md

@@ -192,6 +192,7 @@ For users who previously deployed using NuxtHub Admin:
 | `NUXT_SESSION_PASSWORD` | Yes | -- | Session encryption key(at least 32 characters) |
 | `NUXT_PUBLIC_TITLE` | No | `Exif Gallery Nuxt` | Application title |
 | `NUXT_PUBLIC_DESCRIPTION` | No | `A full-stack photo album solution that integrates AI intelligent processing, browser image compression, and other functions` | Application description |
+| `NUXT_PUBLIC_DISABLE_3D_CARD_DEFAULT` | No | `false` | Whether to disable 3D card effect by default (set to `true` to disable) |
 
 ## 📁 Project Structure
 

README_zh.md

@@ -193,6 +193,7 @@ pnpm dev --remote
 | `NUXT_SESSION_PASSWORD` | 是 | 自动生成 | 会话加密密钥（至少32位） |
 | `NUXT_PUBLIC_TITLE` | 否 | `Exif Gallery Nuxt` | 应用标题 |
 | `NUXT_PUBLIC_DESCRIPTION` | 否 | 一个集成了 AI 智能处理、浏览器图片压缩等功能的全栈相册解决方案 | 应用描述 |
+| `NUXT_PUBLIC_DISABLE_3D_CARD_DEFAULT` | 否 | `false` | 是否默认禁用 3D 卡片效果（设为 `true`默认禁用） |
 
 ## 📁 项目结构
 

app/composables/infos.ts

@@ -3,5 +3,3 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 export const mdScreen = breakpoints.greaterOrEqual('md')
-
-export const isTouchDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator?.userAgent)

app/composables/useTheme.ts

@@ -1,8 +1,12 @@
 export function useTheme(init = false) {
   const theme = useLocalStorage('shadcn-theme', 'blue')
   const radius = useLocalStorage('shadcn-radius', '0.5')
+  const config = useRuntimeConfig()
+  const { isDesktop } = useDevice()
   const disable3DCard = useCookie<boolean>('disable-3d-card', {
-    default: () => isTouchDevice,
+    default: () => {
+      return ({ true: true, false: false }[config.public.disable3DCardDefault] ?? !isDesktop)
+    },
     sameSite: 'lax',
     maxAge: 60 * 60 * 24 * 365,
   })

nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@vueuse/nuxt',
     '@unocss/nuxt',
+    '@nuxtjs/device',
     'nuxt-auth-utils',
   ],
   hub: {
@@ -61,6 +62,7 @@ export default defineNuxtConfig({
     public: {
       title: process.env.NUXT_PUBLIC_TITLE,
       description: process.env.NUXT_PUBLIC_DESCRIPTION,
+      disable3DCardDefault: process.env.NUXT_PUBLIC_DISABLE_3D_CARD_DEFAULT,
     },
   },
   i18n: {

package.json

@@ -26,6 +26,7 @@
     "@jsquash/webp": "^1.5.0",
     "@libsql/client": "^0.17.0",
     "@nuxthub/core": "0.10.4",
+    "@nuxtjs/device": "4.0.0",
     "@paralleldrive/cuid2": "^3.3.0",
     "@pinia/nuxt": "^0.11.3",
     "@unocss/reset": "66.6.0",