Skip to content

S
sdream-ai-fe
Commit 90d0c62f by HoMeTown
Options

chore: 更新nextui to heroui

parent 941f8201
Showing with 158 additions and 143 deletions
.npmrc
public-hoist-pattern[]=*@nextui-org/*
public-hoist-pattern[]=*@heroui/*
package.json
......@@ -39,8 +39,7 @@
}
},
"dependencies": {
"@heroui/popover": "^2.3.10",
"@nextui-org/react": "^2.4.6",
"@heroui/react": "2.6.14",
"@reduxjs/toolkit": "^2.2.7",
"@rsbuild/plugin-image-compress": "^1.1.0",
"ahooks": "^3.8.0",
......
rsbuild.config.ts
......@@ -107,7 +107,7 @@ export default defineConfig({
reactJoyride: '/node_modules[\\/].pnpm[\\/]react-joyride/',
reactMarkdown: '/node_modules[\\/]react-markdown/',
reactHotToast: '/node_modules[\\/]react-hot-toast/',
nextUi: /node_modules[\\/]@nextui-org/,
nextUi: /node_modules[\\/]@heroui/,
},
},
},
......
src/components/ChatEditor/index.tsx
import React, { useEffect, useRef, useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { Button, Tooltip } from '@nextui-org/react'
import { Button, Tooltip } from '@heroui/react'
import { useLocalStorageState, useToggle } from 'ahooks'
import { LoginModal } from '../LoginModal'
import type { RootState } from '@/store'
......
src/components/ConversationModal/index.tsx
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, getKeyValue } from '@nextui-org/react'
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, getKeyValue } from '@heroui/react'
import React from 'react'
import { useAppDispatch, useAppSelector } from '@/store/hook'
import { deleteConversations } from '@/store/conversationSlice'
......
src/components/LoginModal/index.tsx
import React from 'react'
import { Button, Checkbox, Link, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@nextui-org/react'
import { Button, Checkbox, Link, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@heroui/react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '@/auth/AuthContext'
......
src/components/MarkdownDetail/index.tsx
......@@ -4,7 +4,7 @@ import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import remarkGfm from 'remark-gfm'
import { PhotoProvider, PhotoView } from 'react-photo-view'
import { Image } from '@nextui-org/react'
import { Image } from '@heroui/react'
interface MarkdownDetailProps {
children: ReactNode
......
src/components/UnLikeModal/index.tsx
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@nextui-org/react'
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@heroui/react'
import { useEffect, useState } from 'react'
import { fetchGetFeedbackConfig, fetchSubmitFeedback } from '@/api/chat'
import type { Answer } from '@/types/chat'
......@@ -48,47 +48,51 @@ export const UnLikeModal: React.FC<UnLikeModalProps> = ({ isOpen, onClose, answe
// getConfig()
}, [isOpen])
return (
<Modal backdrop="blur" size="2xl" isOpen={isOpen} onClose={onClose}>
<ModalContent>
{onClose => (
<>
<ModalHeader className="flex flex-col gap-1">你的反馈将帮助 晓得 优化进步</ModalHeader>
<ModalBody className="text-[#27353C]">
<div className="flex flex-wrap gap-[6px]">
{feedbackConfig && feedbackConfig.questionList[0].answerList.map((item: any, index: number) => (
(
<Modal backdrop="blur" size="2xl" isOpen={isOpen} onClose={onClose}>
<ModalContent>
{onClose => (
<>
<ModalHeader className="flex flex-col gap-1">你的反馈将帮助 晓得 优化进步</ModalHeader>
<ModalBody className="text-[#27353C]">
<div className="flex flex-wrap gap-[6px]">
{feedbackConfig && feedbackConfig.questionList[0].answerList.map((item: any, index: number) => (
// <div className="w-1/2" key={item.answerCode}>{item.answerName}</div>
<Button
key={item.answerCode}
color="primary"
variant="light"
className={`bg-[#F8F8F8] text-left text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary ${item.answerValue === '1' ? 'bg-[#E5F6FF] text-primary' : ''}`}
onClick={() => handleClick(item, index)}
>
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>{item.answerName}</span>
</div>
</Button>
))}
{/* <Textarea
(
<Button
key={item.answerCode}
color="primary"
variant="light"
className={`bg-[#F8F8F8] text-left text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary ${item.answerValue === '1' ? 'bg-[#E5F6FF] text-primary' : ''}`}
onClick={() => handleClick(item, index)}
>
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span>{item.answerName}</span>
</div>
</Button>
)
))}
{/* <Textarea
value={answerValue}
onValueChange={setAnswerValue}
label="留下更多反馈"
placeholder=""
className="w-full mt-[10px]"
/> */}
</div>
</ModalBody>
<ModalFooter>
<Button onPress={onClose}>
取消
</Button>
<Button onClick={onSubmit} color="primary">
提交
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
</div>
</ModalBody>
<ModalFooter>
<Button onPress={onClose}>
取消
</Button>
<Button onClick={onSubmit} color="primary">
提交
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
)
)
}
src/config/theme.ts
import type { NextUIPluginConfig } from '@nextui-org/react'
import type { NextUIPluginConfig } from '@heroui/react'
export const theme: NextUIPluginConfig = {
prefix: 'sdream',
......
src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { NextUIProvider } from '@nextui-org/react'
import { HeroUIProvider } from '@heroui/react'
import App from './App'
import './styles/index.less'
import 'github-markdown-css/github-markdown.css'
......@@ -17,9 +17,9 @@ if (rootEl) {
const root = ReactDOM.createRoot(rootEl)
root.render(
<React.StrictMode>
<NextUIProvider className="h-full">
<HeroUIProvider className="h-full">
<App />
</NextUIProvider>
</HeroUIProvider>
</React.StrictMode>,
)
}
src/layouts/HistoryBar/HistoryBar.tsx
import { AnimatePresence, motion } from 'framer-motion'
import { Button, Input } from '@nextui-org/react'
import { Button, Input } from '@heroui/react'
import React, { useState } from 'react'
import { variants } from './motionAnimate'
import { HistoryBarList } from './components/HistoryBarList'
......
src/layouts/HistoryBar/components/HistoryBarList/index.tsx
import { motion } from 'framer-motion'
import { Button } from '@nextui-org/react'
import { Button } from '@heroui/react'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { useDebounceFn } from 'ahooks'
......
src/layouts/Navbar/components/NavBarItem/NavBarItem.tsx
import React from 'react'
import { motion } from 'framer-motion'
import { Button, Tooltip } from '@nextui-org/react'
import { Button, Tooltip } from '@heroui/react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBarDivider } from '../NavBarDivider'
import styles from './NavBarItem.module.less'
......
src/layouts/Navbar/components/User/index.tsx
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Tooltip } from '@nextui-org/react'
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Tooltip } from '@heroui/react'
import { useNavigate } from 'react-router-dom'
import { useSessionStorageState, useTimeout } from 'ahooks'
import { useSessionStorageState } from 'ahooks'
import { useEffect, useState } from 'react'
import { withAuth } from '@/auth/withAuth'
import type { WithAuthProps } from '@/auth/withAuth'
......
src/pages/Chat/Chat.tsx
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Button } from '@nextui-org/react'
import { Button } from '@heroui/react'
import { motion } from 'framer-motion'
import { useScroll } from 'ahooks'
import { toast } from 'react-hot-toast'
......
src/pages/Chat/components/ChatItem/ChatAnswerAttchment.tsx
import { Button, Link } from '@nextui-org/react'
import { Button, Link } from '@heroui/react'
import { motion } from 'framer-motion'
import type { Answer, Attachment } from '@/types/chat'
import AnswerProDetailIcon from '@/assets/svg/answerProDetail.svg?react'
......@@ -38,82 +38,85 @@ export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ from
}
}
return (
<div className="cardList flex flex-col gap-[20px]">
{answer.cardList && answer.cardList.map((attachment, index) => {
if (attachment?.type) {
return (
<div key={`${attachment.type}_${index}`}>
{/* 附件：product-detail */}
{attachment.type === 'product-detail' && (
<div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center">
<AnswerProDetailIcon />
{/* <span className="ml-[6px]">{attachment.name}</span> */}
<div className="ml-[6px] max-w-full sm:w-full text-nowrap text-ellipsis overflow-hidden">
{attachment.name}
</div>
</div>
)}
{/* 附件：引用文件 */}
{attachment.type === 'reference' && attachment.content.docList.length !== 0 && (
<div>
<p className="text-[14px] text-[#8D9795] mb-[12px]">
已为您找到
{attachment.content.docList.length}
篇资料作为参考：
</p>
<div className="flex flex-col gap-[9px]">
{ attachment.content.docList.map(doc => (
<Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.documentStoreKey)} size="sm" key={doc.documentStoreKey} isExternal showAnchorIcon underline="hover">
{doc.documentAlias}
</Link>
))}
</div>
</div>
(
<div className="cardList flex flex-col gap-[20px]">
{answer.cardList && answer.cardList.map((attachment, index) => {
if (attachment?.type) {
return (
(
<div key={`${attachment.type}_${index}`}>
{/* 附件：product-detail */}
{attachment.type === 'product-detail' && (
<div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center">
<AnswerProDetailIcon />
{/* <span className="ml-[6px]">{attachment.name}</span> */}
<div className="ml-[6px] max-w-full sm:w-full text-nowrap text-ellipsis overflow-hidden">
{attachment.name}
</div>
</div>
)}
{/* 附件：引用文件 */}
{attachment.type === 'reference' && attachment.content.docList.length !== 0 && (
<div>
<p className="text-[14px] text-[#8D9795] mb-[12px]">
已为您找到
{attachment.content.docList.length}
篇资料作为参考：
</p>
<div className="flex flex-col gap-[9px]">
{ attachment.content.docList.map(doc => (
<Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.documentStoreKey)} size="sm" key={doc.documentStoreKey} isExternal showAnchorIcon underline="hover">
{doc.documentAlias}
</Link>
))}
</div>
</div>
)}
{/* 附件：选择 box */}
{
attachment.type === 'box' && attachment.content.productList.length !== 0 && (
<div>
<div className="mb-[12px]">{attachment.description}</div>
<ul
className="flex flex-col gap-[8px]"
>
{attachment.content.productList.map(product => (
// <div key={product.productCode}>{product.productName}</div>
<motion.li
key={product.productCode}
)}
{/* 附件：选择 box */}
{
attachment.type === 'box' && attachment.content.productList.length !== 0 && (
<div>
<div className="mb-[12px]">{attachment.description}</div>
<ul
className="flex flex-col gap-[8px]"
>
<Button onClick={() => handleClickBoxItem(product.productName, product.productCode)} isDisabled={!isLastAnswer} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span className="ml-[8px]">{product.productName}</span>
</div>
</Button>
</motion.li>
))}
</ul>
</div>
)
}
{
attachment.type?.includes('card-') && (
<div onClick={() => handleClickCard(attachment)}>
{attachment.type === 'card-nav' && <img className="w-full max-w-[400px] cursor-pointer" src={CardNavImg} alt="" />}
{attachment.type === 'card-detail' && <img className="w-full max-w-[400px] cursor-pointer" src={CardDetailImg} alt="" />}
{attachment.type === 'card-calculation' && <img className="w-full max-w-[400px] cursor-pointer" src={CardCalculation} alt="" />}
{attachment.type === 'card-product-compare' && <img className="w-full max-w-[400px] cursor-pointer" src={CardProductCompareImg} alt="" />}
{attachment.type === 'card-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />}
</div>
)
}
</div>
)
}
return null
})}
</div>
{attachment.content.productList.map(product => (
// <div key={product.productCode}>{product.productName}</div>
(
<motion.li
key={product.productCode}
>
<Button onClick={() => handleClickBoxItem(product.productName, product.productCode)} isDisabled={!isLastAnswer} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
<div className="w-full text-nowrap text-ellipsis overflow-hidden">
<span className="ml-[8px]">{product.productName}</span>
</div>
</Button>
</motion.li>
)
))}
</ul>
</div>
)
}
{
attachment.type?.includes('card-') && (
<div onClick={() => handleClickCard(attachment)}>
{attachment.type === 'card-nav' && <img className="w-full max-w-[400px] cursor-pointer" src={CardNavImg} alt="" />}
{attachment.type === 'card-detail' && <img className="w-full max-w-[400px] cursor-pointer" src={CardDetailImg} alt="" />}
{attachment.type === 'card-calculation' && <img className="w-full max-w-[400px] cursor-pointer" src={CardCalculation} alt="" />}
{attachment.type === 'card-product-compare' && <img className="w-full max-w-[400px] cursor-pointer" src={CardProductCompareImg} alt="" />}
{attachment.type === 'card-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />}
</div>
)
}
</div>
)
)
}
return null
})}
</div>
)
)
}
src/pages/Chat/components/ChatItem/ChatAnswerBox.tsx
import { Avatar, Button } from '@nextui-org/react'
import { Avatar, Button } from '@heroui/react'
import { useEffect, useState } from 'react'
import { ChatAnswerShower } from './ChatAnswerShower'
import { ChatAnswerParser } from './ChatAnswerParser'
......
src/pages/Chat/components/ChatItem/ChatAnswerOperate.tsx
import { Button, Tooltip } from '@nextui-org/react'
import { Button, Tooltip } from '@heroui/react'
import { useState } from 'react'
import { useDebounceFn } from 'ahooks'
import type { Answer } from '@/types/chat'
......
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
import React, { useEffect, useState } from 'react'
import { Chip } from '@nextui-org/react'
import { Chip } from '@heroui/react'
import { ChatAnswerAttachment } from './ChatAnswerAttchment'
import { ChatAnswerOperate } from './ChatAnswerOperate'
import { formatMarkdown } from './markdownFormatter'
......
src/pages/Chat/components/ChatItem/ChatAnswerRecommend.tsx
import { useEffect, useState } from 'react'
import { Button, Skeleton } from '@nextui-org/react'
import { Button, Skeleton } from '@heroui/react'
import type { Answer } from '@/types/chat'
import { fetchQueryRecommendQuestion } from '@/api/chat'
import SendIcon from '@/assets/svg/sendBlack.svg?react'
......
src/pages/Chat/components/ChatItem/ChatItemUser.tsx
import { Avatar } from '@nextui-org/react'
import { Avatar } from '@heroui/react'
import AvatarUser from '@/assets/avatarUser.png'
import type { ChatRecord } from '@/types/chat'
......
src/pages/Chat/components/ChatItem/ChatMaxCount.tsx 0 → 100644
export const ChatMaxCount: React.FC = () => {
return (
<div>
<div className="flex items-center">
<p className="text-[14px] mr-[12px]">⚠️ 超过最大轮数上限！请您新建对话~</p>
</div>
</div>
)
}
src/pages/Chat/components/ChatWelcome/index.tsx
import { Avatar } from '@nextui-org/react'
import { Avatar } from '@heroui/react'
import { motion } from 'framer-motion'
import AvatarBot from '@/assets/avatarBot.png'
......
src/pages/Collect/Collect.tsx
import { useEffect, useState } from 'react'
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Tooltip } from '@nextui-org/react'
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Tooltip } from '@heroui/react'
import { motion } from 'framer-motion'
import { ChatMaskBar } from '../Chat/components/ChatMaskBar'
import { ChatSlogan } from '../Chat/components/ChatSlogan'
......
src/pages/Home/components/QuestionList/QuestionList.tsx
import { Button } from '@nextui-org/react'
import { Button } from '@heroui/react'
import type React from 'react'
import { Image } from '@nextui-org/image'
import { Image } from '@heroui/image'
import { motion } from 'framer-motion'
import { useCallback, useEffect, useState } from 'react'
import Refresh from '@/assets/svg/refresh.svg?react'
......
src/pages/Home/components/WelcomeWord/WelcomeWord.tsx
import { Button } from '@nextui-org/react'
import { Button } from '@heroui/react'
import type React from 'react'
import { motion, useAnimation } from 'framer-motion'
import { useEffect } from 'react'
......
tailwind.config.js
......@@ -4,13 +4,13 @@ const {
default: flattenColorPalette,
} = require('tailwindcss/lib/util/flattenColorPalette')
const { nextui } = require ('@nextui-org/react')
const { heroui } = require ('@heroui/react')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,ts,jsx,tsx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
'./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
screens: {
......@@ -36,7 +36,7 @@ module.exports = {
},
darkMode: 'class',
plugins: [
nextui(theme),
heroui(theme),
addVariablesForColors,
],
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment