@vue-ui-kit/ant 1.8.3 → 1.8.5

package/README.md

@@ -16,23 +16,160 @@ yarn add @vue-ui-kit/ant
 pnpm add @vue-ui-kit/ant
 ```
 
+## Quick Start
+
+### 1. Basic Usage
+
 ```ts
 /*main.ts*/
 import { createApp } from 'vue';
 import App from './App.vue';
 import Antd from 'ant-design-vue';
 import UIKit from '@vue-ui-kit/ant';
-import '@vue-ui-kit/ant/scss';
-/*Create renderer (recommended to use tsx)*/
-import { setupKit } from './setup/kit.tsx';
 
-/*Create formatter*/
-UIKit.addFormatter({
-  test: ({ row, column, cellValue }) => 'test:...' + 'field:' + column.field + '...v:' + cellvalue,
+// Import styles - choose one of the following methods:
+// Method 1: Import SCSS source files (recommended, allows variable override)
+import '@vue-ui-kit/ant/style.scss';
+
+// Method 2: Import compiled CSS file
+// import '@vue-ui-kit/ant/style.css';
+
+createApp(App).use(Antd).use(UIKit).mount('#app');
+```
+
+### 2. Configure Global Defaults
+
+```ts
+/*main.ts*/
+import { createApp } from 'vue';
+import App from './App.vue';
+import Antd from 'ant-design-vue';
+import UIKit, { setup } from '@vue-ui-kit/ant';
+import '@vue-ui-kit/ant/style.scss';
+
+// Configure global defaults
+setup({
+  form: {
+    labelCol: { span: 8 },  // Modify form label column width
+    wrapperCol: { span: 14 }, // Modify form input column width
+  },
+  grid: {
+    align: 'center',    // Set default table alignment
+    lazyReset: true,    // Don't auto-submit after reset
+    fitHeight: 200,     // Set adaptive height
+  }
 });
+
 createApp(App).use(Antd).use(UIKit).mount('#app');
 ```
 
+### 3. Alternative import methods (if main method doesn't work)
+
+If you encounter issues with the standard import, try these alternatives:
+
+```scss
+// In your main.scss file
+@import '@vue-ui-kit/ant/dist/style.scss';
+```
+
+```ts
+// Or using require in JavaScript/TypeScript
+require('@vue-ui-kit/ant/style.css');
+```
+
+### 4. For Vite users
+If using Vite, make sure your vite.config.js includes sass support:
+
+```js
+// vite.config.js
+export default {
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import '@vue-ui-kit/ant/dist/style.scss';`
+      }
+    }
+  }
+}
+```
+
+## 🎯 样式文件导入 - 故障排除指南
+
+如果遇到样式文件导入问题，请按顺序尝试以下方法：
+
+### 方法1: 标准导入（推荐）
+```typescript
+import '@vue-ui-kit/ant/style.scss';
+// 或
+import '@vue-ui-kit/ant/style.css';
+```
+
+### 方法2: 完整路径导入
+```typescript  
+import '@vue-ui-kit/ant/dist/style.scss';
+// 或
+import '@vue-ui-kit/ant/dist/style.css';
+```
+
+### 方法3: SCSS @use 语法
+```scss
+@use '@vue-ui-kit/ant/style.scss';
+// 或者使用完整路径
+@use '@vue-ui-kit/ant/dist/style.scss';
+```
+
+### 方法4: 在 style 标签中
+```vue
+<style lang="scss">
+@import '@vue-ui-kit/ant/style.scss';
+</style>
+```
+
+### 方法5: Vite 配置导入
+```javascript
+// vite.config.js
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import '@vue-ui-kit/ant/dist/style.scss';`
+      }
+    }
+  }
+})
+```
+
+### 方法6: Webpack 配置
+```javascript
+// webpack.config.js 或 vue.config.js
+module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        additionalData: `@import '@vue-ui-kit/ant/dist/style.scss';`
+      }
+    }
+  }
+}
+```
+
+### 🔧 调试步骤
+
+1. **检查包版本**: 确保使用 `@vue-ui-kit/ant@1.8.4` 或更高版本
+2. **验证文件存在**: 检查 `node_modules/@vue-ui-kit/ant/dist/` 目录下是否有 `style.scss` 和 `style.css`
+3. **检查构建工具**: 确保您的构建工具支持处理 `.scss` 文件
+4. **清除缓存**: 删除 `node_modules` 和 lock 文件后重新安装
+
+### 📦 包内容确认
+安装后可以在以下位置找到样式文件：
+```
+node_modules/@vue-ui-kit/ant/
+├── dist/
+│   ├── style.css      # 编译后的CSS
+│   └── style.scss     # SCSS源文件(已内联variables)
+└── src/packages/styles/  # 源文件(开发时参考)
+```
+
 ```tsx
 /*kit.tsx*/
 import UIKit from '@vue-ui-kit/ant';

package/dist/style.scss

@@ -1,4 +1,8 @@
-@import 'variables';
+// Variables inlined for npm distribution
+:root {
+  --p-theme-bg: #fff;
+}
+
 
 .p-pane {
   background-color: var(--p-theme-bg);

package/package.json

@@ -1,17 +1,25 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./dist/style.css",
+  "sass": "./dist/style.scss",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.js",
       "import": "./dist/es/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./style": "./dist/style.css",
     "./style.css": "./dist/style.css",
-    "./style.scss": "./dist/style.scss"
+    "./style.scss": "./dist/style.scss",
+    "./dist/style.css": "./dist/style.css",
+    "./dist/style.scss": "./dist/style.scss",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",

package/dist/variables.scss

@@ -1,3 +0,0 @@
-:root {
-  --p-theme-bg: #fff;
-}