@mc-markets/ui 1.1.5 → 1.1.6

package/TEST_RESOLVER.md

@@ -1,251 +0,0 @@
-# 测试 Resolver 是否工作
-
-## 快速测试步骤
-
-### 1. 在你的项目中创建测试页面
-
-在 `src/views` 或 `src/pages` 目录下创建 `TestMcUi.vue`：
-
-```vue
-<template>
-  <div class="test-mc-ui">
-    <h1>测试 @mc-markets/ui Resolver</h1>
-    
-    <!-- 使用 M 开头的组件 -->
-    <div class="test-section">
-      <h2>按钮测试</h2>
-      <m-button type="primary">主要按钮</m-button>
-      <m-button type="success">成功按钮</m-button>
-    </div>
-    
-    <div class="test-section">
-      <h2>输入框测试</h2>
-      <m-input v-model="inputValue" placeholder="测试输入" />
-      <p>值: {{ inputValue }}</p>
-    </div>
-    
-    <div class="test-section">
-      <h2>选择器测试</h2>
-      <m-select v-model="selectValue" placeholder="请选择">
-        <m-option label="选项1" value="1" />
-        <m-option label="选项2" value="2" />
-      </m-select>
-    </div>
-    
-    <div class="test-section">
-      <h2>表单测试</h2>
-      <m-form>
-        <m-form-item label="用户名">
-          <m-input v-model="username" />
-        </m-form-item>
-      </m-form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-// 注意：不需要手动导入组件，resolver 会自动处理
-// import { MButton, MInput } from '@mc-markets/ui'
-
-const inputValue = ref('')
-const selectValue = ref('')
-const username = ref('')
-</script>
-
-<style scoped>
-.test-mc-ui {
-  padding: 20px;
-}
-
-.test-section {
-  margin-bottom: 30px;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.test-section h2 {
-  margin-top: 0;
-}
-</style>
-```
-
-### 2. 访问测试页面
-
-访问这个页面后，重新检查 `components.d.ts` 文件，应该会看到类似这样的内容：
-
-```ts
-declare module 'vue' {
-  export interface GlobalComponents {
-    // ... 其他组件
-    MButton: typeof import('@mc-markets/ui')['MButton']
-    MInput: typeof import('@mc-markets/ui')['MInput']
-    MSelect: typeof import('@mc-markets/ui')['MSelect']
-    MOption: typeof import('@mc-markets/ui')['MOption']
-    MForm: typeof import('@mc-markets/ui')['MForm']
-    MFormItem: typeof import('@mc-markets/ui')['MFormItem']
-  }
-}
-```
-
-### 3. 验证自动导入
-
-如果看到上面的类型定义，说明 resolver 工作正常！你应该能够：
-
-✅ 在模板中直接使用 `<m-button>`、`<m-input>` 等组件
-✅ 无需手动 import
-✅ 组件样式自动加载
-✅ TypeScript 类型提示正常
-
-### 4. 检查配置
-
-如果没有生成类型定义，请检查你的 `vite.config.js`：
-
-```js
-import Components from 'unplugin-vue-components/vite'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-export default {
-  plugins: [
-    Components({
-      resolvers: [
-        McMarketsUiResolver({
-          importStyle: true,
-          styleType: 'css'
-        })
-      ],
-      // 确保 dts 路径正确
-      dts: 'src/components.d.ts'
-    })
-  ]
-}
-```
-
-### 5. 常见问题排查
-
-#### 问题：组件没有被识别
-
-**解决方法**：
-1. 确保组件名称使用 `M` 开头（大写）
-2. 重启开发服务器 `npm run dev`
-3. 删除 `node_modules/.vite` 缓存
-
-#### 问题：类型定义没有生成
-
-**解决方法**：
-1. 检查 `dts` 配置路径是否正确
-2. 确保 `unplugin-vue-components` 版本 >= 0.24.0
-3. 查看控制台是否有错误信息
-
-#### 问题：样式没有加载
-
-**解决方法**：
-```js
-// 手动导入样式
-import '@mc-markets/ui/dist/style'
-
-// 或者在 vite.config.js 中配置
-McMarketsUiResolver({
-  importStyle: true,
-  styleType: 'css'  // 或 'scss'
-})
-```
-
-### 6. 查看构建结果
-
-构建项目查看是否按需加载：
-
-```bash
-npm run build
-```
-
-检查 `dist` 目录，只有使用的组件会被打包进去。
-
-## 直接测试 Resolver
-
-你也可以直接测试 resolver 函数：
-
-```js
-// test-resolver.js
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-
-const resolver = McMarketsUiResolver({
-  importStyle: true,
-  styleType: 'css'
-})
-
-// 测试不同组件
-console.log('MButton:', resolver.resolve('MButton'))
-console.log('MInput:', resolver.resolve('MInput'))
-console.log('MTable:', resolver.resolve('MTable'))
-console.log('ElButton:', resolver.resolve('ElButton')) // 应该返回 undefined
-```
-
-运行：
-```bash
-node test-resolver.js
-```
-
-预期输出：
-```js
-MButton: {
-  name: 'MButton',
-  from: '@mc-markets/ui',
-  sideEffects: '@mc-markets/ui/dist/style'
-}
-MInput: {
-  name: 'MInput',
-  from: '@mc-markets/ui',
-  sideEffects: '@mc-markets/ui/dist/style'
-}
-// ...
-ElButton: undefined
-```
-
-## 支持的所有组件
-
-确保以下组件名称都是 **M 开头**（而不是 m 开头）：
-
-- `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`
-
-## 注意事项
-
-⚠️ **重要**：组件名称必须使用 PascalCase（大驼峰）格式：
-- ✅ 正确：`<MButton>` 或 `<m-button>` (在模板中会自动转换)
-- ✅ 正确：`<MFormItem>` 或 `<m-form-item>`
-- ❌ 错误：`<mButton>`
-- ❌ 错误：`<mbutton>`
-
-在 Vue 模板中，`<m-button>` 会被自动转换为 `MButton` 组件名。
-

package/vite.config.example.js

@@ -1,68 +0,0 @@
-/**
- * @mc-markets/ui Vite 配置示例
- * 
- * 这个文件展示了如何在你的项目中使用 @mc-markets/ui 和自动导入功能
- * 复制此文件并根据你的需求进行修改
- */
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import { McMarketsUiResolver } from '@mc-markets/ui/resolver'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    
-    // 自动导入 API
-    AutoImport({
-      imports: [
-        'vue',
-        'vue-router',
-        'pinia'
-      ],
-      resolvers: [
-        // Element Plus 自动导入
-        ElementPlusResolver()
-      ],
-      dts: 'src/auto-imports.d.ts',
-    }),
-    
-    // 自动导入组件
-    Components({
-      resolvers: [
-        // @mc-markets/ui 组件自动导入
-        McMarketsUiResolver({
-          importStyle: true,           // 自动导入样式
-          styleType: 'css',            // 使用 CSS 样式（或 'scss'）
-          fallbackToElementPlus: false // 不回退到 Element Plus
-        }),
-        
-        // Element Plus 组件自动导入（可选）
-        ElementPlusResolver({
-          importStyle: 'sass',
-        })
-      ],
-      dts: 'src/components.d.ts',
-    })
-  ],
-  
-  resolve: {
-    alias: {
-      '@': '/src',
-    },
-  },
-  
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // 如果使用 SCSS，可以在这里配置
-        additionalData: `@use "@mc-markets/ui/styles/variables/index.scss" as *;`
-      }
-    }
-  }
-})
-