add vuex

package.json

@@ -27,6 +27,7 @@
         "vue-loader": "^15.9.7",
         "vue-router": "^3.4.2",
         "vue-template-compiler": "^2.6.11",
+        "vuex": "^3.6.2",
         "webpack": "^5.38.1",
         "webpack-cli": "^4.7.0"
     },

resources/assets/js/app.js

@@ -1,16 +1,19 @@
 import Vue from 'vue'
+import Vuex from 'vuex'
 import App from './App.vue'
 import routes from './routes'
 import VueRouter from 'vue-router'
 import ViewUI from 'view-design-hi';
 import Language from './language/index'
 import Mixins from './mixins/index'
+import store from './store/index'
 
 import './functions/common'
 import './functions/app'
 
-Vue.use(VueRouter);
+Vue.use(Vuex);
 Vue.use(ViewUI);
+Vue.use(VueRouter);
 Vue.use(Language);
 Vue.use(Mixins);
 
@@ -74,6 +77,7 @@ Vue.config.productionTip = false;
 const app = new Vue({
     el: '#app',
     router,
+    store,
     template: '<App/>',
     components: { App }
 });

resources/assets/js/pages/manage/components/project-list.vue

@@ -10,7 +10,7 @@
                     <li class="project-icon">
                         <Icon type="ios-search-outline" />
                     </li>
-                    <li class="project-icon">
+                    <li class="project-icon" @click="$store.commit('projectChatShowToggle');">
                         <Icon type="ios-chatbubbles-outline" />
                         <Badge :count="999"></Badge>
                     </li>
@@ -259,9 +259,9 @@
             align-items: flex-start;
             margin: 32px 32px 16px;
             .project-titbox {
+                flex: 1;
                 margin-bottom: 16px;
                 .project-title {
-                    flex: 1;
                     color: #333333;
                     font-size: 28px;
                     font-weight: 600;

resources/assets/js/pages/manage/components/project-message.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="project-message">
+    <div v-if="$store.state.projectChatShow" class="project-message">
         <div class="group-member">
             <div class="member-head">
                 <div class="member-title">Member<span>(25)</span></div>
@@ -257,6 +257,7 @@
 <script>
 import DragInput from "../../../components/DragInput";
 import ScrollerY from "../../../components/ScrollerY";
+
 export default {
     name: "ProjectMessage",
     components: {ScrollerY, DragInput},

resources/assets/js/store/actions.js

@@ -0,0 +1,3 @@
+export default {
+
+}

resources/assets/js/store/getters.js

@@ -0,0 +1,3 @@
+export default {
+
+}

resources/assets/js/store/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import state from './state'
+import getters from './getters'
+import actions from './actions'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state,
+    getters,
+    mutations,
+    actions
+})

resources/assets/js/store/mutations.js

@@ -0,0 +1,6 @@
+export default {
+    projectChatShowToggle(state) {
+        state.projectChatShow = !state.projectChatShow
+        state.setStorage('projectChatShow', state.projectChatShow);
+    }
+}

resources/assets/js/store/state.js

@@ -0,0 +1,74 @@
+const state = {
+    setStorage(key, value) {
+        return this._storage(key, value);
+    },
+
+    getStorage(key, def = null) {
+        let value = this._storage(key);
+        return value || def;
+    },
+
+    getStorageString(key, def = '') {
+        let value = this._storage(key);
+        return typeof value === "string" || typeof value === "number" ? value : def;
+    },
+
+    getStorageNumber(key, def = 0) {
+        let value = this._storage(key);
+        return typeof value === "number" ? value : def;
+    },
+
+    getStorageBoolean(key, def = false) {
+        let value = this._storage(key);
+        return typeof value === "boolean" ? value : def;
+    },
+
+    _storage(key, value) {
+        let keyName = 'state';
+        if (typeof value === 'undefined') {
+            return this._loadFromlLocal('__::', key, '', '__' + keyName + '__');
+        } else {
+            this._savaToLocal('__::', key, value, '__' + keyName + '__');
+        }
+    },
+
+    _savaToLocal(id, key, value, keyName) {
+        try {
+            if (typeof keyName === 'undefined') keyName = '__seller__';
+            let seller = window.localStorage[keyName];
+            if (!seller) {
+                seller = {};
+                seller[id] = {};
+            } else {
+                seller = JSON.parse(seller);
+                if (!seller[id]) {
+                    seller[id] = {};
+                }
+            }
+            seller[id][key] = value;
+            window.localStorage[keyName] = JSON.stringify(seller);
+        } catch (e) {
+        }
+    },
+
+    _loadFromlLocal(id, key, def, keyName) {
+        try {
+            if (typeof keyName === 'undefined') keyName = '__seller__';
+            let seller = window.localStorage[keyName];
+            if (!seller) {
+                return def;
+            }
+            seller = JSON.parse(seller)[id];
+            if (!seller || typeof seller[key] === 'undefined') {
+                return def;
+            }
+            return seller[key];
+        } catch (e) {
+            return def;
+        }
+    },
+};
+
+export default Object.assign(state, {
+    projectChatShow: state.getStorageBoolean('projectChatShow', true),
+})