create-young-proj 1.4.0 → 1.6.0

package/template-nuxt-mobile/composables/user.ts

@@ -0,0 +1,48 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-21 12:03:42
+ * @LastEditTime: 2023-11-07 16:41:48
+ * @Description:
+ */
+export const useUserStore = defineStore('useUserStore', () => {
+  const cookie = useLocalStorage<UserLoginRes>('token', {} as UserLoginRes)
+
+  const avatar = computed(() => cookie.value?.headimgurl)
+  const nick = computed(() => cookie.value?.nickname)
+  const userId = computed(() => cookie.value?.uuid)
+  const token = computed(() => {
+    if (!validateToken())
+      removeToken()
+
+    return cookie.value?.token
+  })
+  const hasLogin = computed(() => !!token.value)
+
+  const SaveFlag = useLocalStorage('n天免登', true)
+  const Exptime = useLocalStorage('token过期时间', 0)
+
+  function validateToken() {
+    const now = Date.now()
+    const exp = Exptime.value
+    return now < exp
+  }
+
+  function removeToken() {
+    cookie.value = undefined
+  }
+
+  return {
+    cookie,
+    hasLogin,
+    avatar,
+    nick,
+    token,
+    SaveFlag,
+    Exptime,
+    removeToken,
+    userId,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))

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

@@ -0,0 +1,80 @@
+/*
+ * @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-mobile/config/.devrc

@@ -0,0 +1,2 @@
+VITE_TITLE = Mobile-dev
+VITE_VCONSOLE = true

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

@@ -0,0 +1,65 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-26 11:50:06
+ * @LastEditTime: 2023-11-29 17:21:16
+ * @Description:
+ */
+/**
+ * 环境变量
+ */
+interface ImportMetaEnv {
+  /**
+   * 微信公众号 appid，用于网页授权登录，SDK 签名等
+   */
+  VITE_WECHAT_APPID: string
+
+  /**
+   * 默认标题
+   */
+  VITE_TITLE: string
+
+  /**
+   * 调试控制台
+   */
+  VITE_VCONSOLE?: boolean
+};
+
+declare interface Window {
+  /**
+   * 注入到前端使用的环境变量
+   */
+  __YOUNG_ENV__: ImportMetaEnv
+};
+
+declare module '#app' {
+  interface PageMeta {
+    /**
+     * 顶部标题
+     */
+    title?: string
+    /**
+     * 不受 container 的宽度限制
+     */
+    full?: boolean
+    /**
+     * main 背景色
+     */
+    bgColor?: string
+  }
+}
+
+/**
+ * 路由元数据类型扩展
+ */
+declare module 'vue-router' {
+  interface RouteMeta {
+    /**
+     * 页面标题
+     */
+    title: string
+    /**
+     * 默认需要登录，显示设置为 false 则无需登录
+     */
+    auth?: boolean
+  }
+}

package/template-nuxt-mobile/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-mobile/eslint.config.js

@@ -0,0 +1,33 @@
+/*
+ * @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',
+  ],
+})

package/template-nuxt-mobile/layouts/blank.vue

@@ -0,0 +1,11 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-11-29 17:09:54
+ * @LastEditTime: 2023-11-29 17:09:54
+ * @Description:
+-->
+<template>
+  <div lg="max-w-800px mx-auto">
+    <NuxtPage />
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-27 14:15:48
+ * @LastEditTime: 2023-11-29 17:19:17
+ * @Description:
+-->
+<script lang="ts" setup>
+const route = useRoute()
+const title = computed(() => route.meta.title || import.meta.env.VITE_TITLE)
+
+const router = useRouter()
+function backFn() {
+  if (history.length === 1) {
+    console.log('扫码直接进入, 返回直接回首页')
+    router.replace('/')
+  }
+  else {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <div lg="max-w-800px mx-auto">
+    <VanNavBar :border="false" left-arrow @click-left="backFn">
+      <template #title>
+        <span class="text-[#FFFFFF] text-16px font-700">{{ title }}</span>
+      </template>
+    </VanNavBar>
+    <NuxtPage v-bind="$attrs" />
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-11-29 17:11:40
+ * @LastEditTime: 2023-11-29 17:15:39
+ * @Description:
+-->
+<script lang="ts" setup>
+const route = useRoute()
+const title = computed(() => route.meta.title || import.meta.env.VITE_TITLE)
+</script>
+
+<template>
+  <div lg="max-w-800px mx-auto">
+    <VanNavBar :border="false">
+      <template #title>
+        <span class="text-[#FFFFFF] text-16px font-700">{{ title }}</span>
+      </template>
+    </VanNavBar>
+    <NuxtPage v-bind="$attrs" />
+    <VanTabbar route lg="!left-50% transform max-w-800px -translate-x-50%">
+      <VanTabbarItem to="/" icon="home-o">
+        <span>首页</span>
+      </VanTabbarItem>
+      <VanTabbarItem to="/my" icon="user-o">
+        <span>我的</span>
+      </VanTabbarItem>
+    </VanTabbar>
+  </div>
+</template>

package/template-nuxt-mobile/middleware/auth.global.ts

@@ -0,0 +1,34 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-11-29 17:22:28
+ * @LastEditTime: 2023-11-29 17:56:58
+ * @Description:
+ */
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (to.matched.length === 0)
+    throw createError({ message: '页面不存在', statusCode: 404 })
+
+  const { hasLogin } = storeToRefs(useUserStore())
+  console.log('🚀 ~ file: auth.global.ts:12 ~ defineNuxtRouteMiddleware ~ hasLogin:', hasLogin.value)
+
+  const changeTitle = () => {
+    document.title = (to.meta.title as string) || window.__YOUNG_ENV__.VITE_TITLE
+  }
+
+  // 页面无需登录
+  if (to.meta.auth === false || hasLogin.value) {
+    changeTitle()
+    return
+  }
+
+  if (!hasLogin.value && to.path !== '/base/login') {
+    // 页面需要登录，但是未登录
+    showNotify({
+      message: '未登录或登录过期，请重新登录',
+      type: 'danger',
+    })
+    return navigateTo(`/base/login?redirect=${encodeURIComponent(to.fullPath)}`, {
+      replace: true,
+    })
+  }
+})

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

@@ -0,0 +1,78 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-09-21 15:57:55
+ * @LastEditTime: 2023-11-29 16:51:03
+ * @Description:
+ */
+import { resolve } from 'node:path'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  ssr: false,
+  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('您的浏览器版本过低，请尝试使用其他浏览器或将浏览器升级至最新版本后重试！');
+            }
+          `,
+        },
+      ],
+      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' },
+      ],
+    },
+  },
+  devtools: { enabled: false },
+  modules: [
+    '@nuxtjs/device',
+    '@pinia/nuxt',
+    '@unocss/nuxt',
+    '@vueuse/nuxt',
+    '@element-plus/nuxt',
+    '@vant/nuxt',
+  ],
+  unocss: {
+    // 默认的 @unocss/reset/tailwind.css 会造成 element 样式异常
+    // 手动注入 @unocss/reset/tailwind-compat.css
+    preflight: false,
+  },
+
+  nitro: {
+    output: {
+      dir: resolve(__dirname, './dist'),
+    },
+    sourceMap: false,
+    minify: true,
+  },
+
+  vite: {
+    build: {
+      sourcemap: false,
+      // 兼容旧浏览器
+      target: ['chrome58'],
+      cssTarget: ['chrome58'],
+    },
+  },
+})

package/template-nuxt-mobile/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "template-nuxt-mobile",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@bluesyoung/http": "^1.2.0",
+    "@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/ui-vue3": "^0.1.1",
+    "@bluesyoung/ui-vue3-element-plus": "^1.3.7",
+    "@element-plus/nuxt": "^1.0.6",
+    "@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.5.1",
+    "sass": "^1.69.5",
+    "typescript": "^5.2.2",
+    "vant": "^4.7.3"
+  }
+}

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

@@ -0,0 +1,124 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-11-29 16:30:21
+ * @LastEditTime: 2023-11-30 09:41:00
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isMobile } from '@bluesyoung/utils'
+import type { FormInstance } from 'vant'
+
+definePageMeta({
+  title: '登录',
+  layout: 'blank',
+  auth: false,
+})
+
+const formRef = ref<FormInstance>()
+const router = useRouter()
+const route = useRoute()
+const isPass = ref(true)
+const form = ref<LoginForm>({ tel: '', passwd: '' })
+
+const isReaded = ref(true)
+const showPopup = ref(false)
+const popupContent = ref(`<h1>我是用户协议</h1>`)
+
+enum ProtoType {
+  用户协议,
+  隐私政策,
+}
+
+function read(type: ProtoType) {
+  if (type === ProtoType.用户协议)
+    popupContent.value = `<h1>我是用户协议</h1>`
+
+  else
+    popupContent.value = `<h1>我是隐私政策</h1>`
+
+  showPopup.value = true
+}
+const [showPass, toggle] = useToggle(false)
+
+watch(() => isPass.value, () => form.value.passwd = '')
+
+const { cookie, Exptime, hasLogin } = storeToRefs(useUserStore())
+
+async function loginHandler() {
+  try {
+    await formRef.value?.validate()
+    if (!isReaded.value) {
+      showToast('请先同意服务协议！')
+      return
+    }
+    const data = await apis.post.login(form.value)
+    console.log('🚀 ~ file: login.vue:55 ~ loginHandler ~ data:', data)
+    if (data) {
+      cookie.value = data
+      // 三天后过期
+      Exptime.value = Date.now() + 1000 * 60 * 60 * 24 * 3
+      showSuccessToast('登录成功！')
+
+      nextTick(() => {
+        if (route.query.redirect)
+          navigateTo({ path: route.query.redirect as string })
+        else
+          navigateTo('/')
+      })
+    }
+  }
+  catch (error) {
+
+  }
+}
+
+onMounted(() => {
+  hasLogin.value && navigateTo('/', {
+    replace: true,
+  })
+})
+</script>
+
+<template>
+  <VanNavBar title="登录" safe-area-inset-bottom />
+  <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: '请输入合法的手机号' },
+          ]"
+        />
+        <VanField
+          v-if="isPass" v-model.trim="form.passwd" placeholder="密码" :type="showPass ? 'password' : 'text'"
+          :rules="[{ required: true, message: '请填写密码' }]"
+        >
+          <template #right-icon>
+            <VanIcon :name="!showPass ? 'eye' : 'closed-eye'" @click="toggle(!showPass)" />
+          </template>
+        </VanField>
+        <YoungCodeInput v-else v-model.trim="form.passwd" :tel="form.tel" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
+      </VanCellGroup>
+      <VanCheckbox v-model="isReaded" shape="square" icon-size="small" class="p-4">
+        我已阅读并同意
+        <span class=" text-purple-500" @click.prevent="read(ProtoType.用户协议)">用户协议</span>
+        与
+        <span class=" text-purple-500" @click.prevent="read(ProtoType.隐私政策)">隐私政策</span>
+      </VanCheckbox>
+      <div class="m-4">
+        <VanButton block type="primary" @click="loginHandler">
+          登录
+        </VanButton>
+      </div>
+      <div class="flex justify-between p-4">
+        <span v-if="isPass" class="text-purple-500 cursor-pointer" @click.prevent="isPass = false">短信登录</span>
+        <span v-if="isPass" class="text-purple-500 cursor-pointer" @click.prevent="$router.push('/base/resetPasswd')">找回密码</span>
+        <span v-else class="text-purple-500 cursor-pointer" @click.prevent="isPass = true">密码登录</span>
+      </div>
+    </VanForm>
+    <VanPopup v-model:show="showPopup" position="center" :style="{ height: '80%', width: '90%', overflow: 'auto' }">
+      <div v-html="popupContent" />
+    </VanPopup>
+  </div>
+</template>