@stdex/create 0.0.0-stage → 1.2.0

package/templates/site/src/app/header.tsx

@@ -0,0 +1,31 @@
+import ImageLogo from '@/assets/logo.png'
+import { DevStatus } from '@/components/DevStatus'
+
+export function AppHeader() {
+  return <div css={s.wrap}>
+    <img css={s.logo} src={ImageLogo} />
+    <div css={s.siteName}>演示项目</div>
+    <DevStatus />
+  </div>
+}
+
+const s = {
+  wrap: css`
+    align-items: center;
+    display: flex;
+    padding: 8px 24px;
+  `,
+
+  logo: css`
+    height: 42px;
+    width: 42px;
+    margin-right: 20px;
+  `,
+
+  siteName: css`
+    flex: 1;
+    font-size: 16px;
+    letter-spacing: 1px;
+    white-space: nowrap;
+  `,
+}

package/templates/site/src/app/index.tsx

@@ -0,0 +1,38 @@
+import { StyleProvider } from '@ant-design/cssinjs'
+import { EmotionCacheProvider } from '@stdex/utils-frontend/react/emotion.js'
+import { ConfigProvider, App as AntdApp } from 'antd'
+import zhCn from 'antd/locale/zh_CN'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider } from 'react-router/dom'
+import { initDayJs } from '@/lib/init-dayjs.js'
+import { router } from './router'
+
+import './style.css'
+
+initDayJs()
+
+export function renderApp() {
+  function AntdWrapper() {
+    return <EmotionCacheProvider>
+      <StyleProvider layer>
+        <ConfigProvider
+          locale={zhCn}
+          theme={{
+            token: {},
+            components: {},
+          }}
+        >
+          <AntdApp>
+            <RouterProvider router={router} />
+          </AntdApp>
+        </ConfigProvider>
+      </StyleProvider>
+    </EmotionCacheProvider>
+  }
+
+  const $root = document.createElement('div')
+  $root.id = 'root'
+  document.body.appendChild($root)
+  const root = createRoot($root)
+  root.render(<AntdWrapper />)
+}

package/templates/site/src/app/layout.tsx

@@ -0,0 +1,63 @@
+import { Layout } from 'antd'
+import { Outlet } from 'react-router'
+import { AppHeader } from './header'
+import { AppMenu } from './menu'
+
+export function AppLayout() {
+  const [siderCollapsed, setSiderCollapsed] = useState(false)
+
+  return <Layout css={s.root}>
+    <Layout.Header css={s.header}>
+      <AppHeader />
+    </Layout.Header>
+
+    <Layout>
+      <Layout.Sider
+        css={s.sider}
+        theme="light"
+        collapsible
+        collapsed={siderCollapsed}
+        onCollapse={setSiderCollapsed}
+      >
+        <AppMenu />
+      </Layout.Sider>
+
+      <Layout css={s.main}>
+        <Outlet />
+      </Layout>
+    </Layout>
+  </Layout>
+}
+
+const s = {
+  root: css`
+    height: 100vh;
+    overflow: hidden;
+  `,
+
+  header: css`
+    background-color: #fff;
+    border-bottom: 1px solid #f5f5f5;
+    padding: 0;
+    height: auto;
+    line-height: unset;
+  `,
+
+  sider: css`
+    padding-top: 4px;
+    .ant-layout-sider-children {
+      overflow-y: auto;
+    }
+  `,
+
+  main: css`
+    & > .page {
+      background-color: #fff;
+      border-radius: 3px;
+      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05);
+      flex: 1;
+      margin: 16px;
+      padding: 16px;
+    }
+  `,
+}

package/templates/site/src/app/menu.tsx

@@ -0,0 +1,115 @@
+import {
+  DashboardOutlined,
+  ApartmentOutlined,
+  UserOutlined,
+  SettingOutlined,
+} from '@ant-design/icons'
+import { Menu, type MenuProps } from 'antd'
+import { useNavigate, useMatches } from 'react-router'
+
+type MenuInfo = Parameters<Required<MenuProps>['onClick']>[0]
+type MenuItem = Required<MenuProps>['items'][number]
+
+/**
+ * 菜单对应的页面路由，不在此表的菜单则不跳转
+ */
+const routes = [
+  { key: 'dashboard', path: '/' },
+  { key: 'schools', path: '/schools' },
+  { key: 'school-ranking', path: '/schools/ranking' },
+  { key: 'students', path: '/students' },
+  { key: 'student-score', path: '/students/score' },
+  { key: 'setting', path: '/setting' },
+]
+
+const menuItems: MenuItem[] = [
+  {
+    key: 'dashboard',
+    label: '信息概览',
+    icon: <DashboardOutlined />,
+  },
+
+  {
+    key: 'school-manage',
+    label: '学校管理',
+    icon: <ApartmentOutlined />,
+    children: [
+      {
+        key: 'schools',
+        label: '学校列表',
+      },
+      {
+        key: 'school-ranking',
+        label: '学校排名',
+      },
+    ],
+  },
+
+  {
+    key: 'student-manage',
+    label: '学生管理',
+    icon: <UserOutlined />,
+    children: [
+      {
+        key: 'students',
+        label: '学生列表',
+      },
+      {
+        key: 'student-score',
+        label: '成绩管理',
+      },
+    ],
+  },
+
+  {
+    key: 'setting',
+    label: '系统设置',
+    icon: <SettingOutlined />,
+  },
+]
+
+/**
+ * 返回指定 key 的菜单项的完整 keyPath
+ */
+function getKeyPath(key: string, items?: MenuItem[]): string[] {
+  items ??= menuItems
+  for (const item of items) {
+    if (item?.key === undefined) continue
+    if (item.key === key) return [key]
+    if ('children' in item && item.children) {
+      const subKeyPath = getKeyPath(key, item.children)
+      if (subKeyPath.length) return [String(item.key), ...subKeyPath]
+    }
+  }
+  return []
+}
+
+export function AppMenu() {
+  const navigate = useNavigate()
+  const matches = useMatches()
+
+  const { defaultSelectedKeys, defaultOpenKeys } = useMemo(() => {
+    const currentPath = matches[matches.length - 1]?.pathname ?? null
+    const currentRoute = routes.find(v => v.path === currentPath)
+    if (currentRoute) {
+      return {
+        defaultSelectedKeys: [currentRoute.key],
+        defaultOpenKeys: getKeyPath(currentRoute.key).filter(key => key !== currentRoute.key),
+      }
+    }
+    return { defaultSelectedKeys: [], defaultOpenKeys: [] }
+  }, [matches])
+
+  function onClick(info: MenuInfo) {
+    const route = routes.find(v => v.key === info.key)
+    if (route) void navigate(route.path)
+  }
+
+  return <Menu
+    mode="inline"
+    items={menuItems}
+    defaultSelectedKeys={defaultSelectedKeys}
+    defaultOpenKeys={defaultOpenKeys}
+    onClick={onClick}
+  />
+}

package/templates/site/src/app/router.tsx

@@ -0,0 +1,50 @@
+import { createBrowserRouter, Navigate } from 'react-router'
+import { Dashboard } from '@/views/dashboard'
+import { SchoolDetail } from '@/views/school-detail'
+import { SchoolRanking } from '@/views/school-ranking'
+import { Schools } from '@/views/schools'
+import { Setting } from '@/views/setting'
+import { StudentScore } from '@/views/student-score'
+import { Students } from '@/views/students'
+import { AppLayout } from './layout'
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    Component: AppLayout,
+    children: [
+      {
+        index: true,
+        Component: Dashboard,
+      },
+      {
+        path: '/schools',
+        Component: Schools,
+      },
+      {
+        path: '/schools/ranking',
+        Component: SchoolRanking,
+      },
+      {
+        path: '/schools/:id',
+        Component: SchoolDetail,
+      },
+      {
+        path: '/students',
+        Component: Students,
+      },
+      {
+        path: '/students/score',
+        Component: StudentScore,
+      },
+      {
+        path: '/setting',
+        Component: Setting,
+      },
+      {
+        path: '*',
+        element: <Navigate to="/" />,
+      },
+    ],
+  },
+])

package/templates/site/src/app/style.css

@@ -0,0 +1,9 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+html, body, #root, .ant-app {
+  height: 100%;
+  overflow: hidden;
+}

package/templates/site/src/components/Breadcrumb.tsx

@@ -0,0 +1,47 @@
+import { Breadcrumb as AntdBreadcrumb, type BreadcrumbProps } from 'antd'
+import { Link } from 'react-router'
+
+// 字符串是纯文本节点；对象是可点击节点
+type Item =
+  | string
+  | {
+      path: string
+      title: string
+    }
+
+type ItemRender = Required<BreadcrumbProps>['itemRender']
+
+export function Breadcrumb({ items }: { items: (string | Item)[] }) {
+  const antdItems = useMemo(
+    () =>
+      items.map(item =>
+        typeof item === 'string' ? { title: item } : { href: item.path, title: item.title },
+      ),
+    [items],
+  )
+
+  const itemRender: ItemRender = item => {
+    return item.href ? (
+      <Link to={item.href} css={s.link}>
+        {item.title}
+      </Link>
+    ) : (
+      <span>{item.title}</span>
+    )
+  }
+
+  return <AntdBreadcrumb
+    css={{ margin: '16px 16px 0' }}
+    itemRender={itemRender}
+    items={antdItems}
+  />
+}
+
+const s = {
+  link: css`
+    &:hover {
+      background-color: transparent;
+      color: var(--ant-color-link);
+    }
+  `,
+}

package/templates/site/src/components/DevStatus.tsx

@@ -0,0 +1,14 @@
+import { Tag } from 'antd'
+import { config } from '@/lib/config'
+
+export function DevStatus() {
+  return config.inDev ? (
+    <Tag color="green" variant="solid">
+      开发模式
+    </Tag>
+  ) : (
+    <Tag variant="solid" color="#999">
+      非开发模式
+    </Tag>
+  )
+}

package/templates/site/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="./favicon.png" />
+    <title>演示项目</title>
+  </head>
+
+  <body></body>
+
+  <script type="module" src="./index.tsx"></script>
+</html>

package/templates/site/src/index.tsx

@@ -0,0 +1,5 @@
+import '@stdex/utils-frontend/react/register-globals.js'
+import '@stdex/utils-frontend/react/emotion-register-globals.js'
+import { renderApp } from '@/app/index'
+
+renderApp()

package/templates/site/src/lib/config.ts

@@ -0,0 +1,6 @@
+interface InjectVars {
+  APP_CONFIG: {
+    inDev: boolean
+  }
+}
+export const config = (window as unknown as InjectVars).APP_CONFIG

package/templates/site/src/lib/init-dayjs.ts

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import objectSupport from 'dayjs/plugin/objectSupport.js'
+import 'dayjs/locale/zh-cn.js'
+
+export function initDayJs() {
+  dayjs.extend(objectSupport)
+  dayjs.locale('zh-cn')
+}

package/templates/site/src/lib/logging.ts

@@ -0,0 +1,5 @@
+import { logger, getLogger, LogLevel } from '@stdex/logging'
+import { config } from '@/lib/config.js'
+
+logger.setLevel(config.inDev ? LogLevel.Debug : LogLevel.Info)
+export { logger, getLogger }

package/templates/site/src/views/dashboard.tsx

@@ -0,0 +1,7 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+
+export function Dashboard() {
+  usePageTitle('信息概览')
+
+  return <div className="page">信息概览</div>
+}

package/templates/site/src/views/school-detail.tsx

@@ -0,0 +1,13 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+import { useParams } from 'react-router'
+import { Breadcrumb } from '@/components/Breadcrumb'
+
+export function SchoolDetail() {
+  usePageTitle('学校详情')
+  const params = useParams<{ id: string }>()
+
+  return <>
+    <Breadcrumb items={[{ path: '/schools', title: '学校列表' }, '学校详情']} />
+    <div className="page">学校详情 - {params.id}</div>
+  </>
+}

package/templates/site/src/views/school-ranking.tsx

@@ -0,0 +1,7 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+
+export function SchoolRanking() {
+  usePageTitle('学校排名')
+
+  return <div className="page">学校排名</div>
+}

package/templates/site/src/views/schools.tsx

@@ -0,0 +1,43 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+import { useNavigate } from 'react-router'
+
+const schools = [
+  { id: 1, name: '学校-1' },
+  { id: 2, name: '学校-2' },
+  { id: 3, name: '学校-3' },
+]
+
+export function Schools() {
+  usePageTitle('学校列表')
+  const navigate = useNavigate()
+
+  function goDetail(id: number) {
+    void navigate('/schools/' + id.toString())
+  }
+
+  return <div className="page">
+    <div css={s.title}>学校列表</div>
+    <div css={s.list}>
+      {schools.map(school => <div key={school.id} className="item">
+        <div className="name">{school.name}</div>
+        <a onClick={() => goDetail(school.id)}>详情</a>
+      </div>)}
+    </div>
+  </div>
+}
+
+const s = {
+  title: css`
+    margin-bottom: 20px;
+  `,
+
+  list: css`
+    width: 12em;
+    .item {
+      display: flex;
+      .name {
+        flex: 1;
+      }
+    }
+  `,
+}

package/templates/site/src/views/setting.tsx

@@ -0,0 +1,7 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+
+export function Setting() {
+  usePageTitle('系统设置')
+
+  return <div className="page">系统设置</div>
+}

package/templates/site/src/views/student-score.tsx

@@ -0,0 +1,7 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+
+export function StudentScore() {
+  usePageTitle('成绩管理')
+
+  return <div className="page">成绩管理</div>
+}

package/templates/site/src/views/students.tsx

@@ -0,0 +1,7 @@
+import { usePageTitle } from '@stdex/utils-frontend/react/hooks.js'
+
+export function Students() {
+  usePageTitle('学生列表')
+
+  return <div className="page">学生列表</div>
+}

package/templates/site/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./node_modules/@stdex/presets-typescript/tsconfig-vite",
+  "compilerOptions": {
+    "jsxImportSource": "@emotion/react",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src/"]
+}

package/templates/site/vite.config.js

@@ -0,0 +1,60 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+import svgr from 'vite-plugin-svgr'
+
+const base = path.dirname(fileURLToPath(new URL(import.meta.url)))
+const src = path.join(base, 'src')
+
+export default defineConfig(({ mode }) => {
+  const inDev = mode === 'development'
+  const appConfig = {
+    inDev,
+  }
+
+  return {
+    mode,
+    root: src,
+    base: '',
+    publicDir: path.join(base, 'public'),
+
+    define: {
+      'window.APP_CONFIG': JSON.stringify(appConfig),
+    },
+
+    resolve: {
+      alias: {
+        '@': src,
+      },
+    },
+
+    // 让 vite 对 node_modules 里的 jsx 文件也进行依赖解析
+    // 不然 @stdex/utils 里的 jsx 文件会无法正常引用类库
+    optimizeDeps: {
+      extensions: ['.jsx'],
+    },
+
+    plugins: [
+      react({
+        jsxImportSource: '@emotion/react',
+        plugins: [['@swc/plugin-emotion', {}]],
+      }),
+      svgr(),
+    ],
+
+    server: {
+      host: true,
+      port: 3000,
+      strictPort: true,
+    },
+
+    build: {
+      outDir: path.join(base, 'dist'),
+      emptyOutDir: true,
+      rollupOptions: {
+        input: path.join(src, 'index.html'),
+      },
+    },
+  }
+})