feat: network控制本地缓存的使用

network控制本地缓存的使用；删除了projects相关的代码

CHANGELOG.md

@@ -164,6 +164,7 @@
  calendar | 日历细节调整 | 1a8d6bf
  - | project 代码健壮性完善 | a3202c5
  store/home | 删除store/home | db8a3b4
+ tailwindcss | tailwindcss CDN引入；移除相关配置文件及包；开启treeShaking | 15485a0
  task beginTime | 格式化任务开始时间 | fbc0301
  template | eslint prettier sass uview tailwindcss | 9c966a1
  tips | 修改任务状态方法重构 | b57d3ac

src/App.vue

@@ -1,9 +1,11 @@
 <script>
-import { mapActions, mapMutations, mapState } from 'vuex';
+import { mapActions, mapMutations, mapState, mapGetters } from 'vuex';
 
 export default {
   async onLaunch(options) {
     console.log('options: ', options);
+    this.checkNetwork(); // 监听网络状态
+
     /* #ifdef MP-WEIXIN */
     await this.signin();
     this.initSocket();
@@ -26,20 +28,32 @@ export default {
     this.initSocket();
     /* #endif */
   },
-  onShow: function () {
-    console.log('App Show');
-  },
-  onHide: function () {
-    console.log('App Hide');
-  },
 
-  computed: mapState('user', ['token']),
+  computed: {
+    ...mapGetters(['useStorage']),
+    ...mapState('user', ['token']),
+  },
 
   methods: {
     ...mapActions('user', ['getToken']),
     ...mapActions('socket', ['initSocket']),
+    ...mapMutations(['setNetworkConnected']),
     ...mapMutations('user', ['setToken', 'setUser']),
 
+    // 检查网络状态 设置store里的网络状态变量
+    // 网络连接 且 不是2g 不是3g 才算是网络连接; 否则不是 将启用本地存储
+    checkNetwork() {
+      uni.getNetworkType({
+        success: ({ networkType }) => {
+          this.setNetworkConnected(!(networkType === 'none' || networkType === '2g' || networkType === '3g'));
+        },
+      });
+      // 监听网络状态的变化
+      uni.onNetworkStatusChange(({ isConnected, networkType }) => {
+        this.setNetworkConnected(isConnected && !(networkType === '2g' || networkType === '3g'));
+      });
+    },
+
     // 登录
     async signin() {
       try {

src/components/Title/Title.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <u-navbar :custom-back="onBack" class="overflow-hidden">
+    <u-navbar class="overflow-hidden" :is-back="false">
       <view class="flex justify-start flex-1 px-3 font-bold min-0">
         <view class="truncate">{{ project.name }}</view>
       </view>
@@ -27,17 +27,6 @@ export default {
   },
 
   methods: {
-    // 点击返回按钮
-    onBack() {
-      // eslint-disable-next-line no-undef
-      const pages = getCurrentPages(); // 获取页面栈数组
-      if (pages.length > 1) {
-        uni.navigateBack();
-      } else {
-        this.$u.route('/', { u: this.userId });
-      }
-    },
-
     // LWBS提示
     lwbs() {
       // this.$t.ui.showToast('LWBS');

src/manifest.json

@@ -7,7 +7,7 @@
   "transformPx": false,
   "h5": {
     "router": {
-      "base": "/tall/v3.0.1"
+      "base": "/tall-project/v3.0.1"
     },
     "title": "时物链条",
     "sdkConfigs": {
@@ -15,7 +15,7 @@
     },
     "optimization": {
       "treeShaking": {
-        "enable": true
+        "enable": false
       }
     }
   }

src/pages/project/project.vue

@@ -3,7 +3,7 @@
     <!-- 标题栏 -->
     <Title />
 
-    <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100" style="margin: auto">
+    <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100 mx-auto">
       <!-- 角色栏 -->
       <Roles />
 

src/store/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import db from './db/index';
 import user from './user/index';
 import messages from './messages/index';
 import socket from './socket/index';
@@ -8,5 +7,30 @@ import project from './project/index';
 import role from './role/index';
 import task from './task/index';
 
+// 不属于具体模块的 应用级的 store内容
+const state = {
+  networkConnected: true, // 网络是否连接
+  forceUseStorage: false, // 强制启用storage
+};
+
+const getters = {
+  // 是否启用本地存储
+  // 设置了强制启用本地存储 或者 没有网络连接的时候
+  useStorage({ networkConnected, forceUseStorage }) {
+    return forceUseStorage || !networkConnected;
+  },
+};
+
+const mutations = {
+  /**
+   * 设置网络是否连接的变量
+   * @param {*} state
+   * @param {boolean} networkConnected
+   */
+  setNetworkConnected(state, networkConnected) {
+    state.networkConnected = networkConnected;
+  },
+};
+
 Vue.use(Vuex);
-export default new Vuex.Store({ modules: { db, user, messages, socket, project, role, task } });
+export default new Vuex.Store({ state, getters, mutations, modules: { user, messages, socket, project, role, task } });

src/utils/cache.js

@@ -1,16 +1,4 @@
 export const filter = {
-  /**
-   * 过滤获取到的数据 根据开始截止时间
-   * @param {object} data 缓存拿到的数据
-   * @param {number} start ms
-   * @param {number} end ms
-   * @returns
-   */
-  projects(data, start, end) {
-    if (!data || !data.length) return [];
-    return data.filter(item => start <= +item.endTime && end >= +item.startTime);
-  },
-
   /**
    * 角色 过滤获取到的数据 根据开始截止时间
    * @param {object} data 缓存拿到的数据
@@ -119,53 +107,6 @@ export const filter = {
 };
 
 export default {
-  /**
-   * 项目列表某天的 获取
-   * @param {number} startTime
-   * @param {number} endTime
-   * @returns
-   */
-  async getProjectsByDay(startTime, endTime) {
-    try {
-      const data = await uni.$t.storage.getStorage('projects');
-      return filter.projects(JSON.parse(data), startTime, endTime);
-    } catch (error) {
-      return [];
-    }
-  },
-
-  /**
-   * 项目列表 存
-   * @param {array} data
-   */
-  putProjects(data) {
-    try {
-      if (!data || !data.length) return; // 服务端没数据不做操作
-      let value = uni.$t.storage.getStorageSync('projects');
-      let locals = value ? JSON.parse(value) : [];
-      if (!locals || !locals.length) {
-        // 本地没数据
-        locals = data || [];
-      } else {
-        // 本地有数据
-        data.forEach(item => {
-          let localData = locals.find(local => item.id === local.id);
-          if (localData) {
-            // 有相同数据  就用新的data里的数据
-            localData = item;
-          } else {
-            // 没有就直接存本地
-            locals.push(item);
-          }
-        });
-      }
-      uni.$t.storage.setStorage('projects', locals);
-    } catch (error) {
-      console.error('error: ', error);
-      uni.$t.storage.setStorage('projects', []);
-    }
-  },
-
   /**
    * 当前显示的角色信息 获取
    * @param {object} params

src/utils/cacheAndRequest.js

@@ -1,3 +1,5 @@
+import store from '@/store/index';
+
 /**
  * 等待token执行api
  * 没有token 就延时执行自己 直到有了token在请求
@@ -13,49 +15,21 @@ export const waitTokenRequest = requestFn => {
 };
 
 export default {
-  /**
-   * 获取项目列表
-   * @param {number} startTime 起始时间
-   * @param {number} endTime 截止时间
-   */
-  getProjects(startTime, endTime, fn) {
-    let remote = false;
-    // 有缓存 且 服务端数据未返回 就先返回缓存
-    uni.$t.cache
-      .getProjectsByDay(startTime, endTime)
-      .then(data => {
-        !remote && fn(null, data);
-      })
-      .catch(err => !remote && fn(err));
-
-    waitTokenRequest(() => {
-      // 拿到api数据后 再用api的数据
-      uni.$u.api
-        .getProjects(startTime, endTime)
-        .then(data => {
-          remote = true;
-          fn(null, data);
-          // 存api到cache里
-          uni.$t.cache.putProjects(data);
-        })
-        .catch(err => fn(err));
-    });
-  },
-
   /**
    * 通过项目id获取角色信息
    * @param {object} params 提交的参数
    */
   findShowRole(params, fn) {
     let remote = false;
-    // 有缓存 且 服务端数据未返回 就先返回缓存
+    if (store.getters.useStorage) {
-    uni.$t.cache
+      // 有缓存 且 服务端数据未返回 就先返回缓存
-      .getShowRole(params.projectId)
+      uni.$t.cache
-      .then(data => {
+        .getShowRole(params.projectId)
-        !remote && fn(null, data);
+        .then(data => {
-      })
+          !remote && fn(null, data);
-      .catch(err => !remote && fn(err));
+        })
-
+        .catch(err => !remote && fn(err));
+    }
     waitTokenRequest(() => {
       // 拿到api数据后 再用api的数据
       uni.$u.api
@@ -76,15 +50,16 @@ export default {
    */
   getRegularTask(params, fn) {
     let remote = false;
-    // 有缓存 且 服务端数据未返回 就先返回缓存
+    if (store.getters.useStorage) {
-    uni.$t.cache
+      // 有缓存 且 服务端数据未返回 就先返回缓存
-      .getStorageRegularTask(params)
+      uni.$t.cache
-      .then(data => {
+        .getStorageRegularTask(params)
-        console.log('cache data: ', data);
+        .then(data => {
-        !remote && fn(null, data);
+          console.log('cache data: ', data);
-      })
+          !remote && fn(null, data);
-      .catch(err => !remote && fn(err));
+        })
-
+        .catch(err => !remote && fn(err));
+    }
     waitTokenRequest(() => {
       // 拿到api数据后 再用api的数据
       uni.$u.api
@@ -107,14 +82,15 @@ export default {
    */
   getPermanent(params, fn) {
     let remote = false;
-    // 有缓存 且 服务端数据未返回 就先返回缓存
+    if (store.getters.useStorage) {
-    uni.$t.cache
+      // 有缓存 且 服务端数据未返回 就先返回缓存
-      .getStoragePermanent(params)
+      uni.$t.cache
-      .then(data => {
+        .getStoragePermanent(params)
-        !remote && fn(null, data);
+        .then(data => {
-      })
+          !remote && fn(null, data);
-      .catch(err => !remote && fn(err));
+        })
-
+        .catch(err => !remote && fn(err));
+    }
     waitTokenRequest(() => {
       // 拿到api数据后 再用api的数据
       uni.$u.api
@@ -135,14 +111,15 @@ export default {
    */
   getGlobal(params, fn) {
     let remote = false;
-    // 有缓存 且 服务端数据未返回 就先返回缓存
+    if (store.getters.useStorage) {
-    uni.$t.cache
+      // 有缓存 且 服务端数据未返回 就先返回缓存
-      .getDailyTask(params)
+      uni.$t.cache
-      .then(data => {
+        .getDailyTask(params)
-        !remote && fn(null, data);
+        .then(data => {
-      })
+          !remote && fn(null, data);
-      .catch(err => !remote && fn(err));
+        })
-
+        .catch(err => !remote && fn(err));
+    }
     waitTokenRequest(() => {
       // 拿到api数据后 再用api的数据
       uni.$u.api
@@ -163,14 +140,15 @@ export default {
    */
   getOtherPlugin(params, fn) {
     let remote = false;
-    // 有缓存 且 服务端数据未返回 就先返回缓存
+    if (store.getters.useStorage) {
-    uni.$t.cache
+      // 有缓存 且 服务端数据未返回 就先返回缓存
-      .getPlugin(params.pluginId)
+      uni.$t.cache
-      .then(data => {
+        .getPlugin(params.pluginId)
-        !remote && fn(null, data);
+        .then(data => {
-      })
+          !remote && fn(null, data);
-      .catch(err => !remote && fn(err));
+        })
-
+        .catch(err => !remote && fn(err));
+    }
     waitTokenRequest(() => {
       // 拿到api数据后 再用api的数据
       uni.$u.api