From 37755bf19ed2c4ae22e3c8929bc34d1a48f5c26a Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 11 Mar 2025 14:45:06 +0800
Subject: [PATCH] refactor(stage-web): split to use stage-ui component

---
 apps/stage-web/src/pages/settings/index.vue   |  3 +-
 .../src/pages/settings/modules/index.vue      |  3 +-
 .../src/pages/settings/providers/index.vue    |  3 +-
 .../components/Form/Radio/RadioCardDetail.vue | 41 +++++++++++++++++--
 .../components/Form/Radio/RadioCardSimple.vue | 41 +++++++++++++++++--
 .../src/components/Form/Radio/index.ts        |  2 +
 .../stage-ui/src/components/Form/index.ts     |  2 +
 .../src/components/Menu/IconItem.vue          |  0
 .../src/components/Menu/IconStatusItem.vue    |  0
 .../stage-ui/src/components/Menu/index.ts     |  2 +
 packages/stage-ui/src/components/index.ts     |  5 +--
 11 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 packages/stage-ui/src/components/Form/Radio/index.ts
 create mode 100644 packages/stage-ui/src/components/Form/index.ts
 rename {apps/stage-web => packages/stage-ui}/src/components/Menu/IconItem.vue (100%)
 rename {apps/stage-web => packages/stage-ui}/src/components/Menu/IconStatusItem.vue (100%)
 create mode 100644 packages/stage-ui/src/components/Menu/index.ts

diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index 1ff5d7939..30735730c 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
+import { IconItem } from '@proj-airi/stage-ui/components'
 import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
-import IconItem from '../../components/Menu/IconItem.vue'
-
 const router = useRouter()
 const { t } = useI18n()
 const { language, disableTransitions } = storeToRefs(useSettings())
diff --git a/apps/stage-web/src/pages/settings/modules/index.vue b/apps/stage-web/src/pages/settings/modules/index.vue
index 7e333673b..13b8480e4 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { IconStatusItem } from '@proj-airi/stage-ui/components'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import IconStatusItem from '../../../components/Menu/IconStatusItem.vue'
-
 const router = useRouter()
 
 interface Module {
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index f5a11eb57..686b0c439 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
+import { IconStatusItem } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
 
-import IconStatusItem from '../../../components/Menu/IconStatusItem.vue'
-
 const router = useRouter()
 const providersStore = useProvidersStore()
 const { allProvidersMetadata } = storeToRefs(providersStore)
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
index 62cba2027..7840d7519 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
@@ -48,13 +48,16 @@ function updateCustomInput(event: Event) {
 <template>
   <label
     :key="id"
-    class="relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
+    class="form_radio-card-detail relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
     transition="all duration-200 ease-in-out"
     border="2 solid"
     :class="[
       modelValue === value
-        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900'
-        : 'bg-white dark:bg-neutral-900/20 border-neutral-200 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
+        : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+      modelValue === value
+        ? 'form_radio-card-detail-active'
+        : '',
       deprecated ? 'opacity-60' : '',
     ]"
   >
@@ -161,3 +164,35 @@ function updateCustomInput(event: Event) {
     </div>
   </label>
 </template>
+
+<style scoped>
+.form_radio-card-detail {
+  position: relative;
+  overflow: hidden;
+}
+
+.form_radio-card-detail::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 25%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+  opacity: 0;
+}
+
+.form_radio-card-detail:hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 1;
+}
+
+.form_radio-card-detail-active::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 0.5;
+}
+</style>
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
index 8c6b6734e..09ea351f5 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
@@ -17,12 +17,15 @@ defineEmits<{
   <label
     :key="id"
     border="2px solid"
-    class="relative"
+    class="form_radio-card-simple relative"
     transition="all duration-200 ease-in-out"
     :class="[
       modelValue === value
-        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900'
-        : 'bg-white dark:bg-neutral-900/20 border-neutral-200 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
+        : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-700 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+      modelValue === value
+        ? 'form_radio-card-simple-active'
+        : '',
     ]"
     flex="~ col"
     block min-w-50 w-fit cursor-pointer items-start rounded-xl p-4 text-left
@@ -79,3 +82,35 @@ defineEmits<{
     />
   </label>
 </template>
+
+<style scoped>
+.form_radio-card-simple {
+  position: relative;
+  overflow: hidden;
+}
+
+.form_radio-card-simple::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 25%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+  opacity: 0;
+}
+
+.form_radio-card-simple:hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 1;
+}
+
+.form_radio-card-simple-active::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 0.5;
+}
+</style>
diff --git a/packages/stage-ui/src/components/Form/Radio/index.ts b/packages/stage-ui/src/components/Form/Radio/index.ts
new file mode 100644
index 000000000..4eb7319bf
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Radio/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioCardDetail } from './RadioCardDetail.vue'
+export { default as RadioCardSimple } from './RadioCardSimple.vue'
diff --git a/packages/stage-ui/src/components/Form/index.ts b/packages/stage-ui/src/components/Form/index.ts
new file mode 100644
index 000000000..6d7755581
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/index.ts
@@ -0,0 +1,2 @@
+export * from './Radio'
+export { default as RadioCardDetailManySelect } from './RadioCardDetailManySelect.vue'
diff --git a/apps/stage-web/src/components/Menu/IconItem.vue b/packages/stage-ui/src/components/Menu/IconItem.vue
similarity index 100%
rename from apps/stage-web/src/components/Menu/IconItem.vue
rename to packages/stage-ui/src/components/Menu/IconItem.vue
diff --git a/apps/stage-web/src/components/Menu/IconStatusItem.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.vue
similarity index 100%
rename from apps/stage-web/src/components/Menu/IconStatusItem.vue
rename to packages/stage-ui/src/components/Menu/IconStatusItem.vue
diff --git a/packages/stage-ui/src/components/Menu/index.ts b/packages/stage-ui/src/components/Menu/index.ts
new file mode 100644
index 000000000..5a1a3a584
--- /dev/null
+++ b/packages/stage-ui/src/components/Menu/index.ts
@@ -0,0 +1,2 @@
+export { default as IconItem } from './IconItem.vue'
+export { default as IconStatusItem } from './IconStatusItem.vue'
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index 598b68238..d46fc4da4 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -1,10 +1,9 @@
 export { default as BasicTextarea } from './BasicTextarea.vue'
 export { default as Collapsable } from './Collapsable.vue'
-export { default as RadioCardDetail } from './Form/Radio/RadioCardDetail.vue'
-export { default as RadioCardSimple } from './Form/Radio/RadioCardSimple.vue'
-export { default as RadioCardDetailManySelect } from './Form/RadioCardDetailManySelect.vue'
+export * from './Form'
 export { default as Live2DCanvas } from './Live2D/Canvas.vue'
 export { default as Live2DModel } from './Live2D/Model.vue'
+export * from './Menu'
 export { default as SceneLive2D } from './Scenes/Live2D.vue'
 export { default as SceneVRM } from './Scenes/VRM.vue'
 export { default as TransitionVertical } from './TransitionVertical.vue'