Table

maintainPage.tsx

// pages/_app.js
import React, { useEffect, useState } from 'react';
import Router from 'next/router';
import App from 'next/app';
import Maintenance from './maintenance';

const CHECK_INTERVAL = 30000; // 检查间隔，单位为毫秒（例如：30秒）

const MyApp = ({ Component, pageProps }) => {
  const [isMaintenance, setIsMaintenance] = useState(false);

  useEffect(() => {
    const checkBackendHealth = async () => {
      try {
        const response = await fetch('/api/health');
        if (!response.ok) {
          throw new Error('Service is down');
        }
      } catch (error) {
        setIsMaintenance(true);
        Router.push('/maintenance');
      }
    };

    checkBackendHealth();
    const interval = setInterval(checkBackendHealth, CHECK_INTERVAL);

    return () => clearInterval(interval);
  }, []);

  if (isMaintenance) {
    return <Maintenance />;
  }

  return <Component {...pageProps} />;
};

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);
  return { ...appProps };
};

export default MyApp;

markdown.ts

function generateMarkdownTable(rows:number) {
  return String.raw`| Header1 | Header2 |
| --- | --- |
${Array.from({ length: rows }, (_, i) => `| Row ${i} Col 1 | Row ${i} Col 2 |`).join('\n')}`;
}

export default generateMarkdownTable;

page.tsx

"use client";
import Box from "@mui/joy/Box";
import Sheet from "@mui/joy/Sheet";
import Table from "@mui/joy/Table";
import Markdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax";
import rehypeReact from "rehype-react";
import remarkBreaks from "remark-breaks";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import remarkParse from "remark-parse";
import generateMarkdownTable from "./markdown";

const markdownTableString = generateMarkdownTable(5000);

const Demo = () => {
  return (
    <Box
      sx={{
        position: "relative",
        maxHeight: "400px",
        maxWidth: "1000px",
        overflow: "auto",
      }}
    >
      <Sheet
        variant="soft"
        color="neutral"
        sx={{
          borderRadius: 8,
        }}
      >
        <Markdown
          remarkPlugins={[remarkParse, remarkGfm, remarkBreaks, remarkMath]}
          rehypePlugins={[rehypeMathjax, rehypeReact]}
          components={{
            h1: "h3",
            table: (props) => {
              const { node, ref, ...rest } = props;
              return (
                <Table
                  {...rest}
                  color="neutral"
                  size="sm"
                  stickyHeader={false}
                  stickyFooter={false}
                  stripe="odd"
                  variant="outlined"
                  borderAxis="both"
                  hoverRow={true}
                  sx={{
                    "--Table-headerUnderlineThickness": "3px",
                  }}
                ></Table>
              );
            },
          }}
        >
          {markdownTableString}
        </Markdown>
      </Sheet>
    </Box>
  );
};

const Page = () => {
  return (
    <>
      <Demo />
    </>
  );
};

export default Page;

Slider.tsx

// Box：灵活的通用容器，适用于任何布局和样式需求。
// Stack：用于垂直或水平排列子组件，提供简洁的布局方式。
// Sheet：预样式化的容器，适用于卡片、面板等需要一致外观的场景

"use client";

import Box from "@mui/joy/Box";
import Slider from "@mui/joy/Slider";
import Typography from "@mui/joy/Typography";
import ExampleTextareaComment from "./ExampleTextareaComment";

const marks = [
  {
    value: 0,
    label: "0",
  },
  {
    value: 4000,
    label: "4000",
  },
];

function valueText(value: number) {
  return `${value}`;
}

export default function Page() {
  return (
    <>
      <Box
        sx={{
          width: 250,
          paddingX: 2,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Typography id="track-inverted-slider" gutterBottom>
          Token Size Chunk
        </Typography>
        <Slider
          aria-label="Always visible"
          valueLabelDisplay="auto"
          aria-labelledby="track-inverted-slider"
          getAriaValueText={valueText}
          defaultValue={800}
          marks={marks}
          min={0}
          max={4000}
          color="danger"
          // sx={{
          //   "--Slider-markSize": 4,
          // }}
        />
      </Box>
      //  <ExampleTextareaComment />
    </>
  );
}