🌸 优化 progress 组件结构

example/docs/zh-CN/components/badge.md

@@ -41,9 +41,20 @@ export default {
 
 ::: table
 
-|       |      |                                               |
+| 属性  | 描述   | 可选值                                               |
 | ----- | ---- | --------------------------------------------- |
 | type  | 类型 | `dot` `rim`                                   |
 | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
 
 :::
+
+::: title 徽章插槽
+:::
+
+::: table
+
+|  插槽  | 描述  |  备注                                              |
+| ----- | ---- | --------------------------------------------- |
+| default  | 默认 |  非 `dot` 可用                                   |
+
+:::

example/docs/zh-CN/components/card.md

@@ -123,6 +123,7 @@ export default {
 
 | 插槽   | 描述     | 可选值 |
 | ------ | -------- | ------ |
+| default| 默认插槽 | --     |
 | header | 头部插槽 | --     |
 | body   | 内容插槽 | --     |
 

example/docs/zh-CN/components/icon.md

@@ -78,13 +78,16 @@ export default {
 
 <br>
 
-::: describe 在 0.2.4 版本后, 我们支持使用组件化调用的方式使用图标, 但你需要安装 `@layui/icons-vue` 库。
+::: describe 在 0.2.4 版本后, 图标支持组件化的调用方式, 首先你需要安装 `@layui/icons-vue` 依赖。
 :::
 
 ```
 npm install @layui/icons-vue
 ```
 
+::: describe 接下来, 你可以像之前使用组件一样去创建图标。
+:::
+
 ```vue
 <template>
   <!-- 组件图标 -->

example/docs/zh-CN/components/load.md

@@ -44,7 +44,7 @@ export default {
 ::: title 手动关闭
 :::
 
-::: demo
+::: demo 使用 layer.msg 创建弹出层, time 属性用于配置显示时长
 
 <template>
   <lay-button-container>

example/src/router/zh-CN.ts

@@ -271,7 +271,7 @@ const zhCN = [
       },
       {
         path: '/zh-CN/hooks',
-        redirect: '/zh-CN/hooks/useClickOutside',
+        redirect: '/zh-CN/hooks/useStarted',
         component: Hooks,
         meta: { title: 'hooks' },
         children: [

src/module/progress/index.vue

@@ -1,30 +1,41 @@
+<script lang="ts">
+export default {
+  name: "LayProgress",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps } from "vue";
+
+const props = defineProps<{
+  percent: number | string;
+  theme?: string;
+  color?: string;
+  size?: string;
+  showText?: boolean;
+  text?: string;
+}>();
+
+const styles = computed(() => {
+  return [
+    props.color ? "background-color: " + props.color : "",
+    {
+      width: props.percent + "%",
+    },
+  ];
+});
+</script>
+
 <template>
   <div class="layui-progress" :class="'layui-progress-' + size">
     <div
       class="layui-progress-bar"
       :class="'layui-bg-' + theme"
-      :style="[
+      :style="styles"
-        color ? 'background-color: ' + color : '',
-        {
-          width: percent + '%',
-        },
-      ]"
     >
       <span v-if="showText" class="layui-progress-text">
-        {{ text ? text : percent + '%' }}
+        {{ text ? text : percent + "%" }}
       </span>
     </div>
   </div>
 </template>
-<script setup name="LayProgress" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  percent: number | string
-  theme?: string
-  color?: string
-  size?: string
-  showText?: boolean
-  text?: string
-}>()
-</script>