visualization-design/src/views/components/PenDatas.vue

<template>
  <div class="props">
    <div
      class="real-times"
      v-if="props.pen.realTimes && props.pen.realTimes.length"
    >
      <div class="grid head">
        <div class="title">数据名</div>
        <div class="title">值</div>
        <div class="title">触发器</div>
        <div class="actions">
          <t-icon name="more" />
        </div>
      </div>
      <div class="grid" v-for="(item, i) in props.pen.realTimes">
        <t-tooltip :content="item.key" placement="top">
          <label class="label">{{ item.label }}</label>
        </t-tooltip>
        <div class="value">
          <t-input
            v-if="item.type === 'integer'"
            v-model.number="props.pen[item.key]"
            placeholder="整数"
            @change="changeValue(item.key)"
          />
          <t-input-number
            v-else-if="item.type === 'float'"
            v-model="props.pen[item.key]"
            placeholder="浮点数"
            theme="normal"
            @change="changeValue(item.key)"
          />
          <t-switch
            v-else-if="item.type === 'bool'"
            v-model="props.pen[item.key]"
            class="ml-8"
            size="small"
            @change="changeValue(item.key)"
          />
          <t-button
            v-else-if="item.type === 'array' || item.type === 'object'"
            variant="outline"
            style="padding: 0px 2px 0 4px; margin: 0 4px"
            @click="editObject(item)"
          >
            <t-icon name="ellipsis" />
          </t-button>
          <t-input
            v-else
            v-model="props.pen[item.key]"
            placeholder="字符串"
            @change="changeValue(item.key)"
          />

          <t-tooltip :content="getBindsDesc(item)" placement="top">
            <t-icon
              name="link"
              class="hover ml-4"
              :class="{ primary: item.enableMock || item.bind?.id }"
              @click="onBind(item)"
            />
          </t-tooltip>
        </div>
        <div>
          <t-tooltip :content="item.triggers?.length || '触发器'">
            <t-badge
              :count="item.triggers?.length"
              size="small"
              dot
              :offset="[0, 5]"
            >
              <t-icon
                name="relativity"
                class="hover"
                @click="onTrigger(item)"
              />
            </t-badge>
          </t-tooltip>
        </div>
        <div class="actions">
          <t-dropdown
            :options="moreOptions"
            @click="onMenuMore($event, item, i)"
            :minColumnWidth="80"
          >
            <t-icon name="more" class="more hover" />
          </t-dropdown>
        </div>
      </div>
      <div class="mt-8 pb-16">
        <t-dropdown
          :options="options"
          @click="addRealTime"
          :minColumnWidth="150"
        >
          <a class="ml-12"> <t-icon name="add-rectangle" /> 添加动态数据 </a>
        </t-dropdown>
      </div>
    </div>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png" />
      <div class="gray center">还没有动态数据</div>
      <div class="mt-8">
        <t-dropdown
          :options="options"
          @click="addRealTime"
          :minColumnWidth="150"
        >
          <t-button style="height: 30px"> 添加动态数据 </t-button>
        </t-dropdown>
      </div>
    </div>
  </div>

  <t-dialog
    v-if="addDataDialog.show"
    :visible="true"
    class="data-dialog"
    :header="addDataDialog.header"
    @close="addDataDialog.show = false"
    @confirm="onConfirmData"
  >
    <div class="form-item mt-16">
      <label>数据名</label>
      <t-input
        v-model="addDataDialog.data.label"
        placeholder="简短描述"
        :disabled="!!addDataDialog.data.keywords"
        @blur="onChangeLabel"
      />
    </div>
    <div class="form-item mt-16">
      <label>属性名</label>
      <t-input
        v-model="addDataDialog.data.key"
        placeholder="关键字"
        @blur="onKeyBlur"
        :disabled="!!addDataDialog.data.keywords"
      />
    </div>
    <div class="form-item mt-16">
      <label>类型</label>
      <t-select
        class="w-full"
        :options="typeOptions"
        v-model="addDataDialog.data.type"
        placeholder="字符串"
        :disabled="!!addDataDialog.data.keywords"
        @change="onKeyBlur"
      />
    </div>
  </t-dialog>

  <t-dialog
    v-if="dataBindDialog.show"
    :visible="true"
    class="data-link-dialog"
    header="动态数据设置"
    @close="dataBindDialog.show = false"
    @confirm="dataBindonConfirm"
    :top="70"
    :width="700"
  >
    <t-tabs :defaultValue="1">
      <t-tab-panel
        :value="1"
        label="绑定数据点"
        :destroy-on-hide="false"
        style="height: 420px"
      >
        <div class="form-item mt-12">
          <label>当前绑定：</label>
          <div class="label" v-if="dataBindDialog.data.bind?.id">
            <t-tooltip :content="dataBindDialog.data.bind?.id">
              <t-tag class="mr-8 mb-8" closable @close="onRemoveBind()">
                {{ dataBindDialog.data.bind?.label }}
              </t-tag>
            </t-tooltip>
          </div>
          <div class="label gray" v-else>无</div>
        </div>
        <div class="form-item mt-8">
          <t-input
            placeholder="搜索"
            v-model="dataBindDialog.input"
            @change="onSearchDataset"
            @enter="onSearchDataset"
          >
            <template #suffixIcon>
              <t-icon name="search" class="hover" @click="onSearchDataset" />
            </template>
          </t-input>
        </div>
        <t-table
          class="mt-12 data-list"
          row-key="id"
          :data="dataBindDialog.dataset"
          :columns="dataSetColumns"
          size="small"
          bordered
          :loading="dataBindDialog.loading"
          :pagination="query"
          @page-change="onChangePagination"
          :selected-row-keys="dataBindDialog.selectedIds"
          @select-change="onSelectBindsChange"
          :max-height="270"
        >
        </t-table>
      </t-tab-panel>
      <t-tab-panel
        :value="2"
        label="数据模拟"
        :destroy-on-hide="false"
        style="height: 420px"
      >
        <div class="form-item mt-20">
          <label>模拟值：</label>
          <t-input v-model="dataBindDialog.data.mock" />
        </div>
        <div class="form-item mt-12">
          <label>开启：</label>
          <t-switch
            class="mt-8"
            size="small"
            v-model="dataBindDialog.data.enableMock"
          />
        </div>
        <h6 class="desc mt-20">模拟值说明</h6>
        <ul class="desc mt-4">
          <li class="mt-4">
            <label class="inline" style="width: 80px">固定值：</label>
            直接填写，例如：10
          </li>
          <li class="mt-4">
            <label class="inline" style="width: 80px">随机值：</label>
            {值1,值2,...}。例如：{1,2,3,4,5}
          </li>
          <li class="mt-4">
            <label class="inline" style="width: 80px">范围数字：</label>
            最小值-最大值。例如：0-1.0 或 0-100
          </li>
          <li class="mt-4">
            <label class="inline" style="width: 80px">随机字符串：</label>
            [长度]。例如：[8]
          </li>
        </ul>
      </t-tab-panel>
    </t-tabs>
  </t-dialog>

  <t-dialog
    v-if="triggersDialog.show"
    :visible="true"
    class="data-events-dialog"
    header="数据触发器"
    @confirm="triggersDialog.show = false"
    @close="triggersDialog.show = false"
    :width="700"
  >
    <div class="body">
      <t-collapse
        v-model="triggersDialog.openedCollapses"
        :borderless="true"
        :expand-on-row-click="false"
      >
        <t-collapse-panel
          v-for="(trigger, i) in triggersDialog.data.triggers"
          :value="i"
        >
          <template #header>
            <t-input v-model="trigger.name" class="mr-12" />
          </template>
          <template #headerRightContent>
            <t-popconfirm
              content="确认删除该触发器吗？"
              @confirm="triggersDialog.data.triggers.splice(i, 1)"
            >
              <t-icon name="delete" class="hover" />
            </t-popconfirm>
          </template>
          <section>
            <div class="form-item banner">
              <label>触发条件</label>
              <div class="w-full flex middle between">
                <div></div>
                <t-radio-group v-model="trigger.conditionType">
                  <t-radio value="and"> 满足全部条件 </t-radio>
                  <t-radio value="or"> 满足任意条件 </t-radio>
                </t-radio-group>
              </div>
            </div>
            <div v-for="(c, index) in trigger.conditions" class="mb-12">
              <div class="flex middle between head">
                <div class="flex middle">
                  <t-icon name="arrow-right" class="mr-4" />
                  条件{{ index + 1 }}
                </div>
                <t-icon
                  name="close"
                  class="hover"
                  @click="trigger.conditions.splice(index, 1)"
                />
              </div>
              <div class="px-16 py-4">
                <div class="form-item mt-4">
                  <label>条件类型</label>
                  <t-radio-group v-model="c.type">
                    <t-radio value=""> 关系条件 </t-radio>
                    <t-radio value="fn"> 高级条件 </t-radio>
                  </t-radio-group>
                </div>
                <template v-if="!c.type">
                  <div class="form-item mt-8">
                    <label>比较条件</label>
                    <div class="flex middle">
                      <label class="shrink-0 mr-8">数据</label>
                      <t-select
                        v-model="c.operator"
                        placeholder="关系运算"
                        :options="operatorOptions"
                        class="shrink-0 mr-8"
                        style="width: 80px"
                      />
                      <t-select
                        v-model="c.valueType"
                        class="shrink-0 mr-8"
                        style="width: 110px"
                        placeholder="固定值"
                      >
                        <t-option key="" value="" label="固定值">
                          固定值
                        </t-option>
                        <t-option key="prop" value="prop" label="对象属性值">
                          对象属性值
                        </t-option>
                      </t-select>
                      <template v-if="!c.valueType">
                        <t-input
                          v-model="c.value"
                          class="shrink-0"
                          style="width: 320px"
                        />
                      </template>
                      <template v-else>
                        <t-tree-select
                          v-model="c.target"
                          :data="penTree"
                          filterable
                          placeholder="对象"
                          class="shrink-0 mr-8"
                          style="width: 160px"
                          @change="onChangeTriggerTarget(c)"
                        />
                        <t-select-input
                          v-model:inputValue="c.value"
                          :value="c.label"
                          v-model:popupVisible="c.popupVisible"
                          allow-input
                          clearable
                          @clear="c.label = undefined"
                          @focus="c.popupVisible = true"
                          @blur="c.popupVisible = undefined"
                          @input-change="onInput(c)"
                          class="shrink-0"
                          style="width: 152px"
                        >
                          <template #panel>
                            <ul style="padding: 8px 12px">
                              <li
                                v-for="item in c.targetProps"
                                :key="item.value"
                                @click="
                                  c.value = item.value;
                                  c.label = item.label;
                                "
                              >
                                {{ item.label }}
                              </li>
                            </ul>
                          </template>
                        </t-select-input>
                      </template>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div>function condition(pen) {</div>
                  <CodeEditor class="mt-4" v-model="c.fnJs" />
                  <div class="mt-4">}</div>
                </template>
              </div>
            </div>
            <div class="mt-8">
              <a @click="addTriggerCondition(trigger)"> + 添加条件 </a>
            </div>

            <div class="form-item banner mt-16">
              <label>执行动作</label>
            </div>
            <Actions class="mt-8" :data="trigger" />
          </section>
        </t-collapse-panel>
      </t-collapse>

      <div class="mt-8">
        <a @click="onAddTrigger"> + 添加触发器 </a>
      </div>
    </div>
  </t-dialog>

  <t-dialog
    v-if="ojbectDialog.show"
    :visible="true"
    header="数据编辑"
    @confirm="onOkEditOjbect"
    @close="ojbectDialog.show = false"
    :width="700"
  >
    <div class="py-8">
      <CodeEditor
        :json="true"
        v-model="ojbectDialog.data"
        style="height: 300px"
      />
    </div>
  </t-dialog>
</template>

<script lang="ts" setup>
import {
  getCurrentInstance,
  onBeforeMount,
  onUnmounted,
  reactive,
  ref,
  toRaw,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import axios from 'axios';
import { getter, setter } from '@meta2d/core/src/utils/object';
import { debounce } from '@/services/debouce';
import { getPenTree, typeOptions } from '@/services/common';
import { searchPinyin } from '@/services/pinyin';
import { updatePen } from './pen';

import CodeEditor from '@/views/components/common/CodeEditor.vue';
import Actions from './Actions.vue';

const route = useRoute();
const router = useRouter();

const {
  proxy: { $forceUpdate },
}: any = getCurrentInstance();

const props = defineProps<{
  pen: any;
}>();

const options = ref<any>([
  {
    value: '',
    content: '自定义',
    divider: true,
  },
  {
    value: 'x',
    content: 'X',
    type: 'float',
    keywords: true,
  },
  {
    value: 'y',
    content: 'Y',
    type: 'float',
    keywords: true,
  },
  {
    value: 'width',
    content: '宽',
    type: 'float',
    keywords: true,
  },
  {
    value: 'height',
    content: '高',
    type: 'float',
    keywords: true,
  },
  {
    value: 'visible',
    content: '显示',
    type: 'bool',
    keywords: true,
  },
  {
    value: 'text',
    content: '文字',
    // keywords: true,
  },
  {
    value: 'progress',
    content: '进度',
    type: 'float',
    keywords: true,
  },
  {
    value: 'showChild',
    content: '状态',
    type: 'integer',
    keywords: true,
  },
  {
    value: 'rotate',
    content: '旋转',
    type: 'integer',
    keywords: true,
  },
]);

const moreOptions = ref<any>([
  {
    value: 'edit',
    content: '编辑',
  },
  {
    value: 'delete',
    content: '移除',
  },
]);

const addDataDialog = reactive<any>({
  show: false,
  data: undefined,
});

const dataBindDialog = reactive<any>({
  show: false,
  data: undefined,
});

const ojbectDialog = reactive<any>({
  show: false,
  data: undefined,
});

const dataSetColumns = [
  {
    colKey: 'row-select',
    type: 'single',
    width: 50,
  },
  {
    colKey: 'label',
    title: '数据点名称',
    ellipsis: { theme: 'light', trigger: 'context-menu' },
  },
  {
    colKey: 'id',
    title: '数据点ID',
    ellipsis: { theme: 'light', trigger: 'context-menu' },
  },
  {
    colKey: 'type',
    title: '类型',
    width: 100,
  },
  {
    colKey: 'mock',
    title: '值范围',
    ellipsis: true,
  },
];

const operatorOptions = ref<any>([
  { label: '=', value: '=' },
  { label: '!=', value: '!=' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: '包含', value: '[)' },
  { label: '不包含', value: '![)' },
]);

const query = reactive<{
  current: number;
  pageSize: number;
  total: number;
  range: any[];
}>({
  current: 1,
  pageSize: 10,
  total: 0,
  range: [],
});

const triggersDialog = reactive<any>({
  show: false,
  data: undefined,
});

const penTree: any = ref([]);

let timer: any;

onBeforeMount(() => {
  // realTimesOptions - 扩展的动态数据下拉列表
  if (props.pen.realTimesOptions) {
    options.value[options.value.length - 1].divider = true;
    options.value.push(...props.pen.realTimesOptions);
  }

  timer = setInterval($forceUpdate, 1000);
});

const addRealTime = (e: any) => {
  if (e.keywords || e.value === 'text') {
    if (!props.pen.realTimes) {
      props.pen.realTimes = [];
    }

    props.pen.realTimes.push({
      label: e.content,
      key: e.value,
      type: e.type,
      keywords: e.keywords,
    });
    return;
  }

  addDataDialog.header = '添加动态数据';

  addDataDialog.data = {
    label: e.content,
    key: e.value,
    type: e.type,
    keywords: e.keywords,
  };
  if (e.keywords) {
    addDataDialog.data.label = '';
  }
  addDataDialog.show = true;
};

const onKeyBlur = () => {
  if (addDataDialog.data) {
    let value = getter(props.pen, addDataDialog.data.key);
    if (value) {
      setter(addDataDialog.data, 'value', value);
    } else {
      addDataDialog.data.value = null;
    }
  }
};

const onChangeLabel = () => {
  if (!addDataDialog.data.key) {
    addDataDialog.data.key = addDataDialog.data.label;
  }
};

const onConfirmData = () => {
  if (!props.pen.realTimes) {
    props.pen.realTimes = [];
  }
  if (!addDataDialog.data.label || !addDataDialog.data.key) {
    MessagePlugin.error('数据名或属性名不能为空！');
    return;
  }

  if (addDataDialog.header === '添加动态数据') {
    const found = props.pen.realTimes.findIndex((item: any) => {
      return item.key === addDataDialog.data.key;
    });
    if (found > -1) {
      MessagePlugin.error('已经存在相同属性数据！');
      return;
    }
    props.pen.realTimes.push(addDataDialog.data);
  }

  addDataDialog.show = false;
};

const onMenuMore = (e: any, item: any, i: number) => {
  switch (e.value) {
    case 'edit':
      addDataDialog.header = '编辑动态数据';
      setter(item, 'value', getter(props.pen, item.key));
      addDataDialog.data = item;
      addDataDialog.show = true;
      break;
    case 'delete':
      props.pen.realTimes.splice(i, 1);
      break;
    default:
      break;
  }
};

const onBind = (item: any) => {
  dataBindDialog.data = item;
  dataBindDialog.input = '';
  dataBindDialog.selectedIds = [];
  if (item.bind && item.bind.id) {
    dataBindDialog.selectedIds.push(item.bind.id);
  }
  dataBindDialog.show = true;
  getDataset();
};

const onSearchDataset = () => {
  debounce(getDataset, 300);
};

const getDataset = async () => {
  // @ts-ignore
  const data: Meta2dBackData = meta2d.data();

  if (!data.dataset) {
    return;
  }

  dataBindDialog.loading = true;
  if (data.dataset.url) {
    const ret: any = await axios.get(data.dataset.url, {
      params: {
        q: dataBindDialog.input,
        current: query.current,
        pageSize: query.pageSize,
      },
    });
    dataBindDialog.dataset = ret;
    query.total = ret.total;
  } else {
    const ret = await axios.post(`/api/data/datasources/get`, {
      id: data.dataset.id,
    });
    if (ret?.data) {
      data.dataset.data = ret.data;
    }
    if (dataBindDialog.input) {
      dataBindDialog.dataset = data.dataset.data.filter((item: any) => {
        return (
          searchPinyin(item.label, dataBindDialog.input) ||
          item.id.indexOf(dataBindDialog.input) > -1
        );
      });
      query.total = dataBindDialog.dataset.length;
    } else {
      dataBindDialog.dataset = data.dataset.data;
      query.total = dataBindDialog.dataset.length;
    }
  }
  dataBindDialog.loading = false;
};

const onChangePagination = (pageInfo: any) => {
  router.push({
    path: route.path,
    query: { current: pageInfo.current, pageSize: pageInfo.pageSize },
  });
  query.current = pageInfo.current;
  query.pageSize = pageInfo.pageSize;
  getDataset();
};

const onSelectBindsChange = (value: string[], options: any) => {
  if (options.type === 'check') {
    dataBindDialog.selectedIds = value;
    dataBindDialog.data.bind = toRaw(options.selectedRowData[0]);
    dataBindDialog.data.mock = dataBindDialog.data.bind.mock;
    doBindInit();
  } else if (options.type === 'uncheck') {
    dataBindDialog.selectedIds = [];
    dataBindDialog.data.bind = {};
  }
};

const doBindInit = () => {
  let { id } = dataBindDialog.data;
  if (props.pen.name === 'echarts' && id.includes('echarts.option.series')) {
    const { replaceMode } = props.pen.echarts;
    const { xAxis } = props.pen.echarts.option;

    let beforeV = getter(props.pen, id);
    if (Array.isArray(beforeV) && replaceMode === 0) {
      //追加
      setter(props.pen, id, []);
      let _key = 'echarts.option.xAxis.data';
      if (Array.isArray(xAxis) && xAxis.length) {
        _key = 'echarts.option.xAxis.0.data';
      }
      setter(props.pen, _key, []);
    }
  }
};

const dataBindonConfirm = () => {
  dataBindDialog.show = false;
  meta2d.initBinds();
};

const onRemoveBind = () => {
  dataBindDialog.selectedIds = [];
  dataBindDialog.data.bind = undefined;
};

const getBindsDesc = (item: any) => {
  if (item.bind?.label) {
    return item.bind.label;
  }

  if (item.enableMock && item.mock) {
    return item.mock;
  }

  return '动态数据';
};

const changeValue = (prop: string) => {
  updatePen(props.pen, prop);
};

const onTrigger = (item: any) => {
  if (!item.triggers) {
    item.triggers = [];
  }
  triggersDialog.openedCollapses = [0];
  triggersDialog.data = item;
  triggersDialog.show = true;

  penTree.value = getPenTree();
};

const onAddTrigger = () => {
  const i = triggersDialog.data.triggers.length;
  triggersDialog.data.triggers.push({
    name: `触发器${i + 1}`,
    conditionType: 'and',
    conditions: [],
    actions: [],
  });

  triggersDialog.openedCollapses.push(i);
};

const addTriggerCondition = (trigger: any) => {
  trigger.conditions.push({
    type: '',
    operator: '=',
    valueType: '',
  });
};

const onChangeTriggerTarget = (c: any) => {
  c.targetProps = [
    {
      value: 'x',
      label: 'X',
    },
    {
      value: 'y',
      label: 'Y',
    },
    {
      value: 'width',
      label: '宽',
    },
    {
      value: 'height',
      label: '高',
    },
    {
      value: 'visible',
      label: '显示',
    },
    {
      value: 'text',
      label: '文字',
    },
    {
      value: 'progress',
      label: '进度',
    },
    {
      value: 'showChild',
      label: '状态',
    },
    {
      value: 'rotate',
      label: '旋转',
    },
  ];

  const target: any = meta2d.findOne(c.target);
  if (target) {
    for (const item of target.realTimes) {
      const found = c.targetProps.findIndex(
        (elem: any) => elem.value === item.key
      );
      if (found < 0) {
        c.targetProps.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const onInput = (item: any) => {
  item.label = item.value;
};

const editObject = (item: any) => {
  ojbectDialog.data = props.pen[item.key];
  ojbectDialog.item = item;
  ojbectDialog.show = true;
};

const onOkEditOjbect = () => {
  if (ojbectDialog.data) {
    if (
      ojbectDialog.item.type === 'array' &&
      !Array.isArray(ojbectDialog.data)
    ) {
      MessagePlugin.error('请输入数组格式数据');
      return;
    }
    props.pen[ojbectDialog.item.key] = ojbectDialog.data;
    props.pen[ojbectDialog.item.key] = updatePen(
      props.pen,
      ojbectDialog.item.key
    );
    ojbectDialog.show = false;
  } else {
    MessagePlugin.error('请输入严格的JSON格式数据');
  }
};

onUnmounted(() => {
  clearInterval(timer);
});
</script>
<style lang="postcss" scoped>
.props {
  height: 100%;

  .grid {
    grid-template-columns: 60px 140px 54px 30px;
    padding: 0 12px;

    &.head {
      background: var(--color-background-input);
      line-height: 36px;
      margin-bottom: 6px;

      .title {
        line-height: 36px;
      }
    }
  }

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  .label {
    width: fit-content;
    font-size: 10px;
    line-height: 28px;
    color: var(--color-desc);
  }

  .value {
    padding-right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    svg {
      flex-shrink: 0;
      margin-right: 4px;
    }

    & > div {
      width: 110px;
      &.t-switch {
        width: fit-content;
        margin-left: 4px;
      }
    }

    :deep(.t-input) {
      padding-left: 4px;
      height: 26px;
      border-color: transparent;
      &:hover {
        border-color: var(--color-primary);
      }
    }
  }

  .actions {
    text-align: right;
    padding-right: 2px;
  }

  .data-list {
    :deep(.t-table__header--fixed:not(.t-table__header--multiple) > tr > th) {
      background: none;
    }

    :deep(.t-table__pagination) {
      padding-bottom: 0;
    }
  }
}

.body {
  :deep(.t-collapse.t--border-less) {
    .t-collapse-panel__header {
      border-top: none;
      border-bottom: 1px solid var(--td-border-level-1-color);
      padding: 8px 0;

      .t-input {
        border: none;
        padding-left: 0;
        font-size: 14px;
      }
    }

    .t-collapse-panel__content {
      padding: 8px 0;
    }
  }

  .title {
    position: relative;
    margin: 8px 0;

    :deep(.t-input) {
      border-color: var(--color-background-input);
      border-radius: 0;
      border-left: none;
      border-top: none;
      border-right: none;
      padding-left: 0;
      padding-bottom: 8px;
      font-size: 14px;

      &:hover {
        border-color: var(--color-border-input);
      }
    }
  }

  .head {
    margin-top: 10px;
  }

  .banner {
    background-color: var(--color-background-input);
    padding: 0 12px;
  }
}
</style>