Add clip details panel

source/Panel/ClipDetails/ClipDetails.tsx

@@ -0,0 +1,60 @@
+import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
+import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
+import { AttrInput } from "@Input/AttrInput/AttrInput";
+import { Message } from "@Input/Message/Message";
+import { Clip } from "@Model/Clip";
+import "./ClipDetails.scss";
+
+@useStatusWithEvent("focusClipChange", "clipAttrChange")
+class ClipDetails extends Component<IMixinStatusProps> {
+
+    private renderFrom(clip: Clip) {
+        return <>
+
+            <Message i18nKey="Common.Attr.Title.Basic" isTitle first/>
+            
+            <AttrInput
+                keyI18n="Common.Attr.Key.Display.Name"
+                maxLength={15}
+                value={clip.name}
+                valueChange={(value) => {
+                    if (this.props.status) {
+                        this.props.status.changeClipAttrib(clip.id, "name", value);
+                    }
+                }}
+            />
+
+            <TogglesInput
+                keyI18n="Common.Attr.Key.Delete" onIconName="delete" red
+                offIconName="delete" valueChange={() => {
+                    const status = this.props.status;
+                    if (status) {
+                        status.popup.showPopup(ConfirmPopup, {
+                            infoI18n: "Popup.Delete.Clip.Confirm",
+                            titleI18N: "Popup.Action.Objects.Confirm.Title",
+                            yesI18n: "Popup.Action.Objects.Confirm.Delete",
+                            red: "yes",
+                            yes: () => {
+                                status.setClipObject();
+                                this.props.status?.actuator.endPlay();
+                                status.model.deleteClip(clip.id);
+                            }
+                        });
+                    }
+                }}
+            />
+
+		</>;
+    }
+
+	public render(): ReactNode {
+        if (this.props.status && this.props.status.focusClip) {
+            return this.renderFrom(this.props.status.focusClip);
+        }
+		return <Message i18nKey="Panel.Info.Clip.Details.Error.Nodata"/>;
+	}
+}
+
+export { ClipDetails };

source/Panel/ClipPlayer/ClipPlayer.tsx

@@ -1,6 +1,7 @@
 import { Component, ReactNode } from "react";
 import { ClipList } from "@Component/ClipList/ClipList";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
 import { Message } from "@Input/Message/Message";
 import { Clip } from "@Model/Clip";
@@ -9,8 +10,9 @@ import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import { OfflineRender } from "@Component/OfflineRender/OfflineRender"
 import "./ClipPlayer.scss";
 
-@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange")
-class ClipPlayer extends Component<IMixinStatusProps> {
+@useSetting
+@useStatusWithEvent("clipChange", "focusClipChange", "actuatorStartChange", "clipAttrChange")
+class ClipPlayer extends Component<IMixinStatusProps & IMixinSettingProps> {
 
 	private isInnerClick: boolean = false;
 
@@ -57,6 +59,7 @@ class ClipPlayer extends Component<IMixinStatusProps> {
 				this.isInnerClick = true;
 				this.props.status?.setClipObject(clip);
 				this.props.status?.actuator.startPlay(clip);
+				this.props.setting?.layout.focus("ClipDetails");
 			}}
 		/>;
 	}

source/Panel/ClipPlayer/ClipRecorder.tsx

@@ -3,7 +3,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { Recorder } from "@Component/Recorder/Recorder";
 import { ActuatorModel } from "@Model/Actuator";
 
-@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop")
+@useStatusWithEvent("actuatorStartChange", "focusClipChange", "recordLoop", "clipAttrChange")
 class ClipRecorder extends Component<IMixinStatusProps> {
 	public render(): ReactNode {
 

source/Panel/Panel.tsx

@@ -12,6 +12,7 @@ import { BehaviorList } from "@Panel/BehaviorList/BehaviorList";
 import { BehaviorDetails } from "@Panel/BehaviorDetails/BehaviorDetails";
 import { ClipPlayer } from "@Panel/ClipPlayer/ClipPlayer";
 import { ClipRecorder } from "@Panel/ClipPlayer/ClipRecorder";
+import { ClipDetails } from "@Panel/ClipDetails/ClipDetails";
 
 interface IPanelInfo {
 	nameKey: string;
@@ -34,6 +35,7 @@ type PanelId = ""
 | "BehaviorList" // 行为列表
 | "BehaviorDetails" // 行为属性
 | "ClipPlayer" // 剪辑影片
+| "ClipDetails" // 剪辑详情
 ;
 
 const PanelInfoMap = new Map<PanelId, IPanelInfo>();
@@ -73,6 +75,10 @@ PanelInfoMap.set("ClipPlayer", {
     nameKey: "Panel.Title.Behavior.Clip.Player", introKay: "Panel.Info.Behavior.Clip.Player",
     class: ClipPlayer, header: ClipRecorder, hidePadding: true
 });
+PanelInfoMap.set("ClipDetails", {
+    nameKey: "Panel.Title.Behavior.Clip.Details", introKay: "Panel.Info.Behavior.Clip.Details",
+    class: ClipDetails
+});
 
 function getPanelById(panelId: PanelId): ReactNode {
 	switch (panelId) {