From 91757586d38c8facbd610e88966b6ee35b1311b4 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Mon, 10 Jan 2022 16:35:20 +0800
Subject: [PATCH] feat(theme): theme demo

---
 App.vue                                 | 32 +++++++++--
 CHANGELOG.md                            |  1 +
 common/styles/theme/default.scss        |  8 +++
 common/styles/theme/index.scss          |  5 ++
 common/styles/theme/test.scss           |  8 +++
 components/Globals/Globals.vue          |  8 ++-
 components/Theme/Theme.vue              | 13 +++++
 components/TimeLine/component/Title.vue |  7 ---
 hooks/theme/useTheme.js                 |  7 +++
 pages.json                              | 58 ++++++++++----------
 pages/project/project.vue               |  3 ++
 plugins/p-deliver/p-deliver.vue         |  9 ++++
 plugins/p-task-title/p-task-title.vue   |  4 +-
 store/index.js                          | 70 ++++++++++++++-----------
 14 files changed, 160 insertions(+), 73 deletions(-)
 create mode 100644 common/styles/theme/default.scss
 create mode 100644 common/styles/theme/index.scss
 create mode 100644 common/styles/theme/test.scss
 create mode 100644 components/Theme/Theme.vue
 create mode 100644 hooks/theme/useTheme.js
 create mode 100644 plugins/p-deliver/p-deliver.vue

diff --git a/App.vue b/App.vue
index 3cffe57..a526b47 100644
--- a/App.vue
+++ b/App.vue
@@ -1,6 +1,21 @@
 <script>
+// import { mapState } from 'vuex';
+
 export default {
+  // computed: {
+  //   ...mapState(['theme']),
+  // },
+
+  // watch: {
+  //   theme(newTheme) {
+  //     console.log('newTheme: ', newTheme);
+  //     if (!newTheme) return;
+  //     this.loadTheme();
+  //   },
+  // },
+
   async onLaunch(options) {
+    // this.loadTheme();
     console.log('onLaunch options: ', options);
     this.checkNetwork(); // 监听网络状态
     this.getSystemInfo(); // 获取系统设备信息、
@@ -16,6 +31,11 @@ export default {
   },
 
   methods: {
+    // loadTheme() {
+    //   const path = this.theme.replace('-', '/');
+    //   import(`./common/styles/${path}.scss`);
+    // },
+
     async getToken() {
       const { token } = this.$store.state.user;
       const tokenIsAvailable = this.$store.getters['user/tokenIsAvailable'];
@@ -63,18 +83,19 @@ export default {
             }
           }
 
-          if (this.$store.state.user.token && localToken) { // 同步token
+          if (this.$store.state.user.token && localToken) {
+            // 同步token
             this.$store.commit('user/setToken', localToken);
           }
-          if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) { // 同步tokenExpiredTime
+          if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) {
+            // 同步tokenExpiredTime
             this.$store.commit('user/setTokenExpiredTime', +tokenExpiredTime);
           }
           resolve();
         } catch (error) {
           reject(error);
         }
-
-      })
+      });
     },
 
     // 检查网络状态 设置store里的网络状态变量
@@ -136,10 +157,11 @@ export default {
 
 <style lang="scss">
 /*每个页面公共css */
-@import "@/uni_modules/vk-uview-ui/index.scss";
+@import '@/uni_modules/vk-uview-ui/index.scss';
 @import '@/common/styles/iconfont.scss';
 @import '@/common/styles/app.scss';
 @import '@/common/styles/tailwind.scss';
+@import '@/common/styles/theme/index.scss';
 
 page {
   height: 100%;
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f6d2a0c..5952d66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@
 范围|描述|commitId
 --|--|--
  app.vue | 修复获取token报错的问题 | [9120d54](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/9120d54)
+ createTask | 修复createTask v-model的问题 | [b20d3f0](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/b20d3f0)
  - | 修复一些内容 | [3cdb1ce](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3cdb1ce)
 
 
diff --git a/common/styles/theme/default.scss b/common/styles/theme/default.scss
new file mode 100644
index 0000000..29733e9
--- /dev/null
+++ b/common/styles/theme/default.scss
@@ -0,0 +1,8 @@
+// 默认主题文件
+.theme-default {
+  background-color: #333;
+  .u-card {
+    font-size: 24px !important;
+    color: #0f0;
+  }
+}
diff --git a/common/styles/theme/index.scss b/common/styles/theme/index.scss
new file mode 100644
index 0000000..b0b9f88
--- /dev/null
+++ b/common/styles/theme/index.scss
@@ -0,0 +1,5 @@
+// 整合所有主题
+
+// 默认主题
+@import './default.scss';
+@import './test.scss';
diff --git a/common/styles/theme/test.scss b/common/styles/theme/test.scss
new file mode 100644
index 0000000..e29dddc
--- /dev/null
+++ b/common/styles/theme/test.scss
@@ -0,0 +1,8 @@
+// TODO: 测试用的scss主题样式
+.theme-test {
+  background-color: #fff;
+  .u-card {
+    font-size: 24px !important;
+    background-color: #ff0 !important;
+  }
+}
diff --git a/components/Globals/Globals.vue b/components/Globals/Globals.vue
index c490083..e8d5f9c 100644
--- a/components/Globals/Globals.vue
+++ b/components/Globals/Globals.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="m-2" >
+  <theme class="m-2" >
     <u-card
       @click="openCard"
       :show-foot="false"
@@ -7,6 +7,7 @@
       :style="{ 'max-height': globalsHeight + 'px' }"
       border-radius="25"
       margin="0"
+      class="global-container"
     >
       <template v-slot:body>
         <scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }">
@@ -31,13 +32,16 @@
                 </view>
               </template>
 
+              <!-- 任务名插件 -->
               <p-task-title :task="item" v-else />
+              <!-- 交付物插件 -->
+              <p-deliver></p-deliver>
             </view>
           </view>
         </scroll-view>
       </template>
     </u-card>
-  </view>
+  </theme>
 </template>
 
 <script setup>
diff --git a/components/Theme/Theme.vue b/components/Theme/Theme.vue
new file mode 100644
index 0000000..93a6e4b
--- /dev/null
+++ b/components/Theme/Theme.vue
@@ -0,0 +1,13 @@
+<template>
+  <view :class="[theme]">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const theme = computed(() => store.state.theme);
+</script>
diff --git a/components/TimeLine/component/Title.vue b/components/TimeLine/component/Title.vue
index fafec0b..e69de29 100644
--- a/components/TimeLine/component/Title.vue
+++ b/components/TimeLine/component/Title.vue
@@ -1,7 +0,0 @@
-<!--
- * @Author: aBin
- * @email: binbin0314@126.com
- * @Date: 2021-07-19 15:40:02
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 15:40:03
--->
diff --git a/hooks/theme/useTheme.js b/hooks/theme/useTheme.js
new file mode 100644
index 0000000..c9ea155
--- /dev/null
+++ b/hooks/theme/useTheme.js
@@ -0,0 +1,7 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+export default function useTheme() {
+  const store = useStore();
+  const theme = computed(() => store.state.theme);
+  return theme;
+}
diff --git a/pages.json b/pages.json
index 54acbb8..aefec0e 100644
--- a/pages.json
+++ b/pages.json
@@ -1,30 +1,32 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarText": "TALL"
-			}
-		},
-		{
-			"path": "pages/project/project",
-			"style": {
-				"navigationStyle": "custom",
-				"navigationBarTextStyle": "white"
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "TALL",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"easycom": {
-		"autoscan": true,
-		"custom": {
-			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
-			"^p-(.*)": "@/plugins/p-$1/p-$1.vue"
-		}
-	}
+  "pages": [
+    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarText": "TALL"
+      }
+    },
+    {
+      "path": "pages/project/project",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTextStyle": "white"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "TALL",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
+      "^p-(.*)": "@/plugins/p-$1/p-$1.vue",
+      "theme": "@/components/Theme/Theme.vue"
+    }
+  }
 }
diff --git a/pages/project/project.vue b/pages/project/project.vue
index f83fb1e..6337f25 100644
--- a/pages/project/project.vue
+++ b/pages/project/project.vue
@@ -13,6 +13,9 @@
       <!-- 定期任务面板 -->
       <!-- <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" /> -->
       <TimeLine class="flex-1 overflow-hidden" ref="timeLine" />
+
+      <!-- TODO: DEBUG: -->
+      <u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button>
     </view>
   </view>
 </template>
diff --git a/plugins/p-deliver/p-deliver.vue b/plugins/p-deliver/p-deliver.vue
new file mode 100644
index 0000000..1e501b0
--- /dev/null
+++ b/plugins/p-deliver/p-deliver.vue
@@ -0,0 +1,9 @@
+<template>
+  <view class="deliver-container">p-deliver</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss"></style>
diff --git a/plugins/p-task-title/p-task-title.vue b/plugins/p-task-title/p-task-title.vue
index a66a026..2cf8195 100644
--- a/plugins/p-task-title/p-task-title.vue
+++ b/plugins/p-task-title/p-task-title.vue
@@ -1,6 +1,8 @@
 <template>
   <!-- 任务名插件 -->
-  <view>{{ task.name }}</view>
+  <theme>
+    <view>{{ task.name }}</view>
+  </theme>
 </template>
 
 <script setup>
diff --git a/store/index.js b/store/index.js
index 70cac9f..c20d379 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,48 +1,58 @@
 import { createStore } from 'vuex';
-import user from './user/index.js';
-import socket from './socket/index.js';
 import project from './project/index.js';
 import role from './role/index.js';
+import socket from './socket/index.js';
 import task from './task/index.js';
+import user from './user/index.js';
 
 // 不属于具体模块的 应用级的 store内容
 const state = {
-	networkConnected: true, // 网络是否连接
-	forceUseStorage: true, // 强制启用storage
-	systemInfo: null, // 系统设备信息
+  theme: 'theme-default',
+  networkConnected: true, // 网络是否连接
+  forceUseStorage: true, // 强制启用storage
+  systemInfo: null, // 系统设备信息
 };
 
 const getters = {
-	// 是否启用本地存储
-	// 设置了强制启用本地存储 或者 没有网络连接的时候
-	useStorage({ networkConnected, forceUseStorage }) {
-		return forceUseStorage || !networkConnected;
-	},
+  // 是否启用本地存储
+  // 设置了强制启用本地存储 或者 没有网络连接的时候
+  useStorage({ networkConnected, forceUseStorage }) {
+    return forceUseStorage || !networkConnected;
+  },
 };
 
 const mutations = {
-	/**
-	 * 设置网络是否连接的变量
-	 * @param {*} state
-	 * @param {boolean} networkConnected
-	 */
-	setNetworkConnected(state, networkConnected) {
-		state.networkConnected = networkConnected;
-	},
+  /**
+   * 设置网络是否连接的变量
+   * @param {*} state
+   * @param {boolean} networkConnected
+   */
+  setNetworkConnected(state, networkConnected) {
+    state.networkConnected = networkConnected;
+  },
+
+  /**
+   * 设置系统信息的数据
+   * @param {object} state
+   * @param {object | null} data 获取到的数据
+   */
+  setSystemInfo(state, data) {
+    state.systemInfo = data;
+  },
 
-	/**
-	 * 设置系统信息的数据
-	 * @param {object} state
-	 * @param {object | null} data 获取到的数据
-	 */
-	setSystemInfo(state, data) {
-		state.systemInfo = data;
-	},
+  /**
+   * 设置主题
+   * @param {object} state
+   * @param {string} theme 主题名称 默认theme-default
+   */
+  setTheme(state, theme) {
+    state.theme = theme || 'theme-default';
+  },
 };
 
 export default createStore({
-	state,
-	getters,
-	mutations,
-	modules: {user, socket, project, role, task}
+  state,
+  getters,
+  mutations,
+  modules: { user, socket, project, role, task },
 });