Merge branch 'feature/add-city-filter-condition-constraint' into feature/ui

packages/ui/src/renderer/src/features/AnyCombineBossRecommendFilter/index.vue

@@ -16,7 +16,10 @@
         justify-between
         items-center
       >
-        <city-chooser v-model="modelValue.cityList">
+        <city-chooser
+          v-model="modelValue.cityList"
+          gt-show-scene="any-combine-boss-recommend-filter"
+        >
           <template #default="{ showDialog }">
             <div flex justify-between items-center>
               <div font-size-12px>

packages/ui/src/renderer/src/features/StaticCombineBossRecommendFilter/index.vue

@@ -73,14 +73,18 @@
         </el-table-column>
         <el-table-column :resizable="false" label="城市" prop="city">
           <template #default="{ row }">
-            <city-chooser v-model="row.city" :multiple="false">
+            <city-chooser
+              v-model="row.city"
+              :multiple="false"
+              gt-show-scene="static-combine-boss-recommend-filter"
+            >
               <template #default="{ showDialog }">
                 <div flex justify-between items-center>
                   <div font-size-12px lh-1.2em>
                     <template v-if="row.city">{{ row.city }}</template>
                     <template v-else><i color-gray>未选择城市</i></template>
                   </div>
-                  <el-button size="small" @click="showDialog" pl4px pr4px>选择</el-button>
+                  <el-button size="small" pl4px pr4px @click="showDialog">选择</el-button>
                 </div>
               </template>
             </city-chooser>

packages/ui/src/renderer/src/page/MainLayout/GeekAutoStartChatWithBoss/components/CityChooser.vue

@@ -16,7 +16,7 @@
     >
       <el-tabs v-model="activeTabName">
         <el-tab-pane
-          :style="{ height: '300px', overflow: 'auto' }"
+          :style="{ height: '260px', overflow: 'auto' }"
           label="热门城市"
           name="热门城市"
         >
@@ -95,19 +95,66 @@
         <div
           :style="{
             display: 'flex',
-            alignItems: 'center',
+            alignItems: multiple ? 'end' : 'center',
             justifyContent: 'space-between'
           }"
         >
-          <div>
-            <el-button
-              v-if="selectedCities?.length"
-              type="danger"
-              @click="handleClearSelectedCitiesInDialog"
-              >清空已选择的所有城市</el-button
-            >
+          <div flex flex-1 mr12px text-left flex-col>
+            <template v-if="selectedCities?.length">
+              <div
+                flex
+                flex-items-center
+                font-size-14px
+                flex-0
+                ws-nowrap
+                :class="{ mb10px: multiple }"
+              >
+                <el-button
+                  v-if="multiple && selectedCities?.length"
+                  type="danger"
+                  size="small"
+                  @click="handleClearSelectedCitiesInDialog"
+                  >清空已选择的所有城市</el-button
+                >
+                <template v-if="!multiple">
+                  <span ml6px font-size-13px class="color-#999">已选择：</span>
+                  <el-tag
+                    closable
+                    @close="
+                      () => {
+                        selectedCities = null
+                        gtagRenderer('remove_selected_cities_in_dialog_clicked', {
+                          gtShowScene: props.gtShowScene,
+                          multiple: Boolean(multiple)
+                        })
+                      }
+                    "
+                    >{{ selectedCities }}</el-tag
+                  >
+                </template>
+              </div>
+              <div v-if="multiple" flex flex-1 flex-wrap gap-6px of-auto max-h-160px>
+                <span font-size-13px class="color-#999" flex items-center>已选择：</span>
+                <el-tag
+                  v-for="(city, index) in selectedCities"
+                  :key="city"
+                  closable
+                  @close="
+                    () => {
+                      ;(selectedCities ?? []).splice(index, 1)
+                      gtagRenderer('remove_selected_cities_in_dialog_clicked', {
+                        gtShowScene: props.gtShowScene,
+                        multiple: Boolean(multiple)
+                      })
+                    }
+                  "
+                >
+                  {{ city }}</el-tag
+                >
+              </div>
+            </template>
           </div>
-          <div>
+          <div flex-0 ws-nowrap>
             <el-button @click="handleCancelClicked">取消</el-button>
             <el-button type="primary" @click="handleConfirmClicked">确定</el-button>
           </div>
@@ -131,6 +178,9 @@ const props = defineProps({
   multiple: {
     type: Boolean,
     default: true
+  },
+  gtShowScene: {
+    type: String
   }
 })
 const emits = defineEmits(['update:modelValue'])
@@ -158,15 +208,16 @@ for (const group of cityGroup) {
 function handleDialogOpen() {
   activeTabName.value = '热门城市'
   selectedCities.value = props.multiple ? [...(props.modelValue ?? [])] : props.modelValue
-  gtagRenderer('choose_city_dialog_open')
+  gtagRenderer('choose_city_dialog_open', { gtShowScene: props.gtShowScene })
 }
 
 function handleCancelClicked() {
-  gtagRenderer('choose_city_cancel_button_clicked')
+  gtagRenderer('choose_city_cancel_button_clicked', { gtShowScene: props.gtShowScene })
   isDialogVisible.value = false
 }
 function handleConfirmClicked() {
   gtagRenderer('choose_city_confirm_button_clicked', {
+    gtShowScene: props.gtShowScene,
     value: Array.isArray(selectedCities.value)
       ? selectedCities.value.join(',')
       : selectedCities.value
@@ -179,15 +230,15 @@ function handleConfirmClicked() {
 }
 function handleDialogClosed() {
   selectedCities.value = props.multiple ? [] : null
-  gtagRenderer('choose_city_dialog_closed')
+  gtagRenderer('choose_city_dialog_closed', { gtShowScene: props.gtShowScene })
 }
 
 function handleClearSelectedCitiesInModelValue() {
   emits('update:modelValue', (selectedCities.value = props.multiple ? [] : null))
-  gtagRenderer('clear_selected_cities_in_mv_clicked')
+  gtagRenderer('clear_selected_cities_in_mv_clicked', { gtShowScene: props.gtShowScene })
 }
 function handleClearSelectedCitiesInDialog() {
   selectedCities.value = props.multiple ? [] : null
-  gtagRenderer('clear_selected_cities_in_dialog_clicked')
+  gtagRenderer('clear_selected_cities_in_dialog_clicked', { gtShowScene: props.gtShowScene })
 }
 </script>