From 155496f93a506259ea5166e0600bc0ef1a4c53eb Mon Sep 17 00:00:00 2001
From: EstrellaXD <estrellaxd05@gmail.com>
Date: Thu, 12 Oct 2023 16:34:05 +0800
Subject: [PATCH] webui: change delete/disable button style.

---
 webui/src/components/ab-edit-rule.vue         |  72 +++++----
 .../basic/ab-button-multi.stories.ts          |  32 ++++
 .../src/components/basic/ab-button-multi.vue  | 150 ++++++++++++++++++
 webui/types/dts/components.d.ts               |   1 +
 4 files changed, 221 insertions(+), 34 deletions(-)
 create mode 100644 webui/src/components/basic/ab-button-multi.stories.ts
 create mode 100644 webui/src/components/basic/ab-button-multi.vue

diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index 528efb64..aa752b51 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { BangumiRule } from '#/bangumi';
+import type {BangumiRule} from '#/bangumi';
 
 const emit = defineEmits<{
   (e: 'apply', rule: BangumiRule): void;
   (e: 'enable', id: number): void;
   (
-    e: 'deleteFile',
-    type: 'disable' | 'delete',
-    opts: { id: number; deleteFile: boolean }
+      e: 'deleteFile',
+      type: 'disable' | 'delete',
+      opts: { id: number; deleteFile: boolean }
   ): void;
 }>();
 
-const { t } = useMyI18n();
+const {t} = useMyI18n();
 
-const show = defineModel('show', { default: false });
+const show = defineModel('show', {default: false});
 const rule = defineModel<BangumiRule>('rule', {
   required: true,
 });
@@ -31,9 +31,13 @@ watch(show, (val) => {
   }
 });
 
-function showDeleteFileDialog(type: 'disable' | 'delete') {
+function showDeleteFileDialog(type: String) {
   deleteFileDialog.show = true;
-  deleteFileDialog.type = type;
+  if (type === 'disable' || type === '禁用') {
+    deleteFileDialog.type = 'disable';
+  } else {
+    deleteFileDialog.type = 'delete';
+  }
 }
 
 const close = () => (show.value = false);
@@ -44,6 +48,7 @@ function emitdeleteFile(deleteFile: boolean) {
     deleteFile,
   });
 }
+
 function emitApply() {
   emit('apply', rule.value);
 }
@@ -78,11 +83,13 @@ const boxSize = computed(() => {
 
       <div fx-cer justify-center space-x-10px>
         <ab-button size="small" type="warn" @click="() => emitEnable()">{{
-          $t('homepage.rule.yes_btn')
-        }}</ab-button>
+            $t('homepage.rule.yes_btn')
+          }}
+        </ab-button>
         <ab-button size="small" @click="() => close()">{{
-          $t('homepage.rule.no_btn')
-        }}</ab-button>
+            $t('homepage.rule.no_btn')
+          }}
+        </ab-button>
       </div>
     </div>
 
@@ -90,41 +97,38 @@ const boxSize = computed(() => {
       <ab-rule v-model:rule="rule"></ab-rule>
 
       <div fx-cer justify-end space-x-10px>
-        <ab-button
-          size="small"
-          type="warn"
-          @click="() => showDeleteFileDialog('disable')"
-          >{{ $t('homepage.rule.disable') }}</ab-button
-        >
-        <ab-button
-          size="small"
-          type="warn"
-          @click="() => showDeleteFileDialog('delete')"
-          >{{ $t('homepage.rule.delete') }}</ab-button
-        >
+        <ab-button-multi
+            size="small"
+            type="warn"
+            :selections="[t('homepage.rule.delete'), t('homepage.rule.disable')]"
+            @click="showDeleteFileDialog"
+        />
         <ab-button size="small" @click="emitApply">{{
-          $t('homepage.rule.apply')
-        }}</ab-button>
+            $t('homepage.rule.apply')
+          }}
+        </ab-button>
       </div>
     </div>
 
     <ab-popup
-      v-model:show="deleteFileDialog.show"
-      :title="$t('homepage.rule.delete')"
+        v-model:show="deleteFileDialog.show"
+        :title="$t('homepage.rule.delete')"
     >
       <div>{{ $t('homepage.rule.delete_hit') }}</div>
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
         <ab-button
-          size="small"
-          type="warn"
-          @click="() => emitdeleteFile(true)"
-          >{{ $t('homepage.rule.yes_btn') }}</ab-button
+            size="small"
+            type="warn"
+            @click="() => emitdeleteFile(true)"
+        >{{ $t('homepage.rule.yes_btn') }}
+        </ab-button
         >
         <ab-button size="small" @click="() => emitdeleteFile(false)">{{
-          $t('homepage.rule.no_btn')
-        }}</ab-button>
+            $t('homepage.rule.no_btn')
+          }}
+        </ab-button>
       </div>
     </ab-popup>
   </ab-popup>
diff --git a/webui/src/components/basic/ab-button-multi.stories.ts b/webui/src/components/basic/ab-button-multi.stories.ts
new file mode 100644
index 00000000..e436b0c4
--- /dev/null
+++ b/webui/src/components/basic/ab-button-multi.stories.ts
@@ -0,0 +1,32 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+
+import AbButtonMulti from './ab-button-multi.vue';
+
+const meta: Meta<typeof AbButtonMulti> = {
+    title: 'basic/ab-button-multi',
+    component: AbButtonMulti,
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: {type: 'select'},
+            options: ['primary', 'warn'],
+        },
+        size: {
+            control: {type: 'select'},
+            options: ['big', 'normal', 'small'],
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof AbButtonMulti>;
+
+export const Template: Story = {
+    render: (args) => ({
+        components: {AbButtonMulti},
+        setup() {
+            return {args};
+        },
+        template: '<ab-button-multi v-bind="args">button</ab-button-multi>',
+    }),
+};
\ No newline at end of file
diff --git a/webui/src/components/basic/ab-button-multi.vue b/webui/src/components/basic/ab-button-multi.vue
new file mode 100644
index 00000000..dae9304c
--- /dev/null
+++ b/webui/src/components/basic/ab-button-multi.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup xmlns="http://www.w3.org/1999/html">
+
+import {NSpin} from 'naive-ui';
+import {Down} from "@icon-park/vue-next";
+import {computed} from "vue";
+
+const props = withDefaults(
+    defineProps<{
+      type?: 'primary' | 'warn';
+      size?: 'big' | 'normal' | 'small';
+      link?: string | null;
+      loading?: boolean;
+      selections: string[];
+    }>(),
+    {
+      type: 'primary',
+      size: 'normal',
+      link: null,
+      loading: false,
+    }
+);
+
+defineEmits(['click']);
+
+const selected = ref<string>(
+    props.selections[0]
+);
+const showSelections = ref<boolean>(false);
+
+
+const buttonSize = computed(() => {
+  switch (props.size) {
+    case 'big':
+      return 'rounded-10px text-h1 w-276px h-55px text-h1';
+    case 'normal':
+      return 'rounded-6px w-170px h-36px';
+    case 'small':
+      return 'rounded-6px w-86px h-28px text-main';
+  }
+});
+
+const selectboxSize = computed(() => {
+  switch (props.size) {
+    case 'big':
+      return 'w-276px rounded-10px text-h1';
+    case 'normal':
+      return 'w-170px rounded-6px';
+    case 'small':
+      return 'w-86px rounded-6px text-main';
+  }
+});
+
+const loadingSize = computed(() => {
+  switch (props.size) {
+    case 'big':
+      return 'large';
+    case 'normal':
+      return 'small';
+    case 'small':
+      return 18;
+  }
+});
+
+function onSelect(selection: string) {
+  selected.value = selection;
+  showSelections.value = false;
+  console.log(selected.value);
+}
+
+</script>
+
+<template>
+  <div
+      :class="buttonSize"
+      f-cer
+      overflow-hidden
+  >
+    <Component
+        :is="link !== null ? 'a' : 'button'"
+        :href="link"
+        text-white
+        outline-none
+        wh-full
+        pl-12px
+        :class="[`type-${type}`]"
+        @click="$emit('click', selected)"
+    >
+      <NSpin :show="loading" :size="loadingSize">
+        <div text-main>{{ selected }}</div>
+      </NSpin>
+    </Component>
+    <div
+        is-btn
+        px-12px
+        h-full
+        f-cer
+        :class="[`selector-${type}`]"
+        @click="() => showSelections = !showSelections"
+    >
+      <Down fill="white"/>
+    </div>
+  </div>
+  <div
+      v-if="showSelections"
+      abs
+      z-70
+      :class="selectboxSize"
+      overflow-hidden
+      class="select-box"
+  >
+    <div
+        v-for="selection in selections"
+        :key="selection"
+        is-btn
+        wh-full
+        f-cer
+        text-main
+        py-8px
+        text-white
+        :class="[`type-${type}`]"
+        @click="onSelect(selection)"
+    >
+      {{ selection }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.type {
+  &-primary {
+    @include bg-mouse-event(#4e3c94, #281e52, #8e8a9c);
+  }
+
+  &-warn {
+    @include bg-mouse-event(#943c61, #521e2a, #9c8a93);
+  }
+}
+.selector {
+  &-primary {
+    @include bg-mouse-event(#4e3c94, #281e52, #8e8a9c);
+  }
+  &-warn {
+    @include bg-mouse-event(#943c61, #521e2a, #9c8a93);
+  }
+}
+
+.select-box {
+  transform: TranslateY(80%) TranslateX(-111%);
+}
+</style>
\ No newline at end of file
diff --git a/webui/types/dts/components.d.ts b/webui/types/dts/components.d.ts
index 4bfca136..3859b6ae 100644
--- a/webui/types/dts/components.d.ts
+++ b/webui/types/dts/components.d.ts
@@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
     AbAddRss: typeof import('./../../src/components/ab-add-rss.vue')['default']
     AbBangumiCard: typeof import('./../../src/components/ab-bangumi-card.vue')['default']
     AbButton: typeof import('./../../src/components/basic/ab-button.vue')['default']
+    AbButtonMulti: typeof import('./../../src/components/basic/ab-button-multi.vue')['default']
     AbChangeAccount: typeof import('./../../src/components/ab-change-account.vue')['default']
     AbCheckbox: typeof import('./../../src/components/basic/ab-checkbox.vue')['default']
     AbContainer: typeof import('./../../src/components/ab-container.vue')['default']