feat: 新增平台

static/css/ui-components.css

@@ -136,9 +136,130 @@ h1, h2, h3, h4, h5, h6 {
     box-shadow: 0 0 0 3px var(--primary-100);
 }
 
-/* Select / Dropdown */
+/* Custom Select / Dropdown */
+.ui-select-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.ui-select-trigger {
+    width: 100%;
+    padding: 0.625rem 2.5rem 0.625rem 1rem;
+    border: 1px solid var(--secondary-200);
+    border-radius: var(--radius-md);
+    background-color: white;
+    color: var(--text-main);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+}
+
+.ui-select-trigger::after {
+    content: '';
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--secondary-500);
+    transition: transform 0.2s;
+}
+
+.ui-select-wrapper.open .ui-select-trigger::after {
+    transform: translateY(-50%) rotate(180deg);
+}
+
+.ui-select-trigger:hover {
+    border-color: var(--secondary-300);
+}
+
+.ui-select-wrapper.open .ui-select-trigger,
+.ui-select-trigger:focus {
+    outline: none;
+    border-color: var(--primary-500);
+    box-shadow: 0 0 0 3px var(--primary-100);
+}
+
+.ui-select-trigger .placeholder {
+    color: var(--text-muted);
+}
+
+.ui-select-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid var(--secondary-200);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    z-index: 1000;
+    max-height: 240px;
+    overflow-y: auto;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ui-select-wrapper.open .ui-select-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.ui-select-option {
+    padding: 0.625rem 1rem;
+    cursor: pointer;
+    transition: background 0.15s;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.ui-select-option:hover {
+    background: var(--secondary-50);
+}
+
+.ui-select-option.selected {
+    background: var(--primary-50);
+    color: var(--primary-700);
+    font-weight: 500;
+}
+
+.ui-select-option.selected::before {
+    content: '✓';
+    font-size: 0.75rem;
+    color: var(--primary-600);
+}
+
+.ui-select-option:first-child {
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.ui-select-option:last-child {
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+
+/* 隐藏原生 select */
+.ui-select-wrapper select.ui-select-native {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+}
+
+/* 兼容旧的 select.ui-input 样式 */
 select.ui-input,
-.ui-select {
+select.ui-select {
     width: 100%;
     padding: 0.625rem 2.5rem 0.625rem 1rem;
     border: 1px solid var(--secondary-200);
@@ -158,14 +279,14 @@ select.ui-input,
 }
 
 select.ui-input:focus,
-.ui-select:focus {
+select.ui-select:focus {
     outline: none;
     border-color: var(--primary-500);
     box-shadow: 0 0 0 3px var(--primary-100);
 }
 
 select.ui-input:hover,
-.ui-select:hover {
+select.ui-select:hover {
     border-color: var(--secondary-300);
 }