feat: space组件处理

This commit is contained in:
rd
2025-09-04 16:50:20 +08:00
parent 15357b6bc8
commit aaa8a320c8
28 changed files with 417 additions and 423 deletions

View File

@ -12,13 +12,13 @@
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">品牌名称</span>
<a-space size="medium">
<Space size="medium">
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="medium" allowClear>
<template #prefix>
<icon-search />
</template>
</Input>
</a-space>
</Space>
</div>
<div class="filter-row flex">
<Button type="outline" ghost class="mr-12px" @click="handleSearch">
@ -86,8 +86,8 @@
<a-table-column title="Slogan" data-index="slogan" />
<a-table-column width="150" min-widht="150" title="操作" data-index="optional">
<template #cell="{ record }">
<a-space size="medium">
<a-space>
<Space size="medium">
<Space>
<a-popconfirm
content="确定删除吗?"
type="warning"
@ -97,11 +97,11 @@
>
<icon-delete></icon-delete>
</a-popconfirm>
</a-space>
<a-space>
</Space>
<Space>
<Button type="outline" class="edit-btn" size="small" @click="handleEdit(record.id)">编辑</Button>
</a-space>
</a-space>
</Space>
</Space>
</template>
</a-table-column>
</template>
@ -128,7 +128,7 @@
import { ref, computed, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { Button, Modal, Form, FormItem, Input } from 'ant-design-vue';
import { Button, Modal, Space, Form, FormItem, Input } from 'ant-design-vue';
const { TextArea } = Input;
import {

View File

@ -17,9 +17,9 @@
</div>
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<Space class="w-240px">
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
</a-space>
</Space>
</div>
<div class="filter-row flex">
@ -62,7 +62,7 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Input } from 'ant-design-vue';
import { Button, Input, Space } from 'ant-design-vue';
const pageInfo = reactive({
page: 1,

View File

@ -9,19 +9,19 @@
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">服务/产品</span>
<a-space size="medium">
<Space size="medium">
<Input v-model:value="query.name" class="w-240px" placeholder="请搜索..." size="medium" allowClear>
<template #prefix>
<icon-search />
</template>
</Input>
</a-space>
</Space>
</div>
<div class="filter-row-item flex items-center">
<span class="label">时间筛选</span>
<a-space class="w-240px">
<Space class="w-240px">
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
</a-space>
</Space>
</div>
<div class="filter-row flex">
@ -63,7 +63,7 @@
</template>
<script setup lang="ts">
import { Button, Input } from 'ant-design-vue';
import { Button, Input, Space } from 'ant-design-vue';
import { reactive, ref } from 'vue';
const pageInfo = reactive({

View File

@ -16,13 +16,13 @@
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<Space size="medium" class="w-240px">
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="reload">
<template #prefix>
<icon-search />
</template>
</Input>
</a-space>
</Space>
</div>
<Button type="primary" size="middle" @click="openAdd"
><template #icon>
@ -82,7 +82,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Modal, Input } from 'ant-design-vue';
import { Button, Modal, Input, Space } from 'ant-design-vue';
import { getAccountGroup } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

View File

@ -69,11 +69,11 @@
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<Space v-if="isAbNormalStatus" class="flex items-center">
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</Button>
</a-space>
</Space>
</div>
</div>
<div class="card-wrap">
@ -120,7 +120,7 @@
<script setup>
import { ref, provide } from 'vue';
import { Notification } from '@arco-design/web-vue';
import { Checkbox, Button } from 'ant-design-vue';
import { Checkbox, Button, Space } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';

View File

@ -8,7 +8,7 @@
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">项目名称</span>
<a-space size="medium">
<Space size="medium">
<Input
v-model:value="query.name"
class="w-240px"
@ -21,7 +21,7 @@
<icon-search />
</template>
</Input>
</a-space>
</Space>
</div>
<div class="filter-row-item flex items-center">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
@ -43,7 +43,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button, Input } from 'ant-design-vue';
import { Button, Input, Space } from 'ant-design-vue';
const props = defineProps({
query: {

View File

@ -16,13 +16,13 @@
<div class="flex items-center justify-between mb-16px">
<div class="filter-row-item flex items-center">
<span class="s1 !color-#211F24 mr-12px">分组名称</span>
<a-space size="medium" class="w-240px">
<Space size="medium" class="w-240px">
<Input v-model:value="query.name" placeholder="请搜索..." size="middle" allowClear @change="handleSearch">
<template #prefix>
<icon-search />
</template>
</Input>
</a-space>
</Space>
</div>
<Button type="primary" size="medium" @click="openAdd"
><template #icon>
@ -81,7 +81,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Button, Modal, Input } from 'ant-design-vue';
import { Button, Modal, Input, Space } from 'ant-design-vue';
import { getPlacementAccountProjectGroups } from '@/api/all/propertyMarketing';
import { exactFormatTime } from '@/utils/tools';

View File

@ -52,11 +52,11 @@
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbNormalStatus" class="flex items-center">
<Space v-if="isAbNormalStatus" class="flex items-center">
<Button type="primary" danger size="small" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</Button>
</a-space>
</Space>
</div>
</div>
<div class="card-wrap">
@ -93,7 +93,7 @@
<script setup>
import { ref } from 'vue';
import { Checkbox, Button } from 'ant-design-vue';
import { Checkbox, Button, Space } from 'ant-design-vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';

View File

@ -10,7 +10,7 @@
</template>
</a-popover>
</div>
<a-space>
<Space>
<span class="player-title">表现分析</span>
<a-popover position="tl">
<icon-question-circle />
@ -18,35 +18,35 @@
<p>表现分析</p>
</template>
</a-popover>
</a-space>
</Space>
<div style="margin-right: 24px">
<a-row :gutter="24">
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">人群分析</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '人群分析').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '人群分析')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">投放素材</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放素材').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放素材')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
@ -54,35 +54,35 @@
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">投放时段</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放时段').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '投放时段')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
<a-col :span="12">
<div class="overall-strategy">
<span class="placement-optimization-title">平台表现</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '平台表现').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PERFORMANCE_ANALYSIS, '平台表现')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
</div>
<a-space>
<Space>
<span class="player-title">新投放建议生成</span>
<a-popover position="tl">
<icon-question-circle />
@ -90,20 +90,20 @@
<p style="margin: 0">新投放建议生成</p>
</template>
</a-popover>
</a-space>
</Space>
<a-row class="grid-demo" :gutter="24">
<a-col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">人群建议</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '人群建议').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '人群建议')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
@ -111,15 +111,15 @@
<a-col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">素材建议</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '素材建议').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '素材建议')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
@ -128,15 +128,15 @@
<a-col :span="24">
<div class="overall-strategy">
<span class="placement-optimization-title">投放策略建议</span>
<a-space direction="vertical">
<a-space
<Space direction="vertical">
<Space
v-if="getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '投放策略建议').length > 0"
v-for="(item, index) in getSubmoduleContent(MODEL_PLACEMENT_SUGGESTION, '投放策略建议')"
:key="index"
>
<span><img :src="getStarIcon(index)" style="width: 25px; height: 17px" />{{ item }}</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
</a-row>
@ -145,6 +145,7 @@
</template>
<script setup lang="ts">
import { Space } from "ant-design-vue"
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
const props = defineProps({

View File

@ -16,11 +16,11 @@
<NoData v-if="isEmptyData" style="height: 100px" text="暂无数据" />
<div v-else class="month-data-div">
<div style="align-self: stretch">
<a-space direction="vertical">
<Space direction="vertical">
<span v-for="(line, index) in formattedText" :key="index" :class="getCss(line.highlight)">
{{ line.text }}
</span>
</a-space>
</Space>
</div>
</div>
</div>
@ -30,6 +30,7 @@
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
import { defineProps } from 'vue';
import { Message } from '@arco-design/web-vue';
import { Space } from "ant-design-vue"
const props = defineProps({
overview: {

View File

@ -8,8 +8,8 @@
</span>
</template>
<template #operation="{ record }">
<a-space size="medium">
<a-space>
<Space size="medium">
<Space>
<a-popconfirm
content="确定删除吗?"
type="warning"
@ -19,18 +19,18 @@
>
<icon-delete></icon-delete>
</a-popconfirm>
</a-space>
<a-space>
</Space>
<Space>
<Button type="primary" ghost @click="downLoad(record.file_url)" class="operation-btn">下载</Button>
<Button type="primary" ghost @click="goDetail(record.id)" class="operation-btn">详情</Button>
</a-space>
</a-space>
</Space>
</Space>
</template>
</a-table>
</view>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { Button, Space } from 'ant-design-vue';
import { IconDelete } from '@arco-design/web-vue/es/icon';
import { PLATFORM_LIST } from '@/utils/platform';
import { Message } from '@arco-design/web-vue';

View File

@ -8,7 +8,7 @@
@sorter-change="handleSorterChange"
>
<template #total_use_amount_label>
<a-space>
<Space>
<span>本周总消耗</span>
<a-popover position="tl">
<icon-question-circle />
@ -16,10 +16,10 @@
<p>当前周内所有投流账户的累计广告花费反映整体投放规模</p>
</template>
</a-popover>
</a-space>
</Space>
</template>
<template #pre_total_use_amount_chain_title>
<a-space>
<Space>
<span>本周总消耗环比</span>
<a-popover position="tl">
<icon-question-circle />
@ -27,10 +27,10 @@
<p>本周消耗金额与上周对比的变化百分比用于衡量预算投放趋势</p>
</template>
</a-popover>
</a-space>
</Space>
</template>
<template #roi>
<a-space>
<Space>
<span>ROI</span>
<a-popover position="tl">
<icon-question-circle />
@ -38,10 +38,10 @@
<p>投资回报率ROI= 收益 ÷ 投入成本反映整体投流账户的收益效率</p>
</template>
</a-popover>
</a-space>
</Space>
</template>
<template #ctr>
<a-space>
<Space>
<span>CTR</span>
<a-popover position="tl">
<icon-question-circle />
@ -49,7 +49,7 @@
<p>点击率CTR= 点击量 ÷ 展示量是衡量广告素材吸引力的关键指标</p>
</template>
</a-popover>
</a-space>
</Space>
</template>
<template #platform="{ record }">
@ -59,7 +59,7 @@
</div>
</template>
<template #total_use_amount="{ record }">
<a-space>{{ record.total_use_amount }}</a-space>
<Space>{{ record.total_use_amount }}</Space>
</template>
<template #total_use_amoun2="{ record }">
@ -92,6 +92,7 @@
</view>
</template>
<script setup lang="ts">
import { Space } from "ant-design-vue"
import { PLATFORM_LIST } from '@/utils/platform';
const props = defineProps({

View File

@ -9,28 +9,28 @@
<a-row class="grid-demo" :gutter="24">
<a-col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">账户</span>
<span class="span-content">{{ detailData?.account }}</span>
</a-space>
</Space>
</div>
</a-col>
<a-col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">计划</span>
<span class="span-content">{{detailData.plan}}</span>
</a-space>
</Space>
</div>
</a-col>
</a-row>
<a-row class="grid-demo" :gutter="24" style="margin-top: 30px">
<a-col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">平台</span>
<a-space>
<Space>
<span
class="mr-8px"
v-if="detailData.platform.length > 0"
@ -39,17 +39,17 @@
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span>
</a-space>
</a-space>
</Space>
</Space>
</div>
</a-col>
<a-col :span="12">
<div class="">
<a-space direction="vertical">
<Space direction="vertical">
<span class="span-title">生成时间</span>
<span class="span-content">{{ detailData.created_at }}</span>
</a-space>
</Space>
</div>
</a-col>
</a-row>
@ -60,21 +60,21 @@
<!-- 投放建议-->
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
<div class="ignore-export">
<a-space class="down-btn">
<Space class="down-btn">
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
<template #icon>
<icon-download class="mr-8px"/>
</template>
<template #default>下载</template>
</Button>
</a-space>
</Space>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button } from 'ant-design-vue';
import { Button, Space } from 'ant-design-vue';
import MonthData from './components/month-data/index.vue';
import PlacementSuggestions from './components/placement-suggestions/index.vue';
import { PLATFORM_LIST } from '@/utils/platform';

View File

@ -53,7 +53,7 @@
></PlacementSuggestions>
<div v-if="tabData == 'placement_guide'" class="ignore-export">
<a-space class="down-btn">
<Space class="down-btn">
<Button type="primary" ghost :loading="exportLoading" @click="downPage">
<template #icon>
<icon-download class="mr-8px"/>
@ -66,14 +66,14 @@
</template>
<template #default>保存</template>
</Button>
</a-space>
</Space>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Tabs } from 'ant-design-vue';
import { Button, Tabs, Space } from 'ant-design-vue';
const { TabPane } = Tabs;
import PlacementGuideList from './components/table-data/placementGuideList.vue';
import listSearchForm from './components/table-data/listSearchForm.vue';