[Feat 0000] 添加新的支持提示的告示板组件

src/components/Configurable/content.vue

@@ -74,6 +74,9 @@
             :table-data="config.data"
           />
         </template>
+        <template v-if="config.name === 'simple_board'">
+          <SimpleBoard v-bind="config.config" :data="config.data" />
+        </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
@@ -98,6 +101,7 @@
   import { clone } from 'lodash-es';
   import { getData, getFormattedText } from './hooks/helper';
 
+  const SimpleBoard = defineAsyncComponent(() => import('./preset/SimpleBoard.vue'));
   const MiniBoard = defineAsyncComponent(() => import('./detail/MiniBoard.vue'));
   const CustomList = defineAsyncComponent(() => import('./detail/CustomList.vue'));
   const CustomGallery = defineAsyncComponent(() => import('./detail/CustomGallery.vue'));

src/components/Configurable/preset/SimpleBoard.vue

@@ -0,0 +1,146 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="flex flex-items-center flex-wrap">
+    <div
+      v-for="(item, index) in items"
+      :key="`simpleboard${index}`"
+      class="mini-board"
+      :class="`mini-board_${type} ${item.to ? 'cursor-pointer' : ''}`"
+      @click="redirectTo(getFormattedText(data, item.to))"
+    >
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ getFormattedText(data, item.label) }}
+          <Tooltip v-if="item.tooltips && item.tooltips.length">
+            <template #title>
+              <div
+                v-for="(value, inx) in item.tooltips"
+                :key="`simpletip${inx}`"
+                class="mini-board__tip"
+                :class="` ${value.to ? 'cursor-pointer' : ''}`"
+                @click="redirectTo(getFormattedText(data, value.to))"
+              >
+                {{ getFormattedText(data, value.label) }}
+                ：
+                {{ getFormattedText(data, value.value) }}
+              </div>
+            </template>
+            <question-circle-outlined />
+          </Tooltip>
+        </div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ getFormattedText(data, item.value) }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { Tooltip } from 'ant-design-vue';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { getFormattedText, redirectTo } from '../hooks/helper';
+
+  withDefaults(
+    defineProps<{
+      items: {
+        label: string;
+        value?: string;
+        to?: string;
+        tooltips?: { label: string; value: string; to: string }[];
+      }[];
+      data: any;
+      type: string;
+    }>(),
+    {
+      type: 'A',
+    }
+  );
+
+  defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @font-face {
+    font-family: 'DDIN-Bold';
+    src: url('/@/assets/font//D-DIN-Bold.otf');
+  }
+  @font-face {
+    font-family: 'DDIN';
+    src: url('/@/assets/font//D-DIN.otf');
+  }
+
+  .mini-board {
+    --image-board-bg-A-1: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-1.png');
+    --image-board-bg-A-2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-2.png');
+    --image-board-bg-A-3: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-3.png');
+    --image-board-bg-A-4: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-4.png');
+    --image-board-bg-A-5: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-A-5.png');
+
+    height: 50px;
+    line-height: 25px;
+    width: 130px;
+    padding: 0 5px 0 5px;
+    text-align: center;
+    background-size: 100% 100%;
+    position: relative;
+    pointer-events: all;
+  }
+
+  .mini-board__label {
+    white-space: nowrap;
+  }
+  .mini-board__value {
+    white-space: nowrap;
+  }
+  .mini-board_A {
+    width: 190px;
+    height: 43px;
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    padding: 0 5px 0 10px;
+    background-image: var(--image-board-bg-A-1);
+    background-size: 100% 100%;
+  }
+  .mini-board_A:nth-child(2) {
+    background-image: var(--image-board-bg-A-2);
+  }
+  .mini-board_A:nth-child(3) {
+    background-image: var(--image-board-bg-A-3);
+  }
+  .mini-board_A:nth-child(4) {
+    background-image: var(--image-board-bg-A-4);
+  }
+  .mini-board_A:nth-child(5) {
+    background-image: var(--image-board-bg-A-5);
+  }
+  .mini-board_A:nth-child(6) {
+    background-image: var(--image-board-bg-A-1);
+  }
+  .mini-board__label_A {
+    color: #000000;
+    font-size: 137x;
+    font-family: 'Source Han Sans SC';
+    font-style: normal;
+    font-weight: 700;
+    padding-bottom: 5px;
+  }
+  .mini-board__value_A {
+    width: 55px;
+    color: #000000;
+    font-size: 26px;
+    padding-bottom: 10px;
+    font-family: 'DDIN-Bold';
+  }
+
+  .mini-board__tip {
+    padding: 4px;
+    margin: 4px 0px;
+    background-color: @map-popup-bg;
+  }
+  .mini-board__tip:hover {
+    background-color: @primary-color;
+  }
+</style>

src/components/Configurable/types.ts

@@ -90,6 +90,7 @@ export interface ModuleData {
         | 'blast_delta'
         | 'qh_curve'
         | 'partition'
+        | 'simple_board'
         | 'board_table';
       /** 分区大小 */
       basis: string;