design 包最小化升级指南 #

-  // unocss/vite
-  vitePlugins.push(UnoCSS())

-  // vite-plugin-theme
-  vitePlugins.push(configThemePlugin(isBuild))
-

 import appProvider from './src/AppProvider.vue'
 import appLocalePicker from './src/AppLocalePicker.vue'
-import appDarkModeToggle from './src/AppDarkModeToggle.vue'

 export { useAppProviderContext } from './src/useAppContext'

 export const AppLogo = withInstall(appLogo)
 export const AppProvider = withInstall(appProvider)
 export const AppLocalePicker = withInstall(appLocalePicker)
-export const AppDarkModeToggle = withInstall(appDarkModeToggle)

{
-  "@trinapower/unocss-preset-desktop": "0.0.10",
-  "@trinapower/unocss-public-reset": "^0.0.8",
-  "unocss": "^0.56.5",
+  "cosine-fee": "0.4.2-alpha.1",
+  "tailwindcss": "^3.4.16",
+  "@trinapower/design": "0.1.3-alpha.4",
+  "@trinapower/tailwind-preset-desktop": "1.0.4",
-  "@trinapower/vite-plugin-theme": "1.0.0-alpha.4"
}

 import { LOCALE, currentLocale } from '@/settings/locale.setting'
 import { deepMerge } from '@/utils'
 import projectSetting from '@/settings/project.setting'
-import { changeTheme } from './theme'
-import { updateHeaderBgColor, updateSidebarBgColor } from './theme/updateBackground'
-import { updateColorWeak } from './theme/updateColorWeak'
-import { updateGrayMode } from './theme/updateGrayMode'
-import { updateDarkTheme } from './theme/dark'
 import { getCommonStoragePrefix, getStorageShortName } from '@/utils/env'
-import { primaryColor } from '../../build/config/themeConfig'
-import { theme } from '@/constants/app.constant'

 export function initAppConfig() {
   projCfg = deepMerge(projectSetting, projCfg || {})
   appStore.setProjectConfig(projCfg)

-  runTheme(appStore, projCfg)
   runLocale()


-function runTheme(appStore, projCfg) {
-  const darkMode = appStore.getDarkMode
-  const {
-    colorWeak,
-    grayMode,
-    themeColor,
-
-    headerSetting: { bgColor: headerBgColor } = {},
-    menuSetting: { bgColor } = {},
-  } = projCfg
-
-  try {
-    if (themeColor && themeColor !== primaryColor) {
-      changeTheme(themeColor)
-    }
-
-    grayMode && updateGrayMode(grayMode)
-    colorWeak && updateColorWeak(colorWeak)
-  } catch (error) {
-    console.log(error)
-  }
-
-  // init dark mode
-  updateDarkTheme(darkMode)
-  if (darkMode === theme.DARK) {
-    updateHeaderBgColor()
-    updateSidebarBgColor()
-  } else {
-    headerBgColor && updateHeaderBgColor(headerBgColor)
-    bgColor && updateSidebarBgColor(bgColor)
-  }
-}
-

import {
   settingButtonPosition,
 } from '@/constants/app.constant'
 import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './design.setting'
-import { primaryColor } from '../../build/config/themeConfig'
+import { DEFAULT_PRIMARY_COLOR } from '@trinapower/design/constants'

 // ! You need to clear the browser cache after the change
const setting = {
   permissionCacheType: STORAGE_TYPE.LOCAL,

   // color
-  themeColor: primaryColor,
+  themeColor: DEFAULT_PRIMARY_COLOR,

import { useAppStore } from '@/store/modules/app.store'
 import { usePermissionStore } from '@/store/modules/permission.store'
 import { useMultipleTabStore } from '@/store/modules/multipleTab.store'
 import useUserStore from '@/store/modules/user.store'
+import { useThemeStore } from '@/store/modules/theme.store'

 import { useDesign } from '@/hooks/gui/useDesign'
 import { useI18n } from '@/hooks/gui/useI18n'
 import { useMessage } from '@/hooks/gui/useMessage'
 import { useCopyToClipboard } from '@/hooks/gui/useCopyToClipboard'

-import { updateColorWeak } from '@/global/theme/updateColorWeak'
-import { updateGrayMode } from '@/global/theme/updateGrayMode'
 import defaultSetting from '@/settings/project.setting'

 export default defineComponent({
@@ -46,6 +45,7 @@ export default defineComponent({
     const tabStore = useMultipleTabStore()
     const userStore = useUserStore()
     const appStore = useAppStore()
+    const themeStore = useThemeStore()

     function handleCopy() {
       const { isSuccessRef } = useCopyToClipboard(
@@ -62,8 +62,8 @@ export default defineComponent({
         appStore.setProjectConfig(defaultSetting)
         const { colorWeak, grayMode } = defaultSetting
         // updateTheme(themeColor);
-        updateColorWeak(colorWeak)
-        updateGrayMode(grayMode)
+        themeStore.toggleColorWeak(colorWeak)
+        themeStore.toggleGrayMode(grayMode)
         createMessage.success(t('layout.setting.resetSuccess'))
       } catch (error) {
         createMessage.error(error)

 export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'))
 export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.vue'))
-export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.vue'))
 export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'))
 export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'))
 export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'))

/* eslint-disable no-case-declarations */
 import { HandlerEnum } from './constants'
-import { updateHeaderBgColor, updateSidebarBgColor } from '@/global/theme/updateBackground'
-import { updateColorWeak } from '@/global/theme/updateColorWeak'
-import { updateGrayMode } from '@/global/theme/updateGrayMode'

 import { useAppStore } from '@/store/modules/app.store'
-import { changeTheme } from '@/global/theme'
-import { updateDarkTheme } from '@/global/theme/dark'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'

 export function baseHandler(event, value) {
   const appStore = useAppStore()
   const config = handler(event, value)
   appStore.setProjectConfig(config)
-  if (event === HandlerEnum.CHANGE_THEME) {
-    updateHeaderBgColor()
-    updateSidebarBgColor()
-  }
 }

 export function handler(event, value) {
       if (getThemeColor.value === value) {
         return {}
       }
-      changeTheme(value)
-      updateDarkTheme(value)
-      updateSidebarBgColor(value)
-      updateGrayMode(value)
-      updateColorWeak(value)
-      updateHeaderBgColor(value)

 import { wrapperEnv } from './build/utils'
 import { createProxy } from './build/vite/proxy'
-import { generateModifyVars } from './build/generate/generateModifyVars'
+import { generateModifyVars } from '@trinapower/design/build'
 import { createVitePlugins } from './build/vite/plugins'
 import { TESTING_OUTPUT_DIR, STAGING_OUTPUT_DIR, PRODUCTION_OUTPUT_DIR } from './build/constant'

export default ({ command, mode }: TrinaConfigEnv): UserConfig => {
  const env = loadEnv(mode, root)
  const viteEnv = wrapperEnv(env)
- const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv
+ const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_GLOB_BRAND } = viteEnv

     optimizeDeps: {
       include: ['cosine-fee/es/locale/zh_CN', 'cosine-fee/es/locale/en_US'],
+      exclude: ['@trinapower/design']
     },
   }
 }

module.exports = (ctx) => {
  return {
    plugins: {
+    'postcss-import': {},
+     'tailwindcss/nesting': {},
+     tailwindcss: {},
      autoprefixer: {},
    },
  }
}

-import '@/design/tailwind.css'
-import '@/design/index.less'
+import '@trinapower/design'
+import '@trinapower/design/cosine-fee'
+import '@/assets/styles/index.less'

 import 'virtual:svg-icons-register' // Register icon sprite