斗技初始化，调整部分样式

src/App.vue

@@ -2,10 +2,11 @@
 import Yys from './components/Yys.vue';
 import Toolbar from './components/Toolbar.vue';
 import ProjectExplorer from './components/ProjectExplorer.vue';
-import { computed, ref, onMounted, onUnmounted } from "vue";
-import { useFilesStore } from "@/ts/files";
+import {computed, ref, onMounted, onUnmounted} from "vue";
+import {useFilesStore} from "@/ts/files";
 import Vue3DraggableResizable from 'vue3-draggable-resizable';
-import { TabPaneName, TabsPaneContext } from "element-plus";
+import {TabPaneName, TabsPaneContext} from "element-plus";
+import YysRank from "@/components/YysRank.vue";
 
 const filesStore = useFilesStore();
 
@@ -42,8 +43,8 @@ const handleTabsEdit = (
       label: newFileName,
       name: newFileName,
       visible: true,
-      type:'PVE',
-      groups:[
+      type: 'PVE',
+      groups: [
         {
           shortDescription: " ",
           groupInfo: [{}, {}, {}, {}, {}],
@@ -85,7 +86,7 @@ const activeFileGroups = computed(() => {
     <div class="main-content">
       <!-- 侧边栏 -->
       <aside class="sidebar">
-        <ProjectExplorer :allFiles="filesStore.fileList" />
+        <ProjectExplorer :allFiles="filesStore.fileList"/>
       </aside>
 
       <!-- 工作区 -->
@@ -104,7 +105,8 @@ const activeFileGroups = computed(() => {
               :name="file.name.toString()"
           >
             <main id="main-container" :style="{ height: contentHeight, overflow: 'auto' }">
-              <Yys :groups="activeFileGroups"/>
+              <Yys class="yys" :groups="activeFileGroups" v-if="file.type === 'PVE' "/>
+              <YysRank :groups="activeFileGroups" v-else-if="file.type === 'PVP' "/>
             </main>
           </el-tab-pane>
         </el-tabs>
@@ -141,7 +143,7 @@ const activeFileGroups = computed(() => {
 }
 
 .workspace {
-  //flex: 1; /* 占据剩余空间 */
+  flex: 1; /* 占据剩余空间 */
   overflow: hidden; /* 防止内容溢出 */
   display: inline-block;
 }
@@ -151,7 +153,8 @@ const activeFileGroups = computed(() => {
   height: 100%; /* 确保内容区域占满父容器 */
   overflow-y: auto; /* 允许内容滚动 */
   min-height: 100vh; /* 允许容器扩展 */
-  display: inline-block;
+  //display: inline-block;
   max-width: 100%;
 }
+
 </style>

src/components/Toolbar.vue

@@ -264,7 +264,18 @@ const prepareCapture = async () => {
 
   // 创建临时样式
   const style = document.createElement('style');
-  style.textContent = `.ql-container.ql-snow { border: none !important; }`;
+  style.textContent = `
+  .ql-container.ql-snow {
+    border: none !important;
+  }
+  #main-container {
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+    min-height: 100vh;
+    display: inline-block;
+    max-width: 100%;
+}`;
   document.head.appendChild(style);
 
   // 获取目标元素

src/components/YysRank.vue

@@ -0,0 +1,267 @@
+<template>
+  <ShikigamiSelect
+      :showSelectShikigami="state.showSelectShikigami"
+      :currentShikigami="state.currentShikigami"
+      @closeSelectShikigami="closeSelectShikigami"
+      @updateShikigami="updateShikigami"
+  />
+
+  <ShikigamiProperty
+      :showProperty="state.showProperty"
+      :currentShikigami="state.currentShikigami"
+      @closeProperty="closeProperty"
+      @updateProperty="updateProperty"
+  />
+
+
+  <div class="yys-rank">
+    <div class="pvp-mindmap">
+
+    </div>
+    <div class="pvp-shikigami-editor">
+      <el-button type="primary" @click="addGroupElement()">{{ t('AddShikigami') }}</el-button>
+
+      <div style="max-height: 600px; overflow-y: auto;">
+        <el-space wrap size="large">
+          <draggable :list="props.groups[0].groupInfo" item-key="name" class="body-content">
+            <template #item="{element : position, index:positionIndex}">
+              <div class="group-card">
+                <div class="opt-btn" data-html2canvas-ignore="true">
+                  <!-- Add delete button here -->
+                  <el-button type="danger" icon="Delete" circle @click="removeGroupElement(positionIndex)"/>
+                  <!-- <el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"/> -->
+                </div>
+                <div class="avatar-container">
+                  <!-- 头像图片 -->
+                  <img :src="position.avatar || '/assets/Shikigami/default.png'"
+                       style="cursor: pointer; vertical-align: bottom;"
+                       class="avatar-image"
+                       @click="editShikigami(positionIndex)"/>
+
+                  <!-- 文字图层 -->
+                  <!--              <span v-if="position.properties">{{ position.properties.levelRequired }}级 {{ position.properties.skillRequired.join('') }}</span>-->
+                </div>
+                <div class="opt-foot">
+                  <div class="property-wrap">
+                    <div style="display: flex; justify-content: center;" data-html2canvas-ignore="true">
+                      <span>{{ position.name || "" }}</span>
+                    </div>
+                    <div style="display: flex; justify-content: center;" class="bottom" data-html2canvas-ignore="true">
+                      <el-button @click="editProperty(positionIndex)">{{ t('editProperties') }}
+                      </el-button>
+                    </div>
+                    <div v-if="position.properties">
+                      <div style="display: flex; justify-content: center;">
+                            <span
+                                style="width: 100px;height: 50px;background-color: #666;
+                                border-radius: 5px; margin-right: 5px; color: white;
+                                text-align: center; white-space: pre-wrap; display: flex; align-items: center; justify-content: center; flex-direction: column ">
+                              {{ getYuhunNames(position.properties.yuhun.yuhunSetEffect) }}<br/>{{
+                                t('yuhun_target.shortName.' + position.properties.yuhun.target)
+                              }}·{{ getYuhunPropertyNames(position.properties.yuhun) }}
+                            </span>
+                      </div>
+                      <div>
+                            <span
+                                style="display: inline-block; width: 100px; height: 30px;  border-radius: 5px; margin-right: 5px; color: red; text-align: center; white-space: pre-wrap; display: flex; align-items: center; justify-content: center; flex-direction: column ">
+                              {{ position.properties.desc }}
+                            </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </el-space>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref, reactive, onMounted} from 'vue';
+import shikigami from "../data/Shikigami.json"
+import ShikigamiSelect from "@/components/ShikigamiSelect.vue";
+import ShikigamiProperty from "@/components/ShikigamiProperty.vue";
+import _ from "lodash";
+import {useI18n} from "vue-i18n";
+import draggable from 'vuedraggable';
+
+
+const {t} = useI18n()
+
+const props = defineProps<{
+  groups: any[];
+}>();
+
+const state = reactive({
+  showSelectShikigami: false,
+  showProperty: false,
+  groupIndex: 0,
+  positionIndex: 0,
+  currentShikigami: {},
+  previewImage: null, // 用于存储预览图像的数据URL
+  previewVisible: false, // 控制预览弹窗的显示状态
+});
+
+const addGroupElement = () => {
+  props.groups[0].groupInfo.push({});
+  editShikigami(props.groups[0].groupInfo.length - 1);
+};
+
+const editShikigami = (positionIndex) => {
+  // console.log("==== 选择式神 ===", groupIndex, positionIndex);
+  state.showSelectShikigami = true;
+  state.positionIndex = positionIndex;
+  // state.currentShikigami = props.groups[groupIndex].groupInfo[positionIndex];
+};
+
+const closeSelectShikigami = () => {
+  console.log("close select ====");
+  state.showSelectShikigami = false;
+  state.currentShikigami = {};
+};
+
+const updateShikigami = (shikigami) => {
+  state.showSelectShikigami = false;
+
+  const oldProperties = props.groups[0].groupInfo[state.positionIndex].properties;
+  props.groups[0].groupInfo[state.positionIndex] = _.cloneDeep(shikigami);
+  props.groups[0].groupInfo[state.positionIndex].properties = oldProperties;
+
+};
+
+const closeProperty = () => {
+  state.showProperty = false;
+  state.currentShikigami = {};
+};
+
+const updateProperty = (property) => {
+  state.showProperty = false;
+  state.currentShikigami = {};
+  props.groups[0].groupInfo[state.positionIndex].properties = _.cloneDeep(property);
+};
+
+const editProperty = (positionIndex) => {
+  state.showProperty = true;
+  state.positionIndex = positionIndex;
+  state.currentShikigami = props.groups[0].groupInfo[positionIndex];
+};
+
+const getYuhunNames = (yuhunSetEffect) => {
+  const names = yuhunSetEffect.map(item => item.name).join('');
+  if (names.length <= 6) {
+    return names;
+  } else {
+    return yuhunSetEffect.map(item => item.shortName || item.name).join('');
+  }
+}
+
+
+const getYuhunPropertyNames = (yuhun) => {
+  // 根据条件处理 yuhun.property2
+  let property2Value, property4Value, property6Value;
+  if (yuhun.property2.length >= 4) {
+    property2Value = 'X';
+  } else {
+    property2Value = t('yuhun_property.shortName.' + yuhun.property2[0]);
+  }
+
+  if (yuhun.property4.length >= 5) {
+    property4Value = 'X';
+  } else {
+    property4Value = t('yuhun_property.shortName.' + yuhun.property4[0]);
+  }
+
+  if (yuhun.property6.length >= 5) {
+    property6Value = 'X';
+  } else {
+    property6Value = t('yuhun_property.shortName.' + yuhun.property6[0]);
+  }
+  // 构建 propertyNames 字符串
+  const propertyNames =
+      property2Value + property4Value + property6Value
+
+  return propertyNames;
+}
+
+
+</script>
+<style scoped>
+.yys-rank {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.pvp-mindmap {
+  flex: 1;
+  border: 2px solid red;
+  min-height: 400px;
+  min-width: 500px;
+  height: 50%;
+  width: 80%;
+}
+
+.pvp-shikigami-editor {
+
+  border: 2px solid black;
+  height: 50%;
+  width: 80%;
+  min-height: 400px;
+  min-width: 500px;
+}
+
+.group-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .avatar-container {
+    position: relative;
+    width: 100px;
+    height: 100px;
+  }
+
+  .avatar-container span {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+    font-size: 24px;
+    color: white;
+    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
+    white-space: nowrap;
+    padding: 0 8px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .opt-btn {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    z-index: 10;
+    opacity: 0;
+  }
+}
+
+/* 当鼠标悬停在容器上时显示按钮 */
+.group-card:hover .opt-btn {
+  opacity: 1;
+}
+
+/* 图片样式 */
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 关键属性：保持比例填充容器 */
+  object-position: center; /* 居中显示 */
+  display: block;
+  cursor: pointer;
+}
+</style>