From 9d3f9c1b11d8d13a8393ccd51857bfe529d2215f Mon Sep 17 00:00:00 2001
From: daonan <91860300+daonan233@users.noreply.github.com>
Date: Fri, 22 Mar 2024 14:55:48 +0800
Subject: [PATCH] feat(word): add word lists (#193)

* feat(wordList): init wordList system

* feat(wordlist):add wordlist feat except upload

* feat(wordlist):change some styles and annotate the upload botton

* fix(wordlist): fix the error of "10 rpx"

* feat(wordList):add feat:upload wordlist.

* feat(wordlist):fix some style problems(rpx) and change the picture in tools.

* fix(wordlist):delete some unecessary codes

---------

Co-authored-by: sheeplin <1270610465@qq.com>
---
 src/components/ChooseWordListAdd.vue |  95 +++++++++
 src/components/ListPage.vue          | 111 ++++++++++
 src/pages.json                       |  23 +++
 src/pages/lists/details.vue          | 218 ++++++++++++++++++++
 src/pages/lists/index.vue            | 290 +++++++++++++++++++++++++++
 src/pages/lists/upload.vue           | 245 ++++++++++++++++++++++
 src/pages/tools/index.vue            |   6 +
 src/routers/word.js                  |   3 +-
 src/services/lists.js                |  19 ++
 src/services/word.js                 |   4 +
 10 files changed, 1013 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ChooseWordListAdd.vue
 create mode 100644 src/components/ListPage.vue
 create mode 100644 src/pages/lists/details.vue
 create mode 100644 src/pages/lists/index.vue
 create mode 100644 src/pages/lists/upload.vue
 create mode 100644 src/services/lists.js

diff --git a/src/components/ChooseWordListAdd.vue b/src/components/ChooseWordListAdd.vue
new file mode 100644
index 00000000..1cec01c9
--- /dev/null
+++ b/src/components/ChooseWordListAdd.vue
@@ -0,0 +1,95 @@
+<template>
+  <view class="cu-list menu">
+    <view
+      v-for="(item, index1) in words"
+      :key="index1"
+      class="cu-item"
+      style="min-height: 200rpx;border-bottom: 1upx solid rgba(0, 0, 0, 0.07);"
+      :data-index="index1"
+    >
+      <view
+        class="cuIcon-roundadd roundPos"
+        @click="addWord(item.word.id)"
+      />
+      <view class="cu-list menu">
+        <view class="flex flex-direction justify-between">
+          <view class="margin-bottom-xs">
+            <text class="text-xxl text-bold">
+              {{ item.word.word }}
+            </text>
+          </view>
+          <view
+            class="margin-bottom-xs"
+            @tap.stop="playAudio(item.pronunciation.url,false)"
+          >
+            <text>{{ item.word.standard_pinyin }}</text>
+            <text class="text-grey padding-left">
+              /{{ item.word.standard_ipa }}/
+            </text>
+            <text
+              v-if="item.pronunciation.url.length > 4"
+              class="cuIcon-notificationfill text-blue margin-left"
+            />
+          </view>
+          <view class="text-grey definition">
+            {{ item.word.definition }}
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="words.length === 0"
+        class="text-center margin"
+      >
+        <text class="text-lg text-gray">
+          --- 暂无数据 ---
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+
+import { playAudio } from '@/utils/audio';
+
+export default {
+  name: 'ChooseWordListAdd',
+  props: {
+    words: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      chooseID: 0,
+    };
+  },
+  methods: {
+    playAudio,
+    addWord(id) {
+      this.chooseID = id;
+      this.$emit('addCheck', this.chooseID);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.definition {
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.roundPos {
+  display: flex;
+  position: fixed;
+  text-align: centere;
+  font-size: 40 rpx;
+  color: #838383;
+  margin-left: 85%;
+}
+</style>
diff --git a/src/components/ListPage.vue b/src/components/ListPage.vue
new file mode 100644
index 00000000..ba2da585
--- /dev/null
+++ b/src/components/ListPage.vue
@@ -0,0 +1,111 @@
+<template>
+  <view class="padding-bottom-lg">
+    <view
+      v-if="wordList && wordList.length === 0"
+      class="text-lg margin"
+    >
+      <text>现在没有词单哦</text>
+    </view>
+    <view
+      v-for="(item, index) in wordList"
+      v-else
+      :key="index"
+      class="word-card padding-xs shadow -gray cu-card article no-card"
+      style="margin: 3vw;"
+      @tap="toWordPage(item.id)"
+    >
+      <view class="cu-item shadow margin-bottom-sm">
+        <view class="flex justify-between">
+          <view
+            class="title flex align-center"
+            style="width: 80%;"
+          >
+            <view class="text-cut">
+              {{ item.name }}
+            </view>
+            <view class="cu-tag bg-blue light sm round margin">
+              <text class="cuIcon-appreciate">
+                {{ item.author.nickname }}
+              </text>
+            </view>
+            <view class="cu-tag bg-orange light sm round margin">
+              <text class="cuIcon-warn">
+                {{ formatDate(item.updateTime) }}
+              </text>
+            </view>
+          </view>
+        </view>
+        <view class="content">
+          <view class="desc">
+            <view
+              class="text-df"
+              style="margin-bottom: 17upx;"
+            >
+              <image
+                class="cu-avatar round ssm"
+                :src="item.author.avatar"
+                mode="aspectFill"
+              />
+              <text
+                :decode="true"
+                class="margin-xs"
+              >
+                &nbsp;{{ item.author.nickname }}&nbsp;&nbsp;
+              </text>
+            </view>
+            <view class="text-content description">
+              {{ item.description }}
+            </view>
+          </view>
+        </view>
+        <view class="time">
+          <text class="text-grey fr margin-right-xl margin-top-xs">
+            {{ formatDate(item.updateTime) }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <view
+      v-if="wordList.length"
+      class="text-gray margin-top-lg text-center"
+    >
+      <text>—— 暂时没有更多内容了 ——</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { toWordPage } from '@/routers/word';
+
+export default defineComponent({
+  name: 'WordList',
+  props: {
+    wordList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      toWordPage,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.word-card {
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  margin-right: 1vw;
+}
+.description {
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  max-width: 50vw;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 62dc3d7f..16b612c6 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -99,6 +99,19 @@
       "path": "pages/quizzes/tests/answer",
       "style": {}
     },
+	// lists区
+	{
+	  "path": "pages/lists/index",
+	  "style": {}
+	},
+	{
+	  "path": "pages/lists/upload",
+	  "style": {}
+	},
+	{
+	  "path": "pages/lists/details",
+	  "style": {}
+	},
     // articles 区
     {
       "path": "pages/articles/index",
@@ -229,5 +242,15 @@
     "navigationStyle": "custom",
     "navigationBarTitleText": "兴化语记-莆仙方言在线工具"
   },
+	"condition" : { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
+	},
   "subPackages": []
 }
\ No newline at end of file
diff --git a/src/pages/lists/details.vue b/src/pages/lists/details.vue
new file mode 100644
index 00000000..f9878a31
--- /dev/null
+++ b/src/pages/lists/details.vue
@@ -0,0 +1,218 @@
+<template>
+  <view>
+    <cu-custom
+      title="词单详情"
+      :is-back="true"
+    />
+    <view class="word-list-detail">
+      <view class="word-list-info">
+        <view class="word-list-header">
+          <view class="word-list-name">
+            {{ wordList.name }}
+          </view>
+          <view class="author-info">
+            <image
+              :src="wordList.author.avatar"
+              mode="aspectFill"
+              class="avatar"
+            />
+            <view class="author-details">
+              <view class="author-name">
+                {{ wordList.author.nickname }}
+              </view>
+              <view class="create-time">
+                {{ formattedDateTime }}
+              </view>
+            </view>
+          </view>
+        </view>
+        <br>
+        <view class="word-list-description">
+          {{ wordList.description }}
+        </view>
+      </view>
+      <view>
+        <hr class="divider">
+      </view>
+      <br>
+      <view
+        v-for="word in wordList.words"
+        :key="word.id"
+        @tap="toWordPage(word.id)"
+      >
+        <view class="word-list-info1">
+          <view
+            slot="title"
+            class="wordText"
+          >
+            {{ word.word }}
+          </view>
+          <view>
+            <p>释义：</p>
+          </view>
+          <view
+            slot="content"
+            class="decriptionText"
+          >
+            {{ word.definition }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getWordListDetails } from '@/services/lists';
+import { toWordPage } from '@/routers/word';
+
+export default {
+  data() {
+    return {
+      wordList: {
+        name: 'string',
+        author: {
+          nickname: 'string',
+          avatar: 'string',
+          id: 0,
+        },
+        createTime: '2019-08-24T14:15:22Z',
+        updateTime: '2019-08-24T14:15:22Z',
+        description: 'string',
+        words: [
+          {
+            id: 0,
+            word: 'string',
+            definition: 'string',
+            contributor: 0,
+            annotation: 'string',
+            mandarin: [
+              'string',
+            ],
+            views: 0,
+            standard_ipa: 'string',
+            standard_pinyin: 'string',
+          },
+        ],
+        length: 0,
+        id: 'string',
+      },
+    };
+  },
+  async onLoad(options) {
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 0,
+    });
+    const { id } = options;
+    await this.loadDetails(id);
+  },
+  computed: {
+    formattedDateTime() {
+      const date = new Date(this.wordList.createTime);
+      const formattedDate = `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())}`;
+      const formattedTime = `${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`;
+      return `${formattedDate} ${formattedTime}`;
+    },
+  },
+  methods: {
+    async loadDetails(id) {
+      const res = await getWordListDetails(id);
+      this.wordList = res;
+    },
+    /* 转时间 */
+    padZero(value) {
+      return value < 10 ? `0${value}` : value;
+    },
+    toWordPage,
+  },
+};
+</script>
+<style>
+.word-list-detail {
+  padding: 20px;
+}
+
+.word-list-info {
+  padding: 20rpx;
+}
+
+.word-list-info1 {
+  background-color: #fff;
+  padding: 20rpx;
+  margin-bottom: 40rpx;
+  border-radius: 15rpx;
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.word-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.word-list-name {
+  font-size: 60rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.author-info {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 65rpx;
+  height: 65rpx;
+  border-radius: 50%;
+  margin-right: 10rpx;
+}
+
+.author-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.author-name {
+  font-size: 35rpx;
+  color: #666;
+}
+
+.create-time {
+  font-size: 15rpx;
+  color: #999;
+}
+
+.word-list-description {
+  font-size: 30rpx;
+  color: #666;
+  margin-bottom: 15rpx;
+  letter-spacing: 2rpx;
+}
+
+.decriptionText {
+  font-size: 30rpx;
+  color: #666;
+  max-width: 16em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.wordText {
+  font-size: 45rpx;
+  margin-bottom: 15rpx;
+  letter-spacing: 5rpx;
+  color: #39C5BB;
+}
+
+/*分割线*/
+.divider {
+  align-self: center;
+  width: 100%;
+  color: #666;
+  size: 10;
+}
+</style>
diff --git a/src/pages/lists/index.vue b/src/pages/lists/index.vue
new file mode 100644
index 00000000..1b3b90ff
--- /dev/null
+++ b/src/pages/lists/index.vue
@@ -0,0 +1,290 @@
+<template>
+  <view>
+    <cu-custom title="语记·词单" />
+    <div class="title-text">
+      <h1 class="animated-title">
+        当前总词单数：{{ listNum }}
+      </h1>
+      <div class="list-description1">
+        常学常新、温故知新。让我们通过精心挑选的词汇组成的词单，来巩固莆仙方言的学习~
+      </div>
+    </div>
+    <scroll-view
+      :scroll-y="true"
+      style="height: 85vh"
+      :refresher-enabled="true"
+      refresher-default-style="none"
+      refresher-background="white"
+      :refresher-triggered="triggered"
+      @refresherpulling="onPulling"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="loadMorelists"
+    >
+      <view class="word-list">
+        <view
+          v-for="list in showlists"
+          :key="list.id"
+          @tap="viewlist(list.id)"
+        >
+          <view class="list-item">
+            <view class="list-title">
+              {{ list.name }}
+            </view>
+            <img
+              :src="list.author.avatar"
+              class="list-avatar"
+              alt="Avatar"
+            >
+            <!--            <view class="right-description"> -->
+            <view class="list-description">
+              简介：{{ list.description }}
+            </view>
+            <!--            </view> -->
+            <view class="list-info">
+              <view class="list-nickname">
+                {{ list.author.nickname }}
+              </view>
+              <view class="list-time">
+                创建时间：{{ list.createTime }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view class="send-button">
+      <button @tap="uploadList">
+        上传词单
+      </button>
+    </view>
+  </view>
+</template>
+<script>
+
+import { getWordLists } from '@/services/lists';
+
+export default {
+  filters: { // 好像没成功？写出bug来了qwq
+    formatDateTime(time) {
+      const date = new Date(time);
+      const formattedDate = `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())}`;
+      const formattedTime = `${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`;
+      return `${formattedDate} ${formattedTime}`;
+    },
+  },
+
+  data() {
+    return {
+      showlists: [ // 现在里面没有词单
+        {
+          name: 'string',
+          author: {
+            nickname: 'string',
+            avatar: 'string',
+            id: 0,
+          },
+          createTime: '2019-08-24T14:15:22Z',
+          updateTime: '2019-08-24T14:15:22Z',
+          description: 'string',
+          words: [
+            {
+              id: 0,
+              word: 'string',
+              definition: 'string',
+              contributor: 0,
+              annotation: 'string',
+              mandarin: [
+                'string',
+              ],
+              views: 0,
+              standard_ipa: 'string',
+              standard_pinyin: 'string',
+            },
+          ],
+          length: 0,
+          id: 'string',
+        },
+      ],
+      triggered: false,
+      listNum: 0,
+      freshing: false,
+    };
+  },
+  async onLoad() {
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 0,
+    });
+    await this.loadlists();
+  },
+  methods: {
+    async loadlists() {
+      const res = await getWordLists();
+      this.showlists = res.lists;
+      this.freshing = false;
+      this.listNum = res.total;
+    },
+
+    viewlist(id) {
+      uni.navigateTo({
+        url: `./details?id=${id}`,
+      });
+    },
+    async uploadList() {
+      uni.navigateTo({
+        url: './upload',
+      });
+    },
+    onPulling() {
+      this.triggered = true;
+    },
+
+    // 下拉刷新
+    onRefresh() {
+      if (this.freshing) {
+        return;
+      }
+      this.freshing = true;
+      this.loadlists();
+      setTimeout(() => {
+        this.triggered = false;
+        this.freshing = false;
+      }, 500);
+    },
+
+  },
+};
+</script>
+
+<style scoped>
+.word-list {
+  padding: 20px;
+
+}
+
+.list-item {
+  border-radius: 30rpx;
+  padding: 20rpx;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  cursor: pointer;
+  background-color: white;
+  margin-bottom: 40rpx;
+}
+
+.list-title {
+  font-weight: bold;
+  font-size: 24px;
+}
+
+.list-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 5px;
+  color: #666;
+}
+
+.list-nickname {
+  font-size: 14px;
+  color: #2b948b;
+}
+
+.list-time {
+  font-size: 12px;
+}
+
+.list-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-top: 10rpx;
+  margin-bottom: 10rpx;
+}
+
+.empty-message {
+  text-align: center;
+  font-size: 16px;
+  color: #999;
+  margin-top: 20px;
+}
+
+.send-button {
+  text-align: center;
+  position: fixed;
+  bottom: 20px;
+  left: 15%;
+  width: 70%;
+}
+
+.send-button button {
+  background: linear-gradient(270deg, #3a70c5 0%, #39aad2 50%, #39C5BB 100%);
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.list-description {
+  margin-top: 10rpx;
+  font-size: 20rpx;
+  color: #3b3838;
+  overflow: hidden;
+  width: 16em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 10rpx;
+}
+
+/*玩一下渐变色*/
+.title-text {
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 30rpx;
+  height: 300rpx;
+  width: 650rpx;
+  margin-top: 50rpx;
+  letter-spacing: 5rpx;
+  background-color: #ffffff;
+}
+
+.list-description1 {
+  width: 90%;
+  font-size: 30rpx;
+  text-overflow: initial; /* 文本不显示省略号 */
+  white-space: normal; /* 文本换行显示 */
+  font-family: "微软雅黑";
+  margin-left: 7%;
+  margin-top: 10%;
+  letter-spacing: 5rpx;
+}
+
+.animated-title {
+  font-size: 50rpx;
+  animation: colorChange 3s infinite;
+  padding-top: 30rpx;
+  font-family: "幼圆";
+  text-align: center; /* 文字水平居中 */
+}
+
+@keyframes colorChange {
+  0% {
+    color: #BC95C6;
+  }
+  25% {
+    color: #959dc6;
+  }
+  50% {
+    color: #7DC4CC;
+  }
+  75% {
+    color: #7a9bcc;
+  }
+  100% {
+    color: #BC95C6;
+  }
+}
+
+</style>
diff --git a/src/pages/lists/upload.vue b/src/pages/lists/upload.vue
new file mode 100644
index 00000000..dbd0177b
--- /dev/null
+++ b/src/pages/lists/upload.vue
@@ -0,0 +1,245 @@
+<template>
+  <view>
+    <cu-custom title="词单·创建" />
+    <view class="container">
+      <view>
+        <p class="titleWord">
+          创建属于你的词单吧~
+        </p>
+        <input
+          v-model="name"
+          type="text"
+          placeholder="请输入词单名称"
+        >
+      </view>
+      <view class="divider" />
+      <view>
+        <textarea
+          v-model="description"
+          style="height:150rpx;"
+          placeholder="词单描述"
+        />
+      </view>
+      <view>
+        <button
+          class="buttonStyle"
+          @tap="hideMore"
+        >
+          {{ isShow ? '隐藏' : '显示' }}更多词汇
+        </button>
+      </view>
+      <view class="divider" />
+      <view />
+      <view class="cu-bar search ">
+        <view class="search-form round">
+          <text class="cuIcon-search" />
+          <input
+            v-model="keywords"
+            type="text"
+            placeholder="输入想找的词语"
+            :focus="true"
+            confirm-type="search"
+            @confirm="search"
+            @input="keyFun"
+          >
+        </view>
+        <view
+          class="action"
+          @tap="search"
+        >
+          <text class="text-blue">
+            搜索
+          </text>
+        </view>
+      </view>
+      <view
+        v-for="(word, index) in wordNameList"
+        :key="index"
+        style="display: flex; align-items: center;"
+      >
+        <view class="chooseWords">
+          {{ word }}
+        </view>
+        <view
+          style="margin-left: 10rpx; font-size: 50rpx;"
+          @tap="removeWord(index)"
+        >
+          ×
+        </view>
+      </view>
+      <view
+        v-show="isShow"
+        v-if="searchContent"
+      >
+        <ChooseWordListAdd
+          :words="words || []"
+          @addCheck="addWord"
+        />
+      </view>
+      <view>
+        <button @tap="createWordList">
+          创建词单
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getWords, searchWords, getWordDetailss } from '@/services/word';
+import ChooseWordListAdd from '@/components/ChooseWordListAdd.vue';
+import { postWordList } from '@/services/lists';
+
+export default {
+  components: {
+    ChooseWordListAdd,
+  },
+  data() {
+    return {
+      isShow: false,
+      name: '',
+      description: '',
+      searchContent: 0,
+      keywords: null,
+      words: null,
+      wordName: '',
+      wordNameList: [],
+      wordlist: [],
+    };
+  },
+  methods: {
+    hideMore() {
+      this.isShow = !this.isShow;
+    },
+    search() {
+      if (this.keywords === '') {
+        uni.showToast({
+          title: '搜索内容为空！',
+          icon: 'error',
+        });
+        return;
+      }
+      this.searchContent = this.keywords;
+      this.articles = null;
+      this.words = null;
+      this.characters = null;
+      this.searchJob(this.keywords);
+    },
+    async searchJob(keywords) {
+      if (this.words === null) {
+        const res = await searchWords(keywords);
+        await getWords(res.words).then(async (res1) => {
+          this.words = res1.words;
+        });
+      }
+      this.isShow = true;
+    },
+    addWord(data) {
+      if (this.wordlist.indexOf(data) === -1) {
+        this.wordlist.push(data);
+        uni.showToast({
+          title: '添加成功！',
+          icon: 'success',
+          duration: 2000,
+        });
+        getWordDetailss(data).then((res) => {
+          this.wordName = res.word.word;
+          this.wordNameList.push(this.wordName);
+        });
+      } else {
+        uni.showToast({
+          title: '添加失败！已经添加过该词！',
+          icon: 'error',
+          duration: 2000,
+        });
+      }
+    },
+
+    removeWord(index) {
+      this.wordNameList.splice(index, 1);
+      this.wordlist.splice(index, 1);
+    },
+    createWordList() {
+      // 构造词单对象
+      const wordList = {
+        name: this.name,
+        description: this.description,
+        words: Array.from(this.wordlist),
+      };
+      postWordList(wordList).then((response) => {
+        if (response.id != null) {
+          uni.showToast({
+            title: '操作成功',
+            icon: 'success',
+            duration: 2000,
+          });
+        } else {
+          uni.showToast({
+            title: '操作失败',
+            icon: 'none',
+            duration: 2000,
+          });
+        }
+      })
+        .catch(() => {
+          uni.showToast({
+            title: '请求出错',
+            icon: 'none',
+            duration: 2000,
+          });
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+.container {
+  padding: 20px;
+}
+
+input,
+textarea {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.divider {
+  height: 1rpx;
+  background-color: #ccc;
+  margin: 20rpx 0; /* 调整分割线的间距 */
+}
+
+button {
+  margin-top: 10px;
+}
+
+.chooseWords {
+  border: 1rpx solid #7a7a7a;
+  border-radius: 100rpx;
+  padding-left: 15rpx;
+  padding-right: 15rpx;
+  padding-top: 3rpx;
+  padding-bottom: 3rpx;
+  font-size: 35rpx;
+  margin-bottom: 10rpx;
+  margin-left: 20rpx;
+}
+
+.titleWord {
+  text-align: center;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  background-image: linear-gradient(to right, #e3e0ff, #c1ddc3);
+  font-size: 30rpx;
+  font-family: "幼圆";
+  margin-bottom: 15rpx;
+  font-weight: bold;
+  color: #39C5BB;
+  letter-spacing: 5rpx;
+}
+
+.buttonStyle {
+  background-color: #39C5BB;
+  color: white;
+}
+</style>
diff --git a/src/pages/tools/index.vue b/src/pages/tools/index.vue
index 429a018c..552522ef 100644
--- a/src/pages/tools/index.vue
+++ b/src/pages/tools/index.vue
@@ -43,6 +43,11 @@ export default {
           img: 'https://cos.edialect.top/website/%E9%9F%B3%E5%BA%8F%E6%9F%A5%E8%AF%8D.png',
           url: '/tools/dictionary',
         },
+        {
+          img: 'https://cos.edialect.top/website/词单学习.png',
+          url: '/lists/index',
+        },
+
         {
           img: 'https://cos.edialect.top/website/%E8%81%AA%E6%98%8E%E8%8A%B1%E5%BC%80.png',
           url: '/quizzes/index',
@@ -95,4 +100,5 @@ export default {
   position: relative;
   text-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.3);
 }
+
 </style>
diff --git a/src/routers/word.js b/src/routers/word.js
index f203d09c..38d717b7 100644
--- a/src/routers/word.js
+++ b/src/routers/word.js
@@ -24,7 +24,8 @@ export function toWordPage(id) {
         url: `/pages/words/details?id=${id}`,
       });
       return;
-    } app.globalData.showRedirectTips = false;
+    }
+    app.globalData.showRedirectTips = false;
   }
   uni.navigateTo({
     url: `/pages/words/details?id=${id}`,
diff --git a/src/services/lists.js b/src/services/lists.js
new file mode 100644
index 00000000..3291c2a1
--- /dev/null
+++ b/src/services/lists.js
@@ -0,0 +1,19 @@
+import request from '../utils/request';
+
+/* 获取词单 */
+export async function getWordLists() {
+  return request.get('/lists');
+}
+
+/**
+ * @param id 词单id
+ * @returns {Promise<unknown>}
+ */
+export async function getWordListDetails(id) {
+  return request.get(`/lists/${id}`);
+}
+
+// 创建词单
+export async function postWordList(wordlist) {
+  return request.post('/lists', wordlist);
+}
diff --git a/src/services/word.js b/src/services/word.js
index a9b978f6..df66acde 100644
--- a/src/services/word.js
+++ b/src/services/word.js
@@ -50,6 +50,10 @@ export async function getWordDetails(id) {
   return word;
 }
 
+export async function getWordDetailss(id) {
+  return request.get(`/words/${id}`);
+}
+
 /**
  * WD0201 获取符合条件的字词的列表-关键词
  * @returns {Promise<unknown>}