@mc-markets/ui 1.1.5 → 1.1.7

package/RESOLVER_USAGE.md

@@ -1,286 +0,0 @@
-# @mc-markets/ui Resolver 使用指南
-
-## 什么是 Resolver？
-
-Resolver 是 `unplugin-vue-components` 的一个功能，它可以自动识别和导入组件库的组件，无需手动导入。
-
-## 安装
-
-首先，确保你已经安装了必要的依赖：
-
-```bash
-npm install @mc-markets/ui
-npm install -D unplugin-vue-components
-```
-
-## 使用方法
-
-### Vite 配置
-
-#### ES 模块方式（推荐）
-
-在你的 `vite.config.js` 或 `vite.config.ts` 中：
-
-```js
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [
-        McMarketsUiResolver({
-          importStyle: true,      // 自动导入样式
-          styleType: 'css',       // 样式类型: 'css' | 'scss'
-          fallbackToElementPlus: false  // 是否回退到 Element Plus
-        })
-      ]
-    })
-  ]
-})
-```
-
-#### CommonJS 方式
-
-如果你的配置文件使用 CommonJS 格式：
-
-```js
-const { defineConfig } = require('vite')
-const vue = require('@vitejs/plugin-vue')
-const Components = require('unplugin-vue-components/vite')
-const { McMarketsUiResolver } = require('@mc-markets/ui/resolver')
-
-module.exports = defineConfig({
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [
-        McMarketsUiResolver({
-          importStyle: true,
-          styleType: 'css'
-        })
-      ]
-    })
-  ]
-})
-```
-
-> **💡 提示**: Resolver 自动支持 ES 模块和 CommonJS 两种格式，无需额外配置。
-
-### Webpack 配置
-
-在你的 `webpack.config.js` 中：
-
-```js
-const Components = require('unplugin-vue-components/webpack')
-const { McMarketsUiResolver } = require('@mc-markets/ui/resolver')
-
-module.exports = {
-  plugins: [
-    Components({
-      resolvers: [McMarketsUiResolver()]
-    })
-  ]
-}
-```
-
-### Rollup 配置
-
-```js
-import Components from 'unplugin-vue-components/rollup'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-export default {
-  plugins: [
-    Components({
-      resolvers: [McMarketsUiResolver()]
-    })
-  ]
-}
-```
-
-## 配置选项
-
-### importStyle
-
-- **类型**: `boolean`
-- **默认值**: `true`
-- **说明**: 是否自动导入样式文件
-
-```js
-McMarketsUiResolver({
-  importStyle: true  // 会自动导入组件样式
-})
-```
-
-### styleType
-
-- **类型**: `'css' | 'scss'`
-- **默认值**: `'css'`
-- **说明**: 样式文件类型
-
-```js
-// 使用 CSS 样式（打包后的）
-McMarketsUiResolver({
-  styleType: 'css'  // 导入 @mc-markets/ui/dist/style
-})
-
-// 使用 SCSS 样式（源文件）
-McMarketsUiResolver({
-  styleType: 'scss'  // 导入 @mc-markets/ui/styles/index
-})
-```
-
-如果使用 `scss`，需要确保项目中配置了 SCSS 处理器。
-
-### fallbackToElementPlus
-
-- **类型**: `boolean`
-- **默认值**: `false`
-- **说明**: 对于未自定义的组件，是否回退到 Element Plus
-
-```js
-McMarketsUiResolver({
-  fallbackToElementPlus: true
-})
-```
-
-当设置为 `true` 时，如果使用了 `@mc-markets/ui` 未自定义的组件（如 `MCard`），会尝试从库中导入转换后的 Element Plus 组件。
-
-## 使用示例
-
-配置好 resolver 后，你可以直接在模板中使用组件，无需手动导入：
-
-```vue
-<template>
-  <div>
-    <!-- 自动导入 MButton -->
-    <m-button type="primary">主要按钮</m-button>
-    
-    <!-- 自动导入 MInput -->
-    <m-input v-model="value" placeholder="请输入" />
-    
-    <!-- 自动导入 MDialog -->
-    <m-dialog v-model="visible" title="对话框">
-      <p>对话框内容</p>
-    </m-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const value = ref('')
-const visible = ref(false)
-</script>
-```
-
-## 与其他 Resolver 一起使用
-
-你可以同时使用多个 resolver：
-
-```js
-import { defineConfig } from 'vite'
-import Components from 'unplugin-vue-components/vite'
-import {
-  McMarketsUiResolver
-} from '@mc-markets/ui/resolver'
-import {
-  ElementPlusResolver,
-  VantResolver
-} from 'unplugin-vue-components/resolvers'
-
-export default defineConfig({
-  plugins: [
-    Components({
-      resolvers: [
-        McMarketsUiResolver(),
-        ElementPlusResolver(),  // Element Plus 组件
-        VantResolver()          // Vant 组件
-      ]
-    })
-  ]
-})
-```
-
-## 支持的组件
-
-目前支持自动导入的自定义组件包括：
-
-- `MIcon` - 图标
-- `MButton` - 按钮
-- `MInput` - 输入框
-- `MForm` - 表单
-- `MFormItem` - 表单项
-- `MTooltip` - 文字提示
-- `MSelect` - 选择器
-- `MOption` - 选项
-- `MOptionGroup` - 选项组
-- `MPagination` - 分页
-- `MRadio` - 单选框
-- `MRadioGroup` - 单选框组
-- `MRadioButton` - 单选按钮
-- `MSwitch` - 开关
-- `MTag` - 标签
-- `MAlert` - 警告
-- `MDialog` - 对话框
-- `MNotification` - 通知
-- `MMessage` - 消息提示
-- `MNotifiMessage` - 通知消息
-- `MDatePicker` - 日期选择器
-- `MEmpty` - 空状态
-- `MTable` - 表格
-- `MTableColumn` - 表格列
-- `MBanner` - 横幅
-- `MTabs` - 标签页
-- `MTabPane` - 标签面板
-- `MTabCard` - 标签卡片
-- `MTabCardItem` - 标签卡片项
-- `MBreadcrumb` - 面包屑
-
-## 注意事项
-
-1. **组件前缀**: 所有组件必须使用 `M` 前缀（如 `MButton`、`MInput`）才能被 resolver 识别。
-
-2. **样式导入**: 
-   - 如果使用 `styleType: 'css'`，会导入打包后的 CSS 文件
-   - 如果使用 `styleType: 'scss'`，会导入源 SCSS 文件，需要项目支持 SCSS
-
-3. **按需加载**: Resolver 会自动实现按需加载，只导入你使用的组件。
-
-4. **类型支持**: Resolver 提供了完整的 TypeScript 类型定义。
-
-## 常见问题
-
-### Q: 组件没有被自动导入？
-
-A: 请确保：
-1. 组件名称使用了 `M` 前缀（如 `<m-button>`）
-2. Vite/Webpack 配置正确
-3. 重启开发服务器
-
-### Q: 样式没有生效？
-
-A: 请检查：
-1. `importStyle` 选项是否设置为 `true`
-2. 如果使用 `styleType: 'scss'`，确保项目配置了 SCSS 处理器
-
-### Q: 可以和 Element Plus 一起使用吗？
-
-A: 可以！你可以同时使用 `McMarketsUiResolver` 和 `ElementPlusResolver`：
-
-```js
-resolvers: [
-  McMarketsUiResolver(),
-  ElementPlusResolver()
-]
-```
-
-## 更多资源
-
-- [unplugin-vue-components 文档](https://github.com/antfu/unplugin-vue-components)
-- [@mc-markets/ui 文档](https://daboluoxigua.github.io/mc-markets-ui/)
-

package/STYLE_IMPORT_GUIDE.md

@@ -1,368 +0,0 @@
-# 样式导入指南
-
-如果使用 resolver 后组件正常显示但样式缺失，可以尝试以下几种解决方案。
-
-## 方案 1：手动导入全局样式（推荐）⭐
-
-在你的项目入口文件（如 `main.js` 或 `main.ts`）中手动导入样式：
-
-### CSS 方式
-```js
-// main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// 手动导入 @mc-markets/ui 样式
-import '@mc-markets/ui/dist/style.css'
-
-createApp(App).mount('#app')
-```
-
-### SCSS 方式
-```js
-// main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// 手动导入 @mc-markets/ui SCSS 样式
-import '@mc-markets/ui/styles/index.scss'
-
-createApp(App).mount('#app')
-```
-
-> **💡 提示**: 这是最可靠的方式，确保样式在应用启动时就被加载。
-
-## 方案 2：通过 Vite 配置导入
-
-在 `vite.config.js` 中配置：
-
-```js
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // 如果使用 SCSS
-        additionalData: `@use "@mc-markets/ui/styles/index.scss" as *;`
-      }
-    }
-  }
-})
-```
-
-或者在 CSS 中导入：
-
-```css
-/* src/style.css 或 src/main.css */
-@import '@mc-markets/ui/dist/style.css';
-```
-
-然后在 `main.js` 中导入这个 CSS 文件：
-
-```js
-import './style.css'
-```
-
-## 方案 3：修改 Resolver 配置
-
-确保 resolver 配置正确：
-
-```js
-// vite.config.js
-import Components from 'unplugin-vue-components/vite'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-export default defineConfig({
-  plugins: [
-    Components({
-      resolvers: [
-        McMarketsUiResolver({
-          importStyle: true,        // 确保为 true
-          styleType: 'css',         // 'css' 或 'scss'
-        })
-      ]
-    })
-  ]
-})
-```
-
-> **注意**: `sideEffects` 在某些版本的 unplugin-vue-components 中可能不完全支持。
-
-## 方案 4：检查 unplugin-vue-components 版本
-
-确保使用的是较新版本：
-
-```bash
-npm list unplugin-vue-components
-```
-
-如果版本低于 0.24.0，建议升级：
-
-```bash
-npm install -D unplugin-vue-components@latest
-```
-
-## 方案 5：单独导入样式到 HTML
-
-在 `index.html` 中添加：
-
-```html
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Your App</title>
-  
-  <!-- 方式 1: 如果已发布到 CDN -->
-  <!-- <link rel="stylesheet" href="https://cdn.example.com/@mc-markets/ui/dist/style.css"> -->
-  
-  <!-- 方式 2: 通过 Vite 处理（推荐） -->
-  <link rel="stylesheet" href="/node_modules/@mc-markets/ui/dist/style.css">
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-</html>
-```
-
-> **注意**: 这种方式需要确保路径正确，在生产环境可能需要调整。
-
-## 完整示例
-
-### 项目结构
-
-```
-your-project/
-├── src/
-│   ├── main.js           # 入口文件
-│   ├── App.vue
-│   └── views/
-│       └── Home.vue
-├── vite.config.js
-└── package.json
-```
-
-### main.js（推荐配置）
-
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// ✅ 方法1：直接导入 CSS（最简单）
-import '@mc-markets/ui/dist/style.css'
-
-// ✅ 方法2：导入 SCSS（需要配置 SCSS 预处理器）
-// import '@mc-markets/ui/styles/index.scss'
-
-const app = createApp(App)
-app.mount('#app')
-```
-
-### vite.config.js
-
-```js
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [
-        McMarketsUiResolver({
-          importStyle: false,  // ⚠️ 如果手动导入了样式，设为 false 避免重复
-          // importStyle: true, // 或者设为 true 尝试自动导入
-        })
-      ],
-      dts: 'src/components.d.ts'
-    })
-  ],
-  
-  // 如果使用 SCSS
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@use "sass:math";`
-      }
-    }
-  }
-})
-```
-
-### App.vue 或其他组件
-
-```vue
-<template>
-  <div class="app">
-    <h1>测试 @mc-markets/ui</h1>
-    
-    <!-- 直接使用，无需导入 -->
-    <m-button type="primary">主要按钮</m-button>
-    <m-button type="success">成功按钮</m-button>
-    
-    <m-input v-model="value" placeholder="请输入" />
-    
-    <m-select v-model="selected">
-      <m-option label="选项1" value="1" />
-      <m-option label="选项2" value="2" />
-    </m-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-// 注意：组件不需要手动导入
-
-const value = ref('')
-const selected = ref('')
-</script>
-```
-
-## 样式优先级问题
-
-如果样式导入了但效果不对，可能是优先级问题。可以尝试：
-
-### 1. 调整导入顺序
-
-```js
-// main.js
-import 'element-plus/dist/index.css'  // Element Plus 样式在前
-import '@mc-markets/ui/dist/style.css' // 自定义样式在后（优先级更高）
-```
-
-### 2. 使用 !important（不推荐）
-
-```css
-/* 在你的全局样式中 */
-.m-button {
-  /* 你的自定义样式 */
-  background-color: #409eff !important;
-}
-```
-
-### 3. 增加选择器权重
-
-```vue
-<style scoped>
-/* 增加选择器层级 */
-.app .m-button {
-  /* 你的自定义样式 */
-}
-</style>
-```
-
-## 调试技巧
-
-### 检查样式是否加载
-
-打开浏览器开发者工具：
-
-1. **Network 标签页**：查找 `style.css`，确认是否被加载
-2. **Elements 标签页**：检查 `<head>` 中是否有样式标签
-3. **Console 标签页**：查看是否有样式加载错误
-
-### 查看生成的代码
-
-检查浏览器中实际加载的代码：
-
-```js
-// 在浏览器 Console 中运行
-document.querySelectorAll('style, link[rel="stylesheet"]').forEach(el => {
-  console.log(el.outerHTML || el.textContent.substring(0, 100))
-})
-```
-
-## 常见问题
-
-### Q1: 样式完全没加载
-
-**解决方法**：
-1. 在 `main.js` 中手动导入 `import '@mc-markets/ui/dist/style.css'`
-2. 重启开发服务器
-3. 清除浏览器缓存
-
-### Q2: 部分样式不生效
-
-**解决方法**：
-1. 检查是否有 CSS 优先级冲突
-2. 确保没有被其他样式覆盖
-3. 使用浏览器开发者工具检查实际应用的样式
-
-### Q3: SCSS 导入报错
-
-**解决方法**：
-```bash
-# 确保安装了 sass
-npm install -D sass
-
-# 然后在 main.js 中导入
-import '@mc-markets/ui/styles/index.scss'
-```
-
-### Q4: 生产环境样式丢失
-
-**解决方法**：
-1. 确保在 `main.js` 中导入样式
-2. 检查 `vite.config.js` 的 build 配置
-3. 确认 `package.json` 中 `files` 字段包含样式文件
-
-## 推荐方案总结
-
-### 🌟 最佳实践（推荐）
-
-```js
-// main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// 1. 手动导入样式（最可靠）
-import '@mc-markets/ui/dist/style.css'
-
-// 2. 如果使用 Element Plus，确保顺序正确
-// import 'element-plus/dist/index.css'
-// import '@mc-markets/ui/dist/style.css'
-
-const app = createApp(App)
-app.mount('#app')
-```
-
-```js
-// vite.config.js
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    Components({
-      resolvers: [
-        McMarketsUiResolver({
-          importStyle: false  // 手动导入了，这里设为 false
-        })
-      ]
-    })
-  ]
-})
-```
-
-这样可以确保：
-- ✅ 样式一定会被加载
-- ✅ 开发和生产环境一致
-- ✅ 样式加载时机可控
-- ✅ 避免重复导入
-
-## 需要帮助？
-
-如果以上方法都不行，请检查：
-1. `@mc-markets/ui` 版本（应该是 1.1.2 或更高）
-2. 浏览器控制台是否有错误
-3. Network 标签页中样式文件的加载情况
-4. 尝试清除 `node_modules/.vite` 缓存后重启
-