feat: 增加带格式的复制 (#182)
* feat: 增加带格式的复制 * feat: 移除前端超时设定 * chore: update deps * feat: 添加权限页面 * feat: 设定页面优化 * feat: 更新 chatgpt 以支持 `gpt-3.5-turbo-0301` * chore: version 2.9.0main
Redon
2 years ago
committed by
GitHub
parent
42e320fe35
commit
32ebbec8ad
@ -1 +0,0 @@
|
||||
export { }
|
||||
@ -0,0 +1,144 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { NButton, NInput, useMessage } from 'naive-ui'
|
||||
import type { Language, Theme } from '@/store/modules/app/helper'
|
||||
import { SvgIcon } from '@/components/common'
|
||||
import { useAppStore, useUserStore } from '@/store'
|
||||
import type { UserInfo } from '@/store/modules/user/helper'
|
||||
|
||||
interface Emit {
|
||||
(event: 'update'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const ms = useMessage()
|
||||
|
||||
const theme = computed(() => appStore.theme)
|
||||
|
||||
const userInfo = computed(() => userStore.userInfo)
|
||||
|
||||
const avatar = ref(userInfo.value.avatar ?? '')
|
||||
|
||||
const name = ref(userInfo.value.name ?? '')
|
||||
|
||||
const description = ref(userInfo.value.description ?? '')
|
||||
|
||||
const language = computed({
|
||||
get() {
|
||||
return appStore.language
|
||||
},
|
||||
set(value: Language) {
|
||||
appStore.setLanguage(value)
|
||||
},
|
||||
})
|
||||
|
||||
const themeOptions: { label: string; key: Theme; icon: string }[] = [
|
||||
{
|
||||
label: 'Auto',
|
||||
key: 'auto',
|
||||
icon: 'ri:contrast-line',
|
||||
},
|
||||
{
|
||||
label: 'Light',
|
||||
key: 'light',
|
||||
icon: 'ri:sun-foggy-line',
|
||||
},
|
||||
{
|
||||
label: 'Dark',
|
||||
key: 'dark',
|
||||
icon: 'ri:moon-foggy-line',
|
||||
},
|
||||
]
|
||||
|
||||
const languageOptions: { label: string; key: Language; value: Language }[] = [
|
||||
{ label: '中文', key: 'zh-CN', value: 'zh-CN' },
|
||||
{ label: 'English', key: 'en-US', value: 'en-US' },
|
||||
]
|
||||
|
||||
function updateUserInfo(options: Partial<UserInfo>) {
|
||||
userStore.updateUserInfo(options)
|
||||
ms.success('Update success')
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
userStore.resetUserInfo()
|
||||
ms.success('Reset success')
|
||||
emit('update')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 space-y-5 min-h-[200px]">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex-shrink-0 w-[100px]">Avatar Link</span>
|
||||
<div class="flex-1">
|
||||
<NInput v-model:value="avatar" placeholder="" />
|
||||
</div>
|
||||
<NButton size="tiny" text type="primary" @click="updateUserInfo({ avatar })">
|
||||
Save
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex-shrink-0 w-[100px]">Name</span>
|
||||
<div class="w-[200px]">
|
||||
<NInput v-model:value="name" placeholder="" />
|
||||
</div>
|
||||
<NButton size="tiny" text type="primary" @click="updateUserInfo({ name })">
|
||||
Save
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex-shrink-0 w-[100px]">Description</span>
|
||||
<div class="flex-1">
|
||||
<NInput v-model:value="description" placeholder="" />
|
||||
</div>
|
||||
<NButton size="tiny" text type="primary" @click="updateUserInfo({ description })">
|
||||
Save
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex-shrink-0 w-[100px]">Reset UserInfo</span>
|
||||
<NButton text type="primary" @click="handleReset">
|
||||
Reset
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex-shrink-0 w-[100px]">Theme</span>
|
||||
<div class="flex items-center space-x-4">
|
||||
<template v-for="item of themeOptions" :key="item.key">
|
||||
<a
|
||||
class="flex items-center justify-center h-8 px-4 border rounded-md cursor-pointer dark:border-neutral-700"
|
||||
:class="item.key === theme && ['bg-[#4ca85e]', 'border-[#4ca85e]', 'text-white']"
|
||||
@click="appStore.setTheme(item.key)"
|
||||
>
|
||||
<span class="text-xl">
|
||||
<SvgIcon :icon="item.icon" />
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="flex-shrink-0 w-[100px]">Language</span>
|
||||
<div class="flex items-center space-x-4">
|
||||
<template v-for="item of languageOptions" :key="item.key">
|
||||
<a
|
||||
class="flex items-center justify-center h-8 px-4 border rounded-md cursor-pointer dark:border-neutral-700"
|
||||
:class="item.key === language && ['bg-[#4ca85e]', 'border-[#4ca85e]', 'text-white']"
|
||||
@click="appStore.setLanguage(item.key)"
|
||||
>
|
||||
<span class="text-sm">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,16 @@
|
||||
import { computed } from 'vue'
|
||||
import { enUS, zhCN } from 'naive-ui'
|
||||
import { useAppStore } from '@/store'
|
||||
|
||||
export function useLanguage() {
|
||||
const appStore = useAppStore()
|
||||
|
||||
const language = computed(() => {
|
||||
if (appStore.language === 'zh-CN')
|
||||
return zhCN
|
||||
else
|
||||
return enUS
|
||||
})
|
||||
|
||||
return { language }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
@ -1,2 +1,3 @@
|
||||
export * from './app'
|
||||
export * from './chat'
|
||||
export * from './user'
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
import { ss } from '@/utils/storage'
|
||||
|
||||
const LOCAL_NAME = 'userStorage'
|
||||
|
||||
export interface UserInfo {
|
||||
avatar: string
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface UserState {
|
||||
userInfo: UserInfo
|
||||
}
|
||||
|
||||
export function defaultSetting(): UserState {
|
||||
return {
|
||||
userInfo: {
|
||||
avatar: 'https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg',
|
||||
name: 'ChenZhaoYu',
|
||||
description: 'Star on <a href="https://github.com/Chanzhaoyu/chatgpt-bot" class="text-blue-500" target="_blank" >Github</a>',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function getLocalState(): UserState {
|
||||
const localSetting: UserState | undefined = ss.get(LOCAL_NAME)
|
||||
return { ...defaultSetting(), ...localSetting }
|
||||
}
|
||||
|
||||
export function setLocalState(setting: UserState): void {
|
||||
ss.set(LOCAL_NAME, setting)
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { UserInfo, UserState } from './helper'
|
||||
import { defaultSetting, getLocalState, setLocalState } from './helper'
|
||||
|
||||
export const useUserStore = defineStore('user-store', {
|
||||
state: (): UserState => getLocalState(),
|
||||
actions: {
|
||||
updateUserInfo(userInfo: Partial<UserInfo>) {
|
||||
this.userInfo = { ...this.userInfo, ...userInfo }
|
||||
this.recordState()
|
||||
},
|
||||
|
||||
resetUserInfo() {
|
||||
this.userInfo = { ...defaultSetting().userInfo }
|
||||
this.recordState()
|
||||
},
|
||||
|
||||
recordState() {
|
||||
setLocalState(this.$state)
|
||||
},
|
||||
},
|
||||
})
|
||||
@ -1,61 +1,22 @@
|
||||
<script setup lang='ts'>
|
||||
import { computed, ref } from 'vue'
|
||||
import { NDropdown } from 'naive-ui'
|
||||
import { HoverButton, Setting, SvgIcon, UserAvatar } from '@/components/common'
|
||||
import { useAppStore } from '@/store'
|
||||
import { useIconRender } from '@/hooks/useIconRender'
|
||||
import { defineAsyncComponent, ref } from 'vue'
|
||||
import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const { iconRender } = useIconRender()
|
||||
const Setting = defineAsyncComponent(() => import('@/components/common/Setting/index.vue'))
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
const theme = computed(() => appStore.theme)
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: 'Dark',
|
||||
key: 'dark',
|
||||
icon: iconRender({ icon: 'ri:moon-foggy-line' }),
|
||||
},
|
||||
{
|
||||
label: 'Light',
|
||||
key: 'light',
|
||||
icon: iconRender({ icon: 'ri:sun-foggy-line' }),
|
||||
},
|
||||
{
|
||||
label: 'Auto',
|
||||
key: 'auto',
|
||||
icon: iconRender({ icon: 'ri:contrast-line' }),
|
||||
},
|
||||
]
|
||||
|
||||
function handleThemeChange(key: 'light' | 'dark' | 'auto') {
|
||||
appStore.setTheme(key)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
|
||||
<UserAvatar />
|
||||
|
||||
<NDropdown :options="options" placement="top" trigger="click" @select="handleThemeChange">
|
||||
<HoverButton>
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon v-if="theme === 'dark'" icon="ri:moon-foggy-line" />
|
||||
<SvgIcon v-if="theme === 'light'" icon="ri:sun-foggy-line" />
|
||||
<SvgIcon v-if="theme === 'auto'" icon="ri:contrast-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
</NDropdown>
|
||||
|
||||
<HoverButton tooltip="Setting" @click="show = true">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:settings-4-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
|
||||
<Setting v-model:visible="show" />
|
||||
<Setting v-if="show" v-model:visible="show" />
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
<script lang="ts" setup>
|
||||
import { NButton } from 'naive-ui'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function goHome() {
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full">
|
||||
<div class="px-4 m-auto space-y-4 text-center max-[400px]">
|
||||
<h1 class="text-4xl text-slate-800 dark:text-neutral-200">
|
||||
No permission
|
||||
</h1>
|
||||
<p class="text-base text-slate-500 dark:text-neutral-400">
|
||||
The page you're trying access has restricted access.
|
||||
Please refer to your system administrator
|
||||
</p>
|
||||
<div class="flex items-center justify-center text-center">
|
||||
<div class="w-[300px]">
|
||||
<div class="w-[300px]">
|
||||
<img src="../../../icons/403.svg" alt="404">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NButton type="primary" @click="goHome">
|
||||
Go to Home
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue