feat: 系统参数前端页面

core/core-frontend/src/locales/zh-CN.ts

@@ -1630,7 +1630,7 @@ export default {
     weeks_4: '周四',
     weeks_5: '周五',
     weeks_6: '周六',
-    system_parameter_setting: '系统参数设置',
+    system_parameter_setting: '系统参数',
     connection_successful: '连接成功',
     connection_failed: '连接失败',
     save_failed: '保存失败',

core/core-frontend/src/views/system/common/InfoTemplate.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="info-template-container">
+    <div class="info-template-header">
+      <div class="info-template-title">
+        <span>基础设置</span>
+      </div>
+      <div>
+        <el-button type="primary" @click="edit">{{ t('commons.edit') }}</el-button>
+      </div>
+    </div>
+    <div class="info-template-content">
+      <div class="info-content-item" v-for="item in settingList" :key="item.pkey">
+        <div class="info-item-label">
+          <span>{{ item.pkey }}</span>
+          <el-tooltip
+            v-if="tooltipItem[item.pkey]"
+            effect="dark"
+            :content="tooltipItem[item.pkey]"
+            placement="top"
+          >
+            <el-icon class="info-tips"><Icon name="dv-info"></Icon></el-icon>
+          </el-tooltip>
+        </div>
+        <div class="info-item-content">
+          <div class="info-item-pwd" v-if="item.type === 'pwd'">
+            <span>{{ pwdItem[item.pkey]['hidden'] ? '********' : item.pval }}</span>
+            <el-tooltip effect="dark" content="新页面预览" placement="top">
+              <el-icon
+                class="hover-icon hover-icon-in-table switch-pwd-icon"
+                @click="switchPwd(item.pkey)"
+              >
+                <Icon :name="pwdItem[item.pkey]['hidden'] ? 'eye' : 'eye-open'"></Icon>
+              </el-icon>
+            </el-tooltip>
+          </div>
+          <span v-else>{{ item.pval }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, defineProps, PropType } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { SettingRecord, ToolTipRecord } from './SettingTemplate'
+const { t } = useI18n()
+const props = defineProps({
+  settingKey: {
+    type: String,
+    default: 'basic'
+  },
+  labelTooltips: {
+    type: Array as PropType<ToolTipRecord[]>,
+    default: () => []
+  }
+})
+
+const settingList = ref([] as SettingRecord[])
+
+const loadBasic = () => {
+  settingList.value.push({
+    pkey: '请求超时时间',
+    pval: '100',
+    type: 'text',
+    sort: 1
+  })
+  settingList.value.push({
+    pkey: '数据源检测时间间隔',
+    pval: '100',
+    type: 'text',
+    sort: 2
+  })
+  settingList.value.push({
+    pkey: '默认登录方式',
+    pval: '普通登录',
+    type: 'text',
+    sort: 3
+  })
+  settingList.value.push({
+    pkey: '默认密码',
+    pval: 'DataEase@123456',
+    type: 'pwd',
+    sort: 4
+  })
+}
+
+const loadEmail = () => {
+  settingList.value.push({
+    pkey: 'SMTP主机',
+    pval: 'smtp.exmail.qq.com',
+    type: 'text',
+    sort: 1
+  })
+  settingList.value.push({
+    pkey: 'SMTP端口',
+    pval: '465',
+    type: 'text',
+    sort: 2
+  })
+  settingList.value.push({
+    pkey: 'SMTP账户',
+    pval: 'test@fit2cloud.com',
+    type: 'text',
+    sort: 3
+  })
+  settingList.value.push({
+    pkey: 'SMTP密码',
+    pval: 'DataEase@123456',
+    type: 'pwd',
+    sort: 4
+  })
+  settingList.value.push({
+    pkey: '测试收件人',
+    pval: 'yawen.chen@fit2cloud.com',
+    type: 'pwd',
+    sort: 5
+  })
+  settingList.value.push({
+    pkey: 'SSL',
+    pval: '开启',
+    type: 'text',
+    sort: 6
+  })
+  settingList.value.push({
+    pkey: 'TSL',
+    pval: '未开启',
+    type: 'text',
+    sort: 7
+  })
+}
+
+const init = () => {
+  if (props.settingKey === 'basic') {
+    loadBasic()
+  }
+  if (props.settingKey === 'email') {
+    loadEmail()
+  }
+}
+const pwdItem = ref({})
+
+const formatPwd = () => {
+  settingList.value.forEach(setting => {
+    if (setting.type === 'pwd') {
+      pwdItem.value[setting.pkey] = { hidden: true }
+    }
+  })
+}
+
+const tooltipItem = ref({})
+const formatLabel = () => {
+  props.labelTooltips?.length &&
+    props.labelTooltips.forEach(tooltip => {
+      tooltipItem.value[tooltip.key] = tooltip.val
+    })
+}
+
+const switchPwd = (pkey: string) => {
+  pwdItem.value[pkey]['hidden'] = !pwdItem.value[pkey]['hidden']
+}
+
+const emits = defineEmits(['edit'])
+const edit = () => {
+  emits('edit')
+}
+init()
+formatPwd()
+formatLabel()
+</script>
+
+<style lang="less" scope>
+.info-template-container {
+  padding: 24px;
+  .info-template-header {
+    display: flex;
+    justify-content: space-between;
+    .info-template-title {
+      height: 24px;
+      line-height: 23px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #1f2329;
+    }
+  }
+  .info-template-content {
+    width: 100%;
+    margin: 8px 0;
+    .info-content-item {
+      width: 50%;
+      height: 48px;
+      float: left;
+      margin-bottom: 16px;
+      .info-item-label {
+        height: 22px;
+        line-height: 22px;
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 14px;
+          color: #646a73;
+          font-weight: 400;
+        }
+        i {
+          margin-left: 2px;
+        }
+      }
+      .info-item-content {
+        line-height: 22px;
+        height: 22px;
+        span {
+          font-size: 14px;
+          color: #1f2329;
+          font-weight: 400;
+        }
+
+        .info-item-pwd {
+          height: 22px;
+          line-height: 22px;
+
+          display: flex;
+          align-items: center;
+          i {
+            margin-left: 2px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

core/core-frontend/src/views/system/common/SettingTemplate.ts

@@ -0,0 +1,11 @@
+export interface SettingRecord {
+  pkey: string
+  pval: string
+  type: string
+  sort: number
+}
+
+export interface ToolTipRecord {
+  key: string
+  val: string
+}

core/core-frontend/src/views/system/parameter/basic/BasicEdit.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus-secondary'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { FormInstance, FormRules } from 'element-plus-secondary'
+
+const { t } = useI18n()
+const dialogVisible = ref(false)
+const loadingInstance = ref(null)
+const createUserForm = ref<FormInstance>()
+const state = reactive({
+  roleList: [],
+  form: reactive<UserForm>({
+    id: null,
+    account: null,
+    name: null,
+    email: null,
+    enable: true,
+    phone: null,
+    phonePrefix: '+86',
+    roleIds: []
+  })
+})
+
+const rule = reactive<FormRules>({})
+
+const edit = () => {
+  dialogVisible.value = true
+  // queryForm()
+}
+/* const queryForm = () => {
+  showLoading()
+  personInfoApi().then(res => {
+    state.form = reactive<UserForm>(res.data)
+    closeLoading()
+  })
+} */
+const emits = defineEmits(['saved'])
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const param = { ...state.form }
+      const method = null
+      showLoading()
+      method(param)
+        .then(res => {
+          if (!res.msg) {
+            ElMessage.success(t('common.save_success'))
+
+            emits('saved')
+            reset()
+          }
+          closeLoading()
+        })
+        .catch(() => {
+          closeLoading()
+        })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  dialogVisible.value = false
+}
+
+const reset = () => {
+  resetForm(createUserForm.value)
+}
+
+const showLoading = () => {
+  loadingInstance.value = ElLoading.service({ target: '.basic-info-drawer' })
+}
+const closeLoading = () => {
+  loadingInstance.value?.close()
+}
+defineExpose({
+  edit
+})
+</script>
+
+<template>
+  <el-drawer
+    title="基础设置"
+    v-model="dialogVisible"
+    custom-class="basic-info-drawer"
+    size="600px"
+    direction="rtl"
+  >
+    <el-form
+      ref="createUserForm"
+      require-asterisk-position="right"
+      :model="state.form"
+      :rules="rule"
+      label-width="80px"
+      label-position="top"
+    >
+      <el-form-item label="请求超时时间" prop="name">
+        <el-input
+          v-model="state.form.name"
+          :placeholder="t('common.please_input') + t('user.name')"
+        />
+      </el-form-item>
+
+      <el-form-item label="数据源检测时间间隔" prop="account">
+        <el-input
+          v-model="state.form.account"
+          :placeholder="t('common.please_input') + t('common.account')"
+          disabled
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="resetForm(createUserForm)">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submitForm(createUserForm)">
+          {{ t('commons.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="less">
+.basic-info-drawer {
+  .editer-form-title {
+    width: 100%;
+    border-radius: 4px;
+    background: #e1eaff;
+    margin: -8px 0 16px 0;
+    height: 40px;
+    padding-left: 16px;
+
+    i {
+      color: #3370ff;
+      font-size: 14.666666030883789px;
+    }
+
+    .pwd {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+    }
+
+    .pwd {
+      margin: 0 8px;
+      color: #1f2329;
+    }
+  }
+  .input-with-select {
+    .ed-input-group__prepend {
+      width: 72px;
+      background-color: #fff;
+      padding: 0 20px;
+      color: #1f2329;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

core/core-frontend/src/views/system/parameter/basic/BasicInfo.vue

@@ -0,0 +1,22 @@
+<template>
+  <InfoTemplate :label-tooltips="tooltips" setting-key="basic" @edit="edit" />
+  <basic-edit ref="editor" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import InfoTemplate from '../../common/InfoTemplate.vue'
+import BasicEdit from './BasicEdit.vue'
+
+const editor = ref()
+const tooltips = [
+  {
+    key: '请求超时时间',
+    val: '请求超时时间(单位：秒，注意：保存后刷新浏览器生效)'
+  }
+]
+
+const edit = () => {
+  editor?.value.edit()
+}
+</script>

core/core-frontend/src/views/system/parameter/email/EmailEdit.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus-secondary'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { FormInstance, FormRules } from 'element-plus-secondary'
+
+const { t } = useI18n()
+const dialogVisible = ref(false)
+const loadingInstance = ref(null)
+const createUserForm = ref<FormInstance>()
+const state = reactive({
+  roleList: [],
+  form: reactive<UserForm>({
+    id: null,
+    account: null,
+    name: null,
+    email: null,
+    enable: true,
+    phone: null,
+    phonePrefix: '+86',
+    roleIds: []
+  })
+})
+
+const rule = reactive<FormRules>({})
+
+const edit = () => {
+  dialogVisible.value = true
+  // queryForm()
+}
+/* const queryForm = () => {
+  showLoading()
+  personInfoApi().then(res => {
+    state.form = reactive<UserForm>(res.data)
+    closeLoading()
+  })
+} */
+const emits = defineEmits(['saved'])
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const param = { ...state.form }
+      const method = null
+      showLoading()
+      method(param)
+        .then(res => {
+          if (!res.msg) {
+            ElMessage.success(t('common.save_success'))
+
+            emits('saved')
+            reset()
+          }
+          closeLoading()
+        })
+        .catch(() => {
+          closeLoading()
+        })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  dialogVisible.value = false
+}
+
+const reset = () => {
+  resetForm(createUserForm.value)
+}
+
+const showLoading = () => {
+  loadingInstance.value = ElLoading.service({ target: '.basic-info-drawer' })
+}
+const closeLoading = () => {
+  loadingInstance.value?.close()
+}
+defineExpose({
+  edit
+})
+</script>
+
+<template>
+  <el-drawer
+    title="邮件设置"
+    v-model="dialogVisible"
+    custom-class="basic-info-drawer"
+    size="600px"
+    direction="rtl"
+  >
+    <el-form
+      ref="createUserForm"
+      require-asterisk-position="right"
+      :model="state.form"
+      :rules="rule"
+      label-width="80px"
+      label-position="top"
+    >
+      <el-form-item label="请求超时时间" prop="name">
+        <el-input
+          v-model="state.form.name"
+          :placeholder="t('common.please_input') + t('user.name')"
+        />
+      </el-form-item>
+
+      <el-form-item label="数据源检测时间间隔" prop="account">
+        <el-input
+          v-model="state.form.account"
+          :placeholder="t('common.please_input') + t('common.account')"
+          disabled
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="resetForm(createUserForm)">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submitForm(createUserForm)">
+          {{ t('commons.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="less">
+.basic-info-drawer {
+  .editer-form-title {
+    width: 100%;
+    border-radius: 4px;
+    background: #e1eaff;
+    margin: -8px 0 16px 0;
+    height: 40px;
+    padding-left: 16px;
+
+    i {
+      color: #3370ff;
+      font-size: 14.666666030883789px;
+    }
+
+    .pwd {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+    }
+
+    .pwd {
+      margin: 0 8px;
+      color: #1f2329;
+    }
+  }
+  .input-with-select {
+    .ed-input-group__prepend {
+      width: 72px;
+      background-color: #fff;
+      padding: 0 20px;
+      color: #1f2329;
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

core/core-frontend/src/views/system/parameter/email/EmailInfo.vue

@@ -0,0 +1,30 @@
+<template>
+  <InfoTemplate :label-tooltips="tooltips" setting-key="email" @edit="edit" />
+  <email-edit ref="editor" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import InfoTemplate from '../../common/InfoTemplate.vue'
+import EmailEdit from './EmailEdit.vue'
+const tooltips = [
+  {
+    key: '测试收件人',
+    val: '测试收件人xxxx'
+  },
+  {
+    key: 'SSL',
+    val: 'SSLxxxx'
+  },
+  {
+    key: 'TSL',
+    val: 'TSLxxxx'
+  }
+]
+
+const editor = ref()
+
+const edit = () => {
+  editor?.value.edit()
+}
+</script>

core/core-frontend/src/views/system/parameter/index.vue

@@ -1,11 +1,13 @@
 <template>
-  <p class="router-title">系统参数</p>
+  <p class="router-title">{{ t('commons.system_parameter_setting') }}</p>
   <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane v-for="item in tabArray" :key="item.name" :label="item.label" :name="item.name" />
   </el-tabs>
-  <div class="sys-setting-p">
+  <div class="sys-setting-p" :class="{ 'setting-auto-h': activeName !== 'map' }">
     <div class="container-sys-param">
       <map-setting v-if="activeName === 'map'" />
+      <basic-info v-if="activeName === 'basic'" />
+      <email-info v-if="activeName === 'email'" />
     </div>
   </div>
 </template>
@@ -14,15 +16,17 @@
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import MapSetting from './map/MapSetting.vue'
+import BasicInfo from './basic/BasicInfo.vue'
+import EmailInfo from './email/EmailInfo.vue'
 const { t } = useI18n()
 
 const tabArray = [
-  /* {label: '基础设置', name: 'basic'},
-    {label: '邮件设置', name: 'email'}, */
+  { label: '基础设置', name: 'basic' },
+  { label: '邮件设置', name: 'email' },
   { label: '地图设置', name: 'map' }
   /* {label: '引擎设置', name: 'engine'}, */
 ]
-const activeName = ref('map')
+const activeName = ref('basic')
 const handleClick = (tab, event: Event) => {
   console.log(tab, event)
 }
@@ -44,6 +48,9 @@ const handleClick = (tab, event: Event) => {
   box-sizing: border-box;
   margin-top: 12px;
 }
+.setting-auto-h {
+  height: auto !important;
+}
 
 .container-sys-param {
   height: 100%;