feat: 适配 sscreator-ui v0.25.0

FHU-yezi · Feb 15, 2024 · 6c01877 · 6c01877
1 parent 75d28b3
commit 6c01877
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 114 deletions.
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,7 +17,7 @@
     "@mantine/hooks": "^7.3.2",
     "@preact/preset-vite": "^2.7.0",
     "@preact/signals": "^1.2.2",
-    "@sscreator/ui": "^0.24.1",
+    "@sscreator/ui": "^0.25.0",
     "@unocss/preset-rem-to-px": "^0.58.2",
     "@unocss/reset": "^0.58.2",
     "clsx": "^2.0.0",

diff --git a/frontend/src/components/ErrorFallback.tsx b/frontend/src/components/ErrorFallback.tsx
@@ -36,22 +36,22 @@ export default function ErrorFallback({ children }: Props) {
 
         <Column gap="gap-2">
           <SmallText bold>时间</SmallText>
-          <Text colorScheme="gray">
+          <Text color="gray">
             {new Date().toISOString().replace("T", " ").replace(/\..*Z/, "")}
           </Text>
         </Column>
 
         <Column gap="gap-2">
           <SmallText bold>页面路径</SmallText>
-          <Text colorScheme="gray">{location}</Text>
+          <Text color="gray">{location}</Text>
         </Column>
 
         <Column gap="gap-2">
           <SmallText bold>错误信息</SmallText>
-          <Badge className="mr-2" colorScheme="danger">
+          <Badge className="mr-2" color="danger">
             {error.name}
           </Badge>
-          <Text colorScheme="gray">{error.message}</Text>
+          <Text color="gray">{error.message}</Text>
         </Column>
 
         <SolidButton onClick={() => window.location.reload()} fullWidth>

diff --git a/frontend/src/components/FooterBlock.tsx b/frontend/src/components/FooterBlock.tsx
@@ -21,9 +21,9 @@ export default function FooterBlock() {
       <ExternalLink href="https://wenjuan.feishu.cn/m?t=sjQp3W8yUrNi-g37f">
         意见反馈
       </ExternalLink>
-      <Text colorScheme="gray">版本：{toolStatus?.version ?? "获取中..."}</Text>
-      <Text colorScheme="gray">Powered By Open-Source Software</Text>
-      <Text colorScheme="gray">
+      <Text color="gray">版本：{toolStatus?.version ?? "获取中..."}</Text>
+      <Text color="gray">Powered By Open-Source Software</Text>
+      <Text color="gray">
         By{" "}
         <ExternalLink href="https://www.jianshu.com/u/ea36c8d8aa30">
           初心不变_叶子

diff --git a/frontend/src/components/HeaderBlock.tsx b/frontend/src/components/HeaderBlock.tsx
@@ -28,7 +28,7 @@ export default function HeaderBlock({ pageName, isMainPage = false }: Props) {
           />
         ) : (
           <TextButton
-            colorScheme="secondary"
+            color="black"
             leftIcon="i-mdi-keyboard-arrow-left"
             onClick={() => setLocation("/")}
           />

diff --git a/frontend/src/components/PageWrapper.tsx b/frontend/src/components/PageWrapper.tsx
@@ -1,5 +1,4 @@
-import { useDocumentTitle } from "@mantine/hooks";
-import { Column, LoadingPage } from "@sscreator/ui";
+import { Column, LoadingPage, useDocumentTitle } from "@sscreator/ui";
 import type { JSX } from "preact";
 import { Suspense } from "preact/compat";
 import { useEffect } from "preact/hooks";

diff --git a/frontend/src/components/SearchModal.tsx b/frontend/src/components/SearchModal.tsx
@@ -23,7 +23,7 @@ export default function SearchModal() {
   return (
     <>
       <TextButton
-        colorScheme="secondary"
+        color="black"
         leftIcon="i-mdi-search"
         onClick={() => {
           isSearchModalOpened.value = true;

diff --git a/frontend/src/components/ToolCard.tsx b/frontend/src/components/ToolCard.tsx
@@ -27,10 +27,10 @@ export default function ToolCard({
         <Column gap="gap-2">
           <Row gap="gap-2">
             <LargeText bold>{toolName}</LargeText>
-            {downgraded && <Badge colorScheme="warning">降级</Badge>}
-            {unavaliable && <Badge colorScheme="danger">不可用</Badge>}
+            {downgraded && <Badge color="warning">降级</Badge>}
+            {unavaliable && <Badge color="danger">不可用</Badge>}
           </Row>
-          <Text colorScheme="gray" className="text-left">
+          <Text color="gray" className="text-left">
             {description}
           </Text>
         </Column>

diff --git a/frontend/src/components/ToolMetaInfo.tsx b/frontend/src/components/ToolMetaInfo.tsx
@@ -37,33 +37,33 @@ export default function ToolMetaInfo() {
         <Grid cols="grid-cols-1 sm:grid-cols-2" gap="gap-2">
           {toolStatus.lastUpdateTime && (
             <Row gap="gap-1" itemsCenter>
-              <Icon colorScheme="gray" icon="i-mdi-access-time" />
-              <SmallText colorScheme="gray">
+              <Icon color="gray" icon="i-mdi-access-time" />
+              <SmallText color="gray">
                 最后更新时间：
                 {getDateTimeWithoutSecond(parseTime(toolStatus.lastUpdateTime))}
               </SmallText>
             </Row>
           )}
           {toolStatus.dataUpdateFreq && (
             <Row gap="gap-1" itemsCenter>
-              <Icon colorScheme="gray" icon="i-mdi-upload" />
-              <SmallText colorScheme="gray" nowrap>
+              <Icon color="gray" icon="i-mdi-upload" />
+              <SmallText color="gray" nowrap>
                 更新频率：{toolStatus.dataUpdateFreq}
               </SmallText>
             </Row>
           )}
           {toolStatus.dataCount && (
             <Row gap="gap-1" itemsCenter>
-              <Icon colorScheme="gray" icon="i-mdi-database-outline" />
-              <SmallText colorScheme="gray">
+              <Icon color="gray" icon="i-mdi-database-outline" />
+              <SmallText color="gray">
                 数据量：{toolStatus.dataCount}
               </SmallText>
             </Row>
           )}
           {toolStatus.dataSource && (
             <Row gap="gap-1" itemsCenter>
-              <Icon colorScheme="gray" icon="i-mdi-link" />
-              <SmallText colorScheme="gray">
+              <Icon color="gray" icon="i-mdi-link" />
+              <SmallText color="gray">
                 数据来源：
                 {Object.entries(toolStatus.dataSource).map(([name, url]) => (
                   <ExternalLink href={url}>{name}</ExternalLink>
@@ -75,7 +75,7 @@ export default function ToolMetaInfo() {
       )}
 
       {toolStatus?.status === ToolStatusEnum.DOWNGRADED && (
-        <Notice colorScheme="warning" title="服务降级">
+        <Notice color="warning" title="服务降级">
           <Text>
             {toolStatus?.reason ??
               "该小工具处于降级状态，其功能、数据准确性和性能可能受到影响，请您留意。"}

diff --git a/frontend/src/pages/JPEPFTNMacketAnalyzer.tsx b/frontend/src/pages/JPEPFTNMacketAnalyzer.tsx
@@ -2,8 +2,8 @@ import { computed, useSignal } from "@preact/signals";
 import {
   Column,
   Grid,
-  Heading1,
   Heading2,
+  Heading3,
   LargeText,
   Notice,
   Row,
@@ -45,30 +45,30 @@ function PlatformInfo() {
 
   return (
     <Column>
-      <Heading1>平台信息</Heading1>
+      <Heading2>平台信息</Heading2>
       {platformRules && !platformRules.isOpen && (
-        <Notice colorScheme="warning" title="平台休市中" />
+        <Notice color="warning" title="平台休市中" />
       )}
       <Row className="justify-around">
         <Column gap="gap-1">
-          <Text colorScheme="gray">贝交易手续费</Text>
+          <Text color="gray">贝交易手续费</Text>
           {platformRules ? (
             <LargeText bold>{platformRules.FTNOrderFee * 100}%</LargeText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <LargeText colorScheme="gray">获取中</LargeText>
+              <LargeText color="gray">获取中</LargeText>
             </Row>
           )}
         </Column>
         <Column gap="gap-1">
-          <Text colorScheme="gray">商品交易手续费</Text>
+          <Text color="gray">商品交易手续费</Text>
           {platformRules ? (
             <LargeText bold>{platformRules.goodsOrderFee * 100}%</LargeText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <LargeText colorScheme="gray">获取中</LargeText>
+              <LargeText color="gray">获取中</LargeText>
             </Row>
           )}
         </Column>
@@ -95,47 +95,47 @@ function RealtimePrice() {
 
   return (
     <Column gap="gap-2">
-      <Heading2>价格</Heading2>
+      <Heading3>价格</Heading3>
       <Row className="justify-around">
         <Column gap="gap-1">
-          <Text colorScheme="gray">买贝</Text>
+          <Text color="gray">买贝</Text>
           {currentPrice ? (
             <LargeText bold>{currentPrice.buyPrice}</LargeText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <LargeText colorScheme="gray">获取中</LargeText>
+              <LargeText color="gray">获取中</LargeText>
             </Row>
           )}
           {platformRules ? (
-            <SmallText colorScheme="gray">
+            <SmallText color="gray">
               限价：{platformRules.buyOrderMinimumPrice}
             </SmallText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <SmallText colorScheme="gray">获取中</SmallText>
+              <SmallText color="gray">获取中</SmallText>
             </Row>
           )}
         </Column>
         <Column gap="gap-1">
-          <Text colorScheme="gray">卖贝</Text>
+          <Text color="gray">卖贝</Text>
           {currentPrice ? (
             <LargeText bold>{currentPrice.sellPrice}</LargeText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <LargeText colorScheme="gray">获取中</LargeText>
+              <LargeText color="gray">获取中</LargeText>
             </Row>
           )}
           {platformRules ? (
-            <SmallText colorScheme="gray">
+            <SmallText color="gray">
               限价：{platformRules.sellOrderMinimumPrice}
             </SmallText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <SmallText colorScheme="gray">获取中</SmallText>
+              <SmallText color="gray">获取中</SmallText>
             </Row>
           )}
         </Column>
@@ -161,20 +161,20 @@ function RealtimeAmount() {
 
   return (
     <Column gap="gap-2">
-      <Heading2>挂单量</Heading2>
+      <Heading3>挂单量</Heading3>
       <Row className="justify-around">
         <Column gap="gap-1">
-          <Text colorScheme="gray">买贝</Text>
+          <Text color="gray">买贝</Text>
           {currentAmount ? (
             <LargeText bold>{currentAmount.buyAmount}</LargeText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <LargeText colorScheme="gray">获取中</LargeText>
+              <LargeText color="gray">获取中</LargeText>
             </Row>
           )}
           {currentAmount && totalPoolAmount.value ? (
-            <SmallText colorScheme="gray">
+            <SmallText color="gray">
               占比：
               {(
                 (currentAmount.buyAmount / totalPoolAmount.value) *
@@ -185,22 +185,22 @@ function RealtimeAmount() {
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <SmallText colorScheme="gray">获取中</SmallText>
+              <SmallText color="gray">获取中</SmallText>
             </Row>
           )}
         </Column>
         <Column gap="gap-1">
-          <Text colorScheme="gray">卖贝</Text>
+          <Text color="gray">卖贝</Text>
           {currentAmount ? (
             <LargeText bold>{currentAmount.sellAmount}</LargeText>
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <LargeText colorScheme="gray">获取中</LargeText>
+              <LargeText color="gray">获取中</LargeText>
             </Row>
           )}
           {currentAmount && totalPoolAmount.value ? (
-            <SmallText colorScheme="gray">
+            <SmallText color="gray">
               占比：
               {(
                 (currentAmount.sellAmount / totalPoolAmount.value) *
@@ -211,7 +211,7 @@ function RealtimeAmount() {
           ) : (
             <Row gap="gap-2" itemsCenter>
               <LoaderIcon />
-              <SmallText colorScheme="gray">获取中</SmallText>
+              <SmallText color="gray">获取中</SmallText>
             </Row>
           )}
         </Column>
@@ -240,7 +240,7 @@ function RealtimeAmountDistribution() {
 
   return (
     <Column gap="gap-2">
-      <Heading2>挂单价格分布</Heading2>
+      <Heading3>挂单价格分布</Heading3>
       <Select
         id="amount-distribution-trade-type"
         value={tradeType}
@@ -278,7 +278,7 @@ function RealtimeAmountDistribution() {
 function RealtimeData() {
   return (
     <Column>
-      <Heading1>实时数据</Heading1>
+      <Heading2>实时数据</Heading2>
 
       <Grid cols="grid-cols-1 sm:grid-cols-2">
         <RealtimePrice />
@@ -319,7 +319,7 @@ function PriceHistory() {
 
   return (
     <Column gap="gap-2">
-      <Heading1>贝价趋势</Heading1>
+      <Heading2>贝价趋势</Heading2>
       <Select
         id="price-trending-time-range"
         value={timeRange}
@@ -400,7 +400,7 @@ function AmountHistory() {
 
   return (
     <Column gap="gap-2">
-      <Heading1>挂单量趋势</Heading1>
+      <Heading2>挂单量趋势</Heading2>
       <Select
         id="amount-trending-time-range"
         value={timeRange}

diff --git a/frontend/src/pages/LPRecommendChecker.tsx b/frontend/src/pages/LPRecommendChecker.tsx
@@ -44,40 +44,32 @@ function Result({
   return (
     <>
       <LargeText
-        colorScheme={checkResult.canRecommendNow ? "success" : "danger"}
+        color={checkResult.canRecommendNow ? "success" : "danger"}
         bold
       >
         {checkResult.canRecommendNow ? "可推荐" : "不可推荐"}
       </LargeText>
       <Row className="flex-wrap justify-around">
         <Column gap="gap-1">
-          <Text colorScheme="gray">文章</Text>
+          <Text color="gray">文章</Text>
           <ExternalLink className="text-lg" href={articleUrl.value}>
             {checkResult.articleTitle}
           </ExternalLink>
         </Column>
         <Column gap="gap-1">
-          <Text colorScheme={shouldFPRewardHighlight ? "danger" : "gray"}>
+          <Text color={shouldFPRewardHighlight ? "danger" : "gray"}>
             获钻量
           </Text>
-          <LargeText
-            colorScheme={shouldFPRewardHighlight ? "danger" : undefined}
-          >
+          <LargeText color={shouldFPRewardHighlight ? "danger" : undefined}>
             {checkResult.FPReward.toFixed(2)}
           </LargeText>
         </Column>
         <Column gap="gap-1">
-          <Text
-            colorScheme={
-              shouldnextCanRecommendDateHighlight ? "danger" : "gray"
-            }
-          >
+          <Text color={shouldnextCanRecommendDateHighlight ? "danger" : "gray"}>
             作者下次可推时间
           </Text>
           <LargeText
-            colorScheme={
-              shouldnextCanRecommendDateHighlight ? "danger" : undefined
-            }
+            color={shouldnextCanRecommendDateHighlight ? "danger" : undefined}
           >
             {checkResult.nextCanRecommendDate
               ? getDate(parseTime(checkResult.nextCanRecommendDate))
@@ -106,7 +98,7 @@ export default function LPRecommendChecker() {
 
   return (
     <Column>
-      <SmallText colorScheme="gray">
+      <SmallText color="gray">
         本工具仅依据 LP 理事会公开推文规则进行检测，具体事宜请以实际为准。
       </SmallText>
       <TextInput