feat: desktop 增加路由与tailwindcss的支持

desktop/.erb/configs/webpack.config.renderer.prod.ts

@@ -1,5 +1,6 @@
 import type { Configuration } from 'webpack';
 import { getWebTailchatWebpackConfig } from './utils';
+import webpackPaths from './webpack.paths';
 
 const webWebpackConfig = getWebTailchatWebpackConfig();
 
@@ -13,6 +14,15 @@ const configuration: Configuration = {
     },
   },
   target: ['web', 'electron-renderer'],
+  mode: 'production',
+  output: {
+    path: webpackPaths.distRendererPath,
+    publicPath: './',
+    filename: '[name].[contenthash].js',
+    library: {
+      type: 'umd',
+    },
+  },
 };
 
 export default configuration;

desktop/package.json

@@ -41,7 +41,7 @@
     "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
     "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
-    "package:debug": "cross-env DEBUG_PROD=true yarn package",
+    "package:debug": "cross-env DEBUG_PROD=true yarn package --config.asar=false",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
     "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",

desktop/src/main/main.ts

@@ -1,4 +1,4 @@
-/* eslint global-require: off, no-console: off, promise/always-return: off */
+/* eslint-disable @typescript-eslint/no-var-requires */
 
 /**
  * This module executes inside of electron's main process. You can start
@@ -79,8 +79,8 @@ const createWindow = async () => {
     log.info('parse resolve path:', RESOURCES_PATH);
 
     const mainWindowState = windowStateKeeper({
-      defaultWidth: 1024,
-      defaultHeight: 728,
+      defaultWidth: 1200,
+      defaultHeight: 800,
     });
     log.info('load window state with:', mainWindow);
 

pnpm-lock.yaml

@@ -318,6 +318,7 @@ importers:
       file-loader: ^6.2.0
       glob: ^7.2.0
       html-webpack-plugin: ^5.3.2
+      is-electron: ^2.2.1
       is-hotkey: ^0.2.0
       jest: ^27.4.5
       jsonschema: ^1.4.0
@@ -380,6 +381,7 @@ importers:
       compressorjs: 1.1.1
       copy-to-clipboard: 3.3.1
       emoji-mart: 3.0.1_react@17.0.2
+      is-electron: 2.2.1
       is-hotkey: 0.2.0
       jsonschema: 1.4.0
       jwt-decode: 3.1.2
@@ -10842,6 +10844,10 @@ packages:
       is-window: 1.0.2
     dev: true
 
+  /is-electron/2.2.1:
+    resolution: {integrity: sha512-r8EEQQsqT+Gn0aXFx7lTFygYQhILLCB+wn0WCDL5LZRINeLH/Rvw1j2oKodELLXYNImQ3CRlVsY8wW4cGOsyuw==}
+    dev: false
+
   /is-extendable/0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
     engines: {node: '>=0.10.0'}
@@ -17088,7 +17094,7 @@ packages:
       serialize-javascript: 6.0.0
       source-map: 0.6.1
       terser: 5.13.1
-      webpack: 5.72.1
+      webpack: 5.72.1_webpack-cli@4.9.2
     dev: true
 
   /terser-webpack-plugin/5.3.1_webpack@5.73.0:

web/package.json

@@ -31,6 +31,7 @@
     "compressorjs": "^1.1.1",
     "copy-to-clipboard": "^3.3.1",
     "emoji-mart": "^3.0.1",
+    "is-electron": "^2.2.1",
     "is-hotkey": "^0.2.0",
     "jsonschema": "^1.4.0",
     "jwt-decode": "^3.1.2",

web/src/App.tsx

@@ -1,5 +1,11 @@
 import React, { Suspense } from 'react';
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import {
+  BrowserRouter,
+  HashRouter,
+  Redirect,
+  Route,
+  Switch,
+} from 'react-router-dom';
 import { TcProvider, useColorScheme, useLanguage } from 'tailchat-shared';
 import clsx from 'clsx';
 import { Loadable } from './components/Loadable';
@@ -10,6 +16,9 @@ import { getPopupContainer, preventDefault } from './utils/dom-helper';
 import { LoadingSpinner } from './components/LoadingSpinner';
 import { pluginRootRoute } from './plugin/common';
 import { PortalHost as FallbackPortalHost } from './components/Portal';
+import isElectron from 'is-electron';
+
+const AppRouter: any = isElectron() ? HashRouter : BrowserRouter;
 
 const MainRoute = Loadable(() => import('./routes/Main'));
 
@@ -22,13 +31,13 @@ const InviteRoute = Loadable(() => import('./routes/Invite'));
 const AppProvider: React.FC = React.memo((props) => {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      <BrowserRouter>
+      <AppRouter>
         <TcProvider>
           <AntdProvider getPopupContainer={getPopupContainer}>
             {props.children}
           </AntdProvider>
         </TcProvider>
-      </BrowserRouter>
+      </AppRouter>
     </Suspense>
   );
 });

web/tailwind.config.js

@@ -4,6 +4,7 @@
 
 const plugin = require('tailwindcss/plugin');
 const colors = require('tailwindcss/colors');
+const path = require('path');
 
 const customTheme = {
   boxShadow: {
@@ -41,7 +42,7 @@ const tailchat = plugin(({ addUtilities }) => {
 module.exports = {
   purge: {
     enabled: process.env.NODE_ENV !== 'development',
-    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    content: [path.resolve(__dirname, './src/**/*.{js,jsx,ts,tsx}')],
   },
   darkMode: 'class', // or 'media'
   important: '#app',