create-young-proj 1.0.0 → 1.1.0

package/template-nuxt-website/server/plugins/init.ts

@@ -0,0 +1,147 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-30 17:19:42
+ * @LastEditTime: 2023-11-08 10:52:46
+ * @Description:
+ */
+import { resolve } from 'node:path'
+import { loadConfig } from 'c12'
+import { useYoungLogger } from '@bluesyoung/logger'
+
+export default defineNitroPlugin(async (nitroApp) => {
+  const env = (process.env.DEPLOY_ENV as 'dev' | 'test' | 'online') || 'dev'
+  const { config } = await loadConfig<Record<string, any>>({
+    name: env,
+    cwd: resolve(process.cwd(), 'config'),
+    defaultConfig: {
+      // 优先读取环境变量中的版本信息(自己打的 Tag)
+      NUXT_PUBLIC_CURRENT_VERSION: process.env.PROJECT_VERSION || 'v0.0.1',
+      // 日志等级
+      CONSOLA_LEVEL: 1,
+      // 此处可以放置通用的环境变量
+      VITE_WECHAT_APPID: 'todo: 微信公众号appid',
+      VITE_OSS_URL: `https://master-web-cdn.laiyouxi.com/platform_index/${env}/`,
+      VITE_VCONSOLE: false,
+      /**
+       * 当前启动服务的项目
+       */
+      PROJECT_NAME: 'pc',
+      /**
+       * 是否禁用自动重定向
+       */
+      DISABLE_AUTO_LOCATION: false,
+    },
+  })
+
+  for (const key in config) {
+    if (process.env[key]) {
+      console.log('系统环境变量优先: ', key, ' = ', process.env[key], ' -> ', config[key], ' -> ', '覆盖')
+      config[key] = process.env[key]
+    }
+    else {
+      process.env[key] = config[key]
+    }
+    if (!((key.indexOf('NUXT_PUBLIC_') === 0) || (key.indexOf('VITE_') === 0)))
+      delete config[key]
+  }
+
+  console.log('------------------------读取配置文件------------------------')
+  console.log(config)
+  console.log('-------------------------------------------------------------')
+
+  const IS_PROD = process.env.NODE_ENV !== 'development'
+  console.log('🚀 ~ file: init.ts:53 ~ IS_PROD:', IS_PROD)
+
+  if (IS_PROD) {
+    // 格式化日志
+    const { consola } = useYoungLogger()
+    const logger = consola.create({
+      level: +process.env.CONSOLA_LEVEL!,
+    })
+    logger.wrapConsole()
+  }
+
+  nitroApp.hooks.hook('render:html', async (html, { event }) => {
+    const ua = event.node.req.headers['user-agent']
+
+    console.log('jump status: ', !config!.DISABLE_AUTO_LOCATION, typeof !config!.DISABLE_AUTO_LOCATION)
+
+    if (ua && (IS_PROD && !config!.DISABLE_AUTO_LOCATION)) {
+      const isMobile = /mobile|nokia|iphone|ipad|android|samsung|htc|blackberry/gim.test(ua)
+      console.log('🚀 ~ file: init.ts:59 ~ nitroApp.hooks.hook ~ isMobile:', isMobile)
+      const fromMobile = process.env.PROJECT_NAME === 'mobile'
+      console.log('🚀 ~ file: init.ts:61 ~ nitroApp.hooks.hook ~ fromMobile:', fromMobile)
+      if (isMobile && !fromMobile) {
+        // 手机访问 PC 网址
+        console.log('🚀 ~ file: init.ts:64 ~ nitroApp.hooks.hook ~ 手机访问 PC 网址:')
+        event.node.res.setHeader('Location', process.env.VITE_WEBSITE_MOBILE! + event.node.req.url)
+        event.node.res.statusCode = 301
+        return
+      }
+      else if (!isMobile && fromMobile) {
+        // PC 访问手机网址
+        console.log('🚀 ~ file: init.ts:72 ~ nitroApp.hooks.hook ~ PC 访问手机网址:')
+        event.node.res.setHeader('Location', process.env.VITE_WEBSITE_PC! + event.node.req.url)
+        event.node.res.statusCode = 301
+        return
+      }
+    }
+
+    // 网站置灰
+    try {
+      const {
+        is_gray,
+        scope,
+      } = await $fetch('/api/get_gray_status')
+      console.log('🚀 ~ get gray status ~ is_gray: %s, scope: %s', is_gray, scope)
+
+      const pathname = event.node.req.url!.split('?')[0]
+      if (is_gray && (scope === '*' || pathname === '/'))
+        html.htmlAttrs.push(`style="filter: grayscale(1);"`)
+    }
+    catch (error) {
+      console.error('🚀 ~ set gray error:', error)
+    }
+
+    // 设定视口高度，防止软键盘影响布局
+    html.bodyPrepend.push(`
+    <script>
+    const metaElement = document.querySelector('#viewportMeta');
+    metaElement.setAttribute('content', \`maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,height=\${window.innerHeight}\`);
+    </script>
+    `)
+
+    // 注入环境变量
+    html.bodyPrepend.push(`
+    <!-- 注入环境变量 -->
+    <script>window.__YOUNG_ENV__=${JSON.stringify(config)}</script>
+    <!-- 更新检测，每分钟一次 -->
+    <script>
+    const YOUNG_UPDATE_TIMER = setInterval(() => {
+      fetch('${getFullAssetsUrl('/get/env')}')
+        .then((res) => res.json())
+        .then(({ NUXT_PUBLIC_CURRENT_VERSION }) => {
+          if (NUXT_PUBLIC_CURRENT_VERSION !== window.__YOUNG_ENV__.NUXT_PUBLIC_CURRENT_VERSION) {
+            clearInterval(YOUNG_UPDATE_TIMER);
+            alert('版本已更新，点击重新加载页面！');
+            window.location.reload();
+          }
+        });
+    }, 6e4);
+    </script>
+    `)
+
+    // 微信 sdk
+    html.bodyAppend.push(`
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
+    `)
+
+    // vconsole 调试
+    if ((config as ImportMetaEnv).VITE_VCONSOLE) {
+      html.bodyAppend.push(`
+      <script src="https://g2021-cdn.laiyouxi.com/image/21Store/admin-img/vconsole.min.js"></script>
+      <script>new VConsole()</script>
+      `)
+    }
+  })
+})

package/template-nuxt-website/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/template-nuxt-website/server/utils/index.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-29 10:29:52
+ * @LastEditTime: 2023-11-03 15:45:17
+ * @Description:
+ */
+export function getFullAssetsUrl(url: string) {
+  if (process.env.NODE_ENV === 'development' || !process.env.NUXT_APP_CDN_URL)
+    return url
+
+  return process.env.NUXT_APP_CDN_URL + url
+}

package/template-nuxt-website/server/utils/proxy.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-09-27 11:22:08
+ * @LastEditTime: 2023-11-01 19:10:45
+ * @Description:
+ */
+import type { ServerOptions as HTTPProxyOptions } from 'http-proxy'
+import ProxyModule from 'http-proxy'
+import type { H3Event } from 'h3'
+
+/**
+ * @param target 接口代理的具体地址
+ * @param defaults 代理配置
+ * @example
+ * export default defineEventHandler(async (event) => {
+ *   const proxy = createTransparentProxy(`http://127.0.0.1:3333`);
+ *   await proxy.handle(event);
+ * });
+ */
+export function createTransparentProxy(target: string, defaults: HTTPProxyOptions = {}) {
+  const proxy = ProxyModule.createProxy()
+  const handle = (event: H3Event, opts: HTTPProxyOptions = {}) => {
+    return new Promise<void>((resolve, reject) => {
+      proxy.web(event.node.req, event.node.res, { target, ...defaults, ...opts }, (error: any) => {
+        if (error.code !== 'ECONNRESET')
+          reject(error)
+
+        resolve()
+      })
+    })
+  }
+  return {
+    proxy,
+    handle,
+  }
+}
+
+/**
+ * 服务端发送的请求
+ */
+export function useServerFetch(event: H3Event, prefix = '/index') {
+  const BaseServerURL = `${process.env.VITE_BACKEND_SERVER}${prefix}` as const
+
+  return $fetch.create({
+    baseURL: BaseServerURL,
+    headers: {
+      'platform-source': event.context.platformSource,
+      'x-real-ip': event.context['x-real-ip']!,
+      'x-forwarded-for': event.context['x-forwarded-for']!,
+    },
+    async onRequest({ request, options }) {
+      const { onRequest, onResponse, onRequestError, onResponseError, ...opts } = options
+      console.log('🚀 ~ onRequest ~ request: %o, options: %o', request, opts)
+    },
+    async onResponse({ response }) {
+      console.log('🚀 ~ onResponse ~ data:', response._data)
+    },
+  })
+}

package/template-nuxt-website/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package/template-nuxt-website/typings/banner.d.ts

@@ -0,0 +1,30 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-09-27 11:35:38
+ * @LastEditTime: 2023-11-08 10:24:29
+ * @Description:
+ */
+interface BannerItem {
+  /**
+   * 图片地址
+   */
+  img_url: string
+  /**
+   * 图片标题
+   */
+  title?: string
+  /**
+   * 安卓跳转地址
+   */
+  android_url?: string
+  /**
+   * ios 跳转地址
+   */
+  ios_url?: string
+  /**
+   * 是否为视频
+   */
+  is_video?: boolean
+
+  type?: number
+}

package/template-nuxt-website/typings/nav.d.ts

@@ -0,0 +1,34 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-10-07 15:59:27
+ * @LastEditTime: 2023-10-31 17:09:32
+ * @Description:
+ */
+interface FriendLinkItem {
+  title: string
+  href: string
+}
+
+interface FollowItem {
+  icon: string
+  name: string
+  qrcode: string
+  jump?: string
+  hidden?: boolean
+}
+
+interface AboutNavItem {
+  title: string
+  url: string
+}
+
+interface BreadNavItem {
+  title: string
+  href: string
+}
+
+interface UserCenterNavItem {
+  title: string
+  icon: string
+  to: string
+}

package/template-nuxt-website/typings/system.d.ts

@@ -0,0 +1,22 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-09-27 12:09:55
+ * @LastEditTime: 2023-09-27 12:18:44
+ * @Description:
+ */
+interface NavItem {
+  /**
+   * 跳转地址
+   */
+  href: string
+  /**
+   * 标题
+   */
+  title: string
+}
+
+interface SeoInfo {
+  title: string
+  keywords: string
+  description: string
+}

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

@@ -0,0 +1,40 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-06-15 08:59:22
+ * @LastEditTime: 2023-05-27 19:36:43
+ * @Description:
+ */
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
+  transformers: [
+    // 不加 enforce 会有 bug
+    transformerDirectives({ enforce: 'pre' }),
+    transformerVariantGroup(),
+  ],
+})

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

@@ -0,0 +1,171 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-28 16:01:24
+ * @LastEditTime: 2023-11-08 10:28:46
+ * @Description:
+ */
+import { randomId } from '@bluesyoung/utils'
+import { reactive } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+
+/**
+ * 生成数组的随机索引
+ */
+export function getRandomIndex(length: number) {
+  return Math.floor(Math.random() * length)
+}
+
+/**
+ * 设备唯一标识
+ */
+export function getUUID() {
+  return useLocalStorage('uuid', randomId() + randomId() + randomId() + randomId()).value
+}
+
+/**
+ * 获取服务器资源地址
+ * 第二个参数为默认值，默认返回图片占位符，如果不需要请给第二个参数传入 false
+ * 第三个参数代表是否拼接基于 oss 的图片处理参数，默认转换为 webp
+ */
+export function getFullServerUrl(
+  name?: string,
+  _default: string | false = '/svg/image_placeholder.svg',
+  processImage = true,
+) {
+  if (!name) {
+    if (_default === false)
+      return ''
+
+    else
+      return _default
+  }
+
+  if (
+    name.startsWith('data:image')
+    || name.startsWith('blob:')
+    || name.startsWith('http://')
+    || name.startsWith('https://')
+    || name.startsWith('/_')
+  ) {
+    if (processImage && !name.startsWith('data:image') && !name.startsWith('blob:') && !name.startsWith('/_')) {
+      const u = new URL(name)
+      u.searchParams.set('x-oss-process', 'image/quality,Q_75/format,webp')
+      return u.toString()
+    }
+    else {
+      return name
+    }
+  }
+
+  const u = new URL(name, process.server ? process.env.VITE_OSS_URL : window.__YOUNG_ENV__.VITE_OSS_URL)
+  if (processImage)
+    u.searchParams.set('x-oss-process', 'image/quality,Q_75/format,webp')
+
+  return u.toString()
+}
+
+/**
+ * 微信分享
+ */
+export async function useWeChatShare(shareData: {
+  title: string
+  desc: string
+  imgUrl: string
+  /**
+   * 分享链接
+   * @default location.href.split('#')[0]
+   */
+  link?: string
+}) {
+  if (process.server)
+    return
+
+  /**
+   * 分享链接
+   */
+  const link = shareData.link || location.href.split('#')[0]
+
+  const { jssdkShareSign } = storeToRefs(useShareStore())
+
+  if (!jssdkShareSign.value.timestamp) {
+    // todo: 微信签名
+    // const signConf = await fetch('/api/wechat/sign', {
+    //   method: 'POST',
+    //   body: JSON.stringify({
+    //     wxAppId: window.__YOUNG_ENV__.VITE_WECHAT_APPID,
+    //     url: link,
+    //   })
+    // })
+
+    // jssdkShareSign.value = {
+    //   timestamp: `${signConf.timestamp}`, // 必填，生成签名的时间戳
+    //   nonceStr: signConf.noncestr, // 必填，生成签名的随机串
+    //   signature: signConf.signature, // 必填，签名
+    // }
+  }
+
+  // @ts-expect-error
+  wx.config({
+    debug: window.__YOUNG_ENV__.VITE_VCONSOLE, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+    appId: window.__YOUNG_ENV__.VITE_WECHAT_APPID, // 必填，公众号的唯一标识
+    ...jssdkShareSign.value,
+    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
+    openTagList: [], // 可选，需要使用的开放标签列表，例如
+  })
+
+  // @ts-expect-error
+  wx.ready(() => {
+    // 需在用户可能点击分享按钮前就先调用
+    // @ts-expect-error
+    wx.updateAppMessageShareData({ link, ...shareData })
+    // @ts-expect-error
+    wx.updateTimelineShareData({ link, ...shareData })
+  })
+}
+
+/**
+ * html 转 text
+ */
+export function html2text(html: string) {
+  if (!html)
+    return ''
+
+  return html.toString().replace(/<[^>]+>/g, '')
+}
+
+/**
+ * 响应式的屏幕大小
+ */
+export const WindowSize = reactive({
+  'lt-sm': useMediaQuery('(max-width: 639.9px)'),
+  'sm': useMediaQuery('(min-width: 640px)'),
+  'lt-md': useMediaQuery('(max-width: 767.9px)'),
+  'md': process.server ? true : useMediaQuery('(min-width: 768px)'),
+  'lt-lg': useMediaQuery('(max-width: 1023.9px)'),
+  'lg': useMediaQuery('(min-width: 1024px)'),
+  'lt-xl': useMediaQuery('(max-width: 1279.9px)'),
+  'xl': useMediaQuery('(min-width: 1280px)'),
+  'lt-2xl': useMediaQuery('(max-width: 1535.9px)'),
+  '2xl': useMediaQuery('(min-width: 1536px)'),
+})
+
+/**
+ * 当前浏览器是否支持下载
+ */
+export function isSupportDownload() {
+  const NotAllowed = [/Alipay/gim, /BYTEDANCE/gim, /DINGTALK/gim, /MICROMESSENGER/gim]
+
+  return !NotAllowed.some(reg => reg.test(navigator.userAgent))
+}
+
+/**
+ * 页面滚动是否超过一定距离
+ */
+export function useScrollOver(distance = 40) {
+  const { y } = useScroll(!process.server ? window : null)
+  const scrolled = computed(() => y.value > distance)
+
+  return {
+    scrolled,
+  }
+}