150 lines
6.6 KiB
Plaintext
150 lines
6.6 KiB
Plaintext
<template>
|
|
<view class="admin-page category-page">
|
|
<view class="admin-sections">
|
|
<!-- 筛选区域 (1:1 复刻 CRMEB: 横向排列的过滤器) -->
|
|
<view class="admin-card filter-card">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">是否显示:</text>
|
|
<view class="compact-select-wrapper">
|
|
<text class="select-text">请选择</text>
|
|
<text class="arrow">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text class="label">分类名称:</text>
|
|
<input class="filter-input" placeholder="请输入分类名称" />
|
|
</view>
|
|
<button class="btn-search">查询分类</button>
|
|
</view>
|
|
|
|
<view class="filter-row second-row">
|
|
<view class="filter-item">
|
|
<text class="label">配置名称:</text>
|
|
<input class="filter-input" placeholder="请输入配置名称" />
|
|
</view>
|
|
<button class="btn-search">查询配置</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表格板块 -->
|
|
<view class="admin-card table-card">
|
|
<view class="table-header-actions">
|
|
<view class="btn-add">添加配置分类</view>
|
|
</view>
|
|
|
|
<!-- 模拟表格 (CRMEB风格: 线条简约, 蓝调表头) -->
|
|
<view class="table-container">
|
|
<view class="table-thead">
|
|
<view class="th cell-id">ID</view>
|
|
<view class="th cell-name">分类名称</view>
|
|
<view class="th cell-field">分类字段</view>
|
|
<view class="th cell-status">状态</view>
|
|
<view class="th cell-ops">操作</view>
|
|
</view>
|
|
|
|
<view class="table-tbody">
|
|
<view v-for="item in categoryList" :key="item.id" class="tr">
|
|
<view class="td cell-id">{{ item.id }}</view>
|
|
<view class="td cell-name">
|
|
<text class="tree-icon">▶</text>
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
<view class="td cell-field">{{ item.field }}</view>
|
|
<view class="td cell-status">
|
|
<view class="toggle-switch" :class="{ active: item.status }" @click="item.status = !item.status">
|
|
<view class="switch-ball"></view>
|
|
</view>
|
|
</view>
|
|
<view class="td cell-ops">
|
|
<text class="op-link">配置列表</text>
|
|
<view class="divider"></view>
|
|
<text class="op-link">编辑</text>
|
|
<view class="divider"></view>
|
|
<text class="op-link delete">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const categoryList = ref([
|
|
{ id: 9, name: '分销配置', field: 'fenxiao', status: true },
|
|
{ id: 65, name: '接口设置', field: 'system_serve', status: true },
|
|
{ id: 69, name: '客服配置', field: 'kefu_config', status: true },
|
|
{ id: 78, name: '应用配置', field: 'sys_app', status: true },
|
|
{ id: 100, name: '用户配置', field: 'system_user_config', status: true },
|
|
{ id: 113, name: '订单配置', field: 'order_config', status: true },
|
|
{ id: 129, name: '系统配置', field: 'system_config', status: true },
|
|
{ id: 136, name: '商品配置', field: 'product_config', status: true }
|
|
])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.category-page { padding: 0; background-color: transparent; }
|
|
|
|
.filter-card {
|
|
margin-bottom: var(--admin-section-gap);
|
|
padding: var(--admin-card-padding);
|
|
box-shadow: 0 1px 4px rgba(0,21,41,0.08);
|
|
border-radius: 8px;
|
|
}
|
|
.filter-row { display: flex; flex-direction: row; align-items: center; }
|
|
.second-row { margin-top: 15px; border-top: 1px dashed #eee; padding-top: 15px; }
|
|
|
|
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 30px; }
|
|
.filter-item .label { font-size: 14px; color: #515a6e; margin-right: 10px; }
|
|
|
|
.compact-select-wrapper {
|
|
display: flex; flex-direction: row; align-items: center;
|
|
border: 1px solid #dcdee2; width: 180px; height: 32px;
|
|
padding: 0 10px; border-radius: 4px; justify-content: space-between;
|
|
}
|
|
.select-text { font-size: 13px; color: #c5c8ce; }
|
|
.arrow { font-size: 10px; color: #808695; }
|
|
|
|
.filter-input { border: 1px solid #dcdee2; width: 220px; height: 32px; padding: 0 10px; border-radius: 4px; font-size: 13px; }
|
|
|
|
.btn-search { background-color: #2d8cf0; color: #fff; font-size: 12px; height: 32px; line-height: 32px; padding: 0 15px; border-radius: 4px; margin-right: 10px; border: none; }
|
|
|
|
.table-card {
|
|
padding: var(--admin-card-padding);
|
|
box-shadow: 0 1px 4px rgba(0,21,41,0.08);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-add { display: inline-block; background-color: #2d8cf0; color: #fff; font-size: 13px; height: 32px; line-height: 32px; padding: 0 15px; border-radius: 4px; border: none; margin-bottom: 15px; cursor: pointer; }
|
|
|
|
/* 表格样式 (1:1 复刻 CRMEB 极简蓝风格) */
|
|
.table-container { width: 100%; border: 1px solid #e8eaec; border-radius: 4px; overflow: hidden; }
|
|
.table-thead { display: flex; flex-direction: row; background-color: #f8f9fa; border-bottom: 1px solid #e8eaec; }
|
|
.th { padding: 12px 15px; font-size: 14px; color: #515a6e; font-weight: bold; text-align: left; }
|
|
|
|
.tr { display: flex; flex-direction: row; border-bottom: 1px solid #e8eaec; align-items: center; background-color: #fff; }
|
|
.tr:last-child { border-bottom: none; }
|
|
.td { padding: 12px 15px; font-size: 14px; color: #515a6e; }
|
|
|
|
.cell-id { width: 80px; }
|
|
.cell-name { flex: 2; }
|
|
.cell-field { flex: 2; }
|
|
.cell-status { width: 120px; }
|
|
.cell-ops { width: 260px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
|
|
|
|
.tree-icon { font-size: 12px; color: #808695; margin-right: 8px; }
|
|
|
|
/* Toggle Switch (复刻) */
|
|
.toggle-switch { width: 44px; height: 22px; background-color: #ccc; border-radius: 11px; position: relative; cursor: pointer; transition: all .2s; }
|
|
.toggle-switch.active { background-color: #2d8cf0; }
|
|
.switch-ball { position: absolute; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; left: 2px; top: 2px; transition: all .2s; }
|
|
.toggle-switch.active .switch-ball { transform: translateX(22px); }
|
|
|
|
.op-link { color: #2d8cf0; font-size: 13px; cursor: pointer; margin: 0 5px; }
|
|
.op-link.delete { color: #ed4014; }
|
|
.divider { width: 1px; height: 12px; background-color: #e8eaec; margin: 0 5px; }
|
|
</style> |