[coc-card] 增加空白卡 pdf，修复 table 样式

masquevil · Dec 20, 2023 · e79426b · e79426b
1 parent e81fd2f
commit e79426b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/src/assets/coc-card-empty.pdf b/src/assets/coc-card-empty.pdf
diff --git a/src/components/coc-card/SkillTable.vue b/src/components/coc-card/SkillTable.vue
@@ -262,12 +262,14 @@ function getTotal(points: SkillPoint, init: number) {
             'td-color-1': (index + 1) % 2,
           }"
         >
-          <span
+          <div
             v-if="!row.init && row.initPlaceholder"
             class="init-placeholder"
           >
-            {{ row.initPlaceholder }}
-          </span>
+            <span class="init-placeholder-content">
+              {{ row.initPlaceholder }}
+            </span>
+          </div>
           <span v-else-if="row.groupName !== '其它'">
             {{ row.init }}
           </span>
@@ -427,5 +429,14 @@ function getTotal(points: SkillPoint, init: number) {
 
 .init-placeholder {
   color: var(--color-placeholder);
+  display: inline-flex;
+  width: 0;
+  justify-content: center;
+}
+.init-placeholder-content {
+  display: block;
+  transform: scale(0.88);
+  transform-origin: center center;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/utils/file.ts b/src/utils/file.ts
@@ -0,0 +1,6 @@
+export function downloadFile(url: string, title: string) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = title;
+  a.click();
+}
diff --git a/src/utils/image.ts b/src/utils/image.ts
@@ -1,3 +1,5 @@
+import { downloadFile } from './file';
+
 export function getImageSize(url: string) {
   return new Promise<{ width: number; height: number }>((resolve) => {
     const img = document.createElement('img');
@@ -13,8 +15,5 @@ export function getImageSize(url: string) {
 }
 
 export function downloadImage(url: string, title: string = 'image') {
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = title;
-  a.click();
+  downloadFile(url, title);
 }
diff --git a/src/views/COCCardSections/ControlSection.vue b/src/views/COCCardSections/ControlSection.vue
@@ -15,6 +15,7 @@ import {
   KnifeFork,
   IceCream,
   Guide,
+  Brush,
 } from '@element-plus/icons-vue';
 
 // components
@@ -35,10 +36,12 @@ import {
 
 import { usePC, useViewData, usePageData } from '@/hooks/useCOCCardProviders';
 import usePrintPaper from '@/hooks/usePrintPaper';
+import { downloadFile } from '@/utils/file';
 
 import type { COCCardViewData } from '@/types/coc-card/viewData';
 import qrWechat from '@/assets/qr-wechat.jpg';
 import qrAlipay from '@/assets/qr-alipay.jpg';
+import cardPdf from '@/assets/coc-card-empty.pdf';
 
 interface Props {
   paperEls: {
@@ -221,37 +224,36 @@ const cleanPreloadFn = watch(morePanelVisible, (visible) => {
           <ControlButton
             label="快速年龄修正"
             :icon="Scissor"
-            iconSize="1.4em"
             @click="actAgeGrow"
           />
           <ControlButton
             label="重置人物卡"
             :icon="Refresh"
-            iconSize="1.4em"
             @click="$emit('reset-card')"
           />
           <ControlButton
             label="导入/导出数据"
             :icon="DocumentCopy"
-            iconSize="1.4em"
             @click="inOutModalVisible = true"
           />
           <ControlButton
             :label="`${cheating ? '关闭' : '开启'}灌铅模式`"
             :icon="KnifeFork"
-            iconSize="1.4em"
             @click="$emit('switch-cheating')"
           />
           <ControlButton
             label="查看使用指南"
             :icon="Guide"
-            iconSize="1.4em"
             @click="morePanelActiveTab = 'guide'"
           />
+          <ControlButton
+            label="下载空白卡"
+            :icon="Brush"
+            @click="downloadFile(cardPdf, '【TRPG 赛高】空白卡.pdf')"
+          />
           <ControlButton
             label="投喂作者"
             :icon="IceCream"
-            iconSize="1.4em"
             @click="rewardModalVisible = true"
           />
         </div>