@mc-markets/ui 1.0.91 → 1.0.93

package/dist/resolver.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @mc-markets/ui 组件解析器
+ * 用于 unplugin-vue-components 和 unplugin-auto-import
+ *
+ * 支持自动导入组件和 API
+ */
+/**
+ * 组件解析器
+ * @param {Object} options - 配置选项
+ * @param {string} options.prefix - 组件前缀，默认 'm'
+ * @param {boolean|'css'|'scss'} options.importStyle - 样式导入方式
+ *   - false: 不导入样式（需要手动导入）
+ *   - true 或 'css': 导入编译后的 CSS（推荐）
+ *   - 'scss': 导入 SCSS 源文件
+ * @returns {Object} 解析器配置
+ */
+export function McMarketsUIResolver(options?: {
+    prefix: string;
+    importStyle: boolean | "css" | "scss";
+}): any;
+/**
+ * API 自动导入配置
+ * 用于 unplugin-auto-import
+ */
+export function getMcMarketsUIImports(): {
+    '@mc-markets/ui': string[];
+};
+export default McMarketsUIResolver;
+//# sourceMappingURL=resolver.d.ts.map

package/dist/resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolver.d.ts","sourceRoot":"","sources":["../packages/resolver.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;GASG;AACH,8CAPG;IAAwB,MAAM,EAAtB,MAAM;IACwB,WAAW,EAAzC,OAAO,GAAC,KAAK,GAAC,MAAM;CAI5B,OAiFF;AAED;;;GAGG;AACH;;EA+EC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mc-markets/ui",
   "private": false,
-  "version": "1.0.91",
+  "version": "1.0.93",
   "type": "module",
   "author": "chenyu",
   "description": "Vue 3 组件库，基于 Element Plus 的自定义组件",
@@ -14,6 +14,11 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
+    "./resolver": {
+      "import": "./packages/resolver.js",
+      "require": "./packages/resolver.js",
+      "types": "./packages/resolver.d.ts"
+    },
     "./styles/index": "./packages/styles/index.scss",
     "./styles/font": "./packages/styles/font/iconfont.css",
     "./styles/colorfont": "./packages/styles/colorfont/iconfont.css",
@@ -26,13 +31,27 @@
     "packages/components",
     "packages/hooks",
     "packages/utils",
-    "README.md"
+    "packages/resolver.js",
+    "packages/resolver.d.ts",
+    "README.md",
+    "USAGE_GUIDE.md",
+    "QUICK_START.md",
+    "CHANGELOG.md",
+    "vite.config.example.js"
   ],
   "keywords": [
     "vue3",
+    "vue",
     "element-plus",
     "ui-library",
-    "components"
+    "components",
+    "auto-import",
+    "unplugin",
+    "unplugin-vue-components",
+    "unplugin-auto-import",
+    "vite",
+    "webpack",
+    "typescript"
   ],
   "license": "MIT",
   "scripts": {

package/packages/resolver.d.ts

@@ -0,0 +1,115 @@
+/**
+ * @mc-markets/ui 组件解析器类型声明
+ */
+
+/**
+ * 解析器配置选项
+ */
+export interface McMarketsUIResolverOptions {
+  /**
+   * 组件前缀
+   * @default 'm'
+   * @example 'm' -> MButton, MInput
+   */
+  prefix?: string
+  
+  /**
+   * 是否自动导入样式
+   * @default true
+   */
+  importStyle?: boolean
+}
+
+/**
+ * 组件解析结果
+ */
+export interface ComponentResolveResult {
+  /**
+   * 组件名称
+   */
+  name: string
+  
+  /**
+   * 导入路径
+   */
+  from: string
+  
+  /**
+   * 副作用导入（如样式文件）
+   */
+  sideEffects?: string
+}
+
+/**
+ * 组件解析器
+ */
+export interface Resolver {
+  type: 'component'
+  resolve: (name: string) => ComponentResolveResult | undefined
+}
+
+/**
+ * 自动导入配置
+ */
+export interface AutoImportConfig {
+  '@mc-markets/ui': string[]
+}
+
+/**
+ * 创建 McMarketsUI 组件解析器
+ * 
+ * @param options - 解析器配置选项
+ * @returns 解析器对象
+ * 
+ * @example
+ * ```ts
+ * import { McMarketsUIResolver } from '@mc-markets/ui/resolver'
+ * import Components from 'unplugin-vue-components/vite'
+ * 
+ * export default {
+ *   plugins: [
+ *     Components({
+ *       resolvers: [
+ *         McMarketsUIResolver({
+ *           prefix: 'm',
+ *           importStyle: true
+ *         })
+ *       ]
+ *     })
+ *   ]
+ * }
+ * ```
+ */
+export declare function McMarketsUIResolver(
+  options?: McMarketsUIResolverOptions
+): Resolver
+
+/**
+ * 获取 McMarketsUI 自动导入配置
+ * 
+ * @returns 自动导入配置对象
+ * 
+ * @example
+ * ```ts
+ * import { getMcMarketsUIImports } from '@mc-markets/ui/resolver'
+ * import AutoImport from 'unplugin-auto-import/vite'
+ * 
+ * export default {
+ *   plugins: [
+ *     AutoImport({
+ *       imports: [
+ *         'vue',
+ *         getMcMarketsUIImports()
+ *       ]
+ *     })
+ *   ]
+ * }
+ * ```
+ */
+export declare function getMcMarketsUIImports(): AutoImportConfig
+
+/**
+ * 默认导出解析器
+ */
+export default McMarketsUIResolver
+

package/packages/resolver.js

@@ -0,0 +1,186 @@
+/**
+ * @mc-markets/ui 组件解析器
+ * 用于 unplugin-vue-components 和 unplugin-auto-import
+ * 
+ * 支持自动导入组件和 API
+ */
+
+/**
+ * 组件解析器
+ * @param {Object} options - 配置选项
+ * @param {string} options.prefix - 组件前缀，默认 'm'
+ * @param {boolean|'css'|'scss'} options.importStyle - 样式导入方式
+ *   - false: 不导入样式（需要手动导入）
+ *   - true 或 'css': 导入编译后的 CSS（推荐）
+ *   - 'scss': 导入 SCSS 源文件
+ * @returns {Object} 解析器配置
+ */
+export function McMarketsUIResolver(options = {}) {
+  const {
+    prefix = 'm',
+    importStyle = 'css'
+  } = options
+
+  // 标记是否已导入样式（避免重复导入）
+  let styleImported = false
+
+  return {
+    type: 'component',
+    resolve: (name) => {
+      // 只处理指定前缀的组件
+      const prefixPattern = new RegExp(`^${prefix}(?:-|[A-Z])`, 'i')
+      if (!prefixPattern.test(name)) {
+        return
+      }
+
+      // 组件名映射表（处理特殊命名）
+      const componentMap = {
+        // 自定义组件
+        'MIcon': 'Icon',
+        'MButton': 'Button',
+        'MInput': 'Input',
+        'MForm': 'Form',
+        'MFormItem': 'FormItem',
+        'MTooltip': 'Tooltip',
+        'MSelect': 'Select',
+        'MOption': 'Option',
+        'MOptionGroup': 'OptionGroup',
+        'MPagination': 'Pagination',
+        'MRadio': 'Radio',
+        'MRadioGroup': 'RadioGroup',
+        'MRadioButton': 'RadioButton',
+        'MSwitch': 'Switch',
+        'MTag': 'Tag',
+        'MAlert': 'Alert',
+        'MDialog': 'Dialog',
+        'MNotification': 'Notification',
+        'MMessage': 'Message',
+        'MNotifiMessage': 'NotifiMessage',
+        'MDatePicker': 'DatePicker',
+        'MEmpty': 'Empty',
+        'MTable': 'Table',
+        'MTableColumn': 'TableColumn',
+        'MBanner': 'Banner',
+        'MTabs': 'Tabs',
+        'MTabPane': 'TabPane',
+        'MTabCard': 'TabCard',
+        'MTabCardItem': 'TabCardItem',
+        'MBreadcrumb': 'Breadcrumb',
+        'MBreadcrumbSeparator': 'BreadcrumbSeparator',
+      }
+
+      // 检查是否是已定义的组件
+      const componentName = componentMap[name]
+      
+      if (componentName || name.startsWith('M')) {
+        // 确定样式文件路径
+        let sideEffects
+        
+        if (importStyle && !styleImported) {
+          if (importStyle === 'scss') {
+            sideEffects = '@mc-markets/ui/packages/styles/index.scss'
+          } else if (importStyle === true || importStyle === 'css') {
+            sideEffects = '@mc-markets/ui/dist/style.css'
+          }
+          styleImported = true
+        }
+        
+        // 返回组件导入配置
+        return {
+          name,
+          from: '@mc-markets/ui',
+          sideEffects
+        }
+      }
+    }
+  }
+}
+
+/**
+ * API 自动导入配置
+ * 用于 unplugin-auto-import
+ */
+export function getMcMarketsUIImports() {
+  return {
+    '@mc-markets/ui': [
+      // 组件
+      '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',
+      
+      // API 方法
+      'Message',
+      'NotifiMessage',
+      'MMessageBox',
+      
+      // 工具函数
+      'addOverrideClass',
+      'addComponentOverride',
+      'applyGlobalOverride',
+      'forceRefreshStyles',
+      'createOverrideComponent',
+      'checkComponentRegistration',
+      
+      // Element Plus 转换组件
+      'MButtonGroup',
+      'MCarousel',
+      'MCarouselItem',
+      'MCascader',
+      'MCascaderPanel',
+      'MCheckTag',
+      'MCalendar',
+      'MTimePicker',
+      'MDateTimePicker',
+      'MColorPicker',
+      'MTransfer',
+      'MTree',
+      'MTreeSelect',
+      'MUpload',
+      'MImage',
+      'MImageViewer',
+      'MBacktop',
+      'MInfiniteScroll',
+      'MAffix',
+      'MScrollbar',
+      'MResult',
+      'MSkeleton',
+      'MLoading',
+      'MSpinner',
+      'MProgress',
+      'MBadge',
+      'MAvatar',
+      'MConfigProvider'
+    ]
+  }
+}
+
+// 默认导出解析器
+export default McMarketsUIResolver
+

package/vite.config.example.js

@@ -0,0 +1,161 @@
+/**
+ * 这是一个使用 @mc-markets/ui 的 Vite 配置示例
+ * 包含了自动按需导入的完整配置
+ * 
+ * 使用方法：
+ * 1. 复制此文件并重命名为 vite.config.js
+ * 2. 安装必要的依赖：
+ *    npm install -D unplugin-auto-import unplugin-vue-components
+ * 3. 根据你的项目需求调整配置
+ */
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { McMarketsUIResolver, getMcMarketsUIImports } from '@mc-markets/ui/resolver'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    
+    /**
+     * 自动导入组件
+     * 配置后可以直接在模板中使用组件，无需手动导入
+     */
+    Components({
+      resolvers: [
+        McMarketsUIResolver({
+          // 组件前缀，默认为 'm'
+          // 例如：MButton, MInput, m-button, m-input
+          prefix: 'm',
+          
+          // 是否自动导入样式，默认为 true
+          // 设置为 true 时会自动导入组件库的样式文件
+          importStyle: true
+        })
+      ],
+      
+      // 生成组件类型声明文件的路径
+      // TypeScript 项目推荐开启
+      dts: 'src/components.d.ts',
+      
+      // 自动导入的本地组件目录
+      // 配置后，这些目录下的组件也会自动导入
+      dirs: ['src/components'],
+      
+      // 组件的有效文件扩展名
+      extensions: ['vue'],
+      
+      // 是否深度搜索子目录
+      deep: true,
+      
+      // 包含的文件匹配模式
+      include: [/\.vue$/, /\.vue\?vue/],
+      
+      // 排除的文件匹配模式
+      exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
+    }),
+    
+    /**
+     * 自动导入 API
+     * 配置后可以直接使用 Vue API 和组件库 API，无需手动导入
+     */
+    AutoImport({
+      imports: [
+        // 自动导入 Vue 相关函数
+        'vue',
+        
+        // 如果使用 Vue Router，可以取消下面这行的注释
+        // 'vue-router',
+        
+        // 如果使用 Pinia，可以取消下面这行的注释
+        // 'pinia',
+        
+        // 自动导入 @mc-markets/ui 的 API
+        // 包括：Message, NotifiMessage, MMessageBox 等
+        getMcMarketsUIImports()
+      ],
+      
+      // 生成 API 类型声明文件的路径
+      // TypeScript 项目推荐开启
+      dts: 'src/auto-imports.d.ts',
+      
+      // 自动导入的本地目录
+      // dirs: ['src/composables', 'src/utils'],
+      
+      // 为 ESLint 生成配置文件
+      eslintrc: {
+        enabled: true, // 首次运行时设为 true，生成后可改为 false
+        filepath: './.eslintrc-auto-import.json',
+        globalsPropValue: true,
+      },
+      
+      // 自动导入的类型
+      // resolvers: [],
+    })
+  ],
+  
+  /**
+   * 开发服务器配置
+   */
+  server: {
+    port: 3000,
+    open: true,
+    cors: true,
+  },
+  
+  /**
+   * 构建配置
+   */
+  build: {
+    // 目标浏览器
+    target: 'es2015',
+    
+    // 是否生成 source map
+    sourcemap: false,
+    
+    // chunk 大小警告的限制
+    chunkSizeWarningLimit: 1500,
+    
+    // rollup 配置
+    rollupOptions: {
+      output: {
+        // 分包策略
+        manualChunks: {
+          // 将 Vue 相关的包打包在一起
+          vue: ['vue', 'vue-router'],
+          
+          // 将 @mc-markets/ui 和 Element Plus 打包在一起
+          'ui-vendor': ['@mc-markets/ui', 'element-plus'],
+        }
+      }
+    }
+  },
+  
+  /**
+   * CSS 相关配置
+   */
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // 自动导入全局 SCSS 变量和 mixins
+        additionalData: `
+          // 如果需要自定义样式变量，可以在这里导入
+          // @import "@/styles/variables.scss";
+        `
+      }
+    }
+  },
+  
+  /**
+   * 路径别名配置
+   */
+  resolve: {
+    alias: {
+      '@': '/src',
+      // 如果需要其他别名，可以在这里添加
+    }
+  }
+})
+