renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一input、select、picker等组件样式

Browse Source
This commit is contained in:
rd
2025-07-15 11:03:44 +08:00
parent cdb8f677bc
commit 97dd86cd45
20 changed files with 344 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/styles/components/date-picker.scss Normal file
View File

@ -0,0 +1,15 @@
.arco-picker {
border-radius: 4px !important;
border-color: #d7d7d9 !important;
background-color: #fff !important;
&:hover {
background-color: #fff !important;
}
&:focus-within,
&.arco-input-focus,
&.arco-textarea-focus {
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;
}
}

3
src/styles/components/index.scss
View File

@ -4,3 +4,6 @@
@import './pagination.scss';
@import './tabs.scss';
@import './modal.scss';
@import "./textarea.scss";
@import "./select.scss";
@import "./date-picker.scss"

16
src/styles/components/input.scss
View File

@ -1,5 +1,15 @@
.arco-input-wrapper {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
border-radius: 4px !important;
border-color: #d7d7d9 !important;
background-color: #fff !important;
&:hover {
background-color: #fff !important;
}
&:focus-within,
&.arco-input-focus,
&.arco-textarea-focus {
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;
}
}

5
src/styles/components/modal.scss
View File

@ -4,6 +4,11 @@
height: 56px;
padding: 0 20px;
.arco-modal-title {
font-family: $font-family-medium;
color: #211f24;
font-size: 16px;
font-style: normal;
font-weight: 400;
justify-content: flex-start;
}
}

15
src/styles/components/select.scss Normal file
View File

@ -0,0 +1,15 @@
.arco-select {
border-radius: 4px !important;
border-color: #d7d7d9 !important;
background-color: #fff !important;
&:hover {
background-color: #fff !important;
}
&:focus-within,
&.arco-input-focus,
&.arco-textarea-focus {
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;
}
}

15
src/styles/components/textarea.scss Normal file
View File

@ -0,0 +1,15 @@
.arco-textarea-wrapper {
border-radius: 4px !important;
border-color: #d7d7d9 !important;
background-color: #fff !important;
&:hover {
background-color: #fff !important;
}
&:focus-within,
&.arco-input-focus,
&.arco-textarea-focus {
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;
}
}

16
src/views/property-marketing/component.scss
View File

@ -1,19 +1,3 @@
.arco-input-wrapper,
.arco-select-view-single,
.arco-textarea-wrapper,
.arco-picker,
.arco-select-view-multiple {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus,
&.arco-textarea-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.arco-modal {
.cancel-btn {
border-radius: 4px;

13
src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
View File

@ -1,17 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

14
src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
View File

@ -1,18 +1,4 @@
.note-table-wrap {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple),
:deep(.arco-picker) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

13
src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
View File

@ -1,17 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

14
src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
View File

@ -1,18 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple),
:deep(.arco-picker) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

6
src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
View File

@ -63,8 +63,8 @@
</div>
</div>
</div>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
</div>
</template>
@ -92,7 +92,7 @@ const props = defineProps({
},
});
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
const emits = defineEmits(['openEdit', 'selectionChange', 'delete']);
const pauseAccountPatchModalRef = ref(null);
const authorizedAccountModalRef = ref(null);

6
src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
View File

@ -20,8 +20,8 @@ import { ref } from 'vue';
import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const emits = defineEmits(['update', 'close']);
const emits = defineEmits(['close']);
const update = inject('update');
const visible = ref(false);
const accountId = ref(null);
const accountName = ref('');
@ -45,7 +45,7 @@ async function onConfirm() {
const { code } = await pausePatchPlacementAccount(accountId.value);
if (code === 200) {
AMessage.success('暂停成功');
emits('update');
update();
onClose();
}
}

8
src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
View File

@ -137,7 +137,7 @@
</a-button>
</template>
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
<!-- <ImportPromptModal ref="importPromptModalRef" /> -->
</a-modal>
</template>
@ -161,7 +161,7 @@ import {
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
const emits = defineEmits(['update']);
const update = inject('update');
const UploadStatus = {
DEFAULT: 'default',
@ -278,7 +278,7 @@ const handleBatchImport = async () => {
});
if (code === 200) {
AMessage.success('导入成功');
emits('update');
update();
onClose();
} else {
uploadStatus.value = UploadStatus.ERROR;
@ -303,7 +303,7 @@ async function onSubmit() {
const { code, data } = await _fn(_params);
if (code === 200) {
isEdit.value && AMessage.success('修改成功');
emits('update');
update();
if (isEdit.value) {
onClose();

13
src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -59,6 +59,8 @@
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
</template>
</a-modal>
<SelectSubAccountModal ref="selectSubAccountModalRef" />
</template>
<script setup>
@ -71,11 +73,13 @@ import {
postPlacementAccountsSync,
} from '@/api/all/propertyMarketing';
import SelectSubAccountModal from '../select-sub-account-modal';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
const emits = defineEmits(['update']);
const update = inject('update');
const INITIAL_SYNC_TYPE = 'sync';
const visible = ref(false);
const isLoading = ref(false);
@ -86,6 +90,7 @@ const failReason = ref('');
const progress = ref(0);
const id = ref('');
const selectSubAccountModalRef = ref(null);
const lastSyncedAt = ref(null); // 上次同步时间戳
const showSyncTip = ref(false);
const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
@ -242,6 +247,10 @@ const handleSyncData = () => {
};
const handleOk = () => {
close();
selectSubAccountModalRef.value.open();
return;
// n天未同步更新
if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
handleSyncData();
return;
@ -249,7 +258,7 @@ const handleOk = () => {
if (isCompleted.value) {
if (isSuccess.value) {
emits('update');
update();
close();
} else {
startLoading();

13
src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
View File

@ -1,17 +1,4 @@
.container {
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-select-view-multiple) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.filter-row {
.filter-row-item {
&:not(:last-child) {

20
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts Normal file
View File

@ -0,0 +1,20 @@
export const INITIAL_FORM = {
search: '',
id: '',
};
export const INITIAL_PAGE_INFO = {
page: 1,
pageSize: 20,
total: 0,
};
export const TABLE_COLUMNS = [
{
title: '账户名称',
dataIndex: 'name',
},
{
title: '账户ID',
dataIndex: 'id',
},
];

198
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<a-modal
v-model:visible="visible"
title="选择子账户"
modal-class="select-sub-account-modal"
width="720px"
:mask-closable="false"
@close="onClose"
>
<div class="filter-row flex mb-16px">
<div class="filter-row-item flex items-center">
<span class="label">账户名称</span>
<a-input
v-model="query.search"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</div>
<div class="filter-row-item flex items-center">
<span class="label">账户ID</span>
<a-input
v-model="query.id"
class="w-240px"
placeholder="请搜索..."
size="medium"
allow-clear
@change="handleSearch"
>
<template #prefix>
<icon-search />
</template>
</a-input>
</div>
</div>
<a-table
ref="tableRef"
:data="dataSource"
column-resizable
row-key="id"
:row-selection="{
type: 'checkbox',
showCheckedAll: true,
width: 48,
}"
:selected-keys="selectedItems"
:pagination="false"
:scroll="{ x: '100%' }"
class="w-100% flex-1"
bordered
@select="handleSelect"
@select-all="handleSelectAll"
>
<template #empty>
<NoData />
</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
>
<template #title>
<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">
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
</a-tooltip>
</div>
</template>
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
</template>
<template v-else-if="column.dataIndex === 'time'" #cell="{ record }">
{{ exactFormatTime(record.time) }}
</template>
<template v-else #cell="{ record }">
{{ formatTableField(column, record, true) }}
</template>
</a-table-column>
</template>
</a-table>
<div v-if="pageInfo.total > 0" class="flex justify-end">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete">添加已选账户</a-button>
</template>
</a-modal>
</template>
<script setup>
import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
import icon1 from '@/assets/img/media-account/icon-delete.png';
const update = inject('update');
const visible = ref(false);
const dataSource = ref([]);
const query = ref(cloneDeep(INITIAL_FORM));
const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
const selectedItems = ref([]);
const deleteTaskModalRef = ref(null);
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
);
const open = () => {
getData();
visible.value = true;
};
const onClose = () => {
query.value = cloneDeep(INITIAL_FORM);
pageInfo.value = cloneDeep(INITIAL_FORM);
visible.value = false;
};
const getData = () => {
dataSource.value = [
{
id: 1832880547948105,
name: '美团-人设组YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题-3',
},
{
id: 1832880548441993,
name: 'YSCX-运管-OM运营三部-BT2阿里巴巴国际站-小题',
},
];
};
const reload = () => {
pageInfo.value.page = 1;
getData();
};
const handleSearch = () => {
reload();
};
const handleSelect = (selectedRowKeys, selectedRows) => {
selectedItems.value = selectedRowKeys;
};
const handleSelectAll = (checked) => {
if (checked) {
selectedItems.value = dataSource.value.map((item) => item.id);
} else {
selectedItems.value = [];
}
};
const onPageChange = (current) => {
pageInfo.value.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.value.pageSize = pageSize;
reload();
};
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
</style>

35
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss Normal file
View File

@ -0,0 +1,35 @@
.select-sub-account-modal {
.arco-modal-header {
}
.arco-modal-body {
height: 536px;
.filter-row {
.filter-row-item {
&:not(:last-child) {
margin-right: 24px;
}
.label {
margin-right: 12px;
color: #211f24;
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
flex-shrink: 0;
line-height: 22px; /* 157.143% */
}
:deep(.arco-space-item) {
width: 100%;
}
}
}
.cts {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
}
}

5
src/views/property-marketing/put-account/account-manage/index.vue
View File

@ -67,7 +67,6 @@
@selectionChange="handleSelectionChange"
@delete="handleDelete"
@openEdit="handleOpenEdit"
@update="getData"
/>
<NoData v-else />
@ -86,7 +85,7 @@
</div>
</div>
<AddAccountModal ref="addAccountModalRef" @update="getData" />
<AddAccountModal ref="addAccountModalRef" />
<DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
</div>
</template>
@ -254,6 +253,8 @@ const handleOpenAbnormalAccount = () => {
query.value.status = 2;
reload();
};
provide('update', getData);
</script>
<style scoped lang="scss">