Use builtin Tabs/Tab component to replace CodeDemo tabs

Author: Folyd

rspress.config.ts

@@ -10,12 +10,15 @@ export default defineConfig({
     light: '/aiscript-logo.svg',
     dark: '/aiscript-logo.svg',
   },
+  route: {
+    cleanUrls: true,
+  },
   builderPlugins: [pluginYaml()],
   themeConfig: {
     footer: {
-        message:
-          '<p>AIScript Community &copy; 2025.</p>',
-      },
+        message: '<p>AIScript Community &copy; 2025.</p>',
+    },
+    lastUpdated: true,
     prevPageText: 'Prev Page',
     nextPageText: 'Next Page',
     socialLinks: [

theme/components/code-demo/index.module.scss

@@ -1,7 +1,5 @@
 .codeDemo {
-  margin: 2rem auto;
   max-width: 100%;
-  padding: 1rem;
   border-radius: 8px;
   overflow: hidden;
 
@@ -12,42 +10,6 @@
   }
 }
 
-.filenameBar {
-  display: flex;
-  gap: 2px;
-  padding: 0 0.5rem;
-  background-color: #ecf0f7;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.filenameTab {
-  padding: 0.75rem 1.25rem;
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 0.9rem;
-  color: #666;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    color: #333;
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-
-  &.active {
-    color: #8B5CF6;
-    background-color: #f7f8fa;
-    font-weight: 500;
-  }
-
-  @media screen and (max-width: 768px) {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.75rem;
-  }
-}
-
 .codeContainer {
   background-color: #f7f8fa;
   border-radius: 8px;
@@ -61,16 +23,6 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
-
-  &:has(+ .filename) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-.pre {
-  margin: 0;
-  padding: 1.5rem;
 }
 
 .code {

theme/components/code-demo/index.tsx

@@ -11,43 +11,24 @@ import styles from './index.module.scss';
 
 interface CodeDemoProps {
   code: string;
-  filename?: string;
   width?: string | number;
   height?: string | number;
   language?: string;
-  codeDemos?: Array<{ code: string; filename?: string }>;
-  activeIndex?: number;
-  onTabChange?: (index: number) => void;
 }
 
 const CodeDemo: FC<CodeDemoProps> = ({ 
   code, 
-  filename, 
   width = '800px', 
   height, 
-  language = 'rust',
-  codeDemos = [],
-  activeIndex = 0,
-  onTabChange
+  language = 'rust'
 }) => {
   return (
     <div className={styles.codeDemo} style={{ maxWidth: width }}>
-      <div className={styles.filenameBar}>
-        {codeDemos.map((demo, index) => (
-          <button
-            key={index}
-            className={`${styles.filenameTab} ${index === activeIndex ? styles.active : ''}`}
-            onClick={() => onTabChange?.(index)}
-          >
-            {demo.filename || `Example ${index + 1}`}
-          </button>
-        ))}
-      </div>
       <div className={styles.codeContainer} style={{ height }}>
         <SyntaxHighlighter
-          language="javascript"
+          language={language}
           style={style}
-          customStyle={{ margin: 0, padding: '1.5rem', background: 'transparent' }}
+          customStyle={{ margin: 0, padding: '0.6rem', background: 'transparent' }}
           codeTagProps={{
             className: styles.code
           }}

theme/components/feature-demo/index.tsx

@@ -1,47 +1,48 @@
-import { useState, type FC } from 'react';
+import { type FC } from 'react';
+import { Tab, Tabs } from 'rspress/theme';
 import CodeDemo from '../code-demo';
 import styles from './index.module.scss';
 
 interface CodeDemoItem {
-  code: string;
-  filename?: string;
+    code: string;
+    filename?: string;
 }
 
 interface FeatureDemoProps {
-  title: string;
-  description: string;
-  codeDemos: CodeDemoItem[];
-  isReversed?: boolean;
+    title: string;
+    description: string;
+    codeDemos: CodeDemoItem[];
+    isReversed?: boolean;
 }
 
 const FeatureDemo: FC<FeatureDemoProps> = ({
-  title,
-  description,
-  codeDemos,
-  isReversed = false,
+    title,
+    description,
+    codeDemos,
+    isReversed = false,
 }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const activeDemo = codeDemos[activeIndex];
+    return (
+        <div className={styles.featureDemo}>
+            <div className={`${styles.container} ${isReversed ? styles.reversed : ''}`}>
+                <div className={styles.content}>
+                    <h2 className={styles.title}>{title}</h2>
+                    <p className={styles.description}>{description}</p>
+                </div>
+                <div className={styles.codeWrapper}>
+                    <Tabs>
+                        {codeDemos.map((demo) => (
+                            <Tab key={demo.filename} label={demo.filename}>
+                                <CodeDemo
+                                    code={demo.code}
+                                />
+                            </Tab>
+                        ))}
+                    </Tabs>
 
-  return (
-    <div className={styles.featureDemo}>
-      <div className={`${styles.container} ${isReversed ? styles.reversed : ''}`}>
-        <div className={styles.content}>
-          <h2 className={styles.title}>{title}</h2>
-          <p className={styles.description}>{description}</p>
+                </div>
+            </div>
         </div>
-        <div className={styles.codeWrapper}>
-          <CodeDemo 
-            code={activeDemo.code} 
-            filename={activeDemo.filename} 
-            codeDemos={codeDemos}
-            activeIndex={activeIndex}
-            onTabChange={setActiveIndex}
-          />
-        </div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default FeatureDemo;