From fb9fe6eb2e85182d4bec3454be0c0265fa974525 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 23 Apr 2025 15:21:07 +0800
Subject: [PATCH] update

---
 .../frontend/src/components/AddProxyForm.vue  | 211 ++++--------------
 .../frontend/src/components/ProxyList.vue     |  96 +++-----
 .../appearance/config/default-themes.ts       |   1 +
 packages/frontend/src/style.css               |   2 +
 packages/frontend/src/views/ProxiesView.vue   |  47 +---
 5 files changed, 85 insertions(+), 272 deletions(-)

diff --git a/packages/frontend/src/components/AddProxyForm.vue b/packages/frontend/src/components/AddProxyForm.vue
index 8513e54..17e68bd 100644
--- a/packages/frontend/src/components/AddProxyForm.vue
+++ b/packages/frontend/src/components/AddProxyForm.vue
@@ -123,48 +123,59 @@ const handleSubmit = async () => {
 </script>
 
 <template>
-  <div class="add-proxy-form-overlay">
-    <div class="add-proxy-form">
-      <h3>{{ formTitle }}</h3>
-      <form @submit.prevent="handleSubmit">
-        <div class="form-group">
-          <label for="proxy-name">{{ t('proxies.form.name') }}</label>
-          <input type="text" id="proxy-name" v-model="formData.name" required />
+  <div class="fixed inset-0 bg-overlay flex justify-center items-center z-50"> <!-- Use bg-overlay for the overlay -->
+    <div class="bg-background text-foreground p-8 rounded-lg shadow-xl border border-border min-w-[350px] max-w-lg"> <!-- Form Panel with Tailwind -->
+      <h3 class="text-lg font-semibold text-center mb-6">{{ formTitle }}</h3> <!-- Title with Tailwind -->
+      <form @submit.prevent="handleSubmit" class="space-y-4"> <!-- Form with spacing -->
+        <div> <!-- Form Group -->
+          <label for="proxy-name" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.name') }}</label>
+          <input type="text" id="proxy-name" v-model="formData.name" required
+                 class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
         </div>
-        <div class="form-group">
-          <label for="proxy-type">{{ t('proxies.form.type') }}</label>
-          <select id="proxy-type" v-model="formData.type">
+        <div> <!-- Form Group -->
+          <label for="proxy-type" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.type') }}</label>
+          <select id="proxy-type" v-model="formData.type"
+                  class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
+                  style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
             <option value="SOCKS5">SOCKS5</option>
             <option value="HTTP">HTTP</option>
           </select>
         </div>
-        <div class="form-group">
-          <label for="proxy-host">{{ t('proxies.form.host') }}</label>
-          <input type="text" id="proxy-host" v-model="formData.host" required />
+        <div> <!-- Form Group -->
+          <label for="proxy-host" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.host') }}</label>
+          <input type="text" id="proxy-host" v-model="formData.host" required
+                 class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
         </div>
-        <div class="form-group">
-          <label for="proxy-port">{{ t('proxies.form.port') }}</label>
-          <input type="number" id="proxy-port" v-model.number="formData.port" required min="1" max="65535" />
+        <div> <!-- Form Group -->
+          <label for="proxy-port" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.port') }}</label>
+          <input type="number" id="proxy-port" v-model.number="formData.port" required min="1" max="65535"
+                 class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
         </div>
-        <div class="form-group">
-          <label for="proxy-username">{{ t('proxies.form.username') }} ({{ t('proxies.form.optional') }})</label>
-          <input type="text" id="proxy-username" v-model="formData.username" />
+        <div> <!-- Form Group -->
+          <label for="proxy-username" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.username') }} ({{ t('proxies.form.optional') }})</label>
+          <input type="text" id="proxy-username" v-model="formData.username"
+                 class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
         </div>
-        <div class="form-group">
-          <label for="proxy-password">{{ t('proxies.form.password') }} ({{ t('proxies.form.optional') }})</label>
-          <input type="password" id="proxy-password" v-model="formData.password" />
-            <small v-if="isEditMode">{{ t('proxies.form.passwordUpdateNote') }}</small>
+        <div> <!-- Form Group -->
+          <label for="proxy-password" class="block text-sm font-medium text-text-secondary mb-1">{{ t('proxies.form.password') }} ({{ t('proxies.form.optional') }})</label>
+          <input type="password" id="proxy-password" v-model="formData.password"
+                 class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+            <small v-if="isEditMode" class="block mt-1 text-xs text-text-secondary">{{ t('proxies.form.passwordUpdateNote') }}</small>
          </div>
 
-         <div v-if="formError || combinedStoreError" class="error-message">
+         <div v-if="formError || combinedStoreError" class="text-red-600 bg-red-100 border border-red-300 rounded-md p-3 text-sm text-center font-medium"> <!-- Error Message with Tailwind -->
            {{ formError || combinedStoreError }}
          </div>
 
-        <div class="form-actions">
-          <button type="submit" :disabled="isLoading">
+        <div class="flex justify-end space-x-3 pt-5 mt-6 border-t border-border"> <!-- Form Actions with Tailwind -->
+          <button type="submit" :disabled="isLoading"
+                  class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
             {{ submitButtonText }}
           </button>
-          <button type="button" @click="emit('close')" :disabled="isLoading">{{ t('proxies.form.cancel') }}</button>
+          <button type="button" @click="emit('close')" :disabled="isLoading"
+                  class="px-4 py-2 bg-transparent text-text-secondary border border-border rounded-md shadow-sm hover:bg-border hover:text-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
+            {{ t('proxies.form.cancel') }}
+          </button>
         </div>
       </form>
     </div>
@@ -172,149 +183,5 @@ const handleSubmit = async () => {
 </template>
 
 <style scoped>
-/* 应用更详细的美化样式 */
-.add-proxy-form-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.6); /* 加深背景 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.add-proxy-form {
-  background-color: var(--app-bg-color, white);
-  color: var(--text-color, #333);
-  padding: calc(var(--base-padding, 1rem) * 2);
-  border-radius: 8px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 调整阴影 */
-  min-width: 350px; /* 稍微加宽 */
-  max-width: 550px; /* 调整最大宽度 */
-  border: 1px solid var(--border-color, #ccc);
-}
-
-h3 {
-  margin-top: 0;
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 4); /* 增加标题下边距 */
-  text-align: center;
-  color: var(--text-color, #333);
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-size: 1.4em; /* 稍微增大标题字号 */
-  font-weight: 600; /* 加粗标题 */
-}
-
-.form-group {
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 2.5); /* 增加组间距 */
-}
-
-label {
-  display: block;
-  margin-bottom: calc(var(--base-margin, 0.5rem) * 0.8); /* 调整标签下边距 */
-  font-weight: 500; /* 调整标签字重 */
-  font-size: 0.95em; /* 调整标签字号 */
-  color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
-  font-family: var(--font-family-sans-serif, sans-serif);
-}
-
-input[type="text"],
-input[type="number"],
-input[type="password"],
-select {
-  width: 100%;
-  padding: calc(var(--base-padding, 1rem) * 0.6); /* 调整输入框内边距 */
-  border: 1px solid var(--border-color, #ccc);
-  border-radius: 4px;
-  box-sizing: border-box;
-  background-color: var(--app-bg-color, white);
-  color: var(--text-color, #333);
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-size: 1em; /* 确保字体大小 */
-  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
-}
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
-select:focus {
-  outline: none; /* 移除默认 outline */
-  border-color: var(--button-bg-color, #007bff); /* 聚焦时使用按钮背景色 */
-  box-shadow: 0 0 5px var(--button-bg-color, #007bff); /* 恢复光晕效果并使用主题色 */
-}
-
-select {
-    appearance: none; /* 移除默认下拉箭头 (可能需要自定义箭头) */
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* 添加自定义箭头 */
-    background-repeat: no-repeat;
-    background-position: right calc(var(--base-padding, 1rem) * 0.6) center;
-    background-size: 16px 12px;
-    padding-right: calc(var(--base-padding, 1rem) * 2); /* 为箭头腾出空间 */
-}
-
-small {
-    display: block;
-    margin-top: calc(var(--base-margin, 0.5rem) * 0.5); /* 调整上边距 */
-    font-size: 0.85em; /* 调整字号 */
-    color: var(--text-color-secondary, #666);
-    font-family: var(--font-family-sans-serif, sans-serif);
-}
-
-.error-message {
-  color: red;
-  margin-bottom: var(--base-margin, 0.5rem);
-  text-align: center;
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-weight: 500; /* 加粗错误信息 */
-  padding: calc(var(--base-padding, 1rem) * 0.5); /* 添加内边距 */
-  background-color: rgba(255, 0, 0, 0.05); /* 添加淡红色背景 */
-  border: 1px solid rgba(255, 0, 0, 0.2); /* 添加边框 */
-  border-radius: 4px;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: calc(var(--base-margin, 0.5rem) * 4); /* 增加顶部间距 */
-  padding-top: calc(var(--base-padding, 1rem) * 1); /* 在按钮上方增加间距 */
-  border-top: 1px solid var(--border-color, #eee); /* 添加分隔线 */
-}
-
-.form-actions button {
-  margin-left: var(--base-margin, 0.5rem);
-  padding: calc(var(--base-padding, 1rem) * 0.7) calc(var(--base-padding, 1rem) * 1.4); /* 调整按钮内边距 */
-  cursor: pointer;
-  border-radius: 4px;
-  font-family: var(--font-family-sans-serif, sans-serif);
-  font-weight: 500; /* 调整按钮字重 */
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; /* 添加过渡 */
-}
-
-.form-actions button[type="submit"] {
-  background-color: var(--button-bg-color, #007bff);
-  color: var(--button-text-color, white);
-  border: 1px solid var(--button-bg-color, #007bff); /* 添加边框 */
-}
-.form-actions button[type="submit"]:hover:not(:disabled) {
-  background-color: var(--button-hover-bg-color, #0056b3);
-  border-color: var(--button-hover-bg-color, #0056b3); /* 同步边框色 */
-}
-
-.form-actions button[type="button"] {
-  background-color: transparent; /* 取消按钮透明背景 */
-  color: var(--text-color-secondary, #666); /* 使用次要文本颜色 */
-  border: 1px solid var(--border-color, #ccc); /* 添加边框 */
-}
-.form-actions button[type="button"]:hover:not(:disabled) {
-  background-color: var(--border-color, #eee); /* 悬停时淡灰色背景 */
-  border-color: var(--text-color-secondary, #bbb); /* 悬停时边框变深 */
-  color: var(--text-color, #333); /* 悬停时文本变深 */
-}
-
-.form-actions button:disabled {
-  opacity: 0.5; /* 调整禁用透明度 */
-  cursor: not-allowed;
-}
+/* Remove all scoped styles as they are now handled by Tailwind utility classes */
 </style>
diff --git a/packages/frontend/src/components/ProxyList.vue b/packages/frontend/src/components/ProxyList.vue
index 6869a32..8d22348 100644
--- a/packages/frontend/src/components/ProxyList.vue
+++ b/packages/frontend/src/components/ProxyList.vue
@@ -29,35 +29,43 @@ const formatTimestamp = (timestamp: number | null): string => {
 </script>
 
 <template>
-  <div class="proxy-list">
-    <div v-if="isLoading" class="loading">{{ t('proxies.loading') }}</div>
-    <div v-else-if="error" class="error">{{ t('proxies.error', { error: error }) }}</div>
-    <div v-else-if="proxies.length === 0" class="no-proxies">
+  <div class="mt-4"> <!-- Container with top margin -->
+    <div v-if="isLoading" class="p-4 border border-border rounded-md mb-4 text-text-secondary bg-header/50"> <!-- Loading state with Tailwind -->
+      {{ t('proxies.loading') }}
+    </div>
+    <div v-else-if="error" class="p-4 border border-red-300 bg-red-100 text-red-700 rounded-md mb-4"> <!-- Error state with Tailwind -->
+      {{ t('proxies.error', { error: error }) }}
+    </div>
+    <div v-else-if="proxies.length === 0" class="p-4 border border-border rounded-md mb-4 text-text-secondary"> <!-- No proxies state with Tailwind -->
       {{ t('proxies.noProxies') }}
     </div>
-    <table v-else>
+    <table v-else class="w-full border-collapse mt-4 text-sm"> <!-- Table with Tailwind -->
       <thead>
-        <tr>
-          <th>{{ t('proxies.table.name') }}</th>
-          <th>{{ t('proxies.table.type') }}</th>
-          <th>{{ t('proxies.table.host') }}</th>
-          <th>{{ t('proxies.table.port') }}</th>
-          <th>{{ t('proxies.table.user') }}</th>
-          <th>{{ t('proxies.table.updatedAt') }}</th>
-          <th>{{ t('proxies.table.actions') }}</th>
+        <tr class="bg-header"> <!-- Table header row -->
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.name') }}</th>
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.type') }}</th>
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.host') }}</th>
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.port') }}</th>
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.user') }}</th>
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.updatedAt') }}</th>
+          <th class="px-4 py-2 border border-border text-left font-medium text-text-secondary">{{ t('proxies.table.actions') }}</th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="proxy in proxies" :key="proxy.id">
-          <td>{{ proxy.name }}</td>
-          <td>{{ proxy.type }}</td>
-          <td>{{ proxy.host }}</td>
-          <td>{{ proxy.port }}</td>
-          <td>{{ proxy.username || '-' }}</td>
-          <td>{{ formatTimestamp(proxy.updated_at) }}</td>
-          <td>
-            <button @click="emit('edit-proxy', proxy)">{{ t('proxies.actions.edit') }}</button>
-            <button @click="handleDelete(proxy)">{{ t('proxies.actions.delete') }}</button>
+        <tr v-for="proxy in proxies" :key="proxy.id" class="odd:bg-background even:bg-header/50 hover:bg-link-active-bg/50"> <!-- Table body rows with alternating background and hover -->
+          <td class="px-4 py-2 border border-border">{{ proxy.name }}</td>
+          <td class="px-4 py-2 border border-border">{{ proxy.type }}</td>
+          <td class="px-4 py-2 border border-border">{{ proxy.host }}</td>
+          <td class="px-4 py-2 border border-border">{{ proxy.port }}</td>
+          <td class="px-4 py-2 border border-border">{{ proxy.username || '-' }}</td>
+          <td class="px-4 py-2 border border-border whitespace-nowrap">{{ formatTimestamp(proxy.updated_at) }}</td>
+          <td class="px-4 py-2 border border-border space-x-2 whitespace-nowrap"> <!-- Actions cell with spacing -->
+            <button @click="emit('edit-proxy', proxy)" class="text-link hover:text-link-hover hover:underline text-xs font-medium"> <!-- Edit button with link style -->
+              {{ t('proxies.actions.edit') }}
+            </button>
+            <button @click="handleDelete(proxy)" class="text-red-600 hover:text-red-800 hover:underline text-xs font-medium"> <!-- Delete button with danger style -->
+              {{ t('proxies.actions.delete') }}
+            </button>
           </td>
         </tr>
       </tbody>
@@ -66,45 +74,5 @@ const formatTimestamp = (timestamp: number | null): string => {
 </template>
 
 <style scoped>
-.proxy-list {
-  margin-top: 1rem;
-}
-
-.loading, .error, .no-proxies {
-  padding: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-bottom: 1rem;
-}
-
-.error {
-  color: red;
-  border-color: red;
-}
-
-.no-proxies {
-  color: #666;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 1rem;
-}
-
-th, td {
-  border: 1px solid #ddd;
-  padding: 0.5rem;
-  text-align: left;
-}
-
-th {
-  background-color: #f2f2f2;
-}
-
-button {
-  margin-right: 0.5rem;
-  padding: 0.2rem 0.5rem;
-  cursor: pointer;
-}
+/* Remove all scoped styles as they are now handled by Tailwind utility classes */
 </style>
diff --git a/packages/frontend/src/features/appearance/config/default-themes.ts b/packages/frontend/src/features/appearance/config/default-themes.ts
index 8839094..45c0e14 100644
--- a/packages/frontend/src/features/appearance/config/default-themes.ts
+++ b/packages/frontend/src/features/appearance/config/default-themes.ts
@@ -51,6 +51,7 @@ export const defaultUiTheme: Record<string, string> = {
   '--input-focus-glow': 'var(--link-active-color)', /* 输入框聚焦光晕值 */
   '--ssh-tab-active': 'transparent', /* Added SSH Tab Active */
   '--ssh-tab-background': 'transparent', /* Added SSH Tab Background */
+  '--overlay-bg-color': 'rgba(0, 0, 0, 0.6)', /* Added Overlay Background */
   // End added variables
   '--font-family-sans-serif': 'sans-serif',
   '--base-padding': '1rem',
diff --git a/packages/frontend/src/style.css b/packages/frontend/src/style.css
index 4aa432a..13b2ea0 100644
--- a/packages/frontend/src/style.css
+++ b/packages/frontend/src/style.css
@@ -31,6 +31,7 @@
   /* --color-input-focus-glow: var(--input-focus-glow); /* Glow might need direct var() use in shadow utilities */
   --color-ssh-tab-active: var(--ssh-tab-active);
   --color-ssh-tab-background: var(--ssh-tab-background);
+  --color-overlay: var(--overlay-bg-color); /* Added Overlay Background */
 }
 
 /* 全局样式和 CSS 变量定义 */
@@ -60,6 +61,7 @@
   --input-focus-glow: var(--link-active-color); /* 输入框聚焦光晕值 */
   --ssh-tab-active: transparent; /* Corrected value */
   --ssh-tab-background: transparent; /* Corrected value */
+  --overlay-bg-color: rgba(0, 0, 0, 0.6); /* Added Overlay Background Color */
 
   /* 字体 */
   --font-family-sans-serif: sans-serif; /* 默认字体 */
diff --git a/packages/frontend/src/views/ProxiesView.vue b/packages/frontend/src/views/ProxiesView.vue
index bbdc2cc..d6121c2 100644
--- a/packages/frontend/src/views/ProxiesView.vue
+++ b/packages/frontend/src/views/ProxiesView.vue
@@ -42,10 +42,16 @@ const closeForm = () => {
 </script>
 
 <template>
-  <div class="proxies-view">
-    <h2>{{ t('proxies.title') }}</h2>
+  <div class="p-4 bg-background text-foreground"> <!-- Ensure Tailwind padding, background, and text color -->
+    <h2 class="text-xl font-semibold mb-4">{{ t('proxies.title') }}</h2> <!-- Ensure Tailwind typography -->
 
-    <button @click="openAddForm" v-if="!showForm">{{ t('proxies.addProxy') }}</button>
+    <button
+      @click="openAddForm"
+      v-if="!showForm"
+      class="px-4 py-2 bg-button text-button-text rounded hover:bg-button-hover mb-4 transition duration-150 ease-in-out"
+    > <!-- Ensure Tailwind button styles -->
+      {{ t('proxies.addProxy') }}
+    </button>
 
     <!-- 添加/编辑代理表单 -->
     <AddProxyForm
@@ -62,37 +68,6 @@ const closeForm = () => {
 </template>
 
 <style scoped>
-.proxies-view {
-  padding: var(--base-padding, 1rem); /* 使用变量 */
-  color: var(--text-color);
-  background-color: var(--app-bg-color);
-}
-
-button {
-  margin-bottom: var(--base-margin, 1rem); /* 使用变量 */
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  background-color: var(--button-bg-color, #007bff); /* 使用变量 */
-  color: var(--button-text-color, #ffffff); /* 使用变量 */
-  border: none; /* 移除默认边框 */
-  border-radius: 4px;
-}
-
-button:hover:not(:disabled) {
-  background-color: var(--button-hover-bg-color, #0056b3); /* 使用变量 */
-}
-
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* 保持 placeholder 样式，但使用变量 */
-.placeholder-form, .placeholder-list {
-    border: 1px dashed var(--border-color, #ccc); /* 使用变量 */
-    padding: var(--base-padding, 1rem); /* 使用变量 */
-    margin-top: var(--base-margin, 1rem); /* 使用变量 */
-    background-color: var(--header-bg-color, #f9f9f9); /* 使用变量，选择一个合适的背景色 */
-    color: var(--text-color-secondary); /* 使用次要文本颜色 */
-}
+/* Remove scoped styles previously handled by Tailwind */
+/* .proxies-view, button, button:hover, button:disabled, .placeholder-form, .placeholder-list rules are removed */
 </style>