create-young-proj 0.10.2 → 0.13.0

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

@@ -1,52 +0,0 @@
-<!--
- * @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

@@ -1,79 +0,0 @@
-<!--
- * @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

@@ -1,137 +0,0 @@
-<!--
- * @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

@@ -1,21 +0,0 @@
-<!--
- * @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

@@ -1,50 +0,0 @@
-<!--
- * @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

@@ -1,95 +0,0 @@
-<!--
- * @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

@@ -1,46 +0,0 @@
-/*
- * @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';
-import { CurrentVersion } from './stores';
-
-(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;
-  CurrentVersion.value = viteEnv.VITE_CURRENT_VERSION;
-
-  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

@@ -1,48 +0,0 @@
-/*
- * @Author: zhangyang
- * @Date: 2023-01-04 10:15:03
- * @LastEditTime: 2023-05-18 15:45:18
- * @Description: 路由模块
- */
-import { createRouter, createWebHashHistory } 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;
-    /**
-     * 设置 false 不参与鉴权，否则鉴权路径为当前路由
-     */
-    auth?: false;
-    /**
-     * 页面布局，对应 layouts 目录下的布局页面，不写默认为 default/index
-     */
-    layout?: 'blank';
-  }
-}
-
-export const finalRoutes = setupLayouts(routes);
-
-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

@@ -1,10 +0,0 @@
-/*
- * @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);
-};

package/template-vue-admin/src/modules/3-net.ts

@@ -1,79 +0,0 @@
-/*
- * @Author: zhangyang
- * @Date: 2022-03-01 14:01:31
- * @LastEditTime: 2023-05-18 16:21:55
- * @Description: 网络请求
- */
-import { useHttp } from '@bluesyoung/http';
-import { getToken } from '@/stores';
-import type { LoadingInstance } from 'element-plus/es/components/loading/src/loading';
-import { useGetReq, usePostReq, usePatchReq, useDeleteReq } from '@/apis';
-
-let loading: LoadingInstance;
-
-const startLoading = () => {
-  loading = ElLoadingService({
-    lock: true,
-    text: '拼命加载中...',
-    background: 'rgba(0, 0, 0, 0.7)',
-  });
-};
-
-const endLoading = () => loading?.close?.();
-
-export const http = useHttp<ResponseMsg>({
-  timeout: -1,
-  loading: {
-    start: startLoading,
-    end: endLoading,
-  },
-  fail: (err: any) => {
-    console.log('🚀 ~ file: 3-net.ts:60 ~ err', err, typeof err);
-    if (err?.response?.status === 401) {
-      ElMessage.error('无权限，请联系管理员');
-    }
-
-    if (typeof err === 'string') {
-      // 通用失败，弹出提示信息
-      ElMessage.error(err);
-    }
-
-    if (err instanceof Error) {
-      ElMessage.error(
-        // @ts-ignore 接口出错
-        err?.response?.data?.message || err?.response?.data?.msg || err.message || '网络错误！',
-      );
-    }
-
-    throw err;
-  },
-  checkFn: ({ code, msg, data }) => {
-    if (code === 0) {
-      // 通用成功
-      return data;
-    } else if (code === -1) {
-      // 通用失败
-      throw msg;
-    } else {
-      // 特殊状态码
-      throw code;
-    }
-  },
-  headers: {
-    getAuthHeaders: () => {
-      const token = getToken();
-      return {
-        Authorization: `Bearer ${token}`,
-      };
-    },
-  },
-});
-
-export const apis = http.__mixin__({
-  get: useGetReq(),
-  post: usePostReq(),
-  patch: usePatchReq(),
-  delete: useDeleteReq(),
-});
-
-export const install: UserModule = (ctx) => {};