create-young-proj 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 # Changelog
 
 
+## v1.6.0
+
+[compare changes](https://github.com/BluesYoung-web/create-young-proj/compare/v1.5.0...v1.6.0)
+
+### 🚀 Enhancements
+
+- 🚀 优化后台移动端表现 ([7895259](https://github.com/BluesYoung-web/create-young-proj/commit/7895259))
+- 🚀 template-nuxt-mobile ([664dcdb](https://github.com/BluesYoung-web/create-young-proj/commit/664dcdb))
+
+### 🏡 Chore
+
+- 🏡 后台无用依赖删除 ([48ce806](https://github.com/BluesYoung-web/create-young-proj/commit/48ce806))
+- 🏡 remove template-vue-mobile ([df30f76](https://github.com/BluesYoung-web/create-young-proj/commit/df30f76))
+- 🏡 后台模板兼容配置调整 ([f662f94](https://github.com/BluesYoung-web/create-young-proj/commit/f662f94))
+- 🏡 官网模板兼容配置调整 ([3138569](https://github.com/BluesYoung-web/create-young-proj/commit/3138569))
+
+### ❤️ Contributors
+
+- 张扬 <bluesyoung_web@163.com>
+
+## v1.5.0
+
+[compare changes](https://github.com/BluesYoung-web/create-young-proj/compare/v1.4.0...v1.5.0)
+
+### 🩹 Fixes
+
+- 🩹 fix Dockerfile ([b29b402](https://github.com/BluesYoung-web/create-young-proj/commit/b29b402))
+
+### ❤️ Contributors
+
+- 张扬 <bluesyoung_web@163.com>
+
 ## v1.4.0
 
 [compare changes](https://github.com/BluesYoung-web/create-young-proj/compare/v1.3.0...v1.4.0)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-young-proj",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "create project from template",
   "author": "BluesYoung-web",
   "license": "MIT",

package/template-nuxt-admin/README.md

@@ -80,7 +80,7 @@ npm i -g young-commit
 
 兼容 `PC` 端与移动端
 
-**移动端最低兼容钉钉浏览器**
+**理论上最低兼容 `chrome58`**
 
 ## 常用的操作
 

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-09-21 15:57:55
- * @LastEditTime: 2023-11-15 11:52:33
+ * @LastEditTime: 2023-11-30 11:03:49
  * @Description:
  */
 import { resolve } from 'node:path'
@@ -84,11 +84,10 @@ export default defineNuxtConfig({
 
   vite: {
     build: {
-      // 兼容钉钉浏览器
-      target: 'es2015',
       sourcemap: false,
-      /* hack fix 360 极速浏览器 13.5 不支持 inset */
-      cssTarget: 'chrome61',
+      // 兼容旧浏览器
+      target: ['chrome58'],
+      cssTarget: ['chrome58'],
     },
     css: {
       preprocessorOptions: {

package/template-nuxt-admin/package.json

@@ -42,7 +42,6 @@
     "@unocss/nuxt": "^0.57.2",
     "@vant/nuxt": "^1.0.2",
     "@vueuse/nuxt": "^10.2.1",
-    "add": "^2.0.6",
     "dayjs": "^1.11.9",
     "element-plus": "^2.3.8",
     "eslint": "^8.48.0",

package/template-nuxt-admin/server/plugins/env.ts

@@ -62,6 +62,14 @@ export default defineNitroPlugin(async (nitroApp) => {
   })
 
   nitroApp.hooks.hook('render:html', (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(`
     <!-- 注入环境变量 -->

package/template-nuxt-admin/yarn.lock

@@ -2284,11 +2284,6 @@ acorn@8.11.2, acorn@^8.10.0, acorn@^8.5.0, acorn@^8.6.0, acorn@^8.8.2, acorn@^8.
   resolved "https://registry.npmmirror.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
-add@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.npmmirror.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
-  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
-
 adler-32@~1.3.0:
   version "1.3.1"
   resolved "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz#1dbf0b36dda0012189a32b3679061932df1821e2"

package/template-nuxt-mobile/.nvmrc

@@ -0,0 +1 @@
+20.9.0

package/{template-vue-mobile → template-nuxt-mobile}/.vscode/extensions.json

@@ -1,10 +1,12 @@
 {
   "recommendations": [
-    "vue.volar",
-    "rome.rome",
-    "obkoro1.korofileheader",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "mhutchie.git-graph",
     "vue.vscode-typescript-vue-plugin",
     "antfu.unocss",
+    "antfu.vscode-server-controller",
+    "vue.volar",
     "voorjaar.windicss-intellisense"
   ]
 }

package/template-nuxt-mobile/.vscode/settings.json

@@ -0,0 +1,39 @@
+{
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

package/{template-vue-mobile → template-nuxt-mobile}/Dockerfile

@@ -1,8 +1,14 @@
 # 拉取基础镜像
-FROM node:16-alpine as builder
+FROM intranet-harbor.laiyouxi.com/base/alpine/node:20.9.0 as builder
+# 添加部分元数据，暂无意义
+LABEL vendor="Lyx-yunwei" \
+      com.example.release-date="2022-11-10" \
+      com.example.version.is-production="false"
 
 # 维护者
 MAINTAINER BluesYoung "bluesyoung_web@163.com"
+# 配置环境变量
+ENV WORK_DIR=/app
 
 # 工作目录
 WORKDIR /app
@@ -23,20 +29,13 @@ COPY . /app
 RUN yarn build
 
 # 打包完成，构建最终的极简镜像
-FROM node:16-alpine
+FROM intranet-harbor.laiyouxi.com/base/alpine/node:20.9.0
 
-# 工作目录
 WORKDIR /app
-
-# 复制运行需要的文件[及依赖]
-# 直接复制源代码
+# 复制源码
 COPY boot.mjs /app/
 COPY config /app/config
-# 复制上一步的打包产物
-COPY --from=builder /app/.output /app/.output
-
-# 暴露指定的端口号，暂不需要
-# EXPOSE 3001
+# 复制编译后的代码
+COPY --from=builder /app/dist /app/dist
 
-# 启动容器时运行的命令
-ENTRYPOINT ["node", "boot.mjs"]
+ENTRYPOINT ["node", "boot.mjs"]

package/template-nuxt-mobile/README.md

@@ -0,0 +1,90 @@
+# 基于 Nuxt 3 的服务端渲染响应式网站
+
+
+[![](https://img.shields.io/badge/Author-BluesYoung--web-blue)](https://gitee.com/BluesYoung-web)
+
+[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
+
+## 特性
+
+- 基于 [@nuxtjs/device](https://github.com/nuxt-modules/device) 的设备判断
+
+- 基于 [@unocss/nuxt](https://github.com/unocss/unocss) 的样式自动生成
+
+- 理论最低兼容 `chrome58`
+
+## 配套 git 提交工具
+
+### 安装
+
+```bash
+npm i -g young-commit
+```
+
+### 使用
+
+- 正常使用 `git add` 将要提交的文件添加到暂存区
+
+- 提交步骤使用 `yc` 或者 `young-commit` 进行提交
+
+#### 命令选项
+
+- `yc -i` 初始化(仅刚创建项目时使用，会自动执行 `git init`)
+
+- `yc -r` 进行版本发布，会根据之前的提交及最近一个 `tag` 生成 `changelog`
+
+
+## 使用响应式布局
+
+兼容 `PC` 端与移动端，大屏表现为 `800px` 居中
+
+## 常用的操作
+
+### 抛出错误
+
+```ts
+throw createError({ statusCode: 404, message: '数据迷路了' })
+```
+
+### 响应式屏幕尺寸
+
+
+```ts
+/*
+export const WindowSize = reactive({
+  'lt-sm': useMediaQuery('(max-width: 639.9px)'),
+  'sm': useMediaQuery('(min-width: 640px)'),
+  'lt-md': useMediaQuery('(max-width: 767.9px)'),
+  'md': 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)'),
+});
+*/
+```
+
+### 设备判断
+
+```ts
+const $device = useDevice()
+
+$device.isDesktop
+$device.isMobile
+$device.isTablet
+$device.isMobileOrTablet
+$device.isDesktopOrTablet
+$device.isIos
+$device.isWindows
+$device.isMacOS
+$device.isApple
+$device.isAndroid
+$device.isFirefox
+$device.isEdge
+$device.isChrome
+$device.isSafari
+$device.isSamsung
+$device.isCrawler
+```

package/template-nuxt-mobile/_gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+config/*.js

package/template-nuxt-mobile/_npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

package/template-nuxt-mobile/_nvmrc

@@ -0,0 +1 @@
+20.9.0

package/template-nuxt-mobile/app.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-05-25 19:53:07
+ * @LastEditTime: 2023-11-29 16:57:22
+ * @Description:
+-->
+<script lang="ts" setup>
+import '@unocss/reset/tailwind-compat.css'
+
+const app = useNuxtApp()
+
+// !!! 这两个钩子函数不能异步调用，否则会造成页面的 useFetch 报错 !!!
+app.hook('page:start', () => {
+  // console.log('loading...');
+  showLoading()
+})
+// !!! 这两个钩子函数不能异步调用，否则会造成页面的 useFetch 报错 !!!
+app.hook('page:finish', () => {
+  // console.log('loading end ...')
+  hideLoading()
+})
+
+const title = process.server ? '' : window.__YOUNG_ENV__.VITE_TITLE
+</script>
+
+<template>
+  <Title>{{ title }}</Title>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+.reset-img img,
+.reset-img video,
+.reset-img svg,
+.reset-img audio {
+  display: initial;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px
+}
+
+::-webkit-scrollbar-track {
+  background-color: #fff;
+  border-radius: 2em
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #aaa;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent
+}
+
+:root {
+  --van-nav-bar-background: #0083CE !important;
+  --van-nav-bar-title-text-color: #FFFFFF !important;
+  --van-nav-bar-icon-color: #fff !important;
+  --van-grid-item-text-color: #111 !important;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background: #F7F8FA;
+}
+</style>

package/template-nuxt-mobile/boot.mjs

@@ -0,0 +1,17 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-09-07 09:31:12
+ * @LastEditTime: 2023-11-29 16:36:36
+ * @Description:
+ */
+(async () => {
+  const env = process.env.DEPLOY_ENV
+  const listenPort = process.env.LISTEN_PORT || 3003
+
+  console.log('当前环境：', env)
+  console.log('服务监听端口：', listenPort)
+
+  process.env.NITRO_PORT = listenPort
+
+  await import('./dist/server/index.mjs')
+})()

package/template-nuxt-mobile/components/young/CodeInput.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-28 11:09:14
+ * @LastEditTime: 2023-11-29 17:36:42
+ * @Description:
+-->
+<script lang="ts" setup>
+import { YoungSlideVerify } from '@bluesyoung/ui-vue3'
+import { useVerifyCode } from '@bluesyoung/ui-vue3-element-plus'
+
+interface Props {
+  modelValue: string
+  tel: string
+  maxlength?: number
+  forceEl?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 6,
+  forceEl: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void
+  (e: 'enter'): void
+}>()
+
+const canGet = computed(() => {
+  return props.tel.length === 11
+})
+
+const {
+  getCode,
+  tip,
+  showSlider,
+  pass,
+  cancel,
+  disabled,
+} = useVerifyCode(async () => {
+  apis.get.sendCode(props.tel)
+  showNotify({
+    message: '短信已发送至您的手机，请注意查收！',
+    type: 'success',
+  })
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <VanField
+      v-bind="$attrs"
+      class="mt-4 rounded-md" :model-value="modelValue" type="text" placeholder="请输入验证码"
+      @update:model-value="(e) => emit('update:modelValue', e)" @keyup.enter="emit('enter')"
+    >
+      <template #button>
+        <VanButton v-if="!disabled" type="primary" class="!text-[#1AAADA]" :disabled="!canGet" plain @click="getCode">
+          {{ tip }}
+        </VanButton>
+        <div v-else class="text-[#ccc]">
+          {{ tip }}
+        </div>
+      </template>
+    </VanField>
+    <YoungSlideVerify :show="showSlider" @success="pass" @close="cancel" />
+  </div>
+</template>
+
+<style>
+.vue-puzzle-vcode {
+  z-index: 10001 !important;
+}
+</style>

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

@@ -0,0 +1,57 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-20 17:14:58
+ * @LastEditTime: 2023-11-29 17:50:40
+ * @Description:
+ */
+import { useHttp } from '@bluesyoung/http'
+import { useGet, usePost } from './apis'
+
+const http = useHttp<{
+  code: number
+  data: any
+  msg: string
+}>({
+  timeout: -1,
+  loading: {
+    start: showLoading,
+    end: hideLoading,
+  },
+  fail: (err: any) => {
+    console.log('🚀 ~ file: api.ts:28 ~ err:', err)
+    const user = useUserStore()
+    if (err?.response?.status === 401) {
+      user.removeToken()
+      checkLogin(true)
+
+      throw err
+    }
+
+    if (typeof err === 'string') {
+      // 通用失败，弹出提示信息
+      ElMessage.error(err)
+    }
+    if ((err as any) instanceof Error) {
+      ElMessage.error(err?.response?.data?.message
+        || err?.response?.data?.msg
+        || err?.response?.data
+        || err.message
+        || '网络错误！')
+    }
+
+    throw err
+  },
+  headers: {
+    getAuthHeaders: () => {
+      const { token } = storeToRefs(useUserStore())
+      return {
+        Authorization: `Bearer ${token.value}`,
+      }
+    },
+  },
+})
+
+export const apis = http.__mixin__({
+  get: useGet(http),
+  post: usePost(http),
+})

package/template-nuxt-mobile/composables/apis/get.ts

@@ -0,0 +1,22 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:09:37
+ * @LastEditTime: 2023-11-29 17:36:23
+ * @Description:
+ */
+import type { YoungHttp, YoungHttpAuthReq, YoungHttpFreeReq } from '@bluesyoung/http'
+
+export function useGet(http: YoungHttp) {
+  const FreeReq: YoungHttpFreeReq = args => http.freeReq({ method: 'GET', ...args })
+  const AuthReq: YoungHttpAuthReq = args => http.authReq({ method: 'GET', ...args })
+
+  return {
+    /**
+     * 发送短信验证码
+     */
+    sendCode: async (phone: string) => {
+      showToast(`todo: ${phone}发送短信验证码`)
+      // await FreeReq({ url: '/v1/user/sendCode', params: { phone } });
+    },
+  }
+}

package/template-nuxt-mobile/composables/apis/index.ts

@@ -0,0 +1,8 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:22:00
+ * @LastEditTime: 2023-11-29 17:45:25
+ * @Description:
+ */
+export * from './get'
+export * from './post'

package/template-nuxt-mobile/composables/apis/post.ts

@@ -0,0 +1,39 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:21:02
+ * @LastEditTime: 2023-11-29 17:53:30
+ * @Description:
+ */
+import type { YoungHttp, YoungHttpAuthReq, YoungHttpFreeReq } from '@bluesyoung/http'
+import { telMasaike } from '@bluesyoung/utils'
+
+export function usePost(http: YoungHttp) {
+  const FreeReq: YoungHttpFreeReq = args => http.freeReq({ method: 'POST', ...args })
+  const AuthReq: YoungHttpAuthReq = args => http.authReq({ method: 'POST', ...args })
+
+  return {
+    login: async (args: LoginForm) => {
+      console.log('🚀 ~ file: post.ts:15 ~ login: ~ args:', args)
+
+      return {
+        uuid: '9527',
+        nickname: '用户xxx',
+        headimgurl: 'https://avatars.githubusercontent.com/u/55608642?v=4',
+        token: 'xxxxxxxxx',
+        phone: telMasaike(args.tel),
+      } as UserLoginRes
+    },
+    changePassword: async (args: ResetPasswdForm) => {
+      console.log('🚀 ~ file: post.ts:15 ~ login: ~ args:', args)
+      showToast('todo: user change password')
+
+      return {
+        uuid: '9527',
+        nickname: '用户xxx',
+        headimgurl: 'https://avatars.githubusercontent.com/u/55608642?v=4',
+        token: 'xxx',
+        phone: telMasaike(args.tel),
+      } as UserLoginRes
+    },
+  }
+}

package/template-nuxt-mobile/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))