create-bubbles 0.1.3 → 0.1.6

package/template-vue-vite-eslint/src/hooks/chart/useEcharts.ts

@@ -0,0 +1,65 @@
+import type { EChartsOption } from 'echarts'
+
+import type { ShallowRef } from 'vue'
+
+import { debounce } from 'radashi'
+
+import echarts from './lib'
+
+type setOptionsType = (options: EChartsOption, clear?: boolean) => void
+
+export function useECharts(elRef: Ref<HTMLDivElement> | Readonly<ShallowRef<HTMLDivElement | null>>) {
+  let chartInstance: echarts.ECharts | null = null
+  let resizeObserver: ResizeObserver | undefined
+
+  const resize = () => {
+    chartInstance?.resize()
+  }
+
+  const initCharts = () => {
+    if (!elRef)
+      return
+    const el = unref(elRef)
+    if (!el)
+      return
+
+    resizeObserver = new ResizeObserver(debounce(
+      {
+        delay: 100,
+      },
+      resize,
+    ))
+    resizeObserver.observe(el)
+
+    chartInstance = echarts.init(el)
+  }
+
+  const setOptions: setOptionsType = (options, clear = true) => {
+    if (!chartInstance) {
+      initCharts()
+      if (!chartInstance)
+        return
+    }
+    clear && chartInstance?.clear()
+    chartInstance?.setOption(options)
+  }
+
+  const getInstance: () => echarts.ECharts | null = () => {
+    if (!chartInstance)
+      initCharts()
+    return chartInstance
+  }
+
+  onUnmounted(() => {
+    chartInstance?.dispose()
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+  })
+
+  return {
+    setOptions,
+    resize,
+    echarts,
+    getInstance,
+  }
+}

package/template-vue-vite-eslint/src/layout/default/header/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="index-container">
+    111
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/template-vue-vite-eslint/src/layout/default/index.vue

@@ -1,3 +1,55 @@
+<script lang="ts" setup>
+import type { MenuRouteRecordRawType } from '@/router/interface'
+
+import LogoIcon from '@/assets/icon/logo.svg'
+import { menuRoutes } from '@/router/modules'
+
+import SvgIcon from '@/components/Icon/svg-icon.vue'
+
+import Header from './header/index.vue'
+
+function getRoutes(routes: MenuRouteRecordRawType[]) {
+  const result = routes.map((item) => {
+    const isSvgIcon = (item.meta?.icon as string | undefined)?.startsWith('svg-')
+    return ({
+      path: item.path,
+      name: item.name,
+      component: item.component,
+      meta: {
+        title: item.meta?.title,
+        icon: isSvgIcon ? h(SvgIcon, { icon: (item.meta?.icon as string).replace('svg-', ''), style: { fontSize: '20px' } }) : undefined,
+        hideInMenu: item.meta?.hideInMenu,
+      },
+      children: item.children,
+    })
+  })
+  result.forEach((item) => {
+    if (item.children) {
+      item.children = getRoutes(item.children) as MenuRouteRecordRawType[]
+    }
+  })
+  return result
+}
+
+const routes = getRoutes(menuRoutes)
+</script>
+
 <template>
-  <router-view />
+  <PlusLayout
+    :sidebar-props="{ routes }"
+    :has-breadcrumb="false"
+    :header-props="{
+      hasUserInfo: false,
+    }"
+  >
+    <template #header-left>
+      <h1>111</h1>
+    </template>
+
+    <template #header-right>
+      <Header />
+    </template>
+
+    <router-view />
+  </PlusLayout>
 </template>

package/template-vue-vite-eslint/src/main.ts

@@ -13,4 +13,5 @@ import 'virtual:uno.css'
 const app = createApp(App)
 setupRouter(app)
 setupStore(app)
+
 app.mount('#app')

package/template-vue-vite-eslint/src/router/interface.ts

@@ -0,0 +1,9 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export type MenuRouteRecordRawType = RouteRecordRaw & {
+  meta?: {
+    title?: string
+    icon?: string
+    hideInMenu?: boolean
+  }
+}

package/template-vue-vite-eslint/src/router/modules/example.ts

@@ -0,0 +1,21 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const ExampleRoutes: RouteRecordRaw[] = [
+  {
+    path: '/example',
+    name: 'Example',
+    children: [
+      {
+        path: 'echart',
+        name: 'Echart',
+        component: () => import('@/views/example/echart/index.vue'),
+      },
+
+      {
+        path: 'tree-chart',
+        name: 'TreeChart',
+        component: () => import('@/views/example/tree-chart.vue'),
+      },
+    ],
+  },
+]

package/template-vue-vite-eslint/src/router/modules/index.ts

@@ -1,8 +1,17 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-/**
- * IsMaskAll 代表 是不是要和模型交互 为true 全部遮罩
- */
+import type { MenuRouteRecordRawType } from '../interface'
+
+import { ExampleRoutes } from './example'
+
+export const menuRoutes: MenuRouteRecordRawType [] = [
+  {
+    path: '/home',
+    name: 'Home',
+    meta: { title: '首页概览', icon: 'svg-home' },
+    component: () => import('@/views/home/index.vue'),
+  },
+]
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -14,14 +23,10 @@ export const routes: RouteRecordRaw[] = [
         path: '/',
         redirect: '/home',
       },
-      {
-        path: '/home',
-        name: 'Home',
-        meta: { title: '研发A区数字孪生可视化大屏' },
-        component: () => import('@/views/home/index.vue'),
-      },
+      ...menuRoutes,
     ],
   },
+  ...ExampleRoutes,
   {
     path: '/login',
     name: 'login',

package/template-vue-vite-eslint/src/styles/element-plus-variables.css

@@ -1,4 +1,3 @@
 :root:has(#app) {
-  --el-color-primary: #284471;
-  --el-color-primary-light-3: rgb(40, 68, 113, 0.8);
+  --el-color-primary: #409effff;
 }

package/template-vue-vite-eslint/src/styles/index.scss

@@ -1,6 +1,8 @@
 @use './font.scss';
 @use './variables.scss';
 @use './element-plus-variables.css';
+@use './plus-pro-components-variables.css';
+@use 'element-plus/theme-chalk/dark/css-vars.css';
 
 html,
 body,

package/template-vue-vite-eslint/src/styles/plus-pro-components-variables.css

@@ -0,0 +1,3 @@
+:root .el-header {
+  --el-header-height: 56px;
+}

package/template-vue-vite-eslint/src/types/auto-import.d.ts

@@ -0,0 +1,78 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue').EffectScope
+  const computed: typeof import('vue').computed
+  const createApp: typeof import('vue').createApp
+  const customRef: typeof import('vue').customRef
+  const defineAsyncComponent: typeof import('vue').defineAsyncComponent
+  const defineComponent: typeof import('vue').defineComponent
+  const effectScope: typeof import('vue').effectScope
+  const getCurrentInstance: typeof import('vue').getCurrentInstance
+  const getCurrentScope: typeof import('vue').getCurrentScope
+  const getCurrentWatcher: typeof import('vue').getCurrentWatcher
+  const h: typeof import('vue').h
+  const inject: typeof import('vue').inject
+  const isProxy: typeof import('vue').isProxy
+  const isReactive: typeof import('vue').isReactive
+  const isReadonly: typeof import('vue').isReadonly
+  const isRef: typeof import('vue').isRef
+  const isShallow: typeof import('vue').isShallow
+  const markRaw: typeof import('vue').markRaw
+  const nextTick: typeof import('vue').nextTick
+  const onActivated: typeof import('vue').onActivated
+  const onBeforeMount: typeof import('vue').onBeforeMount
+  const onBeforeRouteLeave: typeof import('vue-router').onBeforeRouteLeave
+  const onBeforeRouteUpdate: typeof import('vue-router').onBeforeRouteUpdate
+  const onBeforeUnmount: typeof import('vue').onBeforeUnmount
+  const onBeforeUpdate: typeof import('vue').onBeforeUpdate
+  const onDeactivated: typeof import('vue').onDeactivated
+  const onErrorCaptured: typeof import('vue').onErrorCaptured
+  const onMounted: typeof import('vue').onMounted
+  const onRenderTracked: typeof import('vue').onRenderTracked
+  const onRenderTriggered: typeof import('vue').onRenderTriggered
+  const onScopeDispose: typeof import('vue').onScopeDispose
+  const onServerPrefetch: typeof import('vue').onServerPrefetch
+  const onUnmounted: typeof import('vue').onUnmounted
+  const onUpdated: typeof import('vue').onUpdated
+  const onWatcherCleanup: typeof import('vue').onWatcherCleanup
+  const provide: typeof import('vue').provide
+  const reactive: typeof import('vue').reactive
+  const readonly: typeof import('vue').readonly
+  const ref: typeof import('vue').ref
+  const resolveComponent: typeof import('vue').resolveComponent
+  const shallowReactive: typeof import('vue').shallowReactive
+  const shallowReadonly: typeof import('vue').shallowReadonly
+  const shallowRef: typeof import('vue').shallowRef
+  const toRaw: typeof import('vue').toRaw
+  const toRef: typeof import('vue').toRef
+  const toRefs: typeof import('vue').toRefs
+  const toValue: typeof import('vue').toValue
+  const triggerRef: typeof import('vue').triggerRef
+  const unref: typeof import('vue').unref
+  const useAttrs: typeof import('vue').useAttrs
+  const useCssModule: typeof import('vue').useCssModule
+  const useCssVars: typeof import('vue').useCssVars
+  const useId: typeof import('vue').useId
+  const useLink: typeof import('vue-router').useLink
+  const useModel: typeof import('vue').useModel
+  const useRoute: typeof import('vue-router').useRoute
+  const useRouter: typeof import('vue-router').useRouter
+  const useSlots: typeof import('vue').useSlots
+  const useTemplateRef: typeof import('vue').useTemplateRef
+  const watch: typeof import('vue').watch
+  const watchEffect: typeof import('vue').watchEffect
+  const watchPostEffect: typeof import('vue').watchPostEffect
+  const watchSyncEffect: typeof import('vue').watchSyncEffect
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

package/template-vue-vite-eslint/src/types/components.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    PlusLayout: typeof import('plus-pro-components/es')['PlusLayout']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./../components/Icon/svg-icon.vue')['default']
+  }
+}

package/template-vue-vite-eslint/src/types/index.d.ts

@@ -0,0 +1 @@
+// 扩展 vue-router 的类型

package/template-vue-vite-eslint/src/utils/env.ts

@@ -3,8 +3,9 @@
  * @returns
  */
 export const envVariables = {
-  PUBLIC_PORT: import.meta.env.PUBLIC_PORT,
-  PUBLIC_PATH: import.meta.env.PUBLIC_PATH,
-  PUBLIC_APP_NAME: import.meta.env.PUBLIC_APP_NAME,
-  PUBLIC_API_AFFIX: import.meta.env.PUBLIC_API_AFFIX,
+  PORT: import.meta.env.VITE_PORT,
+  PATH: import.meta.env.VITE_PATH,
+  APP_NAME: import.meta.env.VITE_APP_NAME,
+  /** 后端接口前缀 */
+  API_AFFIX: import.meta.env.VITE_API_AFFIX,
 }

package/template-vue-vite-eslint/src/utils/request/core/index.ts

@@ -20,6 +20,9 @@ export interface baseRequestOption<AG extends AlovaGenerics> {
   timeout?: number
   commonHeaders?: Record<string, string | (() => string)>
   statusMap?: statusMap
+  isWrapped?: boolean
+  cacheFor?: AlovaOptions<AG>['cacheFor']
+  cacheLogger?: boolean
   codeMap?: codeMap
   responseDataKey?: string
   responseMessageKey?: string
@@ -51,6 +54,9 @@ export function createInstance(option: requestOption) {
       success: 200,
       unAuthorized: 401,
     },
+    isWrapped: true,
+    cacheFor: null,
+    cacheLogger: true,
     codeMap: {
       success: [200],
       unAuthorized: [401],
@@ -73,6 +79,8 @@ export function createInstance(option: requestOption) {
   const instance = createAlova({
     baseURL: mergeOption.baseUrl,
     timeout: mergeOption.timeout,
+    cacheFor: mergeOption.cacheFor,
+    cacheLogger: mergeOption.cacheLogger,
     statesHook: mergeOption?.statesHook,
     requestAdapter: mergeOption.requestAdapter as AlovaOptions<AlovaGenerics>['requestAdapter'],
     beforeRequest: async (method) => {
@@ -99,12 +107,19 @@ export function createInstance(option: requestOption) {
           }
           return Promise.reject(response)
         }
+        const { isWrapped, isShowSuccessMessage, successDefaultMessage } = mergeOption
+        if (!isWrapped) {
+          if (isShowSuccessMessage) {
+            mergeOption?.successMessageFunc?.(successDefaultMessage!)
+          }
+          return data
+        }
 
         const {
           responseDataKey,
           codeMap,
-          isShowSuccessMessage,
           responseMessageKey,
+          errorDefaultMessage,
           isShowErrorMessage,
         } = mergeOption
         const {
@@ -120,19 +135,19 @@ export function createInstance(option: requestOption) {
           }
           // 其他错误直接打印msg
 
-          const errorMessage = data[responseMessageKey as string] ?? mergeOption.errorDefaultMessage
+          const errorMessage = data[responseMessageKey as string] ?? errorDefaultMessage
           if (isShowErrorMessage)
             mergeOption?.errorMessageFunc?.(errorMessage)
           return Promise.reject(response)
         }
         if (isShowSuccessMessage)
-          mergeOption?.successMessageFunc?.(responseMessage ?? mergeOption.successDefaultMessage)
+          mergeOption?.successMessageFunc?.(responseMessage ?? successDefaultMessage)
         return responseData
       },
       onError: (error) => {
         if (mergeOption?.isShowErrorMessage) {
           mergeOption.errorMessageFunc?.(
-            error.response?.data?.message ?? mergeOption?.errorDefaultMessage,
+            mergeOption?.errorDefaultMessage ?? error.message,
           )
         }
       },
@@ -158,7 +173,6 @@ export function createDualCallInstance(baseConfig: baseRequestOption<AlovaGeneri
     return defaultInstance
   }
 
-  // 🎯 直接绑定 HTTP 方法，无需复杂类型注释
   dualInstance.Get = defaultInstance.Get.bind(defaultInstance)
   dualInstance.Post = defaultInstance.Post.bind(defaultInstance)
   dualInstance.Put = defaultInstance.Put.bind(defaultInstance)

package/template-vue-vite-eslint/src/utils/request/index.ts

@@ -1,14 +1,17 @@
 import { axiosRequestAdapter } from '@alova/adapter-axios'
 import vueHook from 'alova/vue'
 import { ElMessage } from 'element-plus'
+
 import { router } from '@/router'
+
 import { envVariables } from '../env'
 import { createDualCallInstance } from './core'
+
 import 'element-plus/es/components/message/style/css'
 
 function getBaseConfig(): Parameters<typeof createDualCallInstance>[0] {
   return {
-    baseUrl: `/${envVariables.PUBLIC_PORT}`,
+    baseUrl: `/${envVariables.API_AFFIX}`,
     statusMap: {
       success: 200,
       unAuthorized: 401,