pref: ui

2025-01-19 03:09:14 +08:00 · 2024-10-12 15:50:44 +08:00 · 2024-10-12 15:50:44 +08:00 · 7a49cc7eec
commit 7a49cc7eec
parent 698253e4ae
7 changed files with 41 additions and 42 deletions
--- a/shared/sources.ts
+++ b/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": {
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@ -54,21 +54,19 @@ function RefreshButton() {
 export function Header() {
  return (
    <>
-      <div className="flex">
-        <div className="flex">
-          <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>News</span>
-              <span>Now</span>
-            </span>
-          </Link>
-          <a className="btn-pure text-sm ml-1">
-            {`v${Version}`}
-          </a>
-        </div>
-      </div>
-      <span className="flex gap-2 items-center text-xl">
+      <span className="flex">
+        <Link to="/" className="flex gap-2 text-2xl font-mono font-bold line-height-none">
+          <img src={logo} alt="logo" className="h-12" />
+          <span className="flex flex-col">
+            <span>News</span>
+            <span>Now</span>
+          </span>
+        </Link>
+        <a className="btn-pure text-sm ml-1">
+          {`v${Version}`}
+        </a>
+      </span>
+      <span className="flex gap-2 items-center text-2xl text-primary">
        <RefreshButton />
        <ThemeToggle />
        <GithubIcon />
--- a/src/components/section/card.tsx
+++ b/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>
--- a/src/components/section/index.tsx
+++ b/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",
-                id === section && "btn-action-active",
+                "op-90",
+                id === section && "color-primary font-bold op-100!",
              )}
            >
              {metadata[section].name}
            </Link>
          ))}
-        </div>
+        </span>
      </div>
      { currentSectionID === id && <Dnd />}
    </>
--- a/src/routes/__root.tsx
+++ b/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>
--- a/uno.config.ts
+++ b/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]",
-    "border-base": "border-gray-500/30",
+    "bg-base": "bg-white dark:bg-dark-600",
    "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-code": "bg-gray5:5",
-    "bg-hover": "bg-primary-400: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 >_<
--- a/vitest.config.ts
+++ b/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(),