From c6e756c1f0638737649ea28b9ccea400beceae26 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 6 Jan 2023 09:35:33 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/tab.md                          | 17 ++++++
 .../src/components/tabs/OTabPane.vue          | 52 +++++++++++++++++++
 .../opendesign/src/components/tabs/OTabs.vue  | 46 ++++++++++++++++
 .../components/tabs/__demo__/IndexTabs.vue    | 11 ++++
 .../components/tabs/__demo__/TabsDefault.vue  | 28 ++++++++++
 .../opendesign/src/components/tabs/index.ts   | 12 +++++
 .../opendesign/src/components/tabs/provide.ts | 10 ++++
 .../src/components/tabs/style/index.scss      |  8 +++
 .../src/components/tabs/style/index.ts        |  1 +
 .../src/components/tabs/style/var.scss        | 33 ++++++++++++
 .../opendesign/src/components/tabs/types.ts   |  0
 packages/portal/src/router.ts                 |  6 +++
 12 files changed, 224 insertions(+)
 create mode 100644 packages/docs/tab.md
 create mode 100644 packages/opendesign/src/components/tabs/OTabPane.vue
 create mode 100644 packages/opendesign/src/components/tabs/OTabs.vue
 create mode 100644 packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
 create mode 100644 packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
 create mode 100644 packages/opendesign/src/components/tabs/index.ts
 create mode 100644 packages/opendesign/src/components/tabs/provide.ts
 create mode 100644 packages/opendesign/src/components/tabs/style/index.scss
 create mode 100644 packages/opendesign/src/components/tabs/style/index.ts
 create mode 100644 packages/opendesign/src/components/tabs/style/var.scss
 create mode 100644 packages/opendesign/src/components/tabs/types.ts

diff --git a/packages/docs/tab.md b/packages/docs/tab.md
new file mode 100644
index 00000000..7e970cae
--- /dev/null
+++ b/packages/docs/tab.md
@@ -0,0 +1,17 @@
+# Tab 页签
+
+## props
+
+| name       | type                        | 默认值 | 说明     |
+| :--------- | :-------------------------- | :----- | -------- |
+| modelValue | string \| number（v-model） | false  | 开关状态 |
+
+## event
+
+| name   | 参数                      | 说明           |
+| :----- | :------------------------ | :------------- |
+| change | value: boolean; ev: Event | 选择切换后触发 |
+
+## expose
+
+## slot
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
new file mode 100644
index 00000000..f013f9ad
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { inject, ref, watch } from 'vue';
+import { tabsInjectKey } from './provide';
+
+interface SelectPropT {
+  /**
+   * 下拉框的值
+   */
+  value: string | number;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<SelectPropT>(), {
+  value: new Date().getTime,
+  label: undefined,
+});
+
+const tabsInjection = inject(tabsInjectKey);
+
+// nav 插槽处理
+const navRef = ref();
+
+function init() {
+  if (!tabsInjection) {
+    console.warn('OTabPane should used in OTabs!');
+    return;
+  }
+
+  const { addTabNav, navRefs } = tabsInjection;
+  // 增加tab项
+  addTabNav(props.value);
+
+  // 将nav插槽内容移到父容器中
+  watch(
+    navRefs[props.value],
+    (el) => {
+      navRef.value = el;
+    },
+    { immediate: true }
+  );
+}
+
+init();
+</script>
+<template>
+  <div class="o-tab-pane" :class="{ active: tabsInjection?.value.value === props.value }">
+    <Teleport v-if="navRef" :to="navRef">
+      <slot name="nav">{{ props.label || props.value }}</slot>
+    </Teleport>
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
new file mode 100644
index 00000000..d64de569
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Ref, provide, ref } from 'vue';
+import { tabsInjectKey } from './provide';
+
+interface SelectPropT {
+  /**
+   * tab选中的nav值
+   * v-model
+   */
+  modelValue: string | number;
+}
+
+const props = withDefaults(defineProps<SelectPropT>(), {
+  modelValue: '',
+});
+
+const activeVal = ref(props.modelValue);
+const tabNavs = ref<Array<string | number>>([]);
+const navRefs: Record<string | number, Ref<HTMLElement | undefined>> = {};
+const getNavRef = (el: HTMLElement, value: string | number) => {
+  navRefs[value].value = el;
+};
+
+provide(tabsInjectKey, {
+  value: activeVal,
+  navRefs,
+  addTabNav(value) {
+    navRefs[value] = ref();
+    if (!tabNavs.value.includes(value)) {
+      tabNavs.value.push(value);
+    }
+  },
+});
+</script>
+<template>
+  <div class="o-tabs">
+    <div class="o-tabs-head">
+      <div class="o-tabs-navs">
+        <div v-for="item in tabNavs" :key="item" :ref="(el) => getNavRef(el as HTMLElement, item)" class="o-tabs-nav"></div>
+      </div>
+    </div>
+    <div class="o-tabs-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
new file mode 100644
index 00000000..35e857c7
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import '../style';
+
+import TabsDefault from './TabsDefault.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <TabsDefault />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
new file mode 100644
index 00000000..f24ac97b
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTabs, OTabPane } from '../index';
+import { IconSearch } from '../../icons';
+const activeTab = ref('');
+</script>
+<template>
+  <h4>Default</h4>
+  <section>
+    <OTabs v-model="activeTab">
+      <OTabPane value="1">pane 1</OTabPane>
+      <OTabPane value="2">pane 2</OTabPane>
+      <OTabPane value="3">pane 3</OTabPane>
+      <OTabPane value="4">pane 4</OTabPane>
+    </OTabs>
+  </section>
+  <section>
+    <OTabs v-model="activeTab">
+      <OTabPane value="a"><template #nav>nav 1</template>pane 1 </OTabPane>
+      <OTabPane value="b">pane 2</OTabPane>
+      <OTabPane value="c">
+        <template #nav><IconSearch /> nav 3</template>pane 3
+      </OTabPane>
+      <OTabPane value="d"><template #nav>nav 4</template>pane 4</OTabPane>
+    </OTabs>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/tabs/index.ts b/packages/opendesign/src/components/tabs/index.ts
new file mode 100644
index 00000000..4290a713
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/index.ts
@@ -0,0 +1,12 @@
+import _OTabs from './OTabs.vue';
+import OTabPane from './OTabPane.vue';
+import type { App } from 'vue';
+
+const OTabs = Object.assign(_OTabs, {
+  OTabPane,
+  install(app: App) {
+    app.component(_OTabs.name, _OTabs);
+  },
+});
+
+export { OTabs, OTabPane };
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts
new file mode 100644
index 00000000..b661adef
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/provide.ts
@@ -0,0 +1,10 @@
+import { InjectionKey, Ref } from 'vue';
+
+
+export const tabsInjectKey: InjectionKey<{
+  value: Ref<string | number>
+  navRefs: Record<string | number, Ref<HTMLElement | undefined>>,
+  addTabNav: (value: string | number) => void,
+}> =
+  Symbol('provide-tabs');
+
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
new file mode 100644
index 00000000..25d3f8f9
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -0,0 +1,8 @@
+@import './var.scss';
+
+.o-tabs-navs {
+  display: flex;
+}
+.o-tabs-nav {
+  padding: 4px 8px;
+}
diff --git a/packages/opendesign/src/components/tabs/style/index.ts b/packages/opendesign/src/components/tabs/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss
new file mode 100644
index 00000000..3788e559
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/style/var.scss
@@ -0,0 +1,33 @@
+.o-select {
+  --select-text-size: var(--o-font_size-text);
+  --select-text-height: var(--o-line_height-text);
+
+  --select-height-s: var(--o-size-s);
+  --select-height-m: var(--o-size-m);
+  --select-height-l: var(--o-size-l);
+
+  --select-radius-s: var(--o-radius-s);
+  --select-radius-m: var(--o-radius-s);
+  --select-radius-l: var(--o-radius-s);
+
+  --select-border: var(--o-color-info1);
+  --select-border_hover: var(--o-color-primary2);
+  --select-border_active: var(--o-color-primary3);
+  --select-border_disabled: var(--o-color-info1);
+
+  --select-bg: var(--o-color-bg1);
+  --select-bg_hover: var(--o-color-bg2);
+  --select-bg_disabled: var(--o-color-info4);
+
+  --select-color: var(--o-color-text2);
+  --select-color_disabled: var(--o-color-text4);
+
+  --select-icon-color: var(--o-color-text3);
+}
+
+.o-select-options {
+  --select-options-bg: var(--o-color-bg2);
+  --select-options-shadow: none;
+  --select-options-border: 1px solid var(--o-color-primary2);
+  --select-options-radius: var(--o-radius-s);
+}
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index ce56d602..d7fea009 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -69,6 +69,12 @@ export const routes = [
     label: '多选',
     component: () => import('@demo/checkbox/__demo__/IndexCheckbox.vue'),
   },
+  {
+    path: '/tabs',
+    name: 'Tabs',
+    label: '标签页',
+    component: () => import('@demo/tabs/__demo__/IndexTabs.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee


From 5d8a109120dc5845bb28a8b3acad0ea695b45cfc Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 6 Jan 2023 23:05:58 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/tab.md                          |  42 +++++-
 .../src/components/_shared/icons.ts           |  10 +-
 .../src/components/_shared/vue-utils.ts       |  60 +++++++++
 .../src/components/popover/OPopover.vue       |   4 +-
 .../src/components/popup/OPopup.vue           |  15 ++-
 .../popup/__demo__/PopupContainer.vue         |   2 +-
 .../src/components/select/OSelect.vue         |  12 +-
 .../src/components/style/animation.scss       |  40 +++++-
 .../src/components/style/index.scss           |   4 +-
 .../src/components/tabs/OTabPane.vue          | 124 +++++++++++-------
 .../opendesign/src/components/tabs/OTabs.vue  |  98 +++++++++++---
 .../src/components/tabs/TabContent.vue        |  83 ++++++++++++
 .../opendesign/src/components/tabs/TabNav.vue |  96 ++++++++++++++
 .../components/tabs/__demo__/TabsDefault.vue  |  48 ++++---
 .../opendesign/src/components/tabs/provide.ts |  24 +++-
 .../src/components/tabs/style/index.scss      |  71 +++++++++-
 .../src/components/tabs/style/var.scss        |  35 +----
 17 files changed, 627 insertions(+), 141 deletions(-)
 create mode 100644 packages/opendesign/src/components/_shared/vue-utils.ts
 create mode 100644 packages/opendesign/src/components/tabs/TabContent.vue
 create mode 100644 packages/opendesign/src/components/tabs/TabNav.vue

diff --git a/packages/docs/tab.md b/packages/docs/tab.md
index 7e970cae..d66adef0 100644
--- a/packages/docs/tab.md
+++ b/packages/docs/tab.md
@@ -2,16 +2,46 @@
 
 ## props
 
-| name       | type                        | 默认值 | 说明     |
-| :--------- | :-------------------------- | :----- | -------- |
-| modelValue | string \| number（v-model） | false  | 开关状态 |
+### OTabs
+
+| name       | type                        | 默认值 | 说明                           |
+| :--------- | :-------------------------- | :----- | ------------------------------ |
+| modelValue | string \| number（v-model） | ''     | 开关状态                       |
+| lazy       | boolean                     | false  | 是否在首次激活标签时再挂载内容 |
+
+### OTabPane
+
+| name          | type             | 默认值          | 说明                           |
+| :------------ | :--------------- | :-------------- | ------------------------------ |
+| value         | string \| number | uid             | tab id                         |
+| label         | string           | undefined       | 页签文本                       |
+| transition    | string           | o-fade-up-enter | 页签切换时过渡动画             |
+| lazy          | boolean          | false           | 是否在首次激活标签时再挂载内容 |
+| unmountOnHide | boolean          | false           | 是否在未激活时卸载页签内容     |
+| disabled      | boolean          | false           | 是否禁用选中                   |
+| closable      | boolean          | false           | 是否可以删除                   |
 
 ## event
 
-| name   | 参数                      | 说明           |
-| :----- | :------------------------ | :------------- |
-| change | value: boolean; ev: Event | 选择切换后触发 |
+### OTabs
+
+| name   | 参数                                                | 说明           |
+| :----- | :-------------------------------------------------- | :------------- |
+| change | value: string \| number, oldValue: string \| number | 页签切换后触发 |
+| delete | value: string \| number                             | 页签删除后触发 |
 
 ## expose
 
 ## slot
+
+### OTabs
+
+| name | 说明                 |
+| :--- | :------------------- |
+| act  | 页签右侧额外内容插槽 |
+
+### OTabPane
+
+| name | 说明     |
+| :--- | :------- |
+| nav  | 页签插槽 |
diff --git a/packages/opendesign/src/components/_shared/icons.ts b/packages/opendesign/src/components/_shared/icons.ts
index 27320a3a..97c71eb7 100644
--- a/packages/opendesign/src/components/_shared/icons.ts
+++ b/packages/opendesign/src/components/_shared/icons.ts
@@ -5,7 +5,8 @@ import { Component, shallowRef } from 'vue';
 import {
   IconLoading as _IconLoading,
   IconLink as IconLink,
-  IconArrowRight
+  IconArrowRight,
+  IconX
 } from '../icons';
 
 /**
@@ -30,4 +31,11 @@ export function initLinkPrefixIcon(icon: Component) {
 export const IconLinkArrow = shallowRef<Component>(IconArrowRight);
 export function initLinkArrowIcon(icon: Component) {
   IconLinkArrow.value = icon;
+}
+/**
+ * close图标
+ */
+export const IconClose = shallowRef<Component>(IconX);
+export function initCloseIcon(icon: Component) {
+  IconClose.value = icon;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/_shared/vue-utils.ts b/packages/opendesign/src/components/_shared/vue-utils.ts
new file mode 100644
index 00000000..8a5dbc94
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/vue-utils.ts
@@ -0,0 +1,60 @@
+import { Component, onMounted, Slots, VNode, VNodeTypes } from 'vue';
+
+// 来着vuejs/core
+// https://github.com/vuejs/core/blob/main/packages/shared/src/shapeFlags.ts
+export const enum ShapeFlags {
+  ELEMENT = 1,
+  FUNCTIONAL_COMPONENT = 1 << 1,
+  STATEFUL_COMPONENT = 1 << 2,
+  TEXT_CHILDREN = 1 << 3,
+  ARRAY_CHILDREN = 1 << 4,
+  SLOTS_CHILDREN = 1 << 5,
+  TELEPORT = 1 << 6,
+  SUSPENSE = 1 << 7,
+  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
+  COMPONENT_KEPT_ALIVE = 1 << 9,
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
+}
+/**
+ * 判断vnode是不是element
+ */
+export const isElement = (vnode: VNode) => {
+  return Boolean(vnode && vnode.shapeFlag & ShapeFlags.ELEMENT);
+};
+
+/**
+ * 判断vnode是不是vue组件
+ * @param vnode vnode节点
+ * @param type 组件信息
+ */
+export function isComponent(vnode: VNode, type?: VNodeTypes): type is Component {
+  return Boolean(vnode && vnode.shapeFlag & ShapeFlags.COMPONENT);
+}
+/**
+ * 判断vnode是不是vue组件
+ */
+export const isSlotsChildren = (vnode: VNode, children: VNode['children']): children is Slots => {
+  return Boolean(vnode && vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN);
+};
+
+// TODO
+export function useSlotElement(componentName?: string) {
+  let children: VNode[] | null = null;
+  const components = [];
+  // const
+  onMounted(() => {
+    children?.forEach(child => {
+      console.log(child, isComponent(child));
+      if (isComponent(child, child.type)) {
+        if (componentName && child.type.name === componentName) {
+          components.push(child);
+        }
+      }
+    });
+  });
+  return {
+    setSlotChildren(nodes: VNode[]) {
+      children = nodes;
+    }
+  };
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index dd13980a..174d3993 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -43,7 +43,7 @@ const props = defineProps({
   /**
    * 是否在隐藏时卸载
    */
-  unmountOnClose: {
+  unmountOnHide: {
     type: Boolean,
     default: true,
   },
@@ -71,7 +71,7 @@ const updateVisible = (val: boolean) => {
     :target="props.target"
     :wrapper="props.wrapper"
     anchor-class="o-popover-anchor"
-    :unmount-on-close="props.unmountOnClose"
+    :unmount-on-hide="props.unmountOnHide"
     @update:visible="updateVisible"
   >
     <div class="o-popover-wrap">
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 8f4c04d8..7ef18ecc 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -85,7 +85,7 @@ const props = defineProps({
   /**
    * 是否在popup隐藏时unmout
    */
-  unmountOnClose: {
+  unmountOnHide: {
     type: Boolean,
     default: true,
   },
@@ -117,6 +117,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+    default: 'o-zoom-fade',
+  },
 });
 
 const emits = defineEmits<{ (e: 'update:visible', val: boolean): void; (e: 'change', val: boolean): void }>();
@@ -307,7 +314,7 @@ const handleTransitionStart = () => {
 };
 const handleTransitionEnd = () => {
   isAnimating.value = false;
-  if (!visible.value && props.unmountOnClose) {
+  if (!visible.value && props.unmountOnHide) {
     toMount.value = false;
   }
 };
@@ -424,7 +431,7 @@ onUnmounted(() => {
 </script>
 <template>
   <teleport v-if="wrapperEl" :to="props.wrapper">
-    <ResizeObserver v-if="toMount || visible || !props.unmountOnClose" @resize="onPopupResize">
+    <ResizeObserver v-if="toMount || visible || !props.unmountOnHide" @resize="onPopupResize">
       <div
         ref="popupRef"
         class="o-popup"
@@ -435,7 +442,7 @@ onUnmounted(() => {
         @mouseleave="onPopupHoverOut"
       >
         <Transition
-          name="o-zoom-fade"
+          :name="props.transition"
           :appear="true"
           @before-enter="handleTransitionStart"
           @after-enter="handleTransitionEnd"
diff --git a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
index 52f68bd8..666274aa 100644
--- a/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
+++ b/packages/opendesign/src/components/popup/__demo__/PopupContainer.vue
@@ -36,7 +36,7 @@ setTimeout(() => {
       <OButton ref="btn8" class="btn8">BL btn8 </OButton>
       <OButton ref="btn9" class="btn9">LT btn9 </OButton>
 
-      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click" :unmount-on-close="false">
+      <OPopup position="tl" :target="btn1" wrapper="#wrap" trigger="click" :unmount-on-hide="false">
         <div class="popup-box">
           <div>{{ content }}</div>
           <div>{{ content }}</div>
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index d707d32e..7896254e 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -50,12 +50,16 @@ interface SelectPropT {
    * 是否在结束选择时，卸载下拉选项
    * v-model
    */
-  unmountOnClose?: boolean;
+  unmountOnHide?: boolean;
   /**
    * 默认初始值对应的label显示，不传则使用modelValue
    * 当unmountOnClose为true时，存在初始值对应label无法获取问题，可使用该属性指定初始值
    */
   defaultLabel?: string;
+  /**
+   * 过渡名称
+   */
+  transition?: string;
 }
 const props = withDefaults(defineProps<SelectPropT>(), {
   modelValue: '',
@@ -67,7 +71,8 @@ const props = withDefaults(defineProps<SelectPropT>(), {
   optionWidthMode: 'min-width',
   optionWrapClass: '',
   defaultLabel: '',
-  unmountOnClose: true,
+  unmountOnHide: true,
+  transition: undefined,
 });
 
 const activeLabel = ref(props.defaultLabel || props.modelValue);
@@ -115,7 +120,8 @@ provide(selectOptionInjectKey, {
 
     <OPopup
       v-model:visible="showOption"
-      :unmount-on-close="props.unmountOnClose"
+      :transition="props.transition"
+      :unmount-on-hide="props.unmountOnHide"
       :position="props.optionPosition"
       :target="selectRef"
       :trigger="props.trigger"
diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/components/style/animation.scss
index cc14a6cf..bf302ba8 100644
--- a/packages/opendesign/src/components/style/animation.scss
+++ b/packages/opendesign/src/components/style/animation.scss
@@ -24,8 +24,46 @@
 }
 
 .o-zoom-fade-enter-active {
-  animation: o-zoom-fade-in var(--o-transition-duration-2);
+  animation: o-zoom-fade-in var(--o-transition-duration-long);
 }
 .o-zoom-fade-leave-active {
   animation: o-zoom-fade-in var(--o-transition-duration-1) reverse;
 }
+
+@keyframes o-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes o-fade-up {
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+
+.o-fade-up-enter-enter-active {
+  animation: o-fade-up var(--o-transition-duration-6);
+}
+.o-fade-in-enter-enter-active {
+  animation: o-fade-in var(--o-transition-duration-6);
+}
+
+.o-fade-up-enter-active,
+.o-fade-up-leave-active {
+  transition: all var(--o-transition-duration-6) var(--o-transition-function-ease-out);
+}
+
+.o-fade-up-enter-from,
+.o-fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 07b57ffe..9546225a 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -12,11 +12,13 @@
   --o-transition-duration-1: 0.1s;
   --o-transition-duration-2: 0.2s;
   --o-transition-duration-3: 0.3s;
+  --o-transition-duration-4: 0.4s;
+  --o-transition-duration-6: 0.6s;
   --o-transition-duration-long: 1.5s;
 
   --o-transition-function-linear: linear;
   --o-transition-function-ease-in: ease-in;
-  --o-transition-function-ease-out: ease-out;
+  --o-transition-function-ease-out: cubic-bezier(0, 0, 0.25, 1);
 }
 
 // icons
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index f013f9ad..39f5faca 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -1,52 +1,84 @@
-<script setup lang="ts">
-import { inject, ref, watch } from 'vue';
+<script lang="ts">
+import { defineComponent, getCurrentInstance, inject, reactive } from 'vue';
 import { tabsInjectKey } from './provide';
 
-interface SelectPropT {
-  /**
-   * 下拉框的值
-   */
-  value: string | number;
-  label?: string;
-}
-
-const props = withDefaults(defineProps<SelectPropT>(), {
-  value: new Date().getTime,
-  label: undefined,
-});
-
-const tabsInjection = inject(tabsInjectKey);
-
-// nav 插槽处理
-const navRef = ref();
-
-function init() {
-  if (!tabsInjection) {
-    console.warn('OTabPane should used in OTabs!');
-    return;
-  }
+export default defineComponent({
+  name: 'OTabs',
+  props: {
+    /**
+     * 页签项的key
+     */
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * 页签项的文本，如果不传，使用nav插槽或者value
+     */
+    label: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * 是否在隐藏时卸载页签内容
+     */
+    unmountOnHide: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 页签切换时过渡动画
+     */
+    transition: {
+      type: String,
+      default: 'o-fade-in-enter',
+    },
+    /**
+     * 是否禁用选中该页签
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否可以删除该页签
+     */
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否页签首次激活时再加载页签内容
+     */
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const tabsInjection = inject(tabsInjectKey);
 
-  const { addTabNav, navRefs } = tabsInjection;
-  // 增加tab项
-  addTabNav(props.value);
+    const instance = getCurrentInstance();
 
-  // 将nav插槽内容移到父容器中
-  watch(
-    navRefs[props.value],
-    (el) => {
-      navRef.value = el;
-    },
-    { immediate: true }
-  );
-}
+    if (instance?.uid) {
+      const id = props.value || instance?.uid;
 
-init();
+      tabsInjection?.addTabItem(
+        id,
+        reactive({
+          value: id,
+          label: props.label,
+          lazy: tabsInjection.lazy || props.lazy,
+          disabled: props.disabled,
+          closable: props.closable,
+          transition: props.transition,
+          unmountOnHide: props.unmountOnHide,
+          attrs: attrs,
+          slots: slots,
+        })
+      );
+    }
+    return () => {};
+  },
+});
 </script>
-<template>
-  <div class="o-tab-pane" :class="{ active: tabsInjection?.value.value === props.value }">
-    <Teleport v-if="navRef" :to="navRef">
-      <slot name="nav">{{ props.label || props.value }}</slot>
-    </Teleport>
-    <slot></slot>
-  </div>
-</template>
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
index d64de569..33695467 100644
--- a/packages/opendesign/src/components/tabs/OTabs.vue
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -1,46 +1,106 @@
 <script setup lang="ts">
-import { Ref, provide, ref } from 'vue';
-import { tabsInjectKey } from './provide';
+import { computed, provide, reactive, ref } from 'vue';
+import { tabsInjectKey, TabNavData } from './provide';
+import TabNav from './TabNav.vue';
+import TabContent from './TabContent.vue';
 
 interface SelectPropT {
   /**
    * tab选中的nav值
    * v-model
    */
-  modelValue: string | number;
+  modelValue?: string | number;
+  /**
+   * 是否激活时再加载
+   */
+  lazy?: boolean;
 }
 
 const props = withDefaults(defineProps<SelectPropT>(), {
   modelValue: '',
+  lazy: false,
 });
 
-const activeVal = ref(props.modelValue);
-const tabNavs = ref<Array<string | number>>([]);
-const navRefs: Record<string | number, Ref<HTMLElement | undefined>> = {};
-const getNavRef = (el: HTMLElement, value: string | number) => {
-  navRefs[value].value = el;
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void;
+  (e: 'change', value: string | number, oldValue: string | number): void;
+  (e: 'delete', value: string | number): void;
+}>();
+
+const activeKey = ref(props.modelValue);
+
+const tabsMap = reactive(new Map<string | number, TabNavData>());
+const addTabItem = (tabKey: string | number, tabData: TabNavData) => {
+  tabsMap.set(tabKey, tabData);
+};
+const removeTabItem = (tabKey: string | number) => {
+  tabsMap.delete(tabKey);
 };
+// nav构造数据
+const navList = computed(() => {
+  const rlt: TabNavData[] = [];
+  tabsMap.forEach((val) => {
+    rlt.push(val);
+  });
+
+  return rlt;
+});
+
+const navKeys = computed(() => {
+  const keys = navList.value.map((item) => item.value);
+
+  return keys;
+});
+
+const activeValue = computed(() => {
+  if (!navKeys.value.includes(activeKey.value)) {
+    emits('update:modelValue', navKeys.value[0]);
+
+    return navKeys.value[0];
+  }
+  return activeKey.value;
+});
 
 provide(tabsInjectKey, {
-  value: activeVal,
-  navRefs,
-  addTabNav(value) {
-    navRefs[value] = ref();
-    if (!tabNavs.value.includes(value)) {
-      tabNavs.value.push(value);
-    }
-  },
+  value: activeValue,
+  lazy: props.lazy,
+  addTabItem,
+  removeTabItem,
 });
+
+// nav选择
+const onNavSelect = (value: string | number) => {
+  emits('change', value, activeValue.value);
+  activeKey.value = value;
+  emits('update:modelValue', value);
+};
+
+const onNavDelete = (value: string | number) => {
+  removeTabItem(value);
+  emits('delete', value);
+};
 </script>
 <template>
   <div class="o-tabs">
-    <div class="o-tabs-head">
+    <slot></slot>
+    <div class="o-tabs-head" :class="{ 'with-act': !!$slots.act }">
       <div class="o-tabs-navs">
-        <div v-for="item in tabNavs" :key="item" :ref="(el) => getNavRef(el as HTMLElement, item)" class="o-tabs-nav"></div>
+        <TabNav
+          v-for="item in navList"
+          :key="item.value"
+          class="o-tabs-nav"
+          :active-value="activeValue"
+          v-bind="item"
+          @select="onNavSelect"
+          @delete="onNavDelete"
+        />
+      </div>
+      <div v-if="$slots.act" class="o-tabs-act">
+        <slot name="act"></slot>
       </div>
     </div>
     <div class="o-tabs-body">
-      <slot></slot>
+      <TabContent v-for="item in navList" :key="item.value" class="o-tab-pane" :active-value="activeValue" v-bind="item" />
     </div>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/tabs/TabContent.vue b/packages/opendesign/src/components/tabs/TabContent.vue
new file mode 100644
index 00000000..d9681cc3
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/TabContent.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import { computed, defineComponent, h, mergeProps, PropType, Transition, vShow, withDirectives, SetupContext, Slots, ref } from 'vue';
+
+export default defineComponent({
+  name: 'TabContent',
+  inheritAttrs: false,
+  props: {
+    /**
+     * tabs选中的key
+     */
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * tabs选中的key
+     */
+    activeValue: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * 是否在隐藏时卸载
+     */
+    unmountOnHide: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 过渡动画
+     */
+    transition: {
+      type: String,
+      default: '',
+    },
+    /**
+     * nav插槽
+     */
+    slots: {
+      type: Object as PropType<Slots>,
+      default: undefined,
+    },
+    /**
+     * 过渡动画
+     */
+    attrs: {
+      type: Object as PropType<SetupContext['attrs']>,
+      default: () => {},
+    },
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const active = computed(() => props.activeValue === props.value);
+    const toMount = computed(() => (props.lazy ? active.value : true));
+
+    // pane只渲染default 插槽的内容
+    return () => {
+      const p = mergeProps(
+        {
+          class: ['o-tab-pane', { active: active.value }],
+        },
+        props.attrs
+      );
+
+      const child = h('div', p, props.slots?.default?.());
+
+      return h(Transition, { name: props.transition }, () => {
+        if (!toMount.value) {
+          return null;
+        }
+        if (props.unmountOnHide) {
+          return active.value ? child : null;
+        } else {
+          return withDirectives(child, [[vShow, active.value]]);
+        }
+      });
+    };
+  },
+});
+</script>
diff --git a/packages/opendesign/src/components/tabs/TabNav.vue b/packages/opendesign/src/components/tabs/TabNav.vue
new file mode 100644
index 00000000..ed4dcf8f
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/TabNav.vue
@@ -0,0 +1,96 @@
+<script lang="ts">
+import { computed, defineComponent, h, PropType, Slots } from 'vue';
+import { IconClose } from '../_shared/icons';
+
+export default defineComponent({
+  name: 'OTabNav',
+  inheritAttrs: false,
+  props: {
+    /**
+     * 该页签key
+     */
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * 页签文本
+     */
+    label: {
+      type: String,
+      default: undefined,
+    },
+    /**
+     * tabs选中页签的key
+     */
+    activeValue: {
+      type: [String, Number],
+      default: undefined,
+    },
+    /**
+     * nav插槽
+     */
+    slots: {
+      type: Object as PropType<Slots>,
+      default: undefined,
+    },
+    /**
+     * 是否禁用选中
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 是否可以删除
+     */
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['select', 'delete'],
+  setup(props, { emit }) {
+    const defaultLabel = props.label || props.value;
+
+    const active = computed(() => props.activeValue === props.value);
+
+    const navClick = (e: MouseEvent) => {
+      if (props.disabled || active.value) {
+        return;
+      }
+      emit('select', props.value, e);
+    };
+
+    const navCloseClick = (e: MouseEvent) => {
+      e.stopImmediatePropagation();
+      emit('delete', props.value, e);
+    };
+
+    // pane只渲染default 插槽的内容
+    return () => {
+      const children = props.slots?.nav?.();
+
+      const titleNode = h('div', { class: 'o-tab-nav-title' }, children || defaultLabel);
+
+      const closeNode = h('div', { class: 'o-tab-nav-close', onClick: navCloseClick }, h(IconClose.value));
+
+      return h(
+        'div',
+        {
+          class: [
+            'o-tab-nav',
+            {
+              active: active.value,
+              'is-disabled': props.disabled,
+              'is-closable': props.closable,
+            },
+          ],
+          onClick: navClick,
+        },
+        props.closable ? [titleNode, closeNode] : titleNode
+      );
+    };
+  },
+});
+</script>
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
index f24ac97b..9362c3ef 100644
--- a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
@@ -2,27 +2,41 @@
 import { ref } from 'vue';
 import { OTabs, OTabPane } from '../index';
 import { IconSearch } from '../../icons';
-const activeTab = ref('');
+const activeTab = ref('Tab A');
+const tabChange = (val: string | number, oldVal: string | number) => {
+  console.log(`active: ${val}, old: ${oldVal}`);
+};
 </script>
 <template>
   <h4>Default</h4>
-  <section>
-    <OTabs v-model="activeTab">
-      <OTabPane value="1">pane 1</OTabPane>
-      <OTabPane value="2">pane 2</OTabPane>
-      <OTabPane value="3">pane 3</OTabPane>
-      <OTabPane value="4">pane 4</OTabPane>
+  <div class="sec">
+    <OTabs>
+      <OTabPane class="pane" label="Tab 1">pane 1</OTabPane>
+      <OTabPane class="pane" label="Tab 2" closable lazy><div style="height: 50px">pane 2</div></OTabPane>
+      <OTabPane class="pane" label="Tab 3" lazy>pane 3</OTabPane>
+      <OTabPane class="pane" label="Tab 4" disabled closable>pane 4</OTabPane>
     </OTabs>
-  </section>
-  <section>
-    <OTabs v-model="activeTab">
-      <OTabPane value="a"><template #nav>nav 1</template>pane 1 </OTabPane>
-      <OTabPane value="b">pane 2</OTabPane>
-      <OTabPane value="c">
-        <template #nav><IconSearch /> nav 3</template>pane 3
+  </div>
+  <div class="sec">
+    <OTabs v-model="activeTab" lazy @change="tabChange">
+      <template #act>action</template>
+      <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
+      <OTabPane value="Tab B" class="pane">pane 2</OTabPane>
+      <OTabPane value="Tab C" class="pane">
+        <template #nav><IconSearch /> Nav 3</template>pane 3
       </OTabPane>
-      <OTabPane value="d"><template #nav>nav 4</template>pane 4</OTabPane>
+      <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTabs>
-  </section>
+  </div>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.sec {
+  border: 1px solid #eee;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+.pane {
+  padding: 36px;
+  background-color: bisque;
+}
+</style>
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts
index b661adef..946bfc07 100644
--- a/packages/opendesign/src/components/tabs/provide.ts
+++ b/packages/opendesign/src/components/tabs/provide.ts
@@ -1,10 +1,22 @@
-import { InjectionKey, Ref } from 'vue';
+import { InjectionKey, Ref, Slots, SetupContext } from 'vue';
+
+export interface TabNavData {
+  value: string | number;
+  label?: string;
+  transition?: string,
+  unmountOnHide?: boolean,
+  disabled?: boolean;
+  closable?: boolean;
+  lazy?: boolean;
+  slots?: Slots;
+  attrs?: SetupContext['attrs'],
+}
 
 
 export const tabsInjectKey: InjectionKey<{
-  value: Ref<string | number>
-  navRefs: Record<string | number, Ref<HTMLElement | undefined>>,
-  addTabNav: (value: string | number) => void,
-}> =
-  Symbol('provide-tabs');
+  value: Ref<string | number>,
+  lazy: boolean,
+  addTabItem: (key: string | number, data: TabNavData) => void,
+  removeTabItem: (tabKey: string | number) => void,
+}> = Symbol('provide-tabs');
 
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index 25d3f8f9..022e0127 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -1,8 +1,75 @@
 @import './var.scss';
 
+.o-tabs {
+  // background-color: #eee;
+}
 .o-tabs-navs {
   display: flex;
 }
-.o-tabs-nav {
-  padding: 4px 8px;
+.o-tabs-head {
+  &.with-act {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+.o-tab-nav {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  cursor: pointer;
+  background-color: var(--o-color-bg1);
+
+  + .o-tab-nav {
+    margin-left: 8px;
+  }
+
+  &.active {
+    color: red;
+  }
+
+  &.is-closable {
+    padding-right: 8px;
+    &:hover {
+      .o-tab-nav-close {
+        display: inline-flex;
+        opacity: 1;
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: var(--o-color-text3);
+    background-color: var(--o-color-bg4);
+  }
+}
+.o-tab-nav-close {
+  font-size: 14px;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  color: var(--o-color-text3);
+  border-radius: 50%;
+  transition: opacity var(--o-transition-duration-2);
+  &:hover {
+    color: var(--o-color-primary1);
+    background-color: var(--o-color-bg3);
+  }
+}
+
+.o-tabs-body {
+  display: flex;
+}
+
+.o-tab-pane {
+  flex-shrink: 0;
+  width: 100%;
+  display: none;
+  &.active {
+    display: block;
+  }
 }
diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss
index 3788e559..626a5845 100644
--- a/packages/opendesign/src/components/tabs/style/var.scss
+++ b/packages/opendesign/src/components/tabs/style/var.scss
@@ -1,33 +1,4 @@
-.o-select {
-  --select-text-size: var(--o-font_size-text);
-  --select-text-height: var(--o-line_height-text);
-
-  --select-height-s: var(--o-size-s);
-  --select-height-m: var(--o-size-m);
-  --select-height-l: var(--o-size-l);
-
-  --select-radius-s: var(--o-radius-s);
-  --select-radius-m: var(--o-radius-s);
-  --select-radius-l: var(--o-radius-s);
-
-  --select-border: var(--o-color-info1);
-  --select-border_hover: var(--o-color-primary2);
-  --select-border_active: var(--o-color-primary3);
-  --select-border_disabled: var(--o-color-info1);
-
-  --select-bg: var(--o-color-bg1);
-  --select-bg_hover: var(--o-color-bg2);
-  --select-bg_disabled: var(--o-color-info4);
-
-  --select-color: var(--o-color-text2);
-  --select-color_disabled: var(--o-color-text4);
-
-  --select-icon-color: var(--o-color-text3);
-}
-
-.o-select-options {
-  --select-options-bg: var(--o-color-bg2);
-  --select-options-shadow: none;
-  --select-options-border: 1px solid var(--o-color-primary2);
-  --select-options-radius: var(--o-radius-s);
+.o-tabs {
+  --tabs-text-size: var(--o-font_size-text);
+  --tabs-text-height: var(--o-line_height-text);
 }
-- 
Gitee


From c8426b3291ebc934ec0617a8adce9dec317610be Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 6 Jan 2023 23:53:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tabs=E7=9A=84=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/icons.ts           | 10 +++-
 .../opendesign/src/components/tabs/OTabs.vue  | 19 ++++--
 .../components/tabs/__demo__/TabsDefault.vue  | 31 +++++++++-
 .../src/components/tabs/style/index.scss      | 58 ++++++++++++-------
 .../src/components/tabs/style/var.scss        | 17 +++++-
 .../opendesign/src/components/tabs/types.ts   |  0
 6 files changed, 107 insertions(+), 28 deletions(-)
 delete mode 100644 packages/opendesign/src/components/tabs/types.ts

diff --git a/packages/opendesign/src/components/_shared/icons.ts b/packages/opendesign/src/components/_shared/icons.ts
index 97c71eb7..f350b18c 100644
--- a/packages/opendesign/src/components/_shared/icons.ts
+++ b/packages/opendesign/src/components/_shared/icons.ts
@@ -6,7 +6,8 @@ import {
   IconLoading as _IconLoading,
   IconLink as IconLink,
   IconArrowRight,
-  IconX
+  IconX,
+  IconAdd as _IconAdd,
 } from '../icons';
 
 /**
@@ -38,4 +39,11 @@ export function initLinkArrowIcon(icon: Component) {
 export const IconClose = shallowRef<Component>(IconX);
 export function initCloseIcon(icon: Component) {
   IconClose.value = icon;
+}
+/**
+ * add图标
+ */
+export const IconAdd = shallowRef<Component>(_IconAdd);
+export function initAddIcon(icon: Component) {
+  IconAdd.value = icon;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
index 33695467..b2579e63 100644
--- a/packages/opendesign/src/components/tabs/OTabs.vue
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -3,6 +3,7 @@ import { computed, provide, reactive, ref } from 'vue';
 import { tabsInjectKey, TabNavData } from './provide';
 import TabNav from './TabNav.vue';
 import TabContent from './TabContent.vue';
+import { IconAdd } from '../_shared/icons';
 
 interface SelectPropT {
   /**
@@ -14,6 +15,7 @@ interface SelectPropT {
    * 是否激活时再加载
    */
   lazy?: boolean;
+  addable?: boolean;
 }
 
 const props = withDefaults(defineProps<SelectPropT>(), {
@@ -25,6 +27,7 @@ const emits = defineEmits<{
   (e: 'update:modelValue', value: string | number): void;
   (e: 'change', value: string | number, oldValue: string | number): void;
   (e: 'delete', value: string | number): void;
+  (e: 'add', evt: MouseEvent): void;
 }>();
 
 const activeKey = ref(props.modelValue);
@@ -69,16 +72,21 @@ provide(tabsInjectKey, {
 });
 
 // nav选择
-const onNavSelect = (value: string | number) => {
+const onSelectNav = (value: string | number) => {
   emits('change', value, activeValue.value);
   activeKey.value = value;
   emits('update:modelValue', value);
 };
 
-const onNavDelete = (value: string | number) => {
+// 删除页签
+const onDeleteNav = (value: string | number) => {
   removeTabItem(value);
   emits('delete', value);
 };
+// 添加页签
+const onAddNav = (e: MouseEvent) => {
+  emits('add', e);
+};
 </script>
 <template>
   <div class="o-tabs">
@@ -91,9 +99,12 @@ const onNavDelete = (value: string | number) => {
           class="o-tabs-nav"
           :active-value="activeValue"
           v-bind="item"
-          @select="onNavSelect"
-          @delete="onNavDelete"
+          @select="onSelectNav"
+          @delete="onDeleteNav"
         />
+        <div v-if="props.addable" class="o-tab-nav-add" @click="onAddNav">
+          <IconAdd />
+        </div>
       </div>
       <div v-if="$slots.act" class="o-tabs-act">
         <slot name="act"></slot>
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
index 9362c3ef..b3a71059 100644
--- a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
@@ -1,11 +1,31 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { OTabs, OTabPane } from '../index';
 import { IconSearch } from '../../icons';
 const activeTab = ref('Tab A');
 const tabChange = (val: string | number, oldVal: string | number) => {
   console.log(`active: ${val}, old: ${oldVal}`);
 };
+function getPanelItem(key: string) {
+  return {
+    id: key,
+    label: `Nav ${key}`,
+    content: `Panel Content: ${key}`,
+  };
+}
+const tabList = reactive(
+  new Array(4).fill(1).map((k, idx) => {
+    return getPanelItem(`${idx + 1}`);
+  })
+);
+const tabAdd = () => {
+  console.log('add tab');
+  tabList.push(getPanelItem(`${tabList.length + 1}`));
+};
+
+const tabDelete = (v: string | number) => {
+  console.log(v);
+};
 </script>
 <template>
   <h4>Default</h4>
@@ -17,6 +37,7 @@ const tabChange = (val: string | number, oldVal: string | number) => {
       <OTabPane class="pane" label="Tab 4" disabled closable>pane 4</OTabPane>
     </OTabs>
   </div>
+  <h4>Slot & change</h4>
   <div class="sec">
     <OTabs v-model="activeTab" lazy @change="tabChange">
       <template #act>action</template>
@@ -28,6 +49,14 @@ const tabChange = (val: string | number, oldVal: string | number) => {
       <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTabs>
   </div>
+  <h4>Add & Delete</h4>
+  <div class="sec">
+    <OTabs v-model="activeTab" lazy addable @change="tabChange" @add="tabAdd" @delete="tabDelete">
+      <OTabPane v-for="(item, idx) in tabList" :key="item.id" :value="item.id" class="pane" :label="item.label" :closable="idx > 1">
+        {{ item.content }}
+      </OTabPane>
+    </OTabs>
+  </div>
 </template>
 <style lang="scss">
 .sec {
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index 022e0127..a2e41a6a 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -1,12 +1,14 @@
 @import './var.scss';
 
-.o-tabs {
-  // background-color: #eee;
-}
 .o-tabs-navs {
   display: flex;
+  align-items: center;
 }
 .o-tabs-head {
+  font-size: var(--tabs-nav-text-size);
+  line-height: var(--tabs-nav-text-height);
+  color: var(--tabs-nav-color);
+
   &.with-act {
     display: flex;
     align-items: center;
@@ -16,48 +18,64 @@
 .o-tab-nav {
   display: inline-flex;
   align-items: center;
-  padding: 4px 12px;
+  padding: 4px 16px;
   cursor: pointer;
-  background-color: var(--o-color-bg1);
+
+  background-color: var(--tabs-nav-bg);
 
   + .o-tab-nav {
     margin-left: 8px;
   }
 
+  &:hover {
+    color: var(--tabs-nav-color_active);
+    background-color: var(--tabs-nav-bg_hover);
+  }
+
   &.active {
-    color: red;
+    color: var(--tabs-nav-color_active);
   }
 
   &.is-closable {
-    padding-right: 8px;
-    &:hover {
-      .o-tab-nav-close {
-        display: inline-flex;
-        opacity: 1;
-      }
-    }
+    padding-right: 24px;
+    position: relative;
   }
 
   &.is-disabled {
-    color: var(--o-color-text3);
-    background-color: var(--o-color-bg4);
+    color: var(--tabs-nav-color_disabled);
+    background-color: var(--tabs-nav-bg_disabled);
   }
 }
 .o-tab-nav-close {
+  position: absolute;
+  right: 0;
+  top: 0;
   font-size: 14px;
   width: 20px;
   height: 20px;
-  opacity: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  color: var(--tabs-icon-color);
+  &:hover {
+    color: var(--tabs-icon-color_hover);
+  }
+}
+
+.o-tab-nav-add {
   margin-left: 8px;
-  color: var(--o-color-text3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  color: var(--tabs-icon-color);
+  font-size: 14px;
   border-radius: 50%;
-  transition: opacity var(--o-transition-duration-2);
   &:hover {
-    color: var(--o-color-primary1);
-    background-color: var(--o-color-bg3);
+    color: var(--tabs-icon-color_hover);
+    background-color: var(--tabs-nav-bg_hover);
   }
 }
 
diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss
index 626a5845..7fbc1a50 100644
--- a/packages/opendesign/src/components/tabs/style/var.scss
+++ b/packages/opendesign/src/components/tabs/style/var.scss
@@ -1,4 +1,17 @@
 .o-tabs {
-  --tabs-text-size: var(--o-font_size-text);
-  --tabs-text-height: var(--o-line_height-text);
+  --tabs-nav-text-size: var(--o-font_size-text);
+  --tabs-nav-text-height: var(--o-line_height-text);
+
+  --tabs-nav-color: var(--o-color-text2);
+  --tabs-nav-color_active: var(--o-color-text1);
+  --tabs-nav-color_disabled: var(--o-color-text4);
+  --tabs-nav-bg: var(--o-color-bg1);
+  --tabs-nav-bg_hover: var(--o-color-bg3);
+  --tabs-nav-bg_disabled: var(--o-color-bg4);
+
+  --tabs-nav-radius: 2px;
+
+  --tabs-icon-color: var(--o-color-text2);
+  --tabs-icon-color_hover: var(--o-color-primary1);
+  --tabs-icon-bg_hover: var(--o-color-bg2);
 }
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
deleted file mode 100644
index e69de29b..00000000
-- 
Gitee


From 77cfe89d86e8bdd568cbd854fd0eef73447c7281 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 6 Jan 2023 23:56:36 +0800
Subject: [PATCH 4/4] md

---
 packages/docs/tab.md                              | 1 +
 packages/opendesign/src/components/tabs/OTabs.vue | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/docs/tab.md b/packages/docs/tab.md
index d66adef0..5e0ff3b4 100644
--- a/packages/docs/tab.md
+++ b/packages/docs/tab.md
@@ -8,6 +8,7 @@
 | :--------- | :-------------------------- | :----- | ------------------------------ |
 | modelValue | string \| number（v-model） | ''     | 开关状态                       |
 | lazy       | boolean                     | false  | 是否在首次激活标签时再挂载内容 |
+| addable    | boolean                     | false  | 是否可以添加页签               |
 
 ### OTabPane
 
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
index b2579e63..a36e2d16 100644
--- a/packages/opendesign/src/components/tabs/OTabs.vue
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -15,6 +15,9 @@ interface SelectPropT {
    * 是否激活时再加载
    */
   lazy?: boolean;
+  /**
+   * 是否可以添加页签
+   */
   addable?: boolean;
 }
 
-- 
Gitee