yg-yygl 0.0.1

package/src/views/demo-case/drawer/index.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 抽屉可见性控制
+const drawer1 = ref(false);
+const drawer2 = ref(false);
+const drawer3 = ref(false);
+const drawer4 = ref(false);
+const drawer5 = ref(false);
+const drawer6 = ref(false);
+const drawer7 = ref(false);
+const drawer8 = ref(false);
+const drawer9 = ref(false);
+const drawer10 = ref(false);
+const drawer11 = ref(false);
+const drawer12 = ref(false);
+
+// 表格数据
+const tableData = [
+  { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
+  { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
+  { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
+  { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },
+];
+
+// 嵌套抽屉可见性
+const innerDrawer = ref(false);
+
+const handleClose = (done: () => void) => {
+  ElMessage.info('关闭抽屉');
+  done();
+};
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Drawer 抽屉 (UDP UI)
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        有些时候，Dialog 组件并不满足我们的需求，比如你的表单很长，侧边栏需要放置某些操作等
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">呼出一个临时的侧边栏，在保留当前页面状态的情况下，承载用户的相关操作。</p>
+      <UdpButton type="primary" @click="drawer1 = true">
+        打开抽屉
+      </UdpButton>
+
+      <UdpDrawer v-model="drawer1" title="I'm the Drawer" direction="rtl" size="50%">
+        <span>Hi, there!</span>
+      </UdpDrawer>
+    </div>
+
+    <!-- 区域2：不添加 Title -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        不添加 Title
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">当你不需要标题到时候，你仍然可以保留顶部的默认边距。</p>
+      <div class="flex gap-3">
+        <UdpButton type="primary" @click="drawer2 = true">
+          不添加 Title
+        </UdpButton>
+        <UdpButton type="primary" @click="drawer3 = true">
+          不添加 Header
+        </UdpButton>
+      </div>
+
+      <UdpDrawer v-model="drawer2" direction="rtl" size="50%">
+        <span>Hi, there!</span>
+      </UdpDrawer>
+
+      <UdpDrawer v-model="drawer3" :show-close="false" direction="rtl" size="50%">
+        <span>Hi, there!</span>
+      </UdpDrawer>
+    </div>
+
+    <!-- 区域3：自定义内容 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        自定义内容
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">和 Dialog 组件一样，你可以通过具名插槽来插入 Drawer 的内容。</p>
+      <div class="flex gap-3">
+        <UdpButton type="primary" @click="drawer4 = true">
+          打开抽屉
+        </UdpButton>
+      </div>
+
+      <UdpDrawer v-model="drawer4" title="我有一个漂亮的标题" direction="rtl" size="50%">
+        <UdpTable :data="tableData" border>
+          <UdpTableColumn property="date" label="日期" width="150" />
+          <UdpTableColumn property="name" label="姓名" width="120" />
+          <UdpTableColumn property="address" label="地址" />
+        </UdpTable>
+        <template #footer>
+          <div style="flex: auto">
+            <UdpButton @click="drawer4 = false">取消</UdpButton>
+            <UdpButton type="primary" @click="drawer4 = false">确认</UdpButton>
+          </div>
+        </template>
+      </UdpDrawer>
+    </div>
+
+    <!-- 区域4：嵌套 Drawer -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        嵌套的 Drawer
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">和 Dialog 组件一样，Drawer 也可以嵌套使用。</p>
+      <UdpButton type="primary" @click="drawer5 = true">
+        打开外层抽屉
+      </UdpButton>
+
+      <UdpDrawer v-model="drawer5" title="外层 Drawer" direction="rtl" size="50%">
+        <span>第一层抽屉</span>
+        <UdpButton type="primary" class="ml-4" @click="innerDrawer = true">
+          打开内层抽屉!
+        </UdpButton>
+
+        <UdpDrawer
+          v-model="innerDrawer"
+          title="内层 Drawer"
+          :append-to-body="true"
+          direction="rtl"
+          size="30%"
+        >
+          <span>第二层抽屉</span>
+        </UdpDrawer>
+      </UdpDrawer>
+    </div>
+
+    <!-- 区域5：多个抽屉可以同时打开 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        多个抽屉可以同时打开
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">通过设置不同的 direction 可以同时打开多个抽屉。</p>
+      <div class="flex gap-3">
+        <UdpButton type="primary" @click="drawer6 = true">
+          从左打开
+        </UdpButton>
+        <UdpButton type="primary" @click="drawer7 = true">
+          从右打开
+        </UdpButton>
+        <UdpButton type="primary" @click="drawer8 = true">
+          从上打开
+        </UdpButton>
+        <UdpButton type="primary" @click="drawer9 = true">
+          从下打开
+        </UdpButton>
+      </div>
+
+      <UdpDrawer v-model="drawer6" title="从左打开" direction="ltr" size="30%">
+        <span>从左往右打开抽屉</span>
+      </UdpDrawer>
+
+      <UdpDrawer v-model="drawer7" title="从右打开" direction="rtl" size="30%">
+        <span>从右往左打开抽屉</span>
+      </UdpDrawer>
+
+      <UdpDrawer v-model="drawer8" title="从上打开" direction="ttb" size="30%">
+        <span>从上往下打开抽屉</span>
+      </UdpDrawer>
+
+      <UdpDrawer v-model="drawer9" title="从下打开" direction="btt" size="30%">
+        <span>从下往上打开抽屉</span>
+      </UdpDrawer>
+    </div>
+
+    <!-- 区域6：Drawer 的尺寸 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        Drawer 的尺寸
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">你可以通过设置 size 属性来控制抽屉的大小，可以是一个数字（像素）或百分比。</p>
+      <div class="flex gap-3">
+        <UdpButton type="primary" @click="drawer10 = true">
+          50%
+        </UdpButton>
+        <UdpButton type="primary" @click="drawer11 = true">
+          30%
+        </UdpButton>
+        <UdpButton type="primary" @click="drawer12 = true">
+          500px
+        </UdpButton>
+      </div>
+
+      <UdpDrawer v-model="drawer10" title="50% 宽度" direction="rtl" size="50%">
+        <span>50% 宽度的抽屉</span>
+      </UdpDrawer>
+
+      <UdpDrawer v-model="drawer11" title="30% 宽度" direction="rtl" size="30%">
+        <span>30% 宽度的抽屉</span>
+      </UdpDrawer>
+
+      <UdpDrawer v-model="drawer12" title="500px 宽度" direction="rtl" :size="500">
+        <span>500px 宽度的抽屉</span>
+      </UdpDrawer>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/dropdown/index.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus';
+import { ArrowDown } from '@element-plus/icons-vue';
+
+const handleCommand = (command: string) => {
+  ElMessage.success(`点击了: ${command}`);
+};
+
+const items = [
+  { command: '001', label: '选项001' },
+  { command: '002', label: '选项002' },
+  { command: '003', label: '选项003' },
+  { command: '004', label: '选项004' },
+  { command: '005', label: '选项005' },
+];
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Dropdown 下拉菜单
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        触发你需要的菜单项或下拉菜单中
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        鼠标在下拉菜单上或菜单项更多操作
+      </p>
+      <el-dropdown trigger="click">
+        <el-button type="primary">
+          下拉菜单
+          <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+              {{ item.label }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+
+    <!-- 区域2：触发对象 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        触发对象
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        不同触发方式
+      </p>
+      <div class="flex items-center gap-4">
+        <el-dropdown split-button type="primary" @click="handleCommand('按钮点击')">
+          下拉菜单
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown>
+          <span>
+            更多操作
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+
+    <!-- 区域3：尺寸 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        尺寸
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        不同尺寸的下拉菜单
+      </p>
+      <div class="flex items-center gap-4">
+        <el-dropdown>
+          <el-button size="large">
+            大尺寸
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown>
+          <el-button>
+            默认尺寸
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown>
+          <el-button size="small">
+            小尺寸
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+
+    <!-- 区域4：下拉方向 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        下拉方向
+      </h3>
+      <p class="m-0 mb-4 text-sm text-gray-500">
+        可以设置下拉菜单展开的方向
+      </p>
+      <div class="space-x-4">
+        <el-dropdown placement="top">
+          <el-button>上拉展开</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown placement="bottom">
+          <el-button>下拉展开</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in items" :key="item.command" @click="handleCommand(item.label)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/empty/index.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 空状态尺寸
+const sizeOptions = ['', 'small', 'large'] as const;
+const currentSize = ref<typeof sizeOptions[number]>('');
+</script>
+
+<template>
+  <div class="p-6 bg-background w-full h-full overflow-auto rounded-md">
+    <!-- 标题区域 -->
+    <div class="mb-6">
+      <h2 class="m-0 mb-2 text-2xl font-semibold text-[hsl(var(--foreground))]">
+        Empty 空状态
+      </h2>
+      <p class="m-0 text-sm text-[hsl(var(--foreground-secondary))]">
+        空状态时的占位提示
+      </p>
+    </div>
+
+    <!-- 区域1：基础用法 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        基础用法
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        基础的空状态展示
+      </p>
+      <div class="space-y-6">
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">默认</h4>
+          <ElEmpty description="暂无数据" />
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">自定义描述</h4>
+          <ElEmpty description="还没有任何内容，快去添加吧！" />
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">无图片</h4>
+          <ElEmpty :image-size="0" description="暂无数据" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域2：自定义图片 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        自定义图片
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        使用自定义图片作为空状态插图
+      </p>
+      <div class="space-y-6">
+        <ElEmpty
+          image="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+          description="自定义图片"
+        />
+      </div>
+    </div>
+
+    <!-- 区域3：不同尺寸 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        不同尺寸
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        使用 image-size 属性设置图片大小
+      </p>
+      <div class="space-y-6">
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">小尺寸</h4>
+          <ElEmpty :image-size="100" description="暂无数据" />
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">默认尺寸</h4>
+          <ElEmpty description="暂无数据" />
+        </div>
+        <div>
+          <h4 class="m-0 mb-2 text-sm font-medium text-[hsl(var(--foreground-secondary))]">大尺寸</h4>
+          <ElEmpty :image-size="300" description="暂无数据" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 区域4：带操作按钮 -->
+    <div class="bg-white rounded-[var(--radius)] p-6 mb-4">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        带操作按钮
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        在空状态中添加操作按钮
+      </p>
+      <div class="space-y-6">
+        <ElEmpty description="暂无数据">
+          <ElButton type="primary">创建</ElButton>
+        </ElEmpty>
+
+        <ElEmpty description="购物车还是空的">
+          <ElButton type="primary">去逛逛</ElButton>
+        </ElEmpty>
+
+        <ElEmpty description="暂无消息">
+          <ElButton type="primary">查看消息</ElButton>
+        </ElEmpty>
+      </div>
+    </div>
+
+    <!-- 区域5：不同场景 -->
+    <div class="bg-white rounded-[var(--radius)] p-6">
+      <h3 class="m-0 mb-4 text-base font-medium text-[hsl(var(--foreground))] border-l-[3px] border-l-primary pl-3">
+        不同场景
+      </h3>
+      <p class="mb-4 text-sm text-[hsl(var(--foreground-secondary))]">
+        各种业务场景下的空状态
+      </p>
+      <div class="grid grid-cols-2 gap-6">
+        <!-- 无数据 -->
+        <div class="border rounded-lg p-4">
+          <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">无数据</h4>
+          <ElEmpty description="暂无数据" :image-size="120" />
+        </div>
+
+        <!-- 无权限 -->
+        <div class="border rounded-lg p-4">
+          <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">无权限</h4>
+          <ElEmpty description="您没有权限访问该页面" :image-size="120">
+            <ElButton type="primary">返回首页</ElButton>
+          </ElEmpty>
+        </div>
+
+        <!-- 搜索无结果 -->
+        <div class="border rounded-lg p-4">
+          <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">搜索无结果</h4>
+          <ElEmpty description="没有找到相关内容" :image-size="120">
+            <ElButton type="primary">重新搜索</ElButton>
+          </ElEmpty>
+        </div>
+
+        <!-- 网络错误 -->
+        <div class="border rounded-lg p-4">
+          <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">网络错误</h4>
+          <ElEmpty description="网络连接失败，请稍后重试" :image-size="120">
+            <ElButton type="primary">重新加载</ElButton>
+          </ElEmpty>
+        </div>
+
+        <!-- 404 -->
+        <div class="border rounded-lg p-4">
+          <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">404</h4>
+          <ElEmpty description="抱歉，您访问的页面不存在" :image-size="120">
+            <ElButton type="primary">返回首页</ElButton>
+          </ElEmpty>
+        </div>
+
+        <!-- 服务器错误 -->
+        <div class="border rounded-lg p-4">
+          <h4 class="m-0 mb-3 text-sm font-medium text-[hsl(var(--foreground))]">服务器错误</h4>
+          <ElEmpty description="服务器开小差了，请稍后再试" :image-size="120">
+            <ElButton type="primary">刷新页面</ElButton>
+          </ElEmpty>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/views/demo-case/fix-mismatched.cjs

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+
+const dirs = fs.readdirSync('.', { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name);
+
+let totalFixed = 0;
+
+dirs.forEach(dir => {
+  const indexPath = path.join(dir, 'index.vue');
+  if (!fs.existsSync(indexPath)) return;
+
+  let content = fs.readFileSync(indexPath, 'utf8');
+  const original = content;
+
+  // Fix pattern: </ElXxx> when preceded by <UdpXxx>
+  // We need to find cases where <UdpXxx> opens but </ElXxx> closes
+
+  const patterns = [
+    ['UdpBadge', 'ElBadge'],
+    ['UdpButton', 'ElButton'],
+    ['UdpCard', 'ElCard'],
+    ['UdpAvatar', 'ElAvatar'],
+    ['UdpDialog', 'ElDialog'],
+    ['UdpDrawer', 'ElDrawer'],
+    ['UdpTag', 'ElTag'],
+    ['UdpInput', 'ElInput'],
+  ];
+
+  patterns.forEach(([udp, el]) => {
+    // Look for patterns like: <UdpBadge ...> ... </ElBadge>
+    // But NOT: <ElBadge ...> ... </ElBadge>
+    const regex = new RegExp(`<${udp}([^>]*)>[\\s\\S]*?</${el}>`, 'g');
+    content = content.replace(regex, (match) => {
+      return match.replace(`</${el}>`, `</${udp}>`);
+    });
+  });
+
+  if (content !== original) {
+    fs.writeFileSync(indexPath, content);
+    const changes = (content.match(/<\/(Udp[A-Z][a-zA-Z]+)>/g) || []).length -
+                    (original.match(/<\/(Udp[A-Z][a-zA-Z]+)>/g) || []).length;
+    console.log(`✓ ${dir}/index.vue`);
+    totalFixed += Math.abs(changes);
+  }
+});
+
+console.log(`\n总共修复了 ${totalFixed} 处标签不匹配！`);

package/src/views/demo-case/fix-proper.cjs

@@ -0,0 +1,44 @@
+const fs = require('fs');
+
+const files = ['badge/index.vue', 'card/index.vue', 'dialog/index.vue', 'drawer/index.vue', 'tag/index.vue'];
+
+files.forEach(file => {
+  const filePath = `./${file}`;
+  if (!fs.existsSync(filePath)) return;
+
+  let content = fs.readFileSync(filePath, 'utf8');
+  const original = content;
+  let changes = 0;
+
+  // Fix pattern: <ElXxx> ... </UdpYyy> should be </ElXxx>
+  // We need to properly match opening and closing tags
+
+  // Simple approach: fix specific mismatches based on the opening tag
+  const patterns = [
+    { opening: '<ElCard', closing: '</UdpCard>', correct: '</ElCard>' },
+    { opening: '<UdpCard', closing: '</ElCard>', correct: '</UdpCard>' },
+    { opening: '<ElBadge', closing: '</UdpBadge>', correct: '</ElBadge>' },
+    { opening: '<UdpBadge', closing: '</ElBadge>', correct: '</UdpBadge>' },
+    { opening: '<ElButton', closing: '</UdpButton>', correct: '</ElButton>' },
+    { opening: '<UdpButton', closing: '</ElButton>', correct: '</UdpButton>' },
+    { opening: '<ElDialog', closing: '</UdpDialog>', correct: '</ElDialog>' },
+    { opening: '<UdpDialog', closing: '</ElDialog>', correct: '</UdpDialog>' },
+    { opening: '<ElDrawer', closing: '</UdpDrawer>', correct: '</ElDrawer>' },
+    { opening: '<UdpDrawer', closing: '</ElDrawer>', correct: '</UdpDrawer>' },
+  ];
+
+  patterns.forEach(pattern => {
+    // Find all cases where <opening> ... </closing>
+    const regex = new RegExp(`${pattern.opening}([^>]*)>[\\s\\S]*?${pattern.closing}`, 'g');
+    content = content.replace(regex, (match) => {
+      return match.replace(pattern.closing, pattern.correct);
+    });
+  });
+
+  if (content !== original) {
+    fs.writeFileSync(filePath, content);
+    console.log(`✓ Fixed ${file}`);
+  }
+});
+
+console.log('Done!');