refactor: 优化系统配置相关代码

2025-10-31 10:57:10 +08:00 · 2024-04-23 22:00:07 +08:00
parent fa7705fd76
commit 8729dced82
11 changed files with 203 additions and 256 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@ defineOptions({ name: 'App' })

 const appStore = useAppStore()
 appStore.initTheme()
+appStore.initSiteConfig()
 </script>

 <style lang="scss" scoped>
--- a/src/apis/common/common.ts
+++ b/src/apis/common/common.ts
@@ -25,9 +25,9 @@ export function listCommonDict(code: string) {
  return http.get<LabelValueState[]>(`${BASE_URL}/dict/${code}`)
 }

-/** @desc 获取系统参数 */
-export function listOption(params: OptionQuery) {
-  return http.get<LabelValueState[]>(`${BASE_URL}/option`, params)
+/** @desc 查询参数列表 */
+export function listOptionDict(query: OptionQuery) {
+  return http.get<LabelValueState[]>(`${BASE_URL}/dict/option`, query)
 }

 /** @desc 上传文件 */
--- a/src/apis/system/config.ts
+++ b/src/apis/system/config.ts
@@ -1,19 +0,0 @@
-import http from '@/utils/http'
-import type * as System from './type'
-
-const BASE_URL = '/system/option'
-
-/** @desc 获取系统配置参数 */
-export function list(params: System.OptionQuery) {
-  return http.get<System.OptionResp[]>(`${BASE_URL}`, params)
-}
-
-/** @desc 保存系统参数 */
-export function save(req: System.OptionReq[]) {
-  return http.patch(`${BASE_URL}`, req)
-}
-
-/** @desc 重置系统参数 */
-export function resetValue(params: System.OptionQuery) {
-  return http.patch(`${BASE_URL}/value`, params)
-}
--- a/src/apis/system/index.ts
+++ b/src/apis/system/index.ts
@@ -6,4 +6,4 @@ export * from '../monitor/log'
 export * from './dict'
 export * from './file'
 export * from './storage'
-export * from './config'
+export * from './option'
--- a/src/apis/system/option.ts
+++ b/src/apis/system/option.ts
@@ -0,0 +1,19 @@
+import http from '@/utils/http'
+import type * as System from './type'
+
+const BASE_URL = '/system/option'
+
+/** @desc 查询参数列表 */
+export function listOption(query: System.OptionQuery) {
+  return http.get<System.OptionResp[]>(`${BASE_URL}`, query)
+}
+
+/** @desc 修改参数 */
+export function updateOption(data: any) {
+  return http.patch(`${BASE_URL}`, data)
+}
+
+/** @desc 重置参数 */
+export function resetOptionValue(query: System.OptionQuery) {
+  return http.patch(`${BASE_URL}/value`, query)
+}
--- a/src/apis/system/type.ts
+++ b/src/apis/system/type.ts
@@ -198,30 +198,25 @@ export interface StorageQuery extends PageQuery {
  status?: number
 }

-/** 系统参数*/
-export interface OptionQuery {
-  code?: Array<string>
-}
-
-export interface OptionReq {
-  code: string
-  value: string
-}
-
+/** 系统参数类型 */
 export interface OptionResp {
-  name?: string
+  name: string
  code: string
  value: string
-  description?: string
+  description: string
+}
+export interface OptionQuery {
+  code: Array<string>
 }

-/** 系统配置*/
-export interface BasicConfigRecordResp {
-  site_title?: string
-  site_copyright?: string
-  site_logo?: string
-  site_favicon?: string
+/** 基础配置类型 */
+export interface BasicConfigResp {
+  site_favicon: string
+  site_logo: string
+  site_title: string
+  site_copyright: string
 }
+
 /** 绑定三方账号信息*/
 export interface BindSocialAccountRes {
  source: string
--- a/src/layout/components/Logo.vue
+++ b/src/layout/components/Logo.vue
@@ -1,8 +1,8 @@
 <template>
  <section class="system-logo" :class="{ collapsed: props.collapsed }" @click="toHome">
-    <img v-if="webLogo" class="logo" :src="webLogo" alt="logo" />
+    <img v-if="logo" class="logo" :src="logo" alt="logo" />
    <img v-else class="logo" src="/logo.svg" alt="logo" />
-    <span class="system-name">{{ webTitle }}</span>
+    <span class="system-name">{{ title }}</span>
  </section>
 </template>

@@ -10,21 +10,17 @@
 import { useAppStore } from '@/stores'

 const appStore = useAppStore()
-appStore.initWebConfig()
-
-const webTitle = computed(() => appStore.getTitle())
-const webLogo = computed(() => appStore.getLogo())
+const title = computed(() => appStore.getTitle())
+const logo = computed(() => appStore.getLogo())

 interface Props {
  collapsed?: boolean
 }
-
 const props = withDefaults(defineProps<Props>(), {
  collapsed: false
 })

 const router = useRouter()
-
 // 跳转首页
 const toHome = () => {
  router.push('/')
--- a/src/stores/modules/app.ts
+++ b/src/stores/modules/app.ts
@@ -1,58 +1,12 @@
 import { defineStore } from 'pinia'
+import { listOptionDict, type BasicConfigResp } from '@/apis'
 import { computed, reactive, toRefs } from 'vue'
 import { generate, getRgbStr } from '@arco-design/color'
 import defaultSettings from '@/config/setting.json'
-import type { BasicConfigRecordResp } from '@/apis'
-import { listOption } from '@/apis'

 const storeSetup = () => {
  // App配置
  const settingConfig = reactive({ ...defaultSettings }) as App.SettingConfig
-  // 系统配置
-  const webConfig = reactive({}) as BasicConfigRecordResp
-
-  const getLogo = () => {
-    return webConfig.site_logo
-  }
-  const getFavicon = () => {
-    return webConfig.site_favicon
-  }
-  const getTitle = () => {
-    return webConfig.site_title
-  }
-  const getCopyright = () => {
-    return webConfig.site_copyright
-  }
-
-  // 初始化系统配置
-  const initWebConfig = () => {
-    listOption({
-      code: ['site_title', 'site_copyright', 'site_favicon', 'site_logo']
-    }).then((res) => {
-      const resMap = new Map()
-      res.data.forEach((item) => {
-        resMap.set(item.label, item.value)
-      })
-      webConfig.site_title = resMap.get('site_title')
-      webConfig.site_copyright = resMap.get('site_copyright')
-      webConfig.site_logo = resMap.get('site_logo')
-      webConfig.site_favicon = resMap.get('site_favicon')
-      document.title = resMap.get('site_title')
-      document
-        .querySelector('link[rel="shortcut icon"]')
-        ?.setAttribute('href', resMap.get('site_favicon') || 'https://admin.continew.top/favicon.ico')
-    })
-  }
-
-  // 保存系统配置
-  const saveWebConfig = (config: BasicConfigRecordResp) => {
-    Object.assign(webConfig, config)
-    document.title = config.site_title || ''
-    document
-      .querySelector('link[rel="shortcut icon"]')
-      ?.setAttribute('href', config.site_favicon || 'https://admin.continew.top/favicon.ico')
-  }
-
  // 页面切换动画类名
  const transitionName = computed(() => (settingConfig.animate ? settingConfig.animateMode : ''))

@@ -100,21 +54,66 @@ const storeSetup = () => {
    settingConfig.menuCollapse = collapsed
  }

+  // 系统配置配置
+  const siteConfig = reactive({}) as BasicConfigResp
+  // 初始化系统配置
+  const initSiteConfig = () => {
+    listOptionDict({
+      code: ['site_favicon', 'site_logo', 'site_title', 'site_copyright']
+    }).then((res) => {
+      const resMap = new Map()
+      res.data.forEach((item) => {
+        resMap.set(item.label, item.value)
+      })
+      siteConfig.site_logo = resMap.get('site_logo')
+      siteConfig.site_favicon = resMap.get('site_favicon')
+      siteConfig.site_title = resMap.get('site_title')
+      siteConfig.site_copyright = resMap.get('site_copyright')
+      document.title = resMap.get('site_title')
+      document
+        .querySelector('link[rel="shortcut icon"]')
+        ?.setAttribute('href', resMap.get('site_favicon') || '/favicon.ico')
+    })
+  }
+
+  // 设置系统配置
+  const setSiteConfig = (config: BasicConfigResp) => {
+    Object.assign(siteConfig, config)
+    document.title = config.site_title || ''
+    document.querySelector('link[rel="shortcut icon"]')?.setAttribute('href', config.site_favicon || '/favicon.ico')
+  }
+
+  const getFavicon = () => {
+    return siteConfig.site_favicon
+  }
+
+  const getLogo = () => {
+    return siteConfig.site_logo
+  }
+
+  const getTitle = () => {
+    return siteConfig.site_title
+  }
+
+  const getCopyright = () => {
+    return siteConfig.site_copyright
+  }
+
  return {
    ...toRefs(settingConfig),
-    ...toRefs(webConfig),
+    ...toRefs(siteConfig),
    transitionName,
    themeCSSVar,
    toggleTheme,
    setThemeColor,
    initTheme,
    setMenuCollapse,
-    getLogo,
+    initSiteConfig,
+    setSiteConfig,
    getFavicon,
+    getLogo,
    getTitle,
-    getCopyright,
-    initWebConfig,
-    saveWebConfig
+    getCopyright
  }
 }

--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -87,7 +87,6 @@ import { useLoading } from '@/hooks'
 import { encryptByRsa } from '@/utils/encrypt'

 const appStore = useAppStore()
-appStore.initWebConfig()

 computed(() => appStore.getTitle())
 const webLogo = computed(() => appStore.getLogo())
--- a/src/views/system/config/components/BasicSetting.vue
+++ b/src/views/system/config/components/BasicSetting.vue
@@ -1,8 +1,8 @@
 <template>
-  <a-form ref="formRef" layout="vertical" :model="form" :rules="rules" size="large" :disabled="!isEdit">
+  <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate">
    <a-list class="list-layout" :bordered="false">
      <a-list-item>
-        <a-form-item class="image-item" hide-label field="favicon">
+        <a-form-item class="image-item" hide-label field="site_favicon">
          {{ siteFavicon?.name }}
          <template #extra>
            {{ siteFavicon?.description }}
@@ -25,7 +25,7 @@
                    class="arco-upload-list-picture custom-upload-avatar favicon"
                  >
                    <img :src="faviconFile.url" alt="favicon" />
-                    <div v-if="isEdit" class="arco-upload-list-picture-mask favicon">
+                    <div v-if="isUpdate" class="arco-upload-list-picture-mask favicon">
                      <IconEdit />
                    </div>
                  </div>
@@ -61,7 +61,7 @@
                >
                  <div v-if="logoFile && logoFile.url" class="arco-upload-list-picture custom-upload-avatar logo">
                    <img :src="logoFile.url" alt="Logo" />
-                    <div v-if="isEdit" class="arco-upload-list-picture-mask logo">
+                    <div v-if="isUpdate" class="arco-upload-list-picture-mask logo">
                      <IconEdit />
                    </div>
                  </div>
@@ -78,11 +78,11 @@
      </a-list-item>
      <a-list-item style="padding-top: 13px; border: none">
        <a-form-item class="input-item" :label="siteTitle?.name" field="site_title">
-          <a-input v-model="form.site_title" placeholder="请输入网站标题" :max-length="18" />
+          <a-input v-model.trim="form.site_title" placeholder="请输入网站标题" :max-length="18" />
        </a-form-item>
        <a-form-item class="input-item" :label="siteCopyright?.name" field="site_copyright" tooltip="支持HTML标签">
          <a-textarea
-            v-model="form.site_copyright"
+            v-model.trim="form.site_copyright"
            placeholder="请输入版权信息"
            :auto-size="{
              minRows: 3
@@ -92,31 +92,31 @@
        </a-form-item>
        <div style="margin-top: 20px">
          <a-space>
-            <a-button v-if="!isEdit" @click="toResetValue">
+            <a-button v-if="!isUpdate" @click="onResetValue">
              <template #icon>
                <icon-undo />
              </template>
              恢复默认
            </a-button>
-            <a-button v-if="!isEdit" type="primary" @click="toEdit">
+            <a-button v-if="!isUpdate" type="primary" @click="onUpdate">
              <template #icon>
                <icon-edit />
              </template>
              修改
            </a-button>
-            <a-button v-if="isEdit" type="primary" @click="handleSave">
+            <a-button v-if="isUpdate" type="primary" @click="handleSave">
              <template #icon>
                <icon-save />
              </template>
              保存
            </a-button>
-            <a-button v-if="isEdit" @click="reset">
+            <a-button v-if="isUpdate" @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
-            <a-button v-if="isEdit" @click="handleCancel">
+            <a-button v-if="isUpdate" @click="handleCancel">
              <template #icon>
                <icon-undo />
              </template>
@@ -130,130 +130,102 @@
 </template>

 <script lang="ts" setup>
-import type { OptionResp } from '@/apis'
-import { list, resetValue, save, uploadFile } from '@/apis'
+import { listOption, updateOption, resetOptionValue, uploadFile, type OptionResp } from '@/apis'
+import { Message, Modal, type FileItem, type FormInstance, type RequestOption } from '@arco-design/web-vue'
 import { useAppStore } from '@/stores'
-import { type FileItem, type FormInstance, type RequestOption, Message, Modal } from '@arco-design/web-vue'
 import { useForm } from '@/hooks'

 const formRef = ref<FormInstance>()
-const dataList = ref<OptionResp[]>([])
-const isEdit = ref(false)
-const logoFile = ref<FileItem>({ uid: '-1' })
-const faviconFile = ref<FileItem>({ uid: '-2' })
-const siteTitle = ref<OptionResp>()
-const siteCopyright = ref<OptionResp>()
-const siteLogo = ref<OptionResp>()
-const siteFavicon = ref<OptionResp>()
-const appStore = useAppStore()
-
 const rules: FormInstance['rules'] = {
  site_title: [{ required: true, message: '请输入系统标题' }],
  site_copyright: [{ required: true, message: '请输入版权信息' }]
 }

 const { form } = useForm({
-  site_title: '',
-  site_copyright: '',
+  site_favicon: '',
  site_logo: '',
-  site_favicon: ''
+  site_title: '',
+  site_copyright: ''
 })

-const query = reactive({
-  queryParams: {
-    code: ['site_title', 'site_copyright', 'site_logo', 'site_favicon']
-  }
-})
-
-/**
- * 重置表单
- */
+const siteFavicon = ref<OptionResp>()
+const siteLogo = ref<OptionResp>()
+const siteTitle = ref<OptionResp>()
+const siteCopyright = ref<OptionResp>()
+const faviconFile = ref<FileItem>({ uid: '-1' })
+const logoFile = ref<FileItem>({ uid: '-2' })
+// 重置
 const reset = () => {
+  form.site_favicon = siteFavicon.value?.value || ''
+  form.site_logo = siteLogo.value?.value || ''
  form.site_title = siteTitle.value?.value || ''
  form.site_copyright = siteCopyright.value?.value || ''
-  form.site_logo = siteLogo.value?.value || ''
-  form.site_favicon = siteFavicon.value?.value || ''
-  logoFile.value.url = siteLogo.value?.value
  faviconFile.value.url = siteFavicon.value?.value
+  logoFile.value.url = siteLogo.value?.value
 }

-/**
- * 查询配置
- */
-const getConfig = async () => {
-  const res = await list(query.queryParams)
+const isUpdate = ref(false)
+// 修改
+const onUpdate = () => {
+  isUpdate.value = true
+}
+
+// 取消
+const handleCancel = () => {
+  isUpdate.value = false
+}
+
+const dataList = ref<OptionResp[]>([])
+const queryForm = reactive({
+  code: ['site_title', 'site_copyright', 'site_logo', 'site_favicon']
+})
+// 查询列表数据
+const getDataList = async () => {
+  const res = await listOption(queryForm)
  dataList.value = res.data
+  siteFavicon.value = dataList.value.find((option) => option.code === 'site_favicon')
+  siteLogo.value = dataList.value.find((option) => option.code === 'site_logo')
  siteTitle.value = dataList.value.find((option) => option.code === 'site_title')
  siteCopyright.value = dataList.value.find((option) => option.code === 'site_copyright')
-  siteLogo.value = dataList.value.find((option) => option.code === 'site_logo')
-  siteFavicon.value = dataList.value.find((option) => option.code === 'site_favicon')
  reset()
 }

-getConfig()
-
-/**
- * 取消
- */
-const handleCancel = () => {
-  isEdit.value = false
+const appStore = useAppStore()
+// 保存
+const handleSave = async () => {
+  const isInvalid = await formRef.value?.validate()
+  if (isInvalid) return false
+  await updateOption(
+    Object.entries(form).map((item) => {
+      return {
+        code: item[0],
+        value: item[1]
+      }
+    })
+  )
+  appStore.setSiteConfig(form)
+  handleCancel()
+  Message.success('保存成功')
 }

-/**
- * 保存
- */
-const handleSave = () => {
-  formRef.value?.validate((valid: any) => {
-    if (!valid) {
-      const optionList: OptionResp[] = Object.entries(form).map((item) => {
-        return {
-          code: item[0],
-          value: item[1]
-        }
-      })
-      save(optionList).then((res) => {
-        appStore.saveWebConfig(form)
-        handleCancel()
-        Message.success(res.msg)
-      })
-    }
+// 恢复默认
+const handleResetValue = async () => {
+  await resetOptionValue(queryForm)
+  Message.success('恢复成功')
+  await getDataList()
+  appStore.setSiteConfig(form)
+}
+const onResetValue = () => {
+  Modal.warning({
+    title: '警告',
+    content: '确认恢复基础配置为默认值吗？',
+    hideCancel: false,
+    maskClosable: false,
+    onOk: handleResetValue
  })
 }

-/**
- * 上传 Logo
- *
- * @param options /
- */
-const handleUploadLogo = (options: RequestOption) => {
-  const controller = new AbortController()
-  ;(async function requestWrap() {
-    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
-    onProgress(20)
-    const formData = new FormData()
-    formData.append(name as string, fileItem.file as Blob)
-    uploadFile(formData)
-      .then((res) => {
-        onSuccess(res)
-        form.site_logo = res.data.url
-        Message.success(res.msg)
-      })
-      .catch((error) => {
-        onError(error)
-      })
-  })()
-  return {
-    abort() {
-      controller.abort()
-    }
-  }
-}
-
-/**
- * 上传 Favicon
- *
- * @param options /
- */
+// 上传 favicon
 const handleUploadFavicon = (options: RequestOption) => {
  const controller = new AbortController()
  ;(async function requestWrap() {
@@ -265,7 +237,7 @@ const handleUploadFavicon = (options: RequestOption) => {
      .then((res) => {
        onSuccess(res)
        form.site_favicon = res.data.url
-        Message.success(res.msg)
+        Message.success('上传成功')
      })
      .catch((error) => {
        onError(error)
@@ -277,63 +249,48 @@ const handleUploadFavicon = (options: RequestOption) => {
    }
  }
 }
-
-/**
- * 选择 Logo
- *
- * @param _ /
- * @param currentFile
- */
-const handleChangeLogo = (_: any, currentFile: any) => {
-  logoFile.value = {
-    ...currentFile
-  }
-}
-
-/**
- * 选择 Favicon
- *
- * @param _ /
- * @param currentFile
- */
 const handleChangeFavicon = (_: any, currentFile: any) => {
  faviconFile.value = {
    ...currentFile
  }
 }

-/**
- * 恢复默认
- */
-const handleResetValue = async () => {
-  await resetValue(query.queryParams)
-  Message.success('恢复成功')
-  await getConfig()
-  appStore.saveWebConfig(form)
+// 上传 Logo
+const handleUploadLogo = (options: RequestOption) => {
+  const controller = new AbortController()
+  ;(async function requestWrap() {
+    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
+    onProgress(20)
+    const formData = new FormData()
+    formData.append(name as string, fileItem.file as Blob)
+    uploadFile(formData)
+      .then((res) => {
+        onSuccess(res)
+        form.site_logo = res.data.url
+        Message.success('上传成功')
+      })
+      .catch((error) => {
+        onError(error)
+      })
+  })()
+  return {
+    abort() {
+      controller.abort()
+    }
+  }
+}
+const handleChangeLogo = (_: any, currentFile: any) => {
+  logoFile.value = {
+    ...currentFile
+  }
 }

-/**
- * 点击恢复默认
- */
-const toResetValue = () => {
-  Modal.warning({
-    title: '警告',
-    content: '确认恢复基础配置为默认值吗？',
-    hideCancel: false,
-    maskClosable: false,
-    onBeforeOk: handleResetValue
-  })
-}
-
-/**
- * 开始编辑
- */
-const toEdit = () => {
-  isEdit.value = true
-}
+onMounted(() => {
+  getDataList()
+})
 </script>

-<style scoped lang="less">
+<style lang="scss" scoped>
 .logo {
  width: 33px;
  height: 33px;
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -5,7 +5,7 @@
        <a-tab-pane key="1" title="基础配置">
          <BasicSetting />
        </a-tab-pane>
-        <a-tab-pane key="2" title="高级配置" disabled></a-tab-pane>
+        <a-tab-pane key="2" title="邮件配置" disabled></a-tab-pane>
      </a-tabs>
    </a-card>
  </div>