create-young-proj 0.7.0 → 0.9.0

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

@@ -1,87 +1,97 @@
 <!--
  * @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>
-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">
-          <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 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="请输入密码"
-            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,27 +1,12 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 11:55:27
- * @LastEditTime: 2023-07-28 17:15:07
+ * @LastEditTime: 2023-09-06 16:03:36
  * @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 :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

@@ -1,11 +1,11 @@
 <!--
  * @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>
-const { isCollapse, nav_arr } = storeToRefs(useNavStore());
+const { isCollapse, nav_arr } = storeToRefs(useNavStore())
 </script>
 
 <template>
@@ -13,10 +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="WindowSize['lt-lg'] ? 'click' : 'hover'"
-        :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-07-23 17:00:42
+ * @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" v-model="$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>