From f0655e6c7247f5ba19fdf221adf921a497e86fe5 Mon Sep 17 00:00:00 2001
From: Overu <fengjianok@gmail.com>
Date: Fri, 27 Feb 2026 18:19:03 +0800
Subject: [PATCH] feat(spx-gui): add UIButtonTest

---
 spx-gui/src/components/ui/UIButtonTest.vue | 107 +++++++++++++++++++++
 spx-gui/src/components/ui/index.ts         |   1 +
 spx-gui/src/pages/docs/ui-design.vue       |  12 ++-
 3 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 spx-gui/src/components/ui/UIButtonTest.vue

diff --git a/spx-gui/src/components/ui/UIButtonTest.vue b/spx-gui/src/components/ui/UIButtonTest.vue
new file mode 100644
index 000000000..9547c267d
--- /dev/null
+++ b/spx-gui/src/components/ui/UIButtonTest.vue
@@ -0,0 +1,107 @@
+<template>
+  <button
+    class="ui-button-test"
+    :class="{ disabled, loading }"
+    :disabled="disabled || loading"
+    :type="htmlType"
+  >
+    <div class="content">
+      <UIIcon v-if="loading" class="icon" type="loading" />
+      <UIIcon v-else-if="icon" class="icon" :type="icon" />
+      <slot v-else name="icon"></slot>
+      <slot></slot>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import UIIcon, { type Type as IconType } from './icons/UIIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    icon?: IconType
+    disabled?: boolean
+    loading?: boolean
+    htmlType?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    icon: undefined,
+    disabled: false,
+    loading: false,
+    htmlType: 'button'
+  }
+)
+
+const disabled = computed(() => props.disabled)
+</script>
+
+<style lang="scss" scoped>
+.ui-button-test {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0 4px 0;
+  height: 40px; // Total height of 40px (36px content + 4px shadow offset)
+  border-radius: 12px;
+  outline: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  .content {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 24px;
+    border-radius: 12px;
+    font-size: 15px;
+    line-height: 1.6;
+    gap: 8px;
+    font-weight: normal;
+    color: var(--ui-color-grey-100);
+    background-color: var(--ui-color-primary-main);
+    box-shadow: 0 4px var(--ui-color-primary-700);
+    transition: inherit;
+    font-family: var(--ui-font-family-main);
+  }
+
+  .icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  &:hover:not(:disabled):not(.loading) {
+    .content {
+      background-color: var(--ui-color-primary-400);
+    }
+  }
+
+  &:active:not(:disabled):not(.loading),
+  &.loading {
+    padding-bottom: 0;
+    .content {
+      box-shadow: none;
+    }
+  }
+
+  &:disabled:not(.loading) {
+    cursor: not-allowed;
+    .content {
+      // These colors are specifically requested in the design draft (via variables in colors.ts)
+      color: var(--ui-color-primary-700); // Specified as $turquoise700
+      background-color: var(--ui-color-grey-300); // Specified as $grey300
+      box-shadow: 0 4px var(--ui-color-grey-500); // Specified as $grey500
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ui-color-primary-700);
+    outline-offset: 2px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index 1a5ec002c..765ad9ce9 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -2,6 +2,7 @@ export { default as UIConfigProvider, useUIVariables, type Config } from './UICo
 export { default as UICard } from './UICard.vue'
 export { default as UICardHeader } from './UICardHeader.vue'
 export { default as UIButton } from './UIButton.vue'
+export { default as UIButtonTest } from './UIButtonTest.vue'
 export { default as UIDropdown, type Pos as DropdownPos } from './UIDropdown'
 export { default as UITooltip } from './UITooltip.vue'
 export { UIMenu, UIMenuGroup, UIMenuItem } from './menu'
diff --git a/spx-gui/src/pages/docs/ui-design.vue b/spx-gui/src/pages/docs/ui-design.vue
index bcf7e076e..09ac4be5d 100644
--- a/spx-gui/src/pages/docs/ui-design.vue
+++ b/spx-gui/src/pages/docs/ui-design.vue
@@ -264,6 +264,16 @@
           </div>
         </div>
       </div>
+      <div class="component-wrapper">
+        <h3>UIButtonTest</h3>
+        <div class="content-wrapper">
+          <div class="item">
+            <UIButtonTest icon="play">Default</UIButtonTest>
+            <UIButtonTest icon="play" disabled>Disabled</UIButtonTest>
+            <UIButtonTest icon="play" loading>Loading</UIButtonTest>
+          </div>
+        </div>
+      </div>
       <div class="component-wrapper">
         <h3>UITag</h3>
         <div class="setting-wrapper">
@@ -328,7 +338,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import { UIButton, UISelect, UISelectOption, UITag, useMessage } from '@/components/ui'
+import { UIButton, UIButtonTest, UISelect, UISelectOption, UITag, useMessage } from '@/components/ui'
 import CommunityNavbar from '@/components/community/CommunityNavbar.vue'
 import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
 import CommunityFooter from '@/components/community/footer/CommunityFooter.vue'