create-young-proj 1.0.0 → 1.1.0

package/template-nuxt-website/components/young/Footer.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-27 14:40:31
+ * @LastEditTime: 2023-10-11 16:07:14
+ * @Description:
+-->
+<script lang="ts" setup>
+const logo_bottom = ref('')
+const friend_links = ref<FriendLinkItem[]>([])
+const follow_us = ref<FollowItem[]>([])
+const about_nav = ref<AboutNavItem[]>([])
+
+const { data } = await useFetch('/api/get_footer_info')
+
+if (!data.value)
+  throw createError('底部信息获取失败')
+
+const beian = data.value.beian
+logo_bottom.value = data.value.logo_bottom
+friend_links.value = data.value.friend_links
+follow_us.value = data.value.follow_us
+about_nav.value = data.value.about_nav
+</script>
+
+<template>
+  <footer class="w-full " md="bg-[#4E5053]">
+    <div class="container py-50px mx-auto flex items-center h-[280px]" lt-md="!hidden">
+      <div class="img w-240px">
+        <NuxtLink to="/">
+          <img :src="logo_bottom" title="底部logo" alt="">
+        </NuxtLink>
+      </div>
+      <div class="info ml-117px text-white">
+        <FriendLink v-model="friend_links" />
+        <Follow v-model="follow_us" />
+        <AboutNav v-model="about_nav" />
+
+        <div class="text-12px font-500 text-gray-400 reset-img" v-html="beian" />
+      </div>
+    </div>
+    <AboutNav v-model="about_nav" md="!hidden" class="container mx-auto px-10px" />
+    <div class="pt-0 pb-92px text-12px font-500 text-gray-400 reset-img container mx-auto px-10px" md="!hidden" v-html="beian" />
+  </footer>
+</template>

package/template-nuxt-website/components/young/Header.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-27 14:40:13
+ * @LastEditTime: 2023-11-07 17:56:32
+ * @Description:
+-->
+<script lang="ts" setup>
+const { logo_url } = storeToRefs(useNavStore())
+const { showAd } = storeToRefs(useAdStore())
+</script>
+
+<template>
+  <div class="w-full top-0 fixed bg-white z-10 shadow" lt-md="w-100vw shadow-none" :class="[showAd ? 'h-160px lt-md:h-80px' : 'h-80px lt-md:h-44px']">
+    <TopExtra v-if="showAd" />
+    <div class="container h-80px m-auto flex justify-between items-center" lt-md="h-44px">
+      <div class="left h-full flex items-center">
+        <NuxtLink class="logo" to="/">
+          <!-- 禁用懒加载插件，手动处理图片 -->
+          <img class="cursor-pointer" width="143" height="42" lt-md="px-10px h-30px w-auto" :src="getFullServerUrl(logo_url)" alt="" data-not-lazy loading="eager">
+        </NuxtLink>
+        <TopNav />
+      </div>
+    </div>
+  </div>
+</template>

package/template-nuxt-website/components/young/Tabbar.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-27 14:40:42
+ * @LastEditTime: 2023-11-08 10:41:02
+ * @Description:
+-->
+<script lang="ts" setup>
+import game from '@/assets/tabbar/game.png'
+import game_active from '@/assets/tabbar/game_active.png'
+import event from '@/assets/tabbar/event.png'
+import event_active from '@/assets/tabbar/event_active.png'
+import shop from '@/assets/tabbar/shop.png'
+import shop_active from '@/assets/tabbar/shop_active.png'
+import user from '@/assets/tabbar/user.png'
+import user_active from '@/assets/tabbar/user_active.png'
+</script>
+
+<template>
+  <VanTabbar
+    v-if="['/', '/match.html', '/shop.html', '/news.html'].includes($route.path)"
+    :model-value="$route.path" fixed placeholder safe-area-inset-bottom class="md:hidden bg-white" active-color="#0090EE" inactive-color="#C2D1E7"
+  >
+    <VanTabbarItem name="/" to="/">
+      <template #icon>
+        <img class="" width="20" height="20" :src="$route.path === '/' ? game_active : game" data-not-lazy loading="lazy" alt="">
+      </template>
+      <div title="游戏" class="btntxt">
+        游戏
+      </div>
+    </VanTabbarItem>
+    <VanTabbarItem name="/match.html" to="/match.html">
+      <template #icon>
+        <img class="" width="20" height="20" :src="$route.path === '/match.html' ? event_active : event" data-not-lazy loading="lazy" alt="">
+      </template>
+      <div title="赛事" class="btntxt">
+        赛事
+      </div>
+    </VanTabbarItem>
+    <VanTabbarItem name="/shop.html" to="/shop.html">
+      <template #icon>
+        <img
+          width="20" height="20"
+          class="" :src="$route.path.startsWith('/shop.html') ? shop_active : shop" data-not-lazy
+          loading="lazy"
+          alt=""
+        >
+      </template>
+      <div title="商城" class="btntxt">
+        商城
+      </div>
+    </VanTabbarItem>
+    <VanTabbarItem name="/news.html" to="/news.html">
+      <template #icon>
+        <img class="" width="20" height="20" :src="$route.path === '/news.html' ? user_active : user" data-not-lazy loading="lazy" alt="">
+      </template>
+      <div title="资讯" class="btntxt">
+        资讯
+      </div>
+    </VanTabbarItem>
+  </VanTabbar>
+</template>
+
+<style lang="scss" scoped>
+.btntxt {
+  width: 24px;
+  height: 17px;
+  font-size: 12px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+:deep(.van-tabbar-item) {
+  margin: 0 10px;
+}
+</style>

package/template-nuxt-website/composables/ad.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-09-27 17:12:10
+ * @LastEditTime: 2023-09-27 17:12:14
+ * @Description:
+ */
+export const useAdStore = defineStore('ad', () => {
+  const showAd = ref(false)
+  const img_ad = ref('')
+  const img_btn = ref('')
+
+  return {
+    showAd,
+    img_ad,
+    img_btn,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useAdStore, import.meta.hot))

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

@@ -0,0 +1,11 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-26 11:48:46
+ * @LastEditTime: 2023-09-27 12:06:20
+ * @Description:
+ */
+/**
+ * 接口缓存时间，单位为 s
+ * todo: 正式部署前按需修改
+ */
+export const NUXT_PUBLIC_CACHE_TIME = 1

package/template-nuxt-website/composables/nav.ts

@@ -0,0 +1,30 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-01 12:03:44
+ * @LastEditTime: 2023-10-11 19:40:10
+ * @Description:
+ */
+export const useNavStore = defineStore('useNavStore', () => {
+  const logo_url = ref('')
+  const kj_logo_url = ref('')
+  const nav_arr = ref<NavItem[]>([])
+
+  const active_nav = ref('')
+
+  const seo = ref<SeoInfo>({
+    title: '',
+    keywords: '',
+    description: '',
+  })
+
+  return {
+    logo_url,
+    kj_logo_url,
+    nav_arr,
+    active_nav,
+    seo,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useNavStore, import.meta.hot))

package/template-nuxt-website/composables/share.ts

@@ -0,0 +1,22 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-25 15:01:47
+ * @LastEditTime: 2023-09-27 12:00:49
+ * @Description:
+ */
+export const useShareStore = defineStore('useShareStore', {
+  state: () => {
+    const jssdkShareSign = ref({
+      timestamp: '',
+      nonceStr: '',
+      signature: '',
+    })
+
+    return {
+      jssdkShareSign,
+    }
+  },
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useShareStore, import.meta.hot))

package/template-nuxt-website/composables/utils.ts

@@ -0,0 +1,84 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-08-12 16:31:53
+ * @LastEditTime: 2023-11-07 18:01:33
+ * @Description:
+ */
+import { createVNode, render } from 'vue'
+
+export function goDownload(android?: string, ios?: string) {
+  const { isApple } = useDevice()
+  if (isApple)
+    ios && window.open(ios)
+
+  else
+    android && window.open(android)
+}
+
+export function closeWindow() {
+  if (process.server)
+    return
+
+  // @ts-expect-error
+  if (typeof WeixinJSBridge !== 'undefined') {
+    // @ts-expect-error 微信浏览器关闭窗口
+    WeixinJSBridge.call('closeWindow')
+  }
+
+  // @ts-expect-error
+  if (typeof AlipayJSBridge !== 'undefined') {
+    // @ts-expect-error 支付宝浏览器关闭窗口
+    AlipayJSBridge.call('popWindow')
+  }
+  // 其他关闭窗口
+  window.close()
+}
+
+
+
+export async function showLoading() {
+  if (process.server)
+    return
+
+  showLoadingToast({
+    message: '加载中...',
+    forbidClick: true,
+  })
+}
+
+export function hideLoading() {
+  if (process.server)
+    return
+
+  closeToast()
+}
+/**
+ * 异步插入组件
+ * @param El 组件实例
+ */
+export function injectComponent(El: ReturnType<typeof defineComponent>) {
+  if (process.server)
+    return false
+
+  const appendTo = document.createElement('div')
+
+  const onDestroy = () => {
+    try {
+      render(null, appendTo)
+    }
+    catch (error) {
+      console.info('remove child error', error)
+    }
+  }
+
+  const vnode = createVNode(El, {
+    onDestroy,
+  })
+  render(vnode, appendTo)
+
+  appendTo.firstElementChild && document.body.appendChild(appendTo.firstElementChild)
+
+  return onDestroy
+}
+
+

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

@@ -0,0 +1,11 @@
+VITE_WEBSITE_PC = https://intranet-dev-web-new2.laiyouxi.com:1443
+VITE_WEBSITE_MOBILE = https://intranet-dev-mweb-new2.laiyouxi.com:1443
+
+/**
+  * todo 管理后台，后端接口地址，ssr 数据获取
+  */
+VITE_BACKEND_SERVER = https://ssr.api.com
+/**
+  * todo 管理后台，后端接口地址，浏览器端调用
+  */
+VITE_BACKEND_SERVER_CLIENT = https://client.api.com

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

@@ -0,0 +1,13 @@
+// 日志等级
+CONSOLA_LEVEL = 2
+VITE_WEBSITE_PC = https://www.laiyouxi.com
+VITE_WEBSITE_MOBILE = https://m.laiyouxi.com
+
+/**
+  * todo 管理后台，后端接口地址，ssr 数据获取
+  */
+VITE_BACKEND_SERVER = https://ssr.api.com
+/**
+  * todo 管理后台，后端接口地址，浏览器端调用
+  */
+VITE_BACKEND_SERVER_CLIENT = https://client.api.com

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

@@ -0,0 +1,11 @@
+VITE_WEBSITE_PC = https://intranet-test-web-new2.laiyouxi.com:1443
+VITE_WEBSITE_MOBILE = https://intranet-test-mweb-new2.laiyouxi.com:1443
+
+/**
+  * todo 管理后台，后端接口地址，ssr 数据获取
+  */
+VITE_BACKEND_SERVER = https://ssr.api.com
+/**
+  * todo 管理后台，后端接口地址，浏览器端调用
+  */
+VITE_BACKEND_SERVER_CLIENT = https://client.api.com

package/template-nuxt-website/env.d.ts

@@ -0,0 +1,55 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-26 11:50:06
+ * @LastEditTime: 2023-11-08 10:44:03
+ * @Description:
+ */
+declare global {
+  /**
+   * 环境变量
+   */
+  interface ImportMetaEnv {
+    /**
+     * 管理后台，后端接口地址，ssr 数据获取
+     */
+    VITE_BACKEND_SERVER: string
+    /**
+     * 管理后台，后端接口地址，浏览器端调用
+     */
+    VITE_BACKEND_SERVER_CLIENT: string
+    /**
+     * 微信公众号 appid，用于网页授权登录，SDK 签名等
+     */
+    VITE_WECHAT_APPID: string
+
+    /**
+     * 后台上传的资源前缀
+     */
+    VITE_OSS_URL: string
+
+    /**
+     * PC 网址
+     */
+    VITE_WEBSITE_PC: string
+    /**
+     * 移动端地址
+     */
+    VITE_WEBSITE_MOBILE: string
+
+    /**
+     * 调试控制台
+     */
+    VITE_VCONSOLE?: boolean
+  };
+
+  declare interface Window {
+    /**
+     * 注入到前端使用的环境变量
+     */
+    __YOUNG_ENV__: ImportMetaEnv
+    /**
+     * 当前用户的 openid，用于 微信 jssdk 支付
+     */
+    YOUNG_WECHAT_OPENID: string
+  };
+}

package/template-nuxt-website/error.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-06-12 15:00:07
+ * @LastEditTime: 2023-10-30 14:34:37
+ * @Description:
+-->
+<script lang="ts" setup>
+import type { NuxtError } from '#app'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+let timer: NodeJS.Timeout
+
+const i = ref(5)
+
+function clear() {
+  clearError()
+  clearInterval(timer)
+  location.replace('/')
+}
+
+onMounted(() => {
+  if (process.server)
+    return
+
+  const isDev = process.dev || window.__YOUNG_ENV__
+    ? !!window.__YOUNG_ENV__.VITE_VCONSOLE
+    : location.href.includes('-dev-')
+      || location.href.includes('-test-')
+
+  console.log(props.error)
+  if (isDev) {
+    console.log('开发模式，不自动清理')
+    const srcEl = document.createElement('script')
+    srcEl.src = '//g2021-cdn.laiyouxi.com/image/21Store/admin-img/vconsole.min.js'
+    document.body.appendChild(srcEl)
+    // @ts-expect-error
+    // eslint-disable-next-line no-new
+    new VConsole()
+    console.log(props.error)
+    return
+  }
+  timer = setInterval(() => {
+    i.value--
+    if (i.value === 0)
+      clear()
+  }, 1e3)
+})
+</script>
+
+<template>
+  <div class="flex w-full h-full flex-col justify-center items-center">
+    <div class="text-5xl my-6">
+      {{ error.statusCode }}
+    </div>
+    <div class="text-lg my-2">
+      {{ error.statusMessage || error.message || '出错啦~' }}
+    </div>
+
+    <div class="mb-2">
+      {{ i }}s 后自动跳转首页
+    </div>
+    <ElButton @click="clear">
+      立即返回首页
+    </ElButton>
+  </div>
+</template>

package/template-nuxt-website/eslint.config.js

@@ -0,0 +1,34 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-11-01 10:13:50
+ * @LastEditTime: 2023-11-01 11:11:55
+ * @Description:
+ */
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  overrides: {
+    vue: {
+      'vue/valid-v-model': 'off',
+    },
+    typescript: {
+      'ts/no-use-before-define': 'off',
+      'ts/no-unused-vars': 'off',
+      'ts/ban-types': 'off',
+      'ts/ban-ts-comment': 'off',
+    },
+  },
+  rules: {
+    'no-console': 'off',
+    'node/prefer-global/process': 'off',
+    'unused-imports/no-unused-vars': 'off',
+    'no-throw-literal': 'off',
+    'antfu/consistent-list-newline': 'off',
+    'style/jsx-indent': 'off',
+  },
+}, {
+  ignores: [
+    'public',
+    'utils/young-sdk',
+  ],
+})

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

@@ -0,0 +1,80 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-27 14:15:48
+ * @LastEditTime: 2023-11-08 09:26:21
+ * @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 { showAd, img_ad, img_btn } = storeToRefs(useAdStore())
+
+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
+showAd.value = nav_data.value.showAd
+img_ad.value = nav_data.value.img_ad
+img_btn.value = nav_data.value.img_btn
+seo.value = deepClone(seo_info.value!)
+
+useHead({
+  meta: [
+    { name: 'keywords', content: seo.value.keywords },
+  ],
+})
+
+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" />
+  <!-- 移动端其他页面导航 -->
+  <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>
+
+  <!-- 底部 -->
+  <LazyYoungFooter lt-md="!hidden" />
+</template>

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

@@ -0,0 +1,75 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-11 17:30:55
+ * @LastEditTime: 2023-11-08 10:56:14
+ * @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 { showAd, img_ad, img_btn } = storeToRefs(useAdStore())
+
+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
+showAd.value = nav_data.value.showAd
+img_ad.value = nav_data.value.img_ad
+img_btn.value = nav_data.value.img_btn
+seo.value = deepClone(seo_info.value!)
+
+useHead({
+  meta: [
+    { name: 'keywords', content: seo.value.keywords },
+  ],
+})
+
+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)
+</script>
+
+<template>
+  <!-- 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>
+
+  <!-- 底部 -->
+  <LazyYoungFooter />
+  <!-- 移动端 tabbar -->
+  <LazyYoungTabbar />
+</template>