st-comp 0.0.270 → 0.0.272

package/packages/VarietySearch/components/CommonIndicator/index.vue

@@ -1,308 +1,91 @@
 <!-- 常用指标组件 -->
 <script setup name="CommonIndicator">
 import { ref, watch, computed, inject } from "vue";
-
-const perVolumnRadioOptions = [
-  { label: "近2周", value: "1" },
-  { label: "近1个月", value: "2" },
-  { label: "近3个月", value: "3" },
-  { label: "近6个月", value: "4" },
-  { label: "近1年", value: "5" },
-];
-const auditOpinionTypeRadioOptions = [
-  { label: "无保留意见", value: 1 },
-  { label: "保留意见", value: 2 },
-  { label: "否定意见", value: 3 },
-  { label: "无法表示意见", value: 4 },
-];
+import { PER_VOLUMN_RADIO_OPTIONS, AUDIT_OPINION_TYPE_RADIO_OPTIONS, hasIntersection, indicatorToGetDefaultValue, indicatorToValidateAndFormatTagText } from "./tools";
+import IndicatorTags from "./IndicatorTags.vue";
 
 const clearRow = inject("clearRow");
 const data = defineModel("data", { default: [] });
 const props = defineProps({
-  config: { type: Object, default: () => {} },
-  varietyMarket: { type: null || Number, default: () => null }, // 已选品种市场
-  commonOption: { type: Array, default: () => [] }, // 已选常用选项
+  config: { type: Object, default: () => {} }, // 常用指标配置
+  varietyMarket: { type: null || Number, default: () => null },
+  commonOption: { type: Array, default: () => [] },
 });
+
+// 指标窗口开关
 const visible = ref(false);
+
+// 当前已选指标中，第一个开启排名模式的 key（用于互斥：同一时间只能有一个指标使用排名）
 const rankKey = computed(() => {
-  return props.data.find((i) => i.radioType === "1")?.key;
+  return data.value.find((i) => i.radioType === "1")?.key;
 });
 
-// 常用指标项数据源 [受到: 品种市场, 常用选项影响]
-const commonIndicatorOptions = computed(() => {
-  let result = [];
-  // 如果品种市场和常用选项一个都没有选, 那么就展示全部的常用指标
-  if (props.varietyMarket === null && !props.commonOption.length) {
-    result = props.config.options;
-  } else {
-    result = props.config.options;
-    // 1. 如果选择了品种市场, 进行一波筛选
-    if (props.varietyMarket) {
-      result = result.filter(({ parent }) => parent.varietyMarketIds.includes(props.varietyMarket));
-    }
-    // 2. 如果选择了常用选项, 进行一波筛选
-    if (props.commonOption.length) {
-      result = result.filter(({ parent }) => {
-        const { commonOptionIds } = parent;
-        // 只要选择了的常用选项里面, 有commonOptionIds中的值, 那么就展示, 即判断两个数组是否有重复元素
-        return [...new Set([...commonOptionIds, ...props.commonOption])].length !== [...commonOptionIds, ...props.commonOption].length;
-      });
-    }
+// 指标项数据源
+const indicatorOptions = computed(() => {
+  let result = props.config.options;
+  // 如果外部有选品种市场条件, 进行过滤
+  if (props.varietyMarket !== null && props.varietyMarket !== undefined) {
+    result = result.filter(({ parent }) => parent.varietyMarketIds.includes(props.varietyMarket));
+  }
+  // 如果外部有选常用选项条件, 进行过滤
+  if (props.commonOption.length > 0) {
+    result = result.filter(({ parent }) => hasIntersection(parent.commonOptionIds, props.commonOption));
   }
   return result;
 });
-// 当前操作的指标项类型 [用于弹窗判断是哪个指标]
-const nowIndicator = ref({});
-// 当前指标项内容中的值 [具体填写的数据]
-const indicatorValue = ref({});
 
-// 点击指标选项 (**新增custom配置项时, 需要改动**)
+// 当前选中的指标
+const currentIndicatorConfig = ref({});
+const currentIndicatorForm = ref({});
+
+// 指标: 点击
 const clickIndicator = (item) => {
-  nowIndicator.value = item;
-  // 初始化指标值
-  const baseParams = {
-    key: item.key,
-    type: item.type,
-    label: item.label,
-  };
-  switch (item.key) {
-    // 是否ST
-    case "st": {
-      indicatorValue.value = { ...baseParams, st: null };
-      break;
-    }
-    // 净利润
-    case "tFeaturelncomes": {
-      indicatorValue.value = {
-        ...baseParams,
-        rule: 1, // 1超 2跌
-        withFewYears: null,
-        yearsCount: null,
-        netProfit: null,
-      };
-      break;
-    }
-    // 股价分位
-    case "priceLevels": {
-      indicatorValue.value = { ...baseParams, priceLevels: null };
-      break;
-    }
-    // 市盈率分位
-    case "peTtmLevels": {
-      indicatorValue.value = { ...baseParams, peTtmLevels: null };
-      break;
-    }
-    // 市盈率估值走势分位
-    case "peTrendTtmLevels": {
-      indicatorValue.value = { ...baseParams, peTrendTtmLevels: null };
-      break;
-    }
-    // 认沽认购
-    case "optionsCpType": {
-      indicatorValue.value = {
-        ...baseParams,
-        optionsCpType: null, // 1看涨 2看跌
-      };
-      break;
-    }
-    // 成交量
-    case "perVolumn": {
-      indicatorValue.value = {
-        ...baseParams,
-        radio: null,
-        levels: [],
-      };
-      break;
-    }
-    // 主力净流入资金
-    case "mainFlow": {
-      indicatorValue.value = {
-        ...baseParams,
-        radioType: "0",
-        rankRange: [null, null],
-      };
-      break;
-    }
-    // 年报审计意见
-    case "auditOpinionType": {
-      indicatorValue.value = { ...baseParams, enumType: null };
-      break;
-    }
-    // 其它的通用处理
-    default: {
-      indicatorValue.value = {
-        ...baseParams,
-        range: [null, null],
-        unit: item.defaultUnit.length ? [...item.defaultUnit] : [null, null],
-        radioType: rankKey.value && rankKey.value !== item.key ? "0" : item.defaultRadioType, // 0数值 1排名
-        rankRange: item.defaultRankRange || [null, null], // 默认排名
-      };
-    }
-  }
+  currentIndicatorConfig.value = item;
+  // 赋予指标对应的默认值
+  currentIndicatorForm.value = indicatorToGetDefaultValue(item, rankKey.value);
   visible.value = true;
 };
-// 确定指标选项 (**新增custom配置项时, 需要改动**)
+
+// 指标: 窗口确认
 const submitDialog = () => {
-  // 校验 + 格式化文案
-  switch (indicatorValue.value.key) {
-    // 是否ST
-    case "st": {
-      const { label, st } = indicatorValue.value;
-      // 校验
-      if (st === null) return ElMessage.warning("格式错误: 请至少选择一个值");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: ${st ? "是" : "否"}`;
-      break;
-    }
-    // 净利润
-    case "tFeaturelncomes": {
-      const { label, rule, withFewYears, yearsCount, netProfit } = indicatorValue.value;
-      // 校验
-      if (["", null].includes(withFewYears) || ["", null].includes(yearsCount) || ["", null].includes(netProfit)) {
-        return ElMessage.warning("格式错误: 请填写完整");
-      }
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: ${withFewYears}年内${yearsCount}年以上盈利${rule === 1 ? "超" : "跌"}过${netProfit}亿`;
-      break;
-    }
-    // 股价分位
-    case "priceLevels": {
-      const { label, priceLevels } = indicatorValue.value;
-      // 校验
-      if (!priceLevels || priceLevels.length === 0) return ElMessage.warning("格式错误: 请至少选择一个值");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: 已选${priceLevels}分位`;
-      break;
-    }
-    // 市盈率分位
-    case "peTtmLevels": {
-      const { label, peTtmLevels } = indicatorValue.value;
-      // 校验
-      if (!peTtmLevels || peTtmLevels.length === 0) return ElMessage.warning("格式错误: 请至少选择一个值");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: 已选${peTtmLevels}分位`;
-      break;
-    }
-    // 市盈率估值走势分位
-    case "peTrendTtmLevels": {
-      const { label, peTrendTtmLevels } = indicatorValue.value;
-      // 校验
-      if (!peTrendTtmLevels || peTrendTtmLevels.length === 0) return ElMessage.warning("格式错误: 请至少选择一个值");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: 已选${peTrendTtmLevels}分位`;
-      break;
-    }
-    // 认沽认购
-    case "optionsCpType": {
-      const { label, optionsCpType } = indicatorValue.value;
-      // 校验
-      if (optionsCpType === null) return ElMessage.warning("格式错误: 请至少选择一个值");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: ${optionsCpType === 1 ? "看涨" : "看跌"}`;
-      break;
-    }
-    // 成交量
-    case "perVolumn": {
-      const { label, radio, levels } = indicatorValue.value;
-      // 校验
-      if (!radio) return ElMessage.warning("格式错误: 请选择时间");
-      if (!levels?.length) return ElMessage.warning("格式错误: 请选择分位");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: ${perVolumnRadioOptions.find((item) => item.value === radio)?.label}${levels.map((i) => `${i}分位`).join("、")}`;
-      break;
-    }
-    // 主力净流入资金
-    case "mainFlow": {
-      const { label, radioType, radio, rankRange } = indicatorValue.value;
-      const checkNumber = (val) => {
-        if (val === "" || val === null || val === undefined) return false;
-        const num = Number(val);
-        if (isNaN(num)) return false;
-        return true;
-      };
-      // 校验
-      if (!radio) return ElMessage.warning("格式错误: 请选择时间");
-      if (!checkNumber(rankRange[0]) && !checkNumber(rankRange[1])) {
-        return ElMessage.warning(`格式错误: 请填写${radioType === "0" ? "涨幅范围" : "排名范围"}`);
-      }
-      // 格式化文案
-      if (!["", null].includes(rankRange[0]) && !["", null].includes(rankRange[1])) {
-        indicatorValue.value.tagText = `${label}: ${radio}日${radioType === "0" ? "涨幅范围" : "排名范围"}: ${rankRange[0]}${radioType === "0" ? "%" : ""} ~ ${rankRange[1]}${
-          radioType === "0" ? "%" : ""
-        }`;
-      } else if (!["", null].includes(rankRange[0])) {
-        indicatorValue.value.tagText = `${label}: ${radio}日${radioType === "0" ? "涨幅范围" : "排名范围"}: ≥${rankRange[0]}${radioType === "0" ? "%" : ""}`;
-      } else {
-        indicatorValue.value.tagText = `${label}: ${radio}日${radioType === "0" ? "涨幅范围" : "排名范围"}: ≤${rankRange[1]}${radioType === "0" ? "%" : ""}`;
-      }
-      break;
-    }
-    // 年报审计意见
-    case "auditOpinionType": {
-      const { label, enumType } = indicatorValue.value;
-      // 校验
-      if (enumType === null) return ElMessage.warning("格式错误: 请至少选择一个值");
-      // 格式化文案
-      indicatorValue.value.tagText = `${label}: ${auditOpinionTypeRadioOptions.find((item) => item.value === enumType)?.label}`;
-      break;
-    }
-    // 其它的通用处理
-    default: {
-      const { label, unit, radioType } = indicatorValue.value;
-      const range = radioType === "1" ? indicatorValue.value.rankRange : indicatorValue.value.range;
-      // 校验
-      if (["", null].includes(range[0]) && ["", null].includes(range[1])) {
-        return ElMessage.warning("格式错误: 请至少填写一个值");
-      }
-      // 排名校验
-      if (radioType === "1") {
-        const rangeLeft = Number(range[0]);
-        const rangeRight = Number(range[1]);
-        if (isNaN(rangeLeft) || isNaN(rangeRight)) return ElMessage.warning("格式错误: 请填写数字");
-        if (rangeLeft < 0 || rangeRight < 0) return ElMessage.warning("格式错误: 请填写大于0的数字");
-        if (rangeLeft > rangeRight) return ElMessage.warning("格式错误: 请填写正确的排名范围");
-      }
-      const unitLeft = radioType === "1" ? "" : unit[0] ?? "";
-      const unitRight = radioType === "1" ? "" : unit[1] ?? "";
-      // 格式化文案
-      if (!["", null].includes(range[0]) && !["", null].includes(range[1])) {
-        indicatorValue.value.tagText = `${label}${radioType === "1" ? "排名" : ""}: ${range[0]}${unitLeft} ~ ${range[1]}${unitRight}`;
-      } else if (!["", null].includes(range[0])) {
-        indicatorValue.value.tagText = `${label}${radioType === "1" ? "排名" : ""}: ≥${range[0]}${unitLeft}`;
-      } else {
-        indicatorValue.value.tagText = `${label}${radioType === "1" ? "排名" : ""}: ≤${range[1]}${unitRight}`;
-      }
-    }
-  }
-  // 判断data中是否已存在同样key的数据, 如果存在则替换, 如果不存在就push
-  const keyIndex = data.value.findIndex(({ key }) => key === indicatorValue.value.key);
+  // 校验指标内是否填写完整, 并且生成tagText
+  const { valid, message, tagText } = indicatorToValidateAndFormatTagText(currentIndicatorForm.value);
+  if (!valid) return ElMessage.warning(message);
+  currentIndicatorForm.value.tagText = tagText;
+
+  // 按 key 去重：不存在则新增，存在则替换
+  const keyIndex = data.value.findIndex(({ key }) => key === currentIndicatorForm.value.key);
   if (keyIndex === -1) {
-    data.value.push(indicatorValue.value);
+    data.value.push(currentIndicatorForm.value);
   } else {
-    data.value.splice(keyIndex, 1, indicatorValue.value);
+    data.value.splice(keyIndex, 1, currentIndicatorForm.value);
   }
   visible.value = false;
 };
-// 编辑指标Tag
+
+// 指标Tag: 编辑
 const editTag = (item) => {
-  nowIndicator.value = commonIndicatorOptions.value.find(({ key }) => key === item.key);
-  indicatorValue.value = JSON.parse(JSON.stringify(item));
+  currentIndicatorConfig.value = indicatorOptions.value.find(({ key }) => key === item.key);
+  currentIndicatorForm.value = JSON.parse(JSON.stringify(item));
   visible.value = true;
 };
-// 删除指标Tag
+
+// 指标Tag: 删除
 const deleteTag = (index) => {
   data.value.splice(index, 1);
 };
-// 快捷项[通用: type-undefined]
+
+// 快捷项: 通用
 const clickConvenientOption = (item) => {
-  indicatorValue.value.range = [...item.range];
-  indicatorValue.value.unit = [...item.unit];
+  currentIndicatorForm.value.range = [...item.range];
+  currentIndicatorForm.value.unit = [...item.unit];
 };
-// 快捷项[自定义: type-custom-净利润]
+
+// 快捷项: 净利润
 const clicktFeaturelncomesOption = (value) => {
   switch (value) {
     case "≤0":
-      Object.assign(indicatorValue.value, {
+      Object.assign(currentIndicatorForm.value, {
         rule: 2, // 1超 2跌
         withFewYears: 1,
         yearsCount: 1,
@@ -310,7 +93,7 @@ const clicktFeaturelncomesOption = (value) => {
       });
       break;
     case "≥0":
-      Object.assign(indicatorValue.value, {
+      Object.assign(currentIndicatorForm.value, {
         rule: 1,
         withFewYears: 1,
         yearsCount: 1,
@@ -318,7 +101,7 @@ const clicktFeaturelncomesOption = (value) => {
       });
       break;
     case "五年内有四年以上盈利超过5千万":
-      Object.assign(indicatorValue.value, {
+      Object.assign(currentIndicatorForm.value, {
         rule: 1,
         withFewYears: 5,
         yearsCount: 4,
@@ -326,7 +109,7 @@ const clicktFeaturelncomesOption = (value) => {
       });
       break;
     case "≥10亿":
-      Object.assign(indicatorValue.value, {
+      Object.assign(currentIndicatorForm.value, {
         rule: 1,
         withFewYears: 1,
         yearsCount: 1,
@@ -334,7 +117,7 @@ const clicktFeaturelncomesOption = (value) => {
       });
       break;
     case "≥20亿":
-      Object.assign(indicatorValue.value, {
+      Object.assign(currentIndicatorForm.value, {
         rule: 1,
         withFewYears: 1,
         yearsCount: 1,
@@ -343,30 +126,51 @@ const clicktFeaturelncomesOption = (value) => {
       break;
   }
 };
+
+// 模式切换时清空已填数据
+const handleRadioTypeChange = () => {
+  const { key } = currentIndicatorConfig.value;
+  const form = currentIndicatorForm.value;
+
+  // 根据指标 key 清空对应的字段
+  if (key === "mainFlow") {
+    form.radio = null;
+    form.rankRange = [null, null];
+  } else if (key === "perVolumn") {
+    const newRadioType = form.radioType;
+    // 切换到数值模式：清空分位相关字段
+    if (newRadioType === "0") {
+      form.radio = null;
+      form.levels = [];
+    }
+    // 切换到分位模式：清空数值相关字段
+    if (newRadioType === "2") {
+      form.range = [null, null];
+    }
+  }
+  // 其他支持排名的指标（成交额、成交量(期权)、持仓量等）不需要清空额外字段
+  // 因为它们的非排名模式和排名模式共用 range/rankRange，切换时数据保留
+};
+
 // 监视: 常用指标数据源 => 已勾选且新的数据源中也有它,则要进行勾选保留
 watch(
-  () => commonIndicatorOptions.value,
+  () => indicatorOptions.value,
   () => {
     if (data.value.length) {
       data.value = data.value.filter(({ key }) => {
-        return commonIndicatorOptions.value.find((item) => item.key === key);
+        return indicatorOptions.value.find((item) => item.key === key);
       });
     }
-  }
+  },
 );
-
-const changeMainFlowRadioType = () => {
-  indicatorValue.value.radio = null;
-  indicatorValue.value.rankRange = [null, null];
-};
 </script>
 
 <template>
   <div
     class="common-indicator"
-    v-if="config.show && commonIndicatorOptions.length"
+    v-if="config.show && indicatorOptions.length"
   >
-    <!-- 指标选项 -->
+    <!-- 指标: 选项 -->
     <div class="indicator">
       <div class="title">
         <span>常用指标: </span>
@@ -374,7 +178,7 @@ const changeMainFlowRadioType = () => {
       </div>
       <div class="options">
         <span
-          v-for="item in commonIndicatorOptions"
+          v-for="item in indicatorOptions"
           :key="item.key"
           @click="clickIndicator(item)"
         >
@@ -382,158 +186,126 @@ const changeMainFlowRadioType = () => {
         </span>
       </div>
     </div>
-    <!-- TagList: 已选指标 -->
-    <div class="tags">
-      <el-tag
-        v-for="(item, index) in data"
-        closable
-        type="info"
-        @close="deleteTag(index)"
-      >
-        <span>{{ item.tagText }}</span>
-        <span
-          class="edit"
-          @click="editTag(item)"
-          >编辑</span
-        >
-      </el-tag>
-    </div>
-    <!-- TagInfo: 指标具体弹窗 -->
+
+    <!-- 指标: 弹窗 -->
     <el-dialog
       v-model="visible"
-      :title="nowIndicator.label"
+      :title="currentIndicatorConfig.label"
       width="600"
       align-center
       destroy-on-close
     >
-      <template
-        #header
-        v-if="nowIndicator.showRankType"
-      >
-        <span style="font-size: 18px">{{ nowIndicator.label }}</span>
+      <template #header>
+        <span style="font-size: 18px">{{ currentIndicatorConfig.label }}</span>
         <el-radio-group
-          v-model="indicatorValue.radioType"
+          v-if="currentIndicatorConfig.radioTypeOptions?.length"
+          v-model="currentIndicatorForm.radioType"
           style="vertical-align: 4px; margin-left: 12px"
+          @change="handleRadioTypeChange"
         >
           <el-radio-button
-            label="数值"
-            value="0"
-          />
-          <el-radio-button
-            :disabled="rankKey && rankKey !== nowIndicator.key"
-            label="排名"
-            value="1"
-          />
-        </el-radio-group>
-      </template>
-      <template
-        #header
-        v-else-if="nowIndicator.key === 'mainFlow'"
-      >
-        <span style="font-size: 18px">{{ nowIndicator.label }}</span>
-        <el-radio-group
-          v-model="indicatorValue.radioType"
-          style="vertical-align: 4px; margin-left: 12px"
-          @change="changeMainFlowRadioType"
-        >
-          <el-radio-button
-            label="涨幅范围"
-            value="0"
-          />
-          <el-radio-button
-            :disabled="rankKey && rankKey !== nowIndicator.key"
-            label="排名范围"
-            value="1"
-          />
+            v-for="option in currentIndicatorConfig.radioTypeOptions"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.value === '1' && rankKey && rankKey !== currentIndicatorConfig.key"
+          >
+            {{ option.label }}
+          </el-radio-button>
         </el-radio-group>
       </template>
 
-      <template v-if="nowIndicator.type === undefined && indicatorValue.radioType === '1'">
-        <!-- 输入框区域 -->
-        <div class="out-box">
+      <!-- 通用的指标表单 -->
+      <template v-if="!currentIndicatorConfig.type">
+        <!-- 排名模式 -->
+        <div
+          v-if="currentIndicatorForm.radioType === '1'"
+          class="out-box"
+        >
           <span>自定义: </span>
           <el-input
-            v-model="indicatorValue.rankRange[0]"
+            v-model="currentIndicatorForm.rankRange[0]"
             style="flex: 1"
           />
           ~
           <el-input
-            v-model="indicatorValue.rankRange[1]"
+            v-model="currentIndicatorForm.rankRange[1]"
             style="flex: 1"
           />
         </div>
-      </template>
-      <!-- type: undefined 为默认便捷配置项 + 输入框形式 -->
-      <template v-else-if="nowIndicator.type === undefined">
-        <!-- 便捷配置项区域 -->
-        <div
-          class="convenient-option-box"
-          v-if="nowIndicator.convenientOptions?.length"
-        >
-          <el-button
-            v-for="item in nowIndicator.convenientOptions"
-            :key="item.text"
-            @click="clickConvenientOption(item)"
-            >{{ item.text }}</el-button
-          >
-        </div>
-        <!-- 输入框区域 -->
-        <div class="out-box">
-          <span>自定义: </span>
-          <el-input
-            v-model="indicatorValue.range[0]"
-            style="flex: 1"
+
+        <!-- 数值模式 -->
+        <div v-else>
+          <!-- 便捷配置项区域 -->
+          <div
+            class="convenient-option-box"
+            v-if="currentIndicatorConfig.convenientOptions?.length"
           >
-            <!-- 单位 -->
-            <template
-              #append
-              v-if="nowIndicator.unitOptions.length"
+            <el-button
+              v-for="item in currentIndicatorConfig.convenientOptions"
+              :key="item.text"
+              @click="clickConvenientOption(item)"
+              >{{ item.text }}</el-button
             >
-              <span v-if="nowIndicator.unitOptions.length === 1">{{ indicatorValue.unit[0] }}</span>
-              <el-select
-                v-else
-                v-model="indicatorValue.unit[0]"
-                style="width: 72px"
+          </div>
+          <!-- 输入框区域 -->
+          <div class="out-box">
+            <span>自定义: </span>
+            <el-input
+              v-model="currentIndicatorForm.range[0]"
+              style="flex: 1"
+            >
+              <!-- 单位 -->
+              <template
+                #append
+                v-if="currentIndicatorConfig.unitOptions.length"
               >
-                <el-option
-                  v-for="unit in nowIndicator.unitOptions"
-                  :label="unit"
-                  :value="unit"
-                />
-              </el-select>
-            </template>
-          </el-input>
-          ~
-          <el-input
-            v-model="indicatorValue.range[1]"
-            style="flex: 1"
-          >
-            <!-- 单位 -->
-            <template
-              #append
-              v-if="nowIndicator.unitOptions.length"
+                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[0] }}</span>
+                <el-select
+                  v-else
+                  v-model="currentIndicatorForm.unit[0]"
+                  style="width: 72px"
+                >
+                  <el-option
+                    v-for="unit in currentIndicatorConfig.unitOptions"
+                    :label="unit"
+                    :value="unit"
+                  />
+                </el-select>
+              </template>
+            </el-input>
+            ~
+            <el-input
+              v-model="currentIndicatorForm.range[1]"
+              style="flex: 1"
             >
-              <span v-if="nowIndicator.unitOptions.length === 1">{{ indicatorValue.unit[1] }}</span>
-              <el-select
-                v-else
-                v-model="indicatorValue.unit[1]"
-                style="width: 72px"
+              <!-- 单位 -->
+              <template
+                #append
+                v-if="currentIndicatorConfig.unitOptions.length"
               >
-                <el-option
-                  v-for="unit in nowIndicator.unitOptions"
-                  :label="unit"
-                  :value="unit"
-                />
-              </el-select>
-            </template>
-          </el-input>
+                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[1] }}</span>
+                <el-select
+                  v-else
+                  v-model="currentIndicatorForm.unit[1]"
+                  style="width: 72px"
+                >
+                  <el-option
+                    v-for="unit in currentIndicatorConfig.unitOptions"
+                    :label="unit"
+                    :value="unit"
+                  />
+                </el-select>
+              </template>
+            </el-input>
+          </div>
         </div>
       </template>
+
       <!-- type: custom 根据不同key进行自定义 -->
       <template v-else>
         <!-- 是否ST -->
-        <div v-if="nowIndicator.key === 'st'">
-          <el-radio-group v-model="indicatorValue.st">
+        <div v-if="currentIndicatorConfig.key === 'st'">
+          <el-radio-group v-model="currentIndicatorForm.st">
             <el-radio
               label="是"
               :value="1"
@@ -544,8 +316,9 @@ const changeMainFlowRadioType = () => {
             />
           </el-radio-group>
         </div>
+
         <!-- 净利润 -->
-        <div v-if="nowIndicator.key === 'tFeaturelncomes'">
+        <div v-if="currentIndicatorConfig.key === 'tFeaturelncomes'">
           <!-- 便捷配置项区域 -->
           <div class="tFeaturelncomes-option-box">
             <el-button @click="clicktFeaturelncomesOption('≤0')">≤0</el-button>
@@ -559,31 +332,32 @@ const changeMainFlowRadioType = () => {
             <span>自定义: </span>
             <div>
               <el-input-number
-                v-model="indicatorValue.withFewYears"
+                v-model="currentIndicatorForm.withFewYears"
                 controls-position="right"
               />
               年内
               <el-input-number
-                v-model="indicatorValue.yearsCount"
+                v-model="currentIndicatorForm.yearsCount"
                 controls-position="right"
               />
-              年以上盈利{{ indicatorValue.rule === 1 ? "超" : "跌" }}过
+              年以上盈利{{ currentIndicatorForm.rule === 1 ? "超" : "跌" }}过
               <el-input-number
-                v-model="indicatorValue.netProfit"
+                v-model="currentIndicatorForm.netProfit"
                 controls-position="right"
               />
               亿
             </div>
           </div>
         </div>
+
         <!-- 股价分位 -->
-        <div v-if="nowIndicator.key === 'priceLevels'">
+        <div v-if="currentIndicatorConfig.key === 'priceLevels'">
           <el-select
-            v-model="indicatorValue.priceLevels"
+            v-model="currentIndicatorForm.priceLevels"
             multiple
             clearable
             placeholder="请选择"
-            style="width: 420px"
+            style="width: 100%"
           >
             <el-option
               v-for="item in [1, 2, 3, 4, 5]"
@@ -593,14 +367,15 @@ const changeMainFlowRadioType = () => {
             />
           </el-select>
         </div>
+
         <!-- 市盈率分位 -->
-        <div v-if="nowIndicator.key === 'peTtmLevels'">
+        <div v-if="currentIndicatorConfig.key === 'peTtmLevels'">
           <el-select
-            v-model="indicatorValue.peTtmLevels"
+            v-model="currentIndicatorForm.peTtmLevels"
             multiple
             clearable
             placeholder="请选择"
-            style="width: 420px"
+            style="width: 100%"
           >
             <el-option
               v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
@@ -610,14 +385,15 @@ const changeMainFlowRadioType = () => {
             />
           </el-select>
         </div>
+
         <!-- 市盈率估值走势分位 -->
-        <div v-if="nowIndicator.key === 'peTrendTtmLevels'">
+        <div v-if="currentIndicatorConfig.key === 'peTrendTtmLevels'">
           <el-select
-            v-model="indicatorValue.peTrendTtmLevels"
+            v-model="currentIndicatorForm.peTrendTtmLevels"
             multiple
             clearable
             placeholder="请选择"
-            style="width: 420px"
+            style="width: 100%"
           >
             <el-option
               v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
@@ -627,9 +403,10 @@ const changeMainFlowRadioType = () => {
             />
           </el-select>
         </div>
+
         <!-- 认沽认购 -->
-        <div v-if="nowIndicator.key === 'optionsCpType'">
-          <el-radio-group v-model="indicatorValue.optionsCpType">
+        <div v-if="currentIndicatorConfig.key === 'optionsCpType'">
+          <el-radio-group v-model="currentIndicatorForm.optionsCpType">
             <el-radio
               label="看涨"
               :value="1"
@@ -640,57 +417,124 @@ const changeMainFlowRadioType = () => {
             />
           </el-radio-group>
         </div>
+
         <!-- 成交量 -->
-        <div v-if="nowIndicator.key === 'perVolumn'">
-          <el-radio-group v-model="indicatorValue.radio">
-            <el-radio
-              v-for="item in perVolumnRadioOptions"
-              :key="item.value"
-              :value="item.value"
-              >{{ item.label }}</el-radio
+        <div v-if="currentIndicatorConfig.key === 'perVolumn'">
+          <!-- 数值模式 -->
+          <div
+            v-if="currentIndicatorForm.radioType === '0'"
+            class="out-box"
+          >
+            <span>自定义: </span>
+            <el-input
+              v-model="currentIndicatorForm.range[0]"
+              style="flex: 1"
             >
-          </el-radio-group>
-          <el-select
-            v-model="indicatorValue.levels"
-            multiple
-            clearable
-            placeholder="请选择"
-            style="width: 420px"
+              <!-- 单位 -->
+              <template
+                #append
+                v-if="currentIndicatorConfig.unitOptions.length"
+              >
+                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[0] }}</span>
+                <el-select
+                  v-else
+                  v-model="currentIndicatorForm.unit[0]"
+                  style="width: 72px"
+                >
+                  <el-option
+                    v-for="unit in currentIndicatorConfig.unitOptions"
+                    :label="unit"
+                    :value="unit"
+                  />
+                </el-select>
+              </template>
+            </el-input>
+            ~
+            <el-input
+              v-model="currentIndicatorForm.range[1]"
+              style="flex: 1"
+            >
+              <!-- 单位 -->
+              <template
+                #append
+                v-if="currentIndicatorConfig.unitOptions.length"
+              >
+                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[1] }}</span>
+                <el-select
+                  v-else
+                  v-model="currentIndicatorForm.unit[1]"
+                  style="width: 72px"
+                >
+                  <el-option
+                    v-for="unit in currentIndicatorConfig.unitOptions"
+                    :label="unit"
+                    :value="unit"
+                  />
+                </el-select>
+              </template>
+            </el-input>
+          </div>
+
+          <!-- 分位模式 -->
+          <div
+            v-if="currentIndicatorForm.radioType === '2'"
+            class="perVolumn-group"
           >
-            <el-option
-              v-for="item in [1, 2, 3, 4, 5]"
-              :key="item"
-              :label="`${item}分位`"
-              :value="item"
-            />
-          </el-select>
+            <el-radio-group v-model="currentIndicatorForm.radio">
+              <el-radio
+                v-for="item in PER_VOLUMN_RADIO_OPTIONS"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </el-radio>
+            </el-radio-group>
+            <el-select
+              v-model="currentIndicatorForm.levels"
+              multiple
+              clearable
+              placeholder="请选择分位"
+            >
+              <el-option
+                v-for="item in [1, 2, 3, 4, 5]"
+                :key="item"
+                :label="`${item}分位`"
+                :value="item"
+              />
+            </el-select>
+          </div>
         </div>
+
         <!-- 主力净流入资金 -->
-        <div v-if="nowIndicator.key === 'mainFlow'">
-          <el-radio-group v-model="indicatorValue.radio">
+        <div v-if="currentIndicatorConfig.key === 'mainFlow'">
+          <el-radio-group v-model="currentIndicatorForm.radio">
             <el-radio value="3">3日</el-radio>
             <el-radio value="5">5日</el-radio>
             <el-radio value="10">10日</el-radio>
             <el-radio value="20">20日</el-radio>
           </el-radio-group>
-          <div style="display: flex; align-items: center">
-            <span>{{ indicatorValue.radioType === "0" ? "涨幅范围" : "排名范围" }}:&nbsp;</span>
+          <div
+            class="out-box"
+            style="margin-top: 12px"
+          >
+            <span>{{ currentIndicatorForm.radioType === "0" ? "涨幅范围" : "排名范围" }}:&nbsp;</span>
             <el-input
-              v-model="indicatorValue.rankRange[0]"
+              v-model="currentIndicatorForm.rankRange[0]"
               style="flex: 1"
             />
             ~
             <el-input
-              v-model="indicatorValue.rankRange[1]"
+              v-model="currentIndicatorForm.rankRange[1]"
               style="flex: 1"
             />
           </div>
         </div>
+
         <!-- 年报审计意见 -->
-        <div v-if="nowIndicator.key === 'auditOpinionType'">
-          <el-radio-group v-model="indicatorValue.enumType">
+        <div v-if="currentIndicatorConfig.key === 'auditOpinionType'">
+          <el-radio-group v-model="currentIndicatorForm.enumType">
             <el-radio
-              v-for="(item, index) in auditOpinionTypeRadioOptions"
+              v-for="(item, index) in AUDIT_OPINION_TYPE_RADIO_OPTIONS"
               :key="index"
               :label="item.label"
               :value="item.value"
@@ -698,6 +542,7 @@ const changeMainFlowRadioType = () => {
           </el-radio-group>
         </div>
       </template>
+
       <!-- 确定 -->
       <template #footer>
         <div class="dialog-footer">
@@ -709,6 +554,13 @@ const changeMainFlowRadioType = () => {
         </div>
       </template>
     </el-dialog>
+
+    <!-- 已选指标 -->
+    <IndicatorTags
+      :tags="data"
+      @edit="editTag"
+      @delete="deleteTag"
+    />
   </div>
 </template>
 
@@ -734,76 +586,112 @@ const changeMainFlowRadioType = () => {
     .options {
       display: flex;
       flex-wrap: wrap;
+      gap: 2px 6px;
       span {
         font-size: 12px;
-        height: 24;
         line-height: 24px;
+        padding: 0 6px;
+        border-radius: 2px;
         color: var(--el-text-color-regular);
         cursor: pointer;
-        margin-right: 16px;
+        transition: background 0.15s;
         &:hover {
           color: var(--el-color-primary);
+          background: var(--el-color-primary-light-9);
         }
       }
     }
   }
+
   :deep(.el-button.is-text) {
     span {
       line-height: 24px;
       color: var(--el-text-color-regular);
     }
   }
-  .tags {
-    .el-tag {
-      margin: 6px 10px 6px 0;
-      .edit {
-        cursor: pointer;
-        color: var(--el-color-primary);
-        margin-left: 6px;
-      }
-    }
-  }
+
+  // 便捷选项
   .convenient-option-box {
     display: grid;
-    grid-template-columns: 33.3% 33.3% 33.3%;
-    border-bottom: 1px solid var(--el-border-color);
-    margin-bottom: 10px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
     .el-button {
-      margin-left: 10px;
-      margin-right: 10px;
-      margin-bottom: 10px;
+      margin: 0;
     }
   }
+
+  // 输入框组
   .out-box {
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    gap: 10px;
     span {
-      margin-right: 10px;
+      flex-shrink: 0;
+      white-space: nowrap;
+    }
+    .el-input {
+      flex: 1;
+      min-width: 0;
     }
   }
-  // 净利润弹窗样式
+
+  // 净利润快捷选项
   .tFeaturelncomes-option-box {
     display: grid;
-    grid-template-columns: 20% 20% 60%;
-    border-bottom: 1px solid var(--el-border-color);
-    margin-bottom: 10px;
+    grid-template-columns: 1fr 1fr 2fr;
+    gap: 8px;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
     .el-button {
-      margin-left: 10px;
-      margin-right: 10px;
-      margin-bottom: 10px;
+      margin: 0;
     }
   }
+
+  // 净利润输入框组
   .tFeaturelncomes-out-box {
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    gap: 10px;
     span {
-      margin-right: 10px;
+      flex-shrink: 0;
     }
     .el-input-number {
       width: 100px;
     }
+    > div {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+  }
+
+  // 成交量 - 分位模式
+  .perVolumn-group {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+
+    .el-radio-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px 14px;
+    }
+
+    .el-select {
+      width: 100%;
+    }
+  }
+
+  // 弹窗内下拉框占满宽度
+  :deep(.el-dialog) {
+    .el-select {
+      width: 100%;
+    }
   }
 }
 </style>