Use setting panel template (#1674)

* PanelTemplate

* Use panel template

src/components/dialog/content/setting/AboutPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about-container">
+  <PanelTemplate value="About" class="about-container">
     <h2 class="text-2xl font-bold mb-2">{{ $t('about') }}</h2>
     <div class="space-y-2">
       <a
@@ -26,10 +26,11 @@
       v-if="systemStatsStore.systemStats"
       :stats="systemStatsStore.systemStats"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
+import PanelTemplate from './PanelTemplate.vue'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import Tag from 'primevue/tag'

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="extension-panel">
+  <PanelTemplate value="Extension" class="extension-panel">
     <DataTable :value="extensionStore.extensions" stripedRows size="small">
       <Column field="name" :header="$t('extensionName')" sortable></Column>
       <Column
@@ -36,7 +36,7 @@
         severity="danger"
       />
     </div>
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -48,6 +48,7 @@ import Column from 'primevue/column'
 import ToggleSwitch from 'primevue/toggleswitch'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import PanelTemplate from './PanelTemplate.vue'
 
 const extensionStore = useExtensionStore()
 const settingStore = useSettingStore()

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="keybinding-panel">
+  <PanelTemplate value="Keybinding" class="keybinding-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="$t('searchKeybindings') + '...'"
+      />
+    </template>
+
     <DataTable
       :value="commandsData"
       v-model:selection="selectedCommandData"
@@ -11,12 +18,6 @@
         header: 'px-0'
       }"
     >
-      <template #header>
-        <SearchBox
-          v-model="filters['global'].value"
-          :placeholder="$t('searchKeybindings') + '...'"
-        />
-      </template>
       <Column field="actions" header="">
         <template #body="slotProps">
           <div class="actions invisible flex flex-row">
@@ -109,7 +110,7 @@
       text
       @click="resetKeybindings"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -127,6 +128,7 @@ import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
+import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useToast } from 'primevue/usetoast'

src/components/dialog/content/setting/PanelTemplate.vue

@@ -0,0 +1,21 @@
+<template>
+  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
+    <div class="flex flex-col h-full w-full gap-2">
+      <slot name="header" />
+      <ScrollPanel class="flex-grow h-0 pr-2">
+        <slot />
+      </ScrollPanel>
+      <slot name="footer" />
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel'
+import ScrollPanel from 'primevue/scrollpanel'
+
+const props = defineProps<{
+  value: string
+  class?: string
+}>()
+</script>

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -1,42 +1,50 @@
 <template>
-  <div class="flex flex-col gap-2">
-    <Message v-if="modifiedConfigs.length > 0" severity="info" pt:text="w-full">
-      <p>
-        {{ $t('serverConfig.modifiedConfigs') }}
-      </p>
-      <ul>
-        <li v-for="config in modifiedConfigs" :key="config.id">
-          {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
-        </li>
-      </ul>
-      <div class="flex justify-end gap-2">
-        <Button
-          :label="$t('serverConfig.revertChanges')"
-          @click="revertChanges"
-          outlined
-        />
-        <Button
-          :label="$t('serverConfig.restart')"
-          @click="restartApp"
-          outlined
-          severity="danger"
-        />
+  <PanelTemplate value="Server-Config" class="server-config-panel">
+    <template #header>
+      <div class="flex flex-col gap-2">
+        <Message
+          v-if="modifiedConfigs.length > 0"
+          severity="info"
+          pt:text="w-full"
+        >
+          <p>
+            {{ $t('serverConfig.modifiedConfigs') }}
+          </p>
+          <ul>
+            <li v-for="config in modifiedConfigs" :key="config.id">
+              {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
+            </li>
+          </ul>
+          <div class="flex justify-end gap-2">
+            <Button
+              :label="$t('serverConfig.revertChanges')"
+              @click="revertChanges"
+              outlined
+            />
+            <Button
+              :label="$t('serverConfig.restart')"
+              @click="restartApp"
+              outlined
+              severity="danger"
+            />
+          </div>
+        </Message>
+        <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
+          <template #icon>
+            <i-lucide:terminal class="text-xl font-bold" />
+          </template>
+          <div class="flex items-center justify-between">
+            <p>{{ commandLineArgs }}</p>
+            <Button
+              icon="pi pi-clipboard"
+              @click="copyCommandLineArgs"
+              severity="secondary"
+              text
+            />
+          </div>
+        </Message>
       </div>
-    </Message>
-    <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
-      <template #icon>
-        <i-lucide:terminal class="text-xl font-bold" />
-      </template>
-      <div class="flex items-center justify-between">
-        <p>{{ commandLineArgs }}</p>
-        <Button
-          icon="pi pi-clipboard"
-          @click="copyCommandLineArgs"
-          severity="secondary"
-          text
-        />
-      </div>
-    </Message>
+    </template>
     <div
       v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
       :key="label"
@@ -58,7 +66,7 @@
         />
       </div>
     </div>
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -66,6 +74,7 @@ import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Divider from 'primevue/divider'
 import FormItem from '@/components/common/FormItem.vue'
+import PanelTemplate from './PanelTemplate.vue'
 import { formatCamelCase } from '@/utils/formatUtil'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { storeToRefs } from 'pinia'