create-young-proj 0.0.1 → 0.1.1

package/template-vue-admin/src/layouts/default/components/Logo.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2020-12-10 14:10:09
+ * @LastEditTime: 2023-01-05 16:06:32
+ * @Description: 侧边栏 logo 组件
+-->
+<template>
+  <RouterLink v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
+    <div class="i-dashicons-admin-home sidebar-logo-hide text-white" />
+  </RouterLink>
+  <RouterLink v-else key="expand" class="sidebar-logo-link" to="/">
+    <div class="w-full text-center">{{ title }}</div>
+    <code
+      class="text-sm bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-transparent font-900 animate-pulse">Ctrl + K 呼出快捷菜单</code>
+  </RouterLink>
+</template>
+<script lang="ts" setup>
+import { isCollapse } from '@/stores';
+const title = window.__YOUNG_VITE_ENV__.VITE_TITLE ?? '小黑后台';
+</script>

package/template-vue-admin/src/layouts/default/components/Menu.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-10-26 09:24:29
+ * @LastEditTime: 2023-01-06 16:42:20
+ * @Description: 
+-->
+<script lang="ts" setup>
+import { useNavStore } from '@/stores';
+import Link from './Link.vue';
+const { NavArr } = useNavStore();
+const activeIndex = ref('0');
+const haldleSelected = (index: string) => {
+  activeIndex.value = index;
+};
+</script>
+<template>
+  <ElMenu :default-active="activeIndex" background-color="rgb(48, 65, 86)" text-color="#fff" mode="vertical"
+    style="border-right: none;" router @select="haldleSelected">
+    <div v-for="(nav, index) in NavArr" :key="index + 'adskjgkjer'">
+      <ElSubMenu v-if="NavArr[index]?.children?.filter((n) => +n.visible === 1).length"
+        :index="index + 'adskjgkjer' + nav.component">
+        <template #title>
+          <Link v-if="nav.component" :to="nav.component">
+          <span class="ml-1">{{ nav.title }}</span>
+          </Link>
+          <span v-else class="ml-1">{{ nav.title }}</span>
+        </template>
+        <ElMenuItemGroup>
+          <ElMenuItem style="padding: 0;" v-for="(sub, idx) in NavArr[index].children?.filter((n) => +n.visible === 1)"
+            :key="index + '-' + idx + 'fdjahsuy'" :index="sub.component" :route="sub.component">
+            <template #title>
+              <Link class="block w-full text-left box-border pl-[40px] pr-[20px]" :to="sub.component">
+              <span class="ml-1">{{ sub.title }}</span>
+              </Link>
+            </template>
+          </ElMenuItem>
+        </ElMenuItemGroup>
+      </ElSubMenu>
+      <ElMenuItem v-else :index="nav.component">
+        <template #title>
+          <Link :to="nav.component">
+          <span class="ml-1">{{ nav.title }}</span>
+          </Link>
+        </template>
+      </ElMenuItem>
+    </div>
+  </ElMenu>
+</template>
+
+<style>
+.el-menu-item-group__title {
+  display: none;
+}
+</style>

package/template-vue-admin/src/layouts/default/components/NavSearch.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-10-26 10:08:07
+ * @LastEditTime: 2023-01-09 10:27:03
+ * @Description: 
+-->
+<script lang="ts" setup>
+import type { SelectOptionItem } from '@bluesyoung/ui-vue3-element-plus';
+import { YoungCmdPopup } from '@bluesyoung/ui-vue3';
+import { useNavStore } from '@/stores';
+
+const { FlatNavArr } = useNavStore();
+
+const options = ref<SelectOptionItem<string>[]>([]);
+const searchStr = ref('');
+const remoteMethod = (query: string) => {
+  if (query) {
+    options.value = FlatNavArr.value
+      .filter((item) => +item.visible === 1 && item.title?.toLowerCase().includes(query.toLowerCase()))
+      .map((item) => ({ label: item.title || '', value: item.component }));
+  } else {
+    options.value = [];
+  }
+};
+
+const router = useRouter();
+
+const cmdRef = ref()
+
+const goPage = (url: string) => {
+  if (url) {
+    router.push(url);
+    searchStr.value = '';
+    cmdRef.value?.hide()
+  }
+};
+</script>
+<template>
+  <YoungCmdPopup ref="cmdRef">
+    <template #default="{ el }">
+      <div class="flex flex-col items-center">
+        <div class="text-xl mb-4">
+          快捷菜单搜索：
+        </div>
+        <ElSelect :ref="el" class="w-260px" v-model="searchStr" filterable remote reserve-keyword
+          placeholder="请输入菜单关键字，快捷键 Ctrl + K" :remote-method="remoteMethod" @change="goPage">
+          <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </ElSelect>
+      </div>
+    </template>
+  </YoungCmdPopup>
+</template>

package/template-vue-admin/src/layouts/default/components/ScrollPane.vue

@@ -0,0 +1,79 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2020-12-11 11:02:54
+ * @LastEditTime: 2023-01-05 16:07:55
+ * @Description: 滚动容器
+-->
+<template>
+  <div ref="scrollWrapper" class="max-w-[calc(90vw)] flex-nowrap whitespace-nowrap overflow-x-auto"
+    @wheel.prevent="scrollHandler">
+    <span>
+      <slot />
+    </span>
+  </div>
+</template>
+<script lang="ts" setup>
+type EL = Element | null;
+/**
+ * 标签间距
+ */
+const tagSpacing = 4;
+const scrollWrapper = ref<HTMLElement>();
+// 滚动鼠标滚轮
+const scrollHandler = (e: WheelEvent) => {
+  const eventData = e.deltaY * 40;
+  const wrap = scrollWrapper.value;
+  if (wrap) {
+    wrap.scrollLeft = wrap.scrollLeft + eventData / 4;
+  }
+};
+const moveToTarget = () => {
+  if (scrollWrapper.value) {
+    // 外层包裹
+    const wrap: HTMLElement = scrollWrapper.value as any;
+    // 容器宽度
+    const containerWidth = 1704;
+    // 标签列表
+    const tagList: HTMLCollection = (wrap.firstElementChild as HTMLElement)?.children;
+
+    let firstChild: EL = null, lastChild: EL = null, targetElement: EL = null;
+    if (tagList.length > 0) {
+      firstChild = tagList[0];
+      lastChild = tagList[tagList.length - 1];
+      for (const element of Array.from(tagList)) {
+        if (Array.from(element.classList).includes('el-tag--success')) {
+          targetElement = element;
+          break;
+        }
+      }
+
+      if (firstChild === targetElement) {
+        wrap.scrollLeft = 0;
+      } else if (lastChild === targetElement) {
+        wrap.scrollLeft = wrap.scrollWidth - containerWidth;
+      } else {
+        const currentIndex = Array.from(tagList).findIndex((item) => item === targetElement);
+
+        const preElement = tagList[currentIndex - 1];
+        const nextElement = tagList[currentIndex + 1];
+        if (!preElement || !nextElement) {
+          return;
+        }
+
+        const afterNextTagOffsetLeft = (nextElement as HTMLElement).offsetLeft + (nextElement as HTMLElement).offsetWidth + tagSpacing;
+        const beforePrevTagOffsetLeft = (preElement as HTMLElement).offsetLeft - tagSpacing;
+
+        if (afterNextTagOffsetLeft > wrap.scrollLeft + containerWidth) {
+          wrap.scrollLeft = afterNextTagOffsetLeft - containerWidth;
+        } else if (beforePrevTagOffsetLeft < wrap.scrollLeft) {
+          wrap.scrollLeft = beforePrevTagOffsetLeft;
+        }
+      }
+    } else {
+      return;
+    }
+  }
+};
+// 暴露给其父级组件通过 ref 使用
+defineExpose({ moveToTarget });
+</script>

package/template-vue-admin/src/layouts/default/components/TagsView.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2020-12-11 13:35:58
+ * @LastEditTime: 2023-01-05 16:00:11
+ * @Description: 标签选项卡组件
+-->
+<template>
+  <div class="tags-view-container px-2">
+    <ScrollPane ref="scrollPane" class="tags-view-wrapper">
+      <ElTag v-for="(tag, index) in visitedViews" :key="index + 'fadsrhewioru'" effect="dark" size="large"
+        class="inline-block mx-1 my-0.2vh hover:cursor-pointer" :type="isActive(tag) ? 'success' : 'info'"
+        :closable="!tag.meta.affix && visitedViews.length > 1" @click="router.push(tag.fullPath)"
+        @close.stop="menuHandlers['closeThis'](tag)" @contextmenu.prevent="openContextMenu(tag, $event)">
+        {{ tag.meta.title }}
+      </ElTag>
+    </ScrollPane>
+
+    <YoungContextMenu v-model="showContextMenu" :menu-list="menuList" @clickItem="clickItemHandler" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { YoungContextMenu } from '@bluesyoung/ui-vue3';
+import ScrollPane from './ScrollPane.vue';
+import { storeToRefs } from 'pinia';
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import { useTagsStore } from '@/stores';
+
+const showContextMenu = ref(false);
+
+const tagsState = useTagsStore();
+const { visitedViews, cachedViews } = storeToRefs(tagsState);
+const menuList = computed(() => {
+  let baseMenu = [
+    { title: '关闭此页面', handlerName: 'closeThis' },
+    { title: '关闭其他页面', handlerName: 'closeOthers' }
+  ];
+  if (visitedViews.value.length === 1) {
+    baseMenu = [];
+  }
+  const { name } = route;
+  const s_name = selectedTag.value?.name ?? '';
+  // 当前页为激活状态才允许刷新
+  const res = (cachedViews.value.includes(s_name) && name === s_name) ? [{ title: '刷新此页面', handlerName: 'refresh' }].concat(baseMenu) : baseMenu;
+  return res;
+});
+const router = useRouter();
+const route = useRoute();
+/**
+ * 当前选中的标签
+ */
+const selectedTag = ref<RouteLocationNormalized | null>(null);
+/**
+ * 所有固定的标签(禁止关闭)
+ */
+const affixTags = ref<RouteLocationNormalized[]>([]);
+
+const isActive = (view: RouteLocationNormalized) => view.path === route.path;
+const isAffix = (route: RouteLocationNormalized | RouteRecordRaw) => route?.meta?.affix ?? false;
+
+const toLastView = (visitedViews: RouteLocationNormalized[], view: RouteLocationNormalized) => {
+  const lastView = visitedViews.slice(-1)[0];
+  if (lastView) {
+    router.push(lastView.fullPath);
+  }
+};
+
+const scrollPane = ref<any | null>(null);
+
+const moveToCurrentTag = () => {
+  nextTick(() => {
+    const SP = scrollPane.value;
+    SP?.moveToTarget?.();
+  });
+};
+
+const menuHandlers: Record<string, Function> = {
+  'refresh': () => {
+    const tag = selectedTag.value;
+    tag && tagsState.delCachedView(tag);
+  },
+  'closeThis': (tag = selectedTag.value) => {
+    if (tag) {
+      if (!isAffix(tag)) {
+        tagsState.delView(tag);
+        isActive(tag) && toLastView(visitedViews.value, tag);
+      }
+    }
+  },
+  'closeOthers': () => {
+    const tag = selectedTag.value;
+    if (tag) {
+      router.push(tag);
+      tagsState.delOtherViews(tag);
+    }
+  },
+  'closeAll': () => {
+    tagsState.delAllViews();
+    const sTag = selectedTag.value;
+    if (sTag) {
+      if (affixTags.value.some((tag) => tag.path === sTag.path)) {
+        return;
+      }
+      toLastView(visitedViews.value, sTag);
+    }
+  }
+};
+const clickItemHandler = (handler: string) => {
+  menuHandlers?.[handler]?.();
+  showContextMenu.value = false;
+};
+const openContextMenu = (tag: RouteLocationNormalized, e: MouseEvent) => {
+  nextTick(() => {
+    if (menuList.value.length === 0) {
+      return;
+    }
+    showContextMenu.value = true;
+    selectedTag.value = tag;
+  });
+};
+
+router.afterEach((to) => {
+  tagsState.addView(to);
+  moveToCurrentTag();
+});
+
+onMounted(() => {
+  tagsState.addView(route);
+});
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+}
+</style>

package/template-vue-admin/src/layouts/default/components/TopMenu.vue

@@ -0,0 +1,21 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-12-07 14:13:25
+ * @LastEditTime: 2023-01-05 16:08:30
+ * @Description: 
+-->
+<script lang="ts" setup>
+import { useNavStore, TopIndex } from '@/stores';
+
+const { TopMenu } = useNavStore();
+</script>
+<template>
+  <div>
+    <ElMenu mode="horizontal" :default-active="TopIndex" :ellipsis="(TopMenu.length > 10)">
+      <ElMenuItem v-for="(nav, index) in TopMenu" :key="index + 'fdsjakr'" :index="index + ''"
+        @click="(TopIndex = index + '')">
+        {{ nav.title }}
+      </ElMenuItem>
+    </ElMenu>
+  </div>
+</template>

package/template-vue-admin/src/layouts/default/components/UserCenter.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2020-12-10 11:30:30
+ * @LastEditTime: 2023-01-05 14:16:52
+ * @Description: 顶部导航栏组件
+-->
+<script lang="ts" setup>
+import NavSearch from './NavSearch.vue';
+import TopMenu from './TopMenu.vue';
+import { useUserStore, useNavStore, removeToken } from '@/stores';
+
+const router = useRouter();
+const { CurrUserInfo } = useUserStore();
+
+const loginOut = async () => {
+  removeToken();
+  useUserStore().reset();
+  useNavStore().reset();
+  router.replace('/base/login');
+};
+</script>
+
+<template>
+  <!-- 快捷菜单 -->
+  <NavSearch />
+  <div v-bind="$attrs" class="flex w-full justify-between px-5">
+    <!-- 顶部导航栏 -->
+    <TopMenu />
+    <!-- 右侧个人中心下拉框 -->
+    <ElDropdown class="avatar-container" trigger="click">
+      <div class="inline-flex justify-center items-center mx-2 hover:cursor-pointer">
+        <ElAvatar v-if="CurrUserInfo.avatar" :src="CurrUserInfo.avatar" />
+        <ElAvatar v-else color="transparent">
+          <div class="text-xl i-noto-v1-man-technologist-light-skin-tone" />
+        </ElAvatar>
+
+        <div class="text-sm ml-2">{{ CurrUserInfo.nickname }}</div>
+        <div class="mr-2 text-sm i-ion-md-arrow-dropdown" />
+      </div>
+      <template #dropdown>
+        <ElDropdownMenu class="user-dropdown">
+          <ElDropdownItem @click="loginOut">
+            <div>退出登录</div>
+          </ElDropdownItem>
+        </ElDropdownMenu>
+      </template>
+    </ElDropdown>
+  </div>
+</template>
+

package/template-vue-admin/src/layouts/default/index.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-10-25 17:43:30
+ * @LastEditTime: 2023-01-09 09:08:54
+ * @Description: 
+-->
+<script lang="ts" setup>
+import Logo from './components/Logo.vue';
+import Menu from './components/Menu.vue';
+import UserCenter from './components/UserCenter.vue';
+import TagsView from './components/TagsView.vue';
+import { useTagsStore } from '@/stores';
+
+const { cachedViews, visitedViews } = storeToRefs(useTagsStore());
+const route = useRoute();
+const path = computed(() => route.path);
+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>
+  <div class="parent">
+    <div class="left">
+      <div class="logo">
+        <Logo />
+      </div>
+      <div class="menu">
+        <Menu />
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <UserCenter />
+      </div>
+      <div class="tags">
+        <TagsView />
+      </div>
+      <div class="main">
+        <RouterView v-slot="{ Component: PageComponent }">
+          <Transition name="fade-transform" mode="out-in">
+            <div>
+              <KeepAlive>
+                <Component v-if="isCached" :is="PageComponent" :key="path" />
+              </KeepAlive>
+              <Component v-if="!isCached" :is="PageComponent" :key="path" />
+            </div>
+          </Transition>
+        </RouterView>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.parent {
+  @apply w-100vw h-100vh overflow-auto flex;
+
+  .left {
+    @apply h-full flex flex-col w-210px;
+    background-color: rgb(48, 65, 86);
+
+    .logo {
+      @apply w-full h-60px flex justify-center items-center bg-[#2b2f3a] text-white;
+    }
+
+    .menu {
+      @apply flex-1 overflow-y-auto overflow-x-hidden;
+      background-color: rgb(48, 65, 86);
+    }
+  }
+
+  .right {
+    @apply flex-1;
+
+    .top {
+      @apply h-60px w-full flex items-center;
+    }
+
+    .tags {
+      @apply h-30px w-full relative z-10;
+    }
+
+    .main {
+      @apply p-5 h-[calc(100vh-100px)] w-[calc(100vw-210px)] overflow-auto;
+    }
+  }
+}
+</style>

package/template-vue-admin/src/main.ts

@@ -0,0 +1,44 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-03 15:57:40
+ * @LastEditTime: 2023-01-10 15:09:29
+ * @Description:
+ */
+// polyfill
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+// 统一浏览器样式
+import '@unocss/reset/tailwind.css';
+import 'uno.css';
+import 'element-plus/dist/index.css';
+
+import { createApp } from 'vue';
+import { server } from 'virtual:local-server';
+import App from './App.vue';
+
+(async () => {
+  // 获取环境变量
+  let viteEnv;
+  // 注入此环境变量，可以兼容现有的部署方式
+  if (import.meta.env.VITE_USE_DEFAULT_DEPLOY_METHOD) {
+    viteEnv = import.meta.env;
+    console.log('🚀 ~ file: main.ts ~ line 19 ~ viteEnv', viteEnv);
+  } else if (import.meta.env.DEV) {
+    // 开发环境，局域网 ip
+    viteEnv = await (await fetch(server + '/get/env')).json();
+    console.log('🚀 ~ file: main.ts ~ line 24 ~ viteEnv', viteEnv);
+  } else {
+    // 部署环境，需要配合 nginx 使用
+    viteEnv = await (await fetch(`/get/env`)).json();
+    console.log('🚀 ~ file: main.ts ~ line 28 ~ viteEnv', viteEnv);
+  }
+  window.__YOUNG_VITE_ENV__ = viteEnv;
+
+  const app = createApp(App);
+  Object.values(
+    // 模块按数字命名，确保安装的顺序
+    import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }),
+  ).map(({ install }) => install(app));
+
+  app.mount('#app');
+})();

package/template-vue-admin/src/modules/1-router.ts

@@ -0,0 +1,66 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-04 10:15:03
+ * @LastEditTime: 2023-01-05 14:26:22
+ * @Description: 路由模块
+ */
+import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router';
+import { setupLayouts } from 'virtual:generated-layouts';
+import routes from '~pages';
+
+/**
+ * 路由元数据类型扩展
+ */
+declare module 'vue-router' {
+  interface RouteMeta {
+    /**
+     * 页面标题
+     */
+    title: string;
+    /**
+     * 是否固定
+     */
+    affix?: boolean;
+    /**
+     * 是否禁用缓存
+     */
+    noCache?: boolean;
+    /**
+     * 鉴权路径，不设置则为白名单页面
+     */
+    authPath?: string;
+    /**
+     * 页面布局，对应 layouts 目录下的布局页面，不写默认为 default/index
+     */
+    layout?: 'blank';
+  }
+}
+
+export const finalRoutes = setupLayouts(routes);
+export const navMap = new Map<string, string>();
+
+/**
+ * 生成权限节点映射表
+ */
+const generateNavMap = (raw: RouteRecordRaw[], base = '') => {
+  for (const route of raw) {
+    if (route.children) {
+      generateNavMap(route.children, route.path);
+    } else {
+      const meta = route.meta;
+      if (meta && meta.authPath) {
+        navMap.set(meta.authPath, `${base}${route.path.startsWith('/') ? '' : '/'}${route.path}`);
+      }
+    }
+  }
+};
+generateNavMap(finalRoutes);
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: finalRoutes,
+});
+
+export const install: UserModule = (app) => {
+  app.use(router);
+};

package/template-vue-admin/src/modules/2-pinia.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-01 14:01:31
+ * @LastEditTime: 2023-01-04 10:22:53
+ * @Description: 状态管理
+ */
+export const install: UserModule = (app) => {
+  const pinia = createPinia();
+  app.use(pinia);
+};