wip
This commit is contained in:
Zyronon
15
components.d.ts
vendored
15
components.d.ts
vendored
@@ -18,6 +18,7 @@ declare module 'vue' {
|
||||
BasePage: typeof import('./src/components/BasePage.vue')['default']
|
||||
BaseTable: typeof import('./src/components/BaseTable.vue')['default']
|
||||
Book: typeof import('./src/components/Book.vue')['default']
|
||||
ChannelIcons: typeof import('./src/components/ChannelIcons.vue')['default']
|
||||
Checkbox: typeof import('./src/components/base/checkbox/Checkbox.vue')['default']
|
||||
Close: typeof import('./src/components/icon/Close.vue')['default']
|
||||
ConflictNotice: typeof import('./src/components/ConflictNotice.vue')['default']
|
||||
@@ -34,6 +35,7 @@ declare module 'vue' {
|
||||
IconBxVolumeFull: typeof import('~icons/bx/volume-full')['default']
|
||||
IconBxVolumeLow: typeof import('~icons/bx/volume-low')['default']
|
||||
IconBxVolumeMute: typeof import('~icons/bx/volume-mute')['default']
|
||||
IconDinkieIconsQq: typeof import('~icons/dinkie-icons/qq')['default']
|
||||
IconEosIconsLoading: typeof import('~icons/eos-icons/loading')['default']
|
||||
IconFluentAdd16Regular: typeof import('~icons/fluent/add16-regular')['default']
|
||||
IconFluentAdd20Regular: typeof import('~icons/fluent/add20-regular')['default']
|
||||
@@ -49,6 +51,7 @@ declare module 'vue' {
|
||||
IconFluentArrowShuffle20Filled: typeof import('~icons/fluent/arrow-shuffle20-filled')['default']
|
||||
IconFluentArrowSort20Regular: typeof import('~icons/fluent/arrow-sort20-regular')['default']
|
||||
IconFluentArrowSwap20Regular: typeof import('~icons/fluent/arrow-swap20-regular')['default']
|
||||
IconFluentBook20Regular: typeof import('~icons/fluent/book20-regular')['default']
|
||||
IconFluentBookLetter20Regular: typeof import('~icons/fluent/book-letter20-regular')['default']
|
||||
IconFluentBookNumber20Filled: typeof import('~icons/fluent/book-number20-filled')['default']
|
||||
IconFluentCalendarDate20Regular: typeof import('~icons/fluent/calendar-date20-regular')['default']
|
||||
@@ -60,6 +63,7 @@ declare module 'vue' {
|
||||
IconFluentChevronDown20Regular: typeof import('~icons/fluent/chevron-down20-regular')['default']
|
||||
IconFluentChevronLeft20Filled: typeof import('~icons/fluent/chevron-left20-filled')['default']
|
||||
IconFluentChevronLeft28Filled: typeof import('~icons/fluent/chevron-left28-filled')['default']
|
||||
IconFluentClock20Regular: typeof import('~icons/fluent/clock20-regular')['default']
|
||||
IconFluentCrown20Regular: typeof import('~icons/fluent/crown20-regular')['default']
|
||||
IconFluentDatabasePerson20Regular: typeof import('~icons/fluent/database-person20-regular')['default']
|
||||
IconFluentDelete20Regular: typeof import('~icons/fluent/delete20-regular')['default']
|
||||
@@ -79,6 +83,7 @@ declare module 'vue' {
|
||||
IconFluentNumberSymbol20Regular: typeof import('~icons/fluent/number-symbol20-regular')['default']
|
||||
IconFluentPaddingLeft20Regular: typeof import('~icons/fluent/padding-left20-regular')['default']
|
||||
IconFluentPayment20Regular: typeof import('~icons/fluent/payment20-regular')['default']
|
||||
IconFluentPen20Regular: typeof import('~icons/fluent/pen20-regular')['default']
|
||||
IconFluentPerson20Regular: typeof import('~icons/fluent/person20-regular')['default']
|
||||
IconFluentPhone20Regular: typeof import('~icons/fluent/phone20-regular')['default']
|
||||
IconFluentPlay20Regular: typeof import('~icons/fluent/play20-regular')['default']
|
||||
@@ -87,14 +92,18 @@ declare module 'vue' {
|
||||
IconFluentSearch20Regular: typeof import('~icons/fluent/search20-regular')['default']
|
||||
IconFluentSearch24Regular: typeof import('~icons/fluent/search24-regular')['default']
|
||||
IconFluentSettings20Regular: typeof import('~icons/fluent/settings20-regular')['default']
|
||||
IconFluentShare20Regular: typeof import('~icons/fluent/share20-regular')['default']
|
||||
IconFluentShare48Regular: typeof import('~icons/fluent/share48-regular')['default']
|
||||
IconFluentShieldQuestion20Regular: typeof import('~icons/fluent/shield-question20-regular')['default']
|
||||
IconFluentSlideTextTitleEdit20Regular: typeof import('~icons/fluent/slide-text-title-edit20-regular')['default']
|
||||
IconFluentSparkle20Regular: typeof import('~icons/fluent/sparkle20-regular')['default']
|
||||
IconFluentSpeakerEdit20Regular: typeof import('~icons/fluent/speaker-edit20-regular')['default']
|
||||
IconFluentSpeakerSettings20Regular: typeof import('~icons/fluent/speaker-settings20-regular')['default']
|
||||
IconFluentStar16Filled: typeof import('~icons/fluent/star16-filled')['default']
|
||||
IconFluentStar16Regular: typeof import('~icons/fluent/star16-regular')['default']
|
||||
IconFluentStar20Filled: typeof import('~icons/fluent/star20-filled')['default']
|
||||
IconFluentStarAdd16Regular: typeof import('~icons/fluent/star-add16-regular')['default']
|
||||
IconFluentTarget20Regular: typeof import('~icons/fluent/target20-regular')['default']
|
||||
IconFluentTextBulletListSquare20Regular: typeof import('~icons/fluent/text-bullet-list-square20-regular')['default']
|
||||
IconFluentTextEditStyle20Regular: typeof import('~icons/fluent/text-edit-style20-regular')['default']
|
||||
IconFluentTextListAbcUppercaseLtr20Regular: typeof import('~icons/fluent/text-list-abc-uppercase-ltr20-regular')['default']
|
||||
@@ -105,14 +114,20 @@ declare module 'vue' {
|
||||
IconFluentWeatherSunny16Regular: typeof import('~icons/fluent/weather-sunny16-regular')['default']
|
||||
IconIconParkOutlineAddMusic: typeof import('~icons/icon-park-outline/add-music')['default']
|
||||
IconIxWechatLogo: typeof import('~icons/ix/wechat-logo')['default']
|
||||
IconMaterialSymbolsMail: typeof import('~icons/material-symbols/mail')['default']
|
||||
IconPhExportLight: typeof import('~icons/ph/export-light')['default']
|
||||
IconRiTwitterFill: typeof import('~icons/ri/twitter-fill')['default']
|
||||
IconSimpleIconsGithub: typeof import('~icons/simple-icons/github')['default']
|
||||
IconSimpleIconsWechat: typeof import('~icons/simple-icons/wechat')['default']
|
||||
IconSimpleIconsXiaohongshu: typeof import('~icons/simple-icons/xiaohongshu')['default']
|
||||
IconStreamlineDiscountPercentCoupon: typeof import('~icons/streamline/discount-percent-coupon')['default']
|
||||
IconSystemUiconsImport: typeof import('~icons/system-uicons/import')['default']
|
||||
IconUiwAlipay: typeof import('~icons/uiw/alipay')['default']
|
||||
IconUiwQq: typeof import('~icons/uiw/qq')['default']
|
||||
InputNumber: typeof import('./src/components/base/InputNumber.vue')['default']
|
||||
List: typeof import('./src/components/list/List.vue')['default']
|
||||
Logo: typeof import('./src/components/Logo.vue')['default']
|
||||
MigrateDialog: typeof import('./src/components/MigrateDialog.vue')['default']
|
||||
MiniDialog: typeof import('./src/components/dialog/MiniDialog.vue')['default']
|
||||
Option: typeof import('./src/components/base/select/Option.vue')['default']
|
||||
Pagination: typeof import('./src/components/base/Pagination.vue')['default']
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
"devDependencies": {
|
||||
"@alicloud/pop-core": "^1.8.0",
|
||||
"@iconify-json/bx": "^1.2.2",
|
||||
"@iconify-json/dinkie-icons": "^1.2.0",
|
||||
"@iconify-json/eos-icons": "^1.2.4",
|
||||
"@iconify-json/fluent": "^1.2.28",
|
||||
"@iconify-json/icon-park-outline": "^1.2.4",
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@@ -63,6 +63,9 @@ importers:
|
||||
'@iconify-json/bx':
|
||||
specifier: ^1.2.2
|
||||
version: 1.2.2
|
||||
'@iconify-json/dinkie-icons':
|
||||
specifier: ^1.2.0
|
||||
version: 1.2.0
|
||||
'@iconify-json/eos-icons':
|
||||
specifier: ^1.2.4
|
||||
version: 1.2.4
|
||||
@@ -511,6 +514,9 @@ packages:
|
||||
'@iconify-json/bx@1.2.2':
|
||||
resolution: {integrity: sha512-hZVx6LMEkYckScdRdUuQWcmv8Lm2au6Cnf799TLoR6YgiAfFvaJ4M5ElwcnExvCu8ntsS7jW89r0W5LwBAfZXQ==}
|
||||
|
||||
'@iconify-json/dinkie-icons@1.2.0':
|
||||
resolution: {integrity: sha512-/RSAjK6twyEOKfW9FddZDP+EPMeSIocb4Y4Zq2Y2IbqUxYmNHqXtxidVioBzpv+a3JeiQ61ARlRKtCQ0BqSGpA==}
|
||||
|
||||
'@iconify-json/eos-icons@1.2.4':
|
||||
resolution: {integrity: sha512-gp2BCSF3+aRgMqE7LRAVxT5nXJLOtfcvGnOYwJz4gc4zxcEqAaOByxFVLZej15jXPRJmUv2TSzMNrQ2gDtw4VA==}
|
||||
|
||||
@@ -4147,6 +4153,10 @@ snapshots:
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
|
||||
'@iconify-json/dinkie-icons@1.2.0':
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
|
||||
'@iconify-json/eos-icons@1.2.4':
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
|
||||
@@ -50,12 +50,14 @@
|
||||
|
||||
<style>
|
||||
:root {
|
||||
//--color-bg: rgb(231, 232, 235);
|
||||
--color-bg: #E6E8EB;
|
||||
--color-card-bg: rgb(247, 247, 247);
|
||||
--color-card-text: black;
|
||||
--color-card-text: #111827;
|
||||
--color-line: #cecece;
|
||||
--color-h2: rgb(91, 91, 91);
|
||||
--accent: #818CF8;
|
||||
--accent-2: #60A5FA;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, .08);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
@@ -64,10 +66,13 @@
|
||||
--color-card-text: #c6c6c6;
|
||||
--color-line: #333333;
|
||||
--color-h2: rgb(151, 151, 151);
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
color: var(--color-card-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -78,7 +83,8 @@
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin: 0;
|
||||
font-weight: bold !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -91,16 +97,23 @@
|
||||
.card {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
padding: 1.2rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0;
|
||||
width: 25%;
|
||||
background: var(--color-card-bg);
|
||||
color: var(--color-card-text);
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--color-line);
|
||||
transition: transform .2s ease, box-shadow .2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
.card .emoji {
|
||||
@@ -132,16 +145,17 @@
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
transition: 0.1s;
|
||||
transition: .2s ease;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
border-radius: 0.3rem;
|
||||
color: white;
|
||||
background: rgb(12, 140, 233);
|
||||
padding: 0 1.3rem;
|
||||
height: 2.5rem;
|
||||
font-size: 0.9rem;
|
||||
border-radius: .6rem;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
padding: 0 1.4rem;
|
||||
height: 2.7rem;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 8px 20px rgba(129, 140, 248, .25);
|
||||
}
|
||||
|
||||
.base-button + .base-button {
|
||||
@@ -149,7 +163,15 @@
|
||||
}
|
||||
|
||||
.base-button:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-1px);
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.base-button.secondary {
|
||||
background: transparent;
|
||||
color: var(--color-card-text);
|
||||
border: 1px solid var(--color-line);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -167,7 +189,10 @@
|
||||
|
||||
.icon:hover {
|
||||
background: rgb(12, 140, 233);
|
||||
color: white;
|
||||
|
||||
svg {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
@@ -216,13 +241,53 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: saturate(180%) blur(8px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
width: min(1200px, 90%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 6rem;
|
||||
margin-top: 7rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
gap: 2.2rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@@ -244,8 +309,8 @@
|
||||
color: var(--color-card-text);
|
||||
}
|
||||
|
||||
.w {
|
||||
width: 60vw;
|
||||
.container {
|
||||
width: min(1200px, 90%);
|
||||
}
|
||||
|
||||
.sky-img {
|
||||
@@ -254,7 +319,8 @@
|
||||
}
|
||||
|
||||
.card-wrap {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
margin-bottom: 1.2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
@@ -284,9 +350,10 @@
|
||||
width: 16rem;
|
||||
border-radius: 1rem;
|
||||
margin-top: 1.2rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.cursor-pointer{
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -364,14 +431,29 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="nav">
|
||||
<div class="nav-inner">
|
||||
<div class="brand">
|
||||
<div class="brand-dot"></div>
|
||||
<span>Type Words</span>
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
<div class="base-button secondary" onclick="nav('/words')">单词练习</div>
|
||||
<div class="base-button secondary" onclick="nav('/articles')">文章练习</div>
|
||||
<div class="base-button secondary" onclick="nav('/vip')">会员介绍</div>
|
||||
<div class="base-button" onclick="nav('/login')">登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>Type Words</h1>
|
||||
<div class="text-center">
|
||||
<h2>学习英语，一次敲击，一点进步，开源单词与文章练习工具</h2>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="base-button" onclick="nav('/words')">单词练习</div>
|
||||
<div class="base-button" onclick="nav('/articles')">文章练习</div>
|
||||
<div class="base-button" onclick="nav('/words')">开始单词练习</div>
|
||||
<div class="base-button" onclick="nav('/articles')">开始文章练习</div>
|
||||
<!-- <div class="base-button secondary" onclick="nav('/vip')">会员介绍</div>-->
|
||||
</div>
|
||||
<div class="sky">
|
||||
<a href="https://skywork.ai/p/GrXQb4" style="width: 40%;" target="_blank">
|
||||
@@ -380,14 +462,14 @@
|
||||
class="sky-img"></a>
|
||||
<span>赞助：<a href="https://skywork.ai/p/GrXQb4" class="color-blue!" target="_blank">Skywork.AI: 10 tasks in 1 hour, not 10 hours →Limited free spots: 127 left</a></span>
|
||||
</div>
|
||||
<div class="w">
|
||||
<div class="container">
|
||||
<div class="card-wrap">
|
||||
<div class="card">
|
||||
<div class="emoji">📚</div>
|
||||
<div class="title">单词练习</div>
|
||||
<div class="desc">
|
||||
<ul>
|
||||
<li>三种输入模式：跟打 / 复习 / 默写</li>
|
||||
<li>四种模式：跟打/听写/辨认/默写</li>
|
||||
<li>智能模式：智能规划复习与默写</li>
|
||||
<li>自由模式：不受限制，自行规划</li>
|
||||
</ul>
|
||||
@@ -488,14 +570,14 @@
|
||||
</a>
|
||||
|
||||
<div class="icon" onclick="toggleWechatDialog()">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em" color="#22C55E">
|
||||
<path fill="currentColor"
|
||||
d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213c0 .163.13.295.29.295a.33.33 0 0 0 .167-.054l1.903-1.114a.86.86 0 0 1 .717-.098a10.2 10.2 0 0 0 2.837.403c.276 0 .543-.027.811-.05c-.857-2.578.157-4.972 1.932-6.446c1.703-1.415 3.882-1.98 5.853-1.838c-.576-3.583-4.196-6.348-8.596-6.348M5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178a1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18m5.34 2.867c-1.797-.052-3.746.512-5.28 1.786c-1.72 1.428-2.687 3.72-1.78 6.22c.942 2.453 3.666 4.229 6.884 4.229c.826 0 1.622-.12 2.361-.336a.72.72 0 0 1 .598.082l1.584.926a.3.3 0 0 0 .14.047c.134 0 .24-.111.24-.247c0-.06-.023-.12-.038-.177l-.327-1.233a.6.6 0 0 1-.023-.156a.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983a.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983a.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="icon" onclick="toggleQQDialog()">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em" color="#F87171">
|
||||
<g fill="none">
|
||||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
|
||||
<path fill="currentColor"
|
||||
@@ -504,7 +586,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon" onclick="toggleXhsDialog()">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em" color="#EF4444">
|
||||
<path fill="currentColor"
|
||||
d="M22.405 9.879c.002.016.01.02.07.019h.725a.797.797 0 0 0 .78-.972a.794.794 0 0 0-.884-.618a.795.795 0 0 0-.692.794c0 .101-.002.666.001.777m-11.509 4.808c-.203.001-1.353.004-1.685.003a2.5 2.5 0 0 1-.766-.126a.025.025 0 0 0-.03.014L7.7 16.127a.025.025 0 0 0 .01.032c.111.06.336.124.495.124c.66.01 1.32.002 1.981 0q.017 0 .023-.015l.712-1.545a.025.025 0 0 0-.024-.036zM.477 9.91c-.071 0-.076.002-.076.01l-.01.08c-.027.397-.038.495-.234 3.06c-.012.24-.034.389-.135.607c-.026.057-.033.042.003.112c.046.092.681 1.523.787 1.74c.008.015.011.02.017.02c.008 0 .033-.026.047-.044q.219-.282.371-.606c.306-.635.44-1.325.486-1.706c.014-.11.021-.22.03-.33l.204-2.616l.022-.293c.003-.029 0-.033-.03-.034zm7.203 3.757a1.4 1.4 0 0 1-.135-.607c-.004-.084-.031-.39-.235-3.06a.4.4 0 0 0-.01-.082c-.004-.011-.052-.008-.076-.008h-1.48c-.03.001-.034.005-.03.034l.021.293q.114 1.473.233 2.946c.05.4.186 1.085.487 1.706c.103.215.223.419.37.606c.015.018.037.051.048.049c.02-.003.742-1.642.804-1.765c.036-.07.03-.055.003-.112m3.861-.913h-.872a.126.126 0 0 1-.116-.178l1.178-2.625a.025.025 0 0 0-.023-.035l-1.318-.003a.148.148 0 0 1-.135-.21l.876-1.954a.025.025 0 0 0-.023-.035h-1.56q-.017 0-.024.015l-.926 2.068c-.085.169-.314.634-.399.938a.5.5 0 0 0-.02.191a.46.46 0 0 0 .23.378a1 1 0 0 0 .46.119h.59c.041 0-.688 1.482-.834 1.972a.5.5 0 0 0-.023.172a.47.47 0 0 0 .23.398c.15.092.342.12.475.12l1.66-.001q.017 0 .023-.015l.575-1.28a.025.025 0 0 0-.024-.035m-6.93-4.937H3.1a.032.032 0 0 0-.034.033c0 1.048-.01 2.795-.01 6.829c0 .288-.269.262-.28.262h-.74c-.04.001-.044.004-.04.047c.001.037.465 1.064.555 1.263c.01.02.03.033.051.033c.157.003.767.009.938-.014c.153-.02.3-.06.438-.132c.3-.156.49-.419.595-.765c.052-.172.075-.353.075-.533q.003-3.495-.007-6.991a.03.03 0 0 0-.032-.032zm11.784 6.896q-.002-.02-.024-.022h-1.465c-.048-.001-.049-.002-.05-.049v-4.66c0-.072-.005-.07.07-.07h.863c.08 0 .075.004.075-.074V8.393c0-.082.006-.076-.08-.076h-3.5c-.064 0-.075-.006-.075.073v1.445c0 .083-.006.077.08.077h.854c.075 0 .07-.004.07.07v4.624c0 .095.008.084-.085.084c-.37 0-1.11-.002-1.304 0c-.048.001-.06.03-.06.03l-.697 1.519s-.014.025-.008.036s.013.008.058.008q2.622.003 5.243.002c.03-.001.034-.006.035-.033zm4.177-3.43q0 .021-.02.024c-.346.006-.692.004-1.037.004q-.021-.003-.022-.024q-.006-.651-.01-1.303c0-.072-.006-.071.07-.07l.733-.003c.041 0 .081.002.12.015c.093.025.16.107.165.204c.006.431.002 1.153.001 1.153m2.67.244a1.95 1.95 0 0 0-.883-.222h-.18c-.04-.001-.04-.003-.042-.04V10.21q.001-.198-.025-.394a1.8 1.8 0 0 0-.153-.53a1.53 1.53 0 0 0-.677-.71a2.2 2.2 0 0 0-1-.258c-.153-.003-.567 0-.72 0c-.07 0-.068.004-.068-.065V7.76c0-.031-.01-.041-.046-.039H17.93s-.016 0-.023.007q-.008.008-.008.023v.546c-.008.036-.057.015-.082.022h-.95c-.022.002-.028.008-.03.032v1.481c0 .09-.004.082.082.082h.913c.082 0 .072.128.072.128v1.148s.003.117-.06.117h-1.482c-.068 0-.06.082-.06.082v1.445s-.01.068.064.068h1.457c.082 0 .076-.006.076.079v3.225c0 .088-.007.081.082.081h1.43c.09 0 .082.007.082-.08v-3.27c0-.029.006-.035.033-.035l2.323-.003a.7.7 0 0 1 .28.061a.46.46 0 0 1 .274.407c.008.395.003.79.003 1.185c0 .259-.107.367-.33.367h-1.218c-.023.002-.029.008-.028.033q.276.655.57 1.303a.05.05 0 0 0 .04.026c.17.005.34.002.51.003c.15-.002.517.004.666-.01a2 2 0 0 0 .408-.075c.59-.18.975-.698.976-1.313v-1.981q.001-.191-.034-.38c0 .078-.029-.641-.724-.998"></path>
|
||||
</svg>
|
||||
@@ -516,7 +598,7 @@
|
||||
rel="noreferrer"
|
||||
aria-label="关注我的 X 账户 typewords2">
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em" color="#60A5FA">
|
||||
<path fill="currentColor"
|
||||
d="M22.213 5.656a8.4 8.4 0 0 1-2.402.658A4.2 4.2 0 0 0 21.649 4c-.82.488-1.719.83-2.655 1.015a4.182 4.182 0 0 0-7.126 3.814a11.87 11.87 0 0 1-8.621-4.37a4.17 4.17 0 0 0-.566 2.103c0 1.45.739 2.731 1.86 3.481a4.2 4.2 0 0 1-1.894-.523v.051a4.185 4.185 0 0 0 3.355 4.102a4.2 4.2 0 0 1-1.89.072A4.185 4.185 0 0 0 8.02 16.65a8.4 8.4 0 0 1-6.192 1.732a11.83 11.83 0 0 0 6.41 1.88c7.694 0 11.9-6.373 11.9-11.9q0-.271-.012-.541a8.5 8.5 0 0 0 2.086-2.164"></path>
|
||||
</svg>
|
||||
@@ -528,7 +610,7 @@
|
||||
rel="noreferrer"
|
||||
aria-label="发送邮件到 zyronon@163.com">
|
||||
<div class="icon">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
|
||||
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em" color="#60A5FA">
|
||||
<path fill="currentColor"
|
||||
d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z"></path>
|
||||
</svg>
|
||||
|
||||
@@ -12,7 +12,7 @@ import {DictId} from "@/types/types.ts";
|
||||
import {APP_VERSION, AppEnv, LOCAL_FILE_KEY, Origin, SAVE_DICT_KEY, SAVE_SETTING_KEY} from "@/config/env.ts";
|
||||
import {syncSetting} from "@/apis";
|
||||
import {useUserStore} from "@/stores/user.ts";
|
||||
import MigrateDialog from "@/pages/MigrateDialog.vue";
|
||||
import MigrateDialog from "@/components/MigrateDialog.vue";
|
||||
|
||||
const store = useBaseStore()
|
||||
const runtimeStore = useRuntimeStore()
|
||||
|
||||
95
src/components/ChannelIcons.vue
Normal file
95
src/components/ChannelIcons.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { GITHUB, ProjectName } from "@/config/env.ts";
|
||||
import BaseIcon from "@/components/BaseIcon.vue";
|
||||
import { defineAsyncComponent } from "vue";
|
||||
|
||||
const Dialog = defineAsyncComponent(() => import('@/components/dialog/Dialog.vue'))
|
||||
let showWechatDialog = $ref(false)
|
||||
let showXhsDialog = $ref(false)
|
||||
let showQQDialog = $ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-col center gap-1">
|
||||
<BaseIcon>
|
||||
<IconFluentShare20Regular/>
|
||||
</BaseIcon>
|
||||
|
||||
<a
|
||||
:href="GITHUB"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="GITHUB 项目地址">
|
||||
<BaseIcon>
|
||||
<IconSimpleIconsGithub/>
|
||||
</BaseIcon>
|
||||
</a>
|
||||
|
||||
<BaseIcon @click="showWechatDialog = true">
|
||||
<IconSimpleIconsWechat class="color-green-500"/>
|
||||
</BaseIcon>
|
||||
<BaseIcon @click="showQQDialog = true">
|
||||
<IconUiwQq class="color-red"/>
|
||||
</BaseIcon>
|
||||
<BaseIcon @click="showXhsDialog = true">
|
||||
<IconSimpleIconsXiaohongshu class="color-red-500"/>
|
||||
</BaseIcon>
|
||||
|
||||
<a
|
||||
href="https://x.com/typewords2"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="关注我的 X 账户 typewords2">
|
||||
<BaseIcon>
|
||||
<IconRiTwitterFill class="color-blue"/>
|
||||
</BaseIcon>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="mailto:zyronon@163.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="发送邮件到 zyronon@163.com">
|
||||
<BaseIcon>
|
||||
<IconMaterialSymbolsMail class="color-blue"/>
|
||||
</BaseIcon>
|
||||
</a>
|
||||
</div>
|
||||
<Dialog v-model="showWechatDialog" title="Type Words 交流群">
|
||||
<div class="w-120 p-6 pt-0">
|
||||
<div class="mb-4">
|
||||
加入我们的用户社群后，您可以与我们的开发团队进行沟通，分享您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/wechat.png" alt="微信群二维码" class="w-60 rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog v-model="showXhsDialog" title="小红书">
|
||||
<div class="w-120 p-6 pt-0">
|
||||
<div class="mb-4">
|
||||
关注小红书后，您可以获得开发团队的最新动态和更新内容，反馈您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/xhs.png" alt="小红书二维码" class="w-60 rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog v-model="showQQDialog" title="QQ 交流群">
|
||||
<div class="w-120 p-6 pt-0">
|
||||
<div class="mb-4">
|
||||
<span>加入我们的用户社群后，您可以与我们的开发团队进行沟通，分享您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/qq.jpg" alt="QQ群二维码" class="w-60 rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
a {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,15 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import {useBaseStore} from "@/stores/base.ts";
|
||||
import { useBaseStore } from "@/stores/base.ts";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import {PracticeData, ShortcutKey, Statistics, TaskWords, WordPracticeMode} from "@/types/types.ts";
|
||||
import {emitter, EventKey, useEvents} from "@/utils/eventBus.ts";
|
||||
import {useSettingStore} from "@/stores/setting.ts";
|
||||
import {usePracticeStore} from "@/stores/practice.ts";
|
||||
import { ShortcutKey, Statistics, TaskWords } from "@/types/types.ts";
|
||||
import { emitter, EventKey, useEvents } from "@/utils/eventBus.ts";
|
||||
import { useSettingStore } from "@/stores/setting.ts";
|
||||
import { usePracticeStore } from "@/stores/practice.ts";
|
||||
import dayjs from "dayjs";
|
||||
import isBetween from "dayjs/plugin/isBetween";
|
||||
import {defineAsyncComponent, inject, watch} from "vue";
|
||||
import { defineAsyncComponent, inject, watch } from "vue";
|
||||
import isoWeek from 'dayjs/plugin/isoWeek'
|
||||
import {msToHourMinute, msToMinute} from "@/utils";
|
||||
import { msToHourMinute } from "@/utils";
|
||||
import Progress from "@/components/base/Progress.vue";
|
||||
import ChannelIcons from "@/components/ChannelIcons.vue";
|
||||
|
||||
dayjs.extend(isoWeek)
|
||||
dayjs.extend(isBetween);
|
||||
@@ -45,6 +47,7 @@ function calcWeekList() {
|
||||
weekList[idx] = true;
|
||||
}
|
||||
});
|
||||
weekList[2] = true;
|
||||
list = weekList;
|
||||
}
|
||||
|
||||
@@ -125,212 +128,148 @@ const formattedStudyTime = $computed(() => {
|
||||
return time.replace('小时', 'h ').replace('分钟', 'm')
|
||||
})
|
||||
|
||||
// 获取星期标签
|
||||
function getDayLabel(index: number) {
|
||||
const days = ['一', '二', '三', '四', '五', '六', '日']
|
||||
return days[index]
|
||||
}
|
||||
calcWeekList(); // 新增：计算本周学习记录
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
:close-on-click-bg="false"
|
||||
:header="false"
|
||||
:keyboard="false"
|
||||
:show-close="false"
|
||||
class="statistics-modal">
|
||||
<div class="p-8 bg-white rounded-2xl max-w-2xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="text-center mb-8 relative">
|
||||
<div
|
||||
class="text-3xl font-bold mb-2 bg-gradient-to-r from-purple-500 to-purple-700 bg-clip-text text-transparent">
|
||||
<template v-if="practiceTaskWords.shuffle.length">
|
||||
🎯 随机复习完成
|
||||
</template>
|
||||
<template v-else>
|
||||
🎉 今日任务完成
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-gray-600 font-medium text-lg">{{ encouragementText }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Stats Grid -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-2">
|
||||
<!-- Study Time -->
|
||||
<div class="item">
|
||||
<IconFluentClock20Regular class="text-purple-500 mx-auto mb-2"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">学习时长</div>
|
||||
<div class="text-xl font-bold text-gray-900">{{ formattedStudyTime }}</div>
|
||||
:close-on-click-bg="false"
|
||||
:header="false"
|
||||
:keyboard="false"
|
||||
:show-close="false"
|
||||
class="statistics-modal">
|
||||
<div class="p-8 pr-3 bg-white rounded-2xl gap-3 flex">
|
||||
<div class="space-y-6">
|
||||
<!-- Header Section -->
|
||||
<div class="text-center relative">
|
||||
<div
|
||||
class="text-3xl font-bold mb-2 bg-gradient-to-r from-purple-500 to-purple-700 bg-clip-text text-transparent">
|
||||
<template v-if="practiceTaskWords.shuffle.length">
|
||||
🎯 随机复习完成
|
||||
</template>
|
||||
<template v-else>
|
||||
🎉 今日任务完成
|
||||
</template>
|
||||
</div>
|
||||
<p class="font-medium text-lg">{{ encouragementText }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Accuracy Rate -->
|
||||
<div class="item">
|
||||
<IconFluentTarget20Regular class="text-purple-500 mx-auto mb-2"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">正确率</div>
|
||||
<div class="text-xl font-bold text-gray-900 mb-2">{{ accuracyRate }}%</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-1">
|
||||
<div
|
||||
class="h-1 rounded-full transition-all duration-300"
|
||||
:class="{
|
||||
'bg-green-500': accuracyRate >= 95,
|
||||
'bg-yellow-500': accuracyRate >= 85 && accuracyRate < 95,
|
||||
'bg-red-500': accuracyRate < 85
|
||||
<!-- Main Stats Grid -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<!-- Study Time -->
|
||||
<div class="item">
|
||||
<IconFluentClock20Regular class="text-purple-500"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">学习时长</div>
|
||||
<div class="text-xl font-bold text-gray-900">{{ formattedStudyTime }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Accuracy Rate -->
|
||||
<div class="item">
|
||||
<IconFluentTarget20Regular class="text-purple-500"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">正确率</div>
|
||||
<div class="text-xl font-bold text-gray-900 mb-2">{{ accuracyRate }}%</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-1" v-if="false">
|
||||
<div
|
||||
class="h-1 rounded-full transition-all duration-300"
|
||||
:class="{
|
||||
'bg-green-500': accuracyRate >= 95,
|
||||
'bg-yellow-500': accuracyRate >= 85 && accuracyRate < 95,
|
||||
'bg-red-500': accuracyRate < 85
|
||||
}"
|
||||
:style="{ width: accuracyRate + '%' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Words -->
|
||||
<div class="item">
|
||||
<IconFluentBook20Regular class="text-purple-500 mx-auto mb-2"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">总词数</div>
|
||||
<div class="text-xl font-bold text-gray-900">{{ statStore.total }}</div>
|
||||
</div>
|
||||
|
||||
<!-- New Words -->
|
||||
<div class="item">
|
||||
<IconFluentSparkle20Regular class="text-purple-500 mx-auto mb-2"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">新词</div>
|
||||
<div class="text-xl font-bold text-gray-900">{{ statStore.newWordNumber }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Word Breakdown -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-2 mb-2">
|
||||
<div class="text-center mb-4 title">学习详情</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="flex items-center gap-3 p-3 bg-white rounded-lg shadow-sm">
|
||||
<div class="w-6 h-6 text-green-500">
|
||||
<IconFluentCheckmark20Regular/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-gray-600">正确</div>
|
||||
<div class="text-lg font-bold text-gray-900">{{ statStore.total - statStore.wrong }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-white rounded-lg shadow-sm">
|
||||
<div class="w-6 h-6 text-red-500">
|
||||
<IconFluentDismiss20Regular/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-gray-600">错误</div>
|
||||
<div class="text-lg font-bold text-gray-900">{{ statStore.wrong }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-white rounded-lg shadow-sm">
|
||||
<div class="w-6 h-6 text-yellow-500">
|
||||
<IconFluentArrowRepeatAll20Regular/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-gray-600">复习</div>
|
||||
<div class="text-lg font-bold text-gray-900">{{
|
||||
statStore.reviewWordNumber + statStore.writeWordNumber
|
||||
}}
|
||||
:style="{ width: accuracyRate + '%' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weekly Progress -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-2 mb-2">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-xl font-semibold text-gray-900 mb-1">本周学习记录</div>
|
||||
<div class="text-sm text-gray-600">坚持就是胜利</div>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2">
|
||||
<div
|
||||
v-for="(item, i) in list"
|
||||
:key="i"
|
||||
class="flex-1 text-center p-2 rounded-lg transition-all duration-300 cursor-pointer"
|
||||
:class="item ? 'bg-green-500 text-white shadow-lg' : 'bg-white text-gray-700 hover:shadow-md'"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ i + 1 }}</div>
|
||||
<div class="w-2 h-2 rounded-full mx-auto mb-1"
|
||||
:class="item ? 'bg-white bg-opacity-30' : 'bg-gray-300'"></div>
|
||||
<div class="text-xs font-medium">{{ getDayLabel(i) }}</div>
|
||||
<!-- New Words -->
|
||||
<div class="item">
|
||||
<IconFluentSparkle20Regular class="text-purple-500"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">新词</div>
|
||||
<div class="text-xl font-bold text-gray-900">{{ statStore.newWordNumber }}</div>
|
||||
</div>
|
||||
|
||||
<!-- New Words -->
|
||||
<div class="item">
|
||||
<IconFluentBook20Regular class="text-purple-500"/>
|
||||
<div class="text-sm text-gray-600 mb-1 font-medium">复习</div>
|
||||
<div class="text-xl font-bold text-gray-900">{{ statStore.newWordNumber }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Overview -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 mb-8">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="text-xl font-semibold text-gray-900">学习进度</div>
|
||||
<div class="text-2xl font-bold text-purple-600">{{ studyProgress }}%</div>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-3 mb-3">
|
||||
<div
|
||||
class="h-3 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 transition-all duration-500"
|
||||
:style="{ width: studyProgress + '%' }">
|
||||
<!-- Weekly Progress -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-2">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-xl font-semibold text-gray-900 mb-1">本周学习记录</div>
|
||||
</div>
|
||||
<div class="flex justify-between gap-4">
|
||||
<div
|
||||
v-for="(item, i) in list"
|
||||
:key="i"
|
||||
class="flex-1 text-center px-2 py-3 rounded-lg"
|
||||
:class="item ? 'bg-green-500 text-white shadow-lg' : 'bg-white text-gray-700'"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ i + 1 }}</div>
|
||||
<div class="w-2 h-2 rounded-full mx-auto mb-1"
|
||||
:class="item ? 'bg-white bg-opacity-30' : 'bg-gray-300'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm text-gray-600 font-medium">
|
||||
<span>已学习: {{ store.sdict.lastLearnIndex }}</span>
|
||||
<span>总词数: {{ store.sdict.length }}</span>
|
||||
|
||||
<!-- Progress Overview -->
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl py-2 px-6">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="text-xl font-semibold text-gray-900">学习进度</div>
|
||||
<div class="text-2xl font-bold text-purple-600">{{ studyProgress }}%</div>
|
||||
</div>
|
||||
<Progress :percentage="studyProgress" size="large" :show-text="false"/>
|
||||
<div class="flex justify-between text-sm text-gray-600 font-medium mt-4">
|
||||
<span>已学习: {{ store.sdict.lastLearnIndex }}</span>
|
||||
<span>总词数: {{ store.sdict.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<BaseButton
|
||||
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.RepeatChapter]"
|
||||
@click="options(EventKey.repeatStudy)">
|
||||
<div class="center gap-2">
|
||||
<IconFluentArrowClockwise20Regular/>
|
||||
重学一遍
|
||||
</div>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextChapter]"
|
||||
@click="options(EventKey.continueStudy)"
|
||||
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
:class="dictIsEnd ? 'bg-gradient-to-r from-purple-500 to-purple-600 text-white' : 'bg-gradient-to-r from-green-500 to-green-600 text-white'">
|
||||
<IconFluentPlay20Regular/>
|
||||
{{ dictIsEnd ? '从头开始练习' : '再来一组' }}
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextRandomWrite]"
|
||||
@click="options(EventKey.randomWrite)">
|
||||
<div class="center gap-2">
|
||||
<IconFluentPen20Regular/>
|
||||
继续默写
|
||||
</div>
|
||||
</BaseButton>
|
||||
<BaseButton @click="$router.back">
|
||||
<div class="center gap-2">
|
||||
<IconFluentHome20Regular/>
|
||||
返回主页
|
||||
</div>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<BaseButton
|
||||
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.RepeatChapter]"
|
||||
@click="options(EventKey.repeatStudy)"
|
||||
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg bg-gradient-to-r from-yellow-500 to-orange-500 text-white">
|
||||
<IconFluentArrowClockwise20Regular class="w-5 h-5"/>
|
||||
重学一遍
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextChapter]"
|
||||
@click="options(EventKey.continueStudy)"
|
||||
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
:class="dictIsEnd ? 'bg-gradient-to-r from-purple-500 to-purple-600 text-white' : 'bg-gradient-to-r from-green-500 to-green-600 text-white'">
|
||||
<IconFluentPlay20Regular class="w-5 h-5"/>
|
||||
{{ dictIsEnd ? '从头开始练习' : '再来一组' }}
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
:keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextRandomWrite]"
|
||||
@click="options(EventKey.randomWrite)"
|
||||
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white">
|
||||
<IconFluentPen20Regular class="w-5 h-5"/>
|
||||
继续默写
|
||||
</BaseButton>
|
||||
<BaseButton @click="$router.back"
|
||||
class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg bg-gradient-to-r from-gray-500 to-gray-600 text-white">
|
||||
<IconFluentHome20Regular class="w-5 h-5"/>
|
||||
返回主页
|
||||
</BaseButton>
|
||||
</div>
|
||||
<ChannelIcons/>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom animation for pulse effect */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* Custom gradient text utility */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.item{
|
||||
@apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1 border border-gray-100;
|
||||
.item {
|
||||
@apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-2 text-center border border-gray-100;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user