create-bubbles 0.1.2 → 0.1.3

package/template-vue-vite-biome/src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
+
+const locale = {
+  ...zhCn,
+  ...plusZhCn,
+}
+</script>
+
+<template>
+  <el-config-provider
+    :locale="locale"
+  >
+    <RouterView />
+  </el-config-provider>
+</template>
+
+<style scoped></style>

package/template-vue-vite-biome/src/assets/icon/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="currentColor" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="currentColor" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template-vue-vite-biome/src/components/Icon/svg-icon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true" v-bind="attrs">
+    <use :href="`#icon-${name}`" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+const attrs = useAttrs()
+defineProps<{
+  name: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+}
+</style>

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

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

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

@@ -0,0 +1,15 @@
+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'
+
+const app = createApp(App)
+setupRouter(app)
+setupStore(app)
+app.mount('#app')

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

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

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

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

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

@@ -0,0 +1,17 @@
+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: routes,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+export const setupRouter = (app: App) => {
+  setupGuard(router)
+  app.use(router)
+}

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

@@ -0,0 +1,31 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+/**
+ * IsMaskAll 代表 是不是要和模型交互 为true 全部遮罩
+ */
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'layout',
+    component: () => import('@/layout/default/index.vue'),
+    children: [
+      {
+        path: '/',
+        redirect: '/home',
+      },
+      {
+        path: '/home',
+        name: 'Home',
+        meta: { title: '研发A区数字孪生可视化大屏' },
+        component: () => import('@/views/home/index.vue'),
+      },
+    ],
+  },
+  {
+    path: '/login',
+    name: 'login',
+    meta: { title: '登录' },
+    component: () => import('@/views/login/index.vue'),
+  },
+]

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

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

package/template-vue-vite-biome/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-vite-biome/src/styles/element-plus-variables.css

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

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

@@ -0,0 +1,31 @@
+@use './font.scss';
+@use './variables.scss';
+@use './element-plus-variables.css';
+@unocss;
+
+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-biome/src/styles/variables.scss

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

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

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+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-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,
+}

package/template-vue-vite-biome/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-vite-biome/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-vite-biome/src/utils/request/index.ts

@@ -0,0 +1,39 @@
+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-vite-biome/src/views/home/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/Icon/svg-icon.vue'
+
+const a = ref()
+</script>
+
+<template>
+  <div class="text-red flex-center">
+    home
+    <el-date-picker v-model="a" type="date" value-format="yyyy-MM-dd" />
+    <SvgIcon name="vue" class="text-green" />
+    <el-button type="primary">按钮</el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vue-vite-biome/src/views/login/index.vue

@@ -0,0 +1,11 @@
+
+<script setup lang="ts">
+let a = 123
+
+</script>
+
+<template>
+  <div>login</div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vue-vite-biome/src/views/model/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>model</div>
+</template>
+
+<style lang="scss" scoped></style>

package/{template-vue-rolldown-oxc/tsconfig.app.json → template-vue-vite-biome/tsconfig.json}

@@ -1,7 +1,18 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "vue"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
 
     /* Linting */
     "strict": true,
@@ -10,6 +21,7 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
+
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
@@ -17,9 +29,8 @@
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx",
+    "src/**/*.d.ts",
     "src/**/*.vue",
-    "src/types/**/*",
     "./node_modules/element-plus/global.d.ts"
   ]
 }

package/template-vue-vite-biome/uno.config.ts

@@ -0,0 +1,10 @@
+// uno.config.ts
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    {
+      'flex-center': 'flex justify-center items-center',
+    },
+  ],
+})

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

@@ -0,0 +1,51 @@
+import path from 'node:path'
+import Vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import { defineConfig, loadEnv } from 'vite'
+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'
+import { PlusProComponentsResolver } from '@plus-pro-components/resolver'
+
+// https://vite.dev/config/
+export default defineConfig(({ command, mode }) => {
+  const root = process.cwd()
+  const env = loadEnv(mode, root)
+  const { VITE_PORT } = env
+
+  return {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    server: {
+      port: Number(VITE_PORT),
+      host: '0.0.0.0',
+      open: false,
+      proxy: {},
+    },
+    plugins: [
+      Vue(),
+      AutoImport({
+        imports: ['vue', 'vue-router'],
+        resolvers: [ElementPlusResolver()],
+        dts: './src/types/auto-import.d.ts',
+      }),
+      Components({
+        resolvers: [ElementPlusResolver(), PlusProComponentsResolver()],
+        dts: './src/types/components.d.ts',
+      }),
+      createSvgIconsPlugin({
+        // Specify the icon folder to be cached
+        iconDirs: [path.resolve(__dirname, 'src/assets/icon')],
+        // Specify symbolId format
+        symbolId: 'icon-[dir]-[name]',
+      }),
+      UnoCSS(),
+      Inspect(),
+    ],
+  }
+})

package/template-vue-vite-eslint/.env

@@ -0,0 +1,4 @@
+VITE_PORT = 9405
+VITE_PATH = '/'
+VITE_APP_NAME = "xxx"
+VITE_API_AFFIX = 'api'

package/template-vue-vite-eslint/.env.development

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

package/template-vue-vite-eslint/.env.production

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