create-bubbles 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bubbles",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "author": "bubbles plant",
   "bin": {

package/template-react-rsbuild/.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-react-rsbuild/.env.development

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

package/template-react-rsbuild/.env.production

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

package/template-react-rsbuild/.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "biomejs.biome",// 控制相关文件嵌套展示
+  "editor.defaultFormatter": "biomejs.biome", // 控制相关文件嵌套展示
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.expand": false,
   "explorer.fileNesting.patterns": {
@@ -10,12 +10,5 @@
     "package.json": "pnpm-lock.yaml",
     ".prettierrc": ".prettierignore"
   },
-  "cSpell.words": [
-    "ahooks",
-    "ianvs",
-    "lefthook",
-    "rsbuild",
-    "unocss",
-    "unplugin"
-  ],
+  "cSpell.words": ["ahooks", "ianvs", "lefthook", "rsbuild", "rspack", "unocss", "unplugin"]
 }

package/template-react-rsbuild/biome.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "ignoreUnknown": true,
-    "ignore": ["dist/*", "node_modules", "package.json", "auto-import.d.ts", "*.js", ".vscode/*"]
+    "ignore": ["dist/*", "node_modules", "package.json", "auto-import.d.ts", "*.js"]
   },
   "formatter": {
     "enabled": true,

package/template-react-rsbuild/package.json

@@ -28,6 +28,8 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@rsbuild/core": "^1.3.6",
     "@rsbuild/plugin-react": "^1.2.0",
+    "@rsbuild/plugin-sass": "^1.3.1",
+    "@rsbuild/plugin-svgr": "^1.2.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@unocss/postcss": "66.1.0-beta.11",

package/template-react-rsbuild/rsbuild.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from '@rsbuild/core'
 import { pluginReact } from '@rsbuild/plugin-react'
 import AutoImport from 'unplugin-auto-import/rspack'
 import UnoCSS from '@unocss/postcss'
+import { pluginSass } from '@rsbuild/plugin-sass'
+import { pluginSvgr } from '@rsbuild/plugin-svgr'
 
 export default defineConfig({
   html: {
@@ -15,12 +17,20 @@ export default defineConfig({
   server: {
     port: Number(process.env.PUBLIC_PORT),
   },
-  plugins: [pluginReact()],
+  plugins: [
+    pluginReact(),
+    pluginSass({
+      sassLoaderOptions: {
+        // additionalData: `@import "@/styles/variables.scss";`,
+      },
+    }),
+    pluginSvgr(),
+  ],
   tools: {
     rspack: {
       plugins: [
         AutoImport({
-          imports: ['react', 'react-router', 'react-router-dom'],
+          imports: ['react', 'react-router'],
           dts: './src/types/auto-import.d.ts',
         }),
       ],

package/template-react-rsbuild/src/assets/icon/logo.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="8" fill="white" fill-opacity="0.96"/>
+  <path d="M19.0579 9.09827L15.8082 11.0706L12.9421 9.09827L6 13.3109V21.7368L12.9421 25.9498L16.1918 24.2105L19.0579 25.9498L26 21.7368V13.3109L19.0579 9.09827ZM12.9421 24.705L7.02568 21.1148V13.9336L12.9421 10.3433L14.7822 11.6929L12.1157 13.3112V21.7371L15.1661 23.5882L12.9421 24.705ZM13.1417 20.0549H18.8586V21.3475L16.1918 22.9658L13.1417 21.1148V20.0549ZM13.1417 18.9765V16.5097H18.8586V18.9765H13.1417ZM18.8586 15.4312H13.1417V13.9336L15.8082 12.3153L18.8586 14.1663V15.4312ZM24.9743 21.1148L19.0579 24.705L17.2178 23.5882L19.8846 21.9699V13.544L16.8342 11.6929L19.0582 10.3433L24.9746 13.9336L24.9743 21.1148Z" fill="#146AE1"/>
+  <path d="M14.573 7.86376L13.3172 5.51634C13.3835 5.37271 13.4218 5.21177 13.4218 5.04137C13.4218 4.43853 12.9568 3.94971 12.3832 3.94971C11.8097 3.94971 11.3447 4.43853 11.3447 5.04137C11.3447 5.64421 11.7792 6.0987 12.326 6.1302L13.5704 8.45652C13.6759 8.65401 13.8713 8.76487 14.0723 8.76487C14.1676 8.76487 14.2647 8.73999 14.3537 8.68708C14.6306 8.5233 14.7289 8.15479 14.573 7.86376Z" fill="#FDC23A"/>
+  <path d="M17.4268 7.86376L18.6826 5.51634C18.6164 5.37271 18.5781 5.21177 18.5781 5.04137C18.5781 4.43853 19.0431 3.94971 19.6169 3.94971C20.1904 3.94971 20.6555 4.43853 20.6555 5.04137C20.6555 5.62405 20.221 6.0987 19.6742 6.1302L18.4297 8.45652C18.3243 8.65401 18.1289 8.76487 17.9278 8.76487C17.8325 8.76487 17.7355 8.73999 17.6465 8.68708C17.3696 8.5233 17.2713 8.15479 17.4271 7.86376H17.4268Z" fill="#FDC23A"/>
+  </svg>
+  

package/template-react-rsbuild/src/index.tsx

@@ -1,20 +1,20 @@
-import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom/client';
+import React, { Suspense } from 'react'
+import ReactDOM from 'react-dom/client'
 
-import App from './App';
+import App from './App'
 
-import '@/styles/index.css';
+import '@/styles/index.scss'
 
-import Loading from './components/Loading/PageLoading';
+import Loading from './components/Loading/PageLoading'
 
-const rootEl = document.getElementById('root');
+const rootEl = document.getElementById('root')
 if (rootEl) {
-  const root = ReactDOM.createRoot(rootEl);
+  const root = ReactDOM.createRoot(rootEl)
   root.render(
     <React.StrictMode>
       <Suspense fallback={<Loading />}>
         <App />
       </Suspense>
     </React.StrictMode>,
-  );
+  )
 }

package/template-react-rsbuild/src/layout/default/index.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router'
+const Layout = () => {
+  return (
+    <div className="w-full">
+      <Outlet />
+    </div>
+  )
+}
+
+export default memo(Layout)

package/template-react-rsbuild/src/pages/home/index.tsx

@@ -1,5 +1,5 @@
 const Home = () => {
-  return <h1 className="text-red text-30px">111</h1>
+  return <h1 className="flex-center w-full h-full text-red  abc-var(--menu-bg)">111</h1>
 }
 
 export default Home

package/template-react-rsbuild/src/router/index.tsx

@@ -1,27 +1,38 @@
-import { Suspense } from 'react';
-import { createBrowserRouter, type RouteObject } from 'react-router';
-
-import Loading from '@/components/Loading/PageLoading';
-
+import { createBrowserRouter, Navigate, type RouteObject } from 'react-router'
+import Layout from '@/layout/default'
+import { envVariables } from '@/utils/env'
 export const lazyLoad = (path: string) => {
-  const Module = lazy(() => import(`@/pages/${path}.tsx`));
-  return (
-    <Suspense fallback={<Loading />}>
-      <Module />
-    </Suspense>
-  );
-};
+  const Module = lazy(() => import(`@/pages/${path}.tsx`))
+  return <Module />
+}
 
-const routes: RouteObject[] = [
+export const menuRoutes: RouteObject[] = [
   {
-    path: '/',
+    path: 'home',
     id: 'home',
+    handle: { title: '首页' },
     element: lazyLoad('home/index'),
   },
-];
+]
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    id: 'layout',
+    element: <Layout />,
+    children: [
+      {
+        path: '',
+        id: 'index',
+        element: <Navigate to={'/home'} />,
+      },
+      ...menuRoutes,
+    ],
+  },
+]
 
 export const router = createBrowserRouter(routes, {
-  basename: import.meta.env.PUBLIC_PATH,
-});
+  basename: envVariables.PUBLIC_PATH,
+})
 
-export default router;
+export default router

package/template-react-rsbuild/src/styles/fonts.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Alimama ShuHeiTi';
+  src: url('@/assets/font/AlimamaShuHeiTi-Bold.ttf');
+}

package/template-react-rsbuild/src/styles/{index.css → index.scss}

@@ -1,4 +1,6 @@
 @unocss;
+@import "./variables.scss";
+@import "./fonts.scss";
 
 html,
 body,

package/template-react-rsbuild/src/styles/variables.scss

@@ -0,0 +1,4 @@
+:root {
+  --header-height: 64px;
+  --menu-bg: linear-gradient(180deg, #2a2d3e 0%, #2a2d3e 100%);
+}

package/template-react-rsbuild/src/types/auto-import.d.ts

@@ -6,12 +6,6 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const Link: typeof import('react-router-dom')['Link']
-  const NavLink: typeof import('react-router-dom')['NavLink']
-  const Navigate: typeof import('react-router-dom')['Navigate']
-  const Outlet: typeof import('react-router-dom')['Outlet']
-  const Route: typeof import('react-router-dom')['Route']
-  const Routes: typeof import('react-router-dom')['Routes']
   const createRef: typeof import('react')['createRef']
   const forwardRef: typeof import('react')['forwardRef']
   const lazy: typeof import('react')['lazy']
@@ -22,25 +16,23 @@ declare global {
   const useDebugValue: typeof import('react')['useDebugValue']
   const useDeferredValue: typeof import('react')['useDeferredValue']
   const useEffect: typeof import('react')['useEffect']
-  const useHref: typeof import('react-router-dom')['useHref']
+  const useHref: typeof import('react-router')['useHref']
   const useId: typeof import('react')['useId']
   const useImperativeHandle: typeof import('react')['useImperativeHandle']
-  const useInRouterContext: typeof import('react-router-dom')['useInRouterContext']
+  const useInRouterContext: typeof import('react-router')['useInRouterContext']
   const useInsertionEffect: typeof import('react')['useInsertionEffect']
   const useLayoutEffect: typeof import('react')['useLayoutEffect']
-  const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler']
-  const useLocation: typeof import('react-router-dom')['useLocation']
+  const useLocation: typeof import('react-router')['useLocation']
   const useMemo: typeof import('react')['useMemo']
-  const useNavigate: typeof import('react-router-dom')['useNavigate']
-  const useNavigationType: typeof import('react-router-dom')['useNavigationType']
-  const useOutlet: typeof import('react-router-dom')['useOutlet']
-  const useOutletContext: typeof import('react-router-dom')['useOutletContext']
-  const useParams: typeof import('react-router-dom')['useParams']
+  const useNavigate: typeof import('react-router')['useNavigate']
+  const useNavigationType: typeof import('react-router')['useNavigationType']
+  const useOutlet: typeof import('react-router')['useOutlet']
+  const useOutletContext: typeof import('react-router')['useOutletContext']
+  const useParams: typeof import('react-router')['useParams']
   const useReducer: typeof import('react')['useReducer']
   const useRef: typeof import('react')['useRef']
-  const useResolvedPath: typeof import('react-router-dom')['useResolvedPath']
-  const useRoutes: typeof import('react-router-dom')['useRoutes']
-  const useSearchParams: typeof import('react-router-dom')['useSearchParams']
+  const useResolvedPath: typeof import('react-router')['useResolvedPath']
+  const useRoutes: typeof import('react-router')['useRoutes']
   const useState: typeof import('react')['useState']
   const useSyncExternalStore: typeof import('react')['useSyncExternalStore']
   const useTransition: typeof import('react')['useTransition']

package/template-react-rsbuild/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-react-rsbuild/src/utils/request/axios.ts

@@ -1,5 +1,6 @@
 import { message } from 'antd'
 import axios, { type AxiosResponse } from 'axios'
+import { envVariables } from '@/utils/env'
 
 import { router } from '@/router'
 import { useUserStore } from '@/store/modules/user'
@@ -24,7 +25,7 @@ export default (customConfig?: CustomConfig) => {
   const token = useUserStore((state) => state.token)
 
   const instance = axios.create({
-    baseURL: import.meta.env.PUBLIC_API_AFFIX,
+    baseURL: envVariables.PUBLIC_API_AFFIX,
   })
 
   instance.interceptors.request.use(

package/template-react-rsbuild/tsconfig.json

@@ -19,11 +19,17 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
 
-    "baseUrl": "./",
+    "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
     }
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/types/**/*.d.ts",
+    "src/types/**/*.ts"
+  ],
+  "exclude": ["node_modules", "dist", "**/*.js"]
 }

package/template-react-rsbuild/uno.config.ts

@@ -5,4 +5,6 @@ export default defineConfig({
     filesystem: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}'],
   },
   presets: [presetWind3()],
+  rules: [],
+  shortcuts: [['flex-center', 'flex items-center justify-center']],
 })