From 7988804603478d4d9550f717c4229362becb624b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <haozi@loli.email>
Date: Fri, 16 Jan 2026 20:53:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E6=A8=A1=E7=89=88=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/service/template.go        | 12 +++---
 pkg/api/template.go                 | 23 +++++------
 web/src/api/panel/template/index.ts |  2 +-
 web/src/views/app/TemplateView.vue  | 61 ++++++++++++++++++++++++++---
 web/src/views/app/types.ts          |  1 +
 5 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/internal/service/template.go b/internal/service/template.go
index 6eeb7ad1..fccf883f 100644
--- a/internal/service/template.go
+++ b/internal/service/template.go
@@ -4,6 +4,7 @@ import (
 	"net/http"
 
 	"github.com/leonelquinteros/gotext"
+	"github.com/libtnb/chix"
 
 	"github.com/acepanel/panel/internal/biz"
 	"github.com/acepanel/panel/internal/http/request"
@@ -25,12 +26,11 @@ func NewTemplateService(t *gotext.Locale, template biz.TemplateRepo, setting biz
 
 // List 获取所有模版
 func (s *TemplateService) List(w http.ResponseWriter, r *http.Request) {
-	if offline, _ := s.settingRepo.GetBool(biz.SettingKeyOfflineMode); offline {
-		Error(w, http.StatusForbidden, s.t.Get("Unable to get template list in offline mode"))
-		return
-	}
-
-	Success(w, s.templateRepo.List())
+	paged, total := Paginate(r, s.templateRepo.List())
+	Success(w, chix.M{
+		"total": total,
+		"items": paged,
+	})
 }
 
 // Get 获取模版详情
diff --git a/pkg/api/template.go b/pkg/api/template.go
index e0d650cd..70ca7a3b 100644
--- a/pkg/api/template.go
+++ b/pkg/api/template.go
@@ -6,21 +6,22 @@ import (
 )
 
 type Template struct {
-	CreatedAt    time.Time `json:"created_at"`
-	UpdatedAt    time.Time `json:"updated_at"`
-	Slug         string    `json:"slug"`
-	Icon         string    `json:"icon"`
-	Name         string    `json:"name"`
-	Description  string    `json:"description"`
-	Categories   []string  `json:"categories"`
-	Version      string    `json:"version"`
-	Compose      string    `json:"compose"`
-	Environments []struct {
+	CreatedAt     time.Time `json:"created_at"`
+	UpdatedAt     time.Time `json:"updated_at"`
+	Slug          string    `json:"slug"`
+	Icon          string    `json:"icon"`
+	Name          string    `json:"name"`
+	Description   string    `json:"description"`
+	Website       string    `json:"website"`
+	Categories    []string  `json:"categories"`
+	Architectures []string  `json:"architectures"`
+	Compose       string    `json:"compose"`
+	Environments  []struct {
 		Name        string            `json:"name"`              // 变量名
 		Description string            `json:"description"`       // 变量描述
 		Type        string            `json:"type"`              // 变量类型， text, password, number, port, select
 		Options     map[string]string `json:"options,omitempty"` // 下拉框选项，key -> value
-		Default     string            `json:"default"`           // 默认值
+		Default     any               `json:"default"`           // 默认值，string or number
 	} `json:"environments"`
 }
 
diff --git a/web/src/api/panel/template/index.ts b/web/src/api/panel/template/index.ts
index f2550b14..ebaccd17 100644
--- a/web/src/api/panel/template/index.ts
+++ b/web/src/api/panel/template/index.ts
@@ -2,7 +2,7 @@ import { http } from '@/utils'
 
 export default {
   // 获取模版列表
-  list: (): any => http.Get('/template'),
+  list: (page: number, pageSize: number): any => http.Get(`/template?page=${page}&limit=${pageSize}`),
   // 获取模版详情
   get: (slug: string): any => http.Get(`/template/${slug}`),
   // 使用模版创建编排
diff --git a/web/src/views/app/TemplateView.vue b/web/src/views/app/TemplateView.vue
index 73ec098c..ace48311 100644
--- a/web/src/views/app/TemplateView.vue
+++ b/web/src/views/app/TemplateView.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { NButton, NCard, NEllipsis, NFlex, NGrid, NGridItem, NSpin, NTag } from 'naive-ui'
+import {
+  NAvatar,
+  NButton,
+  NCard,
+  NEllipsis,
+  NFlex,
+  NGrid,
+  NGridItem,
+  NPagination,
+  NSpin,
+  NTag
+} from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import app from '@/api/panel/app'
@@ -13,9 +24,15 @@ const selectedCategory = ref<string>('')
 const deployModalShow = ref(false)
 const selectedTemplate = ref<Template | null>(null)
 
-const { loading, data, refresh } = usePagination(template.list, {
-  initialData: []
-})
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => template.list(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 12,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
 // 获取所有分类
 const { data: categories } = useRequest(app.categories, {
@@ -78,8 +95,28 @@ onMounted(() => {
           <n-card hoverable style="height: 100%">
             <n-flex vertical :size="12">
               <n-flex justify="space-between" align="center">
-                <span>{{ tpl.name }}</span>
-                <n-tag size="small" type="info">{{ tpl.version }}</n-tag>
+                <n-flex align="center" :size="8">
+                  <n-avatar
+                    v-if="tpl.icon"
+                    :src="tpl.icon"
+                    :size="24"
+                    style="background: transparent"
+                  />
+                  <span>{{ tpl.name }}</span>
+                </n-flex>
+                <n-button
+                  v-if="tpl.website"
+                  text
+                  tag="a"
+                  :href="tpl.website"
+                  target="_blank"
+                  type="primary"
+                  size="small"
+                >
+                  <template #icon>
+                    <icon-mdi-open-in-new />
+                  </template>
+                </n-button>
               </n-flex>
               <n-ellipsis :line-clamp="2" :tooltip="{ width: 300 }">
                 {{ tpl.description }}
@@ -103,6 +140,18 @@ onMounted(() => {
 
       <n-empty v-if="!loading && filteredTemplates.length === 0" />
     </n-spin>
+
+    <n-flex justify="end" v-if="total > 12">
+      <n-pagination
+        v-model:page="page"
+        v-model:page-size="pageSize"
+        :page-count="pageCount"
+        :item-count="total"
+        show-quick-jumper
+        show-size-picker
+        :page-sizes="[12, 24, 48, 96]"
+      />
+    </n-flex>
   </n-flex>
 
   <template-deploy-modal
diff --git a/web/src/views/app/types.ts b/web/src/views/app/types.ts
index 890aa6ac..7aeab5c2 100644
--- a/web/src/views/app/types.ts
+++ b/web/src/views/app/types.ts
@@ -33,6 +33,7 @@ export interface Template {
   icon: string
   name: string
   description: string
+  website: string
   categories: string[]
   version: string
   compose: string