fix: 新增 plop 自动化生成工具

package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext"
+    "lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext",
+    "new": "plop --plopfile ./plop/plopfile.js"
   },
   "dependencies": {
     "@vicons/carbon": "^0.11.0",
@@ -14,6 +15,7 @@
     "mockjs": "^1.1.0",
     "naive-ui": "^2.24.1",
     "pinia": "^2.0.6",
+    "plop": "^3.0.5",
     "screenfull": "^6.0.0",
     "vue": "^3.2.16",
     "vue-i18n": "^9.2.0-beta.23",

plop/plopfile.js

@@ -0,0 +1,5 @@
+const storeGenerator = require('./store-template/prompt')
+
+module.exports = (plop) => {
+  plop.setGenerator('store', storeGenerator)
+}

plop/store-template/index.d.hbs

@@ -0,0 +1,3 @@
+export interface {{name}}StoreType {
+  
+}

plop/store-template/index.hbs

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+import { {{name}}StoreType } from './{{name}}Store.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+export const use{{upperDataName}}StoreStore = defineStore({
+  id: 'use{{upperDataName}}Store',
+  state: (): {{name}}StoreType => ({}),
+  getters: {},
+  actions: {}
+})

plop/store-template/prompt.js

@@ -0,0 +1,41 @@
+module.exports = {
+  description: 'create a store',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Please enter store name，such as "newStoreName" :',
+      validate (value) {
+        if (!value || value.trim === '') {
+          return 'name is required';
+        }
+        return true;
+      },
+    }
+  ],
+  actions: (data) => {
+    const dataName = data.name
+
+    // 首字母大写
+    const upperDataName = dataName.slice(0, 1).toUpperCase() + dataName.slice(1)
+
+    const actions = [
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/store/modules/${dataName}Store/${dataName}Store}.ts`, // 这里的name就是上面定义的键
+        templateFile: './store-template/index.hbs',
+        data: {
+          name: data.name,
+          upperDataName,
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/store/modules/${dataName}Store/${dataName}Store.d.ts`, // 这里的name就是上面定义的键
+        templateFile: './store-template/index.d.hbs'
+      },
+    ]
+    
+    return actions
+  }
+}

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -0,0 +1,3 @@
+export interface chartEditStoreType {
+  
+}

src/store/modules/chartEditStore/chartEditStore.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+import { chartEditStoreType } from './chartEditStore.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+export const useChartEditStoreStore = defineStore({
+  id: 'useChartEditStoreStore',
+  state: (): chartEditStoreType => ({}),
+  getters: {},
+  actions: {}
+})

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { store } from '@/store'
 import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -64,7 +63,3 @@ export const useChartLayoutStore = defineStore({
     },
   },
 })
-
-export function useChartLayoutSettingWithOut() {
-  return useChartLayoutStore(store)
-}

src/store/modules/designStore/designStore.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { store } from '@/store'
 import { theme } from '@/settings/designSetting'
 import { DesignStateType } from './designStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
@@ -44,7 +43,3 @@ export const useDesignStore = defineStore({
     },
   }
 })
-
-export function useDesignSettingWithOut() {
-  return useDesignStore(store)
-}

src/store/types.ts

@@ -1,9 +0,0 @@
-import { DesignStateType } from '@/store/modules/designStore/designStore.d';
-import { LangStateType } from '@/store/modules/langStore/langStore.d';
-import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
-
-export interface allStore {
-  useDesignStore: DesignStateType;
-  useLangStore: LangStateType;
-  useChartLayoutStore: ChartLayoutType;
-}

src/views/chart/components/ContentDetails/components/Page/index.ts

@@ -0,0 +1,3 @@
+import Page from './index.vue'
+
+export { Page }

src/views/chart/components/ContentDetails/components/Page/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+   页面设置
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/chart/components/ContentDetails/index.vue

@@ -39,13 +39,14 @@
 </template>
 
 <script setup lang="ts">
-import {  shallowRef, ref, toRefs, watch } from 'vue'
+import {  shallowRef, ref, toRefs, watch, reactive } from 'vue'
 import { icon } from '@/plugins'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnums } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { Setting } from './components/Setting/index'
 import { Behind } from './components/Behind/index'
+import { Page } from './components/Page/index'
 import { ContentDrag } from '../ContentDrag/index'
 
 const { getDetails } = toRefs(useChartLayoutStore())
@@ -73,10 +74,17 @@ watch(getDetails, (newData) => {
   }
 })
 
+// 页面设置
+const pageSetting = reactive({
+  key: 'pageSetting',
+  title: '页面设置',
+  render: Page
+})
+
 const tabList = shallowRef([
   {
     key: 'setting',
-    title: '配置项',
+    title: '设置',
     icon: CubeIcon,
     render: Setting
   },