From 7cbe0610e2e800c4b77a2c30fa7e7277f370fe0b Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 14 Sep 2023 10:18:07 +0800
Subject: [PATCH 1/3] =?UTF-8?q?table=E5=93=8D=E5=BA=94=E5=BC=8F=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/table/__demo__/TheIndex.vue           |   4 +-
 .../opendesign/src/table/style/index.scss     | 116 +-----------------
 .../opendesign/src/table/style/media.scss     |  70 +++++++++++
 .../opendesign/src/table/style/style.scss     | 114 +++++++++++++++++
 packages/opendesign/src/table/style/var.scss  |  23 ++--
 packages/portal-ak/src/ak/theme/table.scss    |  64 ----------
 6 files changed, 203 insertions(+), 188 deletions(-)
 create mode 100644 packages/opendesign/src/table/style/media.scss
 create mode 100644 packages/opendesign/src/table/style/style.scss

diff --git a/packages/opendesign/src/table/__demo__/TheIndex.vue b/packages/opendesign/src/table/__demo__/TheIndex.vue
index a76d1daf..2375f039 100644
--- a/packages/opendesign/src/table/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/table/__demo__/TheIndex.vue
@@ -12,9 +12,9 @@ import TableDiyHead from './TableDiyHead.vue';
   <div class="page-demo">
     <TableDiy />
     <TableSpan />
-    <!-- <TableBasic />
+    <TableBasic />
     <TableDiyHead />
-    <TablePagination /> -->
+    <TablePagination />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/table/style/index.scss b/packages/opendesign/src/table/style/index.scss
index 3ccc20e8..504d59c4 100644
--- a/packages/opendesign/src/table/style/index.scss
+++ b/packages/opendesign/src/table/style/index.scss
@@ -1,114 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-table {
-  position: relative;
-  color: var(--table-color);
-
-  table {
-    width: 100%;
-    // border-collapse: collapse;
-    border-spacing: 0;
-  }
-  th,
-  td {
-    box-sizing: border-box;
-  }
-  th {
-    text-align: left;
-    font-weight: normal;
-    background-color: var(--table-head-bg);
-
-    padding: var(--table-cell-padding);
-    font-size: var(--table-head-text-size);
-    line-height: var(--table-head-text-height);
-    height: var(--table-head-cell-height);
-  }
-  td {
-    padding: var(--table-cell-padding);
-    font-size: var(--table-text-size);
-    line-height: var(--table-text-height);
-    height: var(--table-cell-height);
-  }
-
-  tbody tr {
-    @include hover {
-      &:hover {
-        background-color: var(--table-row-hover);
-      }
-    }
-    &:active {
-      background-color: var(--table-row-active);
-    }
-  }
-}
-.o-table-wrap {
-  border-radius: var(--table-radius);
-  overflow: hidden;
-  background-color: var(--table-bg-color);
-}
-
-// border
-.o-table-border-all,
-.o-table-border-frame {
-  border: var(--table-border);
-}
-.o-table-border-all,
-.o-table-border-row {
-  th,
-  td {
-    border-bottom: var(--table-border);
-  }
-}
-
-.o-table-border-all,
-.o-table-border-frame,
-.o-table-border-row {
-  tr.last {
-    td {
-      border-bottom-color: transparent;
-    }
-  }
-}
-
-.o-table-border-all,
-.o-table-border-column {
-  th,
-  td {
-    border-right: var(--table-border);
-
-    &.last {
-      border-right-color: transparent;
-    }
-  }
-}
-
-// tip
-.o-table-tip-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--table-tip-text-size);
-  line-height: var(--table-tip-text-height);
-  color: var(--table-tip-color);
-  min-height: var(--table-body-min-height);
-}
-.o-table-loading-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--table-tip-text-size);
-  line-height: var(--table-tip-text-height);
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--table-loading-mask);
-  color: var(--table-loading-color);
-  border-radius: var(--table-radius);
-}
-
-.o-table-loading-label {
-  margin-left: 8px;
-}
+@use './style.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/table/style/media.scss b/packages/opendesign/src/table/style/media.scss
new file mode 100644
index 00000000..d1b3400a
--- /dev/null
+++ b/packages/opendesign/src/table/style/media.scss
@@ -0,0 +1,70 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-table {
+  @include respond-to('<=pad') {
+    --table-radius: var(--o-radius_control-s);
+  }
+
+  @include respond-to('laptop') {
+    --table-text-size: var(--o-font_size-tip1);
+    --table-text-height: var(--o-line_height-tip1);
+
+    --table-head-cell-height: 40px;
+    --table-cell-height: 48px;
+
+    --table-cell-padding: 12px 12px;
+  }
+  @include respond-to('pad') {
+    --table-text-size: var(--o-font_size-tip1);
+    --table-text-height: var(--o-line_height-tip1);
+
+    --table-head-cell-height: 40px;
+    --table-cell-height: 48px;
+
+    --table-cell-padding: 8px 12px;
+  }
+  @include respond-to('phone') {
+    --table-text-size: var(--o-font_size-tip2);
+    --table-text-height: var(--o-line_height-tip2);
+
+    --table-head-cell-height: 32px;
+    --table-cell-height: 32px;
+
+    --table-head-cell-padding: 4px 12px;
+    --table-cell-padding: 4px 12px;
+  }
+}
+.o-table-small {
+  @include respond-to('<=laptop') {
+    --table-head-cell-padding: 4px 12px;
+    --table-cell-padding: 8px 12px;
+  }
+
+  @include respond-to('<=pad') {
+    --table-radius: var(--o-radius_control-s);
+  }
+
+  @include respond-to('laptop') {
+    --table-text-size: var(--o-font_size-tip1);
+    --table-text-height: var(--o-line_height-tip1);
+
+    --table-head-cell-height: 32px;
+    --table-cell-height: 40px;
+  }
+
+  @include respond-to('pad') {
+    --table-text-size: var(--o-font_size-tip1);
+    --table-text-height: var(--o-line_height-tip1);
+
+    --table-head-cell-height: 32px;
+    --table-cell-height: 40px;
+  }
+
+  @include respond-to('phone') {
+    --table-text-size: var(--o-font_size-tip2);
+    --table-text-height: var(--o-line_height-tip2);
+
+    --table-head-cell-height: 32px;
+    --table-cell-height: 32px;
+  }
+}
diff --git a/packages/opendesign/src/table/style/style.scss b/packages/opendesign/src/table/style/style.scss
new file mode 100644
index 00000000..78668c1a
--- /dev/null
+++ b/packages/opendesign/src/table/style/style.scss
@@ -0,0 +1,114 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-table {
+  position: relative;
+  color: var(--table-color);
+
+  table {
+    width: 100%;
+    // border-collapse: collapse;
+    border-spacing: 0;
+  }
+  th,
+  td {
+    box-sizing: border-box;
+  }
+  th {
+    text-align: left;
+    font-weight: normal;
+    background-color: var(--table-head-bg);
+
+    padding: var(--table-head-cell-padding);
+    font-size: var(--table-head-text-size);
+    line-height: var(--table-head-text-height);
+    height: var(--table-head-cell-height);
+  }
+  td {
+    padding: var(--table-cell-padding);
+    font-size: var(--table-text-size);
+    line-height: var(--table-text-height);
+    height: var(--table-cell-height);
+  }
+
+  tbody tr {
+    @include hover {
+      &:hover {
+        background-color: var(--table-row-hover);
+      }
+    }
+    &:active {
+      background-color: var(--table-row-active);
+    }
+  }
+}
+.o-table-wrap {
+  border-radius: var(--table-radius);
+  overflow: hidden;
+  background-color: var(--table-bg-color);
+}
+
+// border
+.o-table-border-all,
+.o-table-border-frame {
+  border: var(--table-border);
+}
+.o-table-border-all,
+.o-table-border-row {
+  // th,
+  td {
+    border-bottom: var(--table-border);
+  }
+}
+
+.o-table-border-all,
+.o-table-border-frame,
+.o-table-border-row {
+  tr.last {
+    td {
+      border-bottom-color: transparent;
+    }
+  }
+}
+
+.o-table-border-all,
+.o-table-border-column {
+  th,
+  td {
+    border-right: var(--table-border);
+
+    &.last {
+      border-right-color: transparent;
+    }
+  }
+}
+
+// tip
+.o-table-tip-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--table-tip-text-size);
+  line-height: var(--table-tip-text-height);
+  color: var(--table-tip-color);
+  min-height: var(--table-body-min-height);
+}
+.o-table-loading-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--table-tip-text-size);
+  line-height: var(--table-tip-text-height);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--table-loading-mask);
+  color: var(--table-loading-color);
+  border-radius: var(--table-radius);
+}
+
+.o-table-loading-label {
+  margin-left: 8px;
+}
diff --git a/packages/opendesign/src/table/style/var.scss b/packages/opendesign/src/table/style/var.scss
index ce26b742..315ab486 100644
--- a/packages/opendesign/src/table/style/var.scss
+++ b/packages/opendesign/src/table/style/var.scss
@@ -22,21 +22,28 @@
   --table-body-min-height: 200px;
 
   --table-bg-color: var(--o-color-control-light);
-  --table-radius: var(--o-radius_control-s);
 
-  --table-cell-padding: 8px 12px;
-  --table-cell-height: 48px;
+  --table-radius: var(--o-radius_control-m);
+
+  --table-head-cell-padding: 8px 16px;
+  --table-cell-padding: 16px 16px;
+
+  --table-cell-height: 56px;
   --table-head-cell-height: 48px;
 }
 
 .o-table-small {
-  --table-text-size: var(--o-font_size-tip1);
-  --table-text-height: var(--o-line_height-tip1);
+  --table-text-size: var(--o-font_size-text1);
+  --table-text-height: var(--o-line_height-text1);
 
   --table-head-text-size: var(--table-text-size);
   --table-head-text-height: var(--table-text-height);
 
-  --table-cell-padding: 4px 12px;
-  --table-cell-height: 32px;
-  --table-head-cell-height: 32px;
+  --table-radius: var(--o-radius_control-m);
+
+  --table-head-cell-padding: 8px 12px;
+  --table-cell-padding: 12px 12px;
+
+  --table-cell-height: 48px;
+  --table-head-cell-height: 40px;
 }
diff --git a/packages/portal-ak/src/ak/theme/table.scss b/packages/portal-ak/src/ak/theme/table.scss
index d27a5bcb..2162e0ce 100644
--- a/packages/portal-ak/src/ak/theme/table.scss
+++ b/packages/portal-ak/src/ak/theme/table.scss
@@ -1,65 +1 @@
 @use './mixin.scss' as *;
-
-.o-table {
-  --table-cell-height: 56px;
-  --table-head-cell-height: 48px;
-  --table-cell-padding: 8px 16px 7px;
-  @include respond-to('laptop') {
-    --table-cell-height: 48px;
-    --table-head-cell-height: 40px;
-    --table-text-size: var(--o-font_size-tip1);
-    --table-text-height: var(--o-line_height-tip1);
-  }
-
-  @include respond-to('laptop') {
-    --table-cell-height: 48px;
-    --table-head-cell-height: 40px;
-    --table-text-size: var(--o-font_size-tip1);
-    --table-text-height: var(--o-line_height-tip1);
-
-    --table-cell-padding: 8px 12px 7px;
-  }
-
-  @include respond-to('phone') {
-    --table-cell-height: 32px;
-    --table-head-cell-height: 32px;
-
-    --table-text-size: var(--o-font_size-tip2);
-    --table-text-height: var(--o-line_height-tip2);
-
-    --table-cell-padding: 8px 12px 7px;
-    --table-radius: var(--o-radius_control-xs);
-  }
-}
-
-.o-table-small {
-  --table-text-size: var(--o-font_size-text1);
-  --table-text-height: var(--o-line_height-text1);
-
-  --table-cell-height: 48px;
-  --table-head-cell-height: 40px;
-
-  --table-cell-padding: 8px 12px 7px;
-
-  @include respond-to('pad') {
-    --table-cell-height: 40px;
-    --table-head-cell-height: 32px;
-
-    --table-text-size: var(--o-font_size-tip1);
-    --table-text-height: var(--o-line_height-tip1);
-  }
-  @include respond-to('phone') {
-    --table-cell-height: 34px;
-    --table-head-cell-height: 34px;
-
-    --table-text-size: var(--o-font_size-tip2);
-    --table-text-height: var(--o-line_height-tip2);
-    --table-radius: var(--o-radius_control-xs);
-  }
-}
-.o-table-border-all,
-.o-table-border-row {
-  th {
-    border-bottom: none;
-  }
-}
-- 
Gitee


From 9d1b0fafe1a1d419319602d3d08af55095f4153d Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 14 Sep 2023 11:49:01 +0800
Subject: [PATCH 2/3] =?UTF-8?q?select=E5=93=8D=E5=BA=94=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/select/OSelect.vue    |   1 +
 .../src/select/__demo__/SelectBasic.vue       |  15 ++-
 .../src/select/__demo__/SelectLoading.vue     |   1 -
 packages/opendesign/src/select/style/index.ts |   1 +
 .../opendesign/src/select/style/media.scss    |  15 ++-
 .../opendesign/src/select/style/style.scss    |  14 +--
 packages/opendesign/src/select/style/var.scss | 104 +++++++++++-------
 packages/portal-ak/src/ak/theme/select.scss   |  45 --------
 8 files changed, 100 insertions(+), 96 deletions(-)

diff --git a/packages/opendesign/src/select/OSelect.vue b/packages/opendesign/src/select/OSelect.vue
index 5828c83c..712b2f5c 100644
--- a/packages/opendesign/src/select/OSelect.vue
+++ b/packages/opendesign/src/select/OSelect.vue
@@ -366,6 +366,7 @@ const selectDlgAction: DialogActionT[] = [
         <OPopup
           v-if="!props.disabled"
           v-model:visible="isSelecting"
+          wrap-class="o-select-popup"
           :transition="props.transition"
           :unmount-on-hide="props.unmountOnHide"
           :position="props.optionPosition"
diff --git a/packages/opendesign/src/select/__demo__/SelectBasic.vue b/packages/opendesign/src/select/__demo__/SelectBasic.vue
index 420715b9..e67c1c94 100644
--- a/packages/opendesign/src/select/__demo__/SelectBasic.vue
+++ b/packages/opendesign/src/select/__demo__/SelectBasic.vue
@@ -8,6 +8,17 @@ const options = [
   { label: 'option 3', value: 'opt3' },
   { label: 'option 4', value: 'opt4' },
 ];
+const options2 = [
+  { label: 'option 1', value: 'opt1' },
+  { label: 'option 2', value: 'opt2' },
+  { label: 'option 3', value: 'opt3' },
+  { label: 'option 4', value: 'opt4' },
+  { label: 'option 5', value: 'opt5' },
+  { label: 'option 6', value: 'opt6' },
+  { label: 'option 7', value: 'opt7' },
+  { label: 'option 8', value: 'opt8' },
+  { label: 'option 9', value: 'opt9' },
+];
 const selectVal1 = ref('opt1');
 const changeVal = () => {
   selectVal1.value = 'opt3';
@@ -22,7 +33,7 @@ const changeVal = () => {
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
       <OSelect v-model="selectVal1" variant="text" color="success" placeholder="normal + success" option-title="请选择">
-        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <OOption v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
       <OSelect v-model="selectVal1" variant="text" color="warning" placeholder="normal + warning">
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
@@ -37,7 +48,7 @@ const changeVal = () => {
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
       <OSelect v-model="selectVal1" color="success" placeholder="normal + success">
-        <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <OOption v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
       </OSelect>
       <OSelect v-model="selectVal1" color="warning" placeholder="normal + warning">
         <OOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
diff --git a/packages/opendesign/src/select/__demo__/SelectLoading.vue b/packages/opendesign/src/select/__demo__/SelectLoading.vue
index bf595a86..513f1729 100644
--- a/packages/opendesign/src/select/__demo__/SelectLoading.vue
+++ b/packages/opendesign/src/select/__demo__/SelectLoading.vue
@@ -104,7 +104,6 @@ const onAdd = () => {
 </template>
 <style lang="scss" scoped>
 .select-add {
-  border-top: 1px solid var(--o-color-control1);
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
diff --git a/packages/opendesign/src/select/style/index.ts b/packages/opendesign/src/select/style/index.ts
index 4f85b7a2..75dc5e96 100644
--- a/packages/opendesign/src/select/style/index.ts
+++ b/packages/opendesign/src/select/style/index.ts
@@ -2,4 +2,5 @@ import '../../_styles';
 import '../../popover/style';
 import '../../scroller/style';
 import '../../dialog/style';
+import '../../button/style';
 import './index.scss';
diff --git a/packages/opendesign/src/select/style/media.scss b/packages/opendesign/src/select/style/media.scss
index 474574bc..4f86e46e 100644
--- a/packages/opendesign/src/select/style/media.scss
+++ b/packages/opendesign/src/select/style/media.scss
@@ -2,9 +2,7 @@
 
 @include respond-to('<=pad') {
   .o-select-options-dlg {
-    box-shadow: none;
     --select-options-padding: 0;
-    --select-options-radius: 0;
 
     .o-option-checkbox {
       width: 100%;
@@ -36,3 +34,16 @@
     }
   }
 }
+
+@include respond-to('laptop') {
+  .o-select-large {
+    --select-icon-size: var(--o-icon_size_control-s);
+  }
+}
+
+@include respond-to('<=laptop') {
+  .o-select-large {
+    --select-text-size: var(--o-font_size-tip1);
+    --select-text-height: var(--o-line_height-tip1);
+  }
+}
diff --git a/packages/opendesign/src/select/style/style.scss b/packages/opendesign/src/select/style/style.scss
index d167a4aa..cfaf700f 100644
--- a/packages/opendesign/src/select/style/style.scss
+++ b/packages/opendesign/src/select/style/style.scss
@@ -137,10 +137,6 @@
 }
 
 .o-select-options {
-  background-color: var(--select-options-bg-color);
-  border-radius: var(--select-options-radius);
-  box-shadow: var(--select-options-shadow);
-  border: var(--select-options-bd);
   overflow: hidden;
 }
 .o-select-options-scroller {
@@ -168,6 +164,13 @@
   line-height: var(--o-line_height-tip1);
   color: var(--o-color-info3);
 }
+.o-select-actions {
+  border-top: 1px solid var(--o-color-control4);
+}
+// <=pad
+.o-select-options-dlg {
+  padding-bottom: 4px;
+}
 
 // 多选
 .o-select-value-list {
@@ -209,6 +212,3 @@
   max-width: var(--select-tag-popover-max-width);
   --popover-padding: 6px 8px;
 }
-.o-select-options-dlg {
-  padding-bottom: 4px;
-}
diff --git a/packages/opendesign/src/select/style/var.scss b/packages/opendesign/src/select/style/var.scss
index 222e15a9..4b47c2f3 100644
--- a/packages/opendesign/src/select/style/var.scss
+++ b/packages/opendesign/src/select/style/var.scss
@@ -9,24 +9,25 @@
 
   --select-placeholder: var(--o-color-info4);
 
-  --select-bg-color: transparent;
+  --select-bg-color: var(--o-color-control-light);
   --select-bg-color-hover: var(--o-color-control-light);
   --select-bg-color-focus: var(--o-color-control-light);
+  --select-bg-color-disabled: var(--o-color-control4-light);
 
   --select-icon-color: var(--o-color-info3);
   --select-icon-color-disabled: var(--o-color-info4);
 
-  --select-multiple-padding: 3px 11px 3px 5px;
+  --select-multiple-padding: 3px 7px;
 }
 .o-select,
 .o-select-tag-popover {
   --select-tag-bg-color: var(--o-color-control2-light);
-  --select-tag-radius: var(--o-radius_control-s);
+  --select-tag-radius: 24px;
 
-  --select-tag-text-size: var(--o-font_size-tip1);
-  --select-tag-text-height: var(--o-line_height-tip1);
+  --select-tag-text-size: var(--o-font_size-tip2);
+  --select-tag-text-height: var(--o-line_height-tip2);
   --select-tag-padding: 3px 12px;
-  --select-tag-min-height: var(--o-control_size-s);
+  // --select-tag-min-height: var(--o-control_size-s);
   --select-tag-margin: 2px 4px 2px 0;
 }
 
@@ -53,9 +54,22 @@
   }
 }
 
+.o-select-text {
+  --select-color: var(--o-color-info1);
+  --select-color-hover: var(--o-color-info2);
+  --select-color-focus: var(--o-color-info2);
+  --select-color-disabled: var(--o-color-info4);
+  --select-bg-color: transparent;
+  --select-bg-color-hover: transparent;
+  --select-bg-color-focus: transparent;
+}
+
 .o-select-success {
   &.o-select-text {
     --select-color: var(--o-color-success1);
+    --select-color-hover: var(--o-color-success2);
+    --select-color-focus: var(--o-color-success3);
+    --select-color-disabled: var(--o-color-success4);
   }
   &.o-select-outline {
     --select-bd-color: var(--o-color-success1);
@@ -76,6 +90,9 @@
 .o-select-warning {
   &.o-select-text {
     --select-color: var(--o-color-warning1);
+    --select-color-hover: var(--o-color-warning2);
+    --select-color-focus: var(--o-color-warning3);
+    --select-color-disabled: var(--o-color-warning4);
   }
   &.o-select-outline {
     --select-bd-color: var(--o-color-warning1);
@@ -95,6 +112,9 @@
 .o-select-danger {
   &.o-select-text {
     --select-color: var(--o-color-danger1);
+    --select-color-hover: var(--o-color-danger2);
+    --select-color-focus: var(--o-color-danger3);
+    --select-color-disabled: var(--o-color-danger4);
   }
   &.o-select-outline {
     --select-bd-color: var(--o-color-danger1);
@@ -111,44 +131,43 @@
   }
 }
 
-.o-select-small {
-  --select-padding: 0 5px 0 7px;
-  --select-height: var(--o-control_size-s);
-  --select-text-size: var(--o-font_size-tip1);
-  --select-text-height: var(--o-line_height-tip1);
-  --select-radius: var(--o-radius_control-xs);
-  --select-icon-size: var(--o-icon_size_control-xs);
+.o-select-large {
+  --select-padding: 0 15px;
+  --select-icon-size: var(--o-icon_size_control-m);
 
-  --select-tag-min-height: var(--o-control_size-xs);
-  --select-tag-text-size: var(--o-font_size-tip2);
-  --select-tag-padding: 2px 8px;
-  --select-tag-text-height: var(--o-line_height-tip2);
-  // --select-multiple-max-height: 48px;
-  --select-multiple-padding: 1px 6px 1px 2px;
-  --select-tag-margin: 1px 2px 1px 0;
+  --select-text-size: var(--o-font_size-text1);
+  --select-text-height: var(--o-line_height-text1);
+  --select-radius: var(--o-radius_control-l);
+  --select-height: var(--o-control_size-l);
+
+  --select-multiple-max-height: 64px;
 }
 .o-select-medium {
-  --select-padding: 0 7px 0 11px;
+  --select-padding: 0 15px;
   --select-icon-size: var(--o-icon_size_control-xs);
 
-  --select-height: var(--o-control_size-m);
-  --select-text-size: var(--o-font_size-text1);
-  --select-text-height: var(--o-line_height-text1);
+  --select-text-size: var(--o-font_size-tip1);
+  --select-text-height: var(--o-line_height-tip1);
   --select-radius: var(--o-radius_control-s);
+  --select-height: var(--o-control_size-m);
 
-  // --select-multiple-max-height: 60px;
+  --select-multiple-max-height: 64px;
 }
-.o-select-large {
-  --select-padding: 0 11px 0 15px;
-  --select-icon-size: var(--o-icon_size_control-m);
+.o-select-small {
+  --select-padding: 0 8px;
+  --select-height: var(--o-control_size-s);
+  --select-text-size: var(--o-font_size-tip2);
+  --select-text-height: var(--o-line_height-tip2);
+  --select-radius: var(--o-radius_control-xs);
+  --select-icon-size: var(--o-icon_size_control-xs);
 
-  --select-height: var(--o-control_size-l);
-  --select-text-size: var(--o-font_size-text2);
-  --select-text-height: var(--o-line_height-text2);
-  --select-radius: var(--o-radius_control-l);
+  --select-tag-padding: 2px 8px;
 
-  // --select-multiple-max-height: 60px;
+  --select-multiple-max-height: 48px;
+  --select-multiple-padding: 2px 5px;
+  --select-tag-margin: 1px 2px 1px 0;
 }
+
 .o-select-round-pill {
   --select-radius: var(--o-control_size-l);
   overflow: hidden;
@@ -156,12 +175,19 @@
 
 .o-select-options {
   --select-options-max-height: 212px;
-
-  --select-options-bg-color: var(--o-color-control-light);
-  --select-options-shadow: var(--o-shadow-2);
-  --select-options-bd: none;
-  --select-options-radius: var(--o-radius_control-s);
   --select-options-padding: 4px;
-
   --select-empty-padding: 16px;
+
+  --select-options-max-height: 302px;
+}
+
+.o-select-popup {
+  --popup-shadow: var(--o-shadow-2);
+  --popup-bg-color: var(--o-color-control-light);
+  --popup-radius: var(--o-radius_control-m);
+  --popup-bd: none;
+}
+.o-select-dlg {
+  --dlg-radius: var(--o-radius_control-s);
+  --dlg-body-padding: 16px 24px;
 }
diff --git a/packages/portal-ak/src/ak/theme/select.scss b/packages/portal-ak/src/ak/theme/select.scss
index b25884a8..55bb15b4 100644
--- a/packages/portal-ak/src/ak/theme/select.scss
+++ b/packages/portal-ak/src/ak/theme/select.scss
@@ -1,51 +1,6 @@
 @use './mixin.scss' as *;
-.o-select {
-  --select-multiple-padding: 3px 7px;
-}
-.o-select-outline {
-  --select-bg-color: var(--o-color-control-light);
-  --select-bg-color-disabled: var(--o-color-control4-light);
-}
-.o-select-text {
-  --select-color: var(--o-color-info1);
-  --select-color-hover: var(--o-color-info2);
-  --select-color-focus: var(--o-color-info2);
-  --select-bg-color-hover: transparent;
-  --select-bg-color-focus: transparent;
-}
-.o-select-medium {
-  --select-padding: 0 15px;
-  --select-text-size: var(--o-font_size-tip1);
-  --select-text-height: var(--o-line_height-tip1);
-}
-.o-select-large {
-  --select-padding: 0 15px;
-  --select-text-size: var(--o-font_size-text1);
-  --select-text-height: var(--o-line_height-text1);
-
-  @include respond-to('<=pad') {
-    --select-text-size: var(--o-font_size-tip1);
-    --select-text-height: var(--o-line_height-tip1);
-  }
-}
-.o-select-options {
-  --select-options-radius: var(--o-radius_control-m);
-  --select-options-max-height: 302px;
-}
-// 移动端响应式
-.o-select-options-dlg {
-  --select-options-radius: 0;
-}
-
-.o-select,
-.o-select-tag-popover {
-  --select-tag-radius: var(--o-control_size-s);
-  --select-tag-text-size: var(--o-font_size-tip2);
-  --select-tag-text-height: var(--o-line_height-tip2);
-}
 
 .c-select-action {
-  border-top: 1px solid var(--o-color-control4);
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
-- 
Gitee


From 035544feda8085a056f004a14b2783ad6f17ed75 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Thu, 14 Sep 2023 11:52:47 +0800
Subject: [PATCH 3/3] =?UTF-8?q?option=E5=93=8D=E5=BA=94=E5=BC=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/option/style/index.scss    | 44 +------------------
 .../opendesign/src/option/style/media.scss    |  9 ++++
 .../opendesign/src/option/style/style.scss    | 42 ++++++++++++++++++
 3 files changed, 53 insertions(+), 42 deletions(-)
 create mode 100644 packages/opendesign/src/option/style/media.scss
 create mode 100644 packages/opendesign/src/option/style/style.scss

diff --git a/packages/opendesign/src/option/style/index.scss b/packages/opendesign/src/option/style/index.scss
index 963760e6..504d59c4 100644
--- a/packages/opendesign/src/option/style/index.scss
+++ b/packages/opendesign/src/option/style/index.scss
@@ -1,42 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-option {
-  display: flex;
-  align-items: center;
-  padding: var(--option-padding);
-  color: var(--option-color);
-  background-color: var(--option-bg-color);
-  font-size: var(--option-text-size);
-  line-height: var(--option-text-height);
-  border-radius: var(--option-radius);
-  transition: background-color var(--o-duration-s) var(--o-easing-standard);
-  cursor: pointer;
-  margin-bottom: var(--option-gap);
-  &:last-child {
-    margin-bottom: 0;
-  }
-  @include hover {
-    &.o-option-multiple:hover,
-    &:hover {
-      background-color: var(--option-bg-color-hover);
-      color: var(--option-color-hover);
-    }
-  }
-  &.active {
-    font-weight: 500;
-    color: var(--option-color-active);
-    background-color: var(--option-bg-color-active);
-  }
-}
-
-.o-option-disabled {
-  &,
-  &:hover,
-  &:active,
-  &.o-option-multiple:hover {
-    cursor: not-allowed;
-    color: var(--option-color-disabled);
-    background-color: var(--option-bg-color-disabled);
-  }
-}
+@use './style.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/option/style/media.scss b/packages/opendesign/src/option/style/media.scss
new file mode 100644
index 00000000..612fbb04
--- /dev/null
+++ b/packages/opendesign/src/option/style/media.scss
@@ -0,0 +1,9 @@
+@use '../../_styles/mixin.scss' as *;
+
+@include respond-to('<=laptop') {
+  .o-option {
+    --option-text-size: var(--o-font_size-tip1);
+    --option-text-height: var(--o-line_height-tip1);
+    --option-padding: 6px 12px;
+  }
+}
diff --git a/packages/opendesign/src/option/style/style.scss b/packages/opendesign/src/option/style/style.scss
new file mode 100644
index 00000000..963760e6
--- /dev/null
+++ b/packages/opendesign/src/option/style/style.scss
@@ -0,0 +1,42 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-option {
+  display: flex;
+  align-items: center;
+  padding: var(--option-padding);
+  color: var(--option-color);
+  background-color: var(--option-bg-color);
+  font-size: var(--option-text-size);
+  line-height: var(--option-text-height);
+  border-radius: var(--option-radius);
+  transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  cursor: pointer;
+  margin-bottom: var(--option-gap);
+  &:last-child {
+    margin-bottom: 0;
+  }
+  @include hover {
+    &.o-option-multiple:hover,
+    &:hover {
+      background-color: var(--option-bg-color-hover);
+      color: var(--option-color-hover);
+    }
+  }
+  &.active {
+    font-weight: 500;
+    color: var(--option-color-active);
+    background-color: var(--option-bg-color-active);
+  }
+}
+
+.o-option-disabled {
+  &,
+  &:hover,
+  &:active,
+  &.o-option-multiple:hover {
+    cursor: not-allowed;
+    color: var(--option-color-disabled);
+    background-color: var(--option-bg-color-disabled);
+  }
+}
-- 
Gitee