|
|
@@ -0,0 +1,588 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <Breadcrumb :items="['menu.overrideRules', 'menu.overrideRules.list']" />
|
|
|
+ <a-card class="general-card" :title="$t('menu.overrideRules.list')">
|
|
|
+ <a-row>
|
|
|
+ <a-col :flex="1">
|
|
|
+ <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
|
|
|
+ label-align="left">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item field="keyword" label="搜索">
|
|
|
+ <a-input v-model="formModel.keyword" placeholder="输入关键词搜索" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ <a-divider style="height: 38px" direction="vertical" />
|
|
|
+ <a-col :flex="'86px'" style="text-align: right">
|
|
|
+ <a-space direction="vertical" :size="18">
|
|
|
+ <a-button type="primary" @click="search">
|
|
|
+ <template #icon>
|
|
|
+ <icon-search />
|
|
|
+ </template>
|
|
|
+ {{ $t('searchTable.form.search') }}
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-divider style="margin-top: 0" />
|
|
|
+ <a-row style="margin-bottom: 16px">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-space>
|
|
|
+ <a-button type="primary" @click="onAdd">
|
|
|
+ <template #icon>
|
|
|
+ <icon-plus />
|
|
|
+ </template>
|
|
|
+ {{ $t('searchTable.operation.create') }}
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ ">
|
|
|
+ <a-tooltip :content="$t('searchTable.actions.refresh')">
|
|
|
+ <div class="action-icon" @click="search"><icon-refresh size="18" /></div>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-dropdown @select="handleSelectDensity">
|
|
|
+ <a-tooltip :content="$t('searchTable.actions.density')">
|
|
|
+ <div class="action-icon"><icon-line-height size="18" /></div>
|
|
|
+ </a-tooltip>
|
|
|
+ <template #content>
|
|
|
+ <a-doption v-for="item in densityList" :key="item.value" :value="item.value"
|
|
|
+ :class="{ active: item.value === size }">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </a-doption>
|
|
|
+ </template>
|
|
|
+ </a-dropdown>
|
|
|
+ <a-tooltip :content="$t('searchTable.actions.columnSetting')">
|
|
|
+ <a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange">
|
|
|
+ <div class="action-icon"><icon-settings size="18" /></div>
|
|
|
+ <template #content>
|
|
|
+ <div id="tableSetting">
|
|
|
+ <div v-for="(item, index) in showColumns" :key="item.dataIndex" class="setting">
|
|
|
+ <div style="
|
|
|
+ margin-right: 4px;
|
|
|
+ cursor: move;
|
|
|
+ ">
|
|
|
+ <icon-drag-arrow />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-checkbox v-model="item.checked" @change="
|
|
|
+ handleChange(
|
|
|
+ $event,
|
|
|
+ item as TableColumnData,
|
|
|
+ index
|
|
|
+ )
|
|
|
+ ">
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ {{
|
|
|
+ item.title === '#'
|
|
|
+ ? '序列号'
|
|
|
+ : item.title
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-popover>
|
|
|
+ </a-tooltip>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-table row-key="id" :loading="loading" :pagination="pagination"
|
|
|
+ :columns="(cloneColumns as TableColumnData[])" :data="renderData" :bordered="{ headerCell: true }"
|
|
|
+ :size="size" @page-change="onPageChange" @page-size-change="onPageSizeChange">
|
|
|
+ <template #index="{ record }">
|
|
|
+ {{ record.id }}
|
|
|
+ </template>
|
|
|
+ <template #platform="{ record }">
|
|
|
+ <a-tag color="blue">{{ record.platform }}</a-tag>
|
|
|
+ </template>
|
|
|
+ <template #original_text="{ record }">
|
|
|
+ <a-typography-paragraph :ellipsis="{ rows: 2 }">
|
|
|
+ {{ record.original_text }}
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </template>
|
|
|
+ <template #rule="{ record }">
|
|
|
+ <a-tag v-if="record.rule === 'text'" color="green">文本匹配</a-tag>
|
|
|
+ <a-tag v-else-if="record.rule === 'regex'" color="orange">正则表达式</a-tag>
|
|
|
+ <a-tag v-else>{{ record.rule }}</a-tag>
|
|
|
+ </template>
|
|
|
+ <template #output="{ record }">
|
|
|
+ <div>
|
|
|
+ <a-tag v-if="record.output_type === 'content'" color="arcoblue">原文处理</a-tag>
|
|
|
+ <a-tag v-else-if="record.output_type === 'deeplink'" color="purple">深度链接</a-tag>
|
|
|
+ <a-tag v-else-if="record.output_type === 'url'" color="cyan">URL</a-tag>
|
|
|
+ <a-tag v-else>{{ record.output_type }}</a-tag>
|
|
|
+ </div>
|
|
|
+ <a-typography-paragraph :ellipsis="{ rows: 2 }">
|
|
|
+ <a-typography-text disabled>
|
|
|
+ {{ record.output_text }}
|
|
|
+ </a-typography-text>
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </template>
|
|
|
+ <template #status="{ record }">
|
|
|
+ <a-tag v-if="record.status" bordered color="green">
|
|
|
+ <template #icon>
|
|
|
+ <icon-check />
|
|
|
+ </template>
|
|
|
+ 启用
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else bordered color="">
|
|
|
+ <template #icon>
|
|
|
+ <icon-stop />
|
|
|
+ </template>
|
|
|
+ 禁用
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+ <template #sort="{ record }">
|
|
|
+ <a-badge :count="record.sort" />
|
|
|
+ </template>
|
|
|
+ <template #time="{ record }">
|
|
|
+ <div style="color:gray;">
|
|
|
+ <div>添加：{{ dayjs(record.create_time).format('MM-DD HH:mm') }}</div>
|
|
|
+ <div>更新：{{ dayjs(record.last_time).format('MM-DD HH:mm') }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #command="{ record }">
|
|
|
+ <a-space>
|
|
|
+ <a-button type="primary" size="small" @click="onEdit(record)">
|
|
|
+ 修改
|
|
|
+ </a-button>
|
|
|
+ <a-button status="danger" size="small" @click="onDelete(record)">
|
|
|
+ 删除
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <a-modal v-model:visible="visible" :title="isEdit ? '修改覆盖规则' : '新建覆盖规则'" @ok="handleSubmit"
|
|
|
+ @cancel="handleCancel" width="800px">
|
|
|
+ <a-form :model="editForm" layout="vertical">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="平台" required>
|
|
|
+ <a-select v-model="editForm.platform" :options="platformOptions" placeholder="请选择平台" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="规则类型" required>
|
|
|
+ <a-select v-model="editForm.rule" :options="ruleOptions" placeholder="请选择规则类型" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="原始文本" required>
|
|
|
+ <a-textarea v-model="editForm.original_text" placeholder="请输入原始文本或正则表达式" :auto-size="{ minRows: 2, maxRows: 4 }" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="输出类型" required>
|
|
|
+ <a-select v-model="editForm.output_type" :options="outputTypeOptions" placeholder="请选择输出类型" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="权重">
|
|
|
+ <a-input-number v-model="editForm.sort" placeholder="数值越大越优先" :min="0" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="输出文本" required>
|
|
|
+ <a-textarea v-model="editForm.output_text" placeholder="请输入替换后的文本" :auto-size="{ minRows: 2, maxRows: 4 }" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="状态">
|
|
|
+ <a-switch v-model="editForm.status" :checked-value="true" :unchecked-value="false"
|
|
|
+ checked-text="启用" unchecked-text="禁用" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, ref, reactive, watch, nextTick } from 'vue';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import useLoading from '@/hooks/loading';
|
|
|
+import { Pagination } from '@/types/global';
|
|
|
+import { Modal, Message } from '@arco-design/web-vue';
|
|
|
+import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
|
|
|
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
|
|
+import cloneDeep from 'lodash/cloneDeep';
|
|
|
+import Sortable from 'sortablejs';
|
|
|
+import {
|
|
|
+ OverrideRuleParams,
|
|
|
+ OverrideRuleRecord,
|
|
|
+ queryOverrideRuleList,
|
|
|
+ updateOverrideRule,
|
|
|
+ createOverrideRule,
|
|
|
+ deleteOverrideRule
|
|
|
+} from '@/api/overrideRules';
|
|
|
+
|
|
|
+type SizeProps = 'mini' | 'small' | 'medium' | 'large';
|
|
|
+type Column = TableColumnData & { checked?: true };
|
|
|
+
|
|
|
+const generateFormModel = () => {
|
|
|
+ return {
|
|
|
+ keyword: '',
|
|
|
+ sort: 'sort',
|
|
|
+ order: 'descending',
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const { loading, setLoading } = useLoading(true);
|
|
|
+const { t } = useI18n();
|
|
|
+const renderData = ref<OverrideRuleRecord[]>([]);
|
|
|
+const formModel = ref(generateFormModel());
|
|
|
+const cloneColumns = ref<Column[]>([]);
|
|
|
+const showColumns = ref<Column[]>([]);
|
|
|
+
|
|
|
+const size = ref<SizeProps>('small');
|
|
|
+
|
|
|
+const basePagination: Pagination = {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 50,
|
|
|
+};
|
|
|
+const pagination = reactive({
|
|
|
+ ...basePagination,
|
|
|
+});
|
|
|
+
|
|
|
+const densityList = computed(() => [
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.mini'),
|
|
|
+ value: 'mini',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.small'),
|
|
|
+ value: 'small',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.medium'),
|
|
|
+ value: 'medium',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.large'),
|
|
|
+ value: 'large',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const columns = computed<TableColumnData[]>(() => [
|
|
|
+ {
|
|
|
+ title: '#',
|
|
|
+ dataIndex: 'index',
|
|
|
+ slotName: 'index',
|
|
|
+ width: 60,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '平台',
|
|
|
+ slotName: 'platform',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '原始文本',
|
|
|
+ slotName: 'original_text',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '规则类型',
|
|
|
+ slotName: 'rule',
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '输出',
|
|
|
+ slotName: 'output',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ slotName: 'status',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '权重',
|
|
|
+ slotName: 'sort',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ slotName: 'time',
|
|
|
+ width: 170,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ slotName: 'command',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const platformOptions = computed<SelectOptionData[]>(() => [
|
|
|
+ { label: '淘宝客', value: 'tk' },
|
|
|
+ { label: '京东', value: 'jd' },
|
|
|
+ { label: '拼多多', value: 'pdd' },
|
|
|
+ { label: '抖音', value: 'dy' },
|
|
|
+]);
|
|
|
+
|
|
|
+const ruleOptions = computed<SelectOptionData[]>(() => [
|
|
|
+ { label: '文本匹配', value: 'text' },
|
|
|
+ { label: '正则表达式', value: 'regex' },
|
|
|
+]);
|
|
|
+
|
|
|
+const outputTypeOptions = computed<SelectOptionData[]>(() => [
|
|
|
+ { label: '原文处理', value: 'content' },
|
|
|
+ { label: '深度链接', value: 'deeplink' },
|
|
|
+ { label: 'URL', value: 'url' },
|
|
|
+]);
|
|
|
+
|
|
|
+const fetchData = async (
|
|
|
+ params: OverrideRuleParams = {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 50,
|
|
|
+ sort: 'sort',
|
|
|
+ order: 'descending',
|
|
|
+ getTotal: true,
|
|
|
+ }
|
|
|
+) => {
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+ const { data } = await queryOverrideRuleList(params);
|
|
|
+ if (!data) return;
|
|
|
+ renderData.value = data.list;
|
|
|
+ pagination.current = data.page;
|
|
|
+ pagination.total = data.count;
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const search = () => {
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ } as unknown as OverrideRuleParams);
|
|
|
+};
|
|
|
+
|
|
|
+const onPageChange = (current: number) => {
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ current
|
|
|
+ } as unknown as OverrideRuleParams);
|
|
|
+};
|
|
|
+
|
|
|
+const onPageSizeChange = (pageSize: number) => {
|
|
|
+ basePagination.pageSize = pageSize;
|
|
|
+ pagination.pageSize = pageSize;
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ current: 1,
|
|
|
+ } as unknown as OverrideRuleParams);
|
|
|
+};
|
|
|
+
|
|
|
+const visible = ref(false);
|
|
|
+const isEdit = ref(false);
|
|
|
+const editForm = ref<Partial<OverrideRuleRecord>>({
|
|
|
+ platform: '',
|
|
|
+ original_text: '',
|
|
|
+ rule: 'text',
|
|
|
+ output_text: '',
|
|
|
+ output_type: 'content',
|
|
|
+ status: true,
|
|
|
+ sort: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const onEdit = (current: OverrideRuleRecord) => {
|
|
|
+ isEdit.value = true;
|
|
|
+ editForm.value = {
|
|
|
+ ...current,
|
|
|
+ status: Boolean(current.status),
|
|
|
+ };
|
|
|
+ visible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const onAdd = () => {
|
|
|
+ isEdit.value = false;
|
|
|
+ editForm.value = {
|
|
|
+ platform: '',
|
|
|
+ original_text: '',
|
|
|
+ rule: 'text',
|
|
|
+ output_text: '',
|
|
|
+ output_type: 'content',
|
|
|
+ status: true,
|
|
|
+ sort: 0,
|
|
|
+ };
|
|
|
+ visible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const onDelete = (current: OverrideRuleRecord) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确认删除',
|
|
|
+ content: '确定要删除这条规则吗？删除后无法恢复。',
|
|
|
+ onOk: async () => {
|
|
|
+ try {
|
|
|
+ const response = await deleteOverrideRule(current.id);
|
|
|
+ if (response.data.success) {
|
|
|
+ Message.success(response.data.msg || '删除成功');
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ } as unknown as OverrideRuleParams);
|
|
|
+ } else {
|
|
|
+ Message.error(response.data.msg || '删除失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ Message.error('删除请求失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+fetchData();
|
|
|
+
|
|
|
+const handleSelectDensity = (
|
|
|
+ val: string | number | Record<string, any> | undefined,
|
|
|
+ e: Event
|
|
|
+) => {
|
|
|
+ size.value = val as SizeProps;
|
|
|
+};
|
|
|
+
|
|
|
+const handleChange = (
|
|
|
+ checked: boolean | (string | boolean | number)[],
|
|
|
+ column: Column,
|
|
|
+ index: number
|
|
|
+) => {
|
|
|
+ if (!checked) {
|
|
|
+ cloneColumns.value = showColumns.value.filter(
|
|
|
+ (item) => item.dataIndex !== column.dataIndex
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ cloneColumns.value.splice(index, 0, column);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const exchangeArray = <T extends Array<any>>(
|
|
|
+ array: T,
|
|
|
+ beforeIdx: number,
|
|
|
+ newIdx: number,
|
|
|
+ isDeep = false
|
|
|
+): T => {
|
|
|
+ const newArray = isDeep ? cloneDeep(array) : array;
|
|
|
+ if (beforeIdx > -1 && newIdx > -1) {
|
|
|
+ newArray.splice(
|
|
|
+ beforeIdx,
|
|
|
+ 1,
|
|
|
+ newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
|
|
|
+ );
|
|
|
+ }
|
|
|
+ return newArray;
|
|
|
+};
|
|
|
+
|
|
|
+const popupVisibleChange = (val: boolean) => {
|
|
|
+ if (val) {
|
|
|
+ nextTick(() => {
|
|
|
+ const el = document.getElementById('tableSetting') as HTMLElement;
|
|
|
+ const sortable = new Sortable(el, {
|
|
|
+ onEnd(e: any) {
|
|
|
+ const { oldIndex, newIndex } = e;
|
|
|
+ exchangeArray(cloneColumns.value, oldIndex, newIndex);
|
|
|
+ exchangeArray(showColumns.value, oldIndex, newIndex);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleSubmit = async () => {
|
|
|
+ try {
|
|
|
+ let response;
|
|
|
+ if (isEdit.value) {
|
|
|
+ response = await updateOverrideRule(editForm.value as OverrideRuleRecord);
|
|
|
+ } else {
|
|
|
+ response = await createOverrideRule(editForm.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (response.data.success) {
|
|
|
+ Message.success(response.data.msg || '操作成功');
|
|
|
+ visible.value = false;
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ } as unknown as OverrideRuleParams);
|
|
|
+ } else {
|
|
|
+ Message.error(response.data.msg || '操作失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ Message.error('请求失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ visible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => columns.value,
|
|
|
+ (val) => {
|
|
|
+ cloneColumns.value = cloneDeep(val);
|
|
|
+ cloneColumns.value.forEach((item, index) => {
|
|
|
+ item.checked = true;
|
|
|
+ });
|
|
|
+ showColumns.value = cloneDeep(cloneColumns.value);
|
|
|
+ },
|
|
|
+ { deep: true, immediate: true }
|
|
|
+);
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+export default {
|
|
|
+ name: 'OverrideRules',
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.container {
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.arco-table-th) {
|
|
|
+ &:last-child {
|
|
|
+ .arco-table-th-item-title {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.action-icon {
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ color: #0960bd;
|
|
|
+ background-color: #e3f4fc;
|
|
|
+}
|
|
|
+
|
|
|
+.setting {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 200px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
dodo hold