Match LibTV settings modals

components/canvas/LiblibVideoCanvasReplica.tsx

@@ -380,6 +380,14 @@ function getDefaultValue(key: string, config: unknown) {
   return "";
 }
 
+function getInspectorTitle(node: CloneNode) {
+  if (node.kind !== "input") return node.title;
+  if (node.inputType === "video") return "视频输入";
+  if (node.inputType === "audio") return "音频输入";
+  if (node.inputType === "text") return "文本输入";
+  return "图片输入";
+}
+
 function makeId(prefix: string) {
   return `${prefix}-${crypto.randomUUID()}`;
 }
@@ -1155,9 +1163,7 @@ export function LiblibVideoCanvasReplica({ canvasId, isLoading = false }: Liblib
       ) : null}
 
       {activePanel === "skills" ? (
-        <LibModal onClose={() => setActivePanel(null)} title="LibTV Skills">
-          <SkillsAccessPanel />
-        </LibModal>
+        <SkillsAccessModal onClose={() => setActivePanel(null)} />
       ) : null}
 
       {activePanel === "share" ? (
@@ -2690,7 +2696,9 @@ function InspectorPanel({
   const tool = node.tool;
   const type = getToolType(tool);
   const properties = getToolProperties(tool);
-  const showUpload = node.kind === "input" || requiresMedia(tool);
+  const showUpload = Boolean(tool && requiresMedia(tool));
+  const inspectorTitle = getInspectorTitle(node);
+  const primaryTab = node.inputType || type || node.kind;
   return (
     <aside
       className="absolute right-4 top-[124px] z-50 w-[476px] overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] text-white shadow-[0_24px_80px_rgba(0,0,0,0.45)]"
@@ -2698,14 +2706,13 @@ function InspectorPanel({
     >
       <div className="flex items-start justify-between border-white/8 border-b px-6 py-5">
         <div>
-          <div className="font-semibold text-[18px]">{node.title}</div>
+          <div className="font-semibold text-[18px]">{inspectorTitle}</div>
           <div className="mt-2 flex flex-wrap gap-2">
             <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/58">
-              {node.inputType || type || node.kind}
+              {primaryTab}
             </span>
-            {tool?.vendor ? (
-              <span className="rounded-[6px] bg-[#5b5220] px-2 py-1 text-[12px] text-[#d7c66a]">{tool.vendor}</span>
-            ) : null}
+            <span className="rounded-[6px] bg-[#5b5220] px-2 py-1 text-[12px] text-[#d7c66a]">后端待接入</span>
+            {tool?.vendor ? <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/48">{tool.vendor}</span> : null}
             {getToolModes(tool).map((mode) => (
               <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/48" key={mode}>
                 {mode}
@@ -2969,6 +2976,55 @@ function SkillsAccessPanel() {
   );
 }
 
+function SkillsAccessModal({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/58" data-canvas-overlay="true">
+      <div className="w-[600px] max-w-[calc(100vw-32px)] rounded-[8px] border border-white/10 bg-[#262626] px-4 py-5 text-white shadow-[0_30px_100px_rgba(0,0,0,0.58)]">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <h2 className="text-[15px] font-semibold leading-none text-white">我的Access key</h2>
+            <div className="mt-5 space-y-2 text-[13px] leading-none text-white/76">
+              <p>· Access key 仅用于 LibTV skills 的调用授权使用，一旦传播给他人，有账号泄露的风险，请谨慎保管!</p>
+              <p>· LibTVskills ：是Libtv提供给agent使用的入口，可在openclaw中调用，完成专业视频创作。</p>
+              <p>
+                · 安装使用请戳
+                <button
+                  className="ml-1 text-[#2f8bff] underline-offset-2 hover:underline"
+                  onClick={() => toast.info("LibTV Skills 文档入口待接入。")}
+                  type="button"
+                >
+                  LibTV Skills
+                </button>
+              </p>
+            </div>
+          </div>
+          <button className="rounded-[8px] p-2 text-white/54 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="mt-6 flex justify-end">
+          <button
+            className="h-8 rounded-[8px] bg-white px-4 text-[12px] font-semibold text-black hover:bg-white/90"
+            onClick={() => toast.info("Access key 创建接口待接入。")}
+            type="button"
+          >
+            创建新Access key
+          </button>
+        </div>
+
+        <div className="mt-4 overflow-hidden rounded-[8px] border border-white/8">
+          <div className="grid h-11 grid-cols-[240px_1fr] bg-white/16 text-[13px] text-white/86">
+            <div className="flex items-center px-4">创建日期</div>
+            <div className="flex items-center px-4">Access key</div>
+          </div>
+          <div className="flex h-[66px] items-center px-4 text-[13px] text-white/45">暂无 Access key</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function MemberCenterPanel() {
   return (
     <div className="space-y-4">