create-young-proj 1.0.0 → 1.1.0

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

@@ -0,0 +1,78 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-16 14:15:51
+ * @LastEditTime: 2023-11-08 10:56:34
+ * @Description:
+-->
+<script lang="ts" setup>
+import { deepClone } from '@bluesyoung/utils'
+
+const route = useRoute()
+
+const { logo_url, kj_logo_url, nav_arr, seo } = storeToRefs(useNavStore())
+
+const [
+  { data: nav_data },
+  { data: seo_info },
+] = await Promise.all([
+  useFetch('/api/get_head_nav'),
+  useFetch('/api/get_seo_info', {
+    params: {
+      page: route.path,
+    },
+  }),
+])
+
+if (!nav_data.value || !seo_info.value)
+  throw createError('数据获取失败')
+
+logo_url.value = getFullServerUrl(nav_data.value.logo_url)
+kj_logo_url.value = getFullServerUrl(nav_data.value.kj_logo_url)
+nav_arr.value = nav_data.value.nav_arr
+seo.value = deepClone(seo_info.value!)
+
+useHead({
+  meta: [
+    { name: 'keywords', content: seo.value.keywords },
+  ],
+  htmlAttrs: {
+    lang: 'zh-CN',
+  },
+})
+
+useSeoMeta({
+  title: seo.value.title,
+  ogTitle: seo.value.title,
+  twitterTitle: seo.value.title,
+  description: seo.value.description,
+  ogDescription: seo.value.description,
+  twitterDescription: seo.value.description,
+  ogImage: logo_url.value,
+  twitterImage: logo_url.value,
+  twitterCard: 'summary_large_image',
+  ogUrl: nav_data.value.site_url,
+  ogType: 'website',
+})
+
+const isFull = computed(() => route.query.full || route.meta.full)
+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>
+
+  <!-- 底部 -->
+  <LazyYoungFooter lt-md="!hidden" />
+  <!-- 移动端 tabbar -->
+  <LazyYoungTabbar />
+</template>

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

@@ -0,0 +1,98 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-09-21 15:57:55
+ * @LastEditTime: 2023-11-08 10:56:04
+ * @Description:
+ */
+
+import { resolve } from 'node:path'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  'app': {
+    head: {
+      htmlAttrs: {
+        lang: 'zh-CN',
+      },
+      viewport: 'width=device-width,initial-scale=1.0,user-scalable=no,shrink-to-fit=no',
+      meta: [
+        { name: 'theme-color', content: '#ffffff' },
+        { name: 'screen-orientation', content: 'portrait' },
+        { name: 'x5-orientation', content: 'portrait' },
+        { 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' },
+        { 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' },
+      ],
+      script: [
+        {
+          innerHTML: `
+            this.globalThis || (this.globalThis = this);
+            window.onerror = function(e) {
+              console.log(e)
+              window.alert('您的浏览器版本过低，请尝试使用其他浏览器或将浏览器升级至最新版本后重试！');
+            }
+
+            // ios 支付宝浏览器，兜底
+            const ua = navigator.userAgent;
+            const pathname = window.location.pathname;
+            if (/Alipay/img.test(ua) && /iPhone/img.test(ua) && pathname !== '/callback_pay.html') {
+              alert('当前环境受限，建议使用系统浏览器打开！');
+              window.close();
+              history.back();
+              AlipayJSBridge && AlipayJSBridge.call && AlipayJSBridge.call('popWindow');
+            }
+          `,
+        },
+      ],
+      link: [
+        { rel: 'icon', type: 'image/png', href: '/favicon.ico' },
+        { rel: 'apple-touch-icon', type: 'image/png', href: '/favicon.ico' },
+        { rel: 'apple-touch-icon-precomposed', type: 'image/png', href: '/favicon.ico' },
+        // dns 预解析
+        { rel: 'dns-prefetch', href: 'https://master-web-cdn.laiyouxi.com' },
+        // 图片预加载
+        { rel: 'prefetch', href: '/svg/image_placeholder.svg', as: 'image' },
+      ],
+    },
+  },
+  'devtools': { enabled: false },
+  'modules': [
+    'nuxt-swiper',
+    '@nuxtjs/device',
+    '@pinia/nuxt',
+    '@unocss/nuxt',
+    '@vueuse/nuxt',
+    '@element-plus/nuxt',
+    '@vant/nuxt',
+    '@formkit/auto-animate/nuxt',
+    '@bluesyoung/nuxt3-lazy-load',
+  ],
+  'unocss': {
+    // 默认的 @unocss/reset/tailwind.css 会造成 element 样式异常
+    // 手动注入 @unocss/reset/tailwind-compat.css
+    preflight: false,
+  },
+
+  'nitro': {
+    output: {
+      dir: resolve(__dirname, './dist'),
+    },
+    sourceMap: false,
+    minify: true,
+  },
+
+  '@bluesyoung/nuxt3-lazy-load': {
+    defaultImage: '/svg/image_placeholder.svg',
+  },
+
+  'vite': {
+    build: {
+      // 兼容钉钉浏览器
+      target: 'es2015',
+      sourcemap: false,
+    },
+  },
+})

package/template-nuxt-website/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "nuxt3-website",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --host",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview --host",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@bluesyoung/logger": "^0.0.1",
+    "@bluesyoung/utils": "^0.2.1",
+    "c12": "^1.4.2",
+    "http-proxy": "^1.18.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^1.1.0",
+    "@bluesyoung/nuxt3-lazy-load": "^1.3.0",
+    "@element-plus/nuxt": "^1.0.6",
+    "@formkit/auto-animate": "^0.8.0",
+    "@iconify/json": "^2.2.135",
+    "@nuxtjs/device": "^3.1.1",
+    "@pinia/nuxt": "^0.5.1",
+    "@unocss/nuxt": "^0.57.1",
+    "@vant/nuxt": "^1.0.3",
+    "@vueuse/nuxt": "^10.5.0",
+    "element-plus": "^2.3.14",
+    "eslint": "^8.51.0",
+    "nuxt": "3.7.4",
+    "nuxt-swiper": "^1.2.2",
+    "sass": "^1.69.5",
+    "typescript": "^5.2.2",
+    "vant": "^4.7.3",
+    "vconsole": "^3.15.1"
+  }
+}

package/template-nuxt-website/pages/index.html.vue

@@ -0,0 +1,16 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-08 15:12:27
+ * @LastEditTime: 2023-10-08 15:13:35
+ * @Description:
+-->
+<script lang="ts" setup>
+navigateTo('/', {
+  replace: true,
+  redirectCode: 301,
+})
+</script>
+
+<template>
+  <div />
+</template>

package/template-nuxt-website/pages/index.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-21 16:38:58
+ * @LastEditTime: 2023-11-08 09:54:17
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'home',
+  full: true,
+})
+
+const [
+  { data: bdata },
+] = await Promise.all([
+  useFetch('/api/get_home_banner'),
+])
+
+const banners = ref<BannerItem[]>([])
+
+if (!bdata.value)
+  throw createError('数据获取失败')
+
+banners.value = bdata.value
+</script>
+
+<template>
+  <YoungBanner v-if="banners.length > 0" :banners="banners" preload />
+</template>

package/template-nuxt-website/pages/match.html.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-08 17:30:30
+ * @LastEditTime: 2023-11-08 11:05:53
+ * @Description:
+-->
+<script lang="ts" setup>
+const bread_nav: BreadNavItem[] = [
+  { title: '首页', href: '/' },
+  { title: '赛事', href: '/match.html' },
+]
+
+definePageMeta({
+  layout: 'tabbar',
+})
+</script>
+
+<template>
+  <div class="pt-20px flex justify-between text-16px lh-24px font-400 color-[#333]" lt-md="hidden">
+    <BreadNav :nav-arr="bread_nav" />
+  </div>
+  match
+</template>

package/template-nuxt-website/pages/news/[id].html.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-15 10:04:05
+ * @LastEditTime: 2023-11-08 10:51:31
+ * @Description:
+-->
+<script lang="ts" setup>
+const { active_nav } = storeToRefs(useNavStore())
+
+definePageMeta({
+  name: '文章详情',
+})
+
+if (process.client)
+  active_nav.value = '/news.html'
+
+const route = useRoute()
+const { id } = route.params
+
+const bread_nav: BreadNavItem[] = [
+  { title: '首页', href: '/' },
+  { title: '资讯', href: '/news.html' },
+  { title: '新闻', href: `/news/${id}.html` },
+]
+
+useHead({
+  meta: [
+    {
+      name: 'keywords',
+      content: '我是关键字',
+    },
+  ],
+})
+
+useSeoMeta({
+  title: '我是标题',
+  ogTitle: '我是标题',
+  twitterTitle: '我是标题',
+  description: '我是描述',
+  ogDescription: '我是描述',
+  twitterDescription: '我是描述',
+  twitterCard: 'summary_large_image',
+  ogType: 'article',
+})
+</script>
+
+<template>
+  <div>
+    <div class="pt-20px flex justify-between text-16px lh-24px font-400 color-[#333]" lt-md="pt-0">
+      <BreadNav :nav-arr="bread_nav" />
+    </div>
+    <div class="w-[62.5%] mx-auto mb-80px reset-img" lt-md="w-full">
+      params：
+      - id: {{ id }}
+    </div>
+  </div>
+</template>

package/template-nuxt-website/pages/news.html.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-08 17:27:57
+ * @LastEditTime: 2023-11-08 11:04:45
+ * @Description:
+-->
+<script lang="ts" setup>
+const bread_nav: BreadNavItem[] = [
+  { title: '首页', href: '/' },
+  { title: '资讯', href: '/news.html' },
+]
+
+definePageMeta({
+  layout: 'tabbar',
+})
+</script>
+
+<template>
+  <div class="flex justify-between text-16px lh-24px font-400 color-[#333] py-20px" lt-md="py-0">
+    <BreadNav :nav-arr="bread_nav" />
+  </div>
+  <div>news list</div>
+  <NuxtLink to="/news/2233.html" class="text-blue-500">
+    go news detail
+  </NuxtLink>
+</template>

package/template-nuxt-website/pages/shop.html.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-08 17:18:31
+ * @LastEditTime: 2023-11-08 09:34:15
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'tabbar',
+})
+
+const bread_nav = ref<BreadNavItem[]>([
+  { title: '首页', href: '/' },
+  { title: '商城', href: '/shop.html' },
+])
+</script>
+
+<template>
+  <div lt-md="pb-80px">
+    <div class="py-20px flex justify-between text-16px lh-24px font-400 color-[#333]" lt-md="hidden">
+      <BreadNav :nav-arr="bread_nav" />
+    </div>
+
+    shop
+  </div>
+</template>

package/template-nuxt-website/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/template-nuxt-website/public/svg/image_placeholder.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<rect x="17.5" y="30" width="15" height="40" fill="#93dbe9">
+  <animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="18;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.2s"></animate>
+  <animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="64;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.2s"></animate>
+</rect>
+<rect x="42.5" y="30" width="15" height="40" fill="#689cc5">
+  <animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="20.999999999999996;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.1s"></animate>
+  <animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="58.00000000000001;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.1s"></animate>
+</rect>
+<rect x="67.5" y="30" width="15" height="40" fill="#5e6fa3">
+  <animate attributeName="y" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="20.999999999999996;30;30" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
+  <animate attributeName="height" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.5;1" values="58.00000000000001;40;40" keySplines="0 0.5 0.5 1;0 0.5 0.5 1"></animate>
+</rect>
+<!-- [ldio] generated by https://loading.io/ --></svg>

package/template-nuxt-website/server/api/get_footer_info.get.ts

@@ -0,0 +1,52 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-10-07 16:02:03
+ * @LastEditTime: 2023-11-08 10:32:38
+ * @Description:
+ */
+import { NUXT_PUBLIC_CACHE_TIME } from '~~/composables/config'
+
+export default cachedEventHandler(async () => {
+  console.log('start get footer info')
+
+  try {
+    const friend_links: FriendLinkItem[] = [
+      {
+        title: '来游戏',
+        href: 'https://www.laiyouxi.com'
+      },
+      {
+        title: '🌾',
+        href: 'https://mi.com'
+      }
+    ]
+    const follow_us: FollowItem[] = []
+    const about_nav: AboutNavItem[] = []
+    const beian = `<p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">ICP:鄂B2-20120057-2</a>文网文:鄂网文[2020]5051-198号 文网游备字:[2015]M-CBG0688号 新广出审:[2015]1273号</p>
+
+    <p>全国文明市场统一举报电话:12318武汉卓讯互动信息科技有限公司 版权所有</p>
+
+    <p>湖北省文化市场诚信守法经营承诺书</p>
+
+    <p>未满18周岁的未成年人用户请在家长的监督下进行游戏 |&nbsp;未成年人家长监护工程</p>
+
+    <p><a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502000478" target="_blank">鄂公网安备 42018502000478号</a>&nbsp;&nbsp;&nbsp;<img alt="" loading="lazy" src="https://app-storage.laiyouxi.com/mchadminserver/2e524461-3725-40d9-b1e9-c7a15ba6bef5.png">&nbsp;&nbsp;<img alt="" loading="lazy" src="https://app-storage.laiyouxi.com/mchadminserver/cf4e3416-14c8-46f2-8e02-55ccb991e123.png">&nbsp; &nbsp;<img alt="" loading="lazy" src="https://app-storage.laiyouxi.com/mchadminserver/ba41a711-52b6-4d12-8800-5f49443aa84b.png">&nbsp; &nbsp;<img alt="" loading="lazy" src="https://app-storage.laiyouxi.com/mchadminserver/25af8dc3-9665-4519-8885-d840d7c15599.png">&nbsp;&nbsp;&nbsp;<img alt="" src="https://app-storage.laiyouxi.com/mchadminserver/3acd60f6-d583-48c1-b16a-87288960df3f.png" loading="lazy"></p>
+
+    <p>健康游戏忠告：抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>`
+
+    return {
+      logo_bottom: 'https://master-web-cdn.laiyouxi.com/platform_index/online/74af573514bce434ef1aad683250e8f0.png',
+      friend_links,
+      follow_us,
+      about_nav,
+      beian,
+    }
+  }
+  catch (error) {
+    console.error('get footer info fail: ', error)
+    return false
+  }
+}, {
+  maxAge: NUXT_PUBLIC_CACHE_TIME,
+  swr: true,
+})

package/template-nuxt-website/server/api/get_gray_status.get.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-07 12:06:48
+ * @LastEditTime: 2023-11-08 10:30:59
+ * @Description:
+ */
+import { NUXT_PUBLIC_CACHE_TIME } from '~~/composables/config'
+/**
+ * @example 服务端请求示例
+ */
+export default cachedEventHandler(async (event) => {
+  // const ServerFetch = useServerFetch(event)
+
+  try {
+    // const { gray = false } = (await ServerFetch<{ gray: boolean }>('/api/v1/is_gray')) || {}
+    return {
+      /**
+       * 是否置灰
+       */
+      is_gray: false,
+      /**
+       * 全局置灰为 *
+       * 否则仅首页置灰
+       */
+      scope: '',
+    }
+  }
+  catch (error) {
+    console.error('get gray status fail: ', error)
+    return {
+      is_gray: false,
+      scope: '',
+    }
+  }
+}, {
+  maxAge: NUXT_PUBLIC_CACHE_TIME * 3,
+  swr: true,
+})

package/template-nuxt-website/server/api/get_head_nav.get.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-07 14:43:38
+ * @LastEditTime: 2023-11-08 09:53:14
+ * @Description:
+ */
+import { NUXT_PUBLIC_CACHE_TIME } from '~~/composables/config'
+
+export default cachedEventHandler(async () => {
+  console.log('start get head info')
+
+  try {
+    const nav_arr: NavItem[] = [
+      { title: '首页', href: '/' },
+      { title: '资讯', href: '/news.html' },
+      { title: '赛事', href: '/match.html' },
+      { title: '商城', href: '/shop.html' }
+    ]
+    const fromMobile = process.env.PROJECT_NAME === 'mobile'
+
+    return {
+      logo_url: 'https://master-web-cdn.laiyouxi.com/platform_index/online/744f27a210a9098c79f58d115cc321ea.png',
+      kj_logo_url: 'https://master-web-cdn.laiyouxi.com/platform_index/online/83fa32ed0e3f286fccd93dae7d9bee8c.png',
+      nav_arr,
+      showAd: false,
+      img_ad: '',
+      img_btn: '',
+      site_url: fromMobile ? process.env.VITE_WEBSITE_MOBILE! : process.env.VITE_WEBSITE_PC!,
+    }
+  }
+  catch (error) {
+    console.error('get head info fail: ', error)
+    return false
+  }
+}, {
+  maxAge: NUXT_PUBLIC_CACHE_TIME,
+  swr: true,
+})

package/template-nuxt-website/server/api/get_home_banner.get.ts

@@ -0,0 +1,28 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-10-07 17:43:38
+ * @LastEditTime: 2023-10-09 12:08:35
+ * @Description:
+ */
+import { NUXT_PUBLIC_CACHE_TIME } from '~~/composables/config'
+
+export default cachedEventHandler(async (event) => {
+  console.log('start get home banner')
+
+  try {
+    const banners: BannerItem[] = [
+      {
+        img_url: 'https://master-web-cdn.laiyouxi.com/platform_index/online/files/banner-pc.png'
+      }
+    ]
+
+    return banners
+  }
+  catch (error) {
+    console.error('get home banner fail: ', error)
+    return false
+  }
+}, {
+  maxAge: NUXT_PUBLIC_CACHE_TIME,
+  swr: true,
+})

package/template-nuxt-website/server/api/get_seo_info.get.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-07 14:29:59
+ * @LastEditTime: 2023-11-08 09:51:06
+ * @Description:
+ */
+import { NUXT_PUBLIC_CACHE_TIME } from '~~/composables/config'
+
+export default cachedEventHandler(async (event) => {
+  console.log('start get seo info')
+
+  const { page } = getQuery(event)
+  /**
+   * 对于特定页面的 seo 进行相应的索引
+   */
+  console.log('🚀 ~ file: get_seo_info.get.ts:10 ~ cachedEventHandler ~ page:', page)
+
+  try {
+    return {
+      keywords: '我是关键字，啦啦啦，哈哈哈',
+      description: '我是描述，啦啦啦，哈哈哈',
+      title: '我是标题，啦啦啦，哈哈哈',
+    } as SeoInfo
+  }
+  catch (error) {
+    console.error('get seo info fail: ', error)
+    return false
+  }
+}, {
+  maxAge: NUXT_PUBLIC_CACHE_TIME * 30,
+  swr: true,
+})

package/template-nuxt-website/server/middleware/platform.ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-10-07 12:11:46
+ * @LastEditTime: 2023-11-01 19:09:47
+ * @Description:
+ */
+export default defineEventHandler((event) => {
+  event.context.platformSource = process.env.PROJECT_NAME === 'mobile' ? 'mobile' : 'pc'
+  event.context['x-forwarded-for'] = event.node.req.headers['x-forwarded-for'] as string
+  event.context['x-real-ip'] = event.node.req.headers['x-real-ip'] as string
+})