pit-docs-mcp 1.0.2

package/docs/pitElementUi/color.md

@@ -0,0 +1,244 @@
+<script>
+  import bus from '../../bus';
+  import { tintColor } from '../../color.js';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    'primary': '$--color-primary',
+    'success': '$--color-success',
+    'warning': '$--color-warning',
+    'danger': '$--color-danger',
+    'info': '$--color-info',
+    'white': '$--color-white',
+    'black': '$--color-black',
+    'textPrimary': '$--color-text-primary',
+    'textRegular': '$--color-text-regular',
+    'textSecondary': '$--color-text-secondary',
+    'textPlaceholder': '$--color-text-placeholder',
+    'borderBase': '$--border-color-base',
+    'borderLight': '$--border-color-light',
+    'borderLighter': '$--border-color-lighter',
+    'borderExtraLight': '$--border-color-extra-light'
+  };
+  const original = {
+    primary: '#409EFF',
+    success: '#67C23A',
+    warning: '#E6A23C',
+    danger: '#F56C6C',
+    info: '#909399',
+    white: '#FFFFFF',
+    black: '#000000',
+    textPrimary: '#303133',
+    textRegular: '#606266',
+    textSecondary: '#909399',
+    textPlaceholder: '#C0C4CC',
+    borderBase: '#DCDFE6',
+    borderLight: '#E4E7ED',
+    borderLighter: '#EBEEF5',
+    borderExtraLight: '#F2F6FC'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        primary: '',
+        success: '',
+        warning: '',
+        danger: '',
+        info: '',
+        white: '',
+        black: '',
+        textPrimary: '',
+        textRegular: '',
+        textSecondary: '',
+        textPlaceholder: '',
+        borderBase: '',
+        borderLight: '',
+        borderLighter: '',
+        borderExtraLight: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(original).forEach((o) => {
+            if (value[varMap[o]]) {
+              this[o] = value[varMap[o]]
+            } else {
+              this[o] = original[o]
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
+
+## Color 色彩
+
+Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
+
+### 主色
+
+Element 主要品牌颜色是鲜艳、友好的蓝色。
+
+<el-row :gutter="12">
+  <el-col :span="10" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: primary }">Brand Color
+      <div class="value">#409EFF</div>
+      <div class="bg-color-sub" :style="{ background: tintColor(primary, 0.9) }">
+        <div
+          class="bg-blue-sub-item"
+          v-for="(item, key) in Array(8)"
+          :key="key"
+          :style="{ background: tintColor(primary, (key + 1) / 10) }"
+        ></div>
+      </div>
+    </div>
+  </el-col>
+</el-row>
+
+### 辅助色
+
+除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box"
+    :style="{ background: success }"
+    >Success<div class="value">#67C23A</div>
+      <div 
+        class="bg-color-sub"
+      >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(success, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box"
+    :style="{ background: warning }"
+    >Warning<div class="value">#E6A23C</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(warning, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box"
+    :style="{ background: danger }"
+    >Danger<div class="value">#F56C6C</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(danger, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box"
+    :style="{ background: info }"
+    >Info<div class="value">#909399</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(info, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
+  </el-col>
+</el-row>
+
+### 中性色
+
+中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPrimary }"
+      >主要文字<div class="value">{{textPrimary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textRegular }"
+      >
+      常规文字<div class="value">{{textRegular}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textSecondary }"
+      >次要文字<div class="value">{{textSecondary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPlaceholder }"
+      >占位文字<div class="value">{{textPlaceholder}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderBase }"
+      >一级边框<div class="value">{{borderBase}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLight }"
+      >二级边框<div class="value">{{borderLight}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLighter }"
+      >三级边框<div class="value">{{borderLighter}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderExtraLight }"
+      >四级边框<div class="value">{{borderExtraLight}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div 
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: black }"
+      >基础黑色<div class="value">{{black}}</div></div>
+      <div
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
+      >基础白色<div class="value">{{white}}</div></div>
+      <div class="demo-color-box demo-color-box-other bg-transparent">透明<div class="value">Transparent</div>
+      </div>
+    </div>
+  </el-col>
+</el-row>

package/docs/pitElementUi/container.md

@@ -0,0 +1,240 @@
+## Container 布局容器
+用于布局的容器组件，方便快速搭建页面的基本结构：
+
+`<el-container>`：外层容器。当子元素中包含 `<el-header>` 或 `<el-footer>` 时，全部子元素会垂直上下排列，否则会水平左右排列。
+
+`<el-header>`：顶栏容器。
+
+`<el-aside>`：侧边栏容器。
+
+`<el-main>`：主要区域容器。
+
+`<el-footer>`：底栏容器。
+
+:::tip
+以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`<el-container>` 的子元素只能是后四者，后四者的父元素也只能是 `<el-container>`。
+:::
+
+### 常见页面布局
+
+:::demo
+```html
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+  <el-footer>Footer</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-container>
+      <el-main>Main</el-main>
+      <el-footer>Footer</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+    <el-footer>Footer</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+  
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+  
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### 实例
+
+:::demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>导航一</template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
+          <el-menu-item index="1-1">选项1</el-menu-item>
+          <el-menu-item index="1-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="1-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
+          <el-menu-item index="2-1">选项1</el-menu-item>
+          <el-menu-item index="2-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="2-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="2-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
+          <el-menu-item index="3-1">选项1</el-menu-item>
+          <el-menu-item index="3-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="3-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="3-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>查看</el-dropdown-item>
+          <el-dropdown-item>新增</el-dropdown-item>
+          <el-dropdown-item>删除</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>王小虎</span>
+    </el-header>
+    
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="日期" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="地址">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Container Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal |
+
+### Header Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| height | 顶栏高度 | string | — | 60px |
+
+### Aside Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| width | 侧边栏宽度 | string | — | 300px |
+
+### Footer Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| height | 底栏高度 | string | — | 60px |

package/docs/pitElementUi/custom-theme.md

@@ -0,0 +1,131 @@
+## 自定义主题
+Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
+
+### 主题编辑器
+使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。
+
+也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，在任何使用 Element 开发的网站上配置并实时预览主题。
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
+
+### 仅替换主题色
+如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
+
+使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
+
+### 在项目中改变 SCSS 变量
+Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
+```html
+/* 改变主题色变量 */
+$--color-primary: teal;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+```
+
+之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+:::tip
+需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
+:::
+
+### 命令行主题工具
+如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
+
+#### <strong>安装工具</strong>
+首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
+```shell
+npm i element-theme -g
+```
+
+安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
+```shell
+# 从 npm
+npm i element-theme-chalk -D
+
+# 从 GitHub
+npm i https://github.com/ElementUI/theme-chalk -D
+```
+
+#### <strong>初始化变量文件</strong>
+主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。
+
+```shell
+et -i [可以自定义变量文件]
+
+> ✔ Generator variables file
+```
+
+如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
+```css
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
+
+...
+```
+
+#### <strong>修改变量</strong>
+直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。
+```CSS
+$--color-primary: red;
+```
+
+#### <strong>编译主题</strong>
+保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。
+```shell
+et
+
+> ✔ build theme font
+> ✔ build element theme
+```
+### 使用自定义主题
+#### <strong>引入自定义主题</strong>
+和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。
+
+```javascript
+import '../theme/index.css'
+import ElementUI from 'element-ui'
+import Vue from 'vue'
+
+Vue.use(ElementUI)
+```
+
+#### <strong>搭配插件按需引入组件主题</strong>
+如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
+```json
+{
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "~theme"
+      }
+    ]
+  ]
+}
+```
+
+如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。