create-young-proj 0.0.1 → 0.1.1

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

@@ -0,0 +1,75 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-01 14:01:31
+ * @LastEditTime: 2023-01-09 09:19:53
+ * @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) => {
+    console.log('🚀 ~ file: 3-net.ts:60 ~ err', err, typeof err);
+    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) => {};

package/template-vue-admin/src/modules/4-auth.ts

@@ -0,0 +1,126 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-01 19:40:13
+ * @LastEditTime: 2023-01-11 10:32:35
+ * @Description: 权限校验
+ */
+import { router } from './1-router';
+import type { RouteLocationNormalized } from 'vue-router';
+import { useNavStore, useTagsStore, useUserStore, getToken } from '@/stores';
+import { apis } from './3-net';
+
+const changeTitle = (route: RouteLocationNormalized) => {
+  document.title =
+    (route.meta.title as string) || window.__YOUNG_VITE_ENV__.VITE_TITLE || '管理后台';
+};
+
+const { CurrUserInfo } = useUserStore();
+const { NavArrAll, RoleRoute, FlatNavArr, RawNav } = useNavStore();
+
+let role_route: string[] = [];
+const generateRoleRoute = (arr: NavArrItem[], num?: number): string[] => {
+  if (num === 1) {
+    role_route = [];
+    FlatNavArr.value = [];
+  }
+  for (const item of arr) {
+    if (item.component) {
+      role_route.push(item.component);
+      +item.visible === 1 && FlatNavArr.value.push(item);
+    }
+    // 子节点递归遍历
+    if (Array.isArray(item.children) && item.children.length > 0) {
+      const part = JSON.parse(JSON.stringify(item.children));
+      // 尾递归优化
+      generateRoleRoute(part);
+    }
+  }
+  return role_route;
+};
+// 清除没有子元素的children
+export const clearChildren = <T extends Record<string, any>>(arr: T[]) => {
+  for (const item of arr) {
+    if (item?.children.length === 0) {
+      delete item.children;
+    } else if (item.children) {
+      clearChildren(item.children);
+    }
+  }
+  return arr;
+};
+
+export const generateNavData = async () => {
+  const info = await apis.post.getCurrUserInfo();
+
+  if (!info) {
+    return;
+  }
+
+  const menu = Object.values(await apis.get.getMenuTree());
+  CurrUserInfo.value = info;
+  RawNav.value = menu;
+
+  // 后端获取用户可见节点
+  const navArr: NavArrItem[] = menu;
+  const routes: string[] = generateRoleRoute(menu, 1);
+
+  // 导航数组
+  NavArrAll.value = navArr.filter((item) => +item.visible === 1);
+  // 生成角色有权访问的路由
+  RoleRoute.value = routes.slice();
+};
+
+export const hasPermission = (path: string) => {
+  const { RoleRoute } = useNavStore();
+  const roleRoute = RoleRoute.value;
+  return roleRoute.includes(path);
+};
+
+export const install: UserModule = (app) => {
+  router.beforeEach(async (to, from) => {
+    /* 授权登录，暂未启用
+    const { code, state } = Object.fromEntries(new URLSearchParams(location.search));
+    if (code && state) {
+      (await casdoorLogin(code, state)) as UserKey;
+      getToken() && (await generateNavData());
+      location.search = '';
+      return true;
+    } else 
+    */
+    if (to.path !== '/base/login') {
+      // 页面无需权限
+      if (!to.meta.authPath) {
+        return true;
+      }
+      // 已登录
+      if (getToken()) {
+        // 生成权限树
+        await generateNavData();
+        if (hasPermission(to.meta.authPath)) {
+          // 拥有对应页面的权限
+          return true;
+        }
+        if (!hasPermission(to.meta.authPath)) {
+          // 已登录，并且无权限
+          return '/403';
+        }
+      } else {
+        return '/base/login';
+      }
+    } else {
+      return true;
+    }
+  });
+
+  router.afterEach((to) => {
+    const { addView } = useTagsStore();
+    const nav = FlatNavArr.value.find((item) => item.component === to.path);
+    if (nav && nav.title) {
+      // console.log('before: ', to.meta);
+      to.meta.title = nav.title as string;
+      // console.log('after: ', to.meta);
+    }
+    addView(to);
+    changeTitle(to);
+  });
+};

package/template-vue-admin/src/shims.d.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-10 15:08:44
+ * @LastEditTime: 2023-01-10 15:08:44
+ * @Description: 
+ */
+declare module 'virtual:local-server' {
+  /**
+   * 本地服务地址
+   */
+  export const server: string;
+}

package/template-vue-admin/src/stores/index.ts

@@ -0,0 +1,9 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-01 14:42:57
+ * @LastEditTime: 2023-01-09 09:19:05
+ * @Description:
+ */
+export * from './tags';
+export * from './session';
+export * from './local';

package/template-vue-admin/src/stores/local/index.ts

@@ -0,0 +1,23 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-10-20 08:52:37
+ * @LastEditTime: 2023-01-09 09:18:45
+ * @Description:
+ */
+import { YoungLocalStorage } from '@bluesyoung/utils';
+
+export const YoungStorage = new YoungLocalStorage();
+
+const TOKEN_KEY = 'bluesyoung-web.com/music/admin';
+
+export const getToken = () => {
+  return YoungStorage.get<UserKey>(TOKEN_KEY)?.token;
+};
+
+export const setToken = (data: UserKey) => {
+  return YoungStorage.set(TOKEN_KEY, data);
+};
+
+export const removeToken = () => {
+  return YoungStorage.remove(TOKEN_KEY);
+};

package/template-vue-admin/src/stores/session/index.ts

@@ -0,0 +1,63 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-02 18:42:56
+ * @LastEditTime: 2023-01-04 15:14:46
+ * @Description: 存储界面相关的数据
+ */
+const SESSION_PREFIX = '__young_admin_';
+
+export const SESSION_KEYS = {
+  collapsed: `${SESSION_PREFIX}collapsed`,
+  topIndex: `${SESSION_PREFIX}topIndex`,
+  expandNodeKeys: `${SESSION_PREFIX}expandNodeKeys`,
+  userInfo: `${SESSION_PREFIX}userInfo`,
+  rawNavArr: `${SESSION_PREFIX}rawNavArr`,
+  navArr: `${SESSION_PREFIX}navArr`,
+  flatNavArr: `${SESSION_PREFIX}flatNavArr`,
+  roleRoute: `${SESSION_PREFIX}roleRoute`,
+};
+
+export const isCollapse = useSessionStorage(SESSION_KEYS.collapsed, false);
+
+export const TopIndex = useSessionStorage(SESSION_KEYS.topIndex, '0');
+
+export const expandNodeKeys = useSessionStorage<number[]>(SESSION_KEYS.expandNodeKeys, []);
+
+export const useUserStore = () => {
+  const CurrUserInfo = useSessionStorage<CurrUserInfo>(
+    SESSION_KEYS.userInfo,
+    {} as unknown as CurrUserInfo,
+  );
+  const reset = () => (CurrUserInfo.value = {} as unknown as CurrUserInfo);
+  return {
+    CurrUserInfo,
+    reset,
+  };
+};
+
+export const useNavStore = () => {
+  const RawNav = useSessionStorage<NavArrItem[]>(SESSION_KEYS.rawNavArr, []);
+  const NavArrAll = useSessionStorage<NavArrItem[]>(SESSION_KEYS.navArr, []);
+  const FlatNavArr = useSessionStorage<NavArrItem[]>(SESSION_KEYS.flatNavArr, []);
+  const RoleRoute = useSessionStorage<string[]>(SESSION_KEYS.roleRoute, []);
+  const TopMenu = computed(() => RawNav.value.filter((nav) => nav.visible === 1));
+  const NavArr = computed(() =>
+    TopIndex.value ? NavArrAll.value[+TopIndex.value]?.children || [] : [],
+  );
+
+  const reset = () => {
+    NavArrAll.value = [];
+    FlatNavArr.value = [];
+    RoleRoute.value = [];
+    RawNav.value = [];
+  };
+  return {
+    RawNav,
+    NavArrAll,
+    NavArr,
+    FlatNavArr,
+    RoleRoute,
+    TopMenu,
+    reset,
+  };
+};

package/template-vue-admin/src/stores/tags.ts

@@ -0,0 +1,109 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-02-24 15:55:05
+ * @LastEditTime: 2023-01-04 19:47:49
+ * @Description: 存储标签页的状态
+ */
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import type { RouteLocationNormalized } from 'vue-router';
+
+type CachedView = string | symbol | null | undefined;
+
+interface TagsViewState {
+  /**
+   * 访问过的页面，路由对象
+   */
+  visitedViews: RouteLocationNormalized[];
+  /**
+   * 已缓存的页面名称
+   */
+  cachedViews: CachedView[];
+}
+// @ts-ignore
+export const useTagsStore = defineStore('useTagsStore', {
+  state: () => {
+    const state = reactive<TagsViewState>({
+      visitedViews: [],
+      cachedViews: [],
+    });
+    return state;
+  },
+  actions: {
+    /**
+     * 打开某个页面
+     */
+    addView(view: RouteLocationNormalized) {
+      if (view.path === '/') {
+        return;
+      }
+
+      // 非我族类其心必异，布局不是默认布局的页面，不缓存
+      if ((view.meta?.layout ?? 'default') !== 'default') {
+        return;
+      }
+      // 查询是否已经访问过
+      if (!this.visitedViews.some((v) => v.path === view.path)) {
+        // 添加到已访问
+        const { name, path, fullPath, meta } = view;
+        this.visitedViews.push({ name, path, fullPath, meta } as RouteLocationNormalized);
+        // 添加到缓存
+        this.addToCache(view);
+      }
+    },
+    /**
+     * 添加页面到缓存
+     */
+    addToCache(view: RouteLocationNormalized) {
+      // 查询该标签是否已缓存
+      if (this.cachedViews.includes(view.name)) {
+        null;
+      } else if (!view.meta?.noCache) {
+        this.cachedViews.push(view.name);
+      }
+    },
+    /**
+     * 关闭某个页面
+     */
+    delView(view: RouteLocationNormalized) {
+      // 固定页不能关闭
+      if (view.meta.affix) {
+        ElMessage.warning('固定页无法关闭！');
+        return false;
+      }
+      // 删除访问记录
+      const index = this.visitedViews.findIndex((r) => r.path === view.path);
+      index > -1 && this.visitedViews.splice(index, 1);
+      // 删除缓存
+      this.delCachedView(view);
+      return true;
+    },
+    /**
+     * 删除页面缓存
+     */
+    delCachedView(view: RouteLocationNormalized) {
+      const index = this.cachedViews.indexOf(view.name);
+      index > -1 && this.cachedViews.splice(index, 1);
+    },
+    /**
+     * 关闭其他页面
+     */
+    delOtherViews(view: RouteLocationNormalized) {
+      this.visitedViews = this.visitedViews.filter((v) => {
+        return v?.meta?.affix || v.path === view.path;
+      });
+      this.cachedViews = this.cachedViews.filter((v) => {
+        return v === view.name;
+      });
+    },
+    /**
+     * 关闭所有页面
+     */
+    delAllViews() {
+      const affixTags = this.visitedViews.filter((tag) => tag?.meta?.affix);
+      this.visitedViews = affixTags;
+      this.cachedViews.length = 0;
+    },
+  },
+});
+
+import.meta.hot && import.meta.hot.accept(acceptHMRUpdate(useTagsStore, import.meta.hot));

package/template-vue-admin/src/typings/global.d.ts

@@ -0,0 +1,70 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-09 17:55:56
+ * @LastEditTime: 2023-01-09 10:05:44
+ * @Description: 自定义表格组件相关
+ */
+import type { App, VNode } from 'vue';
+
+declare global {
+  interface BaseQuery {
+    pageNum: number;
+    pageSize: number;
+    total: number;
+    noPagination?: boolean;
+  }
+
+  type PagesData = {
+    list: any[];
+  } & BaseQuery;
+
+  type EnableWrite<T extends any> = {
+    -readonly [p in keyof T]: T[p];
+  };
+
+  type UserModule = (ctx: App<Element>, ...args: any[]) => void;
+  type Cbk = () => void;
+  
+  type ResponseMsg = {
+    code: number;
+    msg: string;
+    data: any;
+  };
+
+  type UserKey = {
+    expires: string;
+    token: string;
+  };
+
+  type NavArrItem = {
+    breadcrumb: number;
+    component: string;
+    createdAt: string;
+    creator: string;
+    icon?: any;
+    id: number;
+    name: string;
+    not_dev: number;
+    parentId: number;
+    path: string;
+    permission: string;
+    redirect: string;
+    sort: number;
+    status: number;
+    title?: string;
+    updatedAt: string;
+    visible: number;
+    children?: NavArrItem[] | [];
+  } & Record<string, any>;
+
+  type CurrUserInfo = {
+    avatar: string;
+    id: number;
+    introduction: string;
+    mobile: string;
+    nickname: string;
+    roles: string[];
+    roleSort: number;
+    username: string;
+  };
+}

package/template-vue-admin/src/typings/index.ts

@@ -0,0 +1,50 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-03-01 14:03:04
+ * @LastEditTime: 2023-01-06 16:47:05
+ * @Description: 部分类型定义
+ */
+export type UserItem = {
+  id: number;
+  username: string;
+  nickname: string;
+  mobile: string;
+  roleId: number;
+  status: number;
+  role_name?: string;
+  creator?: string;
+  newPassword?: string;
+  initPassword?: string;
+};
+
+export type RoleItem = {
+  createdAt?: string;
+  creator?: string;
+  desc: string;
+  id: number;
+  keyword: string;
+  name: string;
+  not_dev?: number;
+  sort?: number;
+  status: number;
+  updatedAt?: string;
+};
+
+export const MethodObj = {
+  GET: 'info',
+  POST: 'success',
+  PATCH: 'warning',
+  PUT: '',
+  DELETE: 'danger',
+} as const;
+
+export type ApiItem = {
+  id: number;
+  path: string;
+  desc: string;
+  category: string;
+  method: keyof typeof MethodObj;
+  roleIds: number[];
+  creator?: string;
+  title?: string;
+};

package/template-vue-admin/src/views/403.vue

@@ -0,0 +1,32 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-10-27 11:32:57
+ * @LastEditTime: 2023-01-04 19:42:03
+ * @Description: 
+-->
+<route lang="yaml">
+meta:
+  title: 403
+</route>
+
+<script lang="ts" setup>
+import { router } from '@/modules/1-router';
+import { useUserStore, useNavStore, removeToken } from '@/stores';
+
+const loginOut = async () => {
+  removeToken();
+  useUserStore().reset();
+  useNavStore().reset();
+  router.replace('/base/login');
+};
+</script>
+
+<template>
+  <div class="mt-20">
+    <ElResult icon="error" title="403 禁止访问" sub-title="总有些门是对你关闭的" />
+
+    <div class="text-center">
+      <ElButton type="primary" @click="loginOut">重新登录</ElButton>
+    </div>
+  </div>
+</template>