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; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .form-item { margin-bottom: 0; }
        .form-item.full-width { grid-column: span 2; }
        .form-label { font-size: 14px; color: #606266; margin-bottom: 8px; display: block; }
        .form-label .required { color: #ee0a24; margin-right: 4px; }
        .avatar-upload { display: flex; align-items: center; gap: 16px; }
        .avatar-preview { width: 80px; height: 80px; border-radius: 50%; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #c0c4cc; border: 1px dashed #dcdfe6; }
        .btn-row { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
        .btn { padding: 10px 32px; border-radius: 8px; font-size: 14px; cursor: pointer; border: none; }
        .btn-primary { background: #1989fa; color: #fff; }
        .btn-default { background: #fff; color: #606266; border: 1px solid #dcdfe6; }
    </style>
</head>
<body>
    <div id="app">
        <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><User /></el-icon><span>用户管理</span></div>
                <div class="menu-item active"><el-icon><Plus /></el-icon><span>新增用户</span></div>
            </div>
            <div class="content">
                <div class="breadcrumb">首页 / 用户管理 / 新增用户</div>
                <div class="card">
                    <div class="card-header"><span class="card-title">基本信息</span></div>
                    <div class="form-grid">
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>用户名</label>
                            <el-input v-model="form.username" placeholder="请输入用户名" />
                        </div>
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>真实姓名</label>
                            <el-input v-model="form.realName" placeholder="请输入真实姓名" />
                        </div>
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>手机号</label>
                            <el-input v-model="form.phone" placeholder="请输入手机号" />
                        </div>
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>角色</label>
                            <el-select v-model="form.role" placeholder="请选择角色" style="width:100%">
                                <el-option label="运营人员" value="admin" />
                                <el-option label="供应商" value="supplier" />
                                <el-option label="客户" value="client" />
                                <el-option label="配送员" value="deliver" />
                            </el-select>
                        </div>
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>所属区域</label>
                            <el-select v-model="form.region" placeholder="请选择区域" style="width:100%">
                                <el-option label="城东区" value="east" />
                                <el-option label="城西区" value="west" />
                                <el-option label="城南区" value="south" />
                                <el-option label="城北区" value="north" />
                            </el-select>
                        </div>
                        <div class="form-item">
                            <label class="form-label">状态</label>
                            <el-radio-group v-model="form.status">
                                <el-radio label="1">启用</el-radio>
                                <el-radio label="0">禁用</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="form-item full-width">
                            <label class="form-label">备注</label>
                            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :rows="3" />
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><span class="card-title">账号设置</span></div>
                    <div class="form-grid">
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>初始密码</label>
                            <el-input v-model="form.password" type="password" placeholder="请输入初始密码" show-password />
                        </div>
                        <div class="form-item">
                            <label class="form-label"><span class="required">*</span>确认密码</label>
                            <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
                        </div>
                    </div>
                </div>
                <div class="btn-row">
                    <button class="btn btn-default" onclick="history.back()">取消</button>
                    <button class="btn btn-primary">保存</button>
                </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 } = Vue;
        const app = createApp({
            setup() {
                const form = reactive({
                    username: '',
                    realName: '',
                    phone: '',
                    role: '',
                    region: '',
                    status: '1',
                    remark: '',
                    password: '',
                    confirmPassword: ''
                });
                return { form };
            }
        });
        const { reactive } = Vue;
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); }
        app.mount('#app');
    </script>
</body>
</html>