add many pages

src/pages/mobile/DictDetail.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
+import SlideItem from "@/components/slide/SlideItem.vue";
+import {$ref} from "vue/macros";
+import {useBaseStore} from "@/stores/base.ts";
+import {showConfirmDialog, showToast} from "vant";
+import 'vant/lib/index.css'
+import {onMounted} from "vue";
+import DeleteIcon from "@/components/icon/DeleteIcon.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import {Dict} from "@/types.ts";
+import DictPlan from "@/pages/mobile/components/DictPlan.vue";
+import BackIcon from "@/components/icon/BackIcon.vue";
+import {useRouter} from "vue-router";
+
+const store = useBaseStore()
+let index = $ref(0)
+const router = useRouter()
+
+
+const onChange = ({selectedValues}) => {
+  showToast(`当前值: ${selectedValues.join(',')}`);
+};
+
+onMounted(() => {
+})
+
+function handleDel(item: Dict, index: number) {
+  if (item.id === store.currentDict.id) {
+    //TODO
+  } else {
+    showConfirmDialog({title: '确认删除？', message: '删除后无法撤销，确认删除吗？',})
+        .then(() => {
+          store.myDictList.splice(index, 1)
+        })
+  }
+}
+</script>
+
+<template>
+  <div class="mobile-page">
+    <header>
+      <BackIcon @click="router.back()"/>
+      <div class="tabs">
+        <div class="tab" :class="index === 0 && 'active'" @click="index = 0">修改计划</div>
+        <div class="tab" :class="index === 1 && 'active'" @click="index = 1">更换词书</div>
+      </div>
+    </header>
+    <SlideHorizontal v-model:index="index">
+      <SlideItem>
+        <DictPlan/>
+      </SlideItem>
+      <SlideItem>
+        <div class="my-dcits">
+          <div class="list">
+            <div class="dict" v-for="(item,index) in store.myDictList">
+              <div class="title">
+                <div class="name">{{ item.name }}</div>
+                <span v-if="item.id === store.currentDict.id">当前在学</span>
+                <template v-else>
+                  <DeleteIcon
+                      v-if="index>=3"
+                      @click="handleDel(item,index)"/>
+                </template>
+              </div>
+              <div class="chapter">每日{{ item.chapterWordNumber }}词 剩余100天</div>
+              <el-progress
+                  :show-text="false"
+                  :percentage="90"
+              />
+              <div class="progress">
+                <span>已学单词</span>
+                <span>0/{{ item.length }}</span>
+              </div>
+            </div>
+          </div>
+          <BaseButton size="large">添加新书</BaseButton>
+        </div>
+      </SlideItem>
+    </SlideHorizontal>
+  </div>
+</template>
+
+<style scoped lang="scss">
+header {
+  height: 60rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 var(--space);
+
+  .back {
+    position: absolute;
+  }
+
+  .tabs {
+    width: 100%;
+    border-top: 1px solid gray;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+
+    .tab {
+      width: 100rem;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .active {
+      border-bottom: 2px solid gray;
+    }
+  }
+}
+
+.plan {
+  padding: 10rem;
+
+  .dict {
+    display: flex;
+    flex-direction: column;
+    gap: 10rem;
+  }
+
+  .set-plan {
+    background: white;
+
+    .header {
+      height: 60rem;
+      color: black;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+
+    .picker-wrapper {
+      display: flex;
+
+      .van-picker {
+        flex: 1;
+      }
+    }
+  }
+}
+
+.my-dcits {
+  height: 100%;
+  padding: var(--space);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .list {
+    flex: 1;
+    overflow: auto;
+    margin-bottom: 20rem;
+  }
+
+  .dict {
+    padding: var(--space);
+    border-radius: var(--radius);
+    background: var(--color-second-bg);
+    display: flex;
+    flex-direction: column;
+    gap: 6rem;
+    margin-bottom: 10rem;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+}
+
+</style>

src/pages/mobile/DictListManage.vue

@@ -9,8 +9,9 @@ import {dictionaryResources} from "@/assets/dictionary.ts";
 import {DictResource, languageCategoryOptions} from "@/types.ts";
 import {onMounted} from "vue";
 import DictGroup from "@/components/list/DictGroup.vue";
+import router from "@/router.ts";
 
-let index = $ref(0)
+let index = $ref(1)
 
 const store = useBaseStore()
 
@@ -100,6 +101,11 @@ onMounted(() => {
   let temp1 = getData('word')
   wordData = temp1
 })
+
+function selectDict(val) {
+  console.log('val', val)
+  router.push('/mobile/set-dict-plan')
+}
 </script>
 
 <template>
@@ -113,7 +119,8 @@ onMounted(() => {
         <span>{{ item.name }}</span>
       </div>
     </div>
-    <SlideHorizontal v-model:index="index">
+    <SlideHorizontal
+        v-model:index="index">
       <SlideItem>
         <div class="translate">
           <span>翻译：</span>
@@ -143,6 +150,7 @@ onMounted(() => {
             </el-radio-group>
           </div>
           <DictGroup
+              @select-dict="selectDict"
               v-for="item in wordData.dictList"
               :select-id="store.currentDict.id"
               :groupByTag="item[1]"

src/pages/mobile/Home.vue

@@ -8,7 +8,7 @@ import {Icon} from "@iconify/vue";
 const store = useBaseStore()
 
 function goPractice() {
-  router.push('/mobile-practice')
+  router.push('/mobile/practice')
 }
 </script>
 
@@ -16,7 +16,7 @@ function goPractice() {
   <div class="page home">
     <div class="current-dict">
       <div class="top">
-        <div class="left">
+        <div class="left" @click="router.push('/mobile/dict-detail')">
           <div class="name">{{ store.currentDict.name }}</div>
           <Icon class="arrow" icon="mingcute:right-line" width="20"/>
         </div>

src/pages/mobile/SetDictPlan.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+import DictPlan from "@/pages/mobile/components/DictPlan.vue";
+import NavBar from "@/pages/mobile/components/NavBar.vue";
+
+</script>
+
+<template>
+  <div class="mobile-page">
+    <NavBar title="设置任务量"/>
+    <DictPlan/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/mobile/components/DictPlan.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import {$ref} from "vue/macros";
+import {useBaseStore} from "@/stores/base.ts";
+import {Picker, showToast} from "vant";
+import 'vant/lib/index.css'
+import {onMounted} from "vue";
+import BaseButton from "@/components/BaseButton.vue";
+
+const store = useBaseStore()
+
+let columns = $ref([])
+let columns2 = $ref([])
+
+const onChange = ({selectedValues}) => {
+  showToast(`当前值: ${selectedValues.join(',')}`);
+};
+
+onMounted(() => {
+  columns = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200].map(value => {
+    return {
+      text: value,
+      value,
+    }
+  })
+  columns2 = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200].map(value => {
+    return {
+      text: value,
+      value,
+    }
+  })
+})
+
+</script>
+
+<template>
+  <div class="plan">
+    <div class="content">
+      <div class="dict">
+        <div class="name">{{ store.currentDict.name }}</div>
+        <div class="chapter">每日{{ store.currentDict.chapterWordNumber }}词 剩余100天</div>
+        <el-progress
+            :show-text="false"
+            :percentage="90"
+        />
+        <div class="progress">
+          <span>已学单词</span>
+          <span>0/{{ store.currentDict.length }}</span>
+        </div>
+      </div>
+      <div class="notice">
+        <span>完成日期：</span>
+        <span class="date">2023年1月1日</span>
+        <span>预计每天11分钟</span>
+      </div>
+      <div class="set-plan">
+        <div class="header">
+          <span>每天背单词</span>
+          <span>完成天数</span>
+        </div>
+        <div class="picker-wrapper">
+          <Picker
+              :show-toolbar="false"
+              :columns="columns"
+              @change="onChange"
+          />
+          <Picker
+              :show-toolbar="false"
+              :columns="columns2"
+              @change="onChange"
+          />
+        </div>
+      </div>
+    </div>
+    <BaseButton size="large">确认</BaseButton>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.plan {
+  height: 100%;
+  padding: 10rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex: 1;
+
+    .dict {
+      display: flex;
+      flex-direction: column;
+      gap: 10rem;
+    }
+
+    .set-plan {
+      background: white;
+
+      .header {
+        height: 60rem;
+        color: black;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+      }
+
+      .picker-wrapper {
+        display: flex;
+
+        .van-picker {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+
+}
+</style>

src/pages/mobile/components/NavBar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+import BackIcon from "@/components/icon/BackIcon.vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="nav-bar">
+    <BackIcon @click="router.back()"/>
+    <div class="title" v-if="title">{{ title }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nav-bar {
+  height: 60rem;
+  padding: 0 var(--space);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  :deep(.back-icon) {
+    left: var(--space);
+    position: absolute;
+  }
+}
+</style>

src/pages/mobile/index.vue

@@ -3,23 +3,23 @@ import {Icon} from "@iconify/vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import Home from "@/pages/mobile/Home.vue";
-import DictManage from "@/pages/mobile/DictManage.vue";
+import DictListManage from "@/pages/mobile/DictListManage.vue";
 import Setting from "@/pages/mobile/Setting.vue";
 
-let state = $ref({
-  baseIndex: 1
-})
+
+let index = $ref(1)
 </script>
 <template>
-  <div class="page mobile">
+  <div class="mobile-page mobile">
     <div class="content">
       <SlideHorizontal
-          v-model:index="state.baseIndex">
+          :changeActiveIndexUseAnim="false"
+          v-model:index="index">
         <SlideItem>
           <Home/>
         </SlideItem>
         <SlideItem>
-          <DictManage/>
+          <DictListManage/>
         </SlideItem>
         <SlideItem>
           <Setting/>
@@ -27,15 +27,15 @@ let state = $ref({
       </SlideHorizontal>
     </div>
     <div class="tabs">
-      <div class="tab" @click="state.baseIndex = 0">
+      <div class="tab" @click="index = 0">
         <Icon width="30" icon="icon-park:word"/>
         <span>单词</span>
       </div>
-      <div class="tab" @click="state.baseIndex = 1">
+      <div class="tab" @click="index = 1">
         <Icon width="30" icon="icon-park:word"/>
         <span>词典</span>
       </div>
-      <div class="tab" @click="state.baseIndex = 2">
+      <div class="tab" @click="index = 2">
         <Icon width="30" icon="icon-park:word"/>
         <span>我的</span>
       </div>
@@ -45,8 +45,6 @@ let state = $ref({
 
 <style scoped lang="scss">
 .mobile {
-  display: flex;
-  flex-direction: column;
 
   .content {
     flex: 1;

src/pages/mobile/practice/index.vue

@@ -134,17 +134,11 @@ onUnmounted(() => {
 
 </script>
 <template>
-  <div class="practice-wrapper">
+  <div class="mobile-page">
     <PracticeWord ref="practiceRef"/>
   </div>
 </template>
 
 <style scoped lang="scss">
-.practice-wrapper {
-  font-size: 14rem;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
 
 </style>