feat(property-marketing): 新增账号选择组件并优化图表展示逻辑

perf: 重构投放指南组件结构，移除冗余代码
perf: 优化仪表盘图表配置，使用动态渲染方式
perf: 统一组件样式引用方式，移除重复样式定义

src/views/property-marketing/put-account/account-dashboard/index.vue

@@ -11,11 +11,7 @@
           <div class="filter-row-item flex items-center">
             <span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
             <a-space size="medium" class="w-240px">
-              <a-input v-model="query.names" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-                <template #prefix>
-                  <icon-search />
-                </template>
-              </a-input>
+              <AccountSelect v-model="query.ids"></AccountSelect>
             </a-space>
           </div>
           <div class="filter-row-item flex items-center">
@@ -37,7 +33,7 @@
           <div class="filter-row-item flex items-center">
             <span class="label">运营人员</span>
             <a-space class="w-160px">
-              <OperatorSelect v-model="query.operator_id" :options="operators"  />
+              <OperatorSelect v-model="query.operator_id" :options="operators" />
             </a-space>
           </div>
         </div>
@@ -65,66 +61,12 @@
     </div>
     <div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
       <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
+        <a-col v-for="(chart, index) in chartConfigs" :key="index" :span="12">
           <EchartsItem
-            :xAxisData="xhlEcharts?.total_use_amount?.date"
-            :seriesData="xhlEcharts?.total_use_amount?.series_data"
-            :title="{ name: '消耗量', popover: '消耗量' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.avg_conversion_cost?.date"
-            :seriesData="xhlEcharts?.avg_conversion_cost?.series_data"
-            :title="{ name: '展示量', popover: '展示量' }"
-          ></EchartsItem>
-        </a-col>
-      </a-row>
-      <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.click_number?.date"
-            :seriesData="xhlEcharts?.click_number?.series_data"
-            :title="{ name: '点击量', popover: '点击量' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.click_rate?.date"
-            :seriesData="xhlEcharts?.click_rate?.series_data"
-            :title="{ name: '点击率', popover: '点击率' }"
-          ></EchartsItem>
-        </a-col>
-      </a-row>
-      <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.avg_click_cost?.date"
-            :seriesData="xhlEcharts?.avg_click_cost?.series_data"
-            :title="{ name: '平均点击成本', popover: '平均点击成本' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.thousand_show_cost?.date"
-            :seriesData="xhlEcharts?.thousand_show_cost?.series_data"
-            :title="{ name: '千次展示成本', popover: '千次展示成本' }"
-          ></EchartsItem>
-        </a-col>
-      </a-row>
-      <a-row class="grid-demo" :gutter="24">
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.conversion_number?.date"
-            :seriesData="xhlEcharts?.conversion_number?.series_data"
-            :title="{ name: '转化数', popover: '转化数' }"
-          ></EchartsItem>
-        </a-col>
-        <a-col :span="12">
-          <EchartsItem
-            :xAxisData="xhlEcharts?.conversion_rate?.date"
-            :seriesData="xhlEcharts?.conversion_rate?.series_data"
-            :title="{ name: '转化率', popover: '转化率' }"
+            :key="chart.dataKey"
+            :xAxisData="xhlEcharts?.[chart.dataKey]?.date"
+            :seriesData="xhlEcharts?.[chart.dataKey]?.series_data"
+            :title="{ name: chart.title.name, popover: chart.title.popover }"
           ></EchartsItem>
         </a-col>
       </a-row>
@@ -141,6 +83,7 @@ import {
   fetchAccountOperators,
 } from '@/api/all/propertyMarketing';
 import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
+import AccountSelect from '@/views/components/common/AccountSelect.vue';
 
 const accountType = ref(1);
 
@@ -182,6 +125,38 @@ const handleSearch = async () => {
     getAccountProjectsTrend();
   }
 };
+// 定义图表配置
+const chartConfigs = [
+  {
+    dataKey: 'total_use_amount',
+    title: { name: '消耗量', popover: '广告投放期间已使用的预算总额，代表该账户的实际广告花费。' },
+  },
+  {
+    dataKey: 'avg_conversion_cost',
+    title: { name: '展示量', popover: '广告被用户看到的总次数，是衡量广告曝光覆盖的核心指标。' },
+  },
+  { dataKey: 'click_number', title: { name: '点击量', popover: '用户点击广告的次数，表示广告对用户产生了实际吸引。' } },
+  {
+    dataKey: 'click_rate',
+    title: { name: '点击率', popover: '点击率（CTR）= 点击量 ÷ 展示量，衡量广告吸引力与内容质量。' },
+  },
+  {
+    dataKey: 'avg_click_cost',
+    title: { name: '平均点击成本', popover: '每次点击广告的平均花费（CPC），= 消耗量 ÷ 点击量。' },
+  },
+  {
+    dataKey: 'thousand_show_cost',
+    title: { name: '千次展示成本', popover: '每千次展示带来的平均成本（CPM），= 消耗量 ÷ 展示量 × 1000。' },
+  },
+  {
+    dataKey: 'conversion_number',
+    title: { name: '转化数', popover: '用户完成设定行为（如注册、下单）的总次数，衡量广告实际效果。' },
+  },
+  {
+    dataKey: 'conversion_rate',
+    title: { name: '转化率', popover: '转化率（CVR）= 转化数 ÷ 点击量，代表广告引导行为转化的能力。' },
+  },
+];
 const handleReset = async () => {};
 
 const operators = ref([]);