create-young-proj 0.7.0 → 0.9.0

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

@@ -5,14 +5,14 @@
  * @Description:
  */
 export const useUserStore = defineStore('useUserStore', () => {
-  const cookie = useLocalStorage<UserLoginRes>('token', {} as UserLoginRes);
+  const cookie = useLocalStorage<UserLoginRes>('token', {} as UserLoginRes)
 
-  const hasLogin = computed(() => !!cookie.value?.uuid);
-  const avatar = computed(() => cookie.value?.headimgurl);
-  const nick = computed(() => cookie.value?.nickname);
-  const token = computed(() => cookie.value?.token);
+  const hasLogin = computed(() => !!cookie.value?.uuid)
+  const avatar = computed(() => cookie.value?.headimgurl)
+  const nick = computed(() => cookie.value?.nickname)
+  const token = computed(() => cookie.value?.token)
 
-  const SaveFlag = useLocalStorage('n天免登', true);
+  const SaveFlag = useLocalStorage('n天免登', true)
 
   return {
     cookie,
@@ -21,9 +21,8 @@ export const useUserStore = defineStore('useUserStore', () => {
     nick,
     token,
     SaveFlag,
-  };
-});
+  }
+})
 
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
-}
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))

package/template-nuxt-admin/error.vue

@@ -1,53 +1,61 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-06-12 15:00:07
- * @LastEditTime: 2023-07-31 12:10:16
+ * @LastEditTime: 2023-09-06 16:05:20
  * @Description:
 -->
 <script lang="ts" setup>
-import type { NuxtError } from '#app';
+import type { NuxtError } from '#app'
 
 const props = defineProps<{
-  error: NuxtError;
-}>();
+  error: NuxtError
+}>()
 
-let timer: NodeJS.Timer;
+let timer: NodeJS.Timeout
 
-const i = ref(5);
+const i = ref(5)
 
-const clear = () => {
-  clearError();
-  clearInterval(timer);
-  location.replace('/');
-};
+function clear() {
+  clearError()
+  clearInterval(timer)
+  location.replace('/')
+}
 
 const NotShowError = computed(() => {
-  return props.error.message === 'Request failed with status code 401';
-});
+  return props.error.message === 'Request failed with status code 401'
+})
 
 onMounted(() => {
-  if (process.server) {
-    return;
-  }
-  console.log(props.error, props.error.statusCode);
+  if (process.server)
+    return
+
+  console.log(props.error, props.error.statusCode)
   if (process.dev) {
-    console.log('开发模式，不自动清理');
-    return;
+    console.log('开发模式，不自动清理')
+    return
   }
   timer = setInterval(() => {
-    i.value--;
-    if (i.value === 0) {
-      clear();
-    }
-  }, 1e3);
-});
+    i.value--
+    if (i.value === 0)
+      clear()
+  }, 1e3)
+})
 </script>
+
 <template>
   <div v-if="!NotShowError" 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.message || error.statusMessage || '出错啦~' }}</div>
+    <div class="text-5xl my-6">
+      {{ error.statusCode }}
+    </div>
+    <div class="text-lg my-2">
+      {{ error.message || error.statusMessage || '出错啦~' }}
+    </div>
 
-    <div class="mb-2">{{ i }}s 后自动跳转首页</div>
-    <ElButton @click="clear">立即返回首页</ElButton>
+    <div class="mb-2">
+      {{ i }}s 后自动跳转首页
+    </div>
+    <ElButton @click="clear">
+      立即返回首页
+    </ElButton>
   </div>
 </template>

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

@@ -5,42 +5,43 @@
  * @Description:
 -->
 <script lang="ts" setup>
-const { isCollapse } = storeToRefs(useNavStore());
-const { enter, isSupported } = useFullscreen();
+const { isCollapse } = storeToRefs(useNavStore())
+const { enter, isSupported } = useFullscreen()
 
-const fullTip = useLocalStorage('全屏提示', false);
+const fullTip = useLocalStorage('全屏提示', false)
 
 onMounted(() => {
-  const { innerWidth, innerHeight } = window;
+  const { innerWidth, innerHeight } = window
   if (innerHeight > innerWidth) {
-    isCollapse.value = true;
+    isCollapse.value = true
 
-    if (fullTip.value) {
-      return;
-    }
+    if (fullTip.value)
+      return
 
     if (!isSupported.value) {
       showDialog({
         title: '推荐使用场景',
         message: '系统浏览器 + 横屏使用',
-      }).finally(() => fullTip.value = true);
-    } else {
+      }).finally(() => fullTip.value = true)
+    }
+    else {
       showDialog({
         title: '推荐使用场景',
         message: '系统浏览器 + 全屏模式 + 横屏使用',
-        confirmButtonText: '进入全屏'
+        confirmButtonText: '进入全屏',
       }).then(async () => {
         try {
-          await enter();
-        } catch (e) {
+          await enter()
+        }
+        catch (e) {
           showDialog({
-            message: '您的设备暂不支持全屏功能，请解锁系统方向锁定后横屏使用！'
-          });
+            message: '您的设备暂不支持全屏功能，请解锁系统方向锁定后横屏使用！',
+          })
         }
-      }).catch(() => null).finally(() => fullTip.value = true);;
+      }).catch(() => null).finally(() => fullTip.value = true)
     }
   }
-});
+})
 </script>
 
 <template>

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

@@ -1,39 +1,50 @@
 /*
  * @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) => {
-  if (to.matched.length === 0) {
-    throw createError({ message: '页面不存在', statusCode: 404 });
+  if (to.matched.length === 0)
+    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();
+  const { addView } = useTagsStore()
 
   // 页面无需登录
   if (to.meta.auth === false) {
-    addView(to);
-    return;
+    changeTitle()
+    addView(to)
+    return
   }
 
-  const { hasLogin } = storeToRefs(useUserStore());
-  const { nav_arr } = storeToRefs(useNavStore());
-
   if (!hasLogin.value && to.path !== '/login') {
     // 页面需要登录，但是未登录
-    showFailToast('未登录或登录过期，请重新登录');
-    return navigateTo(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
-  } else if (hasLogin.value && to.path === '/login') {
+    showFailToast('未登录或登录过期，请重新登录')
+    return navigateTo(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
+  }
+  else if (hasLogin.value && to.path === '/login') {
     // 已登录进入登录页
-    return navigateTo('/');
-  } else {
-    nav_arr.value.length === 0 && (await generateNavData());
+    return navigateTo('/')
+  }
+  else {
+    nav_arr.value.length === 0 && (await generateNavData())
     if (hasPermission(to.path)) {
-      addView(to);
-      return;
-    } else {
-      throw createError({ message: '无权限，请联系系统管理员', statusCode: 403 });
+      changeTitle()
+      addView(to)
+    }
+    else {
+      throw createError({ message: '无权限，请联系系统管理员', statusCode: 403 })
     }
   }
-});
+})

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

@@ -1,10 +1,10 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-05-25 19:45:20
- * @LastEditTime: 2023-07-28 17:35:11
+ * @LastEditTime: 2023-09-06 16:13:06
  * @Description:
  */
-import { resolve } from 'node:path';
+import { resolve } from 'node:path'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -56,7 +56,7 @@ export default defineNuxtConfig({
     // native: true,
     // js 实现，仅指令生效 v-lazy-load
     // directiveOnly: true,
-    // @ts-ignore js 实现的占位图
+    // @ts-expect-error js 实现的占位图
     defaultImage: '/image_placeholder.svg',
   },
 
@@ -66,9 +66,10 @@ export default defineNuxtConfig({
     },
   },
 
-  devtools: {
-    enabled: true,
-  },
+  // 开发调试工具，按需启用
+  // devtools: {
+  //   enabled: true,
+  // },
 
   modules: [
     '@vueuse/nuxt',
@@ -98,4 +99,4 @@ export default defineNuxtConfig({
       },
     },
   },
-});
+})

package/template-nuxt-admin/package.json

@@ -1,44 +1,64 @@
 {
   "name": "nuxt-app",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "preview": "nuxt preview --host",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@bluesyoung/casdoor-auth": "^0.1.0",
+    "@bluesyoung/http": "^0.3.4",
+    "@bluesyoung/ui-vue3": "^0.1.1",
+    "@bluesyoung/ui-vue3-element-plus": "0.11.6",
+    "@bluesyoung/utils": "0.2.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "c12": "^1.4.2",
+    "file-saver": "^2.0.5",
+    "http-proxy": "^1.18.1",
+    "jszip": "^3.10.1",
+    "md5": "^2.3.0",
+    "qrcode": "^1.5.3",
+    "sortablejs": "^1.15.0",
+    "vue-cropper": "^1.0.9"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^0.41.0",
     "@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/md5": "^2.3.2",
+    "@types/node": "20.5.9",
     "@types/qrcode": "^1.5.1",
-    "@unocss/nuxt": "^0.53.5",
+    "@unocss/nuxt": "^0.55.6",
     "@vant/nuxt": "^1.0.2",
     "@vueuse/nuxt": "^10.2.1",
+    "add": "^2.0.6",
     "dayjs": "^1.11.9",
     "element-plus": "^2.3.8",
-    "nuxt": "^3.6.5",
+    "eslint": "^8.48.0",
+    "lint-staged": "^14.0.1",
+    "nuxt": "^3.7.1",
     "nuxt-lazy-load": "^3.0.4",
     "pinia": "^2.1.4",
     "sass": "^1.64.0",
+    "simple-git-hooks": "^2.9.0",
+    "typescript": "^5.2.2",
     "vant": "^4.6.2"
   },
-  "dependencies": {
-    "@bluesyoung/http": "0.3.1",
-    "@bluesyoung/ui-vue3": "^0.1.1",
-    "@bluesyoung/ui-vue3-element-plus": "0.11.1",
-    "@bluesyoung/utils": "^0.1.0",
-    "c12": "^1.4.2",
-    "file-saver": "^2.0.5",
-    "http-proxy": "^1.18.1",
-    "jszip": "^3.10.1",
-    "qrcode": "^1.5.3",
-    "sortablejs": "^1.15.0",
-    "vue-cropper": "^0.6.2"
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
   }
 }

package/template-nuxt-admin/pages/home/[id].vue

@@ -8,15 +8,15 @@
 definePageMeta({
   title: '工作台',
   auth: false,
-  noCache: true
-});
+  noCache: true,
+})
 
-const { nick } = storeToRefs(useUserStore());
-const { nav_arr } = storeToRefs(useNavStore());
+const { nick } = storeToRefs(useUserStore())
+const { nav_arr } = storeToRefs(useNavStore())
 
 onMounted(() => {
-  nav_arr.value.length === 0 && generateNavData();
-});
+  nav_arr.value.length === 0 && generateNavData()
+})
 </script>
 
 <template>

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

@@ -6,13 +6,13 @@
 -->
 <script setup lang="ts">
 definePageMeta({
-  noCache: true
-});
+  noCache: true,
+})
 
 navigateTo({
   path: '/home/index',
-  replace: true
-});
+  replace: true,
+})
 </script>
 
 <template>

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

@@ -1,19 +1,19 @@
 <!--
  * @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>
-import { isMobile } from '@bluesyoung/utils';
-import type { FormInstance } from 'element-plus';
+import { isMobile } from '@bluesyoung/utils'
+import type { FormInstance } from 'element-plus'
 
 definePageMeta({
   auth: false,
   title: '用户登录',
   noCache: true,
-  layout: 'blank'
-});
+  layout: 'blank',
+})
 
 const {
   NUXT_PUBLIC_LOGIN_LOGO: LoginLogo,
@@ -21,100 +21,117 @@ const {
   NUXT_PUBLIC_TITLE: Title,
   NUXT_PUBLIC_SUB_TITLE: SubTitle,
   NUXT_PUBLIC_SLOGAN: SloGan,
-  NUXT_PUBLIC_CURRENT_VERSION: Version
-} = window.__YOUNG_ENV__;
+  NUXT_PUBLIC_CURRENT_VERSION: Version,
+} = window.__YOUNG_ENV__
 
-const { SaveFlag, hasLogin, cookie } = storeToRefs(useUserStore());
+const { SaveFlag, hasLogin, cookie } = storeToRefs(useUserStore())
 
-const loginType = ref<'account' | 'code'>('account');
+const loginType = ref<'account' | 'code'>('account')
 
 const form = reactive<LoginForm>({
   mobile: '',
   vercode: '',
   password: '',
-});
+})
 
-const formRef = ref<FormInstance>();
+const formRef = ref<FormInstance>()
 
-const loginHandler = () => {
+function loginHandler() {
   formRef.value?.validate(async (valid: boolean) => {
     try {
       if (valid) {
-        const { enter } = useFullscreen();
-        const { width, height } = useWindowSize();
+        const { enter } = useFullscreen()
+        const { width, height } = useWindowSize()
 
-        const data = await apis.post.login(form);
+        const data = await apis.post.login(form)
         if (data) {
-          cookie.value = data;
-          height.value > width.value && enter();
-          showSuccessToast('登录成功！');
-          navigateTo('/');
+          cookie.value = data
+          height.value > width.value && enter()
+          showSuccessToast('登录成功！')
+          navigateTo('/')
         }
-      } else {
-        ElMessage.error('请仔细检查输入内容');
-        return;
       }
-    } catch (error) {
-      console.error(error);
+      else {
+        ElMessage.error('请仔细检查输入内容')
+      }
+    }
+    catch (error) {
+      console.error(error)
     }
-  });
-};
+  })
+}
 
 onMounted(() => {
   if (SaveFlag.value && hasLogin.value) {
     navigateTo({
       path: '/',
-      replace: true
-    });
+      replace: true,
+    })
   }
-});
+})
 </script>
 
 <template>
-  <img :src="LoginBg" class="absolute object-center object-cover w-100vw h-100vh blur-6 brightness-50" />
+  <img :src="LoginBg" class="absolute object-center object-cover w-100vw h-100vh blur-6 brightness-50">
   <div class="flex flex-col items-center login-container pt-6%">
     <div class="w-80px h-80px">
-      <img class="h-full" :src="LoginLogo" referrerpolicy="no-referrer" />
+      <img class="h-full" :src="LoginLogo" referrerpolicy="no-referrer">
     </div>
-    <div class="title">{{ Title }}</div>
-    <div v-if="SubTitle" v-html="SubTitle" class="sub-title" />
+    <div class="title">
+      {{ Title }}
+    </div>
+    <div v-if="SubTitle" class="sub-title" v-html="SubTitle" />
 
     <ElCard class="w-430px mt-3%" lt-sm="w-[96%] mx-[2%]">
       <ElForm ref="formRef" :model="form">
         <VanTabs v-model:active="loginType" size="large" @change="formRef?.resetFields?.()">
           <VanTab name="account" title="账密登录">
-            <ElFormItem prop="mobile" :rules="[
-              { 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 />
+            <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 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="请输入密码"
-                class="!h-52px" clearable show-password @keyup.enter="loginHandler" />
+            <ElFormItem
+              v-if="loginType === 'account'" 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="loginHandler"
+              />
             </ElFormItem>
           </VanTab>
           <VanTab name="code" title="短信登录">
-            <ElFormItem prop="mobile" :rules="[
-              { 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 />
+            <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 v-if="loginType === 'code'" prop="vercode"
-              :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
-              <YoungCodeInput v-model="form.vercode" :tel="form.mobile" @enter="loginHandler" />
+            <ElFormItem
+              v-if="loginType === 'code'" prop="vercode"
+              :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]"
+            >
+              <YoungCodeInput v-model.trim="form.vercode" :tel="form.mobile" @enter="loginHandler" />
             </ElFormItem>
           </VanTab>
         </VanTabs>
 
         <ElFormItem>
           <div class="flex justify-between w-full">
-            <ElCheckbox v-model="SaveFlag">三天之内免登录</ElCheckbox>
-            <ElButton v-show="loginType === 'account'" type="warning" @click="useChangePassword" link>忘记密码？</ElButton>
+            <ElCheckbox v-model="SaveFlag">
+              三天之内免登录
+            </ElCheckbox>
+            <ElButton v-show="loginType === 'account'" type="warning" link @click="useChangePassword">
+              忘记密码？
+            </ElButton>
           </div>
         </ElFormItem>
       </ElForm>
@@ -128,7 +145,9 @@ onMounted(() => {
       {{ SloGan }}
     </div>
     <div class="content-wrapper">
-      <div class="mb-5% text-[#c0c0c0] text-16px">{{ Version }}</div>
+      <div class="mb-5% text-[#c0c0c0] text-16px">
+        {{ Version }}
+      </div>
     </div>
   </div>
 </template>
@@ -176,4 +195,3 @@ onMounted(() => {
   }
 }
 </style>
-