diff --git a/packages/ui-vue/components/according/src/according.component.tsx b/packages/ui-vue/components/according/src/according.component.tsx
deleted file mode 100644
index ac19faeea3b1409924e9db3f754b15d973f990cb..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/according/src/according.component.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { isContext } from 'vm';
-import { computed, defineComponent, SetupContext } from 'vue';
-import { AccordingProps, accordingProps } from './according.props';
-
-import './according.css';
-
-export default defineComponent({
-    name: 'FAccording',
-    props: accordingProps,
-    emits: [],
-    setup(props: AccordingProps, context: SetupContext) {
-        const accordingStyle = computed(() => ({
-            height: props.height ? `${props.height}px` : '',
-            width: props.width ? `${props.width}px` : ''
-        }));
-
-        const accordingClass = computed(() => {
-            const customClassArray = props.customClass;
-            const accordingClassObject = {
-                'farris-panel': true,
-                according: true
-            };
-            customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
-                classObject[classString] = true;
-                return classObject;
-            }, accordingClassObject);
-            return accordingClassObject;
-        });
-
-        return () => {
-            return (
-                <div class={accordingClass.value} style={accordingStyle.value}>
-                    {context.slots.default && context.slots.default()}
-                </div>
-            );
-        };
-    }
-});
diff --git a/packages/ui-vue/components/according/src/according.css b/packages/ui-vue/components/according/src/according.css
deleted file mode 100644
index 45045c22d5377fd794c388d74e1437c709b9bcd3..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/according/src/according.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* 很重要 */
-.farris-panel {
-    border: 1px solid rgba(0, 0, 0, 0.125);
-}
diff --git a/packages/ui-vue/components/according/src/components/according-item.props.ts b/packages/ui-vue/components/according/src/components/according-item.props.ts
deleted file mode 100644
index 04f84dd61c3c9626335d06a41070b001f96eb805..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/according/src/components/according-item.props.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ExtractPropTypes } from 'vue';
-
-export const accordingItemProps = {
-    width: { type: Number },
-    height: { type: Number },
-    title: { type: String, default: '' },
-    disable: { type: Boolean, default: false }
-};
-export type AccordingItemProps = ExtractPropTypes<typeof accordingItemProps>;
diff --git a/packages/ui-vue/components/accordion/src/accordion.component.tsx b/packages/ui-vue/components/accordion/src/accordion.component.tsx
index bea759d5a4371180fe0d2caae4c40b0e3bd18568..876c698ce8fe736665d1520671bc6a72eac6a5ad 100644
--- a/packages/ui-vue/components/accordion/src/accordion.component.tsx
+++ b/packages/ui-vue/components/accordion/src/accordion.component.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
             const customClassArray = props.customClass;
             const accordionClassObject = {
                 'farris-panel': true,
-                according: true
+                'accordion': true
             };
             customClassArray.reduce<Record<string, unknown>>((classObject, classString) => {
                 classObject[classString] = true;
diff --git a/packages/ui-vue/components/accordion/src/components/according-item.scss b/packages/ui-vue/components/accordion/src/components/according-item.scss
deleted file mode 100644
index 5574087b52be3cc0dbdaea441194e3967a90e896..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/accordion/src/components/according-item.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.card-header {
-    cursor: pointer;
-}
-
-.panel-item-title {
-    float: left;
-}
-
-.panel-item-tool {
-    float: right;
-}
-
-.panel-item-clear {
-    clear: both;
-}
-
-.f-state-disable {
-    pointer-events: none;
-}
-
-/* 很重要 */
-.card {
-    border-left: 0;
-    border-right: 0;
-}
\ No newline at end of file
diff --git a/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx b/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
index 045c2a2c8d0f0bd6400bb70f6058a37f80d744c6..b83b576970d0ad0618a32b9df80ff9a16ba010b4 100644
--- a/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
+++ b/packages/ui-vue/components/accordion/src/components/accordion-item.component.tsx
@@ -12,7 +12,9 @@ export default defineComponent({
         const isActive = ref(false);
         const isDisabled = ref(false);
 
-        function selectAccordionItem() {}
+        function selectAccordionItem() {
+            isActive.value = !isActive.value;
+        }
 
         function onClick($event: Event) {
             selectAccordionItem();
@@ -39,6 +41,17 @@ export default defineComponent({
             'f-accordion-expand': isActive.value
         }));
 
+        const cardContainerStyle = computed(() => {
+            const styleObject = {
+                transition: 'height 0.36s ease 0s',
+                height: isActive.value ? `${props.height}px` : 0
+            };
+            if (!isActive.value) {
+                styleObject['overflow'] = 'hidden';
+            }
+            return styleObject;
+        });
+
         return () => {
             return (
                 <div class={accordionItemClass.value}>
@@ -51,7 +64,7 @@ export default defineComponent({
                         <div class="panel-item-tool">{context.slots.toolbar && context.slots.toolbar()}</div>
                         <div class="panel-item-clear"></div>
                     </div>
-                    <div>
+                    <div style={cardContainerStyle.value}>
                         <div class="card-body">{context.slots.content && context.slots.content()}</div>
                     </div>
                 </div>
diff --git a/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts b/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts
index 34b31438ddbab9ed79a30cf5718734381ea7e698..661fe2b023f572e245bc8737209e6dce92caf8f7 100644
--- a/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts
+++ b/packages/ui-vue/components/accordion/src/components/accordion-item.props.ts
@@ -2,7 +2,7 @@ import { ExtractPropTypes } from 'vue';
 
 export const accordionItemProps = {
     width: { type: Number },
-    height: { type: Number },
+    height: { type: Number, default: 100 },
     title: { type: String, default: '' },
     disable: { type: Boolean, default: false }
 };
diff --git a/packages/ui-vue/components/accordion/src/components/accordion-item.scss b/packages/ui-vue/components/accordion/src/components/accordion-item.scss
index 5574087b52be3cc0dbdaea441194e3967a90e896..33e4034ffdce4a4360a99ac9316c38e12f8f2c6a 100644
--- a/packages/ui-vue/components/accordion/src/components/accordion-item.scss
+++ b/packages/ui-vue/components/accordion/src/components/accordion-item.scss
@@ -22,4 +22,15 @@
 .card {
     border-left: 0;
     border-right: 0;
-}
\ No newline at end of file
+}
+
+.active {
+    height: initial;
+    transition: height 0.35s ease;
+}
+
+.inactive {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+}
diff --git a/packages/ui-vue/src/components/according.vue b/packages/ui-vue/src/components/according.vue
deleted file mode 100644
index 1e809b7d363b419317426fad5f02b70415f2a1b5..0000000000000000000000000000000000000000
--- a/packages/ui-vue/src/components/according.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import According from '../../components/according/src/according.component';
-import AccordingItem from '../../components/according/src/components/according-item.component';
-</script>
-
-<template>
-    <According>
-        <AccordingItem title="According Panel One"></AccordingItem>
-        <AccordingItem title="According Panel Two"></AccordingItem>
-    </According>
-</template>
diff --git a/packages/ui-vue/src/components/accordion.vue b/packages/ui-vue/src/components/accordion.vue
index b1d6c5bc7dd1ee53480813762314507546727a52..3cb230ab2912cfef003fe131290e27a96b01720f 100644
--- a/packages/ui-vue/src/components/accordion.vue
+++ b/packages/ui-vue/src/components/accordion.vue
@@ -5,7 +5,7 @@ import AccordionItem from '../../components/accordion/src/components/accordion-i
 
 <template>
     <Accordion>
-        <AccordionItem title="According Panel One"></AccordionItem>
-        <AccordionItem title="According Panel Two"></AccordionItem>
+        <AccordionItem title="Accordion Panel One "></AccordionItem>
+        <AccordionItem title="Accordion Panel Two "></AccordionItem>
     </Accordion>
 </template>