@mc-markets/ui 1.0.93 → 1.0.95

package/QUICK_START.md

@@ -40,7 +40,11 @@ export default defineConfig({
   plugins: [
     vue(),
     Components({
-      resolvers: [McMarketsUIResolver()]
+      resolvers: [
+        McMarketsUIResolver({
+          importStyle: 'css' // 自动导入样式（包括字体图标）
+        })
+      ]
     }),
     AutoImport({
       imports: ['vue', getMcMarketsUIImports()],
@@ -50,6 +54,14 @@ export default defineConfig({
 })
 ```
 
+**注意：** 如果样式未生效，请在 `src/main.js` 中手动导入：
+
+```javascript
+import '@mc-markets/ui/dist/style.css'
+import '@mc-markets/ui/styles/font'
+import '@mc-markets/ui/styles/colorfont'
+```
+
 ### 4. 更新 TypeScript 配置（如果使用 TS）
 
 修改 `tsconfig.json`，添加生成的类型文件：

package/README.md

@@ -115,23 +115,29 @@ export default defineConfig({
 ```javascript
 import { createApp } from 'vue'
 import App from './App.vue'
-// 导入组件库样式
+
+// 导入组件库样式（必需）
 import '@mc-markets/ui/dist/style.css'
 
+// 导入字体图标样式（如果使用图标组件）
+import '@mc-markets/ui/styles/font'
+import '@mc-markets/ui/styles/colorfont'
+
 createApp(App).mount('#app')
 ```
 
-**其他样式导入方式：**
+**自动导入样式（推荐）：**
 
-```javascript
-// 方式1：导入编译后的 CSS（推荐，体积更小）
-import '@mc-markets/ui/dist/style.css'
+配置 resolver 的 `importStyle: 'css'` 后，会自动导入以下文件：
+- `@mc-markets/ui/dist/style.css` - 主样式文件
+- `@mc-markets/ui/styles/font` - 字体图标样式
+- `@mc-markets/ui/styles/colorfont` - 彩色字体图标样式
 
-// 方式2：导入 SCSS 源文件（可自定义变量）
-import '@mc-markets/ui/packages/styles/index.scss'
-
-// 方式3：通过 resolver 自动导入（会在第一个组件导入时自动引入）
-// 在 vite.config.js 中配置 importStyle: 'css'
+```javascript
+// vite.config.js
+McMarketsUIResolver({
+  importStyle: 'css'  // 自动导入所有必需的样式
+})
 ```
 
 #### 4. 配置 Webpack（Vue CLI）

package/USAGE_GUIDE.md

@@ -251,12 +251,26 @@ export default defineNuxtConfig({
 
 ### Q: 样式没有加载？
 
-**A:**
-1. 如果使用自动导入，确保 `McMarketsUIResolver` 的 `importStyle` 选项为 `true`（默认）
-2. 或者手动在 `main.js` 中导入：
-   ```javascript
-   import '@mc-markets/ui/dist/style.css'
-   ```
+**A:** 推荐使用以下方式确保样式正确加载：
+
+**方式1：手动导入（推荐，最可靠）**
+```javascript
+// main.js
+import '@mc-markets/ui/dist/style.css'
+import '@mc-markets/ui/styles/font'
+import '@mc-markets/ui/styles/colorfont'
+```
+
+**方式2：自动导入（配置 resolver）**
+```javascript
+Components({
+  resolvers: [
+    McMarketsUIResolver({
+      importStyle: 'css'  // 自动导入所有样式（主样式 + 字体图标）
+    })
+  ]
+})
+```
 
 ### Q: 如何使用 Element Plus 的原始组件？