create-young-proj 1.0.0 → 1.1.0

package/template-nuxt-admin/layouts/default.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 11:49:00
+ * @LastEditTime: 2023-11-07 16:58:16
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse, zen_mode, zen_mode_helper } = storeToRefs(useNavStore())
+const { enter, isSupported } = useFullscreen()
+
+const fullTip = useLocalStorage('全屏提示', false)
+
+const { userId, nick } = storeToRefs(useUserStore())
+
+const waterTxt = computed(() => `${userId.value}\n${nick.value}`)
+
+onMounted(() => {
+  const { innerWidth, innerHeight } = window
+  if (innerHeight > innerWidth) {
+    isCollapse.value = true
+
+    if (fullTip.value)
+      return
+
+    if (!isSupported.value) {
+      showDialog({
+        title: '推荐使用场景',
+        message: '系统浏览器 + 横屏使用',
+      }).finally(() => fullTip.value = true)
+    }
+    else {
+      showDialog({
+        title: '推荐使用场景',
+        message: '系统浏览器 + 全屏模式 + 横屏使用',
+        confirmButtonText: '进入全屏',
+      }).then(async () => {
+        try {
+          await enter()
+        }
+        catch (e) {
+          showDialog({
+            message: '您的设备暂不支持全屏功能，请解锁系统方向锁定后横屏使用！',
+          })
+        }
+      }).catch(() => null).finally(() => fullTip.value = true)
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="layout-admin-wrapper">
+    <!-- 全局水印, 按需启用 -->
+    <!-- <VanWatermark
+      v-if="waterTxt"
+      :content="waterTxt"
+      :gap-x="30"
+      :gap-y="10"
+      full-page
+      text-color="#eee"
+    /> -->
+    <!-- SubMenu -->
+    <LayoutSideBar v-show="!zen_mode" />
+    <div
+      class="layout-container-vertical" :class="{
+        'is-collapse': isCollapse,
+        'is-zen-mode': zen_mode,
+        'is-zen-mode-helper': zen_mode_helper,
+      }"
+    >
+      <div class="layout-main">
+        <!-- Header -->
+        <div
+          class="layout-header" :class="{
+            'is-collapse': isCollapse,
+            'is-zen-mode': zen_mode,
+          }"
+        >
+          <LayoutNavBar v-show="!zen_mode || zen_mode_helper" />
+          <LayoutTabsBar v-show="!zen_mode || zen_mode_helper" lt-lg="!hidden" />
+        </div>
+        <div class="app-main-container">
+          <!-- Main -->
+          <LayoutMain />
+          <!-- Footer -->
+          <!-- <LayoutFooter /> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.layout-admin-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .layout-container-vertical {
+    margin-top: $base-header-height;
+    margin-left: $base-left-menu-width;
+
+    &.is-collapse {
+      margin-left: $base-left-menu-width-min;
+      border-right: 0;
+    }
+
+    &.is-zen-mode {
+      margin-left: 0 !important;
+      margin-top: 0;
+      border-right: 0;
+    }
+
+    &.is-zen-mode-helper {
+      margin-top: $base-header-height;
+    }
+
+    .layout-main {
+      min-height: 100%;
+
+      .layout-header {
+        box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: $base-z-index - 2;
+        width: calc(100% - $base-left-menu-width);
+
+        &.is-collapse {
+          width: calc(100% - $base-left-menu-width-min);
+        }
+
+        &.is-zen-mode {
+          width: 100% !important;
+        }
+      }
+    }
+  }
+
+  @screen lt-lg {
+    .layout-container-vertical {
+      @apply block;
+      margin-left: 0;
+      // margin-left: $base-left-menu-width-min;
+      margin-top: $base-top-bar-height !important;
+
+      &.is-collapse {
+        @apply ml-0;
+      }
+
+      .layout-header {
+        // width: calc(100% - $base-left-menu-width-min) !important;
+        width: 100% !important;
+
+        // &.is-collapse {
+        //   width: 100% !important;
+        // }
+      }
+    }
+  }
+}
+</style>

package/template-nuxt-admin/middleware/auth.global.ts

@@ -0,0 +1,66 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 10:02:19
+ * @LastEditTime: 2023-11-07 14:55:45
+ * @Description:
+ */
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (to.matched.length === 0)
+    throw createError({ message: '页面不存在', statusCode: 404 })
+
+  const { hasLogin } = storeToRefs(useUserStore())
+  const { nav_arr, flat_nav_arr, nodeMap, breadcrumb_arr } = storeToRefs(useNavStore())
+
+  const changeTitle = () => {
+    let nav = flat_nav_arr.value.find(item => item.component === to.path)
+
+    breadcrumb_arr.value.length = 0
+
+    if (nav && nav.title) {
+      to.meta.title = nav.title
+
+      while (nav) {
+        breadcrumb_arr.value.unshift(nav.title!)
+        if (nav.parent_id)
+          nav = nodeMap.value.get(nav.parent_id.toString())
+        else
+          break
+      }
+    }
+
+    document.title = (to.meta.title as string) || window.__YOUNG_ENV__.NUXT_PUBLIC_TITLE
+  }
+
+  const { addView } = useTagsStore()
+
+  // 页面无需登录
+  if (to.meta.auth === false) {
+    changeTitle()
+    addView(to)
+    return
+  }
+
+  if (!hasLogin.value && to.path !== '/login') {
+    // 页面需要登录，但是未登录
+    ElMessage.error('未登录或登录过期，请重新登录')
+    return navigateTo(`/login?redirect=${encodeURIComponent(to.fullPath)}`, {
+      replace: true,
+    })
+  }
+  else if (hasLogin.value && to.path === '/login') {
+    // 已登录进入登录页
+    return navigateTo('/', {
+      replace: true,
+    })
+  }
+  else {
+    nav_arr.value.length === 0 && (await generateNavData())
+    if (hasPermission(to.path)) {
+      changeTitle()
+      addView(to)
+    }
+    else {
+      throw createError({ message: '无权限，请联系系统管理员', statusCode: 403 })
+    }
+  }
+})

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

@@ -0,0 +1,106 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-25 19:45:20
+ * @LastEditTime: 2023-11-07 15:56:03
+ * @Description:
+ */
+import { resolve } from 'node:path'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  ssr: false,
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'zh-CN',
+      },
+      viewport: 'width=device-width,initial-scale=1.0,user-scalable=no,shrink-to-fit=no',
+      meta: [
+        { name: 'theme-color', content: '#ffffff' },
+        { name: 'screen-orientation', content: 'portrait' },
+        { name: 'x5-orientation', content: 'portrait' },
+        { name: 'renderer', content: 'webkit' },
+        { name: 'mobile-web-app-capable', content: 'yes' },
+        { name: 'creator', content: 'BluesYoung-web' },
+      ],
+      link: [
+        {
+          rel: 'icon',
+          href: '/favicon.svg',
+        },
+        {
+          rel: 'prefetch',
+          as: 'image',
+          href: '/image_placeholder.svg',
+        },
+        {
+          rel: 'prefetch',
+          as: 'image',
+          href: '/tabbar_bg.png',
+        },
+      ],
+      script: [
+        {
+          innerHTML: `
+            this.globalThis || (this.globalThis = this);
+            window.onerror = function(e) {
+              if (e.toString().includes('ResizeObserver loop')) {
+                return;
+              }
+              console.log(e);
+              window.alert('您的浏览器版本过低，请尝试使用其他浏览器或将浏览器升级至最新版本后重试！');
+              window.alert(e);
+            }
+          `,
+        },
+        {
+          src: '/index.umd.js',
+          async: true,
+        },
+      ],
+    },
+  },
+
+  imports: {
+    dirs: ['utils/**/*.{ts,tsx}'],
+  },
+
+  nitro: {
+    output: {
+      dir: resolve(__dirname, './dist'),
+    },
+    sourceMap: false,
+    minify: true,
+  },
+
+  modules: [
+    '@vueuse/nuxt',
+    '@unocss/nuxt',
+    '@element-plus/nuxt',
+    '@pinia/nuxt',
+    '@vant/nuxt',
+    '@bluesyoung/ui-vue3-element-plus/nuxt',
+  ],
+
+  vite: {
+    build: {
+      // 兼容钉钉浏览器
+      target: 'es2015',
+      sourcemap: false,
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          javascriptEnabled: true,
+          additionalData: '@import "~/styles/variable.scss";',
+        },
+      },
+    },
+  },
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: tag => ['young-float-ball'].includes(tag),
+    },
+  },
+})

package/template-nuxt-admin/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "nuxt-app",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --host",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview --host",
+    "postinstall": "nuxt prepare && simple-git-hooks",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@bluesyoung/casdoor-auth": "^0.1.0",
+    "@bluesyoung/http": "^1.0.1",
+    "@bluesyoung/ui-vue3": "^0.1.1",
+    "@bluesyoung/ui-vue3-element-plus": "1.3.5",
+    "@bluesyoung/utils": "0.2.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "c12": "^1.4.2",
+    "file-saver": "^2.0.5",
+    "http-proxy": "^1.18.1",
+    "jszip": "^3.10.1",
+    "md5": "^2.3.0",
+    "qrcode": "^1.5.3",
+    "sortablejs": "^1.15.0",
+    "vue-cropper": "^1.0.9"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^1.1.0",
+    "@bluesyoung/logger": "^0.0.1",
+    "@element-plus/nuxt": "^1.0.5",
+    "@iconify/json": "^2.2.93",
+    "@pinia/nuxt": "^0.5.1",
+    "@types/file-saver": "^2.0.5",
+    "@types/md5": "^2.3.2",
+    "@types/node": "20.8.10",
+    "@types/qrcode": "^1.5.1",
+    "@unocss/nuxt": "^0.57.2",
+    "@vant/nuxt": "^1.0.2",
+    "@vueuse/nuxt": "^10.2.1",
+    "add": "^2.0.6",
+    "dayjs": "^1.11.9",
+    "element-plus": "^2.3.8",
+    "eslint": "^8.48.0",
+    "lint-staged": "^15.0.2",
+    "nuxt": "^3.8.1",
+    "pinia": "^2.1.4",
+    "sass": "^1.64.0",
+    "simple-git-hooks": "^2.9.0",
+    "typescript": "^5.2.2",
+    "vant": "^4.6.2"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

package/template-nuxt-admin/pages/home/[id].vue

@@ -0,0 +1,28 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 17:35:12
+ * @LastEditTime: 2023-09-15 15:20:25
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  title: '工作台',
+  auth: false,
+  noCache: true,
+})
+
+const { nick } = storeToRefs(useUserStore())
+const { nav_arr } = storeToRefs(useNavStore())
+
+useTabNoCache(() => {
+  nav_arr.value.length === 0 && generateNavData()
+})
+</script>
+
+<template>
+  <div>
+    <div class="text-4xl my-20px text-center font-bold">
+      欢迎回来，{{ nick }}
+    </div>
+  </div>
+</template>

package/template-nuxt-admin/pages/index.vue

@@ -0,0 +1,15 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:27:14
+ * @LastEditTime: 2023-09-18 14:15:35
+ * @Description:
+-->
+<script setup lang="ts">
+definePageMeta({
+  redirect: '/home/index',
+})
+</script>
+
+<template>
+  <div />
+</template>

package/template-nuxt-admin/pages/login.vue

@@ -0,0 +1,199 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 10:03:11
+ * @LastEditTime: 2023-09-15 15:19:59
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isMobile } from '@bluesyoung/utils'
+import type { FormInstance } from 'element-plus'
+
+definePageMeta({
+  auth: false,
+  title: '用户登录',
+  noCache: true,
+  layout: 'blank',
+})
+
+const {
+  NUXT_PUBLIC_LOGIN_LOGO: LoginLogo,
+  NUXT_PUBLIC_LOGIN_BG: LoginBg,
+  NUXT_PUBLIC_TITLE: Title,
+  NUXT_PUBLIC_SUB_TITLE: SubTitle,
+  NUXT_PUBLIC_SLOGAN: SloGan,
+  NUXT_PUBLIC_CURRENT_VERSION: Version,
+} = window.__YOUNG_ENV__
+
+const { SaveFlag, hasLogin, cookie, Exptime } = storeToRefs(useUserStore())
+
+const loginType = ref<'account' | 'code'>('account')
+
+const form = reactive<LoginForm>({
+  mobile: '',
+  vercode: '',
+  password: '',
+})
+
+const formRef = ref<FormInstance>()
+
+function loginHandler() {
+  formRef.value?.validate(async (valid: boolean) => {
+    try {
+      if (valid) {
+        const { enter } = useFullscreen()
+        const { width, height } = useWindowSize()
+
+        const data = await apis.post.login(form)
+        if (data) {
+          cookie.value = data
+          // 三天后过期
+          Exptime.value = Date.now() + 1000 * 60 * 60 * 24 * 3
+          height.value > width.value && enter()
+          showSuccessToast('登录成功！')
+          navigateTo('/')
+        }
+      }
+      else {
+        ElMessage.error('请仔细检查输入内容')
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+  })
+}
+
+useTabNoCache(() => {
+  if (SaveFlag.value && hasLogin.value) {
+    navigateTo({
+      path: '/',
+      replace: true,
+    })
+  }
+})
+</script>
+
+<template>
+  <img :src="LoginBg" class="absolute object-center object-cover w-100vw h-100vh blur-6 brightness-50">
+  <div class="flex flex-col items-center login-container pt-6%">
+    <div class="w-80px h-80px">
+      <img class="h-full" :src="LoginLogo" referrerpolicy="no-referrer">
+    </div>
+    <div class="title">
+      {{ Title }}
+    </div>
+    <div v-if="SubTitle" class="sub-title" v-html="SubTitle" />
+
+    <ElCard class="w-430px mt-3%" lt-sm="w-[96%] mx-[2%]">
+      <ElForm ref="formRef" :model="form">
+        <VanTabs v-model:active="loginType" size="large" @change="formRef?.resetFields?.()">
+          <VanTab name="account" title="账密登录">
+            <ElFormItem
+              prop="mobile" :rules="[
+                { required: true, trigger: 'blur', message: '请输入手机号' },
+                { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) },
+              ]" class="mt-20px"
+            >
+              <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+            </ElFormItem>
+            <ElFormItem
+              v-if="loginType === 'account'" prop="password" :rules="[
+                { required: true, trigger: 'blur', message: '请输入密码' },
+                { min: 8, max: 16, trigger: 'blur', message: '请输入8-16位字符！' },
+              ]"
+            >
+              <ElInput
+                v-model.trim="form.password" type="password" minlength="8" maxlength="16" placeholder="请输入密码"
+                class="!h-52px" clearable show-password @keyup.enter="loginHandler"
+              />
+            </ElFormItem>
+          </VanTab>
+          <VanTab name="code" title="短信登录">
+            <ElFormItem
+              prop="mobile" :rules="[
+                { required: true, trigger: 'blur', message: '请输入手机号' },
+                { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) },
+              ]" class="mt-20px"
+            >
+              <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+            </ElFormItem>
+            <ElFormItem
+              v-if="loginType === 'code'" prop="vercode"
+              :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]"
+            >
+              <YoungCodeInput v-model.trim="form.vercode" :tel="form.mobile" @enter="loginHandler" />
+            </ElFormItem>
+          </VanTab>
+        </VanTabs>
+
+        <ElFormItem>
+          <div class="flex justify-between w-full">
+            <ElCheckbox v-model="SaveFlag">
+              三天之内免登录
+            </ElCheckbox>
+            <ElButton v-show="loginType === 'account'" type="warning" link @click="useChangePassword">
+              忘记密码？
+            </ElButton>
+          </div>
+        </ElFormItem>
+      </ElForm>
+
+      <VanButton type="primary" class="w-full" @click="loginHandler">
+        登录
+      </VanButton>
+    </ElCard>
+
+    <div v-if="SloGan" class="slogan">
+      {{ SloGan }}
+    </div>
+    <div class="content-wrapper">
+      <div class="mb-5% text-[#c0c0c0] text-16px">
+        {{ Version }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@-webkit-keyframes left-to-right {
+  from {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  to {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes left-to-right {
+  from {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  to {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.login-container {
+  @apply relative overflow-hidden h-100vh w-full;
+
+  .title {
+    @apply mt-10px text-[#fff] text-24px font-bold;
+  }
+
+  .sub-title {
+    @apply mt-10px text-[#f5f5f5] text-16px mb-30px;
+  }
+
+  .slogan {
+    @apply flex flex-1 justify-center items-center text-[#fff] font-500 text-26px text-shadow;
+    -webkit-animation: left-to-right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    animation: left-to-right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+}
+</style>