feat: 升级vue3版本和router版本，主框架调整，页面样式统一
This commit is contained in:
rd
@ -14,6 +14,7 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const route = useRoute();
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
const redTheme = {
|
||||
|
||||
@ -1,95 +1,38 @@
|
||||
<template>
|
||||
<div class="navbar-menu h-100%">
|
||||
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
||||
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
||||
<template v-if="item.children">
|
||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||
<a-button type="text">
|
||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(child, ind) in item.children"
|
||||
:key="ind"
|
||||
@click="handleDropdownClick(child)"
|
||||
:class="{ active: child.includeRouteNames.includes(route.name) }"
|
||||
<script lang="jsx">
|
||||
import { Sender } from 'ant-design-x-vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const keyWord = ref('');
|
||||
const handleSearch = () => {
|
||||
console.log('handleSearch', keyWord.value);
|
||||
};
|
||||
return () => (
|
||||
<div class="middle-wrap h-100% flex-1 flex items-center justify-center px-24px">
|
||||
<Input
|
||||
v-model:value={keyWord.value}
|
||||
onPressEnter={handleSearch}
|
||||
size="large"
|
||||
class="sender-input-wrap"
|
||||
placeholder="随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。"
|
||||
v-slots={{
|
||||
suffix: () => (
|
||||
<div
|
||||
class="bg-#F0EDFF rounded-16px w-32px h-32px flex justify-center items-center icon cursor-pointer"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
|
||||
<span class="menu-item-text"> {{ item.name }}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
// import router from '@/router';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const selectedKey = computed(() => {
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
});
|
||||
const menuList = computed(() => {
|
||||
return sidebarStore.menuList;
|
||||
});
|
||||
|
||||
const handleDropdownClick = (item) => {
|
||||
router.push({ name: item.routeName });
|
||||
<icon-arrow-right size={20} class="color-#6D4CFE" />
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.layout-menu-item-dropdown {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
&.active {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.menu-item-text {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,45 +1,53 @@
|
||||
.navbar-menu {
|
||||
.middle-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.arco-menu) {
|
||||
height: 100%;
|
||||
.arco-menu-inner {
|
||||
padding: 0 24px;
|
||||
.sender-input-wrap {
|
||||
width: 560px;
|
||||
height: 36px;
|
||||
padding: 0 2px 0 16px;
|
||||
border-radius: 50px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: none;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:deep(.ant-input-suffix) {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.arco-menu-item {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.arco-menu-selected {
|
||||
.menu-item-text,
|
||||
.arco-menu-selected-label {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
.arco-menu-selected-label {
|
||||
background: var(--Brand-Brand-6, #6d4cfe);
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
:deep(.ant-input) {
|
||||
padding-right: 16px;
|
||||
border: none !important;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
font-family: $font-family-regular;
|
||||
color: #211f24;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
border-color: #6d4cfe;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #939499;
|
||||
}
|
||||
&:focus {
|
||||
border-color: #6d4cfe !important;
|
||||
caret-color: #6D4CFE;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
&::after {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon-down {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
.icon {
|
||||
transition: background 0.3s;
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--Brand-1, #f0edff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,6 @@ const route = useRoute();
|
||||
|
||||
useResponsive(true);
|
||||
const navbarHeight = `52px`;
|
||||
const navbar = computed(() => appStore.navbar);
|
||||
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
|
||||
const hideMenu = computed(() => appStore.hideMenu);
|
||||
|
||||
@ -33,8 +32,7 @@ const showSidebar = computed(() => {
|
||||
const paddingStyle = computed(() => {
|
||||
const paddingLeft =
|
||||
showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
|
||||
const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
|
||||
return { ...paddingLeft, ...paddingTop };
|
||||
return { ...paddingLeft };
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
@ -61,114 +59,100 @@ provide('toggleDrawerMenu', () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout :class="['layout', { mobile: appStore.hideMenu }]" class="h-100vh flex flex-col w-full">
|
||||
<a-layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
|
||||
<JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
|
||||
<div v-if="navbar" class="layout-navbar">
|
||||
<section class="layout-navbar-wrap">
|
||||
<base-navbar />
|
||||
</div>
|
||||
<a-layout>
|
||||
<a-layout>
|
||||
<a-layout-sider
|
||||
v-if="renderMenu && showSidebar"
|
||||
v-show="!hideMenu"
|
||||
class="layout-sider"
|
||||
breakpoint="xl"
|
||||
:collapsed="collapsed"
|
||||
:width="menuWidth"
|
||||
:style="{ paddingTop: navbar ? '72px' : '' }"
|
||||
collapsible
|
||||
hide-trigger
|
||||
@collapse="setCollapsed"
|
||||
>
|
||||
<div class="menu-wrapper">
|
||||
<base-menu />
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
<a-drawer
|
||||
v-if="hideMenu"
|
||||
:visible="drawerVisible"
|
||||
placement="left"
|
||||
:footer="false"
|
||||
mask-closable
|
||||
:closable="false"
|
||||
@cancel="drawerCancel"
|
||||
>
|
||||
</section>
|
||||
<a-layout class="flex layout-content-wrap">
|
||||
<a-layout-sider
|
||||
v-if="renderMenu && showSidebar"
|
||||
v-show="!hideMenu"
|
||||
class="layout-sider"
|
||||
breakpoint="xl"
|
||||
:collapsed="collapsed"
|
||||
:width="menuWidth"
|
||||
collapsible
|
||||
hide-trigger
|
||||
@collapse="setCollapsed"
|
||||
>
|
||||
<section class="menu-wrapper">
|
||||
<base-menu />
|
||||
</a-drawer>
|
||||
<a-layout class="layout-content" :style="paddingStyle">
|
||||
<base-tab-bar v-if="appStore.tabBar" />
|
||||
<a-layout-content class="px-5 py-5">
|
||||
<!-- <base-breadcrumb /> -->
|
||||
<layout-page />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</section>
|
||||
</a-layout-sider>
|
||||
<a-drawer
|
||||
v-if="hideMenu"
|
||||
:visible="drawerVisible"
|
||||
placement="left"
|
||||
:footer="false"
|
||||
mask-closable
|
||||
:closable="false"
|
||||
@cancel="drawerCancel"
|
||||
>
|
||||
<base-menu />
|
||||
</a-drawer>
|
||||
<a-layout class="flex-1 layout-content">
|
||||
<a-layout-content class="px-24px py-16px">
|
||||
<layout-page />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$layout-max-width: 1100px;
|
||||
|
||||
.layout {
|
||||
.layout-navbar {
|
||||
position: fixed;
|
||||
.layout-wrap {
|
||||
min-width: 1200px;
|
||||
.layout-navbar-wrap {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: $navbar-height;
|
||||
}
|
||||
.layout-sider {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
.layout-content-wrap {
|
||||
height: 100%;
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: -1px;
|
||||
// display: block;
|
||||
// width: 1px;
|
||||
// height: 100%;
|
||||
// background-color: var(--color-border);
|
||||
// content: '';
|
||||
// }
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
min-height: calc(100vh - $navbar-height);
|
||||
.layout-sider {
|
||||
position: sticky;
|
||||
top: $navbar-height;
|
||||
left: 0;
|
||||
// height: 100%;
|
||||
height: calc(100vh - $navbar-height);
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-3);
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-text-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-content {
|
||||
min-width: 1366px;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
padding-top: $navbar-height;
|
||||
.layout-content {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,7 +26,7 @@ export const router = createRouter({
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/components/workplace/index.vue'),
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
meta: {
|
||||
hideSidebar: true,
|
||||
requiresAuth: false,
|
||||
|
||||
3
src/router/typeings.d.ts
vendored
3
src/router/typeings.d.ts
vendored
@ -15,7 +15,8 @@ declare module 'vue-router' {
|
||||
ignoreCache?: boolean; // if set true, the page will not be cached
|
||||
hideSidebar?: boolean;
|
||||
hideFooter?: boolean;
|
||||
isAgentRoute?:boolean;
|
||||
isAgentRoute?: boolean;
|
||||
requireLogin?: boolean; // 是否需要登陆才能访问
|
||||
independent?: boolean; // 独立于layout的路由
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,3 +48,10 @@
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.pagination-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 12px 24px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -21,9 +21,9 @@
|
||||
v-model="formData[field.props.name]"
|
||||
:placeholder="field?.props?.placeholder"
|
||||
/>
|
||||
<a-color-picker v-if="field.type === 'color_picker'"
|
||||
<!-- <a-color-picker v-if="field.type === 'color_picker'"
|
||||
style="width: 500px; height: 200px"
|
||||
v-model="formData[field.props.name]" />
|
||||
v-model="formData[field.props.name]" /> -->
|
||||
<ImageUpload
|
||||
v-if="field.type == 'upload_image'"
|
||||
v-model="formData[field.props.name]"
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
@select="handleSelect"
|
||||
@selectAll="handleSelectAll"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -31,12 +31,5 @@
|
||||
.table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
<ManuscriptTable :dataSource="dataSource" @sorterChange="handleSorterChange" @delete="handleDelete" />
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -18,12 +18,5 @@
|
||||
.table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
@select="handleSelect"
|
||||
@selectAll="handleSelectAll"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -31,12 +31,5 @@
|
||||
.table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,31 @@
|
||||
<template>
|
||||
<a-table ref="tableRef" :data="dataSource" row-key="id" column-resizable :pagination="false" :scroll="{ x: '100%' }"
|
||||
class="manuscript-table w-100% flex-1" bordered @sorter-change="handleSorterChange">
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
column-resizable
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="manuscript-table w-100% flex-1"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
>
|
||||
<template #empty>
|
||||
<NoData text="暂无稿件" />
|
||||
</template>
|
||||
<template #columns>
|
||||
<a-table-column v-for="column in TABLE_COLUMNS" :key="column.dataIndex" :data-index="column.dataIndex"
|
||||
:fixed="column.fixed" :width="column.width" :min-width="column.minWidth" :sortable="column.sortable"
|
||||
:align="column.align" ellipsis tooltip>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
@ -21,31 +39,39 @@
|
||||
{{ exactFormatTime(record.create_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'customer_opinion'" #cell="{ record }">
|
||||
<p class="h-28px px-8px flex items-center rounded-2px w-fit"
|
||||
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }">
|
||||
<p
|
||||
class="h-28px px-8px flex items-center rounded-2px w-fit"
|
||||
:style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
|
||||
>
|
||||
<span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
|
||||
getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
|
||||
}}</span>
|
||||
}}</span>
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
|
||||
<TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }">
|
||||
<div class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }">
|
||||
<div
|
||||
class="flex items-center w-fit h-28px px-8px rounded-2px"
|
||||
:style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
|
||||
>
|
||||
<span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
|
||||
getStatusInfo(record.audit_status).name
|
||||
}}</span>
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
|
||||
<div class="flex items-center">
|
||||
<img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16"
|
||||
class="mr-4px" />
|
||||
<img
|
||||
:src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
|
||||
width="16"
|
||||
height="16"
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
|
||||
record.type === EnumManuscriptType.Image ? '图文' : '视频'
|
||||
}}</span>
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
|
||||
@ -83,9 +109,7 @@ import { ref } from 'vue';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
|
||||
import {
|
||||
CUSTOMER_OPINION,
|
||||
} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
|
||||
import { CUSTOMER_OPINION } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
|
||||
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import HoverImagePreview from '@/components/hover-image-preview';
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col"
|
||||
>
|
||||
<ManuscriptTable :dataSource="dataSource" @sorterChange="handleSorterChange" @delete="handleDelete" />
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -18,12 +18,5 @@
|
||||
.table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px 0;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
<script lang="jsx">
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
|
||||
return () => (
|
||||
<div>
|
||||
home
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
setup(props, { emit, expose }) {
|
||||
return () => <div>home</div>;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
|
||||
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col"
|
||||
>
|
||||
<a-table :data="tableData" ref="tableRef" :pagination="false">
|
||||
<template #columns>
|
||||
@ -106,7 +106,7 @@
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div class="pagination-box">
|
||||
<div class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.brand-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -11,14 +10,6 @@
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
>
|
||||
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
|
||||
</a-table>
|
||||
<div class="pagination-box">
|
||||
<div class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
@ -177,14 +177,6 @@ const columns = [
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
>
|
||||
<a-table :columns="columns" :data="tableData" @change="handleChange" :pagination="false">
|
||||
</a-table>
|
||||
<div class="pagination-box">
|
||||
<div class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
@ -169,7 +169,7 @@ const columns = [
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
|
||||
.pagination-box {
|
||||
.pagination-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
:selected-keys="selectedItems"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="account-table w-100%"
|
||||
class="account-table w-100% flex-1"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="handleSelect"
|
||||
|
||||
@ -18,8 +18,6 @@
|
||||
:deep(.status-box) {
|
||||
.label {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.ai-evaluation-row {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
<template>
|
||||
<div class="account-dashboard-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px px-24px pb-20px mb-16px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px px-24px pb-20px mb-16px">
|
||||
<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>
|
||||
@ -27,12 +27,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-wrap bg-#fff rounded-8px px-24px py-24px mb-16px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px px-24px py-24px 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-1 flex flex-col"
|
||||
>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
<AccountTable
|
||||
ref="accountTableRef"
|
||||
:dataSource="dataSource"
|
||||
@ -41,7 +39,7 @@
|
||||
@export="handleExport"
|
||||
@sorterChange="handleSorterChange"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.account-dashboard-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter-wrap {
|
||||
@ -47,12 +46,5 @@
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -19,12 +19,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,12 +22,5 @@
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -16,12 +16,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.pagination-row {
|
||||
.arco-pagination {
|
||||
.arco-pagination-list {
|
||||
.arco-pagination-item {
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
/>
|
||||
<NoData v-else />
|
||||
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -50,10 +50,10 @@
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #F64B31;
|
||||
color: #f64b31;
|
||||
}
|
||||
&.disabled {
|
||||
color: #C5B7FF;
|
||||
color: #c5b7ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@ -61,13 +61,5 @@
|
||||
.card-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,14 +115,14 @@ export default defineComponent({
|
||||
{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" />
|
||||
<span class="text-12px lh-20px font-400 label">{label}</span>
|
||||
<span class="text-14px lh-22px font-400 label">{label}</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
class="flex items-center rounded-2px px-8px"
|
||||
style={{ background: normalStyle.background, color: normalStyle.color }}
|
||||
>
|
||||
<span class="text-12px lh-20px font-400">正常</span>
|
||||
<span class="text-14px lh-22px font-400 label">正常</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -130,7 +130,7 @@ export default defineComponent({
|
||||
|
||||
return (
|
||||
<div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
|
||||
<span class="text-12px lh-20px font-400 label">{label}</span>
|
||||
<span class="text-14px lh-22px font-400 label">{label}</span>
|
||||
{status === EnumStatus.PAUSE ? (
|
||||
<img src={iconWarn1} width="12" height="12" class="ml-4px" />
|
||||
) : (
|
||||
|
||||
@ -14,14 +14,14 @@
|
||||
</div>
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col">
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
<ProjectTable
|
||||
:dataSource="dataSource"
|
||||
@sorterChange="handleSorterChange"
|
||||
@delete="handleDelete"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.project-list-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter-wrap {
|
||||
@ -18,12 +17,5 @@
|
||||
.table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -16,12 +16,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.pagination-row {
|
||||
.arco-pagination {
|
||||
.arco-pagination-list {
|
||||
.arco-pagination-item {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-data-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
|
||||
<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>
|
||||
@ -25,9 +25,7 @@
|
||||
@onReset="init"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px px-24px py-24px flex-1 flex flex-col"
|
||||
>
|
||||
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
|
||||
<component
|
||||
:is="isAccountTab ? BoardTable : PlanTable"
|
||||
ref="accountTableRef"
|
||||
@ -36,7 +34,7 @@
|
||||
@sorterChange="handleSorterChange"
|
||||
@selectionChange="handleSelectionChange"
|
||||
/>
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.account-data-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter-wrap {
|
||||
@ -37,12 +36,5 @@
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
/>
|
||||
<NoData v-else />
|
||||
|
||||
<div v-if="pageInfo.total > 0" class="pagination-box">
|
||||
<div v-if="pageInfo.total > 0" class="pagination-row">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
|
||||
@ -51,12 +51,5 @@
|
||||
.card-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
padding: 4px 24px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
@ -75,7 +75,7 @@
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
padding: 4px 24px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
@ -84,7 +84,7 @@
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
padding: 4px 24px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user