feat: add Octopus managed site integration

components/ChannelDialog/components/ChannelDialog.tsx

@@ -18,12 +18,16 @@ import {
 } from "~/components/ui"
 import { DIALOG_MODES, type DialogMode } from "~/constants/dialogModes"
 import { ChannelType, ChannelTypeOptions } from "~/constants/managedSite"
+import { OctopusOutboundTypeOptions } from "~/constants/octopus"
+import { OCTOPUS } from "~/constants/siteType"
+import { useUserPreferencesContext } from "~/contexts/UserPreferencesContext"
 import {
   CHANNEL_STATUS,
   type ChannelFormData,
   type ChannelStatus,
   type ManagedSiteChannel,
 } from "~/types/managedSite"
+import { OctopusOutboundType } from "~/types/octopus"
 
 export interface ChannelDialogProps {
   isOpen: boolean
@@ -61,6 +65,8 @@ export function ChannelDialog({
 }: ChannelDialogProps) {
   const { t } = useTranslation(["channelDialog", "common"])
   const [showKey, setShowKey] = useState(false)
+  const { managedSiteType } = useUserPreferencesContext()
+  const isOctopus = managedSiteType === OCTOPUS
 
   const {
     formData,
@@ -182,7 +188,9 @@ export function ChannelDialog({
                 : String(formData.type)
             }
             onValueChange={(value) =>
-              handleTypeChange(Number(value) as ChannelType)
+              handleTypeChange(
+                Number(value) as ChannelType | OctopusOutboundType,
+              )
             }
             disabled={isSaving || mode === DIALOG_MODES.EDIT}
             required
@@ -193,11 +201,17 @@ export function ChannelDialog({
               />
             </SelectTrigger>
             <SelectContent>
-              {ChannelTypeOptions.map((option) => (
-                <SelectItem key={option.value} value={String(option.value)}>
-                  {option.label}
-                </SelectItem>
-              ))}
+              {isOctopus
+                ? OctopusOutboundTypeOptions.map((option) => (
+                    <SelectItem key={option.value} value={String(option.value)}>
+                      {option.label}
+                    </SelectItem>
+                  ))
+                : ChannelTypeOptions.map((option) => (
+                    <SelectItem key={option.value} value={String(option.value)}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
             </SelectContent>
           </Select>
           <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
@@ -316,73 +330,79 @@ export function ChannelDialog({
           </p>
         </div>
 
-        {/* Groups */}
-        <div>
-          <CompactMultiSelect
-            label={t("channelDialog:fields.groups.label")}
-            options={availableGroups}
-            selected={formData.groups}
-            onChange={(groups) => updateField("groups", groups)}
-            placeholder={
-              isLoadingGroups
-                ? t("channelDialog:fields.groups.loading")
-                : t("channelDialog:fields.groups.placeholder")
-            }
-            disabled={isSaving || isLoadingGroups}
-            allowCustom
-          />
-          <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
-            {t("channelDialog:fields.groups.hint")}
-          </p>
-        </div>
+        {/* Groups - Octopus 没有分组概念，隐藏此字段 */}
+        {!isOctopus && (
+          <div>
+            <CompactMultiSelect
+              label={t("channelDialog:fields.groups.label")}
+              options={availableGroups}
+              selected={formData.groups}
+              onChange={(groups) => updateField("groups", groups)}
+              placeholder={
+                isLoadingGroups
+                  ? t("channelDialog:fields.groups.loading")
+                  : t("channelDialog:fields.groups.placeholder")
+              }
+              disabled={isSaving || isLoadingGroups}
+              allowCustom
+            />
+            <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
+              {t("channelDialog:fields.groups.hint")}
+            </p>
+          </div>
+        )}
 
         {/* Advanced Settings */}
         <details className="dark:border-dark-bg-tertiary rounded-lg border border-gray-200 p-3">
           <summary className="dark:text-dark-text-primary cursor-pointer text-sm font-medium text-gray-700">
             {t("channelDialog:sections.advanced")}
           </summary>
           <div className="mt-3 space-y-4">
-            {/* Priority */}
-            <div>
-              <Label htmlFor="channel-priority">
-                {t("channelDialog:fields.priority.label")}
-              </Label>
-              <Input
-                id="channel-priority"
-                type="number"
-                value={formData.priority}
-                onChange={(e) =>
-                  updateField("priority", parseInt(e.target.value) || 0)
-                }
-                placeholder="0"
-                disabled={isSaving}
-                min="0"
-              />
-              <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
-                {t("channelDialog:fields.priority.hint")}
-              </p>
-            </div>
+            {/* Priority - Octopus 不支持优先级 */}
+            {!isOctopus && (
+              <div>
+                <Label htmlFor="channel-priority">
+                  {t("channelDialog:fields.priority.label")}
+                </Label>
+                <Input
+                  id="channel-priority"
+                  type="number"
+                  value={formData.priority}
+                  onChange={(e) =>
+                    updateField("priority", parseInt(e.target.value) || 0)
+                  }
+                  placeholder="0"
+                  disabled={isSaving}
+                  min="0"
+                />
+                <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
+                  {t("channelDialog:fields.priority.hint")}
+                </p>
+              </div>
+            )}
 
-            {/* Weight */}
-            <div>
-              <Label htmlFor="channel-weight">
-                {t("channelDialog:fields.weight.label")}
-              </Label>
-              <Input
-                id="channel-weight"
-                type="number"
-                value={formData.weight}
-                onChange={(e) =>
-                  updateField("weight", parseInt(e.target.value) || 0)
-                }
-                placeholder="0"
-                disabled={isSaving}
-                min="0"
-              />
-              <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
-                {t("channelDialog:fields.weight.hint")}
-              </p>
-            </div>
+            {/* Weight - Octopus 不支持权重 */}
+            {!isOctopus && (
+              <div>
+                <Label htmlFor="channel-weight">
+                  {t("channelDialog:fields.weight.label")}
+                </Label>
+                <Input
+                  id="channel-weight"
+                  type="number"
+                  value={formData.weight}
+                  onChange={(e) =>
+                    updateField("weight", parseInt(e.target.value) || 0)
+                  }
+                  placeholder="0"
+                  disabled={isSaving}
+                  min="0"
+                />
+                <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
+                  {t("channelDialog:fields.weight.hint")}
+                </p>
+              </div>
+            )}
 
             {/* Status */}
             <div>

components/ChannelDialog/components/OctopusTypeSelector.tsx

@@ -0,0 +1,69 @@
+import { useTranslation } from "react-i18next"
+
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui"
+import { OctopusOutboundTypeOptions } from "~/constants/octopus"
+import { OctopusOutboundType } from "~/types/octopus"
+
+export interface OctopusTypeSelectorProps {
+  value: OctopusOutboundType | undefined | null
+  onChange: (value: OctopusOutboundType) => void
+  disabled?: boolean
+  required?: boolean
+}
+
+/**
+ * Type selector specifically for Octopus channels.
+ * Displays only the 6 Octopus outbound types instead of 55+ New API types.
+ * @param props Component props
+ * @param props.value Current selected type value
+ * @param props.onChange Callback when type is changed
+ * @param props.disabled Whether the selector is disabled
+ * @param props.required Whether the field is required
+ */
+export function OctopusTypeSelector({
+  value,
+  onChange,
+  disabled = false,
+  required = false,
+}: OctopusTypeSelectorProps) {
+  const { t } = useTranslation(["channelDialog"])
+
+  return (
+    <div>
+      <Label htmlFor="channel-type" required={required}>
+        {t("channelDialog:fields.type.label")}
+      </Label>
+      <Select
+        value={value === undefined || value === null ? "" : String(value)}
+        onValueChange={(val) => onChange(Number(val) as OctopusOutboundType)}
+        disabled={disabled}
+        required={required}
+      >
+        <SelectTrigger id="channel-type">
+          <SelectValue
+            placeholder={t("channelDialog:fields.type.placeholder")}
+          />
+        </SelectTrigger>
+        <SelectContent>
+          {OctopusOutboundTypeOptions.map((option) => (
+            <SelectItem key={option.value} value={String(option.value)}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <p className="dark:text-dark-text-secondary mt-1 text-xs text-gray-500">
+        {t("channelDialog:fields.type.hint")}
+      </p>
+    </div>
+  )
+}
+
+export default OctopusTypeSelector

components/ChannelDialog/hooks/useChannelForm.ts

@@ -13,6 +13,7 @@ import type {
   ManagedSiteChannel,
   UpdateChannelPayload,
 } from "~/types/managedSite"
+import type { OctopusOutboundType } from "~/types/octopus"
 import { createLogger } from "~/utils/logger"
 import { mergeUniqueOptions } from "~/utils/selectOptions"
 
@@ -85,14 +86,12 @@ export function useChannelForm({
   const [isSaving, setIsSaving] = useState(false)
   const [isLoadingGroups, setIsLoadingGroups] = useState(false)
   const [isLoadingModels, setIsLoadingModels] = useState(false)
-  const [availableGroups, setAvailableGroups] =
-    useState<CompactMultiSelectOption[]>(
-    [],
-  )
-  const [availableModels, setAvailableModels] =
-    useState<CompactMultiSelectOption[]>(
-    [],
-  )
+  const [availableGroups, setAvailableGroups] = useState<
+    CompactMultiSelectOption[]
+  >([])
+  const [availableModels, setAvailableModels] = useState<
+    CompactMultiSelectOption[]
+  >([])
 
   // Load groups and model suggestions on mount
   useEffect(() => {
@@ -231,7 +230,7 @@ export function useChannelForm({
     setFormData((prev) => ({ ...prev, [field]: value }))
   }
 
-  const handleTypeChange = (newType: ChannelType) => {
+  const handleTypeChange = (newType: ChannelType | OctopusOutboundType) => {
     setFormData((prev) => ({
       ...prev,
       type: newType,

components/KiloCodeExportDialog.tsx

@@ -572,8 +572,8 @@ export function KiloCodeExportDialog({
     const selectedTokenIds = selectedTokenIdsBySite[siteId] ?? []
     const tokenOptions: CompactMultiSelectOption[] = inventory.tokens.map(
       (token) => ({
-      value: `${token.id}`,
-      label: getTokenLabel(token, t("common:labels.token")),
+        value: `${token.id}`,
+        label: getTokenLabel(token, t("common:labels.token")),
       }),
     )
 

components/icons/ManagedSiteIcon.tsx

@@ -1,9 +1,10 @@
 import { NewAPI } from "@lobehub/icons"
 
 import { ICON_SIZE_CLASSNAME, IconSize } from "~/components/icons/iconSizes"
+import { OctopusIcon } from "~/components/icons/OctopusIcon"
 import { VeloeraIcon } from "~/components/icons/VeloeraIcon"
 import type { ManagedSiteType } from "~/constants/siteType"
-import { VELOERA } from "~/constants/siteType"
+import { OCTOPUS, VELOERA } from "~/constants/siteType"
 import { cn } from "~/lib/utils"
 
 interface ManagedSiteIconProps {
@@ -18,6 +19,10 @@ export function ManagedSiteIcon({
   siteType,
   size = "sm",
 }: ManagedSiteIconProps) {
+  if (siteType === OCTOPUS) {
+    return <OctopusIcon size={size} />
+  }
+
   if (siteType === VELOERA) {
     return <VeloeraIcon size={size} />
   }

components/icons/OctopusIcon.tsx

@@ -0,0 +1,26 @@
+import OctopusLogo from "~/assets/OctopusLogo.png"
+import { ICON_SIZE_CLASSNAME, IconSize } from "~/components/icons/iconSizes"
+import { cn } from "~/lib/utils"
+
+interface OctopusIconProps {
+  size?: IconSize
+  className?: string
+}
+
+/**
+ * Octopus icon for the Octopus managed site type.
+ * Uses the official Octopus logo.
+ */
+export function OctopusIcon({ size = "sm", className }: OctopusIconProps) {
+  return (
+    <img
+      src={OctopusLogo}
+      alt="Octopus"
+      className={cn(
+        ICON_SIZE_CLASSNAME[size],
+        "inline-flex items-center justify-center object-contain",
+        className,
+      )}
+    />
+  )
+}