update(journalList): 摘要 2 行溢出

src/app/about/page.tsx

@@ -72,7 +72,7 @@ export default async function About() {
             <br />
             <p className="mt-[9px] text-[15px] leading-[24px]">
               如果你也想加入我们，无论是提供技术、资金或是其他任何方式的支持，都可以加微信号&nbsp;
-              <span className="text-[#C43737]">indier</span>
+              <span className="text-brand">indier</span>
               &nbsp;联系到我们。 <br />
               感谢音乐，感谢遇见，感谢所有的贡献者。还有感谢那些途中参与过，给予我们帮助的人们。所有的奉献都值得被铭记。
             </p>

src/app/globals.css

@@ -7,6 +7,7 @@
 
 :root {
   --body-bg-color: #fff;
+  --primary-color: #c43737;
 }
 
 @media (prefers-color-scheme: dark) {

src/components/Journal/JournalItem.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { Avatar, JournalCard, ButtonCollect } from '@/components';
+import { Avatar, VolListCoverCard, ButtonCollect } from '@/components';
 
 export default function JournalItem({
   journalNo,
@@ -16,12 +16,16 @@ export default function JournalItem({
   return (
     <div className="flex flex-col w-[712px] rounded-[6px] bg-base ">
       <Link href={`/vol/${journalNo}`}>
-        <JournalCard showPlay image={image} title={title} journalNo={journalNo} className="cursor-pointer" />
+        <VolListCoverCard img={image} title={title} no={journalNo} />
       </Link>
+
       {/* 摘要 */}
-      <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-base cursor-pointer overflow-hidden whitespace-nowrap truncate">
+      <Link href={`/vol/${journalNo}`}>
-        {summary}
+        <p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[24px] text-base cursor-pointer text-overflow-2">
-      </p>
+          {summary}
+        </p>
+      </Link>
+
       {/* 精选评论 */}
       {!!commentList.length && (
         <div className="flex flex-row mb-[24px]">

src/components/Journal/JournalList/VolListCoverCard.tsx

@@ -2,19 +2,9 @@ import styles from '../index.module.css';
 
 import { JournalCard } from '@/components';
 
-export default function CoverCard({
+export default function CoverCard({ title, img, no }: { title: string; img: string; no: string }) {
-  title,
-  img,
-  no,
-}: {
-  title: string;
-  img: string;
-  no: string;
-  playStatus: boolean;
-  onPlay: () => void;
-}) {
   return (
-    <JournalCard image={img} journalNo={no}>
+    <JournalCard image={img} journalNo={no} className="cursor-pointer">
       <div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
         <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
       </div>

tsconfig.json

@@ -22,5 +22,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "dist/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "uno.config.css"]
 }

uno.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
 import presetAnimations from 'unocss-preset-animations';
 import { presetShadcn } from 'unocss-preset-shadcn';
+import { colors } from 'unocss/preset-mini';
 
 export default defineConfig({
   presets: [
@@ -16,18 +17,39 @@ export default defineConfig({
     }),
   ],
 
-  rules: [['text-flow', { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden' }]],
+  rules: [
+    ['text-flow', { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden' }],
+    [
+      /^text-overflow-(\d+)$/,
+      ([, d]) => ({
+        overflow: 'hidden',
+        'text-overflow': 'ellipsis',
+        display: '-webkit-box',
+        '-webkit-line-clamp': parseInt(d),
+        /* autoprefixer: ignore next */
+        '-webkit-box-orient': 'vertical',
+      }),
+    ],
+  ],
+
+  shortcuts: [
+    {
+      'switch-animation': 'transition duration-300',
+      'bg-base': 'bg-[#fff] dark:bg-[#20202a] switch-animation',
+      'card-base': 'bg-[#ffffff] dark:bg-[#10101a] switch-animation',
+      'text-base': 'text-[rgba(0,0,0,0.95)] dark:text-[#f0f0f0] switch-animation',
+      'switch-label-base': 'bg-gray-200 dark:bg-gray-800 switch-animation',
+      'switch-span-base': 'bg-white dark:bg-gray-300 switch-animation',
+      'text-overflow': 'overflow-hidden whitespace-nowrap truncate',
+      'text-brand': 'text-brand',
+      'bg-brand': 'bg-brand',
+      'border-brand': 'border-brand',
+    },
+  ],
 
-  shortcuts: {
+  theme: {
-    'switch-animation': 'transition duration-300',
+    colors: {
-    'bg-base': 'bg-[#fff] dark:bg-[#20202a] switch-animation',
+      brand: 'var(--primary-color)',
-    'card-base': 'bg-[#ffffff] dark:bg-[#10101a] switch-animation',
+    },
-    'text-base': 'text-[rgba(0,0,0,0.95)] dark:text-[#f0f0f0] switch-animation',
-    'switch-label-base': 'bg-gray-200 dark:bg-gray-800 switch-animation',
-    'switch-span-base': 'bg-white dark:bg-gray-300 switch-animation',
-    'text-overflow': 'overflow-hidden whitespace-nowrap truncate',
-    'text-brand': 'text-[#C43737]',
-    'bg-brand': 'bg-[#C43737]',
-    'border-brand': 'border-[#C43737]',
   },
 });