qy-better-lib 0.0.1

package/src/document/pc_components.md

@@ -0,0 +1,566 @@
+# QY Better Lib PC Components - 使用文档
+
+本文档详细介绍了 QY Better Lib PC Components 包中的各种组件，包括功能描述、参数说明和使用示例。
+
+## 组件列表
+
+### 1. tableExtend - 表格扩展组件
+
+#### 功能描述
+基于 Element Plus Table 组件的增强实现，提供分页、列显示/隐藏、排序、行选择等功能。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| options | Object | {} | 表格UI选项配置 |
+| tableData | Array | [] | 表格数据源 |
+| tableColums | Array<TableColumn> | [] | 表格列配置 |
+| tableLoading | Boolean | false | 加载状态 |
+| expand | Boolean | false | 是否显示展开行 |
+| selectionCol | Boolean | true | 是否显示选择列 |
+| indexCol | Boolean | true | 是否显示索引列 |
+| isSetColumn | Boolean | false | 是否启用列显示/隐藏设置 |
+| paging | Object | - | 分页配置，包含 pageIndex 和 pageSize |
+| total | Number | - | 数据总数 |
+| sizeList | Array<number> | [15, 20, 30, 50, 100] | 可选页面大小列表 |
+| autoHeight | Boolean | false | 是否自动高度 |
+| autoPagination | Boolean | false | 是否自动显示分页器 |
+
+#### 事件
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| tableSort | { sort_name, sort_type } | 排序事件 |
+| handleSelectionChange | rows | 选择变更事件 |
+| currentChange | page_index | 页码变更事件 |
+| pageSizeChange | page_size | 分页大小变更事件 |
+| rowClick | rows | 行点击事件 |
+| rowDblClick | rows | 行双击事件 |
+
+#### 方法
+
+| 方法名 | 参数 | 说明 |
+|-------|------|------|
+| clearSelection | 无 | 清空选择 |
+| toggleRowSelection | row | 切换行选择状态 |
+
+#### 暴露的属性和方法 (defineExpose)
+
+| 属性/方法名 | 类型 | 说明 |
+|-----------|------|------|
+| clearSelection | Function | 清空选择 |
+| toggleRowSelection | Function(row) | 切换行选择状态 |
+| table | Ref<any> | 表格组件引用 |
+
+#### 使用示例
+
+```vue
+<template>
+  <table-extend
+    :tableData="tableData"
+    :tableColums="tableColums"
+    :tableLoading="loading"
+    :paging="{ pageIndex: currentPage, pageSize: pageSize }"
+    :total="total"
+    @tableSort="handleSort"
+    @handleSelectionChange="handleSelectionChange"
+    @currentChange="handleCurrentChange"
+    @pageSizeChange="handlePageSizeChange"
+    @rowClick="handleRowClick"
+  >
+    <!-- 工具栏左侧插槽 -->
+    <template #tool-left>
+      <el-button type="primary">添加</el-button>
+    </template>
+    
+    <!-- 工具栏右侧插槽 -->
+    <template #tool-right>
+      <el-button>导出</el-button>
+    </template>
+    
+    <!-- 操作列插槽 -->
+    <template #operatColumn>
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="scope">
+          <el-button size="small" @click="edit(scope.row)">编辑</el-button>
+          <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </template>
+    
+    <!-- 展开行插槽 -->
+    <template #expand="{ row }">
+      <div>{{ row.description }}</div>
+    </template>
+  </table-extend>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TableExtend from '@qy_better_lib/pc/components/tableExtend';
+// 引入样式
+import '@qy_better_lib/pc/styles/table-extend.scss';
+
+const tableData = ref([
+  { id: 1, name: '张三', age: 20, address: '北京市' },
+  { id: 2, name: '李四', age: 25, address: '上海市' },
+  { id: 3, name: '王五', age: 30, address: '广州市' }
+]);
+
+const tableColums = ref([
+  { prop: 'name', label: '姓名', width: 100 },
+  { prop: 'age', label: '年龄', width: 80, sortable: true },
+  { prop: 'address', label: '地址', minWidth: 150 }
+]);
+
+const loading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(3);
+
+function handleSort(sort) {
+  console.log('排序:', sort);
+}
+
+function handleSelectionChange(rows) {
+  console.log('选择变更:', rows);
+}
+
+function handleCurrentChange(page) {
+  console.log('页码变更:', page);
+  currentPage.value = page;
+  // 加载数据
+}
+
+function handlePageSizeChange(size) {
+  console.log('分页大小变更:', size);
+  pageSize.value = size;
+  // 加载数据
+}
+
+function handleRowClick(row) {
+  console.log('行点击:', row);
+}
+
+function edit(row) {
+  console.log('编辑:', row);
+}
+
+function del(row) {
+  console.log('删除:', row);
+}
+</script>
+```
+
+### 2. commForm - 通用表单组件
+
+#### 功能描述
+基于 Element Plus Form 组件的封装，提供表单验证、布局管理等功能。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| model | Object | {} | 表单数据对象 |
+| rules | Object | {} | 表单验证规则 |
+| labelWidth | String / Number | '80px' | 标签宽度 |
+| labelPosition | String | 'right' | 标签位置 |
+| size | String | 'default' | 表单尺寸 |
+| inline | Boolean | false | 是否为行内表单 |
+| disabled | Boolean | false | 是否禁用 |
+
+#### 方法
+
+| 方法名 | 参数 | 说明 |
+|-------|------|------|
+| validate | callback | 表单验证 |
+| resetFields | 无 | 重置表单 |
+| clearValidate | props | 清除验证 |
+
+#### 暴露的属性和方法 (defineExpose)
+
+| 属性/方法名 | 类型 | 说明 |
+|-----------|------|------|
+| validate | Function | 表单验证 |
+| reset | Function | 重置表单 |
+
+#### 使用示例
+
+```vue
+<template>
+  <comm-form
+    :model="formData"
+    :rules="rules"
+    label-width="100px"
+  >
+    <el-form-item label="姓名" prop="name">
+      <el-input v-model="formData.name"></el-input>
+    </el-form-item>
+    
+    <el-form-item label="年龄" prop="age">
+      <el-input-number v-model="formData.age" :min="0" :max="100"></el-input-number>
+    </el-form-item>
+    
+    <el-form-item label="地址" prop="address">
+      <el-input v-model="formData.address" type="textarea"></el-input>
+    </el-form-item>
+    
+    <el-form-item>
+      <el-button type="primary" @click="submitForm">提交</el-button>
+      <el-button @click="resetForm">重置</el-button>
+    </el-form-item>
+  </comm-form>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CommForm from '@qy_better_lib/pc/components/commForm';
+// 引入样式
+import '@qy_better_lib/pc/styles/comm-form.scss';
+
+const formData = ref({
+  name: '',
+  age: '',
+  address: ''
+});
+
+const rules = ref({
+  name: [
+    { required: true, message: '请输入姓名', trigger: 'blur' }
+  ],
+  age: [
+    { required: true, message: '请输入年龄', trigger: 'blur' },
+    { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
+  ],
+  address: [
+    { required: true, message: '请输入地址', trigger: 'blur' }
+  ]
+});
+
+function submitForm() {
+  // 表单验证
+  // 提交数据
+}
+
+function resetForm() {
+  // 重置表单
+}
+</script>
+```
+
+### 3. textButton - 文本按钮组件
+
+#### 功能描述
+文本按钮组件，支持多种状态和样式。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| type | String | 'default' | 按钮类型 |
+| size | String | 'medium' | 按钮尺寸 |
+| disabled | Boolean | false | 是否禁用 |
+| loading | Boolean | false | 是否加载中 |
+| icon | String | '' | 图标类名 |
+
+#### 使用示例
+
+```vue
+<template>
+  <div>
+    <text-button type="primary" @click="handleClick">主要按钮</text-button>
+    <text-button type="success">成功按钮</text-button>
+    <text-button type="warning">警告按钮</text-button>
+    <text-button type="danger">危险按钮</text-button>
+    <text-button disabled>禁用按钮</text-button>
+    <text-button loading>加载中按钮</text-button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import TextButton from '@qy_better_lib/pc/components/textButton';
+// 引入样式
+import '@qy_better_lib/pc/styles/text-button.scss';
+
+function handleClick() {
+  console.log('按钮点击');
+}
+</script>
+```
+
+### 4. contextMenu - 右键菜单组件
+
+#### 功能描述
+右键菜单组件，支持自定义菜单项和事件处理。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| menuList | Array | [] | 菜单列表 |
+| trigger | String | 'click' | 触发方式 |
+| placement | String | 'bottom' | 菜单位置 |
+
+#### 暴露的属性和方法 (defineExpose)
+
+| 属性/方法名 | 类型 | 说明 |
+|-----------|------|------|
+| show | Function(event) | 显示菜单，参数为鼠标事件或位置对象 |
+| hide | Function | 隐藏菜单 |
+
+#### 使用示例
+
+```vue
+<template>
+  <div>
+    <div ref="menuTarget" @contextmenu.prevent="showMenu">
+      右键点击我
+    </div>
+    
+    <context-menu
+      ref="contextMenu"
+      :menu-list="menuList"
+      :target="menuTarget"
+      @menu-click="handleMenuClick"
+    ></context-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ContextMenu from '@qy_better_lib/pc/components/contextMenu';
+// 引入样式
+import '@qy_better_lib/pc/styles/context-menu.scss';
+
+const menuTarget = ref(null);
+const contextMenu = ref(null);
+
+const menuList = ref([
+  { id: 1, label: '复制', icon: 'el-icon-document-copy' },
+  { id: 2, label: '剪切', icon: 'el-icon-scissors' },
+  { id: 3, label: '粘贴', icon: 'el-icon-document-remove' },
+  { id: 4, label: '删除', icon: 'el-icon-delete', type: 'danger' }
+]);
+
+function showMenu(event) {
+  contextMenu.value.show(event);
+}
+
+function handleMenuClick(item) {
+  console.log('菜单点击:', item);
+  // 处理菜单点击事件
+}
+</script>
+```
+
+### 5. describeView - 描述视图组件
+
+#### 功能描述
+描述视图组件，用于展示对象的详细信息。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| data | Object | {} | 数据对象 |
+| schema | Array | [] | 描述项配置 |
+| title | String | '' | 标题 |
+| border | Boolean | false | 是否显示边框 |
+| column | Number | 2 | 列数 |
+
+#### 使用示例
+
+```vue
+<template>
+  <describe-view
+    :data="userInfo"
+    :schema="schema"
+    title="用户信息"
+    :border="true"
+    :column="3"
+  ></describe-view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import DescribeView from '@qy_better_lib/pc/components/describeView';
+// 引入样式
+import '@qy_better_lib/pc/styles/describe-view.scss';
+
+const userInfo = ref({
+  name: '张三',
+  age: 25,
+  gender: '男',
+  address: '北京市朝阳区',
+  phone: '13800138000',
+  email: 'zhangsan@example.com'
+});
+
+const schema = ref([
+  { label: '姓名', prop: 'name' },
+  { label: '年龄', prop: 'age' },
+  { label: '性别', prop: 'gender' },
+  { label: '地址', prop: 'address' },
+  { label: '电话', prop: 'phone' },
+  { label: '邮箱', prop: 'email' }
+]);
+</script>
+```
+
+### 6. simpleVirtualList - 简单虚拟列表组件
+
+#### 功能描述
+简单虚拟列表组件，用于高效渲染大量数据。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| data | Array | [] | 数据源 |
+| height | Number / String | 300 | 列表高度 |
+| itemHeight | Number | 50 | 每一项的高度 |
+| keyField | String | 'id' | 数据项的唯一标识字段 |
+
+#### 使用示例
+
+```vue
+<template>
+  <simple-virtual-list
+    :data="listData"
+    :height="500"
+    :item-height="60"
+    key-field="id"
+  >
+    <template #default="{ item, index }">
+      <div class="list-item">
+        <span class="index">{{ index + 1 }}</span>
+        <span class="name">{{ item.name }}</span>
+        <span class="age">{{ item.age }}</span>
+      </div>
+    </template>
+  </simple-virtual-list>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import SimpleVirtualList from '@qy_better_lib/pc/components/simpleVirtualList';
+// 引入样式
+import '@qy_better_lib/pc/styles/simple-virtual-list.scss';
+
+// 生成大量数据
+const listData = ref([]);
+for (let i = 1; i <= 10000; i++) {
+  listData.value.push({
+    id: i,
+    name: `用户${i}`,
+    age: Math.floor(Math.random() * 50) + 18
+  });
+}
+</script>
+
+<style scoped>
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 60px;
+  border-bottom: 1px solid #eee;
+}
+
+.index {
+  width: 60px;
+  color: #999;
+}
+
+.name {
+  flex: 1;
+  font-weight: bold;
+}
+
+.age {
+  width: 60px;
+  color: #666;
+}
+</style>
+```
+
+### 7. commDialog - 通用对话框组件
+
+#### 功能描述
+通用对话框组件，支持对话框(dialog)和抽屉(drawer)两种类型，基于Element Plus的ElDialog和ElDrawer组件。
+
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| type | String | 'dialog' | 组件类型，可选值：dialog(对话框)、drawer(抽屉) |
+| size | String / Number | '50%' | 对话框宽度或抽屉大小 |
+| showClose | Boolean | true | 是否显示关闭按钮 |
+| draggable | Boolean | false | 是否可拖动 |
+| modal | Boolean | true | 是否显示遮罩 |
+| modalStyle | Object | {} | 遮罩样式 |
+
+#### 使用示例
+
+```vue
+<template>
+  <div>
+    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
+    <el-button @click="drawerVisible = true">打开抽屉</el-button>
+    
+    <!-- 对话框 -->
+    <comm-dialog
+      v-model:visible="dialogVisible"
+      title="示例对话框"
+      type="dialog"
+      size="40%"
+    >
+      <div class="dialog-content">
+        <p>这是对话框内容</p>
+        <p>可以添加任意内容</p>
+      </div>
+      
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </template>
+    </comm-dialog>
+    
+    <!-- 抽屉 -->
+    <comm-dialog
+      v-model:visible="drawerVisible"
+      title="示例抽屉"
+      type="drawer"
+      size="30%"
+    >
+      <div class="drawer-content">
+        <p>这是抽屉内容</p>
+        <p>可以添加任意内容</p>
+      </div>
+    </comm-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CommDialog from '@qy_better_lib/pc/components/commDialog';
+// commDialog 使用 Element Plus 内置样式，无需单独引入
+
+const dialogVisible = ref(false);
+const drawerVisible = ref(false);
+
+function handleConfirm() {
+  console.log('确定');
+  dialogVisible.value = false;
+}
+</script>
+
+<style scoped>
+.dialog-content,
+.drawer-content {
+  padding: 20px 0;
+}
+</style>
+```

package/src/locales/en.json

@@ -0,0 +1 @@
+{}

package/src/locales/zh-cn.json

@@ -0,0 +1 @@
+{}

package/src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "@/router/index";
+import plugins from "@/plugins/index";
+import "@/styles/index.scss";
+
+const app = createApp(App);
+
+app.use(router);
+
+app.use(plugins);
+
+app.mount("#app");

package/src/plugins/element-plus.ts

@@ -0,0 +1,16 @@
+import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+import * as icons from "@element-plus/icons-vue";
+import type { App } from "vue";
+import elementPlus from "element-plus";
+
+export default function (app: App) {
+  app.use(elementPlus);
+  //   注册图标
+  const keys = Object.keys(icons);
+  for (let i = 0; i < keys.length; i++) {
+    const key: string = keys[i];
+    const item = (icons as Record<string, any>)[key];
+    app.component(item.name, item);
+  }
+}

package/src/plugins/i18n.ts

@@ -0,0 +1,17 @@
+import { createI18n } from "vue-i18n";
+import en from "@/locales/en.json";
+import zhcn from "@/locales/zh-cn.json";
+
+const i18n = createI18n({
+  locale: "zh-cn",
+  legacy: false,
+  globalInjection: true,
+  silentFallbackWarn: true,
+  // 语言包文件内容
+  messages: {
+    "zh-cn": zhcn,
+    en: en,
+  },
+});
+
+export default i18n;

package/src/plugins/index.ts

@@ -0,0 +1,13 @@
+import type { App } from "vue";
+import elementplus from "./element-plus";
+import i18n from "./i18n";
+import store from "./store";
+
+export default {
+  install: (app: App, options?: any) => {
+    // 状态管理
+    app.use(store);
+    app.use(elementplus);
+    app.use(i18n);
+  },
+};

package/src/plugins/store.ts

@@ -0,0 +1,12 @@
+import type { App } from "vue";
+import { createPinia } from "pinia";
+import { registerStore } from "@/store/index";
+
+export default {
+  install: (app: App, options?: any) => {
+    // 注册pinia
+    app.use(createPinia());
+    // 注册全局状态库
+    registerStore();
+  },
+};

package/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory, Router } from "vue-router";
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("@/views/index.vue"),
+  },
+  {
+    path: "/docs",
+    name: "docs",
+    component: () => import("@/views/docs/index.vue"),
+  },
+];
+const router: Router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+});
+
+export default router;