create-young-proj 1.0.0 → 1.1.0

package/template-nuxt-admin/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/template-nuxt-admin/server/utils/index.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-29 10:29:52
+ * @LastEditTime: 2023-06-17 16:20:40
+ * @Description:
+ */
+import type { ServerOptions as HTTPProxyOptions } from 'http-proxy'
+import ProxyModule from 'http-proxy'
+import type { H3Event } from 'h3'
+
+/**
+ * @param target 接口代理的具体地址
+ * @param defaults 代理配置
+ * @example
+ * export default defineEventHandler(async (event) => {
+ *   const proxy = createTransparentProxy(`http://127.0.0.1:3333`);
+ *   await proxy.handle(event);
+ * });
+ */
+export function createTransparentProxy(target: string, defaults: HTTPProxyOptions = {}) {
+  const proxy = ProxyModule.createProxy()
+  const handle = (event: H3Event, opts: HTTPProxyOptions = {}) => {
+    return new Promise<void>((resolve, reject) => {
+      proxy.web(event.node.req, event.node.res, { target, ...defaults, ...opts }, (error: any) => {
+        if (error.code !== 'ECONNRESET')
+          reject(error)
+
+        resolve()
+      })
+    })
+  }
+  return {
+    proxy,
+    handle,
+  }
+}

package/template-nuxt-admin/styles/element.scss

@@ -0,0 +1,30 @@
+// el-table 样式
+.el-table {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+
+  table {
+    width: 100%;
+  }
+
+  .el-table__header th {
+    font-weight: bold;
+    color: var(--el-text-color-primary);
+    background: var(--el-fill-color-light) !important;
+  }
+}
+
+// el-dialog 样式
+.el-dialog {
+  .el-dialog__header {
+    padding: 15px 20px;
+    margin: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    .el-dialog__title {
+      font-size: 17px;
+    }
+  }
+}

package/template-nuxt-admin/styles/index.scss

@@ -0,0 +1,59 @@
+@import './element.scss';
+
+// 滚动条样式
+@mixin base-scrollbar {
+  &::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(0 0 0 / 10%);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(0 0 0 / 30%);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background-color: #f8fafc;
+  }
+}
+
+html body,
+#__nuxt {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 100vh;
+  padding: 0;
+  overflow: auto;
+  font-family: 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  color: var(--el-color-black);
+  background: #f6f8f9;
+  -webkit-font-smoothing: antialiased;
+  @include base-scrollbar;
+
+  div {
+    @include base-scrollbar;
+  }
+
+  .layout-admin-wrapper {
+    .app-main-container {
+      @include base-scrollbar;
+    }
+  }
+}
+
+:root {
+  --el-color-white: #fff;
+  --el-color-grey: rgb(0 0 0 / 65%);
+}

package/template-nuxt-admin/styles/variable.scss

@@ -0,0 +1,103 @@
+// 框架默认主题色
+$base-color-default: #1890ff;
+
+// 默认层级
+$base-z-index: 999;
+
+// 横向布局纵向布局时菜单背景色
+$base-menu-background: #001529;
+
+// 菜单文字颜色
+$base-menu-color: hsl(0deg 0% 100% / 95%);
+
+// 菜单选中文字颜色
+$base-menu-color-active: hsl(0deg 0% 100% / 95%);
+
+// 菜单选中背景色
+$base-menu-background-active: $base-color-default;
+$base-color-blue: $base-color-default;
+
+// 标题颜色
+$base-title-color: #fff;
+
+// 字体大小配置
+$base-font-size-small: 12px;
+$base-font-size-default: 14px;
+$base-font-size-big: 16px;
+$base-font-size-bigger: 18px;
+$base-font-size-max: 22px;
+$base-font-color: #606266;
+$base-color-blue: $base-color-default;
+$base-color-green: #41b882;
+$base-color-white: #fff;
+$base-color-black: #000;
+$base-color-yellow: #ffa91b;
+$base-color-orange: #ff6700;
+$base-color-red: #f34d37;
+$base-color-gray: rgb(0 0 0 / 65%);
+$base-main-width: 1279px;
+$base-border-radius: 4px;
+$base-border-color: #dcdfe6;
+
+// 输入框高度
+$base-input-height: 32px;
+
+// 默认paddiing
+$base-padding: 20px;
+
+// 默认阴影
+$base-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+
+// 横向布局时top-bar、logo、一级菜单的高度
+$base-top-bar-height: 60px;
+
+// 纵向布局时logo的高度
+$base-logo-height: 75px;
+
+// 顶部nav-bar的高度
+$base-nav-bar-height: 60px;
+
+// 顶部多标签页tabs-bar的高度
+$base-tabs-bar-height: 55px;
+
+// 顶部多标签页tabs-bar中每一个item的高度
+$base-tag-item-height: 34px;
+
+// 菜单li标签的高度
+$base-menu-item-height: 50px;
+
+// 头部高度
+$base-header-height: -webkit-calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
+$base-header-height: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
+
+// app-footer高度
+$base-app-footer-height: 55px;
+
+// app-main的高度
+$base-app-main-height: -webkit-calc(
+  100vh - $base-header-height - 40px
+);
+$base-app-main-height: calc(
+  100vh - $base-header-height - 40px
+);
+
+// 纵向布局时左侧导航未折叠时的宽度
+$base-left-menu-width: 256px;
+
+// 纵向布局时左侧导航未折叠时右侧内容的宽度
+$base-right-content-width: -webkit-calc(100% - #{$base-left-menu-width});
+$base-right-content-width: calc(100% - #{$base-left-menu-width});
+
+// 纵向布局时左侧导航已折叠时的宽度
+$base-left-menu-width-min: 64px;
+
+// 纵向布局时左侧导航已折叠时右侧内容的宽度
+$base-right-content-width-min: -webkit-calc(100% - #{$base-left-menu-width-min});
+$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
+
+// 默认动画
+$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
+  background 0s, color 0s, font-size 0s;
+
+// 默认动画长
+$base-transition-time: 0.3s;

package/template-nuxt-admin/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true
+  }
+}

package/template-nuxt-admin/typings/global.d.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-26 11:57:29
+ * @LastEditTime: 2023-07-26 14:01:32
+ * @Description:
+ */
+interface BaseQuery {
+  pageNum: number
+  pageSize: number
+  total: number
+  noPagination?: boolean
+}
+
+type PagesData = {
+  list: any[]
+} & BaseQuery

package/template-nuxt-admin/typings/system.d.ts

@@ -0,0 +1,67 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:03:42
+ * @LastEditTime: 2023-07-26 11:49:13
+ * @Description:
+ */
+import type { MethodObj } from '~/composables/config'
+
+declare global {
+  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>
+
+  interface ApiItem {
+    id: number
+    path: string
+    desc: string
+    category: string
+    method: keyof typeof MethodObj
+    roleIds: number[]
+    creator?: string
+    title?: string
+  }
+
+  interface RoleItem {
+    createdAt?: string
+    creator?: string
+    desc: string
+    id: number
+    keyword: string
+    name: string
+    not_dev?: number
+    sort?: number
+    status: number
+    updatedAt?: string
+  }
+
+  interface UserItem {
+    id: number
+    username: string
+    nickname: string
+    mobile: string
+    roleId: number
+    status: number
+    role_name?: string
+    creator?: string
+    newPassword?: string
+    initPassword?: string
+  }
+}

package/template-nuxt-admin/typings/user.d.ts

@@ -0,0 +1,19 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 08:58:31
+ * @LastEditTime: 2023-07-24 10:36:06
+ * @Description:
+ */
+interface UserLoginRes {
+  uuid: string
+  nickname: string
+  headimgurl: string
+  phone: string
+  token: string
+}
+
+interface LoginForm {
+  mobile: string
+  password: string
+  vercode: string
+}

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

@@ -0,0 +1,40 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-06-15 08:59:22
+ * @LastEditTime: 2023-05-27 19:36:43
+ * @Description:
+ */
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+    }),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
+  transformers: [
+    // 不加 enforce 会有 bug
+    transformerDirectives({ enforce: 'pre' }),
+    transformerVariantGroup(),
+  ],
+})

package/template-nuxt-admin/utils/tool.ts

@@ -0,0 +1,195 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-28 16:01:24
+ * @LastEditTime: 2023-11-07 14:56:03
+ * @Description:
+ */
+import { randomId } from '@bluesyoung/utils'
+import { createVNode, render } from 'vue'
+import YoungChangePassword from '@/components/YoungChangePassword.vue'
+
+/**
+ * 补0函数
+ */
+export function addZero(s: number) {
+  return s < 10 ? `0${s}` : s
+}
+
+/**
+ * 生成数组的随机索引
+ */
+export function getRandomIndex(length: number) {
+  return Math.floor(Math.random() * length)
+}
+
+/**
+ * 设备唯一标识
+ */
+export function getUUID() {
+  return useLocalStorage('uuid', randomId() + randomId() + randomId() + randomId()).value
+}
+
+/**
+ * html 转 text
+ */
+export function html2text(html: string) {
+  if (!html)
+    return ''
+
+  return html.toString().replace(/<[^>]+>/g, '')
+}
+
+/**
+ * 响应式的屏幕大小
+ */
+export const WindowSize = reactive({
+  'lt-sm': useMediaQuery('(max-width: 639.9px)'),
+  'sm': useMediaQuery('(min-width: 640px)'),
+  'lt-md': useMediaQuery('(max-width: 767.9px)'),
+  'md': useMediaQuery('(min-width: 768px)'),
+  'lt-lg': useMediaQuery('(max-width: 1023.9px)'),
+  'lg': useMediaQuery('(min-width: 1024px)'),
+  'lt-xl': useMediaQuery('(max-width: 1279.9px)'),
+  'xl': useMediaQuery('(min-width: 1280px)'),
+  'lt-2xl': useMediaQuery('(max-width: 1535.9px)'),
+  '2xl': useMediaQuery('(min-width: 1536px)'),
+})
+
+/**
+ * 当前浏览器是否支持下载
+ */
+export function isSupportDownload() {
+  const NotAllowed = [/Alipay/gim, /BYTEDANCE/gim, /DINGTALK/gim, /MICROMESSENGER/gim]
+
+  return !NotAllowed.some(reg => reg.test(navigator.userAgent))
+}
+
+/**
+ * 登录校验
+ */
+export function checkLogin(force = true) {
+  const { hasLogin } = storeToRefs(useUserStore())
+
+  if (!hasLogin.value) {
+    if (force) {
+      ElMessage.error('未登录或登录过期，请登录后再试')
+
+      navigateTo(`/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`, {
+        replace: true,
+      })
+    }
+    return false
+  }
+  else {
+    return true
+  }
+}
+
+/**
+ * 页面滚动是否超过一定距离
+ */
+export function useScrollOver(distance = 40) {
+  const { y } = useScroll(window)
+  const scrolled = computed(() => y.value > distance)
+
+  return {
+    scrolled,
+  }
+}
+
+/**
+ * 生成用户导航栏
+ */
+export async function generateNavData() {
+  if (checkLogin(true)) {
+    // 清除没有子元素的children
+    const clearChildren = (arr: NavArrItem[]) => {
+      for (const item of arr) {
+        if (
+          item?.children?.length === 0
+        || item.children?.filter(n => +n.visible === 1).length === 0
+        )
+          delete item.children
+        else if (item.children)
+          clearChildren(item.children)
+      }
+      return arr
+    }
+
+    const { nav_arr, flat_nav_arr, auth_routes } = storeToRefs(useNavStore())
+
+    const tree = await apis.get.getUserMenuTree()
+    const menu = Object.values(tree)
+
+    let role_route: string[] = []
+    const generateRoleRoute = (arr: NavArrItem[], num?: number): string[] => {
+      if (num === 1) {
+        role_route = []
+        flat_nav_arr.value = []
+      }
+      for (const item of arr) {
+        if (item.component) {
+          role_route.push(item.component);
+          +item.visible === 1 && flat_nav_arr.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
+    }
+
+    auth_routes.value = generateRoleRoute(menu, 1)
+
+    /**
+     * 最终导航数组
+     */
+    nav_arr.value = clearChildren(menu.filter(item => +item.visible === 1))
+  }
+}
+
+/**
+ * 权限校验
+ * @param path
+ */
+export function hasPermission(path: string) {
+  const { auth_routes } = storeToRefs(useNavStore())
+  return ['/', ...auth_routes.value].includes(path)
+}
+
+/**
+ * 修改密码
+ */
+export function useChangePassword() {
+  const appendTo = document.createElement('div')
+
+  const vnode = createVNode(YoungChangePassword, {
+    onDestroy: () => {
+      document.body.removeChild(appendTo)
+    },
+  })
+  render(vnode, appendTo)
+
+  document.body.appendChild(appendTo)
+
+  vnode.component!.exposed?.show()
+}
+
+/**
+ * 修改状态二次确认
+ */
+export function useConfirm(cbk: Function, tip = '确定修改状态嘛？', successTip?: string) {
+  ElMessageBox.confirm(tip, '提示', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  })
+    .then(async () => {
+      await cbk()
+      successTip && ElMessage.success(successTip)
+    })
+    .catch(() => null)
+}