nsbp-cli 0.2.26 → 0.2.29

package/templates/basic/src/containers/Photo.tsx

@@ -1,22 +1,22 @@
 import React, { Fragment, useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 import { Link, useLocation } from 'react-router-dom'
-import Header from '../component/Header'
-import Layout from '../component/Layout'
+import Header from '@components/Header'
+import Layout from '@components/Layout'
 import { Helmet } from 'react-helmet'
-import { Container, Row } from '../styled/photo'
+import { Container, Row } from '@styled/photo'
 import { motion } from 'framer-motion'
-import { isSEO, getLocationParams } from '../utils'
-import { useCurrentFlag } from '../utils/clientConfig'
+import { isSEO, getLocationParams } from '@/utils'
+import { useCurrentFlag } from '@utils/clientConfig'
 import _ from 'lodash'
-import { loadData } from '../services/photo'
+import { loadData } from '@services/photo'
 
-const springSettings = { type: "spring", stiffness: 170, damping: 26 }
+const springSettings = { type: 'spring' as const, stiffness: 170, damping: 26 }
 const NEXT = 'show-next'
 
 const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
   const location = useLocation()
-  let { dic, from } = query
+  let { from } = query
   const photos = Array.isArray(data) ? data : []
   const [currPhoto, setCurrPhoto] = useState(0)
 
@@ -24,7 +24,9 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
 
   const [currWidth, currHeight] = currPhotoData
 
-  const widths = photos.map(([origW, origH]:any) => (currHeight / origH) * origW)
+  const widths = photos.map(
+    ([origW, origH]: any) => (currHeight / origH) * origW
+  )
 
   // 同步 currPhoto 和 currPhotoData
   useEffect(() => {
@@ -35,18 +37,22 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
 
   const leftStartCoords = widths
     .slice(0, currPhoto)
-    .reduce((sum:any, width:any) => sum - width, 0)
+    .reduce((sum: any, width: any) => sum - width, 0)
 
   // Calculate position for each photo
-  const photoPositions = photos.reduce((acc:any, [origW, origH]:any, i:any, arr:any) => {
-    const prevLeft = i === 0 ? leftStartCoords : acc[i-1].left + acc[i-1].width
-    acc.push({
-      left: prevLeft,
-      height: currHeight,
-      width: widths[i] || 0
-    })
-    return acc
-  }, [])
+  const photoPositions = photos.reduce(
+    (acc: any, [_origW, _origH]: any, i: any, _arr: any) => {
+      const prevLeft =
+        i === 0 ? leftStartCoords : acc[i - 1].left + acc[i - 1].width
+      acc.push({
+        left: prevLeft,
+        height: currHeight,
+        width: widths[i] || 0
+      })
+      return acc
+    },
+    []
+  )
 
   // console.log('photoPositions', photoPositions)
 
@@ -93,13 +99,13 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
       <Layout query={query}>
         <Container>
           <Row>
-          {
-            _.map(menu, (item:any, index:number) => {
+            {_.map(menu, (item: any, index: number) => {
               return (
-                <Link key={`menu${index}`} to={`/photo?dic=${item.name}`}>{item.name}</Link>
+                <Link key={`menu${index}`} to={`/photo?dic=${item.name}`}>
+                  {item.name}
+                </Link>
               )
-            })
-          }
+            })}
           </Row>
           <Row>Scroll Me</Row>
           <Row>
@@ -123,7 +129,13 @@ const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
                 <motion.img
                   key={i}
                   className="demo4-photo"
-                  src={photos[i][2] ? (useCurrentFlag ? `/images/${photos[i][2]}` : photos[i][2]) : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
+                  src={
+                    photos[i][2]
+                      ? useCurrentFlag
+                        ? `/images/${photos[i][2]}`
+                        : photos[i][2]
+                      : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+                  }
                   initial={false}
                   animate={{
                     left: pos.left,

package/templates/basic/src/externals/window.d.ts

@@ -1,7 +1,9 @@
 interface ServerState {
   photo?: {
     data?: [number, number, string][]
-    menu?: Record<string, any> | Array<{ name: string; cover?: string; count?: number }>
+    menu?:
+      | Record<string, any>
+      | Array<{ name: string; cover?: string; count?: number }>
   }
   query?: Record<string, any>
 }

package/templates/basic/src/reducers/home.ts

@@ -1,4 +1,4 @@
-import { GITHUB_ZEITNEXT_GET } from '../store/constants'
+import { GITHUB_ZEITNEXT_GET } from '@store/constants'
 
 export const homeReducer = (state = { data: {} }, action: any) => {
   const { type, data } = action

package/templates/basic/src/reducers/index.ts

@@ -1,6 +1,6 @@
 import { homeReducer } from './home'
 import { photoReducer } from './photo'
-import { REQUEST_QUERY } from '../store/constants'
+import { REQUEST_QUERY } from '@store/constants'
 
 const queryReducer = (state = {}, action: any) => {
   const { type, query } = action

package/templates/basic/src/reducers/photo.ts

@@ -1,11 +1,16 @@
-import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '../store/constants'
+import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '@store/constants'
 
 interface PhotoState {
   data: [number, number, string][]
-  menu: Record<string, any> | Array<{ name: string; cover?: string; count?: number }>
+  menu:
+    | Record<string, any>
+    | Array<{ name: string; cover?: string; count?: number }>
 }
 
-export const photoReducer = (state: PhotoState = { data: [[0, 0]], menu: {} }, action: any) => {
+export const photoReducer = (
+  state: PhotoState = { data: [[0, 0, '']], menu: {} },
+  action: any
+) => {
   const { type, data, menu } = action
 
   switch (type) {

package/templates/basic/src/server/index.ts

@@ -8,23 +8,25 @@ import { useCurrentFlag, outPhotoDicPath } from '@utils/config'
 const app = express()
 
 // 1. Security headers (helmet)
-app.use(helmet({
-  contentSecurityPolicy: {
-    directives: {
-      defaultSrc: ["'self'"],
-      scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
-      styleSrc: ["'self'", "'unsafe-inline'"],
-      imgSrc: ["'self'", "data:", "https:"],
-      connectSrc: ["'self'", "https:"],
-      fontSrc: ["'self'", "data:"],
-      objectSrc: ["'none'"],
-      mediaSrc: ["'self'"],
-      frameSrc: ["'none'"],
+app.use(
+  helmet({
+    contentSecurityPolicy: {
+      directives: {
+        defaultSrc: ["'self'"],
+        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
+        styleSrc: ["'self'", "'unsafe-inline'"],
+        imgSrc: ["'self'", 'data:', 'https:'],
+        connectSrc: ["'self'", 'https:'],
+        fontSrc: ["'self'", 'data:'],
+        objectSrc: ["'none'"],
+        mediaSrc: ["'self'"],
+        frameSrc: ["'none'"]
+      }
     },
-  },
-  crossOriginEmbedderPolicy: false, // Allow inline scripts for SSR
-  crossOriginOpenerPolicy: false, // Allow window.open for development
-}))
+    crossOriginEmbedderPolicy: false, // Allow inline scripts for SSR
+    crossOriginOpenerPolicy: false // Allow window.open for development
+  })
+)
 
 // 2. Hide X-Powered-By header
 app.disable('x-powered-by')
@@ -36,23 +38,30 @@ if (process.env.ENABLE_RATE_LIMIT === '1') {
     max: 100, // Limit each IP to 100 requests per windowMs
     message: 'Too many requests from this IP, please try again later.',
     standardHeaders: true, // Return rate limit info in the `RateLimit-*` headers
-    legacyHeaders: false, // Disable the `X-RateLimit-*` headers
+    legacyHeaders: false // Disable the `X-RateLimit-*` headers
   })
   app.use('/api', limiter)
   console.log('🛡️ Rate limiting enabled for /api routes')
 }
 
 // 4. Static file serving (disable dotfiles access)
-app.use(express.static('public', { 
-  dotfiles: 'ignore',
-  setHeaders: (res, filePath) => {
-    // Cache static assets for 1 year
-    if (filePath.match(/\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$/)) {
-      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
+app.use(
+  express.static('public', {
+    dotfiles: 'ignore',
+    setHeaders: (res, filePath) => {
+      // Cache static assets for 1 year
+      if (
+        filePath.match(
+          /\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$/
+        )
+      ) {
+        res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
+      }
     }
-  }
-}))
-!useCurrentFlag && app.use(express.static(outPhotoDicPath, { dotfiles: 'ignore' }))
+  })
+)
+!useCurrentFlag &&
+  app.use(express.static(outPhotoDicPath, { dotfiles: 'ignore' }))
 
 // 5. Body parsing with size limits
 app.use(express.json({ limit: '10mb' }))

package/templates/basic/src/server/photo.ts

@@ -1,6 +1,5 @@
-
-import fs from "fs"
-import path from "path"
+import fs from 'fs'
+import path from 'path'
 import probe from 'probe-image-size'
 
 // 获取项目根目录（无论从哪个目录运行服务器）
@@ -29,7 +28,9 @@ const getPhotosDicPath = () => {
 }
 
 // 获取目录下的子目录（分类），并为每个分类找封面图和图片数量
-const getFileMenu = (dir: string): { name: string; cover?: string; count?: number }[] => {
+const getFileMenu = (
+  dir: string
+): { name: string; cover?: string; count?: number }[] => {
   const arr = fs.readdirSync(dir)
   const result: { name: string; cover?: string; count?: number }[] = []
 
@@ -40,7 +41,9 @@ const getFileMenu = (dir: string): { name: string; cover?: string; count?: numbe
       // 分类名
       const name = item
       // 计算图片数量
-      const files = fs.readdirSync(fullPath).filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
+      const files = fs
+        .readdirSync(fullPath)
+        .filter((f) => /\.(jpg|jpeg|png|webp)$/i.test(f))
       const count = files.length
 
       // 在该目录下找 cover.jpg
@@ -110,7 +113,9 @@ export const getPhotoWH = (req: any, res: any) => {
     res.json({ data: whArr })
   } catch (err: any) {
     console.error('getPhotoWH error:', err)
-    res.status(500).json({ error: 'Internal Server Error', details: err.message })
+    res
+      .status(500)
+      .json({ error: 'Internal Server Error', details: err.message })
   }
 }
 
@@ -124,6 +129,8 @@ export const getPhotoMenu = (_req: any, res: any) => {
     res.json({ data: fileMenu })
   } catch (err: any) {
     console.error('getPhotoMenu error:', err)
-    res.status(500).json({ error: 'Internal Server Error', details: err.message })
+    res
+      .status(500)
+      .json({ error: 'Internal Server Error', details: err.message })
   }
 }

package/templates/basic/src/server/utils.tsx

@@ -1,25 +1,21 @@
 import React from 'react'
 import { renderToString } from 'react-dom/server'
 import { StaticRouter, Route, matchPath } from 'react-router-dom'
-// @ts-ignore - Routes is available in react-router-dom v7 but not in types
 import { Routes } from 'react-router-dom'
-import routers from '../Routers'
-// @ts-ignore
+import routers from '@/Routers'
 import { Provider } from 'react-redux'
-// @ts-ignore
-import getStore from '../store'
+import getStore from '@store'
 import serialize from 'serialize-javascript'
-// @ts-ignore
-import { REQUEST_QUERY } from '../store/constants'
+import { REQUEST_QUERY } from '@store/constants'
 import { Helmet } from 'react-helmet'
 import { ServerStyleSheet } from 'styled-components'
-import Theme from '../component/Theme'
+import Theme from '@components/Theme'
 import path from 'path'
 import { ChunkExtractor } from '@loadable/server'
 
 export const render = (req: any, res: any) => {
   const store = getStore()
-  const { path:reqPath, query } = req
+  const { path: reqPath, query } = req
   const matchRoutes: any = []
   const promises = []
 
@@ -75,10 +71,7 @@ export const render = (req: any, res: any) => {
 
       const helmet: any = Helmet.renderStatic()
 
-      const webStats = path.resolve(
-        __dirname,
-        '../public/loadable-stats.json',
-      )
+      const webStats = path.resolve(__dirname, '../public/loadable-stats.json')
 
       try {
         let webEntryPoints = ['client', 'vendor']
@@ -93,13 +86,18 @@ export const render = (req: any, res: any) => {
           publicPath: '/'
         })
 
-        const jsx = webExtractor.collectChunks(sheet.collectStyles(
+        const jsx = webExtractor.collectChunks(
+          sheet.collectStyles(
             <Theme>
               <Provider store={store}>
                 <StaticRouter location={reqPath}>
                   <Routes>
                     {routers.map((router) => (
-                      <Route key={router.key} path={router.path} element={router.element} />
+                      <Route
+                        key={router.key}
+                        path={router.path}
+                        element={router.element}
+                      />
                     ))}
                   </Routes>
                 </StaticRouter>

package/templates/basic/src/services/home.ts

@@ -1,30 +1,5 @@
-import { doGet } from '../utils/fetch'
-import { GITHUB_ZEITNEXT_GET, GET_PHOTO_MENU } from '../store/constants'
-
-const getData = (callback: any) => {
-
-  return (dispatch: any) => {
-    doGet('https://api.apiopen.top/getJoke?page=1&count=2&type=video')
-      .then((res:any) => {
-        // console.log('res', res)
-        dispatch({
-          type: GITHUB_ZEITNEXT_GET,
-          data: res?.data
-        })
-
-        callback && callback()
-      })
-      .catch((e:any) => {
-        // console.log('e', e.response)
-        dispatch({
-          type: GITHUB_ZEITNEXT_GET,
-          data: e?.response?.data
-        })
-
-        callback && callback()
-      })
-  }
-}
+import { doGet } from '@utils/fetch'
+import { GET_PHOTO_MENU } from '@store/constants'
 
 export const loadData = (resolve: any = null) => {
   return (dispatch: any) => {
@@ -49,4 +24,4 @@ export const loadData = (resolve: any = null) => {
         resolve && resolve()
       })
   }
-}
+}

package/templates/basic/src/services/photo.ts

@@ -1,6 +1,5 @@
-import { doGet } from '../utils/fetch'
-import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '../store/constants'
-
+import { doGet } from '@utils/fetch'
+import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '@store/constants'
 
 const getPhotoWH = (dispatch: any, callback: any, dic = '') => {
   let action = 'getPhotoWH'
@@ -9,47 +8,46 @@ const getPhotoWH = (dispatch: any, callback: any, dic = '') => {
   }
 
   doGet(action)
-      .then((res:any) => {
-        // console.log('getPhotoWH_res', res)
-        // axios 响应格式是 { data: { data: [...] }, status: ... }，需要取 res.data.data
-        dispatch({
-          type: GET_PHOTO_WIDTH_HEIGHT,
-          data: res?.data?.data || []
-        })
-        callback && callback()
-      })
-      .catch((e:any) => {
-        callback && callback()
+    .then((res: any) => {
+      // console.log('getPhotoWH_res', res)
+      // axios 响应格式是 { data: { data: [...] }, status: ... }，需要取 res.data.data
+      dispatch({
+        type: GET_PHOTO_WIDTH_HEIGHT,
+        data: res?.data?.data || []
       })
+      callback && callback()
+    })
+    .catch((_e: any) => {
+      callback && callback()
+    })
 }
 
-const getPhotoMenu = (dispatch:any, callback:any) => {
+const getPhotoMenu = (dispatch: any, callback: any) => {
   doGet('getPhotoMenu')
-      .then((res:any) => {
-        // console.log('getPhotoMenu_res', res)
-        // axios 响应格式是 { data: { data: [...] }, status: ... }，需要取 res.data.data
-        const { data } = res?.data || {}
-        dispatch({
-          type: GET_PHOTO_MENU,
-          menu: data
-        })
-
-        callback && callback(data)
-      })
-      .catch((e:any) => {
-        callback && callback()
+    .then((res: any) => {
+      // console.log('getPhotoMenu_res', res)
+      // axios 响应格式是 { data: { data: [...] }, status: ... }，需要取 res.data.data
+      const { data } = res?.data || {}
+      dispatch({
+        type: GET_PHOTO_MENU,
+        menu: data
       })
+
+      callback && callback(data)
+    })
+    .catch((_e: any) => {
+      callback && callback()
+    })
 }
 
-const getData = (callback:any, dic:any) => {
+const getData = (callback: any, dic: any) => {
   return (dispatch: any) => {
-
     if (dic) {
       getPhotoMenu(dispatch, () => {
         getPhotoWH(dispatch, callback, dic)
       })
     } else {
-      getPhotoMenu(dispatch, (data:any) => {
+      getPhotoMenu(dispatch, (data: any) => {
         if (data && data.length > 0) {
           // data[0] 是对象 {name, cover}，需要取 name
           getPhotoWH(dispatch, callback, data[0].name)
@@ -59,6 +57,6 @@ const getData = (callback:any, dic:any) => {
   }
 }
 
-export const loadData = (resolve: any = null, dic='') => {
+export const loadData = (resolve: any = null, dic = '') => {
   return getData(resolve, dic)
 }

package/templates/basic/src/store/constants.ts

@@ -1,4 +1,4 @@
 export const GITHUB_ZEITNEXT_GET = 'GITHUB_ZEITNEXT_GET'
 export const REQUEST_QUERY = 'REQUEST_QUERY'
 export const GET_PHOTO_MENU = 'GET_PHOTO_MENU'
-export const GET_PHOTO_WIDTH_HEIGHT= 'GET_PHOTO_WIDTH_HEIGHT'
+export const GET_PHOTO_WIDTH_HEIGHT = 'GET_PHOTO_WIDTH_HEIGHT'

package/templates/basic/src/store/index.ts

@@ -1,11 +1,12 @@
 import { configureStore, combineReducers } from '@reduxjs/toolkit'
-import reducers from '../reducers'
+import reducers from '@reducers'
 
 const combineReducer = combineReducers({ ...reducers })
 
 const getStore = (stateParam = {}) => {
   return configureStore({
-    reducer: (state: any, action: any) => combineReducer(state || stateParam, action),
+    reducer: (state: any, action: any) =>
+      combineReducer(state || stateParam, action),
     preloadedState: stateParam || {},
     middleware: (getDefaultMiddleware) => getDefaultMiddleware()
   })

package/templates/basic/src/styled/component/header.ts

@@ -6,7 +6,11 @@ export const Container = styled.header`
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 2rem;
-  background: linear-gradient(135deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.85));
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);