nsbp-cli 0.1.0

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

@@ -0,0 +1,435 @@
+import React, { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Layout from '../component/Layout'
+import { Helmet } from 'react-helmet'
+import {
+  GlobalStyle,
+  PageWrapper,
+  HeroSection,
+  HeroContent,
+  HeroTitle,
+  HeroSubtitle,
+  HeroBadge,
+  HeroStats,
+  StatCard,
+  StatValue,
+  StatLabel,
+  TechSection,
+  SectionHeader,
+  SectionTitle,
+  SectionDescription,
+  FeatureGrid,
+  FeatureCard,
+  CardIcon,
+  CardTitle,
+  CardDescription,
+  CodeExample,
+  ComparisonSection,
+  ComparisonTable,
+  TableHeader,
+  TableRow,
+  TableCell,
+  TableHeaderCell,
+  NsbpJSBadge,
+  NextJSBadge,
+  PhotoSection,
+  PhotoGrid,
+  PhotoCard,
+  PhotoImageWrapper,
+  PhotoImage,
+  PhotoName,
+  PhotoTitle,
+  PhotoCount,
+  LoadingContainer,
+  LoadingSpinner,
+  LoadingText,
+  ErrorContainer,
+  ErrorTitle,
+  ErrorMessage,
+  QuickStartSection,
+  QuickStartGrid,
+  QuickStartCard,
+  QuickStartTitle,
+  QuickStartCode,
+  QuickStartDescription,
+  Footer
+} from '../styled/home'
+
+interface PhotoMenuItem {
+  name: string
+  cover?: string
+  count?: number
+}
+
+const Home: React.FC = () => {
+  const [menu, setMenu] = useState<PhotoMenuItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    setLoading(true)
+    // 先检查服务端是否已预取了图片菜单数据
+    const serverMenu = window?.context?.state?.photo?.menu || {}
+    const serverMenuArray = Array.isArray(serverMenu) ? serverMenu : []
+
+    if (serverMenuArray.length > 0) {
+      setMenu(serverMenuArray)
+      setLoading(false)
+    } else {
+      // 如果服务端没有预取，则在客户端获取
+      fetch('/getPhotoMenu')
+        .then(res => {
+          if (!res.ok) throw new Error(`Status ${res.status}`)
+          return res.json()
+        })
+        .then(data => {
+          setMenu(data?.data || [])
+        })
+        .catch(err => {
+          console.error('Failed to load menu:', err)
+          setMenu([])
+        })
+        .finally(() => setLoading(false))
+    }
+  }, [])
+
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    // 模拟页面加载
+    const timer = setTimeout(() => {
+      setIsLoaded(true)
+    }, 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <GlobalStyle>
+      {!isLoaded && (
+        <div className="page-loader" id="pageLoader">
+          <div className="loader-spinner"></div>
+        </div>
+      )}
+      <script dangerouslySetInnerHTML={{
+        __html: `
+          setTimeout(() => {
+            const loader = document.getElementById('pageLoader');
+            if (loader) {
+              loader.classList.add('fade-out');
+              setTimeout(() => loader.remove(), 500);
+            }
+          }, 800);
+        `
+      }} />
+      <Helmet>
+        <title>Nsbp.js - 轻量级 React SSR 框架</title>
+        <meta name="description" content="Nsbp.js - 一个轻量级 React SSR 框架，专为低资源部署与高度可定制场景而生。与 Next.js 相比，更节省资源，更灵活配置。" />
+        <meta name="keywords" content="Nsbp.js, React SSR, 轻量级, SSR, TypeScript, React 19" />
+        <meta property="og:title" content="Nsbp.js - 轻量级 React SSR 框架" />
+        <meta property="og:description" content="与 Next.js 相比，Nsbp.js 更轻量、更灵活、更可控。" />
+      </Helmet>
+
+      <Layout query={{}}>
+        <PageWrapper>
+
+          {/* ========================================
+              Hero Section - 首屏视觉冲击
+              ======================================== */}
+          <HeroSection className="fade-in">
+            <HeroContent>
+              <div className="hero-glow"></div>
+              <div className="hero-glow"></div>
+              <HeroBadge className="fade-in" style={{animationDelay: '0.1s'}}>🚀 轻量级 React SSR 框架</HeroBadge>
+              <HeroTitle className="fade-in" style={{animationDelay: '0.2s'}}>Nsbp.js</HeroTitle>
+              <HeroSubtitle className="fade-in" style={{animationDelay: '0.3s'}}>
+                与 Next.js 相比，节省 60% 资源消耗
+                <br />
+                完全掌控 Webpack 配置，无黑盒限制
+              </HeroSubtitle>
+
+              <HeroStats>
+                <StatCard>
+                  <StatValue>~60%</StatValue>
+                  <StatLabel>更少资源</StatLabel>
+                </StatCard>
+                <StatCard>
+                  <StatValue>512MB</StatValue>
+                  <StatLabel>最低内存</StatLabel>
+                </StatCard>
+                <StatCard>
+                  <StatValue>100%</StatValue>
+                  <StatLabel>可定制</StatLabel>
+                </StatCard>
+                <StatCard>
+                  <StatValue>TS</StatValue>
+                  <StatLabel>类型安全</StatLabel>
+                </StatCard>
+              </HeroStats>
+            </HeroContent>
+          </HeroSection>
+
+          {/* ========================================
+              技术特性展示
+              ======================================== */}
+          <TechSection className="fade-in" style={{animationDelay: '0.4s'}}>
+            <SectionHeader>
+              <SectionTitle className="fade-in" style={{animationDelay: '0.5s'}}>核心特性</SectionTitle>
+              <SectionDescription className="fade-in" style={{animationDelay: '0.6s'}}>
+                基于 React 19 + TypeScript，提供完整的 SSR 能力同时保持极致轻量
+              </SectionDescription>
+            </SectionHeader>
+
+            <FeatureGrid>
+              <FeatureCard>
+                <CardIcon>⚡</CardIcon>
+                <CardTitle>极速服务端渲染</CardTitle>
+                <CardDescription>
+                  服务端渲染 HTML，SEO 友好，首屏秒开
+                </CardDescription>
+                <CodeExample>{`// 路由 + 预取数据
+// Routers.tsx
+export default [
+  {
+    path: '/',
+    component: Home,
+    exact: true,
+    loadData: homeLoadData,
+    key: 'home'
+  }
+]`}</CodeExample>
+              </FeatureCard>
+
+              <FeatureCard>
+                <CardIcon>🔧</CardIcon>
+                <CardTitle>完全可控的 Webpack</CardTitle>
+                <CardDescription>
+                  无黑盒配置，自定义任何构建逻辑
+                </CardDescription>
+                <CodeExample>{`// 自定义 Webpack 配置
+// webpack.server.js
+module.exports = {
+  // 你的配置
+}`}</CodeExample>
+              </FeatureCard>
+
+              <FeatureCard>
+                <CardIcon>📦</CardIcon>
+                <CardTitle>智能代码分割</CardTitle>
+                <CardDescription>
+                  基于 @loadable/component，按需加载
+                </CardDescription>
+                <CodeExample>{`// 组件懒加载
+import loadable from '@loadable/component'
+
+const Home = loadable(() => import('./containers/Home'))`}</CodeExample>
+              </FeatureCard>
+
+              <FeatureCard>
+                <CardIcon>🧩</CardIcon>
+                <CardTitle>React 19 原生支持</CardTitle>
+                <CardDescription>
+                  利用最新 React 特性，性能和开发体验提升
+                </CardDescription>
+                <CodeExample>{`// React 19 新特性
+import { use, useTransition } from 'react'
+
+// Server Actions
+// Suspense 边界
+// use Optimistic`}</CodeExample>
+              </FeatureCard>
+
+              <FeatureCard>
+                <CardIcon>📝</CardIcon>
+                <CardTitle>TypeScript 类型安全</CardTitle>
+                <CardDescription>
+                  完整的类型推断，编译时错误检查
+                </CardDescription>
+                <CodeExample>{`interface PhotoMenuItem {
+  name: string
+  cover?: string
+  count?: number
+}`}</CodeExample>
+              </FeatureCard>
+
+              <FeatureCard>
+                <CardIcon>🖼️</CardIcon>
+                <CardTitle>内置图片服务</CardTitle>
+                <CardDescription>
+                  开箱即用的图片分类和管理接口
+                </CardDescription>
+                <CodeExample>{`// 图片服务
+// src/server/photo.ts
+export const getPhotoMenu = (req: any, res: any) => {
+  const photosDicPath = getPublicImagesPath()
+  const fileMenu = getFileMenu(photosDicPath)
+  res.json({ data: fileMenu })
+}`}</CodeExample>
+              </FeatureCard>
+            </FeatureGrid>
+          </TechSection>
+
+          {/* ========================================
+              Nsbp.js vs Next.js 对比
+              ======================================== */}
+          <ComparisonSection className="fade-in" style={{animationDelay: '0.7s'}}>
+            <SectionHeader>
+              <SectionTitle className="fade-in" style={{animationDelay: '0.8s'}}>Nsbp.js vs Next.js</SectionTitle>
+              <SectionDescription className="fade-in" style={{animationDelay: '0.9s'}}>
+                对比两个 SSR 框架的关键差异，帮助你做出正确选择
+              </SectionDescription>
+            </SectionHeader>
+
+            <ComparisonTable>
+              <TableHeader>
+                <TableRow>
+                  <TableHeaderCell>特性</TableHeaderCell>
+                  <TableHeaderCell><NsbpJSBadge>Nsbp.js</NsbpJSBadge></TableHeaderCell>
+                  <TableHeaderCell><NextJSBadge>Next.js</NextJSBadge></TableHeaderCell>
+                </TableRow>
+              </TableHeader>
+              <tbody>
+                <TableRow>
+                  <TableCell><strong>运行时体积</strong></TableCell>
+                  <TableCell>~5MB</TableCell>
+                  <TableCell>~20MB</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>最低内存</strong></TableCell>
+                  <TableCell>512MB</TableCell>
+                  <TableCell>1GB+</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>构建配置</strong></TableCell>
+                  <TableCell>✅ 完全可控</TableCell>
+                  <TableCell>❌ 黑盒封装</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>代码分割</strong></TableCell>
+                  <TableCell>✅ @loadable/component</TableCell>
+                  <TableCell>✅ 自动（但有限制）</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>SSR 渲染</strong></TableCell>
+                  <TableCell>✅ 手动控制</TableCell>
+                  <TableCell>✅ 自动（但可调）</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>学习曲线</strong></TableCell>
+                  <TableCell>🟡 中等</TableCell>
+                  <TableCell>🟢 简单</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>生态集成</strong></TableCell>
+                  <TableCell>✅ 任意 React 库</TableCell>
+                  <TableCell>⚠️ 需要官方方案</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><strong>适用场景</strong></TableCell>
+                  <TableCell>博客、官网、教学</TableCell>
+                  <TableCell>企业应用、电商</TableCell>
+                </TableRow>
+              </tbody>
+            </ComparisonTable>
+          </ComparisonSection>
+
+          {/* ========================================
+              快速开始
+              ======================================== */}
+          <QuickStartSection className="fade-in" style={{animationDelay: '1.0s'}}>
+            <SectionHeader>
+              <SectionTitle className="fade-in" style={{animationDelay: '1.1s'}}>快速开始</SectionTitle>
+              <SectionDescription className="fade-in" style={{animationDelay: '1.2s'}}>
+                三步启动你的第一个 SSR 项目
+              </SectionDescription>
+            </SectionHeader>
+
+            <QuickStartGrid>
+              <QuickStartCard>
+                <QuickStartTitle>1️⃣ 创建项目</QuickStartTitle>
+                <QuickStartCode>$ npx nsbp create my-app</QuickStartCode>
+                <QuickStartDescription>
+                  使用 CLI 工具创建新项目
+                </QuickStartDescription>
+              </QuickStartCard>
+
+              <QuickStartCard>
+                <QuickStartTitle>2️⃣ 启动开发</QuickStartTitle>
+                <QuickStartCode>$ npm run dev</QuickStartCode>
+                <QuickStartDescription>
+                  启动开发服务器，默认端口 3001
+                </QuickStartDescription>
+              </QuickStartCard>
+
+              <QuickStartCard>
+                <QuickStartTitle>3️⃣ 访问应用</QuickStartTitle>
+                <QuickStartCode>http://localhost:3001</QuickStartCode>
+                <QuickStartDescription>
+                  浏览器访问，开始开发
+                </QuickStartDescription>
+              </QuickStartCard>
+            </QuickStartGrid>
+          </QuickStartSection>
+
+          {/* ========================================
+              Photo Menu 示例
+              ======================================== */}
+          <PhotoSection className="fade-in" style={{animationDelay: '1.3s'}}>
+            <SectionHeader>
+              <SectionTitle className="fade-in" style={{animationDelay: '1.4s'}}>图片分类示例</SectionTitle>
+              <SectionDescription className="fade-in" style={{animationDelay: '1.5s'}}>
+                基于 Nsbp.js 内置的图片服务接口，快速构建图库应用
+              </SectionDescription>
+            </SectionHeader>
+
+            {loading ? (
+              <LoadingContainer>
+                <LoadingSpinner />
+                <LoadingText>加载分类...</LoadingText>
+              </LoadingContainer>
+            ) : menu.length > 0 ? (
+              <PhotoGrid>
+                {menu.map(item => (
+                  <Link key={item.name} to={`/photo?dic=${item.name}`}>
+                    <PhotoCard>
+                      <PhotoImageWrapper>
+                        <PhotoImage
+                          src={item.cover}
+                          alt={item.name}
+                          loading="lazy"
+                        />
+                      </PhotoImageWrapper>
+                      <PhotoName>
+                        <PhotoTitle>{item.name}</PhotoTitle>
+                        {typeof item.count === 'number' && (
+                          <PhotoCount>{item.count} 张</PhotoCount>
+                        )}
+                      </PhotoName>
+                    </PhotoCard>
+                  </Link>
+                ))}
+              </PhotoGrid>
+            ) : (
+              <ErrorContainer>
+                <ErrorTitle>❌ 暂无分类</ErrorTitle>
+                <ErrorMessage>
+                  请在 public/images 目录下创建图片文件夹
+                </ErrorMessage>
+              </ErrorContainer>
+            )}
+          </PhotoSection>
+
+          {/* ========================================
+              Footer
+              ======================================== */}
+          <Footer>
+            <p>© 2025 Nsbp.js. Built with React 19 + TypeScript.</p>
+          </Footer>
+
+        </PageWrapper>
+      </Layout>
+    </GlobalStyle>
+  )
+}
+
+export default Home

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

@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react'
+import Header from '../component/Header'
+import Layout from '../component/Layout'
+import { Helmet } from 'react-helmet'
+import '../css/test.css'
+import '../css/test.less'
+import '../css/test2.sass'
+import '../css/test3.scss'
+import { Container } from '../styled/test'
+
+const Login = ({ query }: any) => {
+  return (
+    <Fragment>
+      <Helmet>
+        <title>Login</title>
+        <meta name="description" content="Login Description" />
+      </Helmet>
+      <Header />
+      <Layout query={query}>
+        <Container>
+          <p>login</p>
+          <div className="testBox"></div>
+          <div className="testBox1"></div>
+          <div className="testBox2"></div>
+          <div className="testBox3"></div>
+        </Container>
+      </Layout>
+    </Fragment>
+  )
+}
+
+export default Login

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

@@ -0,0 +1,162 @@
+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 { Helmet } from 'react-helmet'
+import { Container, Row } from '../styled/photo'
+import { motion } from 'framer-motion'
+import { isSEO, getLocationParams } from '../utils'
+import { useCurrentFlag } from '../utils/clientConfig'
+import _ from 'lodash'
+import { loadData } from '../services/photo'
+
+const springSettings = { type: "spring", stiffness: 170, damping: 26 }
+const NEXT = 'show-next'
+
+const Photo = ({ query, data, menu, getPhotoMenu }: any) => {
+  const location = useLocation()
+  let { dic, from } = query
+  const photos = Array.isArray(data) ? data : []
+  const [currPhoto, setCurrPhoto] = useState(0)
+
+  const [currPhotoData, setCurrPhotoData] = useState(photos[0] || [0, 0, ''])
+
+  const [currWidth, currHeight] = currPhotoData
+
+  const widths = photos.map(([origW, origH]:any) => (currHeight / origH) * origW)
+
+  // 同步 currPhoto 和 currPhotoData
+  useEffect(() => {
+    if (photos[currPhoto]) {
+      setCurrPhotoData(photos[currPhoto])
+    }
+  }, [currPhoto, photos])
+
+  const leftStartCoords = widths
+    .slice(0, currPhoto)
+    .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
+  }, [])
+
+  // console.log('photoPositions', photoPositions)
+
+  const handleChange = ({ target: { value } }: any) => {
+    setCurrPhoto(value)
+  }
+
+  const clickHandler = (btn: any) => {
+    let photoIndex = btn === NEXT ? currPhoto + 1 : currPhoto - 1
+
+    photoIndex = photoIndex >= 0 ? photoIndex : photos.length - 1
+    photoIndex = photoIndex >= photos.length ? 0 : photoIndex
+
+    setCurrPhoto(photoIndex)
+  }
+
+  useEffect(() => {
+    const currentDic = getLocationParams('dic')
+
+    const doGetPhotoMenu = () => {
+      getPhotoMenu(currentDic)
+    }
+
+    if (!isSEO()) {
+      doGetPhotoMenu()
+    } else {
+      if(from === 'link'){
+        doGetPhotoMenu()
+      }
+    }
+
+    // 重置到第一张
+    setCurrPhoto(0)
+  }, [location?.search])
+
+  return (
+    <Fragment>
+      <Helmet>
+        <title>Photo</title>
+        <meta name="description" content="Photo Description" />
+      </Helmet>
+      <Header />
+
+      <Layout query={query}>
+        <Container>
+          <Row>
+          {
+            _.map(menu, (item:any, index:number) => {
+              return (
+                <Link key={`menu${index}`} to={`/photo?dic=${item.name}`}>{item.name}</Link>
+              )
+            })
+          }
+          </Row>
+          <Row>Scroll Me</Row>
+          <Row>
+            <button onClick={() => clickHandler('')}>Previous</button>
+            <input
+              type="range"
+              min={0}
+              max={photos.length - 1}
+              value={currPhoto}
+              onChange={handleChange}
+            />
+            <button onClick={() => clickHandler(NEXT)}>Next</button>
+          </Row>
+          <div className="demo4">
+            <motion.div
+              className="demo4-inner"
+              animate={{ height: currHeight, width: currWidth }}
+              transition={springSettings}
+            >
+              {photoPositions.map((pos: any, i: any) => (
+                <motion.img
+                  key={i}
+                  className="demo4-photo"
+                  src={useCurrentFlag ? `/images/${photos[i][2]}` : photos[i][2]}
+                  initial={false}
+                  animate={{
+                    left: pos.left,
+                    height: pos.height,
+                    width: pos.width
+                  }}
+                  transition={springSettings}
+                  style={{
+                    position: 'absolute',
+                    top: 0
+                  }}
+                />
+              ))}
+            </motion.div>
+          </div>
+        </Container>
+      </Layout>
+    </Fragment>
+  )
+}
+
+const mapStateToProps = (state: any) => {
+  return {
+    query: state?.query,
+    menu: state?.photo?.menu,
+    data: state?.photo?.data
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => ({
+  getPhotoMenu(dic:any) {
+    dispatch(loadData(null, dic))
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Photo)

package/templates/basic/src/css/test.css

@@ -0,0 +1,13 @@
+.testBox {
+  width: 300px;
+  height: 200px;
+  background: blue;
+  transform: rotate(45deg);
+}
+
+#name {
+  width: 300px;
+  height: 200px;
+  background: blue;
+  transform: rotate(45deg);
+}

package/templates/basic/src/css/test.less

@@ -0,0 +1,8 @@
+@base: yellowgreen;
+
+.testBox1 {
+  width: 300px;
+  height: 200px;
+  background: @base;
+  transform: rotate(45deg);
+}

package/templates/basic/src/css/test2.sass

@@ -0,0 +1,7 @@
+$base: red
+
+.testBox2
+    width: 300px 
+    height: 200px 
+    background: $base
+    transform: rotate(45deg)

package/templates/basic/src/css/test3.scss

@@ -0,0 +1,8 @@
+$base: black;
+
+.testBox3 {
+  width: 300px;
+  height: 200px;
+  background: $base;
+  transform: rotate(45deg);
+}

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

@@ -0,0 +1,4 @@
+declare module '*.less' {
+  const resource: { [key: string]: string }
+  export = resource
+}

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

@@ -0,0 +1,3 @@
+declare interface Window {
+  context: any
+}