chore(site): support multiple versions

Author: xiejay97

packages/site/src/app/routes/layout/Header.tsx

@@ -10,6 +10,9 @@ import { DCustomIcon, GithubOutlined } from '@react-devui/icons';
 import { DDropdown, DMenu, DSeparator } from '@react-devui/ui';
 import { getClassName } from '@react-devui/utils';
 
+import { environment } from '../../../environments/environment';
+import { AppVersions } from './Versions';
+
 export interface AppHeaderProps {
   menuOpen: boolean;
   onMenuOpenChange: (open: boolean) => void;
@@ -46,6 +49,7 @@ export function AppHeader(props: AppHeaderProps): JSX.Element | null {
           <div></div>
         </div>
       </button>
+      {environment.production && <AppVersions />}
       <DMenu
         className="d-none d-md-inline-block app-layout-header__menu"
         dList={[

packages/site/src/app/routes/layout/Versions.tsx

@@ -0,0 +1,46 @@
+import axios from 'axios';
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useMount } from '@react-devui/hooks';
+import { DCustomIcon } from '@react-devui/icons';
+import { DButton, DDropdown } from '@react-devui/ui';
+
+export function AppVersions(): JSX.Element | null {
+  const location = useLocation();
+
+  const version = (() => {
+    const v = window.location.host.match(/^v[0-9]+/);
+    return v ? v[0] : 'main';
+  })();
+  const [versions, setVersions] = useState<string[]>(() => {
+    if (version === 'main') {
+      return ['main'];
+    } else {
+      return ['main', version];
+    }
+  });
+  useMount(() => {
+    axios.get('/api/versions').then((response) => {
+      setVersions(['main', ...(response.data as number[]).map((v) => `v${v}`)]);
+    });
+  });
+
+  return (
+    <DDropdown
+      dList={versions.map((v) => ({ id: v, label: v, type: 'item' }))}
+      onItemClick={(id) => {
+        window.location = ((id === 'main' ? 'https://react-devui.com' : `https://${id}.react-devui.com`) + location.pathname) as any;
+      }}
+    >
+      <DButton dType="text">
+        <div className="d-flex align-items-center">
+          {version}
+          <DCustomIcon style={{ position: 'relative', top: 2, marginLeft: 2 }} viewBox="64 64 896 896" dSize={12}>
+            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+          </DCustomIcon>
+        </div>
+      </DButton>
+    </DDropdown>
+  );
+}