@mc-markets/ui 1.0.0 → 1.0.2

package/README.md

@@ -1,26 +1,36 @@
-# mc-pro-ui
+# @mc-markets/ui
 
-一个功能强大的 Vue 3 UI 组件库，提供完整的 TypeScript 支持，基于 Element Plus 构建，包含专业的表格、表单、搜索等组件。
+一个功能强大的 Element Plus 完整导出包，提供所有组件、指令、服务、样式、主题和国际化支持。现已修复 Element Plus 组件自动导入问题，确保所有组件正常渲染。
 
 ## ✨ 特性
 
 - 🚀 **Vue 3 + TypeScript** - 完全支持 Vue 3 Composition API 和 TypeScript
-- 🎨 **Element Plus 集成** - 基于 Element Plus 构建，保持一致的视觉风格
-- 📊 **专业表格组件** - ProTable 支持搜索、分页、列设置、拖拽排序等
-- 🔍 **智能搜索表单** - SearchForm 支持响应式布局和多种表单控件
-- 📝 **高级表单组件** - ProForm 支持动态表单和复杂布局
-- 🎯 **响应式网格系统** - Grid 组件支持断点响应式布局
-- 🎭 **灵活对话框** - Dialog 组件支持多种配置选项
+- 🎨 **Element Plus 完整导出** - 导出所有 Element Plus 组件、指令、服务
+- 🌍 **多语言支持** - 内置 50+ 种语言包，支持国际化
+- 🎨 **主题定制** - 支持动态主题切换和暗色模式
 - 🔧 **开箱即用** - 提供完整的类型定义和示例代码
+- 📦 **轻量级** - 基于 Element Plus 构建，保持一致的视觉风格
+- 🛠️ **开发友好** - 完整的 TypeScript 支持和自动导入配置
 
 ## 📦 安装
 
 ```bash
-npm install mc-pro-ui
+npm install @mc-markets/ui
 # 或
-yarn add mc-pro-ui
+yarn add @mc-markets/ui
 # 或
-pnpm add mc-pro-ui
+pnpm add @mc-markets/ui
+```
+
+### 依赖要求
+
+```bash
+# 安装 Element Plus（必需）
+npm install element-plus
+# 或
+yarn add element-plus
+# 或
+pnpm add element-plus
 ```
 
 ## 🔧 使用
@@ -29,11 +39,14 @@ pnpm add mc-pro-ui
 
 ```typescript
 import { createApp } from 'vue'
-import mcProUi from 'mc-pro-ui'
-import 'mc-pro-ui/dist/style.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import McMarketsUI from '@mc-markets/ui'
+import '@mc-markets/ui/dist/style.css'
 
 const app = createApp(App)
-app.use(mcProUi)
+app.use(ElementPlus)
+app.use(McMarketsUI)
 app.mount('#app')
 ```
 
@@ -41,374 +54,448 @@ app.mount('#app')
 
 ```typescript
 import { createApp } from 'vue'
-import { ProTable, SearchForm, ProForm, Grid, Dialog } from 'mc-pro-ui'
-import 'mc-pro-ui/dist/style.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { ElButton, ElInput, ElTable } from '@mc-markets/ui'
+import '@mc-markets/ui/dist/style.css'
 
 const app = createApp(App)
-app.component('ProTable', ProTable)
-app.component('SearchForm', SearchForm)
-app.component('ProForm', ProForm)
-app.component('Grid', Grid)
-app.component('Dialog', Dialog)
+app.use(ElementPlus)
+app.component('ElButton', ElButton)
+app.component('ElInput', ElInput)
+app.component('ElTable', ElTable)
 app.mount('#app')
 ```
 
-## 🎯 组件使用
+### 自动导入配置（推荐）
 
-### ProTable - 专业表格组件
+如果使用 Vite，可以配置自动导入：
 
-功能强大的表格组件，支持搜索、分页、列设置、拖拽排序等。
+```typescript
+// vite.config.ts
+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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver({
+        importStyle: 'css'
+      })],
+    }),
+  ],
+})
+```
 
-```vue
-<template>
-  <ProTable
-    :columns="columns"
-    :request-api="getTableList"
-    :pagination="true"
-    :tool-button="['refresh', 'setting', 'search']"
-    @search="handleSearch"
-    @reset="handleReset"
-  >
-    <!-- 自定义表格头部 -->
-    <template #tableHeader="{ selectedList, isSelected }">
-      <el-button 
-        type="primary" 
-        :disabled="!isSelected"
-        @click="handleBatchDelete(selectedList)"
-      >
-        批量删除
-      </el-button>
-    </template>
-
-    <!-- 自定义操作列 -->
-    <template #operation="{ row }">
-      <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
-      <el-button type="danger" @click="handleDelete(row)">删除</el-button>
-    </template>
-  </ProTable>
-</template>
+然后在 `main.ts` 中：
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ProTable } from 'mc-pro-ui'
-import type { ColumnProps } from 'mc-pro-ui'
-
-// 表格列配置
-const columns: ColumnProps[] = [
-  {
-    type: 'selection',
-    width: 55,
-    align: 'center'
-  },
-  {
-    type: 'index',
-    label: '序号',
-    width: 60,
-    align: 'center'
-  },
-  {
-    prop: 'name',
-    label: '姓名',
-    search: {
-      el: 'input',
-      props: {
-        placeholder: '请输入姓名'
-      }
-    }
-  },
-  {
-    prop: 'age',
-    label: '年龄',
-    search: {
-      el: 'input-number',
-      props: {
-        placeholder: '请输入年龄'
-      }
-    }
-  },
-  {
-    prop: 'status',
-    label: '状态',
-    search: {
-      el: 'select',
-      props: {
-        placeholder: '请选择状态'
-      },
-      enum: [
-        { label: '启用', value: 1 },
-        { label: '禁用', value: 0 }
-      ]
-    },
-    tag: true
-  },
-  {
-    prop: 'operation',
-    label: '操作',
-    width: 180,
-    align: 'center',
-    fixed: 'right'
-  }
-]
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
-// 获取表格数据
-const getTableList = async (params: any) => {
-  // 模拟 API 请求
-  const response = await fetch('/api/users', { params })
-  return response.json()
-}
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
+```
 
-const handleSearch = () => {
-  console.log('搜索')
-}
+## 🚀 快速开始
 
-const handleReset = () => {
-  console.log('重置')
-}
+### 在线演示
 
-const handleEdit = (row: any) => {
-  console.log('编辑', row)
-}
+访问 [在线演示](http://localhost:5175/) 查看所有组件的实际效果。
 
-const handleDelete = (row: any) => {
-  console.log('删除', row)
-}
+### 本地演示
 
-const handleBatchDelete = (selectedList: any[]) => {
-  console.log('批量删除', selectedList)
-}
-</script>
+```bash
+# 克隆项目
+git clone https://gitee.com/daboluoxigua/npm-mc-markets-ui.git
+
+# 进入项目目录
+cd npm-mc-markets-ui
+
+# 安装依赖
+npm install
+
+# 启动演示服务器
+npm run dev
+
+# 访问 http://localhost:5173
 ```
 
-### SearchForm - 智能搜索表单
+## 🔧 问题修复
 
-响应式搜索表单组件，支持多种表单控件和布局配置。
+### Element Plus 组件导入问题
 
-```vue
-<template>
-  <SearchForm
-    :columns="searchColumns"
-    :search-param="searchParam"
-    :search-col="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }"
-    @search="handleSearch"
-    @reset="handleReset"
-  >
-    <template #searchButton>
-      <el-button type="primary" @click="handleSearch">搜索</el-button>
-      <el-button @click="handleReset">重置</el-button>
-    </template>
-  </SearchForm>
-</template>
+**问题描述：** 在之前的版本中，Element Plus 组件（如 `el-form`、`el-table` 等）无法正确自动导入，导致组件无法渲染。
 
-<script setup lang="ts">
-import { ref } from 'vue'
-import { SearchForm } from 'mc-pro-ui'
-import type { ColumnProps } from 'mc-pro-ui'
+**解决方案：**
+1. 在 `main.ts` 中显式导入 Element Plus
+2. 配置 Vite 自动导入插件
+3. 确保样式文件正确加载
+
+**修复后的配置：**
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
+```
 
-const searchParam = ref({
-  name: '',
-  age: '',
-  status: ''
+```typescript
+// vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver({
+        importStyle: 'css'
+      })],
+    }),
+  ],
 })
+```
 
-const searchColumns: ColumnProps[] = [
-  {
-    prop: 'name',
-    label: '姓名',
-    search: {
-      el: 'input',
-      props: {
-        placeholder: '请输入姓名'
-      }
-    }
-  },
-  {
-    prop: 'age',
-    label: '年龄',
-    search: {
-      el: 'input-number',
-      props: {
-        placeholder: '请输入年龄'
-      }
-    }
-  },
-  {
-    prop: 'status',
-    label: '状态',
-    search: {
-      el: 'select',
-      props: {
-        placeholder: '请选择状态'
-      },
-      enum: [
-        { label: '启用', value: 1 },
-        { label: '禁用', value: 0 }
-      ]
-    }
-  }
-]
+## 🌍 国际化支持
+
+### 支持的语言
+
+支持 50+ 种语言，包括：
+
+- **中文** - zh-cn, zh-tw
+- **英语** - en
+- **日语** - ja
+- **韩语** - ko
+- **西班牙语** - es
+- **法语** - fr
+- **德语** - de
+- **意大利语** - it
+- **葡萄牙语** - pt
+- **俄语** - ru
+- **土耳其语** - tr
+- **乌克兰语** - uk
+- **越南语** - vi
+- **泰语** - th
+- **印尼语** - id
+- **马来语** - ms
+- **荷兰语** - nl
+- **瑞典语** - sv
+- **挪威语** - no
+- **丹麦语** - da
+- **芬兰语** - fi
+- **波兰语** - pl
+- **捷克语** - cs
+- **匈牙利语** - hu
+- **罗马尼亚语** - ro
+- **斯洛伐克语** - sk
+- **斯洛文尼亚语** - sl
+- **克罗地亚语** - hr
+- **保加利亚语** - bg
+- **爱沙尼亚语** - et
+- **拉脱维亚语** - lv
+- **立陶宛语** - lt
+- **希腊语** - el
+- **希伯来语** - he
+- **阿拉伯语** - ar
+- **波斯语** - fa
+- **印地语** - hi
+- **孟加拉语** - bn
+- **泰米尔语** - ta
+- **泰卢固语** - te
+- **旁遮普语** - pa
+- **高棉语** - km
+- **老挝语** - lo
+- **缅甸语** - my
+- **阿塞拜疆语** - az
+- **哈萨克语** - kk
+- **吉尔吉斯语** - ky
+- **土库曼语** - tk
+- **蒙古语** - mn
+
+### 使用示例
 
-const handleSearch = () => {
-  console.log('搜索参数:', searchParam.value)
-}
+```typescript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import McMarketsUI, { 
+  ElementPlusLocaleZhCn, 
+  ElementPlusLocaleEn,
+  getLocale,
+  switchLocale 
+} from '@mc-markets/ui'
+
+const app = createApp(App)
+
+// 使用中文语言包
+app.use(ElementPlus, {
+  locale: ElementPlusLocaleZhCn
+})
+
+// 或者使用工具函数
+const locale = getLocale('zh-cn')
+app.use(ElementPlus, { locale })
 
-const handleReset = () => {
-  searchParam.value = {
-    name: '',
-    age: '',
-    status: ''
+app.use(McMarketsUI)
+app.mount('#app')
+```
+
+## 🎨 主题定制
+
+### 主题配置
+
+```typescript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import McMarketsUI, { themeManager } from '@mc-markets/ui'
+
+const app = createApp(App)
+
+// 设置主题
+themeManager.setTheme({
+  name: 'custom',
+  dark: false,
+  cssVars: {
+    '--el-color-primary': '#409eff',
+    '--el-color-success': '#67c23a',
+    '--el-color-warning': '#e6a23c',
+    '--el-color-danger': '#f56c6c',
+    '--el-color-info': '#909399'
   }
-}
-</script>
+})
+
+app.use(ElementPlus)
+app.use(McMarketsUI)
+app.mount('#app')
+```
+
+### 暗色模式
+
+```typescript
+import { themeManager } from '@mc-markets/ui'
+
+// 切换暗色模式
+themeManager.toggleDark()
+
+// 设置暗色模式
+themeManager.setTheme({
+  name: 'dark',
+  dark: true
+})
 ```
 
-### ProForm - 高级表单组件
+## 🎯 组件使用
 
-支持动态表单和复杂布局的表单组件。
+### 基础组件
 
 ```vue
 <template>
-  <ProForm
-    :form-json="formConfig"
-    :form-col="{ xs: 24, sm: 12, md: 8, lg: 6, xl: 4 }"
-  />
+  <div class="demo">
+    <!-- 按钮组件 -->
+    <el-button type="primary">主要按钮</el-button>
+    <el-button type="success">成功按钮</el-button>
+    <el-button type="warning">警告按钮</el-button>
+    <el-button type="danger">危险按钮</el-button>
+    <el-button type="info">信息按钮</el-button>
+    
+    <!-- 输入组件 -->
+    <el-input v-model="inputValue" placeholder="请输入内容" />
+    
+    <!-- 选择器 -->
+    <el-select v-model="selectValue" placeholder="请选择">
+      <el-option label="选项1" value="1" />
+      <el-option label="选项2" value="2" />
+    </el-select>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ProForm } from 'mc-pro-ui'
-
-const formConfig = ref({
-  config: {
-    labelWidth: '120px',
-    labelPosition: 'right'
-  },
-  fields: {
-    name: {
-      label: '姓名',
-      el: 'input',
-      props: {
-        placeholder: '请输入姓名'
-      }
-    },
-    age: {
-      label: '年龄',
-      el: 'input-number',
-      props: {
-        placeholder: '请输入年龄',
-        min: 0,
-        max: 150
-      }
-    },
-    gender: {
-      label: '性别',
-      el: 'radio-group',
-      options: [
-        { label: '男', value: 'male' },
-        { label: '女', value: 'female' }
-      ]
-    },
-    city: {
-      label: '城市',
-      el: 'select',
-      options: [
-        { label: '北京', value: 'beijing' },
-        { label: '上海', value: 'shanghai' },
-        { label: '广州', value: 'guangzhou' }
-      ]
-    }
-  }
-})
+
+const inputValue = ref('')
+const selectValue = ref('')
 </script>
 ```
 
-### Grid - 响应式网格系统
-
-基于 CSS Grid 的响应式布局系统。
+### 表格组件
 
 ```vue
 <template>
-  <Grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }" :gap="[20, 20]">
-    <GridItem v-for="i in 12" :key="i" :span="1">
-      <div class="grid-item">
-        Grid Item {{ i }}
-      </div>
-    </GridItem>
-  </Grid>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="name" label="姓名" width="120" />
+    <el-table-column prop="age" label="年龄" width="80" />
+    <el-table-column prop="email" label="邮箱" />
+    <el-table-column prop="status" label="状态" width="100">
+      <template #default="scope">
+        <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
+          {{ scope.row.status === 'active' ? '活跃' : '禁用' }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="150">
+      <template #default="scope">
+        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
+        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  
+  <el-pagination
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :page-sizes="[10, 20, 50, 100]"
+    :total="total"
+    layout="total, sizes, prev, pager, next, jumper"
+    style="margin-top: 20px; text-align: right;"
+  />
 </template>
 
 <script setup lang="ts">
-import { Grid, GridItem } from 'mc-pro-ui'
-</script>
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(100)
 
-<style scoped>
-.grid-item {
-  background: #f5f5f5;
-  padding: 20px;
-  text-align: center;
-  border-radius: 4px;
+const tableData = ref([
+  { name: '张三', age: 25, email: 'zhangsan@example.com', status: 'active' },
+  { name: '李四', age: 30, email: 'lisi@example.com', status: 'inactive' },
+  { name: '王五', age: 28, email: 'wangwu@example.com', status: 'active' }
+])
+
+const handleEdit = (row: any) => {
+  console.log('编辑', row)
 }
-</style>
-```
 
-### Dialog - 灵活对话框
+const handleDelete = (row: any) => {
+  console.log('删除', row)
+}
+</script>
+```
 
-可配置的对话框组件。
+### 表单组件
 
 ```vue
 <template>
-  <Dialog
-    v-model="dialogVisible"
-    title="用户信息"
-    width="600px"
-    :draggable="true"
-    @confirm="handleConfirm"
-  >
-    <div>对话框内容</div>
-  </Dialog>
+  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+    <el-form-item label="用户名" prop="username">
+      <el-input v-model="form.username" placeholder="请输入用户名" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="form.email" placeholder="请输入邮箱" />
+    </el-form-item>
+    <el-form-item label="性别" prop="gender">
+      <el-select v-model="form.gender" placeholder="请选择性别">
+        <el-option label="男" value="male" />
+        <el-option label="女" value="female" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="生日" prop="birthday">
+      <el-date-picker
+        v-model="form.birthday"
+        type="date"
+        placeholder="选择日期"
+        style="width: 100%;"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">提交</el-button>
+      <el-button @click="resetForm">重置</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Dialog } from 'mc-pro-ui'
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+
+const form = reactive({
+  username: '',
+  email: '',
+  gender: '',
+  birthday: ''
+})
 
-const dialogVisible = ref(false)
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ],
+  gender: [
+    { required: true, message: '请选择性别', trigger: 'change' }
+  ]
+}
 
-const handleConfirm = () => {
-  console.log('确认')
-  dialogVisible.value = false
+const submitForm = async () => {
+  try {
+    await formRef.value.validate()
+    console.log('表单提交成功！', form)
+  } catch (error) {
+    console.log('表单验证失败！')
+  }
+}
+
+const resetForm = () => {
+  formRef.value.resetFields()
 }
 </script>
 ```
 
 ## 🔧 API 配置
 
-### ProTable Props
+### 主题管理
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| columns | 列配置项 | ColumnProps[] | [] |
-| data | 静态表格数据 | any[] | - |
-| requestApi | 请求表格数据的 API | Function | - |
-| requestAuto | 是否自动执行请求 | boolean | true |
-| pagination | 是否需要分页组件 | boolean | true |
-| toolButton | 功能按钮配置 | string[] \| boolean | false |
-| rowKey | 行数据的 Key | string | 'id' |
-| searchCol | 搜索项每列占比配置 | number \| Record<BreakPoint, number> | { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 } |
-
-### SearchForm Props
-
-| 参数 | 说明 | 类型 | 默认值 |
+| 方法 | 说明 | 参数 | 返回值 |
 |------|------|------|--------|
-| columns | 搜索列配置 | ColumnProps[] | [] |
-| searchParam | 搜索参数 | object | {} |
-| searchCol | 搜索项每列占比配置 | number \| Record<BreakPoint, number> | { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 } |
+| setTheme | 设置主题 | theme: ThemeConfig | void |
+| getTheme | 获取当前主题 | - | ThemeConfig |
+| toggleDark | 切换暗色模式 | - | void |
 
-### Grid Props
+### 国际化
 
-| 参数 | 说明 | 类型 | 默认值 |
+| 方法 | 说明 | 参数 | 返回值 |
 |------|------|------|--------|
-| cols | 列数配置 | number \| Record<BreakPoint, number> | 12 |
-| gap | 间距配置 | number \| [number, number] | 0 |
+| getLocale | 获取语言包 | locale: string | Locale |
+| switchLocale | 切换语言 | locale: string | Locale |
+| getSupportedLocales | 获取支持的语言列表 | - | string[] |
+
+### 主题配置接口
+
+```typescript
+interface ThemeConfig {
+  /** 主题名称 */
+  name?: string
+  /** 是否暗色主题 */
+  dark?: boolean
+  /** 自定义CSS变量 */
+  cssVars?: Record<string, string>
+  /** 自定义类名 */
+  customClass?: string
+}
+```
 
 ## 🎨 样式定制
 
@@ -416,11 +503,14 @@ const handleConfirm = () => {
 
 ```css
 :root {
-  --mc-primary-color: #409eff;
-  --mc-success-color: #67c23a;
-  --mc-warning-color: #e6a23c;
-  --mc-danger-color: #f56c6c;
-  --mc-info-color: #909399;
+  --el-color-primary: #409eff;
+  --el-color-success: #67c23a;
+  --el-color-warning: #e6a23c;
+  --el-color-danger: #f56c6c;
+  --el-color-info: #909399;
+  --el-border-radius-base: 4px;
+  --el-font-size-base: 14px;
+  --el-spacing-base: 20px;
 }
 ```
 
@@ -430,12 +520,18 @@ const handleConfirm = () => {
 
 ```typescript
 import type { 
-  ColumnProps, 
-  SearchProps, 
-  ProTableProps,
-  RenderScope,
-  HeaderRenderScope 
-} from 'mc-pro-ui'
+  ThemeConfig,
+  ThemeManager,
+  McMarketsUI
+} from '@mc-markets/ui'
+
+// 导入所有 Element Plus 类型
+import type { 
+  ButtonProps,
+  InputProps,
+  TableProps,
+  FormProps
+} from '@mc-markets/ui'
 ```
 
 ## 🤝 贡献
@@ -488,15 +584,31 @@ npm run publish:lib
 ### 项目结构
 
 ```
-npm-pro-ui/
+@mc-markets/ui/
 ├── packages/           # 组件库源码
-│   ├── components/     # 组件
-│   ├── hooks/         # 组合式函数
+│   ├── styles/        # 样式文件
 │   ├── types/         # 类型定义
-│   ├── utils/         # 工具函数
 │   └── index.ts       # 入口文件
+├── src/               # 演示应用源码
+│   ├── components/    # 演示组件
+│   ├── styles/        # 演示样式
+│   ├── utils/         # 工具函数
+│   ├── App.vue        # 主应用组件
+│   └── main.ts        # 应用入口
 ├── dist/              # 构建输出
 ├── vite.config.ts     # Vite 配置
 ├── package.json       # 项目配置
 └── README.md          # 项目文档
 ```
+
+### 演示功能
+
+当前演示应用包含以下功能：
+
+- **组件展示** - 按钮、输入框、开关、评分、进度条等基础组件
+- **表单组件** - 完整的表单示例，包含验证规则
+- **表格组件** - 数据表格展示，支持分页和操作
+- **主题配置** - 动态主题切换和颜色配置
+- **国际化** - 多语言支持演示
+
+访问 http://localhost:5175/ 查看完整演示。