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

package/src/index.ts

@@ -0,0 +1,366 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-03 15:14:08
+ * @LastEditTime: 2023-11-08 11:27:47
+ * @Description:
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import spawn from 'cross-spawn'
+import minimist from 'minimist'
+import prompts from 'prompts'
+import { blue, green, red, reset } from 'kolorist'
+
+// Avoids autoconversion to number of the project name by defining that the args
+// non associated with an option ( _ ) needs to be parsed as a string. See #4606
+const argv = minimist<{
+  t?: string
+  template?: string
+}>(process.argv.slice(2), { string: ['_'] })
+const cwd = process.cwd()
+
+type ColorFunc = (str: string | number) => string
+interface Framework {
+  name: string
+  display: string
+  color: ColorFunc
+  variants: FrameworkVariant[]
+}
+interface FrameworkVariant {
+  name: string
+  display: string
+  color: ColorFunc
+  customCommand?: string
+  /**
+   * 待实现，暂时禁用选项
+   */
+  wip?: boolean
+  /**
+   * 已淘汰
+   */
+  deprecated?: boolean
+}
+
+const FRAMEWORKS: Framework[] = [
+  {
+    name: 'vue',
+    display: 'Young Designed Vue Template',
+    color: green,
+    variants: [
+      {
+        name: 'nuxt-admin',
+        display: 'Nuxt3 Admin',
+        color: blue,
+      },
+      {
+        name: 'nuxt-website',
+        display: 'Nuxt3 Website',
+        color: blue,
+      },
+      {
+        name: 'vue-mobile',
+        display: 'Vue3 Mobile',
+        color: blue,
+      },
+      {
+        name: 'uni-app',
+        display: 'Vue3 uni-app',
+        color: blue,
+      },
+      {
+        name: 'vue-thin',
+        display: 'Vue3 mini demo',
+        color: green,
+      },
+      {
+        name: 'admin-server',
+        display: 'Node Server Based on Midwayjs',
+        color: green,
+      },
+    ],
+  },
+  {
+    name: 'vite',
+    display: 'Vite Formal',
+    color: reset,
+    variants: [
+      {
+        name: 'create-vite',
+        display: 'create-vite',
+        color: reset,
+        customCommand: 'npm create vite@latest TARGET_DIR',
+      },
+    ],
+  },
+  {
+    name: 'others',
+    display: 'Others',
+    color: reset,
+    variants: [
+      {
+        name: 'create-vite-extra',
+        display: 'create-vite-extra ↗',
+        color: reset,
+        customCommand: 'npm create vite-extra@latest TARGET_DIR',
+      },
+    ],
+  },
+]
+
+const TEMPLATES = FRAMEWORKS.map(
+  f => (f.variants && f.variants.map(v => v.name)) || [f.name],
+).reduce((a, b) => a.concat(b), [])
+
+const renameFiles: Record<string, string | undefined> = {
+  _gitignore: '.gitignore',
+  _npmrc: '.npmrc',
+  _nvmrc: '.nvmrc',
+}
+
+const renameEnvBatch = /_env.*/
+
+const defaultTargetDir = 'vite-project'
+
+async function init() {
+  const argTargetDir = formatTargetDir(argv._[0])
+  const argTemplate = argv.template || argv.t
+
+  let targetDir = argTargetDir || defaultTargetDir
+  const getProjectName = () => (targetDir === '.' ? path.basename(path.resolve()) : targetDir)
+
+  let result: prompts.Answers<
+    'projectName' | 'overwrite' | 'packageName' | 'framework' | 'variant'
+  >
+
+  try {
+    result = await prompts(
+      [
+        {
+          type: argTargetDir ? null : 'text',
+          name: 'projectName',
+          message: reset('Project name:'),
+          initial: defaultTargetDir,
+          onState: (state) => {
+            targetDir = formatTargetDir(state.value) || defaultTargetDir
+          },
+        },
+        {
+          type: () => (!fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm'),
+          name: 'overwrite',
+          message: () =>
+            `${targetDir === '.' ? 'Current directory' : `Target directory "${targetDir}"`
+            } is not empty. Remove existing files and continue?`,
+        },
+        {
+          type: (_, { overwrite }: { overwrite?: boolean }) => {
+            if (overwrite === false)
+              throw new Error(`${red('✖')} Operation cancelled`)
+
+            return null
+          },
+          name: 'overwriteChecker',
+        },
+        {
+          type: () => (isValidPackageName(getProjectName()) ? null : 'text'),
+          name: 'packageName',
+          message: reset('Package name:'),
+          initial: () => toValidPackageName(getProjectName()),
+          validate: dir => isValidPackageName(dir) || 'Invalid package.json name',
+        },
+        {
+          type: argTemplate && TEMPLATES.includes(argTemplate) ? null : 'select',
+          name: 'framework',
+          message:
+            typeof argTemplate === 'string' && !TEMPLATES.includes(argTemplate)
+              ? reset(`"${argTemplate}" isn't a valid template. Please choose from below: `)
+              : reset('Select a framework:'),
+          initial: 0,
+          choices: FRAMEWORKS.map((framework) => {
+            const frameworkColor = framework.color
+            return {
+              title: frameworkColor(framework.display || framework.name),
+              value: framework,
+            }
+          }),
+        },
+        {
+          type: (framework: Framework) => (framework && framework.variants ? 'select' : null),
+          name: 'variant',
+          message: reset('Select a variant:'),
+          choices: (framework: Framework) =>
+            framework.variants.map((variant) => {
+              const variantColor = variant.color
+              return {
+                title: variantColor(variant.display || variant.name),
+                value: variant.name,
+                disabled: variant.wip || variant.deprecated,
+              }
+            }),
+        },
+      ],
+      {
+        onCancel: () => {
+          throw new Error(`${red('✖')} Operation cancelled`)
+        },
+      },
+    )
+  }
+  catch (cancelled: any) {
+    console.log(cancelled.message)
+    return
+  }
+
+  // user choice associated with prompts
+  const { framework, overwrite, packageName, variant } = result
+
+  const root = path.join(cwd, targetDir)
+
+  if (overwrite)
+    emptyDir(root)
+  else if (!fs.existsSync(root))
+    fs.mkdirSync(root, { recursive: true })
+
+  // determine template
+  const template: string = variant || framework?.name || argTemplate
+
+  const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
+  const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
+  const isYarn1 = pkgManager === 'yarn' && pkgInfo?.version.startsWith('1.')
+
+  const { customCommand }
+    = FRAMEWORKS.flatMap(f => f.variants).find(v => v.name === template) ?? {}
+
+  if (customCommand) {
+    const fullCustomCommand = customCommand
+      .replace('TARGET_DIR', targetDir)
+      .replace(/^npm create/, `${pkgManager} create`)
+      // Only Yarn 1.x doesn't support `@version` in the `create` command
+      .replace('@latest', () => (isYarn1 ? '' : '@latest'))
+      .replace(/^npm exec/, () => {
+        // Prefer `pnpm dlx` or `yarn dlx`
+        if (pkgManager === 'pnpm')
+          return 'pnpm dlx'
+
+        if (pkgManager === 'yarn' && !isYarn1)
+          return 'yarn dlx'
+
+        // Use `npm exec` in all other cases,
+        // including Yarn 1.x and other custom npm clients.
+        return 'npm exec'
+      })
+
+    const [command, ...args] = fullCustomCommand.split(' ')
+    const { status } = spawn.sync(command, args, {
+      stdio: 'inherit',
+    })
+    process.exit(status ?? 0)
+  }
+
+  console.log(`\nScaffolding project in ${root}...`)
+
+  const templateDir = path.resolve(fileURLToPath(import.meta.url), '../..', `template-${template}`)
+
+  const write = (file: string, content?: string) => {
+    const targetPath = path.join(
+      root,
+      renameFiles[file] ?? renameEnvBatch.test(file) ? file.replace('_', '.') : file,
+    )
+    if (content)
+      fs.writeFileSync(targetPath, content)
+    else
+      copy(path.join(templateDir, file), targetPath)
+  }
+
+  const files = fs.readdirSync(templateDir)
+  for (const file of files.filter(f => f !== 'package.json'))
+    write(file)
+
+  const pkg = JSON.parse(fs.readFileSync(path.join(templateDir, 'package.json'), 'utf-8'))
+
+  pkg.name = packageName || getProjectName()
+
+  write('package.json', JSON.stringify(pkg, null, 2))
+
+  console.log('\nDone. Now run:\n')
+  if (root !== cwd)
+    console.log(`  cd ${path.relative(cwd, root)}`)
+
+  switch (pkgManager) {
+    case 'yarn':
+      console.log('  yarn')
+      console.log('  yarn dev')
+      break
+    default:
+      console.log(`  ${pkgManager} install`)
+      console.log(`  ${pkgManager} run dev`)
+      break
+  }
+  console.log()
+}
+
+function formatTargetDir(targetDir: string | undefined) {
+  return targetDir?.trim().replace(/\/+$/g, '')
+}
+
+function copy(src: string, dest: string) {
+  const stat = fs.statSync(src)
+  if (stat.isDirectory())
+    copyDir(src, dest)
+  else
+    fs.copyFileSync(src, dest)
+}
+
+function isValidPackageName(projectName: string) {
+  return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(projectName)
+}
+
+function toValidPackageName(projectName: string) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z\d\-~]+/g, '-')
+}
+
+function copyDir(srcDir: string, destDir: string) {
+  fs.mkdirSync(destDir, { recursive: true })
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file)
+    const destFile = path.resolve(destDir, file)
+    copy(srcFile, destFile)
+  }
+}
+
+function isEmpty(path: string) {
+  const files = fs.readdirSync(path)
+  return files.length === 0 || (files.length === 1 && files[0] === '.git')
+}
+
+function emptyDir(dir: string) {
+  if (!fs.existsSync(dir))
+    return
+
+  for (const file of fs.readdirSync(dir)) {
+    if (file === '.git')
+      continue
+
+    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
+  }
+}
+
+function pkgFromUserAgent(userAgent: string | undefined) {
+  if (!userAgent)
+    return undefined
+  const pkgSpec = userAgent.split(' ')[0]
+  const pkgSpecArr = pkgSpec.split('/')
+  return {
+    name: pkgSpecArr[0],
+    version: pkgSpecArr[1],
+  }
+}
+
+init().catch((e) => {
+  console.error(e)
+})

package/template-admin-server/_nvmrc

@@ -0,0 +1 @@
+16

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

@@ -1,15 +1,29 @@
 {
   "prettier.enable": false,
   "editor.formatOnSave": false,
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
 
-  // The following is optional.
-  // It's better to put under project setting `.vscode/settings.json`
-  // to avoid conflicts with working with different eslint configs
-  // that does not support all formats.
+  // 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",

package/template-nuxt-admin/Dockerfile

@@ -1,5 +1,5 @@
 # 拉取基础镜像
-FROM intranet-harbor.laiyouxi.com/base/alpine/node:19 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" \
@@ -20,7 +20,7 @@ COPY package.json yarn.lock /app/
 
 # 设置npm仓库 + 下载依赖，上面的文件如果没有变化则跳过下载，直接使用缓存
 RUN npm config set registry https://registry.npmmirror.com && \
-    yarn config set registry https://registry.npmmirror.com && \        
+    yarn config set registry https://registry.npmmirror.com && \
     yarn
 
 # 加入代码
@@ -29,7 +29,7 @@ COPY . /app
 RUN yarn build
 
 # 打包完成，构建最终的极简镜像
-FROM intranet-harbor.laiyouxi.com/base/alpine/node:19
+FROM intranet-harbor.laiyouxi.com/base/alpine/node:20.9.0
 
 WORKDIR /app
 # 复制源码

package/template-nuxt-admin/README.md

@@ -1,44 +1,50 @@
 # 基于 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)
 
 ## 与旧版的区别
 
 ### 所有的页面都是默认缓存的
 
-- 原有的 route 代码块，使用 definePageMeta 宏进行定义
+- 原有的 `route` 代码块，使用 `definePageMeta` 宏进行定义
 
-- 所有需要 keep-alive 的页面，setup 里面直接执行的函数或者 onMounted 包裹的函数，全部替换为 useTabReOpen 进行包裹
+- 所有需要 `keep-alive` 的页面，`setup` 里面直接执行的函数或者 `onMounted` 包裹的函数，全部替换为 `useTabReOpen` 进行包裹
 
-- 所有不需要 keep-alive 的页面，setup 里面直接执行的函数或者 onMounted 包裹的函数，全部替换为 useTabNoCache 进行包裹
+- 所有不需要 `keep-alive` 的页面，`setup` 里面直接执行的函数或者 `onMounted` 包裹的函数，全部替换为 `useTabNoCache` 进行包裹
 
-- onUnmounted 包裹的函数，全部替换为 useTabClose 进行包裹
+- `onUnmounted` 包裹的函数，全部替换为 `useTabClose` 进行包裹
 
 ### 组件库(@bluesyoung/ui-vue3-element-plus)
 
 > 自 0.13.0 开始，YoungDialog 默认表现为 Drawer !!!, 可通过设置 as='dialog' 改为 Dialog
 
-### 其他
+> 自 1.2.1 开始，常规使用下，组件、类型以及方法都可以自动按需导入，<del>渲染函数及 tsx 可能仍需手动导入</del>
+  - 需要显示注册模块 (`@bluesyoung/ui-vue3-element-plus/nuxt`)
 
-- 路由跳转，使用 navigateTo 替换 router
+> 自 1.3.0 开始，可以全量按需自动导入
+
+### 其他
 
-- 二次确认弹窗，统一使用 useConfirm(自带汉化，代码更精简)
+- 路由跳转，使用 `navigateTo` 替换 `router`
 
-- prompt 情况更复杂，需自行汉化
+- 二次确认弹窗，统一使用 `useConfirm`(自带汉化，代码更精简)
 
-- alert 使用频率不高，自行汉化
+- `prompt` 情况更复杂，需自行汉化
 
-- 使用 tsx 代替 h:
-  - hooks 直接修改扩展名为 .tsx
-  - vue 内修改 lang 为 tsx
+- `alert` 使用频率不高，自行汉化
 
-- stores/* 已经被删除了，需要取数据，使用 pinia
+- 使用 `tsx` 代替 `h`:
+  - `hooks` 直接修改扩展名为 `.tsx`
+  - `vue` 内修改 `lang` 为 `tsx`
 
-- 一些存在于 keep-alive 页面内的组件，需要在例如 @focus 内 getList()，或者使用 useTabReOpen 替换 onMounted
+- 一些存在于 `keep-alive` 页面内的组件，需要在例如 `@focus` 内 `getList()`，或者使用 `useTabReOpen` 替换 `onMounted`
 
-- 尽量使用 YoungTablePro 而不是 YoungTable
+- 尽量使用 `YoungTablePro` 而不是 `YoungTable`
 
-- 保持页面美观，页面内容全部使用 ElCard 进行包裹
+- 保持页面美观，页面内容全部使用 `ElCard` 进行包裹
 
 - **SelectOption 的值不要给 null ！！！**
 
@@ -54,6 +60,7 @@ npm i -g young-commit
 
 ### 使用
 
+> **依赖 which 命令，Windows 环境请在 git bash 内执行！！！**
 
 - 正常使用 `git add` 将要提交的文件添加到暂存区
 

package/template-nuxt-admin/_nvmrc

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

package/template-nuxt-admin/app.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-05-25 19:53:07
- * @LastEditTime: 2023-07-26 10:26:50
+ * @LastEditTime: 2023-11-07 16:30:06
  * @Description:
 -->
 <script lang="ts" setup>
@@ -11,7 +11,7 @@ import { ElConfigProvider } from 'element-plus'
 import locale from 'element-plus/dist/locale/zh-cn.mjs'
 
 const app = useNuxtApp()
-const { isLoading } = storeToRefs(useNavStore())
+const { isLoading, zen_mode, zen_mode_helper } = storeToRefs(useNavStore())
 
 app.hook('page:start', () => {
   console.log('loading...')
@@ -22,6 +22,13 @@ app.hook('page:finish', () => {
   console.log('loading end ...')
   isLoading.value = false
 })
+
+function showZenModeHelper() {
+  zen_mode_helper.value = true
+  setTimeout(() => {
+    zen_mode_helper.value = false
+  }, 1e4)
+}
 </script>
 
 <template>
@@ -31,6 +38,7 @@ app.hook('page:finish', () => {
     </NuxtLayout>
   </ElConfigProvider>
   <YoungLoading v-show="isLoading" />
+  <young-float-ball v-show="zen_mode && !zen_mode_helper" zindex="9" top="0" icon="/logo.svg" title="显示顶部导航栏，无操作 10s 后收起" custom @click="showZenModeHelper" />
 </template>
 
 <style lang="scss">

package/template-nuxt-admin/boot.mjs

@@ -5,12 +5,12 @@
  * @Description:
  */
 (async () => {
-  const env = process.env.DEPLOY_ENV;
-  const listenPort = process.env.LISTEN_PORT || 3003;
-  console.log('当前环境：', env);
-  console.log('服务监听端口：', listenPort);
+  const env = process.env.DEPLOY_ENV
+  const listenPort = process.env.LISTEN_PORT || 3003
+  console.log('当前环境：', env)
+  console.log('服务监听端口：', listenPort)
 
-  process.env.NITRO_PORT = listenPort;
+  process.env.NITRO_PORT = listenPort
 
-  await import('./dist/server/index.mjs');
-})();
+  await import('./dist/server/index.mjs')
+})()

package/template-nuxt-admin/components/TopSearch.vue

@@ -1,11 +1,10 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 17:01:21
- * @LastEditTime: 2023-07-28 17:32:46
+ * @LastEditTime: 2023-11-07 14:47:37
  * @Description:
 -->
 <script lang="ts" setup>
-import type { SelectOptionItem } from '@bluesyoung/ui-vue3-element-plus'
 import { YoungCmdPopup } from '@bluesyoung/ui-vue3'
 import { isHttpUrl } from '@bluesyoung/utils'
 

package/template-nuxt-admin/components/YoungChangePassword.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-24 14:21:55
- * @LastEditTime: 2023-09-08 10:34:56
+ * @LastEditTime: 2023-11-07 14:56:32
  * @Description:
 -->
 <script lang="ts" setup>
@@ -41,10 +41,7 @@ function sure() {
     if (valid) {
       await apis.post.changePassword(form)
       hide()
-      showNotify({
-        message: '密码修改成功，请重新登录',
-        type: 'success',
-      })
+      ElMessage.success('密码修改成功，请重新登录')
       user.removeToken()
       const redirect = location.pathname === '/login' ? '/' : encodeURIComponent(location.href.replace(location.origin, ''))
       navigateTo(`/login?redirect=${redirect}`)

package/template-nuxt-admin/components/YoungCodeInput.vue

@@ -1,12 +1,11 @@
 <!--
  * @Author: zhangyang
  * @Date: 2022-08-19 13:52:58
- * @LastEditTime: 2023-07-24 11:57:12
+ * @LastEditTime: 2023-11-07 14:47:52
  * @Description:
 -->
 <script lang="ts" setup>
 import { YoungSlideVerify } from '@bluesyoung/ui-vue3'
-import { useVerifyCode } from '@bluesyoung/ui-vue3-element-plus'
 import { isNumber } from '@bluesyoung/utils'
 
 interface Props {