create-young-proj 2.0.0 → 2.2.0

package/template-nuxt-website/app.vue

@@ -1,9 +1,10 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-05-25 19:53:07
- * @LastEditTime: 2023-10-27 16:31:29
+ * @LastEditTime: 2024-06-17 12:02:16
  * @Description:
 -->
+
 <script lang="ts" setup>
 import '@unocss/reset/tailwind-compat.css'
 
@@ -18,6 +19,49 @@ app.hook('page:start', () => {
 app.hook('page:finish', () => {
   // console.log('loading end ...')
   hideLoading()
+
+  /**
+   * ua: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0
+   * 解析出版本号 120.0.0.0
+   * todo: 按需调整版本号
+   */
+  const ua = navigator.userAgent
+
+  const version = ua.match(/Chrome\/(\d+)\./)?.[1] ?? ''
+
+  // 旧版浏览器
+  if (version && Number.parseInt(version) < 63) {
+    console.warn('浏览器版本过低，可能会出问题')
+    showConfirmDialog({
+      title: '温馨提示',
+      message:
+        '当前浏览器版本过低，可能会导致部分功能无法正常使用，建议您升级到最新版本的浏览器。',
+      confirmButtonText: '立即升级',
+      cancelButtonText: '仍要使用',
+      cancelButtonColor: 'red',
+    })
+      .then(() => {
+        location.href = 'https://support.dmeng.net/upgrade-your-browser.html'
+      })
+      .catch(() => {
+        // on cancel
+        // todo: 记住选项，不再弹窗
+        console.log('用户选择继续使用')
+      })
+  }
+  else if (
+    (/Alipay/i.test(ua) && /\(iPhone|iPod|iPad\)/i.test(ua))
+    || (/QQ\//i.test(ua) && /\(iPhone|iPod|iPad\)/i.test(ua))
+  ) {
+    // ios:
+    // 支付宝内置浏览器
+    // QQ 内置浏览器
+    console.warn('ios alipay/qq, has useFetch 400 problem, please use native app')
+    showConfirmDialog({
+      title: '温馨提示',
+      message: '当前环境访问受限，可能会导致部分功能无法正常使用，建议您使用系统自带浏览器访问',
+    }).catch(() => null)
+  }
 })
 </script>
 

package/template-nuxt-website/layouts/default.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-09-27 14:15:48
- * @LastEditTime: 2023-11-08 09:26:21
+ * @LastEditTime: 2024-06-14 17:30:20
  * @Description:
 -->
 <script lang="ts" setup>
@@ -60,21 +60,23 @@ const bgColor = computed(() => (route.meta.bgColor as string) || '#fff')
 </script>
 
 <template>
-  <!-- PC 顶部导航栏 & 移动端首页导航栏 -->
-  <YoungHeader lt-md="!hidden" />
-  <!-- 移动端其他页面导航 -->
-  <MobileNavBar v-if="$route.meta.name" :title="$route.meta.name" />
+  <div>
+    <!-- PC 顶部导航栏 & 移动端首页导航栏 -->
+    <YoungHeader lt-md="!hidden" />
+    <!-- 移动端其他页面导航 -->
+    <MobileNavBar v-if="$route.meta.name" :title="$route.meta.name" />
 
-  <main
-    class="m-auto" :class="[showAd ? 'mt-160px min-h-[calc(100vh-160px)] lt-md:mt-80px lt-md:min-h-[calc(100vh-80px)]' : 'mt-80px min-h-[calc(100vh-80px)] lt-md:mt-44px min-h-[calc(100vh-44px)]']" :style="{
-      backgroundColor: bgColor,
-    }"
-  >
-    <div class="m-auto" lt-md="px-10px" :class="[isFull ? 'w-full' : 'container']">
-      <NuxtPage />
-    </div>
-  </main>
+    <main
+      class="m-auto" :class="[showAd ? 'mt-160px min-h-[calc(100vh-160px)] lt-md:mt-80px lt-md:min-h-[calc(100vh-80px)]' : 'mt-80px min-h-[calc(100vh-80px)] lt-md:mt-44px min-h-[calc(100vh-44px)]']" :style="{
+        backgroundColor: bgColor,
+      }"
+    >
+      <div class="m-auto" lt-md="px-10px" :class="[isFull ? 'w-full' : 'container']">
+        <NuxtPage />
+      </div>
+    </main>
 
-  <!-- 底部 -->
-  <LazyYoungFooter lt-md="!hidden" />
+    <!-- 底部 -->
+    <LazyYoungFooter lt-md="!hidden" />
+  </div>
 </template>

package/template-nuxt-website/layouts/home.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-10-11 17:30:55
- * @LastEditTime: 2023-11-08 10:56:14
+ * @LastEditTime: 2024-06-14 17:19:56
  * @Description:
 -->
 <script lang="ts" setup>
@@ -59,17 +59,19 @@ const isFull = computed(() => route.query.full || route.meta.full)
 </script>
 
 <template>
-  <!-- PC 顶部导航栏 & 移动端首页导航栏 -->
-  <YoungHeader />
+  <div>
+    <!-- PC 顶部导航栏 & 移动端首页导航栏 -->
+    <YoungHeader />
 
-  <main class="m-auto" :class="[showAd ? 'mt-160px min-h-[calc(100vh-160px)] lt-md:mt-80px lt-md:min-h-[calc(100vh-80px)]' : 'mt-80px min-h-[calc(100vh-80px)] lt-md:mt-44px min-h-[calc(100vh-44px)]']">
-    <div class="m-auto" lt-md="px-10px" :class="[isFull ? 'w-full' : 'container']">
-      <NuxtPage />
-    </div>
-  </main>
+    <main class="m-auto" :class="[showAd ? 'mt-160px min-h-[calc(100vh-160px)] lt-md:mt-80px lt-md:min-h-[calc(100vh-80px)]' : 'mt-80px min-h-[calc(100vh-80px)] lt-md:mt-44px min-h-[calc(100vh-44px)]']">
+      <div class="m-auto" lt-md="px-10px" :class="[isFull ? 'w-full' : 'container']">
+        <NuxtPage />
+      </div>
+    </main>
 
-  <!-- 底部 -->
-  <LazyYoungFooter />
-  <!-- 移动端 tabbar -->
-  <LazyYoungTabbar />
+    <!-- 底部 -->
+    <LazyYoungFooter />
+    <!-- 移动端 tabbar -->
+    <LazyYoungTabbar />
+  </div>
 </template>

package/template-nuxt-website/layouts/tabbar.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-10-16 14:15:51
- * @LastEditTime: 2023-11-08 10:56:34
+ * @LastEditTime: 2024-06-14 17:29:19
  * @Description:
 -->
 <script lang="ts" setup>
@@ -59,20 +59,22 @@ const bgColor = computed(() => (route.meta.bgColor as string) || '#fff')
 </script>
 
 <template>
-  <!-- PC 顶部导航栏 & 移动端首页导航栏 -->
-  <YoungHeader lt-md="!hidden" />
-  <main
-    class="m-auto mt-80px min-h-[calc(100vh-80px)] lt-md:mt-0 min-h-100vh" :style="{
-      backgroundColor: bgColor,
-    }"
-  >
-    <div class="m-auto" lt-md="px-10px" :class="[isFull ? 'w-full' : 'container']">
-      <NuxtPage />
-    </div>
-  </main>
+  <div>
+    <!-- PC 顶部导航栏 & 移动端首页导航栏 -->
+    <YoungHeader lt-md="!hidden" />
+    <main
+      class="m-auto mt-80px min-h-[calc(100vh-80px)] lt-md:mt-0 min-h-100vh" :style="{
+        backgroundColor: bgColor,
+      }"
+    >
+      <div class="m-auto" lt-md="px-10px" :class="[isFull ? 'w-full' : 'container']">
+        <NuxtPage />
+      </div>
+    </main>
 
-  <!-- 底部 -->
-  <LazyYoungFooter lt-md="!hidden" />
-  <!-- 移动端 tabbar -->
-  <LazyYoungTabbar />
+    <!-- 底部 -->
+    <LazyYoungFooter lt-md="!hidden" />
+    <!-- 移动端 tabbar -->
+    <LazyYoungTabbar />
+  </div>
 </template>

package/template-nuxt-website/nuxt.config.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-09-21 15:57:55
- * @LastEditTime: 2023-11-30 11:05:04
+ * @LastEditTime: 2024-06-17 12:00:53
  * @Description:
  */
 import { resolve } from 'node:path'
@@ -21,7 +21,7 @@ export default defineNuxtConfig({
         { name: 'renderer', content: 'webkit' },
         { name: 'mobile-web-app-capable', content: 'yes' },
         { name: 'creator', content: 'BluesYoung-web' },
-        { 'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge,chrome=1' },
+        { 'http-equiv': 'x-ua-compatible', 'content': 'IE=edge,chrome=1' },
         { id: 'viewportMeta', name: 'viewport', content: 'maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0' },
         { name: 'format-detection', content: 'telephone=no,email=no,date=no,address=no' },
       ],
@@ -45,6 +45,11 @@ export default defineNuxtConfig({
             }
           `,
         },
+        // ! 必须在这里导入，ResizeObserver 写在 additionalLegacyPolyfills 里面不生效
+        // ? 基于 polyfill.io 按需导入
+        {
+          src: '//cdn.polyfill.io/v3/polyfill.min.js?features=ResizeObserver%2CElement.prototype.getAttributeNames',
+        },
       ],
       link: [
         { rel: 'icon', type: 'image/png', href: '/favicon.ico' },
@@ -59,6 +64,7 @@ export default defineNuxtConfig({
   },
   'devtools': { enabled: false },
   'modules': [
+    'nuxt-vite-legacy',
     'nuxt-swiper',
     '@nuxtjs/device',
     '@pinia/nuxt',
@@ -95,12 +101,17 @@ export default defineNuxtConfig({
     '*': { swr: true },
   },
 
+  // 兼容旧浏览器
+  // Optionally, provide @vitejs/plugin-legacy options.
+  // For example, for Chrome 49 you could use:
+  'legacy': {
+    targets: ['chrome 49'],
+  },
+
   'vite': {
     build: {
       sourcemap: false,
-      // 兼容旧浏览器
-      target: ['chrome58'],
-      cssTarget: ['chrome58'],
+      cssTarget: ['chrome49'],
     },
   },
   'runtimeConfig': {
@@ -111,4 +122,8 @@ export default defineNuxtConfig({
       cacheTime: 10,
     },
   },
+
+  'experimental': {
+    appManifest: false,
+  },
 })

package/template-nuxt-website/package.json

@@ -32,8 +32,9 @@
     "@vueuse/nuxt": "^10.5.0",
     "element-plus": "^2.3.14",
     "eslint": "^8.51.0",
-    "nuxt": "3.5.1",
+    "nuxt": "^3.12.2",
     "nuxt-swiper": "^1.2.2",
+    "nuxt-vite-legacy": "^1.2.0",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
     "vant": "^4.7.3"