From be0ff294be095d026a24473d873ec1e9755885e1 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Mon, 28 Apr 2025 05:40:02 +0800 Subject: [PATCH] update: UI of VDF test page --- .gitignore | 6 +- .idea/cvsa.iml | 7 + .../src/components/InfoPage/MetadataRow.astro | 8 + .../frontend/src/components/VDFtester.svelte | 152 ++++++++++++------ packages/frontend/src/pages/login/index.astro | 2 +- .../frontend/src/pages/register/index.astro | 2 +- .../frontend/src/pages/song/[id]/info.astro | 56 ++----- packages/frontend/src/styles/global.css | 91 ++++++++++- 8 files changed, 227 insertions(+), 97 deletions(-) create mode 100644 packages/frontend/src/components/InfoPage/MetadataRow.astro diff --git a/.gitignore b/.gitignore index 710d3e4..fdf0294 100644 --- a/.gitignore +++ b/.gitignore @@ -68,12 +68,9 @@ package-lock.json .env.production.local .env.local -# Fresh build directory -_fresh/ # npm dependencies node_modules/ - # project specific logs/ __pycache__ @@ -85,3 +82,6 @@ ml/data/ ml/filter/checkpoints scripts model/ + + +.astro \ No newline at end of file diff --git a/.idea/cvsa.iml b/.idea/cvsa.iml index b9c8292..78a2917 100644 --- a/.idea/cvsa.iml +++ b/.idea/cvsa.iml @@ -19,6 +19,13 @@ + + + + + + + diff --git a/packages/frontend/src/components/InfoPage/MetadataRow.astro b/packages/frontend/src/components/InfoPage/MetadataRow.astro new file mode 100644 index 0000000..ff18c32 --- /dev/null +++ b/packages/frontend/src/components/InfoPage/MetadataRow.astro @@ -0,0 +1,8 @@ +--- +const { title, description } = Astro.props; +--- + + + {title} + {description} + \ No newline at end of file diff --git a/packages/frontend/src/components/VDFtester.svelte b/packages/frontend/src/components/VDFtester.svelte index e6bca8a..f06b7b6 100644 --- a/packages/frontend/src/components/VDFtester.svelte +++ b/packages/frontend/src/components/VDFtester.svelte @@ -1,5 +1,8 @@
-

VDF Benchmark

+

VDF 基准测试

- {#if !isBenchmarking} - - {/if} + {#if !bigintSupported} +

+ ⚠️ 您的浏览器不支持 BigInt，无法运行基准测试。 +

+ {:else if !isBenchmarking} + + {/if} {#if isBenchmarking} -

- Benchmarking in progress... ({currentTestIndex + 1}/{testCombinations.length}) +

+ 正在测试: {currentTestIndex + 1}/{testCombinations.length}

{#if currentN !== null && currentDifficulty !== null} -

N Bits: {currentN.toString(2).length}

-

Difficulty: {currentDifficulty}

-
+

密钥长度: {currentN.toString(2).length} 比特

+

难度: {currentDifficulty.toLocaleString()}

+
+
+
{/if} {/if} {#if benchmarkResults.length > 0 && !isBenchmarking} -

Benchmark Results

-

- Summary: - {getAccumulatedDifficulty()} - calculations done in {getAccumulatedTime().toFixed(1)}ms, - speed: {getSpeed().toFixed(2)} op/s +

测试结果

+

+ 测试在 {(getAccumulatedTime() / 1000).toFixed(3)} 秒内完成.
+ 速度: {Math.round(getSpeed()).toLocaleString()} 迭代 / 秒.
+ + 速度是在 N = {preferredBits} bits, T = {speedSample.difficulty} 的测试中测量的. +

- - +
+ - + - + {#each benchmarkResults as result} - - - - + + + + {/each}
Time (ms)耗时 (ms) N (bits)T (log10)T (迭代)
{result.time.toFixed(2)}{result.N.toString(2).length}{Math.log10(Number(result.difficulty)).toFixed(2)}
+ {result.time.toFixed(2)} + + {result.N.toString(2).length} + + {Number(result.difficulty)} +
{/if}
+ +{#if !isBenchmarking} +
0 && !isBenchmarking ? "" : "absolute left-1/2 -translate-x-1/2 top-72")} + transition:fade={{ duration: 200 }} + > +

关于本页

+
+

+ 这是一个性能测试页面，
+ 旨在测试我们的一个 VDF (Verifiable Delayed Function, 可验证延迟函数) 实现的性能。
+ 这是一个数学函数，它驱动了整个网站的验证码（CAPTCHA）。
+ 通过使用该函数，我们可以让您无需通过点选图片或滑动滑块既可完成验证， 同时防御我们的网站，使其免受自动程序的攻击。 +
+

+

+ 点击 Start Benchmark 按钮，会自动测试并展示结果。
+

+

+ 你可以将结果发送至邮箱: contact@alikia2x.com + 或 QQ：1559913735，并附上自己的设备信息 + （例如，手机型号、电脑的 CPU 型号等）。
+ 我们会根据测试结果，优化我们的实现，使性能更优。
+ 感谢你的支持！
+

+
+
+{/if} + + diff --git a/packages/frontend/src/pages/login/index.astro b/packages/frontend/src/pages/login/index.astro index 01b9f9b..b5effe2 100644 --- a/packages/frontend/src/pages/login/index.astro +++ b/packages/frontend/src/pages/login/index.astro @@ -4,7 +4,7 @@ import Layout from "@layouts/Layout.astro";
-
+

登录

很抱歉，但您现在无法登录。

因为目前还没有写好啦~

diff --git a/packages/frontend/src/pages/register/index.astro b/packages/frontend/src/pages/register/index.astro index 5c530b8..ede0a4b 100644 --- a/packages/frontend/src/pages/register/index.astro +++ b/packages/frontend/src/pages/register/index.astro @@ -5,7 +5,7 @@ import RightArrow from "@components/icon/RightArrow.astro";
-
+

欢迎

欢迎来到中 V 档案馆。
diff --git a/packages/frontend/src/pages/song/[id]/info.astro b/packages/frontend/src/pages/song/[id]/info.astro index 427dd6f..7413a88 100644 --- a/packages/frontend/src/pages/song/[id]/info.astro +++ b/packages/frontend/src/pages/song/[id]/info.astro @@ -4,6 +4,7 @@ import TitleBar from "@components/TitleBar.astro"; import pg from "pg"; import { format } from 'date-fns'; import { zhCN } from 'date-fns/locale'; +import MetadataRow from "@components/InfoPage/MetadataRow.astro"; const databaseHost = import.meta.env.DB_HOST const databaseName = import.meta.env.DB_NAME @@ -121,50 +122,17 @@ interface Snapshot {

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + +
ID{videoInfo?.id}
AID{videoInfo?.aid}
BVID{videoInfo?.bvid}
标题{videoInfo?.title}
描述{videoInfo?.description}
UID{videoInfo?.uid}
标签{videoInfo?.tags}
发布时间{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}
时长 (秒){videoInfo?.duration}
创建时间{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}
封面{videoInfo?.cover_url ? videoInfo.cover_url : '-'}
diff --git a/packages/frontend/src/styles/global.css b/packages/frontend/src/styles/global.css index c84ae7e..1e8a68f 100644 --- a/packages/frontend/src/styles/global.css +++ b/packages/frontend/src/styles/global.css @@ -7,14 +7,101 @@ --color-on-surface-variant: #534341; --color-dark-on-surface-variant: #d8c2be; --color-dark-surface-container-high: #322826; - --color-dark-container: #271d1c; - --color-container: #fceae7; + --color-dark-surface-container: #271d1c; + --color-surface-container: #fceae7; --color-on-surface: #231918; --color-dark-on-surface: #f1dfdc; --color-surface: #fff8f6; --color-dark-surface: #1a1110; --color-primary: #904b40; --color-dark-primary: #ffb2b7; + --color-primary-container: #ffdad4; + --color-dark-primary-container: #73342a; + --color-on-primary: #ffffff; + --color-dark-on-primary: #561e16; + --color-dark-primary-fixed-dim: #ffb4a8; + --color-secondary-container: #ffdad4; + --color-dark-secondary-container: #5d3f3b; + + --color-surface-tint: rgb(144 75 64); + --color-dark-surface-tint: rgb(255 180 168); + --color-on-primary-container: rgb(115 52 42); + --color-dark-on-primary-container: rgb(255 218 212); + --color-secondary: rgb(119 86 81); + --color-dark-secondary: rgb(231 189 182); + --color-on-secondary: rgb(255 255 255); + --color-dark-on-secondary: rgb(68 41 37); + --color-on-secondary-container: rgb(93 63 59); + --color-dark-on-secondary-container: rgb(255 218 212); + --color-tertiary: rgb(112 92 46); + --color-dark-tertiary: rgb(222 196 140); + --color-on-tertiary: rgb(255 255 255); + --color-dark-on-tertiary: rgb(62 46 4); + --color-tertiary-container: rgb(251 223 166); + --color-dark-tertiary-container: rgb(86 68 25); + --color-on-tertiary-container: rgb(86 68 25); + --color-dark-on-tertiary-container: rgb(251 223 166); + --color-error: rgb(186 26 26); + --color-dark-error: rgb(255 180 171); + --color-on-error: rgb(255 255 255); + --color-dark-on-error: rgb(105 0 5); + --color-error-container: rgb(255 218 214); + --color-dark-error-container: rgb(147 0 10); + --color-on-error-container: rgb(147 0 10); + --color-dark-on-error-container: rgb(255 218 214); + --color-background: rgb(255 248 246); + --color-dark-background: rgb(26 17 16); + --color-on-background: rgb(35 25 24); + --color-dark-on-background: rgb(241 223 220); + --color-surface-variant: rgb(245 221 218); + --color-dark-surface-variant: rgb(83 67 65); + --color-outline: rgb(133 115 112); + --color-dark-outline: rgb(160 140 137); + --color-outline-variant: rgb(216 194 190); + --color-dark-outline-variant: rgb(83 67 65); + --color-shadow: rgb(0 0 0); + --color-dark-shadow: rgb(0 0 0); + --color-scrim: rgb(0 0 0); + --color-dark-scrim: rgb(0 0 0); + --color-inverse-surface: rgb(57 46 44); + --color-dark-inverse-surface: rgb(241 223 220); + --color-inverse-on-surface: rgb(255 237 234); + --color-dark-inverse-on-surface: rgb(57 46 44); + --color-inverse-primary: rgb(255 180 168); + --color-dark-inverse-primary: rgb(144 75 64); + --color-primary-fixed: rgb(255 218 212); + --color-dark-primary-fixed: rgb(255 218 212); + --color-on-primary-fixed: rgb(58 9 5); + --color-dark-on-primary-fixed: rgb(58 9 5); + --color-primary-fixed-dim: rgb(255 180 168); + --color-on-primary-fixed-variant: rgb(115 52 42); + --color-dark-on-primary-fixed-variant: rgb(115 52 42); + --color-secondary-fixed: rgb(255 218 212); + --color-dark-secondary-fixed: rgb(255 218 212); + --color-on-secondary-fixed: rgb(44 21 18); + --color-dark-on-secondary-fixed: rgb(44 21 18); + --color-secondary-fixed-dim: rgb(231 189 182); + --color-dark-secondary-fixed-dim: rgb(231 189 182); + --color-on-secondary-fixed-variant: rgb(93 63 59); + --color-dark-on-secondary-fixed-variant: rgb(93 63 59); + --color-tertiary-fixed: rgb(251 223 166); + --color-dark-tertiary-fixed: rgb(251 223 166); + --color-on-tertiary-fixed: rgb(37 26 0); + --color-dark-on-tertiary-fixed: rgb(37 26 0); + --color-tertiary-fixed-dim: rgb(222 196 140); + --color-dark-tertiary-fixed-dim: rgb(222 196 140); + --color-on-tertiary-fixed-variant: rgb(86 68 25); + --color-dark-on-tertiary-fixed-variant: rgb(86 68 25); + --color-surface-dim: rgb(232 214 211); + --color-dark-surface-dim: rgb(26 17 16); + --color-surface-bright: rgb(255 248 246); + --color-dark-surface-bright: rgb(66 55 53); + --color-surface-container-lowest: rgb(255 255 255); + --color-dark-surface-container-lowest: rgb(20 12 11); + --color-surface-container-low: rgb(255 240 238); + --color-dark-surface-container-low: rgb(35 25 24); + --color-surface-container-highest: rgb(241 223 220); + --color-dark-surface-container-highest: rgb(61 50 48); } a {