fix(according): fix to show according item's title and add according demo

packages/ui-vue/components/according/src/according.component.tsx

@@ -14,9 +14,22 @@ export default defineComponent({
             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={`farris-panel accoriding ${props.customClass.join(' ')}`} style={accordingStyle.value}>
+                <div class={accordingClass.value} style={accordingStyle.value}>
                     {context.slots.default && context.slots.default()}
                 </div>
             );

packages/ui-vue/components/according/src/components/according-item.component.tsx

@@ -1,11 +1,14 @@
 import { computed, defineComponent, ref, SetupContext } from 'vue';
+import { accordingItemProps, AccordingItemProps } from './according-item.props';
+
+import './according-item.scss';
 
 export default defineComponent({
     name: 'FAccordingItem',
-    props: {},
+    props: accordingItemProps,
     emits: [],
-    setup(props, context: SetupContext) {
-        const title = ref('');
+    setup(props: AccordingItemProps, context: SetupContext) {
+        const title = ref(props.title);
         const isActive = ref(false);
         const isDisabled = ref(false);
 
@@ -48,7 +51,7 @@ export default defineComponent({
                         <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>
                         <div class="card-body">{context.slots.content && context.slots.content()}</div>
                     </div>
                 </div>

packages/ui-vue/components/according/src/components/according-item.scss

@@ -0,0 +1,25 @@
+.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;
+}

packages/ui-vue/src/App.vue

@@ -9,6 +9,7 @@ import FButton from '../components/button/src/button.component';
 import Switch from './components/switch.vue';
 import Section from './components/section.vue';
 import Notify from './components/notify.vue';
+import According from './components/according.vue';
 
 const canEdit = ref(true);
 const disable = ref(false);
@@ -38,6 +39,7 @@ const canAutoComplete = ref(false);
     <Switch></Switch>
     <Section></Section>
     <Notify></Notify>
+    <According></According>
 </template>
 
 <style scoped>

packages/ui-vue/src/components/according.vue

@@ -0,0 +1,11 @@
+<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>