style(mock): restyle mock page 💄

Author: cwandev

components.d.ts

@@ -5,9 +5,11 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanEmpty: typeof import('vant/es')['Empty']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanSwitch: typeof import('vant/es')['Switch']
     VanTag: typeof import('vant/es')['Tag']

mock/dashboard/workplace.js

@@ -1,5 +1,5 @@
-const dashboardWorkplace = require('./dashboard/workplace.js')
+const prose = require('./modules/prose')
 
 module.exports = {
-  ...dashboardWorkplace
+  ...prose
 }

mock/index.js

@@ -0,0 +1,25 @@
+
+const list = [
+  { prose: '🔖 躲在某一时间，想念一段时光的掌纹;躲在某一地点，想念一个站在来路也站在去路的，让我牵挂的人。' },
+  { prose: '🔖 天空一碧如洗，灿烂的阳光正从密密的松针的缝隙间射下来，形成一束束粗粗细细的光柱，把飘荡着轻纱般薄雾的林荫照得通亮。' },
+  { prose: '🔖 这一次相遇，美得彻骨，美得震颤，美得孤绝，美得惊艳。' },
+  { prose: '🔖 沉默的状态，能让我感觉到呼吸的自由和自己原来就处于的本色位置。' },
+  { prose: '🔖 青春，是一包象征着阳光的向日葵种子，在现在洒下，就会在未来得到收获，那一株株饱含青春的花朵。' },
+  { prose: '🔖 燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?' },
+  { prose: '🔖 毕业了，青春在无形之中离去，我们即将翻开人生的另一页。' },
+  { prose: '🔖 成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合。' },
+  { prose: '🔖 旧时光里的人和事，琐碎而零乱。我的记忆很模糊，好像大部分都成了一种温馨的符号，静静的沉在我心底。' },
+  { prose: '🔖 生活是一部大百科全书，包罗万象;生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。' },
+  { prose: '🔖 毕业了，身边的朋友一个个各奔东西，开始学会自己撑起生命的暖色。' },
+  { prose: '🔖 已经走到尽头的东西，重生也不过是再一次的消亡。就像所有的开始，其实都只是一个写好了的结局。' },
+  { prose: '🔖 下午茶的芬香熏陶着房内的任何一个角落，午后的阳光透过窗帘的间隙洒在木制的桌面上，一份思念随着红茶顺滑至心中。' },
+  { prose: '🔖 这里再不是我们的校园，当我们就此离开我们的青葱岁月。' },
+  { prose: '🔖 很久找你，一直没有找到，微风吹过的时候，我深深的呼吸，才感觉到你也在陪伴着我呼吸。' }
+]
+
+
+module.exports = {
+  'GET /api/project/prose': (req, res) => {
+    res.json(list[Math.floor(Math.random() * 8)])
+  }
+}

mock/modules/prose.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
 
-export async function queryProjectNotice(): Promise<any> {
-  return request('/project/notice')
+export async function queryProse(): Promise<any> {
+  return request('/project/prose')
 }

src/api/index.ts

@@ -1,6 +1,7 @@
 body {
   overflow: hidden;
 }
+
 #app {
   height: 100%;
   overflow-x: hidden;
@@ -17,5 +18,18 @@ body {
   &,
   * {
     color-scheme: dark !important;
+    transition: background-color 300ms;
+  }
+}
+
+[data-theme='light'] {
+  &,
+  * {
+    color-scheme: light !important;
+    transition: background-color 300ms;
+  }
+  
+  body {
+    background-color: #eff2f5;
   }
 }

src/app.less

@@ -1,17 +1,17 @@
 <template>
   <div class="container">
-    <van-cell-group inset>
-      <van-cell center title="暗黑模式">
+    <van-cell-group title="Do more difficult things" inset>
+      <van-cell center title="🌗 暗黑模式">
         <template #right-icon>
           <van-switch v-model="checked" size="18px" />
         </template>
       </van-cell>
 
-      <van-cell title="mock 指南" to="mock" is-link />
+      <van-cell title="💿 mock 指南" to="mock" is-link />
 
       <van-cell center>
         <template #title>
-          <span class="custom-title">小游戏</span>
+          <span class="custom-title">🎨 小游戏</span>
           <van-tag type="primary">敬请期待</van-tag>
         </template>
       </van-cell>
@@ -50,7 +50,6 @@ watch(checked,() => {
   height: 100vh;
   padding-top: 80px;
   position: relative;
-  // background: #eff2f5;
 
   .custom-title {
     margin-right: 4px;

src/views/index.vue

@@ -1,35 +1,73 @@
 <template>
-  <van-nav-bar title="mock 指南" left-arrow @click-left="onClickLeft"/>
+  <van-nav-bar title="💿 mock 指南" left-arrow @click-left="onClickLeft"/>
+
   <div class="container">
-    <span style="margin-bottom: 10px;">这是请求的数据</span>
-    <span>{{ projects.dataSource.name }}</span>
+    <div class="data-label"> 来自异步请求的数据 </div>
+    <div class="data-content">
+      <div v-if="messages">{{ messages }}</div>
+      <van-empty v-else description="暂无数据" />
+    </div>
+
+    <van-button round block type="primary" @click="pull">请求</van-button>
+    <van-button round block type="default" @click="reset">清空</van-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useFetchData } from '@/utils/hooks/useFetchData'
-import { queryProjectNotice } from '@/api'
+import { ref } from 'vue'
+import { queryProse } from '@/api'
 
-const onClickLeft = () => history.back()
+const messages = ref<string>('')
 
-const { context: projects } = useFetchData(() => {
-  return queryProjectNotice().then(res => {
-    return {
-      data: res
-    }
+const pull = () => {
+  queryProse().then(res => {
+    messages.value = res.prose
   })
-})
+}
+
+// reset data
+const reset = () => messages.value = ''
+
+// back
+const onClickLeft = () => history.back()
 
 </script>
 
 <style lang="less" scoped>
 .container {
   width: 100vw;
   height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
+  overflow: hidden;
+  padding: 30px;
+
+  .data-label {
+    color: #969799;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  .data-content {
+    height: 300px;
+    padding: 20px;
+    line-height: 30px;
+    background: #fff;
+    margin-top: 20px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+[data-theme='dark'] {
+  .data-content {
+    background: #222;
+    color: #fff;
+  }
+}
+
+.van-button--block {
+  margin-top: 15px;
 }
 </style>