create-packer 1.34.9 → 1.35.0

package/template/web-app/react-vite/domain/app/app.model.ts

@@ -0,0 +1,7 @@
+import { defineStore } from 'define-zustand'
+
+export const useApp = defineStore({
+    state: () => ({}),
+    getter: {},
+    actions: () => ({})
+})

package/template/web-app/react-vite/domain/app/app.styled.ts

@@ -0,0 +1,3 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle``

package/template/web-app/react-vite/domain/app/components/app-context.tsx

@@ -0,0 +1,17 @@
+import { FunctionComponent } from 'react'
+import { ThemeProvider } from 'styled-components'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { theme } from '@/shared/theme'
+
+const queryClient = new QueryClient()
+
+export interface propsType {
+    children: React.ReactNode
+}
+export const Root: FunctionComponent<propsType> = props => {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+        </QueryClientProvider>
+    )
+}

package/template/web-app/react-vite/domain/app/components/app.tsx

@@ -0,0 +1,24 @@
+import { useLayoutEffect } from 'react'
+import { RouterProvider } from 'react-router-dom'
+import { request } from '@/shared/service'
+import { routerInstance } from '@/domain/router'
+import { GlobalStyle } from '../app.styled'
+import * as AppContext from './app-context'
+
+export const Root = () => {
+    useLayoutEffect(() => {
+        request.interceptors.response.use(
+            res => res,
+            error => {
+                console.log(error)
+            }
+        )
+    }, [])
+
+    return (
+        <AppContext.Root>
+            <GlobalStyle />
+            <RouterProvider router={routerInstance} fallbackElement={<>loading...</>} />
+        </AppContext.Root>
+    )
+}

package/template/web-app/react-vite/domain/app/components/index.ts

@@ -0,0 +1 @@
+export * as App from './app'

package/template/web-app/react-vite/domain/app/index.ts

@@ -0,0 +1,2 @@
+export * from './app.model'
+export * from './components'

package/template/web-app/react-vite/domain/router/home/ids.ts

@@ -0,0 +1,3 @@
+export default {
+    home: 'home'
+}

package/template/web-app/react-vite/domain/router/home/index.ts

@@ -0,0 +1,2 @@
+export { default as routes } from './routes'
+export { default as ids } from './ids'

package/template/web-app/react-vite/domain/router/home/routes.tsx

@@ -0,0 +1,13 @@
+import { lazy } from 'react'
+import ids from './ids'
+import type { routeType } from '../router.types'
+
+const routes: routeType[] = [
+    {
+        path: 'home',
+        id: ids.home,
+        Component: lazy(() => import('@/pages/home'))
+    }
+]
+
+export default routes

package/template/web-app/react-vite/domain/router/ids.ts

@@ -0,0 +1,6 @@
+import * as home from './home'
+export default {
+    root: 'root',
+    notFound: 'notFound',
+    ...home.ids
+}

package/template/web-app/react-vite/domain/router/index.ts

@@ -0,0 +1,3 @@
+export { default as routerIds } from './ids'
+export * from './router'
+export * from './router.types'

package/template/web-app/react-vite/domain/router/router.types.ts

@@ -0,0 +1,3 @@
+import { routeType as $routeType } from '@/shared/hooks'
+
+export type routeType = $routeType

package/template/web-app/react-vite/main.tsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import { App } from '@/domain/app'
+
+createRoot(document.getElementById('root') as HTMLElement).render(<App.Root />)

package/template/web-app/react-vite/pages/home/home.styled.ts

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components'
+
+export const StyledRoot = styled.div(({ theme }) => {
+    return css`
+        ${theme.tools.flex('center', 'center')};
+    `
+})

package/template/web-app/react-vite/pages/home/home.tsx

@@ -0,0 +1,10 @@
+import { useHomeQuery } from '@/shared/service'
+import { StyledRoot } from './home.styled'
+
+export default function Home() {
+    const query = useHomeQuery()
+
+    console.log('data', query.data)
+
+    return <StyledRoot>sdfs</StyledRoot>
+}

package/template/web-app/react-vite/pages/home/index.ts

@@ -0,0 +1 @@
+export { default } from './home'

package/template/web-app/react-vite/pages/index.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
+import { useRouter, routerIds } from '@/domain/router'
+
+const Layout = () => {
+    const location = useLocation()
+    const navigate = useRouter(state => state.navigate)
+
+    useEffect(() => {
+        if (location.pathname === '/') {
+            navigate({ id: routerIds.home })
+        }
+    }, [location])
+
+    return <Outlet />
+}
+
+export default Layout

package/template/web-app/react-vite/pages/not-found.tsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+    return <div>404</div>
+}

package/template/web-app/react-vite/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        autoprefixer: {},
+        ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+    }
+}

package/template/web-app/react-vite/scripts/createChunks.ts

@@ -0,0 +1,26 @@
+import { concat, forEach, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import pkg from '../package.json'
+
+export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
+    const vendor = keys(pkg.dependencies)
+    const result: { [key: string]: string[] } = {}
+
+    forEach(chunks, (values, key) => {
+        if (!isArray(result[key])) {
+            result[key] = []
+        }
+        forEach(values, value => {
+            let modules: string[] = []
+            if (isRegExp(value)) {
+                modules = remove(vendor, name => value.test(name))
+            } else {
+                modules = remove(vendor, name => name === value)
+            }
+            if (size(modules) > 0) {
+                result[key] = concat(result[key], modules)
+            }
+        })
+    })
+    result.vendor = vendor
+    return result
+}

package/template/web-app/react-vite/scripts/index.ts

@@ -0,0 +1 @@
+export * from './createChunks'

package/template/web-app/react-vite/shared/assets/react.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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/template/web-app/react-vite/shared/hooks/defineRouter/defineRouter.types.ts

@@ -0,0 +1,33 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { RouteObject } from 'react-router-dom'
+
+export type routeType = Omit<RouteObject, 'children' | 'id'> & {
+    id: string
+    meta?: {
+        title?: string
+        /** 只在当前路由才显示的小提示 */
+        tip?: string
+    }
+    /** 静态配置，便于回退 */
+    unauthorizedOrigin?: boolean
+    /** 动态使用，用于程序校验 */
+    unauthorized?: boolean
+    query?: () => Record<string, any>
+    menu?: {
+        hidden?: boolean
+        icon?: FunctionComponent
+        label?: ReactNode
+    }
+    children?: routeType[]
+}
+
+export type editableRouteType = Omit<routeType, 'element' | 'errorElement' | 'children'>
+
+export interface routerFactoryArgType {
+    basename: string
+    routes: routeType[]
+}
+
+export type routeByIdType = Omit<routeType, 'children'> & {
+    pos: string
+}

package/template/web-app/react-vite/shared/hooks/defineRouter/deineRouter.tsx

@@ -0,0 +1,160 @@
+import { DependencyList, useEffect, useMemo } from 'react'
+import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router-dom'
+import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
+import { stringify, parse } from 'qs'
+import { defineStore } from 'define-zustand'
+import { routeByIdType, routeType, editableRouteType } from './defineRouter.types'
+
+export default function defineRouter(router: ReturnType<typeof createBrowserRouter>) {
+    const useRouter = defineStore({
+        state: () => ({
+            routes: cloneDeep(router.routes) as routeType[]
+        }),
+        getter: {
+            routesById: state => {
+                return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
+                    return reduce(
+                        routes,
+                        (result, { children, ...route }, i) => {
+                            const $route: routeByIdType = {
+                                ...route,
+                                pos: parentRoute?.pos ? `${parentRoute?.pos}-${i}` : `${i}`
+                            }
+                            if (parentRoute) {
+                                $route.path = `${
+                                    parentRoute.path === '/' ? '' : parentRoute.path
+                                }/${$route.path}`
+                            }
+                            result[$route.id] = $route
+                            if (isArray(children)) {
+                                assign(result, flat(children, $route))
+                            }
+                            return result
+                        },
+                        {} as Record<string, routeByIdType>
+                    )
+                })(state.routes)
+            }
+        },
+        actions: (getState, action) => {
+            function posToLodashPath(pos: string) {
+                if (pos) {
+                    return `[${split(pos, '-').join('].children[')}]`
+                }
+                return ''
+            }
+
+            function updateRoute(id: routeType['id'], updator: (route: editableRouteType) => void) {
+                const { routesById, routes } = getState()
+                const newRoutes = cloneDeep(routes)
+                const path = posToLodashPath(routesById[id].pos)
+                const route: routeType = get(newRoutes, path)
+                const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
+                updator(newRoute)
+                assign(route, newRoute)
+                action.setState({ routes: newRoutes })
+            }
+            function getRoute(id: routeType['id'], path?: string | string[]) {
+                const { routesById } = getState()
+                const route = routesById[id]
+                if (path) {
+                    return get(route, path)
+                }
+                return route
+            }
+
+            function genRouteUrl(id: routeType['id'], query?: Record<string, any>) {
+                const path = getRoute(id, 'path')
+                if (path) {
+                    const { origin } = window.location
+                    let url = origin + router.basename + path
+                    url += query ? `?${stringify(query)}` : ''
+                    return url
+                }
+                return void 0
+            }
+
+            function openRoute(id: routeType['id'], query?: Record<string, any>) {
+                const url = genRouteUrl(id, query)
+                if (url) {
+                    window.open(url)
+                }
+            }
+
+            function reloadRoute(id: routeType['id'], query?: Record<string, any>) {
+                const url = genRouteUrl(id, query)
+                if (url) {
+                    window.location.replace(url)
+                }
+            }
+
+            function navigate(
+                to: { id: routeType['id']; query?: Record<string, any> },
+                opts?: NavigateOptions
+            ) {
+                return router.navigate(
+                    {
+                        pathname: getRoute(to.id, 'path'),
+                        search: to.query ? stringify(to.query) : ''
+                    },
+                    opts
+                )
+            }
+
+            return {
+                navigate,
+                getRoute,
+                genRouteUrl,
+                openRoute,
+                reloadRoute,
+                updateRoute
+            }
+        }
+    })
+    function useQuery<Q>() {
+        const [params] = useSearchParams()
+        const query = parse(params.toString())
+
+        return query as Q
+    }
+
+    function useMatchRoutes(): routeType[] {
+        const matches = useMatches()
+        const getRoute = useRouter(state => state.getRoute)
+        return useMemo(() => map(matches, o => getRoute(o.id)), [matches])
+    }
+
+    /**
+     * @description 验证器返回false则无权限
+     */
+    function useRoutePermission(
+        config: {
+            redirectRouteId: string
+            validator: (currentRoute?: routeType) => boolean
+        },
+        deps: DependencyList
+    ) {
+        const matchRoutes = useMatchRoutes()
+        const currentRoute = last(matchRoutes)
+        const updateRoute = useRouter(state => state.updateRoute)
+        const navigate = useRouter(state => state.navigate)
+        const routesById = useRouter(state => state.routesById)
+
+        useEffect(() => {
+            forEach(routesById, route => {
+                updateRoute(route.id, route => {
+                    route.unauthorized = !config.validator(route)
+                })
+            })
+        }, deps)
+
+        useEffect(() => {
+            const result = config.validator(currentRoute)
+            if (!result && config.redirectRouteId) {
+                navigate({ id: config.redirectRouteId }, { replace: true })
+            }
+        }, [currentRoute?.id, ...deps])
+    }
+
+    return { useRouter, useQuery, useMatchRoutes, useRoutePermission }
+}

package/template/web-app/react-vite/shared/hooks/defineRouter/index.ts

@@ -0,0 +1,2 @@
+export { default as defineRouter } from './deineRouter'
+export * from './defineRouter.types'

package/template/web-app/react-vite/shared/hooks/index.ts

@@ -0,0 +1,6 @@
+export { default as useLoadingAction } from './useLoadingAction'
+export { default as useInterval } from './useInterval'
+export { default as useVisible } from './useVisible'
+export { default as useLowPriorityState } from './useLowPriorityState'
+export * from './useSyncState'
+export * from './defineRouter'

package/template/web-app/react-vite/shared/hooks/useInterval.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { useInterval as useRUInterval } from 'react-use'
+
+interface actionsType {
+    start: () => void
+    stop: () => void
+}
+export default function useInterval(
+    cb: (actions: actionsType) => Promise<void> | void,
+    delay: number
+): actionsType {
+    const [startInterval, setStartInterval] = useState(false)
+    const start: actionsType['start'] = () => {
+        setStartInterval(true)
+    }
+    const stop: actionsType['stop'] = () => {
+        setStartInterval(false)
+    }
+    useRUInterval(
+        async () => {
+            cb({ start, stop })
+        },
+        startInterval ? delay : null
+    )
+    return { start, stop }
+}

package/template/web-app/react-vite/shared/hooks/useLoadingAction.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState, DependencyList, useRef } from 'react'
+
+export default function useLoadingAction<C extends (...arg: any) => Promise<any> | any>(
+    callback: C,
+    deps: DependencyList,
+    debounce = true
+) {
+    const [loading, setLoading] = useState(false)
+    const loadingSync = useRef(loading)
+    function $setLoading(loading: boolean) {
+        setLoading(loading)
+        loadingSync.current = loading
+    }
+    const action = useCallback(async (...arg: any) => {
+        if (debounce && loadingSync.current) {
+            return
+        }
+        try {
+            $setLoading(true)
+            return await callback(...arg)
+        } finally {
+            $setLoading(false)
+        }
+    }, deps) as C
+
+    return [loading, action] as const
+}

package/template/web-app/react-vite/shared/hooks/useLowPriorityState.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState, useTransition, DependencyList } from 'react'
+
+/**
+ *
+ * @param callback
+ * @param watches If set, it is autorun callback
+ * @returns
+ */
+export default function useLowPriorityState<V>(callback: () => V, watches?: DependencyList) {
+    const [value, setValue] = useState<V>(callback)
+    const [loading, startTransition] = useTransition()
+
+    function startLoad() {
+        startTransition(() => {
+            setValue(callback())
+        })
+    }
+
+    useEffect(() => {
+        if (watches) {
+            startLoad()
+        }
+    }, watches)
+
+    return [value, { loading, startLoad }] as const
+}

package/template/web-app/react-vite/shared/hooks/useSyncState.ts

@@ -0,0 +1,15 @@
+import { useRef, useState, Dispatch, SetStateAction } from 'react'
+import { isFunction } from 'lodash-es'
+
+export function useSyncState<S>(initialState: S | (() => S)) {
+    const [state, setState] = useState(initialState)
+    const syncState = useRef<S>(state)
+
+    const $setState: Dispatch<SetStateAction<S>> = newState => {
+        const $newState = isFunction(newState) ? newState(state) : newState
+        setState($newState)
+        syncState.current = $newState
+    }
+
+    return [syncState, state, $setState] as const
+}

package/template/web-app/react-vite/shared/hooks/useVisible.ts

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { isFunction } from 'lodash-es'
+
+export interface useVisibleConfigType {
+    defaultVisible?: boolean
+    onBeforeShow?: () => Promise<boolean | void>
+    onBeforeHide?: () => Promise<boolean | void>
+}
+export default function useVisible(config?: useVisibleConfigType) {
+    const [visible, setVisible] = useState(config?.defaultVisible ?? false)
+    const onShow = async () => {
+        let isShow: boolean | void = true
+        if (isFunction(config?.onBeforeShow)) {
+            isShow = await config?.onBeforeShow?.()
+        }
+        setVisible(isShow !== false)
+    }
+    const onClose = async () => {
+        let isHide: boolean | void = true
+        if (isFunction(config?.onBeforeHide)) {
+            isHide = await config?.onBeforeHide?.()
+        }
+        setVisible(isHide === false)
+    }
+
+    return { visible, onShow, onClose }
+}

package/template/web-app/react-vite/shared/service/api.ts

@@ -0,0 +1 @@
+export const HOME_DATA = '/homeData'

package/template/web-app/react-vite/shared/service/index.ts

@@ -0,0 +1,3 @@
+export * from './request'
+export * as API from './api'
+export * from './home'

package/template/web-app/react-vite/shared/theme/index.ts

@@ -0,0 +1 @@
+export * from './theme.styled'

package/template/web-app/react-vite/shared/theme/theme.styled.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from 'react'
+import { AnyFunc } from '1k-types'
+import { isString } from 'lodash-es'
+
+export const theme = {
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        lineClamp: (n: number) => ({
+            '-webkit-line-clamp': `${n}`,
+            '-webkit-box-orient': 'vertical',
+            overflow: 'hidden',
+            display: '-webkit-box'
+        }),
+        size: (s: string) => ({ width: s, height: s }),
+        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
+        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
+        my: (s: string) => ({ marginTop: s, marginBottom: s }),
+        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
+        flex: (
+            align: CSSProperties['alignItems'],
+            justify: CSSProperties['justifyContent'],
+            vertical?: boolean
+        ) => {
+            return {
+                display: 'flex',
+                alignItems: align,
+                justifyContent: justify,
+                flexDirection: vertical ? 'column' : 'row'
+            } satisfies CSSProperties
+        },
+        /** 数字为元素数量，字符串为对应css的值  */
+        grid: {
+            grid: (rows: number | string, cols: number | string, gap?: number) => ({
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                gap: gap ? `${gap}px` : void 0
+            }),
+            rows: (rows: number | string, gap?: number) => ({
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                rowGap: gap ? `${gap}px` : void 0
+            }),
+            cols: (cols: number | string, gap?: number) => ({
+                display: 'grid',
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                columnGap: gap ? `${gap}px` : void 0
+            })
+        } satisfies Record<string, AnyFunc<CSSProperties>>
+    }
+}
+export type themeType = typeof theme