Revert "Revert "Feat(store): persistence store data""

This reverts commit be9961f. # Conflicts: # src/pages/auth/component/auth-view/index.tsx
radishes-music · Dec 22, 2020 · 2e0e43d · 2e0e43d
1 parent 9d9a7c1
commit 2e0e43d
Show file tree

Hide file tree

Showing 20 changed files with 192 additions and 215 deletions.
diff --git a/package.json b/package.json
@@ -58,7 +58,8 @@
     "vant": "^3.0.0-beta.7",
     "vue": "^3.0.2",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "vuex-persistedstate": "^4.0.0-beta.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -71,10 +72,10 @@
     "@types/chai": "^4.2.11",
     "@types/classnames": "^2.2.10",
     "@types/electron-devtools-installer": "^2.2.0",
+    "@types/file-saver": "^2.0.1",
     "@types/md5": "^2.2.1",
     "@types/mocha": "^5.2.4",
     "@types/scriptjs": "^0.0.2",
-    "@types/file-saver": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -108,10 +109,10 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^7.0.0-0",
     "express": "^4.17.1",
+    "file-saver": "^2.0.5",
     "http-proxy-middleware": "^1.0.6",
     "husky": "^4.3.0",
     "lerna": "^3.22.1",
-    "file-saver": "^2.0.5",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "lint-staged": "^9.5.0",
@@ -120,13 +121,13 @@
     "react-is": "^16.13.1",
     "scriptjs": "^2.5.9",
     "spectron": "^12.0.0",
-    "svgo": "^1.3.2",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recess-order": "^2.3.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "stylelint-prettier": "^1.1.2",
+    "svgo": "^1.3.2",
     "ts-loader": "^8.0.6",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.1",

diff --git a/packages/unblock/app.js b/packages/unblock/app.js
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -0,0 +1,17 @@
+import { AUTH_MUTATIONS } from './../pages/auth/sage'
+import { AuthNameSpaced, HeaderNameSpaced } from '@/modules'
+import store from '@/store'
+import { Mutations as HEADER_MUTATIONS } from '@/pages/header/sage'
+
+export const isLogin = () => store.getters['Auth/isLogin']
+
+export const showLogin = () =>
+  store.commit(`${AuthNameSpaced}/${AUTH_MUTATIONS.SHOW_VIEW}`)
+
+export const hideAuth = () => {
+  store.commit(`${AuthNameSpaced}/${AUTH_MUTATIONS.HIDE_VIEW}`)
+}
+
+export const setThemeColor = (color: string) => {
+  store.commit(`${HeaderNameSpaced}/${HEADER_MUTATIONS.SET_THEME_COLOR}`, color)
+}
diff --git a/src/hooks/hook.ts b/src/hooks/hook.ts
@@ -137,3 +137,8 @@ export function uesModuleStore<S, G = Record<string, string>>(
     useGetter: useGetter
   }
 }
+
+export const useThemeColor = () => {
+  const $store = useStore()
+  return $store.state.Header.themeColor
+}
diff --git a/src/hooks/http.ts b/src/hooks/http.ts
@@ -7,7 +7,7 @@ export const useHttp = (fetchFn: Function): any => {
   })
 
   const doFetch = async (...args: any[]) => {
-    state.loading = false
+    state.loading = true
     try {
       const res = await fetchFn(...args)
       state.loading = false

diff --git a/src/pages/auth/component/auth-view/index.less b/src/pages/auth/component/auth-view/index.less
@@ -3,7 +3,8 @@
 @auth-text-strong: #333;
 @auth-input-border: #dedede;
 @auth-input-color: #a9a9a9;
-@auth-theme-color: #d33a31;
+// @auth-theme-color: #d33a31;
+@auth-theme-color: var(--base-color);
 
 .linearLine(@flag) {
   background: linear-gradient(if(@flag, 45deg, -45deg), #ccc, #f8f8f8);
@@ -29,6 +30,9 @@
   }
   &__icon {
     margin-top: 30px;
+    svg {
+      fill: var(--base-color-background) !important;
+    }
   }
 
   &__inputbox {
@@ -64,7 +68,10 @@
     justify-content: flex-end;
     height: 48px;
     font-size: 12px;
-    color: @auth-theme-color;
+    color: #d33a31;
+    svg {
+      fill: #d33a31 !important;
+    }
   }
 
   .register {

diff --git a/src/pages/auth/component/auth-view/index.tsx b/src/pages/auth/component/auth-view/index.tsx
@@ -1,20 +1,16 @@
 import { defineComponent, onMounted } from 'vue'
 import { MaskView } from '../mask-view'
 import './index.less'
+import { hideAuth } from '@/helpers'
 
 export const AuthView = defineComponent({
   setup(props, { slots }) {
-    const $store = useStore()
-    const doClose = () => {
-      $store.commit('Auth/HIDE_VIEW')
-    }
-
     onMounted(() => {
-      window.history.pushState(null, '123', location.href)
+      window.history.pushState(null, 'RADISHES', location.href)
       window.addEventListener(
         'popstate',
         () => {
-          doClose()
+          hideAuth()
         },
         {
           once: true
@@ -34,7 +30,7 @@ export const AuthView = defineComponent({
               color="rgb(153,153,153)"
               size={18}
               class="auth-view__close"
-              onClick={doClose}
+              onClick={hideAuth}
             />
             {/* 想在这里加一个动画效果，让它做一个类似页面翻转的动画 */}
             <div class="auth-view__box">{slots.default?.()}</div>

diff --git a/src/pages/auth/component/button/index.less b/src/pages/auth/component/button/index.less
@@ -1,4 +1,4 @@
-@auth-theme-color: #d33a31;
+@auth-theme-color: var(--base-color);
 
 .van-button {
   &.auth-button {

diff --git a/src/pages/auth/component/button/index.tsx b/src/pages/auth/component/button/index.tsx
@@ -3,10 +3,55 @@ import { defineComponent } from 'vue'
 import { Button as VantButton } from 'vant'
 import './index.less'
 
+const VanButtonProps = {
+  onClick: Function,
+  text: String,
+  icon: String,
+  color: String,
+  block: Boolean,
+  plain: Boolean,
+  round: Boolean,
+  square: Boolean,
+  loading: Boolean,
+  hairline: Boolean,
+  disabled: Boolean,
+  iconPrefix: String,
+  loadingText: String,
+  loadingType: String,
+  tag: {
+    type: String,
+    default: 'button'
+  },
+  type: {
+    type: String,
+    default: 'default'
+  },
+  size: {
+    type: String,
+    default: 'normal'
+  },
+  nativeType: {
+    type: String,
+    default: 'button'
+  },
+  loadingSize: {
+    type: String,
+    default: '20px'
+  },
+  iconPosition: {
+    type: String,
+    default: 'left'
+  }
+}
+
 export const Button = defineComponent({
+  props: VanButtonProps,
+
   setup(props: any, { slots }) {
     return () => (
       <VantButton
+        disabled={props.disabled}
+        loading={props.loading}
         onClick={props.onClick}
         class="auth-button"
         type="primary"

diff --git a/src/pages/auth/component/sidebar-auth/index.tsx b/src/pages/auth/component/sidebar-auth/index.tsx
@@ -1,23 +1,29 @@
 import { useAuth } from '@/hooks/auth'
 import { defineComponent } from 'vue'
-import { RouterLink } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { Image } from 'vant'
 
+const DEFAULT_AVATAR =
+  'https://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg'
+
 export const SidebarAuth = defineComponent({
   name: 'SidebarAuth',
   setup() {
     const { isLogin, profile } = useAuth()
+    const $router = useRouter()
+
+    const onClick = () => {
+      $router.push('/profile')
+    }
 
     return () => {
       const text = isLogin.value ? profile.value.nickname : '未登录'
-      const head = isLogin.value
-        ? profile.value.avatarUrl
-        : 'https://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg'
+      const head = isLogin.value ? profile.value.avatarUrl : DEFAULT_AVATAR
       return (
-        <RouterLink class="sidebar-nav-login" to="/profile">
+        <a class="sidebar-nav-login" onClick={onClick}>
           <Image width="40" height="40" src={head} round fit="cover"></Image>
           <span>{text}</span>
-        </RouterLink>
+        </a>
       )
     }
   }

diff --git a/src/pages/auth/views/phone-login.tsx b/src/pages/auth/views/phone-login.tsx
@@ -13,7 +13,7 @@ import { useHttp } from '@/hooks'
 
 import '../component/auth-view/index.less'
 import { useText } from '../hooks'
-import { inputColor, leakThemeColor, themeColor } from '../theme'
+import { inputColor, themeColor } from '../theme'
 
 import { Checkbox } from 'vant'
 /* 
@@ -59,6 +59,7 @@ export const PhoneLogin = defineComponent({
         httpPhoneLogin(state.phone, state.password)
           .then((res: LoginRes) => {
             commitLogin(res)
+            Toast('登录成功')
             $router.back()
           })
           .catch((e: any) => {
@@ -90,7 +91,7 @@ export const PhoneLogin = defineComponent({
     return () => (
       <>
         <div class="vh-center auth-view__icon">
-          <icon icon="diepian" color={leakThemeColor} size={96} />
+          <icon icon="diepian" size={96} />
         </div>
         <div class="auth-view__inputbox">
           <InputField
@@ -151,6 +152,7 @@ export const PhoneLogin = defineComponent({
 
         <Button
           disabled={httpStatus.loading}
+          loading={httpStatus.loading}
           class="bd-button__auth"
           onClick={doLogin}
         >

diff --git a/src/pages/auth/views/reset-pwd.tsx b/src/pages/auth/views/reset-pwd.tsx
@@ -67,7 +67,7 @@ export const ResetPwd = defineComponent({
         </Button>
 
         <div
-          class="auth-back"
+          class="auth-back cursor-pointer"
           onClick={() => authUtil.to(AUTH_TYPE.PHONE_LOGIN)}
         >{`< 返回登录`}</div>
       </>

diff --git a/src/pages/auth/views/signup.tsx b/src/pages/auth/views/signup.tsx
@@ -76,6 +76,7 @@ export const Signup = defineComponent({
           </div>
         </div>
         <div
+          class="auth-back cursor-pointer"
           style={{ textAlign: 'center', color: '#333' }}
           onClick={() => {
             authUtil.to(AUTH_TYPE.PHONE_LOGIN)

diff --git a/src/pages/header/component/setting.tsx b/src/pages/header/component/setting.tsx
@@ -1,49 +1,57 @@
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import { importIpc } from '@/electron/event/ipc-browser'
 import { MiddlewareView } from '@/electron/event/action-types'
 import { Platform } from '@/config/build'
 import { shade } from '@/theme/color'
 import { Popover } from 'ant-design-vue'
 import './setting.less'
+import { setThemeColor } from '@/helpers'
+import { useThemeColor } from '@/hooks'
 
 const { VUE_APP_PLATFORM } = process.env
 
+const setColor = (value: string) => {
+  const color = {
+    'base-color': value.toLocaleLowerCase(),
+    'normal-theme-text': shade(value, 0.1),
+    'primary-theme-text': value.toLocaleLowerCase(),
+    'base-color-background': shade(value, 0.4),
+    'secondary-theme-text': shade(value, 0.2)
+  }
+
+  for (const [key, value] of Object.entries(color)) {
+    document.documentElement.style.setProperty('--' + key, value)
+  }
+
+  if (VUE_APP_PLATFORM === Platform.ELECTRON) {
+    importIpc().then(event => {
+      event.sendAsyncIpcRendererEvent(MiddlewareView.UPDATE_THEME_COLOR, value)
+    })
+  }
+}
+
 export const Setting = defineComponent({
   name: 'Setting',
   setup() {
-    const color = ref('#4a6eef')
+    const themeColor = useThemeColor()
     const visibleColor = ref(false)
 
+    onMounted(() => {
+      setColor(themeColor)
+    })
+
     const clickHandler = (value: string) => {
       visibleColor.value = false
 
-      const color = {
-        'base-color': value.toLocaleLowerCase(),
-        'normal-theme-text': shade(value, 0.1),
-        'primary-theme-text': value.toLocaleLowerCase(),
-        'base-color-background': shade(value, 0.4),
-        'secondary-theme-text': shade(value, 0.2)
-      }
-
-      for (const [key, value] of Object.entries(color)) {
-        document.documentElement.style.setProperty('--' + key, value)
-      }
-
-      if (VUE_APP_PLATFORM === Platform.ELECTRON) {
-        importIpc().then(event => {
-          event.sendAsyncIpcRendererEvent(
-            MiddlewareView.UPDATE_THEME_COLOR,
-            value
-          )
-        })
-      }
+      setThemeColor(value)
+      setColor(value)
     }
 
     const ColorPicker = {
       content: () => (
         <ve-color-picker
           simple
-          v-model={color.value}
+          v-model={themeColor}
           onChange={clickHandler}
         ></ve-color-picker>
       ),

diff --git a/src/pages/header/sage.ts b/src/pages/header/sage.ts
@@ -8,7 +8,8 @@ export const enum Actions {
 }
 
 export const enum Mutations {
-  SET_SEARCH_SUGGEST = 'SET_SEARCH_SUGGEST'
+  SET_SEARCH_SUGGEST = 'SET_SEARCH_SUGGEST',
+  SET_THEME_COLOR = 'SET_THEME_COLOR'
 }
 
 export const actions: ActionTree<HeaderState, RootState> = {
@@ -20,5 +21,8 @@ export const actions: ActionTree<HeaderState, RootState> = {
 export const mutations: MutationTree<HeaderState> = {
   [Mutations.SET_SEARCH_SUGGEST](state, payload: SearchSuggest) {
     state.searchSuggest = payload
+  },
+  [Mutations.SET_THEME_COLOR](state, payload: string) {
+    state.themeColor = payload
   }
 }