nsbp-cli 0.1.0

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

@@ -0,0 +1,17 @@
+import { GITHUB_ZEITNEXT_GET } from '../store/constants'
+
+export const homeReducer = (state = { data: {} }, action: any) => {
+  const { type, data } = action
+  let newState = null
+
+  switch (type) {
+    case GITHUB_ZEITNEXT_GET:
+      newState = Object.assign({}, state)
+
+      if (data) newState.data = data
+
+      return newState
+    default:
+      return state
+  }
+}

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

@@ -0,0 +1,26 @@
+import { homeReducer } from './home'
+import { photoReducer } from './photo'
+import { REQUEST_QUERY } from '../store/constants'
+
+const queryReducer = (state = {}, action: any) => {
+  const { type, query } = action
+  let newState = null
+
+  switch (type) {
+    case REQUEST_QUERY:
+      newState = {
+        ...query
+      }
+
+      return newState
+    default:
+      return state
+  }
+}
+
+export default {
+  name: (state = 'Erishen Sun') => state,
+  query: queryReducer,
+  home: homeReducer,
+  photo: photoReducer
+}

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

@@ -0,0 +1,23 @@
+import { GET_PHOTO_MENU, GET_PHOTO_WIDTH_HEIGHT } from '../store/constants'
+
+export const photoReducer = (state = { data: [[0, 0]], menu: {} }, action: any) => {
+  const { type, data, menu } = action
+  let newState = null
+
+  switch (type) {
+    case GET_PHOTO_MENU:
+      newState = Object.assign({}, state)
+
+      if (menu) newState.menu = menu
+
+      return newState
+    case GET_PHOTO_WIDTH_HEIGHT:
+      newState = Object.assign({}, state)
+
+      if (data) newState.data = data
+
+      return newState
+    default:
+      return state
+  }
+}

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

@@ -0,0 +1,29 @@
+import express from 'express'
+import { render } from './utils'
+import { getPhotoWH, getPhotoMenu } from './photo'
+import { useCurrentFlag, outPhotoDicPath } from '../utils/config'
+
+const app = express()
+
+app.use(express.static('public'))
+!useCurrentFlag && app.use(express.static(outPhotoDicPath))
+
+//使用express提供的static中间件,中间件会将所有静态文件的路由指向public文件夹
+
+app.get('/getPhotoWH', (req, res) => {
+  getPhotoWH(req, res)
+})
+
+app.get('/getPhotoMenu', (req, res) => {
+  getPhotoMenu(req, res)
+})
+
+// Catch-all middleware for SSR
+app.use((req, res) => {
+  // console.log('req.url', req.url, req.headers)
+  render(req, res)
+})
+
+app.listen(3001, () => {
+  // Server started successfully
+})

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

@@ -0,0 +1,118 @@
+
+import fs from "fs"
+import path from "path"
+import probe from 'probe-image-size'
+import { useCurrentFlag, outPhotoDic, outPhotoSep, outPhotoDicPath } from '../utils/config'
+
+const CURRENT_DIC = 'images'
+
+// 获取项目根目录（无论从哪个目录运行服务器）
+const getProjectRoot = () => {
+  let currentDir = __dirname
+  const maxIterations = 10
+  let iterations = 0
+
+  while (iterations < maxIterations) {
+    const packageJsonPath = path.join(currentDir, 'package.json')
+    if (fs.existsSync(packageJsonPath)) {
+      return currentDir
+    }
+    currentDir = path.dirname(currentDir)
+    iterations++
+  }
+  return process.cwd()
+}
+
+const getPublicImagesPath = () => {
+  return path.join(getProjectRoot(), 'public/images')
+}
+
+const getPhotosDicPath = () => {
+  return getPublicImagesPath()
+}
+
+// 获取目录下的子目录（分类），并为每个分类找封面图和图片数量
+const getFileMenu = (dir: string): { name: string; cover?: string; count?: number }[] => {
+  const arr = fs.readdirSync(dir)
+  const result: { name: string; cover?: string; count?: number }[] = []
+
+  arr.forEach((item) => {
+    const fullPath = path.join(dir, item)
+    const stats = fs.statSync(fullPath)
+    if (stats.isDirectory()) {
+      // 分类名
+      const name = item
+      // 计算图片数量
+      const files = fs.readdirSync(fullPath).filter(f => /\.(jpg|jpeg|png|webp)$/i.test(f))
+      const count = files.length
+
+      // 在该目录下找 cover.jpg
+      let cover = undefined
+      const coverPath = path.join(fullPath, 'cover.jpg')
+      if (fs.existsSync(coverPath)) {
+        // 转成相对 public 的 URL 路径
+        cover = `/images/${item}/cover.jpg`
+      } else if (files.length > 0) {
+        // 否则找第一张图片
+        cover = `/images/${item}/${files[0]}`
+      }
+      result.push({ name, cover, count })
+    }
+  })
+  return result
+}
+
+export const getPhotoWH = (req: any, res: any) => {
+  try {
+    const dic = req.query.dic || ''
+    const photosDicPath = getPhotosDicPath()
+
+    const fileList: any = []
+    let photoPath = photosDicPath
+    if (dic) {
+      photoPath = path.join(photosDicPath, dic)
+    }
+
+    const getFileList = (dir: string, list: string[]) => {
+      const arr = fs.readdirSync(dir)
+      arr.forEach((item) => {
+        const fullPath = path.join(dir, item)
+        const stats = fs.statSync(fullPath)
+        if (stats.isDirectory()) {
+          getFileList(fullPath, list)
+        } else {
+          list.push(fullPath)
+        }
+      })
+      return list
+    }
+
+    getFileList(photoPath, fileList)
+
+    const whArr: any = []
+    fileList.forEach((item: any, index: number) => {
+      const data = fs.readFileSync(item)
+      let fileName = path.relative(photosDicPath, fileList[index])
+      const { width, height }: any = probe.sync(data)
+      whArr.push([width, height, fileName])
+    })
+
+    // 按前端期望的格式包装
+    res.json({ data: whArr })
+  } catch (err) {
+    res.status(500).json({ error: 'Internal Server Error', details: err.message })
+  }
+}
+
+export const getPhotoMenu = (req: any, res: any) => {
+  try {
+    const photosDicPath = getPhotosDicPath()
+
+    const fileMenu = getFileMenu(photosDicPath)
+
+    // 按前端期望的格式包装
+    res.json({ data: fileMenu })
+  } catch (err) {
+    res.status(500).json({ error: 'Internal Server Error', details: err.message })
+  }
+}

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

@@ -0,0 +1,158 @@
+import React from 'react' //引入React以支持JSX的语法
+import { renderToString } from 'react-dom/server' //引入renderToString方法
+import { StaticRouter, Routes, Route, matchPath } from 'react-router-dom'
+import routers from '../Routers'
+import { Provider } from 'react-redux'
+import getStore from '../store'
+import serialize from 'serialize-javascript'
+import { REQUEST_QUERY } from '../store/constants'
+import { Helmet } from 'react-helmet'
+import { ServerStyleSheet } from 'styled-components'
+import Theme from '../component/Theme'
+import path from 'path'
+import { ChunkExtractor } from '@loadable/server'
+
+const removeCommentsAndSpacing = (str = '') =>
+  str.replace(/\/\*.*\*\//g, ' ').replace(/\s+/g, ' ')
+
+const removeSpacing = (str = '') => str.replace(/\s+/g, ' ')
+
+export const render = (req: any, res: any) => {
+  const store = getStore()
+  const { path:reqPath, query, url } = req
+  const matchRoutes: any = []
+  const promises = []
+
+  let { seo } = query
+
+  if (seo !== undefined && seo !== '') {
+    seo = parseInt(seo, 10)
+  }
+
+  routers.some((route) => {
+    matchPath({ path: route.path, end: true }, reqPath) ? matchRoutes.push(route) : ''
+  })
+
+  matchRoutes.forEach((item: any) => {
+    if (item?.loadData) {
+      const promise = new Promise((resolve, reject) => {
+        try {
+          store.dispatch(item?.loadData(resolve))
+        } catch (e) {
+          reject()
+        }
+      })
+
+      promises.push(promise)
+    }
+  })
+
+  matchRoutes.forEach((item: any) => {
+    if (item?.loadData) {
+      const promise = new Promise((resolve, reject) => {
+        try {
+          store.dispatch(item?.loadData(resolve))
+        } catch (e) {
+          reject()
+        }
+      })
+
+      promises.push(promise)
+    }
+  })
+
+  const queryDispatch = (callback: any) => {
+    return (dispatch: any) => {
+      setTimeout(() => {
+        dispatch({ type: REQUEST_QUERY, query })
+
+        callback && callback()
+      }, 0)
+    }
+  }
+
+  const queryPromise = new Promise((resolve, reject) => {
+    try {
+      store.dispatch(queryDispatch(resolve))
+    } catch (e) {
+      reject()
+    }
+  })
+
+  promises.push(queryPromise)
+
+  Promise.all(promises)
+    .then(() => {
+      const nodeEnv = process.env.NODE_ENV
+      const sheet = new ServerStyleSheet()
+      const serverState = store.getState()
+
+      const helmet: any = Helmet.renderStatic()
+
+      const webStats = path.resolve(
+        __dirname,
+        '../public/loadable-stats.json',
+      )
+
+      try {
+        let webEntryPoints = ['client', 'vendor']
+
+        if (nodeEnv === 'production') {
+          webEntryPoints = ['client']
+        }
+
+        const webExtractor = new ChunkExtractor({
+          statsFile: webStats,
+          entrypoints: webEntryPoints,
+          publicPath: '/'
+        })
+
+        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} />
+                    ))}
+                  </Routes>
+                </StaticRouter>
+              </Provider>
+            </Theme>
+          )
+        )
+
+        const content = renderToString(jsx)
+        const styleTags = sheet.getStyleTags()
+
+        const html = `
+              <!DOCTYPE html>
+              <html>
+                  <head>
+                      <meta charset="utf-8">
+                      ${helmet?.title?.toString()}
+                      ${helmet?.meta?.toString()}
+                      ${styleTags}
+                      ${webExtractor.getLinkTags()}
+                      ${webExtractor.getStyleTags()}
+                  </head>
+                  <body>
+                      <div id="root">${content}</div>
+                      <script type="text/javascript">
+                          window.context = { state: ${serialize(serverState)} }
+                          window.query = ${serialize(query)}
+                      </script>
+                      ${webExtractor.getScriptTags()}
+                  </body>
+              </html>
+          `
+
+        res.send(html)
+      } catch (e) {
+        sheet.seal()
+      }
+    })
+    .catch((e) => {
+      // Error handling
+    })
+}

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

@@ -0,0 +1,52 @@
+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()
+      })
+  }
+}
+
+export const loadData = (resolve: any = null) => {
+  return (dispatch: any) => {
+    // 预取图片菜单数据
+    doGet('/getPhotoMenu')
+      .then((res: any) => {
+        // axios 响应结构: { data, status, statusText, headers, config, request }
+        if (res.status >= 200 && res.status < 300) {
+          // 请求成功，data 已经是解析后的 JSON 对象
+          dispatch({
+            type: GET_PHOTO_MENU,
+            menu: res.data?.data || []
+          })
+          resolve && resolve(res.data)
+        } else {
+          throw new Error(`Status ${res.status}`)
+        }
+      })
+      .catch((err: any) => {
+        console.error('Failed to preload photos:', err)
+        // 预取失败但不影响主流程
+        resolve && resolve()
+      })
+  }
+}

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

@@ -0,0 +1,64 @@
+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'
+  if (dic) {
+    action += `?dic=${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()
+      })
+}
+
+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()
+      })
+}
+
+const getData = (callback:any, dic:any) => {
+  return (dispatch: any) => {
+
+    if (dic) {
+      getPhotoMenu(dispatch, () => {
+        getPhotoWH(dispatch, callback, dic)
+      })
+    } else {
+      getPhotoMenu(dispatch, (data:any) => {
+        if (data && data.length > 0) {
+          // data[0] 是对象 {name, cover}，需要取 name
+          getPhotoWH(dispatch, callback, data[0].name)
+        }
+      })
+    }
+  }
+}
+
+export const loadData = (resolve: any = null, dic='') => {
+  return getData(resolve, dic)
+}

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

@@ -0,0 +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'

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

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

package/templates/basic/src/styled/common.ts

@@ -0,0 +1,26 @@
+import styled, { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle`
+  html,body,#__next {
+    height: 100%;
+    border: 1px solid white;
+  }
+
+  body {
+    background-color: ${(props: any) => (props.whiteColor ? 'white' : 'black')};
+    font-family: Helvetica;
+    margin: 0;
+  }
+`
+
+export const theme = {
+  colors: {
+    primary: '#0070f3'
+  }
+}
+
+export const theme2 = {
+  colors: {
+    primary: 'black'
+  }
+}

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

@@ -0,0 +1,166 @@
+import styled from 'styled-components'
+
+export const Container = styled.header`
+  position: relative;
+  display: flex;
+  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));
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow:
+    0 2px 12px rgba(0, 0, 0, 0.06),
+    0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.625rem 1rem;
+    flex-direction: column;
+    gap: 0.875rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.5rem 1rem;
+  }
+`
+
+export const Brand = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`
+
+export const LogoWrapper = styled.div`
+  text-decoration: none;
+  font-size: 1.375rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.5px;
+  transition: all 0.3s ease;
+
+  span:first-child {
+    font-size: 1.625rem;
+    color: #667eea;
+  }
+
+  &:hover {
+    transform: scale(1.03);
+    filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.25));
+  }
+
+  @media (max-width: 768px) {
+    font-size: 1.1875rem;
+
+    span:first-child {
+      font-size: 1.4375rem;
+    }
+  }
+`
+
+export const Nav = styled.nav`
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+`
+
+export const NavLink = styled.div<{ $active?: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #4a5568;
+  text-decoration: none;
+  border-radius: 999px;
+  background: rgba(102, 126, 234, 0.05);
+  border: 1px solid rgba(102, 126, 234, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) scale(0);
+    width: 70%;
+    height: 1.5px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 999px;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover {
+    color: #667eea;
+    background: rgba(102, 126, 234, 0.1);
+    border-color: rgba(102, 126, 234, 0.2);
+    transform: translateY(-1px);
+    box-shadow:
+      0 3px 8px rgba(102, 126, 234, 0.12),
+      0 1px 3px rgba(102, 126, 234, 0.08);
+  }
+
+  &:hover::before {
+    transform: translateX(-50%) scale(1);
+  }
+
+  ${(props) =>
+    props.$active &&
+    `
+    color: #ffffff;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-color: transparent;
+    box-shadow:
+      0 3px 8px rgba(102, 126, 234, 0.2),
+      0 1px 3px rgba(102, 126, 234, 0.12);
+
+    &::before {
+      transform: translateX(-50%) scale(1);
+      background: rgba(255,255,255, 0.3);
+      height: 1.5px;
+    }
+
+    &:hover {
+      background: linear-gradient(135deg, #5a67d8 0%, #6b3e8e 100%);
+      transform: translateY(-1px);
+    }
+  `}
+
+  @media (max-width: 768px) {
+    padding: 0.4375rem 0.875rem;
+    font-size: 0.8125rem;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    width: 100%;
+    justify-content: center;
+  }
+`