pit-docs-mcp 1.0.2

package/docs/pitElementUi/badge.md

@@ -0,0 +1,120 @@
+## Badge 标记
+
+出现在按钮、图标旁的数字或状态标记。
+
+### 基础用法
+展示新消息数量。
+
+:::demo 定义`value`属性，它接受`Number`或者`String`。
+
+```html
+<el-badge :value="12" class="item">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="3" class="item">
+  <el-button size="small">回复</el-button>
+</el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">回复</el-button>
+</el-badge>
+
+<el-dropdown trigger="click">
+  <span class="el-dropdown-link">
+    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item class="clearfix">
+      评论
+      <el-badge class="mark" :value="12" />
+    </el-dropdown-item>
+    <el-dropdown-item class="clearfix">
+      回复
+      <el-badge class="mark" :value="3" />
+    </el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### 最大值
+可自定义最大值。
+
+:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
+
+```html
+<el-badge :value="200" :max="99" class="item">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="100" :max="10" class="item">
+  <el-button size="small">回复</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### 自定义内容
+可以显示数字以外的文本内容。
+
+:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
+
+```html
+<el-badge value="new" class="item">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge value="hot" class="item">
+  <el-button size="small">回复</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### 小红点
+以红点的形式标注需要关注的内容。
+
+:::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。
+
+```html
+<el-badge is-dot class="item">数据查询</el-badge>
+<el-badge is-dot class="item">
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|------------- |---------------- |---------------- |---------------------- |-------- |
+| value        | 显示值           | string, number  |          —            |    —    |
+| max          | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
+| is-dot       | 小圆点           | boolean         |         —             |  false  |
+| hidden       | 隐藏 badge       | boolean         |         —             |  false  |
+| type         | 类型             | string          | primary / success / warning / danger / info |    —    |

package/docs/pitElementUi/base-tabs.md

@@ -0,0 +1,73 @@
+## BaseTabs 用于FormBase选项卡切换
+
+用于FormBase选项卡切换，用于点击切换不同功能状态。
+
+:::demo 定义`value`属性，它接受`Number`或者`String`。
+
+```html
+<el-base-tabs
+    style="height: 500px;"
+    v-model="activeName"
+    :tab-list-data="tabListData">1</el-base-tabs>
+
+<script>
+    export default {
+        data() {
+            return {
+                activeName: 'loginLog',
+                tabListData: [
+                    {
+                        label: "登录日志",
+                        name: 'loginLog',
+                    },
+                    {
+                        label: "请求日志",
+                        name: "requestLog",
+                    },
+                    {
+                        label: "异常日志",
+                        name: 'errorLog',
+                    },
+                ],
+            };
+        }
+    };
+</script>
+```
+:::
+
+
+:::demo 定义`value`属性，它接受`Number`或者`String`。
+
+```html
+<el-base-tabs
+    style="height: 500px;"
+    v-model="activeName"
+    noCard
+    :tab-list-data="tabListData">1</el-base-tabs>
+
+<script>
+    export default {
+        data() {
+            return {
+                activeName: 'loginLog',
+                tabListData: [
+                    {
+                        label: "登录日志",
+                        name: 'loginLog',
+                    },
+                    {
+                        label: "请求日志",
+                        name: "requestLog",
+                    },
+                    {
+                        label: "异常日志",
+                        name: 'errorLog',
+                    },
+                ],
+            };
+        }
+    };
+</script>
+```
+:::

package/docs/pitElementUi/border.md

@@ -0,0 +1,135 @@
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    '$--box-shadow-light': 'boxShadowLight',
+    '$--box-shadow-base': 'boxShadowBase',
+    '$--border-radius-base': 'borderRadiusBase',
+    '$--border-radius-small': 'borderRadiusSmall'
+  };
+  const original = {
+    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
+    borderRadiusBase: '4px',
+    borderRadiusSmall: '2px'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        boxShadowLight: '',
+        boxShadowBase: '',
+        borderRadiusBase: '',
+        borderRadiusSmall: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(varMap).forEach((c) => {
+            if (value[c]) {
+              this[varMap[c]] = value[c]
+            } else {
+              this[varMap[c]] = original[varMap[c]]
+            }
+          });
+        }
+      }
+    }
+  }
+</script>
+
+## Border 边框
+
+我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
+
+### 边框
+
+我们提供了以下几种边框样式，以供选择。
+
+<table class="demo-border">
+  <tbody>
+    <tr>
+      <td class="text">名称</td>
+      <td class="text">粗细</td>
+      <td class="line">举例</td>
+    </tr>
+    <tr>
+      <td class="text">实线</td>
+      <td class="text">1px</td>
+      <td class="line">
+        <div></div>
+      </td>
+    </tr>
+    <tr>
+      <td class="text">虚线</td>
+      <td class="text">2px</td>
+      <td class="line">
+        <div class="dashed"></div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### 圆角
+
+我们提供了以下几种圆角样式，以供选择。
+
+<el-row :gutter="12" class="demo-radius">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">无圆角</div>
+    <div class="value">border-radius: 0px</div>
+    <div class="radius"></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">小圆角</div>
+    <div class="value">border-radius: {{borderRadiusSmall}}</div>
+    <div 
+      class="radius" 
+      :style="{ borderRadius: borderRadiusSmall }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">大圆角</div>
+    <div class="value">border-radius: {{borderRadiusBase}}</div>
+    <div 
+      class="radius"
+      :style="{ borderRadius: borderRadiusBase }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">圆形圆角</div>
+    <div class="value">border-radius: 30px</div>
+    <div class="radius radius-30"></div>
+  </el-col>
+</el-row>
+
+### 投影
+
+我们提供了以下几种投影样式，以供选择。
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowBase }"
+></div>
+<span class="demo-shadow-text">基础投影 box-shadow: {{boxShadowBase}}</span>
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowLight }"
+></div>
+<span class="demo-shadow-text">浅色投影 box-shadow: {{boxShadowLight}}</span>

package/docs/pitElementUi/breadcrumb.md

@@ -0,0 +1,44 @@
+## Breadcrumb 面包屑
+显示当前页面的路径，快速返回之前的任意页面。
+
+### 基础用法
+
+适用广泛的基础用法。
+
+:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
+
+```html
+<el-breadcrumb separator="/">
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### 图标分隔符
+
+:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Breadcrumb Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| separator | 分隔符 | string | — | 斜杠'/' |
+| separator-class | 图标分隔符 class | string | — | - |
+
+### Breadcrumb Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| to        | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
+| replace   | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |

package/docs/pitElementUi/button.md

@@ -0,0 +1,301 @@
+## Button 按钮
+常用的操作按钮。
+
+### 基础用法
+
+基础的按钮用法。
+
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
+
+```html
+<el-row>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success">成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain>朴素按钮</el-button>
+  <el-button type="primary" plain>主要按钮</el-button>
+  <el-button type="success" plain>成功按钮</el-button>
+  <el-button type="info" plain>信息按钮</el-button>
+  <el-button type="warning" plain>警告按钮</el-button>
+  <el-button type="danger" plain>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button round>圆角按钮</el-button>
+  <el-button type="primary" round>主要按钮</el-button>
+  <el-button type="success" round>成功按钮</el-button>
+  <el-button type="info" round>信息按钮</el-button>
+  <el-button type="warning" round>警告按钮</el-button>
+  <el-button type="danger" round>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
+```
+:::
+
+### 自定义按钮
+
+自定义的按钮用法。
+
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
+
+```html
+<el-row>
+    <el-button type="colour-1">自定义按钮</el-button>
+    <el-button type="colour-2">自定义按钮</el-button>
+    <el-button type="colour-3">自定义按钮</el-button>
+    <el-button type="colour-4">自定义按钮</el-button>
+    <el-button type="colour-5">自定义按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-1" round>自定义按钮</el-button>
+  <el-button type="colour-2" round>自定义按钮</el-button>
+  <el-button type="colour-3" round>自定义按钮</el-button>
+  <el-button type="colour-4" round>自定义按钮</el-button>
+  <el-button type="colour-5" round>自定义按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-1" icon="el-icon-edit" circle></el-button>
+  <el-button type="colour-2" icon="el-icon-check" circle></el-button>
+  <el-button type="colour-3" icon="el-icon-message" circle></el-button>
+  <el-button type="colour-4" icon="el-icon-star-off" circle></el-button>
+  <el-button type="colour-5" icon="el-icon-delete" circle></el-button>
+</el-row>
+```
+:::
+
+### 自定义按钮-左右渐变
+
+自定义的按钮左右渐变用法。
+
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
+
+```html
+<el-row>
+    <el-button type="colour-6">自定义按钮</el-button>
+    <el-button type="colour-7">自定义按钮</el-button>
+    <el-button type="colour-8">自定义按钮</el-button>
+    <el-button type="colour-9">自定义按钮</el-button>
+    <el-button type="colour-10">自定义按钮</el-button>
+    <el-button type="colour-11">自定义按钮</el-button>
+    <el-button type="colour-12">自定义按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-6" round>主要按钮</el-button>
+  <el-button type="colour-7" round>成功按钮</el-button>
+  <el-button type="colour-8" round>信息按钮</el-button>
+  <el-button type="colour-9" round>警告按钮</el-button>
+  <el-button type="colour-10" round>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-6" icon="el-icon-edit" circle></el-button>
+  <el-button type="colour-7" icon="el-icon-check" circle></el-button>
+  <el-button type="colour-8" icon="el-icon-message" circle></el-button>
+  <el-button type="colour-9" icon="el-icon-star-off" circle></el-button>
+  <el-button type="colour-10" icon="el-icon-delete" circle></el-button>
+</el-row>
+```
+:::
+
+### 自定义按钮-禁用效果
+
+自定义的按钮用法。
+
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
+
+```html
+<el-row>
+    <el-button type="colour-1" disabled>自定义按钮</el-button>
+    <el-button type="colour-2" disabled>自定义按钮</el-button>
+    <el-button type="colour-3" disabled>自定义按钮</el-button>
+    <el-button type="colour-4" disabled>自定义按钮</el-button>
+    <el-button type="colour-5" disabled>自定义按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-1" round disabled>自定义按钮</el-button>
+  <el-button type="colour-2" round disabled>自定义按钮</el-button>
+  <el-button type="colour-3" round disabled>自定义按钮</el-button>
+  <el-button type="colour-4" round disabled>自定义按钮</el-button>
+  <el-button type="colour-5" round disabled>自定义按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-1" icon="el-icon-edit" circle disabled></el-button>
+  <el-button type="colour-2" icon="el-icon-check" circle disabled></el-button>
+  <el-button type="colour-3" icon="el-icon-message" circle disabled></el-button>
+  <el-button type="colour-4" icon="el-icon-star-off" circle disabled></el-button>
+  <el-button type="colour-5" icon="el-icon-delete" circle disabled></el-button>
+</el-row>
+```
+:::
+
+### 自定义按钮-左右渐变-禁用效果
+
+自定义的按钮左右渐变用法。
+
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
+
+```html
+<el-row>
+    <el-button type="colour-6" disabled>自定义按钮</el-button>
+    <el-button type="colour-7" disabled>自定义按钮</el-button>
+    <el-button type="colour-8" disabled>自定义按钮</el-button>
+    <el-button type="colour-9" disabled>自定义按钮</el-button>
+    <el-button type="colour-10" disabled>自定义按钮</el-button>
+    <el-button type="colour-11" disabled>自定义按钮</el-button>
+    <el-button type="colour-12" disabled>自定义按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-6" round disabled>主要按钮</el-button>
+  <el-button type="colour-7" round disabled>成功按钮</el-button>
+  <el-button type="colour-8" round disabled>信息按钮</el-button>
+  <el-button type="colour-9" round disabled>警告按钮</el-button>
+  <el-button type="colour-10" round disabled>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button type="colour-6" icon="el-icon-edit" circle disabled></el-button>
+  <el-button type="colour-7" icon="el-icon-check" circle disabled></el-button>
+  <el-button type="colour-8" icon="el-icon-message" circle disabled></el-button>
+  <el-button type="colour-9" icon="el-icon-star-off" circle disabled></el-button>
+  <el-button type="colour-10" icon="el-icon-delete" circle disabled></el-button>
+</el-row>
+```
+:::
+
+### 禁用状态
+
+按钮不可用状态。
+
+:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
+
+```html
+<el-row>
+  <el-button type="primary" disabled>主要按钮</el-button>
+  <el-button type="success" disabled>成功按钮</el-button>
+  <el-button type="info" disabled>信息按钮</el-button>
+  <el-button type="warning" disabled>警告按钮</el-button>
+  <el-button type="danger" disabled>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain disabled>朴素按钮</el-button>
+  <el-button type="primary" plain disabled>主要按钮</el-button>
+  <el-button type="success" plain disabled>成功按钮</el-button>
+  <el-button type="info" plain disabled>信息按钮</el-button>
+  <el-button type="warning" plain disabled>警告按钮</el-button>
+  <el-button type="danger" plain disabled>危险按钮</el-button>
+</el-row>
+```
+:::
+
+### 文字按钮
+
+没有边框和背景色的按钮。
+
+:::demo
+```html
+<el-button type="text">文字按钮</el-button>
+<el-button type="text" disabled>文字按钮</el-button>
+```
+:::
+
+### 图标按钮
+
+带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
+
+:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
+
+```html
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
+<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
+```
+:::
+
+### 按钮组
+
+以按钮组的方式出现，常用于多项类似操作。
+
+:::demo 使用`<el-button-group>`标签来嵌套你的按钮。
+
+```html
+<el-button-group>
+  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
+  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+</el-button-group>
+<el-button-group>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
+</el-button-group>
+```
+:::
+
+### 加载中
+
+点击按钮后进行数据加载操作，在按钮上显示加载状态。
+
+:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
+
+```html
+<el-button type="primary" :loading="true">加载中</el-button>
+```
+:::
+
+### 不同尺寸
+
+Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-row>
+  <el-button>默认按钮</el-button>
+  <el-button size="medium">中等按钮</el-button>
+  <el-button size="small">小型按钮</el-button>
+  <el-button size="mini">超小按钮</el-button>
+</el-row>
+<el-row>
+  <el-button round>默认按钮</el-button>
+  <el-button size="medium" round>中等按钮</el-button>
+  <el-button size="small" round>小型按钮</el-button>
+  <el-button size="mini" round>超小按钮</el-button>
+</el-row>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| size     | 尺寸   | string  |   medium / small / mini            |    —     |
+| type     | 类型   | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | 是否朴素按钮   | boolean    | — | false   |
+| round     | 是否圆角按钮   | boolean    | — | false   |
+| circle     | 是否圆形按钮   | boolean    | — | false   |
+| loading     | 是否加载中状态   | boolean    | — | false   |
+| disabled  | 是否禁用状态    | boolean   | —   | false   |
+| icon  | 图标类名 | string   |  —  |  —  |
+| autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
+| native-type | 原生 type 属性 | string | button / submit / reset | button |