create-young-proj 0.8.0 → 0.9.0

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),
-});
+})

package/template-nuxt-admin/composables/apis/delete.ts

@@ -4,17 +4,17 @@
  * @LastEditTime: 2023-07-26 11:56:39
  * @Description:
  */
-import type { YoungHttp, YoungHttpAuthReq } from '@bluesyoung/http';
+import type { YoungHttp, YoungHttpAuthReq } from '@bluesyoung/http'
 
-export const useDelete = (http: YoungHttp) => {
-  const AuthReq: YoungHttpAuthReq = (args) => http.authReq({ method: 'DELETE', ...args });
+export function useDelete(http: YoungHttp) {
+  const AuthReq: YoungHttpAuthReq = args => http.authReq({ method: 'DELETE', ...args })
 
   const del = async (url: string, ids: string) => {
     await AuthReq({
       url,
       data: { ids },
-    });
-  };
+    })
+  }
 
   return {
     /**
@@ -33,5 +33,5 @@ export const useDelete = (http: YoungHttp) => {
      * 删除角色
      */
     deleteRole: async (ids: string) => del('/role/delete/batch', ids),
-  };
-};
+  }
+}

package/template-nuxt-admin/composables/apis/get.ts

@@ -4,18 +4,18 @@
  * @LastEditTime: 2023-07-26 11:58:32
  * @Description:
  */
-import type { YoungHttp, YoungHttpFreeReq, YoungHttpAuthReq } from '@bluesyoung/http';
+import type { YoungHttp, YoungHttpAuthReq, YoungHttpFreeReq } from '@bluesyoung/http'
 
-export const useGet = (http: YoungHttp) => {
-  const FreeReq: YoungHttpFreeReq = (args) => http.freeReq({ method: 'GET', ...args });
-  const AuthReq: YoungHttpAuthReq = (args) => http.authReq({ method: 'GET', ...args });
+export function useGet(http: YoungHttp) {
+  const FreeReq: YoungHttpFreeReq = args => http.freeReq({ method: 'GET', ...args })
+  const AuthReq: YoungHttpAuthReq = args => http.authReq({ method: 'GET', ...args })
 
   return {
     /**
      * 发送短信验证码
      */
     sendCode: async (phone: string) => {
-      showToast(`todo: ${phone}发送短信验证码`);
+      showToast(`todo: ${phone}发送短信验证码`)
       // await FreeReq({ url: '/v1/user/sendCode', params: { phone } });
     },
     /**
@@ -24,14 +24,14 @@ export const useGet = (http: YoungHttp) => {
     getUserMenuTree: async () => {
       return AuthReq<Record<number, NavArrItem>>({
         url: '/menu/tree',
-      });
+      })
     },
     /**
      * 获取角色列表
      */
     getRoleList: async (params: Partial<BaseQuery> = {}) =>
       AuthReq<PagesData>({
-        url: `/role/list`,
+        url: '/role/list',
         params,
       }),
     /**
@@ -64,8 +64,8 @@ export const useGet = (http: YoungHttp) => {
      */
     getRoleMenuTree: async (id: number) =>
       AuthReq<{
-        list: NavArrItem[];
-        accessIds: number[];
+        list: NavArrItem[]
+        accessIds: number[]
       }>({
         url: `/menu/all/${id}`,
       }),
@@ -74,10 +74,10 @@ export const useGet = (http: YoungHttp) => {
      */
     getRoleApis: async (id: number) =>
       AuthReq<{
-        list: ApiItem[];
-        accessIds: number[];
+        list: ApiItem[]
+        accessIds: number[]
       }>({
         url: `/api/all/category/${id}`,
       }),
-  };
-};
+  }
+}

package/template-nuxt-admin/composables/apis/index.ts

@@ -4,7 +4,7 @@
  * @LastEditTime: 2023-07-26 11:56:20
  * @Description:
  */
-export * from './get';
-export * from './post';
-export * from './patch';
-export * from './delete';
+export * from './get'
+export * from './post'
+export * from './patch'
+export * from './delete'