ci-plus 1.0.1

package/README.md

@@ -0,0 +1,8 @@
+## 安装本组件库
+
+```sh
+#  本地安装项目
+pnpm install 项目package.json所在目录
+pnpm install D:\UserData\Public\InternalUse\59529\zjk\ci-plus\packages\components
+
+```

package/index.ts

@@ -0,0 +1,13 @@
+import * as components from './src/index';
+export * from './src/index';
+import { App } from 'vue';
+
+export default {
+  install: (app: App) => {
+    for (const c in components) {
+      console.log("cccc", c);
+
+      app.use(components[c]);
+    }
+  }
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "ci-plus",
+  "version": "1.0.1",
+  "description": "cc组件库",
+  "main": "./index.ts",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
+  "keywords": [
+    "vue",
+    "element-plus",
+    "ui组件库二次封装"
+  ],
+  "author": "cc",
+  "license": "ISC",
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "element-plus": "^2.5.1",
+    "lodash": "^4.17.21",
+    "sortablejs": "^1.15.1",
+    "vuedraggable": "^2.24.3"
+  },
+  "devDependencies": {
+    "less": "^4.2.0",
+    "vite-plugin-svg-icons": "^2.0.1"
+  },
+  "peerDependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "element-plus": "^2.5.1",
+    "lodash": "^4.17.21",
+    "sortablejs": "^1.15.1",
+    "vuedraggable": "^2.24.3"
+  },
+  "peerDependenciesMeta": {
+    "element-plus": {
+      "optional": true
+    },
+    "lodash": {
+      "optional": true
+    }
+  }
+}

package/script/build/index.ts

@@ -0,0 +1,32 @@
+import delPath from '../utils/delpath';
+import { series, parallel, src, dest } from 'gulp';
+import { pkgPath, componentPath } from '../utils/paths';
+import less from 'gulp-less';
+import autoprefixer from 'gulp-autoprefixer';
+import run from '../utils/run';
+//删除easyest
+
+export const removeDist = () => {
+  return delPath(`${pkgPath}/easyest`);
+};
+
+//打包样式
+export const buildStyle = () => {
+  return src(`${componentPath}/src/**/style/**.less`)
+    .pipe(less())
+    .pipe(autoprefixer())
+    .pipe(dest(`${pkgPath}/easyest/lib/src`))
+    .pipe(dest(`${pkgPath}/easyest/es/src`));
+};
+
+//打包组件
+export const buildComponent = async () => {
+  run('pnpm run build', componentPath);
+};
+export default series(
+  async () => removeDist(),
+  parallel(
+    async () => buildStyle(),
+    async () => buildComponent()
+  )
+);

package/script/publish/index.ts

@@ -0,0 +1,7 @@
+import run from '../utils/run';
+import { pkgPath } from '../utils/paths';
+import { series } from 'gulp';
+export const publishComponent = async () => {
+  run('release-it', `${pkgPath}/easyest`);
+};
+export default series(async () => publishComponent());

package/script/utils/delpath.ts

@@ -0,0 +1,30 @@
+import fs from 'fs';
+import { resolve } from 'path';
+import { pkgPath } from './paths';
+//保留的文件
+const stayFile = ['package.json', 'README.md'];
+
+const delPath = async (path: string) => {
+  let files: string[] = [];
+
+  if (fs.existsSync(path)) {
+    files = fs.readdirSync(path);
+
+    files.forEach(async (file) => {
+      const curPath = resolve(path, file);
+
+      if (fs.statSync(curPath).isDirectory()) {
+        // recurse
+        if (file != 'node_modules') await delPath(curPath);
+      } else {
+        // delete file
+        if (!stayFile.includes(file)) {
+          fs.unlinkSync(curPath);
+        }
+      }
+    });
+
+    if (path != `${pkgPath}/easyest`) fs.rmdirSync(path);
+  }
+};
+export default delPath;

package/script/utils/paths.ts

@@ -0,0 +1,7 @@
+import { resolve } from 'path';
+
+//组件库根目录
+export const componentPath = resolve(__dirname, '../../');
+
+//pkg根目录
+export const pkgPath = resolve(__dirname, '../../../');

package/script/utils/run.ts

@@ -0,0 +1,15 @@
+import { spawn } from 'child_process';
+
+export default async (command: string, path: string) => {
+  //cmd表示命令，args代表参数，如 rm -rf  rm就是命令，-rf就为参数
+  const [cmd, ...args] = command.split(' ');
+  return new Promise((resolve) => {
+    const app = spawn(cmd, args, {
+      cwd: path, //执行命令的路径
+      stdio: 'inherit', //输出共享给父进程
+      shell: true //mac不需要开启，windows下git base需要开启支持
+    });
+    //执行完毕关闭并resolve
+    app.on('close', resolve);
+  });
+};

package/src/button/button.vue

@@ -0,0 +1,41 @@
+<template>
+  <button
+    class="ea-button"
+    :class="buttonStyle"
+  >
+    <slot />
+  </button>
+  <el-button type="danger">这是个默认的按钮</el-button>
+</template>
+
+<script lang="ts" setup>
+import './style/index.less'
+import { computed } from 'vue'
+import { ElButton } from 'element-plus'
+defineOptions({ name: 'ea-button' })
+
+// const props = defineProps({
+//   // 标题
+//   type: {
+//     type: String,
+//     default: '',
+//   },
+//   size: {
+//     type: String,
+//     default: '',
+//   },
+// })
+export interface Props {
+  type?: string
+  size?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: '',
+  size: '30',
+})
+
+const buttonStyle = computed(() => {
+  return { [`ea-button--${props.type}`]: props.type }
+})
+</script>

package/src/button/index.ts

@@ -0,0 +1,4 @@
+import _Button from './button.vue';
+import { withInstall } from '../utils/index';
+export const Button = withInstall(_Button);
+export default Button;

package/src/button/style/index.less

@@ -0,0 +1,35 @@
+.ea-button{
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 12px 20px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  color: #606266;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  outline: none;
+  transition: 0.1s;
+  appearance: none;
+}
+
+.ea-button--primary{
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+  &:hover{
+    color: #fff;
+    background: #73ff66;
+    border-color: #66b1ff;
+  }
+}
+// .ea-button--primary:hover{
+//   color: #fff;
+//   background: #66b1ff;
+//   border-color: #66b1ff;
+// }

package/src/buttons/buttons.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-button v-bind="props">
+    <slot />
+  </el-button>
+</template>
+
+<script lang="ts" setup>
+import { ElButton } from 'element-plus'
+import { useAttrs, ref } from 'vue'
+defineOptions({ name: 'ea-buttons' })
+// 获取ElButton的类型提示
+type ButtonProps = (typeof import('element-plus'))['ElButton']
+const aa = ref<ButtonProps>()
+
+const props = defineProps(ElButton.props)
+
+console.log('props: ', props)
+</script>

package/src/buttons/index.ts

@@ -0,0 +1,4 @@
+import _Buttonsx from './buttons.vue';
+import { withInstall } from '../utils/index';
+export const Buttons = withInstall(_Buttonsx);
+export default Buttons;

package/src/ccapp/ccapp.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="ccapp">我是一个测试组件</div>
+  <div>{{ count }}</div>
+  <button @click="count++">点击</button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'cc-app' })
+import { ref } from 'vue'
+const count = ref(0)
+const add = () => {
+  count.value++
+}
+
+defineExpose({
+  add
+})
+console.log(count.value)
+</script>
+
+<style lang="less" scoped>
+#ccapp {
+  color: pink;
+  font-size: 40px;
+  font-weight: 900;
+}
+</style>

package/src/ccapp/index.ts

@@ -0,0 +1,4 @@
+import _Ccapp from './ccapp.vue'
+import { withInstall } from '../utils/index';
+export const Ccapp = withInstall(_Ccapp)
+export default Ccapp

package/src/components.d.ts

@@ -0,0 +1,18 @@
+/*
+ * @Description:
+ * @Date: 2023-02-20 19:20:06
+ * @Author: 导出类型定义
+ * @LastEditTime: 2023-05-22 16:12:52
+ */
+import * as components from './index';
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    EaButton: typeof components.Button;
+    EaIcon: typeof components.Icon;
+    EaButtons: typeof components.Buttons;
+    CcDialog: typeof components.Dialog;
+    CcApp: typeof components.Ccapp;
+    CcTable: typeof components.sortableTable;
+  }
+}
+export { };

package/src/dailog/dialog.vue

@@ -0,0 +1,266 @@
+<!-- @format -->
+
+<script setup lang="ts">
+defineOptions({ name: 'cc-dialog' })
+import { ref, reactive } from 'vue'
+import { Close, FullScreen } from '@element-plus/icons-vue'
+import './style/index.less'
+//  接收fugure组件传值
+export interface Props {
+  dialogVisible?: boolean // 是否显示 弹窗
+  title?: string //  标题
+  draggable?: boolean // 是否可拖拽
+  fullscreen?: boolean // 是否全屏
+  showfooter?: boolean // 是否显示footer插槽
+  closeOnClicModal?: boolean //是否可以通过点击 modal 关闭 Dialog
+  closeOnPressEscape?: boolean //是否可以通过按下 ESC 关闭 Dialog
+  destroyOnClose?: boolean //当关闭 Dialog 时，销毁其中的元素
+  SubmitCb?: () => void //提交表单
+  CloseCb?: () => void // 关闭弹窗的回调函数
+  style?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dialogVisible: false,
+  title: '',
+  draggable: true,
+  fullscreen: false,
+  showfooter: false,
+  closeOnClicModal: false,
+  closeOnPressEscape: false,
+  destroyOnClose: true,
+  style: 'width: 50%;translate(59px, 4px)',
+})
+
+// 给父亲组件传递回选中的数据
+
+const emit = defineEmits<{
+  (e: 'update:sValue', value: string): string
+  (e: 'SubmitCb', val?: () => void): any
+  (e: 'CloseCb', val?: () => void): any
+}>()
+
+// console.log('MySelect传参：', props, emit)
+
+const MyDialogRef = ref<any>(null)
+const dialogVisible = ref(false) // 是否弹出编辑出口
+const MyFullscreen = ref(props.fullscreen) // 是否全屏
+
+// 定义一个函数获取窗口高度
+let windowHeightL =
+  window.innerHeight ||
+  document.documentElement.clientHeight ||
+  document.body.clientHeight
+const windowHeight = ref(windowHeightL)
+
+/**
+ * 处理样子逻辑：初始样式为空，然后根据传递是否全屏进行调整
+ * 全屏的时候：MyStyle 还是为空
+ * 窗口化时候：获取传递的样式或者默认样式
+ * 窗口时默认样式设置为：props.style + `max-height: calc( ${windowHeight.value}px - 20vh);translate(59px, 4px)`
+ * */
+const MyStyle = ref('') //初始样式为空
+const dTop = ref() // 弹窗在非全屏时候距离顶部的距离
+// 判断在非全屏状态 距离顶部的距离
+if (!MyFullscreen.value) {
+  dTop.value = '10vh'
+} else {
+  dTop.value = '0px' // 全屏时候为0
+}
+
+// 根据传递搜全屏给调整最大高度：如果为不全屏立马给一个最大高度
+if (props.fullscreen == false) {
+  console.log('判断进来没222')
+  MyStyle.value =
+    props.style +
+    `max-height: calc( ${windowHeight.value}px - ${dTop.value});translate(59px, 4px)`
+}
+
+// 函数
+// 关闭函数
+const closeDialog = () => {
+  dialogVisible.value = false // 关闭弹窗
+  // 初始样式
+  if (props.fullscreen) {
+    MyStyle.value = '' //'' + `max-height: calc( ${windowHeight.value}px - 20vh);translate(59px, 4px)`;
+  } else {
+    MyStyle.value =
+      props.style +
+      `max-height: calc( ${windowHeight.value}px - ${dTop.value});translate(59px, 4px)`
+    //props.style + `translate(59px, 4px)`;
+  }
+  MyFullscreen.value = props.fullscreen
+
+  // 如果父组件传递了关闭函数回调 需要执行父组件的关闭函数逻辑
+  emit('CloseCb')
+  console.log('通过 @CloseCb="Function" 方式可传递关闭回调函数')
+}
+
+// 是否全局按钮切换
+const fullscreenChang = () => {
+  MyFullscreen.value = !MyFullscreen.value
+  if (MyFullscreen.value) {
+    MyStyle.value = '' // 全屏
+  } else {
+    MyStyle.value =
+      props.style +
+      `max-height: calc( ${window.innerHeight}px -  ${dTop.value});translate(59px, 4px)` // 非全屏
+    dTop.value = '10vh'
+  }
+  // console.log('窗口高度', window.innerHeight, MyStyle.value)
+}
+
+// console.log('窗口高度66666', window.innerHeight, MyStyle.value)
+
+//提交函数
+const Submit = (val: any) => {
+  // 执行父组件传递的提交函数:如果父组件没传递提交回调函数就提醒
+  emit('SubmitCb')
+  // if (true) {
+  console.log('通过 @SubmitCb="Function()" 方式可传递提交回调函数')
+  // }
+}
+
+//  打开弹窗
+const showMydia = async () => {
+  dialogVisible.value = true
+}
+
+// 弹窗打开时执行的函数
+const openChang = (val: any) => {
+  console.log('打开了', val)
+}
+
+defineExpose({
+  showMydia,
+  closeDialog, //关闭函数
+})
+
+/////////////////////////////////////////////////////
+const domInfo = reactive({
+  baseW: 0,
+  baseH: 0,
+})
+const container = ref<HTMLElement>(null)
+
+const updateTarget = (event: MouseEvent) => {
+  if (!MyDialogRef.value) {
+    console.error('drag--- 请传入一个HTMLElement节点')
+    return
+  }
+
+  // console.log('样式', MyDialogRef.value.dialogContentRef.$el.style);
+
+  // console.log('w', MyDialogRef.value.dialogContentRef.$el.style.width)
+  // console.log('w', MyDialogRef.value.dialogContentRef.$el.style.height)
+  // console.log('H', MyDialogRef.value.dialogContentRef.$el.style.clientHeight);
+
+  // movementX/movementY
+  // 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标;
+  domInfo.baseW = parseInt(MyDialogRef.value.dialogContentRef.$el.style.width)
+  domInfo.baseH = parseInt(MyDialogRef.value.dialogContentRef.$el.style.height)
+  MyDialogRef.value.dialogContentRef.$el.style.width = `${
+    domInfo.baseW + event.movementX
+  }px`
+  MyDialogRef.value.dialogContentRef.$el.style.height = `${
+    domInfo.baseH + event.movementY
+  }px`
+  // console.log('参数x', event.movementX)
+  // console.log('参数y', event.movementY)
+}
+// change 回调方式
+const onTdMousedown = (e: MouseEvent) => {
+  window.addEventListener('mousemove', updateTarget)
+  window.onmouseup = function () {
+    window.onmouseup = null
+    window.removeEventListener('mousemove', updateTarget)
+  }
+}
+</script>
+<template>
+  <!-- :width="typeOpen == 'add' ? '900px' : '600px'"
+    :height="typeOpen == 'add' ? '500px' : '200px'" -->
+
+  <div id="dia">
+    <el-dialog
+      class="container"
+      v-if="dialogVisible"
+      v-model="dialogVisible"
+      :title="title"
+      :draggable="draggable"
+      :fullscreen="MyFullscreen"
+      :close-on-click-modal="closeOnClicModal"
+      :close-on-press-escape="closeOnPressEscape"
+      :destroy-on-close="destroyOnClose"
+      @close="closeDialog"
+      :show-close="false"
+      @open="openChang"
+      :style="MyStyle"
+      :top="dTop"
+      ref="MyDialogRef"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <div class="title">
+            <div
+              :id="titleId"
+              :class="titleClass"
+            >
+              {{ title }}
+            </div>
+          </div>
+          <div class="btn">
+            <el-button
+              size="small"
+              type="primary"
+              :icon="FullScreen"
+              circle
+              @click="fullscreenChang"
+            />
+            <el-button
+              size="small"
+              type="danger"
+              :icon="Close"
+              circle
+              @click="closeDialog"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template #default="props">
+        <!-- <div class="my-body"> -->
+        <slot :data="MyDialogRef"></slot>
+        <slot
+          name="dialong"
+          :data="props"
+        ></slot>
+        <!-- </div> -->
+        <div
+          class="drag"
+          @mousedown="onTdMousedown($event)"
+        ></div>
+      </template>
+
+      <template
+        #footer
+        v-if="showfooter"
+      >
+        <slot name="myfooter">
+          <span class="dialog-footer">
+            <el-button @click="closeDialog">取消</el-button>
+            <el-button
+              type="primary"
+              @click="Submit"
+            >
+              保存
+            </el-button>
+          </span>
+        </slot>
+      </template>
+      <!-- <div class="drag" @mousedown="onTdMousedown($event)"></div> -->
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="less" scope></style>

package/src/dailog/index.ts

@@ -0,0 +1,4 @@
+import _Dialog from './dialog.vue'
+import { withInstall } from '../utils/index';
+export const Dialog = withInstall(_Dialog)
+export default Dialog

package/src/dailog/style/index.less

@@ -0,0 +1,69 @@
+#dia {
+  .el-dialog {
+    // height: 100% !important;
+    // max-height: calc(100% - 10vh);
+    .el-dialog__header {
+      height: 35px !important;
+      line-height: 35px !important;
+      margin: 0 !important;
+      padding: 0px !important;
+      background-color: rgba(0, 0, 0, 0.1) !important;
+
+      .my-header {
+        display: flex;
+        height: 35px;
+        line-height: 35px;
+        margin: 0 10px;
+        .title {
+          flex: 1;
+          .el-dialog__title {
+            margin: 0px !important;
+            padding: 0px !important;
+            height: 35px !important;
+            line-height: 35px;
+            margin: 0 !important;
+            padding: 0 !important;
+            text-align: left !important;
+            font-weight: 700;
+          }
+        }
+        .btn {
+          max-width: 100px;
+          display: flex;
+          justify-content: flex-end;
+          height: 35px;
+          line-height: 35px;
+          align-items: center;
+        }
+      }
+    }
+
+    // 内容区域
+    .el-dialog__body {
+      height: calc(100% - 65px);
+      overflow: auto;
+      .my-body {
+        text-align: left;
+      }
+    }
+  }
+  .drag {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    bottom: 3px;
+    // background: red;
+    right: 3px;
+    z-index: 999;
+    border-radius: inherit;
+    box-shadow: 2px 2px 0px -1px red;
+    cursor: se-resize; // move:十字
+  }
+
+  // .container {
+  // 	width: 100px;
+  // 	height: 100px;
+  // 	// background-color: #ccc;
+  // 	position: relative;
+  // }
+}

package/src/icon/icon.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="ea-icon">Icon1</div>
+</template>
+
+<script lang="ts" setup>
+import './style/index.less';
+</script>

package/src/icon/index.ts

@@ -0,0 +1,4 @@
+import _Icon from './icon.vue';
+import { withInstall } from '../utils/index';
+export const Icon = withInstall(_Icon);
+export default Icon;

package/src/icon/style/index.less

@@ -0,0 +1,3 @@
+.ea-icon {
+  color: red;
+}