pref: ui

shared/sources.ts

@@ -21,6 +21,7 @@ export const originSources = {
     name: "酷安",
     type: "hottest",
     color: "green",
+    title: "今日最热",
     home: "https://coolapk.com",
   },
   "wallstreetcn": {
@@ -31,7 +32,7 @@ export const originSources = {
   },
   "sputniknewscn": {
     name: "俄罗斯卫星通讯社",
-    color: "yellow",
+    color: "orange",
     home: "https://sputniknews.cn",
   },
   "cankaoxiaoxi": {

src/components/header.tsx

@@ -54,11 +54,10 @@ function RefreshButton() {
 export function Header() {
   return (
     <>
-      <div className="flex">
+      <span className="flex">
-        <div className="flex">
+        <Link to="/" className="flex gap-2 text-2xl font-mono font-bold line-height-none">
-          <Link to="/" className="flex gap-2">
           <img src={logo} alt="logo" className="h-12" />
-            <span className="flex flex-col text-2xl font-mono font-bold line-height-none">
+          <span className="flex flex-col">
             <span>News</span>
             <span>Now</span>
           </span>
@@ -66,9 +65,8 @@ export function Header() {
         <a className="btn-pure text-sm ml-1">
           {`v${Version}`}
         </a>
-        </div>
+      </span>
-      </div>
+      <span className="flex gap-2 items-center text-2xl text-primary">
-      <span className="flex gap-2 items-center text-xl">
         <RefreshButton />
         <ThemeToggle />
         <GithubIcon />

src/components/section/card.tsx

@@ -42,7 +42,7 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
     <div
       ref={ref}
       className={clsx(
-        "flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5",
+        "flex flex-col h-500px rounded-2xl bg-op-50 p-4 backdrop-blur-5",
         isDragged && "op-50",
         `bg-${sources[id].color}`,
       )}
@@ -144,12 +144,12 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
               <span className="text-xl font-bold">
                 {sources[id].name}
               </span>
-              {sources[id]?.title && <span className="text-sm">{sources[id].title}</span>}
+              {sources[id]?.title && <span className={clsx("text-sm", `color-${sources[id].color} bg-base op-80 bg-op-50! px-1 rounded`)}>{sources[id].title}</span>}
             </span>
             <span className="text-xs"><UpdateTime query={query} /></span>
           </span>
         </div>
-        <div className="flex gap-2 op-80">
+        <div className={clsx("flex gap-2 text-lg", `color-${sources[id].color}`)}>
           <button
             type="button"
             className={clsx("i-ph:arrow-counter-clockwise-duotone", query.isFetching && "animate-spin i-ph:circle-dashed-duotone")}
@@ -169,7 +169,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
       </div>
 
       <OverlayScrollbar
-        className={clsx("h-full p-2 overflow-x-auto bg-base bg-op-70! rounded-2xl transition-all duration-500", query.isFetching && "blur-3px")}
+        className={clsx("h-full p-2 overflow-x-auto bg-base bg-op-70! rounded-2xl transition-filter duration-500", query.isFetching && "blur-3px")}
         options={{
           overflow: { x: "hidden" },
         }}
@@ -202,14 +202,14 @@ function NewsList({ query }: Query) {
     <ol>
       {items?.map((item, i) => (
         <li key={item.title} className="flex gap-2 items-center mb-2 items-stretch">
-          <span className={clsx("bg-gray-4/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
+          <span className={clsx("bg-neutral-400/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
             {i + 1}
           </span>
           <a href={item.url} target="_blank" className="self-start">
             <span className="mr-2">
               {item.title}
             </span>
-            <span className="text-xs text-gray-4/80 truncate align-middle">
+            <span className="text-xs text-neutral-400/80 truncate align-middle">
               <ExtraInfo item={item} />
             </span>
           </a>
@@ -227,19 +227,19 @@ function UpdatedTime({ item }: { item: NewsItem }) {
 function NewsListTimeLine({ query }: Query) {
   const items = query.data?.items
   return (
-    <ol className="relative border-s border-dash border-gray-4/30">
+    <ol className="relative border-s border-dash border-neutral-400/30">
       {items?.map(item => (
         <li key={item.title} className="flex gap-2 mb-2 ms-4">
-          <div className={clsx("absolute w-2 h-2 bg-gray-4/50 rounded-full ml-0.5 mt-1 -start-1.5")} />
+          <div className={clsx("absolute w-2 h-2 bg-neutral-400/50 rounded-full ml-0.5 mt-1 -start-1.5")} />
           <span className="flex flex-col">
-            <span className="text-xs text-gray-4/80 truncate align-middle">
+            <span className="text-xs text-neutral-400/80 truncate align-middle">
               <UpdatedTime item={item} />
             </span>
             <a href={item.url} target="_blank">
               <span>
                 {item.title}
               </span>
-              <span className="text-xs text-gray-4/80 truncate align-middle">
+              <span className="text-xs text-neutral-400/80 truncate align-middle">
                 <ExtraInfo item={item} />
               </span>
             </a>

src/components/section/index.tsx

@@ -16,21 +16,25 @@ export function Section({ id }: { id: SectionID }) {
   return (
     <>
       <div className="w-full flex justify-center">
-        <div className="flex gap-2 mb-6">
+        <span className={clsx([
+          "flex gap-2 mb-6 py-3 px-6 rounded-2xl bg-primary bg-op-10 dark:bg-op-5",
+          "md:(z-100)",
+        ])}
+        >
           {sectionIds.map(section => (
             <Link
               key={section}
               to="/s/$section"
               params={{ section }}
               className={clsx(
-                "btn-action",
+                "op-90",
-                id === section && "btn-action-active",
+                id === section && "color-primary font-bold op-100!",
               )}
             >
               {metadata[section].name}
             </Link>
           ))}
-        </div>
+        </span>
       </div>
       { currentSectionID === id && <Dnd />}
     </>

src/routes/__root.tsx

@@ -39,15 +39,15 @@ function RootComponent() {
         <header
           ref={ref}
           className={
-            clsx("flex justify-between items-center py-4 px-8 md:(pt-8 px-20)", "sticky top-0 z-100 backdrop-blur-md")
+            clsx("flex justify-between items-center py-4 px-8 md:(py-6 px-20)", "sticky top-0 z-100 backdrop-blur-md")
           }
         >
           <Header />
         </header>
-        <main className="min-h-[calc(100vh-12rem)] px-6 md:(px-16)">
+        <main className="min-h-[calc(100vh-12rem)] px-4 md:(px-16 mt--16 min-h-[calc(100vh-8rem)] )">
           <Outlet />
         </main>
-        <footer className="py-6 flex flex-col items-center justify-center text-sm">
+        <footer className="py-6 flex flex-col items-center justify-center text-sm text-neutral-500">
           <a href={`${Homepage}/LICENCE`}>MIT LICENCE</a>
           <span>
             <span> © 2024 By </span>

uno.config.ts

@@ -13,25 +13,21 @@ export default defineConfig({
   rules: [],
   shortcuts: {
     "color-base": "color-neutral-800 dark:color-neutral-300",
-    "bg-base": "bg-white dark:bg-[#1d1c1c]",
+    "bg-base": "bg-white dark:bg-dark-600",
-    "border-base": "border-gray-500/30",
     "shadow-base": "shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] dark:shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]",
 
-    // "bg-glass": "bg-white:75 dark:bg-[#1d1c1c]:75 backdrop-blur-5",
+    "bg-hover": "bg-primary-400/5",
-    "bg-code": "bg-gray5:5",
-    "bg-hover": "bg-primary-400:5",
 
     "color-active": "color-primary-600 dark:color-primary-400",
     "border-active": "border-primary-600/25 dark:border-primary-400/25",
-    "bg-active": "bg-primary-400:10",
+    "bg-active": "bg-primary-400/10",
 
     "btn-pure": "op50 hover:op75",
     "btn-action": "border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-hover",
     "btn-action-active": "color-active border-active! bg-active op100!",
-    "skeleton": "bg-gray-400/10 rounded-md h-5 w-full animate-pulse",
   },
   safelist: [
-    ...colors.map(color => `bg-${color}`),
+    ...["bg", "color", "border"].map(t => colors.map(c => `${t}-${c}`)).flat(1),
   ],
   extendTheme: (theme) => {
     // @ts-expect-error >_<

vitest.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "node",
-    include: ["server/**/*.test.ts", "shared/**/*.test.ts"],
+    include: ["server/**/*.test.ts", "shared/**/*.test.ts", "test/**/*.test.ts"],
   },
   plugins: [
     tsconfigPath(),