create-young-proj 0.6.1 → 0.7.0

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

@@ -0,0 +1,183 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 17:05:40
+ * @LastEditTime: 2023-07-23 17:00:42
+ * @Description:
+-->
+<script lang="ts" setup>
+import type { RouteLocationNormalized, RouteRecordRaw } from '.nuxt/vue-router';
+
+const route = useRoute();
+const tagsState = useTagsStore();
+
+const { visitedViews } = storeToRefs(tagsState);
+
+const tabClick = (e: any) => {
+  const currentName = e.paneName;
+  if (isActive(currentName)) {
+    return;
+  }
+  navigateTo(currentName);
+};
+
+const isActive = (view: RouteLocationNormalized) => view.path === route.path;
+const isAffix = (route: RouteLocationNormalized | RouteRecordRaw) => route?.meta?.affix ?? false;
+
+const 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);
+  if (to) {
+    tagsState.delView(to);
+    isActive(to) && toLastView(visitedViews.value);
+  }
+
+  if (visitedViews.value.length === 0) {
+    navigateTo('/');
+  }
+};
+
+const 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);
+}
+
+const 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)">
+          <template #label>
+            {{ item.meta.title }}
+          </template>
+        </ElTabPane>
+      </ElTabs>
+    </div>
+    <div class="tabs-action">
+      <ElDropdown trigger="click">
+        <ElIcon color="rgba(0, 0, 0, 0.65)" :size="20">
+          <div class="i-ep-menu" />
+        </ElIcon>
+        <template #dropdown>
+          <ElDropdownMenu>
+            <ElDropdownItem @click="closeCurrentTab">
+              <ElIcon :size="14">
+                <div class="i-ep-folder-remove" />
+              </ElIcon>
+              关闭当前
+            </ElDropdownItem>
+            <ElDropdownItem @click="closeOtherTab">
+              <ElIcon :size="14">
+                <div class="i-ep-close" />
+              </ElIcon>
+              关闭其他
+            </ElDropdownItem>
+            <ElDropdownItem @click="closeAllTab">
+              <ElIcon :size="14">
+                <div class="i-ep-folder-delete" />
+              </ElIcon>
+              关闭所有
+            </ElDropdownItem>
+          </ElDropdownMenu>
+        </template>
+      </ElDropdown>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tabs-action {
+  padding-bottom: 5px;
+  cursor: pointer;
+
+  :deep(.el-icon) {
+    transition: all 0.3s;
+  }
+}
+
+.tabs-bar-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-content: center;
+  align-items: flex-end;
+  justify-content: space-between;
+  height: $base-tabs-bar-height;
+  padding-right: $base-padding;
+  padding-left: $base-padding;
+  user-select: none;
+  background: $base-color-white;
+  border-top: 1px solid #f6f6f6;
+
+  .tabs-content {
+    width: calc(100% - 0px);
+  }
+
+  :deep(.el-tabs--card) {
+    height: $base-tag-item-height;
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      height: $base-tag-item-height;
+      line-height: $base-tag-item-height;
+    }
+
+    .el-tabs__header {
+      margin: 0;
+      border-bottom: 0;
+    }
+
+    .el-tabs__nav {
+      border: 0;
+    }
+
+    .tabs-icon {
+      top: 3px;
+      font-size: 15px;
+    }
+
+    .el-tabs__item {
+      box-sizing: border-box;
+      height: $base-tag-item-height;
+      line-height: $base-tag-item-height;
+      border: none;
+      border-radius: $base-border-radius;
+      transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+    }
+
+    .el-tabs__item.is-active {
+      background-color: #e8f4ff;
+      -webkit-mask-image: url('/tabbar_bg.png');
+      mask-image: url('/tabbar_bg.png');
+      -webkit-mask-size: 100% 100%;
+      mask-size: 100% 100%;
+    }
+
+    .el-tabs__item:not(.is_active):hover {
+      background-color: #f6f8f9;
+      -webkit-mask-image: url('/tabbar_bg.png');
+      mask-image: url('/tabbar_bg.png');
+      -webkit-mask-size: 100% 100%;
+      mask-size: 100% 100%;
+    }
+  }
+}
+</style>

package/template-nuxt-admin/composables/api.ts

@@ -0,0 +1,104 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-20 17:14:58
+ * @LastEditTime: 2023-07-26 11:56:53
+ * @Description:
+ */
+import { useHttp } from '@bluesyoung/http';
+import { useGet, usePost, usePatch, useDelete } from './apis';
+
+export const startLoading = () => {
+  const { isLoading } = storeToRefs(useNavStore());
+  isLoading.value = true;
+};
+
+export const endLoading = () => {
+  const { isLoading } = storeToRefs(useNavStore());
+  isLoading.value = false;
+};
+
+const http = useHttp<{
+  code: number;
+  data: any;
+  msg: string;
+}>({
+  timeout: -1,
+  loading: {
+    start: startLoading,
+    end: endLoading,
+  },
+  fail: (err: any) => {
+    console.log('🚀 ~ file: api.ts:28 ~ err:', err);
+    const { cookie } = storeToRefs(useUserStore());
+    if (err?.response?.status === 401) {
+      showDialog({
+        title: '温馨提示',
+        message: '未登录或登录过期，请登录后再继续！',
+        showCancelButton: true,
+      })
+        .then(() => {
+          cookie.value && (cookie.value.uuid = '');
+          navigateTo(
+            `/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`,
+          );
+        })
+        .catch(() => {
+          navigateTo({
+            path: '/',
+            replace: true,
+          });
+        });
+
+      throw err;
+    }
+
+    if (typeof err === 'string') {
+      // 通用失败，弹出提示信息
+      showNotify({
+        type: 'danger',
+        message: err,
+      });
+    }
+    if ((err as any) instanceof Error) {
+      showNotify({
+        type: 'danger',
+        // 接口出错
+        message:
+          err?.response?.data?.message ||
+          err?.response?.data?.msg ||
+          err?.response?.data ||
+          err.message ||
+          '网络错误！',
+      });
+    }
+
+    throw err;
+  },
+  headers: {
+    getAuthHeaders: () => {
+      const { token } = storeToRefs(useUserStore());
+      return {
+        Authorization: `Bearer ${token.value}`,
+      };
+    },
+  },
+  checkFn: ({ code, msg, data }) => {
+    if (code === 0) {
+      // 通用成功
+      return data;
+    } else if (code === -1) {
+      // 通用失败
+      throw msg;
+    } else {
+      // 特殊状态码
+      throw code;
+    }
+  },
+});
+
+export const apis = http.__mixin__({
+  get: useGet(http),
+  post: usePost(http),
+  patch: usePatch(http),
+  delete: useDelete(http),
+});

package/template-nuxt-admin/composables/apis/delete.ts

@@ -0,0 +1,37 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-26 11:54:08
+ * @LastEditTime: 2023-07-26 11:56:39
+ * @Description:
+ */
+import type { YoungHttp, YoungHttpAuthReq } from '@bluesyoung/http';
+
+export const useDelete = (http: YoungHttp) => {
+  const AuthReq: YoungHttpAuthReq = (args) => http.authReq({ method: 'DELETE', ...args });
+
+  const del = async (url: string, ids: string) => {
+    await AuthReq({
+      url,
+      data: { ids },
+    });
+  };
+
+  return {
+    /**
+     * 删除用户
+     */
+    deleteUser: async (ids: string) => del('/user/delete/batch', ids),
+    /**
+     * 删除菜单
+     */
+    deleteMenu: async (ids: string) => del('/menu/delete/batch', ids),
+    /**
+     * 删除接口
+     */
+    deleteApi: async (ids: string) => del('/api/delete/batch', ids),
+    /**
+     * 删除角色
+     */
+    deleteRole: async (ids: string) => del('/role/delete/batch', ids),
+  };
+};

package/template-nuxt-admin/composables/apis/get.ts

@@ -0,0 +1,83 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:09:37
+ * @LastEditTime: 2023-07-26 11:58:32
+ * @Description:
+ */
+import type { YoungHttp, YoungHttpFreeReq, YoungHttpAuthReq } from '@bluesyoung/http';
+
+export const useGet = (http: YoungHttp) => {
+  const FreeReq: YoungHttpFreeReq = (args) => http.freeReq({ method: 'GET', ...args });
+  const AuthReq: YoungHttpAuthReq = (args) => http.authReq({ method: 'GET', ...args });
+
+  return {
+    /**
+     * 发送短信验证码
+     */
+    sendCode: async (phone: string) => {
+      showToast(`todo: ${phone}发送短信验证码`);
+      // await FreeReq({ url: '/v1/user/sendCode', params: { phone } });
+    },
+    /**
+     * 获取用户的菜单树
+     */
+    getUserMenuTree: async () => {
+      return AuthReq<Record<number, NavArrItem>>({
+        url: '/menu/tree',
+      });
+    },
+    /**
+     * 获取角色列表
+     */
+    getRoleList: async (params: Partial<BaseQuery> = {}) =>
+      AuthReq<PagesData>({
+        url: `/role/list`,
+        params,
+      }),
+    /**
+     * 获取用户列表
+     */
+    getUserList: async (params: Partial<BaseQuery> = {}) =>
+      AuthReq<PagesData>({
+        url: '/user/list',
+
+        params,
+      }),
+    /**
+     * 获取菜单列表
+     */
+    getMenuList: async () =>
+      AuthReq<Record<string, NavArrItem>>({
+        url: '/menu/list',
+      }),
+    /**
+     * 获取接口列表
+     */
+    getApiList: async (params: Partial<BaseQuery> = {}) =>
+      AuthReq<PagesData>({
+        url: '/api/list',
+
+        params,
+      }),
+    /**
+     * 获取角色拥有权限的菜单
+     */
+    getRoleMenuTree: async (id: number) =>
+      AuthReq<{
+        list: NavArrItem[];
+        accessIds: number[];
+      }>({
+        url: `/menu/all/${id}`,
+      }),
+    /**
+     * 获取角色拥有的接口权限
+     */
+    getRoleApis: async (id: number) =>
+      AuthReq<{
+        list: ApiItem[];
+        accessIds: number[];
+      }>({
+        url: `/api/all/category/${id}`,
+      }),
+  };
+};

package/template-nuxt-admin/composables/apis/index.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:22:00
+ * @LastEditTime: 2023-07-26 11:56:20
+ * @Description:
+ */
+export * from './get';
+export * from './post';
+export * from './patch';
+export * from './delete';

package/template-nuxt-admin/composables/apis/patch.ts

@@ -0,0 +1,74 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-26 11:51:44
+ * @LastEditTime: 2023-07-26 16:37:45
+ * @Description:
+ */
+import type { YoungHttp, YoungHttpAuthReq } from '@bluesyoung/http';
+
+export const usePatch = (http: YoungHttp) => {
+  const AuthReq: YoungHttpAuthReq = (args) => http.authReq({ method: 'PATCH', ...args });
+
+  return {
+    /**
+     * 更新接口
+     */
+    changeApiItem: async ({ id, ...data }: Partial<ApiItem>) => {
+      await AuthReq({
+        url: `/api/update/${id}`,
+        data,
+      });
+    },
+    /**
+     * 更新菜单信息
+     */
+    changeMenuItem: async ({ id, ...data }: Partial<NavArrItem>) => {
+      await AuthReq({
+        url: `/menu/update/${id}`,
+        data,
+      });
+    },
+    /**
+     * 更新角色
+     */
+    changeRoleItem: async ({ id, ...data }: Partial<RoleItem>) => {
+      await AuthReq({
+        url: `/role/update/${id}`,
+        data,
+      });
+    },
+    /**
+     * 更新角色菜单权限
+     */
+    changeRoleMenu: async (roleId: number, add: number[], del: number[]) => {
+      await AuthReq({
+        url: `role/menus/update/${roleId}`,
+        data: {
+          create: add,
+          delete: del,
+        },
+      });
+    },
+    /**
+     * 更新角色接口权限
+     */
+    changeRoleApi: async (roleId: number, add: number[], del: number[]) => {
+      await AuthReq({
+        url: `role/apis/update/${roleId}`,
+        data: {
+          create: add,
+          delete: del,
+        },
+      });
+    },
+    /**
+     * 更新用户信息
+     */
+    changeUserItem: async ({ id, ...data }: Partial<UserItem>) => {
+      await AuthReq({
+        url: `/user/update/${id}`,
+        data,
+      });
+    },
+  };
+};

package/template-nuxt-admin/composables/apis/post.ts

@@ -0,0 +1,85 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:21:02
+ * @LastEditTime: 2023-07-26 16:39:22
+ * @Description:
+ */
+import type { YoungHttp, YoungHttpFreeReq, YoungHttpAuthReq } from '@bluesyoung/http';
+import { telMasaike } from '@bluesyoung/utils';
+
+export const usePost = (http: YoungHttp) => {
+  const FreeReq: YoungHttpFreeReq = (args) => http.freeReq({ method: 'POST', ...args });
+  const AuthReq: YoungHttpAuthReq = (args) => http.authReq({ method: 'POST', ...args });
+
+  return {
+    login: async (args: LoginForm) => {
+      console.log('🚀 ~ file: post.ts:15 ~ login: ~ args:', args);
+
+      const { token } = await FreeReq({
+        url: '/base/login',
+        data: {
+          username: 'super',
+          password: '123456',
+        },
+      });
+
+      return {
+        uuid: '9527',
+        nickname: '用户xxx',
+        headimgurl: 'https://avatars.githubusercontent.com/u/55608642?v=4',
+        token,
+        phone: telMasaike(args.mobile),
+      } as UserLoginRes;
+    },
+    changePassword: async (args: LoginForm) => {
+      console.log('🚀 ~ file: post.ts:15 ~ login: ~ args:', args);
+      showToast('todo: user change password');
+
+      return {
+        uuid: '9527',
+        nickname: '用户xxx',
+        headimgurl: 'https://avatars.githubusercontent.com/u/55608642?v=4',
+        token: 'xxx',
+        phone: telMasaike(args.mobile),
+      } as UserLoginRes;
+    },
+
+    /**
+     * 创建接口
+     */
+    addApiItem: async (data: ApiItem) => {
+      await AuthReq({
+        url: '/api/create',
+        data,
+      });
+    },
+    /**
+     * 创建菜单
+     */
+    addMenuItem: async (data: NavArrItem) => {
+      await AuthReq({
+        url: '/menu/create',
+        data,
+      });
+    },
+    /**
+     * 创建角色
+     */
+    addRoleItem: async (data: RoleItem) => {
+      await AuthReq({
+        url: '/role/create',
+        data,
+      });
+    },
+
+    /**
+     * 创建用户
+     */
+    addUserItem: async (data: UserItem) => {
+      await AuthReq({
+        url: '/user/create',
+        data,
+      });
+    },
+  };
+};

package/template-nuxt-admin/composables/config.ts

@@ -0,0 +1,13 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-26 11:48:46
+ * @LastEditTime: 2023-07-26 11:48:46
+ * @Description:
+ */
+export const MethodObj = {
+  GET: 'info',
+  POST: 'success',
+  PATCH: 'warning',
+  PUT: '',
+  DELETE: 'danger',
+} as const;

package/template-nuxt-admin/composables/icon.ts

@@ -0,0 +1,27 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 15:20:01
+ * @LastEditTime: 2023-07-21 15:49:22
+ * @Description:
+ * @unocss-include
+ */
+import type { SelectOptionItem } from '@bluesyoung/ui-vue3-element-plus';
+
+export const MenuIcons = [
+  'i-icon-park-solid-analysis',
+  'i-ant-design-account-book-outlined',
+  'i-ant-design-bulb-outlined',
+  'i-icon-park-solid-application',
+  'i-icon-park-solid-apple-one',
+  'i-icon-park-solid-align-text-right-one',
+  'i-icon-park-solid-auto-focus',
+  'i-humbleicons-crown',
+  'i-icon-park-solid-add-user',
+  'i-typcn-device-desktop',
+  'i-icon-park-solid-application-two',
+] as const;
+
+export const MenuIconList: SelectOptionItem[] = MenuIcons.map((label) => ({
+  label,
+  value: label,
+}));

package/template-nuxt-admin/composables/nav.ts

@@ -0,0 +1,60 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-01 12:03:44
+ * @LastEditTime: 2023-07-28 17:43:00
+ * @Description:
+ */
+export const useNavStore = defineStore('useNavStore', () => {
+  const title = ref('');
+  const sub_title = ref('');
+  /**
+   * 树形导航数组(仅可见)
+   */
+  const nav_arr = ref<NavArrItem[]>([]);
+  /**
+   * 拍平之后的导航数组(仅可见，用于快速搜索)
+   */
+  const flat_nav_arr = ref<NavArrItem[]>([]);
+  /**
+   * 拥有权限的路由
+   */
+  const auth_routes = ref<string[]>([]);
+
+  const active_nav = ref('');
+
+  const isLoading = ref(false);
+  const isCollapse = ref(false);
+
+  watch(
+    () => WindowSize['lt-lg'],
+    (v) => {
+      isCollapse.value = v;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watchEffect(() => {
+    if (isLoading.value) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  });
+
+  return {
+    title,
+    sub_title,
+    nav_arr,
+    active_nav,
+    flat_nav_arr,
+    auth_routes,
+    isLoading,
+    isCollapse,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useNavStore, import.meta.hot));
+}