fix: [Typography]

rashagu · Jul 3, 2024 · 8354fe2 · 8354fe2
1 parent c4ed942
commit 8354fe2
Show file tree

Hide file tree

Showing 37 changed files with 752 additions and 452 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -104,6 +104,7 @@ export default defineConfig({
         };
       }, {});
 
+      // 使用 markdown-it 插件 jsx codeLive
       // 使用 markdown-it 插件 jsx codeLive
       md.use((md, params) => {
         // 定义一个新的代码块规则
@@ -117,7 +118,6 @@ export default defineConfig({
             return false;
           }
 
-
           let nextLine = startLine + 1;
 
           // 查找结束标记 ```
@@ -152,7 +152,8 @@ export default defineConfig({
         });
 
         // 定义渲染规则
-        md.renderer.rules.livecode = (tokens, idx) => {
+        md.renderer.rules.livecode = (tokens, idx, options, env, renderer) => {
+
           const content = tokens[idx].content.trim();
           const code = btoa(encodeURIComponent(content));
           // <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/components/" alt=""/>
@@ -161,7 +162,7 @@ export default defineConfig({
 </div>`;
         };
       }, {});
-      // 使用 markdown-it 插件 jsx codeLive
+      // 使用 markdown-it 插件 vue codeLive
       md.use((md, params) => {
         // 定义一个新的代码块规则
         md.block.ruler.before('fence', 'vue',

diff --git a/docs/src/basic/grid/index-en-US.md b/docs/src/basic/grid/index-en-US.md
@@ -22,7 +22,7 @@ Our grid system supports the Flex layout, allowing the horizontal alignment of c
 ### How to import
 
 ```jsx import
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 ```
 ### Basic Usage
 
@@ -32,7 +32,7 @@ Using a single set of Row and Col grid components, you can create a basic grid s
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid">
@@ -75,7 +75,7 @@ Dark for content area, light for spacing
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid grid-gutter">
@@ -143,7 +143,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid">
@@ -178,7 +178,7 @@ Use `row-flex` to define a Flex layout whose child elements are based on differe
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid">
@@ -229,7 +229,7 @@ import { Col, Row } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid grid-flex">
@@ -266,7 +266,7 @@ Change the sorting of elements through `order` of the Col.
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid">
@@ -286,7 +286,7 @@ Referring to Bootstrap's responsive design, preset six response sizes:`xs`, `sm`
 
 ```jsx live=true dir="column"
 
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 
 () => (
     <div className="grid">

diff --git a/docs/src/basic/grid/index.md b/docs/src/basic/grid/index.md
@@ -33,7 +33,7 @@ const { site, theme, page, frontmatter } = useData()
 ## 如何引入
 
 ```jsx import
-import { Col, Row } from '@douyinfe/semi-ui';
+import { Col, Row } from '@kousum/semi-ui-vue';
 ```
 
 ## 基础使用

diff --git a/docs/src/basic/icon/index-en-US.md b/docs/src/basic/icon/index-en-US.md
@@ -101,7 +101,7 @@ Icon component supports size, rotate, spin and other attributes
 
 ```jsx live=true
 
-import { Icon } from '@douyinfe/semi-ui';
+import { Icon } from '@kousum/semi-ui-vue';
 
 () => {
     function CustomIcon() {
@@ -134,7 +134,7 @@ If the icons provided by Semi are not enough to meet business needs, you can als
   use: ['@svgr/webpack'],
 }
 
-import { Icon } from '@douyinfe/semi-ui';
+import { Icon } from '@kousum/semi-ui-vue';
 import StarIcon from './star.svg';
 
 <Icon svg={<StarIcon />} />

diff --git a/docs/src/basic/icon/index.md b/docs/src/basic/icon/index.md
@@ -119,7 +119,7 @@ Icon组件支持size、rotate、spin等属性
 
 ```jsx live=true
 
-import { Icon } from '@douyinfe/semi-ui';
+import { Icon } from '@kousum/semi-ui-vue';
 
 () => {
     function CustomIcon() {

diff --git a/docs/src/basic/layout/index-en-US.md b/docs/src/basic/layout/index-en-US.md
@@ -28,13 +28,13 @@ brief: Used to quickly divide the overall layout of the page
 ### How to import
 
 ```jsx import
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 ```
 ### Three-section Layout
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 
 () => {
     const { Header, Footer, Content } = Layout;
@@ -59,7 +59,7 @@ import { Layout } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 
 () => {
     const { Header, Footer, Sider, Content } = Layout;
@@ -85,7 +85,7 @@ import { Layout } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 
 () => {
     const { Header, Footer, Sider, Content } = Layout;
@@ -111,7 +111,7 @@ import { Layout } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 
 () => {
     const { Header, Footer, Sider, Content } = Layout;
@@ -139,7 +139,7 @@ Six response sizes are preset in the sidebar: `xs`,`sm`,`md`,`lg`,`xl`,`xxl`. Yo
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 
 () => {
     const onbreakpoint = (screen, bool) => {
@@ -176,7 +176,7 @@ import { Layout } from '@douyinfe/semi-ui';
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
+import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@kousum/semi-ui-vue';
 import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@kousum/semi-icons-vue';
 
 () => {
@@ -271,7 +271,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
+import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@kousum/semi-ui-vue';
 import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@kousum/semi-icons-vue';
 
 () => {
@@ -394,7 +394,7 @@ import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, Ic
 
 ```jsx live=true dir="column" hideInDSM
 
-import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
+import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@kousum/semi-ui-vue';
 import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting, IconSemiLogo } from '@kousum/semi-icons-vue';
 
 () => {

diff --git a/docs/src/basic/layout/index.md b/docs/src/basic/layout/index.md
@@ -39,7 +39,7 @@ const { site, theme, page, frontmatter } = useData()
 ### 如何引入
 
 ```jsx import
-import { Layout } from '@douyinfe/semi-ui';
+import { Layout } from '@kousum/semi-ui-vue';
 ```
 
 ##### 三行布局

diff --git a/docs/src/basic/space/index-en-US.md b/docs/src/basic/space/index-en-US.md
@@ -12,13 +12,13 @@ brief: Set the spacing between components.
 ### How to import
 
 ```jsx import
-import { Space } from '@douyinfe/semi-ui';
+import { Space } from '@kousum/semi-ui-vue';
 ```
 ### Basic Usage
 
 ```jsx live=true hideInDSM
 
-import { Space, Button, Switch } from '@douyinfe/semi-ui';
+import { Space, Button, Switch } from '@kousum/semi-ui-vue';
 
 () => (
     <Space>
@@ -37,7 +37,7 @@ You can use `align` to set the alignment, optional: `start`, `center`（default
 
 ```jsx live=true hideInDSM
 
-import { Space, Button, Tag } from '@douyinfe/semi-ui';
+import { Space, Button, Tag } from '@kousum/semi-ui-vue';
 
 () => {
     const divStyle = {
@@ -83,7 +83,7 @@ You can use `spacing` to set the spacing size, optional: `tight` (8px, default),
 
 ```jsx live=true hideInDSM
 
-import { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';
+import { Space, Tabs, TabPane, Button } from '@kousum/semi-ui-vue';
 
 () => (
     <Tabs type="line">
@@ -135,7 +135,7 @@ You can use `vertical` to set whether the spacing is vertical, the default is fa
 
 ```jsx live=true hideInDSM
 
-import { Space, Button } from '@douyinfe/semi-ui';
+import { Space, Button } from '@kousum/semi-ui-vue';
 
 () => (
     <Space vertical>
@@ -153,7 +153,7 @@ When the spacing is horizontal，you can use `wrap` to set whether to wrap autom
 
 ```jsx live=true hideInDSM
 
-import { Space, Button } from '@douyinfe/semi-ui';
+import { Space, Button } from '@kousum/semi-ui-vue';
 
 () => (
     <Space wrap>

diff --git a/docs/src/basic/typography/demo/linkDemo.vue b/docs/src/basic/typography/demo/linkDemo.vue
@@ -6,12 +6,14 @@
     <Text :link="{ href: 'https://semi.design/' }">打开网站</Text>
     <br />
     <br />
-    <Text :link="{ href: 'https://semi.design/' }" :icon="IconLink" :underline="true">带下划线的网页链接</Text>
+    <Text :link="{ href: 'https://semi.design/' }" :icon="h(IconLink)" :underline="true">带下划线的网页链接</Text>
   </div>
 </template>
 
 <script setup>
 import { TypographyText } from '@kousum/semi-ui-vue';
 import { IconLink } from '@kousum/semi-icons-vue';
+import { h } from 'vue';
+
 const Text = TypographyText;
 </script>