@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/components/layout/src/header.vue

@@ -0,0 +1,26 @@
+<template>
+  <header :class="ns.e('header')" :style="style">
+    <slot></slot>
+  </header>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import {PHeaderProps} from "./header";
+
+defineOptions({
+  name: "PHeader",
+  inheritAttrs: false
+})
+
+const ns = useNS('layout');
+const props = defineProps({...PHeaderProps});
+
+const style = computed(() => {
+  return {
+    width: props.height ? props.height : '',
+  }
+})
+
+</script>

package/packages/components/layout/src/layout.ts

@@ -0,0 +1,11 @@
+/*
+ * @description: 布局 Layout
+ * @author: MC.Yang
+ */
+
+/**
+ * 布局 Layout Props
+ */
+export const PLayoutProps = {
+
+}

package/packages/components/layout/src/layout.vue

@@ -0,0 +1,34 @@
+<template>
+  <section :class="classes">
+    <slot></slot>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {computed, provide, Ref, ref} from "vue";
+import {useNS} from "@bin-ui/hooks";
+
+export type LayoutProvideType = {
+  hasSide: Ref<boolean>;
+};
+
+defineOptions({
+  name: "PLayout",
+  inheritAttrs: false
+})
+
+const ns = useNS('layout');
+const hasSide = ref(false);
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    {
+      [`${ns.namespace}--with-aider`]: hasSide.value,
+    },
+  ]
+})
+
+provide('layout', {hasSide});
+
+</script>

package/packages/components/link/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 链接
+ * @author: MC.Yang
+ */
+import _Link from "./src/link.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Link = withInstall(_Link);
+
+export type PLinkInstance = InstanceType<typeof _Link>;
+
+export default {Link};
+export {Link};

package/packages/components/link/src/link.ts

@@ -0,0 +1,92 @@
+/*
+ * @description: 链接
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {TargetType} from "@bin-ui/typings";
+
+/**
+ * 链接类型
+ */
+const PLinkTypes: string [] = [
+    'primary',
+    'success',
+    'warning',
+    'info',
+    'danger',
+];
+
+/**
+ * 链接 Props
+ */
+export const PLinkProps = {
+
+    /**
+     * @description 链接的类型
+     */
+    type: String as PropType<(typeof PLinkTypes)[number]>,
+
+    /**
+     * @description 是否禁用链接
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 使得浏览器将链接的 URL 视为可下载资源
+     */
+    download: {
+        type: [String, Boolean] as PropType<string | boolean>,
+    },
+
+    /**
+     * @description 链接是否具有下划线
+     */
+    underline: Boolean,
+
+    /**
+     * @description 链接跳转的地址
+     */
+    href: String,
+
+    /**
+     * @description 链接的跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
+     * "_self"：内容在当前页面显示。
+     * "_blank"：内容在新页面显示。
+     * “three”：内容在对应窗口显示
+     * "_top"：在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架
+     * "_parent"：在父窗体中打开链接，在窗口与顶级框架中，等同于_self
+     */
+    target: {
+        type: String as PropType<TargetType>,
+        default: '_self',
+        validator(val: TargetType): boolean {
+            if (!val) return true;
+            return ['_blank', '_self', '_parent', '_top'].includes(val);
+        },
+    },
+
+    /**
+     * @description 链接的前缀图标
+     */
+    prefixIcon: String,
+
+    /**
+     * @description 链接后后缀图标
+     */
+    suffixIcon: String,
+
+}
+
+/**
+ * 链接事件
+ */
+export interface PLinkEmits {
+
+    /**
+     * @description 点击事件，禁用状态不会触发点击事件
+     * @param e click
+     * @param evt 事件
+     */
+    (e: 'click', evt: MouseEvent): void;
+
+}

package/packages/components/link/src/link.vue

@@ -0,0 +1,52 @@
+<template>
+  <a
+      ref="a"
+      :class="classes"
+      :href="props.disabled || !props.href ? undefined : props.href"
+      :target="!props.target ? undefined : props.target"
+      :download="!props.download ? undefined : props.download"
+      @click="handleClick"
+  >
+    <p-icon :target="props.prefixIcon" :class="ns.e('icon')"></p-icon>
+    <span :class="ns.e('inner')">
+			<slot></slot>
+		</span>
+    <p-icon :target="props.suffixIcon" :class="ns.e('icon')"></p-icon>
+  </a>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import {PLinkEmits, PLinkProps} from "./link";
+import {useNS} from "@bin-ui/hooks";
+
+defineOptions({
+  name: 'PLink',
+  inheritAttrs: true
+})
+
+const ns = useNS('link');
+const props = defineProps({...PLinkProps});
+const emits = defineEmits<PLinkEmits>();
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.m(props.type),
+    ns.is(props.disabled, 'disabled'),
+    ns.is(props.underline, 'underline'),
+  ]
+})
+
+const a = ref<Element | undefined>(undefined);
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.href || props.disabled) return;
+  emits('click', event);
+}
+
+</script>
+
+
+

package/packages/components/menu/index.ts

@@ -0,0 +1,28 @@
+/*
+ * @description: 导航菜单
+ * @author: MC.Yang
+ */
+import _Menu from "./src/menu.vue";
+import _HeadMenu from "./src/head-menu.vue";
+import _Submenu from "./src/submenu.vue";
+import _MendItem from "./src/menu-item.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Menu = withInstall(_Menu);
+const HeadMenu = withInstall(_HeadMenu);
+const Submenu = withInstall(_Submenu);
+const MendItem = withInstall(_MendItem);
+
+export type PMenuInstance = InstanceType<typeof _Menu>;
+export type PHeadMenuInstance = InstanceType<typeof _HeadMenu>;
+export type PSubmenuInstance = InstanceType<typeof _Submenu>;
+export type PMendItemInstance = InstanceType<typeof _MendItem>;
+
+export default {Menu, HeadMenu, Submenu, MendItem};
+
+export {
+    Menu,
+    HeadMenu,
+    Submenu,
+    MendItem
+};

package/packages/components/menu/src/head-menu-props.ts

@@ -0,0 +1,80 @@
+/*
+ * @description: 导航头部菜单
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PHeadMenuProps} from "./type";
+
+/*
+ * 导航头部菜单 Props
+ */
+export default {
+    /**
+     * @description 展开的子菜单集合
+     */
+    expanded: {
+        type: Array as PropType<PHeadMenuProps['expanded']>,
+        default: [],
+    },
+
+    /**
+     * @description 二级菜单展开方式，平铺展开和浮层展开
+     */
+    expandType: {
+        type: String as PropType<PHeadMenuProps['expandType']>,
+        default: 'normal' as PHeadMenuProps['expandType'],
+        validator(val: PHeadMenuProps['expandType']): boolean {
+            if (!val) return true;
+            return ['normal', 'popup'].includes(val);
+        },
+    },
+
+    /**
+     * @description 站点 LOGO
+     */
+    logo: {
+        type: Function as PropType<PHeadMenuProps['logo']>,
+    },
+
+    /**
+     * @description 导航操作区域
+     */
+    operations: {
+        type: Function as PropType<PHeadMenuProps['operations']>,
+    },
+
+    /**
+     * @description 主题
+     */
+    theme: {
+        type: String as PropType<PHeadMenuProps['theme']>,
+        default: 'light' as PHeadMenuProps['theme'],
+        validator(val: PHeadMenuProps['theme']): boolean {
+            if (!val) return true;
+            return ['light', 'dark'].includes(val);
+        },
+    },
+
+    /**
+     * @description 激活菜单项
+     */
+    value: {
+        type: [String, Number] as PropType<PHeadMenuProps['value']>,
+        default: undefined as PHeadMenuProps['value'],
+    },
+    modelValue: {
+        type: [String, Number] as PropType<PHeadMenuProps['value']>,
+        default: undefined as PHeadMenuProps['value'],
+    },
+
+
+    /**
+     * @description 激活菜单项发生变化时触发
+     */
+    onChange: Function as PropType<PHeadMenuProps['onChange']>,
+
+    /**
+     * @description 展开的菜单项发生变化时触发
+     */
+    onExpand: Function as PropType<PHeadMenuProps['onExpand']>,
+};

package/packages/components/menu/src/head-menu.vue

@@ -0,0 +1,191 @@
+<template>
+  <div :class="classes">
+    <div class="p-head-menu__inner">
+      <div v-if="logo" :class="ns.e('logo')">
+        <component :is="logo[0]"/>
+      </div>
+      <ul :class="ns.namespace">
+        <component :is="renderMenuContent"/>
+      </ul>
+      <div v-if="operations" :class="ns.e('operations')">
+        <component v-for="item in operations" :is="item"/>
+      </div>
+    </div>
+    <component v-if="props.expandType === 'normal'" :is="renderNormalSubmenu"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, h, onMounted, provide, ref, watch} from "vue";
+import {reactive, toRefs} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import VMenu, {VMenuData} from "./v-menu";
+import {Tabs} from "../../tabs";
+import HeadMenuProps from "./head-menu-props";
+import {MenuValue, OpenType, PMenuInterface} from "./type";
+import useVModel from "@bin-ui/hooks/useVModel";
+import useDefaultValue from "@bin-ui/hooks/useDefaultValue";
+import {useContent, usePNode} from "@bin-ui/tools/element/render-node";
+
+defineOptions({
+  name: "PHeadMenu",
+  inheritAttrs: false
+})
+
+const props = defineProps({...HeadMenuProps});
+
+const instance = getCurrentInstance();
+const renderPNode = usePNode();
+const renderContent = useContent();
+const logo = renderPNode('logo');
+const operations = renderContent('operations', 'options');
+
+const {value, modelValue, expanded} = toRefs(props);
+const [activeValue, setActiveValue] = useVModel(value, modelValue, undefined, props.onChange);
+const [expandValues, setExpanded] = useDefaultValue(expanded, undefined, props.onExpand, 'expanded');
+const activeValues = ref<Array<MenuValue>>([]);
+const submenu = reactive<Array<VMenuData>>([]);
+const mode = ref(props.expandType);
+const theme = computed(() => props.theme);
+
+const vMenu = new VMenu({isMutex: true, expandValues: expandValues?.value});
+provide<PMenuInterface>('PMenu', {
+  mode,
+  theme,
+  vMenu,
+  isHead: true,
+  expandValues,
+  activeValue,
+  activeValues,
+  select: (value: MenuValue) => {
+    setActiveValue(value);
+  },
+  open: (value: MenuValue, type?: OpenType) => {
+    const expanded = expandValues?.value ? [...expandValues.value] : [];
+    const index = expanded.indexOf(value);
+
+    if (mode.value === 'popup') {
+      if (type === 'add') {
+        if (index === -1) {
+          // 可能初始 expanded 里包含了该 value
+          expanded.push(value);
+        }
+      } else if (type === 'remove') {
+        expanded.splice(index, 1);
+      }
+    } else if (mode.value === 'normal' && value !== undefined) {
+      expanded.splice(0, 1);
+      if (index === -1) {
+        expanded.push(value);
+      }
+    }
+    setExpanded(expanded);
+  },
+});
+
+// 处理展开的子菜单
+const handleSubmenuExpand = (value: MenuValue) => {
+  const ans = vMenu.getChild(value);
+  submenu.length = 0;
+  submenu.push(...ans);
+};
+
+// 修改活动的菜单值
+const updateActiveValues = (value: MenuValue) => {
+  activeValues.value = vMenu.select(value);
+};
+
+// 处理选项卡更改
+const handleTabChange = (value: MenuValue) => {
+  setActiveValue(value);
+  handleClickSubMenuItem(value);
+};
+
+// 处理单击子菜单项
+const handleClickSubMenuItem = (value: MenuValue) => {
+  const activeMenuItem: any = submenu.find((v) => v.value === value);
+  activeMenuItem.onClick?.({value});
+  const {to, href, replace} = activeMenuItem;
+  if (href) {
+    window.location.href = activeMenuItem.href;
+  }
+  const router = activeMenuItem.router || instance?.appContext.config.globalProperties.$router;
+  if (to && router) {
+    replace ? router.replace(to) : router.push(to);
+  }
+};
+
+// watch
+watch(
+    expandValues,
+    (value) => {
+      if (value && mode.value === 'normal') {
+        handleSubmenuExpand(value[0]);
+      }
+    });
+watch(
+    activeValue,
+    (value) => {
+      if (value) {
+        updateActiveValues(value);
+      }
+    },
+);
+watch(
+    () => props.expandType,
+    (value) => {
+      mode.value = value;
+    },
+);
+
+// onMounted
+onMounted(() => {
+  if (activeValue.value) {
+    activeValues.value = vMenu.select(activeValue.value);
+    if (expandValues.value && expandValues.value.length > 0) {
+      // 顶部导航只能同时展开一个子菜单
+      handleSubmenuExpand(expandValues.value[0]);
+    }
+  }
+});
+
+// 样式
+const ns = useNS('menu');
+const classes = computed(() => {
+  return [
+    "p-head-menu",
+    ns.namespace,
+    ns.m(props.theme),
+  ]
+});
+
+// 渲染菜单内容
+const renderMenuContent = () => {
+  return instance?.slots.default?.() || instance?.slots.content?.() || [];
+};
+
+// 渲染正常子菜单
+const renderNormalSubmenu = () => {
+  if (submenu.length === 0) return null;
+  let tabPanels: Array<any> = [];
+  submenu.map((item) => {
+    tabPanels.push({
+      value: item.value,
+      label: item.vNode,
+    });
+  })
+  const renderSubmenu = h(Tabs, {
+    value: activeValue.value,
+    list: tabPanels,
+    onChange: (value: MenuValue) => handleTabChange(value)
+  });
+
+  return h('ul', {
+    class: [
+      'p-head-menu__submenu',
+      'p-submenu',
+    ],
+  }, renderSubmenu);
+};
+
+</script>

package/packages/components/menu/src/menu-item-props.ts

@@ -0,0 +1,93 @@
+/*
+ * @description: 导航菜单项
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PMenuItemProps} from "./type";
+
+/*
+ * 导航菜单项 Props
+ */
+export default {
+    /**
+     * @description 菜单项内容
+     */
+    content: {
+        type: [String, Function] as PropType<PMenuItemProps['content']>,
+    },
+
+    /**
+     * @description 菜单项内容，同 content
+     */
+    default: {
+        type: [String, Function] as PropType<PMenuItemProps['default']>,
+    },
+
+    /**
+     * @description 是否禁用菜单项展开/收起/跳转等功能
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 跳转链接，菜单项渲染为 a 标签，当 routerLink 为 true 时将使用 Router 进行路由跳转
+     */
+    href: {
+        type: String,
+        default: '',
+    },
+
+    /**
+     * @description 图标
+     */
+    icon: {
+        type: Function as PropType<PMenuItemProps['icon']>,
+    },
+
+    /**
+     * @description 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录）
+     */
+    replace: Boolean,
+
+    /**
+     * @description 路由对象。如果项目存在 Router，则默认使用 Router
+     */
+    router: {
+        type: Object as PropType<PMenuItemProps['router']>,
+    },
+
+    /**
+     * @description 菜单项内容是否渲染为使用Router进行跳转的a标签，当且仅当 Router 存在时，该 API 有效
+     */
+    routerLink: Boolean,
+
+    /**
+     * @description 链接或路由跳转方式
+     */
+    target: {
+        type: String as PropType<PMenuItemProps['target']>,
+        default: '_self' as PMenuItemProps['target'],
+        validator(val: PMenuItemProps['target']): boolean {
+            if (!val) return true;
+            return ['_blank', '_self', '_parent', '_top'].includes(val);
+        },
+    },
+
+    /**
+     * @description 路由跳转目标，当且仅当 Router 存在时，该 API 有效
+     */
+    to: {
+        type: [String, Object] as PropType<PMenuItemProps['to']>,
+    },
+
+    /**
+     * @description 菜单项唯一标识
+     */
+    value: {
+        type: [String, Number] as PropType<PMenuItemProps['value']>,
+    },
+
+    /**
+     * @description 点击时触发
+     */
+    onClick: Function as PropType<PMenuItemProps['onClick']>,
+};