增加演示项目，修复css引起的相关故障

src/App.vue

@@ -89,7 +89,6 @@ const activeFileGroups = computed(() => {
 
       <!-- 工作区 -->
       <div class="workspace">
-        <main id="main-container" :style="{ height: contentHeight, overflow: 'auto' }">
         <el-tabs
             v-model="filesStore.activeFile"
             type="card"
@@ -103,10 +102,11 @@ const activeFileGroups = computed(() => {
               :label="file.label"
               :name="file.name.toString()"
           >
-              <Yys :groups="activeFileGroups" ref="yysRef" />
+            <main id="main-container" :style="{ height: contentHeight, overflow: 'auto' }">
+              <Yys :groups="activeFileGroups" ref="yysRef"/>
+            </main>
           </el-tab-pane>
         </el-tabs>
-        </main>
       </div>
     </div>
   </div>

src/components/Yys.vue

@@ -43,6 +43,7 @@
           <div class="group-body">
             <draggable :list="group.groupInfo" item-key="name" class="body-content">
               <template #item="{element : position, index:positionIndex}">
+                <div>
                   <el-col>
                     <el-card class="group-card" shadow="never">
                       <div class="opt-btn" data-html2canvas-ignore="true">
@@ -88,6 +89,7 @@
                       </div>
                     </el-card>
                   </el-col>
+                </div>
               </template>
             </draggable>
           </div>
@@ -390,6 +392,7 @@ defineExpose({
 }
 
 .group-header {
+  margin: 10px;
   padding: 10px;
 }
 
@@ -419,6 +422,7 @@ defineExpose({
 
   .avatar-container {
     position: relative;
+    min-width: 100px;
   }
 
   .avatar-container span {

src/stores/files.ts

@@ -4,13 +4,42 @@ export const useFilesStore = defineStore('files', {
     state: () => ({
         fileList: [
             {
-                label: 'File 1',
+                label: 'Welcome',
                 name: "1",
                 visible: true,
                 groups: [
                     {
-                        shortDescription: '',
+                        shortDescription: '<h1>鬼灵歌姬</h1><p>这是一个演示项目，用于测试显示效果</p>',
-                        groupInfo: [{}, {}, {}, {}, {}],
+                        groupInfo: [{
+                            "avatar": "/assets/Shikigami/sp/372.png",
+                            "name": "因幡辉夜姬",
+                            "rarity": "SP"
+                        },
+                            {
+                                "avatar": "/assets/Shikigami/ssr/356.png",
+                                "name": "千姬",
+                                "rarity": "SSR"
+                            },
+                            {
+                                "avatar": "/assets/Shikigami/sp/554.png",
+                                "name": "纺愿缘结神",
+                                "rarity": "SP"
+                            },
+                            {
+                                "avatar": "/assets/Shikigami/ssr/556.png",
+                                "name": "天照",
+                                "rarity": "SSR"
+                            },
+                            {
+                                "avatar": "/assets/Shikigami/ssr/557.png",
+                                "name": "伊邪那美",
+                                "rarity": "SSR"
+                            },
+                            {
+                                "avatar": "/assets/Shikigami/sp/367.png",
+                                "name": "绘世花鸟卷",
+                                "rarity": "SP"
+                            }],
                         details: ''
                     },
                     {