Merge pull request #91 from JeremyYu-cn/feat-pinia

Feat: Rebuilt page store using pinia

src/pinia/base/index.ts

@@ -0,0 +1,50 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: Base全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { defineStore } from 'pinia'
+
+// import actions from './actions'
+// import _config from '@/config'
+
+type TStoreBaseState = {
+  loading: boolean | null
+  scroll: boolean
+  /** fonts */
+  fonts: string[]
+  /** 抠图服务 */
+  app: string | null
+}
+
+type TUserAction = {
+  hideLoading: () => void
+  setFonts: (list: string[]) => void
+}
+
+/** Base全局状态管理 */
+const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
+  state: () => ({
+    loading: null,
+    scroll: true,
+    fonts: [], // 缓存字体列表
+    app: null, // 抠图服务
+  }),
+  actions: {
+    /** 隐藏loading */
+    hideLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 600)
+    },
+    setFonts(list: string[]) {
+      this.fonts = list
+    },
+  }
+})
+
+export default useBaseStore
+

src/pinia/base/user.ts

@@ -3,7 +3,7 @@
  * @Date: 2024-03-17 15:00:00
  * @Description: User全局状态管理
  * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-17 15:00:00
+ * @LastEditTime: 2024-03-18 21:00:00
  */
 
 import { defineStore } from "pinia"
@@ -29,6 +29,7 @@ type TUserAction = {
   managerEdit: (status: boolean) => void
 }
 
+/** User全局状态管理 */
 const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>('userStore', {
   state: () => ({
     online: true, // 登录状态，

src/pinia/design/page/index.ts

@@ -0,0 +1,82 @@
+import { defineStore } from 'pinia'
+
+export type TPageStore = {
+  name: string
+  type: string
+  uuid: string
+  left: number
+  top: number
+  /** 画布宽度 */
+  width: number
+  /** 画布高度 */
+  height: number
+  /** 画布背景颜色 */
+  backgroundColor: string
+  /** 画布背景图片 */
+  backgroundImage: string
+  backgroundTransform: {
+    x?: number
+    y?: number
+  }
+  /** 透明度 */
+  opacity: number
+  /** 强制刷新用 */
+  tag: number
+  setting:{
+    label: string
+    parentKey: string
+    value: boolean
+  }[]
+  record: Record<string, any>
+}
+
+type TPageGetter = {
+  dPage(state: TPageStore): TPageStore
+}
+
+type TPageActions = {
+  updatePageData<T extends keyof TPageStore>(data: {
+    key: T
+    value: TPageStore[T]
+    pushHistory: boolean
+  }): void
+}
+
+export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
+  state: () => ({
+    name: '背景页面',
+    type: 'page',
+    uuid: '-1',
+    left: 0,
+    top: 0,
+    width: 1920, // 画布宽度
+    height: 1080, // 画布高度
+    backgroundColor: '#ffffff', // 画布背景颜色
+    backgroundImage: '', // 画布背景图片
+    backgroundTransform: {},
+    opacity: 1, // 透明度
+    tag: 0, // 强制刷新用
+    setting: [
+      {
+        label: '背景颜色',
+        parentKey: 'backgroundColor',
+        value: false,
+      },
+    ],
+    record: {},
+  }),
+  getters: {
+    dPage: (state) => state
+  },
+  actions: {
+    /** 更新Page数据 */
+    updatePageData({ key, value, pushHistory }) {
+      const data = this as TPageStore
+      if (data[key] !== value || pushHistory) {
+        data[key] = value
+        // 画布修改先不压入历史栈，因为替换模板后会重复压栈
+        // store.dispatch('pushHistory', 'updatePageData')
+      }
+    },
+  }
+})

src/pinia/index.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: 方法暴露
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import useBaseStore from "./base";
+import useUserStore from "./base/user";
+import usePageStore from "./design/page/index"
+
+export {
+  useBaseStore,
+  useUserStore,
+  usePageStore,
+}

src/store/modules/base/index.ts

@@ -6,47 +6,6 @@
  * @LastEditTime: 2024-03-17 15:00:00
  */
 
-import { defineStore } from 'pinia'
-
-// import actions from './actions'
-// import _config from '@/config'
-
-type TStoreBaseState = {
-  loading: boolean | null
-  scroll: boolean
-  /** fonts */
-  fonts: string[]
-  /** 抠图服务 */
-  app: string | null
-}
-
-type TUserAction = {
-  hideLoading: () => void
-  setFonts: (list: string[]) => void
-}
-
-const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
-  state: () => ({
-    loading: null,
-    scroll: true,
-    fonts: [], // 缓存字体列表
-    app: null, // 抠图服务
-  }),
-  actions: {
-    /** 隐藏loading */
-    hideLoading() {
-      setTimeout(() => {
-        this.loading = false
-      }, 600)
-    },
-    setFonts(list: string[]) {
-      this.fonts = list
-    },
-  }
-})
-
-export default useBaseStore
-
 // const all = {
 //   state: {
 //     loading: null,

src/utils/axios.ts

@@ -8,8 +8,7 @@
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
 // import store from '@/store'
 import app_config, { LocalStorageKey } from '@/config'
-import useUserStore from '@/store/modules/base/user';
-import useBaseStore from '@/store/modules/base';
+import { useBaseStore, useUserStore } from '@/pinia/index';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';

src/views/components/HeaderOptions.vue

@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import useUserStore from '@/store/modules/base/user'
+import { useUserStore } from '@/pinia/index'
 
 type TProps = {
   modelValue?: boolean