diff --git a/docs/content/component/theme.md b/docs/content/component/theme.md
index a53ebe63..714ec8f8 100644
--- a/docs/content/component/theme.md
+++ b/docs/content/component/theme.md
@@ -32,8 +32,7 @@ Clair 使用的完整 CSS 变量列表，请 [查看 github 代码](https://gith
 在你的项目 CSS 入口文件（比如 `main.css`）中，引入 Clair 及其组件样式。
 
 ```css
-@import url('clair/src/css/main.css');
-@import url('clair/src/components/**/*.css');
+@import url('clair/src/styles/main.css');
 ```
 
 ### 3. 配置 PostCSS 插件
@@ -57,7 +56,7 @@ module.exports = {
         const cwd = process.cwd()
         // 将 theme.css 指向你的项目中的 CSS 变量配置文件
         if (id === './theme.css') return resolve(cwd, 'src/css/theme.css')
-        if (/^clair/.test(id)) return glob.sync(join(cwd, 'node_modules', id))
+        if (/\*\*/.test(id)) return glob.sync(join(cwd, 'node_modules/clair/src/styles/', id))
         return id
       }
     },
diff --git a/src/components/datepicker/daterange.vue b/src/components/datepicker/daterange.vue
index 7a909678..5fd8ccb1 100644
--- a/src/components/datepicker/daterange.vue
+++ b/src/components/datepicker/daterange.vue
@@ -266,8 +266,11 @@ export default {
       this.$emit('change', this.value)
     },
     confirmRange () {
-      this.end = this.end || this.rangeObj.endDate
-      this.$emit('change', [this.start, this.end])
+      if (this.start && this.end) {
+        this.$emit('change', [this.start, this.end])
+      } else {
+        this.cancel()
+      }
     }
   }
 }
diff --git a/src/components/datepicker/index.css b/src/components/datepicker/index.css
index bc897b65..5b64c6b2 100644
--- a/src/components/datepicker/index.css
+++ b/src/components/datepicker/index.css
@@ -44,10 +44,14 @@
 }
 
 .c-datepicker__panel {
-  border: 1px solid rgb(214, 217, 219);
   box-shadow: 2px 2px 0.5em 0 color(var(--gray) l(95%));
   overflow: hidden;
 
+  &.withBorder {
+    border: 1px solid rgb(214, 217, 219);
+    border-radius: 0.2em;
+  }
+
   & .c-calendar {
     border: 0;
     box-shadow: none;
diff --git a/src/components/datepicker/index.vue b/src/components/datepicker/index.vue
index eeff09a0..b5aa4119 100644
--- a/src/components/datepicker/index.vue
+++ b/src/components/datepicker/index.vue
@@ -36,7 +36,7 @@
 
   .c-datepicker__panel(
     ref="datepickerPanel"
-    :class="{'withSidebar': (optionList.length > 0 || hasSidebarSlot) }")
+    :class="{'withSidebar': (optionList.length > 0 || hasSidebarSlot) && isOpen == true, 'withBorder': isOpen == true }")
     .c-datepicker__sidebar(v-if="(hasSidebarSlot || optionList.length > 0 )&& isOpen")
       slot(name="dateSideBar"
         :datepicker="datepicker")
diff --git a/src/components/table/base-table.vue b/src/components/table/base-table.vue
index e84bdc7e..a06adc71 100644
--- a/src/components/table/base-table.vue
+++ b/src/components/table/base-table.vue
@@ -43,7 +43,7 @@ table
           v-for="columnsItem,colIndex in allColumns"
           :style="getCellStyle(columnsItem)"
           :class="getColumnClassName(columnsItem)"
-          @click="openExpand(dataItem, columnsItem)"
+          @click="openExpand(dataItem, columnsItem, index, colIndex)"
           :colspan="tdSpanMethod(dataItem, columnItem, index, colIndex).colspan"
           :rowspan="tdSpanMethod(dataItem, columnItem, index, colIndex).rowspan"
           v-if="tdSpanMethod(dataItem, columnItem, index, colIndex).rowspan && tdSpanMethod(dataItem, columnItem, index, colIndex).colspan"
@@ -165,9 +165,10 @@ export default {
         colspan
       }
     },
-    openExpand (dataItem, columnsItem) {
+    openExpand (dataItem, columnsItem, index, colIndex) {
       if (columnsItem.type !== 'expand') return
       dataItem._showExpand = !dataItem._showExpand
+      this.$emit('openExpand', dataItem, index)
     },
     getRowClassName (row, rowIndex) {
       const classes = []
diff --git a/src/components/table/index.md b/src/components/table/index.md
index 64265dcb..87ce21c2 100644
--- a/src/components/table/index.md
+++ b/src/components/table/index.md
@@ -771,6 +771,7 @@ p {
   :columns="columns"
   :datasource="datasource"
   :expand="hasExpand"
+  @openExpand="openExpand"
 >
   <p slot="expand" slot-scope="props">
     32324--{{props.row.type}}
@@ -778,6 +779,12 @@ p {
 </c-table>
 <script>
 export default {
+  methods: {
+    openExpand (item, index) {
+      alert(index)
+      console.log(item)
+    }
+  },
   data () {
     return {
       hasExpand: true,
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index e7bf09d8..798a23b3 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -35,6 +35,7 @@ mixin Table(columns, onlyhead, onlybody)
     @selectAllChange="onSelectAllChange"
     @rowEnter="rowEnter"
     @rowLeave="rowLeave"
+    @openExpand="onOpenExpand"
     :expand="expand"
     :spanMethod="spanMethod"
   )
@@ -217,6 +218,9 @@ export default {
   },
 
   methods: {
+    onOpenExpand (item, index) {
+      this.$emit('openExpand', item, index)
+    },
     updateSelectAll (status) {
       this.allChecked = status
       this.dataList = this.dataList.map(item => {