m8-mcp-server 1.0.0

package/dist/data/m8mpdoc-develop/012-Mock/347/232/204/344/275/277/347/224/250/Mock/347/232/204/344/275/277/347/224/250.md

@@ -0,0 +1,116 @@
+# Mock 的使用
+
+## 前言
+
+    在跨端框架中，为了支持跨平台小程序使用，使用`better-mock`库代替了mockjs库，使用方法保持一致。
+
+`Mock.js` 是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发。提供了以下模拟功能：
+
+- 根据数据模板生成模拟数据
+- 模拟 `Ajax` 请求，生成并返回模拟数据
+
+`Mock` 的具体使用方法可参照 [Mock.js 官方文档](http://mockjs.com/0.1/ 'Mock.js官方文档')
+
+## 配置开启
+
+需要`mock`数据时，在框架 `ejs.m8.project -> src -> shared` 文件夹下的 `config.js` 配置文件中设置 `isMock` 字段为 `true`，框架会自动开启 `Mock` 的功能。
+
+```js
+export default {
+    ...
+    /**
+     * 是否进行mock模拟数据请求
+     * 仅在debug模式下有效
+     */
+    isMock: true,
+    ...
+};
+```
+
+___
+
+支持在pages下的每个模块下定义mock.js文件，框架将会自动引入定义的mock.js文件
+
+
+## 文件位置
+
+```
+ejs.m8.project
+    ├── src
+    │   ├── pages
+    │   │   ├── [module_name]                 // 以模块名命名的文件夹
+    │   │   │       ├── css                   // 当前模块下的css样式目录
+    │   │   │       ├── images                // 当前模块下的图片资源目录
+    │   │   │       ├── [module_name_A].vue   // 模块单文件组件
+    │   │   │       ├── [module_name_B].vue   // 模块单文件组件
+    │   │   │       ├── [module_name_C].vue   // 模块单文件组件
+    │   │   │       ├── router.js             // 此模块对应的路由定义
+    │   │   │       ├── store.js              // 此模块对应的状态管理定义
+    │   │   │       ├── mock.js               // v8.2.15版本支持，此模块对应的mock管理定义
+```
+
+## mock.js文件示例
+示例一
+
+```js
+import Mock from '@mock'; // 与M8.2应用不同，跨端中通过重新定义别名引用。注意引用的名称为 @mock
+export default [
+    {
+        // 接口地址
+        methodUrl: '/rest/mock/test',
+        // 入参
+        input: {
+            guid: ''
+        },
+        // 出参
+        output: Mock.mock({
+            info: {
+                title: Mock.Random.csentence(5, 10), // 随机生成一段中文文本。
+                data: Mock.Random.csentence(25, 30)
+            }
+        })
+    }
+];
+```
+导出resultData数组，每个元素为一个mock数据对象，其中包含以下属性：
+
+- methodUrl：用于匹配mock的接口地址
+- input: 入参
+- output: 用于模拟的出参mock数据
+
+经过以上步骤模拟好请求后，在应用中请求相应接口就会接收到对应的模拟数据（框架中已封装好`axios`），例如：
+
+```js
+Util.ajax({
+    url: `${Config.serverUrl}/rest/mock/test`,
+    data: {
+        params: JSON.stringify({
+            guid: id
+        })
+    }
+})
+    .then(result => {
+        if (result && result.status && result.status.code === 1) {
+            console.log(result);
+        }
+    })
+    .catch(err => {
+        console.error(err);
+    });
+```
+
+控制台打印：
+
+```js
+{
+    custom: {
+        info: {
+            data: "元府连度圆委象比做县接南条系区集根标式状节温打水院集。",
+            title: "包近际计包院主于。"
+        }
+    },
+    status: {
+        code: 1
+    }
+}
+```

package/dist/data/standards/css-style.md

@@ -0,0 +1,531 @@
+# CSS/SCSS 编码规范
+
+<!-- id: css-style -->
+<!-- category: css -->
+<!-- version: 1.1.0 -->
+<!-- lastUpdated: 2024-12-19 -->
+
+本规范定义了 M8 框架项目中 CSS/SCSS 的编码标准。
+
+## 样式变量管理
+
+### 使用 SASS 变量统一管理颜色和样式
+
+整体风格（颜色、字体、间距等）必须使用 SASS 变量统一管理，禁止在代码中硬编码颜色值。
+
+```scss
+// ✅ 正确 - 在 variables.scss 中定义
+// 主题色
+$color-primary: #1890ff;
+$color-success: #52c41a;
+$color-warning: #faad14;
+$color-error: #ff4d4f;
+
+// 文字颜色
+$color-text-primary: #333;
+$color-text-secondary: #666;
+$color-text-placeholder: #999;
+
+// 背景色
+$color-bg-base: #fff;
+$color-bg-gray: #f5f5f5;
+
+// 边框色
+$color-border: #e8e8e8;
+
+// 字体大小
+$font-size-xs: 10px;
+$font-size-sm: 12px;
+$font-size-base: 14px;
+$font-size-lg: 16px;
+$font-size-xl: 18px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 使用变量
+.button {
+  background-color: $color-primary;
+  color: $color-text-primary;
+  font-size: $font-size-base;
+  padding: $spacing-sm $spacing-md;
+}
+
+// ❌ 错误 - 硬编码颜色值
+.button {
+  background-color: #1890ff;
+  color: #333333;
+}
+```
+
+## 命名规范
+
+### BEM 命名规范
+
+推荐使用 BEM (Block Element Modifier) 命名规范，但需结合项目实际情况。
+
+- 块 (Block): `block`
+- 元素 (Element): `block__element`
+- 修饰符 (Modifier): `block--modifier`
+
+```css
+.card {
+}
+.card__header {
+}
+.card__header--active {
+}
+```
+
+### 采用模块化命名方式
+
+使用大的框架命名，如 header/footer/wrapper/left/right 等。
+
+```css
+/* ✅ 正确 - 框架命名 */
+.header {
+}
+.footer {
+}
+.wrapper {
+}
+.sidebar_left {
+}
+.sidebar_right {
+}
+.main_content {
+}
+
+/* ✅ 正确 - 模块化命名 */
+.user_card {
+}
+.user_card_header {
+}
+.user_card_body {
+}
+.nav_menu {
+}
+.nav_menu_item {
+}
+```
+
+### 类名使用小写英文、数字和下划线组合
+
+样式名称由小写英文、数字和下划线组合命名，避免使用中文拼音，命名要语义化、简明化。
+
+```css
+/* ✅ 正确 */
+.page_header {
+}
+.nav_item {
+}
+.btn_primary {
+}
+.list_item_1 {
+}
+.user_avatar {
+}
+
+/* ❌ 错误 - 使用中文拼音 */
+.yonghu_touxiang {
+}
+.daohang_liebiao {
+}
+
+/* ❌ 错误 - 使用驼峰命名 */
+.pageHeader {
+}
+.navItem {
+}
+
+/* ❌ 错误 - 命名不语义化 */
+.a1 {
+}
+.box1 {
+}
+.div2 {
+}
+```
+
+### 样式穿透 (Deep Selectors)
+
+- **Vue2**: 使用 `::v-deep` 代替 `/deep/` (已废弃)。
+- **Vue3**: 官方推荐使用 `:deep()` 选择器。
+
+**注意**：使用 `::v-deep` 或者 `:deep()` 在对组件样式穿透后，禁止结合 BEM 后缀选择器（如 `&__title`），因为 Sass 无法正确编译。
+
+解决方式 1：分开写选择器
+
+```scss
+:deep(.em-cell) {
+  // .em-cell 的样式
+}
+
+:deep(.em-cell__title) {
+  // .em-cell__title 的样式
+}
+```
+
+解决方式 2：使用 Sass 的 `@at-root` 指令
+
+```scss
+:deep(.em-cell) {
+  @at-root {
+    #{&}__title {
+      // 你的样式
+    }
+  }
+}
+```
+
+## 选择器规范
+
+### 避免使用 ID 选择器
+
+ID 选择器优先级过高，不利于样式复用和覆盖。
+
+```css
+/* ✅ 正确 */
+.header {
+}
+.main_content {
+}
+
+/* ❌ 错误 */
+#header {
+}
+#main_content {
+}
+```
+
+### 尽量少使用标签选择器
+
+```css
+/* ✅ 正确 */
+.nav_link {
+}
+.list_item {
+}
+
+/* ❌ 错误 - 直接使用标签选择器 */
+a {
+}
+li {
+}
+div {
+}
+```
+
+### 尽量少使用通配符选择器
+
+```css
+/* ❌ 错误 */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* ✅ 正确 - 使用 reset 或 normalize */
+html,
+body,
+div,
+span,
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+  padding: 0;
+}
+```
+
+### 多选择器情况，每个选择器单独占一行
+
+```css
+/* ✅ 正确 */
+.header,
+.footer,
+.sidebar {
+  padding: 16px;
+}
+
+/* ❌ 错误 */
+.header,
+.footer,
+.sidebar {
+  padding: 16px;
+}
+```
+
+### 选择器嵌套不超过 3 层
+
+过深的嵌套会增加选择器优先级，降低性能。
+
+```scss
+/* ✅ 正确 */
+.card {
+  .card_header {
+    .card_title {
+    }
+  }
+}
+
+/* ❌ 错误 */
+.page {
+  .content {
+    .card {
+      .card_header {
+        .card_title {
+        }
+      }
+    }
+  }
+}
+```
+
+## 属性书写规范
+
+### CSS 推荐书写顺序
+
+按以下顺序排列 CSS 属性：
+
+1. 位置属性 (position, top, right, z-index, display, float 等)
+2. 大小 (width, height, padding, margin)
+3. 文字系列 (font, line-height, letter-spacing, color, text-align 等)
+4. 背景 (background, border 等)
+5. 其他 (animation, transition 等)
+
+```css
+/* ✅ 正确 */
+.element {
+  /* 1. 位置属性 */
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  float: left;
+
+  /* 2. 大小 */
+  width: 100%;
+  height: 50px;
+  padding: 16px;
+  margin: 0 auto;
+
+  /* 3. 文字系列 */
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: 1px;
+  color: #333;
+  text-align: center;
+
+  /* 4. 背景 */
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
+
+  /* 5. 其他 */
+  cursor: pointer;
+  animation: fadeIn 0.3s;
+  transition: all 0.3s;
+}
+```
+
+### 使用 position 定位时，必须加上 z-index
+
+```css
+/* ✅ 正确 */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+}
+
+/* ❌ 错误 - 缺少 z-index */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+```
+
+### 16 进制颜色值可缩写时必须缩写
+
+当设置的颜色是 16 进制的色彩值时，如果每两位的值相同，必须缩写。
+
+```css
+/* ✅ 正确 */
+.text {
+  color: #333;
+  background: #fff;
+  border-color: #eee;
+}
+
+/* ❌ 错误 */
+.text {
+  color: #333333;
+  background: #ffffff;
+  border-color: #eeeeee;
+}
+```
+
+### 避免为 0 值指定单位
+
+```css
+/* ✅ 正确 */
+.element {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* ❌ 错误 */
+.element {
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
+```
+
+## 代码整洁
+
+### 删除冗余代码
+
+CSS 文件中的冗余代码必须删除，包括：
+
+- 未使用的样式规则
+- 重复的属性声明
+- 被注释掉的旧代码
+- 空的样式规则
+
+```css
+/* ❌ 错误 - 冗余代码 */
+.button {
+  color: red;
+  color: blue; /* 重复声明 */
+}
+
+/* .old_button { } */ /* 注释掉的旧代码 */
+
+.empty {
+} /* 空规则 */
+
+/* ✅ 正确 */
+.button {
+  color: blue;
+}
+```
+
+## SCSS 规范
+
+### 变量命名
+
+使用有意义的变量名，遵循 `$组件-属性-状态` 的命名模式。
+
+```scss
+/* ✅ 正确 */
+$color-primary: #1890ff;
+$color-success: #52c41a;
+$font-size-base: 14px;
+$btn-padding-horizontal: 16px;
+
+/* ❌ 错误 */
+$blue: #1890ff;
+$c1: #52c41a;
+$fs: 14px;
+```
+
+### Mixin 使用
+
+复用的样式块应该抽取为 mixin。
+
+```scss
+/* ✅ 正确 */
+@mixin ellipsis($lines: 1) {
+  @if $lines == 1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.title {
+  @include ellipsis(2);
+}
+```
+
+## 响应式设计
+
+### 使用移动优先策略
+
+```scss
+/* ✅ 正确 - 移动优先 */
+.container {
+  padding: 16px;
+
+  @media (min-width: 768px) {
+    padding: 24px;
+  }
+
+  @media (min-width: 1024px) {
+    padding: 32px;
+  }
+}
+
+/* ❌ 错误 - 桌面优先 */
+.container {
+  padding: 32px;
+
+  @media (max-width: 1024px) {
+    padding: 24px;
+  }
+
+  @media (max-width: 768px) {
+    padding: 16px;
+  }
+}
+```
+
+## 反模式
+
+### 避免使用 !important
+
+```css
+/* ❌ 错误 */
+.button {
+  color: red !important;
+}
+
+/* ✅ 正确 - 提高选择器优先级 */
+.page .button {
+  color: red;
+}
+```
+
+### 避免使用内联样式
+
+```html
+<!-- ❌ 错误 -->
+<div style="color: red; font-size: 14px;">内容</div>
+
+<!-- ✅ 正确 -->
+<div class="highlight_text">内容</div>
+```