cw_web/src/views/setting/netSetting/index.vue

<template>
  <div class="setting-container">
    <div class="setting-card">
      <div class="card-header">
        <h2 class="title">{{t('network_settings.title')}}</h2>
        <p class="subtitle">{{t('network_settings.description')}}</p>
      </div>
      <div class="content">
        <el-form
          ref="settingFormRef"
          :hide-required-asterisk="true"
          label-position="left"
          label-width="125px"
          :model="settingFormData"
          :rules="settingFormRules"
          @keyup.enter="handleSave"
        >
          <!-- 自动获取DHCP -->
          <div class="dhcp-section">
            <div class="dhcp-header">
              <span class="dhcp-label">{{t('network_settings.dhcp')}}</span>
              <el-switch
                v-model="settingFormData.enableDHCP"
                :active-value="1"
                :inactive-value="0"
                active-color="#409eff"
                inactive-color="#dcdfe4"
                @change="switchChange($event)"
              />
            </div>
            <p class="dhcp-tip">{{t('network_settings.dhcp_tip')}}</p>
          </div>

          <!-- IP版本 -->
          <el-form-item :label="t('network_settings.ip_version')" prop="IP_version" class="form-item-custom">
            <el-input v-model="IP_version"   disabled></el-input>
          </el-form-item>

          <!-- IP地址 -->
          <el-form-item :label="t('network_settings.ip_address')" prop="IP" class="form-item-custom">
            <IPInputBox
              :disabled="settingFormData.enableDHCP"
              :ip-val="settingFormData.ipAddress"
              @update:ip-val="(updateVal) => (settingFormData.ipAddress = updateVal)"
            />
          </el-form-item>

          <!-- 子网掩码 -->
          <el-form-item :label="t('network_settings.subnet_mask')" prop="mask" class="form-item-custom">
            <IPInputBox
              :disabled="settingFormData.enableDHCP"
              :ip-val="settingFormData.subNetAddress"
              @update:ip-val="(updateVal) => (settingFormData.subNetAddress = updateVal)"
            />
          </el-form-item>

          <!-- 默认网关 -->
          <el-form-item :label="t('network_settings.gateway')" prop="gateway" class="form-item-custom">
            <IPInputBox
              :disabled="settingFormData.enableDHCP"
              :ip-val="settingFormData.gateWayAddress"
              @update:ip-val="(updateVal) => (settingFormData.gateWayAddress = updateVal)"
            />
          </el-form-item>
          <!-- 物理地址 -->
          <el-form-item :label="t('network_settings.mac_address')" class="form-item-custom">
            <el-input
              v-model="settingFormData.deviceMac"
              disabled
              class="mac-input"
            />
          </el-form-item>

          <!-- 操作按钮 -->
          <div class="button-group">
            <el-button
              :loading="loading"
              size="large"
              type="primary"
              @click="handleSave()"
              class="save-button"
            >
              <span v-if="!loading">{{t('common.save')}}</span>
              <span v-else>Saving...</span>
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  type FormInstance,
  type FormRules,
  ElMessage,
  ElMessageBox
} from 'element-plus'
import { getUserSettingApi, putUserSettingApi } from '@/api/setting'
import { type UpdateSettingRequestData } from '@/api/types/setting'
import IPInputBox from './components/IPInputBox.vue'
import {useI18n} from "vue-i18n";

const { t } = useI18n();

const IP_version = ref('IPV4')
const options = [
  {
    value: 'IPV4',
    label: 'IPV4'
  }
]
/** 按钮 Loading */
const loading = ref(false)
/** 表单数据 */
const settingFormData: UpdateSettingRequestData = reactive({
  NIC: 1,
  enableDHCP: 0,
  ipAddress: '',
  subNetAddress: '',
  gateWayAddress: '',
  deviceMac: ''
})
/** 表单元素的引用 */
const settingFormRef = ref<FormInstance | null>(null)
/** 表单校验规则 */
const settingFormRules: FormRules = {
  IP: [
    {
      validator: (rule, value, callback) => {
        if (settingFormData.ipAddress) {
          callback()
        } else {
          callback(new Error('Please enter the IP'))
        }
      },
      trigger: 'blur'
    }
  ],
  mask: [
    {
      validator: (rule, value, callback) => {
        if (settingFormData.subNetAddress) {
          callback()
        } else {
          callback(new Error('Please enter the subnet mask'))
        }
      },
      trigger: 'blur'
    }
  ],
  gateway: [
    {
      validator: (rule, value, callback) => {
        if (settingFormData.gateWayAddress) {
          callback()
        } else {
          callback(new Error('Please enter the default gateway'))
        }
      },
      trigger: 'blur'
    }
  ]
}
const switchChange = ($event: number) => {
  if ($event === 1) {
    settingFormRef.value?.clearValidate()
  }
}
const param = {
  NIC: 1
}
/** 获取表单数据 */
const fetchData = () => {
  getUserSettingApi(param.NIC).then((res) => {
    settingFormData.enableDHCP = res.data.enableDHCP
    settingFormData.ipAddress = res.data.ipAddress
    settingFormData.subNetAddress = res.data.subNetAddress
    settingFormData.gateWayAddress = res.data.gateWayAddress
    settingFormData.deviceMac = res.data.deviceMac
    settingFormData.firstDNSAddress = res.data.firstDNSAddress
    settingFormData.secondDNSAddress = res.data.secondDNSAddress
  })
}
fetchData()

/** 保存逻辑 */
const handleSave = () => {
    settingFormRef.value?.validate((valid: boolean, fields) => {
      if (valid) {
        ElMessageBox.confirm(t('popup.network_tips'), t('popup.note'), {
          confirmButtonText: t('popup.confirm'),
          cancelButtonText: t('popup.cancel'),
          type: 'warning',
          confirmButtonClass: 'el-button--danger'
        }).then(() => {
          loading.value = true
          putUserSettingApi(param.NIC, settingFormData)
            .then(() => {
              ElMessage.success('Operation successful')
            })
            .finally(() => {
              loading.value = false
            })
        })
      }
    })
}
</script>

<style lang="scss" scoped>
.setting-container {
  padding: 20px;
  //background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 85vh;
  display: flex;
  //align-items: flex-start;
  justify-content: center;
  align-items: center;
}

.setting-card {
  width: 100%;
  max-width: 510px;
  //background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
}

.card-header {
  //background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #000104;
  padding: 20px 20px 0 20px;
  text-align: center;

  .title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .subtitle {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
  }
}

.content {
  padding: 30px;
}

.dhcp-section {
  background: #f0f9ff;
  border-left: 4px solid #409eff;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 24px;

  .dhcp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .dhcp-label {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
  }

  .dhcp-tip {
    margin: 0;
    font-size: 12px;
    color: #909399;
  }
}

.form-item-custom {
  margin-bottom: 20px;

  :deep(.el-form-item__label) {
    color: #606266;
    font-weight: 500;
    padding-right: 12px;
  }
}

.mac-input {
  :deep(.el-input__wrapper) {
    background-color: #f5f7fa !important;
  }
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.save-button {
  flex: 1;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
  }

  &:active {
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 600px) {
  .setting-container {
    padding: 12px;
  }

  .setting-card {
    max-width: 100%;
  }

  .content {
    padding: 20px;
  }

  .card-header {
    padding: 20px 16px;

    .title {
      font-size: 20px;
    }

    .subtitle {
      font-size: 12px;
    }
  }
}

// 深色主题支持（可选）
@media (prefers-color-scheme: dark) {
  .setting-card {
    background: #1e1e1e;
  }

  .content {
    color: #e0e0e0;
  }

  .form-item-custom {
    :deep(.el-form-item__label) {
      color: #b0b0b0;
    }

    :deep(.el-input__wrapper) {
      background-color: #2a2a2a;
      border-color: #404040;
    }
  }
}
</style>