4.24（figma—clone起步）
项目视频官网，Build and Deploy a Figma Clone (youtube.com)里面33个项目，我自认为写完可以当大佬！嗯嗯，就是这样。关于figma，他是一个协同ui设计的最新的、最流行的工具网站，采用房间的思想，多人共同工作，想了解更多自己百度，学习就是这样，必须自己动手才更加印象深刻，如果你只是了解，那么会用就行，
在项目中虽然大部分静态资源，图片，部分方法，ts类型声明都是被写好的，但是仍然需要自己去一个一个看懂，看透，不仅要在写项目时候了解到什么代码实现什么功能，还要知道可能遇见的问题，以及解决方法。
搞懂一个难的项目比起多做几个项目要更能提升个人实力。
1.初始化项目
新建nextjs项目,安装fabric uuid
npm create-next-app@latest
npm i fabric uuid
注册liveblock账号，新建room项目，获取key
2.创建项目按装liveblock
nextjs使用liveblock官网API Reference - @liveblocks/client | Liveblocks documentation
npm install @liveblocks/client @liveblocks/react
npx create-liveblocks-app@latest --init --framework react
3.设置 Liveblocks 客户端
连接到 Liveblocks 的第一步是创建一个客户端，该客户端 将负责与后端进行通信。你可以做 这通过在您的配置文件中进行修改，以及 传递您的公有 API 密钥。createClient
const client = createClient({
publicApiKey: "pk_prod_AmkgNPTKzyCbKq4x-wHddd8lVzdkZgnW4lePdVMpfGACRLgzXnBvP2v4y9-TknD0",
});
4.创建 Liveblocks 聊天室
Liveblocks 使用房间的概念，即单独的虚拟空间，其中 合作。若要创建实时体验，多个用户必须 连接到同一个房间。使用 Next.js 目录时，我们建议您在与当前路由位于同一目录中的文件中创建您的房间。/app``Room.tsx
新建room.tsx文件
"use client";
import { ReactNode } from "react";
import { RoomProvider } from "../liveblocks.config";
import { ClientSideSuspense } from "@liveblocks/react";
export function Room({ children }: { children: ReactNode }) {
return (
// 创建房间
<RoomProvider id="my-room" initialPresence={{}}>
{/* 子组件渲染处，fallback为懒加载 */}
<ClientSideSuspense fallback={<div>Loading…</div>}>
{() => children}
</ClientSideSuspense>
</RoomProvider>
);
}
5.将 Liveblocks 聊天室添加到您的页面
将房间安装到page.tsx，
import { Room } from "./Room";
import { CollaborativeApp } from "./CollaborativeApp";
export default function Page() {
return (
//进入房间的入口
<Room>
<CollaborativeApp />
</Room>
);
}
6.使用 Liveblocks 钩子
现在我们已经连接到一个房间，我们可以开始使用 Liveblocks 钩子了。 我们要添加的第一个是 ，一个提供信息的钩子 关于哪些其他用户连接到聊天室
主要提供其他信息
"use client";
import { useOthers } from "../liveblocks.config";
export function CollaborativeApp() {
const others = useOthers();
const userCount = others.length;
return <div>There are {userCount} other user(s) online</div>;
}
7.shadcn/ui
安装,初始化
npx shadcn-ui@latest init
在配置里面含有tailwind.config，配置文件内容
import type { Config } from "tailwindcss";
const config = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
primary: {
black: "#14181F",
green: "#56FFA6",
grey: {
100: "#2B303B",
200: "#202731",
300: "#C4D3ED",
},
},
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
export default config;
删除CollaborativeApp文件，改变page文件
安装@liveblocks/react-comments
npm i @liveblocks/react-comments
修改全局字体
在layout中
import { Work_Sans } from "next/font/google";
const workSans = Work_Sans({
subsets: ["latin"],
variable: '--font-work-sans',
weight: ['400', '600', '700']
});
...
<body className={`${workSans.className} bg-primary-grey-200`}>
...
从readme获取静态资源下载，asset，将文件一个一个放入主目录，favio放入app中替换，github.com/adrianhajdi…
使用tailCss让主要内容居中，
8. live Coursors
创建一个同步游标项目，在components中创建
获得他人参与
// Get list of other users
const others = useOthers();
//useOthers返回有关当前其他用户的信息列表 在线，例如在线状态
// { cursor: null }
others[0].presence;
渲染光标
先新建一个光标组件，可以通过遍历来映射光标，
使用map遍历others
可以使用liveblock配置来使这些光标更加平滑，更频繁更新
liveCursor Chat
Cursors examples | Liveblocks官网live cursor
9.userOthers
从当前在同一聊天室中的其他用户列表中提取数据，以及 自动订阅所选数据的更新
获取房间中其他用户信息
当出现报错roomContext is not function 时候在page页最上面加入"use client",
这个是由于react在渲染时候无法创建room的上下文，
10.useMyPresence
返回当前用户的状态，以及更新该用户的函数。 自动订阅当前用户状态的更新。
任何更改都将合并到 当前存在。它不会替换整个状态对象。合并对象，不是替换
文件--cursor
--Cursor.tsx 消息
--CursorChat.tsx 输入框，聊天框
--LiveCursor.tsx 展示所有人的聊天
---Live.tsx 展示页面，main
