create-young-proj 0.13.0 → 1.1.0-alpha.0

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

@@ -0,0 +1,100 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-05-26 16:12:47
+ * @LastEditTime: 2023-11-02 17:18:29
+ * @Description:
+-->
+<script lang="ts" setup>
+import type SwiperClass from 'swiper/types/swiper-class'
+
+const props = defineProps<{
+  banners: BannerItem[]
+  hideTitle?: boolean
+  preload?: boolean
+}>()
+
+const swiperContainer = ref<SwiperClass>()
+const swiperRef = ref<any>({})
+
+function videoPlay() {
+  swiperContainer.value?.autoplay?.stop?.()
+}
+function videoPause() {
+  swiperContainer?.value?.autoplay?.start?.()
+}
+
+function onSwiper(swiper: SwiperClass) {
+  swiperContainer.value = swiper
+}
+
+const autoPlay = computed(() => props.banners.length > 1)
+</script>
+
+<template>
+  <Swiper
+    v-if="banners.length > 0" ref="swiperContainer" class="text-center relative"
+    :slides-per-view="1" :pagination="autoPlay ? { clickable: true } : false" :scrollbar="{ draggable: true }"
+    :modules="[SwiperAutoplay, SwiperEffectCreative, SwiperNavigation, SwiperPagination]" :allow-touch-move="true"
+    :loop="autoPlay" :autoplay="autoPlay" :observer="true" :observe-parents="true" @swiper="(s) => onSwiper(s)"
+  >
+    <SwiperSlide
+      v-for="(banner, index) in banners" :key="`${index}dase3wtgfdv`" :swiper-ref="swiperRef"
+    >
+      <video
+        v-if="banner.is_video" class="w-full mx-auto" controls :src="getFullServerUrl(banner.img_url)" :poster="getFullServerUrl(`${banner.img_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,ar_auto`, false)"
+        webkit-playsinline="webkit-playsinline"
+        playsinline
+        @play="videoPlay" @pause="videoPause"
+      />
+      <img
+        v-else class="w-full h-full"
+        :src="getFullServerUrl(banner.img_url)"
+        alt=""
+        referrerpolicy="no-referrer"
+        :class="{ 'cursor-pointer': banner.android_url || banner.ios_url }"
+        :loading="index === 0 ? preload ? 'eager' : 'lazy' : 'lazy'"
+        data-not-lazy
+        @click="goDownload(banner.android_url, banner.ios_url)"
+      >
+      <div
+        v-if="!hideTitle && banner.title"
+        class="absolute top-0 bg-white opacity-80 w-full text-18px font-500 text-[#333] lh-27px py-20px text-left indent"
+        lt-md="hidden"
+      >
+        {{ banner.title }}
+      </div>
+    </SwiperSlide>
+  </Swiper>
+</template>
+
+<style scoped>
+:deep(.swiper-pagination) {
+  position: absolute;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  z-index: 11;
+}
+
+:deep(.swiper-pagination-bullet) {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  display: inline-block;
+  border-radius: 50%;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, .4);
+  @apply m-1 cursor-pointer;
+}
+
+:deep(.swiper-pagination-bullet-active) {
+  background: #007aff;
+}
+
+:deep(.swiper-wrapper) {
+  @apply flex items-center;
+}
+
+:deep(.swiper-scrollbar) {
+  display: none;
+}
+</style>

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',
+  ],
+})