xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置客户列表权限

Browse Source
This commit is contained in:
浅念
2025-07-23 14:07:13 +08:00
parent fc4de02582
commit 4a39387865
5 changed files with 457 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -3,6 +3,7 @@ node_modules
dist dist
dist-ssr dist-ssr
*.local *.local
*.env
.cursorrules .cursorrules
src/types/components.d.ts src/types/components.d.ts
src/types/auto-imports.d.ts src/types/auto-imports.d.ts
.husky/commit-msg
-1
View File
@@ -1 +0,0 @@
pnpm dlx commitlint --edit $1
.husky/pre-commit
-1
View File
@@ -1 +0,0 @@
pnpm run lint:lint-staged
src/views/crmpc/customer/Edit.vue
+106 -79
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="customer-form-page"> <div class="customer-form-page">
<div class="form-header"> <div class="form-header">
<el-link :underline="false" @click="goBack"> <el-link underline="never" @click="goBack">
<i class="iconfont-sys icon-reverse">&#xe772;</i> 返回 <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
</el-link> </el-link>
<span class="border"></span><span class="form-title">编辑客户资料</span> <span class="border"></span><span class="form-title">编辑客户资料</span>
@@ -18,19 +18,29 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="客户渠道" prop="channel_id"> <el-form-item label="客户渠道" prop="channel_id">
<el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道"> <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
<el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" /> <el-option
v-for="item in channelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="客户商机" prop="magnitude"> <el-form-item label="客户商机" prop="magnitude">
<el-select v-model="form.magnitude" placeholder="请选择客户商机"> <el-select v-model="form.magnitude" placeholder="请选择客户商机">
<el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" /> <el-option
v-for="item in opportunityOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="客户名称" prop="contacts"> <el-form-item label="客户名称" prop="contacts">
<el-input v-model="form.contacts" placeholder="请输入客户名称" /> <el-input v-model="form.contacts" placeholder="请输入客户名称" />
</el-form-item> </el-form-item>
<el-form-item label="客户性别" prop="sex" > <el-form-item label="客户性别" prop="sex">
<el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;"> <el-radio-group v-model="form.sex" style="justify-content: flex-end; width: 100%">
<el-radio :label="0">未知</el-radio> <el-radio :label="0">未知</el-radio>
<el-radio :label="1">男</el-radio> <el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio> <el-radio :label="2">女</el-radio>
@@ -52,12 +62,22 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="客户分级" prop="grade"> <el-form-item label="客户分级" prop="grade">
<el-select v-model="form.grade" placeholder="请选择客户分级"> <el-select v-model="form.grade" placeholder="请选择客户分级">
<el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" /> <el-option
v-for="item in levelOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="国家" prop="country_id"> <el-form-item label="国家" prop="country_id">
<el-select v-model="form.country_id" filterable placeholder="请选择国家"> <el-select v-model="form.country_id" filterable placeholder="请选择国家">
<el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" /> <el-option
v-for="item in countryOptions"
:key="item.id"
:label="item.cn_addr"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="公司" prop="company"> <el-form-item label="公司" prop="company">
@@ -69,95 +89,103 @@
</el-col> </el-col>
</el-row> </el-row>
<el-form-item class="submit-row"> <el-form-item class="submit-row">
<el-button type="primary" style="width:100%" @click="submitForm">提交</el-button> <el-button type="primary" style="width: 100%" @click="submitForm">提交</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { CrmService } from '@/api/crmApi' import { CrmService } from '@/api/crmApi'
const route = useRoute() const route = useRoute()
const customerId = route.query.id const customerId = route.query.id
const router = useRouter() const router = useRouter()
const formRef = ref() const formRef = ref()
const rules = {
const rules = {
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }], channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }], name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
// car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }] // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
} }
const channelOptions = ref<any>() const channelOptions = ref<any>()
const opportunityOptions = ref<any>() const opportunityOptions = ref<any>()
const intentionOptions = ref<any>() const levelOptions = ref<any>()
const levelOptions = ref<any>() const countryOptions = ref<any>()
const countryOptions = ref<any>() onMounted(async () => {
onMounted(async () => {
await getgetChannel() await getgetChannel()
await getMagnitude() await getMagnitude()
await getGrade() await getGrade()
await getarea() await getarea()
await getdetilfn() await getdetilfn()
}) })
// 定义客户详情类型 // 定义客户详情类型
interface CustomerInfo { interface CustomerInfo {
contacts?: string contacts?: string
// 可根据实际接口补充更多字段 // 可根据实际接口补充更多字段
[key: string]: any [key: string]: any
} }
const form = ref<CustomerInfo>({}) const form = ref<CustomerInfo>({})
const customerInfo = ref<CustomerInfo>({}) const customerInfo = ref<CustomerInfo>({})
//获取详情 //获取详情
const getdetilfn = async() => { const getdetilfn = async () => {
try { try {
// 这里调用获取品牌列表的接口 // 这里调用获取品牌列表的接口
const res = await CrmService.getcustomerdetail({id:customerId}) const res = await CrmService.getcustomerdetail({ id: customerId })
customerInfo.value = res customerInfo.value = res
form.value = res form.value = res
} catch (error) { } } catch (error) {
} console.log(error)
//渠道 }
const getgetChannel = async () => { }
//渠道
const getgetChannel = async () => {
try { try {
// 这里调用获取品牌列表的接口 // 这里调用获取品牌列表的接口
const res = await CrmService.getChannel() const res = await CrmService.getChannel()
channelOptions.value = res||[] channelOptions.value = res || []
} catch (error) { channelOptions.value = [] } } catch (error) {
} console.log(error)
//商机 }
const getMagnitude = async () => { }
//商机
const getMagnitude = async () => {
try { try {
// 这里调用获取品牌列表的接口 // 这里调用获取品牌列表的接口
const res = await CrmService.getMagnitude() const res = await CrmService.getMagnitude()
opportunityOptions.value = res||[] opportunityOptions.value = res || []
} catch (error) { opportunityOptions.value = [] } } catch (error) {
} console.log(error)
//客户等级 }
const getGrade = async () => { }
//客户等级
const getGrade = async () => {
try { try {
// 这里调用获取品牌列表的接口 // 这里调用获取品牌列表的接口
const res = await CrmService.getGrade() const res = await CrmService.getGrade()
levelOptions.value = res||[] levelOptions.value = res || []
} catch (error) { levelOptions.value = [] } } catch (error) {
} console.log(error)
//国家 }
const getarea = async () => { }
//国家
const getarea = async () => {
try { try {
// 这里调用获取品牌列表的接口 // 这里调用获取品牌列表的接口
const res = await CrmService.getCountry() const res = await CrmService.getCountry()
countryOptions.value = res||[] countryOptions.value = res || []
} catch (error) { countryOptions.value = [] } } catch (error) {
} console.log(error)
function goBack() { }
}
function goBack() {
router.back() router.back()
} }
function submitForm() { function submitForm() {
formRef.value.validate(async (valid: boolean) => { formRef.value.validate(async (valid: boolean) => {
if (valid) { if (valid) {
try { try {
@@ -169,53 +197,52 @@ function submitForm() {
} }
} }
}) })
} }
</script> </script>
<style scoped> <style scoped>
.border{ .border {
margin: 0px 10px 0px 40px; margin: 0px 10px 0px 40px;
} }
.submit-row .el-form-item__content { .submit-row .el-form-item__content {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.icon-reverse { .icon-reverse {
display: inline-block; display: inline-block;
transform: rotate(270deg); /* 旋转180度 */ transform: rotate(270deg); /* 旋转180度 */
} }
.customer-form-page { .customer-form-page {
min-height: 100vh; min-height: 100vh;
background: #fff; background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 18px; padding-top: 18px;
} }
.form-header { .form-header {
width: 98%; width: 98%;
margin-bottom: 24px; margin-bottom: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;
justify-content: flex-start; /* 新增，左对齐 */ justify-content: flex-start; /* 新增，左对齐 */
} }
.form-title{ .form-title {
font-weight: bold; font-weight: bold;
color: #222; color: #222;
} }
.customer-form { .customer-form {
width: 600px; width: 600px;
background: #fff; background: #fff;
padding: 10px 24px 16px 24px; padding: 10px 24px 16px 24px;
} }
.el-form-item { .el-form-item {
margin-bottom: 18px; margin-bottom: 18px;
} }
.el-form-item__label { .el-form-item__label {
color: #222; color: #222;
font-weight: 500; font-weight: 500;
} }
</style> </style>
src/views/crmpc/customer/index.vue
+163 -113
View File
@@ -2,16 +2,14 @@
<div class="customer-page"> <div class="customer-page">
<!-- 顶部操作栏 --> <!-- 顶部操作栏 -->
<div class="customer-toolbar boxshadow"> <div class="customer-toolbar boxshadow">
<el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button> <el-button type="primary" @click="goAdd" v-if="hasAuth('crm_customer@add')">
<el-icon><Plus /> </el-icon>
添加
</el-button>
<div class="customer-search-group"> <div class="customer-search-group">
<el-input v-model="searchValue" placeholder="请输入客户名称或电话" /> <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
<el-select v-model="selectValue"> <el-select v-model="selectValue">
<el-option <el-option v-for="v in selectOptions" :key="v.value" :label="v.label" :value="v.value">
v-for="v in selectOptions"
:key="v.value"
:label="v.label"
:value="v.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
@@ -21,7 +19,7 @@
<div class="customer-tags boxshadow"> <div class="customer-tags boxshadow">
<!-- 前3组 --> <!-- 前3组 -->
<div class="filter-row" v-for="item in visibleTagGroups" :key="item.id"> <div class="filter-row" v-for="item in visibleTagGroups" :key="item.id">
<span class="filter-label">{{item.name}}</span> <span class="filter-label">{{ item.name }}</span>
<div class="filter-tags"> <div class="filter-tags">
<span <span
v-for="item1 in item.tags" v-for="item1 in item.tags"
@@ -37,7 +35,7 @@
<transition name="fade"> <transition name="fade">
<div v-if="showMore"> <div v-if="showMore">
<div class="filter-row" v-for="item in moreTagGroups" :key="item.id"> <div class="filter-row" v-for="item in moreTagGroups" :key="item.id">
<span class="filter-label">{{item.name}}</span> <span class="filter-label">{{ item.name }}</span>
<div class="filter-tags"> <div class="filter-tags">
<span <span
v-for="item1 in item.tags" v-for="item1 in item.tags"
@@ -69,9 +67,18 @@
</el-tabs> </el-tabs>
<!-- 表格 --> <!-- 表格 -->
<ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage" <ArtTable
:pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange" ref="tableRef"
@current-change="handleCurrentChange" lass="customer-table"> row-key="id"
:loading="loading"
:data="tableData"
:currentPage="pagination.currentPage"
:pageSize="pagination.pageSize"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
lass="customer-table"
>
<template #default> <template #default>
<el-table-column prop="contacts" label="客户名称" align="center" /> <el-table-column prop="contacts" label="客户名称" align="center" />
<el-table-column prop="magnitude_txt" label="客户商机" align="center" /> <el-table-column prop="magnitude_txt" label="客户商机" align="center" />
@@ -87,64 +94,79 @@
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" width="200px" align="center"> <el-table-column fixed="right" label="操作" width="200px" align="center">
<template #default="scope"> <template #default="scope">
<el-link type="primary" underline="never" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> &#xe70f;</i>查看</el-link> <el-link
<el-link type="primary" underline="never" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> &#xe6bf;</i> 添加跟进</el-link> type="primary"
underline="never"
style="margin-right: 8px"
@click="goEdit(scope.row)"
v-if="hasAuth('crm_customer@show')"
>
<i class="iconfont-sys"> &#xe70f;</i>查看
</el-link>
<el-link
type="primary"
underline="never"
@click="goAddFollow(scope.row)"
v-if="hasAuth('crm_customer@follow_add')"
>
<i class="iconfont-sys">&#xe6bf;</i> 添加跟进
</el-link>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
</ArtTable> </ArtTable>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue' import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import { CrmService } from '@/api/crmApi' import { CrmService } from '@/api/crmApi'
const searchValue = ref('') import { useAuth } from '@/composables/useAuth'
const selectValue = ref('') const { hasAuth } = useAuth()
const activeTab = ref('') const searchValue = ref('')
const showMore = ref(false) const selectValue = ref('')
const loading = ref(false) const activeTab = ref('')
const pagination = reactive({ const showMore = ref(false)
const loading = ref(false)
const pagination = reactive({
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
total: 0 total: 0
}) })
const selectOptions = [ const selectOptions = [
{ label: '全部', value: '' }, { label: '全部', value: '' },
{ label: '当天', value: '0' }, { label: '当天', value: '0' },
{ label: '近三天', value: '1' }, { label: '近三天', value: '1' },
{ label: '近七天', value: '2' } { label: '近七天', value: '2' }
] ]
//获取标签 //获取标签
type TagGroup = { id: string; name: string; tags: { id: string; name: string; count: number }[] } type TagGroup = { id: string; name: string; tags: { id: string; name: string; count: number }[] }
const tagGroups = ref<TagGroup[]>([]) const tagGroups = ref<TagGroup[]>([])
const tagGrouplistfn = async () => { const tagGrouplistfn = async () => {
try { const res = await CrmService.tagGrouplist({ scene: 'customers' })
const res = await CrmService.tagGrouplist({scene:'customers'})
tagGroups.value = res || [] tagGroups.value = res || []
} catch (error) { } }
} // 计算前3组和更多组
// 计算前3组和更多组 // eslint-disable-next-line vue/valid-define-props
defineProps() defineProps()
const visibleTagGroups = computed(() => tagGroups.value.slice(0, 3)) const visibleTagGroups = computed(() => tagGroups.value.slice(0, 3))
const moreTagGroups = computed(() => tagGroups.value.slice(3)) const moreTagGroups = computed(() => tagGroups.value.slice(3))
// 表格数据 // 表格数据
const tableData = ref<any[]>([]) const tableData = ref<any[]>([])
onMounted(() => { onMounted(() => {
gettableList() gettableList()
tagGrouplistfn() tagGrouplistfn()
}) })
// tabs 切换联动 // tabs 切换联动
watch([activeTab, searchValue, selectValue], () => { watch([activeTab, searchValue, selectValue], () => {
pagination.currentPage = 1 pagination.currentPage = 1
gettableList() gettableList()
}) })
// 获取列表数据 // 获取列表数据
const tagActiveMap = reactive<{ [groupId: string]: string }>({}) const tagActiveMap = reactive<{ [groupId: string]: string }>({})
const gettableList = async () => { const gettableList = async () => {
loading.value = true loading.value = true
try { try {
const { currentPage, pageSize } = pagination const { currentPage, pageSize } = pagination
@@ -162,7 +184,7 @@ const gettableList = async () => {
} }
console.log(params) console.log(params)
const { data, current, size, total } = await CrmService.getcustomerList(params) const { data, current, size, total } = await CrmService.getcustomerList(params)
tableData.value = data.map((item: any, index: number) => ({ tableData.value = data.map((item: any) => ({
...item ...item
})) }))
Object.assign(pagination, { currentPage: current, pageSize: size, total }) Object.assign(pagination, { currentPage: current, pageSize: size, total })
@@ -171,40 +193,40 @@ const gettableList = async () => {
} finally { } finally {
loading.value = false loading.value = false
} }
} }
// 处理表格分页变化 // 处理表格分页变化
const handleSizeChange = (newPageSize: number) => { const handleSizeChange = (newPageSize: number) => {
pagination.pageSize = newPageSize pagination.pageSize = newPageSize
// getWorkList() // getWorkList()
} }
const handleCurrentChange = (newCurrentPage: number) => { const handleCurrentChange = (newCurrentPage: number) => {
pagination.currentPage = newCurrentPage pagination.currentPage = newCurrentPage
// getWorkList() // getWorkList()
} }
function statusClass(status: any) { function statusClass(status: any) {
if (status === 0) return 'status-following' if (status === 0) return 'status-following'
if (status === 1) return 'status-dealed' if (status === 1) return 'status-dealed'
if (status === 2) return 'status-lost' if (status === 2) return 'status-lost'
return '' return ''
} }
const router = useRouter() const router = useRouter()
function goAdd() { function goAdd() {
router.push('/crmpc/customer/add') router.push('/crmpc/customer/add')
} }
function goEdit(row: any) { function goEdit(row: any) {
router.push({ router.push({
path: '/crmpc/customer/show', path: '/crmpc/customer/show',
query: { id: row.id } query: { id: row.id }
}) })
} }
function goAddFollow(row: any) { function goAddFollow(row: any) {
router.push({ router.push({
path: '/crmpc/customer/followadd', path: '/crmpc/customer/followadd',
query: { id: row.id } // 可带客户名等参数 query: { id: row.id } // 可带客户名等参数
}) })
} }
// 标签选中状态，key为组id，值为选中的标签id // 标签选中状态，key为组id，值为选中的标签id
function handleTagClick(groupId: string, tagId: string) { function handleTagClick(groupId: string, tagId: string) {
if (tagActiveMap[groupId] === tagId) { if (tagActiveMap[groupId] === tagId) {
tagActiveMap[groupId] = '' // 取消选中 tagActiveMap[groupId] = '' // 取消选中
} else { } else {
@@ -212,111 +234,135 @@ function handleTagClick(groupId: string, tagId: string) {
} }
pagination.currentPage = 1 pagination.currentPage = 1
gettableList() gettableList()
} }
</script> </script>
<style scoped> <style scoped lang="scss">
:deep(.el-table__header th) { :deep(.el-table__header th) {
background: #f7f9fa !important; background: #f7f9fa !important;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
:deep(.el-table__body tr.custom-table-row td) { :deep(.el-table__body tr.custom-table-row td) {
border-bottom: 1px solid #F7F9FA !important; border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #F7F9FA !important; border-right: 1px solid #f7f9fa !important;
} }
:deep(.el-table__body tr td:last-child) { :deep(.el-table__body tr td:last-child) {
border-right: none !important; border-right: none !important;
} }
:deep(.el-table__body tr:last-child td) { :deep(.el-table__body tr:last-child td) {
border-bottom: none !important; border-bottom: none !important;
} }
:deep(.el-table__header-wrapper th) { :deep(.el-table__header-wrapper th) {
border-bottom: 1px solid #F7F9FA !important; border-bottom: 1px solid #f7f9fa !important;
border-right: 1px solid #F7F9FA !important; border-right: 1px solid #f7f9fa !important;
} }
:deep(.el-table__header-wrapper th:last-child) { :deep(.el-table__header-wrapper th:last-child) {
border-right: none !important; border-right: none !important;
} }
:deep(.el-table) { :deep(.el-table) {
border: 1px solid #F7F9FA !important; border: 1px solid #f7f9fa !important;
border-radius: 6px; border-radius: 6px;
} }
.customer-page {
.customer-page {
background: var(--art-main-bg-color); background: var(--art-main-bg-color);
min-height: 100vh; min-height: 100vh;
} }
.customer-toolbar {
.customer-toolbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
padding: 20px 10px; padding: 20px 10px;
background: var(--art-main-bg-color); background: var(--art-main-bg-color);
} }
.customer-search-group {
.customer-search-group {
display: flex; display: flex;
gap: 12px; gap: 12px;
} }
.customer-tags {
.customer-tags {
background: var(--art-main-bg-color); background: var(--art-main-bg-color);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.filter-row {
.filter-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 14px; margin-bottom: 14px;
} }
.filter-label {
.filter-label {
width: 120px; width: 120px;
color: #666; color: #666;
margin-right: 8px; margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
font-size: 14px; font-size: 14px;
} }
.filter-tags {
.filter-tags {
flex: 1; flex: 1;
color: #333; color: #333;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
span{
span {
margin-right: 20px; margin-right: 20px;
} }
} }
.customer-tabs {
.customer-tabs {
margin-bottom: 8px; margin-bottom: 8px;
} }
.status-following {
color: #00A43F; .status-following {
color: #00a43f;
font-weight: bold; font-weight: bold;
} }
.status-dealed {
color: #3471FF; .status-dealed {
color: #3471ff;
font-weight: bold; font-weight: bold;
} }
.status-lost {
color: #FF0000; .status-lost {
color: #ff0000;
font-weight: bold; font-weight: bold;
} }
.customer-table {
.customer-table {
background: var(--art-main-bg-color); background: var(--art-main-bg-color);
border-radius: 8px; border-radius: 8px;
margin-top: 0; margin-top: 0;
} }
.filter-more-btn {
.filter-more-btn {
text-align: center; text-align: center;
margin-top: 8px; margin-top: 8px;
} }
.fade-enter-active, .fade-leave-active {
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.fade-enter-from, .fade-leave-to {
.fade-enter-from,
.fade-leave-to {
opacity: 0; opacity: 0;
} }
.tag-item {
.tag-item {
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
padding: 2px 10px; padding: 2px 10px;
@@ -324,6 +370,10 @@ function handleTagClick(groupId: string, tagId: string) {
transition: background 0.2s; transition: background 0.2s;
min-width: 100px; min-width: 100px;
display: inline-block; display: inline-block;
} }
.tag-active { background: #3471FF; color: #fff; }
.tag-active {
background: #3471ff;
color: #fff;
}
</style> </style>