diff --git a/packages/ui-vue/components/according/src/according.component.tsx b/packages/ui-vue/components/according/src/according.component.tsx
index e69de29..2da9acc 100644
--- a/packages/ui-vue/components/according/src/according.component.tsx
+++ b/packages/ui-vue/components/according/src/according.component.tsx
@@ -0,0 +1,25 @@
+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` : '',
+        }));
+
+        return () => {
+            return (
+                <div class={`farris-panel accoriding ${props.customClass.join(' ')}`} 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
new file mode 100644
index 0000000..ac2dac5
--- /dev/null
+++ b/packages/ui-vue/components/according/src/according.css
@@ -0,0 +1,4 @@
+/* 很重要 */
+.farris-panel {
+    border: 1px solid rgba(0, 0, 0, .125)
+}
diff --git a/packages/ui-vue/components/according/src/according.props.ts b/packages/ui-vue/components/according/src/according.props.ts
index e69de29..b3f8b68 100644
--- a/packages/ui-vue/components/according/src/according.props.ts
+++ b/packages/ui-vue/components/according/src/according.props.ts
@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from 'vue';
+
+export const accordingProps = {
+    customClass: { type: Array<string>, default: [] },
+    height: { type: Number },
+    width: { type: Number },
+    enableFold: { type: Boolean, default: true },
+    expanded: { type: Boolean, default: false },
+};
+export type AccordingProps = ExtractPropTypes<typeof accordingProps>;
diff --git a/packages/ui-vue/components/according/src/components/according-item.component.tsx b/packages/ui-vue/components/according/src/components/according-item.component.tsx
index e69de29..7c7c383 100644
--- a/packages/ui-vue/components/according/src/components/according-item.component.tsx
+++ b/packages/ui-vue/components/according/src/components/according-item.component.tsx
@@ -0,0 +1,58 @@
+import { computed, defineComponent, ref, SetupContext } from 'vue';
+
+export default defineComponent({
+    name: 'FAccordingItem',
+    props: {},
+    emits: [],
+    setup(props, context: SetupContext) {
+        const title = ref('');
+        const isActive = ref(false);
+        const isDisabled = ref(false);
+
+        function selectAccordingItem() {}
+
+        function onClick($event: Event) {
+            selectAccordingItem();
+        }
+
+        const accordingItemClass = computed(() => ({
+            'f-state-disable': isDisabled.value,
+            card: true,
+            'farris-panel-item': true,
+            'f-state-selected': isActive.value,
+        }));
+
+        const shouldShowHeader = computed(() => {
+            return true;
+        });
+
+        const shouldShowCustomHeader = computed(() => {
+            return false;
+        });
+
+        const headIconClass = computed(() => ({
+            'f-icon': true,
+            'f-according-collapse': !isActive.value,
+            'f-according-expand': isActive.value,
+        }));
+
+        return () => {
+            return (
+                <div class={accordingItemClass.value}>
+                    <div class="card-header" onClick={onClick}>
+                        <div class="panel-item-title">
+                            {shouldShowHeader.value && <span>{title.value}</span>}
+                            {shouldShowCustomHeader.value && context.slots.head && context.slots.head()}
+                            <span class={headIconClass.value}></span>
+                        </div>
+                        <div class="panel-item-tool">{context.slots.toolbar && context.slots.toolbar()}</div>
+                        <div class="panel-item-clear"></div>
+                    </div>
+                    <div dropAnimation="active?'active':'inactive'">
+                        <div class="card-body">{context.slots.content && context.slots.content()}</div>
+                    </div>
+                </div>
+            );
+        };
+    },
+});
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
index e69de29..401f932 100644
--- a/packages/ui-vue/components/according/src/components/according-item.props.ts
+++ b/packages/ui-vue/components/according/src/components/according-item.props.ts
@@ -0,0 +1,10 @@
+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/avatar/src/avatar.props.ts b/packages/ui-vue/components/avatar/src/avatar.props.ts
index dec7561..2c77616 100644
--- a/packages/ui-vue/components/avatar/src/avatar.props.ts
+++ b/packages/ui-vue/components/avatar/src/avatar.props.ts
@@ -3,38 +3,38 @@ import { ExtractPropTypes, PropType } from 'vue';
 type AvatarShap = 'square' | 'circle';
 
 export const avatarProps = {
-  /**
-   * 头像宽度
-   */
-  avatarWidth: { type: Number, default: 100 },
-  /**
-   * 头像高度
-   */
-  avatarHeight: { type: Number, default: 100 },
-  /**
-   * 组件标识
-   */
-  cover: { type: String },
-  /**
-   * 只读
-   */
-  readonly: { type: Boolean, default: false },
-  /**
-   * 头像形状
-   */
-  shape: { type: String as PropType<AvatarShap>, default: 'circle' },
-  /**
-   * 头像最大尺寸, 单位MB
-   */
-  maxSize: { type: Number, default: 1 },
-  /**
-   * 头像标题
-   */
-  tile: { type: String, default: '' },
-  /**
-   * 支持的头像类型
-   */
-  type: { type: Array<string>, default: [] },
+    /**
+     * 头像宽度
+     */
+    avatarWidth: { type: Number, default: 100 },
+    /**
+     * 头像高度
+     */
+    avatarHeight: { type: Number, default: 100 },
+    /**
+     * 组件标识
+     */
+    cover: { type: String },
+    /**
+     * 只读
+     */
+    readonly: { type: Boolean, default: false },
+    /**
+     * 头像形状
+     */
+    shape: { type: String as PropType<AvatarShap>, default: 'circle' },
+    /**
+     * 头像最大尺寸, 单位MB
+     */
+    maxSize: { type: Number, default: 1 },
+    /**
+     * 头像标题
+     */
+    tile: { type: String, default: '' },
+    /**
+     * 支持的头像类型
+     */
+    type: { type: Array<string>, default: [] },
 };
 
 export type AvatarProps = ExtractPropTypes<typeof avatarProps>;