chore: version 2.7.3 (#120)
* fix: 用户输入也被渲染的问题 (#117) * fix: 用户输入不转换 * feat: 基础深色模式适配 * feat: 主题模式跟随系统 * feat: 深色适配补漏 * chore: version 2.7.3
This commit is contained in:
Redon
GitHub
parent
abbdcf9c51
commit
cc91e95eed
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -61,6 +61,12 @@
|
|||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #121212;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loading-wrap">
|
||||
<div class="balls">
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ specifiers:
|
|||
axios: ^1.3.3
|
||||
crypto-js: ^4.1.1
|
||||
eslint: ^8.34.0
|
||||
github-markdown-css: ^5.2.0
|
||||
highlight.js: ^11.7.0
|
||||
husky: ^8.0.3
|
||||
less: ^4.1.3
|
||||
|
|
@ -35,7 +34,6 @@ specifiers:
|
|||
|
||||
dependencies:
|
||||
'@vueuse/core': 9.13.0_vue@3.2.47
|
||||
github-markdown-css: 5.2.0
|
||||
highlight.js: 11.7.0
|
||||
marked: 4.2.12
|
||||
naive-ui: 2.34.3_vue@3.2.47
|
||||
|
|
@ -2526,10 +2524,6 @@ packages:
|
|||
through2: 4.0.2
|
||||
dev: true
|
||||
|
||||
/github-markdown-css/5.2.0:
|
||||
resolution: {integrity: sha512-hq5RaCInSUZ48bImOZpkppW2/MT44StRgsbsZ8YA4vJFwLKB/Vo3k7R2t+pUGqO+ThG0QDMi96TewV/B3vyItg==}
|
||||
dev: false
|
||||
|
||||
/glob-parent/5.1.2:
|
||||
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
|
||||
engines: {node: '>= 6'}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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', {
|
||||
|
|
@ -7,6 +7,15 @@ export const useAppStore = defineStore('app-store', {
|
|||
actions: {
|
||||
setSiderCollapsed(collapsed: boolean) {
|
||||
this.siderCollapsed = collapsed
|
||||
this.recordState()
|
||||
},
|
||||
|
||||
setTheme(theme: Theme) {
|
||||
this.theme = theme
|
||||
this.recordState()
|
||||
},
|
||||
|
||||
recordState() {
|
||||
setLocalSetting(this.$state)
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -8,9 +8,9 @@ defineProps<Props>()
|
|||
|
||||
<template>
|
||||
<img v-if="image" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
|
||||
<span v-else class="text-[27px]">
|
||||
<span v-else class="text-[27px] dark:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
|
||||
<path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" />
|
||||
<path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" fill="currentColor" />
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,25 +26,27 @@ const wrapClass = computed(() => {
|
|||
'min-w-[20px]',
|
||||
'rounded-md',
|
||||
props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
|
||||
props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
|
||||
{ 'text-red-500': props.error },
|
||||
]
|
||||
})
|
||||
|
||||
const text = computed(() => {
|
||||
if (props.text)
|
||||
if (props.text && !props.inversion)
|
||||
return marked(props.text)
|
||||
return ''
|
||||
return props.text
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="wrapClass">
|
||||
<div class="text-black" :class="wrapClass">
|
||||
<template v-if="loading">
|
||||
<span class="w-[5px] h-[20px] block animate-blink" />
|
||||
<span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="leading-relaxed break-all">
|
||||
<div :class="[{ 'markdown-body': !inversion }]" v-html="text" />
|
||||
<div v-if="!inversion" class="markdown-body" v-html="text" />
|
||||
<div v-else v-text="text" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ function handleRegenerate() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': inversion }]">
|
||||
<div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
|
||||
<div
|
||||
class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
|
||||
class="flex items-center justify-center rounded-full overflow-hidden flex-shrink-0 w-[32px] h-[32px]"
|
||||
:class="[inversion ? 'ml-3' : 'mr-3']"
|
||||
>
|
||||
<AvatarComponent :image="inversion" />
|
||||
|
|
@ -42,7 +42,10 @@ function handleRegenerate() {
|
|||
<span class="text-xs text-[#b4bbc4]">
|
||||
{{ dateTime }}
|
||||
</span>
|
||||
<div class="flex items-end gap-2 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
|
||||
<div
|
||||
class="flex items-end gap-2 mt-2"
|
||||
:class="[inversion ? 'flex-row-reverse' : 'flex-row']"
|
||||
>
|
||||
<TextComponent
|
||||
:inversion="inversion"
|
||||
:error="error"
|
||||
|
|
@ -52,13 +55,13 @@ function handleRegenerate() {
|
|||
<div class="flex flex-col">
|
||||
<button
|
||||
v-if="!inversion"
|
||||
class="mb-2 transition text-neutral-400 hover:text-neutral-800"
|
||||
class="mb-2 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
|
||||
@click="handleRegenerate"
|
||||
>
|
||||
<SvgIcon icon="ri:restart-line" />
|
||||
</button>
|
||||
<button
|
||||
class="mb-1 transition text-neutral-400 hover:text-neutral-800"
|
||||
class="mb-1 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
|
||||
@click="handleDelete"
|
||||
>
|
||||
<SvgIcon icon="ri:delete-bin-6-line" />
|
||||
|
|
|
|||
|
|
@ -20,3 +20,12 @@
|
|||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.dark{
|
||||
.markdown-body{
|
||||
.highlight pre,
|
||||
pre {
|
||||
background-color: #18181c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -247,7 +247,7 @@ const buttonDisabled = computed(() => {
|
|||
|
||||
const wrapClass = computed(() => {
|
||||
if (isMobile.value)
|
||||
return ['pt-14', 'pb-14']
|
||||
return ['pt-14', 'pb-16']
|
||||
|
||||
return []
|
||||
})
|
||||
|
|
@ -307,7 +307,7 @@ onUnmounted(() => {
|
|||
<footer :class="footerClass">
|
||||
<div class="flex items-center justify-between space-x-2">
|
||||
<HoverButton @click="handleClear">
|
||||
<span class="text-xl text-[#4f555e]">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:delete-bin-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
|
|
@ -320,7 +320,9 @@ onUnmounted(() => {
|
|||
/>
|
||||
<NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
|
||||
<template #icon>
|
||||
<span class="dark:text-black">
|
||||
<SvgIcon icon="ri:send-plane-fill" />
|
||||
</span>
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const collapsed = computed(() => appStore.siderCollapsed)
|
|||
const getMobileClass = computed(() => {
|
||||
if (isMobile.value)
|
||||
return ['rounded-none', 'shadow-none']
|
||||
return ['border', 'rounded-md', 'shadow-md']
|
||||
return ['border', 'rounded-md', 'shadow-md', 'dark:border-neutral-800']
|
||||
})
|
||||
|
||||
const getContainerClass = computed(() => {
|
||||
|
|
@ -32,7 +32,7 @@ const getContainerClass = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full" :class="[isMobile ? 'p-0' : 'p-4']">
|
||||
<div class="h-full dark:bg-[#24272e] transition-all" :class="[isMobile ? 'p-0' : 'p-4']">
|
||||
<div class="h-full overflow-hidden" :class="getMobileClass">
|
||||
<NLayout class="z-40 transition" :class="getContainerClass" has-sider>
|
||||
<Sider />
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function handleUpdateCollapsed() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<header class="fixed top-0 left-0 right-0 z-30 border-b bg-white/80 backdrop-blur">
|
||||
<header class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/30 backdrop-blur">
|
||||
<div class="relative flex items-center justify-between h-14">
|
||||
<button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
|
||||
<SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
|
||||
|
|
|
|||
|
|
@ -1,15 +1,60 @@
|
|||
<script setup lang='ts'>
|
||||
import { ref } from 'vue'
|
||||
import { computed, h, ref } from 'vue'
|
||||
import { NDropdown } from 'naive-ui'
|
||||
import { HoverButton, Setting, SvgIcon, UserAvatar } from '@/components/common'
|
||||
import { useAppStore } from '@/store'
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
const theme = computed(() => appStore.theme)
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: 'Dark',
|
||||
key: 'dark',
|
||||
icon: renderIcon('ri:moon-foggy-line'),
|
||||
},
|
||||
{
|
||||
label: 'Light',
|
||||
key: 'light',
|
||||
icon: renderIcon('ri:sun-foggy-line'),
|
||||
},
|
||||
{
|
||||
label: 'Auto',
|
||||
key: 'auto',
|
||||
icon: renderIcon('ri:contrast-line'),
|
||||
},
|
||||
]
|
||||
|
||||
function renderIcon(icon: string) {
|
||||
return () => {
|
||||
return h(SvgIcon, { icon })
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<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:sun-foggy-line" />
|
||||
<SvgIcon v-if="theme === 'light'" icon="ri:moon-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]">
|
||||
<span class="text-xl text-[#4f555e] dark:text-white">
|
||||
<SvgIcon icon="ri:settings-4-line" />
|
||||
</span>
|
||||
</HoverButton>
|
||||
|
|
|
|||
|
|
@ -55,8 +55,8 @@ function isActive(uuid: number) {
|
|||
<template v-else>
|
||||
<div v-for="(item, index) of dataSources" :key="index">
|
||||
<a
|
||||
class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group"
|
||||
:class="isActive(item.uuid) && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]', 'pr-14']"
|
||||
class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group dark:border-neutral-800 dark:hover:bg-[#24272e]"
|
||||
:class="isActive(item.uuid) && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]', 'dark:bg-[#24272e]', 'dark:border-[#4b9e5f]', 'pr-14']"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{vue,js,ts,jsx,tsx}',
|
||||
|
|
@ -11,7 +12,7 @@ module.exports = {
|
|||
},
|
||||
keyframes: {
|
||||
blink: {
|
||||
'0%, 100%': { 'background-color': '#000' },
|
||||
'0%, 100%': { 'background-color': 'currentColor' },
|
||||
'50%': { 'background-color': 'transparent' },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue