Dev 278 beta2 (#1954)

* 在关闭详情弹窗后 detailFrom为空对象，arr为undefined 使用slice控制台会报错 * 查询不重置pageSize * 优化主题模式相关内容 * 优化弹窗手机端显示 * bugfix:PostgreSQL initdb (#1953) * bugfix:postgresql增加显示指定template --------- Co-authored-by: PiexlMax(奇淼 <165128580+pixelmaxQm@users.noreply.github.com> --------- Co-authored-by: zayn <972858472@qq.com> Co-authored-by: Azir <2075125282@qq.com> Co-authored-by: Qing Liang <106448173+xue-ding-e@users.noreply.github.com>
2024-12-08 15:58:04 +08:00 · 2024-12-08 15:58:04 +08:00 · 1c5b815c6f
parent 3325888c52
commit 1c5b815c6f
23 changed files with 110 additions and 97 deletions
--- a/server/model/system/request/sys_init.go
+++ b/server/model/system/request/sys_init.go
@ -15,6 +15,7 @@ type InitDB struct {
 	Password      string `json:"password"`                  // 数据库密码
 	DBName        string `json:"dbName" binding:"required"` // 数据库名
 	DBPath        string `json:"dbPath"`                    // sqlite数据库文件路径
+	Template      string `json:"template"`                  // postgresql指定template
 }

 // MysqlEmptyDsn msyql 空数据库 建库链接
--- a/server/resource/package/web/view/table.vue.tpl
+++ b/server/resource/package/web/view/table.vue.tpl
@ -629,7 +629,7 @@ getDataSourceFunc()
          {{- end }}
        {{- end }}
        {{- end }}
-        <el-table-column align="left" label="操作" fixed="right" min-width="240">
+        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
            <template #default="scope">
            {{- if .IsTree }}
            <el-button {{ if $global.AutoCreateBtnAuth }}v-auth="btnAuth.add"{{ end }} type="primary" link class="table-button" @click="openDialog(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>新增子节点</el-button>
@ -652,7 +652,7 @@ getDataSourceFunc()
            />
        </div>
    </div>
-    <el-drawer destroy-on-close size="800" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
+    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
       <template #header>
              <div class="flex justify-between items-center">
                <span class="text-lg">{{"{{"}}type==='create'?'新增':'编辑'{{"}}"}}</span>
@ -751,7 +751,7 @@ getDataSourceFunc()
          </el-form>
    </el-drawer>

-    <el-drawer destroy-on-close size="800" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">
+    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">
            <el-descriptions :column="1" border>
            {{- if .IsTree }}
            <el-descriptions-item label="父节点">
@ -855,6 +855,7 @@ import { ref, reactive } from 'vue'
 // 引入按钮权限标识
 import { useBtnAuth } from '@/utils/btnAuth'
 {{- end }}
+import { useAppStore } from "@/pinia"

 {{if .HasExcel -}}
 // 导出组件
@ -877,6 +878,7 @@ defineOptions({

 // 提交按钮loading
 const btnLoading = ref(false)
+const appStore = useAppStore()

 // 控制更多查询条件显示/隐藏状态
 const showAllQuery = ref(false)
--- a/server/service/system/sys_initdb_pgsql.go
+++ b/server/service/system/sys_initdb_pgsql.go
@ -54,7 +54,12 @@ func (h PgsqlInitHandler) EnsureDB(ctx context.Context, conf *request.InitDB) (n
 	} // 如果没有数据库名, 则跳出初始化数据

 	dsn := conf.PgsqlEmptyDsn()
-	createSql := fmt.Sprintf("CREATE DATABASE %s;", c.Dbname)
+	var createSql string
+	if conf.Template != "" {
+		createSql = fmt.Sprintf("CREATE DATABASE %s WITH TEMPLATE %s;", c.Dbname, conf.Template)
+	} else {
+		createSql = fmt.Sprintf("CREATE DATABASE %s;", c.Dbname)
+	}
 	if err = createDatabase(dsn, "pgx", createSql); err != nil {
 		return nil, err
 	} // 创建数据库
--- a/web/src/components/commandMenu/index.vue
+++ b/web/src/components/commandMenu/index.vue
@ -90,11 +90,11 @@
    const quickArr = [
      {
        label: '亮色主题',
-        func: () => changeMode('light')
+        func: () => changeMode(false)
      },
      {
        label: '暗色主题',
-        func: () => changeMode('dark')
+        func: () => changeMode(true)
      },
      {
        label: '退出登录',
@ -135,12 +135,8 @@
    dialogVisible.value = false
  }

-  const changeMode = (e) => {
-    if (e === null) {
-      appStore.toggleTheme(false)
-      return
-    }
-    appStore.toggleTheme(true)
+  const changeMode = (darkMode) => {
+    appStore.toggleTheme(darkMode)
  }

  const close = () => {
--- a/web/src/components/selectImage/selectImage.vue
+++ b/web/src/components/selectImage/selectImage.vue
@ -23,7 +23,7 @@
      />
    </div>

-    <el-drawer v-model="drawer" title="媒体库" size="650px">
+    <el-drawer v-model="drawer" title="媒体库" :size="appStore.drawerSize">
      <warning-bar title="点击“文件名/备注”可以编辑文件名或者备注内容。" />
      <div class="gva-btn-list gap-2">
        <upload-common :image-common="imageCommon" @on-success="getImageList" />
@ -124,6 +124,9 @@
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import selectComponent from '@/components/selectImage/selectComponent.vue'
+  import { useAppStore } from "@/pinia";
+
+  const appStore = useAppStore()

  const imageUrl = ref('')
  const imageCommon = ref('')
--- a/web/src/hooks/charts.js
+++ b/web/src/hooks/charts.js
@ -7,7 +7,7 @@ import { useAppStore } from '@/pinia'
 export default function useChartOption(sourceOption) {
  const appStore = useAppStore()
  const isDark = computed(() => {
-    return appStore.theme === 'dark'
+    return appStore.isDark
  })
  const chartOption = computed(() => {
    return sourceOption(isDark.value)
--- a/web/src/pathInfo.json
+++ b/web/src/pathInfo.json
@ -64,4 +64,4 @@
  "/src/plugin/announcement/form/info.vue": "InfoForm",
  "/src/plugin/announcement/view/info.vue": "Info",
  "/src/plugin/email/view/index.vue": "Email"
-}
+}
--- a/web/src/pinia/modules/app.js
+++ b/web/src/pinia/modules/app.js
@ -1,8 +1,12 @@
 import { defineStore } from 'pinia'
 import { ref, watchEffect, reactive } from 'vue'
 import { setBodyPrimaryColor } from '@/utils/format'
+import { useDark, usePreferredDark } from '@vueuse/core'
+
 export const useAppStore = defineStore('app', () => {
  const device = ref('')
+  const drawerSize = ref('')
+  const operateMinWith = ref('240')
  const config = reactive({
    weakness: false,
    grey: false,
@ -16,14 +20,17 @@ export const useAppStore = defineStore('app', () => {
    side_mode: 'normal'
  })

-  const theme = ref('auto')
+  const isDark = useDark({
+    selector: 'html',
+    attribute: 'class',
+    valueDark: 'dark',
+    valueLight: 'light',
+  })

-  const toggleTheme = (dark) => {
-    if (dark) {
-      theme.value = 'dark'
-    } else {
-      theme.value = 'light'
-    }
+  const preferredDark = usePreferredDark()
+
+  const toggleTheme = (darkMode) => {
+    isDark.value = darkMode
  }

  const toggleWeakness = (e) => {
@ -43,6 +50,13 @@ export const useAppStore = defineStore('app', () => {
  }

  const toggleDevice = (e) => {
+    if(e === 'mobile'){
+      drawerSize.value = '100%'
+      operateMinWith.value = '80'
+    }else {
+      drawerSize.value = '800'
+      operateMinWith.value = '240'
+    }
    device.value = e
  }

@ -50,15 +64,14 @@ export const useAppStore = defineStore('app', () => {
    config.darkMode = e
  }

-  const toggleDarkModeAuto = () => {
-    // 处理浏览器主题
-    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    const dark = darkQuery.matches
-    toggleTheme(dark)
-    darkQuery.addEventListener('change', (e) => {
-      toggleTheme(e.matches)
-    })
-  }
+  // 监听系统主题变化
+  watchEffect(() => {
+    if (config.darkMode === 'auto') {
+      isDark.value = preferredDark.value
+      return
+    }
+    isDark.value = config.darkMode === 'dark'
+  })

  const toggleConfigSideWidth = (e) => {
    config.layout_side_width = e
@ -76,55 +89,26 @@ export const useAppStore = defineStore('app', () => {
    config.show_watermark = e
  }

-  const toggleSideModel = (e) => {
+  const toggleSideMode = (e) => {
    config.side_mode = e
  }

+    // 监听色弱模式和灰色模式
  watchEffect(() => {
-    if (theme.value === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-  })
-  watchEffect(() => {
-    // 色弱模式监听处理
-    if (config.weakness) {
-      document.documentElement.classList.add('html-weakenss')
-    } else {
-      document.documentElement.classList.remove('html-weakenss')
-    }
-  })
-  watchEffect(() => {
-    // 灰色模式监听处理
-    if (config.grey) {
-      document.documentElement.classList.add('html-grey')
-    } else {
-      document.documentElement.classList.remove('html-grey')
-    }
+    document.documentElement.classList.toggle('html-weakenss', config.weakness)
+    document.documentElement.classList.toggle('html-grey', config.grey)
  })

+  // 监听主题色
  watchEffect(() => {
-    if (config.darkMode === 'auto') {
-      toggleDarkModeAuto()
-    }
-
-    if (config.darkMode === 'dark') {
-      toggleTheme(true)
-    } else {
-      toggleTheme(false)
-    }
-  })
-
-  watchEffect(() => {
-    setBodyPrimaryColor(config.primaryColor, theme.value)
+    setBodyPrimaryColor(config.primaryColor, isDark.value ? 'dark' : 'light')
  })

  return {
-    theme,
+    isDark,
    device,
+    drawerSize,
+    operateMinWith,
    config,
    toggleTheme,
    toggleDevice,
@ -137,6 +121,6 @@ export const useAppStore = defineStore('app', () => {
    toggleConfigSideCollapsedWidth,
    toggleConfigSideItemHeight,
    toggleConfigWatermark,
-    toggleSideModel
+    toggleSideMode
  }
 })
--- a/web/src/view/dashboard/components/charts-content-numbers.vue
+++ b/web/src/view/dashboard/components/charts-content-numbers.vue
@ -25,8 +25,7 @@
    }
  })
  const dotColor = computed(() => {
-    console.log(appStore.theme)
-    return appStore.theme === 'dark' ? '#333' : '#E5E8EF'
+    return appStore.isDark ? '#333' : '#E5E8EF'
  })
  const graphicFactory = (side) => {
    return {
--- a/web/src/view/init/index.vue
+++ b/web/src/view/init/index.vue
@ -111,6 +111,12 @@
              placeholder="请输入sqlite数据库文件存放路径"
            />
          </el-form-item>
+          <el-form-item v-if="form.dbType === 'pgsql'" label="template">
+            <el-input
+              v-model="form.template"
+              placeholder="请输入postgresql指定template"
+            />
+          </el-form-item>
          <el-form-item>
            <div style="text-align: right">
              <el-button type="primary" @click="onSubmit">立即初始化</el-button>
@ -192,7 +198,8 @@
          userName: 'postgres',
          password: '',
          dbName: 'gva',
-          dbPath: ''
+          dbPath: '',
+          template: 'template0'
        })
        break
      case 'oracle':
--- a/web/src/view/layout/header/index.vue
+++ b/web/src/view/layout/header/index.vue
@ -9,7 +9,8 @@
  >
    <div class="flex items-center cursor-pointer flex-1">
      <div
-        class="flex items-center cursor-pointer min-w-48"
+        class="flex items-center cursor-pointer"
+        :class="isMobile ? '' : 'min-w-48'"
        @click="router.push({ path: '/' })"
      >
        <img
--- a/web/src/view/layout/header/tools.vue
+++ b/web/src/view/layout/header/tools.vue
@ -58,10 +58,9 @@
      effect="dark"
      content="切换主题"
      placement="bottom"
-      :disabled="appStore.theme === 'auto'"
    >
      <el-icon
-        v-if="appStore.theme === 'dark'"
+        v-if="appStore.isDark"
        class="w-8 h-8 shadow rounded-full border border-gray-600 cursor-pointer border-solid"
        @click="appStore.toggleTheme(false)"
      >
--- a/web/src/view/layout/index.vue
+++ b/web/src/view/layout/index.vue
@ -62,7 +62,7 @@
  import { useAppStore } from '@/pinia'
  import { storeToRefs } from 'pinia'
  const appStore = useAppStore()
-  const { config, theme, device } = storeToRefs(appStore)
+  const { config, isDark, device } = storeToRefs(appStore)

  defineOptions({
    name: 'GvaLayout'
@ -75,7 +75,7 @@

  watchEffect(() => {
    font.color =
-      theme.value === 'dark' ? 'rgba(255,255,255, .15)' : 'rgba(0, 0, 0, .15)'
+      isDark.value ? 'rgba(255,255,255, .15)' : 'rgba(0, 0, 0, .15)'
  })

  const router = useRouter()
--- a/web/src/view/layout/setting/index.vue
+++ b/web/src/view/layout/setting/index.vue
@ -71,7 +71,7 @@
              v-model="config.side_mode"
              :options="sideModes"
              size="default"
-              @change="appStore.toggleSideModel"
+              @change="appStore.toggleSideMode"
            />
            <!-- <el-select
              v-model="config.side_mode"
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@ -102,7 +102,7 @@
          </template>
        </el-table-column>

-        <el-table-column align="left" fixed="right" label="操作" width="200">
+        <el-table-column align="left" fixed="right" label="操作" :min-width="appStore.operateMinWith">
          <template #default="scope">
            <el-button
              icon="edit"
@ -138,7 +138,7 @@

    <el-drawer
      v-model="syncApiFlag"
-      size="80%"
+      :size="appStore.drawerSize"
      :before-close="closeSyncDialog"
      :show-close="false"
    >
@ -341,7 +341,7 @@

    <el-drawer
      v-model="dialogFormVisible"
-      size="60%"
+      :size="appStore.drawerSize"
      :before-close="closeDialog"
      :show-close="false"
    >
@ -420,11 +420,14 @@
  import ExportTemplate from '@/components/exportExcel/exportTemplate.vue'
  import ImportExcel from '@/components/exportExcel/importExcel.vue'
  import { butler } from '@/api/autoCode'
+  import { useAppStore } from "@/pinia";

  defineOptions({
    name: 'Api'
  })

+  const appStore = useAppStore()
+
  const methodFilter = (value) => {
    const target = methodOptions.value.filter((item) => item.value === value)[0]
    return target && `${target.label}`
--- a/web/src/view/superAdmin/authority/authority.vue
+++ b/web/src/view/superAdmin/authority/authority.vue
@ -62,7 +62,7 @@
      </el-table>
    </div>
    <!-- 新增角色弹窗 -->
-    <el-drawer v-model="authorityFormVisible" :show-close="false">
+    <el-drawer v-model="authorityFormVisible" :size="appStore.drawerSize" :show-close="false">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ authorityTitleForm }}</span>
@ -114,8 +114,7 @@
    <el-drawer
      v-if="drawer"
      v-model="drawer"
-      :with-header="false"
-      size="40%"
+      :size="appStore.drawerSize"
      title="角色配置"
    >
      <el-tabs :before-leave="autoEnter" type="border-card">
@ -154,6 +153,7 @@

  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { useAppStore } from "@/pinia"

  defineOptions({
    name: 'Authority'
@ -175,6 +175,7 @@
  const drawer = ref(false)
  const dialogType = ref('add')
  const activeRow = ref({})
+  const appStore = useAppStore()

  const authorityTitleForm = ref('新增角色')
  const authorityFormVisible = ref(false)
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@ -49,7 +49,7 @@
    </div>
    <el-drawer
      v-model="drawerFormVisible"
-      size="30%"
+      :size="appStore.drawerSize"
      :show-close="false"
      :before-close="closeDrawer"
    >
@ -120,11 +120,14 @@

  import sysDictionaryDetail from './sysDictionaryDetail.vue'
  import { Edit } from '@element-plus/icons-vue'
+  import { useAppStore } from "@/pinia";

  defineOptions({
    name: 'SysDictionary'
  })

+  const appStore = useAppStore()
+
  const selectID = ref(0)

  const formData = ref({
--- a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
@ -45,7 +45,7 @@
          width="120"
        />

-        <el-table-column align="left" label="操作" width="180">
+        <el-table-column align="left" label="操作" :min-width="appStore.operateMinWith">
          <template #default="scope">
            <el-button
              type="primary"
@ -82,7 +82,7 @@

    <el-drawer
      v-model="drawerFormVisible"
-      size="30%"
+      :size="appStore.drawerSize"
      :show-close="false"
      :before-close="closeDrawer"
    >
@ -156,11 +156,14 @@
  import { ref, watch } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { formatBoolean, formatDate } from '@/utils/format'
+  import { useAppStore } from "@/pinia";

  defineOptions({
    name: 'SysDictionaryDetail'
  })

+  const appStore = useAppStore()
+
  const props = defineProps({
    sysDictionaryID: {
      type: Number,
--- a/web/src/view/superAdmin/menu/icon.vue
+++ b/web/src/view/superAdmin/menu/icon.vue
@ -9,7 +9,7 @@
    >
      <template #prefix>
        <el-icon>
-          <component :is="value" />
+          <component v-if="value" :is="value" />
        </el-icon>
      </template>
      <el-option
@ -21,7 +21,7 @@
      >
        <span class="gva-icon" style="padding: 3px 0 0" :class="item.label">
          <el-icon>
-            <component :is="item.label" />
+            <component v-if="item.label" :is="item.label" />
          </el-icon>
        </span>
        <span style="text-align: left">{{ item.key }}</span>
--- a/web/src/view/superAdmin/menu/menu.vue
+++ b/web/src/view/superAdmin/menu/menu.vue
@ -72,7 +72,7 @@
          min-width="360"
          prop="component"
        />
-        <el-table-column align="left" fixed="right" label="操作" width="300">
+        <el-table-column align="left" fixed="right" label="操作" :min-width="appStore.operateMinWith">
          <template #default="scope">
            <el-button
              type="primary"
@ -104,7 +104,7 @@
    </div>
    <el-drawer
      v-model="dialogFormVisible"
-      size="60%"
+      :size="appStore.drawerSize"
      :before-close="handleClose"
      :show-close="false"
    >
@ -423,11 +423,14 @@
  import ComponentsCascader from '@/view/superAdmin/menu/components/components-cascader.vue'

  import pathInfo from '@/pathInfo.json'
+  import { useAppStore } from "@/pinia";

  defineOptions({
    name: 'Menus'
  })

+  const appStore = useAppStore()
+
  const rules = reactive({
    path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
    component: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
--- a/web/src/view/superAdmin/user/user.vue
+++ b/web/src/view/superAdmin/user/user.vue
@ -105,7 +105,7 @@
          </template>
        </el-table-column>

-        <el-table-column label="操作" min-width="250" fixed="right">
+        <el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
@ -145,7 +145,7 @@
    </div>
    <el-drawer
      v-model="addUserDialog"
-      size="60%"
+      :size="appStore.drawerSize"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
@ -236,11 +236,14 @@
  import { nextTick, ref, watch } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import SelectImage from '@/components/selectImage/selectImage.vue'
+  import { useAppStore } from "@/pinia";

  defineOptions({
    name: 'User'
  })

+  const appStore = useAppStore()
+
  const searchInfo = ref({
    username: '',
    nickname: '',
--- a/web/src/view/systemTools/autoCode/index.vue
+++ b/web/src/view/systemTools/autoCode/index.vue
@ -704,7 +704,7 @@
        <el-upload
          class="flex items-center"
          :before-upload="importJson"
-          show-file-list="false"
+          :show-file-list="false"
          accept=".json"
        >
          <el-button type="primary" class="mx-2" :disabled="isAdd"
--- a/web/src/view/systemTools/system/system.vue
+++ b/web/src/view/systemTools/system/system.vue
@ -310,8 +310,8 @@
          <el-form-item label="字符长度">
            <el-input-number
              v-model="config.captcha['key-long']"
-              min="4"
-              max="6"
+              :min="4"
+              :max="6"
            />
          </el-form-item>
          <el-form-item label="图片宽度">