[rool-tool] 新增简易骰子工具

src/apps/coc-card/components/GuidePaneContent.vue

@@ -43,6 +43,7 @@ import IssueRow from './IssueRow.vue';
         切换成功率模式：在 “全面模式”（显示所有技能的“普通|困难|极难”成功率）和
         “极简模式”（仅显示加过的技能的总成功率）两种模式之间切换。
       </li>
+      <li>简易骰子：快速 Roll 点。还有更丰富的模式。</li>
       <li>
         职业列表：展示所有预设职业，可以快速选择职业。可以看到每个职业根据当前属性计算出的职业点数。
       </li>

src/apps/coc-card/components/control-section-parts/simple-roll/SimpleRollButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Cpu } from '@element-plus/icons-vue';
+
+// components
+import ControlButton from '../../ControlButton.vue';
+import SimpleRollModal from './SimpleRollModal.vue';
+
+// models
+import LA, { LAEventID, FeatureNames } from '@/plugins/51la';
+
+const modalVisible = ref(false);
+
+function onButtonClick() {
+  modalVisible.value = true;
+  LA?.track(LAEventID.FEATURE, { name: FeatureNames.MORE_SIMPLE_ROLL });
+}
+</script>
+
+<template>
+  <ControlButton
+    label="简易骰子"
+    :icon="Cpu"
+    @click="onButtonClick"
+  />
+
+  <SimpleRollModal
+    :isOpen="modalVisible"
+    @close="modalVisible = false"
+  />
+</template>
+
+<style scoped lang="scss"></style>

src/apps/coc-card/components/control-section-parts/simple-roll/SimpleRollModal.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// components
+import ControlDialog from '../../ControlDialog.vue';
+import RollTool from '../../../../roll/RollTool.vue';
+
+interface Props {
+  isOpen?: boolean;
+}
+defineProps<Props>();
+
+interface Emits {
+  (event: 'close'): void;
+}
+const emit = defineEmits<Emits>();
+
+function onCloseModal() {
+  emit('close');
+}
+</script>
+
+<template>
+  <ControlDialog
+    title="简易骰子"
+    :modelValue="isOpen"
+    @update:modelValue="onCloseModal"
+  >
+    <div class="modal-body">
+      <RollTool hideDiy />
+      <div>
+        更丰富的骰子请访问：
+        <router-link :to="{ name: 'roll' }"> 骰子工具 </router-link>
+      </div>
+    </div>
+  </ControlDialog>
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

src/apps/coc-card/sections/ControlSection.vue

@@ -26,6 +26,7 @@ import QunSection from '../components/QunSection.vue';
 import JobList from '../components/JobList.vue';
 import WeaponList from '../components/WeaponList.vue';
 import DiceMaid from '../components/control-section-parts/dice-maid/DiceMaid.vue';
+import SimpleRollButton from '../components/control-section-parts/simple-roll/SimpleRollButton.vue';
 // import NoticeBoardButton from '../components/control-section-parts/notice-board/NoticeBoardButton.vue';
 
 // models
@@ -315,6 +316,7 @@ const cleanPreloadFn = watch(morePanelVisible, (visible) => {
             :icon="Mug"
             @click="switchTotalMode"
           />
+          <SimpleRollButton />
           <ControlButton
             label="投喂作者"
             :icon="IceCream"

src/apps/home/AppView.vue

@@ -6,6 +6,7 @@ import cocCardPreview from '@/assets/images/tools-preview/coc-card.jpg';
 import recordPreview from '@/assets/images/tools-preview/record.png';
 import kpAdsPreview from '@/assets/images/tools-preview/kp-ads.png';
 import timerPreview from '@/assets/images/tools-preview/timer.png';
+import rollPreview from '@/assets/images/tools-preview/roll.png';
 
 interface AppConfig {
   key: string;
@@ -32,6 +33,14 @@ const appConfigs: Record<'online' | 'offline', AppConfig[]> = {
       },
       preview: timerPreview,
     },
+    {
+      key: 'roll',
+      name: '投掷工具',
+      to: {
+        name: 'roll',
+      },
+      preview: rollPreview,
+    },
   ],
   offline: [
     {
@@ -44,7 +53,7 @@ const appConfigs: Record<'online' | 'offline', AppConfig[]> = {
     },
     {
       key: 'record',
-      name: '模组列表（短期内不再维护）',
+      name: '模组列表（待重构）',
       to: {
         name: 'tfg-stories',
       },
@@ -118,11 +127,11 @@ const appConfigs: Record<'online' | 'offline', AppConfig[]> = {
 
 .tools {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 20px;
 }
 .tools-offline {
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 20px;
 }
 .tool-card {

src/apps/roll/AppView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import RollTool from './RollTool.vue';
+</script>
+
+<template>
+  <main class="page">
+    <RollTool />
+  </main>
+</template>
+
+<style scoped lang="scss">
+.page {
+  max-width: 1120px;
+  height: 100vh;
+  margin: auto;
+  padding: 12px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>