feat: 默认配置和类型工具提取到独立子包中

Author: hooray

apps/core/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@fantastic-mobile/components": "workspace:*",
+    "@fantastic-mobile/settings": "workspace:*",
     "@fantastic-mobile/themes": "workspace:*",
     "@vant/touch-emulator": "catalog:",
     "@vee-validate/zod": "catalog:",
@@ -57,12 +58,10 @@
     "@iconify/vue": "catalog:",
     "@types/nprogress": "catalog:",
     "@types/qs": "catalog:",
-    "@unocss/reset": "catalog:",
     "@vitejs/plugin-legacy": "catalog:",
     "@vitejs/plugin-vue": "catalog:",
     "@vitejs/plugin-vue-jsx": "catalog:",
     "@vue/tsconfig": "catalog:",
-    "@yeungkc/unocss-preset-safe-area": "catalog:",
     "autoprefixer": "catalog:",
     "boxen": "catalog:",
     "http-server": "catalog:",
@@ -73,8 +72,6 @@
     "postcss-nested": "catalog:",
     "sass-embedded": "catalog:",
     "svgo": "catalog:",
-    "unocss": "catalog:",
-    "unocss-preset-animations": "catalog:",
     "unplugin-auto-import": "catalog:",
     "unplugin-turbo-console": "catalog:",
     "unplugin-vue-components": "catalog:",

apps/core/src/components/AppSetting/index.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
 import { toast } from 'vue-sonner'
-import settingsDefault from '@/settings/default'
-import { diffTwoObj } from '@/settings/utils'
+import { setSettings } from '@fantastic-mobile/settings'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({
   name: 'AppSetting',
 })
 
 const appSettingsStore = useAppSettingsStore()
+const settingsDefault = setSettings({})
 
 const isShow = ref(false)
 
@@ -41,6 +41,33 @@ watch(copied, (val) => {
 function handleCopy() {
   copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))
 }
+
+function isObject(value: unknown): value is Record<string, any> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function diffTwoObj(originalObj: Record<string, any>, diffObj: Record<string, any>) {
+  if (!isObject(originalObj) || !isObject(diffObj)) {
+    return diffObj
+  }
+  const diff: Record<string, any> = {}
+  for (const key in diffObj) {
+    const originalValue = originalObj[key]
+    const diffValue = diffObj[key]
+    if (JSON.stringify(originalValue) !== JSON.stringify(diffValue)) {
+      if (isObject(originalValue) && isObject(diffValue)) {
+        const nestedDiff = diffTwoObj(originalValue, diffValue)
+        if (Object.keys(nestedDiff).length > 0) {
+          diff[key] = nestedDiff
+        }
+      }
+      else {
+        diff[key] = diffValue
+      }
+    }
+  }
+  return diff
+}
 </script>
 
 <template>

apps/core/src/settings/index.ts apps/core/src/settings.tsapps/core/src/settings/index.ts renamed to apps/core/src/settings.ts

@@ -1,4 +1,4 @@
-import { setSettings } from './utils'
+import { setSettings } from '@fantastic-mobile/settings'
 
 export default setSettings({
   // 请在此处编写或粘贴配置代码

apps/core/src/settings/utils.ts

@@ -1,4 +1,4 @@
-import type { Settings } from '#/global'
+import type { ThemeSettings } from '@fantastic-mobile/settings'
 import settingsDefault from '@/settings'
 
 export const useAppSettingsStore = defineStore(
@@ -24,7 +24,7 @@ export const useAppSettingsStore = defineStore(
       immediate: true,
     })
 
-    const currentColorScheme = ref<Exclude<Settings.theme['colorScheme'], ''>>()
+    const currentColorScheme = ref<Exclude<Required<ThemeSettings>['colorScheme'], ''>>()
     watch(() => settings.value.theme.colorScheme, updateTheme, {
       immediate: true,
     })

apps/core/src/store/modules/app/settings.ts

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@fantastic-mobile/components": "workspace:*",
+    "@fantastic-mobile/settings": "workspace:*",
     "@fantastic-mobile/themes": "workspace:*",
     "@vant/touch-emulator": "catalog:",
     "@vee-validate/zod": "catalog:",
@@ -59,12 +60,10 @@
     "@iconify/vue": "catalog:",
     "@types/nprogress": "catalog:",
     "@types/qs": "catalog:",
-    "@unocss/reset": "catalog:",
     "@vitejs/plugin-legacy": "catalog:",
     "@vitejs/plugin-vue": "catalog:",
     "@vitejs/plugin-vue-jsx": "catalog:",
     "@vue/tsconfig": "catalog:",
-    "@yeungkc/unocss-preset-safe-area": "catalog:",
     "autoprefixer": "catalog:",
     "boxen": "catalog:",
     "http-server": "catalog:",
@@ -75,8 +74,6 @@
     "postcss-nested": "catalog:",
     "sass-embedded": "catalog:",
     "svgo": "catalog:",
-    "unocss": "catalog:",
-    "unocss-preset-animations": "catalog:",
     "unplugin-auto-import": "catalog:",
     "unplugin-turbo-console": "catalog:",
     "unplugin-vue-components": "catalog:",

apps/core/src/types/global.d.ts

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
 import { toast } from 'vue-sonner'
-import settingsDefault from '@/settings/default'
-import { diffTwoObj } from '@/settings/utils'
+import { setSettings } from '@fantastic-mobile/settings'
 import eventBus from '@/utils/eventBus'
 
 defineOptions({
   name: 'AppSetting',
 })
 
 const appSettingsStore = useAppSettingsStore()
+const settingsDefault = setSettings({})
 
 const isShow = ref(false)
 
@@ -41,6 +41,33 @@ watch(copied, (val) => {
 function handleCopy() {
   copy(JSON.stringify(diffTwoObj(settingsDefault, appSettingsStore.settings), null, 2))
 }
+
+function isObject(value: unknown): value is Record<string, any> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function diffTwoObj(originalObj: Record<string, any>, diffObj: Record<string, any>) {
+  if (!isObject(originalObj) || !isObject(diffObj)) {
+    return diffObj
+  }
+  const diff: Record<string, any> = {}
+  for (const key in diffObj) {
+    const originalValue = originalObj[key]
+    const diffValue = diffObj[key]
+    if (JSON.stringify(originalValue) !== JSON.stringify(diffValue)) {
+      if (isObject(originalValue) && isObject(diffValue)) {
+        const nestedDiff = diffTwoObj(originalValue, diffValue)
+        if (Object.keys(nestedDiff).length > 0) {
+          diff[key] = nestedDiff
+        }
+      }
+      else {
+        diff[key] = diffValue
+      }
+    }
+  }
+  return diff
+}
 </script>
 
 <template>

apps/example/package.json

@@ -1,4 +1,4 @@
-import { setSettings } from './utils'
+import { setSettings } from '@fantastic-mobile/settings'
 
 export default setSettings({
   app: {