create-young-proj 0.8.0 → 0.10.0

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>

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

@@ -5,48 +5,54 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungSlideVerify } from '@bluesyoung/ui-vue3';
-import { useVerifyCode } from '@bluesyoung/ui-vue3-element-plus';
-import { isNumber } from '@bluesyoung/utils';
-type Props = {
-  modelValue: string;
-  tel: string;
-  maxlength?: number;
-};
+import { YoungSlideVerify } from '@bluesyoung/ui-vue3'
+import { useVerifyCode } from '@bluesyoung/ui-vue3-element-plus'
+import { isNumber } from '@bluesyoung/utils'
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: string): void;
-  (e: 'enter'): void;
-}>();
+interface Props {
+  modelValue: string
+  tel: string
+  maxlength?: number
+}
 
 const props = withDefaults(defineProps<Props>(), {
-  maxlength: 6
-});
+  maxlength: 6,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void
+  (e: 'enter'): void
+}>()
 
 const canGet = computed(() => {
-  return props.tel.length === 11;
-});
+  return props.tel.length === 11
+})
 
 const {
   getCode,
   tip,
   showSlider,
   pass,
-  cancel
+  cancel,
 } = useVerifyCode(async () => {
-  await apis.get.sendCode(props.tel);
-  ElMessage.success('短信已发送至您的手机，请注意查收！');
-});
-
+  await apis.get.sendCode(props.tel)
+  ElMessage.success('短信已发送至您的手机，请注意查收！')
+})
 </script>
+
 <template>
   <div class="w-full">
-    <ElInput :model-value="modelValue" :maxlength="maxlength" @update:model-value="(e) => emit('update:modelValue', e)"
-      class="!h-52px" placeholder="请输入验证码" @keyup.enter="emit('enter')">
+    <ElInput
+      :model-value="modelValue" :maxlength="maxlength" class="!h-52px"
+      placeholder="请输入验证码" @update:model-value="(e) => emit('update:modelValue', e)" @keyup.enter="emit('enter')"
+    >
       <template #suffix>
-        <ElLink v-if="isNumber(+tip)" type="primary" :disabled="!canGet" :underline="false" @click="getCode">{{ tip }}
+        <ElLink v-if="isNumber(+tip)" type="primary" :disabled="!canGet" :underline="false" @click="getCode">
+          {{ tip }}
         </ElLink>
-        <div v-else>{{ tip }}</div>
+        <div v-else>
+          {{ tip }}
+        </div>
       </template>
     </ElInput>
     <YoungSlideVerify :show="showSlider" @success="pass" @close="cancel" />

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

@@ -5,8 +5,9 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { isHttpUrl } from '@bluesyoung/utils';
-defineProps<{ to: string }>();
+import { isHttpUrl } from '@bluesyoung/utils'
+
+defineProps<{ to: string }>()
 </script>
 
 <template>

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

@@ -7,7 +7,7 @@
 <template>
   <div class="w-100vw h-100vh flex justify-center items-center bg-[#333] opacity-80 fixed top-0 z-999999">
     <svg class="nuxt-spa-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80">
-      <path d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567"></path>
+      <path d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567" />
     </svg>
   </div>
 </template>

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

@@ -5,7 +5,7 @@
  * @Description:
 -->
 <script setup lang="ts">
-const fullYear = new Date().getFullYear();
+const fullYear = new Date().getFullYear()
 </script>
 
 <template>

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

@@ -5,17 +5,19 @@
  * @Description:
 -->
 <script lang="ts" setup>
-const { isCollapse } = storeToRefs(useNavStore());
+const { isCollapse } = storeToRefs(useNavStore())
 
-const title = window.__YOUNG_ENV__.NUXT_PUBLIC_TITLE;
-const logo = window.__YOUNG_ENV__.NUXT_PUBLIC_LOGIN_LOGO;
+const title = window.__YOUNG_ENV__.NUXT_PUBLIC_TITLE
+const logo = window.__YOUNG_ENV__.NUXT_PUBLIC_LOGIN_LOGO
 </script>
 
 <template>
   <div class="logo-container flex-center">
     <NuxtLink to="/">
-      <img class="logo" alt="logo" :src="logo" />
-      <h1 class="title" v-if="!(isCollapse || WindowSize['lt-lg'])">{{ title }}</h1>
+      <img class="logo" alt="logo" :src="logo">
+      <h1 v-if="!(isCollapse || WindowSize['lt-lg'])" class="title">
+        {{ title }}
+      </h1>
     </NuxtLink>
   </div>
 </template>

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

@@ -1,12 +1,12 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 11:55:27
- * @LastEditTime: 2023-08-25 16:49:08
+ * @LastEditTime: 2023-09-06 16:03:36
  * @Description:
 -->
 <template>
   <main class="app-main-height w-full">
-    <NuxtPage ref="page" :keepalive="!$route.meta.noCache" />
+    <NuxtPage :keepalive="!$route.meta.noCache" />
   </main>
 </template>
 

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

@@ -5,9 +5,9 @@
  * @Description:
 -->
 <script lang="ts" setup>
-const { isCollapse } = storeToRefs(useNavStore());
+const { isCollapse } = storeToRefs(useNavStore())
 
-const collapseHandler = () => {
+function collapseHandler() {
   if (WindowSize['lt-lg']) {
     /**
      * 触发 Ctrl + K 事件
@@ -19,20 +19,23 @@ const collapseHandler = () => {
       cancelable: true,
       composed: true,
       view: window,
-    });
+    })
 
-    document.body.dispatchEvent(event);
-  } else {
-    isCollapse.value = !isCollapse.value;
+    document.body.dispatchEvent(event)
   }
-};
+  else {
+    isCollapse.value = !isCollapse.value
+  }
+}
 </script>
 
 <template>
   <div class="nav-bar-container flex justify-between">
     <div class="left-panel">
-      <div class="fold-unfold i-ep-expand" :class="[isCollapse ? '' : 'rotate-180']"
-        :title="`${(isCollapse ? '展开' : '收起')}菜单`" @click="collapseHandler" />
+      <div
+        class="fold-unfold i-ep-expand" :class="[isCollapse ? '' : 'rotate-180']"
+        :title="`${(isCollapse ? '展开' : '收起')}菜单`" @click="collapseHandler"
+      />
     </div>
     <div class="right-panel">
       <TopSearch />

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

@@ -5,7 +5,7 @@
  * @Description:
 -->
 <script lang="ts" setup>
-const { isCollapse, nav_arr } = storeToRefs(useNavStore());
+const { isCollapse, nav_arr } = storeToRefs(useNavStore())
 </script>
 
 <template>
@@ -13,9 +13,11 @@ const { isCollapse, nav_arr } = storeToRefs(useNavStore());
     <LayoutLogo />
 
     <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="click" :collapse-transition="false">
-        <LayoutSubMenu :menuList="nav_arr" />
+      <ElMenu
+        background-color="#001529" text-color="hsla(0,0%,100%,.65)" active-text-color="#fff" unique-opened
+        :collapse="isCollapse || WindowSize['lt-lg']" menu-trigger="click" :collapse-transition="false"
+      >
+        <LayoutSubMenu :menu-list="nav_arr" />
       </ElMenu>
     </ElScrollbar>
   </div>

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

@@ -5,22 +5,21 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { randomId } from '@bluesyoung/utils';
+import { randomId } from '@bluesyoung/utils'
 
 const props = withDefaults(defineProps<{
-  menuList?: NavArrItem[];
+  menuList?: NavArrItem[]
 }>(), {
-  menuList: () => []
-});
+  menuList: () => [],
+})
 
-const randomKey = randomId();
-const visibleMenu = computed(() => props.menuList.filter((n) => +n.visible === 1));
-const { isCollapse } = storeToRefs(useNavStore());
-const collapseMenu = () => {
-  if (WindowSize['lt-lg']) {
-    isCollapse.value = true;
-  }
-};
+const randomKey = randomId()
+const visibleMenu = computed(() => props.menuList.filter(n => +n.visible === 1))
+const { isCollapse } = storeToRefs(useNavStore())
+function collapseMenu() {
+  if (WindowSize['lt-lg'])
+    isCollapse.value = true
+}
 </script>
 
 <template>
@@ -32,7 +31,7 @@ const collapseMenu = () => {
         </ElIcon>
         <span>{{ subItem.title }}</span>
       </template>
-      <LayoutSubMenu :menuList="subItem.children" />
+      <LayoutSubMenu :menu-list="subItem.children" />
     </ElSubMenu>
     <ElMenuItem v-else :index="subItem.component + randomKey + index">
       <YoungLink :to="subItem.component" @click="collapseMenu">

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

@@ -1,70 +1,72 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 17:05:40
- * @LastEditTime: 2023-09-04 09:27:21
+ * @LastEditTime: 2023-09-06 16:07:49
  * @Description:
 -->
 <script lang="ts" setup>
-import type { RouteLocationNormalized, RouteRecordRaw } from '.nuxt/vue-router';
+import type { RouteLocationNormalized, RouteRecordRaw } from '#vue-router'
 
-const route = useRoute();
-const tagsState = useTagsStore();
+const route = useRoute()
+const tagsState = useTagsStore()
 
-const { visitedViews } = storeToRefs(tagsState);
+const { visitedViews } = storeToRefs(tagsState)
 
-const tabClick = (e: any) => {
-  const currentName = e.paneName;
-  if (isActive(currentName)) {
-    return;
-  }
-  navigateTo(currentName);
-};
+function tabClick(e: any) {
+  const currentName = e.paneName
+  if (isActive(currentName))
+    return
 
-const isActive = (view: RouteLocationNormalized) => view.path === route.path;
-const isAffix = (route: RouteLocationNormalized | RouteRecordRaw) => route?.meta?.affix ?? false;
+  navigateTo(currentName)
+}
 
-const toLastView = (visitedViews: RouteLocationNormalized[]) => {
-  const lastView = visitedViews.slice(-1)[0];
-  if (lastView) {
-    navigateTo(lastView.fullPath);
-  }
-};
+const isActive = (view: RouteLocationNormalized) => view.path === route.path
+const isAffix = (route: RouteLocationNormalized | RouteRecordRaw) => route?.meta?.affix ?? false
+
+function toLastView(visitedViews: RouteLocationNormalized[]) {
+  const lastView = visitedViews.slice(-1)[0]
+  if (lastView)
+    navigateTo(lastView.fullPath)
+}
 
-const removeTab = (currentName: any) => {
-  const to = visitedViews.value.find((r) => r.path === currentName as string);
+function removeTab(currentName: any) {
+  const to = visitedViews.value.find(r => r.path === currentName as string)
   if (to) {
-    tagsState.delView(to);
-    isActive(to) && toLastView(visitedViews.value);
+    tagsState.delView(to)
+    isActive(to) && toLastView(visitedViews.value)
   }
 
-  if (visitedViews.value.length === 0) {
-    navigateTo('/');
-  }
-};
+  if (visitedViews.value.length === 0)
+    navigateTo('/')
+}
 
-const closeCurrentTab = () => {
-  removeTab(route.path);
-};
+function closeCurrentTab() {
+  removeTab(route.path)
+}
 
-const closeOtherTab = () => {
-  const currentName = route.path;
-  const to = visitedViews.value.find((r) => r.path === currentName as string);
-  to && tagsState.delOtherViews(to);
+function closeOtherTab() {
+  const currentName = route.path
+  const to = visitedViews.value.find(r => r.path === currentName as string)
+  to && tagsState.delOtherViews(to)
 }
 
-const closeAllTab = () => {
-  tagsState.delAllViews();
-  navigateTo('/');
-};
+function closeAllTab() {
+  tagsState.delAllViews()
+  navigateTo('/')
+}
 </script>
 
 <template>
   <div class="tabs-bar-container">
     <div class="tabs-content">
-      <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)">
+      <ElTabs
+        v-if="visitedViews.length > 0" type="card" :model-value="$route.path" @tab-click="tabClick"
+        @tab-remove="removeTab"
+      >
+        <ElTabPane
+          v-for="item in visitedViews" :key="item.path" type="card" :path="item.path"
+          :label="item.meta.title as string" :name="item.path" :closable="!isAffix(item)"
+        >
           <template #label>
             {{ item.meta.title }}
           </template>

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

@@ -4,23 +4,23 @@
  * @LastEditTime: 2023-07-26 11:56:53
  * @Description:
  */
-import { useHttp } from '@bluesyoung/http';
-import { useGet, usePost, usePatch, useDelete } from './apis';
+import { useHttp } from '@bluesyoung/http'
+import { useDelete, useGet, usePatch, usePost } from './apis'
 
-export const startLoading = () => {
-  const { isLoading } = storeToRefs(useNavStore());
-  isLoading.value = true;
-};
+export function startLoading() {
+  const { isLoading } = storeToRefs(useNavStore())
+  isLoading.value = true
+}
 
-export const endLoading = () => {
-  const { isLoading } = storeToRefs(useNavStore());
-  isLoading.value = false;
-};
+export function endLoading() {
+  const { isLoading } = storeToRefs(useNavStore())
+  isLoading.value = false
+}
 
 const http = useHttp<{
-  code: number;
-  data: any;
-  msg: string;
+  code: number
+  data: any
+  msg: string
 }>({
   timeout: -1,
   loading: {
@@ -28,8 +28,8 @@ const http = useHttp<{
     end: endLoading,
   },
   fail: (err: any) => {
-    console.log('🚀 ~ file: api.ts:28 ~ err:', err);
-    const { cookie } = storeToRefs(useUserStore());
+    console.log('🚀 ~ file: api.ts:28 ~ err:', err)
+    const { cookie } = storeToRefs(useUserStore())
     if (err?.response?.status === 401) {
       showDialog({
         title: '温馨提示',
@@ -37,19 +37,19 @@ const http = useHttp<{
         showCancelButton: true,
       })
         .then(() => {
-          cookie.value && (cookie.value.uuid = '');
+          cookie.value && (cookie.value.uuid = '')
           navigateTo(
             `/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`,
-          );
+          )
         })
         .catch(() => {
           navigateTo({
             path: '/',
             replace: true,
-          });
-        });
+          })
+        })
 
-      throw err;
+      throw err
     }
 
     if (typeof err === 'string') {
@@ -57,48 +57,50 @@ const http = useHttp<{
       showNotify({
         type: 'danger',
         message: err,
-      });
+      })
     }
     if ((err as any) instanceof Error) {
       showNotify({
         type: 'danger',
         // 接口出错
         message:
-          err?.response?.data?.message ||
-          err?.response?.data?.msg ||
-          err?.response?.data ||
-          err.message ||
-          '网络错误！',
-      });
+          err?.response?.data?.message
+          || err?.response?.data?.msg
+          || err?.response?.data
+          || err.message
+          || '网络错误！',
+      })
     }
 
-    throw err;
+    throw err
   },
   headers: {
     getAuthHeaders: () => {
-      const { token } = storeToRefs(useUserStore());
+      const { token } = storeToRefs(useUserStore())
       return {
         Authorization: `Bearer ${token.value}`,
-      };
+      }
     },
   },
   checkFn: ({ code, msg, data }) => {
     if (code === 0) {
       // 通用成功
-      return data;
-    } else if (code === -1) {
+      return data
+    }
+    else if (code === -1) {
       // 通用失败
-      throw msg;
-    } else {
+      throw msg
+    }
+    else {
       // 特殊状态码
-      throw code;
+      throw code
     }
   },
-});
+})
 
 export const apis = http.__mixin__({
   get: useGet(http),
   post: usePost(http),
   patch: usePatch(http),
   delete: useDelete(http),
-});
+})