feat: 删除无用组件，组件库替换
This commit is contained in:
rd
@ -1,2 +0,0 @@
|
||||
export { default as TabBar } from './tab-bar/index.vue';
|
||||
export { default as ModalSimple } from './modal/index.vue';
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { Component, DefineComponent } from 'vue';
|
||||
|
||||
import IconHover from '@arco-design/web-vue/es/_components/icon-hover';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
content?: string | (() => DefineComponent | Component);
|
||||
}>();
|
||||
|
||||
defineEmits(['close']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot name="header">
|
||||
<div class="flex justify-end mb7">
|
||||
<slot name="close">
|
||||
<icon-hover @click="$emit('close')">
|
||||
<icon-close />
|
||||
</icon-hover>
|
||||
</slot>
|
||||
</div>
|
||||
</slot>
|
||||
<slot>
|
||||
<div class="flex flex-col text-center">
|
||||
<div v-if="title" class="mb4 text-lg font-600">{{ title }}</div>
|
||||
<template v-else />
|
||||
<component :is="content" v-if="typeof content === 'function'" />
|
||||
<div v-else>{{ content }}</div>
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
@ -1,83 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { RouteLocationNormalized } from 'vue-router';
|
||||
import { listenerRouteChange, removeRouteListener } from '@/utils/route-listener';
|
||||
import { useAppStore, useTabBarStore } from '@/stores';
|
||||
import TabItem from './tab-item.vue';
|
||||
const appStore = useAppStore();
|
||||
const tabBarStore = useTabBarStore();
|
||||
const affixRef = ref();
|
||||
const tagList = computed(() => {
|
||||
return tabBarStore.getTabList;
|
||||
});
|
||||
const offsetTop = computed(() => {
|
||||
return appStore.navbar ? 60 : 0;
|
||||
});
|
||||
watch(
|
||||
() => appStore.navbar,
|
||||
() => {
|
||||
affixRef.value.updatePosition();
|
||||
},
|
||||
);
|
||||
listenerRouteChange((route: RouteLocationNormalized) => {
|
||||
if (!route.meta.noAffix && !tagList.value.some((tag) => tag.fullPath === route.fullPath)) {
|
||||
tabBarStore.updateTabList(route);
|
||||
}
|
||||
}, true);
|
||||
onUnmounted(() => {
|
||||
removeRouteListener();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tab-bar-container">
|
||||
<a-affix ref="affixRef" :offset-top="offsetTop">
|
||||
<div class="tab-bar-box">
|
||||
<div class="tab-bar-scroll">
|
||||
<div class="tags-wrap">
|
||||
<tab-item v-for="(tag, index) in tagList" :key="tag.fullPath" :index="index" :item-data="tag" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-bar-operation"></div>
|
||||
</div>
|
||||
</a-affix>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tab-bar-container {
|
||||
position: relative;
|
||||
background-color: var(--color-bg-2);
|
||||
.tab-bar-box {
|
||||
display: flex;
|
||||
padding: 0 0 0 20px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
.tab-bar-scroll {
|
||||
height: 32px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.tags-wrap {
|
||||
padding: 4px 0;
|
||||
height: 48px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
:deep(.arco-tag) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
.arco-tag-close-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag-bar-operation {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,177 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue';
|
||||
import type { TagProps } from '@/stores/modules/tab-bar/types';
|
||||
|
||||
import { useTabBarStore } from '@/stores';
|
||||
import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';
|
||||
|
||||
const props = defineProps({
|
||||
itemData: {
|
||||
type: Object as PropType<TagProps>,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
// eslint-disable-next-line no-shadow
|
||||
enum Eaction {
|
||||
reload = 'reload',
|
||||
current = 'current',
|
||||
left = 'left',
|
||||
right = 'right',
|
||||
others = 'others',
|
||||
all = 'all',
|
||||
}
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const tabBarStore = useTabBarStore();
|
||||
const goto = (tag: TagProps) => {
|
||||
router.push({ ...tag });
|
||||
};
|
||||
const tagList = computed(() => {
|
||||
return tabBarStore.getTabList;
|
||||
});
|
||||
const disabledReload = computed(() => {
|
||||
return props.itemData.fullPath !== route.fullPath;
|
||||
});
|
||||
const disabledCurrent = computed(() => {
|
||||
return props.index === 0;
|
||||
});
|
||||
const disabledLeft = computed(() => {
|
||||
return [0, 1].includes(props.index);
|
||||
});
|
||||
const disabledRight = computed(() => {
|
||||
return props.index === tagList.value.length - 1;
|
||||
});
|
||||
const tagClose = (tag: TagProps, idx: number) => {
|
||||
tabBarStore.deleteTag(idx, tag);
|
||||
if (props.itemData.fullPath === route.fullPath) {
|
||||
const latest = tagList.value[idx - 1]; // 获取队列的前一个tab
|
||||
router.push({ name: latest.name });
|
||||
}
|
||||
};
|
||||
const findCurrentRouteIndex = () => {
|
||||
return tagList.value.findIndex((el) => el.fullPath === route.fullPath);
|
||||
};
|
||||
const actionSelect = async (value: any) => {
|
||||
const { itemData, index } = props;
|
||||
const copyTagList = [...tagList.value];
|
||||
if (value === Eaction.current) {
|
||||
tagClose(itemData, index);
|
||||
} else if (value === Eaction.left) {
|
||||
const currentRouteIdx = findCurrentRouteIndex();
|
||||
copyTagList.splice(1, props.index - 1);
|
||||
tabBarStore.freshTabList(copyTagList);
|
||||
if (currentRouteIdx < index) {
|
||||
router.push({ name: itemData.name });
|
||||
}
|
||||
} else if (value === Eaction.right) {
|
||||
const currentRouteIdx = findCurrentRouteIndex();
|
||||
copyTagList.splice(props.index + 1);
|
||||
tabBarStore.freshTabList(copyTagList);
|
||||
if (currentRouteIdx > index) {
|
||||
router.push({ name: itemData.name });
|
||||
}
|
||||
} else if (value === Eaction.others) {
|
||||
const filterList = tagList.value.filter((el, idx) => {
|
||||
return idx === 0 || idx === props.index;
|
||||
});
|
||||
tabBarStore.freshTabList(filterList);
|
||||
router.push({ name: itemData.name });
|
||||
} else if (value === Eaction.reload) {
|
||||
tabBarStore.deleteCache(itemData);
|
||||
await router.push({
|
||||
name: REDIRECT_ROUTE_NAME,
|
||||
params: {
|
||||
path: route.fullPath,
|
||||
},
|
||||
});
|
||||
tabBarStore.addCache(itemData.name);
|
||||
} else {
|
||||
tabBarStore.resetTabList();
|
||||
router.push({ name: DEFAULT_ROUTE_NAME });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-dropdown trigger="contextMenu" :popup-max-height="false" @select="actionSelect">
|
||||
<span
|
||||
:class="[
|
||||
'arco-tag arco-tag-size-medium arco-tag-checked',
|
||||
{ 'link-activated': itemData.fullPath === $route.fullPath },
|
||||
]"
|
||||
@click="goto(itemData)"
|
||||
>
|
||||
<span class="tag-link">{{ itemData.title }}</span>
|
||||
<span
|
||||
class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
|
||||
@click.stop="tagClose(itemData, index)"
|
||||
>
|
||||
<icon-close />
|
||||
</span>
|
||||
</span>
|
||||
<template #content>
|
||||
<a-doption :disabled="disabledReload" :value="Eaction.reload">
|
||||
<icon-refresh />
|
||||
<span>重新加载</span>
|
||||
</a-doption>
|
||||
<a-doption class="sperate-line" :disabled="disabledCurrent" :value="Eaction.current">
|
||||
<icon-close />
|
||||
<span>关闭当前标签页</span>
|
||||
</a-doption>
|
||||
<a-doption :disabled="disabledLeft" :value="Eaction.left">
|
||||
<icon-to-left />
|
||||
<span>关闭左侧标签页</span>
|
||||
</a-doption>
|
||||
<a-doption class="sperate-line" :disabled="disabledRight" :value="Eaction.right">
|
||||
<icon-to-right />
|
||||
<span>关闭右侧标签页</span>
|
||||
</a-doption>
|
||||
<a-doption :value="Eaction.others">
|
||||
<icon-swap />
|
||||
<span>关闭其它标签页</span>
|
||||
</a-doption>
|
||||
<a-doption :value="Eaction.all">
|
||||
<icon-folder-delete />
|
||||
<span>关闭全部标签页</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tag-link {
|
||||
color: var(--color-text-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-activated {
|
||||
color: rgb(var(--link-6));
|
||||
.tag-link {
|
||||
color: rgb(var(--link-6));
|
||||
}
|
||||
& + .arco-tag-close-btn {
|
||||
color: rgb(var(--link-6));
|
||||
}
|
||||
}
|
||||
:deep(.arco-dropdown-option-content) {
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.arco-dropdown-open {
|
||||
.tag-link {
|
||||
color: rgb(var(--danger-6));
|
||||
}
|
||||
.arco-tag-close-btn {
|
||||
color: rgb(var(--danger-6));
|
||||
}
|
||||
}
|
||||
.sperate-line {
|
||||
border-bottom: 1px solid var(--color-neutral-3);
|
||||
}
|
||||
</style>
|
||||
@ -10,6 +10,7 @@
|
||||
:placeholder="placeholder"
|
||||
:allowClear="allClear"
|
||||
:showSearch="allowSearch"
|
||||
showArrow
|
||||
:maxTagCount="maxTagCount"
|
||||
@change="handleChange"
|
||||
>
|
||||
|
||||
@ -1,2 +1 @@
|
||||
export * from './responsive';
|
||||
export * from './modal';
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-02-21 15:11:01
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-02-21 15:11:02
|
||||
* @Description:
|
||||
*/
|
||||
import type { AppContext, Component, DefineComponent } from 'vue';
|
||||
import type { ModalConfig } from '@arco-design/web-vue';
|
||||
|
||||
import { ModalSimple } from '@/components/_base';
|
||||
|
||||
type CompType = DefineComponent | Component;
|
||||
interface SlotsType {
|
||||
default?: CompType;
|
||||
header?: CompType;
|
||||
close?: CompType;
|
||||
}
|
||||
|
||||
export const useModal = () => {
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const Modal = AModal;
|
||||
|
||||
Modal._context = instance?.appContext as AppContext;
|
||||
|
||||
Modal.simple = (config: ModalConfig, slots: SlotsType) => {
|
||||
const { title, content, ..._config } = config || {};
|
||||
|
||||
const modal = Modal.open({
|
||||
..._config,
|
||||
simple: false,
|
||||
footer: false,
|
||||
closable: false,
|
||||
content: () =>
|
||||
h(
|
||||
ModalSimple,
|
||||
{
|
||||
title,
|
||||
content,
|
||||
onClose: modal.close,
|
||||
},
|
||||
{
|
||||
default: slots?.default,
|
||||
header: slots?.header,
|
||||
close: slots?.close,
|
||||
},
|
||||
),
|
||||
});
|
||||
|
||||
return modal;
|
||||
};
|
||||
|
||||
return { Modal };
|
||||
};
|
||||
@ -17,23 +17,23 @@
|
||||
<template #content>
|
||||
<div>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="h-full flex justify-between items-center w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon1" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</div>
|
||||
</a-doption>
|
||||
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
|
||||
<a-doption class="enterprises-doption">
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex justify-between w-100% h-full items-center">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon3" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</div>
|
||||
</a-doption>
|
||||
<template #content>
|
||||
<a-doption
|
||||
@ -53,13 +53,13 @@
|
||||
</template>
|
||||
</a-dsubmenu>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex justify-between w-100% h-full items-center" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon2" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</div>
|
||||
</a-doption>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Checkbox, Input } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { Button, Checkbox, Input, Tooltip } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
import NoData from '@/components/no-data';
|
||||
@ -305,7 +305,7 @@ export default {
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Tooltip, Notification } from '@arco-design/web-vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Notification } from '@arco-design/web-vue';
|
||||
import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import NoData from '@/components/no-data';
|
||||
import { getTask } from '@/api/all/common';
|
||||
@ -152,7 +152,7 @@ export default {
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
@cancel="onClose"
|
||||
centered
|
||||
>
|
||||
<a-tabs :active-key="activeTab" @tab-click="handleTabClick">
|
||||
<a-tab-pane key="0" title="导入"> </a-tab-pane>
|
||||
<a-tab-pane key="1" title="导出"> </a-tab-pane>
|
||||
</a-tabs>
|
||||
<Tabs :activeKey="activeTab" @change="handleTabClick">
|
||||
<TabPane key="0" tab="导入"> </TabPane>
|
||||
<TabPane key="1" tab="导出"> </TabPane>
|
||||
</Tabs>
|
||||
<div class="content">
|
||||
<component :is="activeTab === '0' ? ImportTask : ExportTask" ref="componentRef" />
|
||||
</div>
|
||||
@ -20,7 +20,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Checkbox, Modal, Button } from 'ant-design-vue';
|
||||
import { Checkbox, Modal, Button, Tabs } from 'ant-design-vue';
|
||||
const { TabPane } = Tabs;
|
||||
import { Notification } from '@arco-design/web-vue';
|
||||
|
||||
import ExportTask from './components/export-task';
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.ant-input {
|
||||
.ant-input,
|
||||
.ant-input-password {
|
||||
border-radius: 4px !important;
|
||||
border-color: #d7d7d9 !important;
|
||||
background-color: #fff !important;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -14,12 +14,7 @@
|
||||
&::placeholder {
|
||||
color: var(--Text-4, #939499);
|
||||
}
|
||||
&.ant-input-lg {
|
||||
height: 36px;
|
||||
}
|
||||
&.ant-input-sm {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
@ -37,6 +32,22 @@
|
||||
padding-right: 0 !important;
|
||||
margin-right: 4px;
|
||||
}
|
||||
&.ant-input-status-error,
|
||||
&.ant-input-affix-wrapper-status-error {
|
||||
border-color: $color-error !important;
|
||||
}
|
||||
}
|
||||
input.ant-input {
|
||||
height: 32px;
|
||||
&.ant-input-lg {
|
||||
height: 36px;
|
||||
}
|
||||
&.ant-input-sm {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
textarea.ant-input {
|
||||
padding: 8px 12px 4px 12px;
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
padding-top: 0;
|
||||
|
||||
39
src/styles/components/ant-select.scss
Normal file
39
src/styles/components/ant-select.scss
Normal file
@ -0,0 +1,39 @@
|
||||
.ant-select {
|
||||
.ant-select-selector {
|
||||
padding: 0 12px !important;
|
||||
height: 32px;
|
||||
color: var(--Text-4, #211f24);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
border-radius: 4px !important;
|
||||
border-color: #d7d7d9 !important;
|
||||
background-color: #fff !important;
|
||||
&::placeholder {
|
||||
color: var(--Text-4, #939499);
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&-focused {
|
||||
.ant-select-selector {
|
||||
background-color: var(--color-bg-2) !important;
|
||||
border-color: rgb(var(--primary-6)) !important;
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
|
||||
}
|
||||
}
|
||||
&.ant-select-lg {
|
||||
.ant-select-selector {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
&.ant-select-sm {
|
||||
.ant-select-selector {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
&.ant-select-status-error {
|
||||
border-color: $color-error !important;
|
||||
}
|
||||
}
|
||||
49
src/styles/components/ant-tabs.scss
Normal file
49
src/styles/components/ant-tabs.scss
Normal file
@ -0,0 +1,49 @@
|
||||
.ant-tabs {
|
||||
.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
padding: 0 24px;
|
||||
.ant-tabs-nav-wrap {
|
||||
height: 40px;
|
||||
.ant-tabs-nav-list {
|
||||
.ant-tabs-tab {
|
||||
.ant-tabs-tab-btn {
|
||||
color: var(--Text-2, #55585f);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
.ant-tabs-tab-btn {
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
font-weight: 500;
|
||||
font-family: $font-family-medium;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-ink-bar {
|
||||
background: #6d4cfe;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-content-holder {
|
||||
display: none;
|
||||
}
|
||||
&.ant-tabs-small {
|
||||
.ant-tabs-nav {
|
||||
.ant-tabs-nav-wrap {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ant-tabs-large {
|
||||
.ant-tabs-nav {
|
||||
.ant-tabs-nav-wrap {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,21 +4,21 @@
|
||||
@import './pagination.scss';
|
||||
@import './tabs.scss';
|
||||
@import './modal.scss';
|
||||
@import "./textarea.scss";
|
||||
@import "./select.scss";
|
||||
@import "./date-picker.scss";
|
||||
@import "./button.scss";
|
||||
@import "./steps.scss";
|
||||
@import "./form.scss";
|
||||
@import "./chat-sender.scss";
|
||||
|
||||
@import "./ant-modal.scss";
|
||||
@import "./ant-radio.scss";
|
||||
@import "./ant-form.scss";
|
||||
@import "./ant-button.scss";
|
||||
@import "./ant-table.scss";
|
||||
@import "./ant-checkbox.scss";
|
||||
@import "./ant-input.scss";
|
||||
@import "./ant-textarea.scss";
|
||||
|
||||
@import './textarea.scss';
|
||||
@import './select.scss';
|
||||
@import './date-picker.scss';
|
||||
@import './button.scss';
|
||||
@import './steps.scss';
|
||||
@import './form.scss';
|
||||
@import './chat-sender.scss';
|
||||
|
||||
@import './ant-modal.scss';
|
||||
@import './ant-radio.scss';
|
||||
@import './ant-form.scss';
|
||||
@import './ant-button.scss';
|
||||
@import './ant-table.scss';
|
||||
@import './ant-checkbox.scss';
|
||||
@import './ant-input.scss';
|
||||
@import './ant-textarea.scss';
|
||||
@import './ant-select.scss';
|
||||
@import './ant-tabs.scss';
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="title-group">
|
||||
<a-tooltip :content="cozeInfo.name">
|
||||
<Tooltip :title="cozeInfo.name">
|
||||
<div class="title">{{ cozeInfo.name }}</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
<div class="tag">
|
||||
<div>
|
||||
<img class="status-icon" :src="chatbotIcon" />
|
||||
@ -36,6 +36,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import chatbotIcon from '@/assets/svg/chatbot.svg';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -36,9 +36,9 @@
|
||||
<div class="body">
|
||||
<div class="">
|
||||
<div class="toggle-btn cursor-pointer" @click="toggleCollapse">
|
||||
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
|
||||
<Tooltip :title="isCollapsed ? '展开' : '折叠'">
|
||||
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,6 +55,7 @@ import { getChatAgent } from '@/api/all/agent';
|
||||
import { useRouter } from 'vue-router';
|
||||
import menuFold from '@/assets/svg/menu-fold.svg';
|
||||
import menuUnfold from '@/assets/svg/menu-unfold.svg';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@ -83,9 +83,9 @@
|
||||
<div class="body">
|
||||
<div class="">
|
||||
<div class="toggle-btn cursor-pointer" @click="toggleCollapse">
|
||||
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
|
||||
<Tooltip :title="isCollapsed ? '展开' : '折叠'">
|
||||
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,6 +132,7 @@ import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
import menuFold from '@/assets/svg/menu-fold.svg';
|
||||
import menuUnfold from '@/assets/svg/menu-unfold.svg';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
// import { WORKEXECUTE_STATUS } from '../AgentConstants.ts';
|
||||
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<a-space direction="vertical" class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">行业词云</span>
|
||||
<a-tooltip>
|
||||
<template #content>基于行业内内容提取的高频词汇。</template>
|
||||
<Tooltip>
|
||||
<template #title>基于行业内内容提取的高频词汇。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="multi-row-tag-cloud h-472px">
|
||||
@ -40,9 +40,9 @@
|
||||
@mouseleave="hoverTag = null"
|
||||
>
|
||||
<a-space>
|
||||
<a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
|
||||
<Tooltip :title="`性价比:${Number(tag.rate * 100)}%`" placement="topLeft">
|
||||
<a-space>{{ tag.term }}</a-space>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</a-tag>
|
||||
</div>
|
||||
@ -56,6 +56,7 @@
|
||||
import topHeader from './topHeader.vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { fetchindustryTerms } from '@/api/all/index';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
|
||||
const topHeaderRef = ref();
|
||||
// 从topHeader获取统一的状态
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
<a-space direction="vertical" class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">行业热门话题洞察</span>
|
||||
<a-tooltip>
|
||||
<template #content>基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</template>
|
||||
<Tooltip>
|
||||
<template #title>基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
@ -24,21 +24,21 @@
|
||||
<template #hotTitle>
|
||||
<a-space>
|
||||
<span>热度指数</span>
|
||||
<a-tooltip>
|
||||
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #sentimentTitle>
|
||||
<a-space>
|
||||
<span>情感倾向</span>
|
||||
<a-tooltip>
|
||||
<template #content
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
|
||||
>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
@ -146,6 +146,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { Modal, Button } from 'ant-design-vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
>
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">重点品牌列表</span>
|
||||
<a-tooltip>
|
||||
<template #content
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>基于该行业中近期提及频次高、用户互动活跃的品牌内容，筛选出关注度较高的代表性品牌。</template
|
||||
>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
@ -30,28 +30,28 @@
|
||||
<template #hotTitle>
|
||||
<a-space>
|
||||
<span>热度指数</span>
|
||||
<a-tooltip>
|
||||
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #trendTitle>
|
||||
<a-space>
|
||||
<span>变化幅度</span>
|
||||
<a-tooltip>
|
||||
<template #content>仅基于品牌出现频次。</template>
|
||||
<Tooltip>
|
||||
<template #title>仅基于品牌出现频次。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #volume_rateTitle>
|
||||
<a-space>
|
||||
<span>占总声量比例</span>
|
||||
<a-tooltip>
|
||||
<template #content>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
|
||||
<Tooltip>
|
||||
<template #title>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #rank="{ record }">
|
||||
@ -80,12 +80,12 @@
|
||||
>
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">舆情 & 敏感动态</span>
|
||||
<a-tooltip>
|
||||
<template #content
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>基于情绪分析与敏感词识别，对行业内容中的负面或争议性话题进行监测，辅助判断舆情风险动态。</template
|
||||
>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
|
||||
@ -99,6 +99,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
>
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">关键词热度榜</span>
|
||||
<a-tooltip>
|
||||
<template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
|
||||
<Tooltip>
|
||||
<template #title>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
@ -29,19 +29,19 @@
|
||||
<template #heatLevel>
|
||||
<a-space>
|
||||
<span>热度指数</span>
|
||||
<a-tooltip>
|
||||
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<Tooltip>
|
||||
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #trendTitle>
|
||||
<a-space>
|
||||
<span>变化幅度</span>
|
||||
<a-tooltip>
|
||||
<template #content>仅基于关键词出现频次。</template>
|
||||
<Tooltip>
|
||||
<template #title>仅基于关键词出现频次。</template>
|
||||
<icon-question-circle size="14" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
@ -78,12 +78,12 @@
|
||||
>
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">行业情绪</span>
|
||||
<a-tooltip>
|
||||
<template #content
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template
|
||||
>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center w-100%">
|
||||
@ -132,12 +132,12 @@
|
||||
>
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">新兴关键词</span>
|
||||
<a-tooltip>
|
||||
<template #content
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
|
||||
>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
@ -181,22 +181,22 @@
|
||||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||||
</template>
|
||||
|
||||
<template #hotTitle="{ record }">
|
||||
<template #hotTitle>
|
||||
<a-space>
|
||||
<span>当前热度指数</span>
|
||||
<a-tooltip>
|
||||
<template #content>综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<Tooltip>
|
||||
<template #title>综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #trendTitle="{ record }">
|
||||
<template #trendTitle>
|
||||
<a-space>
|
||||
<span>变化幅度</span>
|
||||
<a-tooltip>
|
||||
<template #content>仅基于关键词出现频次。</template>
|
||||
<Tooltip>
|
||||
<template #title>仅基于关键词出现频次。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #tred="{ record }">
|
||||
@ -270,7 +270,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Checkbox, Modal, Button } from 'ant-design-vue';
|
||||
import { Checkbox, Modal, Button, Tooltip } from 'ant-design-vue';
|
||||
import {
|
||||
fetchKeywordTrendsList,
|
||||
fetchIndustryEmotions,
|
||||
|
||||
@ -10,12 +10,12 @@
|
||||
>
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">用户痛点观察</span>
|
||||
<a-tooltip>
|
||||
<template #content
|
||||
<Tooltip>
|
||||
<template #title
|
||||
>基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</template
|
||||
>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
@ -120,7 +120,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Modal, Button } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip } from 'ant-design-vue';
|
||||
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
<div class="bg-#fff rounded-8px w-100% py-0 px-20px w-600px mr-24px">
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">性别分布</span>
|
||||
<a-tooltip>
|
||||
<template #content>基于社交内容平台中用户资料、互动行为及语义特征进行智能识别与估算。</template>
|
||||
<Tooltip>
|
||||
<template #title>基于社交内容平台中用户资料、互动行为及语义特征进行智能识别与估算。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-space v-if="genderData.length > 0">
|
||||
<div id="container" class="w-300px h-300px"></div>
|
||||
@ -40,10 +40,10 @@
|
||||
<a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">年龄分布</span>
|
||||
<a-tooltip>
|
||||
<template #content>基于社交平台的公开信息、内容偏好与行为模式，通过算法进行年龄段归类和统计。</template>
|
||||
<Tooltip>
|
||||
<template #title>基于社交平台的公开信息、内容偏好与行为模式，通过算法进行年龄段归类和统计。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a-space v-if="ageValueData.length > 0" align="center">
|
||||
<span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
|
||||
@ -61,10 +61,10 @@
|
||||
<div class="bg-#fff rounded-8px w-100% py-0 px-20px flex-1 pb-20px">
|
||||
<div class="title-row">
|
||||
<span class="title mr-4px">地域分布</span>
|
||||
<a-tooltip>
|
||||
<template #content>基于社交平台的IP归属地、位置标签、内容发布地等数据推测用户活跃区域。</template>
|
||||
<Tooltip>
|
||||
<template #title>基于社交平台的IP归属地、位置标签、内容发布地等数据推测用户活跃区域。</template>
|
||||
<icon-question-circle size="16" class="!color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<a-space direction="vertical">
|
||||
@ -90,8 +90,8 @@
|
||||
</a-space>
|
||||
</a-space>
|
||||
<div class="flex flex-col h-486px">
|
||||
<a-tabs default-active-key="1" class="h-100%" @change="tabChange">
|
||||
<a-tab-pane key="1" title="省份">
|
||||
<Tabs defaultActiveKey="1" class="h-100%" @change="tabChange" size="large">
|
||||
<TabPane key="1" tab="省份">
|
||||
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
|
||||
<template #empty>
|
||||
<NoData />
|
||||
@ -104,8 +104,8 @@
|
||||
<a-table-column title="TGI指数" data-index="tgi" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" title="城市">
|
||||
</TabPane>
|
||||
<TabPane key="2" tab="城市">
|
||||
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
|
||||
<template #empty>
|
||||
<NoData />
|
||||
@ -122,8 +122,8 @@
|
||||
<a-table-column title="TGI指数" data-index="tgi" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,11 +133,14 @@
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { fetchAgeDistributionsList, fetchGeoDistributionsList, fetchGenderDistributionsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { ref, onMounted, computed, watch, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import chinaJson from '@/assets/maps/china.json';
|
||||
|
||||
echarts.registerMap('china', chinaJson);
|
||||
import { Tabs, Tooltip } from 'ant-design-vue';
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const scope = ref(1); // 地域范围，1-省，2-市
|
||||
const chartInstance = (ref < echarts.ECharts) | (null > null);
|
||||
const topHeaderRef = ref();
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
style="background-color: #fff; border: none !important;"
|
||||
allowClear
|
||||
class="form-input"
|
||||
maxlength="6"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<span
|
||||
class="w-120 font-400 text-right mr-4 text-16px"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="jsx">
|
||||
import { Button, Textarea } from 'ant-design-vue';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
import { Image, Spin, Affix } from '@arco-design/web-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import SvgIcon from '@/components/svg-icon/index.vue';
|
||||
@ -126,7 +127,7 @@ export default {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Textarea
|
||||
<TextArea
|
||||
ref={textAreaRef}
|
||||
autoSize
|
||||
class={`max-h-220px overflow-y-auto textarea-box ${isReplay.value ? 'pt-38px' : ''}`}
|
||||
|
||||
@ -33,9 +33,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import { patchWorkAuditsAudit } from '@/api/all/generationWorkshop';
|
||||
|
||||
@ -14,10 +14,10 @@ export const TAB_LIST = [
|
||||
label: '文本',
|
||||
value: enumTab.TEXT,
|
||||
},
|
||||
// {
|
||||
// label: '图片',
|
||||
// value: enumTab.IMAGE,
|
||||
// },
|
||||
{
|
||||
label: '图片',
|
||||
value: enumTab.IMAGE,
|
||||
},
|
||||
];
|
||||
|
||||
export enum Enum_Level {
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<script lang="jsx">
|
||||
import axios from 'axios';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Button, Form, Input, FormItem } from 'ant-design-vue';
|
||||
import { Button, Form, Input, FormItem, Tabs } from 'ant-design-vue';
|
||||
import { IconLoading } from '@arco-design/web-vue/es/icon';
|
||||
import { Image, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
|
||||
import { Image, Upload, Spin, Message as AMessage } from '@arco-design/web-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import HighlightTextarea from './highlight-textarea';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import { Navigation } from 'swiper/modules';
|
||||
@ -421,22 +423,20 @@ export default {
|
||||
<div class="h-full w-full px-24px pt-16px pb-24px content-wrap flex">
|
||||
<div class="flex-2 left-box mr-24px flex flex-col">
|
||||
<div class="flex-1 mb-12px rounded-8px border-1px pt-8px flex flex-col pb-16px bg-#F7F8FA border-#E6E6E8 border-solid">
|
||||
<Tabs v-model={activeTab.value} onTabClick={handleTabClick} class="mb-16px">
|
||||
<Tabs activeKey={activeTab.value} onChange={handleTabClick} class="mb-16px">
|
||||
{TAB_LIST.map((item) => (
|
||||
<TabPane
|
||||
key={item.value}
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center relative">
|
||||
<span>{item.label}</span>
|
||||
{
|
||||
// activeTab.value === item.value && aiReview.value?.violation_items.length > 0 && (
|
||||
// <icon-exclamation-circle-fill size={14} class="color-#F64B31 absolute right--10px top-0" />
|
||||
// )
|
||||
}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
tab={
|
||||
<div class="flex items-center relative">
|
||||
<span>{item.label}</span>
|
||||
{
|
||||
// activeTab.value === item.value && aiReview.value?.violation_items.length > 0 && (
|
||||
// <icon-exclamation-circle-fill size={14} class="color-#F64B31 absolute right--10px top-0" />
|
||||
// )
|
||||
}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
@ -23,21 +23,6 @@
|
||||
}
|
||||
|
||||
.left-box {
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-nav {
|
||||
.arco-tabs-tab {
|
||||
height: 40px;
|
||||
// padding: 0 8px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.arco-tabs-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:deep(.ant-form) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="jsx">
|
||||
import axios from 'axios';
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
|
||||
import { Upload, Message as AMessage } from '@arco-design/web-vue';
|
||||
// import CommonSelect from '@/components/common-select';
|
||||
// import { VueDraggable } from 'vue-draggable-plus';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
@ -12,6 +12,8 @@ import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from
|
||||
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants.ts';
|
||||
import { getImagePreSignedUrl, getVideoPreSignedUrl } from '@/api/all/common';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
// import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png';
|
||||
|
||||
// 表单验证规则
|
||||
@ -325,14 +327,14 @@ export default {
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="作品描述" name="content">
|
||||
<Textarea
|
||||
v-model={formData.value.content}
|
||||
<TextArea
|
||||
v-model:value={formData.value.content}
|
||||
onInput={onChange}
|
||||
placeholder="请输入作品描述"
|
||||
size="large"
|
||||
class="textarea-box !w-784px"
|
||||
show-word-limit
|
||||
max-length={1000}
|
||||
showCount
|
||||
maxlength={1000}
|
||||
/>
|
||||
</FormItem>
|
||||
{isVideo.value ? (
|
||||
|
||||
@ -31,8 +31,6 @@
|
||||
}
|
||||
}
|
||||
.textarea-box {
|
||||
:deep(.arco-textarea) {
|
||||
height: 140px;
|
||||
max-height: 298px;
|
||||
}
|
||||
height: 140px;
|
||||
max-height: 298px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="jsx">
|
||||
import { Button, Modal } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination, Tooltip, } from '@arco-design/web-vue';
|
||||
import { Button, Modal, Tooltip } from 'ant-design-vue';
|
||||
import { Table, TableColumn, Pagination } from '@arco-design/web-vue';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
@ -195,7 +195,7 @@ export default {
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px bold color-#211F24">{column.title}</span>
|
||||
{column.tooltip && (
|
||||
<Tooltip content={column.tooltip} position="top">
|
||||
<Tooltip title={column.tooltip} placement="top">
|
||||
<IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="jsx">
|
||||
import { Button, Modal, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Button, Modal, Form, FormItem, Input, Tooltip } from 'ant-design-vue';
|
||||
import { Message as AMessage } from '@arco-design/web-vue';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
|
||||
@ -118,8 +118,8 @@ export default {
|
||||
rules={rules}
|
||||
model={formData.value}
|
||||
labelAlign="right"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
<FormItem label="有效期" name="days" row-class="!items-center">
|
||||
<CommonSelect
|
||||
@ -133,16 +133,15 @@ export default {
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="分享对象"
|
||||
name="receiver"
|
||||
row-class="!items-center"
|
||||
v-slots={{
|
||||
label: () => (
|
||||
<div class="flex items-center">
|
||||
<span>分享对象</span>
|
||||
<a-tooltip content="可填写客户名称、昵称等，非必填" position="top">
|
||||
<Tooltip title="可填写客户名称、昵称等，非必填" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478 ml-4px" size="14" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="jsx">
|
||||
import { Modal, Button, Form, FormItem, RadioGroup, Radio, Input } from 'ant-design-vue';
|
||||
import { Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
|
||||
import { Upload, Message as AMessage } from '@arco-design/web-vue';
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { getWriterLinksGenerate, getTemplateUrl, postWorksByLink, postWorksByFile } from '@/api/all/generationWorkshop';
|
||||
import { generateFullUrl } from '@/utils/tools';
|
||||
@ -9,6 +9,8 @@ import { slsWithCatch } from '@/utils/stroage.ts';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import icon1 from '@/assets/img/media-account/icon-feedback-fail.png';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
// 状态枚举
|
||||
const TASK_STATUS = {
|
||||
DEFAULT: 1,
|
||||
@ -211,8 +213,8 @@ export default {
|
||||
// 渲染链接上传表单
|
||||
const renderLinkForm = () => (
|
||||
<FormItem label="链接地址" name="link" required>
|
||||
<Textarea
|
||||
v-model={form.value.link}
|
||||
<TextArea
|
||||
v-model:value={form.value.link}
|
||||
size="large"
|
||||
placeholder="请输入飞书链接地址"
|
||||
autoSize={{ minRows: 5, maxRows: 8 }}
|
||||
|
||||
@ -29,9 +29,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { CHECK_STATUS, EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
|
||||
@ -33,9 +33,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'name'" #cell="{ record }">
|
||||
@ -84,7 +84,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools';
|
||||
import { slsWithCatch } from '@/utils/stroage.ts';
|
||||
import { TABS_LIST, ORIGIN_LIST } from '../../constants';
|
||||
|
||||
@ -11,16 +11,17 @@
|
||||
:indeterminate="indeterminate"
|
||||
class="!pl-13px"
|
||||
@change="(e) => handleSelectAll(e.target.checked)"
|
||||
>全选</Checkbox>
|
||||
>全选</Checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
|
||||
<template #icon> <icon-download class="mr-8px"/> </template>
|
||||
<template #icon> <icon-download class="mr-8px" /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</Button>
|
||||
<Button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" class="mr-8px"/>
|
||||
<img :src="icon1" width="14" height="14" class="mr-8px" />
|
||||
</template>
|
||||
<template #default>自定义列</template>
|
||||
</Button>
|
||||
@ -66,9 +67,9 @@
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -140,7 +141,6 @@
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
|
||||
</a-table-column>
|
||||
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
|
||||
<template #cell="{ record }">
|
||||
@ -161,7 +161,7 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Checkbox, Button } from 'ant-design-vue';
|
||||
import { Checkbox, Button, Tooltip } from 'ant-design-vue';
|
||||
|
||||
import { getCustomColumns } from '@/api/all/common';
|
||||
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
|
||||
@ -209,7 +209,7 @@ const dateType = computed(() => (props.query.type === 7 ? 'week' : 'month'));
|
||||
const tableColumns = computed(() => {
|
||||
const _result = [];
|
||||
const _columns = getDefaultColumns(dateType.value);
|
||||
console.log({_columns})
|
||||
console.log({ _columns });
|
||||
|
||||
selectedColumns.value.forEach((item) => {
|
||||
const _column = _columns.find((_item) => _item.prop === item);
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
<div class="top flex h-64px py-10px justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
|
||||
<a-tooltip content="展示所筛选的账号的信息汇总">
|
||||
<Tooltip title="展示所筛选的账号的信息汇总">
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-row flex">
|
||||
@ -19,15 +19,15 @@
|
||||
<div class="flex items-center mb-8px">
|
||||
<img :src="item.icon" width="20" height="20" class="mr-8px" />
|
||||
<p class="label color-#211F24">{{ item.label }}</p>
|
||||
<a-tooltip v-if="item.tooltip" :content="item.tooltip">
|
||||
<Tooltip v-if="item.tooltip" :title="item.tooltip">
|
||||
<img :src="icon1" width="14" height="14" class="ml-4px" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span class="value color-#211F24 ml-32px">{{ formatNumberShow(overviewData[item.prop]) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" bg-#fff rounded-8px mb-16px">
|
||||
<div class="bg-#fff rounded-8px mb-16px">
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
@ -60,6 +60,7 @@
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Date: 2025-06-28 12:58:25
|
||||
-->
|
||||
<template>
|
||||
<div class="account-info-wrap bg-#fff rounded-8px px-24px mb-16px">
|
||||
<div class="account-info-wrap bg-#fff rounded-8px px-24px mb-16px">
|
||||
<div class="title-row">
|
||||
<span class="cts !text-18px !lh-26px title">账号信息</span>
|
||||
</div>
|
||||
@ -47,9 +47,9 @@
|
||||
<template v-else>
|
||||
<div class="flex items-center mb-4px">
|
||||
<p class="cts !color-#737478 !mr-4px">{{ field.title }}</p>
|
||||
<a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
|
||||
<Tooltip v-if="field.tooltip" :title="field.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p class="cts">
|
||||
<template v-if="field.type === 'status'">
|
||||
@ -60,10 +60,10 @@
|
||||
<div v-for="(tag, index) in detailData.tags.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ tag.name }}</span>
|
||||
</div>
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="detailData.tags.length > 2"
|
||||
position="top"
|
||||
:content="
|
||||
:title="
|
||||
detailData.tags
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -73,7 +73,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${detailData.tags.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span class="cts" v-else>-</span>
|
||||
</template>
|
||||
@ -88,7 +88,12 @@
|
||||
}}
|
||||
</template>
|
||||
<template v-else-if="field.dataIndex === 'platform'">
|
||||
<img :src="getMediaAccountPlatformLogo(detailData.platform)" width="16" height="16" class="rounded-4px" />
|
||||
<img
|
||||
:src="getMediaAccountPlatformLogo(detailData.platform)"
|
||||
width="16"
|
||||
height="16"
|
||||
class="rounded-4px"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field.dataIndex === 'last_synced_at'">
|
||||
{{ exactFormatTime(detailData.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
|
||||
@ -132,6 +137,7 @@
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
|
||||
import { getMediaAccountPlatformLogo } from '@/utils/platform';
|
||||
import { getAccountInfoFields } from '../../constants';
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
|
||||
<a-tooltip content="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
|
||||
<Tooltip title="展示笔记层级的详细数据，如曝光、互动等，是内容精细分析入口。">
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex my-16px">
|
||||
@ -73,9 +73,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Tooltip } from 'ant-design-vue';
|
||||
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
|
||||
|
||||
@ -3,7 +3,8 @@ import {
|
||||
EnumErrorStatus,
|
||||
getStatusInfo,
|
||||
} from '@/views/property-marketing/media-account/components/status-select/status-box';
|
||||
import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
|
||||
import { Dropdown, Doption } from '@arco-design/web-vue';
|
||||
import { Tooltip, Button } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
name: 'FooterBtn',
|
||||
props: {
|
||||
@ -42,7 +43,7 @@ export default defineComponent({
|
||||
};
|
||||
const renderUpdateBtn = () => {
|
||||
return (
|
||||
<Button type="outline" size="mini" onClick={() => emit('syncData', props.item)}>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('syncData', props.item)}>
|
||||
更新数据
|
||||
</Button>
|
||||
);
|
||||
@ -61,7 +62,7 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="outline" class="mr-8px" size="mini">
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
@ -86,7 +87,7 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="outline" class="mr-8px" size="mini">
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
@ -98,7 +99,7 @@ export default defineComponent({
|
||||
),
|
||||
}}
|
||||
></Dropdown>
|
||||
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
开启同步
|
||||
</Button>
|
||||
</>
|
||||
@ -115,15 +116,15 @@ export default defineComponent({
|
||||
return renderUpdateBtn();
|
||||
} else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
|
||||
return (
|
||||
<Tooltip content={statusInfo.value.disabledBtnTooltip}>
|
||||
<Button type="outline" size="mini" disabled>
|
||||
<Tooltip title={statusInfo.value.disabledBtnTooltip}>
|
||||
<Button type="primary" ghost size="small" disabled>
|
||||
重新授权
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button type="outline" size="mini" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
<Button type="primary" ghost size="small" onClick={() => emit('handleReauthorize', props.item)}>
|
||||
{isUnauthorized ? '去授权' : '重新授权'}
|
||||
</Button>
|
||||
);
|
||||
@ -135,7 +136,7 @@ export default defineComponent({
|
||||
trigger="hover"
|
||||
v-slots={{
|
||||
default: () => (
|
||||
<Button type="outline" class="mr-8px" size="mini">
|
||||
<Button type="primary" ghost class="mr-8px" size="small">
|
||||
更多
|
||||
</Button>
|
||||
),
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
</template>
|
||||
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></Checkbox>
|
||||
<div class="ml-8px flex-1">
|
||||
<a-tooltip content="点击查看账号详情">
|
||||
<Tooltip title="点击查看账号详情">
|
||||
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
<div class="field-row">
|
||||
<span class="label">状态</span>
|
||||
<StatusBox :item="item" />
|
||||
@ -50,10 +50,10 @@
|
||||
<span class="label">所属项目</span>
|
||||
<span v-if="!item.projects.length" class="cts">-</span>
|
||||
<div v-else class="flex items-center">
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="item.projects.length > 2"
|
||||
position="bottom"
|
||||
:content="
|
||||
placement="bottom"
|
||||
:title="
|
||||
item.projects
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -63,7 +63,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
|
||||
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ project.name }}</span>
|
||||
@ -78,10 +78,10 @@
|
||||
<span class="label">标签</span>
|
||||
<span v-if="!item.tags.length" class="cts">-</span>
|
||||
<div v-else class="flex items-center">
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="item.tags.length > 2"
|
||||
position="bottom"
|
||||
:content="
|
||||
placement="bottom"
|
||||
:title="
|
||||
item.tags
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -91,7 +91,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${item.tags.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
|
||||
<div v-for="(tag, index) in item.tags.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ tag.name }}</span>
|
||||
@ -130,7 +130,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed, inject } from 'vue';
|
||||
import { Checkbox, Button } from 'ant-design-vue';
|
||||
import { Checkbox, Button, Tooltip } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
|
||||
import { exactFormatTime } from '@/utils/tools';
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
<script lang="jsx">
|
||||
import { ref, computed } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, RadioGroup, Radio, Input } from 'ant-design-vue';
|
||||
import { Upload, Switch, Tooltip, Message as AMessage, Textarea } from '@arco-design/web-vue';
|
||||
const { TextArea } = Input;
|
||||
import { Upload, Switch, Message as AMessage } from '@arco-design/web-vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
// import ImportPromptModal from '../import-prompt-modal';
|
||||
import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
|
||||
@ -75,15 +77,14 @@ export default {
|
||||
mobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value, callback) => {
|
||||
validator: (_rule, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请填写手机号');
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback('手机号格式不正确');
|
||||
return Promise.reject('手机号格式不正确');
|
||||
} else {
|
||||
callback();
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
@ -403,11 +404,11 @@ export default {
|
||||
renderLabel('笔记链接', '平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集'),
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
v-model={form.value.end_work_link}
|
||||
<TextArea
|
||||
v-model:value={form.value.end_work_link}
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
auto-size={{ minRows: 3, maxRows: 5 }}
|
||||
autoSize={{ minRows: 3, maxRows: 5 }}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
@ -419,12 +420,12 @@ export default {
|
||||
<Switch v-model={isCustomCookie.value} size="large" />
|
||||
</FormItem>
|
||||
{isCustomCookie.value && (
|
||||
<FormItem label="" name="cookie">
|
||||
<Textarea
|
||||
v-model={form.value.cookie}
|
||||
<FormItem label=" " name="cookie">
|
||||
<TextArea
|
||||
v-model:value={form.value.cookie}
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
auto-size={{ minRows: 5, maxRows: 8 }}
|
||||
autoSize={{ minRows: 5, maxRows: 8 }}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
|
||||
@ -20,9 +20,9 @@
|
||||
<Radio value="all">
|
||||
<div class="flex items-center">
|
||||
<span>统一编辑</span>
|
||||
<a-tooltip content="原标签将被清除，统一为新标签。">
|
||||
<Tooltip title="原标签将被清除，统一为新标签。">
|
||||
<img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Radio>
|
||||
<Radio value="each">分别编辑</Radio>
|
||||
@ -83,7 +83,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, RadioGroup, Radio, Select } from 'ant-design-vue';
|
||||
import { Button, Modal, Form, FormItem,Tooltip, RadioGroup, Radio, Select } from 'ant-design-vue';
|
||||
import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
@ -39,12 +39,12 @@
|
||||
|
||||
<div class="h-300px">
|
||||
<div v-if="showDataSource.length" class="tag-list">
|
||||
<a-tooltip v-for="tag in showDataSource" :key="tag.id" content="双击修改标签名">
|
||||
<Tooltip v-for="tag in showDataSource" :key="tag.id" title="双击修改标签名">
|
||||
<div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
|
||||
<span>{{ tag.name }}</span>
|
||||
<img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<template v-else>
|
||||
<NoData>
|
||||
@ -66,7 +66,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button, Modal, Input } from 'ant-design-vue';
|
||||
import { Button, Modal, Input, Tooltip } from 'ant-design-vue';
|
||||
import { getTagsList } from '@/api/all/propertyMarketing';
|
||||
import AddTag from './add-tag.vue';
|
||||
import DeleteTag from './delete-tag.vue';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { Tooltip } from '@arco-design/web-vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
|
||||
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
|
||||
@ -111,7 +111,7 @@ export default defineComponent({
|
||||
const { background, color, label } = statusInfo.value;
|
||||
if (status === EnumStatus.NORMAL) {
|
||||
return (
|
||||
<div class="flex items-center status-box">
|
||||
<div class="flex items-center status-box w-fit">
|
||||
{to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
|
||||
<div class="flex items-center rounded-2px px-8px mr-8px" style={{ background, color }}>
|
||||
<img src={icon1} width="12" height="12" class="mr-4px" />
|
||||
@ -129,12 +129,12 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
|
||||
<div class="flex items-center rounded-2px px-8px status-box w-fit" style={{ background, color }}>
|
||||
<span class="text-14px lh-22px font-400 label">{label}</span>
|
||||
{status === EnumStatus.PAUSE ? (
|
||||
<img src={iconWarn1} width="12" height="12" class="ml-4px" />
|
||||
) : (
|
||||
<Tooltip content={statusInfo.value.tooltip}>
|
||||
<Tooltip title={statusInfo.value.tooltip}>
|
||||
<img src={iconWarn2} width="12" height="12" class="ml-4px" />
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@ -73,9 +73,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -99,9 +99,9 @@
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<template v-if="selectedRows?.length">
|
||||
<div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
|
||||
<a-tooltip :content="item.name">
|
||||
<Tooltip :title="item.name">
|
||||
<p class="name mr-4px">{{ item.name || '-' }}</p>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
|
||||
</div>
|
||||
</template>
|
||||
@ -113,7 +113,7 @@
|
||||
|
||||
<script setup>
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
import { Button, Input, Select, Tooltip } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
|
||||
import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
|
||||
|
||||
@ -76,9 +76,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -102,9 +102,9 @@
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<template v-if="selectedRows?.length">
|
||||
<div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
|
||||
<a-tooltip :content="item.name">
|
||||
<Tooltip :title="item.name">
|
||||
<p class="name mr-4px">{{ item.name || '-' }}</p>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
<icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
|
||||
</div>
|
||||
</template>
|
||||
@ -117,7 +117,7 @@
|
||||
<script setup>
|
||||
import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
import { Button, Input, Select, Tooltip } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
|
||||
import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
|
||||
|
||||
@ -76,9 +76,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
<script setup>
|
||||
import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
import { Button, Input, Select, Tooltip } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
|
||||
import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
|
||||
|
||||
@ -29,9 +29,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="account-dashboard-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
|
||||
<a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
|
||||
<a-tab-pane key="1" title="账户"></a-tab-pane>
|
||||
<a-tab-pane key="2" title="计划"></a-tab-pane>
|
||||
</a-tabs>
|
||||
<Tabs v-model:activeKey="accountType" @change="handleTabClick" size="large">
|
||||
<TabPane key="1" tab="账户"></TabPane>
|
||||
<TabPane key="2" tab="计划"></TabPane>
|
||||
</Tabs>
|
||||
|
||||
<div class="container px-24px">
|
||||
<div class="container pt-24px px-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center" v-if="accountType == 2">
|
||||
<span class="label">计划名称</span>
|
||||
@ -67,7 +67,7 @@
|
||||
<script setup lang="ts">
|
||||
import EchartsItem from './components/echarts-item/index';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import { Button, Select } from 'ant-design-vue';
|
||||
import { Button, Select, Tabs } from 'ant-design-vue';
|
||||
import {
|
||||
getPlacementAccountsTrend,
|
||||
getPlacementAccountProjectsTrend,
|
||||
@ -77,8 +77,9 @@ import CommonSelect from '@/components/common-select';
|
||||
import AccountSelect from '@/views/components/common/AccountSelect.vue';
|
||||
import PlanSelect from '@/views/components/common/PlanSelect.vue';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { Option } = Select;
|
||||
const accountType = ref(1);
|
||||
const accountType = ref("1");
|
||||
|
||||
const onLoading = ref(true);
|
||||
|
||||
|
||||
@ -19,13 +19,6 @@
|
||||
border-radius: 8px;
|
||||
// border: 1px solid #e6e6e8;
|
||||
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-tab {
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
.title {
|
||||
font-family: $font-family-medium;
|
||||
|
||||
@ -68,9 +68,9 @@
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<div class="container px-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<div class="common-filter-wrap">
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span>
|
||||
<Input
|
||||
v-model:value="query.name"
|
||||
@ -21,15 +21,15 @@
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
|
||||
<div v-if="!isAccountTab" class="filter-row-item">
|
||||
<span class="label">计划分组</span>
|
||||
<CommonSelect class="w-200px" v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">状态</span>
|
||||
<StatusSelect class="w-180px" v-model="query.status" @change="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">运营人员</span>
|
||||
<CommonSelect
|
||||
class="w-160px"
|
||||
@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<div v-if="!isAccountTab" class="filter-row-item flex items-center">
|
||||
<div v-if="!isAccountTab" class="filter-row-item">
|
||||
<span class="label">关联账户</span>
|
||||
<CommonSelect
|
||||
class="w-240px"
|
||||
@ -50,7 +50,7 @@
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<div class="filter-row-item">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-range-picker
|
||||
v-model="query.data_time"
|
||||
@ -61,18 +61,20 @@
|
||||
@change="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search class="mr-8px" />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</Button>
|
||||
<Button @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh class="mr-8px" />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</Button>
|
||||
<div class="filter-row-item">
|
||||
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search class="mr-8px" />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</Button>
|
||||
<Button @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh class="mr-8px" />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
centered
|
||||
@cancel="onClose"
|
||||
>
|
||||
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<Form ref="formRef" :model="form" :rules="rules" layout="horizontal">
|
||||
<FormItem :label="isEdit ? '分组名称' : '新分组名称'" name="name" required>
|
||||
<Input v-model:value="form.name" placeholder="请输入…" />
|
||||
</FormItem>
|
||||
|
||||
@ -68,9 +68,9 @@
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluate'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -4,19 +4,21 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-data-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
|
||||
<a-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||
<a-tab-pane key="1" title="账户"></a-tab-pane>
|
||||
<a-tab-pane key="2" title="计划"></a-tab-pane>
|
||||
<template v-if="!isAccountTab" #extra>
|
||||
<Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
|
||||
<template #icon>
|
||||
<img :src="icon2" width="16" height="16" class="mr-8px" />
|
||||
</template>
|
||||
<template #default>分组管理</template>
|
||||
</Button>
|
||||
</template>
|
||||
</a-tabs>
|
||||
<div class="filter-wrap bg-#fff rounded-8px mb-16px">
|
||||
<Tabs v-model:activeKey="activeTab" @change="handleTabClick" size="large">
|
||||
<TabPane key="1" tab="账户"></TabPane>
|
||||
<TabPane key="2" tab="计划">
|
||||
<template v-if="!isAccountTab" #tab>
|
||||
计划
|
||||
<Button type="primary" ghost class="mr-12px flex items-center" @click="handleOpenGroupModal">
|
||||
<template #icon>
|
||||
<img :src="icon2" width="16" height="16" class="mr-8px" />
|
||||
</template>
|
||||
<template #default>分组管理</template>
|
||||
</Button>
|
||||
</template>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<FilterBlock
|
||||
ref="filterBlockRef"
|
||||
v-model:query="query"
|
||||
@ -54,7 +56,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tabs } from 'ant-design-vue';
|
||||
const { TabPane } = Tabs;
|
||||
import FilterBlock from './components/filter-block';
|
||||
import BoardTable from './components/board-table';
|
||||
import PlanTable from './components/plan-table';
|
||||
|
||||
@ -4,12 +4,6 @@
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
// border: 1px solid #e6e6e8;
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-tab {
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
|
||||
@ -45,10 +45,10 @@
|
||||
<span class="label">所属项目</span>
|
||||
<span v-if="!item.projects.length" class="cts">-</span>
|
||||
<div v-else class="flex items-center">
|
||||
<a-tooltip
|
||||
<Tooltip
|
||||
v-if="item.projects.length > 2"
|
||||
position="bottom"
|
||||
:content="
|
||||
placement="bottom"
|
||||
:title="
|
||||
item.projects
|
||||
.slice(2)
|
||||
.map((v) => v.name)
|
||||
@ -58,7 +58,7 @@
|
||||
<div class="tag-box">
|
||||
<span class="text">{{ `+${item.projects.length - 2}` }}</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
|
||||
<div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
|
||||
<span class="text">{{ project.name }}</span>
|
||||
@ -101,7 +101,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Checkbox, Button } from 'ant-design-vue';
|
||||
import { Checkbox, Button, Tooltip } from 'ant-design-vue';
|
||||
import { defineProps, ref, computed } from 'vue';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import { EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
:rules="formRules"
|
||||
layout="horizontal"
|
||||
labelAlign="right"
|
||||
:labelCol="{ span: 5 }"
|
||||
:wrapperCol="{ span: 19 }"
|
||||
:labelCol="{ span: 6 }"
|
||||
:wrapperCol="{ span: 18 }"
|
||||
>
|
||||
<FormItem v-if="!isEdit" label="上传方式" required>
|
||||
<RadioGroup v-model:value="uploadType">
|
||||
@ -87,7 +87,7 @@
|
||||
<template v-else>
|
||||
<template v-if="isEdit">
|
||||
<FormItem label="账户名称" name="name">
|
||||
<Input v-model:value="form.name" placeholder="请输入..." disabled />
|
||||
<Input v-model:value="form.name" placeholder="请输入..." disabled size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="账户ID" name="account_id">
|
||||
<Input v-model:value="form.account_id" placeholder="请输入..." size="large" disabled />
|
||||
@ -131,12 +131,12 @@
|
||||
<Input v-model:value="form.balance_amount" placeholder="请输入..." size="large" disabled />
|
||||
</FormItem>
|
||||
</template>
|
||||
<FormItem label="同步项目数据" name="is_sync_project">
|
||||
<FormItem name="is_sync_project">
|
||||
<template #label>
|
||||
<span class="label">同步项目数据</span>
|
||||
<a-tooltip content="同步项目数据后，账户数据将同步到项目中">
|
||||
<Tooltip title="同步项目数据后，账户数据将同步到项目中">
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
|
||||
</FormItem>
|
||||
@ -155,7 +155,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Modal, Form, FormItem, Button, Input, RadioGroup, Radio } from 'ant-design-vue';
|
||||
import { Modal, Form, FormItem, Button, Input, RadioGroup, Radio, Tooltip } from 'ant-design-vue';
|
||||
import { ref, defineEmits } from 'vue';
|
||||
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
|
||||
@ -31,7 +31,16 @@
|
||||
<p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
|
||||
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
|
||||
</template>
|
||||
<Form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
|
||||
<Form
|
||||
v-else
|
||||
class="w-full"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="horizontal"
|
||||
:labelCol="{ span: 3 }"
|
||||
:wrapperCol="{ span: 21 }"
|
||||
>
|
||||
<FormItem label="账户" name="account">
|
||||
<Input v-model:value="form.account" placeholder="请输入..." size="large" />
|
||||
</FormItem>
|
||||
|
||||
@ -75,9 +75,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, Tooltip } from 'ant-design-vue';
|
||||
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
|
||||
@ -210,4 +210,3 @@ defineExpose({ open });
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
|
||||
@ -3,16 +3,17 @@
|
||||
* @Date: 2025-06-25 15:31:15
|
||||
-->
|
||||
<template>
|
||||
<div class="status-box" :class="`status-box-${status}`">
|
||||
<div class="status-box w-fit" :class="`status-box-${status}`">
|
||||
<span class="text">{{ statusText }}</span>
|
||||
<a-tooltip v-if="showTooltip" :content="tooltipText">
|
||||
<Tooltip v-if="showTooltip" :title="tooltipText">
|
||||
<img v-if="showIcon" :src="iconSrc" width="12" height="12" class="ml-4px" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import { STATUS_LIST, EnumPutAccountStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
|
||||
|
||||
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
@ -2,17 +2,16 @@
|
||||
<div class="guidelines-data-wrap">
|
||||
<div class="part-div">
|
||||
<div>
|
||||
<a-tabs
|
||||
<Tabs
|
||||
v-model:activeKey="tabData"
|
||||
@tab-click="onSearch"
|
||||
@change="onSearch"
|
||||
class="a-tab-class ignore-export"
|
||||
default-active-key="placement_guide"
|
||||
defaultActiveKey="placement_guide"
|
||||
size="large"
|
||||
>
|
||||
<a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
|
||||
<a-tab-pane key="guide_history">
|
||||
<template #title>历史指南列表</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<TabPane key="placement_guide" tab="投放指南"></TabPane>
|
||||
<TabPane key="guide_history" tab="历史指南列表"></TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
<!--表单组件搜索-->
|
||||
<listSearchForm
|
||||
@ -74,7 +73,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tabs } from 'ant-design-vue';
|
||||
const { TabPane } = Tabs;
|
||||
import PlacementGuideList from './components/table-data/placementGuideList.vue';
|
||||
import listSearchForm from './components/table-data/listSearchForm.vue';
|
||||
import GuideListHistory from './components/table-data/guideListHistory.vue';
|
||||
|
||||
@ -33,9 +33,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
<script lang="jsx">
|
||||
import axios from 'axios';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Input, Tabs } from 'ant-design-vue';
|
||||
|
||||
const { TextArea } = Input;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
import { IconLoading } from '@arco-design/web-vue/es/icon';
|
||||
import { Image, Textarea, Tabs, Upload, TabPane, Spin, Message as AMessage } from '@arco-design/web-vue';
|
||||
import { Image, Upload, Spin, Message as AMessage } from '@arco-design/web-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
import 'swiper/css';
|
||||
@ -214,12 +218,12 @@ export default {
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="作品描述" name="content" class="flex-1 content-form-item">
|
||||
<Textarea
|
||||
v-model={props.modelValue.content}
|
||||
<TextArea
|
||||
v-model:value={props.modelValue.content}
|
||||
placeholder="请输入作品描述"
|
||||
size="large"
|
||||
show-word-limit
|
||||
maxLength={1000}
|
||||
showCount
|
||||
maxlength={1000}
|
||||
disabled={isDisabled.value}
|
||||
/>
|
||||
</FormItem>
|
||||
@ -420,22 +424,20 @@ export default {
|
||||
<div class="h-full w-full px-24px pt-16px pb-24px content-wrap flex">
|
||||
<div class="flex-2 left-box mr-24px flex flex-col">
|
||||
<div class="flex-1 mb-12px rounded-8px border-1px pt-8px flex flex-col pb-16px bg-#F7F8FA border-#E6E6E8 border-solid">
|
||||
<Tabs v-model={activeTab.value} onTabClick={handleTabClick} class="mb-16px">
|
||||
<Tabs activeKey={activeTab.value} onChange={handleTabClick} class="mb-16px">
|
||||
{TAB_LIST.map((item) => (
|
||||
<TabPane
|
||||
key={item.value}
|
||||
v-slots={{
|
||||
title: () => (
|
||||
<div class="flex items-center relative">
|
||||
<span>{item.label}</span>
|
||||
{
|
||||
// activeTab.value === item.value && aiReview.value?.violation_items.length > 0 && (
|
||||
// <icon-exclamation-circle-fill size={14} class="color-#F64B31 absolute right--10px top-0" />
|
||||
// )
|
||||
}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
tab={(
|
||||
<div class="flex items-center relative">
|
||||
<span>{item.label}</span>
|
||||
{
|
||||
// activeTab.value === item.value && aiReview.value?.violation_items.length > 0 && (
|
||||
// <icon-exclamation-circle-fill size={14} class="color-#F64B31 absolute right--10px top-0" />
|
||||
// )
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
@ -22,21 +22,6 @@
|
||||
}
|
||||
}
|
||||
.left-box {
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-nav {
|
||||
.arco-tabs-tab {
|
||||
height: 40px;
|
||||
// padding: 0 8px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.arco-tabs-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:deep(.ant-form) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script lang="jsx">
|
||||
import axios from 'axios';
|
||||
import { Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
|
||||
const { TextArea } = Input;
|
||||
import { Upload, Message as AMessage } from '@arco-design/web-vue';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
@ -326,15 +327,15 @@ export default {
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="作品描述" name="content">
|
||||
<Textarea
|
||||
<TextArea
|
||||
v-model:value={formData.value.content}
|
||||
onInput={onChange}
|
||||
placeholder="请输入作品描述"
|
||||
size="large"
|
||||
class="h-300px !w-784px"
|
||||
show-word-limit
|
||||
max-length={1000}
|
||||
auto-size={{ minRows: 7, maxRows: 12 }}
|
||||
showCount
|
||||
maxlength={1000}
|
||||
autoSize={{ minRows: 7, maxRows: 12 }}
|
||||
/>
|
||||
</FormItem>
|
||||
{isVideo.value ? (
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="jsx">
|
||||
import { Modal, Button, Form, FormItem } from 'ant-design-vue';
|
||||
import { Upload, Message as AMessage, Textarea } from '@arco-design/web-vue';
|
||||
import { Modal, Button, Form, FormItem, Input } from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
import { Upload, Message as AMessage } from '@arco-design/web-vue';
|
||||
import {
|
||||
getTemplateUrlWriter,
|
||||
postWorksByLinkWriter,
|
||||
@ -188,8 +189,8 @@ export default {
|
||||
// 渲染链接上传表单
|
||||
const renderLinkForm = () => (
|
||||
<FormItem label="链接地址" name="link" required>
|
||||
<Textarea
|
||||
v-model={form.value.link}
|
||||
<TextArea
|
||||
v-model:value={form.value.link}
|
||||
size="large"
|
||||
placeholder="请输入飞书链接地址"
|
||||
autoSize={{ minRows: 5, maxRows: 8 }}
|
||||
|
||||
@ -29,9 +29,9 @@
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button, Tooltip } from 'ant-design-vue';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import {
|
||||
|
||||
Reference in New Issue
Block a user