feat: #响应式 (#22)

* feat: #响应式

* fix: #兼容node 16

* feat: #接口代理

* fix: #延长超时时长到30秒

* fix: #for node 16

* fix: #node 16

* Update settings.json

* Update package.json

* Update index.vue

* Update Layout.vue

---------

Co-authored-by: Redon <790348264@qq.com>

.env

@@ -1,2 +1,3 @@
 # Glob API URL
-VITE_GLOB_API_URL='http://localhost:3002'
+VITE_GLOB_API_URL=/api
+VITE_APP_API_BASE_URL = http://localhost:3002/

service/package.json

@@ -11,7 +11,7 @@
     "express"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": "^16 || ^18"
   },
   "scripts": {
     "start": "esno ./src/index.ts",
@@ -23,7 +23,8 @@
   },
   "dependencies": {
     "chatgpt": "^4.3.2",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "isomorphic-fetch": "^3.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.2",

service/pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   eslint: ^8.34.0
   esno: ^0.16.3
   express: ^4.18.2
+  isomorphic-fetch: ^3.0.0
   rimraf: ^4.1.2
   tsup: ^6.6.2
   typescript: ^4.9.5
@@ -16,6 +17,7 @@ specifiers:
 dependencies:
   chatgpt: 4.3.2
   express: 4.18.2
+  isomorphic-fetch: 3.0.0
 
 devDependencies:
   '@antfu/eslint-config': 0.35.2_7kw3g6rralp5ps6mg3uyzz6azm
@@ -2207,6 +2209,15 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /isomorphic-fetch/3.0.0:
+    resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==}
+    dependencies:
+      node-fetch: 2.6.9
+      whatwg-fetch: 3.6.2
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /joycon/3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
@@ -2463,6 +2474,18 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /node-fetch/2.6.9:
+    resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /normalize-package-data/2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
@@ -3101,6 +3124,10 @@ packages:
     engines: {node: '>=0.6'}
     dev: false
 
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /tr46/1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
     dependencies:
@@ -3300,10 +3327,25 @@ packages:
       - supports-color
     dev: true
 
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: true
 
+  /whatwg-fetch/3.6.2:
+    resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
+    dev: false
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /whatwg-url/7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
     dependencies:

service/src/chatgpt.ts

@@ -1,6 +1,6 @@
 import * as dotenv from 'dotenv'
-import type { SendMessageOptions } from 'chatgpt'
+import 'isomorphic-fetch'
-import { ChatGPTAPI } from 'chatgpt'
+import type { ChatGPTAPI, SendMessageOptions } from 'chatgpt'
 import { sendResponse } from './utils'
 
 export interface ChatContext {
@@ -18,7 +18,14 @@ if (apiKey === undefined)
 /**
  * More Info: https://github.com/transitive-bullshit/chatgpt-api
  */
-const api = new ChatGPTAPI({ apiKey, debug: false })
+let api: ChatGPTAPI
+// To use ESM in CommonJS, you can use a dynamic import
+(async () => {
+  const { ChatGPTAPI } = await import('chatgpt')
+
+  api = new ChatGPTAPI(
+    { apiKey: process.env.OPENAI_API_KEY })
+})()
 
 async function chatReply(
   message: string,

src/components/business/Chat/layout/Layout.vue

@@ -4,7 +4,7 @@ import Sider from './sider/index.vue'
 </script>
 
 <template>
-  <div class="h-full overflow-hidden border rounded-md shadow-md min-w-[640px]">
+  <div class="h-full overflow-hidden border rounded-md shadow-md">
     <NLayout class="h-full" has-sider>
       <Sider />
       <NLayoutContent class="h-full">
@@ -13,7 +13,3 @@ import Sider from './sider/index.vue'
     </NLayout>
   </div>
 </template>
-
-<style>
-
-</style>

src/router/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
   {
@@ -11,7 +11,7 @@ const routes: RouteRecordRaw[] = [
 ]
 
 export const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
   scrollBehavior: () => ({ left: 0, top: 0 }),
 })

vite.config.ts

@@ -1,8 +1,9 @@
 import path from 'path'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-export default defineConfig(() => {
+export default defineConfig((env) => {
+  const viteEnv = loadEnv(env.mode, process.cwd())
   return {
     resolve: {
       alias: {
@@ -14,6 +15,13 @@ export default defineConfig(() => {
       port: 1002,
       host: '0.0.0.0',
       open: false,
+      proxy: {
+        '/api': {
+          target: viteEnv.VITE_APP_API_BASE_URL,
+          changeOrigin: true, // 允许跨域
+          rewrite: path => path.replace('/api/', '/'),
+        },
+      },
     },
     build: {
       reportCompressedSize: false,