From 181b262a616ba02ed4cfb49c2b581d7bc7b15f95 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Wed, 4 Feb 2026 20:04:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(website):=20=E6=B7=BB=E5=8A=A0"=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8"=E5=88=86=E7=B1=BB=E3=80=81=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E6=A0=87=E9=A2=98=E5=92=8C=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E5=88=9B=E5=BB=BA=E7=B1=BB=E5=9E=8B=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=20(#1329)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Initial plan

* feat(website): 添加"全部"分类、动态模态框标题和批量创建类型支持

Co-authored-by: devhaozi <115467771+devhaozi@users.noreply.github.com>

* refactor: 修复代码审查问题，提取正则常量和接口定义

Co-authored-by: devhaozi <115467771+devhaozi@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: devhaozi <115467771+devhaozi@users.noreply.github.com>
---
 web/.gitignore                            |   1 +
 web/src/views/website/BulkCreateModal.vue | 106 +++++++++++++++++-----
 web/src/views/website/CreateModal.vue     |  82 +++++++++++++++--
 web/src/views/website/IndexView.vue       |   3 +-
 4 files changed, 163 insertions(+), 29 deletions(-)

diff --git a/web/.gitignore b/web/.gitignore
index c9b45b70..121d8eb4 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+package-lock.json
 
 
 # Editor directories and files
diff --git a/web/src/views/website/BulkCreateModal.vue b/web/src/views/website/BulkCreateModal.vue
index 42c8848e..2a3f8dcf 100644
--- a/web/src/views/website/BulkCreateModal.vue
+++ b/web/src/views/website/BulkCreateModal.vue
@@ -5,11 +5,73 @@ import { useGettext } from 'vue3-gettext'
 import website from '@/api/panel/website'
 
 const show = defineModel<boolean>('show', { type: Boolean, required: true })
+const type = defineModel<string>('type', { type: String, required: true })
 
 const { $gettext } = useGettext()
 
 const bulkCreate = ref('')
 
+// 内部选择的类型（当外部 type 为 'all' 时使用）
+const selectedType = ref('proxy')
+
+// 实际使用的网站类型
+const effectiveType = computed(() => {
+  if (type.value === 'all') {
+    return selectedType.value
+  }
+  return type.value
+})
+
+// 批量创建网站请求模型
+interface BulkCreateModel {
+  type: string
+  name: string
+  listens: Array<string>
+  domains: Array<string>
+  path: string
+  proxy: string
+  remark: string
+}
+
+// 类型选项
+const typeOptions = computed(() => [
+  { label: $gettext('Reverse Proxy'), value: 'proxy' },
+  { label: $gettext('PHP'), value: 'php' },
+  { label: $gettext('Pure Static'), value: 'static' }
+])
+
+// 获取模态框标题
+const modalTitle = computed(() => {
+  switch (effectiveType.value) {
+    case 'proxy':
+      return $gettext('Bulk Create Reverse Proxy Website')
+    case 'php':
+      return $gettext('Bulk Create PHP Website')
+    case 'static':
+      return $gettext('Bulk Create Pure Static Website')
+    default:
+      return $gettext('Bulk Create Website')
+  }
+})
+
+// 获取占位符文本（根据类型不同显示不同格式）
+const placeholderText = computed(() => {
+  if (effectiveType.value === 'proxy') {
+    return $gettext('name|domain|port|proxy_target|remark')
+  }
+  return $gettext('name|domain|port|path|remark')
+})
+
+// 获取第四列的说明文本
+const fourthColumnHelp = computed(() => {
+  if (effectiveType.value === 'proxy') {
+    return $gettext(
+      'Proxy Target: The target address for reverse proxy (e.g., http://127.0.0.1:3000).'
+    )
+  }
+  return $gettext('Path: The path of the website, can be empty to use the default path.')
+})
+
 const handleCreate = async () => {
   // 按行分割
   const lines = bulkCreate.value.split('\n')
@@ -32,20 +94,20 @@ const handleCreate = async () => {
       .trim()
       .split(',')
       .map((item) => item.trim())
-    const path = (parts[3] ?? '').trim()
+    const fourthColumn = (parts[3] ?? '').trim()
     const remark = parts[4] ? parts[4].trim() : ''
-    let model = {
-      name: '',
-      listens: [] as Array<string>,
-      domains: [] as Array<string>,
-      path: '',
-      remark: ''
+
+    // 构建请求模型
+    const model: BulkCreateModel = {
+      type: effectiveType.value,
+      name: name,
+      listens: listens,
+      domains: domains,
+      path: effectiveType.value === 'proxy' ? '' : fourthColumn,
+      proxy: effectiveType.value === 'proxy' ? fourthColumn : '',
+      remark: remark
     }
-    model.name = name
-    model.domains = domains
-    model.listens = listens
-    model.path = path
-    model.remark = remark
+
     // 去除空的域名和端口
     model.domains = model.domains.filter((item) => item !== '')
     model.listens = model.listens.filter((item) => item !== '')
@@ -59,13 +121,6 @@ const handleCreate = async () => {
       window.$message.success(
         $gettext('Website %{ name } created successfully', { name: model.name })
       )
-      model = {
-        name: '',
-        domains: [] as Array<string>,
-        listens: [] as Array<string>,
-        path: '',
-        remark: ''
-      }
       window.$bus.emit('website:refresh')
     })
   }
@@ -75,7 +130,7 @@ const handleCreate = async () => {
 <template>
   <n-modal
     v-model:show="show"
-    :title="$gettext('Bulk Create Website')"
+    :title="modalTitle"
     preset="card"
     style="width: 60vw"
     size="huge"
@@ -84,6 +139,13 @@ const handleCreate = async () => {
     @close="show = false"
   >
     <n-flex vertical>
+      <n-form-item v-if="type === 'all'" :label="$gettext('Website Type')">
+        <n-select
+          v-model:value="selectedType"
+          :options="typeOptions"
+          :placeholder="$gettext('Select Website Type')"
+        />
+      </n-form-item>
       <n-alert type="info">
         {{
           $gettext(
@@ -94,7 +156,7 @@ const handleCreate = async () => {
       <n-input
         type="textarea"
         :autosize="{ minRows: 10, maxRows: 15 }"
-        :placeholder="$gettext('name|domain|port|path|remark')"
+        :placeholder="placeholderText"
         v-model:value="bulkCreate"
       />
       <n-text>
@@ -119,7 +181,7 @@ const handleCreate = async () => {
         }}
       </n-text>
       <n-text>
-        {{ $gettext('Path: The path of the website, can be empty to use the default path.') }}
+        {{ fourthColumnHelp }}
       </n-text>
       <n-text>
         {{ $gettext('Remark: The remark of the website, can be empty.') }}
diff --git a/web/src/views/website/CreateModal.vue b/web/src/views/website/CreateModal.vue
index 05523f8f..e7c489cf 100644
--- a/web/src/views/website/CreateModal.vue
+++ b/web/src/views/website/CreateModal.vue
@@ -12,6 +12,23 @@ const type = defineModel<string>('type', { type: String, required: true })
 
 const { $gettext } = useGettext()
 
+// 内部选择的类型（当外部 type 为 'all' 时使用）
+const selectedType = ref('proxy')
+
+// 实际使用的网站类型
+const effectiveType = computed(() => {
+  if (type.value === 'all') {
+    return selectedType.value
+  }
+  return type.value
+})
+
+// 类型选项
+const typeOptions = computed(() => [
+  { label: $gettext('Reverse Proxy'), value: 'proxy' },
+  { label: $gettext('PHP'), value: 'php' },
+  { label: $gettext('Pure Static'), value: 'static' }
+])
 const createModel = ref({
   type: '',
   name: '',
@@ -49,8 +66,42 @@ const { data: installedEnvironment } = useRequest(home.installedEnvironment, {
   }
 })
 
+// 获取模态框标题
+const modalTitle = computed(() => {
+  switch (effectiveType.value) {
+    case 'proxy':
+      return $gettext('Create Reverse Proxy Website')
+    case 'php':
+      return $gettext('Create PHP Website')
+    case 'static':
+      return $gettext('Create Pure Static Website')
+    default:
+      return $gettext('Create Website')
+  }
+})
+
+// 域名分隔符正则表达式（支持逗号、空格、换行分隔）
+const DOMAIN_SEPARATORS_REGEX = /[\s,\n\r]+/
+
+// 处理域名粘贴，支持批量添加
+const handleDomainCreate = (index: number, value: string) => {
+  if (DOMAIN_SEPARATORS_REGEX.test(value)) {
+    // 解析多个域名并去除空白
+    const domains = value.split(DOMAIN_SEPARATORS_REGEX).map((d) => d.trim()).filter((d) => d !== '')
+    if (domains.length > 1) {
+      // 移除当前空输入框
+      createModel.value.domains.splice(index, 1)
+      // 过滤掉已存在的域名，避免重复
+      const existingDomains = new Set(createModel.value.domains.map((d) => d.trim()))
+      const newDomains = domains.filter((d) => !existingDomains.has(d))
+      // 将新域名添加到列表
+      createModel.value.domains.push(...newDomains)
+    }
+  }
+}
+
 const handleCreate = async () => {
-  createModel.value.type = type.value
+  createModel.value.type = effectiveType.value
   // 去除空的域名和端口
   createModel.value.domains = createModel.value.domains.filter((item) => item !== '')
   createModel.value.listens = createModel.value.listens.filter((item) => item !== '')
@@ -111,7 +162,7 @@ watch(showPathSelector, (val) => {
 <template>
   <n-modal
     v-model:show="show"
-    :title="$gettext('Create Website')"
+    :title="modalTitle"
     preset="card"
     style="width: 60vw"
     size="huge"
@@ -120,6 +171,13 @@ watch(showPathSelector, (val) => {
     @close="show = false"
   >
     <n-form :model="createModel">
+      <n-form-item v-if="type === 'all'" path="type" :label="$gettext('Website Type')">
+        <n-select
+          v-model:value="selectedType"
+          :options="typeOptions"
+          :placeholder="$gettext('Select Website Type')"
+        />
+      </n-form-item>
       <n-form-item path="name" :label="$gettext('Name')">
         <n-input
           v-model:value="createModel.name"
@@ -138,6 +196,18 @@ watch(showPathSelector, (val) => {
               placeholder="example.com"
               :min="1"
               show-sort-button
+              @update:value="
+                (value: string[]) => {
+                  // 检查最后一个元素是否包含多个域名
+                  if (value.length > 0) {
+                    const lastIndex = value.length - 1
+                    const lastValue = value[lastIndex]
+                    if (lastValue && DOMAIN_SEPARATORS_REGEX.test(lastValue)) {
+                      handleDomainCreate(lastIndex, lastValue)
+                    }
+                  }
+                }
+              "
             />
           </n-form-item>
         </n-col>
@@ -153,7 +223,7 @@ watch(showPathSelector, (val) => {
           </n-form-item>
         </n-col>
       </n-row>
-      <n-row v-if="type == 'php'" :gutter="[0, 24]">
+      <n-row v-if="effectiveType == 'php'" :gutter="[0, 24]">
         <n-col :span="11">
           <n-form-item path="php" :label="$gettext('PHP Version')">
             <n-select
@@ -186,7 +256,7 @@ watch(showPathSelector, (val) => {
           </n-form-item>
         </n-col>
       </n-row>
-      <n-row v-if="type == 'php'" :gutter="[0, 24]">
+      <n-row v-if="effectiveType == 'php'" :gutter="[0, 24]">
         <n-col :span="7">
           <n-form-item v-if="createModel.db" path="db_name" :label="$gettext('Database Name')">
             <n-input
@@ -224,7 +294,7 @@ watch(showPathSelector, (val) => {
           </n-form-item>
         </n-col>
       </n-row>
-      <n-form-item v-if="type != 'proxy'" path="path" :label="$gettext('Directory')">
+      <n-form-item v-if="effectiveType != 'proxy'" path="path" :label="$gettext('Directory')">
         <n-input-group>
           <n-input
             v-model:value="createModel.path"
@@ -243,7 +313,7 @@ watch(showPathSelector, (val) => {
           </n-button>
         </n-input-group>
       </n-form-item>
-      <n-form-item v-if="type == 'proxy'" path="path" :label="$gettext('Proxy Target')">
+      <n-form-item v-if="effectiveType == 'proxy'" path="path" :label="$gettext('Proxy Target')">
         <n-input
           v-model:value="createModel.proxy"
           type="text"
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index 6bb0929a..fcecda47 100644
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -8,7 +8,7 @@ import CreateModal from '@/views/website/CreateModal.vue'
 import ListView from '@/views/website/ListView.vue'
 import SettingView from '@/views/website/SettingView.vue'
 
-const currentTab = ref('proxy')
+const currentTab = ref('all')
 
 const createModal = ref(false)
 const bulkCreateModal = ref(false)
@@ -18,6 +18,7 @@ const bulkCreateModal = ref(false)
   <common-page show-header show-footer>
     <template #tabbar>
       <n-tabs v-model:value="currentTab" animated>
+        <n-tab name="all" :tab="$gettext('All')" />
         <n-tab name="proxy" :tab="$gettext('Reverse Proxy')" />
         <n-tab name="php" :tab="$gettext('PHP')" />
         <n-tab name="static" :tab="$gettext('Pure Static')" />