create-young-proj 0.6.1 → 0.7.0

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

@@ -0,0 +1,87 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-24 14:21:55
+ * @LastEditTime: 2023-07-24 14:59:34
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isMobile } from '@bluesyoung/utils';
+import type { FormInstance } from 'element-plus';
+
+type Props = {
+  onDestroy?: Function;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  onDestroy: () => console.log('为了节省性能，此时应该销毁dom'),
+});
+
+const showPopup = ref(false);
+
+const show = () => {
+  showPopup.value = true;
+};
+
+const hide = () => {
+  showPopup.value = false;
+  props.onDestroy();
+};
+
+const form = reactive<LoginForm>({
+  mobile: '',
+  vercode: '',
+  password: '',
+});
+
+const { cookie } = storeToRefs(useUserStore());
+
+const formRef = ref<FormInstance>();
+const sure = () => {
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      await apis.post.changePassword(form);
+      hide();
+      await showDialog({
+        message: '密码修改成功，请重新登录'
+      })
+      // @ts-ignore
+      cookie.value = undefined;
+      const redirect = location.pathname === '/login' ? '/' : encodeURIComponent(location.href.replace(location.origin, ''));
+      navigateTo(`/login?redirect=${redirect}`);
+    }
+  });
+};
+
+defineExpose({
+  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>
+        <ElFormItem prop="vercode" :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
+          <YoungCodeInput v-model="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>
+      </ElForm>
+    </template>
+    <template #footer>
+      <ElButton @click="hide">取消</ElButton>
+      <ElButton type="primary" @click="sure">确认</ElButton>
+    </template>
+  </ElDialog>
+</template>

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

@@ -0,0 +1,60 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-19 13:52:58
+ * @LastEditTime: 2023-07-24 11:57:12
+ * @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;
+};
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void;
+  (e: 'enter'): void;
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 6
+});
+
+const canGet = computed(() => {
+  return props.tel.length === 11;
+});
+
+const {
+  getCode,
+  tip,
+  showSlider,
+  pass,
+  cancel
+} = useVerifyCode(async () => {
+  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')">
+      <template #suffix>
+        <ElLink v-if="isNumber(+tip)" type="primary" :disabled="!canGet" :underline="false" @click="getCode">{{ tip }}
+        </ElLink>
+        <div v-else>{{ tip }}</div>
+      </template>
+    </ElInput>
+    <YoungSlideVerify :show="showSlider" @success="pass" @close="cancel" />
+  </div>
+</template>
+
+<style>
+.vue-puzzle-vcode {
+  z-index: 10001 !important;
+}
+</style>

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

@@ -0,0 +1,23 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 14:47:12
+ * @LastEditTime: 2023-07-26 10:39:40
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isHttpUrl } from '@bluesyoung/utils';
+defineProps<{ to: string }>();
+</script>
+
+<template>
+  <a v-if="isHttpUrl(to)" :href="to" target="_blank" rel="noopener" referrerpolicy="no-referrer" class="w-full">
+    <div class="flex items-center">
+      <slot />
+    </div>
+  </a>
+  <NuxtLink v-else :to="to" class="w-full">
+    <div class="flex items-center">
+      <slot />
+    </div>
+  </NuxtLink>
+</template>

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

@@ -0,0 +1,39 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-07 11:57:22
+ * @LastEditTime: 2023-07-26 10:42:39
+ * @Description:
+-->
+<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>
+    </svg>
+  </div>
+</template>
+
+<style>
+.nuxt-spa-loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%)
+}
+
+.nuxt-spa-loading>path {
+  fill: none;
+  stroke: #00DC82;
+  stroke-width: 4px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 128;
+  stroke-dashoffset: 128;
+  animation: nuxt-spa-loading-move 3s linear infinite
+}
+
+@keyframes nuxt-spa-loading-move {
+  100% {
+    stroke-dashoffset: -128
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 12:03:00
+ * @LastEditTime: 2023-07-24 10:05:41
+ * @Description:
+-->
+<script setup lang="ts">
+const fullYear = new Date().getFullYear();
+</script>
+
+<template>
+  <div class="layout-footer-container">
+    &copy;{{ fullYear }} - Current
+    By&nbsp;<a href="https://gitee.com/BluesYoung-web" target="_blank">BluesYoung-web</a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $base-app-footer-height;
+  padding: 0 20px;
+  color: rgb(0 0 0 / 45%);
+  background: var(--el-color-white);
+  border-top: 1px dashed #dcdfe6;
+}
+</style>

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

@@ -0,0 +1,52 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 12:21:02
+ * @LastEditTime: 2023-07-28 16:53:30
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse } = storeToRefs(useNavStore());
+
+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>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.logo-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  // padding-left: 24px;
+  height: 60px;
+  overflow: hidden;
+  line-height: 60px;
+  background: transparent;
+
+  .title {
+    display: inline-block;
+    margin-left: 12px;
+    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    color: #fff;
+    vertical-align: middle;
+  }
+
+  .logo {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 11:55:27
+ * @LastEditTime: 2023-07-28 17:15:07
+ * @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" />
+  </main>
+</template>
+
+<style scoped lang="scss">
+.app-main-height {
+  min-height: $base-app-main-height;
+  background-color: inherit;
+  padding: 20px;
+
+  @screen lt-lg {
+    & {
+      min-height: -webkit-calc($base-app-main-height + $base-tabs-bar-height) !important;
+      min-height: calc($base-app-main-height + $base-tabs-bar-height) !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,77 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 16:38:20
+ * @LastEditTime: 2023-07-28 16:37:04
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse } = storeToRefs(useNavStore());
+
+const collapseHandler = () => {
+  if (WindowSize['lt-lg']) {
+    /**
+     * 触发 Ctrl + K 事件
+     */
+    const event = new KeyboardEvent('keydown', {
+      key: 'k',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      view: window,
+    });
+
+    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>
+    <div class="right-panel">
+      <TopSearch />
+      <ScreenFull />
+      <TopUser />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nav-bar-container {
+  position: relative;
+  height: $base-nav-bar-height;
+  padding-right: $base-padding;
+  padding-left: $base-padding;
+  overflow: hidden;
+  user-select: none;
+  background: $base-color-white;
+  box-shadow: $base-box-shadow;
+
+  .left-panel {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    height: 60px;
+
+    .fold-unfold {
+      font-size: 18px;
+      color: $base-color-gray;
+      cursor: pointer;
+    }
+  }
+
+  .right-panel {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+    height: $base-nav-bar-height;
+  }
+}
+</style>

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

@@ -0,0 +1,90 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 12:25:23
+ * @LastEditTime: 2023-07-28 17:39:48
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse, nav_arr } = storeToRefs(useNavStore());
+</script>
+
+<template>
+  <div class="layout-sidebar-container" :class="{ 'is-collapse': isCollapse }">
+    <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>
+    </ElScrollbar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@mixin active {
+  &:hover {
+    color: $base-color-white;
+  }
+
+  &.is-active {
+    color: $base-color-white;
+    background-color: var(--el-color-primary) !important;
+  }
+}
+
+.layout-sidebar-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $base-z-index;
+  width: $base-left-menu-width;
+  height: 100vh;
+  background: $base-menu-background;
+  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
+  transition: width $base-transition-time;
+
+  @screen lt-lg {
+    & {
+      @apply hidden;
+      // @apply block;
+      // width: $base-left-menu-width-min;
+    }
+  }
+
+  &.is-collapse {
+    width: $base-left-menu-width-min;
+    border-right: 0;
+
+    // @screen lt-lg {
+    //   & {
+    //     @apply hidden;
+    //   }
+    // }
+  }
+
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
+
+    .el-menu {
+      border: 0;
+    }
+
+    .el-menu-item,
+    .el-submenu__title {
+      height: $base-menu-item-height;
+      overflow: hidden;
+      line-height: $base-menu-item-height;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: middle;
+    }
+
+    .el-menu-item {
+      @include active;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,46 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 14:06:48
+ * @LastEditTime: 2023-07-28 15:59:48
+ * @Description:
+-->
+<script lang="ts" setup>
+import { randomId } from '@bluesyoung/utils';
+
+const props = withDefaults(defineProps<{
+  menuList?: NavArrItem[];
+}>(), {
+  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;
+  }
+};
+</script>
+
+<template>
+  <template v-for="(subItem, index) in visibleMenu" :key="subItem.component + randomKey + index">
+    <ElSubMenu v-if="subItem.children && subItem.children.length > 0" :index="subItem.component + randomKey + index">
+      <template #title>
+        <ElIcon>
+          <div v-if="subItem.icon" :class="subItem.icon" />
+        </ElIcon>
+        <span>{{ subItem.title }}</span>
+      </template>
+      <LayoutSubMenu :menuList="subItem.children" />
+    </ElSubMenu>
+    <ElMenuItem v-else :index="subItem.component + randomKey + index">
+      <YoungLink :to="subItem.component" @click="collapseMenu">
+        <ElIcon>
+          <div v-if="subItem.icon" :class="subItem.icon" />
+        </ElIcon>
+        {{ subItem.title }}
+      </YoungLink>
+    </ElMenuItem>
+  </template>
+</template>