Merge pull request #219 from OpenWebGAL/dev

4.4.9
OpenWebGAL · Jan 10, 2024 · 714aa24 · 714aa24
2 parents 016f5ae + 8c51c97
commit 714aa24
Show file tree

Hide file tree

Showing 40 changed files with 1,647 additions and 1,694 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webgal-terre",
-  "version": "4.4.8",
+  "version": "4.4.9",
   "private": true,
   "scripts": {
     "dev": "concurrently \"yarn dev:terre\" \"yarn dev:origine\" \"yarn dev:start-dev-server\"",

diff --git a/packages/dev-server/index.js b/packages/dev-server/index.js
@@ -1,12 +1,17 @@
 const express = require("express");
 const { createProxyMiddleware } = require("http-proxy-middleware");
+const { env } = require("process")
+
 const app = express();
 app.set("port", "80");
 
-app.all("*", function(req, res, next) {
+app.all("*", function (req, res, next) {
   // 解决跨域问题
   res.header("Access-Control-Allow-Origin", "*");
-  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
+  res.header(
+    "Access-Control-Allow-Headers",
+    "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"
+  );
   res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
   if (req.method === "OPTIONS") {
     res.send(200);
@@ -15,21 +20,32 @@ app.all("*", function(req, res, next) {
   }
 });
 
-app.use(createProxyMiddleware("/api", {
-  target: "http://localhost:3001",// http代理跨域目标接口
-  changeOrigin: true
-}));
+let WEBGAL_PORT = 3000; // default port
+if (env.WEBGAL_PORT) {
+  WEBGAL_PORT = Number.parseInt(env.WEBGAL_PORT);
+}
+
+app.use(
+  createProxyMiddleware("/api", {
+    target: `http://localhost:${WEBGAL_PORT + 1}`, // http代理跨域目标接口
+    changeOrigin: true,
+  })
+);
 
-app.use(createProxyMiddleware("/games", {
-  target: "http://localhost:3001",// http代理跨域目标接口
-  changeOrigin: true,
-}));
+app.use(
+  createProxyMiddleware("/games", {
+    target: `http://localhost:${WEBGAL_PORT + 1}`, // http代理跨域目标接口
+    changeOrigin: true,
+  })
+);
 
-app.use(createProxyMiddleware("/", {
-  target: "http://localhost:3000",// http代理跨域目标接口
-  ws:true,
-  changeOrigin: true
-}));
+app.use(
+  createProxyMiddleware("/", {
+    target: `http://localhost:${WEBGAL_PORT}`, // http代理跨域目标接口
+    ws: true,
+    changeOrigin: true,
+  })
+);
 
 app.listen(app.get("port"), () => {
   console.log(`反向代理已开启，端口：${app.get("port")}`);

diff --git a/packages/origine2/openapi.ts b/packages/origine2/openapi.ts
@@ -4,9 +4,15 @@
 
 import axios from 'axios';
 import {writeFileSync} from 'fs';
-import { exec } from 'child_process';
+import { exec } from 'child_process'
+import { env } from 'process';
 
-const SWAGGER_URL = 'http://localhost:3001/api-json';
+let WEBGAL_PORT = 3000; // default port
+if (env.WEBGAL_PORT) {
+  WEBGAL_PORT = Number.parseInt(env.WEBGAL_PORT);
+};
+
+const SWAGGER_URL = `http://localhost:${WEBGAL_PORT + 1}/api-json`;
 const SWAGGER_JSON_PATH = './src/config/swagger.json';
 const API_OUTPUT_PATH = './src/api';
 

diff --git a/packages/origine2/package.json b/packages/origine2/package.json
@@ -1,10 +1,10 @@
 {
   "name": "webgal-origine-2",
   "private": true,
-  "version": "4.4.8",
+  "version": "4.4.9",
   "license": "MPL-2.0",
   "scripts": {
-    "dev": "vite --port=3000 --host",
+    "dev": "vite --host",
     "build": "node version-sync.js && tsc && vite build --base=./",
     "build-lowram": "node version-sync.js && tsc && node --max_old_space_size=512000 ./node_modules/bin/vite build --base=./",
     "preview": "vite preview",
@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "@fluentui/react": "^8.77.3",
+    "@fluentui/react-components": "^9.44.1",
+    "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-icons-mdl2": "^1.3.41",
     "@icon-park/react": "^1.4.2",
     "@monaco-editor/react": "^4.4.5",

diff --git a/packages/origine2/src/App.css b/packages/origine2/src/App.css
@@ -1,5 +1,8 @@
 .App {
   text-align: center;
+  background-color: #fafafa;
+  width: 100%;
+  height: 100%;
 }
 
 .App-logo {

diff --git a/packages/origine2/src/App.tsx b/packages/origine2/src/App.tsx
@@ -51,9 +51,10 @@ function App() {
       }, triggerCharacters: ["-", "", ":", "\n"]
     });
   });
+
   return (
     // 将编辑器的根元素占满整个视口
-    <div className="App" style={{width: "100vw", height: "100vh", overflow: "hidden"}}>
+    <div className="App">
       <Provider store={origineStore}>
         <PersistGate loading={null} persistor={persistor}>
           <Translation/>

diff --git a/packages/origine2/src/config/info.ts b/packages/origine2/src/config/info.ts
@@ -4,6 +4,6 @@ export interface Info {
 }
 
 export const __INFO: Info = {
-  version: '4.4.8',
+  version: '4.4.9',
   buildTime: '2023-12-30T03:22:49.651Z', // 编译时会通过 version-sync.js 自动更新
 };
diff --git a/packages/origine2/src/hooks/useExpand.ts b/packages/origine2/src/hooks/useExpand.ts
@@ -0,0 +1,10 @@
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "@/store/origineStore";
+import {updateGraphicalEditorCurrentExpandSentence} from "@/store/statusReducer";
+
+export function useExpand() {
+  const currentExpandSentence = useSelector((state: RootState) => state.status.editor.graphicalEditorState.currentExpandSentence);
+  const dispatch = useDispatch();
+  const updateIndex = (index:number)=>dispatch(updateGraphicalEditorCurrentExpandSentence(index));
+  return {expandIndex:currentExpandSentence,updateExpandIndex:updateIndex};
+}
diff --git a/packages/origine2/src/main.tsx b/packages/origine2/src/main.tsx
@@ -10,6 +10,37 @@ import { jp } from "./translations/jp";
 import 'primereact/resources/themes/fluent-light/theme.css';
 import "primereact/resources/primereact.min.css";
 import "./primereact.scss";
+import { BrandVariants, createLightTheme, createDarkTheme, FluentProvider, makeStyles, Theme } from "@fluentui/react-components";
+
+const terre: BrandVariants = { 
+  10: "#020306",
+  20: "#111725",
+  30: "#152642",
+  40: "#17325A",
+  50: "#163E73",
+  60: "#124B8D",
+  70: "#0558A8",
+  80: "#2A65B4",
+  90: "#4672BC",
+  100: "#5D80C3",
+  110: "#728ECA",
+  120: "#859CD1",
+  130: "#98ABD8",
+  140: "#ABB9DF",
+  150: "#BEC8E7",
+  160: "#D0D7EE"
+};
+
+const lightTheme: Theme = {
+  ...createLightTheme(terre),
+};
+
+const darkTheme: Theme = {
+  ...createDarkTheme(terre), 
+};
+
+darkTheme.colorBrandForeground1 = terre[110];
+darkTheme.colorBrandForeground2 = terre[120];
 
 function initTranslation() {
   i18n.use(initReactI18next) // passes i18n down to react-i18next
@@ -38,6 +69,8 @@ initializeIcons();
 // 不用 StrictMode，因为会和 react-butiful-dnd 冲突
 ReactDOM.createRoot(document.getElementById("root")!).render(
   // <React.StrictMode>
-  <App />
+  <FluentProvider theme={lightTheme} style={{width: '100%', height: '100%'}}>
+    <App />
+  </FluentProvider>
   // </React.StrictMode>
 );
diff --git a/packages/origine2/src/pages/dashboard/About.tsx b/packages/origine2/src/pages/dashboard/About.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { Callout, Link, Text } from '@fluentui/react';
-import { useBoolean, useId } from '@fluentui/react-hooks';
-import { CommandBarButton } from '@fluentui/react/lib/Button';
-import styles from './about.module.scss';
 import { __INFO } from "@/config/info";
 import { useRelease } from "../../hooks/useRelease";
 import { logger } from '@/utils/logger';
 import useTrans from '@/hooks/useTrans';
+import { Link, Popover, PopoverSurface, PopoverTrigger, Text, Title1, ToolbarButton } from '@fluentui/react-components';
+import { Info24Filled, Info24Regular, bundleIcon } from '@fluentui/react-icons';
+import { useState } from 'react';
 
 interface DateTimeFormatOptions {
   year: 'numeric' | '2-digit';
@@ -15,15 +14,12 @@ interface DateTimeFormatOptions {
 }
 
 const About: React.FunctionComponent = () => {
-  const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
-  const buttonId = useId('callout-button');
-  const labelId = useId('callout-label');
-  const descriptionId = useId('callout-description');
-
+  const [open, setOpen] = useState(false);
   const t = useTrans('editor.topBar.');
-
   const latestRelease = useRelease();
 
+  const InfoIcon = bundleIcon(Info24Filled, Info24Regular);
+
   /**
    * 比较版本号
    * @param latestVersion 最新版本
@@ -60,29 +56,23 @@ const About: React.FunctionComponent = () => {
   const dateTimeOptions: DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
 
   return (
-    <>
-      <CommandBarButton
-        className={styles.button}
-        id={buttonId}
-        onClick={toggleIsCalloutVisible}
-        text={`${t('about.about')} ${isNewRelease ? `(${t('about.checkedForNewVersion')})` : ''}`}
-        iconProps={{ iconName: 'Info' }}
-      />
-      {isCalloutVisible &&
-        <Callout
-          className={styles.callout}
-          ariaLabelledBy={labelId}
-          ariaDescribedBy={descriptionId}
-          role="dialog"
-          gapSpace={0}
-          target={`#${buttonId}`}
-          onDismiss={toggleIsCalloutVisible}
-          setInitialFocus
-        >
-          <Text as="h1" block variant="xLarge" className={styles.title} id={labelId}>
+    <Popover
+      withArrow
+      trapFocus
+      open={open}
+      onOpenChange={() => setOpen(!open)}
+    >
+      <PopoverTrigger disableButtonEnhancement>
+        <ToolbarButton aria-label={t('about.about')} icon={<InfoIcon />}>
+          {t('about.about')} {isNewRelease ? `(${t('about.checkedForNewVersion')})` : ''}
+        </ToolbarButton>
+      </PopoverTrigger>
+      <PopoverSurface>
+        <div>
+          <Text as='h1' block size={500}>
             WebGAL Terre
           </Text>
-          <Text block variant="medium" className={styles.info} id={descriptionId}>
+          <Text as='b' block>
             <p>{t('about.slogan')}</p>
             <small>
               {t('about.currentVersion')}: {`${__INFO.version} (${new Date(__INFO.buildTime).toLocaleString('zh-CN', dateTimeOptions).replaceAll('/', '-')})`}<br />
@@ -95,7 +85,7 @@ const About: React.FunctionComponent = () => {
               <p>
                 {
                   isNewRelease &&
-                  <Link href="https://openwebgal.com/download/" target="_blank" className={styles.link}>
+                  <Link href="https://openwebgal.com/download/" target="_blank">
                     {t('about.downloadLatest')}
                   </Link>
                 }
@@ -109,20 +99,20 @@ const About: React.FunctionComponent = () => {
               </div>
             </small>
           </Text>
-          <div className={styles.link_group}>
-            <Link href="https://openwebgal.com/" target="_blank" className={styles.link}>
+          <div style={{display:'flex', gap:'0.5rem', marginTop:'1rem'}}>
+            <Link href="https://openwebgal.com/" target="_blank">
               {t('about.homePage')}
             </Link>
-            <Link href="https://docs.openwebgal.com/" target="_blank" className={styles.link}>
+            <Link href="https://docs.openwebgal.com/" target="_blank">
               {t('about.document')}
             </Link>
-            <Link href="https://github.com/MakinoharaShoko/WebGAL_Terre" target="_blank" className={styles.link}>
+            <Link href="https://github.com/MakinoharaShoko/WebGAL_Terre" target="_blank">
               GitHub
             </Link>
           </div>
-        </Callout>
-      }
-    </>
+        </div>
+      </PopoverSurface>
+    </Popover>
   );
 };