💄 style: 优化暗色主题表现

Author: arvinxx

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  crossOrigin: 'anonymous',
+  transpilePackages: ['@lobehub/ui'],
   async headers() {
     return [
       {

package.json

@@ -38,18 +38,18 @@
     "@lobehub/chat-plugin-sdk": "^1.15.1",
     "@lobehub/chat-plugins-gateway": "^1",
     "@lobehub/ui": "latest",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
     "antd": "^5",
     "antd-style": "^3",
     "dayjs": "^1",
-    "next": "^13.4.19",
+    "next": "13.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-layout-kit": "^1"
   },
   "devDependencies": {
     "@lobehub/lint": "latest",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
     "@vercel/node": "^2",
     "@vitest/coverage-v8": "latest",
     "commitlint": "^17",

public/manifest-dev.json

@@ -14,7 +14,7 @@
           "gender": {
             "type": "string",
             "enum": ["man", "woman"],
-            "description": "用户的性别"
+            "description": "对话用户的性别，需要询问用户后才知道这个信息"
           }
         },
         "required": ["mood", "gender"],

src/pages/_app.tsx

@@ -0,0 +1,12 @@
+import { ThemeProvider } from '@lobehub/ui';
+import type { AppProps } from 'next/app';
+
+import './global.css';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider themeMode={'auto'}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}

src/pages/global.css

@@ -0,0 +1,6 @@
+html,
+body {
+  background: transparent !important;
+  /*使用 iframe 嵌入时，如果在暗色模式下仍需要保持透明背景，需要强制设定 color-scheme 为 light  */
+  color-scheme: light !important;
+}

src/type.ts

@@ -2,13 +2,15 @@ export interface ClothesItem {
   description: string;
   name: string;
 }
+type Mood = 'happy' | 'sad' | 'anger' | 'fear' | 'surprise' | 'disgust';
+
 export interface ResponseData {
   clothes: ClothesItem[];
-  mood: string;
+  mood: Mood;
   today: number;
 }
 
 export interface RequestData {
   gender: 'man' | 'woman';
-  mood: string;
+  mood: Mood;
 }