create-bubbles 0.1.2 → 0.1.4

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

@@ -0,0 +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>
+  <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

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import { setupRouter } from './router'
+import { setupStore } from './store'
+
+import 'virtual:svg-icons-register'
+
+import '@/styles/element-plus-variables.css'
+import '@/styles/index.scss'
+import 'virtual:uno.css'
+
+const app = createApp(App)
+setupRouter(app)
+setupStore(app)
+
+app.mount('#app')

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

@@ -0,0 +1,7 @@
+import type { Router } from 'vue-router'
+
+import { createPermissionGuard } from './permissionGuard'
+
+export function setupGuard(router: Router) {
+  createPermissionGuard(router)
+}

package/template-vue-vite-eslint/src/router/guard/permissionGuard.ts

@@ -0,0 +1,13 @@
+import type { Router } from 'vue-router'
+
+import NProgress from 'nprogress'
+
+export function createPermissionGuard(router: Router) {
+  router.beforeEach((_to, _from, next) => {
+    NProgress.start()
+    next()
+  })
+  router.afterEach((_to, _from) => {
+    NProgress.done()
+  })
+}

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

@@ -0,0 +1,18 @@
+import type { App } from 'vue'
+
+import { createRouter, createWebHistory } from 'vue-router'
+
+import { setupGuard } from './guard'
+import { routes } from './modules'
+
+export const router = createRouter({
+  history: createWebHistory(import.meta.env.PUBLIC_PATH),
+  routes,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export function setupRouter(app: App) {
+  setupGuard(router)
+  app.use(router)
+}

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

@@ -0,0 +1,79 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+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'),
+  },
+  {
+    path: '/data-search-statistics',
+    name: 'DataSearchStatistics',
+    meta: { title: '数据查询统计', icon: 'svg-data-search' },
+    children: [
+      {
+        path: '/abc',
+        name: 'abc',
+        meta: { title: '测试' },
+        component: () => import('@/views/home/index.vue'),
+      },
+      {
+        path: '/data-statistics',
+        name: 'DataStatistics',
+        meta: { title: '数据统计' },
+        component: () => import('@/views/data-statistics/index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/knowledge-graph',
+    name: 'KnowledgeGraph',
+    meta: { title: '知识图谱', icon: 'svg-knowledge-graph' },
+    component: () => import('@/views/knowledge-graph/index.vue'),
+  },
+  {
+    path: '/ai-search-tools',
+    name: 'AISearchTools',
+    meta: { title: 'AI研究工具', icon: 'svg-cpu' },
+    component: () => import('@/views/home/index.vue'),
+  },
+  {
+    path: '/data-mgt',
+    name: 'DataMgt',
+    meta: { title: '数据管理', icon: 'svg-computer-data' },
+    component: () => import('@/views/home/index.vue'),
+  },
+  {
+    path: '/platform-ai-assistant',
+    name: 'PlatformAIAssistant',
+    meta: { title: '平台智能助手', icon: 'svg-robot' },
+    component: () => import('@/views/home/index.vue'),
+  },
+]
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'layout',
+    component: () => import('@/layout/default/index.vue'),
+    children: [
+      {
+        path: '/',
+        redirect: '/home',
+      },
+      ...menuRoutes,
+    ],
+  },
+  ...ExampleRoutes,
+  {
+    path: '/login',
+    name: 'login',
+    meta: { title: '登录' },
+    component: () => import('@/views/login/index.vue'),
+  },
+]

package/template-vue-vite-eslint/src/store/index.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export const store = createPinia()
+store.use(piniaPluginPersistedstate)
+
+export function setupStore(app: App) {
+  app.use(store)
+}

package/template-vue-vite-eslint/src/store/modules/user.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+
+import { store } from '..'
+
+export const useUserStore = defineStore(
+  'user',
+  {
+    state: () => {
+      return {
+        name: 'admin',
+        token: 'admin',
+        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+      }
+    },
+  },
+)
+
+export function useUserStoreWithOut() {
+  return useUserStore(store)
+}

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

@@ -0,0 +1,3 @@
+:root:has(#app) {
+  --el-color-primary: #409effff;
+}

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

@@ -0,0 +1,32 @@
+@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,
+#root {
+  width: 100%;
+  height: 100%;
+  font-family: 'SourceHanSansCN';
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+//弹窗的标题样式
+.dialog-title {
+  border-left: 3px solid #22b5ffff;
+  padding-left: 10px;
+  height: 16px;
+  color: #ffffffb8;
+  font: 700;
+  font-size: 16px;
+  line-height: 16px;
+}

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/styles/variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --header-height: 80px;
+}

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

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

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

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// vite-plugin-svg-icons 类型声明
+declare module 'virtual:svg-icons-register' {
+  const register: () => void
+  export default register
+}

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

@@ -0,0 +1,11 @@
+/**
+ * 通过一个文件导出所有的环境变量这样方便统一修改
+ * @returns
+ */
+export const envVariables = {
+  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

@@ -0,0 +1,186 @@
+import type { AlovaGenerics, AlovaOptions } from 'alova'
+
+import { createAlova } from 'alova'
+import adapterFetch from 'alova/fetch'
+
+import { deepMergeObject, isReadableStream } from './utils'
+
+interface statusMap {
+  success?: number
+  unAuthorized?: number
+}
+
+interface codeMap {
+  success?: number[]
+  unAuthorized?: number[]
+}
+
+export interface baseRequestOption<AG extends AlovaGenerics> {
+  baseUrl?: string
+  timeout?: number
+  commonHeaders?: Record<string, string | (() => string)>
+  statusMap?: statusMap
+  isWrapped?: boolean
+  cacheFor?: AlovaOptions<AG>['cacheFor']
+  cacheLogger?: boolean
+  codeMap?: codeMap
+  responseDataKey?: string
+  responseMessageKey?: string
+  isTransformResponse?: boolean
+  isShowSuccessMessage?: boolean
+  successDefaultMessage?: string
+  isShowErrorMessage?: boolean
+  errorDefaultMessage?: string
+  statesHook?: AlovaOptions<AG>['statesHook']
+  successMessageFunc?: (message: string) => void
+  errorMessageFunc?: (message: string) => void
+  unAuthorizedResponseFunc?: () => void
+  requestAdapter?: AlovaOptions<AG>['requestAdapter']
+}
+
+export interface CustomConfig {
+  isTransformResponse?: boolean
+  isShowSuccessMessage?: boolean
+  isShowErrorMessage?: boolean
+}
+
+type requestOption = baseRequestOption<AlovaGenerics> & CustomConfig
+
+export function createInstance(option: requestOption) {
+  const defaultOption: requestOption = {
+    baseUrl: '/',
+    timeout: 0,
+    statusMap: {
+      success: 200,
+      unAuthorized: 401,
+    },
+    isWrapped: true,
+    cacheFor: null,
+    cacheLogger: true,
+    codeMap: {
+      success: [200],
+      unAuthorized: [401],
+    },
+    responseDataKey: 'data',
+    responseMessageKey: 'message',
+    isTransformResponse: true,
+    isShowSuccessMessage: false,
+    successDefaultMessage: '操作成功',
+    isShowErrorMessage: true,
+    errorDefaultMessage: '服务异常',
+    requestAdapter: adapterFetch(),
+  }
+
+  const mergeOption: baseRequestOption<AlovaGenerics> & CustomConfig = deepMergeObject(
+    defaultOption,
+    option,
+  )
+
+  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) => {
+      for (const [key, value] of Object.entries(option?.commonHeaders ?? {})) {
+        method.config.headers[key] = typeof value === 'function' ? value() : value
+      }
+    },
+    responded: {
+      onSuccess: async (response) => {
+        if (!mergeOption?.isTransformResponse)
+          return response
+        const { status } = response
+
+        // 判断响应类型：如果使用 adapterFetch，response.data 是可读流，则调用 json()；否则直接使用 response.data
+        const data
+          = response?.body && isReadableStream(response.body)
+            ? await response.json() // adapterFetch 的响应，使用 json() 解析可读流
+            : response.data // 其他适配器的响应
+        // 不成功的情况
+        if (status !== mergeOption.statusMap?.success) {
+          // 如果后端使用status 字段来表示未授权，则返回401
+          if (mergeOption?.statusMap?.unAuthorized === status) {
+            mergeOption?.unAuthorizedResponseFunc?.()
+          }
+          return Promise.reject(response)
+        }
+        const { isWrapped, isShowSuccessMessage, successDefaultMessage } = mergeOption
+        if (!isWrapped) {
+          if (isShowSuccessMessage) {
+            mergeOption?.successMessageFunc?.(successDefaultMessage!)
+          }
+          return data
+        }
+
+        const {
+          responseDataKey,
+          codeMap,
+          responseMessageKey,
+          errorDefaultMessage,
+          isShowErrorMessage,
+        } = mergeOption
+        const {
+          code,
+          [responseDataKey as string]: responseData,
+          [responseMessageKey as string]: responseMessage,
+        } = data
+        if (!codeMap?.success?.includes(+code)) {
+          // code unAuthorized 处理
+          if (codeMap?.unAuthorized?.includes(+code)) {
+            mergeOption?.unAuthorizedResponseFunc?.()
+            return Promise.reject(response)
+          }
+          // 其他错误直接打印msg
+
+          const errorMessage = data[responseMessageKey as string] ?? errorDefaultMessage
+          if (isShowErrorMessage)
+            mergeOption?.errorMessageFunc?.(errorMessage)
+          return Promise.reject(response)
+        }
+        if (isShowSuccessMessage)
+          mergeOption?.successMessageFunc?.(responseMessage ?? successDefaultMessage)
+        return responseData
+      },
+      onError: (error) => {
+        if (mergeOption?.isShowErrorMessage) {
+          mergeOption.errorMessageFunc?.(
+            mergeOption?.errorDefaultMessage ?? error.message,
+          )
+        }
+      },
+      // onComplete: (_method) => {},
+    },
+  })
+
+  return instance
+}
+
+// 🚀 创建双重调用实例的工厂函数
+export function createDualCallInstance(baseConfig: baseRequestOption<AlovaGenerics>) {
+  // 创建默认实例
+  const defaultInstance = createInstance(baseConfig)
+
+  // 双重调用函数
+  const dualInstance = (option?: CustomConfig) => {
+    if (option) {
+      // 合并配置并创建新实例
+      const mergedConfig = { ...baseConfig, ...option }
+      return createInstance(mergedConfig)
+    }
+    return defaultInstance
+  }
+
+  dualInstance.Get = defaultInstance.Get.bind(defaultInstance)
+  dualInstance.Post = defaultInstance.Post.bind(defaultInstance)
+  dualInstance.Put = defaultInstance.Put.bind(defaultInstance)
+  dualInstance.Delete = defaultInstance.Delete.bind(defaultInstance)
+  dualInstance.Patch = defaultInstance.Patch.bind(defaultInstance)
+  dualInstance.Head = defaultInstance.Head.bind(defaultInstance)
+  dualInstance.Options = defaultInstance.Options.bind(defaultInstance)
+  dualInstance.Request = defaultInstance.Request.bind(defaultInstance)
+
+  return dualInstance
+}

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

@@ -0,0 +1,41 @@
+export function deepMergeObject<T = any>(source: T, target: Partial<T>): T {
+  const isObject = (obj: any): obj is Record<string, any> =>
+    obj && typeof obj === 'object' && !Array.isArray(obj)
+
+  const merge = (src: any, tgt: any): any => {
+    if (isObject(src) && isObject(tgt)) {
+      Object.keys(tgt).forEach((key) => {
+        if (isObject(tgt[key])) {
+          src[key] = merge(src[key] || {}, tgt[key])
+        }
+        else {
+          src[key] = tgt[key]
+        }
+      })
+    }
+    return src
+  }
+
+  return merge({ ...source }, target)
+}
+
+/**
+ * 判断一个变量是不是可读流
+ * @param data
+ */
+export function isReadableStream(data: unknown): boolean {
+  if (!(data instanceof ReadableStream)) {
+    return false
+  }
+  if (typeof data.locked !== 'boolean')
+    return false
+
+  const instanceFunc = ['cancel', 'getReader', 'pipeThrough', 'pipeTo', 'tee'] as const
+
+  for (const func of instanceFunc) {
+    if (typeof data[func] !== 'function')
+      return false
+  }
+
+  return true
+}