mod: model

model/proxy/proxy.go

@@ -85,6 +85,7 @@ type Proxy struct {
 	Vless
 	Vmess
 	Socks
+	Tuic
 }
 
 func (p Proxy) MarshalYAML() (any, error) {
@@ -179,6 +180,16 @@ func (p Proxy) MarshalYAML() (any, error) {
 			Name:  p.Name,
 			Socks: p.Socks,
 		}, nil
+	case "tuic":
+		return struct {
+			Type string `yaml:"type"`
+			Name string `yaml:"name"`
+			Tuic `yaml:",inline"`
+		}{
+			Type: p.Type,
+			Name: p.Name,
+			Tuic: p.Tuic,
+		}, nil
 	default:
 		return nil, fmt.Errorf("unsupported proxy type: %s", p.Type)
 	}
@@ -296,7 +307,16 @@ func (p *Proxy) UnmarshalYAML(node *yaml.Node) error {
 			return err
 		}
 		p.Socks = data.Socks
-
+	case "tuic":
+		var data struct {
+			Type string `yaml:"type"`
+			Name string `yaml:"name"`
+			Tuic `yaml:",inline"`
+		}
+		if err := node.Decode(&data); err != nil {
+			return err
+		}
+		p.Tuic = data.Tuic
 	default:
 		return fmt.Errorf("unsupported proxy type: %s", temp.Type)
 	}

model/proxy/tuic.go

@@ -0,0 +1,35 @@
+package proxy
+
+type Tuic struct {
+	Server                string   `proxy:"server"`
+	Port                  int      `proxy:"port"`
+	Token                 string   `proxy:"token,omitempty"`
+	UUID                  string   `proxy:"uuid,omitempty"`
+	Password              string   `proxy:"password,omitempty"`
+	Ip                    string   `proxy:"ip,omitempty"`
+	HeartbeatInterval     int      `proxy:"heartbeat-interval,omitempty"`
+	ALPN                  []string `proxy:"alpn,omitempty"`
+	ReduceRtt             bool     `proxy:"reduce-rtt,omitempty"`
+	RequestTimeout        int      `proxy:"request-timeout,omitempty"`
+	UdpRelayMode          string   `proxy:"udp-relay-mode,omitempty"`
+	CongestionController  string   `proxy:"congestion-controller,omitempty"`
+	DisableSni            bool     `proxy:"disable-sni,omitempty"`
+	MaxUdpRelayPacketSize int      `proxy:"max-udp-relay-packet-size,omitempty"`
+
+	FastOpen             bool       `proxy:"fast-open,omitempty"`
+	MaxOpenStreams       int        `proxy:"max-open-streams,omitempty"`
+	CWND                 int        `proxy:"cwnd,omitempty"`
+	SkipCertVerify       bool       `proxy:"skip-cert-verify,omitempty"`
+	Fingerprint          string     `proxy:"fingerprint,omitempty"`
+	Certificate          string     `proxy:"certificate,omitempty"`
+	PrivateKey           string     `proxy:"private-key,omitempty"`
+	ReceiveWindowConn    int        `proxy:"recv-window-conn,omitempty"`
+	ReceiveWindow        int        `proxy:"recv-window,omitempty"`
+	DisableMTUDiscovery  bool       `proxy:"disable-mtu-discovery,omitempty"`
+	MaxDatagramFrameSize int        `proxy:"max-datagram-frame-size,omitempty"`
+	SNI                  string     `proxy:"sni,omitempty"`
+	ECHOpts              ECHOptions `proxy:"ech-opts,omitempty"`
+
+	UDPOverStream        bool `proxy:"udp-over-stream,omitempty"`
+	UDPOverStreamVersion int  `proxy:"udp-over-stream-version,omitempty"`
+}

model/subscription.go

@@ -5,7 +5,9 @@ import (
 
 	"github.com/bestnite/sub2clash/model/proxy"
 	C "github.com/metacubex/mihomo/config"
+	CC "github.com/metacubex/mihomo/constant"
 	LC "github.com/metacubex/mihomo/listener/config"
+	orderedmap "github.com/wk8/go-ordered-map/v2"
 )
 
 type NodeList struct {
@@ -68,16 +70,158 @@ type Subscription struct {
 	SubRules      map[string][]string       `yaml:"sub-rules,omitempty" json:"sub-rules"`
 	Listeners     []map[string]any          `yaml:"listeners,omitempty" json:"listeners"`
 	Hosts         map[string]any            `yaml:"hosts,omitempty" json:"hosts"`
-	DNS           C.RawDNS                  `yaml:"dns,omitempty" json:"dns"`
-	NTP           C.RawNTP                  `yaml:"ntp,omitempty" json:"ntp"`
-	Tun           C.RawTun                  `yaml:"tun,omitempty" json:"tun"`
-	TuicServer    C.RawTuicServer           `yaml:"tuic-server,omitempty" json:"tuic-server"`
-	IPTables      C.RawIPTables             `yaml:"iptables,omitempty" json:"iptables"`
-	Experimental  C.RawExperimental         `yaml:"experimental,omitempty" json:"experimental"`
-	Profile       C.RawProfile              `yaml:"profile,omitempty" json:"profile"`
-	GeoXUrl       C.RawGeoXUrl              `yaml:"geox-url,omitempty" json:"geox-url"`
-	Sniffer       C.RawSniffer              `yaml:"sniffer,omitempty" json:"sniffer"`
-	TLS           C.RawTLS                  `yaml:"tls,omitempty" json:"tls"`
+	DNS           RawDNS                    `yaml:"dns,omitempty" json:"dns"`
+	NTP           RawNTP                    `yaml:"ntp,omitempty" json:"ntp"`
+	Tun           RawTun                    `yaml:"tun,omitempty" json:"tun"`
+	TuicServer    RawTuicServer             `yaml:"tuic-server,omitempty" json:"tuic-server"`
+	IPTables      RawIPTables               `yaml:"iptables,omitempty" json:"iptables"`
+	Experimental  RawExperimental           `yaml:"experimental,omitempty" json:"experimental"`
+	Profile       RawProfile                `yaml:"profile,omitempty" json:"profile"`
+	GeoXUrl       RawGeoXUrl                `yaml:"geox-url,omitempty" json:"geox-url"`
+	Sniffer       RawSniffer                `yaml:"sniffer,omitempty" json:"sniffer"`
+	TLS           RawTLS                    `yaml:"tls,omitempty" json:"tls"`
 
 	ClashForAndroid C.RawClashForAndroid `yaml:"clash-for-android,omitempty" json:"clash-for-android"`
 }
+
+type RawDNS struct {
+	Enable                       bool                                `yaml:"enable,omitempty" json:"enable"`
+	PreferH3                     bool                                `yaml:"prefer-h3,omitempty" json:"prefer-h3"`
+	IPv6                         bool                                `yaml:"ipv6,omitempty" json:"ipv6"`
+	IPv6Timeout                  uint                                `yaml:"ipv6-timeout,omitempty" json:"ipv6-timeout"`
+	UseHosts                     bool                                `yaml:"use-hosts,omitempty" json:"use-hosts"`
+	UseSystemHosts               bool                                `yaml:"use-system-hosts,omitempty" json:"use-system-hosts"`
+	RespectRules                 bool                                `yaml:"respect-rules,omitempty" json:"respect-rules"`
+	NameServer                   []string                            `yaml:"nameserver,omitempty" json:"nameserver"`
+	Fallback                     []string                            `yaml:"fallback,omitempty" json:"fallback"`
+	FallbackFilter               C.RawFallbackFilter                 `yaml:"fallback-filter,omitempty" json:"fallback-filter"`
+	Listen                       string                              `yaml:"listen,omitempty" json:"listen"`
+	EnhancedMode                 CC.DNSMode                          `yaml:"enhanced-mode,omitempty" json:"enhanced-mode"`
+	FakeIPRange                  string                              `yaml:"fake-ip-range,omitempty" json:"fake-ip-range"`
+	FakeIPFilter                 []string                            `yaml:"fake-ip-filter,omitempty" json:"fake-ip-filter"`
+	FakeIPFilterMode             CC.FilterMode                       `yaml:"fake-ip-filter-mode,omitempty" json:"fake-ip-filter-mode"`
+	DefaultNameserver            []string                            `yaml:"default-nameserver,omitempty" json:"default-nameserver"`
+	CacheAlgorithm               string                              `yaml:"cache-algorithm,omitempty" json:"cache-algorithm"`
+	NameServerPolicy             *orderedmap.OrderedMap[string, any] `yaml:"nameserver-policy,omitempty" json:"nameserver-policy"`
+	ProxyServerNameserver        []string                            `yaml:"proxy-server-nameserver,omitempty" json:"proxy-server-nameserver"`
+	DirectNameServer             []string                            `yaml:"direct-nameserver,omitempty" json:"direct-nameserver"`
+	DirectNameServerFollowPolicy bool                                `yaml:"direct-nameserver-follow-policy,omitempty" json:"direct-nameserver-follow-policy"`
+}
+
+type RawNTP struct {
+	Enable        bool   `yaml:"enable,omitempty" json:"enable"`
+	Server        string `yaml:"server,omitempty" json:"server"`
+	Port          int    `yaml:"port,omitempty" json:"port"`
+	Interval      int    `yaml:"interval,omitempty" json:"interval"`
+	DialerProxy   string `yaml:"dialer-proxy,omitempty" json:"dialer-proxy"`
+	WriteToSystem bool   `yaml:"write-to-system,omitempty" json:"write-to-system"`
+}
+
+type RawTun struct {
+	Enable              bool        `yaml:"enable,omitempty" json:"enable"`
+	Device              string      `yaml:"device,omitempty" json:"device"`
+	Stack               CC.TUNStack `yaml:"stack,omitempty" json:"stack"`
+	DNSHijack           []string    `yaml:"dns-hijack,omitempty" json:"dns-hijack"`
+	AutoRoute           bool        `yaml:"auto-route,omitempty" json:"auto-route"`
+	AutoDetectInterface bool        `yaml:"auto-detect-interface,omitempty"`
+
+	MTU        uint32 `yaml:"mtu,omitempty" json:"mtu,omitempty"`
+	GSO        bool   `yaml:"gso,omitempty" json:"gso,omitempty"`
+	GSOMaxSize uint32 `yaml:"gso-max-size,omitempty" json:"gso-max-size,omitempty"`
+	//Inet4Address           []netip.Prefix `yaml:"inet4-address,omitempty" json:"inet4-address,omitempty"`
+	Inet6Address           []netip.Prefix `yaml:"inet6-address,omitempty" json:"inet6-address,omitempty"`
+	IPRoute2TableIndex     int            `yaml:"iproute2-table-index,omitempty" json:"iproute2-table-index,omitempty"`
+	IPRoute2RuleIndex      int            `yaml:"iproute2-rule-index,omitempty" json:"iproute2-rule-index,omitempty"`
+	AutoRedirect           bool           `yaml:"auto-redirect,omitempty" json:"auto-redirect,omitempty"`
+	AutoRedirectInputMark  uint32         `yaml:"auto-redirect-input-mark,omitempty" json:"auto-redirect-input-mark,omitempty"`
+	AutoRedirectOutputMark uint32         `yaml:"auto-redirect-output-mark,omitempty" json:"auto-redirect-output-mark,omitempty"`
+	StrictRoute            bool           `yaml:"strict-route,omitempty" json:"strict-route,omitempty"`
+	RouteAddress           []netip.Prefix `yaml:"route-address,omitempty" json:"route-address,omitempty"`
+	RouteAddressSet        []string       `yaml:"route-address-set,omitempty" json:"route-address-set,omitempty"`
+	RouteExcludeAddress    []netip.Prefix `yaml:"route-exclude-address,omitempty" json:"route-exclude-address,omitempty"`
+	RouteExcludeAddressSet []string       `yaml:"route-exclude-address-set,omitempty" json:"route-exclude-address-set,omitempty"`
+	IncludeInterface       []string       `yaml:"include-interface,omitempty" json:"include-interface,omitempty"`
+	ExcludeInterface       []string       `yaml:"exclude-interface,omitempty" json:"exclude-interface,omitempty"`
+	IncludeUID             []uint32       `yaml:"include-uid,omitempty" json:"include-uid,omitempty"`
+	IncludeUIDRange        []string       `yaml:"include-uid-range,omitempty" json:"include-uid-range,omitempty"`
+	ExcludeUID             []uint32       `yaml:"exclude-uid,omitempty" json:"exclude-uid,omitempty"`
+	ExcludeUIDRange        []string       `yaml:"exclude-uid-range,omitempty" json:"exclude-uid-range,omitempty"`
+	ExcludeSrcPort         []uint16       `yaml:"exclude-src-port,omitempty" json:"exclude-src-port,omitempty"`
+	ExcludeSrcPortRange    []string       `yaml:"exclude-src-port-range,omitempty" json:"exclude-src-port-range,omitempty"`
+	ExcludeDstPort         []uint16       `yaml:"exclude-dst-port,omitempty" json:"exclude-dst-port,omitempty"`
+	ExcludeDstPortRange    []string       `yaml:"exclude-dst-port-range,omitempty" json:"exclude-dst-port-range,omitempty"`
+	IncludeAndroidUser     []int          `yaml:"include-android-user,omitempty" json:"include-android-user,omitempty"`
+	IncludePackage         []string       `yaml:"include-package,omitempty" json:"include-package,omitempty"`
+	ExcludePackage         []string       `yaml:"exclude-package,omitempty" json:"exclude-package,omitempty"`
+	EndpointIndependentNat bool           `yaml:"endpoint-independent-nat,omitempty" json:"endpoint-independent-nat,omitempty"`
+	UDPTimeout             int64          `yaml:"udp-timeout,omitempty" json:"udp-timeout,omitempty"`
+	FileDescriptor         int            `yaml:"file-descriptor,omitempty" json:"file-descriptor"`
+
+	Inet4RouteAddress        []netip.Prefix `yaml:"inet4-route-address,omitempty" json:"inet4-route-address,omitempty"`
+	Inet6RouteAddress        []netip.Prefix `yaml:"inet6-route-address,omitempty" json:"inet6-route-address,omitempty"`
+	Inet4RouteExcludeAddress []netip.Prefix `yaml:"inet4-route-exclude-address,omitempty" json:"inet4-route-exclude-address,omitempty"`
+	Inet6RouteExcludeAddress []netip.Prefix `yaml:"inet6-route-exclude-address,omitempty" json:"inet6-route-exclude-address,omitempty"`
+}
+
+type RawTuicServer struct {
+	Enable                bool              `yaml:"enable,omitempty" json:"enable"`
+	Listen                string            `yaml:"listen,omitempty" json:"listen"`
+	Token                 []string          `yaml:"token,omitempty" json:"token"`
+	Users                 map[string]string `yaml:"users,omitempty" json:"users,omitempty"`
+	Certificate           string            `yaml:"certificate,omitempty" json:"certificate"`
+	PrivateKey            string            `yaml:"private-key,omitempty" json:"private-key"`
+	CongestionController  string            `yaml:"congestion-controller,omitempty" json:"congestion-controller,omitempty"`
+	MaxIdleTime           int               `yaml:"max-idle-time,omitempty" json:"max-idle-time,omitempty"`
+	AuthenticationTimeout int               `yaml:"authentication-timeout,omitempty" json:"authentication-timeout,omitempty"`
+	ALPN                  []string          `yaml:"alpn,omitempty" json:"alpn,omitempty"`
+	MaxUdpRelayPacketSize int               `yaml:"max-udp-relay-packet-size,omitempty" json:"max-udp-relay-packet-size,omitempty"`
+	CWND                  int               `yaml:"cwnd,omitempty" json:"cwnd,omitempty"`
+}
+
+type RawIPTables struct {
+	Enable           bool     `yaml:"enable,omitempty" json:"enable"`
+	InboundInterface string   `yaml:"inbound-interface,omitempty" json:"inbound-interface"`
+	Bypass           []string `yaml:"bypass,omitempty" json:"bypass"`
+	DnsRedirect      bool     `yaml:"dns-redirect,omitempty" json:"dns-redirect"`
+}
+
+type RawExperimental struct {
+	Fingerprints     []string `yaml:"fingerprints,omitempty"`
+	QUICGoDisableGSO bool     `yaml:"quic-go-disable-gso,omitempty"`
+	QUICGoDisableECN bool     `yaml:"quic-go-disable-ecn,omitempty"`
+	IP4PEnable       bool     `yaml:"dialer-ip4p-convert,omitempty"`
+}
+
+type RawProfile struct {
+	StoreSelected bool `yaml:"store-selected,omitempty" json:"store-selected"`
+	StoreFakeIP   bool `yaml:"store-fake-ip,omitempty" json:"store-fake-ip"`
+}
+
+type RawGeoXUrl struct {
+	GeoIp   string `yaml:"geoip,omitempty" json:"geoip"`
+	Mmdb    string `yaml:"mmdb,omitempty" json:"mmdb"`
+	ASN     string `yaml:"asn,omitempty" json:"asn"`
+	GeoSite string `yaml:"geosite,omitempty" json:"geosite"`
+}
+
+type RawSniffer struct {
+	Enable          bool     `yaml:"enable,omitempty" json:"enable"`
+	OverrideDest    bool     `yaml:"override-destination,omitempty" json:"override-destination"`
+	Sniffing        []string `yaml:"sniffing,omitempty" json:"sniffing"`
+	ForceDomain     []string `yaml:"force-domain,omitempty" json:"force-domain"`
+	SkipSrcAddress  []string `yaml:"skip-src-address,omitempty" json:"skip-src-address"`
+	SkipDstAddress  []string `yaml:"skip-dst-address,omitempty" json:"skip-dst-address"`
+	SkipDomain      []string `yaml:"skip-domain,omitempty" json:"skip-domain"`
+	Ports           []string `yaml:"port-whitelist,omitempty" json:"port-whitelist"`
+	ForceDnsMapping bool     `yaml:"force-dns-mapping,omitempty" json:"force-dns-mapping"`
+	ParsePureIp     bool     `yaml:"parse-pure-ip,omitempty" json:"parse-pure-ip"`
+
+	Sniff map[string]C.RawSniffingConfig `yaml:"sniff,omitempty" json:"sniff"`
+}
+
+type RawTLS struct {
+	Certificate     string   `yaml:"certificate,omitempty" json:"certificate"`
+	PrivateKey      string   `yaml:"private-key,omitempty" json:"private-key"`
+	EchKey          string   `yaml:"ech-key,omitempty" json:"ech-key"`
+	CustomTrustCert []string `yaml:"custom-certifactes,omitempty" json:"custom-certifactes"`
+}

server/frontend/package-lock.json

@@ -16,7 +16,7 @@
       },
       "devDependencies": {
         "typescript": "~5.9.3",
-        "vite": "^7.1.7"
+        "vite": "^7.2.6"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -1785,7 +1785,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1897,10 +1896,10 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
-      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
-      "license": "ISC",
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
@@ -1943,11 +1942,10 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.10.tgz",
-      "integrity": "sha512-CmuvUBzVJ/e3HGxhg6cYk88NGgTnBoOo7ogtfJJ0fefUWAxN/WDSUa50o+oVBxuIhO8FoEZW0j2eW7sfjs5EtA==",
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.6.tgz",
+      "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",

server/frontend/package.json

@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "typescript": "~5.9.3",
-    "vite": "^7.1.7"
+    "vite": "^7.2.6"
   }
 }

server/frontend/src/app.ts

@@ -7,6 +7,7 @@ import { base64EncodeUnicode, base64decodeUnicode } from "./utils.js";
 import "./components/rule-provider-input.js";
 import "./components/rule-input.js";
 import "./components/rename-input.js";
+import "./components/short-link-input-group.js";
 
 @customElement("sub2clash-app")
 export class Sub2clashApp extends LitElement {
@@ -145,6 +146,7 @@ export class Sub2clashApp extends LitElement {
         // 设置返回的短链ID和密码
         this.shortLinkID = response.data.id;
         this.shortLinkPasswd = response.data.password;
+        this.showDialog("成功", "生成短链成功");
       })
       .catch((error) => {
         if (error.response && error.response.data) {
@@ -183,11 +185,11 @@ export class Sub2clashApp extends LitElement {
         }
       )
       .then(() => {
-        this.showDialog("成功", "更新成功");
+        this.showDialog("成功", "更新短链成功");
       })
       .catch((error) => {
         if (error.response && error.response.status === 401) {
-          this.showDialog("", "密码错误");
+          this.showDialog("", "短链不存在或密码错误");
         } else if (error.response && error.response.data) {
           this.showDialog("", "更新短链失败：" + error.response.data);
         } else {
@@ -214,7 +216,7 @@ export class Sub2clashApp extends LitElement {
         },
       })
       .then(() => {
-        this.showDialog("成功", "删除成功");
+        this.showDialog("成功", "删除短链成功");
       })
       .catch((error) => {
         if (error.response && error.response.status === 401) {
@@ -238,6 +240,9 @@ export class Sub2clashApp extends LitElement {
       .get(`./short/${s[1]}`)
       .then((resp) => {
         this.config = resp.data;
+        const parsedUrl = new URL(this.reverseUrl);
+        this.shortLinkID = parsedUrl.pathname.split("/").filter(Boolean).pop() ?? "";
+        this.shortLinkPasswd = parsedUrl.searchParams.get("password") ?? "";
       })
       .catch((err: AxiosError) => {
         if (err.response && err.response.status == 401) {
@@ -609,8 +614,7 @@ export class Sub2clashApp extends LitElement {
           </fieldset>
 
           <fieldset class="fieldset mb-8">
-            <legend
-              class="fieldset-legend text-2xl font-semibold mb-4 text-center">
+            <legend class="fieldset-legend text-2xl font-semibold mb-4">
               输出配置
             </legend>
 
@@ -637,55 +641,19 @@ export class Sub2clashApp extends LitElement {
               </div>
             </div>
 
-            <div class="form-control mb-2">
-              <div class="join w-full">
-                <input
-                  class="input input-bordered w-1/2 join-item"
-                  type="text"
-                  placeholder="ID（可选）"
-                  .value="${this.shortLinkID}"
-                  @change="${(e: Event) => {
+            <short-link-input-group
+              .id="${this.shortLinkID}"
+              .passwd="${this.shortLinkPasswd}"
+              @id-change="${(e: Event) => {
                 this.shortLinkID = (e.target as HTMLInputElement).value;
-                  }}" />
-                <input
-                  class="input input-bordered w-1/2 join-item"
-                  type="text"
-                  placeholder="密码"
-                  .value="${this.shortLinkPasswd}"
-                  @change="${(e: Event) => {
+              }}"
+              @passwd-change="${(e: Event) => {
                 this.shortLinkPasswd = (e.target as HTMLInputElement).value;
-                  }}" />
-                <button
-                  class="btn btn-primary join-item"
-                  type="button"
-                  @click="${this.generateShortLink}">
-                  生成短链
-                </button>
-                <button
-                  class="btn btn-primary join-item"
-                  @click="${this.updateShortLink}"
-                  type="button">
-                  更新短链
-                </button>
-                <button
-                  class="btn btn-primary join-item"
-                  @click="${this.deleteShortLink}"
-                  type="button">
-                  删除短链
-                </button>
-                <button
-                  class="btn btn-primary join-item"
-                  type="button"
-                  @click="${(e: Event) => {
-                    this.copyToClipboard(
-                      `${window.location.origin}${window.location.pathname}s/${this.shortLinkID}?password=${this.shortLinkPasswd}`,
-                      e.target as HTMLButtonElement
-                    );
-                  }}">
-                  复制短链
-                </button>
-              </div>
-            </div>
+              }}"
+              @generate-btn-click="${this.generateShortLink}"
+              @update-btn-click="${this.updateShortLink}"
+              @delete-btn-click="${this.deleteShortLink}">
+            </short-link-input-group>
           </fieldset>
         </form>
       </div>

server/frontend/src/components/short-link-input-group.ts

@@ -0,0 +1,180 @@
+import { html, LitElement, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import globalStyles from "../index.css?inline";
+
+@customElement("short-link-input-group")
+export class ShortLinkInputGroup extends LitElement {
+  static styles = unsafeCSS(globalStyles);
+
+  @property()
+  id: string = "";
+
+  @property({ type: Number })
+  _screenSizeLevel: number = 0;
+
+  @property()
+  passwd: string = "";
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", this._checkScreenSize);
+    this._checkScreenSize(); // Initial check
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("resize", this._checkScreenSize);
+    super.disconnectedCallback();
+  }
+
+  _checkScreenSize = () => {
+    const width = window.innerWidth;
+    if (width < 365) {
+      this._screenSizeLevel = 0; // sm
+    } else if (width < 640) {
+      this._screenSizeLevel = 1; // md
+    } else {
+      this._screenSizeLevel = 2; // other
+    }
+  };
+
+  async copyToClipboard(content: string, e: HTMLButtonElement) {
+    try {
+      await navigator.clipboard.writeText(content);
+      let text = e.textContent;
+      e.addEventListener("mouseout", function () {
+        e.textContent = text;
+      });
+      e.textContent = "复制成功";
+    } catch (err) {
+      console.error("复制到剪贴板失败:", err);
+    }
+  }
+
+  idInputTemplate() {
+    return html`<input
+      class="input input-bordered w-1/2 join-item"
+      type="text"
+      placeholder="ID（可选）"
+      .value="${this.id}"
+      @change="${(e: Event) => {
+        this.id = (e.target as HTMLInputElement).value;
+        this.dispatchEvent(
+          new CustomEvent("id-change", {
+            detail: this.id,
+          })
+        );
+      }}" />`;
+  }
+
+  passwdInputTemplate() {
+    return html`<input
+      class="input input-bordered w-1/2 join-item"
+      type="text"
+      placeholder="密码"
+      .value="${this.passwd}"
+      @change="${(e: Event) => {
+        this.passwd = (e.target as HTMLInputElement).value;
+        this.dispatchEvent(
+          new CustomEvent("passwd-change", {
+            detail: this.passwd,
+          })
+        );
+      }}" />`;
+  }
+
+  generateBtnTemplate(extraClass: string = "") {
+    return html`<button
+      class="btn btn-primary join-item ${extraClass}"
+      type="button"
+      @click="${(e: Event) => {
+        this.dispatchEvent(
+          new CustomEvent("generate-btn-click", { detail: e })
+        );
+      }}">
+      生成短链
+    </button>`;
+  }
+
+  updateBtnTemplate(extraClass: string = "") {
+    return html`<button
+      class="btn btn-primary join-item ${extraClass}"
+      @click="${(e: Event) => {
+        this.dispatchEvent(new CustomEvent("update-btn-click", { detail: e }));
+      }}"
+      type="button">
+      更新短链
+    </button>`;
+  }
+
+  deleteBtnTemplate(extraClass: string = "") {
+    return html`<button
+      class="btn btn-primary join-item ${extraClass}"
+      @click="${(e: Event) => {
+        this.dispatchEvent(new CustomEvent("delete-btn-click", { detail: e }));
+      }}"
+      type="button">
+      删除短链
+    </button>`;
+  }
+
+  copyBtnTemplate(extraClass: string = "") {
+    return html`<button
+      class="btn btn-primary join-item ${extraClass}"
+      type="button"
+      @click="${(e: Event) => {
+        this.copyToClipboard(
+          `${window.location.origin}${window.location.pathname}s/${this.id}?password=${this.passwd}`,
+          e.target as HTMLButtonElement
+        );
+      }}">
+      复制短链
+    </button>`;
+  }
+
+  render() {
+    const sm = html`<div class="form-control mb-2">
+      <div class="join w-full mb-1">
+        ${this.idInputTemplate()} ${this.passwdInputTemplate()}
+      </div>
+      <div class="join w-full mb-1">
+        ${this.generateBtnTemplate("w-1/2")} ${this.updateBtnTemplate("w-1/2")}
+      </div>
+      <div class="join w-full">
+        ${this.deleteBtnTemplate("w-1/2")} ${this.copyBtnTemplate("w-1/2")}
+      </div>
+    </div>`;
+
+    const md = html`<div class="form-control mb-2">
+      <div class="join w-full mb-1">
+        ${this.idInputTemplate()} ${this.passwdInputTemplate()}
+      </div>
+      <div class="join w-full">
+        ${this.generateBtnTemplate("w-1/4")} ${this.updateBtnTemplate("w-1/4")}
+        ${this.deleteBtnTemplate("w-1/4")} ${this.copyBtnTemplate("w-1/4")}
+      </div>
+    </div>`;
+
+    const other = html`<div class="form-control mb-2">
+      <div class="join w-full">
+        ${this.idInputTemplate()} ${this.passwdInputTemplate()}
+        ${this.generateBtnTemplate()} ${this.updateBtnTemplate()}
+        ${this.deleteBtnTemplate()} ${this.copyBtnTemplate()}
+      </div>
+    </div>`;
+
+    switch (this._screenSizeLevel) {
+      case 0:
+        return sm;
+      case 1:
+        return md;
+      default:
+        return other;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "short-link-input-group": ShortLinkInputGroup;
+  }
+}