From 90f8431e31829a101032ebbe2d4c0d525ed9d3e9 Mon Sep 17 00:00:00 2001
From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Date: Wed, 13 Dec 2023 09:28:04 +0800
Subject: [PATCH] fix(filter-panel): [filter-panel] Optimize the official
 website documentation and e2e test cases for the components (#1104)

---
 .../basic-usage-composition-api.vue           |  15 ++-
 .../pc/app/filter-panel/basic-usage.spec.ts   |  21 +++-
 .../demos/pc/app/filter-panel/basic-usage.vue |  19 +++-
 .../clearable-composition-api.vue             |  33 ------
 .../pc/app/filter-panel/clearable.spec.ts     |  18 ---
 .../demos/pc/app/filter-panel/clearable.vue   |  42 -------
 .../filter-panel/disabled-composition-api.vue |  28 -----
 .../pc/app/filter-panel/disabled.spec.ts      |  12 --
 .../demos/pc/app/filter-panel/disabled.vue    |  37 ------
 .../demos/pc/app/filter-panel/event.spec.ts   |  14 ++-
 .../pc/app/filter-panel/manual-hide.spec.ts   |   4 +-
 .../popper-class-composition-api.vue          |   1 +
 .../pc/app/filter-panel/popper-class.spec.ts  |   4 +-
 .../pc/app/filter-panel/popper-class.vue      |   1 +
 .../demos/pc/app/filter-panel/tip.spec.ts     |   4 +-
 .../filter-panel/webdoc/filter-panel.cn.md    |   2 +-
 .../filter-panel/webdoc/filter-panel.en.md    |   6 +-
 .../app/filter-panel/webdoc/filter-panel.js   | 106 +++++++++---------
 .../demos/pc/app/popover/webdoc/popover.js    |  10 +-
 packages/theme/src/color-picker/index.less    |   1 -
 20 files changed, 126 insertions(+), 252 deletions(-)
 delete mode 100644 examples/sites/demos/pc/app/filter-panel/clearable-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/filter-panel/clearable.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/filter-panel/clearable.vue
 delete mode 100644 examples/sites/demos/pc/app/filter-panel/disabled-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/filter-panel/disabled.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/filter-panel/disabled.vue

diff --git a/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
index 81098f203..3fc8b085c 100644
--- a/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
@@ -1,6 +1,15 @@
 <template>
   <div>
-    <tiny-filter-panel ref="filterPanelRef" label="物品数量" @handle-clear="handleClear" :value="value">
+    <div class="mb10">
+      <tiny-switch v-model="disabled"></tiny-switch><span class="ml10">{{ disabled ? '禁用' : '非禁用' }}</span>
+    </div>
+    <tiny-filter-panel
+      ref="filterPanelRef"
+      label="物品数量"
+      @handle-clear="handleClear"
+      :value="value"
+      :disabled="disabled"
+    >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>
         <tiny-radio label="等于">等于</tiny-radio>
@@ -17,11 +26,13 @@ import {
   FilterPanel as TinyFilterPanel,
   Radio as TinyRadio,
   RadioGroup as TinyRadioGroup,
-  Input as TinyInput
+  Input as TinyInput,
+  Switch as TinySwitch
 } from '@opentiny/vue'
 
 const inputVal = ref('')
 const radioVal = ref('')
+const disabled = ref(false)
 const value = computed(() => {
   return radioVal.value + inputVal.value
 })
diff --git a/examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts b/examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts
index e3444f129..83ce31cdb 100644
--- a/examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts
@@ -7,13 +7,22 @@ test('基本用法', async ({ page }) => {
   const panel = page.locator('.tiny-filter-panel')
   const button = panel.locator('.tiny-filter-box')
   const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
-  const input = page.getByRole('tooltip', { name: '大于 等于 小于' }).getByRole('textbox')
+  const inputEl = page.locator('.tiny-filter-panel__popover').locator('.tiny-input__inner')
+  const disabledBtn = panel.locator('.tiny-filter-box.disabled')
+  const switchBtn = page.locator('.mb10 > .tiny-switch')
 
   await button.click()
-  await expect(popPanel).toBeVisible()
+  await popPanel.isVisible()
   await page.getByRole('radio', { name: '等于' }).click()
-  await expect(button).toHaveText('物品数量等于')
-  await input.click()
-  await input.fill('10')
-  await expect(button).toHaveText('物品数量等于10')
+  await button.getByText('物品数量等于').isVisible()
+  await inputEl.click()
+  await inputEl.fill('10')
+  await button.getByText('物品数量等于10').isVisible()
+
+  // 禁用
+  await switchBtn.click()
+  await expect(disabledBtn).toHaveCount(1)
+  await expect(disabledBtn).toHaveCSS('cursor', 'not-allowed')
+  await button.click()
+  await popPanel.isHidden()
 })
diff --git a/examples/sites/demos/pc/app/filter-panel/basic-usage.vue b/examples/sites/demos/pc/app/filter-panel/basic-usage.vue
index 561ff572f..63dac0d8d 100644
--- a/examples/sites/demos/pc/app/filter-panel/basic-usage.vue
+++ b/examples/sites/demos/pc/app/filter-panel/basic-usage.vue
@@ -1,6 +1,15 @@
 <template>
   <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" @handle-clear="handleClear" :value="value">
+    <div class="mb10">
+      <tiny-switch v-model="disabled"></tiny-switch><span class="ml10">{{ disabled ? '禁用' : '非禁用' }}</span>
+    </div>
+    <tiny-filter-panel
+      ref="filterPanel"
+      label="物品数量"
+      @handle-clear="handleClear"
+      :value="value"
+      :disabled="disabled"
+    >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>
         <tiny-radio label="等于">等于</tiny-radio>
@@ -12,19 +21,21 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
+import { FilterPanel, Radio, RadioGroup, Input, Switch } from '@opentiny/vue'
 
 export default {
   components: {
     TinyRadio: Radio,
     TinyRadioGroup: RadioGroup,
     TinyFilterPanel: FilterPanel,
-    TinyInput: Input
+    TinyInput: Input,
+    TinySwitch: Switch
   },
   data() {
     return {
       inputVal: '',
-      radioVal: ''
+      radioVal: '',
+      disabled: false
     }
   },
   computed: {
diff --git a/examples/sites/demos/pc/app/filter-panel/clearable-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/clearable-composition-api.vue
deleted file mode 100644
index 14296ed30..000000000
--- a/examples/sites/demos/pc/app/filter-panel/clearable-composition-api.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" clearable :value="value" @handle-clear="handleClear">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput
-} from '@opentiny/vue'
-
-const inputVal = ref('')
-const radioVal = ref('')
-const value = computed(() => {
-  return radioVal.value + inputVal.value
-})
-
-function handleClear() {
-  radioVal.value = ''
-  inputVal.value = ''
-}
-</script>
diff --git a/examples/sites/demos/pc/app/filter-panel/clearable.spec.ts b/examples/sites/demos/pc/app/filter-panel/clearable.spec.ts
deleted file mode 100644
index b877648c2..000000000
--- a/examples/sites/demos/pc/app/filter-panel/clearable.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('点击按钮清空', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/filter-panel/clearable')
-
-  const panel = page.locator('.tiny-filter-panel')
-  const button = panel.locator('.tiny-filter-box')
-  const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
-  const clear = panel.locator('.filter-icon-close')
-
-  await button.click()
-  await expect(popPanel).toBeVisible()
-  await page.getByRole('radio', { name: '等于' }).click()
-  await expect(button).toHaveText('物品数量等于')
-  await clear.click()
-  await expect(button).toHaveText('物品数量')
-})
diff --git a/examples/sites/demos/pc/app/filter-panel/clearable.vue b/examples/sites/demos/pc/app/filter-panel/clearable.vue
deleted file mode 100644
index 14eb9eccc..000000000
--- a/examples/sites/demos/pc/app/filter-panel/clearable.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" clearable :value="value" @handle-clear="handleClear">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script>
-import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      inputVal: '',
-      radioVal: ''
-    }
-  },
-  computed: {
-    value() {
-      return this.radioVal + this.inputVal
-    }
-  },
-  methods: {
-    handleClear() {
-      this.radioVal = ''
-      this.inputVal = ''
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/filter-panel/disabled-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/disabled-composition-api.vue
deleted file mode 100644
index c6b0926a5..000000000
--- a/examples/sites/demos/pc/app/filter-panel/disabled-composition-api.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" disabled :value="value">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput
-} from '@opentiny/vue'
-
-const inputVal = ref('')
-const radioVal = ref('')
-const value = computed(() => {
-  return radioVal.value + inputVal.value
-})
-</script>
diff --git a/examples/sites/demos/pc/app/filter-panel/disabled.spec.ts b/examples/sites/demos/pc/app/filter-panel/disabled.spec.ts
deleted file mode 100644
index a3c29798b..000000000
--- a/examples/sites/demos/pc/app/filter-panel/disabled.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('禁用状态', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/filter-panel/disabled')
-
-  const panel = page.locator('.tiny-filter-panel')
-  const button = panel.locator('.tiny-filter-box.disabled')
-
-  await expect(button).toHaveCount(1)
-  await expect(button).toHaveCSS('cursor', 'not-allowed')
-})
diff --git a/examples/sites/demos/pc/app/filter-panel/disabled.vue b/examples/sites/demos/pc/app/filter-panel/disabled.vue
deleted file mode 100644
index a36c77aaf..000000000
--- a/examples/sites/demos/pc/app/filter-panel/disabled.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" disabled :value="value">
-      <tiny-radio-group v-model="radioVal" size="mini">
-        <tiny-radio label="大于">大于</tiny-radio>
-        <tiny-radio label="等于">等于</tiny-radio>
-        <tiny-radio label="小于">小于</tiny-radio>
-      </tiny-radio-group>
-      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
-    </tiny-filter-panel>
-  </div>
-</template>
-
-<script>
-import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input
-  },
-  data() {
-    return {
-      inputVal: '',
-      radioVal: ''
-    }
-  },
-  computed: {
-    value() {
-      return this.radioVal + this.inputVal
-    }
-  },
-  methods: {}
-}
-</script>
diff --git a/examples/sites/demos/pc/app/filter-panel/event.spec.ts b/examples/sites/demos/pc/app/filter-panel/event.spec.ts
index abca2bf60..1803e90c6 100644
--- a/examples/sites/demos/pc/app/filter-panel/event.spec.ts
+++ b/examples/sites/demos/pc/app/filter-panel/event.spec.ts
@@ -8,11 +8,21 @@ test('事件', async ({ page }) => {
   const button = panel.locator('.tiny-filter-box')
   const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
   const modal = page.locator('.tiny-modal')
+  const clear = panel.locator('.filter-icon-close')
 
+  // handle-clear事件
+  await button.click()
+  await popPanel.isVisible()
+  await page.getByRole('radio', { name: '等于' }).click()
+  await expect(button).toHaveText('物品数量等于')
+  await clear.click()
+  await expect(button).toHaveText('物品数量')
+  await button.click()
+
+  // visible-change事件
   await button.click()
-  await expect(popPanel).toBeVisible()
   await expect(modal.nth(1)).toHaveText('true visibleChange')
   await button.click()
-  await expect(popPanel).not.toBeVisible()
+  await popPanel.isHidden()
   await expect(modal.nth(2)).toHaveText('false visibleChange')
 })
diff --git a/examples/sites/demos/pc/app/filter-panel/manual-hide.spec.ts b/examples/sites/demos/pc/app/filter-panel/manual-hide.spec.ts
index 6cab36e2f..55808e7f4 100644
--- a/examples/sites/demos/pc/app/filter-panel/manual-hide.spec.ts
+++ b/examples/sites/demos/pc/app/filter-panel/manual-hide.spec.ts
@@ -10,7 +10,7 @@ test('手动隐藏', async ({ page }) => {
   const manualButton = page.getByRole('button', { name: '确定' })
 
   await button.click()
-  await expect(popPanel).toBeVisible()
+  await popPanel.isVisible()
   await manualButton.click()
-  await expect(popPanel).not.toBeVisible()
+  await popPanel.isHidden()
 })
diff --git a/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
index 35a2d1482..0713a95f1 100644
--- a/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
@@ -7,6 +7,7 @@
       :popper-append-to-body="false"
       :value="value"
       :clearable="false"
+      placement="top-start"
     >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>
diff --git a/examples/sites/demos/pc/app/filter-panel/popper-class.spec.ts b/examples/sites/demos/pc/app/filter-panel/popper-class.spec.ts
index 1eb0b4006..3b45853c3 100644
--- a/examples/sites/demos/pc/app/filter-panel/popper-class.spec.ts
+++ b/examples/sites/demos/pc/app/filter-panel/popper-class.spec.ts
@@ -9,7 +9,7 @@ test('弹出框样式', async ({ page }) => {
   const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
 
   await button.click()
-  await expect(popPanel).toBeVisible()
+  await popPanel.isHidden()
   await button.click()
-  await expect(popPanel).not.toBeVisible()
+  await popPanel.isHidden()
 })
diff --git a/examples/sites/demos/pc/app/filter-panel/popper-class.vue b/examples/sites/demos/pc/app/filter-panel/popper-class.vue
index 38779b6d3..0ebb0d094 100644
--- a/examples/sites/demos/pc/app/filter-panel/popper-class.vue
+++ b/examples/sites/demos/pc/app/filter-panel/popper-class.vue
@@ -7,6 +7,7 @@
       :popper-append-to-body="false"
       :value="value"
       :clearable="false"
+      placement="top-start"
     >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>
diff --git a/examples/sites/demos/pc/app/filter-panel/tip.spec.ts b/examples/sites/demos/pc/app/filter-panel/tip.spec.ts
index 714df9968..467190b00 100644
--- a/examples/sites/demos/pc/app/filter-panel/tip.spec.ts
+++ b/examples/sites/demos/pc/app/filter-panel/tip.spec.ts
@@ -2,12 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('tip提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/filter-panel/tip')
+  await page.goto('filter-panel#tip')
 
   const panel = page.locator('.tiny-filter-panel')
   const help = panel.locator('.tiny-svg.tiny-tooltip')
   const tooltip = page.getByRole('tooltip', { name: '请选择物品数量' })
 
   await help.hover()
-  await expect(tooltip).toBeVisible()
+  await tooltip.isVisible()
 })
diff --git a/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.cn.md b/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.cn.md
index ff04a980e..e406e55b0 100644
--- a/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.cn.md
+++ b/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.cn.md
@@ -4,4 +4,4 @@ title: FilterPanel 过滤器面板
 
 # FilterPanel 过滤器面板
 
-<div>FilterPanel 过滤器面板 。</div>
+<div>用于列表数据过滤、图标卡片过滤等。</div>
diff --git a/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.en.md b/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.en.md
index c6b7ba42f..bc3279bd8 100644
--- a/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.en.md
+++ b/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.en.md
@@ -1,7 +1,7 @@
 ---
-title: FilterPanel FilterPanel
+title: FilterPanel
 ---
 
-# FilterPanel FilterPanel
+# FilterPanel
 
-<div>FilterPanel Filterpanel.</div>
+<div>Used for filtering list data, icon card filtering, etc.</div>
diff --git a/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.js b/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.js
index 867340c9d..d8ab4ea8d 100644
--- a/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.js
+++ b/examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.js
@@ -6,38 +6,30 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>过滤器面板用于列表数据过滤、图标卡片过滤，自定义过滤面板内容</p>\n',
-        'en-US':
-          '<p>The filter panel is used to filter list data, filter icon cards, and customize the filter panel content</p>\n'
+        'zh-CN':
+          '通过 <code>label</code> 设置标题，<code>value</code> 设置标题右侧内容，<code>disabled</code> 设置是否禁用；通过默认插槽自定义过滤面板内容。',
+        'en-US': `Set the title through<code>label</code>,<code>value</code>set the content to the right of the title, and<code>disabled</code>set whether to disable it; 
+          Customize filter panel content through default slots.`
       },
       'codeFiles': ['basic-usage.vue']
     },
     {
-      'demoId': 'disabled',
-      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>disabled</code> 设置禁用</p>\n',
-        'en-US': '<p>Disabling by <code>disabled</code> </p>\n'
-      },
-      'codeFiles': ['disabled.vue']
-    },
-    {
-      'demoId': 'clearable',
-      'name': { 'zh-CN': '显示清空按钮', 'en-US': 'Show Clear Button' },
+      'demoId': 'popper-class',
+      'name': { 'zh-CN': '自定义下拉面板', 'en-US': 'Custom dropdown box' },
       'desc': {
         'zh-CN':
-          '<p>给组件加上 <code>clearable</code> 属性可以显示清空按钮，配合 <code>handle-clear</code> 事件一起使用清空内容区域的值</p>\n',
-        'en-US':
-          '<p>The <code>clearable</code> attribute is added to the component to display the clear button. This attribute is used together with the <code>handle-clear</code> event to clear the value of the content area.</p>\n'
+          '通过 <code>placement</code> 控制下拉面板的位置， <code>popper-class</code> 设置类名，自定义下拉面板的样式；<code>popper-append-to-body</code> 设置弹下拉面板是否插入至 body 元素。在下拉面板的定位出现问题时，可将其设置为 false。',
+        'en-US': `Control the position of the drop-down panel through<code>placement</code>. Set the class name and customize the style of the dropdown box through<code>popper-class</code>. <code>popper-append-to-body</code>Set whether the pop-up 
+          menu is inserted into the body element. When there is an issue with the positioning of the dropdown box, it can be set to false.`
       },
-      'codeFiles': ['clearable.vue']
+      'codeFiles': ['popper-class.vue']
     },
     {
       'demoId': 'tip',
-      'name': { 'zh-CN': 'tip 提示', 'en-US': 'Tip' },
+      'name': { 'zh-CN': '提示', 'en-US': 'Tip' },
       'desc': {
-        'zh-CN': '<p>标题右侧添加提示信息</p>\n',
-        'en-US': '<p>Add a message to the right of the title.</p>\n'
+        'zh-CN': `通过 <code>:clearable='false'</code> 隐藏清空按钮；配合 <code>tip</code> 添加标题右侧提示信息。`,
+        'en-US': `Hide the clear button through<code>:clearable='false'</code>; Collaborate with<code>tip</code>to add prompt information on the right side of the title.`
       },
       'codeFiles': ['tip.vue']
     },
@@ -45,9 +37,8 @@ export default {
       'demoId': 'manual-hide',
       'name': { 'zh-CN': '手动隐藏', 'en-US': 'Manually hide' },
       'desc': {
-        'zh-CN': '<p>通过给元素添加 ref，然后主动调用组件的 hide 方法可以手动隐藏下拉框</p>',
-        'en-US':
-          '<p>You can manually hide the drop-down list box by adding ref to the element and invoking the hide method of the component.</p>'
+        'zh-CN': '手动调用 <code>hide</code> 实例方法完成收起下拉面板功能。',
+        'en-US': 'Manually call the<code>hide</code>instance method to complete the collapse dropdown function.'
       },
       'codeFiles': ['manual-hide.vue']
     },
@@ -55,22 +46,12 @@ export default {
       'demoId': 'event',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p> <code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
+        'zh-CN':
+          '<code>handle-clear</code> 监听清空按钮点击事件，执行删除操作； <code>visible-change</code> 监听下拉面板的显隐事件。',
         'en-US':
-          '<p> <code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
+          '<code>handle-clear</code>Listen to the clear button click event and execute the delete operation<code>visible-change</code>listens to the explicit and implicit events of the drop-down panel.'
       },
       'codeFiles': ['event.vue']
-    },
-    {
-      'demoId': 'popper-class',
-      'name': { 'zh-CN': '弹出框样式', 'en-US': 'Pop-up dialog box style' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>popper-class</code> 属性可自定义下拉弹框的样式。popper-append-to-body 指定是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false</p>',
-        'en-US':
-          '<p>You can use the <code>popper-class</code> attribute to customize the style of the drop-down list box. popper-append-to-body Specifies whether to insert a pop-up box into the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false</p>'
-      },
-      'codeFiles': ['popper-class.vue']
     }
   ],
   apis: [
@@ -83,11 +64,11 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '显示清空按钮，配合`handle-clear`事件一起使用清空内容区域的值，默认为true。',
+            'zh-CN': '控制清空按钮的显隐，默认显示；可配合 handle-clear 事件来完成清空内容区域的值',
             'en-US':
-              'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
+              'Control the display of the clear button, default display; Can be used in conjunction with the handle clear event to clear the value of the content area'
           },
-          'demoId': 'clearable'
+          'demoId': 'tip'
         },
         {
           'name': 'disabled',
@@ -97,7 +78,7 @@ export default {
             'zh-CN': '是否禁用',
             'en-US': 'Whether to disable'
           },
-          'demoId': 'disabled'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'label',
@@ -107,25 +88,27 @@ export default {
             'zh-CN': '标题',
             'en-US': 'The title'
           },
-          'demoId': 'popper-class'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'placement',
-          'type': 'string',
-          'defaultValue': 'bottom-start',
+          'type': 'IPopperPlacement',
+          'typeAnchorName': 'popover#IPopperPlacement',
+          'defaultValue': `'bottom-start'`,
           'desc': {
-            'zh-CN': '弹出框位置，默认值为bottom-start',
-            'en-US': 'Position of the pop-up dialog box. The default value is bottom-start.'
+            'zh-CN': '下拉面板位置，可选值请参考popover组件的同属性',
+            'en-US':
+              'Drop down panel position, optional values please refer to the same properties of the popover component'
           },
-          'demoId': ''
+          'demoId': 'popper-class'
         },
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '下拉框是否添加到body中',
-            'en-US': 'Indicates whether to add the drop-down list box to the body.'
+            'zh-CN': '下拉面板是否添加到body元素中',
+            'en-US': 'Indicates whether to add the drop-down panel to the body element'
           },
           'demoId': 'popper-class'
         },
@@ -134,8 +117,8 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉框的class',
-            'en-US': 'Class in the drop-down list box'
+            'zh-CN': '下拉面板的class',
+            'en-US': 'Class in the drop-down panel'
           },
           'demoId': 'popper-class'
         },
@@ -166,21 +149,32 @@ export default {
           'type': '() => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '清除按钮点击事件。',
-            'en-US': 'Clear button click event.'
+            'zh-CN': '清除按钮点击事件',
+            'en-US': 'Clear button click event'
           },
           'demoId': 'event'
         },
         {
           'name': 'visible-change',
-          'type': '() => void',
+          'type': '(visible: boolean) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '下拉框显示隐藏事件。',
-            'en-US': 'The drop-down list box displays hidden events.'
+            'zh-CN': '下拉面板显示隐藏事件',
+            'en-US': 'The drop-down panel displays hidden events'
           },
           'demoId': 'event'
         }
+      ],
+      'methods': [
+        {
+          'name': 'hide',
+          'type': '() => void',
+          'desc': {
+            'zh-CN': '隐藏下拉面板的方法',
+            'en-US': 'How to hide the drop-down panel'
+          },
+          'demoId': 'manual-hide'
+        }
       ]
     }
   ]
diff --git a/examples/sites/demos/pc/app/popover/webdoc/popover.js b/examples/sites/demos/pc/app/popover/webdoc/popover.js
index 2391cd3cc..28b103648 100644
--- a/examples/sites/demos/pc/app/popover/webdoc/popover.js
+++ b/examples/sites/demos/pc/app/popover/webdoc/popover.js
@@ -194,7 +194,8 @@ export default {
 
         {
           'name': 'placement',
-          'type': `'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'`,
+          'type': 'IPopperPlacement',
+          'typeAnchorName': 'IPopperPlacement',
           'defaultValue': '"bottom"',
           'desc': {
             'zh-CN': '弹出层出现的位置',
@@ -393,6 +394,13 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
 }
       `
+    },
+    {
+      name: 'IPopperPlacement',
+      type: 'type',
+      code: `
+type IPopperPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
     }
   ]
 }
diff --git a/packages/theme/src/color-picker/index.less b/packages/theme/src/color-picker/index.less
index a8d164e07..21aae9478 100644
--- a/packages/theme/src/color-picker/index.less
+++ b/packages/theme/src/color-picker/index.less
@@ -14,7 +14,6 @@
   box-sizing: content-box;
   padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
   cursor: pointer;
-  .component-css-vars-color-picker();
 
   &__inner {
     display: flex;