From b6e5c59a9c40050720998df9e848fd0da35d4741 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 10:51:47 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=E9=A2=84=E8=AE=BE=20pinia=20?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |  1 +
 pnpm-lock.yaml                     | 36 +++++++++++++++++++++++++++++-
 src/main.ts                        | 18 ++++++---------
 src/plugins/assets.ts              | 14 ++++++++++++
 src/plugins/index.ts               |  3 +++
 src/store/index.ts                 |  9 ++++++++
 src/store/modules/app/index.ts     | 19 ++++++++++++++++
 src/store/modules/history/index.ts | 12 ++++++++++
 src/store/modules/index.ts         |  2 ++
 9 files changed, 102 insertions(+), 12 deletions(-)
 create mode 100644 src/plugins/assets.ts
 create mode 100644 src/plugins/index.ts
 create mode 100644 src/store/index.ts
 create mode 100644 src/store/modules/app/index.ts
 create mode 100644 src/store/modules/history/index.ts
 create mode 100644 src/store/modules/index.ts

diff --git a/package.json b/package.json
index a97f802..6a2dd93 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "naive-ui": "^2.34.3",
+    "pinia": "^2.0.30",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9fe567..b0b2e76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,7 @@ specifiers:
   lint-staged: ^13.1.1
   naive-ui: ^2.34.3
   npm-run-all: ^4.1.5
+  pinia: ^2.0.30
   postcss: ^8.4.21
   rimraf: ^4.1.2
   tailwindcss: ^3.2.6
@@ -25,6 +26,7 @@ specifiers:
 
 dependencies:
   naive-ui: 2.34.3_vue@3.2.47
+  pinia: 2.0.30_hmuptsblhheur2tugfgucj7gc4
   vue: 3.2.47
   vue-router: 4.1.6_vue@3.2.47
 
@@ -3567,6 +3569,24 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /pinia/2.0.30_hmuptsblhheur2tugfgucj7gc4:
+    resolution: {integrity: sha512-q6DUmxWwe/mQgg+55QQjykpKC+aGeGdaJV3niminl19V08dE+LRTvSEuqi6/NLSGCKHI49KGL6tMNEOssFiMyA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      typescript: 4.9.5
+      vue: 3.2.47
+      vue-demi: 0.13.11_vue@3.2.47
+    dev: false
+
   /pluralize/8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -4284,7 +4304,6 @@ packages:
     resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
     engines: {node: '>=4.2.0'}
     hasBin: true
-    dev: true
 
   /unbox-primitive/1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
@@ -4390,6 +4409,21 @@ packages:
       vue: 3.2.47
     dev: false
 
+  /vue-demi/0.13.11_vue@3.2.47:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /vue-eslint-parser/9.1.0_eslint@8.34.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
diff --git a/src/main.ts b/src/main.ts
index 19f69e9..acbe522 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,21 +1,17 @@
-import './styles/global.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
+import { setupAssets } from '@/plugins'
+import { setupStore } from '@/store'
 import { setupRouter } from '@/router'
 
-/** Tailwind's Preflight Style Override */
-function naiveStyleOverride() {
-  const meta = document.createElement('meta')
-  meta.name = 'naive-ui-style'
-  document.head.appendChild(meta)
-}
-
-/** Setup */
 async function bootstrap() {
   const app = createApp(App)
-  naiveStyleOverride()
+  setupAssets()
+
+  setupStore(app)
+
   await setupRouter(app)
+
   app.mount('#app')
 }
 
diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts
new file mode 100644
index 0000000..b6b4cb0
--- /dev/null
+++ b/src/plugins/assets.ts
@@ -0,0 +1,14 @@
+import '@/styles/global.css'
+
+/** Tailwind's Preflight Style Override */
+function naiveStyleOverride() {
+  const meta = document.createElement('meta')
+  meta.name = 'naive-ui-style'
+  document.head.appendChild(meta)
+}
+
+function setupAssets() {
+  naiveStyleOverride()
+}
+
+export default setupAssets
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
new file mode 100644
index 0000000..ae1ac22
--- /dev/null
+++ b/src/plugins/index.ts
@@ -0,0 +1,3 @@
+import setupAssets from './assets'
+
+export { setupAssets }
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..5044bb1
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+
+export function setupStore(app: App) {
+  const store = createPinia()
+  app.use(store)
+}
+
+export * from './modules'
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
new file mode 100644
index 0000000..ca89ec5
--- /dev/null
+++ b/src/store/modules/app/index.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+
+interface AppState {
+  siderCollapsed: boolean
+}
+
+export const useAppStore = defineStore('app-store', {
+  state: (): AppState => ({
+    siderCollapsed: false,
+  }),
+  actions: {
+    setSiderCollapsed(collapsed: boolean) {
+      this.siderCollapsed = collapsed
+    },
+    toggleSiderCollapse() {
+      this.siderCollapsed = !this.siderCollapsed
+    },
+  },
+})
diff --git a/src/store/modules/history/index.ts b/src/store/modules/history/index.ts
new file mode 100644
index 0000000..3f1c2dd
--- /dev/null
+++ b/src/store/modules/history/index.ts
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+interface HistoryState {
+  list: any[]
+}
+
+export const useHistoryStore = defineStore('history-store', {
+  state: (): HistoryState => ({
+    list: [],
+  }),
+  actions: {},
+})
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
new file mode 100644
index 0000000..4e0ccdc
--- /dev/null
+++ b/src/store/modules/index.ts
@@ -0,0 +1,2 @@
+export * from './app'
+export * from './history'

From b03f804e35adb490aa5862419f984fe19f6e91e0 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 11:34:46 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +
 pnpm-lock.yaml                                | 12 ++++
 .../business/Chat/layout/sider/Footer.vue     |  5 +-
 .../business/Chat/layout/sider/index.vue      | 30 ++--------
 src/store/modules/app/helper.ts               | 18 ++++++
 src/store/modules/app/index.ts                | 13 ++--
 src/utils/crypto/index.ts                     | 18 ++++++
 src/utils/is/index.ts                         | 55 +++++++++++++++++
 src/utils/storage/index.ts                    |  1 +
 src/utils/storage/local.ts                    | 59 +++++++++++++++++++
 10 files changed, 177 insertions(+), 36 deletions(-)
 create mode 100644 src/store/modules/app/helper.ts
 create mode 100644 src/utils/crypto/index.ts
 create mode 100644 src/utils/is/index.ts
 create mode 100644 src/utils/storage/index.ts
 create mode 100644 src/utils/storage/local.ts

diff --git a/package.json b/package.json
index 6a2dd93..3fd7979 100644
--- a/package.json
+++ b/package.json
@@ -32,10 +32,12 @@
     "@commitlint/cli": "^17.4.3",
     "@commitlint/config-conventional": "^17.4.3",
     "@iconify/vue": "^4.1.0",
+    "@types/crypto-js": "^4.1.1",
     "@types/node": "^18.13.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "axios": "^1.3.2",
+    "crypto-js": "^4.1.1",
     "eslint": "^8.34.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b0b2e76..5bd96a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,10 +5,12 @@ specifiers:
   '@commitlint/cli': ^17.4.3
   '@commitlint/config-conventional': ^17.4.3
   '@iconify/vue': ^4.1.0
+  '@types/crypto-js': ^4.1.1
   '@types/node': ^18.13.0
   '@vitejs/plugin-vue': ^4.0.0
   autoprefixer: ^10.4.13
   axios: ^1.3.2
+  crypto-js: ^4.1.1
   eslint: ^8.34.0
   husky: ^8.0.3
   lint-staged: ^13.1.1
@@ -35,10 +37,12 @@ devDependencies:
   '@commitlint/cli': 17.4.3
   '@commitlint/config-conventional': 17.4.3
   '@iconify/vue': 4.1.0_vue@3.2.47
+  '@types/crypto-js': 4.1.1
   '@types/node': 18.13.0
   '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.47
   autoprefixer: 10.4.13_postcss@8.4.21
   axios: 1.3.2
+  crypto-js: 4.1.1
   eslint: 8.34.0
   husky: 8.0.3
   lint-staged: 13.1.1
@@ -697,6 +701,10 @@ packages:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
     dev: true
 
+  /@types/crypto-js/4.1.1:
+    resolution: {integrity: sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==}
+    dev: true
+
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -1529,6 +1537,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-js/4.1.1:
+    resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
+    dev: true
+
   /css-render/0.15.12:
     resolution: {integrity: sha512-eWzS66patiGkTTik+ipO9qNGZ+uNuGyTmnz6/+EJIiFg8+3yZRpnMwgFo8YdXhQRsiePzehnusrxVvugNjXzbw==}
     dependencies:
diff --git a/src/components/business/Chat/layout/sider/Footer.vue b/src/components/business/Chat/layout/sider/Footer.vue
index a485c3a..cc72d0d 100644
--- a/src/components/business/Chat/layout/sider/Footer.vue
+++ b/src/components/business/Chat/layout/sider/Footer.vue
@@ -3,9 +3,8 @@ import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
 </script>
 
 <template>
-  <footer class="flex items-center justify-between p-4 overflow-hidden border-t">
-    <UserAvatar />
-
+  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t h-[70px]">
+    <UserAvatar class="flex-1" />
     <HoverButton tooltip="Setting">
       <span class="text-xl text-[#4f555e]">
         <SvgIcon icon="ri:settings-4-line" />
diff --git a/src/components/business/Chat/layout/sider/index.vue b/src/components/business/Chat/layout/sider/index.vue
index f00cea6..8ecd9ce 100644
--- a/src/components/business/Chat/layout/sider/index.vue
+++ b/src/components/business/Chat/layout/sider/index.vue
@@ -1,34 +1,14 @@
 <script setup lang='ts'>
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { NButton, NLayoutSider, useMessage } from 'naive-ui'
 import List from './List.vue'
 import Footer from './Footer.vue'
+import { useAppStore } from '@/store'
 
-interface Props {
-  collapsed?: boolean
-}
-
-interface Emit {
-  (e: 'update:collapsed', value: boolean): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  collapsed: false,
-})
-
-const emit = defineEmits<Emit>()
-
+const appStore = useAppStore()
 const ms = useMessage()
 
-const collapsed = ref(props.collapsed)
-
-watch(
-  () => props.collapsed,
-  (value: boolean) => {
-    collapsed.value = value
-  },
-  { immediate: true },
-)
+const collapsed = ref(appStore.siderCollapsed ?? false)
 
 function handleAdd() {
   ms.info('Coming soon...')
@@ -36,7 +16,7 @@ function handleAdd() {
 
 function handleCollapsed() {
   collapsed.value = !collapsed.value
-  emit('update:collapsed', collapsed.value)
+  appStore.setSiderCollapsed(collapsed.value)
 }
 </script>
 
diff --git a/src/store/modules/app/helper.ts b/src/store/modules/app/helper.ts
new file mode 100644
index 0000000..55f9b22
--- /dev/null
+++ b/src/store/modules/app/helper.ts
@@ -0,0 +1,18 @@
+import { ls } from '@/utils/storage'
+
+export interface AppState {
+  siderCollapsed: boolean
+}
+
+export function defaultSetting() {
+  return { siderCollapsed: false }
+}
+
+export function getAppSetting() {
+  const localSetting: AppState = ls.get('appSetting')
+  return localSetting ?? defaultSetting()
+}
+
+export function setAppSetting(setting: AppState) {
+  ls.set('appSetting', setting)
+}
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index ca89ec5..8935e67 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,19 +1,16 @@
 import { defineStore } from 'pinia'
-
-interface AppState {
-  siderCollapsed: boolean
-}
+import type { AppState } from './helper'
+import { getAppSetting, setAppSetting } from './helper'
 
 export const useAppStore = defineStore('app-store', {
-  state: (): AppState => ({
-    siderCollapsed: false,
-  }),
+  state: (): AppState => getAppSetting(),
   actions: {
     setSiderCollapsed(collapsed: boolean) {
       this.siderCollapsed = collapsed
+      setAppSetting(this.$state)
     },
     toggleSiderCollapse() {
-      this.siderCollapsed = !this.siderCollapsed
+      this.setSiderCollapsed(!this.siderCollapsed)
     },
   },
 })
diff --git a/src/utils/crypto/index.ts b/src/utils/crypto/index.ts
new file mode 100644
index 0000000..6c57c8d
--- /dev/null
+++ b/src/utils/crypto/index.ts
@@ -0,0 +1,18 @@
+import CryptoJS from 'crypto-js'
+
+const CryptoSecret = '__CRYPTO_SECRET__'
+
+export function enCrypto(data: any) {
+  const str = JSON.stringify(data)
+  return CryptoJS.AES.encrypt(str, CryptoSecret).toString()
+}
+
+export function deCrypto(data: string) {
+  const bytes = CryptoJS.AES.decrypt(data, CryptoSecret)
+  const str = bytes.toString(CryptoJS.enc.Utf8)
+
+  if (str)
+    return JSON.parse(str)
+
+  return null
+}
diff --git a/src/utils/is/index.ts b/src/utils/is/index.ts
new file mode 100644
index 0000000..fd05cd3
--- /dev/null
+++ b/src/utils/is/index.ts
@@ -0,0 +1,55 @@
+export function isNumber<T extends number>(value: T | unknown): value is number {
+  return Object.prototype.toString.call(value) === '[object Number]'
+}
+
+export function isString<T extends string>(value: T | unknown): value is string {
+  return Object.prototype.toString.call(value) === '[object String]'
+}
+
+export function isBoolean<T extends boolean>(value: T | unknown): value is boolean {
+  return Object.prototype.toString.call(value) === '[object Boolean]'
+}
+
+export function isNull<T extends null>(value: T | unknown): value is null {
+  return Object.prototype.toString.call(value) === '[object Null]'
+}
+
+export function isUndefine<T extends undefined>(value: T | unknown): value is undefined {
+  return Object.prototype.toString.call(value) === '[object Undefined]'
+}
+
+export function isObject<T extends object>(value: T | unknown): value is object {
+  return Object.prototype.toString.call(value) === '[object Object]'
+}
+
+export function isArray<T extends any[]>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Array]'
+}
+
+export function isFunction<T extends (...args: any[]) => any | void | never>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Function]'
+}
+
+export function isDate<T extends Date>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Date]'
+}
+
+export function isRegExp<T extends RegExp>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object RegExp]'
+}
+
+export function isPromise<T extends Promise<any>>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Promise]'
+}
+
+export function isSet<T extends Set<any>>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Set]'
+}
+
+export function isMap<T extends Map<any, any>>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Map]'
+}
+
+export function isFile<T extends File>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object File]'
+}
diff --git a/src/utils/storage/index.ts b/src/utils/storage/index.ts
new file mode 100644
index 0000000..87c2c0a
--- /dev/null
+++ b/src/utils/storage/index.ts
@@ -0,0 +1 @@
+export * from './local'
diff --git a/src/utils/storage/local.ts b/src/utils/storage/local.ts
new file mode 100644
index 0000000..fabfd23
--- /dev/null
+++ b/src/utils/storage/local.ts
@@ -0,0 +1,59 @@
+import { deCrypto, enCrypto } from '../crypto'
+
+interface StorageData<T = any> {
+  value: T
+  expire: number | null
+}
+
+function createLocalStorage() {
+  const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7 // 7 days
+
+  function set<T = any>(key: string, value: T, expire: number | null = DEFAULT_CACHE_TIME) {
+    const storageData: StorageData<T> = {
+      value,
+      expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
+    }
+    const json = enCrypto(storageData)
+    window.localStorage.setItem(key, json)
+  }
+
+  function get(key: string) {
+    const json = window.localStorage.getItem(key)
+    if (json) {
+      let storageData: StorageData | null = null
+
+      try {
+        storageData = deCrypto(json)
+      }
+      catch {
+        // Prevent failure
+      }
+
+      if (storageData) {
+        const { value, expire } = storageData
+        if (expire === null || expire >= Date.now())
+          return value
+      }
+
+      remove(key)
+      return null
+    }
+  }
+
+  function remove(key: string) {
+    window.localStorage.removeItem(key)
+  }
+
+  function clear() {
+    window.localStorage.clear()
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    clear,
+  }
+}
+
+export const ls = createLocalStorage()

From 33c02cfe10e046db1f477ec743912c23ef373e3d Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 12:00:33 +0800
Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E5=A2=9E=E5=88=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/Chat/layout/sider/List.vue       | 47 +++++++++++++++--
 .../business/Chat/layout/sider/ListItem.vue   | 52 -------------------
 .../business/Chat/layout/sider/index.vue      | 22 ++++++--
 src/components/business/Chat/types.ts         |  6 +++
 4 files changed, 67 insertions(+), 60 deletions(-)
 delete mode 100644 src/components/business/Chat/layout/sider/ListItem.vue

diff --git a/src/components/business/Chat/layout/sider/List.vue b/src/components/business/Chat/layout/sider/List.vue
index ff8b15a..caf99a7 100644
--- a/src/components/business/Chat/layout/sider/List.vue
+++ b/src/components/business/Chat/layout/sider/List.vue
@@ -1,14 +1,53 @@
 <script setup lang='ts'>
 import { NScrollbar } from 'naive-ui'
-import ListItem from './ListItem.vue'
+import type { HistoryChatProps } from '../../types'
+import { SvgIcon } from '@/components/common'
+
+interface Props {
+  data: HistoryChatProps[]
+}
+
+interface Emit {
+  (ev: 'delete', index: number): void
+  (ev: 'edit', index: number): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+function handleEdit(index: number) {
+  emit('delete', index)
+}
+
+function handleDelete(index: number) {
+  emit('delete', index)
+}
 </script>
 
 <template>
   <NScrollbar class="px-4">
     <div class="flex flex-col gap-2 text-sm">
-      <ListItem text="Learning correlation" />
-      <ListItem text="Write Code" />
-      <ListItem text="docs..." />
+      <div v-for="(item, index) of data" :key="index">
+        <a
+          class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
+        >
+          <span>
+            <SvgIcon icon="ri:message-3-line" />
+          </span>
+          <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
+            <span>{{ item.title }}</span>
+          </div>
+          <div class="absolute z-10 flex visible right-1">
+            <button class="p-1">
+              <SvgIcon icon="ri:edit-line" @click="handleEdit(index)" />
+            </button>
+            <button class="p-1" @click="handleDelete(index)">
+              <SvgIcon icon="ri:delete-bin-line" />
+            </button>
+          </div>
+        </a>
+      </div>
     </div>
   </NScrollbar>
 </template>
diff --git a/src/components/business/Chat/layout/sider/ListItem.vue b/src/components/business/Chat/layout/sider/ListItem.vue
deleted file mode 100644
index 23a473d..0000000
--- a/src/components/business/Chat/layout/sider/ListItem.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang='ts'>
-import { SvgIcon } from '@/components/common'
-
-interface Props {
-  text: string
-}
-
-interface Emit {
-  (e: 'click',): void
-  (e: 'edit',): void
-  (e: 'delete',): void
-}
-
-defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-function handleClick(event: Event) {
-  emit('click')
-  event.preventDefault()
-}
-
-function handleEdit() {
-  emit('edit')
-}
-
-function handleDelete() {
-  emit('delete')
-}
-</script>
-
-<template>
-  <a
-    class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
-    @click="handleClick"
-  >
-    <span>
-      <SvgIcon icon="ri:message-3-line" />
-    </span>
-    <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
-      <span>{{ text }}</span>
-    </div>
-    <div class="absolute z-10 flex visible right-1">
-      <button class="p-1" @click="handleEdit">
-        <SvgIcon icon="ri:edit-line" />
-      </button>
-      <button class="p-1" @click="handleDelete">
-        <SvgIcon icon="ri:delete-bin-line" />
-      </button>
-    </div>
-  </a>
-</template>
diff --git a/src/components/business/Chat/layout/sider/index.vue b/src/components/business/Chat/layout/sider/index.vue
index 8ecd9ce..ee24c3e 100644
--- a/src/components/business/Chat/layout/sider/index.vue
+++ b/src/components/business/Chat/layout/sider/index.vue
@@ -1,17 +1,31 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
-import { NButton, NLayoutSider, useMessage } from 'naive-ui'
+import { NButton, NLayoutSider } from 'naive-ui'
+import type { HistoryChatProps } from '../../types'
 import List from './List.vue'
 import Footer from './Footer.vue'
 import { useAppStore } from '@/store'
 
 const appStore = useAppStore()
-const ms = useMessage()
 
 const collapsed = ref(appStore.siderCollapsed ?? false)
 
+const history = ref<HistoryChatProps[]>([])
+
 function handleAdd() {
-  ms.info('Coming soon...')
+  history.value.push({
+    title: 'New chat',
+    edit: false,
+    data: [],
+  })
+}
+
+function handleEdit(index: number) {
+  history.value[index].edit = true
+}
+
+function handleDelete(index: number) {
+  history.value.splice(index, 1)
 }
 
 function handleCollapsed() {
@@ -37,7 +51,7 @@ function handleCollapsed() {
             New chat
           </NButton>
         </div>
-        <List />
+        <List :data="history" @edit="handleEdit" @delete="handleDelete" />
       </main>
       <Footer />
     </div>
diff --git a/src/components/business/Chat/types.ts b/src/components/business/Chat/types.ts
index c43dd62..1201899 100644
--- a/src/components/business/Chat/types.ts
+++ b/src/components/business/Chat/types.ts
@@ -10,3 +10,9 @@ export interface ChatProps {
   error?: boolean
   options?: ChatOptions
 }
+
+export interface HistoryChatProps {
+  title: string
+  edit: boolean
+  data: ChatProps[]
+}

From de34af8747e3669f6f2379bb96817f72a6be38ac Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 15:07:50 +0800
Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=E5=A4=9A=E4=BC=9A=E8=AF=9D?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E9=80=BB=E8=BE=91=E6=A2=B3=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/business/Chat/hooks/useChat.ts | 30 +++++++++
 src/components/business/Chat/index.vue        | 40 +++++-------
 .../business/Chat/layout/sider/List.vue       | 63 ++++++++++++-------
 .../business/Chat/layout/sider/index.vue      | 22 ++-----
 src/components/business/Chat/types.ts         | 18 ------
 src/store/modules/app/helper.ts               | 12 ++--
 src/store/modules/app/index.ts                |  6 +-
 src/store/modules/history/helper.ts           | 21 +++++++
 src/store/modules/history/index.ts            | 59 ++++++++++++++---
 src/typings/chat.d.ts                         | 20 ++++++
 src/utils/storage/local.ts                    | 29 ++++++---
 11 files changed, 213 insertions(+), 107 deletions(-)
 create mode 100644 src/components/business/Chat/hooks/useChat.ts
 delete mode 100644 src/components/business/Chat/types.ts
 create mode 100644 src/store/modules/history/helper.ts
 create mode 100644 src/typings/chat.d.ts

diff --git a/src/components/business/Chat/hooks/useChat.ts b/src/components/business/Chat/hooks/useChat.ts
new file mode 100644
index 0000000..f6ebd50
--- /dev/null
+++ b/src/components/business/Chat/hooks/useChat.ts
@@ -0,0 +1,30 @@
+import { useHistoryStore } from '@/store'
+
+export function useChat() {
+  const historyStore = useHistoryStore()
+
+  function addChat(message: string, args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions }) {
+    if (historyStore.historyChat.length === 0) {
+      historyStore.addHistory({
+        title: message,
+        isEdit: false,
+        data: [],
+      })
+      historyStore.chooseHistory(historyStore.historyChat.length - 1)
+    }
+
+    historyStore.addChat({
+      dateTime: new Date().toLocaleString(),
+      message,
+      reversal: args?.reversal ?? false,
+      error: args?.error ?? false,
+      options: args?.options ?? undefined,
+    })
+  }
+
+  function clearChat() {
+    historyStore.clearChat()
+  }
+
+  return { addChat, clearChat }
+}
diff --git a/src/components/business/Chat/index.vue b/src/components/business/Chat/index.vue
index 279ea44..c22942a 100644
--- a/src/components/business/Chat/index.vue
+++ b/src/components/business/Chat/index.vue
@@ -1,27 +1,26 @@
 <script setup lang='ts'>
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
-import type { ChatOptions, ChatProps } from './types'
 import { Message } from './components'
 import { Layout } from './layout'
+import { useChat } from './hooks/useChat'
 import { fetchChatAPI } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
+import { useHistoryStore } from '@/store'
+
+const ms = useMessage()
+
+const historyStore = useHistoryStore()
 
 const scrollRef = ref<HTMLDivElement>()
 
-const ms = useMessage()
+const { addChat, clearChat } = useChat()
 
 const prompt = ref('')
 const loading = ref(false)
 
-const list = ref<ChatProps[]>([])
-const chatList = computed(() => list.value.filter(item => (!item.reversal && !item.error)))
-
-function initChat() {
-  addMessage('Hi, I am ChatGPT, a chatbot based on GPT-3.')
-}
-
-onMounted(initChat)
+const list = computed<Chat.Chat[]>(() => historyStore.getCurrentChat)
+const chatList = computed<Chat.Chat[]>(() => list.value.filter(item => (!item.reversal && !item.error)))
 
 async function handleSubmit() {
   if (loading.value)
@@ -37,7 +36,7 @@ async function handleSubmit() {
   addMessage(message, { reversal: true })
   prompt.value = ''
 
-  let options: ChatOptions = {}
+  let options: Chat.ChatOptions = {}
   const lastContext = chatList.value[chatList.value.length - 1]?.options
 
   if (lastContext)
@@ -63,21 +62,14 @@ function handleEnter(event: KeyboardEvent) {
 
 function addMessage(
   message: string,
-  args?: { reversal?: boolean; error?: boolean; options?: ChatOptions },
+  args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions },
 ) {
-  list.value.push({
-    dateTime: new Date().toLocaleString(),
-    message,
-    reversal: args?.reversal ?? false,
-    error: args?.error ?? false,
-    options: args?.options ?? undefined,
-  })
+  addChat(message, args)
   nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
 
 function handleClear() {
-  list.value = []
-  setTimeout(initChat, 100)
+  clearChat()
 }
 </script>
 
@@ -96,8 +88,8 @@ function handleClear() {
       </main>
       <footer class="p-4">
         <div class="flex items-center justify-between space-x-2">
-          <HoverButton tooltip="Clear conversations" @click="handleClear">
-            <span class="text-xl text-[#4f555e]">
+          <HoverButton tooltip="Clear conversations">
+            <span class="text-xl text-[#4f555e]" @click="handleClear">
               <SvgIcon icon="ri:delete-bin-line" />
             </span>
           </HoverButton>
diff --git a/src/components/business/Chat/layout/sider/List.vue b/src/components/business/Chat/layout/sider/List.vue
index caf99a7..5e55079 100644
--- a/src/components/business/Chat/layout/sider/List.vue
+++ b/src/components/business/Chat/layout/sider/List.vue
@@ -1,50 +1,65 @@
 <script setup lang='ts'>
-import { NScrollbar } from 'naive-ui'
-import type { HistoryChatProps } from '../../types'
+import { ref } from 'vue'
+import { NInput, NScrollbar } from 'naive-ui'
 import { SvgIcon } from '@/components/common'
+import { useHistoryStore } from '@/store'
 
-interface Props {
-  data: HistoryChatProps[]
+const historyStore = useHistoryStore()
+
+const dataSources = ref(historyStore.historyChat)
+
+function handleSelect(index: number) {
+  historyStore.chooseHistory(index)
 }
 
-interface Emit {
-  (ev: 'delete', index: number): void
-  (ev: 'edit', index: number): void
+function handleEdit(index: number, isEdit: boolean) {
+  historyStore.editHistory(index, isEdit)
 }
 
-defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
-function handleEdit(index: number) {
-  emit('delete', index)
+function handleRemove(index: number) {
+  historyStore.removeHistory(index)
 }
 
-function handleDelete(index: number) {
-  emit('delete', index)
+function handleEnter(index: number, isEdit: boolean, event: KeyboardEvent) {
+  if (event.key === 'Enter')
+    handleEdit(index, isEdit)
 }
 </script>
 
 <template>
   <NScrollbar class="px-4">
     <div class="flex flex-col gap-2 text-sm">
-      <div v-for="(item, index) of data" :key="index">
+      <div v-for="(item, index) of dataSources" :key="index">
         <a
           class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
+          @click="handleSelect(index)"
         >
           <span>
             <SvgIcon icon="ri:message-3-line" />
           </span>
-          <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
-            <span>{{ item.title }}</span>
+          <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
+            <NInput
+              v-if="item.isEdit"
+              v-model:value="item.title"
+              size="tiny"
+              @keypress="handleEnter(index, false, $event)"
+            />
+            <span v-else>{{ item.title }}</span>
           </div>
           <div class="absolute z-10 flex visible right-1">
-            <button class="p-1">
-              <SvgIcon icon="ri:edit-line" @click="handleEdit(index)" />
-            </button>
-            <button class="p-1" @click="handleDelete(index)">
-              <SvgIcon icon="ri:delete-bin-line" />
-            </button>
+            <template v-if="item.isEdit">
+              <button class="p-1" @click="handleEdit(index, false)">
+                <SvgIcon icon="ri:save-line" />
+              </button>
+            </template>
+            <template v-else>
+              <button class="p-1">
+                <SvgIcon icon="ri:edit-line" @click="handleEdit(index, true)" />
+              </button>
+              <button class="p-1" @click="handleRemove(index)">
+                <SvgIcon icon="ri:delete-bin-line" />
+              </button>
+            </template>
           </div>
         </a>
       </div>
diff --git a/src/components/business/Chat/layout/sider/index.vue b/src/components/business/Chat/layout/sider/index.vue
index ee24c3e..3e248ed 100644
--- a/src/components/business/Chat/layout/sider/index.vue
+++ b/src/components/business/Chat/layout/sider/index.vue
@@ -1,33 +1,23 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
 import { NButton, NLayoutSider } from 'naive-ui'
-import type { HistoryChatProps } from '../../types'
 import List from './List.vue'
 import Footer from './Footer.vue'
-import { useAppStore } from '@/store'
+import { useAppStore, useHistoryStore } from '@/store'
 
 const appStore = useAppStore()
+const historyStore = useHistoryStore()
 
 const collapsed = ref(appStore.siderCollapsed ?? false)
 
-const history = ref<HistoryChatProps[]>([])
-
 function handleAdd() {
-  history.value.push({
-    title: 'New chat',
-    edit: false,
+  historyStore.addHistory({
+    title: '',
+    isEdit: false,
     data: [],
   })
 }
 
-function handleEdit(index: number) {
-  history.value[index].edit = true
-}
-
-function handleDelete(index: number) {
-  history.value.splice(index, 1)
-}
-
 function handleCollapsed() {
   collapsed.value = !collapsed.value
   appStore.setSiderCollapsed(collapsed.value)
@@ -51,7 +41,7 @@ function handleCollapsed() {
             New chat
           </NButton>
         </div>
-        <List :data="history" @edit="handleEdit" @delete="handleDelete" />
+        <List />
       </main>
       <Footer />
     </div>
diff --git a/src/components/business/Chat/types.ts b/src/components/business/Chat/types.ts
deleted file mode 100644
index 1201899..0000000
--- a/src/components/business/Chat/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export interface ChatOptions {
-  conversationId?: string
-  parentMessageId?: string
-}
-
-export interface ChatProps {
-  dateTime: string
-  message: string
-  reversal?: boolean
-  error?: boolean
-  options?: ChatOptions
-}
-
-export interface HistoryChatProps {
-  title: string
-  edit: boolean
-  data: ChatProps[]
-}
diff --git a/src/store/modules/app/helper.ts b/src/store/modules/app/helper.ts
index 55f9b22..7f71ff7 100644
--- a/src/store/modules/app/helper.ts
+++ b/src/store/modules/app/helper.ts
@@ -1,4 +1,6 @@
-import { ls } from '@/utils/storage'
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'appSetting'
 
 export interface AppState {
   siderCollapsed: boolean
@@ -8,11 +10,11 @@ export function defaultSetting() {
   return { siderCollapsed: false }
 }
 
-export function getAppSetting() {
-  const localSetting: AppState = ls.get('appSetting')
+export function getLocalSetting() {
+  const localSetting: AppState | undefined = ss.get(LOCAL_NAME)
   return localSetting ?? defaultSetting()
 }
 
-export function setAppSetting(setting: AppState) {
-  ls.set('appSetting', setting)
+export function setLocalSetting(setting: AppState) {
+  ss.set(LOCAL_NAME, setting)
 }
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index 8935e67..bbe2829 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,13 +1,13 @@
 import { defineStore } from 'pinia'
 import type { AppState } from './helper'
-import { getAppSetting, setAppSetting } from './helper'
+import { getLocalSetting, setLocalSetting } from './helper'
 
 export const useAppStore = defineStore('app-store', {
-  state: (): AppState => getAppSetting(),
+  state: (): AppState => getLocalSetting(),
   actions: {
     setSiderCollapsed(collapsed: boolean) {
       this.siderCollapsed = collapsed
-      setAppSetting(this.$state)
+      setLocalSetting(this.$state)
     },
     toggleSiderCollapse() {
       this.setSiderCollapsed(!this.siderCollapsed)
diff --git a/src/store/modules/history/helper.ts b/src/store/modules/history/helper.ts
new file mode 100644
index 0000000..635ba9c
--- /dev/null
+++ b/src/store/modules/history/helper.ts
@@ -0,0 +1,21 @@
+import { ss } from '@/utils/storage'
+
+const LOCAL_NAME = 'historyChat'
+
+export interface HistoryState {
+  historyChat: Chat.HistoryChat[]
+  active: number | null
+}
+
+export function defaultSetting() {
+  return { historyChat: [], active: null }
+}
+
+export function getLocalHistory() {
+  const localSetting: HistoryState | undefined = ss.get(LOCAL_NAME)
+  return localSetting ?? defaultSetting()
+}
+
+export function setLocalHistory(data: HistoryState) {
+  ss.set(LOCAL_NAME, data)
+}
diff --git a/src/store/modules/history/index.ts b/src/store/modules/history/index.ts
index 3f1c2dd..5b6df0f 100644
--- a/src/store/modules/history/index.ts
+++ b/src/store/modules/history/index.ts
@@ -1,12 +1,55 @@
 import { defineStore } from 'pinia'
-
-interface HistoryState {
-  list: any[]
-}
+import type { HistoryState } from './helper'
+import { getLocalHistory, setLocalHistory } from './helper'
 
 export const useHistoryStore = defineStore('history-store', {
-  state: (): HistoryState => ({
-    list: [],
-  }),
-  actions: {},
+  state: (): HistoryState => getLocalHistory(),
+  getters: {
+    getCurrentChat(state): Chat.Chat[] {
+      if (state.historyChat.length === 0)
+        return []
+
+      if (state.active === null)
+        state.active = state.historyChat.length - 1
+
+      return state.historyChat[state.active].data
+    },
+  },
+  actions: {
+    addChat(data: Chat.Chat) {
+      if (this.active !== null) {
+        this.historyChat[this.active].data.push(data)
+        this.active = this.historyChat.length - 1
+        setLocalHistory(this.$state)
+      }
+    },
+
+    clearChat() {
+      if (this.active !== null) {
+        this.historyChat[this.active].data = []
+        setLocalHistory(this.$state)
+      }
+    },
+
+    chooseHistory(index: number) {
+      this.active = index
+      setLocalHistory(this.$state)
+    },
+
+    addHistory(data: Chat.HistoryChat) {
+      this.historyChat.push(data)
+      this.active = this.historyChat.length - 1
+      setLocalHistory(this.$state)
+    },
+
+    editHistory(index: number, isEdit: boolean) {
+      this.historyChat[index].isEdit = isEdit
+      setLocalHistory(this.$state)
+    },
+
+    removeHistory(index: number) {
+      this.historyChat.splice(index, 1)
+      setLocalHistory(this.$state)
+    },
+  },
 })
diff --git a/src/typings/chat.d.ts b/src/typings/chat.d.ts
new file mode 100644
index 0000000..2a82b0f
--- /dev/null
+++ b/src/typings/chat.d.ts
@@ -0,0 +1,20 @@
+declare namespace Chat{
+	 interface ChatOptions {
+		conversationId?: string
+		parentMessageId?: string
+	}
+
+	 interface Chat {
+		dateTime: string
+		message: string
+		reversal?: boolean
+		error?: boolean
+		options?: ChatOptions
+	}
+
+	 interface HistoryChat {
+		title: string
+		isEdit: boolean
+		data: Chat[]
+	}
+}
diff --git a/src/utils/storage/local.ts b/src/utils/storage/local.ts
index fabfd23..215d22c 100644
--- a/src/utils/storage/local.ts
+++ b/src/utils/storage/local.ts
@@ -1,19 +1,28 @@
 import { deCrypto, enCrypto } from '../crypto'
 
 interface StorageData<T = any> {
-  value: T
+  data: T
   expire: number | null
 }
 
-function createLocalStorage() {
-  const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7 // 7 days
+export function createLocalStorage(options?: { expire?: number | null; crypto?: boolean }) {
+  const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7
 
-  function set<T = any>(key: string, value: T, expire: number | null = DEFAULT_CACHE_TIME) {
+  const { expire, crypto } = Object.assign(
+    {
+      expire: DEFAULT_CACHE_TIME,
+      crypto: true,
+    },
+    options,
+  )
+
+  function set<T = any>(key: string, data: T) {
     const storageData: StorageData<T> = {
-      value,
+      data,
       expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
     }
-    const json = enCrypto(storageData)
+
+    const json = crypto ? enCrypto(storageData) : JSON.stringify(storageData)
     window.localStorage.setItem(key, json)
   }
 
@@ -23,16 +32,16 @@ function createLocalStorage() {
       let storageData: StorageData | null = null
 
       try {
-        storageData = deCrypto(json)
+        storageData = crypto ? deCrypto(json) : JSON.parse(json)
       }
       catch {
         // Prevent failure
       }
 
       if (storageData) {
-        const { value, expire } = storageData
+        const { data, expire } = storageData
         if (expire === null || expire >= Date.now())
-          return value
+          return data
       }
 
       remove(key)
@@ -57,3 +66,5 @@ function createLocalStorage() {
 }
 
 export const ls = createLocalStorage()
+
+export const ss = createLocalStorage({ expire: null, crypto: false })

From 701ef0e6e1d642dc58a96de4e4fa56f98b980d55 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 15:37:18 +0800
Subject: [PATCH 5/9] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E9=83=A8?=
 =?UTF-8?q?=E4=BB=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/business/Chat/hooks/useChat.ts |  9 ----
 .../business/Chat/layout/sider/List.vue       |  6 +--
 src/store/modules/history/index.ts            | 43 ++++++++++++-------
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/business/Chat/hooks/useChat.ts b/src/components/business/Chat/hooks/useChat.ts
index f6ebd50..270fe5e 100644
--- a/src/components/business/Chat/hooks/useChat.ts
+++ b/src/components/business/Chat/hooks/useChat.ts
@@ -4,15 +4,6 @@ export function useChat() {
   const historyStore = useHistoryStore()
 
   function addChat(message: string, args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions }) {
-    if (historyStore.historyChat.length === 0) {
-      historyStore.addHistory({
-        title: message,
-        isEdit: false,
-        data: [],
-      })
-      historyStore.chooseHistory(historyStore.historyChat.length - 1)
-    }
-
     historyStore.addChat({
       dateTime: new Date().toLocaleString(),
       message,
diff --git a/src/components/business/Chat/layout/sider/List.vue b/src/components/business/Chat/layout/sider/List.vue
index 5e55079..1a4e797 100644
--- a/src/components/business/Chat/layout/sider/List.vue
+++ b/src/components/business/Chat/layout/sider/List.vue
@@ -34,14 +34,12 @@ function handleEnter(index: number, isEdit: boolean, event: KeyboardEvent) {
           class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
           @click="handleSelect(index)"
         >
-          <span>
+          <span :class="[{ 'text-[#4b9e5f]': historyStore.active === index }]">
             <SvgIcon icon="ri:message-3-line" />
           </span>
           <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
             <NInput
-              v-if="item.isEdit"
-              v-model:value="item.title"
-              size="tiny"
+              v-if="item.isEdit" v-model:value="item.title" size="tiny"
               @keypress="handleEnter(index, false, $event)"
             />
             <span v-else>{{ item.title }}</span>
diff --git a/src/store/modules/history/index.ts b/src/store/modules/history/index.ts
index 5b6df0f..24ea21b 100644
--- a/src/store/modules/history/index.ts
+++ b/src/store/modules/history/index.ts
@@ -6,22 +6,27 @@ export const useHistoryStore = defineStore('history-store', {
   state: (): HistoryState => getLocalHistory(),
   getters: {
     getCurrentChat(state): Chat.Chat[] {
-      if (state.historyChat.length === 0)
-        return []
-
-      if (state.active === null)
-        state.active = state.historyChat.length - 1
-
-      return state.historyChat[state.active].data
+      if (state.historyChat.length) {
+        if (state.active === null || state.active >= state.historyChat.length || state.active < 0)
+          state.active = 0
+        return state.historyChat[state.active].data ?? []
+      }
+      state.active = null
+      return []
     },
   },
   actions: {
     addChat(data: Chat.Chat) {
-      if (this.active !== null) {
-        this.historyChat[this.active].data.push(data)
+      if (this.active === null) {
+        this.historyChat.push({ title: data.message, isEdit: false, data: [data] })
         this.active = this.historyChat.length - 1
-        setLocalHistory(this.$state)
       }
+      else {
+        if (this.historyChat[this.active].title === '')
+          this.historyChat[this.active].title = data.message
+        this.historyChat[this.active].data.push(data)
+      }
+      setLocalHistory(this.$state)
     },
 
     clearChat() {
@@ -31,11 +36,6 @@ export const useHistoryStore = defineStore('history-store', {
       }
     },
 
-    chooseHistory(index: number) {
-      this.active = index
-      setLocalHistory(this.$state)
-    },
-
     addHistory(data: Chat.HistoryChat) {
       this.historyChat.push(data)
       this.active = this.historyChat.length - 1
@@ -49,6 +49,19 @@ export const useHistoryStore = defineStore('history-store', {
 
     removeHistory(index: number) {
       this.historyChat.splice(index, 1)
+      if (this.active === index) {
+        if (this.historyChat.length === 0)
+          this.active = null
+        else if (this.active === this.historyChat.length)
+          this.active--
+        else
+          this.active = 0
+      }
+      setLocalHistory(this.$state)
+    },
+
+    chooseHistory(index: number) {
+      this.active = index
       setLocalHistory(this.$state)
     },
   },

From cf8e2dd7b655db45111f9508b434442436801a11 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 15:56:44 +0800
Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=A4=9A?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/business/Chat/hooks/useChat.ts | 23 ++++++++++++-------
 src/components/business/Chat/index.vue        | 19 +++++++++++++--
 src/store/modules/history/index.ts            |  9 ++++----
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/components/business/Chat/hooks/useChat.ts b/src/components/business/Chat/hooks/useChat.ts
index 270fe5e..7e7ea5e 100644
--- a/src/components/business/Chat/hooks/useChat.ts
+++ b/src/components/business/Chat/hooks/useChat.ts
@@ -3,14 +3,21 @@ import { useHistoryStore } from '@/store'
 export function useChat() {
   const historyStore = useHistoryStore()
 
-  function addChat(message: string, args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions }) {
-    historyStore.addChat({
-      dateTime: new Date().toLocaleString(),
-      message,
-      reversal: args?.reversal ?? false,
-      error: args?.error ?? false,
-      options: args?.options ?? undefined,
-    })
+  function addChat(
+    message: string,
+    args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions },
+    uuid?: number | null,
+  ) {
+    historyStore.addChat(
+      {
+        dateTime: new Date().toLocaleString(),
+        message,
+        reversal: args?.reversal ?? false,
+        error: args?.error ?? false,
+        options: args?.options ?? undefined,
+      },
+      uuid,
+    )
   }
 
   function clearChat() {
diff --git a/src/components/business/Chat/index.vue b/src/components/business/Chat/index.vue
index c22942a..dfdceaf 100644
--- a/src/components/business/Chat/index.vue
+++ b/src/components/business/Chat/index.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
 import { Message } from './components'
 import { Layout } from './layout'
@@ -7,6 +7,7 @@ import { useChat } from './hooks/useChat'
 import { fetchChatAPI } from '@/api'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useHistoryStore } from '@/store'
+import { isNumber } from '@/utils/is'
 
 const ms = useMessage()
 
@@ -19,6 +20,8 @@ const { addChat, clearChat } = useChat()
 const prompt = ref('')
 const loading = ref(false)
 
+const currentActive = computed(() => historyStore.active)
+
 const list = computed<Chat.Chat[]>(() => historyStore.getCurrentChat)
 const chatList = computed<Chat.Chat[]>(() => list.value.filter(item => (!item.reversal && !item.error)))
 
@@ -63,14 +66,26 @@ function handleEnter(event: KeyboardEvent) {
 function addMessage(
   message: string,
   args?: { reversal?: boolean; error?: boolean; options?: Chat.ChatOptions },
+  uuid?: number | null,
 ) {
-  addChat(message, args)
+  addChat(message, args, uuid)
   nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
 
 function handleClear() {
   clearChat()
 }
+
+watch(
+  currentActive,
+  (active: number | null) => {
+    if (isNumber(active)) {
+      loading.value = false
+      nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
diff --git a/src/store/modules/history/index.ts b/src/store/modules/history/index.ts
index 24ea21b..29401b6 100644
--- a/src/store/modules/history/index.ts
+++ b/src/store/modules/history/index.ts
@@ -16,15 +16,16 @@ export const useHistoryStore = defineStore('history-store', {
     },
   },
   actions: {
-    addChat(data: Chat.Chat) {
+    addChat(data: Chat.Chat, uuid: number | null = null) {
       if (this.active === null) {
         this.historyChat.push({ title: data.message, isEdit: false, data: [data] })
         this.active = this.historyChat.length - 1
       }
       else {
-        if (this.historyChat[this.active].title === '')
-          this.historyChat[this.active].title = data.message
-        this.historyChat[this.active].data.push(data)
+        const active = uuid !== null ? uuid : this.active
+        if (this.historyChat[active].title === '')
+          this.historyChat[active].title = data.message
+        this.historyChat[active].data.push(data)
       }
       setLocalHistory(this.$state)
     },

From d2ae2c4f54da39e468022c41c49b2b6c517fb6b9 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 16:21:41 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E4=BC=9A=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/business/Chat/layout/sider/List.vue  |  5 +++--
 src/components/business/Chat/layout/sider/index.vue |  2 +-
 src/store/modules/history/index.ts                  | 11 +++++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/business/Chat/layout/sider/List.vue b/src/components/business/Chat/layout/sider/List.vue
index 1a4e797..000ff96 100644
--- a/src/components/business/Chat/layout/sider/List.vue
+++ b/src/components/business/Chat/layout/sider/List.vue
@@ -31,10 +31,11 @@ function handleEnter(index: number, isEdit: boolean, event: KeyboardEvent) {
     <div class="flex flex-col gap-2 text-sm">
       <div v-for="(item, index) of dataSources" :key="index">
         <a
-          class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
+          class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer pr-14 hover:bg-neutral-100 group"
+          :class="historyStore.active === index && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]']"
           @click="handleSelect(index)"
         >
-          <span :class="[{ 'text-[#4b9e5f]': historyStore.active === index }]">
+          <span>
             <SvgIcon icon="ri:message-3-line" />
           </span>
           <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
diff --git a/src/components/business/Chat/layout/sider/index.vue b/src/components/business/Chat/layout/sider/index.vue
index 3e248ed..b332900 100644
--- a/src/components/business/Chat/layout/sider/index.vue
+++ b/src/components/business/Chat/layout/sider/index.vue
@@ -12,7 +12,7 @@ const collapsed = ref(appStore.siderCollapsed ?? false)
 
 function handleAdd() {
   historyStore.addHistory({
-    title: '',
+    title: 'New Chat',
     isEdit: false,
     data: [],
   })
diff --git a/src/store/modules/history/index.ts b/src/store/modules/history/index.ts
index 29401b6..b2907f8 100644
--- a/src/store/modules/history/index.ts
+++ b/src/store/modules/history/index.ts
@@ -5,14 +5,17 @@ import { getLocalHistory, setLocalHistory } from './helper'
 export const useHistoryStore = defineStore('history-store', {
   state: (): HistoryState => getLocalHistory(),
   getters: {
-    getCurrentChat(state): Chat.Chat[] {
+    getCurrentHistory(state): Chat.HistoryChat {
       if (state.historyChat.length) {
         if (state.active === null || state.active >= state.historyChat.length || state.active < 0)
           state.active = 0
-        return state.historyChat[state.active].data ?? []
+        return state.historyChat[state.active] ?? { title: '', isEdit: false, data: [] }
       }
       state.active = null
-      return []
+      return { title: '', isEdit: false, data: [] }
+    },
+    getCurrentChat(): Chat.Chat[] {
+      return this.getCurrentHistory.data ?? []
     },
   },
   actions: {
@@ -23,7 +26,7 @@ export const useHistoryStore = defineStore('history-store', {
       }
       else {
         const active = uuid !== null ? uuid : this.active
-        if (this.historyChat[active].title === '')
+        if (this.historyChat[active].title === 'New Chat')
           this.historyChat[active].title = data.message
         this.historyChat[active].data.push(data)
       }

From 4458e744ccf757f2bfbfd4a16432ffe44efbc54e Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 16:57:11 +0800
Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8F=96=E6=B6=88=E4=B8=8A=E6=AC=A1=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                       | 11 ++++----
 src/components/business/Chat/index.vue | 35 ++++++++++++++++++--------
 src/store/modules/history/index.ts     |  3 ++-
 src/utils/request/index.ts             | 15 ++++++-----
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index e0e87d6..4f997d1 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,17 +1,16 @@
+import type { GenericAbortSignal } from 'axios'
 import { post } from '@/utils/request'
 
+export const controller = new AbortController()
+
 export function fetchChatAPI<T = any>(
   prompt: string,
   options?: { conversationId?: string; parentMessageId?: string },
+  signal?: GenericAbortSignal,
 ) {
   return post<T>({
     url: '/chat',
     data: { prompt, options },
-  })
-}
-
-export function clearConversations<T = any>() {
-  return post<T>({
-    url: '/clear',
+    signal,
   })
 }
diff --git a/src/components/business/Chat/index.vue b/src/components/business/Chat/index.vue
index dfdceaf..85d3e12 100644
--- a/src/components/business/Chat/index.vue
+++ b/src/components/business/Chat/index.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
 import { Message } from './components'
 import { Layout } from './layout'
@@ -9,13 +9,15 @@ import { HoverButton, SvgIcon } from '@/components/common'
 import { useHistoryStore } from '@/store'
 import { isNumber } from '@/utils/is'
 
+let controller = new AbortController()
+
 const ms = useMessage()
 
 const historyStore = useHistoryStore()
 
 const scrollRef = ref<HTMLDivElement>()
 
-const { addChat, clearChat } = useChat()
+const { addChat, clearChat: handleClear } = useChat()
 
 const prompt = ref('')
 const loading = ref(false)
@@ -47,11 +49,12 @@ async function handleSubmit() {
 
   try {
     loading.value = true
-    const { data } = await fetchChatAPI(message, options)
+    const { data } = await fetchChatAPI(message, options, controller.signal)
     addMessage(data?.text ?? '', { options: { conversationId: data.conversationId, parentMessageId: data.id } })
   }
   catch (error: any) {
-    addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, { error: true })
+    if (error.message !== 'cancelled')
+      addMessage(`Error: ${error.message ?? 'Request failed, please try again later.'}`, { error: true })
   }
   finally {
     loading.value = false
@@ -69,22 +72,32 @@ function addMessage(
   uuid?: number | null,
 ) {
   addChat(message, args, uuid)
+  scrollToBottom()
+}
+
+function scrollToBottom() {
   nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
 }
 
-function handleClear() {
-  clearChat()
+function handleCancel() {
+  // 取消之后一定要重新赋值，否则会报错
+  controller.abort()
+  controller = new AbortController()
+  loading.value = false
 }
 
+onMounted(() => {
+  scrollToBottom()
+})
+
 watch(
   currentActive,
-  (active: number | null) => {
+  (active) => {
     if (isNumber(active)) {
-      loading.value = false
-      nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
+      handleCancel()
+      scrollToBottom()
     }
   },
-  { immediate: true },
 )
 </script>
 
@@ -109,7 +122,7 @@ watch(
             </span>
           </HoverButton>
           <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
-          <NButton type="primary" :loading="loading" @click="handleSubmit">
+          <NButton type="primary" :loading="loading" @click="handleCancel">
             <template #icon>
               <SvgIcon icon="ri:send-plane-fill" />
             </template>
diff --git a/src/store/modules/history/index.ts b/src/store/modules/history/index.ts
index b2907f8..b9ceb5e 100644
--- a/src/store/modules/history/index.ts
+++ b/src/store/modules/history/index.ts
@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
 import type { HistoryState } from './helper'
 import { getLocalHistory, setLocalHistory } from './helper'
-
 export const useHistoryStore = defineStore('history-store', {
   state: (): HistoryState => getLocalHistory(),
   getters: {
@@ -65,6 +64,8 @@ export const useHistoryStore = defineStore('history-store', {
     },
 
     chooseHistory(index: number) {
+      if (this.active === index)
+        return
       this.active = index
       setLocalHistory(this.$state)
     },
diff --git a/src/utils/request/index.ts b/src/utils/request/index.ts
index cae8592..2251233 100644
--- a/src/utils/request/index.ts
+++ b/src/utils/request/index.ts
@@ -1,4 +1,4 @@
-import type { AxiosResponse } from 'axios'
+import type { AxiosResponse, GenericAbortSignal } from 'axios'
 import request from './axios'
 
 export interface HttpOption {
@@ -6,6 +6,7 @@ export interface HttpOption {
   data?: any
   method?: string
   headers?: any
+  signal?: GenericAbortSignal
   beforeRequest?: () => void
   afterRequest?: () => void
 }
@@ -20,7 +21,7 @@ export interface Response<T = any> {
   status: string
 }
 
-function http<T = any>({ url, data, method, headers, beforeRequest, afterRequest }: HttpOption) {
+function http<T = any>({ url, data, method, headers, signal, beforeRequest, afterRequest }: HttpOption) {
   const successHandler = (res: AxiosResponse<Response<T>>) => {
     if (res.data.status === 'Success')
       return res.data
@@ -40,30 +41,32 @@ function http<T = any>({ url, data, method, headers, beforeRequest, afterRequest
   const params = Object.assign(typeof data === 'function' ? data() : data ?? {}, {})
 
   return method === 'GET'
-    ? request.get(url, { params }).then(successHandler, failHandler)
-    : request.post(url, params, { headers }).then(successHandler, failHandler)
+    ? request.get(url, { params, signal }).then(successHandler, failHandler)
+    : request.post(url, params, { headers, signal }).then(successHandler, failHandler)
 }
 
 export function get<T = any>(
-  { url, data, method = 'GET', beforeRequest, afterRequest }: HttpOption,
+  { url, data, method = 'GET', signal, beforeRequest, afterRequest }: HttpOption,
 ): Promise<Response<T>> {
   return http<T>({
     url,
     method,
     data,
+    signal,
     beforeRequest,
     afterRequest,
   })
 }
 
 export function post<T = any>(
-  { url, data, method = 'POST', headers, beforeRequest, afterRequest }: HttpOption,
+  { url, data, method = 'POST', headers, signal, beforeRequest, afterRequest }: HttpOption,
 ): Promise<Response<T>> {
   return http<T>({
     url,
     method,
     data,
     headers,
+    signal,
     beforeRequest,
     afterRequest,
   })

From da75ca944cc0dc286ed761e562cf424e8ea3c29e Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Tue, 14 Feb 2023 16:58:24 +0800
Subject: [PATCH 9/9] chore: version 2.2.0

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fcb3845..e417a8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## v2.2.0
+
+`2023-02-14`
+### Feature
+- 会话和上下文本地储存
+- 侧边栏本地储存
+
 ## v2.1.0
 
 `2023-02-14`
diff --git a/package.json b/package.json
index 3fd7979..4f5830a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",