create-bubbles 0.1.22 → 0.1.24

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/layout/default/index.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { MenuProps } from 'antdv-next'
+
 import type { MenuRouteRecordRawType } from '@/router/interface'
 
 import SvgIcon from '@/components/Icon/svg-icon.vue'
@@ -21,9 +23,9 @@ const openKeys = ref<string[]>([])
 
 watchEffect(() => {
   const matched = route.matched.map(item => item.name).filter(Boolean) as string[]
-  if (matched.length > 1) {
-    openKeys.value = [matched[0]]
-  }
+  const parentKey = matched[0]
+
+  openKeys.value = matched.length > 1 && parentKey !== undefined ? [parentKey] : []
 })
 
 function handleMenuClick({ key }: { key: string }) {
@@ -43,22 +45,24 @@ function renderIcon(icon?: string) {
   return null
 }
 
-function getMenuItems(routes: MenuRouteRecordRawType[]) {
+function getMenuItems(routes: MenuRouteRecordRawType[]): NonNullable<MenuProps['items']> {
   return routes
     .filter(item => !item.meta?.hideInMenu)
     .map((item) => {
       const hasChildren = item.children && item.children.length > 0
+      const key = String(item.name ?? item.path)
+      const label = item.meta?.title ?? key
       if (hasChildren) {
         return {
-          key: item.name as string,
-          label: item.meta?.title ?? item.name,
+          key,
+          label,
           icon: renderIcon(item.meta?.icon),
           children: getMenuItems(item.children as MenuRouteRecordRawType[]),
         }
       }
       return {
-        key: item.name as string,
-        label: item.meta?.title ?? item.name,
+        key,
+        label,
         icon: renderIcon(item.meta?.icon),
       }
     })
@@ -69,41 +73,22 @@ const menuItems = computed(() => getMenuItems(menuRoutes))
 
 <template>
   <ALayout class="h-screen">
-    <ALayoutSider
-      v-model:collapsed="collapsed"
-      :trigger="null"
-      collapsible
-      :width="220"
-      class="layout-sider"
-    >
+    <ALayoutSider v-model:collapsed="collapsed" :trigger="null" collapsible :width="220" class="layout-sider">
       <div class="logo flex-center gap-2 h-[var(--header-height)]">
         <SvgIcon icon="logo" class="text-2xl" />
         <span v-show="!collapsed" class="text-lg text-white font-bold">
           Vue Template
         </span>
       </div>
-      <AMenu
-        v-model:selected-keys="selectedKeys"
-        v-model:open-keys="openKeys"
-        :items="menuItems"
-        theme="dark"
-        mode="inline"
-        @click="handleMenuClick"
-      />
+      <AMenu v-model:selected-keys="selectedKeys" v-model:open-keys="openKeys" :items="menuItems" theme="dark"
+        mode="inline" @click="handleMenuClick" />
     </ALayoutSider>
 
     <ALayout>
       <ALayoutHeader class="layout-header px-4 flex items-center justify-between">
         <div class="flex gap-3 items-center">
-          <AButton
-            type="text"
-            class="flex-center"
-            @click="collapsed = !collapsed"
-          >
-            <SvgIcon
-              :icon="collapsed ? 'menu-unfold' : 'menu-fold'"
-              style="font-size: 18px"
-            />
+          <AButton type="text" class="flex-center" @click="collapsed = !collapsed">
+            <SvgIcon :icon="collapsed ? 'menu-unfold' : 'menu-fold'" style="font-size: 18px" />
           </AButton>
         </div>
         <Header />

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/locales/en_US.json

@@ -1,4 +1,7 @@
 {
   "保存": "Save",
-  "你好1": "Hello"
+  "你好1": "Hello",
+  "English": "English",
+  "中文": "中文",
+  "登录": "登录"
 }

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/locales/zh_CN.json

@@ -1,4 +1,7 @@
 {
   "保存": "保存",
-  "你好1": "你好"
+  "你好1": "你好",
+  "English": "English",
+  "中文": "中文",
+  "登录": "登录"
 }

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/guard/index.ts

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

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/guard/permissionGuard.ts

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

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/index.ts

@@ -1,18 +1,18 @@
-import type { App } from "vue";
+import type { App } from 'vue'
 
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory } from 'vue-router'
 
-import { setupGuard } from "./guard";
-import { routes } from "./modules";
+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);
+  setupGuard(router)
+  app.use(router)
 }

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/interface.ts

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

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/store/index.ts

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

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/store/modules/user.ts

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

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/styles/index.scss

@@ -1,12 +1,12 @@
-@use "./font.scss";
-@use "./variables.scss";
+@use './font.scss';
+@use './variables.scss';
 
 html,
 body,
 #root {
   width: 100%;
   height: 100%;
-  font-family: "SourceHanSansCN";
+  font-family: 'SourceHanSansCN';
 }
 
 *,

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/types/antdv-next.d.ts

@@ -0,0 +1 @@
+import 'antdv-next/global'

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/utils/env.ts

@@ -8,4 +8,4 @@ export const envVariables = {
   APP_NAME: import.meta.env.VITE_APP_NAME,
   /** 后端接口前缀 */
   API_AFFIX: import.meta.env.VITE_API_AFFIX,
-};
+}

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/utils/request/core/index.ts

@@ -1,9 +1,3 @@
-import {
-  deepMergeObject,
-  isPlainObject,
-  isReadableStream,
-  tryParseJsonString,
-} from './utils'
 import type {
   AlovaGlobalCacheAdapter,
   AlovaOptions,
@@ -12,18 +6,24 @@ import type {
   StatesExport,
   StatesHook,
 } from 'alova'
-import { createAlova } from 'alova'
 import type { FetchRequestInit } from 'alova/fetch'
+import { createAlova } from 'alova'
 import adapterFetch from 'alova/fetch'
+import {
+  deepMergeObject,
+  isPlainObject,
+  isReadableStream,
+  tryParseJsonString,
+} from './utils'
 
 type MaybePromise<T> = T | Promise<T>
-type HeaderValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | (() => MaybePromise<string | number | boolean | null | undefined>)
+type HeaderValue
+  = | string
+    | number
+    | boolean
+    | null
+    | undefined
+    | (() => MaybePromise<string | number | boolean | null | undefined>)
 type StatusMatcher<RE> = number | number[] | ((status: number, response: RE) => boolean)
 type CodeMatcher = Array<number | string>
 
@@ -86,7 +86,7 @@ export type RequestOption<
   SE extends StatesExport<any> = StatesExport<any>,
 > = BaseRequestOption<RC, RE, RH, SE>
 
-type RequestAlovaGenerics<RC extends object, RE, RH, SE extends StatesExport<any>> = {
+interface RequestAlovaGenerics<RC extends object, RE, RH, SE extends StatesExport<any>> {
   Responded: unknown
   Transformed: unknown
   RequestConfig: RC
@@ -114,8 +114,8 @@ type ResolvedRequestOption<RC extends object, RE, RH, SE extends StatesExport<an
     | 'errorDefaultMessage'
     | 'cacheLogger'
   >
-> &
-  BaseRequestOption<RC, RE, RH, SE>
+>
+& BaseRequestOption<RC, RE, RH, SE>
 
 const DEFAULT_SUCCESS_MESSAGE = '操作成功'
 const DEFAULT_ERROR_MESSAGE = '服务异常'
@@ -146,7 +146,7 @@ const defaultRequestOption: BaseRequestOption<any, any, any, any> = {
 }
 
 function getMethodMeta(method: unknown): RequestMeta {
-  const methodRecord = method as { meta?: RequestMeta; config?: { meta?: RequestMeta } } | undefined
+  const methodRecord = method as { meta?: RequestMeta, config?: { meta?: RequestMeta } } | undefined
   return methodRecord?.config?.meta ?? methodRecord?.meta ?? {}
 }
 
@@ -160,31 +160,37 @@ function isMatchedStatus<RE>(
   matcher: StatusMatcher<RE> | undefined,
   response: RE,
 ): boolean {
-  if (matcher === undefined) return status >= 200 && status < 300
+  if (matcher === undefined)
+    return status >= 200 && status < 300
 
-  if (typeof matcher === 'function') return matcher(status, response)
+  if (typeof matcher === 'function')
+    return matcher(status, response)
 
   return Array.isArray(matcher) ? matcher.includes(status) : matcher === status
 }
 
 function isMatchedCode(code: unknown, matcher: CodeMatcher | undefined): boolean {
-  if (!matcher?.length) return true
+  if (!matcher?.length)
+    return true
 
-  return matcher.some((item) => String(item) === String(code))
+  return matcher.some(item => String(item) === String(code))
 }
 
 function getResponseStatus(response: unknown): number {
-  const responseRecord = response as { status?: unknown; statusCode?: unknown }
+  const responseRecord = response as { status?: unknown, statusCode?: unknown }
   const status = responseRecord.statusCode ?? responseRecord.status
   return typeof status === 'number' ? status : Number(status)
 }
 
 function getResponseMessage(data: unknown, messageKey: string, defaultMessage: string): string {
-  if (!isPlainObject(data)) return defaultMessage
+  if (!isPlainObject(data))
+    return defaultMessage
 
   const message = data[messageKey] ?? data.message ?? data.msg
-  if (typeof message === 'string') return message || defaultMessage
-  if (typeof message === 'number') return String(message)
+  if (typeof message === 'string')
+    return message || defaultMessage
+  if (typeof message === 'number')
+    return String(message)
 
   return defaultMessage
 }
@@ -201,7 +207,8 @@ async function parseFetchResponse(response: {
   json?: () => Promise<unknown>
   text?: () => Promise<string>
 }): Promise<unknown> {
-  if (response.status === 204) return undefined
+  if (response.status === 204)
+    return undefined
 
   const reader = typeof response.clone === 'function' ? response.clone() : response
   const contentType = getHeaderValue(response.headers, 'content-type')
@@ -215,12 +222,14 @@ async function parseFetchResponse(response: {
   if (typeof reader.json === 'function') {
     try {
       return await reader.json()
-    } catch {
+    }
+    catch {
       // Fall through to text parsing.
     }
   }
 
-  if (typeof reader.text === 'function') return tryParseJsonString(await reader.text())
+  if (typeof reader.text === 'function')
+    return tryParseJsonString(await reader.text())
 
   return undefined
 }
@@ -229,13 +238,15 @@ function getHeaderValue(
   headers: Headers | Record<string, unknown> | undefined,
   key: string,
 ): string {
-  if (!headers) return ''
+  if (!headers)
+    return ''
 
-  if (typeof Headers !== 'undefined' && headers instanceof Headers) return headers.get(key) ?? ''
+  if (typeof Headers !== 'undefined' && headers instanceof Headers)
+    return headers.get(key) ?? ''
 
   const headerRecord = headers as Record<string, unknown>
-  const value =
-    headerRecord[key] ?? headerRecord[key.toLowerCase()] ?? headerRecord[key.toUpperCase()]
+  const value
+    = headerRecord[key] ?? headerRecord[key.toLowerCase()] ?? headerRecord[key.toUpperCase()]
   return typeof value === 'string' ? value : ''
 }
 
@@ -251,9 +262,9 @@ async function getResponseData(response: unknown): Promise<unknown> {
     return tryParseJsonString(responseRecord.data)
 
   if (
-    isReadableStream(responseRecord.body) ||
-    typeof responseRecord.json === 'function' ||
-    typeof responseRecord.text === 'function'
+    isReadableStream(responseRecord.body)
+    || typeof responseRecord.json === 'function'
+    || typeof responseRecord.text === 'function'
   ) {
     return parseFetchResponse(responseRecord)
   }
@@ -263,7 +274,8 @@ async function getResponseData(response: unknown): Promise<unknown> {
 
 async function resolveHeaderValue(value: HeaderValue): Promise<string | undefined> {
   const resolved = typeof value === 'function' ? await value() : value
-  if (resolved === null || resolved === undefined) return undefined
+  if (resolved === null || resolved === undefined)
+    return undefined
   return String(resolved)
 }
 
@@ -311,7 +323,8 @@ export function createInstance<
 
       for (const [key, value] of Object.entries(config.commonHeaders?.() ?? {})) {
         const resolvedValue = await resolveHeaderValue(value)
-        if (resolvedValue !== undefined) setHeader(headers, key, resolvedValue)
+        if (resolvedValue !== undefined)
+          setHeader(headers, key, resolvedValue)
       }
     },
     responded: {
@@ -322,7 +335,8 @@ export function createInstance<
         const showError = getMetaFlag(meta, 'isShowErrorMessage', config.isShowErrorMessage)
         const isWrapped = getMetaFlag(meta, 'isWrapped', config.isWrapped)
 
-        if (!shouldTransform) return response
+        if (!shouldTransform)
+          return response
 
         const status = getResponseStatus(response)
         const data = await getResponseData(response)
@@ -340,7 +354,8 @@ export function createInstance<
         }
 
         if (!isWrapped) {
-          if (showSuccess) config.successMessageFunc?.(config.successDefaultMessage)
+          if (showSuccess)
+            config.successMessageFunc?.(config.successDefaultMessage)
           return data
         }
 
@@ -353,7 +368,8 @@ export function createInstance<
         )
 
         if (!isMatchedCode(code, config.codeMap.success)) {
-          if (isMatchedCode(code, config.codeMap.unAuthorized)) config.unAuthorizedResponseFunc?.()
+          if (isMatchedCode(code, config.codeMap.unAuthorized))
+            config.unAuthorizedResponseFunc?.()
 
           if (showError) {
             config.errorMessageFunc?.(
@@ -363,7 +379,8 @@ export function createInstance<
           return Promise.reject(response)
         }
 
-        if (showSuccess) config.successMessageFunc?.(responseMessage)
+        if (showSuccess)
+          config.successMessageFunc?.(responseMessage)
 
         return responseData
       },
@@ -396,8 +413,8 @@ export type DualCallInstance<
   RE = Response,
   RH = Headers,
   SE extends StatesExport<any> = StatesExport<any>,
-> = RequestInstance<RC, RE, RH, SE> &
-  ((option?: RequestOption<RC, RE, RH, SE>) => RequestInstance<RC, RE, RH, SE>)
+> = RequestInstance<RC, RE, RH, SE>
+  & ((option?: RequestOption<RC, RE, RH, SE>) => RequestInstance<RC, RE, RH, SE>)
 
 export function createDualCallInstance<
   RC extends object = FetchRequestInit,
@@ -407,7 +424,8 @@ export function createDualCallInstance<
 >(baseConfig: BaseRequestOption<RC, RE, RH, SE>): DualCallInstance<RC, RE, RH, SE> {
   const defaultInstance = createInstance(baseConfig)
   const dualInstance = ((option?: RequestOption<RC, RE, RH, SE>) => {
-    if (!option) return defaultInstance
+    if (!option)
+      return defaultInstance
     return createInstance(deepMergeObject(baseConfig, option))
   }) as DualCallInstance<RC, RE, RH, SE>
 

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/utils/request/core/utils.ts

@@ -1,6 +1,7 @@
 export function deepMergeObject<T = any>(source: T, target: Partial<T>): T {
   const merge = (src: any, tgt: any): any => {
-    if (!isPlainObject(src) || !isPlainObject(tgt)) return tgt === undefined ? src : tgt
+    if (!isPlainObject(src) || !isPlainObject(tgt))
+      return tgt === undefined ? src : tgt
 
     const result = { ...src }
     for (const key of Object.keys(tgt)) {
@@ -19,21 +20,26 @@ export function isPlainObject(data: unknown): data is Record<string, any> {
 }
 
 export function isReadableStream(data: unknown): boolean {
-  if (typeof ReadableStream === 'undefined') return false
+  if (typeof ReadableStream === 'undefined')
+    return false
   return data instanceof ReadableStream
 }
 
 export function tryParseJsonString(data: unknown): unknown {
-  if (typeof data !== 'string') return data
+  if (typeof data !== 'string')
+    return data
 
   const value = data.trim()
-  if (!value) return data
+  if (!value)
+    return data
 
-  if (!value.startsWith('{') && !value.startsWith('[')) return data
+  if (!value.startsWith('{') && !value.startsWith('['))
+    return data
 
   try {
     return JSON.parse(value)
-  } catch {
+  }
+  catch {
     return data
   }
 }

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/utils/request/index.ts

@@ -31,7 +31,7 @@ function getBaseConfig() {
       message.error(msg)
     },
     unAuthorizedResponseFunc: () => {
-      router.push('/login')
+      void router.push('/login')
       message.error('登录过期或未登录')
     },
     statesHook: vueHook,