diff --git a/example/docs/zh-CN/components/panel.md b/example/docs/zh-CN/components/panel.md
index d000e066..847e331f 100644
--- a/example/docs/zh-CN/components/panel.md
+++ b/example/docs/zh-CN/components/panel.md
@@ -30,27 +30,6 @@ export default {
 
 :::
 
-::: title 主题配置
-:::
-
-<p style="margin-left: 30px">less</p>
-
-```
-@panel-border-color: #eee;
-@panel-border-radius: 2px;
-@panel-fore-color: #333;
-@panel-back-color: #fff;
-```
-
-<p style="margin-left: 30px">css</p>
-
-```
---panel-border-color: #eee;
---panel-border-radius: 2px;
---panel-fore-color: #333;
---panel-back-color: #fff;
-```
-
 ::: title Panel 插槽
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 6cb47741..6ce16dbe 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,7 +11,19 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.4.0">
-  <ul> 
+    <ul> 
+      <a name="0-4-5"> </a> 
+      <li> 
+        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <ul>
+          <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
+          <li>[修复] variable 全局变量重复导入的问题</li>
+          <li>[支持] icon 列表复制。</li>
+          <li>[支持] 夜间模式</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
       <a name="0-4-4"> </a> 
       <li> 
         <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index fc868f7e..9b29a4bc 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -345,8 +345,8 @@ export default {
   background-color: #f1f1f1!important;
 }
 
-.layui-layout-document .layui-header .layui-nav .layui-nav-item > a,
-.layui-layout-document .layui-header .layui-nav .layui-nav-item > a:hover {
+.layui-layout-document .layui-header .layui-nav .layui-nav-item  a,
+.layui-layout-document .layui-header .layui-nav .layui-nav-item  a:hover {
   color: rgba(0, 0, 0, 0.8);
 }
 
diff --git a/package.json b/package.json
index e1fb8320..d798ac36 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.5-alpha.1",
+  "version": "0.4.5-alpha.2",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/src/component/avatar/index.vue b/src/component/avatar/index.vue
index 59a3afd2..86bcae86 100644
--- a/src/component/avatar/index.vue
+++ b/src/component/avatar/index.vue
@@ -8,12 +8,15 @@ export default {
 import "./index.less";
 
 export interface LayAvatarProps {
-  src?: String;
-  size?: string;
+  src?: string;
+  size?: "xs" | "sm" | "md" | "lg";
   radius?: boolean;
 }
 
-const props = withDefaults(defineProps<LayAvatarProps>(), {});
+const props = withDefaults(defineProps<LayAvatarProps>(), {
+  size: "md",
+  radius: false,
+});
 </script>
 
 <template>
diff --git a/src/component/dropdown/index.vue b/src/component/dropdown/index.vue
index 31fa9a3c..0dc9dcfc 100644
--- a/src/component/dropdown/index.vue
+++ b/src/component/dropdown/index.vue
@@ -6,25 +6,25 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { provide, ref, watch } from "vue";
+import { provide, ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import { DropdownTrigger } from "./interface";
 
 export interface LayDropdownProps {
-  trigger?: string;
+  trigger?: DropdownTrigger;
 }
 
-const dropdownRef = ref<null | HTMLElement>(null);
-
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
 });
 
+const openState = ref(false);
+const dropdownRef = ref<null | HTMLElement>(null);
+
 onClickOutside(dropdownRef, (event) => {
   openState.value = false;
 });
 
-const openState = ref(false);
-
 const open = function () {
   openState.value = true;
 };
diff --git a/src/component/dropdown/interface.ts b/src/component/dropdown/interface.ts
index e69de29b..0e47d74f 100644
--- a/src/component/dropdown/interface.ts
+++ b/src/component/dropdown/interface.ts
@@ -0,0 +1 @@
+export type DropdownTrigger = "click" | "hover";
diff --git a/src/component/empty/index.vue b/src/component/empty/index.vue
index 1dc36b9b..71301a6e 100644
--- a/src/component/empty/index.vue
+++ b/src/component/empty/index.vue
@@ -5,12 +5,13 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { withDefaults } from "vue";
 import "./index.less";
+import { withDefaults } from "vue";
+import { String } from "src/types";
 
 export interface LayEmptyProps {
-  description?: string;
-  image?: string;
+  description?: String;
+  image?: String;
 }
 
 const props = withDefaults(defineProps<LayEmptyProps>(), {
diff --git a/src/component/input/index.vue b/src/component/input/index.vue
index 86c809b0..43c585b8 100644
--- a/src/component/input/index.vue
+++ b/src/component/input/index.vue
@@ -6,25 +6,32 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import { useSlots } from "vue";
 import { useI18n } from "vue-i18n";
-import { computed, useSlots } from "vue-demi";
+import { Boolean, String } from "src/types";
 
 const { t } = useI18n();
 const slots = useSlots();
 
 export interface LayInputProps {
-  name?: string;
-  type?: string;
-  value?: string;
-  disabled?: boolean;
-  modelValue?: string;
-  placeholder?: string;
-  allowClear?: boolean;
+  name?: String;
+  type?: String;
+  value?: String;
+  disabled?: Boolean;
+  modelValue?: String;
+  placeholder?: String;
+  allowClear?: Boolean;
 }
 
 const props = withDefaults(defineProps<LayInputProps>(), {});
 
-const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
+const emit = defineEmits([
+  "update:modelValue",
+  "input",
+  "change",
+  "focus",
+  "blur",
+]);
 
 const onInput = function (event: InputEvent) {
   const inputElement = event.target as HTMLInputElement;
@@ -32,16 +39,20 @@ const onInput = function (event: InputEvent) {
   emit("input", event);
 };
 
-const onFocus = function (event: FocusEvent) {
+const onClear = () => {
+  emit("update:modelValue", "");
+};
+
+const onFocus = (event: FocusEvent) => {
   emit("focus", event);
 };
 
-const onBlur = function () {
-  emit("blur");
+const onChange = () => {
+  emit("change");
 };
 
-const clear = () => {
-  emit("update:modelValue", "");
+const onBlur = () => {
+  emit("blur");
 };
 </script>
 
@@ -61,12 +72,13 @@ const clear = () => {
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
+      @change="onChange"
     />
     <span class="layui-input-suffix" v-if="slots.suffix">
       <slot name="suffix"></slot>
     </span>
     <span class="layui-input-clear" v-if="allowClear">
-      <lay-icon type="layui-icon-close-fill" @click="clear"></lay-icon>
+      <lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon>
     </span>
   </div>
 </template>
diff --git a/src/component/panel/index.less b/src/component/panel/index.less
index c8c20439..68f41b8a 100644
--- a/src/component/panel/index.less
+++ b/src/component/panel/index.less
@@ -19,4 +19,11 @@
   border-color: @panel-border-color;
   background-color: @panel-back-color;
   color: @panel-fore-color;
+  .is-hover-shadow:hover {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  .shadow {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  
 }
diff --git a/src/component/panel/index.vue b/src/component/panel/index.vue
index dc9f5836..28377d88 100644
--- a/src/component/panel/index.vue
+++ b/src/component/panel/index.vue
@@ -6,10 +6,27 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import { computed } from "vue";
+import { PanelShadow } from "./interface";
+
+export interface LayPanelProps {
+  shadow?: PanelShadow;
+}
+
+const props = withDefaults(defineProps<LayPanelProps>(), {
+  shadow: "always",
+});
+
+const classes = computed(() => {
+  return {
+    shadow: props.shadow === "always",
+    "is-hover-shadow": props.shadow === "hover",
+  };
+});
 </script>
 
 <template>
-  <div class="layui-panel">
+  <div class="layui-panel" :class="classes">
     <slot></slot>
   </div>
 </template>
diff --git a/src/component/panel/interface.ts b/src/component/panel/interface.ts
new file mode 100644
index 00000000..5fa53d3c
--- /dev/null
+++ b/src/component/panel/interface.ts
@@ -0,0 +1 @@
+export type PanelShadow = "always" | "hover" | "never";
diff --git a/src/component/upload/index.vue b/src/component/upload/index.vue
index 564d02bc..9d161ad3 100644
--- a/src/component/upload/index.vue
+++ b/src/component/upload/index.vue
@@ -20,7 +20,7 @@ export interface LayUploadProps {
   field?: string;
   size?: number;
   multiple?: boolean;
-  number: number;
+  number?: number;
   drag?: boolean;
 }