chore: version 2.7.3 (Chanzhaoyu#120)

* fix: 用户输入也被渲染的问题 (Chanzhaoyu#117)

* fix: 用户输入不转换

* feat: 基础深色模式适配

* feat: 主题模式跟随系统

* feat: 深色适配补漏

* 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 <[email protected]>",
@@ -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="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/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="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/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%;
+}