modify:ui

2025-10-02 16:19:45 +08:00
parent 9128bbec54
commit 8cf16f6a8e
5 changed files with 102 additions and 88 deletions
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -3,6 +3,7 @@
 :root {
  --color-reverse-white: white;
  --color-reverse-black: black;
+  --bg-history: white;
  --color-item-bg: rgb(228, 230, 232);
  --color-item-hover: white;
  //--color-item-active: rgb(75, 110, 175);
@@ -92,6 +93,7 @@ html.dark {
  --color-select-text: black;
  --color-notice-bg: rgb(43, 45, 48);

+  --bg-history: rgb(43, 45, 48);
  --color-item-bg: rgb(43, 45, 48);
  --color-item-hover: rgb(67, 69, 74);
  --color-item-active: rgb(84, 84, 84);
--- a/src/pages/article/ArticlesPage.vue
+++ b/src/pages/article/ArticlesPage.vue
@@ -113,6 +113,12 @@ const totalSpend = $computed(() => {
  }
  return 0
 })
+const todayTotalSpend = $computed(() => {
+  if (base.sbook.statistics?.length) {
+    return msToHourMinute(total(base.sbook.statistics.filter(v => dayjs(v.startDate).isSame(dayjs(), 'day')), 'spend'))
+  }
+  return 0
+})

 const totalDay = $computed(() => {
  if (base.sbook.statistics?.length) {
@@ -176,16 +182,16 @@ const weekList = $computed(() => {
        </div>
        <div class="flex gap-4 items-center mt-3 gap-space">
          <div class="stat">
-            <div class="num">{{ totalSpend }}</div>
-            <div class="txt">总学习时长</div>
+            <div class="num">{{ todayTotalSpend }}</div>
+            <div class="txt">今日学习时长</div>
          </div>
          <div class="stat">
            <div class="num">{{ totalDay }}</div>
            <div class="txt">总学习天数</div>
          </div>
          <div class="stat">
-            <div class="num">{{ base.sbook?.statistics?.length || 0 }}</div>
-            <div class="txt">总学习次数</div>
+            <div class="num">{{ totalSpend }}</div>
+            <div class="txt">总学习时长</div>
          </div>
        </div>

@@ -263,7 +269,7 @@ const weekList = $computed(() => {
  border: 1px solid gainsboro;

  .num {
-    @apply color-[#409eff] text-2xl font-bold;
+    @apply color-[#409eff] text-xl font-bold;
  }

  .txt {
--- a/src/pages/article/BookDetail.vue
+++ b/src/pages/article/BookDetail.vue
@@ -182,10 +182,11 @@ const totalSpend = $computed(() => {
        </div>
        <div class="right flex-[4] shrink-0 pl-4 overflow-auto">
          <div v-if="selectArticle.id">
-            <div class="font-family text-base mb-4" v-if="currentPractice.length">
-              <div>学习记录：{{ msToHourMinute(total(currentPractice, 'spend'))}}</div>
-              <div class="item" v-for="i in currentPractice">
-                {{_dateFormat(i.startDate,'YYYY/MM/DD HH:mm')}}: {{ msToHourMinute(i.spend) }}
+            <div class="font-family text-base mb-4 pr-2" v-if="currentPractice.length">
+              <div class="text-2xl font-bold">学习记录</div>
+              <div class="mt-1 mb-3">总学习时长：{{ msToHourMinute(total(currentPractice, 'spend'))}}</div>
+              <div class="item border border-item border-solid mt-2 p-2 bg-[var(--bg-history)] rounded-md flex justify-between" v-for="i in currentPractice">
+                <span class="color-gray ">{{_dateFormat(i.startDate,'YYYY/MM/DD HH:mm')}}</span> <span>{{ msToHourMinute(i.spend) }}</span>
              </div>
            </div>
            <div class="en-article-family title text-xl">
--- a/src/pages/article/components/TypingArticle.vue
+++ b/src/pages/article/components/TypingArticle.vue
@@ -5,7 +5,7 @@ import { useBaseStore } from "@/stores/base.ts";
 import { useSettingStore } from "@/stores/setting.ts";
 import { usePlayBeep, usePlayCorrect, usePlayKeyboardAudio } from "@/hooks/sound.ts";
 import { emitter, EventKey } from "@/utils/eventBus.ts";
-import { _dateFormat, _nextTick, msToMinute } from "@/utils";
+import { _dateFormat, _nextTick, msToHourMinute, msToMinute, total } from "@/utils";
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import { getTranslateText } from "@/hooks/article.ts";
@@ -250,75 +250,81 @@ function onTyping(e: KeyboardEvent) {
  if (isTyping) return;
  isTyping = true;
  // console.log('keyDown', e.key, e.code, e.keyCode)
-  let currentSection = props.article.sections[sectionIndex]
-  let currentSentence = currentSection[sentenceIndex]
-  let currentWord: ArticleWord = currentSentence.words[wordIndex]
-  wrong = ''
+  try {
+    let currentSection = props.article.sections[sectionIndex]
+    let currentSentence = currentSection[sentenceIndex]
+    let currentWord: ArticleWord = currentSentence.words[wordIndex]
+    wrong = ''

-  const next = () => {
-    isSpace = false;
-    input = wrong = ''
-    stringIndex = 0;
-    // 检查下一个单词是否存在
-    if (wordIndex + 1 < currentSentence.words.length) {
-      wordIndex++;
-      emit('nextWord', currentWord);
-    } else {
-      nextSentence()
-    }
-  }
-
-  if (isSpace) {
-    if (e.code === 'Space') {
-      next()
-    } else {
-      wrong = ' '
-      playBeep()
-      setTimeout(() => {
-        wrong = ''
-        wrong = input = ''
-      }, 500)
-    }
-  } else {
-    //如果是首句首词
-    if (sectionIndex === 0 && sentenceIndex === 0 && wordIndex === 0 && stringIndex === 0) {
-      emit('play', {sentence: currentSection[sentenceIndex], handle: false})
-    }
-    let letter = e.key
-    let key = currentWord.word[stringIndex]
-    // console.log('key', key,)
-
-    let isRight = false
-    if (settingStore.ignoreCase) {
-      isRight = key.toLowerCase() === letter.toLowerCase()
-    } else {
-      isRight = key === letter
-    }
-    if (!isRight) {
-      if (currentWord.type === PracticeArticleWordType.Word) {
-        emit('wrong', currentWord)
-      }
-      playBeep()
-    }
-
-    input += letter
-    currentWord.input = input
-    stringIndex++
-    //单词输入完毕
-    if (!currentWord.word[stringIndex]) {
-      input = ''
-      //如果不是符号，播放完成音效
-      if (currentWord.type === PracticeArticleWordType.Word) playCorrect()
-      if (currentWord.nextSpace) {
-        isSpace = true
+    const next = () => {
+      isSpace = false;
+      input = wrong = ''
+      stringIndex = 0;
+      // 检查下一个单词是否存在
+      if (wordIndex + 1 < currentSentence.words.length) {
+        wordIndex++;
+        emit('nextWord', currentWord);
      } else {
-        next()
+        nextSentence()
      }
    }
+
+    if (isSpace) {
+      if (e.code === 'Space') {
+        next()
+      } else {
+        wrong = ' '
+        playBeep()
+        setTimeout(() => {
+          wrong = ''
+          wrong = input = ''
+        }, 500)
+      }
+    } else {
+      //如果是首句首词
+      if (sectionIndex === 0 && sentenceIndex === 0 && wordIndex === 0 && stringIndex === 0) {
+        emit('play', {sentence: currentSection[sentenceIndex], handle: false})
+      }
+      let letter = e.key
+      let key = currentWord.word[stringIndex]
+      // console.log('key', key,)
+
+      let isRight = false
+      if (settingStore.ignoreCase) {
+        isRight = key.toLowerCase() === letter.toLowerCase()
+      } else {
+        isRight = key === letter
+      }
+      if (!isRight) {
+        if (currentWord.type === PracticeArticleWordType.Word) {
+          emit('wrong', currentWord)
+        }
+        playBeep()
+      }
+
+      input += letter
+      currentWord.input = input
+      stringIndex++
+      //单词输入完毕
+      if (!currentWord.word[stringIndex]) {
+        input = ''
+        //如果不是符号，播放完成音效
+        if (currentWord.type === PracticeArticleWordType.Word) playCorrect()
+        if (currentWord.nextSpace) {
+          isSpace = true
+        } else {
+          next()
+        }
+      }
+    }
+    playKeyboardAudio()
+    e.preventDefault()
+    isTyping = false
+  } catch (e) {
+    //todo 上报
+    localStorage.removeItem(PracticeSaveArticleKey.key)
+    init()
  }
-  playKeyboardAudio()
-  e.preventDefault()
-  isTyping = false
 }

 function play() {
@@ -614,25 +620,22 @@ const currentPractice = inject('currentPractice', [])
          @click="emit('next')">下一篇
      </BaseButton>
    </div>
-    <div class="mb-50 mt-10" v-if="currentPractice.length && isEnd">
-      <div class="title">历史记录</div>
-      <div class="item text-lg" :class="i === currentPractice.length-1 && 'color-red'"
+
+    <div class="font-family text-base pr-2 mb-50 mt-10" v-if="currentPractice.length && isEnd">
+      <div class="text-2xl font-bold">学习记录</div>
+      <div class="mt-1 mb-3">总学习时长：{{ msToHourMinute(total(currentPractice, 'spend')) }}</div>
+      <div class="item border border-item border-solid mt-2 p-2 bg-[var(--bg-history)] rounded-md flex justify-between"
+           :class="i === currentPractice.length-1 && 'color-red!'"
           v-for="(item,i) in currentPractice">
-        <span>{{ i + 1 }}.</span>
-        <span class="ml-2 mr-4">{{ _dateFormat(item.startDate, 'YYYY-MM-DD HH:mm') }}</span>
-        <span>{{ msToMinute(item.spend) }}</span>
+        <span :class="i === currentPractice.length-1 ? 'color-red':'color-gray'"
+        >{{
+            i === currentPractice.length - 1 ? '当前' : i + 1
+          }}.&nbsp;&nbsp;{{ _dateFormat(item.startDate, 'YYYY/MM/DD HH:mm') }}</span>
+        <span>{{ msToHourMinute(item.spend) }}</span>
      </div>
    </div>

    <template v-if="false">
-      <div class="translate-bottom mb-10" v-if="settingStore.translate">
-        <header class="mb-4">
-          <div class="text-2xl center">{{ props.article.titleTranslate }}</div>
-        </header>
-        <template v-if="getTranslateText(article).length">
-          <div class="text-xl mb-4 indent-8" v-for="t in getTranslateText(article)">{{ t }}</div>
-        </template>
-      </div>
      <div class="center">
        <BaseButton @click="showQuestions =! showQuestions">显示题目</BaseButton>
      </div>
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -7,11 +7,13 @@ export default defineConfig({
    'bg-second': 'bg-[var(--color-second)]',
    'bg-third': 'bg-[var(--color-third)]',
    'bg-card-active': 'bg-[var(--color-card-active)]',
+    'bg-item': 'bg-[var(--color-item-bg)]',
    'color-main': 'color-[var(--color-main-text)]',
    'gap-space': 'gap-[var(--space)]',
    'p-space': 'p-[var(--space)]',
    'px-space': 'px-[var(--space)]',
    'py-space': 'py-[var(--space)]',
+    'border-item': 'border-[var(--color-item-border)]',
  },
  presets: [
    presetWind3(),