chore: version 2.7.3

CHANGELOG.md

@@ -1,3 +1,12 @@
+## v2.7.3
+
+`2023-02-25`
+
+### Feature
+- 适配系统深色模式 [#118](https://github.com/Chanzhaoyu/chatgpt-web/issues/103)
+### BugFix
+- 修复用户消息能被渲染为 `HTML` 问题 [#117](https://github.com/Chanzhaoyu/chatgpt-web/issues/117)
+
 ## v2.7.2
 
 `2023-02-24`

index.html

@@ -61,6 +61,12 @@
 					transform: translateX(100%);
 				}
 			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					background: #121212;
+				}
+			}
 		</style>
 		<div class="loading-wrap">
 			<div class="balls">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.13.0",
-    "github-markdown-css": "^5.2.0",
     "highlight.js": "^11.7.0",
     "marked": "^4.2.12",
     "naive-ui": "^2.34.3",

src/App.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { NConfigProvider } from 'naive-ui'
 import { NaiveProvider } from '@/components/common'
+import { useTheme } from '@/hooks/useTheme'
+
+const { theme, themeOverrides } = useTheme()
 </script>
 
 <template>
-  <NConfigProvider class="h-full">
+  <NConfigProvider
+    class="h-full"
+    :theme="theme"
+    :theme-overrides="themeOverrides"
+  >
     <NaiveProvider>
       <RouterView />
     </NaiveProvider>

src/components/common/HoverButton/Button.vue

@@ -12,7 +12,7 @@ function handleClick() {
 
 <template>
   <button
-    class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100"
+    class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100 dark:hover:bg-[#414755]"
     @click="handleClick"
   >
     <slot />

src/components/common/Setting/index.vue

@@ -63,7 +63,7 @@ watch(
         <p>
           此项目开源于
           <a class="text-blue-600" href="https://github.com/Chanzhaoyu/chatgpt-web" target="_blank">Github</a>
-          ，免费并且协议为 MIT，其他来源均为盗版，使用时请注意。如果你觉得此项目对你有帮助，请帮我点个 Star，谢谢！
+          如果你觉得此项目对你有帮助，请帮我点个 Star，谢谢！
         </p>
         <hr>
         <p>API方式：{{ config?.apiModel ?? '-' }}</p>

src/components/custom/GithubSite.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="text-center text-neutral-500">
-    <span>❤️ Star on</span>
+  <div class="text-neutral-400">
+    <span>Star on</span>
     <a href="https://github.com/Chanzhaoyu/chatgpt-bot" target="_blank" class="text-blue-500">
       GitHub
     </a>

src/hooks/useTheme.ts

@@ -0,0 +1,43 @@
+import type { GlobalThemeOverrides } from 'naive-ui'
+import { computed, watch } from 'vue'
+import { darkTheme, useOsTheme } from 'naive-ui'
+import { useAppStore } from '@/store'
+
+export function useTheme() {
+  const appStore = useAppStore()
+
+  const OsTheme = useOsTheme()
+
+  const isDark = computed(() => {
+    if (appStore.theme === 'auto')
+      return OsTheme.value === 'dark'
+    else
+      return appStore.theme === 'dark'
+  })
+
+  const theme = computed(() => {
+    return isDark.value ? darkTheme : undefined
+  })
+
+  const themeOverrides = computed<GlobalThemeOverrides>(() => {
+    if (isDark.value) {
+      return {
+        common: {},
+      }
+    }
+    return {}
+  })
+
+  watch(
+    () => isDark.value,
+    (dark) => {
+      if (dark)
+        document.documentElement.classList.add('dark')
+      else
+        document.documentElement.classList.remove('dark')
+    },
+    { immediate: true },
+  )
+
+  return { theme, themeOverrides }
+}

src/plugins/assets.ts

@@ -1,6 +1,7 @@
 import 'highlight.js/styles/xcode.css'
-import 'github-markdown-css/github-markdown.css'
-import '@/styles/global.css'
+import '@/styles/lib/tailwind.css'
+import '@/styles/lib/github-markdown.less'
+import '@/styles/global.less'
 
 /** Tailwind's Preflight Style Override */
 function naiveStyleOverride() {

src/store/modules/app/helper.ts

@@ -2,19 +2,22 @@ import { ss } from '@/utils/storage'
 
 const LOCAL_NAME = 'appSetting'
 
+export type Theme = 'light' | 'dark' | 'auto'
+
 export interface AppState {
   siderCollapsed: boolean
+  theme: Theme
 }
 
-export function defaultSetting() {
-  return { siderCollapsed: false }
+export function defaultSetting(): AppState {
+  return { siderCollapsed: false, theme: 'light' }
 }
 
-export function getLocalSetting() {
+export function getLocalSetting(): AppState {
   const localSetting: AppState | undefined = ss.get(LOCAL_NAME)
-  return localSetting ?? defaultSetting()
+  return { ...defaultSetting(), ...localSetting }
 }
 
-export function setLocalSetting(setting: AppState) {
+export function setLocalSetting(setting: AppState): void {
   ss.set(LOCAL_NAME, setting)
 }

src/store/modules/app/index.ts

@@ -1,12 +1,21 @@
 import { defineStore } from 'pinia'
-import type { AppState } from './helper'
+import type { AppState, Theme } from './helper'
 import { getLocalSetting, setLocalSetting } from './helper'
 
 export const useAppStore = defineStore('app-store', {
   state: (): AppState => getLocalSetting(),
   actions: {
     setSiderCollapsed(collapsed: boolean) {
       this.siderCollapsed = collapsed
+      this.recordState()
+    },
+
+    setTheme(theme: Theme) {
+      this.theme = theme
+      this.recordState()
+    },
+
+    recordState() {
       setLocalSetting(this.$state)
     },
   },

src/styles/global.less

@@ -0,0 +1,5 @@
+html,
+body,
+#app {
+	height: 100%;
+}