create-young-proj 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-young-proj",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "create project from template",
   "main": "index.mjs",
   "bin": {
@@ -32,21 +32,18 @@
   "author": "BluesYoung-web",
   "license": "MIT",
   "devDependencies": {
-    "bumpp": "^8.2.1",
-    "changelogen": "^0.4.0",
+    "@types/node": "16",
     "cross-spawn": "^7.0.3",
     "kolorist": "^1.6.0",
     "minimist": "^1.2.7",
     "prompts": "^2.4.2",
     "rome": "^10.0.1",
-    "unbuild": "^1.0.1",
-    "@types/node": "16"
+    "unbuild": "^1.0.1"
   },
   "scripts": {
     "dev": "unbuild --stub",
     "build": "unbuild",
     "format": "rome format . --write",
-    "release": "changelogen && bumpp --no-push",
     "push": "pnpm publish --access public"
   }
 }

package/template-nuxt-admin/README.md

@@ -1,5 +1,27 @@
 # 基于 Nuxt 3 的后台
 
+## 配套 git 提交工具
+
+### 安装
+
+```bash
+npm i -g young-commit
+```
+
+### 使用
+
+- 正常使用 `git add` 将要提交的文件添加到暂存区
+
+- 提交步骤使用 `yc` 或者 `young-commit` 进行提交
+
+#### 命令选项
+
+- `yc -i` 初始化(仅刚创建项目时使用，会自动执行 `git init`)
+
+- `yc -r` 进行版本发布，会根据之前的提交及最近一个 `tag` 生成 `changelog`
+
+> **受限于 Nuxt3 的 keep-alive 机制，setup 直接执行 / onMounted 包裹的，需要替换为 useTabReOpen 包裹的**
+
 ## 使用响应式布局
 
 兼容 `PC` 端与移动端

package/template-nuxt-admin/_gitignore

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

package/template-nuxt-admin/_npmrc

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

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-24 14:21:55
- * @LastEditTime: 2023-07-24 14:59:34
+ * @LastEditTime: 2023-08-02 10:38:16
  * @Description:
 -->
 <script lang="ts" setup>
@@ -65,16 +65,16 @@ defineExpose({
           { required: true, trigger: 'blur', message: '请输入手机号' },
           { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) }
         ]" class="mt-20px">
-          <ElInput v-model="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+          <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="form.vercode" :tel="form.mobile" />
+          <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="form.password" minlength="8" maxlength="16" placeholder="请输入密码"
+          <ElInput type="password" v-model.trim="form.password" minlength="8" maxlength="16" placeholder="请输入密码"
             class="!h-52px" clearable show-password @keyup.enter="sure" />
         </ElFormItem>
       </ElForm>

package/template-nuxt-admin/components/layout/Main.vue

@@ -1,27 +1,12 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 11:55:27
- * @LastEditTime: 2023-07-28 17:15:07
+ * @LastEditTime: 2023-08-25 16:49:08
  * @Description:
 -->
-<script lang="ts" setup>
-const { cachedViews, visitedViews } = storeToRefs(useTagsStore());
-const route = useRoute();
-const name = computed(() => route.name);
-const isCached = computed(() => {
-  // 无需缓存的界面
-  if (route.meta.noCache) {
-    return false;
-  }
-  const arr = visitedViews.value.map((view) => view.name);
-  // 已经缓存，或者首次打开(防止二次初始化)
-  return cachedViews.value.includes(name.value) || !arr.includes(name.value as unknown as string);
-});
-</script>
-
 <template>
   <main class="app-main-height w-full">
-    <NuxtPage :keepalive="isCached" />
+    <NuxtPage ref="page" :keepalive="!$route.meta.noCache" />
   </main>
 </template>
 

package/template-nuxt-admin/components/layout/SideBar.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 12:25:23
- * @LastEditTime: 2023-07-28 17:39:48
+ * @LastEditTime: 2023-09-04 09:24:44
  * @Description:
 -->
 <script lang="ts" setup>
@@ -14,8 +14,7 @@ const { isCollapse, nav_arr } = storeToRefs(useNavStore());
 
     <ElScrollbar>
       <ElMenu background-color="#001529" text-color="hsla(0,0%,100%,.65)" active-text-color="#fff" unique-opened
-        :collapse="isCollapse || WindowSize['lt-lg']" :menu-trigger="WindowSize['lt-lg'] ? 'click' : 'hover'"
-        :collapse-transition="false">
+        :collapse="isCollapse || WindowSize['lt-lg']" menu-trigger="click" :collapse-transition="false">
         <LayoutSubMenu :menuList="nav_arr" />
       </ElMenu>
     </ElScrollbar>

package/template-nuxt-admin/components/layout/TabsBar.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 17:05:40
- * @LastEditTime: 2023-07-23 17:00:42
+ * @LastEditTime: 2023-09-04 09:27:21
  * @Description:
 -->
 <script lang="ts" setup>
@@ -61,7 +61,7 @@ const closeAllTab = () => {
 <template>
   <div class="tabs-bar-container">
     <div class="tabs-content">
-      <ElTabs v-if="visitedViews.length > 0" type="card" v-model="$route.path" @tab-click="tabClick"
+      <ElTabs v-if="visitedViews.length > 0" type="card" :model-value="$route.path" @tab-click="tabClick"
         @tab-remove="removeTab">
         <ElTabPane v-for="item in visitedViews" type="card" :key="item.path" :path="item.path"
           :label="(item.meta.title as string)" :name="item.path" :closable="!isAffix(item)">

package/template-nuxt-admin/composables/tags.ts

@@ -1,31 +1,37 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-07-21 17:13:59
- * @LastEditTime: 2023-07-21 17:18:41
+ * @LastEditTime: 2023-08-25 16:49:28
  * @Description:
  */
 import type { RouteLocationNormalized } from 'vue-router';
 
-type CachedView = string | symbol | null | undefined;
+// hack nuxt3 的 keep-alive 没办法像 vue3 那样自由控制
+export const useTabReOpen = (cbk: Function = () => console.log('this tab page is reopen')) => {
+  const tagState = useTagsStore();
+  const route = useRoute();
+
+  tagState.$onAction(({ name, args, after }) => {
+    if (name === 'addToCache') {
+      if (args[0].name === route.name) {
+        after(() => cbk());
+      }
+    }
+  });
+
+  cbk();
+};
 
-interface TagsViewState {
-  /**
-   * 访问过的页面，路由对象
-   */
-  visitedViews: RouteLocationNormalized[];
-  /**
-   * 已缓存的页面名称
-   */
-  cachedViews: CachedView[];
-}
 // @ts-ignore
 export const useTagsStore = defineStore('useTagsStore', {
   state: () => {
-    const state = reactive<TagsViewState>({
-      visitedViews: [],
-      cachedViews: [],
-    });
-    return state;
+    const visitedViews = ref<RouteLocationNormalized[]>([]);
+    const cachedViews = ref<string[]>([]);
+
+    return {
+      visitedViews,
+      cachedViews,
+    };
   },
   actions: {
     /**
@@ -54,10 +60,10 @@ export const useTagsStore = defineStore('useTagsStore', {
      */
     addToCache(view: RouteLocationNormalized) {
       // 查询该标签是否已缓存
-      if (this.cachedViews.includes(view.name)) {
+      if (this.cachedViews.includes(view.name as string)) {
         null;
       } else if (!view.meta?.noCache) {
-        this.cachedViews.push(view.name);
+        this.cachedViews.push(view.name as string);
       }
     },
     /**
@@ -80,7 +86,7 @@ export const useTagsStore = defineStore('useTagsStore', {
      * 删除页面缓存
      */
     delCachedView(view: RouteLocationNormalized) {
-      const index = this.cachedViews.indexOf(view.name);
+      const index = this.cachedViews.indexOf(view.name as string);
       index > -1 && this.cachedViews.splice(index, 1);
     },
     /**

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-07-21 10:02:19
- * @LastEditTime: 2023-07-31 12:16:20
+ * @LastEditTime: 2023-08-02 14:57:03
  * @Description:
  */
 export default defineNuxtRouteMiddleware(async (to, from) => {
@@ -9,17 +9,27 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
     throw createError({ message: '页面不存在', statusCode: 404 });
   }
 
+  const { hasLogin } = storeToRefs(useUserStore());
+  const { nav_arr, flat_nav_arr } = storeToRefs(useNavStore());
+
+  const changeTitle = () => {
+    const nav = flat_nav_arr.value.find((item) => item.component === to.path);
+    if (nav && nav.title) {
+      to.meta.title = nav.title;
+    }
+
+    document.title = (to.meta.title as string) || window.__YOUNG_ENV__.NUXT_PUBLIC_TITLE;
+  };
+
   const { addView } = useTagsStore();
 
   // 页面无需登录
   if (to.meta.auth === false) {
+    changeTitle();
     addView(to);
     return;
   }
 
-  const { hasLogin } = storeToRefs(useUserStore());
-  const { nav_arr } = storeToRefs(useNavStore());
-
   if (!hasLogin.value && to.path !== '/login') {
     // 页面需要登录，但是未登录
     showFailToast('未登录或登录过期，请重新登录');
@@ -30,6 +40,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   } else {
     nav_arr.value.length === 0 && (await generateNavData());
     if (hasPermission(to.path)) {
+      changeTitle();
       addView(to);
       return;
     } else {

package/template-nuxt-admin/package.json

@@ -3,36 +3,36 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "nuxt preview --host",
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
     "@bluesyoung/logger": "^0.0.1",
     "@element-plus/nuxt": "^1.0.5",
     "@iconify/json": "^2.2.93",
-    "@nuxt/devtools": "^0.7.2",
+    "@nuxt/devtools": "^0.8.2",
     "@pinia/nuxt": "^0.4.11",
     "@types/file-saver": "^2.0.5",
-    "@types/node": "18",
+    "@types/node": "20.5.7",
     "@types/qrcode": "^1.5.1",
-    "@unocss/nuxt": "^0.53.5",
+    "@unocss/nuxt": "^0.55.4",
     "@vant/nuxt": "^1.0.2",
     "@vueuse/nuxt": "^10.2.1",
     "dayjs": "^1.11.9",
     "element-plus": "^2.3.8",
-    "nuxt": "^3.6.5",
+    "nuxt": "^3.7.0",
     "nuxt-lazy-load": "^3.0.4",
     "pinia": "^2.1.4",
     "sass": "^1.64.0",
     "vant": "^4.6.2"
   },
   "dependencies": {
-    "@bluesyoung/http": "0.3.1",
+    "@bluesyoung/http": "0.3.4",
     "@bluesyoung/ui-vue3": "^0.1.1",
-    "@bluesyoung/ui-vue3-element-plus": "0.11.1",
-    "@bluesyoung/utils": "^0.1.0",
+    "@bluesyoung/ui-vue3-element-plus": "0.11.5",
+    "@bluesyoung/utils": "^0.2.1",
     "c12": "^1.4.2",
     "file-saver": "^2.0.5",
     "http-proxy": "^1.18.1",

package/template-nuxt-admin/pages/login.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 10:03:11
- * @LastEditTime: 2023-07-28 11:06:30
+ * @LastEditTime: 2023-08-02 10:39:05
  * @Description:
 -->
 <script lang="ts" setup>
@@ -87,13 +87,13 @@ onMounted(() => {
               { required: true, trigger: 'blur', message: '请输入手机号' },
               { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) }
             ]" class="mt-20px">
-              <ElInput v-model="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+              <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
             </ElFormItem>
             <ElFormItem v-if="loginType === 'account'" prop="password" :rules="[
               { required: true, trigger: 'blur', message: '请输入密码' },
               { min: 8, max: 16, trigger: 'blur', message: '请输入8-16位字符！' }
             ]">
-              <ElInput type="password" v-model="form.password" minlength="8" maxlength="16" placeholder="请输入密码"
+              <ElInput type="password" v-model.trim="form.password" minlength="8" maxlength="16" placeholder="请输入密码"
                 class="!h-52px" clearable show-password @keyup.enter="loginHandler" />
             </ElFormItem>
           </VanTab>
@@ -102,11 +102,11 @@ onMounted(() => {
               { required: true, trigger: 'blur', message: '请输入手机号' },
               { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) }
             ]" class="mt-20px">
-              <ElInput v-model="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+              <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
             </ElFormItem>
             <ElFormItem v-if="loginType === 'code'" prop="vercode"
               :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
-              <YoungCodeInput v-model="form.vercode" :tel="form.mobile" @enter="loginHandler" />
+              <YoungCodeInput v-model.trim="form.vercode" :tel="form.mobile" @enter="loginHandler" />
             </ElFormItem>
           </VanTab>
         </VanTabs>

package/template-nuxt-admin/pages/system/api.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:44:56
- * @LastEditTime: 2023-07-31 11:36:37
+ * @LastEditTime: 2023-08-25 16:54:08
  * @Description:
 -->
 <script lang="ts" setup>
@@ -122,7 +122,7 @@ const queryScheme: YoungSearchScheme<Query> = {
 
 const roleList = ref<SelectOptionItem<number>[]>([]);
 
-getList();
+useTabReOpen(getList);
 </script>
 <template>
   <ElCard>
@@ -144,10 +144,10 @@ getList();
     <template #body>
       <ElForm ref="formRef" :model="form" label-width="100px" :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
         <ElFormItem label="分组名称" prop="category" :rules="{ required: true, message: '请填写分组名称', trigger: 'blur' }">
-          <ElInput v-model="form.category" class="!w-300px" />
+          <ElInput v-model.trim="form.category" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="接口描述" prop="desc" :rules="{ required: true, message: '请填写接口描述', trigger: 'blur' }">
-          <ElInput v-model="form.desc" class="!w-300px" />
+          <ElInput v-model.trim="form.desc" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="请求方法">
           <YoungSelect v-model="form.method" class="!w-300px"
@@ -155,7 +155,7 @@ getList();
         </ElFormItem>
         <ElFormItem label="接口路径" prop="path"
           :rules="{ message: '请填写合法的接口路径, eg: /user/list', trigger: 'blur', validator: (_: any, v: string) => /\/(.*)\/(.*)/.test(v) }">
-          <ElInput v-model="form.path" class="!w-300px" />
+          <ElInput v-model.trim="form.path" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="关联角色">
           <YoungSelect v-model="form.roleIds" multiple placeholder="请选择角色" class="!w-300px" :options="roleList" />

package/template-nuxt-admin/pages/system/menuList.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:45:17
- * @LastEditTime: 2023-07-31 14:21:34
+ * @LastEditTime: 2023-08-25 16:55:00
  * @Description:
 -->
 <script lang="ts" setup>
@@ -66,10 +66,10 @@ const topMenuOption = ref<Partial<NavArrItem>[]>([]);
 /**
  * 生成节点映射
  */
-const nodeMap = new Map<string | number, NavArrItem>();
+const nodeMap = new Map<string, NavArrItem>();
 const generateNodeMap = (list: NavArrItem[]) => {
   for (const node of list) {
-    nodeMap.set(node.id, node);
+    nodeMap.set(node.id.toString(), node);
     if (node.children && node.children?.length > 0) {
       generateNodeMap(node.children);
     }
@@ -261,7 +261,7 @@ const tableHead: TableHeadItem<NavArrItem>[] = [
   }
 ];
 
-getList();
+useTabReOpen(getList);
 </script>
 
 <template>
@@ -287,10 +287,10 @@ getList();
               @update:model-value="(e: any) => form.parentId = e[e.length - 1]" />
           </ElFormItem>
           <ElFormItem label="英文名称" prop="name" :rules="{ required: true, message: '请输入英文名', trigger: 'blur' }">
-            <ElInput v-model="form.name" placeholder="请输入英文名" />
+            <ElInput v-model.trim="form.name" placeholder="请输入英文名" />
           </ElFormItem>
           <ElFormItem label="标题" prop="title" :rules="{ required: true, message: '请输入页面标题', trigger: 'blur' }">
-            <ElInput v-model="form.title" placeholder="请输入页面标题" />
+            <ElInput v-model.trim="form.title" placeholder="请输入页面标题" />
           </ElFormItem>
           <ElFormItem label="图标">
             <ElSelect v-model="form.icon" class="select_icon" placeholder="请选择图标">
@@ -303,7 +303,7 @@ getList();
             </ElSelect>
           </ElFormItem>
           <ElFormItem label="排序">
-            <ElInput v-model.number="form.sort" />
+            <ElInputNumber v-model.number="form.sort" />
           </ElFormItem>
           <ElFormItem label="是否显示">
             <ElRadioGroup v-model="form.visible">
@@ -314,7 +314,7 @@ getList();
           <ElFormItem label="路径" prop="component" :rules="form.parentId === 0 ? {} :
             { message: '请输入合法的路径, eg: /path/page', trigger: 'blur', validator: (_: any, v: string) => v.trim() === '' || /\/(.*)\/(.*)/.test(v) }
             ">
-            <ElInput v-model="form.component" />
+            <ElInput v-model.trim="form.component" />
           </ElFormItem>
         </ElForm>
       </template>

package/template-nuxt-admin/pages/system/role.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:45:39
- * @LastEditTime: 2023-07-31 11:05:49
+ * @LastEditTime: 2023-08-25 16:55:10
  * @Description:
 -->
 <script lang="ts" setup>
@@ -27,7 +27,7 @@ const { showPriority, menu } = useRoleMenu();
 
 const { showApi, api } = useRoleApi();
 
-getList();
+useTabReOpen(getList);
 </script>
 
 <template>
@@ -64,13 +64,13 @@ getList();
       <ElForm ref="baseFormRef" :model="base.form" label-width="120px"
         :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
         <ElFormItem label="角色名称(中文)" prop="name" :rules="[{ required: true, message: '请填写角色名称', trigger: 'blur' }]">
-          <ElInput v-model="base.form.name" class="!w-300px" />
+          <ElInput v-model.trim="base.form.name" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="关键字(英文)" prop="keyword" :rules="[{ required: true, message: '请填写关键字', trigger: 'blur' }]">
-          <ElInput v-model="base.form.keyword" class="!w-300px" />
+          <ElInput v-model.trim="base.form.keyword" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="角色描述">
-          <ElInput v-model="base.form.desc" class="!w-300px" />
+          <ElInput v-model.trim="base.form.desc" class="!w-300px" />
         </ElFormItem>
       </ElForm>
     </template>

package/template-nuxt-admin/pages/system/user.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:46:00
- * @LastEditTime: 2023-07-31 14:39:16
+ * @LastEditTime: 2023-08-25 16:55:17
  * @Description:
 -->
 <script lang="ts" setup>
@@ -170,7 +170,7 @@ const queryScheme: YoungSearchScheme<Query> = {
 
 const roleList = ref<SelectOptionItem<number>[]>([]);
 
-getList();
+useTabReOpen(getList);
 </script>
 <template>
   <ElCard>
@@ -193,20 +193,20 @@ getList();
     <template #body>
       <ElForm ref="formRef" :model="form" label-width="100px" :label-position="WindowSize['lt-lg'] ? 'top' : 'left'">
         <ElFormItem label="用户名" prop="username" :rules="{ required: true, message: '请输用户名', trigger: 'blur' }">
-          <ElInput v-model="form.username" class="!w-300px" />
+          <ElInput v-model.trim="form.username" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="昵称" prop="nickname" :rules="{ required: true, message: '请输昵称(用于右上角展示)', trigger: 'blur' }">
-          <ElInput v-model="form.nickname" class="!w-300px" />
+          <ElInput v-model.trim="form.nickname" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="手机号" prop="mobile" :rules="{ required: true, message: '请输手机号', trigger: 'blur' }">
-          <ElInput v-model="form.mobile" :maxlength="11" class="!w-300px" />
+          <ElInput v-model.trim="form.mobile" :maxlength="11" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="角色">
           <YoungSelect v-model="form.roleId" placeholder="请选择角色" :options="roleList" />
         </ElFormItem>
         <ElFormItem v-if="isAdd" label="初始密码" prop="initPassword"
           :rules="{ required: true, message: '请输初始密码', trigger: 'blur' }">
-          <ElInput v-model="form.initPassword" class="!w-300px" />
+          <ElInput v-model.trim="form.initPassword" class="!w-300px" />
         </ElFormItem>
       </ElForm>
     </template>