create-young-proj 0.8.0 → 0.9.0

package/package.json

@@ -1,7 +1,23 @@
 {
   "name": "create-young-proj",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "create project from template",
+  "author": "BluesYoung-web",
+  "license": "MIT",
+  "homepage": "https://github.com/BluesYoung-web/create-young-proj/tree/main/packages/create-vite#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BluesYoung-web/create-young-proj.git"
+  },
+  "bugs": {
+    "url": "https://github.com/BluesYoung-web/create-young-proj/issues"
+  },
+  "keywords": [
+    "cli",
+    "project template",
+    "young project",
+    "vue"
+  ],
   "main": "index.mjs",
   "bin": {
     "create-young-proj": "index.mjs",
@@ -15,35 +31,30 @@
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
   },
-  "keywords": [
-    "cli",
-    "project template",
-    "young project",
-    "vue"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/BluesYoung-web/create-young-proj.git"
-  },
-  "bugs": {
-    "url": "https://github.com/BluesYoung-web/create-young-proj/issues"
+  "scripts": {
+    "dev": "jiti ./src/index.ts",
+    "build": "unbuild",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "postinstall": "simple-git-hooks"
   },
-  "homepage": "https://github.com/BluesYoung-web/create-young-proj/tree/main/packages/create-vite#readme",
-  "author": "BluesYoung-web",
-  "license": "MIT",
   "devDependencies": {
+    "@antfu/eslint-config": "^0.41.0",
     "@types/node": "16",
     "cross-spawn": "^7.0.3",
+    "eslint": "^8.48.0",
+    "jiti": "^1.19.3",
     "kolorist": "^1.6.0",
+    "lint-staged": "^14.0.1",
     "minimist": "^1.2.7",
     "prompts": "^2.4.2",
-    "rome": "^10.0.1",
+    "simple-git-hooks": "^2.9.0",
     "unbuild": "^1.0.1"
   },
-  "scripts": {
-    "dev": "unbuild --stub",
-    "build": "unbuild",
-    "format": "rome format . --write",
-    "push": "pnpm publish --access public"
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
   }
-}
+}

package/template-nuxt-admin/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "extends": "@antfu",
+  "rules": {
+    "@typescript-eslint/no-use-before-define": "off",
+    "no-console": "off",
+    "n/prefer-global/process": "off",
+    "unused-imports/no-unused-vars": "off",
+    "@typescript-eslint/ban-types": "off",
+    "vue/valid-v-model": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-throw-literal": "off"
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "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-admin/.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.organizeImports": false
+  },
+
+  // 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.
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

package/template-nuxt-admin/README.md

@@ -1,5 +1,7 @@
 # 基于 Nuxt 3 的后台
 
+[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
+
 ## 配套 git 提交工具
 
 ### 安装
@@ -10,6 +12,8 @@ npm i -g young-commit
 
 ### 使用
 
+> **依赖 which 命令，Windows 环境请在 git bash 内执行！！！**
+
 - 正常使用 `git add` 将要提交的文件添加到暂存区
 
 - 提交步骤使用 `yc` 或者 `young-commit` 进行提交
@@ -20,7 +24,9 @@ npm i -g young-commit
 
 - `yc -r` 进行版本发布，会根据之前的提交及最近一个 `tag` 生成 `changelog`
 
-> **受限于 Nuxt3 的 keep-alive 机制，setup 直接执行 / onMounted 包裹的，需要替换为 useTabReOpen 包裹的**
+## ⚠️ 注意
+
+接口需要传递数组数据的，需要序列化为逗号拼接的字符串之后再传递！！！
 
 ## 使用响应式布局
 
@@ -33,7 +39,7 @@ npm i -g young-commit
 ### 抛出错误
 
 ```ts
-throw createError({ statusCode: 404, message: '数据迷路了' });
+throw createError({ statusCode: 404, message: '数据迷路了' })
 ```
 
 ### 响应式屏幕尺寸

package/template-nuxt-admin/app.vue

@@ -5,22 +5,23 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { ElConfigProvider } from 'element-plus';
-// @ts-ignore
-import locale from 'element-plus/dist/locale/zh-cn.mjs';
+import { ElConfigProvider } from 'element-plus'
 
-const app = useNuxtApp();
-const { isLoading } = storeToRefs(useNavStore());
+// @ts-expect-error
+import locale from 'element-plus/dist/locale/zh-cn.mjs'
+
+const app = useNuxtApp()
+const { isLoading } = storeToRefs(useNavStore())
 
 app.hook('page:start', () => {
-  console.log('loading...');
-  isLoading.value = true;
-});
+  console.log('loading...')
+  isLoading.value = true
+})
 
 app.hook('page:finish', () => {
-  console.log('loading end ...');
-  isLoading.value = false;
-});
+  console.log('loading end ...')
+  isLoading.value = false
+})
 </script>
 
 <template>
@@ -38,4 +39,3 @@ app.hook('page:finish', () => {
 @import 'vant/lib/index.css';
 @import '~/styles/index.scss';
 </style>
-

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

@@ -5,14 +5,15 @@
  * @Description:
 -->
 <script lang="ts" setup>
-const { toggle, isFullscreen, isSupported } = useFullscreen();
+const { toggle, isFullscreen, isSupported } = useFullscreen()
 
-const title = computed(() => isFullscreen.value ? '退出全屏' : '全屏');
+const title = computed(() => isFullscreen.value ? '退出全屏' : '全屏')
 </script>
 
 <template>
-  <ElButton v-if="isSupported" circle @click="toggle" :title="title">
+  <ElButton v-if="isSupported" circle :title="title" @click="toggle">
     <div
-      :class="[isFullscreen ? 'i-fluent:full-screen-minimize-24-filled' : 'i-fluent:full-screen-maximize-24-filled']" />
+      :class="[isFullscreen ? 'i-fluent:full-screen-minimize-24-filled' : 'i-fluent:full-screen-maximize-24-filled']"
+    />
   </ElButton>
 </template>

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

@@ -5,42 +5,42 @@
  * @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';
+import type { SelectOptionItem } from '@bluesyoung/ui-vue3-element-plus'
+import { YoungCmdPopup } from '@bluesyoung/ui-vue3'
+import { isHttpUrl } from '@bluesyoung/utils'
 
-const { flat_nav_arr, nav_arr } = storeToRefs(useNavStore());
+const { flat_nav_arr, nav_arr } = storeToRefs(useNavStore())
 
-const cmdRef = ref();
-const searchStr = ref('');
-const options = ref<SelectOptionItem<string>[]>([]);
+const cmdRef = ref()
+const searchStr = ref('')
+const options = ref<SelectOptionItem<string>[]>([])
 
-const remoteMethod = (query: string) => {
+function remoteMethod(query: string) {
   if (query) {
     options.value = flat_nav_arr.value
-      .filter((item) => +item.visible === 1 && item.title?.toLowerCase().includes(query.toLowerCase()))
-      .map((item) => ({ label: item.title || '', value: item.component }));
-  } else {
-    options.value = [];
+      .filter(item => +item.visible === 1 && item.title?.toLowerCase().includes(query.toLowerCase()))
+      .map(item => ({ label: item.title || '', value: item.component }))
   }
-};
+  else {
+    options.value = []
+  }
+}
 
-const goPage = (url: string) => {
+function goPage(url: string) {
   if (url) {
-    if (isHttpUrl(url)) {
-      window.open(url);
-    } else {
-      navigateTo(url);
-    }
-    searchStr.value = '';
-    cmdRef.value?.hide();
-  }
-};
+    if (isHttpUrl(url))
+      window.open(url)
+    else
+      navigateTo(url)
 
+    searchStr.value = ''
+    cmdRef.value?.hide()
+  }
+}
 </script>
 
 <template>
-  <ElButton v-bind="$attrs" circle @click="cmdRef?.show()" title="菜单搜索">
+  <ElButton v-bind="$attrs" circle title="菜单搜索" @click="cmdRef?.show()">
     <div class="i-ic-baseline-manage-search" />
   </ElButton>
 
@@ -50,16 +50,20 @@ const goPage = (url: string) => {
         <div class="text-xl mb-4">
           快捷菜单搜索：
         </div>
-        <ElSelect :ref="el" class="w-260px" v-model="searchStr" filterable remote reserve-keyword
-          placeholder="请输入菜单关键字，点击选中即可跳转" :remote-method="remoteMethod" @change="goPage">
+        <ElSelect
+          :ref="el" v-model="searchStr" class="w-260px" filterable remote reserve-keyword
+          placeholder="请输入菜单关键字，点击选中即可跳转" :remote-method="remoteMethod" @change="goPage"
+        >
           <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </ElSelect>
 
-        <br />
-        <ElTree :data="nav_arr" size="large" :props="{
-          children: 'children',
-          label: 'title'
-        }" accordion class="w-full self-start" @node-click="(n: NavArrItem) => goPage(n.component)" />
+        <br>
+        <ElTree
+          :data="nav_arr" size="large" :props="{
+            children: 'children',
+            label: 'title',
+          }" accordion class="w-full self-start" @node-click="(n: NavArrItem) => goPage(n.component)"
+        />
       </div>
     </template>
   </YoungCmdPopup>

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

@@ -5,20 +5,21 @@
  * @Description:
 -->
 <script lang="ts" setup>
-const { avatar, nick, cookie } = storeToRefs(useUserStore());
+const { avatar, nick, cookie } = storeToRefs(useUserStore())
 
-const loginOut = () => {
+function loginOut() {
   showDialog({
     title: '温馨提示',
     message: '确认退出登录？',
-    showCancelButton: true
+    showCancelButton: true,
   }).then(() => {
-    // @ts-ignore
-    cookie.value = undefined;
-    navigateTo(`/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`);
-  }).catch(() => null);
-};
+    // @ts-expect-error
+    cookie.value = undefined
+    navigateTo(`/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`)
+  }).catch(() => null)
+}
 </script>
+
 <template>
   <ElDropdown class="avatar-container" trigger="click">
     <div class="inline-flex justify-center items-center mx-2 hover:cursor-pointer">
@@ -27,7 +28,9 @@ const loginOut = () => {
         <div class="text-xl i-noto-v1-man-technologist-light-skin-tone" />
       </ElAvatar>
 
-      <div class="text-sm ml-2">{{ nick }}</div>
+      <div class="text-sm ml-2">
+        {{ nick }}
+      </div>
       <div class="mr-2 text-sm i-ion-md-arrow-dropdown" />
     </div>
     <template #dropdown>

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

@@ -5,83 +5,93 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { isMobile } from '@bluesyoung/utils';
-import type { FormInstance } from 'element-plus';
+import { isMobile } from '@bluesyoung/utils'
+import type { FormInstance } from 'element-plus'
 
-type Props = {
-  onDestroy?: Function;
-};
+interface Props {
+  onDestroy?: Function
+}
 
 const props = withDefaults(defineProps<Props>(), {
   onDestroy: () => console.log('为了节省性能，此时应该销毁dom'),
-});
+})
 
-const showPopup = ref(false);
+const showPopup = ref(false)
 
-const show = () => {
-  showPopup.value = true;
-};
+function show() {
+  showPopup.value = true
+}
 
-const hide = () => {
-  showPopup.value = false;
-  props.onDestroy();
-};
+function hide() {
+  showPopup.value = false
+  props.onDestroy()
+}
 
 const form = reactive<LoginForm>({
   mobile: '',
   vercode: '',
   password: '',
-});
+})
 
-const { cookie } = storeToRefs(useUserStore());
+const { cookie } = storeToRefs(useUserStore())
 
-const formRef = ref<FormInstance>();
-const sure = () => {
+const formRef = ref<FormInstance>()
+function sure() {
   formRef.value?.validate(async (valid) => {
     if (valid) {
-      await apis.post.changePassword(form);
-      hide();
+      await apis.post.changePassword(form)
+      hide()
       await showDialog({
-        message: '密码修改成功，请重新登录'
+        message: '密码修改成功，请重新登录',
       })
-      // @ts-ignore
-      cookie.value = undefined;
-      const redirect = location.pathname === '/login' ? '/' : encodeURIComponent(location.href.replace(location.origin, ''));
-      navigateTo(`/login?redirect=${redirect}`);
+      // @ts-expect-error
+      cookie.value = undefined
+      const redirect = location.pathname === '/login' ? '/' : encodeURIComponent(location.href.replace(location.origin, ''))
+      navigateTo(`/login?redirect=${redirect}`)
     }
-  });
-};
+  })
+}
 
 defineExpose({
-  show
-});
+  show,
+})
 </script>
 
 <template>
   <ElDialog v-model="showPopup" title="修改密码" :before-close="hide" width="430px" lt-sm="!w-[96%]">
     <template #default>
       <ElForm ref="formRef" :model="form">
-        <ElFormItem prop="mobile" :rules="[
-          { required: true, trigger: 'blur', message: '请输入手机号' },
-          { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) }
-        ]" class="mt-20px">
+        <ElFormItem
+          prop="mobile" :rules="[
+            { required: true, trigger: 'blur', message: '请输入手机号' },
+            { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) },
+          ]" class="mt-20px"
+        >
           <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
         </ElFormItem>
         <ElFormItem prop="vercode" :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
           <YoungCodeInput v-model.trim="form.vercode" :tel="form.mobile" />
         </ElFormItem>
-        <ElFormItem prop="password" :rules="[
-          { required: true, trigger: 'blur', message: '请输入密码' },
-          { min: 8, max: 16, trigger: 'blur', message: '请输入8-16位字符！' }
-        ]">
-          <ElInput type="password" v-model.trim="form.password" minlength="8" maxlength="16" placeholder="请输入密码"
-            class="!h-52px" clearable show-password @keyup.enter="sure" />
+        <ElFormItem
+          prop="password" :rules="[
+            { required: true, trigger: 'blur', message: '请输入密码' },
+            { min: 8, max: 16, trigger: 'blur', message: '请输入8-16位字符！' },
+          ]"
+        >
+          <ElInput
+            v-model.trim="form.password" type="password" minlength="8" maxlength="16" placeholder="请输入密码"
+            class="!h-52px" clearable show-password @keyup.enter="sure"
+          />
         </ElFormItem>
       </ElForm>
     </template>
     <template #footer>
-      <ElButton @click="hide">取消</ElButton>
-      <ElButton type="primary" @click="sure">确认</ElButton>
+      <ElButton @click="hide">
+        取消
+      </ElButton>
+      <ElButton type="primary" @click="sure">
+        确认
+      </ElButton>
     </template>
   </ElDialog>
 </template>