beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: optimize avatar display

Browse source
This commit is contained in:
molvqingtai 2023-11-16 02:39:12 +08:00
parent 387576c16c
commit 9d3a1d81cd
5 changed files with 26 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/content/index.tsx
View file

@ -1,5 +1,5 @@
import ReactDOM from 'react-dom/client'
import React from 'react'
import { createRoot } from 'react-dom/client'
import { Remesh } from 'remesh'
import { RemeshRoot } from 'remesh-react'
import { RemeshLogger } from 'remesh-logger'
@ -12,15 +12,15 @@ export default defineContentScript({
matches: ['*://*.example.com/*', '*://*.google.com/*', '*://*.v2ex.com/*'],
async main(ctx) {
const store = Remesh.store({
externs: [StorageImpl]
// inspectors: [RemeshLogger()]
externs: [StorageImpl],
inspectors: [RemeshLogger()]
})
const ui = await createContentScriptUi(ctx, {
name: __NAME__,
type: 'overlay',
mount(container) {
const root = ReactDOM.createRoot(container)
const root = createRoot(container)
root.render(
<React.StrictMode>
<RemeshRoot store={store}>

2
src/app/content/views/AppContainer/index.tsx
View file

@ -17,7 +17,7 @@ const AppContainer: FC<AppContainerProps> = ({ children }) => {
style={{
width: `${size}px`
}}
className="fixed bottom-10 right-10 top-5 z-top box-border grid grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 font-sans shadow-2xl"
className="fixed bottom-10 right-10 top-5 z-top box-border grid min-h-[375px] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 font-sans shadow-2xl"
>
{children}
<div

22
src/app/content/views/Header/index.tsx
View file

@ -1,4 +1,6 @@
import { type FC } from 'react'
import { Globe2Icon } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/HoverCard'
import { Button } from '@/components/ui/Button'
import { getWebSiteInfo } from '@/utils'
@ -7,8 +9,13 @@ const Header: FC = () => {
const websiteInfo = getWebSiteInfo()
return (
<div className="z-10 grid h-12 grid-flow-col items-center justify-between gap-x-4 rounded-t-xl bg-white px-4 backdrop-blur-lg 2xl:h-14">
<img className="h-8 w-8 overflow-hidden rounded-full" src={websiteInfo.icon} />
<div className="z-10 grid h-12 grid-flow-col items-center justify-between gap-x-4 rounded-t-xl bg-white px-4 backdrop-blur-lg">
<Avatar className="h-8 w-8">
<AvatarImage src={websiteInfo.icon} alt="favicon" />
<AvatarFallback>
<Globe2Icon size="100%" className="text-gray-500" />
</AvatarFallback>
</Avatar>
<HoverCard>
<HoverCardTrigger asChild>
<Button className="overflow-hidden" variant="link">
@ -19,10 +26,17 @@ const Header: FC = () => {
</HoverCardTrigger>
<HoverCardContent className="w-80">
<div className="grid grid-cols-[auto_1fr] gap-x-4">
<img className="h-14 w-14 overflow-hidden rounded-full" src={websiteInfo.icon} />
<Avatar className="h-14 w-14">
<AvatarImage src={websiteInfo.icon} alt="favicon" />
<AvatarFallback>
<Globe2Icon size="100%" className="text-gray-500" />
</AvatarFallback>
</Avatar>
<div className="grid items-center">
<h4 className="truncate text-sm font-semibold">{websiteInfo.title}</h4>
<p className="line-clamp-2 max-h-8 text-xs text-slate-500">{websiteInfo.description}</p>
{websiteInfo.description && (
<p className="line-clamp-2 max-h-8 text-xs text-slate-500">{websiteInfo.description}</p>
)}
</div>
</div>
</HoverCardContent>

4
src/components/MessageItem.tsx
View file

@ -34,8 +34,8 @@ const MessageItem: FC<MessageItemProps> = ({ data, index }) => {
className="box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 [content-visibility:auto] first:pt-4 last:pb-4"
>
<Avatar>
<AvatarImage src={formatData.userAvatar} />
<AvatarFallback>{formatData.username}</AvatarFallback>
<AvatarImage src={formatData.userAvatar} alt="avatar" />
<AvatarFallback>{formatData.username.at(0)}</AvatarFallback>
</Avatar>
<div className="overflow-hidden">
<div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 leading-none">

2
src/hooks/useResizable.ts
View file

@ -1,5 +1,5 @@
import { useCallback, useRef, useState } from 'react'
import { isInRange } from '@/utils'
import { clamp, isInRange } from '@/utils'
export interface ResizableOptions {
minSize: number