create-young-proj 1.4.0 → 1.6.0

package/template-nuxt-mobile/pages/base/resetPasswd.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2021-09-09 12:07:27
+ * @LastEditTime: 2023-11-30 10:41:19
+ * @Description: 重置密码 | 修改密码
+-->
+<script lang="ts" setup>
+import type { FormInstance } from 'vant'
+import { isMobile } from '@bluesyoung/utils'
+
+definePageMeta({
+  title: '重置密码',
+  layout: 'blank',
+  auth: false,
+})
+
+const formRef = ref<FormInstance>()
+
+const form = ref<ResetPasswdForm>({
+  tel: '',
+  code: '',
+  passwd: '',
+  passwd_again: '',
+})
+function validPasswd() {
+  const { passwd: p1, passwd_again: p2 } = form.value
+  return p1 === p2
+}
+const [showPass1, toggle1] = useToggle(false)
+const [showPass2, toggle2] = useToggle(false)
+async function sure() {
+  try {
+    await formRef.value?.validate()
+    await apis.post.changePassword(form.value)
+    showToast('修改成功，请重新登录！')
+    useUserStore().removeToken()
+    navigateTo('/base/login')
+  }
+  catch (error) {
+
+  }
+}
+</script>
+
+<template>
+  <VanNavBar title="重置密码" safe-area-inset-bottom left-arrow @click-left="$router.back()" />
+  <div v-bind="$attrs" class="w-full h-full mt-10">
+    <VanForm ref="formRef">
+      <VanCellGroup inset>
+        <VanField
+          v-model.trim="form.tel" maxlength="11" placeholder="手机号" :rules="[
+            { required: true, message: '请填写手机号' },
+            { validator: isMobile, message: '请输入合法的手机号' },
+          ]"
+        />
+        <YoungCodeInput v-model.trim="form.code" :tel="form.tel" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
+
+        <VanField
+          v-model.trim="form.passwd" placeholder="输入新密码" :type="showPass1 ? 'text' : 'password'" clearable
+          :rules="[{ required: true, message: '请填写新密码' }]"
+        >
+          <template #right-icon>
+            <VanIcon :name="showPass1 ? 'eye' : 'closed-eye'" @click="toggle1(!showPass1)" />
+          </template>
+        </VanField>
+        <VanField
+          v-model.trim="form.passwd_again" placeholder="再次确认新密码" :type="showPass2 ? 'text' : 'password'" :rules="[
+            { required: true, message: '请确认新密码' },
+            { validator: validPasswd, message: '两次输入的密码不一致' },
+          ]"
+        >
+          <template #right-icon>
+            <VanIcon :name="showPass2 ? 'eye' : 'closed-eye'" @click="toggle2(!showPass2)" />
+          </template>
+        </VanField>
+      </VanCellGroup>
+      <div class="m-4">
+        <VanButton block type="primary" @click="sure">
+          确定
+        </VanButton>
+      </div>
+    </VanForm>
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-21 16:38:58
+ * @LastEditTime: 2023-11-29 17:16:58
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  title: '首页',
+  layout: 'tabbar',
+  auth: false,
+})
+</script>
+
+<template>
+  <div>
+    我是首页
+    <NuxtLink to="/sub/index" class="text-purple-500">
+      进入子页面
+    </NuxtLink>
+  </div>
+</template>

package/template-nuxt-mobile/pages/my.vue

@@ -0,0 +1,18 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-11-29 17:16:31
+ * @LastEditTime: 2023-11-29 17:16:34
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  title: '个人中心',
+  layout: 'tabbar',
+})
+</script>
+
+<template>
+  <div>
+    我是个人中心
+  </div>
+</template>

package/template-nuxt-mobile/pages/sub/[id].vue

@@ -0,0 +1,21 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-15 10:04:05
+ * @LastEditTime: 2023-11-29 17:30:00
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  title: '子页面',
+})
+</script>
+
+<template>
+  <div>
+    我是子页面📃
+    <div class="w-[62.5%] mx-auto mb-80px reset-img" lt-md="w-full">
+      params：
+      - id: {{ $route.params.id }}
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,94 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-30 17:19:42
+ * @LastEditTime: 2023-11-29 16:34:50
+ * @Description:
+ */
+import { resolve } from 'node:path'
+import { loadConfig } from 'c12'
+import { useYoungLogger } from '@bluesyoung/logger'
+
+export default defineNitroPlugin(async (nitroApp) => {
+  const IS_PROD = process.env.NODE_ENV !== 'development'
+  console.log('🚀 ~ file: init.ts:13 ~ IS_PROD:', IS_PROD)
+
+  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: 3,
+      // 此处可以放置通用的环境变量
+      VITE_WECHAT_APPID: 'todo: 微信公众号appid',
+      VITE_VCONSOLE: 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]
+  }
+
+  if (IS_PROD) {
+    // 格式化日志
+    useYoungLogger()
+  }
+
+  console.log('------------------------读取配置文件------------------------')
+  console.log(config)
+  console.log('-------------------------------------------------------------')
+
+  nitroApp.hooks.hook('request', (event) => {
+    const ua = event.node.req.headers['user-agent']
+
+    console.log('ua', ua, 'x-forwarded-for', event.node.req.headers['x-forwarded-for'], 'x-real-ip', event.node.req.headers['x-real-ip'])
+  })
+
+  nitroApp.hooks.hook('render:html', async (html, { event }) => {
+    // 设定视口高度，防止软键盘影响布局
+    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>
+    `)
+
+    // 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-mobile/server/routes/get/env.ts

@@ -0,0 +1,13 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-20 19:48:12
+ * @LastEditTime: 2023-07-21 11:18:40
+ * @Description:
+ */
+export default defineEventHandler(async (event) => {
+  const envObj = {
+    NUXT_PUBLIC_CURRENT_VERSION: process.env.PROJECT_VERSION || 'v0.0.1',
+  }
+
+  return envObj
+})

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

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

package/template-nuxt-mobile/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-mobile/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-mobile/tsconfig.json

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

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

@@ -0,0 +1,22 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-11-29 17:28:36
+ * @LastEditTime: 2023-11-29 17:39:37
+ * @Description:
+ */
+interface UserLoginRes {
+  uuid: string
+  nickname: string
+  headimgurl: string
+  token: string
+}
+
+interface LoginForm {
+  tel: string
+  passwd: string
+}
+
+interface ResetPasswdForm extends LoginForm {
+  code: string
+  passwd_again
+}

package/template-nuxt-mobile/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-mobile/utils/tool.ts

@@ -0,0 +1,153 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-28 16:01:24
+ * @LastEditTime: 2023-11-29 17:35:36
+ * @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
+}
+
+/**
+ * 微信分享
+ */
+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,
+  }
+}
+
+/**
+ * 登录校验
+ */
+export function checkLogin(force = true) {
+  const { hasLogin } = storeToRefs(useUserStore())
+
+  if (!hasLogin.value) {
+    if (force) {
+      showNotify({
+        message: '未登录或登录过期，请登录后再试',
+        type: 'danger',
+      })
+
+      navigateTo(`/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`, {
+        replace: true,
+      })
+    }
+    return false
+  }
+  else {
+    return true
+  }
+}