sqxp/docs/原型图/web/系统设置.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 系统设置原型图</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item:hover { background: #f5f7fa; color: #1989fa; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
        .status-tag.primary { background: #ecf5ff; color: #1989fa; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.warning { background: #fdf6ec; color: #ff976a; }
        .status-tag.info { background: #f4f4f5; color: #909399; }
        .form-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
        .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #f5f5f5; }
        .setting-item:last-child { border-bottom: none; }
        .setting-info h4 { font-size: 14px; margin-bottom: 4px; }
        .setting-info p { font-size: 13px; color: #909399; }
        .nav-tabs { display: flex; gap: 4px; background: #f5f7fa; padding: 4px; border-radius: 8px; margin-bottom: 20px; width: 300px; }
        .nav-tab { padding: 10px 20px; cursor: pointer; border-radius: 6px; font-size: 14px; color: #606266; }
        .nav-tab.active { background: #fff; color: #1989fa; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="topbar">
        <div class="topbar-logo">
            <h1>叁强鲜配</h1>
            <span>运营管理后台</span>
        </div>
        <div class="topbar-user">
            <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
            <span>管理员</span>
        </div>
    </div>

    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>首页</span></div>
            <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
            <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
            <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
            <div class="menu-item"><el-icon><Search /></el-icon><span>询价管理</span></div>
            <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
            <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
            <div class="menu-item"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
            <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
            <div class="menu-item"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
            <div class="menu-item"><el-icon><Document /></el-icon><span>附件管理</span></div>
            <div class="menu-item active"><el-icon><Setting /></el-icon><span>系统设置</span></div>
        </div>

        <!-- 内容区 -->
        <div class="content">
            <div class="breadcrumb">系统设置</div>

            <!-- Tab切换 -->
            <div class="nav-tabs">
                <div class="nav-tab active">基本设置</div>
                <div class="nav-tab">安全设置</div>
                <div class="nav-tab">审计日志</div>
            </div>

            <!-- 基本设置 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">基本设置</span>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>系统名称</h4>
                        <p>显示在顶部导航和登录页</p>
                    </div>
                    <el-input placeholder="叁强鲜配" style="width:200px;" />
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>公司名称</h4>
                        <p>用于显示和联系信息</p>
                    </div>
                    <el-input placeholder="叁强公司" style="width:200px;" />
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>联系电话</h4>
                        <p>客户联系客服使用</p>
                    </div>
                    <el-input placeholder="400-888-8888" style="width:200px;" />
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>配送时效预警时间</h4>
                        <p>配送单过期前多少分钟预警</p>
                    </div>
                    <el-input placeholder="60" style="width:100px;" /> <span style="margin-left:8px;">分钟</span>
                </div>
                <div style="margin-top:20px;text-align:right;">
                    <el-button type="primary">保存设置</el-button>
                </div>
            </div>

            <!-- 安全设置 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">安全设置</span>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>密码复杂度要求</h4>
                        <p>设置账号密码的复杂度要求</p>
                    </div>
                    <el-select placeholder="中等" style="width:150px;">
                        <el-option label="简单" value="simple" />
                        <el-option label="中等" value="medium" />
                        <el-option label="复杂" value="complex" />
                    </el-select>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>密码过期时间</h4>
                        <p>强制要求用户修改密码的周期</p>
                    </div>
                    <el-select placeholder="90天" style="width:150px;">
                        <el-option label="30天" value="30" />
                        <el-option label="60天" value="60" />
                        <el-option label="90天" value="90" />
                        <el-option label="永不过期" value="0" />
                    </el-select>
                </div>
                <div class="setting-item">
                    <div class="setting-info">
                        <h4>会话超时时间</h4>
                        <p>用户无操作自动退出的时间</p>
                    </div>
                    <el-select placeholder="30分钟" style="width:150px;">
                        <el-option label="15分钟" value="15" />
                        <el-option label="30分钟" value="30" />
                        <el-option label="60分钟" value="60" />
                        <el-option label="120分钟" value="120" />
                    </el-select>
                </div>
                <div style="margin-top:20px;text-align:right;">
                    <el-button type="primary">保存设置</el-button>
                </div>
            </div>

            <!-- 审计日志 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">审计日志</span>
                </div>
                <el-table :data="auditLogList" style="width:100%">
                    <el-table-column prop="module" label="模块" width="100">
                        <template #default="{row}">
                            <span :class="'status-tag '+row.moduleClass">{{row.moduleText}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" width="120" />
                    <el-table-column prop="targetType" label="目标类型" width="100" />
                    <el-table-column prop="operatorName" label="操作人" width="100" />
                    <el-table-column prop="operatorRole" label="角色" width="80" />
                    <el-table-column prop="ipAddress" label="IP地址" width="120" />
                    <el-table-column prop="createTime" label="操作时间" width="160" />
                    <el-table-column prop="note" label="备注" />
                </el-table>
                <div style="display:flex;justify-content:center;gap:8px;margin-top:24px;">
                    <el-pagination background layout="prev, pager, next" :total="500" />
                </div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp, ref } = Vue;
        const app = createApp({
            setup() {
                const auditLogList = ref([
                    { module: 'user', moduleClass: 'primary', moduleText: '用户', operation: '创建账号', targetType: '客户', operatorName: '管理员', operatorRole: '运营', ipAddress: '192.168.1.100', createTime: '2026-03-19 10:30:00', note: '新增客户账号：client001' },
                    { module: 'price', moduleClass: 'success', moduleText: '价格', operation: '发布价格', targetType: '价格清单', operatorName: '管理员', operatorRole: '运营', ipAddress: '192.168.1.100', createTime: '2026-03-19 09:00:00', note: '发布城东区域V3价格清单' },
                    { module: 'order', moduleClass: 'warning', moduleText: '订单', operation: '分配配送', targetType: '订单', operatorName: '管理员', operatorRole: '运营', ipAddress: '192.168.1.101', createTime: '2026-03-19 08:45:00', note: '分配订单ORD202603190001给配送员王强' },
                    { module: 'settlement', moduleClass: 'info', moduleText: '结算', operation: '确认结算', targetType: '结算', operatorName: '管理员', operatorRole: '运营', ipAddress: '192.168.1.100', createTime: '2026-03-18 16:20:00', note: '确认客户XX餐厅线下结算¥856.00' },
                    { module: 'user', moduleClass: 'primary', moduleText: '用户', operation: '重置密码', targetType: '供应商', operatorName: '管理员', operatorRole: '运营', ipAddress: '192.168.1.102', createTime: '2026-03-18 14:10:00', note: '重置供应商supplier001密码' },
                ]);
                return { auditLogList };
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>