├── .npmrc
├── bun.lockb
├── .vscode
    └── settings.json
├── public
    └── favicon.ico
├── postcss.config.js
├── types
    └── index.ts
├── next.config.js
├── config
    ├── site.ts
    └── fonts.ts
├── .eslintignore
├── pages
    └── api
    │   └── announcement.ts
├── styles
    └── globals.css
├── app
    ├── page.tsx
    ├── error.tsx
    ├── providers.tsx
    └── layout.tsx
├── content
    └── markdown
    │   ├── styles.tsx
    │   └── announcement.md
├── .gitignore
├── components
    ├── login-button.tsx
    ├── user-button.tsx
    ├── background.tsx
    ├── primitives.ts
    ├── navbar.tsx
    ├── sidebar.tsx
    ├── login-modal.tsx
    ├── model-select.tsx
    ├── file-upload-button.tsx
    ├── theme-switch.tsx
    ├── chat-input-1.tsx
    ├── announcement.tsx
    ├── icon.tsx
    └── user-popover.tsx
├── tsconfig.json
├── LICENSE
├── server
    └── api
    │   └── announcement.ts
├── tailwind.config.js
├── README.md
├── package.json
└── .eslintrc.json


/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=true


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Suge8/EchoAI/main/bun.lockb


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules/typescript/lib"
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Suge8/EchoAI/main/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
1 | import { SVGProps } from "react";
2 | 
3 | export type IconSvgProps = SVGProps<SVGSVGElement> & {
4 |   size?: number;
5 | };
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig; 


--------------------------------------------------------------------------------
/config/site.ts:
--------------------------------------------------------------------------------
 1 | export type SiteConfig = typeof siteConfig;
 2 | 
 3 | export const siteConfig = {
 4 |   name: "Echo AI",
 5 |   description: "Make easiest AI.",
 6 |   navItems: [
 7 | 
 8 |   ],
 9 |   navMenuItems: [
10 | 
11 |   ],
12 |   links: {
13 | 
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .now/*
 2 | *.css
 3 | .changeset
 4 | dist
 5 | esm/*
 6 | public/*
 7 | tests/*
 8 | scripts/*
 9 | *.config.js
10 | .DS_Store
11 | node_modules
12 | coverage
13 | .next
14 | build
15 | !.commitlintrc.cjs
16 | !.lintstagedrc.cjs
17 | !jest.config.js
18 | !plopfile.js
19 | !react-shim.js
20 | !tsup.config.ts


--------------------------------------------------------------------------------
/config/fonts.ts:
--------------------------------------------------------------------------------
 1 | import { Fira_Code as FontMono, Inter as FontSans } from "next/font/google";
 2 | 
 3 | export const fontSans = FontSans({
 4 |   subsets: ["latin"],
 5 |   variable: "--font-sans",
 6 | });
 7 | 
 8 | export const fontMono = FontMono({
 9 |   subsets: ["latin"],
10 |   variable: "--font-mono",
11 | });
12 | 


--------------------------------------------------------------------------------
/pages/api/announcement.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiRequest, NextApiResponse } from 'next';
 2 | import { GET } from '@/server/api/announcement';
 3 | 
 4 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
 5 |   if (req.method === 'GET') {
 6 |     return GET(req, res);
 7 |   }
 8 |   
 9 |   return res.status(405).json({ error: 'Method not allowed' });
10 | } 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   /* 渐变色背景浅色模式默认值 */
 7 |   --gradient-from: rgba(0, 0, 0, 0.08);
 8 |   --gradient-to: rgba(0, 0, 0, 0.02);
 9 | }
10 | 
11 | /* 渐变色背景深色模式的值 */
12 | :root[class~="dark"] {
13 |   --gradient-from: rgba(255, 255, 255, 0.15);
14 |   --gradient-to: rgba(255, 255, 255, 0.06);
15 | }
16 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { ChatInput1 } from "@/components/chat-input-1";
 2 | import { Background } from "@/components/background";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <div className="flex-1 flex flex-col h-full relative overflow-hidden">
 7 | 
 8 | 
 9 |       {/* 输入框 */}
10 |       <div className="flex-1 flex w-full items-center justify-center relative z-10">
11 |         <ChatInput1 />
12 |       </div>
13 | 
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/content/markdown/styles.tsx:
--------------------------------------------------------------------------------
 1 | import ReactMarkdown from 'react-markdown';
 2 | import remarkGfm from 'remark-gfm';
 3 | 
 4 | interface MarkdownContentProps {
 5 |   content: string;
 6 |   className?: string;
 7 | }
 8 | 
 9 | export const MarkdownContent = ({ content, className = "" }: MarkdownContentProps) => {
10 |   return (
11 |     <article className={`prose prose-lg dark:prose-invert ${className}`}>
12 |       <ReactMarkdown remarkPlugins={[remarkGfm]}>
13 |         {content}
14 |       </ReactMarkdown>
15 |     </article>
16 |   );
17 | }; 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/app/error.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useEffect } from "react";
 4 | 
 5 | export default function Error({
 6 |   error,
 7 |   reset,
 8 | }: {
 9 |   error: Error;
10 |   reset: () => void;
11 | }) {
12 |   useEffect(() => {
13 |     // Log the error to an error reporting service
14 |     /* eslint-disable no-console */
15 |     console.error(error);
16 |   }, [error]);
17 | 
18 |   return (
19 |     <div>
20 |       <h2>Something went wrong!</h2>
21 |       <button
22 |         onClick={
23 |           // Attempt to recover by trying to re-render the segment
24 |           () => reset()
25 |         }
26 |       >
27 |         Try again
28 |       </button>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/components/login-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Button } from "@nextui-org/button";
 4 | import { UserIcon } from "@heroicons/react/24/solid";
 5 | import { useDisclosure } from "@nextui-org/modal";
 6 | import { LoginModal } from "./login-modal";
 7 | 
 8 | export const LoginButton = () => {
 9 |   const {isOpen, onOpen, onOpenChange} = useDisclosure();
10 | 
11 |   return (
12 |     <>
13 |       <Button 
14 |         isIconOnly 
15 |         radius="full"
16 |         variant="light"
17 |         onPress={onOpen}
18 |       >
19 |         <UserIcon className="w-5 h-5 text-foreground" />
20 |       </Button>
21 | 
22 |       <LoginModal isOpen={isOpen} onOpenChange={onOpenChange} />
23 |     </>
24 |   );
25 | };


--------------------------------------------------------------------------------
/components/user-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Avatar } from "@nextui-org/avatar";
 4 | import { UserIcon as UserRegularIcon } from "@heroicons/react/24/outline";
 5 | import { UserPopover } from "./user-popover";
 6 | 
 7 | export const UserButton = () => {
 8 |   // TODO: 这里应该从用户认证状态中获取用户信息
 9 |   const user = {
10 |     avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=Felix&backgroundColor=ffdfbf,ffd5dc,c0aede&radius=50",
11 |   };
12 | 
13 |   return (
14 |     <UserPopover>
15 |       <Avatar
16 |         as="button"
17 |         size="md"
18 |         src={user.avatar || undefined}
19 |         fallback={
20 |           <UserRegularIcon className="w-5 h-5 text-default-600" />
21 |         }
22 |       />
23 |     </UserPopover>
24 |   );
25 | }; 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/app/providers.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import type { ThemeProviderProps } from "next-themes";
 4 | 
 5 | import * as React from "react";
 6 | import { NextUIProvider } from "@nextui-org/system";
 7 | import { useRouter } from "next/navigation";
 8 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 9 | 
10 | export interface ProvidersProps {
11 |   children: React.ReactNode;
12 |   themeProps?: ThemeProviderProps;
13 | }
14 | 
15 | declare module "@react-types/shared" {
16 |   interface RouterConfig {
17 |     routerOptions: NonNullable<
18 |       Parameters<ReturnType<typeof useRouter>["push"]>[1]
19 |     >;
20 |   }
21 | }
22 | 
23 | export function Providers({ children, themeProps }: ProvidersProps) {
24 |   const router = useRouter();
25 | 
26 |   return (
27 |     <NextUIProvider navigate={router.push}>
28 |       <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
29 |     </NextUIProvider>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/components/background.tsx:
--------------------------------------------------------------------------------
 1 | export const Background = () => {
 2 |   return (
 3 |     <>
 4 |       <div 
 5 |         className="fixed inset-0 flex items-start justify-center pointer-events-none select-none z-0"
 6 |         style={{ paddingTop: '25vh' }}
 7 |       >
 8 |         <span 
 9 |           className="font-black whitespace-nowrap bg-clip-text text-center w-full"
10 |           style={{
11 |             fontSize: "17vw",
12 |             letterSpacing: "0.05em",
13 |             fontFamily: "var(--font-noto-sans)",
14 |             display: "inline-block",
15 |             fontWeight: 900,
16 |             background: `linear-gradient(
17 |               135deg,
18 |               var(--gradient-from) 0%,
19 |               var(--gradient-to) 100%
20 |             )`,
21 |             WebkitBackgroundClip: "text",
22 |             WebkitTextFillColor: "transparent",
23 |           }}
24 |         >有咩帮到你？
25 |         </span>
26 |       </div>
27 |     </>
28 |   );
29 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Next UI
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/server/api/announcement.ts:
--------------------------------------------------------------------------------
 1 | import type { NextApiRequest, NextApiResponse } from 'next';
 2 | import fs from 'fs';
 3 | import path from 'path';
 4 | 
 5 | // 从 Markdown 内容中提取第一个标题
 6 | function extractTitle(content: string): string {
 7 |   // 匹配第一个 # 开头的标题行
 8 |   const titleMatch = content.match(/^#\s+(.+)$/m);
 9 |   return titleMatch ? titleMatch[1] : '系统公告';
10 | }
11 | 
12 | interface AnnouncementResponse {
13 |   title: string;
14 |   content: string;
15 | }
16 | 
17 | interface ErrorResponse {
18 |   error: string;
19 | }
20 | 
21 | export async function GET(
22 |   req: NextApiRequest,
23 |   res: NextApiResponse<AnnouncementResponse | ErrorResponse>
24 | ) {
25 |   try {
26 |     // 读取 Markdown 文件
27 |     const filePath = path.join(process.cwd(), 'content/markdown/announcement.md');
28 |     const content = fs.readFileSync(filePath, 'utf-8');
29 |     
30 |     // 从内容中提取标题
31 |     const title = extractTitle(content);
32 |     
33 |     return res.status(200).json({
34 |       title,
35 |       content,
36 |     });
37 |   } catch (error) {
38 |     console.error('Failed to read announcement:', error);
39 |     return res.status(500).json({ error: 'Failed to load announcement' });
40 |   }
41 | } 


--------------------------------------------------------------------------------
/content/markdown/announcement.md:
--------------------------------------------------------------------------------
 1 | # 🌟 系统公告 v3.0
 2 | 
 3 | 亲爱的用户：
 4 | 
 5 | 感谢您一直以来对我们的支持与信任！我们很高兴地宣布，系统已完成重大升级，带来诸多激动人心的新功能与优化。
 6 | 
 7 | # 🎉 重磅功能更新
 8 | 
 9 | ### 1. 全新AI助手升级
10 | 
11 | - 支持更多场景的智能对话
12 | - 新增文档分析与数据可视化能力
13 | - 支持多语言实时翻译
14 | - 集成GPT-4模型，响应更精准
15 | 
16 | ### 2. 界面与交互优化
17 | 
18 | - 全新的深色模式主题
19 | - 自定义主题配色
20 | - 响应式布局优化
21 | - 新增多种动画效果
22 | 
23 | ### 3. 协作功能增强
24 | 
25 | - 实时多人协作编辑
26 | - 团队空间管理
27 | - 项目进度追踪
28 | - 智能任务分配
29 | 
30 | # ⚡ 性能优化
31 | 
32 | - 页面加载速度提升 **50%**
33 | - 数据同步延迟降低至 **300ms**
34 | - 内存占用减少 **40%**
35 | - 移动端性能显著提升
36 | 
37 | # ⚠️ 系统维护计划
38 | 
39 | > **维护时间**：每周日 02:00-04:00
40 | >
41 | > **注意事项**：
42 | > 1. 维护期间服务将暂时中断
43 | > 2. 请提前保存重要数据
44 | > 3. 可通过系统通知查看具体维护进度
45 | 
46 | # 📱 版本详情
47 | 
48 | ```yaml
49 | 版本号: v3.0.0
50 | 发布日期: 2024-02-20
51 | 兼容性: iOS 13+ / Android 8.0+
52 | 大小: 45MB
53 | ```
54 | 
55 | # 🛠️ 问题修复
56 | 
57 | 1. 修复了在特定情况下数据同步失败的问题
58 | 2. 解决了深色模式下部分界面显示异常的问题
59 | 3. 优化了移动端键盘弹出时的界面适配
60 | 4. 修复了通知推送延迟的问题
61 | 
62 | # 💡 使用建议
63 | 
64 | - 建议所有用户及时更新到最新版本
65 | - 如遇问题请通过以下方式联系我们：
66 |   * 邮箱：support@example.com
67 |   * 电话：400-888-8888
68 |   * 在线客服：7x24小时
69 | 
70 | # 🔮 未来规划
71 | 
72 | 1. **Q2 2024**: AR/VR功能支持
73 | 2. **Q3 2024**: 区块链集成
74 | 3. **Q4 2024**: 全新数据分析平台
75 | 
76 | ---
77 | 
78 | *感谢您的耐心阅读！我们将继续努力为您提供更好的服务。* 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const {nextui} = require("@nextui-org/theme");
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   content: [
 6 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 8 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 9 |     './content/**/*.{js,ts,jsx,tsx,mdx,md}',
10 |     './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
11 |   ],
12 |   theme: {
13 |     extend: {
14 |       fontFamily: {
15 |         sans: ["var(--font-sans)"],
16 |         mono: ["var(--font-mono)"],
17 |       },
18 |     },
19 |   },
20 |   darkMode: "class",
21 |   plugins: [
22 |     nextui({
23 |       themes: {
24 |         light: {
25 |           layout: {
26 |             radius: {
27 |               "xl": "0.75rem",    // 12px
28 |               "2xl": "1rem",    // 16px
29 |               "3xl": "1.5rem",  // 24px
30 |             },
31 |           }
32 |         },
33 |         dark: {
34 |           layout: {
35 |             radius: {
36 |               "xl": "0.75rem",    // 12px
37 |               "2xl": "1rem",    // 16px
38 |               "3xl": "1.5rem",  // 24px
39 |             }
40 |           }
41 |         }
42 |       }
43 |     }),
44 |     require('@tailwindcss/typography'),
45 |   ],
46 | }
47 | 


--------------------------------------------------------------------------------
/components/primitives.ts:
--------------------------------------------------------------------------------
 1 | import { tv } from "tailwind-variants";
 2 | 
 3 | export const title = tv({
 4 |   base: "tracking-tight inline font-semibold",
 5 |   variants: {
 6 |     color: {
 7 |       violet: "from-[#FF1CF7] to-[#b249f8]",
 8 |       yellow: "from-[#FF705B] to-[#FFB457]",
 9 |       blue: "from-[#5EA2EF] to-[#0072F5]",
10 |       cyan: "from-[#00b7fa] to-[#01cfea]",
11 |       green: "from-[#6FEE8D] to-[#17c964]",
12 |       pink: "from-[#FF72E1] to-[#F54C7A]",
13 |       foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
14 |     },
15 |     size: {
16 |       sm: "text-3xl lg:text-4xl",
17 |       md: "text-[2.3rem] lg:text-5xl leading-9",
18 |       lg: "text-4xl lg:text-6xl",
19 |     },
20 |     fullWidth: {
21 |       true: "w-full block",
22 |     },
23 |   },
24 |   defaultVariants: {
25 |     size: "md",
26 |   },
27 |   compoundVariants: [
28 |     {
29 |       color: [
30 |         "violet",
31 |         "yellow",
32 |         "blue",
33 |         "cyan",
34 |         "green",
35 |         "pink",
36 |         "foreground",
37 |       ],
38 |       class: "bg-clip-text text-transparent bg-gradient-to-b",
39 |     },
40 |   ],
41 | });
42 | 
43 | export const subtitle = tv({
44 |   base: "w-full md:w-1/2 my-2 text-lg lg:text-xl text-default-600 block max-w-full",
45 |   variants: {
46 |     fullWidth: {
47 |       true: "!w-full",
48 |     },
49 |   },
50 |   defaultVariants: {
51 |     fullWidth: true,
52 |   },
53 | });
54 | 


--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Navbar as NextUINavbar,
 3 |   NavbarContent,
 4 |   NavbarBrand,
 5 | } from "@nextui-org/navbar";
 6 | import NextLink from "next/link";
 7 | import { LoginButton } from "@/components/login-button";
 8 | import { UserButton } from "@/components/user-button";
 9 | import { Icon } from "@/components/icon";
10 | export const Navbar = () => {
11 |   // const searchInput = (
12 |   //   <Input
13 |   //     aria-label="Search"
14 |   //     classNames={{
15 |   //       inputWrapper: "bg-default-100",
16 |   //       input: "text-sm",
17 |   //     }}
18 |   //     endContent={
19 |   //       <Kbd className="hidden lg:inline-block" keys={["command"]}>
20 |   //         K
21 |   //       </Kbd>
22 |   //     }
23 |   //     labelPlacement="outside"
24 |   //     placeholder="Search..."
25 |   //     startContent={
26 |   //       <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
27 |   //     }
28 |   //     type="search"
29 |   //   />
30 |   // );
31 | 
32 |   // TODO: 这里应该从用户认证状态中获取登录状态
33 |   const isLoggedIn = true;
34 | 
35 |   return (
36 |     <NextUINavbar maxWidth="full" className="z-20">
37 | 
38 |       {/*logo*/}
39 |       <NavbarContent justify="start">
40 |         <NavbarBrand as="li" className="gap-3 max-w-fit">
41 |           <NextLink className="flex justify-start items-center gap-1" href="/">
42 |             <Icon type="gpt" />
43 |             <p className="font-bold text-inherit">ECHO</p>
44 |           </NextLink>
45 |         </NavbarBrand>
46 |       </NavbarContent>
47 |     
48 |       {/* 根据登录状态显示不同按钮 */}
49 |       <NavbarContent justify="end">
50 |         {isLoggedIn ? <UserButton /> : <LoginButton />}
51 |       </NavbarContent>
52 |   
53 | 
54 |     </NextUINavbar>
55 |   );
56 | };
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # EchoAI
  2 | 
  3 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/yourusername/echoai)
  4 | 
  5 | EchoAI 是一个使用 Next.js 15 构建的精美 AI 对话界面演示项目，致力于打造流畅优雅的用户体验。采用 Bun 作为高性能运行时，带来极致的开发体验。
  6 | 
  7 | ## 🌟 主要特性
  8 | 
  9 | - 💅 精致设计
 10 |   - 现代简约的界面风格
 11 |   - 流畅的过渡动画效果
 12 |   - 细腻的交互反馈
 13 |   - 优雅的加载状态展示
 14 | 
 15 | - 🎨 视觉体验
 16 |   - 精心设计的配色方案
 17 |   - 平滑的渐变效果
 18 |   - 细致的阴影层次
 19 |   - 灵动的微交互设计
 20 | 
 21 | - 🌓 主题切换
 22 |   - 深浅色模式无缝切换
 23 |   - 自动适应系统主题
 24 |   - 主题切换过渡动画
 25 |   - 定制化的主题色彩
 26 | 
 27 | - 📱 响应式布局
 28 |   - 完美适配各种设备尺寸
 29 |   - 智能的布局调整
 30 |   - 触控优化的交互体验
 31 |   - 流畅的屏幕适配
 32 | 
 33 | ## 🎯 界面特色
 34 | 
 35 | - 💬 对话界面
 36 |   - 平滑的消息滚动动画
 37 |   - 打字机效果的文本显示
 38 |   - 优雅的加载状态指示
 39 |   - 丝滑的列表过渡效果
 40 | 
 41 | - ✨ 动画效果
 42 |   - 基于 Framer Motion 的流畅动画
 43 |   - 自然的页面切换过渡
 44 |   - 精致的悬浮反馈
 45 |   - 连贯的状态变化动画
 46 | 
 47 | ## 🛠️ 技术栈
 48 | 
 49 | - [Next.js 15](https://nextjs.org/) - React 框架
 50 | - [NextUI v2](https://nextui.org/) - 现代化 UI 组件库
 51 | - [Tailwind CSS](https://tailwindcss.com/) - 原子化 CSS 框架
 52 | - [TypeScript](https://www.typescriptlang.org/) - 类型安全
 53 | - [Framer Motion](https://www.framer.com/motion/) - 专业级动画库
 54 | - [next-themes](https://github.com/pacocoursey/next-themes) - 主题切换
 55 | 
 56 | ## 🚀 快速开始
 57 | 
 58 | 0. 前置要求
 59 | 
 60 | ```bash
 61 | # 安装 Bun
 62 | curl -fsSL https://bun.sh/install | bash
 63 | ```
 64 | 
 65 | 1. 克隆项目
 66 | 
 67 | ```bash
 68 | git clone https://github.com/yourusername/echoai.git
 69 | cd echoai
 70 | ```
 71 | 
 72 | 2. 安装依赖
 73 | 
 74 | ```bash
 75 | bun install  # 比 npm/pnpm 快 20+ 倍
 76 | ```
 77 | 
 78 | 3. 启动开发服务器
 79 | 
 80 | ```bash
 81 | bun dev  # 毫秒级的启动速度
 82 | ```
 83 | 
 84 | 4. 在浏览器中打开 [http://localhost:3000](http://localhost:3000)
 85 | 
 86 | ## 🌩️ 部署
 87 | 
 88 | ### Vercel 部署
 89 | 
 90 | 点击上方的 "Deploy with Vercel" 按钮，即可一键部署到 Vercel 平台。
 91 | 
 92 | ### 手动构建
 93 | 
 94 | ```bash
 95 | bun run build  # 构建生产版本
 96 | bun run start  # 启动生产服务器
 97 | ```
 98 | 
 99 | ## 📝 项目目的
100 | 
101 | 这是一个注重用户体验的前端演示项目，主要展示：
102 | - 精美的 AI 对话界面设计与实现
103 | - 丰富的动画效果与交互体验
104 | - Next.js 15 与 NextUI 的最佳实践
105 | - 响应式设计与主题切换的完美实现
106 | 
107 | ## 📄 许可证
108 | 
109 | 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
110 | 
111 | ## 📧 联系方式
112 | 
113 | 如有问题或建议，欢迎联系我们！
114 | 
115 | - 项目主页：[GitHub](https://github.com/yourusername/echoai)
116 | - 问题反馈：[Issues](https://github.com/yourusername/echoai/issues)
117 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "next-app-template",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "next dev --turbopack",
 7 | 		"build": "next build",
 8 | 		"start": "next start",
 9 | 		"lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix"
10 | 	},
11 | 	"dependencies": {
12 | 		"@heroicons/react": "^2.2.0",
13 | 		"@nextui-org/avatar": "^2.2.4",
14 | 		"@nextui-org/button": "2.2.3",
15 | 		"@nextui-org/card": "^2.2.7",
16 | 		"@nextui-org/chip": "^2.2.4",
17 | 		"@nextui-org/code": "2.2.3",
18 | 		"@nextui-org/form": "^2.1.6",
19 | 		"@nextui-org/input": "2.4.3",
20 | 		"@nextui-org/kbd": "2.2.3",
21 | 		"@nextui-org/link": "2.2.3",
22 | 		"@nextui-org/listbox": "2.3.3",
23 | 		"@nextui-org/modal": "^2.2.5",
24 | 		"@nextui-org/navbar": "2.2.3",
25 | 		"@nextui-org/popover": "^2.3.7",
26 | 		"@nextui-org/scroll-shadow": "^2.3.3",
27 | 		"@nextui-org/select": "^2.4.7",
28 | 		"@nextui-org/snippet": "2.2.4",
29 | 		"@nextui-org/switch": "2.2.3",
30 | 		"@nextui-org/system": "2.4.3",
31 | 		"@nextui-org/tabs": "^2.2.5",
32 | 		"@nextui-org/theme": "2.4.1",
33 | 		"@react-aria/ssr": "3.9.7",
34 | 		"@react-aria/visually-hidden": "3.8.18",
35 | 		"clsx": "2.1.1",
36 | 		"framer-motion": "11.13.1",
37 | 		"intl-messageformat": "^10.5.0",
38 | 		"next": "15.0.4",
39 | 		"next-themes": "^0.4.4",
40 | 		"react": "18.3.1",
41 | 		"react-dom": "18.3.1",
42 | 		"react-icons": "^5.4.0",
43 | 		"react-markdown": "^9.0.1",
44 | 		"remark-gfm": "^4.0.0"
45 | 	},
46 | 	"devDependencies": {
47 | 		"@next/eslint-plugin-next": "15.0.4",
48 | 		"@react-types/shared": "3.25.0",
49 | 		"@tailwindcss/typography": "^0.5.15",
50 | 		"@types/node": "20.5.7",
51 | 		"@types/react": "18.3.3",
52 | 		"@types/react-dom": "18.3.0",
53 | 		"@typescript-eslint/eslint-plugin": "8.11.0",
54 | 		"@typescript-eslint/parser": "8.11.0",
55 | 		"autoprefixer": "10.4.19",
56 | 		"eslint": "^8.57.0",
57 | 		"eslint-config-next": "15.0.4",
58 | 		"eslint-config-prettier": "9.1.0",
59 | 		"eslint-plugin-import": "^2.26.0",
60 | 		"eslint-plugin-jsx-a11y": "^6.4.1",
61 | 		"eslint-plugin-node": "^11.1.0",
62 | 		"eslint-plugin-prettier": "5.2.1",
63 | 		"eslint-plugin-react": "^7.23.2",
64 | 		"eslint-plugin-react-hooks": "^4.6.0",
65 | 		"eslint-plugin-unused-imports": "4.1.4",
66 | 		"postcss": "8.4.49",
67 | 		"prettier": "3.3.3",
68 | 		"raw-loader": "^4.0.2",
69 | 		"tailwind-variants": "0.1.20",
70 | 		"tailwindcss": "3.4.16",
71 | 		"typescript": "5.6.3"
72 | 	}
73 | }
74 | 


--------------------------------------------------------------------------------
/components/sidebar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState, useEffect } from "react";
 4 | import { Button } from "@nextui-org/button";
 5 | import { ChevronRightIcon } from "@nextui-org/shared-icons";
 6 | import { motion, AnimatePresence } from "framer-motion";
 7 | 
 8 | export const Sidebar = () => {
 9 |   const [isOpen, setIsOpen] = useState(false);
10 |   const [isMobile, setIsMobile] = useState(false);
11 | 
12 |   useEffect(() => {
13 |     // 初始化检查
14 |     setIsMobile(window.innerWidth < 768);
15 | 
16 |     // 添加窗口大小变化监听
17 |     const handleResize = () => {
18 |       setIsMobile(window.innerWidth < 768);
19 |     };
20 | 
21 |     window.addEventListener("resize", handleResize);
22 | 
23 |     // 清理监听器
24 |     return () => window.removeEventListener("resize", handleResize);
25 |   }, []);
26 | 
27 |   return (
28 |     <>
29 |       {/* 模糊背景 */}
30 |       <AnimatePresence>
31 |         {isOpen && (
32 |           <motion.div
33 |             initial={{ opacity: 0 }}
34 |             animate={{ opacity: 1 }}
35 |             exit={{ opacity: 0 }}
36 |             transition={{ duration: 0.5, ease: "easeInOut" }}
37 |             className="fixed inset-0 bg-default/50 backdrop-blur-sm z-30"
38 |             onClick={() => setIsOpen(false)}
39 |           />
40 |         )}
41 |       </AnimatePresence>
42 | 
43 |       {/* 主容器 */}
44 |       <motion.div
45 |         className="h-full relative flex flex-col z-40"
46 |         animate={{
47 |           width: isOpen ? (isMobile ? "450px" : "35vw") : "0px",
48 |         }}
49 |         transition={{duration: 0.5,ease: "easeInOut"}}
50 |       >
51 |         {/* 侧边栏内容 */}
52 |         <div className="flex-1 bg-default-50"></div>
53 | 
54 |         {/* 展开按钮 */}
55 |         <Button
56 |           isIconOnly
57 |           className="absolute top-1/2 -translate-y-1/2 left-full bg-default-100 min-w-0 w-8 h-14"
58 |           style={{
59 |             borderTopLeftRadius: 0,
60 |             borderBottomLeftRadius: 0,
61 |             borderTopRightRadius: 99,
62 |             borderBottomRightRadius: 99,
63 |           }}
64 |           onPress={() => setIsOpen(!isOpen)}
65 |         >
66 |           {/* 按钮图标 */}
67 |           <motion.div
68 |             animate={{
69 |               rotate: isOpen ? 180 : 0,
70 |             }}
71 |             transition={{
72 |               duration: 0.7,
73 |               ease: "easeInOut",
74 |             }}
75 |           >
76 |             <ChevronRightIcon
77 |               className="w-6 h-6" // 增大图标尺寸
78 |               strokeWidth={2} // 使用 strokeWidth 属性来控制线条粗细
79 |             />
80 |           </motion.div>
81 |         </Button>
82 |       </motion.div>
83 |     </>
84 |   );
85 | };
86 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/eslintrc.json",
 3 |   "env": {
 4 |     "browser": false,
 5 |     "es2021": true,
 6 |     "node": true
 7 |   },
 8 |   "extends": [
 9 |     "plugin:react/recommended",
10 |     "plugin:prettier/recommended",
11 |     "plugin:react-hooks/recommended",
12 |     "plugin:jsx-a11y/recommended",
13 |     "plugin:@next/next/recommended"
14 |   ],
15 |   "plugins": ["react", "unused-imports", "import", "@typescript-eslint", "jsx-a11y", "prettier"],
16 |   "parser": "@typescript-eslint/parser",
17 |   "parserOptions": {
18 |     "ecmaFeatures": {
19 |       "jsx": true
20 |     },
21 |     "ecmaVersion": 12,
22 |     "sourceType": "module"
23 |   },
24 |   "settings": {
25 |     "react": {
26 |       "version": "detect"
27 |     }
28 |   },
29 |   "rules": {
30 |     "no-console": "warn",
31 |     "react/prop-types": "off",
32 |     "react/jsx-uses-react": "off",
33 |     "react/react-in-jsx-scope": "off",
34 |     "react-hooks/exhaustive-deps": "off",
35 |     "jsx-a11y/click-events-have-key-events": "warn",
36 |     "jsx-a11y/interactive-supports-focus": "warn",
37 |     "prettier/prettier": "warn",
38 |     "no-unused-vars": "off",
39 |     "unused-imports/no-unused-vars": "off",
40 |     "unused-imports/no-unused-imports": "warn",
41 |     "@typescript-eslint/no-unused-vars": [
42 |       "warn",
43 |       {
44 |         "args": "after-used",
45 |         "ignoreRestSiblings": false,
46 |         "argsIgnorePattern": "^_.*?$"
47 |       }
48 |     ],
49 |     "import/order": [
50 |       "warn",
51 |       {
52 |         "groups": [
53 |           "type",
54 |           "builtin",
55 |           "object",
56 |           "external",
57 |           "internal",
58 |           "parent",
59 |           "sibling",
60 |           "index"
61 |         ],
62 |         "pathGroups": [
63 |           {
64 |             "pattern": "~/**",
65 |             "group": "external",
66 |             "position": "after"
67 |           }
68 |         ],
69 |         "newlines-between": "always"
70 |       }
71 |     ],
72 |     "react/self-closing-comp": "warn",
73 |     "react/jsx-sort-props": [
74 |       "warn",
75 |       {
76 |         "callbacksLast": true,
77 |         "shorthandFirst": true,
78 |         "noSortAlphabetically": false,
79 |         "reservedFirst": true
80 |       }
81 |     ],
82 |     "padding-line-between-statements": [
83 |       "warn",
84 |       {"blankLine": "always", "prev": "*", "next": "return"},
85 |       {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
86 |       {
87 |         "blankLine": "any",
88 |         "prev": ["const", "let", "var"],
89 |         "next": ["const", "let", "var"]
90 |       }
91 |     ]
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "@/styles/globals.css";
 2 | import { Metadata, Viewport } from "next";
 3 | import { Link } from "@nextui-org/link";
 4 | import clsx from "clsx";
 5 | import { Providers } from "./providers";
 6 | import { siteConfig } from "@/config/site";
 7 | import { fontSans } from "@/config/fonts";
 8 | import { Navbar } from "@/components/navbar";
 9 | import { Sidebar } from "@/components/sidebar";
10 | import { Noto_Sans_SC } from 'next/font/google';
11 | 
12 | const notoSansSC = Noto_Sans_SC({
13 |   subsets: ['latin'],
14 |   weight: ['100', '300', '400', '500', '700', '900'],
15 |   display: 'swap',
16 |   variable: '--font-noto-sans',
17 | });
18 | 
19 | export const metadata: Metadata = {
20 |   title: {
21 |     default: siteConfig.name,
22 |     template: `%s - ${siteConfig.name}`,
23 |   },
24 |   description: siteConfig.description,
25 |   icons: {
26 |     icon: "/favicon.ico",
27 |   },
28 | };
29 | 
30 | export const viewport: Viewport = {
31 |   themeColor: [
32 |     { media: "(prefers-color-scheme: light)", color: "white" },
33 |     { media: "(prefers-color-scheme: dark)", color: "black" },
34 |   ],
35 | };
36 | 
37 | export default function RootLayout({
38 |   children,
39 | }: {
40 |   children: React.ReactNode;
41 | }) {
42 |   return (
43 |     <html suppressHydrationWarning lang="ch">
44 |       <head />
45 |       
46 |       <body
47 |         className={clsx(
48 |           "bg-background font-sans antialiased",
49 |           fontSans.variable,
50 |           notoSansSC.variable
51 |         )}
52 |       >
53 | 
54 |         {/* 里面的都可以切换主题 */}
55 |         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
56 | 
57 |           {/* 根布局    固定视口高度，不允许滚动，flex 用于侧边栏和右侧界面水平布局 */}
58 |           <div className="flex h-screen">
59 | 
60 |             {/* 侧边栏 */}
61 |             <Sidebar />
62 | 
63 |             {/* 右侧界面   flex-col 用于导航栏，主内容，页脚的垂直布局*/}
64 |             <div className="flex-1 flex flex-col ">
65 | 
66 |               {/* 导航栏 */}
67 |               <Navbar />
68 | 
69 |               {/* 主内容区域 - 允许内容滚动 */}
70 |               <main className="flex-1 flex overflow-y-auto">
71 |                 {children}
72 |               </main>
73 | 
74 |               {/* 页脚 - 固定在底部 */}
75 |               <footer className="w-full flex items-center justify-center pb-2">
76 |                 <Link
77 |                   isExternal
78 |                   className="flex items-center gap-1 text-current"
79 |                   href="https://quqi.pro"
80 |                   title="QuQi AI"
81 |                 >
82 |                   <span className="text-default-600">Powered by</span>
83 |                   <p className="text-primary">QuQi AI</p>
84 |                 </Link>
85 |               </footer>
86 | 
87 |             </div>
88 |           </div>
89 |         </Providers>
90 |       </body>
91 |     </html>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/components/login-modal.tsx:
--------------------------------------------------------------------------------
 1 | import {  Modal,  ModalContent,  ModalBody,  ModalFooter} from "@nextui-org/modal";
 2 | import {Tabs, Tab} from "@nextui-org/tabs";
 3 | import { Button } from "@nextui-org/button";
 4 | import { Input } from "@nextui-org/input";
 5 | import { Link } from "@nextui-org/link";
 6 | import { useState } from "react";
 7 | import { ArrowRightStartOnRectangleIcon, UserPlusIcon, RocketLaunchIcon, SparklesIcon } from "@heroicons/react/24/outline";
 8 | 
 9 | interface LoginModalProps {
10 |     isOpen: boolean;                         // 控制弹窗是否显示的状态
11 |     onOpenChange: (isOpen: boolean) => void; // 状态改变时的回调函数
12 | }
13 | 
14 | export const LoginModal = ({ isOpen, onOpenChange }: LoginModalProps) => {
15 |   const [selected, setSelected] = useState("login");
16 | 
17 |   return (
18 |     <Modal 
19 |       isOpen={isOpen} 
20 |       onOpenChange={onOpenChange}
21 |       placement="center"
22 |       hideCloseButton
23 |       backdrop="blur"
24 |     >
25 | 
26 |       <ModalContent>
27 |         {/* nextui 自带的 onClose 方法 */}
28 |         {(onClose) => (
29 |           <>
30 |           
31 |             <ModalBody>
32 |             <Tabs
33 |             fullWidth
34 |             aria-label="Options"
35 |             selectedKey={selected}
36 |             size="lg"
37 |             onSelectionChange={(key) => setSelected(key as string)}
38 |           >
39 |             {/* 登录 */}
40 |             <Tab 
41 |               key="login" 
42 |               title={
43 |                 <div className="flex items-center gap-2">
44 |                   <ArrowRightStartOnRectangleIcon className="h-6" />
45 |                   <span>登录</span>
46 |                 </div>
47 |               }
48 |             >
49 |               <form className="flex flex-col gap-4">
50 |                 <Input size="lg" placeholder="手机号" type="phone" className="my-2"/>
51 |                 <Input size="lg" placeholder="密码" type="password" className="mb-2"/>
52 |                 <p className="text-center text-sm text-default-600">
53 |                   没账号吗？{" "}
54 |                   <Link size="sm" onPress={() => setSelected("sign-up")}>去注册</Link>
55 |                 </p>
56 |                 <Button 
57 |                 size="lg"
58 |                 fullWidth 
59 |                 radius="full" 
60 |                 color="primary" 
61 |                 endContent={<RocketLaunchIcon className="h-6 w-6" />}>
62 |                 </Button>
63 |               </form>
64 |             </Tab>
65 | 
66 |             {/* 注册 */}
67 |             <Tab 
68 |               key="sign-up" 
69 |               title={
70 |                 <div className="flex items-center gap-2">
71 |                   <UserPlusIcon className="h-6" />
72 |                   <span>注册</span>
73 |                 </div>
74 |               }
75 |             >
76 |             <form className="flex flex-col" style={{ gap: '24px' }}>
77 |                 <Input size="lg" placeholder="用户名" type="password" />
78 |                 <Input size="lg" placeholder="手机号" type="email" />
79 |                 <Input size="lg" placeholder="密码" type="password" className="mb-2"/>
80 |                 <Button 
81 |                 size="lg"
82 |                 fullWidth 
83 |                 radius="full"     
84 |                 color="primary" 
85 |                 endContent={<SparklesIcon className="h-6 w-6" />}>
86 |                 </Button>
87 |               </form>
88 |             </Tab>
89 |           </Tabs>
90 |             </ModalBody>
91 |           </>
92 |         )}
93 |       </ModalContent>
94 |     </Modal>
95 |   );
96 | };


--------------------------------------------------------------------------------
/components/model-select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import React, { useState, useCallback } from "react";
  3 | import { Popover, PopoverTrigger, PopoverContent } from "@nextui-org/popover";
  4 | import { Button } from "@nextui-org/button";
  5 | import { CheckIcon } from "@heroicons/react/24/outline";
  6 | import { Icon } from "./icon";
  7 | import dynamic from 'next/dynamic';
  8 | // 定义模型类型
  9 | type ModelType = {
 10 |   key: string;
 11 |   label: string;
 12 |   icon: 'gpt' | 'claude' | 'gemini';
 13 |   description: string;
 14 | };
 15 | 
 16 | // 整合所有模型信息到 modelList
 17 | export const modelList: ModelType[] = [
 18 |   {
 19 |     key: "GPT",
 20 |     label: "GPT-PLUS",
 21 |     icon: 'gpt',
 22 |     description: "OpenAI 出品的模型，擅长对话和创作"
 23 |   },
 24 |   {
 25 |     key: "Claude",
 26 |     label: "Claude-PLUS", 
 27 |     icon: 'claude',
 28 |     description: "Anthropic 出品的模型，擅长分析和推理"
 29 |   },
 30 |   {
 31 |     key: "Gemini",
 32 |     label: "Gemini-PLUS",
 33 |     icon: 'gemini',
 34 |     description: "Google 出品的模型，擅长多模态理解"
 35 |   }
 36 | ];
 37 | 
 38 | const LoginModal = dynamic(() => import('./login-modal').then(mod => mod.LoginModal), {
 39 |   loading: () => <div>加载中...</div>
 40 | });
 41 | 
 42 | export const ModelSelect = () => {
 43 |   const [selectedModel, setSelectedModel] = useState<ModelType>(modelList[0]);
 44 |   const [isOpen, setIsOpen] = useState(false);
 45 | 
 46 |   const handleModelSelect = useCallback((item: ModelType) => {
 47 |     setSelectedModel(item);
 48 |     requestAnimationFrame(() => {
 49 |       setIsOpen(false);
 50 |     });
 51 |   }, []);
 52 | 
 53 |   return (
 54 |     <Popover 
 55 |       placement="top-end" 
 56 |       backdrop="blur"
 57 |       isOpen={isOpen}
 58 |       onOpenChange={setIsOpen}
 59 |     >
 60 |       <PopoverTrigger>
 61 |         <Button 
 62 |           variant="light" 
 63 |           radius="lg"
 64 |           className="bg-default-50 hover:bg-default-200"
 65 |           style={{
 66 |             height: '32px',
 67 |             justifyContent: 'flex-start',
 68 |             marginBottom: '6px',
 69 |             marginRight: '1px',
 70 |             fontSize: '13px',
 71 |             fontWeight: 'bold'
 72 |           }}          
 73 |           startContent={
 74 |             <Icon type={selectedModel.icon} size={20} />
 75 |           }
 76 |         >
 77 |           {selectedModel.label}
 78 |         </Button>
 79 |       </PopoverTrigger>
 80 |       
 81 |       <PopoverContent className="w-[320px]">
 82 |         <div className="p-2">
 83 |           {modelList.map((item) => (
 84 |             <Button
 85 |               key={item.key}
 86 |               variant="light"
 87 |               className="w-full justify-start mb-2 last:mb-0"
 88 |               style={selectedModel.key === item.key ? {
 89 |                 border: '1.5px dashed grey'
 90 |               } : undefined}
 91 |               startContent={<Icon type={item.icon} size={20} />}
 92 |               endContent={
 93 |                 selectedModel.key === item.key ? (
 94 |                   <CheckIcon className="h-4 w-4 text-foreground" style={{ strokeWidth: 3 }} />
 95 |                 ) : null
 96 |               }
 97 |               onPress={() => handleModelSelect(item)}
 98 |             >
 99 |               <div className="flex flex-col items-start">
100 |                 <span>{item.label}</span>
101 |                 <span className="text-xs text-default-400">{item.description}</span>
102 |               </div>
103 |             </Button>
104 |           ))}
105 |         </div>
106 |       </PopoverContent>
107 |     </Popover>
108 |   );
109 | };


--------------------------------------------------------------------------------
/components/file-upload-button.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Popover, PopoverTrigger, PopoverContent } from "@nextui-org/popover";
 4 | import { Button } from "@nextui-org/button";
 5 | import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
 6 | import { BsFileEarmarkPlusFill } from "react-icons/bs";
 7 | 
 8 | import {
 9 |   ArrowUpTrayIcon, // 上传
10 |   DocumentTextIcon, // PDF
11 |   PresentationChartBarIcon, // PPT
12 |   DocumentIcon, // Word
13 |   PhotoIcon, // 图片
14 |   FolderPlusIcon, // 文件夹
15 | } from "@heroicons/react/24/outline";
16 | import { useState } from "react";
17 | 
18 | export const FileUploadButton = () => {
19 |   const [isDragging, setIsDragging] = useState(false);
20 | 
21 |   const handleDrop = (e: React.DragEvent) => {
22 |     e.preventDefault();
23 |     setIsDragging(false);
24 |     const files = e.dataTransfer.files;
25 |     console.log(files);
26 |   };
27 | 
28 |   return (
29 |     <Popover backdrop="blur" placement="top-start">
30 |       <PopoverTrigger>
31 |         <Button radius="full" size="sm" className="h-8 min-w-0 w-12 ml-2 bg-default-50 hover:bg-default-200">
32 |           <ArrowUpTrayIcon className="h-5"
33 |           style={{ strokeWidth: 3 }}/>
34 |         </Button>
35 |       </PopoverTrigger>
36 | 
37 |       <PopoverContent className="p-0">
38 |         <Card>
39 |             <CardHeader className="flex-col gap-2" style={{ padding: "1.5rem 1.5rem 1rem 1.5rem" }}>
40 |             {/* 文件 */}
41 |             <div className="flex gap-3">
42 |               <div className="flex items-center gap-1">
43 |                 <DocumentIcon className="h-5" style={{ strokeWidth: 2.5, color: '#2563EB' }} />
44 |                 Word
45 |               </div>
46 |               <div className="flex items-center gap-1">
47 |                 <DocumentTextIcon className="h-5" style={{ strokeWidth: 2.5, color: '#EF4444' }} />
48 |                 PDF
49 |               </div>
50 |               <div className="flex items-center gap-1">
51 |                 <PresentationChartBarIcon className="h-5" style={{ strokeWidth: 2.5, color: '#F97316' }} />
52 |                 PPT
53 |               </div>
54 |               <div className="flex items-center gap-1">
55 |                 <PhotoIcon className="h-5" style={{ strokeWidth: 2.5, color: '#22C55E' }} />
56 |                 图片
57 |               </div>
58 |             </div>
59 |             
60 |           </CardHeader>
61 | 
62 |           <CardBody className="flex justify-center items-center" style={{ padding: "0.5rem 1rem 1.5rem 1rem" }}>
63 |             <Button
64 |               style={{ height: "12rem", width: "16rem", border: "2px dashed" }} // 添加内联样式
65 |               className={`${isDragging ? "border-primary bg-primary/10" : "border-default-300"}`}
66 |               variant="ghost"
67 |               onDragOver={(e) => {
68 |                 e.preventDefault();
69 |                 setIsDragging(true);
70 |               }}
71 |               onDragLeave={() => setIsDragging(false)}
72 |               onDrop={handleDrop}
73 |               onPress={() => {
74 |                 // 创建一个隐藏的文件输入框并触发点击
75 |                 const input = document.createElement("input");
76 |                 input.type = "file";
77 |                 input.accept =
78 |                   ".pdf,.ppt,.pptx,.doc,.docx,.jpg,.jpeg,.png,.gif,.svg";
79 |                 input.multiple = true;
80 |                 input.click();
81 |                 input.onchange = (e) => {
82 |                   const files = (e.target as HTMLInputElement).files;
83 |                   if (files) {
84 |                     console.log(files);
85 |                     // 这里处理文件上传逻辑
86 |                   }
87 |                 };
88 |               }}
89 |             >
90 |               <FolderPlusIcon className="h-8 w-8" style={{ strokeWidth: 2.5 }} />
91 |             </Button>
92 |           </CardBody>
93 |         </Card>
94 |       </PopoverContent>
95 |     </Popover>
96 |   );
97 | };
98 | 


--------------------------------------------------------------------------------
/components/theme-switch.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { FC } from "react";
  4 | import { VisuallyHidden } from "@react-aria/visually-hidden";
  5 | import { SwitchProps, useSwitch } from "@nextui-org/switch";
  6 | import { useTheme } from "next-themes";
  7 | import { useIsSSR } from "@react-aria/ssr";
  8 | import clsx from "clsx";
  9 | import { motion } from "framer-motion";
 10 | 
 11 | export interface ThemeSwitchProps {
 12 |   className?: string;
 13 |   classNames?: SwitchProps["classNames"];
 14 |   size?: number;
 15 | }
 16 | 
 17 | export const ThemeSwitch: FC<ThemeSwitchProps> = ({
 18 |   className,
 19 |   classNames,
 20 |   size = 24,
 21 | }) => {
 22 |   const { theme, setTheme } = useTheme();
 23 |   const isSSR = useIsSSR();
 24 | 
 25 |   const onChange = () => {
 26 |     theme === "light" ? setTheme("dark") : setTheme("light");
 27 |   };
 28 | 
 29 |   const {
 30 |     Component,
 31 |     slots,
 32 |     isSelected,
 33 |     getBaseProps,
 34 |     getInputProps,
 35 |     getWrapperProps,
 36 |   } = useSwitch({
 37 |     isSelected: theme === "light" || isSSR,
 38 |     "aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
 39 |     onChange,
 40 |   });
 41 | 
 42 |   return (
 43 |     <Component
 44 |       {...getBaseProps({
 45 |         className: clsx(
 46 |           "px-px transition-opacity hover:opacity-80",
 47 |           "cursor-pointer touch-manipulation",
 48 |           "w-12 h-12 flex items-center justify-center",
 49 |           className,
 50 |           classNames?.base,
 51 |         ),
 52 |       })}
 53 |     >
 54 |       <VisuallyHidden>
 55 |         <input {...getInputProps()} />
 56 |       </VisuallyHidden>
 57 |       <div
 58 |         {...getWrapperProps()}
 59 |         className={slots.wrapper({
 60 |           class: clsx(
 61 |             [
 62 |               "w-auto h-auto",
 63 |               "bg-transparent",
 64 |               "rounded-lg",
 65 |               "flex items-center justify-center",
 66 |               "group-data-[selected=true]:bg-transparent",
 67 |               "!text-default-500",
 68 |               "pt-px",
 69 |               "px-0",
 70 |               "mx-0",
 71 |             ],
 72 |             classNames?.wrapper,
 73 |           ),
 74 |         })}
 75 |       >
 76 |         <motion.div
 77 |           initial={{ x: -32, y: 10, opacity: 0, rotate: -45 }}
 78 |           animate={{ x: 0, y: 0, opacity: 1, rotate: 0 }}
 79 |           exit={{ x: 32, y: 10, opacity: 0, rotate: 45 }}
 80 |           transition={{ 
 81 |             duration: 0.5,
 82 |             ease: "easeInOut"
 83 |           }}
 84 |           key={theme === "light" ? "light" : "dark"}
 85 |           style={{ 
 86 |             position: "relative",
 87 |             transformOrigin: "center"
 88 |           }}
 89 |         >
 90 |           {theme === "light" ? (
 91 |             <svg
 92 |               xmlns="http://www.w3.org/2000/svg"
 93 |               width={size}
 94 |               height={size}
 95 |               viewBox="0 0 24 24"
 96 |               fill="none"
 97 |               stroke="#FFB800"
 98 |               strokeWidth="2"
 99 |               strokeLinecap="round"
100 |               strokeLinejoin="round"
101 |               style={{ color: '#FFB800' }}
102 |             >
103 |               <circle cx="12" cy="12" r="4" fill="#FFB800" />
104 |               <path d="M12 2v2" />
105 |               <path d="M12 20v2" />
106 |               <path d="M4.93 4.93l1.41 1.41" />
107 |               <path d="M17.66 17.66l1.41 1.41" />
108 |               <path d="M2 12h2" />
109 |               <path d="M20 12h2" />
110 |               <path d="M6.34 17.66l-1.41 1.41" />
111 |               <path d="M19.07 4.93l-1.41 1.41" />
112 |             </svg>
113 |           ) : (
114 |             <svg
115 |               xmlns="http://www.w3.org/2000/svg"
116 |               width={size}
117 |               height={size}
118 |               viewBox="0 0 24 24"
119 |               fill="none"
120 |               stroke="#CBD5E1"
121 |               strokeWidth="2"
122 |               strokeLinecap="round"
123 |               strokeLinejoin="round"
124 |               style={{ color: '#CBD5E1' }}
125 |             >
126 |               <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" fill="#CBD5E1" />
127 |             </svg>
128 |           )}
129 |         </motion.div>
130 |       </div>
131 |     </Component>
132 |   );
133 | };
134 | 


--------------------------------------------------------------------------------
/components/chat-input-1.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { Textarea } from "@nextui-org/input";
  4 | import { Button } from "@nextui-org/button";
  5 | import { useState } from "react";
  6 | import { motion } from "framer-motion";
  7 | import { FileUploadButton } from "./file-upload-button";
  8 | import { ModelSelect } from "./model-select";
  9 | export const ChatInput1 = () => {
 10 |   const [inputValue, setInputValue] = useState("");
 11 |   const [isFocused, setIsFocused] = useState(false);
 12 | 
 13 |   return (
 14 |     /* 主容器 */
 15 |     <motion.div 
 16 |       className="w-96 md:w-1/2 flex flex-col"
 17 |       animate={{ 
 18 |         width: isFocused ? "70%" : "50%"
 19 |       }}
 20 |       transition={{ duration: 0.5, ease: "easeInOut" }}
 21 |     >
 22 | 
 23 |       {/* 选项排 */}
 24 |       <div className="flex items-center w-full">
 25 |         <div className="flex-shrink-0">
 26 |           <FileUploadButton />
 27 |         </div>
 28 |         <div className="flex-grow" />
 29 |         <div className="flex-shrink-0">
 30 |           <ModelSelect />
 31 |         </div>
 32 |       </div>
 33 | 
 34 | 
 35 |       {/* 输入框 */}
 36 |       <Textarea 
 37 |         size="lg"
 38 |         minRows={1}
 39 |         maxRows={5}
 40 |         placeholder="想问啥问啥" 
 41 |         value={inputValue}
 42 |         onValueChange={setInputValue}
 43 |         onFocus={() => setIsFocused(true)}
 44 |         onBlur={() => setIsFocused(false)}
 45 |         classNames={{
 46 |           base: "max-w-full flex-nowrap [&_textarea::placeholder]:whitespace-nowrap [&_textarea::placeholder]:text-center [&_textarea::placeholder]:w-full",
 47 |           inputWrapper: "rounded-3xl flex-nowrap whitespace-nowrap h-[52px]",
 48 |           input: "text-2xl py-2 overflow-x-auto whitespace-nowrap placeholder:text-center",
 49 |           innerWrapper: "!h-full",
 50 |         }}
 51 | 
 52 | 
 53 |         /* Logo 在输入框开头 */
 54 |         startContent={
 55 |           <motion.div 
 56 |             animate={{ 
 57 |               opacity: isFocused||inputValue.trim() ? 0 : 1,
 58 |             }}
 59 |             transition={{ duration: 0.3 }}
 60 |             style={{ paddingTop: '0.6rem', paddingLeft: '0.6rem' }}
 61 |           >
 62 |             <svg 
 63 |               xmlns="http://www.w3.org/2000/svg" 
 64 |               width="26" 
 65 |               height="26" 
 66 |               viewBox="0 0 24 24" 
 67 |               fill="none" 
 68 |               stroke="currentColor" 
 69 |               strokeWidth="2.3" 
 70 |               strokeLinecap="round" 
 71 |               strokeLinejoin="round"
 72 |             >
 73 |               <rect x="3" y="11" width="18" height="10" rx="2"/>
 74 |               <circle cx="12" cy="5" r="2"/>
 75 |               <path d="M12 7v4"/>
 76 |               <line x1="8" y1="16" x2="8" y2="16"/>
 77 |               <line x1="16" y1="16" x2="16" y2="16"/>
 78 |             </svg>
 79 |           </motion.div>
 80 |         }
 81 |         
 82 |         /* 按钮  在输入框末尾 */
 83 |         endContent={
 84 |           <motion.div 
 85 |             initial={{ opacity: 0 }}
 86 |             animate={{ 
 87 |               opacity: inputValue.trim() ? 1 : 0,
 88 |               scale: inputValue.trim() ? 1 : 0.8 
 89 |             }}
 90 |             style={{
 91 |               pointerEvents: inputValue.trim() ? "auto" : "none",  // 控制是否可以交互
 92 |               marginTop: '0.3rem'
 93 |             } as any}
 94 |             transition={{ 
 95 |               duration: 1,
 96 |               ease: "easeInOut",
 97 |               type: "spring",
 98 |               stiffness: 100,
 99 |               damping: 10
100 |             }}
101 |             className="h-full flex items-center justify-center"
102 |           >
103 |             <Button 
104 |               isIconOnly
105 |               className="rounded-full bg-transparent"
106 |             >
107 |               <svg
108 |                 xmlns="http://www.w3.org/2000/svg"
109 |                 viewBox="0 0 24 24"
110 |                 fill="none"
111 |                 stroke="currentColor"
112 |                 strokeWidth="2.3"
113 |                 strokeLinecap="round"
114 |                 strokeLinejoin="round"
115 |                 className="w-6 h-6"
116 |               >
117 |                 <line x1="22" y1="2" x2="11" y2="13" />
118 |                 <polygon points="22 2 15 22 11 13 2 9 22 2" />
119 |               </svg>
120 |             </Button>
121 |           </motion.div>
122 |         }
123 |       />
124 |     </motion.div>
125 |   );
126 | };
127 | 


--------------------------------------------------------------------------------
/components/announcement.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Modal,
  3 |   ModalContent,
  4 |   ModalHeader,
  5 |   ModalBody,
  6 |   ModalFooter,
  7 | } from "@nextui-org/modal";
  8 | import { Button } from "@nextui-org/button";
  9 | import {ScrollShadow} from "@nextui-org/scroll-shadow";
 10 | import { useEffect, useState, useRef } from "react";
 11 | import { IoEyeSharp } from "react-icons/io5";
 12 | 
 13 | // 导入 Markdown 组件
 14 | import { MarkdownContent } from "@/content/markdown/styles";
 15 | 
 16 | interface AnnouncementProps {
 17 |     isOpen: boolean;
 18 |     onOpenChange: (isOpen: boolean) => void;
 19 | }
 20 | 
 21 | // 优化后的动画配置
 22 | const motionConfig = {
 23 |   variants: {
 24 |     enter: {
 25 |       opacity: 1,
 26 |       y: 0,
 27 |       transition: {
 28 |         duration: 0.5,
 29 |         ease: "easeOut"
 30 |       }
 31 |     },
 32 |     exit: {
 33 |       opacity: 0,
 34 |       y: -100,
 35 |       transition: {
 36 |         duration: 0.3,
 37 |         ease: "easeIn"
 38 |       }
 39 |     }
 40 |   }
 41 | } as const;
 42 | 
 43 | interface AnnouncementData {
 44 |   title: string;
 45 |   content: string;
 46 | }
 47 | 
 48 | export const Announcement = ({ isOpen, onOpenChange }: AnnouncementProps) => {
 49 |   const [announcement, setAnnouncement] = useState<AnnouncementData>({
 50 |     title: "",
 51 |     content: "",
 52 |   });
 53 |   const [error, setError] = useState<string>("");
 54 |   const [showButton, setShowButton] = useState(false);
 55 |   const contentRef = useRef<HTMLDivElement>(null);
 56 | 
 57 |   useEffect(() => {
 58 |     if (isOpen) {
 59 |       setShowButton(false);
 60 |       const fetchAnnouncement = async () => {
 61 |         try {
 62 |           const response = await fetch('/api/announcement');
 63 |           if (!response.ok) {
 64 |             throw new Error('Failed to fetch announcement');
 65 |           }
 66 |           const data = await response.json();
 67 |           setAnnouncement(data);
 68 |           setError("");
 69 |         } catch (err) {
 70 |           console.error('Error fetching announcement:', err);
 71 |           setError('加载公告失败，请稍后再试');
 72 |         }
 73 |       };
 74 |       fetchAnnouncement();
 75 |     }
 76 |   }, [isOpen]);
 77 | 
 78 |   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
 79 |     const element = e.target as HTMLDivElement;
 80 |     const reachedBottom = Math.abs(
 81 |       element.scrollHeight - element.clientHeight - element.scrollTop
 82 |     ) <= 1;
 83 |     
 84 |     if (reachedBottom) {
 85 |       setShowButton(true);
 86 |     }
 87 |   };
 88 | 
 89 |   return (
 90 |     <Modal 
 91 |       isOpen={isOpen} 
 92 |       onOpenChange={onOpenChange}
 93 |       backdrop="blur"
 94 |       size="3xl"
 95 |       hideCloseButton
 96 |       scrollBehavior="inside"
 97 |       isDismissable={false}
 98 |       motionProps={motionConfig}
 99 |       classNames={{
100 |         base: "bg-background dark:bg-background will-change-transform transform-gpu",
101 |         header: "border-b border-divider px-6",
102 |         body: "p-6",
103 |         footer: "border-t border-divider px-6 py-4",
104 |         closeButton: "hidden",
105 |       }}
106 |     >   
107 |       <ModalContent>
108 |         {(onClose) => (
109 |           <>
110 |             <ModalHeader className="text-2xl font-bold">
111 |                 {announcement.title || '加载中...'}
112 |             </ModalHeader>
113 | 
114 |             <ModalBody style={{padding: "2rem"}}>
115 |               <ScrollShadow 
116 |                 ref={contentRef}
117 |                 className="h-[65vh]"
118 |                 hideScrollBar={true}
119 |                 onScroll={handleScroll}
120 |               >
121 |                 {error ? (
122 |                   <div className="text-danger text-center p-4 text-lg">{error}</div>
123 |                 ) : announcement.content ? (
124 |                   <MarkdownContent content={announcement.content} />
125 |                 ) : (
126 |                   <div className="text-center p-4 text-lg">加载中...</div>
127 |                 )}
128 |               </ScrollShadow>
129 |             </ModalBody>
130 | 
131 |             <ModalFooter className="flex justify-center">
132 |               {showButton ? (
133 |                 <Button 
134 |                   isIconOnly
135 |                   color="primary"
136 |                   radius="full"
137 |                   size="lg"
138 |                   onPress={() => onClose()}
139 |                   aria-label="确认已阅读"
140 |                   style={{width: "120px", height: "50px"}}
141 |                 >
142 |                   <IoEyeSharp className="w-6 h-6" />
143 |                 </Button>
144 |               ) : null}
145 |             </ModalFooter>
146 |           </>
147 |         )}
148 |       </ModalContent>
149 |     </Modal>
150 |   );
151 | };
152 | 


--------------------------------------------------------------------------------
/components/icon.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { IconSvgProps } from '@/types';
 3 | 
 4 | // Icon 组件用于统一管理所有 SVG 图标
 5 | export const Icon: React.FC<IconSvgProps & { type: 'gpt' | 'claude' | 'gemini' }> = ({
 6 |   type,
 7 |   size = 24,
 8 |   className = '',
 9 |   ...props
10 | }) => {
11 |   // SVG 基础属性
12 |   const baseProps = {
13 |     className: `icon ${className}`,
14 |     width: size,
15 |     height: size,
16 |     xmlns: "http://www.w3.org/2000/svg",
17 |     viewBox: "0 0 1024 1024",
18 |     version: "1.1",
19 |     style: {
20 |       color: type === 'gpt' ? '#10A37F' : // OpenAI 品牌绿色
21 |              type === 'claude' ? '#D97757' : // Claude 品牌橙红色
22 |              type === 'gemini' ? '#1A73E8' : // Google 品牌蓝色
23 |              'currentColor'
24 |     },
25 |     ...props
26 |   };
27 | 
28 |   // 根据类型返回对应的 SVG 图标
29 |   switch (type) {
30 |     case 'gpt':
31 |       return (
32 |         <svg {...baseProps}>
33 |           <path d="M939.7888 421.4144a248.832 248.832 0 0 0-21.376-204.3904 251.6608 251.6608 0 0 0-271.0656-120.7424A248.832 248.832 0 0 0 459.648 12.608a251.6864 251.6864 0 0 0-240.0896 174.2592 248.9216 248.9216 0 0 0-166.4 120.704 251.6992 251.6992 0 0 0 30.9504 295.1168 248.832 248.832 0 0 0 21.3888 204.3904 251.6864 251.6864 0 0 0 271.0656 120.7424 248.832 248.832 0 0 0 187.6864 83.6736 251.6736 251.6736 0 0 0 240.1664-174.3488 248.9216 248.9216 0 0 0 166.4-120.7168 251.6992 251.6992 0 0 0-31.04-295.0144zM564.352 946.2016a186.6624 186.6624 0 0 1-119.8208-43.328c1.5104-0.832 4.1728-2.2784 5.9008-3.3536L649.3184 784.64a32.3328 32.3328 0 0 0 16.3328-28.288V475.9296l84.0704 48.5376a3.008 3.008 0 0 1 1.6384 2.304v232.2176a187.4304 187.4304 0 0 1-187.008 187.2z m-402.1888-171.776a186.5472 186.5472 0 0 1-22.336-125.44c1.472 0.8832 4.0576 2.4576 5.9008 3.52l198.8992 114.8928a32.3712 32.3712 0 0 0 32.6656 0l242.8288-140.2112v97.0752a3.008 3.008 0 0 1-1.2032 2.5856l-201.0496 116.0832a187.392 187.392 0 0 1-255.7056-68.5056zM109.824 340.224a186.5088 186.5088 0 0 1 97.4336-82.0736c0 1.7152-0.1024 4.736-0.1024 6.848v229.7728a32.32 32.32 0 0 0 16.3328 28.288l242.816 140.1856-84.0576 48.5376a3.008 3.008 0 0 1-2.8416 0.256L178.3296 595.84A187.392 187.392 0 0 1 109.824 340.224z m690.688 160.7296L557.696 360.7424l84.0576-48.512a3.008 3.008 0 0 1 2.8288-0.256l201.088 116.0832a187.2256 187.2256 0 0 1-28.928 337.8176V529.2416a32.3072 32.3072 0 0 0-16.2304-28.288z m83.6736-125.9264c-1.4848-0.9088-4.0576-2.4704-5.9136-3.5328l-198.8864-114.88a32.4096 32.4096 0 0 0-32.6656 0L403.8912 396.8256v-97.088a3.008 3.008 0 0 1 1.2032-2.5856l201.0496-115.9808a187.2128 187.2128 0 0 1 278.0416 193.856zM358.1824 548.0576l-84.096-48.5376a3.008 3.008 0 0 1-1.6256-2.304V264.9984a187.2128 187.2128 0 0 1 307.008-143.744 172.8 172.8 0 0 0-5.9136 3.3408l-198.8864 114.88a32.32 32.32 0 0 0-16.3456 28.288l-0.1408 280.2944z m45.6704-98.4576L512 387.136l108.16 62.4256v124.8896L512 636.8768l-108.16-62.4256v-124.8512z" fill="currentColor" />
34 |         </svg>
35 |       );
36 |     case 'claude':
37 |       return (
38 |         <svg {...baseProps} viewBox="0 0 1025 1024">
39 |           <path d="M200.9088 680.7552l201.4208-112.9472 3.3792-9.8304-3.3792-5.4272h-9.8304l-33.792-2.048-114.9952-3.072-99.84-4.3008-96.6656-5.12-24.3712-5.12L0 502.784l2.3552-15.0528 20.48-13.6192 29.2864 2.4576 64.8192 4.4032 97.28 6.7584 70.4512 4.096 104.448 10.9568h16.5888l2.2528-6.7584-5.632-4.096-4.4032-4.096-100.5568-68.1984-108.9536-71.9872-57.0368-41.472-30.72-20.992-15.6672-19.6608-6.656-43.008 27.9552-30.8224 37.5808 2.56 9.6256 2.6624 38.0928 29.184 81.408 62.976 106.2912 78.2336 15.4624 12.9024 6.2464-4.3008 0.8192-3.072-7.0656-11.776-57.7536-104.448-61.6448-106.0864-27.5456-44.032L240.64 79.872a126.7712 126.7712 0 0 1-4.5056-31.0272l31.8464-43.2128L285.696 0l42.496 5.7344 17.92 15.4624 26.4192 60.416 42.8032 95.0272 66.3552 129.2288 19.456 38.4 10.24 35.4304 3.9936 10.9568h6.656v-6.2464l5.5296-72.8064 10.0352-89.3952 9.9328-114.9952 3.3792-32.3584 16.0768-38.912 31.744-20.8896 24.9856 11.8784 20.48 29.2864-2.8672 18.944-12.1856 78.9504-23.8592 123.904-15.5648 82.8416h9.1136l10.3424-10.4448 41.984-55.6032 70.5536-88.064 31.1296-35.0208 36.2496-38.6048 23.3472-18.432h44.032l32.4608 48.2304-14.5408 49.7664-45.3632 57.5488-37.5808 48.64-53.9648 72.4992-33.6896 58.0608 3.072 4.608 8.192-0.7168 121.856-25.9072 65.7408-11.9808 78.5408-13.4144 35.5328 16.5888 3.8912 16.896-14.0288 34.4064-83.968 20.6848-98.5088 19.6608-146.7392 34.816-1.8432 1.2288 2.048 2.56 66.1504 6.2464 28.2624 1.536h69.2224l128.8192 9.6256 33.792 22.2208 20.1728 27.2384-3.3792 20.6848-51.8144 26.4192-70.0416-16.5888-163.328-38.8096-56.0128-14.0288H671.744v4.7104l46.6944 45.568 85.504 77.2096 107.1104 99.4304 5.4272 24.576-13.7216 19.456-14.5408-2.048-94.1056-70.656L757.76 759.808l-82.2272-69.12h-5.4272v7.168l18.944 27.648 100.0448 150.3232 5.12 46.08-7.168 15.0528-25.9072 9.0112-28.5696-5.12-58.5728-82.1248-60.416-92.4672-48.64-82.944-6.0416 3.3792-28.7744 309.5552-13.5168 15.872-31.0272 11.8784-26.0096-19.7632-13.7216-31.744 13.7216-62.976 16.5888-82.1248 13.5168-65.3312 12.288-81.1008 7.168-26.9312-0.512-1.7408-5.9392 0.8192-61.2352 83.8656-92.9792 125.6448-73.728 78.7456-17.6128 7.0656-30.5152-15.872 2.7648-28.16 17.1008-25.1904 101.9904-129.536 61.44-80.2816 39.6288-46.3872-0.3072-6.7584h-2.3552L176.2304 791.8592l-48.128 6.2464-20.7872-19.456 2.56-31.8464 9.8304-10.3424 81.408-55.9104-0.2048 0.2048z" fill="currentColor" />
40 |         </svg>
41 |       );
42 |     case 'gemini':
43 |       return (
44 |         <svg {...baseProps}>
45 |           <path d="M921.6 512c-226.304 0-409.6-183.296-409.6-409.6 0 226.304-183.296 409.6-409.6 409.6 226.304 0 409.6 183.296 409.6 409.6 0-226.304 183.296-409.6 409.6-409.6z" fill="currentColor" />
46 |         </svg>
47 |       );
48 |     default:
49 |       return null;
50 |   }
51 | };


--------------------------------------------------------------------------------
/components/user-popover.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { ThemeSwitch } from "@/components/theme-switch";
  4 | import { Popover, PopoverTrigger, PopoverContent } from "@nextui-org/popover";
  5 | import { Avatar } from "@nextui-org/avatar";
  6 | import { Button } from "@nextui-org/button";
  7 | import { FaDoorOpen } from "react-icons/fa6";
  8 | import { MdDisplaySettings } from "react-icons/md";
  9 | import { Announcement } from "@/components/announcement";
 10 | import { useDisclosure } from "@nextui-org/modal";
 11 | 
 12 | import {
 13 |   UserIcon as UserRegularIcon,
 14 |   WindowIcon,
 15 |   BellIcon,
 16 |   ArrowRightStartOnRectangleIcon,
 17 |   UserIcon,
 18 |   SparklesIcon,
 19 |   ShieldCheckIcon,
 20 | } from "@heroicons/react/24/solid";
 21 | import { Chip } from "@nextui-org/chip";
 22 | 
 23 | // 定义用户角色枚举
 24 | export enum UserRole {
 25 |   USER = "USER",
 26 |   VIP = "VIP",
 27 |   ADMIN = "ADMIN",
 28 | }
 29 | 
 30 | // 角色配置
 31 | const roleConfig = {
 32 |   [UserRole.USER]: {
 33 |     color: "success",
 34 |     icon: UserIcon,
 35 |     label: "普通用户",
 36 |   },
 37 |   [UserRole.VIP]: {
 38 |     color: "warning",
 39 |     icon: SparklesIcon,
 40 |     label: "订阅会员",
 41 |   },
 42 |   [UserRole.ADMIN]: {
 43 |     color: "secondary",
 44 |     icon: ShieldCheckIcon,
 45 |     label: "超级权限",
 46 |   },
 47 | } as const;
 48 | 
 49 | interface UserPopoverProps {
 50 |   children: React.ReactNode;
 51 | }
 52 | 
 53 | export const UserPopover = ({ children }: UserPopoverProps) => {
 54 |   // TODO: 这里应该从用户认证状态中获取用户信息
 55 |   const user = {
 56 |     name: "用户名",
 57 |     avatar:
 58 |       "https://api.dicebear.com/7.x/adventurer/svg?seed=Felix&backgroundColor=ffdfbf,ffd5dc,c0aede&radius=50",
 59 |     role: UserRole.ADMIN,
 60 |   };
 61 | 
 62 |   const isAdmin = user.role === UserRole.ADMIN;
 63 |   const Icon = roleConfig[user.role].icon;
 64 | 
 65 |   const handleLogout = () => {
 66 |     // TODO: 实现登出逻辑
 67 |     console.log("用户登出");
 68 |   };
 69 | 
 70 |   const {isOpen, onOpen, onOpenChange} = useDisclosure();
 71 | 
 72 |   const handleAnnouncementClick = () => {
 73 |     // 关闭 Popover，打开公告
 74 |     onOpen();        // 打开公告
 75 |     onOpenChange();   // 关闭 Popover
 76 |   };
 77 | 
 78 |   return (
 79 |     <>
 80 |       <Popover 
 81 |         placement="bottom-end" 
 82 |         backdrop="blur"
 83 |         style={{ width: "320px" }}
 84 |       >
 85 |         <PopoverTrigger>{children}</PopoverTrigger>
 86 | 
 87 |         <PopoverContent className="p-4">
 88 |           <div className="flex flex-col" style={{ gap: "16px" }}>
 89 |             {/* 头像 */}
 90 |             <div className="flex justify-center">
 91 |               <Avatar
 92 |                 size="lg"
 93 |                 src={user.avatar || undefined}
 94 |                 fallback={
 95 |                   <UserRegularIcon className="w-6 h-6 text-default-600" />
 96 |                 }
 97 |                 style={{
 98 |                   marginTop: "24px",
 99 |                   width: "128px",
100 |                   height: "128px",
101 |                 }}
102 |               />
103 |             </div>
104 | 
105 |             {/* 用户名 */}
106 |             <div className="flex flex-col items-center">
107 |               <p className="text-xl font-bold">{user.name}</p>
108 |             </div>
109 | 
110 |             {/* 角色 */}
111 |             <div className="flex justify-center w-full">
112 |               <Chip 
113 |               variant="bordered" 
114 |               size="md"
115 |               color={roleConfig[user.role].color}
116 |               startContent={<Icon className="h-5" />}
117 |               >
118 |                 <span style={{ fontSize: "1rem", fontWeight: "semibold" }}>{roleConfig[user.role].label}</span>
119 |               </Chip>
120 |             </div>
121 | 
122 |             {/* 按钮组 */}
123 |             <div className="flex justify-between w-full" style={{ marginTop: "24px", gap: isAdmin ? '20px' : '36px' }}>
124 |               {/* 后台 */}
125 |               {isAdmin && (
126 |                 <Button
127 |                   variant="light"
128 |                   size="lg"
129 |                   radius="full"
130 |                   isIconOnly
131 |                   onPress={() => {
132 |                     handleLogout();
133 |                   }}
134 |                   >
135 |                     <MdDisplaySettings className="text-secondary-500" style={{ width: '32px', height: '32px' }}/>
136 |                 </Button>
137 |               )}
138 | 
139 |               {/* 公告 */}
140 |               <Button
141 |                 variant="light"
142 |                 size="lg"
143 |                 radius="full"
144 |                 isIconOnly
145 |                 onPress={() => {
146 |                   handleAnnouncementClick();
147 |                 }}
148 |               >
149 |                 <BellIcon className="text-primary-500" style={{ width: '32px', height: '32px' }}/>
150 |               </Button>
151 | 
152 |               {/* 主题 */}
153 |               <Button
154 |                 as="div"
155 |                 variant="light"
156 |                 size="lg"
157 |                 radius="full"
158 |                 isIconOnly
159 |                 className="cursor-default"
160 |               >
161 |                 <ThemeSwitch 
162 |                   size={32}
163 |                   className="cursor-pointer"
164 |                 />
165 |               </Button>
166 | 
167 |               {/* 退出 */}
168 |               <Button
169 |                 variant="light"
170 |                 size="lg"
171 |                 radius="full"
172 |                 isIconOnly
173 |                 onPress={() => {
174 |                   handleLogout();
175 |                 }}
176 |               >
177 |                 <FaDoorOpen className="text-danger-500" style={{ width: '32px', height: '32px' }}/>
178 |               </Button>
179 |             </div>
180 |           </div>
181 |         </PopoverContent>
182 |       </Popover>
183 | 
184 |       {/* 公告弹窗 */}
185 |       <Announcement 
186 |         isOpen={isOpen} 
187 |         onOpenChange={onOpenChange} 
188 |       />
189 |     </>
190 |   );
191 | };
192 | 


--------------------------------------------------------------------------------