create-young-proj 0.8.0 → 0.9.0

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

@@ -5,46 +5,46 @@
  * @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 { 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;
-    }
+    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;
-  };
+    document.title = (to.meta.title as string) || window.__YOUNG_ENV__.NUXT_PUBLIC_TITLE
+  }
 
-  const { addView } = useTagsStore();
+  const { addView } = useTagsStore()
 
   // 页面无需登录
   if (to.meta.auth === false) {
-    changeTitle();
-    addView(to);
-    return;
+    changeTitle()
+    addView(to)
+    return
   }
 
   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)) {
-      changeTitle();
-      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 --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview --host",
-    "postinstall": "nuxt prepare"
+    "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.8.2",
     "@pinia/nuxt": "^0.4.11",
     "@types/file-saver": "^2.0.5",
-    "@types/node": "20.5.7",
+    "@types/md5": "^2.3.2",
+    "@types/node": "20.5.9",
     "@types/qrcode": "^1.5.1",
-    "@unocss/nuxt": "^0.55.4",
+    "@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.7.0",
+    "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.4",
-    "@bluesyoung/ui-vue3": "^0.1.1",
-    "@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",
-    "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

@@ -5,15 +5,15 @@
  * @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,91 +21,104 @@ 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">
+            <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.trim="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">
+            <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: '请输入验证码' }]">
+            <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>
@@ -113,8 +126,12 @@ onMounted(() => {
 
         <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>
-

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

@@ -5,24 +5,24 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { useFormMode, YoungDialog, YoungTablePro, YoungPagination, YoungSelect, useQuery, YoungSearchForm } from '@bluesyoung/ui-vue3-element-plus';
-import type { TableDataItem, TableHeadItem, SelectOptionItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus';
-import { deepClone } from '@bluesyoung/utils';
-import { ElButton, ElTag } from 'element-plus';
+import { YoungDialog, YoungPagination, YoungSearchForm, YoungSelect, YoungTablePro, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
+import type { SelectOptionItem, TableDataItem, TableHeadItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus'
+import { deepClone } from '@bluesyoung/utils'
+import { ElButton, ElTag } from 'element-plus'
 
 definePageMeta({
-  title: '接口管理'
-});
+  title: '接口管理',
+})
 
-interface Form extends ApiItem { op?: any; };
+interface Form extends ApiItem { op?: any };
 const FORM_TEMP: Form = {
   id: 0,
   path: '',
   desc: '',
   method: 'POST',
   category: '',
-  roleIds: []
-};
+  roleIds: [],
+}
 const {
   isAdd,
   isEdit,
@@ -32,33 +32,33 @@ const {
   clear,
   form,
   formRef,
-  validForm
+  validForm,
 } = useFormMode<Form>(FORM_TEMP, {
   addCbk: async () => {
-    const res = await validForm() as boolean;
+    const res = await validForm() as boolean
     if (res) {
-      const v = deepClone(form.value);
-      await apis.post.addApiItem(v);
-      ElMessage.success('新增成功！');
+      const v = deepClone(form.value)
+      await apis.post.addApiItem(v)
+      ElMessage.success('新增成功！')
     }
-    return res;
+    return res
   },
   modCbk: async () => {
-    const res = await validForm() as boolean;
+    const res = await validForm() as boolean
     if (res) {
-      const v = deepClone(form.value);
-      await apis.patch.changeApiItem(v);
-      ElMessage.success('修改成功！');
+      const v = deepClone(form.value)
+      await apis.patch.changeApiItem(v)
+      ElMessage.success('修改成功！')
     }
-    return res;
+    return res
   },
   delCbk: async (row) => {
-    await apis.delete.deleteApi(row.id.toString());
-    ElMessage.success('删除成功！');
-    query.value.pageNum = 1;
+    await apis.delete.deleteApi(row.id.toString())
+    ElMessage.success('删除成功！')
+    query.value.pageNum = 1
   },
   cgEffect: () => getList(),
-});
+})
 const tableHead: TableHeadItem<Form>[] = [
   { prop: 'id', label: '接口ID' },
   { prop: 'desc', label: '接口描述' },
@@ -66,41 +66,45 @@ const tableHead: TableHeadItem<Form>[] = [
   { prop: 'path', label: '接口路径' },
   { prop: 'creator', label: '创建信息' },
   {
-    prop: 'method', label: '接口方法', render: (row) => h(ElTag, {
+    prop: 'method',
+    label: '接口方法',
+    render: row => h(ElTag, {
       effect: 'dark',
-      type: MethodObj[row.method]
+      type: MethodObj[row.method],
     },
-      {
-        default: () => row.method
-      }
-    )
+    {
+      default: () => row.method,
+    },
+    ),
   },
   {
-    prop: 'op', label: '操作', render: (row) => h('div', [
+    prop: 'op',
+    label: '操作',
+    render: row => h('div', [
       h(ElButton, { type: 'primary', link: true, onClick: () => edit(row) }, { default: () => '编辑' }),
-      h(ElButton, { type: 'danger', link: true, onClick: () => del(row) }, { default: () => '删除' })
-    ])
-  }
-];
-const tableData = ref<TableDataItem<Form>[]>([]);
+      h(ElButton, { type: 'danger', link: true, onClick: () => del(row) }, { default: () => '删除' }),
+    ]),
+  },
+]
+const tableData = ref<TableDataItem<Form>[]>([])
 
-const getList = async () => {
-  const { list: role_list } = await apis.get.getRoleList({ noPagination: true });
+async function getList() {
+  const { list: role_list } = await apis.get.getRoleList({ noPagination: true })
   roleList.value = (role_list || []).map((item: RoleItem) => {
     return {
       label: item.name,
-      value: item.id
-    };
-  });
+      value: item.id,
+    }
+  })
 
-  const { list, pageNum, pageSize, total } = await apis.get.getApiList(query.value);
-  tableData.value = deepClone(list || []);
-  query.value.pageNum = +pageNum || 1;
-  query.value.pageSize = +pageSize || 50;
-  query.value.total = +total || 0;
-};
+  const { list, pageNum, pageSize, total } = await apis.get.getApiList(query.value)
+  tableData.value = deepClone(list || [])
+  query.value.pageNum = +pageNum || 1
+  query.value.pageSize = +pageSize || 50
+  query.value.total = +total || 0
+}
 
-type Query = BaseQuery & Partial<Form>;
+type Query = BaseQuery & Partial<Form>
 const { query, reset } = useQuery<Query>(
   {
     pageNum: 1,
@@ -109,7 +113,7 @@ const { query, reset } = useQuery<Query>(
     path: '',
   },
   getList,
-);
+)
 const queryScheme: YoungSearchScheme<Query> = {
   path: {
     type: 'input',
@@ -118,27 +122,32 @@ const queryScheme: YoungSearchScheme<Query> = {
       placeholder: '请输入接口路径',
     },
   },
-};
+}
 
-const roleList = ref<SelectOptionItem<number>[]>([]);
+const roleList = ref<SelectOptionItem<number>[]>([])
 
-useTabReOpen(getList);
+useTabReOpen(getList)
 </script>
+
 <template>
   <ElCard>
     <YoungSearchForm v-model="query" :search-scheme="queryScheme" :on-search="getList" :on-reset="reset">
       <template #btns>
-        <ElButton type="success" @click="isAdd = true">添加接口</ElButton>
+        <ElButton type="success" @click="isAdd = true">
+          添加接口
+        </ElButton>
       </template>
     </YoungSearchForm>
   </ElCard>
 
-  <br />
+  <br>
 
   <ElCard>
     <YoungTablePro :table-data="tableData" :table-head="tableHead" />
-    <YoungPagination v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="query.total"
-      @page-change="getList" />
+    <YoungPagination
+      v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="query.total"
+      @page-change="getList"
+    />
   </ElCard>
   <YoungDialog :is-add="isAdd" :is-edit="isEdit" :diff-form="form" width="520px" @sure="sure" @clear="clear">
     <template #body>
@@ -150,11 +159,15 @@ useTabReOpen(getList);
           <ElInput v-model.trim="form.desc" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="请求方法">
-          <YoungSelect v-model="form.method" class="!w-300px"
-            :options="Object.keys(MethodObj).map((item) => ({ label: item, value: item }))" />
+          <YoungSelect
+            v-model="form.method" class="!w-300px"
+            :options="Object.keys(MethodObj).map((item) => ({ label: item, value: item }))"
+          />
         </ElFormItem>
-        <ElFormItem label="接口路径" prop="path"
-          :rules="{ message: '请填写合法的接口路径, eg: /user/list', trigger: 'blur', validator: (_: any, v: string) => /\/(.*)\/(.*)/.test(v) }">
+        <ElFormItem
+          label="接口路径" prop="path"
+          :rules="{ message: '请填写合法的接口路径, eg: /user/list', trigger: 'blur', validator: (_: any, v: string) => /\/(.*)\/(.*)/.test(v) }"
+        >
           <ElInput v-model.trim="form.path" class="!w-300px" />
         </ElFormItem>
         <ElFormItem label="关联角色">