create-young-proj 0.13.0 → 1.1.0-alpha.0

package/template-nuxt-admin/components/YoungEditor.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-08-04 17:03:05
+ * @LastEditTime: 2023-11-07 14:17:33
+ * @Description:
+-->
+<script lang="ts" setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+const prop = withDefaults(defineProps<{
+  modelValue: string
+  disabled: boolean
+  height?: number
+  uploadFn: (file: File) => Promise<string>
+}>(), {
+  height: 410,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void
+}>()
+// 编辑器实例，必须用 shallowRef，重要！
+const editorRef = shallowRef()
+
+// 编辑器配置
+const editorConfig = {
+  placeholder: '请输入内容...',
+  MENU_CONF: {
+    uploadImage: {
+      /**
+       * 自定义图片上传
+       */
+      customUpload: async (file: File, insertFn: Function) => {
+        const url = await prop.uploadFn(file)
+        insertFn(url)
+      },
+    },
+  },
+}
+
+watchEffect(async () => {
+  while (!editorRef.value)
+    await nextTick()
+
+  if (prop.disabled)
+    editorRef.value?.disable()
+  else
+    editorRef.value?.enable()
+})
+
+// 组件销毁时，及时销毁编辑器
+onBeforeUnmount(() => {
+  editorRef.value?.destroy()
+})
+
+const toolbarConfig = {
+  excludeKeys: [
+    'insertVideo', 'uploadVideo', 'editVideoSize', 'group-video',
+  ],
+}
+</script>
+
+<template>
+  <div class="border border-[#ccc]">
+    <!-- 工具栏 -->
+    <Toolbar :editor="editorRef" :default-config="toolbarConfig" class="border-b border-[#ccc]" />
+    <!-- 编辑器 -->
+    <Editor
+      :model-value="modelValue" :default-config="editorConfig"
+      :style="{ height: `${height}px` }" class="overflow-y-auto" :class="{ 'cursor-not-allowed': disabled }"
+      @update:model-value="(v) => emit('update:modelValue', v)" @on-created="(v) => editorRef = v"
+    />
+  </div>
+</template>
+
+<style>
+.w-e-full-screen-container {
+  z-index: 1;
+}
+</style>

package/template-nuxt-admin/components/ZenMode.vue

@@ -0,0 +1,21 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-11-07 15:28:35
+ * @LastEditTime: 2023-11-07 16:07:52
+ * @Description: 工作区全屏切换
+-->
+<script lang="ts" setup>
+const { zen_mode, zen_mode_helper } = storeToRefs(useNavStore())
+
+function toggle() {
+  zen_mode.value = !zen_mode.value
+  if (zen_mode.value)
+    zen_mode_helper.value = false
+}
+</script>
+
+<template>
+  <ElButton circle :title="zen_mode ? '恢复正常布局' : '工作区全屏'" :type="zen_mode ? 'danger' : 'primary'" @click="toggle">
+    <div class="i-bi-person-workspace" />
+  </ElButton>
+</template>

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

@@ -1,11 +1,11 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 16:38:20
- * @LastEditTime: 2023-09-13 09:46:18
+ * @LastEditTime: 2023-11-07 16:01:17
  * @Description:
 -->
 <script lang="ts" setup>
-const { isCollapse, breadcrumb_arr } = storeToRefs(useNavStore())
+const { isCollapse, breadcrumb_arr, zen_mode } = storeToRefs(useNavStore())
 
 function collapseHandler() {
   if (WindowSize['lt-lg']) {
@@ -47,6 +47,7 @@ function collapseHandler() {
       </ElBreadcrumb>
     </div>
     <div class="right-panel">
+      <ZenMode />
       <TopSearch />
       <ScreenFull />
       <TopUser />

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-06-20 17:14:58
- * @LastEditTime: 2023-09-08 17:33:20
+ * @LastEditTime: 2023-11-07 14:55:10
  * @Description:
  */
 import { useHttp } from '@bluesyoung/http'
@@ -53,22 +53,14 @@ const http = useHttp<{
 
     if (typeof err === 'string') {
       // 通用失败，弹出提示信息
-      showNotify({
-        type: 'danger',
-        message: err,
-      })
+      ElMessage.error(err)
     }
     if ((err as any) instanceof Error) {
-      showNotify({
-        type: 'danger',
-        // 接口出错
-        message:
-          err?.response?.data?.message
-          || err?.response?.data?.msg
-          || err?.response?.data
-          || err.message
-          || '网络错误！',
-      })
+      ElMessage.error(err?.response?.data?.message
+        || err?.response?.data?.msg
+        || err?.response?.data
+        || err.message
+        || '网络错误！')
     }
 
     throw err

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

@@ -1,12 +1,10 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-07-21 15:20:01
- * @LastEditTime: 2023-07-21 15:49:22
+ * @LastEditTime: 2023-11-07 14:48:21
  * @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',

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-06-01 12:03:44
- * @LastEditTime: 2023-09-15 15:23:04
+ * @LastEditTime: 2023-11-07 15:50:47
  * @Description:
  */
 export const useNavStore = defineStore('useNavStore', () => {
@@ -56,6 +56,14 @@ export const useNavStore = defineStore('useNavStore', () => {
       document.body.style.overflow = 'auto'
   })
 
+  /**
+   * 工作区全屏控制
+   */
+  const zen_mode = ref(false)
+  /**
+   * 工作区全屏时，临时显示顶部导航栏
+   */
+  const zen_mode_helper = ref(false)
   return {
     title,
     sub_title,
@@ -68,6 +76,8 @@ export const useNavStore = defineStore('useNavStore', () => {
     nodeMap,
     breadcrumb_arr,
     generateNodeMap,
+    zen_mode,
+    zen_mode_helper,
   }
 })
 

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-06-21 12:03:42
- * @LastEditTime: 2023-09-08 10:33:28
+ * @LastEditTime: 2023-11-07 16:41:48
  * @Description:
  */
 export const useUserStore = defineStore('useUserStore', () => {
@@ -9,6 +9,7 @@ export const useUserStore = defineStore('useUserStore', () => {
 
   const avatar = computed(() => cookie.value?.headimgurl)
   const nick = computed(() => cookie.value?.nickname)
+  const userId = computed(() => cookie.value?.uuid)
   const token = computed(() => {
     if (!validateToken())
       removeToken()
@@ -39,6 +40,7 @@ export const useUserStore = defineStore('useUserStore', () => {
     SaveFlag,
     Exptime,
     removeToken,
+    userId,
   }
 })
 

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

@@ -12,36 +12,36 @@ interface ImportMetaEnv {
   /**
    * 当前版本
    */
-  NUXT_PUBLIC_CURRENT_VERSION: string;
+  NUXT_PUBLIC_CURRENT_VERSION: string
   /**
    * 后台服务器地址
    */
-  NUXT_PUBLIC_API_BASE: string;
+  NUXT_PUBLIC_API_BASE: string
   /**
    * 后台标题
    */
-  NUXT_PUBLIC_TITLE: string;
+  NUXT_PUBLIC_TITLE: string
   /**
    * 后台副标题
    */
-  NUXT_PUBLIC_SUB_TITLE?: string;
+  NUXT_PUBLIC_SUB_TITLE?: string
   /**
    * slogan
    */
-  NUXT_PUBLIC_SLOGAN?: string;
+  NUXT_PUBLIC_SLOGAN?: string
   /**
    * 登录背景图
    */
-  NUXT_PUBLIC_LOGIN_BG: string;
+  NUXT_PUBLIC_LOGIN_BG: string
   /**
    * 后台 logo
    */
-  NUXT_PUBLIC_LOGIN_LOGO: string;
+  NUXT_PUBLIC_LOGIN_LOGO: string
 };
 
 declare interface Window {
   /**
    * 注入到前端使用的环境变量
    */
-  __YOUNG_ENV__: ImportMetaEnv;
+  __YOUNG_ENV__: ImportMetaEnv
 };

package/template-nuxt-admin/eslint.config.js

@@ -0,0 +1,33 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-11-01 10:13:50
+ * @LastEditTime: 2023-11-01 16:52:29
+ * @Description:
+ */
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  overrides: {
+    vue: {
+      'vue/valid-v-model': 'off',
+    },
+    typescript: {
+      'ts/no-use-before-define': 'off',
+      'ts/no-unused-vars': 'off',
+      'ts/ban-types': 'off',
+      'ts/ban-ts-comment': 'off',
+    },
+  },
+  rules: {
+    'no-console': 'off',
+    'node/prefer-global/process': 'off',
+    'unused-imports/no-unused-vars': 'off',
+    'no-throw-literal': 'off',
+    'antfu/consistent-list-newline': 'off',
+    'style/jsx-indent': 'off',
+  },
+}, {
+  ignores: [
+    'public',
+  ],
+})

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

@@ -1,15 +1,19 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-21 11:49:00
- * @LastEditTime: 2023-07-28 17:41:44
+ * @LastEditTime: 2023-11-07 16:58:16
  * @Description:
 -->
 <script lang="ts" setup>
-const { isCollapse } = storeToRefs(useNavStore())
+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) {
@@ -46,14 +50,34 @@ onMounted(() => {
 
 <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 />
-    <div class="layout-container-vertical" :class="{ 'is-collapse': isCollapse }">
+    <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 }">
-          <LayoutNavBar />
-          <LayoutTabsBar lt-lg="!hidden" />
+        <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 -->
@@ -82,6 +106,16 @@ onMounted(() => {
       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%;
 
@@ -96,6 +130,10 @@ onMounted(() => {
         &.is-collapse {
           width: calc(100% - $base-left-menu-width-min);
         }
+
+        &.is-zen-mode {
+          width: 100% !important;
+        }
       }
     }
   }

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-07-21 10:02:19
- * @LastEditTime: 2023-09-13 09:45:34
+ * @LastEditTime: 2023-11-07 14:55:45
  * @Description:
  */
 export default defineNuxtRouteMiddleware(async (to, from) => {
@@ -42,10 +42,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
   if (!hasLogin.value && to.path !== '/login') {
     // 页面需要登录，但是未登录
-    showNotify({
-      type: 'danger',
-      message: '未登录或登录过期，请重新登录',
-    })
+    ElMessage.error('未登录或登录过期，请重新登录')
     return navigateTo(`/login?redirect=${encodeURIComponent(to.fullPath)}`, {
       replace: true,
     })

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-05-25 19:45:20
- * @LastEditTime: 2023-09-16 16:34:29
+ * @LastEditTime: 2023-11-07 15:56:03
  * @Description:
  */
 import { resolve } from 'node:path'
@@ -11,6 +11,9 @@ 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' },
@@ -26,12 +29,12 @@ export default defineNuxtConfig({
           href: '/favicon.svg',
         },
         {
-          rel: 'preload',
+          rel: 'prefetch',
           as: 'image',
           href: '/image_placeholder.svg',
         },
         {
-          rel: 'preload',
+          rel: 'prefetch',
           as: 'image',
           href: '/tabbar_bg.png',
         },
@@ -50,44 +53,35 @@ export default defineNuxtConfig({
             }
           `,
         },
+        {
+          src: '/index.umd.js',
+          async: true,
+        },
       ],
     },
   },
 
-  lazyLoad: {
-    audio: false,
-    // 默认使用原生的 loading="lazy"
-    // native: true,
-    // js 实现，仅指令生效 v-lazy-load
-    // directiveOnly: true,
-    // @ts-expect-error js 实现的占位图
-    defaultImage: '/image_placeholder.svg',
+  imports: {
+    dirs: ['utils/**/*.{ts,tsx}'],
   },
 
   nitro: {
     output: {
       dir: resolve(__dirname, './dist'),
     },
+    sourceMap: false,
+    minify: true,
   },
 
-  // 开发调试工具，按需启用
-  // devtools: {
-  //   enabled: true,
-  // },
-
   modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@element-plus/nuxt',
     '@pinia/nuxt',
     '@vant/nuxt',
-    'nuxt-lazy-load',
+    '@bluesyoung/ui-vue3-element-plus/nuxt',
   ],
 
-  pinia: {
-    autoImports: ['defineStore', 'storeToRefs', 'acceptHMRUpdate'],
-  },
-
   vite: {
     build: {
       // 兼容钉钉浏览器
@@ -103,4 +97,10 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: tag => ['young-float-ball'].includes(tag),
+    },
+  },
 })

package/template-nuxt-admin/package.json

@@ -1,5 +1,6 @@
 {
   "name": "nuxt-app",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -15,7 +16,7 @@
     "@bluesyoung/casdoor-auth": "^0.1.0",
     "@bluesyoung/http": "^1.0.1",
     "@bluesyoung/ui-vue3": "^0.1.1",
-    "@bluesyoung/ui-vue3-element-plus": "0.13.0",
+    "@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",
@@ -29,26 +30,24 @@
     "vue-cropper": "^1.0.9"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.42.0",
+    "@antfu/eslint-config": "^1.1.0",
     "@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",
+    "@pinia/nuxt": "^0.5.1",
     "@types/file-saver": "^2.0.5",
     "@types/md5": "^2.3.2",
-    "@types/node": "20.6.2",
+    "@types/node": "20.8.10",
     "@types/qrcode": "^1.5.1",
-    "@unocss/nuxt": "^0.55.6",
+    "@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": "^14.0.1",
-    "nuxt": "^3.7.3",
-    "nuxt-lazy-load": "^3.0.4",
+    "lint-staged": "^15.0.2",
+    "nuxt": "^3.8.1",
     "pinia": "^2.1.4",
     "sass": "^1.64.0",
     "simple-git-hooks": "^2.9.0",

package/template-nuxt-admin/pages/system/api.vue

@@ -1,12 +1,10 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:44:56
- * @LastEditTime: 2023-08-25 16:54:08
+ * @LastEditTime: 2023-11-07 14:42:48
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungDialog, YoungPagination, YoungSearchForm, YoungSelect, YoungTablePro, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
-import type { SelectOptionItem, TableDataItem, TableHeadItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus'
 import { deepClone } from '@bluesyoung/utils'
 import { ElButton, ElTag } from 'element-plus'
 

package/template-nuxt-admin/pages/system/hooks/useRole.ts

@@ -1,16 +1,9 @@
 /*
  * @Author: zhangyang
  * @Date: 2023-07-26 15:51:14
- * @LastEditTime: 2023-07-28 11:22:35
+ * @LastEditTime: 2023-11-07 14:43:01
  * @Description:
  */
-import type {
-  SelectOptionItem,
-  TableDataItem,
-  TableHeadItem,
-  YoungSearchScheme,
-} from '@bluesyoung/ui-vue3-element-plus'
-import { YoungSelect, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
 import { deepClone } from '@bluesyoung/utils'
 
 export function useRoleBase() {

package/template-nuxt-admin/pages/system/menuList.vue

@@ -1,12 +1,10 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:45:17
- * @LastEditTime: 2023-08-25 16:55:00
+ * @LastEditTime: 2023-11-07 14:42:06
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungDialog, YoungSelect, YoungTablePro, useFormMode } from '@bluesyoung/ui-vue3-element-plus'
-import type { TableHeadItem } from '@bluesyoung/ui-vue3-element-plus'
 import { deepClone, isArray } from '@bluesyoung/utils'
 import { ElButton } from 'element-plus'
 
@@ -225,13 +223,13 @@ const tableHead: TableHeadItem<NavArrItem>[] = [
     render: row => h(YoungSelect, {
       'modelValue': row.visible,
       'options': [{ label: '显示', value: 1 }, { label: '隐藏', value: 0 }],
-      'onUpdate:modelValue': async (e: number) => {
+      'onUpdate:modelValue': async (e) => {
         // 状态未修改
         if (e === row.visible)
           return
 
-        row.visible = e
-        await apis.patch.changeMenuItem({ ...row, visible: e })
+        row.visible = +e
+        await apis.patch.changeMenuItem({ ...row, visible: +e })
         ElMessage.success('菜单修改成功！')
       },
     }),

package/template-nuxt-admin/pages/system/role.vue

@@ -1,11 +1,10 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:45:39
- * @LastEditTime: 2023-08-25 16:55:10
+ * @LastEditTime: 2023-11-07 14:41:43
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungDialog, YoungPagination, YoungSearchForm, YoungTablePro } from '@bluesyoung/ui-vue3-element-plus'
 import { useRoleApi, useRoleBase, useRoleMenu } from './hooks/useRole'
 
 definePageMeta({

package/template-nuxt-admin/pages/system/user.vue

@@ -1,12 +1,10 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-25 16:46:00
- * @LastEditTime: 2023-08-25 16:55:17
+ * @LastEditTime: 2023-11-07 14:41:11
  * @Description:
 -->
 <script lang="ts" setup>
-import { YoungDialog, YoungPagination, YoungSearchForm, YoungSelect, YoungTablePro, useFormMode, useQuery } from '@bluesyoung/ui-vue3-element-plus'
-import type { SelectOptionItem, TableDataItem, TableHeadItem, YoungSearchScheme } from '@bluesyoung/ui-vue3-element-plus'
 import { deepClone } from '@bluesyoung/utils'
 import { ElButton } from 'element-plus'