create-bubbles 0.1.0 → 0.1.2

package/template-vue-rolldown-oxc/package.json

@@ -15,37 +15,39 @@
     "**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,astro,svelte}": "oxlint"
   },
   "dependencies": {
+    "@alova/adapter-axios": "^2.0.16",
     "@element-plus/icons-vue": "^2.3.2",
-    "@vueuse/core": "^13.6.0",
-    "dayjs": "^1.11.13",
+    "@vueuse/core": "^13.9.0",
+    "alova": "^3.3.4",
+    "axios": "^1.12.1",
+    "dayjs": "^1.11.18",
     "echarts": "^6.0.0",
-    "element-plus": "^2.10.6",
+    "element-plus": "^2.11.2",
     "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.4.1",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "radash": "^12.1.1",
-    "vue": "^3.5.18",
+    "vue": "^3.5.21",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@ianvs/prettier-plugin-sort-imports": "^4.6.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@prettier/plugin-oxc": "^0.0.4",
-    "@unocss/postcss": "^66.4.2",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "^0.8.1",
     "fast-glob": "^3.3.3",
-    "lefthook": "^1.12.2",
-    "oxlint": "^1.11.1",
+    "lefthook": "^1.13.0",
+    "oxlint": "^1.15.0",
     "prettier": "^3.6.2",
-    "sass": "^1.90.0",
+    "sass": "^1.92.1",
     "typescript": "~5.9.2",
-    "unocss": "^66.4.2",
-    "unplugin-auto-import": "^20.0.0",
+    "unocss": "^66.5.1",
+    "unplugin-auto-import": "^20.1.0",
     "unplugin-vue-components": "^29.0.0",
     "vite": "npm:rolldown-vite@latest",
-    "vite-plugin-inspect": "^11.3.2",
+    "vite-plugin-inspect": "^11.3.3",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^3.0.5"
+    "vue-tsc": "^3.0.7"
   }
 }

package/template-vue-rolldown-oxc/src/main.ts

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

package/template-vue-rolldown-oxc/src/store/modules/user.ts

@@ -0,0 +1,17 @@
+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-rolldown-oxc/src/types/auto-import.d.ts

@@ -15,12 +15,14 @@ declare global {
   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']
@@ -71,6 +73,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  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-rolldown-oxc/src/utils/env.ts

@@ -1,5 +1,10 @@
+/**
+ * 通过一个文件导出所有的环境变量这样方便统一修改
+ * @returns
+ */
 export const envVariables = {
-  APP_NAME: import.meta.env.VITE_APP_NAME,
-  /* 接口前缀 */
-  API_AFFIX: import.meta.env.VITE_API_AFFIX,
+  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,
 }

package/template-vue-rolldown-oxc/src/utils/request/core/index.ts

@@ -0,0 +1,166 @@
+import { type AlovaGenerics, type AlovaOptions, createAlova } from 'alova'
+import { deepMergeObject, isReadableStream } from './utils'
+import adapterFetch from 'alova/fetch'
+
+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
+  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 const createInstance = (option: requestOption) => {
+  const defaultOption: requestOption = {
+    baseUrl: '/',
+    timeout: 0,
+    statusMap: {
+      success: 200,
+      unAuthorized: 401,
+    },
+    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,
+    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 {
+          responseDataKey,
+          codeMap,
+          isShowSuccessMessage,
+          responseMessageKey,
+          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] ?? mergeOption.errorDefaultMessage
+          if (isShowErrorMessage) mergeOption?.errorMessageFunc?.(errorMessage)
+          return Promise.reject(response)
+        }
+        if (isShowSuccessMessage)
+          mergeOption?.successMessageFunc?.(responseMessage ?? mergeOption.successDefaultMessage)
+        return responseData
+      },
+      onError: (error) => {
+        if (mergeOption?.isShowErrorMessage)
+          mergeOption.errorMessageFunc?.(
+            error.response?.data?.message ?? mergeOption?.errorDefaultMessage,
+          )
+      },
+      // onComplete: (_method) => {},
+    },
+  })
+
+  return instance
+}
+
+// 🚀 创建双重调用实例的工厂函数
+export const createDualCallInstance = (baseConfig: baseRequestOption<AlovaGenerics>) => {
+  // 创建默认实例
+  const defaultInstance = createInstance(baseConfig)
+
+  // 双重调用函数
+  const dualInstance = (option?: CustomConfig) => {
+    if (option) {
+      // 合并配置并创建新实例
+      const mergedConfig = { ...baseConfig, ...option }
+      return createInstance(mergedConfig)
+    }
+    return defaultInstance
+  }
+
+  // 🎯 直接绑定 HTTP 方法，无需复杂类型注释
+  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-rolldown-oxc/src/utils/request/core/utils.ts

@@ -0,0 +1,38 @@
+export const 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 const 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
+}

package/template-vue-rolldown-oxc/src/utils/request/index.ts

@@ -0,0 +1,41 @@
+import { envVariables } from '../env'
+import { createDualCallInstance } from './core'
+import { router } from '@/router'
+import { ElMessage } from 'element-plus'
+import 'element-plus/es/components/message/style/css'
+import vueHook from 'alova/vue'
+import { axiosRequestAdapter } from '@alova/adapter-axios'
+
+const getBaseConfig = (): Parameters<typeof createDualCallInstance>[0] => {
+
+  return {
+    baseUrl: `/${envVariables.PUBLIC_PORT}`,
+    statusMap: {
+      success: 200,
+      unAuthorized: 401,
+    },
+    codeMap: {
+      success: [200],
+    },
+    responseDataKey: 'data',
+    responseMessageKey: 'msg',
+    commonHeaders: {
+    },
+    successMessageFunc: (msg: string) => {
+      ElMessage.success(msg)
+    },
+    errorMessageFunc: (msg: string) => {
+      ElMessage.error(msg)
+    },
+    unAuthorizedResponseFunc: () => {
+      router.push('/login')
+      ElMessage.error('登录过期或未登录')
+    },
+    statesHook: vueHook,
+    requestAdapter: axiosRequestAdapter(),
+  }
+}
+
+const alovaRequest = createDualCallInstance(getBaseConfig())
+
+export default alovaRequest

package/template-vue-rolldown-oxc/vite.config.ts

@@ -6,6 +6,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Inspect from 'vite-plugin-inspect'
+import UnoCSS from 'unocss/vite'
 
 // https://vite.dev/config/
 export default defineConfig(({ command, mode }) => {
@@ -43,6 +44,7 @@ export default defineConfig(({ command, mode }) => {
         symbolId: 'icon-[dir]-[name]',
       }),
       Inspect(),
+      UnoCSS()
     ],
   }
 })

package/template-vue-rsbuild-biome/.env

@@ -1,3 +1,5 @@
 # port
-PUBLIC_PORT = 9200
-PUBLIC_PATH = '/'
+PUBLIC_PORT = 9945
+PUBLIC_PATH = '/'
+PUBLIC_APP_NAME = 'xxx'
+PUBLIC_API_AFFIX = '/api'

package/template-vue-rsbuild-biome/.env.development

@@ -0,0 +1 @@
+PUBLIC_API_URL = 'http://localhost:8080'

package/template-vue-rsbuild-biome/.env.production

@@ -0,0 +1 @@
+PUBLIC_API_URL = 'http://localhost:8080'

package/template-vue-rsbuild-biome/.vscode/settings.json

@@ -1,6 +1,12 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit"
+  },
+  "[sass]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }

package/template-vue-rsbuild-biome/biome.json

@@ -1,7 +1,8 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "files": {
-    "ignoreUnknown": true
+    "ignoreUnknown": true,
+    "includes": ["**", "!public/**/*", "!node_modules/**/*", "!dist/**/*"]
   },
   "formatter": {
     "enabled": true,
@@ -54,9 +55,7 @@
         "useAriaPropsForRole": "off",
         "useValidAnchor": "off"
       },
-      "nursery": {
-        "useUniqueElementIds": "off"
-      }
+      "nursery": "off"
     }
   },
   "css": {

package/template-vue-rsbuild-biome/package.json

@@ -11,23 +11,26 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "element-plus": "^2.10.6",
+    "@alova/adapter-axios": "^2.0.16",
+    "alova": "^3.3.4",
+    "axios": "^1.12.1",
+    "element-plus": "^2.11.2",
     "pinia": "^3.0.3",
-    "vue": "^3.5.18",
+    "vue": "^3.5.21",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.1.4",
-    "@ianvs/prettier-plugin-sort-imports": "^4.6.1",
-    "@rsbuild/core": "^1.4.15",
-    "@rsbuild/plugin-sass": "^1.3.5",
-    "@rsbuild/plugin-vue": "^1.1.1",
-    "@unocss/postcss": "^66.4.2",
-    "lefthook": "^1.12.2",
+    "@biomejs/biome": "^2.2.4",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@rsbuild/core": "^1.5.6",
+    "@rsbuild/plugin-sass": "^1.4.0",
+    "@rsbuild/plugin-vue": "^1.1.2",
+    "@unocss/postcss": "^66.5.1",
+    "lefthook": "^1.13.0",
     "prettier": "^3.6.2",
     "typescript": "^5.9.2",
-    "unocss": "^66.4.2",
-    "unplugin-auto-import": "^20.0.0",
+    "unocss": "^66.5.1",
+    "unplugin-auto-import": "^20.1.0",
     "unplugin-vue-components": "^29.0.0"
   }
 }

package/template-vue-rsbuild-biome/rsbuild.config.ts

@@ -30,7 +30,6 @@ export default defineConfig({
           resolvers: [ElementPlusResolver()],
           dts: './src/types/components.d.ts',
         }),
-
       ],
     },
     postcss: {

package/template-vue-rsbuild-biome/src/index.ts

@@ -1,7 +1,5 @@
 import { createApp } from 'vue'
-
 import App from './App.vue'
-
 import '@/styles/index.css'
 
 import { setupRouter } from './router'

package/template-vue-rsbuild-biome/src/utils/env.ts

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