Browse Source

docs: update faq/changelog/custom theme

pointhalo 4 years ago
parent
commit
3623a7fca4

+ 1 - 1
README-zh_CN.md

@@ -43,7 +43,7 @@
 # 🎉 特性
 
 - 💪 58+高质量组件
-- 💅 强大的主题定制,上千个 Design Token
+- 💅 强大的主题定制,多达两千多个 Design Token,深入定制每一处细节
 - 🌍 国际化支持 14 种语言
 - 👏 使用 TypeScript,良好的类型定义
 - 🥳 支持 SSR

+ 9 - 0
content/start/changelog/index-en-US.md

@@ -16,6 +16,15 @@ Version:Major.Minor.Patch
 
 ---
 
+#### 🎉 2.1.5 (2021-12-10)
+
+- 【Fix】
+  - Timeline.time ts definition supports ReactNode type [#359](https://github.com/DouyinFE/semi-design/issues/359) [@chenc041](https://github.com/chenc041)
+  - Fix the problem of Tree component onContextMenu preventing bubbling [#364](https://github.com/DouyinFE/semi-design/issues/364) [@Nctdtman](https://github.com/Nctdtman)
+  - Fix the missing id of Select/Checkbox/Button [#353](https://github.com/DouyinFE/semi-design/issues/353)
+  - Fix the problem that the definitions of Nav footer and header dts are reversed
+  - Fix the problem that the z-index of Table fixed cell is too small, adjusted from 1 to 101 [#391](https://github.com/DouyinFE/semi-design/issues/391)
+
 #### 🎉 2.1.4 (2021-12-03)
 - 【Fix】
   - Add nativeEvent.stopImmediatePropagation to the event input parameter of Checkbox onChange callback [#343](https://github.com/DouyinFE/semi-design/issues/343)

+ 25 - 0
content/start/changelog/index.md

@@ -14,7 +14,18 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
 -   修订版本号(patch):bugfix
 
 ---
+
+#### 🎉 2.1.5 (2021-12-10)
+
+- 【Fix】
+  - Timeline.time ts 定义支持 ReactNode 类型 [#359](https://github.com/DouyinFE/semi-design/issues/359) [@chenc041](https://github.com/chenc041)
+  - 修复 Tree 组件 onContextMenu 阻止冒泡的问题 [#364](https://github.com/DouyinFE/semi-design/issues/364) [@Nctdtman](https://github.com/Nctdtman)
+  - 修复 Select/Checkbox/Button 缺少 id 的问题 [#353](https://github.com/DouyinFE/semi-design/issues/353)
+  - 修复 Nav  footer、header dts定义相反了的问题
+  - 修复 Table fixed 单元格 z-index 过小问题,从 1 调整为 101 [#391](https://github.com/DouyinFE/semi-design/issues/391)
+
 #### 🎉 2.1.4 (2021-12-03)
+
 - 【Fix】
   - Checkbox onChange 回调的入参 event 增加 nativeEvent.stopImmediatePropagation [#343](https://github.com/DouyinFE/semi-design/issues/343)
   - 修复 Cascader 多选时点击 Checkbox 在某些场景下触发冒泡 [#343](https://github.com/DouyinFE/semi-design/issues/343)
@@ -26,10 +37,12 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
     - 优化卡片类型 selected+disabled 态的样式 [#319](https://github.com/DouyinFE/semi-design/issues/319) 
 
 #### 🎉 2.1.3 (2021-11-30)
+
 - 【Fix】
   - 修复在源码构建过程中,替换 ImportDeclaration 中 source 的bug
 
 #### 🎉 2.1.2 (2021-11-30)
+
 - 【Feature】
   - 支持 Next.js [#153](https://github.com/DouyinFE/semi-design/issues/153)
   - 替换飞书Logo图标
@@ -39,10 +52,12 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
   - 修复 Input focus 时 hover 态边框颜色错误问题 [#332](https://github.com/DouyinFE/semi-design/issues/332)
 
 #### 🎉 2.1.1 (2021-11-26)
+
 - 【Fix】
   - 提供 semi-icons、semi-illustrations 的 UMD 产物,解决 UMD 场景下无法使用 icon 的问题 [#215](https://github.com/DouyinFE/semi-design/issues/215)
 
 #### 🎉 2.1.0 (2021-11-26)
+
 - 【Fix】
   - 修复 Collapsible 组件在 content 有 margin 时展开/收起卡顿的问题 [@ChelesteWang](https://github.com/ChelesteWang)
 - 【Style】
@@ -53,10 +68,12 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
   - List 增加与 Checkbox、Radio、Input、Pagination 搭配使用的 Demo 示例;增加拖拽排序的Demo示例;增加键盘响应事件的 Demo 示例
 
 #### 🎉 2.1.0-beta.3 (2021-11-24)
+
 - 【Fix】
   - 更新部分组件的ts类型定义,修复 tsconfig.json 开启 strict: true 且 skipLibCheck为false时 build报错的问题 [#283](https://github.com/DouyinFE/semi-design/issues/283)
 
 #### 🎉 2.1.0-beta.1 (2021-11-24)
+
 - 【Fix】
   - Select
     - 修复虚拟化使用崩溃的问题 [#308](https://github.com/DouyinFE/semi-design/issues/308)
@@ -66,6 +83,7 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
   - 修复 Tree 的 interface ExpanedOtherProps 命名不正确的问题,将其修正为 ExpandedOtherProps [297](https://github.com/DouyinFE/semi-design/issues/297)
 
 #### 🎉 2.1.0-beta.0 (2021-11-19)
+
 - 【Feature】
   - Tabs 新增 关闭可选项 closable API [@xieyezi](https://github.com/xieyezi)
   - TagInput 新增 onKeyDown API [#255](https://github.com/DouyinFE/semi-design/issues/255)
@@ -87,10 +105,12 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.8 (2021-11-11)
+
 - 【Fix】
   - 修复 Modal afterClose 部分场景失效
 
 #### 🎉 2.0.7 (2021-11-10)
+
 - 【Fix】
   - 修复 Icon 包缺少 classnames 依赖问题 [#231](https://github.com/DouyinFE/semi-design/issues/231)
 - 【Style】
@@ -98,11 +118,13 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.6 (2021-11-10)
+
 - 【Style】
   - Table 移除固定列/固定表头时在表头插入的滚动轴列,使用 overflow-y 方案模拟滚动轴 [#164](https://github.com/DouyinFE/semi-design/issues/164)
 
 
 #### 🎉 2.0.5 (2021-11-09)
+
 - 【Style】
   - 修复 Input 组件 hover 时 border 样式问题 [#204](https://github.com/DouyinFE/semi-design/issues/204)
 - 【Perf】
@@ -118,6 +140,7 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
   - 优化了共建文档 [#224](https://github.com/DouyinFE/semi-design/issues/224) [@btea](https://github.com/btea)
 
 #### 🎉 2.0.3 (2021-11-06)
+
 - 【Fix】
   - 修复 Tree / TreeSelect 在 loading 状态下 item 高度变大的问题 [#181](https://github.com/DouyinFE/semi-design/issues/181)
   - 修复 TagInput 在 separator 不为 string 或 array 时输入值会被清空的问题 [#182](https://github.com/DouyinFE/semi-design/issues/182)
@@ -129,6 +152,7 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.2 (2021-11-04)
+
 - 【Fix】
   - 修复 Toast 的类型定义 [#166](https://github.com/DouyinFE/semi-design/issues/166)
   - 修复 Radio value / defaultValue 的类型定义,从 string 改正为 string | number [#159](https://github.com/DouyinFE/semi-design/issues/159)
@@ -146,6 +170,7 @@ Semi 版本号遵循**Semver**规范(主版本号-次版本号-修订版本号
 
 
 #### 🎉 2.0.1 (2021-11-01)
+
 - 【Fix】
   - 修复 TreeSelect 选中节点后会展开其子节点并立即关闭,造成视觉跳闪的感觉 [#78](https://github.com/DouyinFE/semi-design/issues/78)
   - 修复 Progress 组件 size 改变时渲染错误 [#94](https://github.com/DouyinFE/semi-design/issues/94)

+ 16 - 6
content/start/customize-theme/index-en-US.md

@@ -6,16 +6,25 @@ localeCode: en-US
 order: 3
 ---
 
+## 定制方式
 
+Semi provides a complete theme configuration process, which not only maintains the uniformity and coherence of colors, fonts, rounded corners, shadows, layouts, etc. in the visual language, but also meets the diversified visual needs of the business and the brand.  
+You can go to [Semi Design System Management Site](https://semi.design/dsm/) (also known as DSM) to choose or create a theme style that meets your needs.
 
-## Customization
+Currently DSM supports global and component-level style customization, and keeps synchronization between Figma and online code. **Use DSM to adapt Semi Design to Any Design**
 
-Semi provides a complete theme configuration process, which not only maintains the uniformity and coherence of colors, fonts, rounded corners, shadows, layouts, etc. in the visual language, but also meets the diversified visual needs of the business and the brand. You can go to [Semi Design System Management Site](https://semi.design/dsm/) to choose or create a theme style that meets your needs. Currently [Semi Design System Management Site](https://semi.design/dsm/) supports the configuration of theme colors, including fonts, rounded corners, etc.
+- 🎨 Global style variable management
+Supports visual editing and previewing of color wheels, rounded corners, font layout, strokes, and shadows
 
+- 🔁 Two-way synchronization of design variables
+Design variables can be synchronized in real time in both directions on the Web side and the Figma plug-in side.
+
+- 🧩 In-depth component style customization
+In-depth customization of the style of a single component, such as the style customization of the height/spacing of the component.
 
 ### Create a theme
 
-You can also start from a published theme, or choose **Create Now** to create a new theme, or you can update a published theme. After selecting the main color, our color algorithm will generate a set of highly available color wheels for you. On this basis, you can modify common variables and produce corresponding theme packages. One-click publishing can be pushed to bnpm.
+You can also start from a published theme, or choose **Create Now** to create a new theme, or you can update a published theme. After selecting the main color, our color algorithm will generate a set of highly available color wheels for you. On this basis, you can modify common variables and produce corresponding theme packages. One-click publishing can be pushed to npm.
 
 ![Theme Creation](https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_welcome.png)
 
@@ -37,17 +46,19 @@ Then you need to specify the theme to be used in the configuration file.
 
 For users who use webpack, add the `theme` parameter to SemiWebpackPlugin.
 
-SemiWebpackPlugin  `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @douyinfe/semi-webpack-plugin`
+SemiWebpackPlugin `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @douyinfe/semi-webpack-plugin`
 
 ```jsx
 new SemiWebpackPlugin({
-    theme: `Your theme npm package name`
+    theme: `Your theme npm package name`,
     /* ...options */
 });
 ```
+
 ### Make changes to component-level variables take effect
 
 If you modify the component-level variables in the process of customizing the theme, the `theme` field needs to be configured with the following configuration to make the changes take effect:
+
 ```javascript
 {
     theme: {
@@ -57,7 +68,6 @@ If you modify the component-level variables in the process of customizing the th
 }
 ```
 
-
 ## Update theme
 
 During the development of Semi, it is possible to update or add some common variables for design considerations. If you are using a customized theme, when Semi has released a new universal variable (we will mark it in the update log), we recommend that you go to [Theme Store](https://semi.design/dsm/) to regenerate the theme.

+ 16 - 5
content/start/customize-theme/index.md

@@ -6,16 +6,25 @@ localeCode: zh-CN
 order: 3
 ---
 
+## 定制方式
 
+Semi 提供完整的主题配置流程,既保持颜色、字体、圆角、阴影、布局等在视觉语言上的统一连贯,又能满足业务和品牌多样化的视觉需求。  
+你可以前往 [Semi 设计系统管理站点](https://semi.design/dsm/) (又称DSM) 选择或者创造一套符合你的需求的主题风格。
 
-## 定制方式
+目前DSM支持全局、组件级别的样式定制,并在 Figma 和线上代码之间保持同步。**使用 DSM,将 Semi Design 适配为 Any Design**
+
+- 🎨 全局样式 变量管理  
+支持色盘、圆角、字体排版、描边、阴影的可视化编辑预览  
 
-Semi 提供完整的主题配置流程,既保持颜色、字体、圆角、阴影、布局等在视觉语言上的统一连贯,又能满足业务和品牌多样化的视觉需求。你可以前往 [Semi 设计系统管理站点](https://semi.design/dsm/) 选择或者创造一套符合你的需求的主题风格。目前 [Semi 设计系统管理站点](https://semi.design/dsm/) 支持主题色的配置,包括字体、圆角、等。
+- 🔁 设计变量双向同步  
+设计变量可以在 Web 端与 Figma 插件侧双向实时同步。  
 
+- 🧩 深度的组件样式定制  
+对单个组件的样式进行深度定制,例如组件的 高度 / 间距等样式定制;  
 
 ### 创造主题
 
-你也可以从已发布的主题出发,或者选择 **立即创造** 来创造一个新的主题,也可以更新已发布的主题。选取主色后,我们的颜色算法会为你生成一套高可用的色盘。在此基础上你可以修改通用变量并产出对应的主题包。一键发布即可推送到 bnpm 中。
+你也可以从已发布的主题出发,或者选择 **立即创造** 来创造一个新的主题,也可以更新已发布的主题。选取主色后,我们的颜色算法会为你生成一套高可用的色盘。在此基础上你可以修改通用变量并产出对应的主题包。一键发布即可推送到 npm 中。
 
 ![主题创建](https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_welcome.png)
 
@@ -41,7 +50,9 @@ SemiWebpackPlugin  `yarn add -D @douyinfe/semi-webpack-plugin` or `npm i -D @dou
 
 ```jsx
 new SemiWebpackPlugin({
-    theme: `你的主题npm包名称`
+    theme: {
+        name: '你的主题npm包名称'
+    }
     /* ...options */
 });
 ```
@@ -60,5 +71,5 @@ new SemiWebpackPlugin({
 
 ## 更新主题
 
-Semi 在开发过程中,有可能出于设计考虑更新或者添加部分通用变量。如果你使用的是定制主题,当 Semi 发布了新的通用变量后(我们会在更新日志里标注),我们建议你前往 [主题商店](https://semi.design/dsm/) 重新生成该主题。
+Semi 在开发过程中,有可能出于设计考虑更新或者添加部分通用变量。如果你使用的是定制主题,当 Semi 发布了新的通用变量后(我们会在更新日志里标注),我们建议你前往 [Semi 设计系统管理站点](https://semi.design/dsm/)重新生成该主题。
 

+ 5 - 4
content/start/faq/index-en-US.md

@@ -9,10 +9,11 @@ order: 7
 
 
 
-
-#### About the release time
-
-Semi team will release the official minor version every two Fridays, and the minor beta will be released on the middle Friday
+#### What is the relationship between Semi 2.x (open source version) and Semi 1.x?
+ - The Semi v2.0 version is refactored based on v1.x using ts, which brings a better ts experience and a more out-of-the-box engineering solution, which solves the coexistence of multi-component libraries in the micro front-end scenario Style conflict issues, etc. All subsequent long-term work of the Semi team will be based on the v2.x version
+ - At present, v2.0 and v1.x will still be maintained in parallel for a period of time. Feature addition on v1.x will be gradually stopped in the future, and only necessary bug fix changes will be provided.
+ - For new projects, we recommend that you directly use 2.x [@douyin/semi-ui](https://semi.design) for development. For existing projects, we also recommend that you upgrade as soon as possible. In order to reduce the cost of upgrading, we provide a cli tool one-click migration (@ies/semi-codemod-v2) that can help you automatically complete up to 90% of the migration and modification (limited by the AST implementation principle, there are still a small number of cases that require manual labor review modification, but not much 😉)
+ - Upgrade from Semi 1.x to Semi 2.x for detailed operation steps [From v1 to v2](https://semi.design/zh-CN/start/update-to-v2)
 
 #### Relationship between versions
 

+ 24 - 19
content/start/faq/index.md

@@ -1,34 +1,38 @@
 ---
 category: 开始
-title:  FAQ 常见问题
+title: FAQ 常见问题
 icon: doc-faq
 localeCode: zh-CN
 order: 7
 ---
 
+#### Semi 2.x 与 Semi 1.x 有什么不同?
 
+-   Semi v2.0 版本 基于 v1.x 使用 ts 进行了重构,带来了更好的 ts 使用体验、以及更开箱即用的工程化方案,解决了对微前端场景下多组件库共存的样式冲突问题等。Semi 2.x 为开源版本, Semi 团队后续所有长期工作都将基于 v2.x 版本进行
+-   目前 v2.0 与 v1.x 仍将并行迭代维护一段时间,后续会逐步停止 v1.x 上的 feature 添加,仅提供必要的 bug fix 变更。
+-   我们建议大家直接使用 2.x [@douyin/semi-ui](https://semi.design) 进行开发。现有旧项目,我们也建议大家尽快进行升级。为减轻升级成本,我们提供了 cli 工具一键迁移(@ies/semi-codemod-v2 )可帮助大家自动完成高达 90%的迁移修改(受限于 AST 实现原理,仍存在一小部分 case 需人工 review 修改,但不多 😉 )
+-   Semi 1.x 升级至 Semi 2.x 详细操作步骤请查阅 [从 v1 到 v2](https://semi.design/zh-CN/start/update-to-v2)
 
-#### 关于发版时间
+#### 各版本之间的关系
 
--   Semi 团队每双周周五进行 minor 正式版发包,中间的周五会发布一次 minor beta 版
+-   Semi 版本号遵循 Semver 规范(主版本号-次版本号-修订版本号),我们会在 minor 版本新增 feature 或组件,在 patch 版本我们仅会进行 bug 修复,而不会做新功能更新。但不同 minor 版本之间可能存在样式上的调整,当你需要升级时,我们推荐你在 changelog 页面使用版本 Diff 功能,检查所有变更并确实是否对你的业务系统有影响。
+-   后续所有新 Feature、新组件都会基于 2.x 版本进行开发,我们推荐业务方尽可能地保持使用最新版本
+-   2.x 各版本之间,API 会保持**向前兼容**
+-   1.x 各版本之间,API 也会保持**向前兼容**, 1.x 后续会停止迭代。由 1.x 升级到 2.x 时,会包含 breaking change,具体升级注意事项请查阅文档
+-   0.x 版本目前已停止更新,当且仅当必须进行 bugfix 时才会进行 hotfix 更新。由 0.x 升级至 1.x 时,会包含 breaking change,具体升级注意事项请查阅文档
 
-#### 各版本之间的关系
--   Semi 版本号遵循Semver规范(主版本号-次版本号-修订版本号),我们会在minor版本新增feature或组件,在patch版本我们仅会进行bug修复,而不会做新功能更新。
--   2.x 各版本之间(即major版本号相同时),API 会保持**向前兼容**,但不同minor版本之间可能存在样式上的调整,当你需要升级时,我们推荐你在changelog页面使用版本Diff功能,检查所有变更并确实是否对你的业务系统有影响。
+#### Semi 是否支持 Tree Shaking
 
-#### Semi是否支持Tree Shaking
--  Semi执行发包时,发布的其实是esModule源码,因此天然支持tree shaking,不需要再进行额外的配置。
- -  组件的 Scss 也是由组件的index.(j|t)sx负责import的,因此样式也会shaking。简单来说,只有你使用的组件会被打包
+-   Semi 执行发包时,发布的其实是 esModule 源码,因此天然支持 tree shaking,不需要再进行额外的配置。
+-   组件的 Scss 也是由组件的 index.(j|t)sx 负责 import 的,因此样式也会 shaking。简单来说,只有你使用的组件会被打包
 
 #### 为什么 defaultValue、defaultXXX 不起作用?
 
-Semi 组件中,所有的 defaultValue、defaultXXX 传参只会在组件被 mounted 时进行消费(即仅消费一次)。如果你的 defaultXXX 属性是后期进行异步更新的,组件不会重新进行消费该值。如有需要,你应该使用受控的 value,受控的 xxx。
-或者直接通过传入一个不一样的`key`值,强制 React 重新挂载该组件。
+Semi 组件中,所有的 defaultValue、defaultXXX 传参只会在组件被 mounted 时进行消费(即仅消费一次)。如果你的 defaultXXX 属性是后期进行异步更新的,组件不会重新进行消费该值。如有需要,你应该使用受控的 value,受控的 xxx。或者直接通过传入一个不一样的`key`值,强制 React 重新挂载该组件。
 
-#### 安装新版本 Semi 后,提示 can't resolve date-fns/esm/_libs/cloneObject.js 或其他有 date-fns 相关的依赖错误
+#### 安装新版本 Semi 后,提示 can't resolve date-fns/esm/\_libs/cloneObject.js 或其他有 date-fns 相关的依赖错误
 
-检查下项目中的 package-lock.json,是否有其他包依赖了 date-fns(大概率是 1.x 的),导致 semi 依赖声明的 date-fns 2.x 没有被安装上。手动 install date-fns,确保是 2.x 版本的即可
-`npm install date-fns date-fns-tz`
+检查下项目中的 package-lock.json,是否有其他包依赖了 date-fns(大概率是 1.x 的),导致 semi 依赖声明的 date-fns 2.x 没有被安装上。手动 install date-fns,确保是 2.x 版本的即可 `npm install date-fns date-fns-tz`
 
 #### Semi 支持 i18n 吗?
 
@@ -36,8 +40,7 @@ Semi 目前支持 14 种语言,具体使用可以查阅 [Semi·LocaleProvider]
 
 #### Semi 的样式是基于 Scss 还是 Less ?为什么不用 CSS Module?
 
-我们的样式基于 Scss,与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。
-不使用 CSS Module 是因为我们希望有固定的 className,为业务方保留修改/覆盖 Semi 样式的能力(虽然不提倡,但有些业务场景下确实需要)
+我们的样式基于 Scss,与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。不使用 CSS Module 是因为我们希望有固定的 className,为业务方保留修改/覆盖 Semi 样式的能力(虽然不提倡,但有些业务场景下确实需要)
 
 #### Semi 的默认的主题风格跟我们系统的定位不符,可以配置另外的主题吗?
 
@@ -56,7 +59,9 @@ Semi 目前支持 14 种语言,具体使用可以查阅 [Semi·LocaleProvider]
 欢迎进我们的 [客服飞书 Lark 群](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe) 进行咨询提问。
 
 #### 希望自定义滚动条的样式?
-可以使用 `.semi-light-scrollbar` 类名,会对 webkit (chrome/safari) 的浏览器应用 Semi 的滚动条样式。该类名放在最外层的DOM元素即可,会对所有子元素生效。注:使用了通配符,可能会对性能有影响。其他浏览器可以参考是否有相关的css属性支持滚动条的样式定制。
 
-#### 更多的FAQ
-请查阅 https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug
+可以使用 `.semi-light-scrollbar` 类名,会对 webkit (chrome/safari) 的浏览器应用 Semi 的滚动条样式。该类名放在最外层的 DOM 元素即可,会对所有子元素生效。注:使用了通配符,可能会对性能有影响。其他浏览器可以参考是否有相关的 css 属性支持滚动条的样式定制。
+
+#### 更多的 FAQ
+
+请查阅 https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug

+ 1 - 1
content/start/introduction/index.md

@@ -26,7 +26,7 @@ Semi Design 始终致力于提升企业应用的体验。通过提炼简洁轻
 
 ![基于 Semi Design 的多元化产品与团队组件](https://lf9-static.semi.design/obj/semi-tos/images/introduction-showcase.gif)
 
-坚守优质且稳定的默认基础(不变),并在需要时充分开放自定义的灵活度(多变),这是 Semi Design 独特的,并将一直遵循的设计原则。
+**坚守优质且稳定的默认基础(不变),并在需要时充分开放自定义的灵活度(多变),这是 Semi Design 独特的,并将一直遵循的设计原则。**
 
 ### 主题化 —— 品牌一键定制