From 4a907257c62bb9715e199aab7d6ccad73ffe58d0 Mon Sep 17 00:00:00 2001
From: web <web@ppanel.dev>
Date: Tue, 12 Aug 2025 05:47:58 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(editor):=20Add=20Go=20templa?=
 =?UTF-8?q?te=20editor=20component=20and=20update=20related=20schemas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/dashboard/subscribe/protocol-form.tsx |  28 +-
 apps/admin/locales/en-US/subscribe.json       |   8 +-
 apps/admin/locales/zh-CN/subscribe.json       |   8 +-
 apps/admin/services/admin/index.ts            |   2 +-
 apps/admin/services/admin/typings.d.ts        |   3 +
 packages/ui/package.json                      |   1 +
 .../custom-components/editor/go-template.tsx  | 402 ++++++++++++++++++
 .../ui/src/custom-components/editor/index.tsx |   1 +
 .../editor/monaco-editor.tsx                  |   8 +-
 9 files changed, 435 insertions(+), 26 deletions(-)
 create mode 100644 packages/ui/src/custom-components/editor/go-template.tsx

diff --git a/apps/admin/app/dashboard/subscribe/protocol-form.tsx b/apps/admin/app/dashboard/subscribe/protocol-form.tsx
index 4cdc459..8c697a2 100644
--- a/apps/admin/app/dashboard/subscribe/protocol-form.tsx
+++ b/apps/admin/app/dashboard/subscribe/protocol-form.tsx
@@ -46,6 +46,7 @@ import {
   TooltipTrigger,
 } from '@workspace/ui/components/tooltip';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { GoTemplateEditor } from '@workspace/ui/custom-components/editor';
 import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
 import { Icon } from '@workspace/ui/custom-components/icon';
 import { UploadImage } from '@workspace/ui/custom-components/upload-image';
@@ -63,7 +64,7 @@ const createClientFormSchema = (t: any) =>
     description: z.string().optional(),
     icon: z.string().optional(),
     user_agent: z.string().min(1, `User-Agent ${t('form.validation.userAgentRequiredSuffix')}`),
-    proxy_template: z.string().default(''),
+    schema: z.string().default(''),
     template: z.string().default(''),
     output_format: z.string().default(''),
     download_link: z.object({
@@ -94,7 +95,7 @@ export function ProtocolForm() {
       description: '',
       icon: '',
       user_agent: '',
-      proxy_template: '',
+      schema: '',
       template: '',
       output_format: '',
       download_link: {
@@ -230,7 +231,7 @@ export function ProtocolForm() {
       description: '',
       icon: '',
       user_agent: '',
-      proxy_template: '',
+      schema: '',
       template: '',
       output_format: '',
       download_link: {
@@ -252,7 +253,7 @@ export function ProtocolForm() {
       description: client.description || '',
       icon: client.icon || '',
       user_agent: client.user_agent,
-      proxy_template: client.proxy_template || '',
+      schema: client.proxy_template || '',
       template: client.template || '',
       output_format: client.output_format || '',
       download_link: {
@@ -301,6 +302,7 @@ export function ProtocolForm() {
       if (editingClient) {
         await updateSubscribeApplication({
           ...data,
+          proxy_template: data.schema || '',
           is_default: editingClient.is_default,
           id: editingClient.id,
         });
@@ -308,6 +310,7 @@ export function ProtocolForm() {
       } else {
         await createSubscribeApplication({
           ...data,
+          proxy_template: data.schema || '',
           is_default: false,
         });
         toast.success(t('actions.createSuccess'));
@@ -491,20 +494,17 @@ export function ProtocolForm() {
 
                     <FormField
                       control={form.control}
-                      name='proxy_template'
+                      name='schema'
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>{t('form.fields.proxyTemplate')}</FormLabel>
+                          <FormLabel>{t('form.fields.schema')}</FormLabel>
                           <FormControl>
                             <Input
                               placeholder='clash://install-config?url={url}&name={name}'
                               {...field}
                             />
                           </FormControl>
-                          <FormDescription>
-                            {t('form.descriptions.proxyTemplate')}
-                            {`{url} {name}`}
-                          </FormDescription>
+                          <FormDescription>{t('form.descriptions.schema')}</FormDescription>
                           <FormMessage />
                         </FormItem>
                       )}
@@ -517,10 +517,10 @@ export function ProtocolForm() {
                         <FormItem>
                           <FormLabel>{t('form.fields.template')}</FormLabel>
                           <FormControl>
-                            <Textarea
-                              placeholder='proxies:\n  - name: {name}\n    type: {type}\n    server: {server}\n    port: {port}'
-                              className='min-h-[120px] font-mono text-sm'
-                              {...field}
+                            <GoTemplateEditor
+                              enableSprig
+                              value={field.value || ''}
+                              onChange={(value) => field.onChange(value)}
                             />
                           </FormControl>
                           <FormDescription>{t('form.descriptions.template')}</FormDescription>
diff --git a/apps/admin/locales/en-US/subscribe.json b/apps/admin/locales/en-US/subscribe.json
index 9711c42..5869cf9 100644
--- a/apps/admin/locales/en-US/subscribe.json
+++ b/apps/admin/locales/en-US/subscribe.json
@@ -52,8 +52,8 @@
       "name": "Name",
       "description": "Description",
       "outputFormat": "Output Format",
-      "proxyTemplate": "Subscription Link",
-      "template": "Config Template"
+      "schema": "URL Schema",
+      "template": "Subscription File Template"
     },
     "descriptions": {
       "icon": "Icon URL or base64 encoding",
@@ -61,8 +61,8 @@
       "userAgentPrefix": "Client identifier for distinguishing different clients",
       "description": "Detailed client description",
       "outputFormat": "Subscription configuration file format",
-      "proxyTemplate": "Subscription link template, supports variables: ",
-      "template": "Subscription configuration template, supports various variables",
+      "schema": "URL Schema template, supports variables: '{url}' subscription URL, '{name}' site name",
+      "template": "Subscription file template, supports various variables",
       "downloadLink": "platform download URL"
     },
     "validation": {
diff --git a/apps/admin/locales/zh-CN/subscribe.json b/apps/admin/locales/zh-CN/subscribe.json
index 1f6a673..3875002 100644
--- a/apps/admin/locales/zh-CN/subscribe.json
+++ b/apps/admin/locales/zh-CN/subscribe.json
@@ -47,8 +47,8 @@
       "icon": "图标 URL 或 base64 编码",
       "name": "客户端显示名称",
       "outputFormat": "订阅配置文件格式",
-      "proxyTemplate": "订阅链接模板，支持变量：",
-      "template": "订阅配置模板，支持各种变量",
+      "schema": "URL Schema 模板，支持变量：'{url}' 订阅地址，'{name}' 站点名称",
+      "template": "订阅文件模板，支持各种变量",
       "userAgentPrefix": "用于区分不同客户端的客户端标识符"
     },
     "editTitle": "编辑客户端",
@@ -57,8 +57,8 @@
       "icon": "图标",
       "name": "名称",
       "outputFormat": "输出格式",
-      "proxyTemplate": "订阅链接",
-      "template": "配置模板"
+      "schema": "URL Schema",
+      "template": "订阅文件模板"
     },
     "tabs": {
       "basic": "基本信息",
diff --git a/apps/admin/services/admin/index.ts b/apps/admin/services/admin/index.ts
index bdf189b..4ebecd4 100644
--- a/apps/admin/services/admin/index.ts
+++ b/apps/admin/services/admin/index.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
- 
+
 // API 更新时间：
 // API 唯一标识：
 import * as ads from './ads';
diff --git a/apps/admin/services/admin/typings.d.ts b/apps/admin/services/admin/typings.d.ts
index 695fa69..06c1dc5 100644
--- a/apps/admin/services/admin/typings.d.ts
+++ b/apps/admin/services/admin/typings.d.ts
@@ -339,6 +339,7 @@ declare namespace API {
     name: string;
     description?: string;
     icon?: string;
+    scheme?: string;
     user_agent: string;
     is_default: boolean;
     proxy_template: string;
@@ -1501,6 +1502,7 @@ declare namespace API {
     name: string;
     description?: string;
     icon?: string;
+    scheme?: string;
     user_agent: string;
     is_default: boolean;
     proxy_template: string;
@@ -1779,6 +1781,7 @@ declare namespace API {
     name: string;
     description?: string;
     icon?: string;
+    scheme?: string;
     user_agent: string;
     is_default: boolean;
     proxy_template: string;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d7ada7b..ed91c4f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -65,6 +65,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.473.0",
     "mathjs": "^14.0.1",
+    "monaco-themes": "^0.4.6",
     "motion": "^11.18.1",
     "next-themes": "^0.4.4",
     "react-day-picker": "8.10.1",
diff --git a/packages/ui/src/custom-components/editor/go-template.tsx b/packages/ui/src/custom-components/editor/go-template.tsx
new file mode 100644
index 0000000..f685439
--- /dev/null
+++ b/packages/ui/src/custom-components/editor/go-template.tsx
@@ -0,0 +1,402 @@
+'use client';
+
+import { type Monaco } from '@monaco-editor/react';
+import {
+  MonacoEditor,
+  MonacoEditorProps,
+} from '@workspace/ui/custom-components/editor/monaco-editor';
+import { useMemo } from 'react';
+// Import Dracula theme
+import DraculaTheme from 'monaco-themes/themes/Dracula.json' with { type: 'json' };
+
+export interface GoTemplateEditorProps extends Omit<MonacoEditorProps, 'language'> {
+  schema?: Record<string, unknown>;
+  enableSprig?: boolean;
+}
+
+// Go template syntax keywords
+const GO_TEMPLATE_KEYWORDS = [
+  'if',
+  'else',
+  'end',
+  'with',
+  'range',
+  'template',
+  'define',
+  'block',
+  'and',
+  'or',
+  'not',
+  'eq',
+  'ne',
+  'lt',
+  'le',
+  'gt',
+  'ge',
+  'print',
+  'printf',
+  'println',
+];
+
+// Sprig function list (commonly used)
+const SPRIG_FUNCTIONS = [
+  // String functions
+  'trim',
+  'trimAll',
+  'trimSuffix',
+  'trimPrefix',
+  'upper',
+  'lower',
+  'title',
+  'untitle',
+  'repeat',
+  'substr',
+  'nospace',
+  'trunc',
+  'abbrev',
+  'abbrevboth',
+  'initials',
+  'randAlphaNum',
+  'randAlpha',
+  'randNumeric',
+  'wrap',
+  'wrapWith',
+  'contains',
+  'hasPrefix',
+  'hasSuffix',
+  'quote',
+  'squote',
+  'cat',
+  'indent',
+  'nindent',
+  'replace',
+  'plural',
+  'sha1sum',
+  'sha256sum',
+  'adler32sum',
+  'htmlEscape',
+  'htmlUnescape',
+  'urlEscape',
+  'urlUnescape',
+
+  // Math functions
+  'add',
+  'sub',
+  'mul',
+  'div',
+  'mod',
+  'max',
+  'min',
+  'ceil',
+  'floor',
+  'round',
+
+  // Date functions
+  'now',
+  'date',
+  'dateInZone',
+  'duration',
+  'durationRound',
+  'unixEpoch',
+  'dateModify',
+  'mustDateModify',
+  'htmlDate',
+  'htmlDateInZone',
+  'toDate',
+  'mustToDate',
+
+  // Lists and Dict functions
+  'list',
+  'first',
+  'rest',
+  'last',
+  'initial',
+  'reverse',
+  'uniq',
+  'compact',
+  'slice',
+  'has',
+  'set',
+  'unset',
+  'hasKey',
+  'pluck',
+  'keys',
+  'pick',
+  'omit',
+  'merge',
+  'mergeOverwrite',
+  'values',
+  'append',
+  'prepend',
+  'concat',
+  'dict',
+  'get',
+  'index',
+  'dig',
+
+  // Type functions
+  'typeOf',
+  'typeIs',
+  'typeIsLike',
+  'kindOf',
+  'kindIs',
+  'deepEqual',
+
+  // Default functions
+  'default',
+  'empty',
+  'coalesce',
+  'fromJson',
+  'toJson',
+  'toPrettyJson',
+  'toRawJson',
+  'mustFromJson',
+  'mustToJson',
+  'mustToPrettyJson',
+
+  // Encoding functions
+  'b64enc',
+  'b64dec',
+  'b32enc',
+  'b32dec',
+
+  // Flow control
+  'fail',
+  'required',
+  'tpl',
+
+  // UUID functions
+  'uuidv4',
+
+  // OS functions
+  'env',
+  'expandenv',
+];
+
+export function GoTemplateEditor({ schema, enableSprig = true, ...props }: GoTemplateEditorProps) {
+  const completionItems = useMemo(() => {
+    const items = [];
+
+    // Add Go template keywords
+    items.push(
+      ...GO_TEMPLATE_KEYWORDS.map((keyword) => ({
+        label: keyword,
+        kind: 14,
+        insertText: keyword,
+        documentation: `Go template keyword: ${keyword}`,
+      })),
+    );
+
+    // Add Sprig functions if enabled
+    if (enableSprig) {
+      items.push(
+        ...SPRIG_FUNCTIONS.map((func) => ({
+          label: func,
+          kind: 3, // Function
+          insertText: `${func} `,
+          documentation: `Sprig function: ${func}`,
+        })),
+      );
+    }
+
+    // Add schema field completion
+    if (schema && typeof schema === 'object') {
+      const addSchemaFields = (schemaObj: Record<string, unknown>, prefix = '.') => {
+        // Handle JSON Schema properties
+        if (schemaObj.properties && typeof schemaObj.properties === 'object') {
+          const properties = schemaObj.properties as Record<string, unknown>;
+          Object.keys(properties).forEach((key) => {
+            const property = properties[key] as Record<string, unknown>;
+            const fullPath = prefix === '.' ? `.${key}` : `${prefix}.${key}`;
+            const type = property.type || 'unknown';
+
+            items.push({
+              label: fullPath,
+              kind: 10, // Property
+              insertText: fullPath,
+              documentation: `Schema field: ${fullPath} (${type})${property.description ? ` - ${property.description}` : ''}`,
+            });
+
+            // Recursively add nested object properties
+            if (property.type === 'object' && property.properties) {
+              addSchemaFields(property, fullPath);
+            }
+          });
+        }
+        // Handle direct object structure (non-JSON Schema format)
+        else {
+          Object.keys(schemaObj).forEach((key) => {
+            if (key === 'properties' || key === 'type' || key === 'description') return;
+
+            const value = schemaObj[key];
+            const fullPath = prefix === '.' ? `.${key}` : `${prefix}.${key}`;
+
+            items.push({
+              label: fullPath,
+              kind: 10, // Property
+              insertText: fullPath,
+              documentation: `Schema field: ${fullPath} (${typeof value})`,
+            });
+
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+              addSchemaFields(value as Record<string, unknown>, fullPath);
+            }
+          });
+        }
+      };
+
+      addSchemaFields(schema);
+    }
+
+    return items;
+  }, [schema, enableSprig]);
+
+  const handleEditorMount = (editor: unknown, monaco: Monaco) => {
+    // Register custom Go template language
+    monaco.languages.register({ id: 'gotemplate' });
+
+    // Set syntax highlighting
+    monaco.languages.setMonarchTokensProvider('gotemplate', {
+      tokenizer: {
+        root: [
+          // Comments - match {{/*...*/}} first
+          [/\{\{\/\*[\s\S]*?\*\/\}\}/, 'comment'],
+          // Template tags - enter template state
+          [/\{\{-?/, { token: 'template-tag', next: '@template' }],
+          // Regular text
+          [/[^{]+/, ''],
+          [/[{]/, ''],
+        ],
+        template: [
+          // Exit template
+          [/-?\}\}/, { token: 'template-tag', next: '@pop' }],
+          // Strings in template
+          [/"([^"\\]|\\.)*"/, 'string'],
+          [/'([^'\\]|\\.)*'/, 'string'],
+          // Go template keywords - exact word match
+          [new RegExp(`\\b(${GO_TEMPLATE_KEYWORDS.join('|')})\\b`), 'keyword'],
+          // Sprig functions - exact word match
+          [new RegExp(`\\b(${SPRIG_FUNCTIONS.join('|')})\\b`), 'function'],
+          // Variables starting with $
+          [/\$\w+/, 'variable'],
+          // Properties starting with .
+          [/\.\w+/, 'property'],
+          // Numbers
+          [/\d+(\.\d+)?/, 'number'],
+          // Operators and other tokens
+          [/[|:]/, 'operator'],
+          // Whitespace
+          [/\s+/, ''],
+          // Any other characters in template
+          [/./, ''],
+        ],
+        string: [
+          [/[^\\"]+/, 'string'],
+          [/\\./, 'string.escape'],
+          [/"/, 'string', '@pop'],
+        ],
+        string_single: [
+          [/[^\\']+/, 'string'],
+          [/\\./, 'string.escape'],
+          [/'/, 'string', '@pop'],
+        ],
+      },
+    });
+
+    // Override the Dracula theme with Go template colors
+    monaco.editor.defineTheme('transparentTheme', {
+      base: DraculaTheme.base as 'vs' | 'vs-dark' | 'hc-black',
+      inherit: DraculaTheme.inherit,
+      rules: [
+        ...DraculaTheme.rules,
+        { token: 'template-tag', foreground: 'FFB86C', fontStyle: 'bold' }, // Dracula orange for template tags
+        { token: 'keyword', foreground: 'FF79C6' }, // Dracula pink for keywords
+        { token: 'function', foreground: '50FA7B' }, // Dracula green for functions
+        { token: 'variable', foreground: 'F1FA8C' }, // Dracula yellow for variables
+        { token: 'property', foreground: '8BE9FD' }, // Dracula cyan for properties
+        { token: 'operator', foreground: 'FF79C6' }, // Dracula pink for operators
+      ],
+      colors: {
+        'editor.background': '#00000000',
+      },
+    });
+
+    // Force theme refresh
+    const editorInstance = editor as { updateOptions?: (options: unknown) => void };
+    if (editorInstance && editorInstance.updateOptions) {
+      editorInstance.updateOptions({ theme: 'transparentTheme' });
+    }
+
+    // Register auto-completion
+    monaco.languages.registerCompletionItemProvider('gotemplate', {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      provideCompletionItems: (model: any, position: any) => {
+        const range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: position.column,
+          endColumn: position.column,
+        };
+
+        return {
+          suggestions: completionItems.map((item) => ({
+            ...item,
+            range,
+          })),
+        };
+      },
+    });
+
+    // Register hover provider
+    monaco.languages.registerHoverProvider('gotemplate', {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      provideHover: (model: any, position: any) => {
+        const word = model.getWordAtPosition(position);
+        if (word) {
+          const wordText = word.word;
+
+          if (GO_TEMPLATE_KEYWORDS.includes(wordText)) {
+            return {
+              range: new monaco.Range(
+                position.lineNumber,
+                word.startColumn,
+                position.lineNumber,
+                word.endColumn,
+              ),
+              contents: [{ value: `**Go Template Keyword**: ${wordText}` }],
+            };
+          }
+
+          if (SPRIG_FUNCTIONS.includes(wordText)) {
+            return {
+              range: new monaco.Range(
+                position.lineNumber,
+                word.startColumn,
+                position.lineNumber,
+                word.endColumn,
+              ),
+              contents: [{ value: `**Sprig Function**: ${wordText}` }],
+            };
+          }
+        }
+
+        return null;
+      },
+    });
+
+    if (props.onMount) {
+      props.onMount(editor as Parameters<NonNullable<typeof props.onMount>>[0], monaco);
+    }
+  };
+
+  return (
+    <MonacoEditor
+      title='Go Template Editor'
+      description={`Go text/template syntax${enableSprig ? ' with Sprig functions' : ''}`}
+      {...props}
+      language='gotemplate'
+      placeholder='Enter your Go template here...'
+      onMount={handleEditorMount}
+    />
+  );
+}
diff --git a/packages/ui/src/custom-components/editor/index.tsx b/packages/ui/src/custom-components/editor/index.tsx
index d420e51..b0df7c5 100644
--- a/packages/ui/src/custom-components/editor/index.tsx
+++ b/packages/ui/src/custom-components/editor/index.tsx
@@ -1,3 +1,4 @@
+export { GoTemplateEditor } from '@workspace/ui/custom-components/editor/go-template';
 export { HTMLEditor } from '@workspace/ui/custom-components/editor/html';
 export { JSONEditor } from '@workspace/ui/custom-components/editor/json';
 export { MarkdownEditor } from '@workspace/ui/custom-components/editor/markdown';
diff --git a/packages/ui/src/custom-components/editor/monaco-editor.tsx b/packages/ui/src/custom-components/editor/monaco-editor.tsx
index e14989b..aabec96 100644
--- a/packages/ui/src/custom-components/editor/monaco-editor.tsx
+++ b/packages/ui/src/custom-components/editor/monaco-editor.tsx
@@ -5,6 +5,7 @@ import { Button } from '@workspace/ui/components/button';
 import { cn } from '@workspace/ui/lib/utils';
 import { useSize } from 'ahooks';
 import { EyeIcon, EyeOff, FullscreenIcon, MinimizeIcon } from 'lucide-react';
+import DraculaTheme from 'monaco-themes/themes/Dracula.json' with { type: 'json' };
 import { useEffect, useRef, useState } from 'react';
 
 export interface MonacoEditorProps {
@@ -145,10 +146,11 @@ export function MonacoEditor({
                 theme='transparentTheme'
                 beforeMount={(monaco: Monaco) => {
                   monaco.editor.defineTheme('transparentTheme', {
-                    base: 'vs-dark',
-                    inherit: true,
-                    rules: [],
+                    base: DraculaTheme.base as 'vs' | 'vs-dark' | 'hc-black',
+                    inherit: DraculaTheme.inherit,
+                    rules: DraculaTheme.rules,
                     colors: {
+                      ...DraculaTheme.colors,
                       'editor.background': '#00000000',
                     },
                   });