mirror of
https://gitee.com/HuLaSpark/HuLa.git
synced 2024-11-29 18:28:30 +08:00
feat(view): ✨ 新增GPT首页推荐功能样式
升级rust的tauri版本为1.7.1
This commit is contained in:
nongyehong
parent
9b771e02ec
commit
e927a95fa4
24
src-tauri/Cargo.lock
generated
24
src-tauri/Cargo.lock
generated
@ -3487,9 +3487,9 @@ checksum = "e1fc403891a21bcfb7c37834ba66a547a8f402146eba7265b5a6d88059c9ff2f"
|
||||
|
||||
[[package]]
|
||||
name = "tauri"
|
||||
version = "1.6.8"
|
||||
version = "1.7.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "77567d2b3b74de4588d544147142d02297f3eaa171a25a065252141d8597a516"
|
||||
checksum = "336bc661a3f3250853fa83c6e5245449ed1c26dce5dcb28bdee7efedf6278806"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"bytes",
|
||||
@ -3566,9 +3566,9 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "tauri-codegen"
|
||||
version = "1.4.3"
|
||||
version = "1.4.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c3a1d90db526a8cdfd54444ad3f34d8d4d58fa5c536463915942393743bd06f8"
|
||||
checksum = "c1aed706708ff1200ec12de9cfbf2582b5d8ec05f6a7293911091effbd22036b"
|
||||
dependencies = [
|
||||
"base64 0.21.7",
|
||||
"brotli",
|
||||
@ -3592,9 +3592,9 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "tauri-macros"
|
||||
version = "1.4.4"
|
||||
version = "1.4.5"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6a582d75414250122e4a597b9dd7d3c910a2c77906648fc2ac9353845ff0feec"
|
||||
checksum = "b88f831d2973ae4f81a706a0004e67dac87f2e4439973bbe98efbd73825d8ede"
|
||||
dependencies = [
|
||||
"heck 0.5.0",
|
||||
"proc-macro2",
|
||||
@ -3606,9 +3606,9 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "tauri-runtime"
|
||||
version = "0.14.3"
|
||||
version = "0.14.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "cd7ffddf36d450791018e63a3ddf54979b9581d9644c584a5fb5611e6b5f20b4"
|
||||
checksum = "3068ed62b63dedc705558f4248c7ecbd5561f0f8050949859ea0db2326f26012"
|
||||
dependencies = [
|
||||
"gtk",
|
||||
"http",
|
||||
@ -3627,9 +3627,9 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "tauri-runtime-wry"
|
||||
version = "0.14.8"
|
||||
version = "0.14.9"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1989b3b4d611f5428b3414a4abae6fa6df30c7eb8ed33250ca90a5f7e5bb3655"
|
||||
checksum = "d4c3db170233096aa30330feadcd895bf9317be97e624458560a20e814db7955"
|
||||
dependencies = [
|
||||
"cocoa 0.24.1",
|
||||
"gtk",
|
||||
@ -3647,9 +3647,9 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "tauri-utils"
|
||||
version = "1.5.4"
|
||||
version = "1.6.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "450b17a7102e5d46d4bdabae0d1590fd27953e704e691fc081f06c06d2253b35"
|
||||
checksum = "2826db448309d382dac14d520f0c0a40839b87b57b977e59cf5f296b3ace6a93"
|
||||
dependencies = [
|
||||
"brotli",
|
||||
"ctor",
|
||||
|
||||
@ -20,7 +20,7 @@ strip = true # 删除调试符号
|
||||
tauri-build = { version = "1.5.2", features = [] }
|
||||
|
||||
[dependencies]
|
||||
tauri = { version = "1.6.8", features = [ "http-all", "os-all", "process-all", "notification-all", "macos-private-api", "fs-all", "window-all", "system-tray", "shell-open", "icon-png", "icon-ico"] }
|
||||
tauri = { version = "1.7.1", features = [ "http-all", "os-all", "process-all", "notification-all", "macos-private-api", "fs-all", "window-all", "system-tray", "shell-open", "icon-png", "icon-ico"] }
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
serde_json = "1.0"
|
||||
window-shadows = "0.2.2" # windows 阴影和圆角
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
<!-- 该选项有提示时展示 -->
|
||||
<n-popover style="padding: 12px" v-else-if="item.tip" trigger="manual" v-model:show="tipShow" placement="right">
|
||||
<template #trigger>
|
||||
<n-badge :max="99" :value="item.badge">
|
||||
<svg class="size-22px" @click="tipShow = false">
|
||||
<n-badge :max="99" :value="item.badge" :dot="dotShow">
|
||||
<svg class="size-22px" @click="handleTipShow">
|
||||
<use
|
||||
:href="`#${activeUrl === item.url || openWindowsList.has(item.url) ? item.iconAction : item.icon}`"></use>
|
||||
</svg>
|
||||
@ -115,13 +115,22 @@
|
||||
import { itemsBottom, itemsTop, moreList } from '../config.ts'
|
||||
import { leftHook } from '../hook.ts'
|
||||
|
||||
const dotShow = ref(false)
|
||||
const { activeUrl, openWindowsList, settingShow, tipShow, pageJumps } = leftHook()
|
||||
|
||||
const handleTipShow = () => {
|
||||
tipShow.value = false
|
||||
dotShow.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (tipShow.value) {
|
||||
dotShow.value = true
|
||||
}
|
||||
/** 十秒后关闭提示 */
|
||||
setTimeout(() => {
|
||||
tipShow.value = false
|
||||
}, 10000)
|
||||
}, 5000)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -262,19 +262,7 @@ onMounted(() => {
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.gpt-subtitle {
|
||||
--un-gradient-from-position: 0%;
|
||||
--un-gradient-from: rgba(56, 189, 248, 20) var(--un-gradient-from-position);
|
||||
--un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to);
|
||||
--un-gradient-to-position: 100%;
|
||||
--un-gradient-to: rgba(19, 152, 127, 80) var(--un-gradient-to-position);
|
||||
--un-gradient-shape: to right;
|
||||
--un-gradient: var(--un-gradient-shape), var(--un-gradient-stops);
|
||||
background-image: linear-gradient(var(--un-gradient));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-r from-#38BDF8 to-#13987F text-20px font-800;
|
||||
}
|
||||
.plugins {
|
||||
@apply size-fit bg-[--chat-bt-color] rounded-8px shadow-md p-[8px_14px]
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<n-flex vertical :size="50" align="center" justify="center" class="flex flex-1">
|
||||
<n-flex vertical :size="10" align="center" justify="center" class="flex flex-1">
|
||||
<!-- logo -->
|
||||
<img class="w-275px h-125px drop-shadow-2xl" src="@/assets/logo/hula.png" alt="" />
|
||||
|
||||
<n-flex vertical justify="center" :size="16" class="p-[40px_20px]">
|
||||
<n-flex vertical justify="center" :size="16" class="p-[30px_20px]">
|
||||
<p class="text-(14px [--chat-text-color])">你可以尝试使用以下功能：</p>
|
||||
<n-flex align="center" :size="16">
|
||||
<n-flex align="center" :size="[32, 16]">
|
||||
<n-flex
|
||||
vertical
|
||||
v-for="(item, index) in examplesList"
|
||||
@ -13,7 +13,10 @@
|
||||
justify="center"
|
||||
:size="12"
|
||||
class="examples">
|
||||
<p class="text-(14px [--chat-text-color]) font-bold">{{ item.title }}</p>
|
||||
<n-flex align="center" justify="space-between">
|
||||
<p class="text-(14px [--chat-text-color]) font-bold">{{ item.title }}</p>
|
||||
<svg class="size-16px"><use :href="`#${item.icon}`"></use></svg>
|
||||
</n-flex>
|
||||
<component :is="item.content" />
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
@ -25,22 +28,19 @@ import { NFlex } from 'naive-ui'
|
||||
|
||||
type Example = {
|
||||
title: string
|
||||
icon: string
|
||||
content: JSX.Element
|
||||
}[]
|
||||
const avatars = [
|
||||
'https://avatars.githubusercontent.com/u/20943608?s=60&v=4',
|
||||
'https://avatars.githubusercontent.com/u/46394163?s=60&v=4',
|
||||
'https://avatars.githubusercontent.com/u/39197136?s=60&v=4',
|
||||
'https://avatars.githubusercontent.com/u/19239641?s=60&v=4'
|
||||
]
|
||||
const avatars = 'https://picsum.photos/140'
|
||||
const examplesList: Example = [
|
||||
{
|
||||
title: 'AI搜索',
|
||||
icon: 'search',
|
||||
content: (
|
||||
<NFlex vertical size={12}>
|
||||
{Array.from({ length: 3 }, (_, index) => (
|
||||
<NFlex key={index} class={'examples-item'}>
|
||||
<img class={'rounded-12px w-55px h-45px object-fill'} src={avatars[2]} alt="" />
|
||||
<NFlex key={index} class={'search-item'}>
|
||||
<img class={'rounded-12px w-55px h-45px object-fill'} src={`${avatars}?${index}1`} alt="" />
|
||||
<NFlex vertical justify="center" class={'text-(12px [--chat-text-color]) truncate flex-1'}>
|
||||
<p class="truncate w-full">你好，我是机器人小助手，很高兴为你服务。</p>
|
||||
<p>你最近怎么样？</p>
|
||||
@ -57,24 +57,54 @@ const examplesList: Example = [
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '情感消息',
|
||||
title: 'PDF阅读',
|
||||
icon: 'notes',
|
||||
content: (
|
||||
<NFlex vertical size={12}>
|
||||
{Array.from({ length: 3 }, (_, index) => (
|
||||
<NFlex key={index} class={'examples-item'}>
|
||||
<img class={'rounded-12px w-55px h-45px object-fill'} src={avatars[1]} alt="" />
|
||||
<NFlex vertical justify="center" class={'text-(12px [--chat-text-color]) truncate flex-1'}>
|
||||
<p class="truncate w-full">你好，我是机器人小助手，很高兴为你服务。</p>
|
||||
<p>你最近怎么样？</p>
|
||||
</NFlex>
|
||||
|
||||
<svg
|
||||
style={{ filter: 'drop-shadow(0 0 0.6em #13987f)' }}
|
||||
class="color-#13987f p-[10px_4px] size-26px opacity-0 absolute top-1/2 right--14px transform -translate-x-1/2 -translate-y-1/2">
|
||||
<use href="#Up-GPT"></use>
|
||||
</svg>
|
||||
<NFlex vertical size={12} class={'pdf-item'}>
|
||||
<NFlex vertical justify="center" class="content">
|
||||
<NFlex size={12} align={'center'}>
|
||||
<img class="size-24px" src="/file/pdf.svg" alt="" />
|
||||
<p class="text-(12px [--chat-text-color]) underline">全球经济金融展望报告.pdf</p>
|
||||
</NFlex>
|
||||
))}
|
||||
<p class="indent-8 text-(12px [--chat-text-color]) text-wrap leading-5">
|
||||
2023年全球经济增长动力持续回落，各国复苏 分化，发达经济体增速明显放缓，新兴经济体 整体表现稳定。
|
||||
</p>
|
||||
<ul class="list-disc list-inside indent-4 truncate text-(12px [--chat-text-color]) text-wrap leading-5">
|
||||
<li>
|
||||
展望2024年，预计全球经济复苏将依日疲软，主要经济体增长态势和货币政策走势将
|
||||
进一步分化。全球贸易环境的不确定性亦将上升，受保护主义和技术变革的双重影响，供应链重组趋势或将加速。
|
||||
</li>
|
||||
</ul>
|
||||
</NFlex>
|
||||
|
||||
<NFlex vertical justify="center" align="center" class="foot">
|
||||
<svg
|
||||
style={{ filter: 'drop-shadow(0 0 0.6em #13987f)' }}
|
||||
class="color-#13987f p-[10px_4px] size-26px opacity-0">
|
||||
<use href="#Up-GPT"></use>
|
||||
</svg>
|
||||
<p class="text-(14px [--chat-text-color]) opacity-0">前往阅读</p>
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '图像生成',
|
||||
icon: 'photo',
|
||||
content: (
|
||||
<NFlex vertical justify="center" size={0} class={'photo-item'}>
|
||||
<NFlex align={'center'} size={10} class={'head'}>
|
||||
{Array.from({ length: 4 }, (_, index) => (
|
||||
<img class={'rounded-12px w-128px h-90px object-cover'} src={`${avatars}?${index}`} alt="" />
|
||||
))}
|
||||
</NFlex>
|
||||
|
||||
<NFlex justify={'space-between'} align={'center'} class={'foot'}>
|
||||
<p class={'text-(14px [--chat-text-color]) font-bold pl-6px opacity-0'}>试一试</p>
|
||||
<svg style={{ filter: 'drop-shadow(0 0 0.6em #13987f)' }} class="color-#13987f pr-6px size-26px opacity-0">
|
||||
<use href="#Up-GPT"></use>
|
||||
</svg>
|
||||
</NFlex>
|
||||
</NFlex>
|
||||
)
|
||||
}
|
||||
@ -84,17 +114,67 @@ const examplesList: Example = [
|
||||
<style lang="scss">
|
||||
.examples {
|
||||
@apply w-300px h-fit rounded-12px p-10px box-border cursor-pointer border-(solid 1px [--line-color]) shadow-md;
|
||||
&:hover {
|
||||
.search-item:not(:hover) {
|
||||
@apply blur-md scale-94;
|
||||
}
|
||||
@apply outline outline-2 outline-#13987f outline-offset;
|
||||
}
|
||||
}
|
||||
.examples-item {
|
||||
|
||||
.search-item {
|
||||
@apply relative rounded-12px p-6px box-border cursor-pointer transition-all duration-600 ease-in-out;
|
||||
svg {
|
||||
@apply transition-all duration-600 ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
@apply bg-[--chat-hover-color];
|
||||
@apply bg-[--chat-hover-color] scale-104;
|
||||
svg {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-item {
|
||||
@apply relative;
|
||||
.content {
|
||||
@apply bg-[--chat-hover-color] h-195px rounded-12px p-10px box-border transition-all duration-600 ease-in-out;
|
||||
}
|
||||
.foot {
|
||||
@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
|
||||
svg,
|
||||
p {
|
||||
@apply transition-all duration-600 ease-in-out;
|
||||
}
|
||||
}
|
||||
&:hover .content {
|
||||
@apply blur-md;
|
||||
}
|
||||
&:hover .foot {
|
||||
svg,
|
||||
p {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
@apply relative p-6px box-border;
|
||||
.foot {
|
||||
@apply w-full h-40px absolute bottom-0 left-0 rounded-12px transition-all duration-600 ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
.head {
|
||||
@apply blur-md scale-94 transition-all duration-600 ease-in-out;
|
||||
}
|
||||
.foot {
|
||||
background-color: rgba(241, 241, 241, 0.2);
|
||||
@apply backdrop-blur-xl;
|
||||
svg,
|
||||
p {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user