create-young-proj 0.6.1 → 0.8.0

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

@@ -0,0 +1,114 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 17:13:59
+ * @LastEditTime: 2023-08-25 16:49:28
+ * @Description:
+ */
+import type { RouteLocationNormalized } from 'vue-router';
+
+// hack nuxt3 的 keep-alive 没办法像 vue3 那样自由控制
+export const useTabReOpen = (cbk: Function = () => console.log('this tab page is reopen')) => {
+  const tagState = useTagsStore();
+  const route = useRoute();
+
+  tagState.$onAction(({ name, args, after }) => {
+    if (name === 'addToCache') {
+      if (args[0].name === route.name) {
+        after(() => cbk());
+      }
+    }
+  });
+
+  cbk();
+};
+
+// @ts-ignore
+export const useTagsStore = defineStore('useTagsStore', {
+  state: () => {
+    const visitedViews = ref<RouteLocationNormalized[]>([]);
+    const cachedViews = ref<string[]>([]);
+
+    return {
+      visitedViews,
+      cachedViews,
+    };
+  },
+  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 as string)) {
+        null;
+      } else if (!view.meta?.noCache) {
+        this.cachedViews.push(view.name as string);
+      }
+    },
+    /**
+     * 关闭某个页面
+     */
+    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 as string);
+      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-nuxt-admin/composables/user.ts

@@ -0,0 +1,29 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-06-21 12:03:42
+ * @LastEditTime: 2023-07-24 14:05:13
+ * @Description:
+ */
+export const useUserStore = defineStore('useUserStore', () => {
+  const cookie = useLocalStorage<UserLoginRes>('token', {} as UserLoginRes);
+
+  const hasLogin = computed(() => !!cookie.value?.uuid);
+  const avatar = computed(() => cookie.value?.headimgurl);
+  const nick = computed(() => cookie.value?.nickname);
+  const token = computed(() => cookie.value?.token);
+
+  const SaveFlag = useLocalStorage('n天免登', true);
+
+  return {
+    cookie,
+    hasLogin,
+    avatar,
+    nick,
+    token,
+    SaveFlag,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
+}

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

@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE = http://192.168.10.168:7001

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

@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE = http://192.168.10.168:9000

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

@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE = http://192.168.10.168:9000

package/template-nuxt-admin/env.d.ts

@@ -0,0 +1,47 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-26 11:50:06
+ * @LastEditTime: 2023-07-24 10:31:33
+ * @Description:
+ */
+
+/**
+ * 环境变量
+ */
+interface ImportMetaEnv {
+  /**
+   * 当前版本
+   */
+  NUXT_PUBLIC_CURRENT_VERSION: string;
+  /**
+   * 后台服务器地址
+   */
+  NUXT_PUBLIC_API_BASE: string;
+  /**
+   * 后台标题
+   */
+  NUXT_PUBLIC_TITLE: string;
+  /**
+   * 后台副标题
+   */
+  NUXT_PUBLIC_SUB_TITLE?: string;
+  /**
+   * slogan
+   */
+  NUXT_PUBLIC_SLOGAN?: string;
+  /**
+   * 登录背景图
+   */
+  NUXT_PUBLIC_LOGIN_BG: string;
+  /**
+   * 后台 logo
+   */
+  NUXT_PUBLIC_LOGIN_LOGO: string;
+};
+
+declare interface Window {
+  /**
+   * 注入到前端使用的环境变量
+   */
+  __YOUNG_ENV__: ImportMetaEnv;
+};

package/template-nuxt-admin/error.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-06-12 15:00:07
+ * @LastEditTime: 2023-07-31 12:10:16
+ * @Description:
+-->
+<script lang="ts" setup>
+import type { NuxtError } from '#app';
+
+const props = defineProps<{
+  error: NuxtError;
+}>();
+
+let timer: NodeJS.Timer;
+
+const i = ref(5);
+
+const clear = () => {
+  clearError();
+  clearInterval(timer);
+  location.replace('/');
+};
+
+const NotShowError = computed(() => {
+  return props.error.message === 'Request failed with status code 401';
+});
+
+onMounted(() => {
+  if (process.server) {
+    return;
+  }
+  console.log(props.error, props.error.statusCode);
+  if (process.dev) {
+    console.log('开发模式，不自动清理');
+    return;
+  }
+  timer = setInterval(() => {
+    i.value--;
+    if (i.value === 0) {
+      clear();
+    }
+  }, 1e3);
+});
+</script>
+<template>
+  <div v-if="!NotShowError" class="flex w-full h-full flex-col justify-center items-center">
+    <div class="text-5xl my-6">{{ error.statusCode }}</div>
+    <div class="text-lg my-2">{{ error.message || error.statusMessage || '出错啦~' }}</div>
+
+    <div class="mb-2">{{ i }}s 后自动跳转首页</div>
+    <ElButton @click="clear">立即返回首页</ElButton>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 13:53:10
+ * @LastEditTime: 2023-07-21 13:53:10
+ * @Description:
+-->
+<template>
+  <NuxtPage />
+</template>

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

@@ -0,0 +1,124 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 11:49:00
+ * @LastEditTime: 2023-07-28 17:41:44
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse } = storeToRefs(useNavStore());
+const { enter, isSupported } = useFullscreen();
+
+const fullTip = useLocalStorage('全屏提示', false);
+
+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">
+    <!-- SubMenu -->
+    <LayoutSideBar />
+    <div class="layout-container-vertical" :class="{ 'is-collapse': isCollapse }">
+      <div class="layout-main">
+        <!-- Header -->
+        <div class="layout-header" :class="{ 'is-collapse': isCollapse }">
+          <LayoutNavBar />
+          <LayoutTabsBar 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;
+    }
+
+    .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);
+        }
+      }
+    }
+  }
+
+  @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,50 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-21 10:02:19
+ * @LastEditTime: 2023-08-02 14:57:03
+ * @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 } = storeToRefs(useNavStore());
+
+  const changeTitle = () => {
+    const nav = flat_nav_arr.value.find((item) => item.component === to.path);
+    if (nav && nav.title) {
+      to.meta.title = nav.title;
+    }
+
+    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') {
+    // 页面需要登录，但是未登录
+    showFailToast('未登录或登录过期，请重新登录');
+    return navigateTo(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
+  } else if (hasLogin.value && to.path === '/login') {
+    // 已登录进入登录页
+    return navigateTo('/');
+  } else {
+    nav_arr.value.length === 0 && (await generateNavData());
+    if (hasPermission(to.path)) {
+      changeTitle();
+      addView(to);
+      return;
+    } else {
+      throw createError({ message: '无权限，请联系系统管理员', statusCode: 403 });
+    }
+  }
+});

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

@@ -0,0 +1,101 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-05-25 19:45:20
+ * @LastEditTime: 2023-07-28 17:35:11
+ * @Description:
+ */
+import { resolve } from 'node:path';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  ssr: false,
+  app: {
+    head: {
+      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: 'preload',
+          as: 'image',
+          href: '/image_placeholder.svg',
+        },
+        {
+          rel: 'preload',
+          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);
+            }
+          `,
+        },
+      ],
+    },
+  },
+
+  lazyLoad: {
+    audio: false,
+    // 默认使用原生的 loading="lazy"
+    // native: true,
+    // js 实现，仅指令生效 v-lazy-load
+    // directiveOnly: true,
+    // @ts-ignore js 实现的占位图
+    defaultImage: '/image_placeholder.svg',
+  },
+
+  nitro: {
+    output: {
+      dir: resolve(__dirname, './dist'),
+    },
+  },
+
+  devtools: {
+    enabled: true,
+  },
+
+  modules: [
+    '@vueuse/nuxt',
+    '@unocss/nuxt',
+    '@element-plus/nuxt',
+    '@pinia/nuxt',
+    '@vant/nuxt',
+    'nuxt-lazy-load',
+  ],
+
+  pinia: {
+    autoImports: ['defineStore', 'storeToRefs', 'acceptHMRUpdate'],
+  },
+
+  vite: {
+    build: {
+      // 兼容钉钉浏览器
+      target: 'es2015',
+      sourcemap: false,
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          javascriptEnabled: true,
+          additionalData: '@import "~/styles/variable.scss";',
+        },
+      },
+    },
+  },
+});

package/template-nuxt-admin/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --host",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview --host",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@bluesyoung/logger": "^0.0.1",
+    "@element-plus/nuxt": "^1.0.5",
+    "@iconify/json": "^2.2.93",
+    "@nuxt/devtools": "^0.8.2",
+    "@pinia/nuxt": "^0.4.11",
+    "@types/file-saver": "^2.0.5",
+    "@types/node": "20.5.7",
+    "@types/qrcode": "^1.5.1",
+    "@unocss/nuxt": "^0.55.4",
+    "@vant/nuxt": "^1.0.2",
+    "@vueuse/nuxt": "^10.2.1",
+    "dayjs": "^1.11.9",
+    "element-plus": "^2.3.8",
+    "nuxt": "^3.7.0",
+    "nuxt-lazy-load": "^3.0.4",
+    "pinia": "^2.1.4",
+    "sass": "^1.64.0",
+    "vant": "^4.6.2"
+  },
+  "dependencies": {
+    "@bluesyoung/http": "0.3.4",
+    "@bluesyoung/ui-vue3": "^0.1.1",
+    "@bluesyoung/ui-vue3-element-plus": "0.11.5",
+    "@bluesyoung/utils": "^0.2.1",
+    "c12": "^1.4.2",
+    "file-saver": "^2.0.5",
+    "http-proxy": "^1.18.1",
+    "jszip": "^3.10.1",
+    "qrcode": "^1.5.3",
+    "sortablejs": "^1.15.0",
+    "vue-cropper": "^0.6.2"
+  }
+}

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

@@ -0,0 +1,28 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 17:35:12
+ * @LastEditTime: 2023-07-28 11:34:29
+ * @Description:
+-->
+<script lang="ts" setup>
+definePageMeta({
+  title: '工作台',
+  auth: false,
+  noCache: true
+});
+
+const { nick } = storeToRefs(useUserStore());
+const { nav_arr } = storeToRefs(useNavStore());
+
+onMounted(() => {
+  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,20 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 09:27:14
+ * @LastEditTime: 2023-07-23 16:23:00
+ * @Description:
+-->
+<script setup lang="ts">
+definePageMeta({
+  noCache: true
+});
+
+navigateTo({
+  path: '/home/index',
+  replace: true
+});
+</script>
+
+<template>
+  <div />
+</template>