From 31138ed07bf4d49ade8f5819253100da1fcdce44 Mon Sep 17 00:00:00 2001 From: masquevil Date: Thu, 29 Aug 2024 14:12:23 +0800 Subject: [PATCH] =?UTF-8?q?[rool-tool]=20=E6=94=AF=E6=8C=81=E5=A4=9A?= =?UTF-8?q?=E4=B8=AA=20diy=20=E9=AA=B0=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apps/roll/ActionCard.vue | 36 +++++ src/apps/roll/DiyActionCard.vue | 173 ++++++++++++++++++++++++ src/apps/roll/RollTool.vue | 232 +++++++++++--------------------- src/apps/roll/constants.ts | 1 + src/apps/roll/types.ts | 6 + 5 files changed, 292 insertions(+), 156 deletions(-) create mode 100644 src/apps/roll/ActionCard.vue create mode 100644 src/apps/roll/DiyActionCard.vue create mode 100644 src/apps/roll/constants.ts create mode 100644 src/apps/roll/types.ts diff --git a/src/apps/roll/ActionCard.vue b/src/apps/roll/ActionCard.vue new file mode 100644 index 0000000..7a62e4c --- /dev/null +++ b/src/apps/roll/ActionCard.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/apps/roll/DiyActionCard.vue b/src/apps/roll/DiyActionCard.vue new file mode 100644 index 0000000..75b6e54 --- /dev/null +++ b/src/apps/roll/DiyActionCard.vue @@ -0,0 +1,173 @@ + + + + + diff --git a/src/apps/roll/RollTool.vue b/src/apps/roll/RollTool.vue index e61da5f..4e513ad 100644 --- a/src/apps/roll/RollTool.vue +++ b/src/apps/roll/RollTool.vue @@ -1,67 +1,29 @@ @@ -250,33 +172,6 @@ function onSimpleRoll(dice: number) { opacity: 0.8; } -.action-card { - width: 100%; - max-width: 600px; - flex: 0 0 auto; - display: flex; - flex-direction: column; - gap: 12px; - padding: 12px; - border: 1px solid var(--color-border); - border-radius: 4px; - background-color: var(--color-bg); - - .el-form-item { - margin-bottom: 12px; - } -} -.action-card-title { - font-size: 16px; -} -.action-card-row { - width: 100%; - display: flex; - gap: 8px; - align-items: center; - justify-content: space-between; -} - .simple-dice-container { display: flex; flex-wrap: wrap; @@ -284,9 +179,34 @@ function onSimpleRoll(dice: number) { justify-content: space-between; } -@media screen and (max-width: 720px) { - .action-card { - max-width: 100%; +.diy-container { + flex: 0 0 auto; + width: fit-content; + max-width: 100%; + display: flex; + gap: 8px; + overflow-x: auto; +} +.add-diy-button { + --color-bg-hover: rgba(0, 0, 0, 0.1); + --color-bg-active: rgba(0, 0, 0, 0.18); + flex: 0 0 auto; + width: 80px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: 4px; + cursor: pointer; + user-select: none; + transition: background-color 0.2s; + + &:hover { + background-color: var(--color-bg-hover); + } + &:active { + background-color: var(--color-bg-active); } } diff --git a/src/apps/roll/constants.ts b/src/apps/roll/constants.ts new file mode 100644 index 0000000..7775b76 --- /dev/null +++ b/src/apps/roll/constants.ts @@ -0,0 +1 @@ +export const diceList = [2, 3, 4, 6, 8, 10, 12, 20, 100]; diff --git a/src/apps/roll/types.ts b/src/apps/roll/types.ts new file mode 100644 index 0000000..1ac9069 --- /dev/null +++ b/src/apps/roll/types.ts @@ -0,0 +1,6 @@ +export interface DiyRollResult { + title: string; + content?: string; + time: string; + timestamp: number; +}