create-young-proj 1.0.0 → 1.1.0

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

@@ -0,0 +1,90 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 16:38:20
+ * @LastEditTime: 2023-11-07 16:01:17
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse, breadcrumb_arr, zen_mode } = storeToRefs(useNavStore())
+
+function 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"
+      />
+
+      <ElBreadcrumb separator="/" class="ml-10px" lt-md="hidden">
+        <ElBreadcrumbItem :to="{ path: '/' }">
+          首页
+        </ElBreadcrumbItem>
+        <ElBreadcrumbItem v-for="(title, index) in breadcrumb_arr" :key="`${index}fsdakjroe`">
+          {{ title }}
+        </ElBreadcrumbItem>
+      </ElBreadcrumb>
+    </div>
+    <div class="right-panel">
+      <ZenMode />
+      <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,96 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 12:25:23
+ * @LastEditTime: 2023-09-15 15:25:15
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse, nav_arr, nav_index_map } = storeToRefs(useNavStore())
+
+const route = useRoute()
+const active = computed(() => nav_index_map.value.get(route.path))
+</script>
+
+<template>
+  <div class="layout-sidebar-container" :class="{ 'is-collapse': isCollapse }">
+    <LayoutLogo />
+
+    <ElScrollbar>
+      <ElMenu
+        :default-active="active"
+        background-color="#001529" text-color="hsla(0,0%,100%,.65)" active-text-color="#fff" unique-opened
+        :collapse="isCollapse || WindowSize['lt-lg']" menu-trigger="click" :collapse-transition="false"
+      >
+        <LayoutSubMenu :menu-list="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;
+    height: calc(100vh - $base-nav-bar-height);
+
+    .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,52 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 14:06:48
+ * @LastEditTime: 2023-09-15 15:24:33
+ * @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, nav_index_map } = storeToRefs(useNavStore())
+
+watch(() => visibleMenu.value, (v) => {
+  v.forEach((n, i) => {
+    nav_index_map.value.set(n.component, (n.component + randomKey + i))
+  })
+}, { immediate: true, deep: true })
+
+function 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 :menu-list="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>

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

@@ -0,0 +1,184 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 17:05:40
+ * @LastEditTime: 2023-09-18 14:14:12
+ * @Description:
+-->
+<script lang="ts" setup>
+import type { RouteLocationNormalized, RouteRecordRaw } from '#vue-router'
+
+const route = useRoute()
+const tagsState = useTagsStore()
+
+const { visitedViews } = storeToRefs(tagsState)
+
+function 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) => visitedViews.value.length === 1 || (route?.meta?.affix ?? false)
+
+function toLastView(visitedViews: RouteLocationNormalized[]) {
+  const lastView = visitedViews.slice(-1)[0]
+  if (lastView)
+    navigateTo(lastView.fullPath)
+}
+
+function 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('/')
+}
+
+function closeCurrentTab() {
+  removeTab(route.path)
+}
+
+function closeOtherTab() {
+  const currentName = route.path
+  const to = visitedViews.value.find(r => r.path === currentName as string)
+  to && tagsState.delOtherViews(to)
+}
+
+function closeAllTab() {
+  tagsState.delAllViews()
+  navigateTo('/')
+}
+</script>
+
+<template>
+  <div class="tabs-bar-container">
+    <div class="tabs-content">
+      <ElTabs
+        v-if="visitedViews.length > 0" type="card" :model-value="$route.path" @tab-click="tabClick"
+        @tab-remove="removeTab"
+      >
+        <ElTabPane
+          v-for="item in visitedViews" :key="item.path" type="card" :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" :disabled="visitedViews.length <= 1">
+        <ElIcon color="rgba(0, 0, 0, 0.65)" :size="20" :class="[visitedViews.length <= 1 ? '!cursor-not-allowed' : '!cursor-pointer']">
+          <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;
+
+  :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,97 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-20 17:14:58
+ * @LastEditTime: 2023-11-07 14:55:10
+ * @Description:
+ */
+import { useHttp } from '@bluesyoung/http'
+import type { LoadingInstance } from 'element-plus/es/components/loading/src/loading'
+import { ElLoadingService } from 'element-plus'
+import { useDelete, useGet, usePatch, usePost } from './apis'
+
+export function startLoading() {
+  const { isLoading } = storeToRefs(useNavStore())
+  isLoading.value = true
+}
+
+export function endLoading() {
+  const { isLoading } = storeToRefs(useNavStore())
+  isLoading.value = false
+}
+
+let loading: LoadingInstance
+
+export function ajaxStartLoading() {
+  loading = ElLoadingService({
+    lock: true,
+    text: '拼命加载中...',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+}
+
+export const ajaxEndLoading = () => loading?.close?.()
+
+const http = useHttp<{
+  code: number
+  data: any
+  msg: string
+}>({
+  timeout: -1,
+  loading: {
+    start: ajaxStartLoading,
+    end: ajaxEndLoading,
+  },
+  fail: (err: any) => {
+    console.log('🚀 ~ file: api.ts:28 ~ err:', err)
+    const user = useUserStore()
+    if (err?.response?.status === 401) {
+      user.removeToken()
+      checkLogin(true)
+
+      throw err
+    }
+
+    if (typeof err === 'string') {
+      // 通用失败，弹出提示信息
+      ElMessage.error(err)
+    }
+    if ((err as any) instanceof Error) {
+      ElMessage.error(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 function 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, YoungHttpAuthReq, YoungHttpFreeReq } from '@bluesyoung/http'
+
+export function 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'