From 954a9c8e25e37c66db0bb70fe24de77ad93e7b95 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 2 Mar 2023 18:33:47 +0800
Subject: [PATCH 1/4] tab

---
 .../opendesign/src/components/badge/types.ts  |   2 +-
 .../src/components/input-number/types.ts      |   2 +-
 .../opendesign/src/components/input/types.ts  |   2 +-
 .../opendesign/src/components/option/types.ts |   4 +-
 .../opendesign/src/components/select/types.ts |   2 +-
 .../src/components/tabs/OTabPane.vue          |  53 +--------
 .../opendesign/src/components/tabs/OTabs.vue  |  87 +++++++++------
 .../opendesign/src/components/tabs/TabNav.vue |  23 +++-
 .../components/tabs/__demo__/TabsBasic.vue    |  43 +++++++-
 .../src/components/tabs/style/index.scss      |  74 ++++++++++---
 .../src/components/tabs/style/var.scss        |  36 +++++--
 .../opendesign/src/components/tabs/types.ts   | 102 ++++++++++++++++++
 .../src/components/textarea/types.ts          |   2 +-
 13 files changed, 314 insertions(+), 118 deletions(-)
 create mode 100644 packages/opendesign/src/components/tabs/types.ts

diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/components/badge/types.ts
index 315ef0af..2e144407 100644
--- a/packages/opendesign/src/components/badge/types.ts
+++ b/packages/opendesign/src/components/badge/types.ts
@@ -6,7 +6,7 @@ export const badgeProps = {
    * 显示值
    */
   value: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number],
     default: '',
   },
   /**
diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts
index 44b250dd..75435271 100644
--- a/packages/opendesign/src/components/input-number/types.ts
+++ b/packages/opendesign/src/components/input-number/types.ts
@@ -7,7 +7,7 @@ export const inputNumberPorps = {
    * v-model
    */
   modelValue: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number],
   },
   /**
    * 下拉框的默认值
diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts
index b37c7ccf..adc351e1 100644
--- a/packages/opendesign/src/components/input/types.ts
+++ b/packages/opendesign/src/components/input/types.ts
@@ -7,7 +7,7 @@ export const inputProps = {
    * v-model
    */
   modelValue: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number],
   },
   /**
    * 下拉框的默认值
diff --git a/packages/opendesign/src/components/option/types.ts b/packages/opendesign/src/components/option/types.ts
index b33342d4..7327a7b2 100644
--- a/packages/opendesign/src/components/option/types.ts
+++ b/packages/opendesign/src/components/option/types.ts
@@ -1,4 +1,4 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import { ExtractPropTypes } from 'vue';
 
 export const optionProps = {
   /**
@@ -12,7 +12,7 @@ export const optionProps = {
    * 值
    */
   value: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number],
     default: ''
   },
   /**
diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts
index dc3adb8c..dd96d861 100644
--- a/packages/opendesign/src/components/select/types.ts
+++ b/packages/opendesign/src/components/select/types.ts
@@ -8,7 +8,7 @@ export const selectProps = {
    * v-model
    */
   modelValue: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number],
   },
   /**
    * 下拉框的默认值
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index 0f2115ff..ad37e54e 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -1,60 +1,11 @@
 <script lang="ts">
 import { defineComponent, getCurrentInstance, inject, reactive } from 'vue';
 import { tabsInjectKey } from './provide';
+import { tabPaneProps } from './types';
 
 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,
-    },
-  },
+  props: tabPaneProps,
   setup(props, { slots, attrs }) {
     const tabsInjection = inject(tabsInjectKey, null);
 
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
index a36e2d16..cd3722b0 100644
--- a/packages/opendesign/src/components/tabs/OTabs.vue
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -1,30 +1,12 @@
 <script setup lang="ts">
-import { computed, provide, reactive, ref } from 'vue';
+import { computed, provide, reactive, ref, nextTick } from 'vue';
 import { tabsInjectKey, TabNavData } from './provide';
 import TabNav from './TabNav.vue';
 import TabContent from './TabContent.vue';
 import { IconAdd } from '../_shared/icons';
+import { tabsProps } from './types';
 
-interface SelectPropT {
-  /**
-   * tab选中的nav值
-   * v-model
-   */
-  modelValue?: string | number;
-  /**
-   * 是否激活时再加载
-   */
-  lazy?: boolean;
-  /**
-   * 是否可以添加页签
-   */
-  addable?: boolean;
-}
-
-const props = withDefaults(defineProps<SelectPropT>(), {
-  modelValue: '',
-  lazy: false,
-});
+const props = defineProps(tabsProps);
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string | number): void;
@@ -34,6 +16,7 @@ const emits = defineEmits<{
 }>();
 
 const activeKey = ref(props.modelValue);
+const archorStyle = ref<Record<string, string>>({});
 
 const tabsMap = reactive(new Map<string | number, TabNavData>());
 const addTabItem = (tabKey: string | number, tabData: TabNavData) => {
@@ -73,18 +56,39 @@ provide(tabsInjectKey, {
   addTabItem,
   removeTabItem,
 });
+const updateArchor = (el: HTMLElement) => {
+  nextTick(() => {
+    const { clientWidth, offsetLeft } = el;
+    archorStyle.value = {
+      transform: `translate3d(${offsetLeft}px, 0px, 0px)`,
+      width: `${clientWidth}px`,
+    };
+  });
+};
 
+let activeEl: HTMLElement | null = null;
+const onNavSelect = (value: string | number, el: HTMLElement) => {
+  if (el) {
+    updateArchor(el);
+    activeEl = el;
+  }
+};
 // nav选择
-const onSelectNav = (value: string | number) => {
-  emits('change', value, activeValue.value);
-  activeKey.value = value;
-  emits('update:modelValue', value);
+const onNavClick = (value: string | number) => {
+  if (activeValue.value !== value) {
+    emits('change', value, activeValue.value);
+    activeKey.value = value;
+    emits('update:modelValue', value);
+  }
 };
 
 // 删除页签
 const onDeleteNav = (value: string | number) => {
   removeTabItem(value);
   emits('delete', value);
+  if (activeEl) {
+    updateArchor(activeEl);
+  }
 };
 // 添加页签
 const onAddNav = (e: MouseEvent) => {
@@ -94,23 +98,46 @@ const onAddNav = (e: MouseEvent) => {
 <template>
   <div class="o-tabs">
     <slot></slot>
-    <div class="o-tabs-head" :class="{ 'with-act': !!$slots.act }">
-      <div class="o-tabs-navs">
+    <div
+      class="o-tabs-head"
+      :class="[
+        `o-tabs-${props.variant}`,
+        {
+          'with-act': $slots.suffix || $slots.prefix,
+          'show-line': props.line,
+        },
+      ]"
+    >
+      <div v-if="$slots.prefix" class="o-tabs-head-prefix">
+        <slot name="prefix"></slot>
+      </div>
+      <div
+        class="o-tabs-navs"
+        :class="{
+          'is-center': props.center,
+        }"
+      >
         <TabNav
           v-for="item in navList"
           :key="item.value"
           class="o-tabs-nav"
           :active-value="activeValue"
           v-bind="item"
-          @select="onSelectNav"
+          @click="onNavClick"
+          @select="onNavSelect"
           @delete="onDeleteNav"
         />
+        <div v-if="props.variant === 'text'" class="o-tab-nav-archor" :style="archorStyle">
+          <slot name="archor">
+            <div class="o-tab-nav-archor-line"></div>
+          </slot>
+        </div>
         <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>
+      <div v-if="$slots.suffix" class="o-tabs-head-suffix">
+        <slot name="suffix"></slot>
       </div>
     </div>
     <div class="o-tabs-body">
diff --git a/packages/opendesign/src/components/tabs/TabNav.vue b/packages/opendesign/src/components/tabs/TabNav.vue
index ed4dcf8f..7a8563db 100644
--- a/packages/opendesign/src/components/tabs/TabNav.vue
+++ b/packages/opendesign/src/components/tabs/TabNav.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, h, PropType, Slots } from 'vue';
+import { computed, defineComponent, h, ref, onMounted, PropType, Slots, watch } from 'vue';
 import { IconClose } from '../_shared/icons';
 
 export default defineComponent({
@@ -49,17 +49,27 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['select', 'delete'],
+  emits: ['click', 'delete', 'select'],
   setup(props, { emit }) {
+    const navRef = ref<HTMLElement | null>(null);
     const defaultLabel = props.label || props.value;
 
     const active = computed(() => props.activeValue === props.value);
 
+    watch(
+      () => active.value,
+      (v: Boolean) => {
+        if (v) {
+          emit('select', props.value, navRef.value);
+        }
+      }
+    );
+
     const navClick = (e: MouseEvent) => {
       if (props.disabled || active.value) {
         return;
       }
-      emit('select', props.value, e);
+      emit('click', props.value, e);
     };
 
     const navCloseClick = (e: MouseEvent) => {
@@ -67,6 +77,12 @@ export default defineComponent({
       emit('delete', props.value, e);
     };
 
+    onMounted(() => {
+      if (active.value && navRef.value) {
+        emit('select', props.value, navRef.value);
+      }
+    });
+
     // pane只渲染default 插槽的内容
     return () => {
       const children = props.slots?.nav?.();
@@ -87,6 +103,7 @@ export default defineComponent({
             },
           ],
           onClick: navClick,
+          ref: navRef,
         },
         props.closable ? [titleNode, closeNode] : titleNode
       );
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
index b3a71059..bdbe334d 100644
--- a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
@@ -28,9 +28,32 @@ const tabDelete = (v: string | number) => {
 };
 </script>
 <template>
-  <h4>Default</h4>
+  <h4>Variant</h4>
   <div class="sec">
-    <OTabs>
+    <p>Solid</p>
+    <OTabs variant="solid">
+      <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>
+    <p>line:false</p>
+    <OTabs variant="solid" :line="false">
+      <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>
+    <br />
+    <p>Text</p>
+    <OTabs variant="text">
+      <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>
+    <p>line:false</p>
+    <OTabs variant="text" :line="false">
       <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>
@@ -40,7 +63,19 @@ const tabDelete = (v: string | number) => {
   <h4>Slot & change</h4>
   <div class="sec">
     <OTabs v-model="activeTab" lazy @change="tabChange">
-      <template #act>action</template>
+      <template #prefix>Prefix</template>
+      <template #suffix>Suffix</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="Tab D" class="pane">pane 4</OTabPane>
+    </OTabs>
+    <p>center</p>
+    <OTabs v-model="activeTab" lazy center @change="tabChange">
+      <template #prefix>Prefix</template>
+      <template #suffix>Suffix</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">
@@ -66,6 +101,6 @@ const tabDelete = (v: string | number) => {
 }
 .pane {
   padding: 36px;
-  background-color: bisque;
+  background-color: #fff;
 }
 </style>
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index 99011a04..2c95da45 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -3,16 +3,30 @@
 .o-tabs-navs {
   display: flex;
   align-items: center;
+  position: relative;
+  width: 100%;
+  &.is-center {
+    justify-content: center;
+  }
 }
 .o-tabs-head {
   font-size: var(--tabs-nav-text-size);
   line-height: var(--tabs-nav-text-height);
   color: var(--tabs-nav-color);
+  position: relative;
 
   &.with-act {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    // justify-content: space-between;
+  }
+  &.show-line::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-bottom: var(--tabs-nav-divider);
   }
 }
 .o-tab-nav {
@@ -20,20 +34,25 @@
   align-items: center;
   padding: 4px 16px;
   cursor: pointer;
-
-  background-color: var(--tabs-nav-bg);
-
+  border: 1px solid var(--tabs-nav-bd-color);
+  border-bottom-width: 0;
+  background-color: var(--tabs-nav-bg-color);
+  position: relative;
+  z-index: 1;
   + .o-tab-nav {
     margin-left: 8px;
   }
 
   &:hover {
-    color: var(--tabs-nav-color_active);
-    background-color: var(--tabs-nav-bg_hover);
+    color: var(--tabs-nav-color-hover);
+    border-color: var(--tabs-nav-bd-color-hover);
+    background-color: var(--tabs-nav-bg-color-hover);
   }
 
   &.active {
-    color: var(--tabs-nav-color_active);
+    color: var(--tabs-nav-color-active);
+    border-color: var(--tabs-nav-bd-color-active);
+    background-color: var(--tabs-nav-bg-color-active);
   }
 
   &.is-closable {
@@ -42,23 +61,50 @@
   }
 
   &.is-disabled {
-    color: var(--tabs-nav-color_disabled);
-    background-color: var(--tabs-nav-bg_disabled);
+    cursor: not-allowed;
+    color: var(--tabs-nav-color-disabled);
+    border-color: var(--tabs-nav-bd-color-disabled);
+    background-color: var(--tabs-nav-bg-color-disabled);
   }
 }
+.o-tabs-text {
+  .o-tab-nav {
+    border: none;
+  }
+}
+.o-tabs-head-prefix {
+  flex-shrink: 0;
+}
+.o-tabs-head-suffix {
+  flex-shrink: 0;
+}
+.o-tab-nav-archor {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  z-index: 2;
+  transition: all var(--o-easing-standard-in) var(--o-duration-m1);
+}
+.o-tab-nav-archor-line {
+  width: 100%;
+  height: 3px;
+  background-color: var(--tabs-nav-archor-color);
+}
 .o-tab-nav-close {
   position: absolute;
   right: 0;
   top: 0;
   font-size: 14px;
-  width: 20px;
-  height: 20px;
+  padding: 1px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--tabs-icon-color);
+  border-radius: 50%;
   &:hover {
-    color: var(--tabs-icon-color_hover);
+    color: var(--tabs-icon-color-hover);
+    background-color: var(--tabs-icon-bg-color-hover);
   }
 }
 
@@ -74,8 +120,8 @@
   font-size: 14px;
   border-radius: 50%;
   &:hover {
-    color: var(--tabs-icon-color_hover);
-    background-color: var(--tabs-nav-bg_hover);
+    color: var(--tabs-icon-color-hover);
+    background-color: var(--tabs-nav-bg-color-hover);
   }
 }
 
diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss
index 7fbc1a50..34669e6d 100644
--- a/packages/opendesign/src/components/tabs/style/var.scss
+++ b/packages/opendesign/src/components/tabs/style/var.scss
@@ -2,16 +2,34 @@
   --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-color: var(--o-color-info2);
+  --tabs-nav-color-disabled: var(--o-color-info4);
 
   --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);
+  --tabs-icon-color: var(--o-color-info2);
+  --tabs-icon-color-hover: var(--o-color-primary1);
+  --tabs-icon-bg-color-hover: var(--o-color-control3-light);
+
+  --tabs-nav-divider: 1px solid var(--o-color-control1);
+  --tabs-nav-archor-color: var(--o-color-primary1);
+}
+
+.o-tabs-solid {
+  --tabs-nav-bd-color: var(--o-color-control1-light);
+  --tabs-nav-bd-color-hover: var(--o-color-control2-light);
+  --tabs-nav-bd-color-active: var(--o-color-control1-light);
+  --tabs-nav-bd-color-disabled: var(--o-color-control4-light);
+
+  --tabs-nav-bg-color: var(--o-color-control1-light);
+  --tabs-nav-bg-color-hover: var(--o-color-control2-light);
+  --tabs-nav-bg-color-active: var(--o-color-control-light);
+  --tabs-nav-bg-color-disabled: var(--o-color-control4-light);
+}
+.o-tabs-text {
+  --tabs-nav-color-hover: var(--o-color-primary1);
+  --tabs-nav-color-active: var(--o-color-primary1);
+  --tabs-nav-bd-color: transparent;
+  --tabs-nav-bd-color-hover: transparent;
+  --tabs-nav-bd-color-active: var(--o-color-primary1);
 }
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
new file mode 100644
index 00000000..c7bc21e8
--- /dev/null
+++ b/packages/opendesign/src/components/tabs/types.ts
@@ -0,0 +1,102 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const tabsProps = {
+  /**
+   * tab选中的nav值
+   * v-model
+   */
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  /**
+   * VariantT
+   */
+  variant: {
+    type: String as PropType<'solid' | 'text'>,
+    default: 'text'
+  },
+  /**
+   * 是否激活时再加载
+   */
+  lazy: {
+    type: Boolean,
+  },
+  /**
+   * 是否可以添加页签
+   */
+  addable: {
+    type: Boolean,
+  },
+  /**
+   * 是否展示nav线
+   */
+  line: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否展示nav线
+   */
+  center: {
+    type: Boolean,
+    default: false
+  },
+};
+
+export type TabsPropsT = ExtractPropTypes<typeof tabsProps>;
+
+
+export const tabPaneProps = {
+  /**
+   * 页签项的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,
+  },
+};
+
+export type TabPanePropsT = ExtractPropTypes<typeof tabPaneProps>;
\ No newline at end of file
diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts
index ce95ceb9..e33b3145 100644
--- a/packages/opendesign/src/components/textarea/types.ts
+++ b/packages/opendesign/src/components/textarea/types.ts
@@ -7,7 +7,7 @@ export const textareaProps = {
    * v-model
    */
   modelValue: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, Number],
   },
   /**
    * 下拉框的默认值
-- 
Gitee


From 0105507c8d23f4918d228402ee8fe3e58ca591eb Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 3 Mar 2023 17:11:38 +0800
Subject: [PATCH 2/4] tabic

---
 packages/opendesign/src/components/tabs/OTabPane.vue       | 2 +-
 packages/opendesign/src/components/tabs/OTabs.vue          | 6 ++----
 .../opendesign/src/components/tabs/__demo__/TabsBasic.vue  | 4 ++--
 packages/opendesign/src/components/tabs/provide.ts         | 2 --
 packages/opendesign/src/components/tabs/style/index.scss   | 3 ---
 packages/opendesign/src/components/tabs/types.ts           | 7 +++----
 6 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index ad37e54e..9ef0fc94 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -12,7 +12,7 @@ export default defineComponent({
     const instance = getCurrentInstance();
 
     if (instance?.uid) {
-      const id = props.value || instance?.uid;
+      const id = props.value || props.label || instance?.uid;
 
       tabsInjection?.addTabItem(
         id,
diff --git a/packages/opendesign/src/components/tabs/OTabs.vue b/packages/opendesign/src/components/tabs/OTabs.vue
index cd3722b0..67012e10 100644
--- a/packages/opendesign/src/components/tabs/OTabs.vue
+++ b/packages/opendesign/src/components/tabs/OTabs.vue
@@ -51,10 +51,8 @@ const activeValue = computed(() => {
 });
 
 provide(tabsInjectKey, {
-  value: activeValue,
   lazy: props.lazy,
   addTabItem,
-  removeTabItem,
 });
 const updateArchor = (el: HTMLElement) => {
   nextTick(() => {
@@ -113,8 +111,8 @@ const onAddNav = (e: MouseEvent) => {
       </div>
       <div
         class="o-tabs-navs"
-        :class="{
-          'is-center': props.center,
+        :style="{
+          'justify-content': props.navJustify,
         }"
       >
         <TabNav
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
index bdbe334d..84fdca25 100644
--- a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
@@ -62,7 +62,7 @@ const tabDelete = (v: string | number) => {
   </div>
   <h4>Slot & change</h4>
   <div class="sec">
-    <OTabs v-model="activeTab" lazy @change="tabChange">
+    <OTabs v-model="activeTab" @change="tabChange">
       <template #prefix>Prefix</template>
       <template #suffix>Suffix</template>
       <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
@@ -73,7 +73,7 @@ const tabDelete = (v: string | number) => {
       <OTabPane value="Tab D" class="pane">pane 4</OTabPane>
     </OTabs>
     <p>center</p>
-    <OTabs v-model="activeTab" lazy center @change="tabChange">
+    <OTabs v-model="activeTab" nav-justify="center" @change="tabChange">
       <template #prefix>Prefix</template>
       <template #suffix>Suffix</template>
       <OTabPane value="Tab A" class="pane"><template #nav>Nav 1</template>pane 1 </OTabPane>
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts
index 946bfc07..83d284bf 100644
--- a/packages/opendesign/src/components/tabs/provide.ts
+++ b/packages/opendesign/src/components/tabs/provide.ts
@@ -14,9 +14,7 @@ export interface TabNavData {
 
 
 export const tabsInjectKey: InjectionKey<{
-  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 2c95da45..0e38b3ec 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -5,9 +5,6 @@
   align-items: center;
   position: relative;
   width: 100%;
-  &.is-center {
-    justify-content: center;
-  }
 }
 .o-tabs-head {
   font-size: var(--tabs-nav-text-size);
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
index c7bc21e8..b8c9f73f 100644
--- a/packages/opendesign/src/components/tabs/types.ts
+++ b/packages/opendesign/src/components/tabs/types.ts
@@ -36,11 +36,10 @@ export const tabsProps = {
     default: true
   },
   /**
-   * 是否展示nav线
+   * 是否nav的横向排列布局，支持justify-content的所有值
    */
-  center: {
-    type: Boolean,
-    default: false
+  navJustify: {
+    type: String,
   },
 };
 
-- 
Gitee


From 8022de4f51c31b699d2ad7abac73a9d6242a15c2 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 3 Mar 2023 17:35:24 +0800
Subject: [PATCH 3/4] table

---
 .../src/components/table/OTable.vue           |  8 ++---
 .../components/table/__demo__/TableBasic.vue  | 10 +++---
 .../src/components/table/style/index.scss     | 28 ++-------------
 .../src/components/table/style/var.scss       | 34 ++++++++++++++-----
 .../opendesign/src/components/table/types.ts  |  2 +-
 5 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/packages/opendesign/src/components/table/OTable.vue b/packages/opendesign/src/components/table/OTable.vue
index ebbacf4b..2eb01486 100644
--- a/packages/opendesign/src/components/table/OTable.vue
+++ b/packages/opendesign/src/components/table/OTable.vue
@@ -7,7 +7,7 @@ import { isString } from '../_shared/is';
 
 const props = defineProps(tableProps);
 
-const emits = defineEmits<{}>();
+// const emits = defineEmits<{}>();
 
 const columnData = computed(() => getColumnData(props.columns));
 
@@ -28,7 +28,7 @@ const boderClass = computed(() => {
     class="o-table"
     :class="[
       {
-        'is-small': props.small,
+        'o-table-small': props.small,
       },
     ]"
   >
@@ -52,8 +52,8 @@ const boderClass = computed(() => {
           </slot>
         </tbody>
       </table>
-      <div v-if="!props.loading && (!props.data || props.data.length === 0)" class="o-table-tip-wrap">
-        <slot name="empty">
+      <div v-if="!props.data || props.data.length === 0" class="o-table-tip-wrap">
+        <slot v-if="!props.loading" name="empty">
           <div class="o-table-empty-label">{{ emptyLabel }}</div>
         </slot>
       </div>
diff --git a/packages/opendesign/src/components/table/__demo__/TableBasic.vue b/packages/opendesign/src/components/table/__demo__/TableBasic.vue
index ae48b371..3d59812d 100644
--- a/packages/opendesign/src/components/table/__demo__/TableBasic.vue
+++ b/packages/opendesign/src/components/table/__demo__/TableBasic.vue
@@ -20,6 +20,11 @@ const loading = ref(true);
   <div class="sec">
     <OTable :columns="table1.columns" :data="table1.data" />
   </div>
+  <h4>Style: Small</h4>
+  <div class="sec">
+    <OTable :columns="table1.columns" :data="table1.data" small />
+  </div>
+
   <h4>loading & Empty</h4>
   <div class="sec">
     <OTable :columns="table1.columns" :loading="loading" />
@@ -42,11 +47,6 @@ const loading = ref(true);
     <h5>Border: column-frame</h5>
     <OTable :columns="table1.columns" :data="table1.data" border="column-frame" />
   </div>
-
-  <h4>Style: Small</h4>
-  <div class="sec">
-    <OTable :columns="table1.columns" :data="table1.data" small />
-  </div>
 </template>
 <style lang="scss">
 .sec {
diff --git a/packages/opendesign/src/components/table/style/index.scss b/packages/opendesign/src/components/table/style/index.scss
index 77e658cb..398d3f39 100644
--- a/packages/opendesign/src/components/table/style/index.scss
+++ b/packages/opendesign/src/components/table/style/index.scss
@@ -1,9 +1,7 @@
 @use './var.scss';
 
 .o-table {
-  --table-min-height: 240px;
   position: relative;
-  min-height: var(--table-min-height);
   table {
     width: 100%;
     border-collapse: collapse;
@@ -16,7 +14,7 @@
 
   th,
   td {
-    padding: 13px 16px;
+    padding: var(--table-cell-padding);
     font-size: var(--table-text-size);
     line-height: var(--table-text-height);
   }
@@ -28,21 +26,6 @@
   tbody tr:hover {
     background-color: var(--table-row-hover);
   }
-
-  &.is-small {
-    th,
-    td {
-      padding: 7px 8px;
-      font-size: var(--table-text-size_small);
-      line-height: var(--table-text-height_small);
-    }
-    &.is-border {
-      th,
-      td {
-        padding-bottom: 4px;
-      }
-    }
-  }
 }
 
 // border
@@ -60,13 +43,6 @@
   th,
   td {
     border-bottom: var(--table-border);
-    padding: 13px 16px 12px;
-
-    &.is-small {
-      & {
-        padding: 7px 8px 6px;
-      }
-    }
   }
 }
 
@@ -91,7 +67,7 @@
   font-size: var(--table-tip-text-size);
   line-height: var(--table-tip-text-height);
   color: var(--table-tip-color);
-  min-height: calc(var(--table-min-height) - 48px);
+  min-height: var(--table-body-min-height);
 }
 .o-table-loading-wrap {
   display: flex;
diff --git a/packages/opendesign/src/components/table/style/var.scss b/packages/opendesign/src/components/table/style/var.scss
index 50a64c4a..1c227e0a 100644
--- a/packages/opendesign/src/components/table/style/var.scss
+++ b/packages/opendesign/src/components/table/style/var.scss
@@ -1,18 +1,36 @@
 .o-table {
-  --table-head-bg: var(--o-color-bg3);
-  --table-row-hover: var(--o-color-bg3);
   --table-text-size: var(--o-font_size-text);
   --table-text-height: var(--o-line_height-text);
-
-  --table-text-size_small: var(--o-font_size-tip1);
-  --table-text-height_small: var(--o-line_height-tip1);
+  --table-color: var(--o-color-info2);
 
   --table-tip-text-size: var(--o-font_size-tip1);
   --table-tip-text-height: var(--o-line_height-tip1);
+  --table-tip-color: var(--o-color-info3);
+
+  --table-cell-padding: 13px 16px;
 
-  --table-tip-color: var(--o-color-text3);
+  --table-head-bg: var(--o-color-control1);
+  --table-row-hover: var(--o-color-control1-light);
 
-  --table-border: 1px solid var(--o-color-border2);
+  --table-border: 1px solid var(--o-color-control1-light);
   --table-loading-mask: var(--o-color-mask2);
-  --table-loading-color: var(--o-color-text3);
+  --table-loading-color: var(--o-color-info2);
+
+  --table-body-min-height: 200px;
+}
+
+.o-table-border-all,
+.o-table-border-row {
+  --table-cell-padding: 13px 16px 12px;
+}
+
+.o-table-small {
+  --table-text-size: var(--o-font_size-tip1);
+  --table-text-height: var(--o-line_height-tip1);
+
+  --table-cell-padding: 7px 8px;
+  .o-table-border-all,
+  .o-table-border-row {
+    --table-cell-padding: 7px 8px 6px;
+  }
 }
diff --git a/packages/opendesign/src/components/table/types.ts b/packages/opendesign/src/components/table/types.ts
index b603035e..95ef99cc 100644
--- a/packages/opendesign/src/components/table/types.ts
+++ b/packages/opendesign/src/components/table/types.ts
@@ -75,4 +75,4 @@ export const tableProps = {
   },
 };
 
-export type PopupPropsT = ExtractPropTypes<typeof tableProps>;
+export type TablePropsT = ExtractPropTypes<typeof tableProps>;
-- 
Gitee


From 671ce7bb0285fb6c25ff42a0ec565d188241f004 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 3 Mar 2023 19:25:21 +0800
Subject: [PATCH 4/4] pagination

---
 .../src/components/pagination/OPagination.vue | 35 ++++++++--
 .../pagination/__demo__/PaginationBasic.vue   | 68 +++++++++++++------
 .../components/pagination/style/index.scss    | 44 +++++++++---
 .../src/components/pagination/style/var.scss  | 34 +++++++++-
 .../src/components/pagination/types.ts        | 14 ++++
 .../src/components/popover/OPopover.vue       |  3 +-
 .../src/components/popover/style/index.scss   |  4 +-
 .../src/components/popover/style/var.scss     |  2 +-
 .../src/components/popup/OPopup.vue           |  6 +-
 .../src/components/popup/style/index.scss     |  4 ++
 10 files changed, 173 insertions(+), 41 deletions(-)

diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index ab015c02..6ebd139f 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -5,10 +5,14 @@ import { OPopover } from '../popover';
 import { OInputNumber } from '../input-number';
 import { OSelect } from '../select';
 import { OOption } from '../option';
+import { IconChevronLeft, IconChevronRight, IconEllipsis } from '../icons';
 import { paginationProps } from './types';
+import { getRoundClass } from '../_shared/style-class';
 
 const props = defineProps(paginationProps);
 
+const round = getRoundClass(props, 'pagination');
+
 const emits = defineEmits<{
   (e: 'update:pageSize', value: number): void;
   (e: 'update:page', value: number): void;
@@ -109,21 +113,30 @@ defineExpose<{
 });
 </script>
 <template>
-  <div class="o-pagination">
+  <div class="o-pagination" :class="[`o-pagination-${props.variant}`, round.class.value]" :style="round.style.value">
     <div class="o-pagination-wrap">
       <!-- total -->
       <div class="o-pagination-total">{{ Labels.total }}&nbsp;{{ props.total }}</div>
       <!-- sizes -->
       <template v-if="!props.simple">
         <div class="o-pagination-size">
-          <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel" @change="pageSizeChange">
+          <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel" :round="props.round" @change="pageSizeChange">
             <OOption v-for="item in pageSizeList" :key="item.value" :label="item.label" :value="item.value" />
           </OSelect>
         </div>
       </template>
       <!-- pager -->
       <div class="o-pagination-pager">
-        <div class="o-pagination-prev" :class="{ disabled: currentPage === 1 }" @click="() => currentPage !== 1 && clickPageBtn(false)">&lt;</div>
+        <div
+          class="o-pagination-prev"
+          :class="{
+            'is-disabled': currentPage === 1,
+          }"
+          tabindex="1"
+          @click="() => currentPage !== 1 && clickPageBtn(false)"
+        >
+          <IconChevronLeft />
+        </div>
         <div class="o-pagination-pages">
           <template v-if="props.simple">
             <div class="o-pagination-simple">
@@ -134,6 +147,7 @@ defineExpose<{
                 controls="none"
                 :min="1"
                 :max="totalPage"
+                :round="props.round"
                 @change="goToChange"
               />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
             </div>
@@ -144,6 +158,7 @@ defineExpose<{
               :key="item.value"
               class="o-pagination-item"
               :class="{ active: item.value === currentPage }"
+              tabindex="1"
               @click="selectPage(item.value)"
             >
               <span v-if="!item.isMore">{{ item.value }}</span>
@@ -153,15 +168,22 @@ defineExpose<{
                     <div v-for="p in item.list" :key="p" class="o-pagination-more-item">{{ p }}</div>
                   </div>
                   <template #target>
-                    <span @click="moreClick(item)">...</span>
+                    <span @click="moreClick(item)"><IconEllipsis /></span>
                   </template>
                 </OPopover>
               </template>
             </div>
           </template>
         </div>
-        <div class="o-pagination-next" :class="{ disabled: currentPage === totalPage }" @click="() => currentPage !== totalPage && clickPageBtn(true)">
-          &gt;
+        <div
+          class="o-pagination-next"
+          :class="{
+            'is-disabled': currentPage === totalPage,
+          }"
+          tabindex="1"
+          @click="() => currentPage !== totalPage && clickPageBtn(true)"
+        >
+          <IconChevronRight />
         </div>
       </div>
       <!-- jumper -->
@@ -173,6 +195,7 @@ defineExpose<{
             controls="none"
             :min="1"
             :max="totalPage"
+            :round="props.round"
             @change="goToChange"
           />
         </div>
diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
index b5acdfb9..d4cd6f2f 100644
--- a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
+++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
@@ -4,9 +4,9 @@ import { OPagination } from '../index';
 const currentPage = ref(5);
 const total = ref(100);
 
-setTimeout(() => {
-  total.value = 50;
-}, 2000);
+// setTimeout(() => {
+//   total.value = 50;
+// }, 2000);
 
 const pageSize = 8;
 const pageSizes = [8, 16, 32, 64];
@@ -15,23 +15,51 @@ const onChange = (value: { page: number; pageSize: number }) => {
 };
 </script>
 <template>
-  <h4>Basic</h4>
-  <div class="sec">
-    <OPagination :total="total" :page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" @change="onChange" />
-  </div>
+  <h4>Variant & Round</h4>
+  <section>
+    <div>
+      <div>Outline</div>
+      <div class="row">
+        <OPagination :total="total" :page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" show-jumper @change="onChange" />
+        <OPagination :total="total" :page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" round="pill" show-jumper @change="onChange" />
+        <OPagination :total="total" :page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" round="12px" show-jumper @change="onChange" />
+      </div>
+    </div>
+    <div>
+      <div>Solid</div>
+      <div class="row">
+        <OPagination :total="total" :page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" variant="solid" show-jumper @change="onChange" />
+        <OPagination
+          :total="total"
+          round="pill"
+          :page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="pageSizes"
+          variant="solid"
+          show-jumper
+          @change="onChange"
+        />
+        <OPagination
+          :total="total"
+          round="12px"
+          :page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="pageSizes"
+          variant="solid"
+          show-jumper
+          @change="onChange"
+        />
+      </div>
+    </div>
+  </section>
   <h4>Simple</h4>
-  <div class="sec">
+  <section>
     <div>当前页：{{ currentPage }}</div>
-    <OPagination v-model:page="currentPage" :total="100" simple @change="onChange" />
-  </div>
-  <h4>显示跳转</h4>
-  <div class="sec">
-    <div>当前页：{{ currentPage }}</div>
-    <OPagination v-model:page="currentPage" :total="100" :show-jumper="true" @change="onChange" />
-  </div>
+    <div class="row">
+      <OPagination v-model:page="currentPage" :total="100" simple @change="onChange" />
+      <OPagination v-model:page="currentPage" variant="solid" :total="100" simple @change="onChange" />
+      <OPagination v-model:page="currentPage" variant="solid" :total="100" simple round="pill" @change="onChange" />
+    </div>
+  </section>
 </template>
-<style lang="scss">
-.sec {
-  margin-bottom: 24px;
-}
-</style>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index dbfdfc88..92604c7b 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -6,7 +6,7 @@
   white-space: nowrap;
 
   > *:not(:first-child) {
-    margin-left: 12px;
+    margin-left: var(--pagination-item-gap);
   }
 }
 .o-pagination-pager {
@@ -20,12 +20,25 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--o-color-border2);
+  color: var(--pagination-item-color);
+  border: 1px solid var(--pagination-item-bd-color);
+  background-color: var(--pagination-item-bg-color);
   cursor: pointer;
   user-select: none;
-  &.disabled {
-    color: var(--o-color-border2);
-    border: 1px solid var(--o-color-border2);
+  border-radius: var(--pagination-radius);
+  &:hover {
+    border-color: var(--pagination-item-bd-color-hover);
+    background-color: var(--pagination-item-bg-color-hover);
+  }
+  &:active {
+    border-color: var(--pagination-item-bd-color-active);
+    background-color: var(--pagination-item-bg-color-active);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--pagination-item-color-disabled);
+    border: 1px solid var(--pagination-item-bd-color-disabled);
+    background-color: var(--pagination-item-bg-color-disabled);
   }
 }
 .o-pagination-pages {
@@ -41,15 +54,28 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  color: var(--pagination-item-color);
+  border: 1px solid var(--pagination-item-bd-color);
+  background-color: var(--pagination-item-bg-color);
+  border-radius: var(--pagination-radius);
+
   + .o-pagination-item {
     margin-left: 8px;
   }
   &:hover {
-    color: var(--o-color-primary2);
+    color: var(--pagination-item-color-hover);
+    border: 1px solid var(--pagination-item-bd-color-hover);
+    background-color: var(--pagination-item-bg-color-hover);
+  }
+  &:active {
+    color: var(--pagination-item-color-active);
+    border: 1px solid var(--pagination-item-bd-color-active);
+    background-color: var(--pagination-item-bg-color-active);
   }
   &.active {
-    color: var(--o-color-primary1);
-    border: 1px solid var(--o-color-primary1);
+    color: var(--pagination-item-color-current);
+    border: 1px solid var(--pagination-item-bd-color-current);
+    background-color: var(--pagination-item-bg-color-current);
   }
 }
 
@@ -64,7 +90,7 @@
   padding: 2px 16px;
   cursor: pointer;
   &:hover {
-    background-color: var(--o-color-bg1);
+    background-color: var(--pagination-more-item-bg-color-hover);
   }
 }
 
diff --git a/packages/opendesign/src/components/pagination/style/var.scss b/packages/opendesign/src/components/pagination/style/var.scss
index 69d106cb..21e66eb4 100644
--- a/packages/opendesign/src/components/pagination/style/var.scss
+++ b/packages/opendesign/src/components/pagination/style/var.scss
@@ -1,3 +1,35 @@
 .o-pagination {
-  --pagination-item-size: 32px;
+  --pagination-item-size: var(--o-size-m);
+  --pagination-item-gap: 12px;
+
+  --pagination-item-color: var(--o-color-info2);
+  --pagination-item-color-current: var(--o-color-primary1);
+  --pagination-item-color-disabled: var(--o-color-info4);
+
+  --pagination-item-bd-color: var(--o-color-control1-light);
+  --pagination-item-bd-color-hover: var(--o-color-control2-light);
+  --pagination-item-bd-color-active: var(--o-color-control3-light);
+  --pagination-item-bd-color-current: var(--o-color-primary1-light);
+  --pagination-item-bd-color-disabled: var(--o-color-control4-light);
+  --pagination-radius: var(--o-radius-m);
+}
+
+.o-pagination-solid {
+  --pagination-item-bd-color: transparent;
+  --pagination-item-bd-color-hover: var(--o-color-control2-light);
+  --pagination-item-bd-color-active: var(--o-color-control3-light);
+  --pagination-item-bd-color-current: var(--o-color-primary1-light);
+  --pagination-item-bd-color-disabled: var(--o-color-control4-light);
+
+  --pagination-item-bg-color: transparent;
+  --pagination-item-bg-color-hover: var(--o-color-control2-light);
+  --pagination-item-bg-color-active: var(--o-color-control3-light);
+  --pagination-item-bg-color-current: var(--o-color-primary1-light);
+  --pagination-item-bg-color-disabled: var(--o-color-control4-light);
+}
+.o-pagination-round-pill {
+  --pagination-radius: var(--pagination-item-size);
+}
+.o-pagination-more-popup {
+  --pagination-more-item-bg-color-hover: var(--o-color-primary1-light);
 }
diff --git a/packages/opendesign/src/components/pagination/types.ts b/packages/opendesign/src/components/pagination/types.ts
index 8d7f5f18..74f8ffc9 100644
--- a/packages/opendesign/src/components/pagination/types.ts
+++ b/packages/opendesign/src/components/pagination/types.ts
@@ -1,8 +1,22 @@
 import { ExtractPropTypes, PropType } from 'vue';
+import { RoundT } from '../_shared/global';
 
 const pageSizes = [6, 12, 24, 48];
 
 export const paginationProps = {
+  /**
+   * 按钮类型：ColorT
+   */
+  variant: {
+    type: String as PropType<'solid' | 'outline'>,
+    default: 'outline'
+  },
+  /**
+   * 圆角值
+   */
+  round: {
+    type: String as PropType<RoundT>
+  },
   /**
    * 支持选择的每页数据条数
    */
diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue
index 05d91170..08a22ab8 100644
--- a/packages/opendesign/src/components/popover/OPopover.vue
+++ b/packages/opendesign/src/components/popover/OPopover.vue
@@ -29,11 +29,12 @@ const targetElRef = ref<ComponentPublicInstance | null>(null);
     :trigger="props.trigger"
     :target="props.target || targetElRef"
     :wrapper="props.wrapper"
+    wrap-class="o-popover-wrap"
     anchor-class="o-popover-anchor"
     :unmount-on-hide="props.unmountOnHide"
     @update:visible="updateVisible"
   >
-    <div class="o-popover-wrap" v-bind="$attrs">
+    <div class="o-popover-body" v-bind="$attrs">
       <slot></slot>
     </div>
   </OPopup>
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss
index 21799494..55ed4dc3 100644
--- a/packages/opendesign/src/components/popover/style/index.scss
+++ b/packages/opendesign/src/components/popover/style/index.scss
@@ -3,10 +3,12 @@
 .o-popover-wrap {
   background-color: var(--popover-bg-color);
   box-shadow: var(--popover-shadow);
-  padding: 4px 8px;
   border-radius: var(--popover-radius);
   border: var(--popover-bd);
+}
+.o-popover-body {
   min-width: 120px;
+  padding: 4px 8px;
 }
 .o-popover-anchor {
   border: var(--popover-bd);
diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss
index 406aacef..fe214c26 100644
--- a/packages/opendesign/src/components/popover/style/var.scss
+++ b/packages/opendesign/src/components/popover/style/var.scss
@@ -1,6 +1,6 @@
 .o-popover {
   --popover-bg-color: var(--o-color-fill2);
   --popover-shadow: var(--o-shadow-1);
-  --popover-radius: var(--o-radius-s);
+  --popover-radius: var(--o-radius-l);
   --popover-bd: none;
 }
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index f14b4f1c..6a301e8c 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -355,8 +355,10 @@ onUnmounted(() => {
           @before-leave="handleTransitionStart"
           @after-leave="handleTransitionEnd"
         >
-          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle" :class="wrapClass">
-            <slot></slot>
+          <div v-show="visible" class="o-popup-wrap" :style="wrapStyle" :class="props.wrapClass">
+            <div class="o-popup-body">
+              <slot></slot>
+            </div>
             <div class="o-popup-anchor" :style="anchorStyle" :class="anchorClass">
               <slot name="anchor"></slot>
             </div>
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index 221d58eb..dcb74c0f 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -16,5 +16,9 @@
 
 .o-popup-anchor {
   position: absolute;
+  z-index: 0;
+}
+.o-popup-body {
+  position: relative;
   z-index: 1;
 }
-- 
Gitee