From 5336b57d9bdc7e0ea85378752f86216dedd433c7 Mon Sep 17 00:00:00 2001
From: rookie4show <rookie4show@gmail.com>
Date: Tue, 18 Mar 2025 13:32:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=BC=94=E7=A4=BA=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=EF=BC=8C=E4=BF=AE=E5=A4=8Dcss=E5=BC=95=E8=B5=B7?=
 =?UTF-8?q?=E7=9A=84=E7=9B=B8=E5=85=B3=E6=95=85=E9=9A=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue            | 34 +++++++++++++++++-----------------
 src/components/Yys.vue |  8 ++++++--
 src/stores/files.ts    | 35 ++++++++++++++++++++++++++++++++---
 3 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b4c332d..97c2adc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -89,24 +89,24 @@ const activeFileGroups = computed(() => {
 
       <!-- 工作区 -->
       <div class="workspace">
-        <main id="main-container" :style="{ height: contentHeight, overflow: 'auto' }">
-          <el-tabs
-              v-model="filesStore.activeFile"
-              type="card"
-              class="demo-tabs"
-              editable
-              @edit="handleTabsEdit"
+        <el-tabs
+            v-model="filesStore.activeFile"
+            type="card"
+            class="demo-tabs"
+            editable
+            @edit="handleTabsEdit"
+        >
+          <el-tab-pane
+              v-for="(file, index) in filesStore.visibleFiles"
+              :key="index"
+              :label="file.label"
+              :name="file.name.toString()"
           >
-            <el-tab-pane
-                v-for="(file, index) in filesStore.visibleFiles"
-                :key="index"
-                :label="file.label"
-                :name="file.name.toString()"
-            >
-              <Yys :groups="activeFileGroups" ref="yysRef" />
-            </el-tab-pane>
-          </el-tabs>
-        </main>
+            <main id="main-container" :style="{ height: contentHeight, overflow: 'auto' }">
+              <Yys :groups="activeFileGroups" ref="yysRef"/>
+            </main>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
   </div>
diff --git a/src/components/Yys.vue b/src/components/Yys.vue
index 71b9a40..67f5d5d 100644
--- a/src/components/Yys.vue
+++ b/src/components/Yys.vue
@@ -43,7 +43,8 @@
           <div class="group-body">
             <draggable :list="group.groupInfo" item-key="name" class="body-content">
               <template #item="{element : position, index:positionIndex}">
-                <el-col>
+                <div>
+                  <el-col>
                     <el-card class="group-card" shadow="never">
                       <div class="opt-btn" data-html2canvas-ignore="true">
                         <!-- Add delete button here -->
@@ -88,6 +89,7 @@
                       </div>
                     </el-card>
                   </el-col>
+                </div>
               </template>
             </draggable>
           </div>
@@ -390,7 +392,8 @@ defineExpose({
 }
 
 .group-header {
-    padding: 10px;
+  margin: 10px;
+  padding: 10px;
 }
 
 .group-opt {
@@ -419,6 +422,7 @@ defineExpose({
 
   .avatar-container {
     position: relative;
+    min-width: 100px;
   }
 
   .avatar-container span {
diff --git a/src/stores/files.ts b/src/stores/files.ts
index a0cddcb..dae4bdf 100644
--- a/src/stores/files.ts
+++ b/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: '',
-                        groupInfo: [{}, {}, {}, {}, {}],
+                        shortDescription: '<h1>鬼灵歌姬</h1><p>这是一个演示项目，用于测试显示效果</p>',
+                        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: ''
                     },
                     {