Fuse 主题

为什么需要Fuse标准主题？

如您所见，Fused是基于ant-design开发的UI框架，自然也支持了ant-design的主题定制。但是，ant-design的默认主题并不符合公司设计统一规范的要求，所以我们为Fused定制了Fuse标准主题。

如何使用Fuse标准主题？

我们提供了 FusedThemeConfig组件来支持Fuse标准主题的使用。你只需要在你的项目根组件中引入FusedThemeConfig组件，然后在FusedThemeConfig组件中插入你的组件即可。我们定制的token基于设计中台B端组件库设计规范，详情可参考B端组件库规范。

代码演示

// App.vue
<script>
import { FusedThemeConfig } from '@design-middle-center/fuse-design-vue'
const theme  = ref()
这里的theme是你自己项目的配置，比如Fuse自带的token配置无法满足你的需求，你可以在这里配置一些个性化的token // [!code highlight]
</script>
<template>
  <FusedThemeConfig :theme="theme“> // [!code highlight]
    <Layout />
  </FusedThemeConfig>
</template>

千人千面的换肤SDK

在我们已经确定接入了Fuse标准主题之后，我们还提供了一个千人千面的换肤SDK，你可以通过这个SDK来实现千人千面的换肤。每个用户都可以按照自己的喜好配置自己的主题，目前已支持多语言。

如何安装SDK

在在外层index.html根文件中引入以下代码

<head>
  ... 其他引入
 <script src="https://static-resource-data.obs.cn-east-3.myhuaweicloud.com/design-middle-center/fuseThemeSdk-umd.js"></script>
 <link rel="stylesheet" href="https://static-resource-data.obs.cn-east-3.myhuaweicloud.com/design-middle-center/fuseThemeSdk.css">
 <head/>

如何使用

在最外层组件初始化后，调用以下代码，即可获取到用户的主题配置。并实时根据用户的配置进行更新

vue

<script setup>
// app.vue
import { onMounted } from 'vue'
const themeConfig = ref({})
onMounted(() => {
  // 初始化SDK
  window.FuseThemeSDK.initSDK(
    (val, isInit) => {
      if (isInit) {
        console.log(val, 'initSDK初始化回调=============')
        if (val) {
          theme.value = { ...theme.value, ...val }
        } else {
          const configObj = JSON.parse(localStorage.getItem('fuseDesignThemeConfig'))
          theme.value = { ...theme.value, ...{ token: configObj } }
        }
      } else {
        window.location.reload()
      }
    },
    {
      bottom: '10%',
      allowDrag: false,
      domElement: '.leftContainer',
      left: '50%',
      closeFontFamilyOption: false,
      closeDarkMode: false,
      closeBorderOption: false,
      closeFontOption: false,
      closeSizeOption: false,
      style: {
        marginRight: '10px'
      },
      systemName: ''
    }
  )
  // 多语言设置 默认为中文zh，设置默认英文en
  window.FuseThemeSDK.changeLocale('en')
})
</script>

API说明

TIP

1.sdk的露出按钮默认为悬浮状态，可通过配置top等参数控制悬浮位置，也可通过配置父元素的类名，将按钮嵌入到自己的节点元素中，但是必须保证初始化方法执行时，该节点已经渲染完毕！。2.多语言使用说明多语言，默认为中文，切换方法：window.FuseThemeSDK.changeLocale(luanage) luanage：'zh'为中文，'en'为英文

属性名	类型	默认值	说明
domElement	string	'body'	可选，填入项将通过querySelector查询到的元素作为sdk按钮的父元素，此时不再为悬浮模式
allowDrag	boolean	false	可选，且仅在悬浮模式下生效，是否允许拖拽，移动按钮位置
top	string	''	可选，且仅在悬浮模式下生效，配置为按钮距离屏幕顶部的值，可为百分比或者px
left	string	''	可选，且仅在悬浮模式下生效，配置为按钮距离屏幕左侧的值，可为百分比或者px
right	string	''	可选，且仅在悬浮模式下生效，配置为按钮距离屏幕右侧的值，可为百分比或者px
bottom	string	''	可选，且仅在悬浮模式下生效，配置为按钮距离屏幕底部的值，可为百分比或者px
style	object	''	可选，按钮的其他style的配置，如在style中再次配置top等参数，则拖拽功能失效
closeDarkMode	boolean	false	可选，是否显示主色配置
closeBorderOption	boolean	false	可选，是否显示圆角配置
closeFontOption	boolean	false	可选，是否显示字号大小配置
closeSizeOption	boolean	false	可选，是否显示间距配置
systemName	string	''	可选，不同产品的系统名称，定制特殊换肤功能时需要提供该字段
closeFontFamilyOption	boolean	false	可选，是否显示字体切换功能，默认打开，显示misans字体，关闭后显示微软雅黑字体(奥丁的系统相反);备注：localstorage中字段fontFamilyConfig：0表示微软雅黑字体 1表示misans 字体

护眼（暗黑）模式介绍

sdk中除了提供部分token的配置之外，还提供了一个暗黑模式的配置，他是基于开源js库darkreader实现的，我们只是做了功能的集成

TIP

他能为绝大多数网站提供现成的暗黑模式，但是他无法做到完美，因为他的底层方案是他的换色算法实现的，不能完全贴合具体业务的设计需求，因此，接入方可灵活根据是否开启暗黑模式，对自己项目内部样式做更加细致的变更，达到更好的效果

Fuse 主题 ​

为什么需要Fuse标准主题？ ​

如何使用Fuse标准主题？ ​

代码演示 ​

千人千面的换肤SDK ​

如何安装SDK ​

如何使用 ​

API说明 ​

护眼（暗黑）模式介绍 ​