br-dionysus 0.0.1

package/packages/TabPage/src/index.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="g-box">
+    <button
+      class="u-page-btn s-previous-btn"
+      v-if="isHorizontal"
+      @click="previous"
+    >
+      <svg
+        t="1704703004061"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4356"
+        width="16"
+        height="16"
+      >
+        <path
+          d="M671.807 927.804l-415.632-415.804 415.632-415.803 63.445 63.616-352.017 352.209 352.017 352.102z"
+          fill="#272636"
+          p-id="4357"
+        ></path>
+      </svg>
+    </button>
+    <div class="g-dionysus-box">
+      <ul
+        class="g-tab-page-box"
+        :style="ulStyle"
+        @mouseleave="hoverKey = -1"
+      >
+        <li
+          class="u-li"
+          v-for="item in props.modelValue"
+          :key="item.key"
+          :data-active="props.activeKey === item.key"
+          :data-active-before="activeBeforeKey === item.key"
+          :data-active-after="activeAfterKey === item.key"
+          @mouseenter="hoverKey = item.key"
+          :data-hover="hoverKey === item.key"
+          :data-hover-before="hoverBeforeKey === item.key"
+          :data-hover-after="hoverAfterKey === item.key"
+          @click="openPage(item.key)"
+        >
+          <div class="u-gp">
+            <!--<el-icon class="u-icon">-->
+            <!--  <component :is="item.icon"></component>-->
+            <!--</el-icon>-->
+            <!--<div v-html="item.icon"></div>-->
+            <!--<component :is="item.icon"></component>-->
+            <span class="u-sn">{{ item.title }}</span>
+            <div
+              class="u-btn"
+              @click.stop="close([item.key])"
+            >
+              <i class="s-icon"></i>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <button
+      class="u-page-btn s-next-btn"
+      v-if="isHorizontal"
+      @click="next"
+    >
+      <svg
+        t="1704703004061"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4356"
+        width="16"
+        height="16"
+      >
+        <path
+          d="M671.807 927.804l-415.632-415.804 415.632-415.803 63.445 63.616-352.017 352.209 352.017 352.102z"
+          fill="#272636"
+          p-id="4357"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+
+const isContentOverflowing = (element: Element) => {
+  return {
+    horizontal: element.scrollWidth > element.clientWidth,
+    vertical: element.scrollHeight > element.clientHeight
+  }
+}
+
+interface MenuItem {
+  title: string,
+  key: string
+}
+
+// interface TabPage {
+//   key: string,
+//   title: string
+// }
+
+const props = withDefaults(defineProps<{
+  modelValue?: MenuItem[], // 菜单数组
+  activeKey?: string, // 当前激活key
+  showRightClickMenu?: boolean // 是否显示右键菜单
+}>(), {
+  modelValue: () => [],
+  activeKey: '',
+  showRightClickMenu: false
+})
+
+const activeKey = ref(props.activeKey)
+watch(
+  () => props.activeKey,
+  (newVal: string) => {
+    activeKey.value = newVal
+  }
+)
+
+const emit = defineEmits(['close', 'click'])
+
+const list = computed(() => {
+  return props.modelValue.map((item: MenuItem) => {
+    return {
+      key: item.key,
+      title: item.title
+    }
+  })
+})
+
+const isHorizontal = ref(false)
+const horizontalMaxSize = ref(0)
+const horizontalSize = ref(0)
+
+const ulStyle = computed(() => {
+  const size = horizontalSize.value > horizontalMaxSize.value ? horizontalMaxSize.value : horizontalSize.value
+  return {
+    transform: 'translateX(-' + (isHorizontal.value ? size : 0) + 'px)'
+  }
+})
+
+const previous = () => {
+  horizontalSize.value -= 300
+}
+
+const next = () => {
+  horizontalSize.value += 300
+}
+
+const checkHorizontal = () => {
+  const el = document.querySelector('.g-tab-page-box')
+  if (!el) return false
+  const { horizontal } = isContentOverflowing(el)
+  isHorizontal.value = horizontal
+  if (horizontal) horizontalMaxSize.value = el.scrollWidth - el.clientWidth
+}
+
+watch(
+  () => list.value,
+  () => {
+    setTimeout(() => {
+      checkHorizontal()
+    })
+  }
+)
+onMounted(() => {
+  checkHorizontal()
+})
+
+const resizeObserver = new ResizeObserver(() => {
+  checkHorizontal()
+})
+onMounted(() => {
+  const el: Element | null = document.querySelector('.g-tab-page-box')
+  if (!el) return false
+  resizeObserver.observe(el)
+})
+
+const activeBeforeKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === props.activeKey)
+  if (index === -1) return -1
+  return list.value[index - 1]?.key
+})
+const activeAfterKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === props.activeKey)
+  if (index === -1) return -1
+  return list.value[index + 1]?.key
+})
+
+const hoverKey: any = ref(2)
+const hoverBeforeKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === hoverKey.value)
+  if (index === -1) return -1
+  return list.value[index - 1]?.key
+})
+const hoverAfterKey = computed(() => {
+  const index = list.value.findIndex(item => item.key === hoverKey.value)
+  if (index === -1) return -1
+  return list.value[index + 1]?.key
+})
+
+// const contextMenuConfig = [{
+//   title: '关闭当前',
+//   callback () {
+//     close([props.activeKey])
+//   }
+// }, {
+//   title: '关闭其他',
+//   callback () {
+//     const keys = list.value.filter((item: TabPage) => item.key !== props.activeKey).map((item: TabPage) => item.key)
+//     close(keys)
+//   }
+// }, {
+//   title: '关闭右侧',
+//   callback () {
+//     const keys = list.value.slice(list.value.findIndex(item => item.key === props.activeKey) + 1).map(item => item.key)
+//     close(keys)
+//   }
+// }, {
+//   title: '关闭左侧',
+//   callback () {
+//     const keys = list.value.slice(0, list.value.findIndex(item => item.key === props.activeKey)).map(item => item.key)
+//     close(keys)
+//   }
+// }]
+// console.log('contextMenuConfig', contextMenuConfig)
+
+// 打开标签页
+const openPage = (key: string) => {
+  emit('click', key)
+}
+
+// 关闭标签页
+const close = (keys: string[] = []) => {
+  emit('close', keys)
+}
+</script>
+
+<style scoped>
+.g-box {
+  position: relative;
+  overflow: hidden;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.g-box .u-page-btn {
+  position: absolute;
+  bottom: 0;
+  height: 33px;
+  border: 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+.g-box .s-previous-btn {
+  left: 0;
+}
+
+.g-box .s-next-btn {
+  right: 0;
+  transform: rotate(180deg);
+}
+
+.g-dionysus-box {
+  overflow: hidden;
+  width: 100%;
+}
+
+.g-tab-page-box {
+  display: flex;
+  color: #4a4a4a;
+  white-space: nowrap;
+  box-sizing: border-box;
+  box-shadow: 2px 0 8px #1d23290d;
+  transform: translateX(0);
+  transition: .2s;
+}
+
+.g-tab-page-box .u-li {
+  display: inline-block;
+  position: relative;
+  height: 33px;
+  font-size: 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  /*hover*/
+  /*激活*/
+}
+
+.g-tab-page-box .u-li .u-gp {
+  display: flex;
+  position: relative;
+  z-index: 1;
+  padding: 6px 8px;
+  height: 100%;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 6px 6px 0 0;
+  box-sizing: border-box;
+}
+
+.g-tab-page-box .u-li .u-gp:after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px 6px 0 6px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li .u-gp:before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px 6px 6px 0;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li:after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li:before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li[data-hover="true"] .u-gp, .g-tab-page-box .u-li[data-hover="true"] .u-gp:after, .g-tab-page-box .u-li[data-hover="true"] .u-gp:before, .g-tab-page-box .u-li[data-hover="true"][data-active="false"]:after, .g-tab-page-box .u-li[data-hover="true"][data-active="false"]:before {
+  background-color: #dfe1e5;
+}
+
+.g-tab-page-box .u-li[data-hover-before="true"] .u-gp:after {
+  background-color: #dfe1e5;
+}
+
+.g-tab-page-box .u-li[data-hover-before="true"]:after {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-hover-after="true"] .u-gp:before {
+  background-color: #dfe1e5;
+}
+
+.g-tab-page-box .u-li[data-hover-after="true"]:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active-before="true"] .u-gp:after {
+  background-color: #f0f0ff;
+}
+
+.g-tab-page-box .u-li[data-active-before="true"]:after {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active-after="true"] .u-gp:before {
+  background-color: #f0f0ff;
+}
+
+.g-tab-page-box .u-li[data-active-after="true"]:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active="true"] {
+  color: #646CFFFF;
+}
+
+.g-tab-page-box .u-li[data-active="true"] .u-gp, .g-tab-page-box .u-li[data-active="true"] .u-gp:before, .g-tab-page-box .u-li[data-active="true"] .u-gp:after, .g-tab-page-box .u-li[data-active="true"]:after, .g-tab-page-box .u-li[data-active="true"]:before {
+  background-color: #f0f0ff;
+}
+
+.g-tab-page-box .u-li .u-icon {
+  margin-right: 14px;
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li .u-sn {
+  pointer-events: none;
+}
+
+.g-tab-page-box .u-li .u-btn {
+  position: relative;
+  margin-left: 14px;
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+  border-radius: 50%;
+}
+
+.g-tab-page-box .u-li .u-btn:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: '';
+  border-radius: 50%;
+}
+
+.g-tab-page-box .u-li .u-btn:hover {
+  color: #fff;
+  background-color: #9ca3af;
+}
+
+.g-tab-page-box .u-li[data-active="true"] .u-btn:hover {
+  color: #fff;
+  background-color: #646CFFFF;
+}
+
+.g-tab-page-box .s-icon {
+  display: block;
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+
+.g-tab-page-box .s-icon:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 1px;
+  height: 10px;
+  background-color: rgba(48, 49, 51);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.g-tab-page-box .s-icon:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 1px;
+  height: 10px;
+  background-color: rgba(48, 49, 51);
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.g-tab-page-box .u-li[data-active="true"] .s-icon:after, .g-tab-page-box .u-li[data-active="true"] .s-icon:before {
+  background-color: rgb(100, 108, 255)
+}
+
+.g-tab-page-box .u-li .u-btn:hover .s-icon:after, .g-tab-page-box .u-li .u-btn:hover .s-icon:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active="true"] .u-btn:hover .s-icon:after, .g-tab-page-box .u-li[data-active="true"] .u-btn:hover .s-icon:before {
+  background-color: #fff;
+}
+
+.g-tab-page-box .u-li[data-active="false"][data-hover="false"][data-active-before="false"][data-hover-before="false"] .u-sn:after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 2;
+  content: '';
+  width: 1px;
+  height: 50%;
+  transform: translateY(-50%);
+  background-color: #4a4a4a;
+}
+
+.g-tab-page-box .u-li:nth-last-of-type(1)[data-active="false"][data-hover="false"] .u-sn:after {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+</style>

package/packages/index.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+
+/** 
+ * !--------- FBI WARNING ----------!
+ * 
+ * 根据 /packages 目录下的组件所生成的模块导出，请勿手动修改
+ */
+import { App, Plugin } from 'vue';
+
+import { ButtonPlugin } from './Button';
+import { FooPlugin } from './Foo';
+import { TabPagePlugin } from './TabPage';
+
+const MYKitPlugin: Plugin = {
+  install(app: App) {
+    ButtonPlugin.install?.(app);
+    FooPlugin.install?.(app);
+    TabPagePlugin.install?.(app);
+  },
+};
+
+export default MYKitPlugin;
+
+export * from './Button'
+export * from './Foo'
+export * from './TabPage'

package/packages/list.json

@@ -0,0 +1,20 @@
+[
+  {
+    "compName": "Button",
+    "compZhName": "按钮",
+    "compDesc": "这是一个按钮",
+    "compClassName": "button"
+  },
+  {
+    "compName": "Foo",
+    "compZhName": "测试组件",
+    "compDesc": "默认：这是一个新组件",
+    "compClassName": "foo"
+  },
+  {
+    "compName": "TabPage",
+    "compZhName": "标签页组件",
+    "compDesc": "默认：这是一个新组件",
+    "compClassName": "tabPage"
+  }
+]

package/script/copyDir.js

@@ -0,0 +1,7 @@
+const child_process = require('child_process');
+
+const copyDir = (src, dist) => {
+  child_process.spawn('cp', ['-r', , src, dist]);
+};
+
+copyDir('./packages', './docs');

package/script/genNewComp/.template/docs/README.md.tpl

@@ -0,0 +1,28 @@
+<!-- 加载 demo 组件 start -->
+<script setup>
+import demo from './demo.vue'
+</script>
+<!-- 加载 demo 组件 end -->
+
+<!-- 正文开始 -->
+
+# {{ compZhName }}
+
+{{ compDesc }}
+
+## 基础用法
+<Preview comp-name="{{compName}}" demo-name="demo">
+  <demo />
+</Preview>
+
+## 属性
+参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填
+:-: | :-: | :-: | :-: | :-: | :-:
+`arg1` | 第一个参数 | string | - | `default` | 否 
+`arg2` | 第二个参数 | string | - | `default` | 否
+
+## 事件
+事件名 | 说明 | 参数列表 | 参数说明
+:-: | :-: | :-: | :-:
+`click` | 点击事件 | $event | 原生的 dom event
+`customEvent` | 自定义事件 | [a, b, c] | a：参数一；b：参数二；c：参数三

package/script/genNewComp/.template/docs/demo.vue.tpl

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <my-{{ compClassName }} />
+  </div>
+</template>

package/script/genNewComp/.template/index.ts.tpl

@@ -0,0 +1,12 @@
+import { App, Plugin } from 'vue';
+import {{ compName }} from './src/index.vue';
+
+export const {{ compName }}Plugin: Plugin = {
+  install(app: App) {
+    app.component('my-{{ compClassName }}', {{ compName }});
+  },
+};
+
+export {
+  {{ compName }},
+};

package/script/genNewComp/.template/install.ts.tpl

@@ -0,0 +1,20 @@
+/* eslint-disable */
+
+/** 
+ * !--------- FBI WARNING ----------!
+ * 
+ * 根据 /packages 目录下的组件所生成的模块导出，请勿手动修改
+ */
+import { App, Plugin } from 'vue';
+
+{{ importPlugins }}
+
+const MYKitPlugin: Plugin = {
+  install(app: App) {
+    {{ installPlugins }}
+  },
+};
+
+export default MYKitPlugin;
+
+{{ exportPlugins }}

package/script/genNewComp/.template/router.ts.tpl

@@ -0,0 +1,25 @@
+/* eslint-disable prettier/prettier */
+
+/** 
+ * !--------- FBI WARNING ----------!
+ * 
+ * 根据 /packages 目录下的组件所生成的组件类侧边导航栏配置，请勿手动修改
+ */
+
+ import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'
+
+ const routes = [{{ routes }}];
+ 
+ const routerConfig = {
+   history: createWebHashHistory(),
+   routes,
+   scrollBehavior(to: any, from: any) {
+     if (to.path !== from.path) {
+       return { top: 0 };
+     }
+   },
+ };
+ 
+ const router = createRouter(routerConfig as RouterOptions);
+ 
+ export default router;

package/script/genNewComp/.template/src/index.vue.tpl

@@ -0,0 +1,15 @@
+<template>
+  <div class="my-{{ compClassName }}">
+    我是{{ compZhName }}组件
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style scoped>
+.my-{{ compClassName }} {
+  
+}
+</style>

package/script/genNewComp/index.js

@@ -0,0 +1,9 @@
+const infoCollector = require('./infoCollector')
+const tplReplacer = require('./tplReplacer')
+
+async function run() {
+  const meta = await infoCollector()
+  tplReplacer(meta)
+}
+
+run()