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>
flipped-aurora · Dec 8, 2024 · 1c5b815 · 1c5b815
1 parent 3325888
commit 1c5b815
Show file tree

Hide file tree

Showing 23 changed files with 110 additions and 97 deletions.
diff --git 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 空数据库 建库链接

diff --git 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)

diff --git 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
 	} // 创建数据库

diff --git 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 = () => {

diff --git 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('')

diff --git 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)

diff --git 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"
-}
+}
diff --git 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,22 +50,28 @@ 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
   }
 
   const toggleDarkMode = (e) => {
     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')
-    }
-  })
-
-  watchEffect(() => {
-    if (config.darkMode === 'auto') {
-      toggleDarkModeAuto()
-    }
-
-    if (config.darkMode === 'dark') {
-      toggleTheme(true)
-    } else {
-      toggleTheme(false)
-    }
+    document.documentElement.classList.toggle('html-weakenss', config.weakness)
+    document.documentElement.classList.toggle('html-grey', config.grey)
   })
 
+  // 监听主题色
   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
   }
 })
diff --git 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 {

diff --git 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':

diff --git 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

diff --git 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)"
       >

diff --git 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()

diff --git 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"