improvement: update some ui detials

zhanglun · Nov 22, 2023 · 704ea07 · 704ea07
1 parent 89da0ca
commit 704ea07
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "classnames": "^2.3.2",
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
+    "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
     "dnd-core": "^16.0.1",
     "framer-motion": "^10.13.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -77,7 +77,7 @@ function App() {
 
   return (
     <>
-      <div className="flex h-full max-h-full">
+      <div className="flex h-full max-h-full border-t">
         <DndProvider backend={HTML5Backend}>
           <ChannelList />
         </DndProvider>

diff --git a/src/components/ArticleItem/index.tsx b/src/components/ArticleItem/index.tsx
@@ -1,6 +1,6 @@
 import React, { ForwardedRef, useEffect, useState } from "react";
+import { formatDistanceToNow } from "date-fns";
 import classnames from "classnames";
-import Dayjs from "dayjs";
 import { useBearStore } from "@/stores";
 import { getChannelFavicon } from "@/helpers/parseXML";
 
@@ -85,18 +85,18 @@ export const ArticleItem = React.forwardRef(
             },
           )}
         >
-          <div className={classnames("flex items-center")}>
+          <div className="flex items-center">
             <img
               src={store.feed?.logo || ico}
               alt=""
               className="rounded w-4 mr-1"
             />
-            {article.author || article.channel_title}
+            <span className="overflow-hidden text-ellipsis mr-1 whitespace-nowrap">
+              {article.author || article.channel_title}
+            </span>
           </div>
-          <div>
-            {Dayjs(new Date(article.pub_date || article.create_date)).format(
-              "YYYY-MM-DD HH:mm",
-            )}
+          <div className="whitespace-nowrap">
+            {formatDistanceToNow(new Date(article.pub_date || article.create_date), { includeSeconds: true, addSuffix: true })}
           </div>
         </div>
       </li>

diff --git a/src/components/ArticleList/hooks.tsx b/src/components/ArticleList/hooks.tsx
@@ -104,11 +104,6 @@ export const useArticleListHook = (props: {
     getList();
   }, [store.cursor]);
 
-  useEffect(() => {
-    if (store.articleList.length === 0) {
-      setHasMore(false);
-    }
-  }, [store.articleList]);
 
   useEffect(() => {
     const $rootElem = listRef.current as HTMLDivElement;

diff --git a/src/components/ArticleList/index.tsx b/src/components/ArticleList/index.tsx
@@ -57,7 +57,7 @@ export const ArticleList = (props: ArticleListProps): JSX.Element => {
     >
       <ul className="m-0 grid gap-2 py-2 px-2">{renderList()}</ul>
       <div ref={loadRef}>
-        {hasMore && (
+        {loading && (
           <div className="p-3 pl-6 grid gap-1 relative">
             <Skeleton className="h-5 w-full" />
             <div>

diff --git a/src/components/ArticleView/Detail.tsx b/src/components/ArticleView/Detail.tsx
@@ -131,7 +131,6 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
           // try to get the best banner if there is no image in article content
           // it will make render slower
           setShowBanner(content.search(/<img[^>]+>/gi) === -1);
-          console.log('xss.whitelist', xss)
           setPageContent(xss(content, {
             whiteList: {
               ...getDefaultWhiteList(),

diff --git a/src/components/ArticleView/DialogView.tsx b/src/components/ArticleView/DialogView.tsx
@@ -49,11 +49,10 @@ export const ArticleDialogView = (
       { trigger && <DialogTrigger>{ trigger }</DialogTrigger> }
       <DialogContent className="p-0 min-w-[960px] is-scroll">
         <ScrollBox className="max-h-[94vh]" ref={scrollBoxRef}>
-          {/* <div className="overflow-y-auto"> */ }
           <>
-            <div className="sticky left-0 right-0 top-0 z-[3] supports-backdrop-blur:bg-background/60">
+            <div className="sticky left-0 right-0 top-0 z-[3]">
               <div
-                className="flex items-center justify-end px-20 py-2 space-x-0.5 rounded-tl-lg rounded-tr-lg  view-blur-bar">
+                className="flex items-center justify-end px-20 py-2 space-x-0.5 rounded-tl-lg rounded-tr-lg bg-background border-b">
                 <ToolbarItemNavigator/>
                 <span>
                   <Separator orientation="vertical" className="h-4 mx-2"/>