前台区域改成输入选择框

frontend/src/views/AwsSearchDiscount.vue

@@ -54,9 +54,16 @@
             <el-row :gutter="20">
               <el-col :md="6" :sm="24">
                 <el-form-item label="区域">
-                  <el-select v-model="form.region" placeholder="请选择区域" class="full-width">
+                  <el-select 
+                    v-model="form.region" 
+                    placeholder="请选择区域" 
+                    class="full-width"
+                    filterable
+                    clearable
+                    :filter-method="filterRegions"
+                    :remote-method="filterRegions">
                     <el-option
-                      v-for="region in regions"
+                      v-for="region in filteredRegions"
                       :key="region.code"
                       :label="region.name"
                       :value="region.code">
@@ -435,6 +442,7 @@
           yearly_discount: 0.85  // 默认60%，即6折
         },
         regions: [],
+        filteredRegions: [], // 添加筛选后的区域列表
         searchResults: [],
         selectedInstance: null,
         comparisonList: [], // 用于存储要比较的实例
@@ -450,6 +458,7 @@
       try {
         // 使用API服务获取区域列表
         this.regions = await apiService.getRegions()
+        this.filteredRegions = [...this.regions] // 初始化筛选后的区域列表
         
         // 如果数据加载成功，默认选择第一个区域
         if (this.regions && this.regions.length > 0) {
@@ -457,7 +466,7 @@
         }
         
         // 从本地存储加载之前保存的对比列表
-        const savedComparison = localStorage.getItem('instance_comparison')
+        const savedComparison = localStorage.getItem('instance_comparison_discount')
         if (savedComparison) {
           this.comparisonList = JSON.parse(savedComparison)
         }
@@ -467,6 +476,16 @@
       }
     },
     methods: {
+      filterRegions(query) {
+        if (query) {
+          this.filteredRegions = this.regions.filter(region => {
+            return region.name.toLowerCase().includes(query.toLowerCase()) || 
+                   region.code.toLowerCase().includes(query.toLowerCase())
+          })
+        } else {
+          this.filteredRegions = [...this.regions]
+        }
+      },
       async searchInstances() {
         if (!this.form.cpu_cores && !this.form.memory_gb && !this.form.disk_gb) {
           this.$message.warning('请至少指定一项配置要求')
@@ -540,7 +559,7 @@
         this.$message.success('已添加到对比列表')
         
         // 保存到本地存储
-        localStorage.setItem('instance_comparison', JSON.stringify(this.comparisonList))
+        localStorage.setItem('instance_comparison_discount', JSON.stringify(this.comparisonList))
         
         // 滚动到对比列表区域
         setTimeout(() => {
@@ -552,12 +571,12 @@
       },
       removeFromComparison(index) {
         this.comparisonList.splice(index, 1)
-        localStorage.setItem('instance_comparison', JSON.stringify(this.comparisonList))
+        localStorage.setItem('instance_comparison_discount', JSON.stringify(this.comparisonList))
         this.$message.success('已从对比列表中移除')
       },
       clearComparison() {
         this.comparisonList = []
-        localStorage.removeItem('instance_comparison')
+        localStorage.removeItem('instance_comparison_discount')
         this.$message.success('已清空对比列表')
       },
       exportComparison() {

frontend/src/views/InstanceSearch.vue

@@ -54,9 +54,16 @@
           <el-row :gutter="20">
             <el-col :md="6" :sm="24">
               <el-form-item label="区域">
-                <el-select v-model="form.region" placeholder="请选择区域" class="full-width">
+                <el-select 
+                  v-model="form.region" 
+                  placeholder="请选择区域" 
+                  class="full-width"
+                  filterable
+                  clearable
+                  :filter-method="filterRegions"
+                  :remote-method="filterRegions">
                   <el-option
-                    v-for="region in regions"
+                    v-for="region in filteredRegions"
                     :key="region.code"
                     :label="region.name"
                     :value="region.code">
@@ -389,6 +396,7 @@ export default {
         operating_system: 'Linux' // 默认Linux
       },
       regions: [],
+      filteredRegions: [], // 添加筛选后的区域列表
       searchResults: [],
       selectedInstance: null,
       comparisonList: [], // 用于存储要比较的实例
@@ -404,6 +412,7 @@ export default {
     try {
       // 使用API服务获取区域列表
       this.regions = await apiService.getRegions()
+      this.filteredRegions = [...this.regions] // 初始化筛选后的区域列表
       
       // 如果数据加载成功，默认选择第一个区域
       if (this.regions && this.regions.length > 0) {
@@ -421,6 +430,16 @@ export default {
     }
   },
   methods: {
+    filterRegions(query) {
+      if (query) {
+        this.filteredRegions = this.regions.filter(region => {
+          return region.name.toLowerCase().includes(query.toLowerCase()) || 
+                 region.code.toLowerCase().includes(query.toLowerCase())
+        })
+      } else {
+        this.filteredRegions = [...this.regions]
+      }
+    },
     async searchInstances() {
       if (!this.form.cpu_cores && !this.form.memory_gb && !this.form.disk_gb) {
         this.$message.warning('请至少指定一项配置要求')

frontend/src/views/PriceCalculator.vue

@@ -26,9 +26,16 @@
             
             <el-col :md="12" :sm="24">
               <el-form-item label="区域">
-                <el-select v-model="form.region" placeholder="请选择区域" class="full-width">
+                <el-select 
+                  v-model="form.region" 
+                  placeholder="请选择区域" 
+                  class="full-width"
+                  filterable
+                  clearable
+                  :filter-method="filterRegions"
+                  :remote-method="filterRegions">
                   <el-option
-                    v-for="region in regions"
+                    v-for="region in filteredRegions"
                     :key="region"
                     :label="region"
                     :value="region">
@@ -160,6 +167,7 @@ export default {
       },
       instanceTypes: [],
       regions: [],
+      filteredRegions: [],
       priceResult: null
     }
   },
@@ -172,12 +180,22 @@ export default {
       
       this.instanceTypes = instanceTypes
       this.regions = regions.map(region => region.code)
+      this.filteredRegions = [...this.regions] // 初始化筛选后的区域列表
     } catch (error) {
       console.error('Error fetching data:', error)
       this.$message.error('获取数据失败')
     }
   },
   methods: {
+    filterRegions(query) {
+      if (query) {
+        this.filteredRegions = this.regions.filter(region => {
+          return region.toLowerCase().includes(query.toLowerCase())
+        })
+      } else {
+        this.filteredRegions = [...this.regions]
+      }
+    },
     async calculatePrice() {
       try {
         this.priceResult = await apiService.calculatePrice(this.form)