improvement: artcile api fields

src-tauri/src/feed/article.rs

@@ -33,19 +33,19 @@ pub struct ArticleQueryItem {
   #[diesel(sql_type = Text)]
   pub feed_uuid: String,
   #[diesel(sql_type = Text)]
-  pub channel_title: String,
+  pub feed_title: String,
   #[diesel(sql_type = Text)]
-  pub channel_link: String,
+  pub feed_url: String,
   #[diesel(sql_type = Text)]
   pub link: String,
   #[diesel(sql_type = Text)]
   pub title: String,
   #[diesel(sql_type = Text)]
-  pub feed_url: String,
-  #[diesel(sql_type = Text)]
   pub description: String,
   #[diesel(sql_type = Text)]
   pub pub_date: String,
+  #[diesel(sql_type = Text)]
+  pub create_date: String,
   #[diesel(sql_type = Integer)]
   pub read_status: i32,
 }
@@ -107,13 +107,14 @@ impl Article {
             SELECT
               A.id, A.uuid,
               A.feed_uuid,
-              C.title as channel_title,
-              C.link as channel_link,
+              C.title as feed_title,
+              C.link as feed_url,
               A.link,
               A.title,
               A.feed_url,
               A.description as description,
               A.pub_date,
+              A.create_date,
               A.read_status
             FROM
               feeds as C
@@ -172,8 +173,8 @@ impl Article {
         SELECT
           A.id, A.uuid,
           A.feed_uuid,
-          C.title as channel_title,
-          C.link as channel_link,
+          C.title as feed_title,
+          C.link as feed_url,
           A.link,
           A.title,
           A.feed_url,
@@ -232,8 +233,8 @@ impl Article {
         SELECT
           A.id, A.uuid,
           A.feed_uuid,
-          C.title as channel_title,
-          C.link as channel_link,
+          C.title as feed_title,
+          C.link as feed_url,
           A.link,
           A.title,
           A.feed_url,

src/components/ArticleItem/Card.tsx

@@ -31,7 +31,7 @@ export const ArticleCardItem = (props: any) => {
     updateCurrentArticle(article);
   };
 
-  const ico = getChannelFavicon(article.channel_link);
+  const ico = getChannelFavicon(article.feed_url);
 
   useEffect(() => {
     setReadStatus(article.read_status);
@@ -93,7 +93,7 @@ export const ArticleCardItem = (props: any) => {
             className="rounded w-4 mr-1"
           />
           <span className="text-xs">
-            { article.author || article.channel_title }
+            { article.author || article.feed_title }
           </span>
         </div>
         <div className="line-clamp-3">

src/components/ArticleItem/Line.tsx

@@ -28,7 +28,7 @@ export const ArticleLineItem = (props: any) => {
     updateCurrentArticle(article);
   };
 
-  const ico = getChannelFavicon(article.channel_link);
+  const ico = getChannelFavicon(article.feed_url);
 
   useEffect(() => {
     setReadStatus(article.read_status);

src/components/ArticleItem/index.tsx

@@ -1,11 +1,12 @@
 import React, { ForwardedRef, useEffect, useState } from "react";
-import { formatDistanceToNow } from "date-fns";
+import { formatDistanceToNow, format, parseISO } from "date-fns";
 import classnames from "classnames";
 import { useBearStore } from "@/stores";
 import { getChannelFavicon } from "@/helpers/parseXML";
+import { ArticleResItem } from "@/db";
 
 export const ArticleItem = React.forwardRef(
-  (props: any, ref: ForwardedRef<HTMLLIElement>) => {
+  (props: { article: ArticleResItem }, ref: ForwardedRef<HTMLLIElement>) => {
     const store = useBearStore((state) => ({
       updateArticleAndIdx: state.updateArticleAndIdx,
       article: state.article,
@@ -27,7 +28,7 @@ export const ArticleItem = React.forwardRef(
       updateCurrentArticle(article);
     };
 
-    const ico = getChannelFavicon(article.channel_link);
+    const ico = getChannelFavicon(article.feed_url);
 
     useEffect(() => {
       setReadStatus(article.read_status);
@@ -37,6 +38,13 @@ export const ArticleItem = React.forwardRef(
       setHighlight(store.article?.id === article.id);
     }, [store.article, article]);
 
+    console.log(
+      formatDistanceToNow(parseISO(article.create_date), {
+        includeSeconds: true,
+        addSuffix: true,
+      })
+    );
+
     return (
       <li
         className={classnames(
@@ -45,7 +53,7 @@ export const ArticleItem = React.forwardRef(
           {
             "text-[hsl(var(--foreground)_/_80%)]": readStatus === 2,
             "bg-article-active-bg": highlight,
-          },
+          }
         )}
         onClick={handleClick}
         ref={ref}
@@ -61,7 +69,7 @@ export const ArticleItem = React.forwardRef(
                 ? "text-article-active-headline"
                 : "text-article-headline"
             }`,
-            "font-bold text-sm group-hover:text-article-active-headline",
+            "font-bold text-sm group-hover:text-article-active-headline"
           )}
         >
           {article.title}
@@ -72,7 +80,7 @@ export const ArticleItem = React.forwardRef(
             "text-article-paragraph group-hover:text-article-active-paragraph",
             {
               "text-article-active-paragraph": highlight,
-            },
+            }
           )}
         >
           {(article.description || "").replace(/<[^<>]+>/g, "")}
@@ -82,7 +90,7 @@ export const ArticleItem = React.forwardRef(
             "flex justify-between items-center text-xs text-article-paragraph group-hover:text-article-active-paragraph",
             {
               "text-article-active-paragraph": highlight,
-            },
+            }
           )}
         >
           <div className="flex items-center">
@@ -92,14 +100,17 @@ export const ArticleItem = React.forwardRef(
               className="rounded w-4 mr-1"
             />
             <span className="overflow-hidden text-ellipsis mr-1 whitespace-nowrap">
-              {article.author || article.channel_title}
+              {article.author || article.feed_title}
             </span>
           </div>
           <div className="whitespace-nowrap">
-            {formatDistanceToNow(new Date(article.pub_date || article.create_date), { includeSeconds: true, addSuffix: true })}
+            {formatDistanceToNow(parseISO(article.create_date), {
+              includeSeconds: true,
+              addSuffix: true,
+            })}
           </div>
         </div>
       </li>
     );
-  },
+  }
 );

src/components/ArticleView/Detail.tsx

@@ -24,8 +24,8 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
   const store = useBearStore((state) => ({
     feed: state.feed,
   }));
-  const { pub_date, channel_link } = article;
-  const ico = getChannelFavicon(channel_link);
+  const { pub_date, feed_url } = article;
+  const ico = getChannelFavicon(feed_url);
   const [pageContent, setPageContent] = useState("");
   const [banner, setBanner] = useState("");
   const [showBanner, setShowBanner] = useState(false);
@@ -167,7 +167,7 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
             <div className={classnames(styles.meta)}>
               <span className={styles.channelInfo}>
                 <img src={store.feed?.logo || ico} alt="" className="rounded" />
-                {article.channel_title}
+                {article.feed_title}
               </span>
               {article.author && (
                 <span
@@ -198,7 +198,7 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={createMarkup(pageContent)}
             />
-            {medias.length > 0 && <div>{medias.map(renderMediaBox)}</div>}
+            {medias && medias.length > 0 && <div>{medias.map(renderMediaBox)}</div>}
             {/* <div
               className={classnames("reading-content", "text-detail-paragraph")}>
                 <iframe src={article.link} className="w-full" allowFullScreen></iframe>

src/components/WelcomePage/index.tsx

@@ -1,12 +1,10 @@
-import React from "react";
 import bg from "./bg.svg";
-import styles from "./welcome.module.scss";
 
 export const WelcomePage = () => {
   return (
-    <div className={styles.box}>
-      <div className={styles.placeholder}>
-        <img src={bg} className={styles.bg} />
+    <div className="h-full flex items-center justify-center">
+      <div className="w-[40%] max-w-[500px]">
+        <img src={bg} className="w-full" />
       </div>
     </div>
   );

src/db.ts

@@ -47,33 +47,33 @@ export interface FeedResItem {
 export interface Article {
   id?: number;
   uuid: string;
-  channel_uuid: string;
-  channel_link: string;
+  feed_uuid: string;
+  feed_title: string;
+  feed_url: string;
   title: string;
   link: string;
   image: string;
-  feed_url: string;
   description: string;
   content?: string;
-  pub_date?: Date;
-  create_date?: Date;
+  pub_date?: string;
+  create_date: string;
   read_status: number;
 }
 
 export interface ArticleResItem {
   id?: number;
   author: string;
   uuid: string;
-  channel_uuid: string;
-  channel_link: string;
+  feed_uuid: string;
+  feed_title: string;
+  feed_url: string;
   title: string;
   link: string;
   image: string;
-  feed_url: string;
   description: string;
   content?: string;
-  pub_date?: Date;
-  create_date?: Date;
+  pub_date?: string;
+  create_date: string;
   read_status: number;
   media_object: string;
 }

src/styles/global.scss

@@ -6,8 +6,8 @@
   --inline-code-font: monospace !important;
   --mono-font: "JetBrains Mono", monospace !important;
 
-  --app-feedlist-width: 280px;
-  --app-article-width: 340px;
+  --app-feedlist-width: 240px;
+  --app-article-width: 320px;
   --app-toolbar-height: 50px;
   --app-setting-sidebar-width: 200px;
   --view-helpbar-width: 50px;