AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:Optimize the settlement interface and add a sharing function

Browse Source
This commit is contained in:
Zyronon
2025-11-23 02:57:56 +08:00
parent 35a71a7296
commit 2ad24720f9
8 changed files with 42 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -54,6 +54,7 @@ declare module 'vue' {
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']
IconFluentCheckmark20Regular: typeof import('~icons/fluent/checkmark20-regular')['default']
IconFluentCheckmarkCircle16Filled: typeof import('~icons/fluent/checkmark-circle16-filled')['default']
IconFluentCheckmarkCircle16Regular: typeof import('~icons/fluent/checkmark-circle16-regular')['default']
IconFluentCheckmarkCircle20Filled: typeof import('~icons/fluent/checkmark-circle20-filled')['default']

7
src/assets/css/style.scss
View File

@@ -75,6 +75,10 @@
--color-link: #2563EB;
--color-card-bg: white;
--bg-card-primary: white;
--bg-card-secend: rgb(247, 247, 247);
}
.footer {
@@ -128,6 +132,9 @@ html.dark {
--color-card-bg: rgb(30, 31, 34);
--bg-card-primary: rgb(30, 31, 34);
--bg-card-secend: rgb(43, 45, 48);
.footer {
&.hide {
--color-progress-bar: var(--color-third) !important;

36
src/components/ChannelIcons.vue
View File

@@ -25,7 +25,6 @@ let posterEl = $ref<HTMLDivElement | null>(null)
// 计算学习统计数据
const studyStats = $computed(() => {
const accuracyRate = practiceStore.total === 0 ? 100 : Math.round(((practiceStore.total - practiceStore.wrong) / practiceStore.total) * 100)
return {
total: practiceStore.total,
@@ -33,7 +32,6 @@ const studyStats = $computed(() => {
review: practiceStore.reviewWordNumber + practiceStore.writeWordNumber,
wrong: practiceStore.wrong,
correct: practiceStore.total - practiceStore.wrong,
accuracy: accuracyRate,
time: msToHourMinute(practiceStore.spend),
date: dayjs().format('MM月DD日'),
dictionary: baseStore.sdict.name || '未知词书'
@@ -125,11 +123,11 @@ const sentence = $computed(() => {
<div class="flex-col center gap-1">
<!-- 分享学习总结按钮 -->
<BaseIcon @click="showShareDialog = true"
class="cursor-pointer hover:scale-110 transition-transform duration-200">
class="bounce">
<IconFluentShare20Regular class="text-blue-500 hover:text-blue-600"/>
</BaseIcon>
<a :href="GITHUB" target="_blank" rel="noreferrer" aria-label="GITHUB 项目地址">
<a :href="GITHUB" target="_blank" rel="noreferrer" aria-label="GITHUB 项目地址" class="color-[--color-reverse-black]">
<BaseIcon>
<IconSimpleIconsGithub/>
</BaseIcon>
@@ -195,10 +193,6 @@ const sentence = $computed(() => {
<!-- 统计数据 -->
<div class="grid grid-cols-3 gap-4">
<div class="stat-card">
<div class="text-2xl font-bold">{{ studyStats.accuracy }}%</div>
<div class="text-base">正确率</div>
</div>
<div class="stat-card">
<div class="text-2xl font-bold">{{ studyStats.newWords }}</div>
<div class="text-base">新词</div>
@@ -207,6 +201,10 @@ const sentence = $computed(() => {
<div class="text-2xl font-bold">{{ studyStats.review }}</div>
<div class="text-base">复习</div>
</div>
<div class="stat-card">
<div class="text-2xl font-bold">{{ studyStats.wrong }}</div>
<div class="text-base">错词</div>
</div>
</div>
<!-- 励志语句 -->
@@ -235,7 +233,7 @@ const sentence = $computed(() => {
<!-- 右侧：分享引导区域 -->
<div class="flex-1 pt-0 ">
<div class="">
<div class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<div class="text-2xl font-bold mb-4 flex items-center">
<span class="mr-2">🎯</span>
分享你的进步
</div>
@@ -257,10 +255,10 @@ const sentence = $computed(() => {
</div>
</div>
<div class="space-y-4 mt-30">
<div class="space-y-4 mt-24">
<!-- 个性化装扮 -->
<div @click="changeBackground"
class="flex items-center justify-start gap-space px-6 py-3 bg-gray-200 rounded-lg cp hover:bg-gray-300 transition-all duration-200">
class="flex items-center justify-start gap-space color-black px-6 py-3 bg-gray-200 rounded-lg cp hover:bg-gray-300 transition-all duration-200">
<IconMdiSparkles class="w-4 h-4 text-yellow-500"/>
换个背景
</div>
@@ -292,6 +290,7 @@ const sentence = $computed(() => {
</div>
</div>
</Dialog>
<Dialog v-model="showXhsDialog" title="小红书">
<div class="w-120 p-6 pt-0">
<div class="mb-4">
@@ -302,6 +301,7 @@ const sentence = $computed(() => {
</div>
</div>
</Dialog>
<Dialog v-model="showQQDialog" title="QQ 交流群">
<div class="w-120 p-6 pt-0">
<div class="mb-4">
@@ -315,20 +315,6 @@ const sentence = $computed(() => {
</template>
<style scoped lang="scss">
a {
color: unset;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.stat-card {
@apply text-center bg-gray-900/30 py-4 rounded-2xl;
}

1
src/components/base/Progress.vue
View File

@@ -99,6 +99,7 @@ const content = computed(() => {
color: var(--el-text-color-regular);
font-size: 14px;
text-align: center;
flex-shrink: 0;
}
}
</style>

2
src/config/env.ts
View File

@@ -17,7 +17,7 @@ export const ENV = Object.assign(map['DEV'], common)
export let AppEnv = {
TOKEN: localStorage.getItem('token') ?? '',
IS_OFFICIAL: true,
IS_OFFICIAL: false,
IS_LOGIN: false,
CAN_REQUEST: false
}

3
src/pages/article/ArticlesPage.vue
View File

@@ -168,7 +168,7 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
<template>
<BasePage>
<div class="card flex flex-col md:flex-row justify-between gap-space p-4 md:p-6">
<div class="mb-4 md:mb-0 md:w-44">
<div class="">
<Book
v-if="base.sbook.id"
:is-add="false"
@@ -208,6 +208,7 @@ const {data: recommendBookList, isFetching} = useFetch(resourceWrap(DICT_LIST.AR
</div>
</div>
<Progress class="mt-3 w-full md:w-auto"
size="large"
:percentage="base.currentBookProgress"
:format="()=> `${ base.sbook?.lastLearnIndex || 0 }/${base.sbook?.length || 0}篇`"
:show-text="true"></Progress>

8
src/pages/layout.vue
View File

@@ -44,10 +44,10 @@ function goHome() {
<span v-if="settingStore.sideExpand">设置</span>
<div class="red-point" :class="!settingStore.sideExpand && 'top-1 right-0'" v-if="runtimeStore.isNew"></div>
</div>
<div class="row" @click="router.push('/user')">
<IconFluentPerson20Regular/>
<span v-if="settingStore.sideExpand">用户</span>
</div>
<!-- <div class="row" @click="router.push('/user')">-->
<!-- <IconFluentPerson20Regular/>-->
<!-- <span v-if="settingStore.sideExpand">用户</span>-->
<!-- </div>-->
</div>
<div class="bottom flex justify-evenly ">
<BaseIcon

41
src/pages/word/Statistics.vue
View File

@@ -140,7 +140,7 @@ calcWeekList(); // 新增：计算本周学习记录
:keyboard="false"
:show-close="false"
class="statistics-modal">
<div class="p-8 pr-3 bg-white rounded-2xl space-y-6">
<div class="p-8 pr-3 bg-[var(--bg-card-primary)] rounded-2xl space-y-6">
<!-- Header Section -->
<div class="text-center relative">
<div
@@ -160,40 +160,29 @@ calcWeekList(); // 新增：计算本周学习记录
<!-- 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 class="text-sm mb-1 font-medium">学习时长</div>
<div class="text-xl font-bold">{{ 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 class="text-sm mb-1 font-medium">正确率</div>
<div class="text-xl font-bold">{{ accuracyRate }}%</div>
</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 class="text-sm mb-1 font-medium">新词</div>
<div class="text-xl font-bold ">{{ 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.reviewWordNumber + statStore.writeWordNumber }}</div>
<div class="text-sm mb-1 font-medium">复习</div>
<div class="text-xl font-bold">{{ statStore.reviewWordNumber + statStore.writeWordNumber }}</div>
</div>
</div>
@@ -201,9 +190,9 @@ calcWeekList(); // 新增：计算本周学习记录
<div class="space-y-6 flex-1">
<!-- Weekly Progress -->
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-2">
<div class="bg-[--bg-card-secend] rounded-xl p-2">
<div class="text-center mb-4">
<div class="text-xl font-semibold text-gray-900 mb-1">本周学习记录</div>
<div class="text-xl font-semibold mb-1">本周学习记录</div>
</div>
<div class="flex justify-between gap-4">
<div
@@ -220,13 +209,13 @@ calcWeekList(); // 新增：计算本周学习记录
</div>
<!-- Progress Overview -->
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl py-2 px-6">
<div class="bg-[var(--bg-card-secend)] 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-xl font-semibold">学习进度</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">
<div class="flex justify-between text-sm font-medium mt-4">
<span>已学习: {{ store.sdict.lastLearnIndex }}</span>
<span>总词数: {{ store.sdict.length }}</span>
</div>
@@ -362,6 +351,6 @@ calcWeekList(); // 新增：计算本周学习记录
<style scoped>
.item {
@apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-2 text-center border border-gray-100;
@apply bg-[var(--bg-card-secend)] rounded-xl p-2 text-center border border-gray-100;
}
</style>