Add about panel in settings dialog (#799)

* basic about page

* Remove frontend version from setting dialog header

* Style about page

* basic system stats

* Basic styling

* Reword

* Format memory amount

src/components/dialog/content/SettingDialogContent.vue

@@ -51,6 +51,9 @@
               }"
             />
           </TabPanel>
+          <TabPanel key="about" value="About">
+            <AboutPanel />
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </div>
@@ -70,17 +73,25 @@ import SettingGroup from './setting/SettingGroup.vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { flattenTree } from '@/utils/treeUtil'
+import AboutPanel from './setting/AboutPanel.vue'
 
 interface ISettingGroup {
   label: string
   settings: SettingParams[]
 }
 
+const aboutPanelNode: SettingTreeNode = {
+  key: 'about',
+  label: 'About',
+  children: []
+}
+
 const settingStore = useSettingStore()
 const settingRoot = computed<SettingTreeNode>(() => settingStore.settingTree)
-const categories = computed<SettingTreeNode[]>(
-  () => settingRoot.value.children || []
-)
+const categories = computed<SettingTreeNode[]>(() => [
+  ...(settingRoot.value.children || []),
+  aboutPanelNode
+])
 const activeCategory = ref<SettingTreeNode | null>(null)
 const searchResults = ref<ISettingGroup[]>([])
 

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

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h2 class="text-2xl font-bold mb-2">{{ $t('about') }}</h2>
+    <div class="space-y-2">
+      <a
+        v-for="link in links"
+        :key="link.url"
+        :href="link.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center no-underline"
+      >
+        <Tag class="mr-2">
+          <template #icon>
+            <i :class="[link.icon, 'mr-2 text-xl']"></i>
+          </template>
+          {{ link.label }}
+        </Tag>
+      </a>
+    </div>
+
+    <Divider />
+
+    <SystemStatsPanel
+      v-if="systemStatsStore.systemStats"
+      :stats="systemStatsStore.systemStats"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import Tag from 'primevue/tag'
+import Divider from 'primevue/divider'
+import { computed, onMounted } from 'vue'
+import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
+
+const systemStatsStore = useSystemStatsStore()
+const frontendVersion = window['__COMFYUI_FRONTEND_VERSION__']
+const coreVersion = computed(
+  () => systemStatsStore.systemStats?.system?.comfyui_version ?? ''
+)
+
+const links = computed(() => [
+  {
+    label: `ComfyUI ${coreVersion.value}`,
+    url: 'https://github.com/comfyanonymous/ComfyUI',
+    icon: 'pi pi-github'
+  },
+  {
+    label: `ComfyUI_frontend v${frontendVersion}`,
+    url: 'https://github.com/Comfy-Org/ComfyUI_frontend',
+    icon: 'pi pi-github'
+  },
+  {
+    label: 'Discord',
+    url: 'https://www.comfy.org/discord',
+    icon: 'pi pi-discord'
+  },
+  { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
+])
+
+onMounted(async () => {
+  if (!systemStatsStore.systemStats) {
+    await systemStatsStore.fetchSystemStats()
+  }
+})
+</script>

src/components/dialog/header/SettingDialogHeader.vue

@@ -3,16 +3,10 @@
     <h2>
       <i class="pi pi-cog"></i>
       <span>{{ $t('settings') }}</span>
-      <Tag :value="frontendVersion" severity="secondary" class="version-tag" />
     </h2>
   </div>
 </template>
 
-<script setup lang="ts">
-import Tag from 'primevue/tag'
-const frontendVersion = 'v' + window['__COMFYUI_FRONTEND_VERSION__']
-</script>
-
 <style scoped>
 .pi-cog {
   font-size: 1.25rem;