i18你，重构代码，细节优化

src/components/Yys.vue

@@ -12,14 +12,15 @@
       @closeProperty="closeProperty"
       @updateProperty="updateProperty"
   />
+
   <draggable :list="state.groups" item-key="group" style="display: flex; flex-direction: column; width: 100%;"
              handle=".drag-handle">
 
-    <template #item="{ element: group, index: groupIndex }">
 
+    <template #item="{ element: group, index: groupIndex }">
       <el-row :span="24">
         <div>
-          <div style="display: flex; justify-content: flex-end;">
+          <div style="display: flex; justify-content: flex-end;" data-html2canvas-ignore="true">
             <el-button class="drag-handle" type="primary" icon="Rank" circle></el-button>
             <el-button type="danger" icon="Delete" circle @click="removeGroup(groupIndex)"></el-button>
             <el-button type="primary" icon="Plus" circle @click="addGroup"></el-button>
@@ -33,15 +34,14 @@
 
 
                       <!-- Add delete button here -->
-                      <el-button type="danger" icon="Delete" circle
-                                 @click="removeGroupElement(groupIndex, positionIndex)"></el-button>
-                      <el-button type="primary" icon="Plus" circle @click="addGroupElement(groupIndex)"></el-button>
+                      <el-button type="danger"  icon="Delete" circle @click="removeGroupElement(groupIndex, positionIndex)" data-html2canvas-ignore="true"></el-button>
+                      <el-button type="primary" icon="Plus"   circle @click="addGroupElement(groupIndex)" data-html2canvas-ignore="true"></el-button>
                       <img :src="position.avatar || '/assets/Shikigami/default.png'" class="image"
                            @click="editShikigami(groupIndex,positionIndex)"/>
                       <div style="padding: 14px; width: 95px">
 
                         <span>{{ position.name || "" }}</span>
-                        <div class="bottom">
+                        <div class="bottom" data-html2canvas-ignore="true">
                           <el-button @click="editProperties(groupIndex,positionIndex)">配置属性</el-button>
                         </div>
                         <!--                        properties-->
@@ -52,7 +52,7 @@
                               {{ position.properties.yuhun.yuhunSetEffect.map(item => item.name).join(' ') }}
                             </span>
                             <span style="display: inline-block; width: 100px; height: 25px; background-color: #666; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-right: 5px; color: white; text-align: center; white-space: pre-wrap ">
-                              {{ position.properties.yuhun.target}}·
+                              {{ t('yuhun_target.' + position.properties.yuhun.target)}}·
                             </span>
                           </div>
                           <div v-for="(value, key, index) in position.properties">
@@ -67,6 +67,10 @@
             </draggable>
 
           </div>
+          <div>
+            <QuillEditor v-model:content="content" contentType="html" theme="snow" :toolbar="toolbarOptions"/>
+          </div>
+
         </div>
       </el-row>
 
@@ -78,15 +82,17 @@
   <div style="margin: 20px">
 
     <!-- 现有的代码 -->
-    <div style="margin: 20px">
-      <span>配置结果</span>
+    <div style="margin: 20px" data-html2canvas-ignore="true">
       <!-- 触发截图的按钮 -->
       <button @click="prepareCapture">生成截图</button>
     </div>
 
     <!-- 预览弹窗 -->
-    <el-dialog id="preview-container" v-model="state.previewVisible" width="50%" :before-close="handleClose">
-      <img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />
+    <el-dialog id="preview-container" v-model="state.previewVisible" width="80%" :before-close="handleClose">
+      <div style="max-height: 500px; overflow-y: auto;">
+        <img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; display: block;" />
+      </div>
+<!--      <img v-if="state.previewImage" :src="state.previewImage" alt="Preview" style="width: 100%; height: auto;" />-->
       <span slot="footer" class="dialog-footer">
         <el-button @click="state.previewVisible = false">取 消</el-button>
         <el-button type="primary" @click="downloadImage">下 载</el-button>
@@ -102,8 +108,12 @@ import draggable from 'vuedraggable';
 import ShikigamiSelect from './ShikigamiSelect.vue';
 import ShikigamiProperty from './ShikigamiProperty.vue';
 import html2canvas from 'html2canvas';
+import { useI18n } from 'vue-i18n'
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css' // 引入样式文件
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import shikigamiData from '../data/Shikigami.json';
+
 const dialogTableVisible = ref(false)
 // 定义响应式数据
 const state = reactive({
@@ -120,6 +130,33 @@ const state = reactive({
   previewVisible: false, // 控制预览弹窗的显示状态
 });
 
+
+// 获取当前的 i18n 实例
+const { t } = useI18n()
+// 初始化内容
+const content = ref('<p>初始内容</p>')
+const content1 = ref('<p>初始内容1</p>')
+
+// 定义工具栏选项
+const toolbarOptions = [
+
+  [{ 'color': [] }, { 'background': [] }],
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block'],
+  ['link', 'image', 'video', 'formula'],
+  [{ 'header': 1 }, { 'header': 2 }],
+  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
+  [{ 'script': 'sub'}, { 'script': 'super' }],
+  [{ 'indent': '-1'}, { 'indent': '+1' }],
+  [{ 'direction': 'rtl' }],
+  [{ 'size': ['small', false, 'large', 'huge'] }],
+  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+  [{ 'color': [] }, { 'background': [] }],
+  [{ 'font': [] }],
+  [{ 'align': [] }],
+  ['clean']
+];
+
 // 定义方法
 const closeSelectShikigami = () => {
   console.log("close select ====");
@@ -178,6 +215,10 @@ const addGroupElement = (groupIndex) => {
   state.groups[groupIndex].push({});
 };
 
+const ignoreElements = (element) => {
+  return element.classList.contains('ql-toolbar');
+}
+
 const prepareCapture = async () => {
   state.previewVisible = true; // 显示预览弹窗
 
@@ -190,7 +231,11 @@ const prepareCapture = async () => {
       return;
     }
 
-    const canvas = await html2canvas(element);
+    const canvas = await html2canvas(element,{
+        ignoreElements:ignoreElements,
+        height:element.scrollHeight
+      }
+    );
     state.previewImage = canvas.toDataURL();
     if (!state.previewImage) {
       console.error('Failed to generate image data URL.');
@@ -226,4 +271,8 @@ const handleClose = (done) => {
 .position-drag-handle {
   cursor: move;
 }
+
+.ql-toolbar {
+  display: none;
+}
 </style>