feat:edit home page

components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     Close: typeof import('./src/components/icon/Close.vue')['default']
     DeleteIcon: typeof import('./src/components/icon/DeleteIcon.vue')['default']
     Empty: typeof import('./src/components/Empty.vue')['default']
+    IconArcticonsXiaohongshuRednote: typeof import('~icons/arcticons/xiaohongshu-rednote')['default']
     IconBxVolume: typeof import('~icons/bx/volume')['default']
     IconBxVolumeFull: typeof import('~icons/bx/volume-full')['default']
     IconBxVolumeLow: typeof import('~icons/bx/volume-low')['default']
@@ -75,6 +76,14 @@ declare module 'vue' {
     IconFluentTranslateOff16Regular: typeof import('~icons/fluent/translate-off16-regular')['default']
     IconFluentWeatherMoon16Regular: typeof import('~icons/fluent/weather-moon16-regular')['default']
     IconFluentWeatherSunny16Regular: typeof import('~icons/fluent/weather-sunny16-regular')['default']
+    IconIconXiaoHongShu: typeof import('~icons/ic/on-xiao-hong-shu')['default']
+    IconMaterialSymbolsMail: typeof import('~icons/material-symbols/mail')['default']
+    IconMdiGithub: typeof import('~icons/mdi/github')['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']
+    IconStreamlineUltimateColorWechatLogo: typeof import('~icons/streamline-ultimate-color/wechat-logo')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SlideHorizontal: typeof import('./src/components/slide/SlideHorizontal.vue')['default']

package.json

@@ -39,6 +39,9 @@
     "@iconify-json/bx": "^1.2.2",
     "@iconify-json/eos-icons": "^1.2.4",
     "@iconify-json/fluent": "^1.2.28",
+    "@iconify-json/material-symbols": "^1.2.33",
+    "@iconify-json/ri": "^1.2.5",
+    "@iconify-json/simple-icons": "^1.2.48",
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.1.33",

pnpm-lock.yaml

@@ -69,6 +69,15 @@ importers:
       '@iconify-json/fluent':
         specifier: ^1.2.28
         version: 1.2.28
+      '@iconify-json/material-symbols':
+        specifier: ^1.2.33
+        version: 1.2.33
+      '@iconify-json/ri':
+        specifier: ^1.2.5
+        version: 1.2.5
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.48
+        version: 1.2.48
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
@@ -481,6 +490,15 @@ packages:
   '@iconify-json/fluent@1.2.28':
     resolution: {integrity: sha512-Lnaf38ruWopJv8PdEsK8vXgxKpFSsKED2kI0/575ZXg6XHUMvzSuLlldAVAOEWZmMVPJFC0MXe07Ybnh1ziLvw==}
 
+  '@iconify-json/material-symbols@1.2.33':
+    resolution: {integrity: sha512-Bs0X1+/vpJydW63olrGh60zkR8/Y70sI14AIWaP7Z6YQXukzWANH4q3I0sIPklbIn1oL6uwLvh0zQyd6Vh79LQ==}
+
+  '@iconify-json/ri@1.2.5':
+    resolution: {integrity: sha512-kWGimOXMZrlYusjBKKXYOWcKhbOHusFsmrmRGmjS7rH0BpML5A9/fy8KHZqFOwZfC4M6amObQYbh8BqO5cMC3w==}
+
+  '@iconify-json/simple-icons@1.2.48':
+    resolution: {integrity: sha512-EACOtZMoPJtERiAbX1De0asrrCtlwI27+03c9OJlYWsly9w1O5vcD8rTzh+kDPjo+K8FOVnq2Qy+h/CzljSKDA==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -4114,6 +4132,18 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/material-symbols@1.2.33':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.5':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/simple-icons@1.2.48':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.3.0':

src/App.vue

@@ -4,7 +4,6 @@ import {BaseState, useBaseStore} from "@/stores/base.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import useTheme from "@/hooks/theme.ts";
-import CollectNotice from "@/pages/pc/components/CollectNotice.vue";
 import {SAVE_DICT_KEY, SAVE_SETTING_KEY} from "@/utils/const.ts";
 import {shakeCommonDict} from "@/utils";
 import {routes} from "@/router.ts";
@@ -64,7 +63,6 @@ watch(() => route.path, (to, from) => {
       </keep-alive>
     </transition>
   </router-view>
-  <CollectNotice/>
 </template>
 
 <style scoped lang="scss">

src/pages/pc/components/CollectNotice.vue

@@ -32,9 +32,11 @@ function close() {
 
 watch(() => settingStore.load, (n) => {
   if (n && settingStore.first) {
-    show = true
+   setTimeout(()=>{
+     show = true
+   },1000)
   }
-})
+}, {immediate: true})
 
 </script>
 
@@ -45,7 +47,7 @@ watch(() => settingStore.load, (n) => {
          v-if="show">
       <div class="notice">
         坚持练习，提高外语能力。将
-        <span class="active">「{{ ProjectName}}」</span>
+        <span class="active">「{{ ProjectName }}」</span>
         保存为书签，永不迷失！
       </div>
       <div class="wrapper">

src/pages/pc/home/index.vue

@@ -1,85 +1,189 @@
 <script setup lang="ts">
-import {ProjectName} from "@/config/ENV.ts";
+import {GITHUB, ProjectName} from "@/config/ENV.ts";
 import BaseButton from "@/components/BaseButton.vue";
-import Radio from "@/pages/pc/components/base/radio/Radio.vue";
+import BaseIcon from "@/components/BaseIcon.vue";
+import {defineAsyncComponent} from "vue";
+
+const Dialog = defineAsyncComponent(() => import('@/pages/pc/components/dialog/Dialog.vue'))
+let showWechatDialog = $ref(false)
+let showXhsDialog = $ref(false)
 </script>
 
 <template>
-  <div class="center flex-col gap-3rem">
-    <h1>{{ ProjectName }}</h1>
-    <div class="text-center -mt-4rem">
-      <h2>学习英语，一次敲击，一点进步</h2>
-      <h2>记忆不再盲目，学习更高效，开源单词与文章练习工具</h2>
-    </div>
-    <div class="flex">
-      <BaseButton @click="$router.push('/words')">单词练习</BaseButton>
-      <BaseButton @click="$router.push('/articles')">文章练习</BaseButton>
-    </div>
-    <div class="flex w-60vw gap-space">
-      <div class="card">
-        <div class="emoji">📚</div>
-        <div class="title">单词练习</div>
-        <div class="desc">
-          <ul>
-            <li>三种输入模式：跟打 / 复习 / 默写</li>
-            <li>智能模式：自动安排复习与默写，更高效记忆</li>
-            <li>自由模式：不受限制，想怎么练就怎么练</li>
-          </ul>
-        </div>
+  <div class="flex flex-col justify-between min-h-screen">
+    <div class="center flex-col gap-8">
+      <h1>{{ ProjectName }}</h1>
+      <div class="text-center -mt-10">
+        <h2>学习英语，一次敲击，一点进步</h2>
+        <h2>记忆不再盲目，学习更高效，开源单词与文章练习工具</h2>
       </div>
-      <div class="card">
-        <div class="emoji">✍️</div>
-        <div class="title">文章练习</div>
-        <div class="desc">
-          <ul>
-            <li>内置常见书籍，也可自行添加文章</li>
-            <li>跟打 + 默写双模式，让背诵更高效</li>
-            <li>支持边听边默写，强化记忆</li>
-            <li>支持批量导入文章，快速扩展练习内容</li>
-          </ul>
-        </div>
+      <div class="flex">
+        <BaseButton size="large" @click="$router.push('/words')">单词练习</BaseButton>
+        <BaseButton size="large" @click="$router.push('/articles')">文章练习</BaseButton>
       </div>
-      <div class="card">
-        <div class="emoji">⚙️</div>
-        <div class="title">高度自由</div>
-        <div class="desc">
-          <ul>
-            <li>自由添加词典与文章</li>
-            <li>可自定义快捷键</li>
-            <li>丰富的键盘音效</li>
-            <li>高度定制化的设置选项</li>
-            <li>完全开源，可审查、可修改</li>
-          </ul>
+      <div class="w-60vw">
+        <div class="flex mb-5 gap-space">
+          <div class="card">
+            <div class="emoji">📚</div>
+            <div class="title">单词练习</div>
+            <div class="desc">
+              <ul>
+                <li>三种输入模式：跟打 / 复习 / 默写</li>
+                <li>智能模式：智能规划复习与默写</li>
+                <li>自由模式：不受限制，自行规划</li>
+              </ul>
+            </div>
+          </div>
+          <div class="card">
+            <div class="emoji">✍️</div>
+            <div class="title">文章练习</div>
+            <div class="desc">
+              <ul>
+                <li>内置常见书籍，也可自行添加文章</li>
+                <li>跟打 + 默写双模式，让背诵更高效</li>
+                <li>支持边听边默写，强化记忆</li>
+              </ul>
+            </div>
+          </div>
+          <div class="card">
+            <div class="emoji">📕</div>
+            <div class="title">收藏、错词本、已掌握</div>
+            <div class="desc">
+              <ul>
+                <li>输入错误自动添加到错词本</li>
+                <li>主动添加到已掌握，后续自动跳过</li>
+                <li>主动添加到收藏中，以便巩固复习</li>
+              </ul>
+            </div>
+          </div>
+          <div class="card">
+            <div class="emoji">🌐</div>
+            <div class="title">海量词库</div>
+            <div class="desc">
+              内置小学、初中、高中、四六级、考研、雅思、托福、GRE、GMAT、SAT、BEC、专四、专八等词库
+            </div>
+          </div>
+
         </div>
-      </div>
-      <div class="card">
-        <div class="emoji">🎨</div>
-        <div class="title">简洁现代</div>
-        <div class="desc">
-          <ul>
-            <li>无广告</li>
-            <li>不强制关注任何平台</li>
-            <li>简洁设计</li>
-            <li>现代化UI</li>
-          </ul>
+        <div class="flex gap-space">
+          <div class="card">
+            <div class="emoji">🆓</div>
+            <div class="title">免费开源</div>
+            <div class="desc">
+              <ul>
+                <li>完全开源，可审查、可修改</li>
+                <li>免费使用</li>
+                <li>私有部署</li>
+              </ul>
+            </div>
+          </div>
+          <div class="card">
+            <div class="emoji">⚙️</div>
+            <div class="title">高度自由</div>
+            <div class="desc">
+              <ul>
+                <li>丰富的键盘音效</li>
+                <li>可自定义快捷键</li>
+                <li>高度定制化的设置选项</li>
+              </ul>
+            </div>
+          </div>
+          <div class="card">
+            <div class="emoji">🎨</div>
+            <div class="title">简洁高效</div>
+            <div class="desc">
+              <ul>
+                <li>简洁设计，现代化UI，无广告</li>
+                <li>界面清爽，操作简单</li>
+                <li>不强制关注任何平台</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="emoji">🎯</div>
+            <div class="title">个性学习</div>
+            <div class="desc">
+              <ul>
+                <li>自由添加词典与文章</li>
+                <li>定制个性学习计划</li>
+                <li>多种学习复习策略</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="w-60vw text-center" v-if="false">
+          <h3 class="text-4xl">单词练习</h3>
+          <img src="/word.png" alt="word.png" class="w-full rounded-xl">
+          <h3 class="text-4xl">文章练习</h3>
+          <img src="/article.png" alt="article.png" class="w-full rounded-xl">
         </div>
       </div>
     </div>
-    <div class="w-60vw text-center">
-      <h3 class="text-4xl">单词练习</h3>
-      <img src="/word.png" alt="word.png" class="w-full rounded-xl">
-      <h3 class="text-4xl">文章练习</h3>
-      <img src="/article.png" alt="article.png" class="w-full rounded-xl">
-    </div>
-    <div class="text-center my-10 bottom">
-      <div>Released under the GPL License.</div>
-      <div>Copyright © 2019-present zyronon 蜀ICP备2025157466号</div>
+    <div class="center gap-space  my-10 bottom">
+      <div class="center gap-1">
+        <a
+            :href="GITHUB"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="GITHUB 项目地址">
+          <BaseIcon>
+            <IconSimpleIconsGithub/>
+          </BaseIcon>
+        </a>
+
+        <BaseIcon @click="showWechatDialog = true">
+          <IconSimpleIconsWechat/>
+        </BaseIcon>
+        <BaseIcon @click="showXhsDialog = true" >
+          <IconSimpleIconsXiaohongshu/>
+        </BaseIcon>
+        <a
+            href="https://x.com/typewords2"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="关注我的 X 账户 typewords2">
+          <BaseIcon>
+            <IconRiTwitterFill/>
+          </BaseIcon>
+        </a>
+        <a
+            href="mailto:zyronon@163.com"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="发送邮件到 zyronon@163.com">
+          <BaseIcon>
+            <IconMaterialSymbolsMail/>
+          </BaseIcon>
+        </a>
+      </div>
+      <div>蜀ICP备2025157466号</div>
     </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>
   </div>
 </template>
 <style scoped lang="scss">
 h1 {
-  //color: #3451B2;
   font-size: 5rem;
   background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
   -webkit-text-fill-color: transparent;
@@ -92,12 +196,13 @@ h1 {
 h2 {
   margin: 0;
 }
-h3:first-child{
+
+h3:first-child {
   margin-top: 0;
 }
 
 .card {
-  @apply flex flex-col items-start gap-2 flex-1 mb-0;
+  @apply flex flex-col items-start gap-2 mb-0 w-25%;
   .emoji {
     display: inline-block;
     background: var(--color-third);
@@ -118,8 +223,12 @@ h3:first-child{
 
 .bottom {
   width: 100%;
-  padding-top: 3rem;
-  border-top:1px solid #c4c4c4;
+  padding-top: 2rem;
+  border-top: 1px solid #c4c4c4;
+}
+
+a {
+  color: unset;
 }
 
 </style>

src/pages/pc/word/WordHomePage.vue

@@ -19,6 +19,7 @@ import PracticeSettingDialog from "@/pages/pc/word/components/PracticeSettingDia
 import ChangeLastPracticeIndexDialog from "@/pages/pc/word/components/ChangeLastPracticeIndexDialog.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import recommendDictList from "@/assets/recommend-dict-list.json";
+import CollectNotice from "@/pages/pc/components/CollectNotice.vue";
 
 
 const store = useBaseStore()
@@ -254,6 +255,8 @@ function check(cb: Function) {
         showChangeLastPracticeIndexDialog = false
       }"
   />
+
+  <CollectNotice/>
 </template>
 
 <style scoped lang="scss">