refector: use SiteStatusSelect component for site status management

app/src/views/site/components/SiteStatusSegmented.vue → app/src/views/site/components/SiteStatusSelect.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { SelectValue } from 'ant-design-vue/es/select'
 import type { SiteStatus } from '@/api/site'
 import { message, Modal } from 'ant-design-vue'
+import { computed } from 'vue'
 import site from '@/api/site'
 import { ConfigStatus } from '@/constants'
 
@@ -21,6 +23,31 @@ const status = defineModel<string>({
 
 const [modal, ContextHolder] = Modal.useModal()
 
+// Computed property for select style based on current status
+const selectStyle = computed(() => {
+  const statusStyles = {
+    [ConfigStatus.Enabled]: {
+      '--ant-select-bg': '#1890ff',
+      '--ant-select-border': '#1890ff',
+      '--ant-select-color': '#ffffff',
+      'color': '#ffffff',
+    },
+    [ConfigStatus.Disabled]: {
+      '--ant-select-bg': '#ff4d4f',
+      '--ant-select-border': '#ff4d4f',
+      '--ant-select-color': '#ffffff',
+      'color': '#ffffff',
+    },
+    [ConfigStatus.Maintenance]: {
+      '--ant-select-bg': '#faad14',
+      '--ant-select-border': '#faad14',
+      '--ant-select-color': '#ffffff',
+      'color': '#ffffff',
+    },
+  }
+  return statusStyles[status.value] || {}
+})
+
 // Enable the site
 function enable() {
   site.enable(props.siteName).then(() => {
@@ -73,10 +100,10 @@ function disableMaintenance() {
   })
 }
 
-// Handle status change from segmented control
-function onChangeStatus(value: string | number) {
+// Handle status change from select
+function onChangeStatus(value: SelectValue) {
   const statusValue = value as string
-  if (statusValue === status.value) {
+  if (!statusValue || statusValue === status.value) {
     return
   }
 
@@ -120,52 +147,86 @@ function onChangeStatus(value: string | number) {
 </script>
 
 <template>
-  <div class="site-status-segmented">
+  <div class="site-status-select">
     <ContextHolder />
-    <ASegmented
+    <ASelect
       :value="status"
-      :options="[
-        {
-          value: ConfigStatus.Enabled,
-          label: $gettext('Enabled'),
-        },
-        {
-          value: ConfigStatus.Disabled,
-          label: $gettext('Disabled'),
-        },
-        {
-          value: ConfigStatus.Maintenance,
-          label: $gettext('Maintenance'),
-        },
-      ]"
+      class="status-select"
+      :style="selectStyle"
       @change="onChangeStatus"
-    />
+    >
+      <ASelectOption :value="ConfigStatus.Enabled">
+        {{ $gettext('Enabled') }}
+      </ASelectOption>
+      <ASelectOption :value="ConfigStatus.Disabled">
+        {{ $gettext('Disabled') }}
+      </ASelectOption>
+      <ASelectOption :value="ConfigStatus.Maintenance">
+        {{ $gettext('Maintenance') }}
+      </ASelectOption>
+    </ASelect>
   </div>
 </template>
 
 <style scoped>
-.site-status-segmented {
+.site-status-select {
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  max-width: 200px;
+}
+
+.status-select {
+  min-width: 120px;
+}
+
+:deep(.ant-select-selector) {
+  transition: all 0.3s ease !important;
+  font-weight: 500 !important;
+  border-radius: 6px !important;
+}
+
+:deep(.ant-select-selection-item) {
+  font-weight: 500 !important;
+}
+
+/* Ensure custom background colors are applied correctly */
+:deep(.status-select .ant-select-selector) {
+  background-color: var(--ant-select-bg) !important;
+  color: var(--ant-select-color) !important;
+}
+
+:deep(.status-select .ant-select-selection-item) {
+  color: var(--ant-select-color) !important;
+}
+
+:deep(.status-select .ant-select-arrow) {
+  color: var(--ant-select-color) !important;
+}
+
+/* Override focus and hover styles to maintain custom colors */
+:deep(.ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
+  border-color: var(--ant-select-border) !important;
+  background-color: var(--ant-select-bg) !important;
 }
 
-:deep(.ant-segmented-item:nth-child(1).ant-segmented-item-selected) {
-  background: #1890ff;
-  color: white;
+:deep(.ant-select-focused .ant-select-selector) {
+  border-color: var(--ant-select-border) !important;
+  background-color: var(--ant-select-bg) !important;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
 }
 
-:deep(.ant-segmented-item:nth-child(2).ant-segmented-item-selected) {
-  background: #ff4d4f;
-  color: white;
+/* Make sure dropdown options also have appropriate styling */
+:deep(.ant-select-dropdown .ant-select-item-option) {
+  padding: 8px 12px !important;
 }
 
-:deep(.ant-segmented-item:nth-child(3).ant-segmented-item-selected) {
-  background: #faad14;
-  color: white;
+:deep(.ant-select-dropdown .ant-select-item-option:hover) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
 }
 
-:deep(.ant-segmented-item-selected) {
-  border-radius: 6px;
+:deep(.ant-select-dropdown .ant-select-item-option-selected) {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+  font-weight: 600 !important;
 }
 </style>

app/src/views/site/site_edit/components/RightPanel/Basic.vue

@@ -7,7 +7,7 @@ import NodeSelector from '@/components/NodeSelector'
 import { formatDateTime } from '@/lib/helper'
 import { useSettingsStore } from '@/pinia'
 import envGroupColumns from '@/views/environments/group/columns'
-import SiteStatusSegmented from '@/views/site/components/SiteStatusSegmented.vue'
+import SiteStatusSelect from '@/views/site/components/SiteStatusSelect.vue'
 import ConfigName from '@/views/site/site_edit/components/ConfigName/ConfigName.vue'
 import { useSiteEditorStore } from '../SiteEditor/store'
 
@@ -26,7 +26,7 @@ function handleStatusChanged(event: { status: SiteStatus }) {
     <div class="mb-6">
       <AForm layout="vertical">
         <AFormItem :label="$gettext('Status')">
-          <SiteStatusSegmented
+          <SiteStatusSelect
             v-model="data.status"
             :site-name="name"
             @status-changed="handleStatusChanged"

app/src/views/site/site_list/columns.tsx

@@ -9,7 +9,7 @@ import { Tag } from 'ant-design-vue'
 import env_group from '@/api/env_group'
 import { ConfigStatus } from '@/constants'
 import envGroupColumns from '@/views/environments/group/columns'
-import SiteStatusSegmented from '@/views/site/components/SiteStatusSegmented.vue'
+import SiteStatusSelect from '@/views/site/components/SiteStatusSelect.vue'
 
 const columns: StdTableColumn[] = [{
   title: () => $gettext('Name'),
@@ -89,7 +89,7 @@ const columns: StdTableColumn[] = [{
   dataIndex: 'status',
   customRender: (args: CustomRenderArgs<Site>) => {
     const { text, record } = args
-    return h(SiteStatusSegmented, {
+    return h(SiteStatusSelect, {
       'modelValue': text,
       'siteName': record.name,
       'enabled': record.status !== ConfigStatus.Disabled,
@@ -123,7 +123,7 @@ const columns: StdTableColumn[] = [{
   },
   sorter: true,
   pure: true,
-  width: 110,
+  width: 50,
   fixed: 'right',
 }, {
   title: () => $gettext('Actions'),