xinyin025/YiAi
1
0
Fork 0
mirror of https://github.com/xiaoyiweb/YiAi.git synced 2025-09-17 08:46:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

调整部分ui

Browse Source
This commit is contained in:
小易 2024-02-05 23:15:31 +08:00
parent 9f304e0987
commit 7fe96f5576
11 changed files with 227 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

4
chat/src/layout/components/Login/Email.vue
View File

@ -230,10 +230,6 @@ onMounted(() => {
<NInput v-model:value="loginForm.password" placeholder="请输入您的账户密码" type="password" :maxlength="30" show-password-on="click" tabindex="0" @keyup.enter="handlerSubmit" />
</NFormItem>
</Motion>
<div style="color:red">
老用户密码统一重置为112233<br>
登录后请自行修改密码
</div>
<NFormItem>
<NButton
block

6
chat/src/layout/siderBar/index.vue
View File

@ -180,7 +180,7 @@ watch(
<template>
<div
class="flex min-w-[80px] bg-[#e8eaf1] pb-2 dark:bg-[#25272d] dark:border-[#3a3a40] border-#efeff5-800"
class="flex min-w-[70px] bg-[#e8eaf1] pb-2 dark:bg-[#25272d] dark:border-[#3a3a40] border-#efeff5-800"
:class="getMobileLayoutClass"
:style="mobileSafeArea"
>
@ -199,7 +199,7 @@ watch(
v-for="item in menuList"
:key="item.menuName"
class="flex justify-center flex-col items-center"
:class="isMobile ? 'mt-0' : 'mt-3'"
:class="isMobile ? 'mt-0' : 'mt-2'"
@click="handleClickMenu(item)"
>
<NTooltip
@ -209,7 +209,7 @@ watch(
>
<template #trigger>
<div
class="h-12 w-12 cursor-pointer bg-white dark:bg-[#34373c] rounded-lg duration-300 flex justify-center items-center"
class="h-10 w-10 cursor-pointer bg-white dark:bg-[#34373c] rounded-lg duration-300 flex justify-center items-center"
:class="[
isActive(item)
? 'borderRadis shadow-[#3076fd] btns'

43
chat/src/styles/global.less
View File

@ -4,8 +4,8 @@ body,
height: 100%;
}
*{
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif;
* {
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
@ -13,51 +13,52 @@ body {
padding-bottom: env(safe-area-inset-bottom);
}
img {
transition: transform 0.3s;
}
img:hover {
transform: scale(1.1);
}
* :focus {
outline: none;
}
.tem{
.tem {
// .n-slider .n-slider-rail{
// width: 4px !important;
// }
.n-slider-rail__fill{
.n-slider-rail__fill {
width: 4px;
}
.n-slider.n-slider--vertical .n-slider-rail .n-slider-rail__fill{
.n-slider.n-slider--vertical .n-slider-rail .n-slider-rail__fill {
left: -2px;
}
}
::selection {
color: #fff;
background: #798aae;
}
}
.ele-drag{
.ele-drag {
-webkit-app-region: drag;
// background-color: red;
}
// 自动移滚动条样式
::-webkit-scrollbar{
width: 3px;
height: 3px;
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
// 滑块部分
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
}
// 辊道部分
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
::-webkit-scrollbar-track {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
}

2
chat/src/views/chat/chatBase.vue
View File

@ -534,7 +534,7 @@ async function onConversation(msg?: string) {
dataSources.value.length === 2 &&
!activeGroupInfo?.value?.appId
) {
const lengthStr = isMobile.value ? 10 : 20
const lengthStr = isMobile.value ? 15 : 20
const title =
dataSources.value[1].text.length > lengthStr
? dataSources.value[1].text.slice(0, lengthStr)

23
chat/src/views/chat/components/Header/index.vue
View File

@ -120,9 +120,9 @@ function handleSignIn() {
class="sticky top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur"
>
<div
class="relative flex items-center justify-center min-w-0 overflow-hidden h-14"
class="relative flex items-center justify-center min-w-0 overflow-hidden h-12"
>
<div class="max-w-screen-4xl flex w-full h-full items-center px-4">
<div class="max-w-screen-4xl flex w-full h-full items-center px-2">
<div v-if="isMobile" class="flex items-center">
<button
class="flex items-center justify-center w-11 h-11"
@ -138,10 +138,13 @@ function handleSignIn() {
</div>
<!-- pc -->
<div class="flex justify-between items-center h-full w-full">
<div class="flex-1 flex ele-drag items-center h-full">
<div
class="flex justify-between items-center h-full w-full"
:class="[isMobile ? 'title-wrapper' : '']"
>
<div class="flex ele-drag items-center h-full over-hidden">
<h1
class="flex-1 px-4 font-bold pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
class="font-bold overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap px-2 pr-2"
@dblclick="onScrollToTop"
>
{{ currentChatHistory?.title ?? '' }}
@ -268,3 +271,13 @@ function handleSignIn() {
</NPopover> -->
</header>
</template>
<style scoped>
.title-wrapper {
width: calc(100% - 44px);
}
.over-hidden {
width: 100%;
overflow: hidden;
}
</style>

2
chat/src/views/chat/components/Message/Text.vue
View File

@ -307,7 +307,7 @@ defineExpose({ textRef })
}
.header-1 {
background-color: #f1f3f8 !important;
background-color: #fff !important;
border-bottom: 1px solid #e3e8f7 !important;
height: 30px !important;
position: absolute !important;

2
chat/src/views/chat/components/Message/index.vue
View File

@ -121,7 +121,7 @@ function handleRegenerate() {
</p>
<div
class="flex items-end gap-1 mt-2"
:class="[inversion ? 'flex-row-reverse' : 'flex-row']"
:class="[inversion ? 'flex-row-reverse' : 'flex-row',inversion ? 'pl-5' : 'pr-5']"
>
<TextComponent
ref="textRef"

250
chat/src/views/chat/components/sider/index.vue
View File

@ -2,12 +2,24 @@
import type { CSSProperties } from 'vue'
import { computed, nextTick, ref, watch } from 'vue'
import type { NumberAnimationInst } from 'naive-ui'
import { NButton, NInput, NLayoutSider, NNumberAnimation, useDialog, useMessage } from 'naive-ui'
import {
NButton,
NInput,
NLayoutSider,
NNumberAnimation,
useDialog,
useMessage,
} from 'naive-ui'
import { useRouter } from 'vue-router'
import List from './List.vue'
import { SvgIcon } from '@/components/common'
import { useAppStore, useAuthStore, useChatStore, useGlobalStoreWithOut } from '@/store'
import {
useAppStore,
useAuthStore,
useChatStore,
useGlobalStoreWithOut,
} from '@/store'
import { useBasicLayout } from '@/hooks/useBasicLayout'
const useGlobalStore = useGlobalStoreWithOut()
@ -22,7 +34,9 @@ const userBalance = computed(() => authStore.userBalance)
const dialog = useDialog()
/* 当前选用的模型的扣费类型 1: 普通 2： 高级 */
const activeModelKeyDeductType = computed(() => chatStore?.activeModelKeyDeductType)
const activeModelKeyDeductType = computed(
() => chatStore?.activeModelKeyDeductType
)
const activeModelKeyPrice = computed(() => chatStore?.activeModelKeyPrice)
const oldUse3Token = ref(0)
@ -32,22 +46,30 @@ const newUse4Token = ref(0)
const isSearch = ref(false)
const searchRef = ref(null)
watch(() => authStore.userBalance.useModel3Token, (newVal, oldVal) => {
oldUse3Token.value = oldVal || 0
newUse3Token.value = newVal || 0
model3AnimationInstRef.value?.play()
}, {
immediate: true,
flush: 'post',
})
watch(() => authStore.userBalance.useModel4Token, (newVal, oldVal) => {
oldUse4Token.value = oldVal || 0
newUse4Token.value = newVal || 0
model4AnimationInstRef.value?.play()
}, {
immediate: true,
flush: 'post',
})
watch(
() => authStore.userBalance.useModel3Token,
(newVal, oldVal) => {
oldUse3Token.value = oldVal || 0
newUse3Token.value = newVal || 0
model3AnimationInstRef.value?.play()
},
{
immediate: true,
flush: 'post',
}
)
watch(
() => authStore.userBalance.useModel4Token,
(newVal, oldVal) => {
oldUse4Token.value = oldVal || 0
newUse4Token.value = newVal || 0
model4AnimationInstRef.value?.play()
},
{
immediate: true,
flush: 'post',
}
)
const { isMobile } = useBasicLayout()
const addLoading = ref(false)
@ -55,9 +77,10 @@ const addLoading = ref(false)
const collapsed = computed(() => appStore.siderCollapsed)
const groupKeyWord = ref('')
function handleInputGroupSearch(val: string) {
groupKeyWord.value = val
chatStore.setGroupKeyWord(val)
function handleInputGroupSearch(event: { target: { value: any } }) {
const val = event.target.value;
groupKeyWord.value = val;
chatStore.setGroupKeyWord(val);
}
function handleBlurInput() {
@ -76,10 +99,8 @@ async function handleAdd() {
await chatStore.queryMyGroup()
addLoading.value = false
if (isMobile.value)
appStore.setSiderCollapsed(true)
}
catch (error) {
if (isMobile.value) appStore.setSiderCollapsed(true)
} catch (error) {
addLoading.value = false
}
}
@ -135,7 +156,7 @@ watch(
{
immediate: true,
flush: 'post',
},
}
)
</script>
@ -152,83 +173,174 @@ watch(
:style="getMobileClass"
@update-collapsed="handleUpdateCollapsed"
>
<div class="flex flex-col h-full bg-[#fafbfc] dark:bg-[#18181c]" :style="mobileSafeArea">
<div
class="flex flex-col h-full bg-[#fafbfc] dark:bg-[#18181c]"
:style="mobileSafeArea"
>
<main class="flex flex-col h-full flex-1 min-h-0">
<div v-if="isSearch" class="flex h-14 items-center space-x-2 bg-[#fafbfc] dark:bg-[#18181c]">
<NButton type="primary" :loading="addLoading" @click="handleAdd">
<SvgIcon icon="ion:add-outline" class="text-xl" />
</NButton>
<div class="flex-1">
<NInput ref="searchRef" v-model="groupKeyWord" type="text" placeholder="对话历史查找" clearable @blur="handleBlurInput" @input="handleInputGroupSearch" />
<div
class="flex items-center space-x-2 bg-white dark:bg-gray-900 h-12 px-3 border-b border-t-gray-100 dark:border-b dark:border-b-gray-800 text-lg mb-2"
>
<!-- 搜索框 -->
<div class="flex-1 relative">
<div class="flex-1 relative">
<!-- 搜索图标按钮 -->
<SvgIcon
icon="material-symbols-light:search"
class="pointer-events-none absolute inset-y-0 left-0 h-full w-6 h-6 text-gray-400"
/>
<!-- 搜索输入框 -->
<input
ref="searchRef"
v-model="groupKeyWord"
type="text"
placeholder="搜索历史对话"
class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-700 placeholder:text-gray-400 sm:text-sm dark:bg-gray-900 dark:text-gray-400"
@blur="handleBlurInput"
@input="handleInputGroupSearch"
/>
</div>
</div>
</div>
<div v-if="!isSearch" class="flex h-14 items-center space-x-2 px-2 bg-[#fafbfc] dark:bg-[#18181c]">
<div class="flex-1">
<NButton type="primary" style="width: 100%" :loading="addLoading" @click="handleAdd">
新对话
<SvgIcon icon="ion:add-outline" class="text-xl" />
</NButton>
</div>
<NButton @click="handleOpenSearch">
<SvgIcon icon="icon-park-outline:search" class="text-xl" />
</NButton>
<!-- 新建对话按钮 -->
<button
type="button"
class="rounded-md p-2 text-sm focus-visible:outline bg-white text-gray-400 dark:bg-gray-800"
@click="handleAdd"
>
<SvgIcon icon="material-symbols-light:add" class="h-6 w-6" />
</button>
</div>
<div class="flex-1 min-h-0 pb-4 overflow-hidden">
<List />
</div>
<div v-if="!isMobile" class="px-6 py-2 flex items-center border-t dark:border-t-neutral-800">
<div class="flex items-center w-full p-1 mb-1 text-[#3076fd] rounded cursor-pointer transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]" @click="useGlobalStore.updateGoodsDialog(true)">
<SvgIcon icon="material-symbols:shopping-bag-outline" class="mr-1 text-base" />
<!-- <div
v-if="!isMobile"
class="px-6 py-2 flex items-center border-t dark:border-t-neutral-800"
>
<div
class="flex items-center w-full p-1 mb-1 text-[#3076fd] rounded cursor-pointer transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]"
@click="useGlobalStore.updateGoodsDialog(true)"
>
<SvgIcon
icon="material-symbols:shopping-bag-outline"
class="mr-1 text-base"
/>
进入市场选购您的商品
</div>
</div>
<div class="p-4 border-t dark:border-t-neutral-800 flex flex-col">
<div v-if="activeModelKeyDeductType === 1" class="my-1 flex items-center select-none">
<SvgIcon icon="material-symbols:account-balance-wallet-outline" class="ml-2 mr-2 text-base" />普通额度： {{ `${userBalance.sumModel3Count || 0} 积分` }}
</div> -->
<div class="p-4 border-t dark:border-t-neutral-800 flex flex-col">
<div
v-if="activeModelKeyDeductType === 1"
class="my-1 flex items-center select-none"
>
<SvgIcon
icon="material-symbols:account-balance-wallet-outline"
class="ml-2 mr-2 text-base"
/>普通额度： {{ `${userBalance.sumModel3Count || 0} 积分` }}
</div>
<div v-if="activeModelKeyDeductType === 1" class="my-1 flex items-center select-none">
<SvgIcon icon="ic:twotone-hourglass-top" class="ml-2 mr-2 text-base" /> 我已使用： <NNumberAnimation ref="model3AnimationInstRef" :from="oldUse3Token" :to="newUse3Token" /> Token
<div
v-if="activeModelKeyDeductType === 1"
class="my-1 flex items-center select-none"
>
<SvgIcon
icon="ic:twotone-hourglass-top"
class="ml-2 mr-2 text-base"
/>
我已使用：
<NNumberAnimation
ref="model3AnimationInstRef"
:from="oldUse3Token"
:to="newUse3Token"
/>
Token
</div>
<div v-if="activeModelKeyDeductType === 1" class="my-1 flex items-center select-none">
<SvgIcon icon="mingcute:bill-line" class="ml-2 mr-2 text-base" /> 模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
<div
v-if="activeModelKeyDeductType === 1"
class="my-1 flex items-center select-none"
>
<SvgIcon icon="mingcute:bill-line" class="ml-2 mr-2 text-base" />
模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
</div>
<div v-if="activeModelKeyDeductType === 2" class="my-1 flex items-center select-none">
<SvgIcon icon="ic:twotone-hourglass-top" class="ml-2 mr-2 text-base" />我已使用： <NNumberAnimation ref="model4AnimationInstRef" :from="oldUse4Token" :to="newUse4Token" /> Token
<div
v-if="activeModelKeyDeductType === 2"
class="my-1 flex items-center select-none"
>
<SvgIcon
icon="ic:twotone-hourglass-top"
class="ml-2 mr-2 text-base"
/>我已使用：
<NNumberAnimation
ref="model4AnimationInstRef"
:from="oldUse4Token"
:to="newUse4Token"
/>
Token
</div>
<div v-if="activeModelKeyDeductType === 2" class="my-1 flex items-center select-none">
<SvgIcon icon="material-symbols:account-balance-wallet-outline" class="ml-2 mr-2 text-base " />高级额度： {{ `${userBalance.sumModel4Count || 0} 积分` }}
<div
v-if="activeModelKeyDeductType === 2"
class="my-1 flex items-center select-none"
>
<SvgIcon
icon="material-symbols:account-balance-wallet-outline"
class="ml-2 mr-2 text-base"
/>高级额度： {{ `${userBalance.sumModel4Count || 0} 积分` }}
</div>
<div v-if="activeModelKeyDeductType === 2" class="my-1 flex items-center select-none">
<SvgIcon icon="mingcute:bill-line" class="ml-2 mr-2 text-base " />模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
<div
v-if="activeModelKeyDeductType === 2"
class="my-1 flex items-center select-none"
>
<SvgIcon
icon="mingcute:bill-line"
class="ml-2 mr-2 text-base"
/>模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
</div>
<div class="flex justify-between my-3">
<NButton type="tertiary" size="small" @click="useGlobalStore.updateNoticeDialog(true)">
<NButton
type="tertiary"
size="small"
@click="useGlobalStore.updateNoticeDialog(true)"
>
<SvgIcon icon="mdi:notice-board" class="ml-2 mr-2 text-sm" />
<span class="mr-2">公告栏</span>
</NButton>
<NButton type="tertiary" size="small" @click="handleOpenRole">
<SvgIcon icon="ri:emoji-sticker-line" class="ml-2 mr-2 text-sm" />
<SvgIcon
icon="ri:emoji-sticker-line"
class="ml-2 mr-2 text-sm"
/>
<span class="mr-3">工作台</span>
</NButton>
</div>
<div class="flex justify-betweenx">
<NButton type="tertiary" size="small" style="width: 100%" @click="handleDelGroup">
<SvgIcon icon="ant-design:delete-outlined" class="ml-2 mr-2 text-sm" />
<NButton
type="tertiary"
size="small"
style="width: 100%"
@click="handleDelGroup"
>
<SvgIcon
icon="ant-design:delete-outlined"
class="ml-2 mr-2 text-sm"
/>
<span class="mr-3">清空全部非置顶会话</span>
</NButton>
</div>
<!-- <NButton block @click="show = true">
<!-- <NButton block @click="show = true">
{{ $t('store.siderButton') }}
</NButton> -->
</div>
</main>
<!-- <Footer /> -->
<!-- <Footer /> -->
</div>
</NLayoutSider>
<template v-if="isMobile">
<div v-show="!collapsed" class="fixed inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
<div
v-show="!collapsed"
class="fixed inset-0 z-40 bg-black/40"
@click="handleUpdateCollapsed"
/>
</template>
</div>
</template>

BIN
service/.DS_Store vendored
View File

Binary file not shown.

BIN
service/src/.DS_Store vendored
View File

Binary file not shown.