feat: yaml editor

2025-10-13 14:40:26 +08:00
parent e863b84016
commit 54703c67c1
48 changed files with 2062 additions and 246 deletions
@@ -0,0 +1,79 @@
+import CopyButton from '@/components/copy-button';
+import EditorWrap from '@/components/editor-wrap';
+import HighlightCode from '@/components/highlight-code';
+import SegmentLine from '@/components/segment-line';
+import React from 'react';
+import styled from 'styled-components';
+
+interface ViewerProps {
+  code: string;
+  copyText?: string;
+  options?: Global.BaseOption<string>[];
+  defaultValue?: string;
+  headerHeight?: number;
+  lang?: string;
+  onChange?: (value: string | number) => void;
+}
+
+const Header = styled.div`
+  width: 100%;
+  padding-inline: 12px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-editor-header-bg);
+`;
+
+const CommandViewer: React.FC<ViewerProps> = (props) => {
+  const {
+    code,
+    copyText = '',
+    defaultValue,
+    options = [],
+    headerHeight = 40,
+    lang,
+    onChange
+  } = props || {};
+
+  const [value, setValue] = React.useState<string>(defaultValue || '');
+
+  const handlOnChange = (value: string | number) => {
+    setValue(value as string);
+    onChange?.(value);
+  };
+
+  return (
+    <EditorWrap
+      header={
+        <Header>
+          <SegmentLine
+            height={headerHeight}
+            defaultValue={defaultValue}
+            value={value}
+            size="small"
+            options={options}
+            onChange={handlOnChange}
+          ></SegmentLine>
+
+          <CopyButton
+            text={copyText || code}
+            size="small"
+            style={{
+              color: 'rgba(255,255,255,.7)'
+            }}
+          />
+        </Header>
+      }
+    >
+      <HighlightCode
+        height={380}
+        theme="dark"
+        code={code}
+        lang={lang || value}
+        copyable={false}
+      ></HighlightCode>
+    </EditorWrap>
+  );
+};
+
+export default CommandViewer;