@vef-framework/components 1.0.122 → 1.0.123

package/cjs/vef-intellisense-code-editor/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@monaco-editor/react');
+var index = require('../vef-spin/index.cjs');
+var useChangeHandler = require('./hooks/use-change-handler.cjs');
+var useEditorOptions = require('./hooks/use-editor-options.cjs');
+var usePath = require('./hooks/use-path.cjs');
+var styles = require('./styles.cjs');
+
+"use strict";
+function VefIntellisenseCodeEditor({
+  value,
+  language,
+  path,
+  placeholder,
+  disabled,
+  height = 320,
+  tabSize = 2,
+  onChange
+}) {
+  const handleChange = useChangeHandler.useChangeHandler(onChange);
+  const options = useEditorOptions.useEditorOptions(placeholder, disabled, tabSize);
+  const codePath = usePath.usePath(path, language);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Editor,
+    {
+      saveViewState: true,
+      css: styles.editorStyle,
+      height,
+      keepCurrentModel: false,
+      language,
+      loading: /* @__PURE__ */ jsxRuntime.jsx(index.default, {}),
+      options,
+      path: codePath,
+      theme: "github-light",
+      value,
+      width: "100%",
+      onChange: handleChange
+    }
+  );
+}
+
+exports.default = VefIntellisenseCodeEditor;

package/cjs/vef-intellisense-code-editor/loader.cjs

@@ -0,0 +1,142 @@
+"use strict";
+'use strict';
+
+var react = require('@monaco-editor/react');
+var monaco = require('monaco-editor');
+var EditorWorker = require('monaco-editor/esm/vs/editor/editor.worker?worker');
+var CssWorker = require('monaco-editor/esm/vs/language/css/css.worker?worker');
+var HtmlWorker = require('monaco-editor/esm/vs/language/html/html.worker?worker');
+var JsonWorker = require('monaco-editor/esm/vs/language/json/json.worker?worker');
+var TsWorker = require('monaco-editor/esm/vs/language/typescript/ts.worker?worker');
+var githubLight = require('./themes/github-light.json.cjs');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
+
+"use strict";
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === "json") {
+      return new JsonWorker();
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new CssWorker();
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new HtmlWorker();
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new TsWorker();
+    }
+    return new EditorWorker();
+  }
+};
+monaco__namespace.editor.defineTheme("github-light", githubLight.default);
+monaco__namespace.languages.typescript.typescriptDefaults.setInlayHintsOptions({
+  includeInlayVariableTypeHints: true,
+  includeInlayEnumMemberValueHints: true,
+  includeInlayFunctionParameterTypeHints: true,
+  includeInlayPropertyDeclarationTypeHints: true,
+  includeInlayFunctionLikeReturnTypeHints: true,
+  includeInlayParameterNameHints: "all",
+  includeInlayParameterNameHintsWhenArgumentMatchesName: true
+});
+monaco__namespace.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+monaco__namespace.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+  noSemanticValidation: false,
+  noSuggestionDiagnostics: false,
+  noSyntaxValidation: false,
+  onlyVisible: false
+});
+monaco__namespace.languages.typescript.typescriptDefaults.setCompilerOptions({
+  target: monaco__namespace.languages.typescript.ScriptTarget.ES2020,
+  lib: ["ES2020"],
+  module: monaco__namespace.languages.typescript.ModuleKind.ESNext,
+  moduleResolution: monaco__namespace.languages.typescript.ModuleResolutionKind.NodeJs,
+  jsx: monaco__namespace.languages.typescript.JsxEmit.React,
+  strict: true,
+  skipLibCheck: true,
+  esModuleInterop: true,
+  noEmit: true,
+  baseUrl: ".",
+  noFallthroughCasesInSwitch: true,
+  allowSyntheticDefaultImports: true
+});
+monaco__namespace.languages.typescript.javascriptDefaults.setModeConfiguration({
+  inlayHints: true,
+  codeActions: true,
+  completionItems: true,
+  definitions: true,
+  diagnostics: true,
+  documentHighlights: true,
+  documentSymbols: true,
+  hovers: true,
+  references: true,
+  onTypeFormattingEdits: true,
+  rename: true,
+  signatureHelp: true,
+  documentRangeFormattingEdits: true
+});
+monaco__namespace.languages.typescript.javascriptDefaults.setInlayHintsOptions({
+  includeInlayVariableTypeHints: true,
+  includeInlayEnumMemberValueHints: true,
+  includeInlayFunctionParameterTypeHints: true,
+  includeInlayPropertyDeclarationTypeHints: true,
+  includeInlayFunctionLikeReturnTypeHints: true,
+  includeInlayParameterNameHints: "all",
+  includeInlayParameterNameHintsWhenArgumentMatchesName: true
+});
+monaco__namespace.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+monaco__namespace.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+  noSemanticValidation: false,
+  noSuggestionDiagnostics: false,
+  noSyntaxValidation: false,
+  onlyVisible: false
+});
+monaco__namespace.languages.typescript.javascriptDefaults.setCompilerOptions({
+  target: monaco__namespace.languages.typescript.ScriptTarget.ES2020,
+  lib: ["ES2020"],
+  module: monaco__namespace.languages.typescript.ModuleKind.ESNext,
+  moduleResolution: monaco__namespace.languages.typescript.ModuleResolutionKind.NodeJs,
+  jsx: monaco__namespace.languages.typescript.JsxEmit.React,
+  strict: true,
+  skipLibCheck: true,
+  esModuleInterop: true,
+  noEmit: true,
+  allowJs: true,
+  baseUrl: ".",
+  noFallthroughCasesInSwitch: true,
+  allowSyntheticDefaultImports: true
+});
+monaco__namespace.languages.json.jsonDefaults.setDiagnosticsOptions({
+  validate: true
+});
+function initializeIntellisenseCodeEditor() {
+  react.loader.config({
+    "vs/nls": {
+      availableLanguages: {
+        "*": "zh-cn"
+      }
+    },
+    monaco: monaco__namespace
+  });
+  react.loader.init();
+}
+
+exports.initializeIntellisenseCodeEditor = initializeIntellisenseCodeEditor;

package/cjs/vef-intellisense-code-editor/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-intellisense-code-editor/styles.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+
+"use strict";
+const editorStyle = react.css`
+  border-width: ${shared.themeVariables.lineWidth};
+  border-style: ${shared.themeVariables.lineType};
+  border-color: ${shared.themeVariables.colorBorder};
+  border-radius: ${shared.themeVariables.borderRadius};
+  overflow: hidden;
+
+  &:not(:has(> .monaco-editor.focused)) {
+    border-color: ${shared.themeVariables.colorBorder};
+
+    &:hover {
+      border-color: ${shared.themeVariables.colorPrimaryHover};
+    }
+  }
+
+  &:has(.monaco-editor.focused) {
+    border-color: ${shared.themeVariables.colorPrimary};
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+`;
+
+exports.editorStyle = editorStyle;

package/cjs/vef-intellisense-code-editor/themes/github-light.json.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var github_light_default = '{\n  "base": "vs",\n  "inherit": true,\n  "rules": [\n    {\n      "background": "ffffff",\n      "token": ""\n    },\n    {\n      "foreground": "6a737d",\n      "token": "comment"\n    },\n    {\n      "foreground": "6a737d",\n      "token": "punctuation.definition.comment"\n    },\n    {\n      "foreground": "6a737d",\n      "token": "string.comment"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "constant"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "entity.name.constant"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "variable.other.constant"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "variable.language"\n    },\n    {\n      "foreground": "6f42c1",\n      "token": "entity"\n    },\n    {\n      "foreground": "6f42c1",\n      "token": "entity.name"\n    },\n    {\n      "foreground": "24292e",\n      "token": "variable.parameter.function"\n    },\n    {\n      "foreground": "22863a",\n      "token": "entity.name.tag"\n    },\n    {\n      "foreground": "d73a49",\n      "token": "keyword"\n    },\n    {\n      "foreground": "d73a49",\n      "token": "storage"\n    },\n    {\n      "foreground": "d73a49",\n      "token": "storage.type"\n    },\n    {\n      "foreground": "24292e",\n      "token": "storage.modifier.package"\n    },\n    {\n      "foreground": "24292e",\n      "token": "storage.modifier.import"\n    },\n    {\n      "foreground": "24292e",\n      "token": "storage.type.java"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string"\n    },\n    {\n      "foreground": "032f62",\n      "token": "punctuation.definition.string"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string punctuation.section.embedded source"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "support"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "meta.property-name"\n    },\n    {\n      "foreground": "e36209",\n      "token": "variable"\n    },\n    {\n      "foreground": "24292e",\n      "token": "variable.other"\n    },\n    {\n      "foreground": "b31d28",\n      "fontStyle": "bold italic underline",\n      "token": "invalid.broken"\n    },\n    {\n      "foreground": "b31d28",\n      "fontStyle": "bold italic underline",\n      "token": "invalid.deprecated"\n    },\n    {\n      "foreground": "fafbfc",\n      "background": "b31d28",\n      "fontStyle": "italic underline",\n      "token": "invalid.illegal"\n    },\n    {\n      "foreground": "fafbfc",\n      "background": "d73a49",\n      "fontStyle": "italic underline",\n      "token": "carriage-return"\n    },\n    {\n      "foreground": "b31d28",\n      "fontStyle": "bold italic underline",\n      "token": "invalid.unimplemented"\n    },\n    {\n      "foreground": "b31d28",\n      "token": "message.error"\n    },\n    {\n      "foreground": "24292e",\n      "token": "string source"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "string variable"\n    },\n    {\n      "foreground": "032f62",\n      "token": "source.regexp"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string.regexp"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string.regexp.character-class"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string.regexp constant.character.escape"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string.regexp source.ruby.embedded"\n    },\n    {\n      "foreground": "032f62",\n      "token": "string.regexp string.regexp.arbitrary-repitition"\n    },\n    {\n      "foreground": "22863a",\n      "fontStyle": "bold",\n      "token": "string.regexp constant.character.escape"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "support.constant"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "support.variable"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "meta.module-reference"\n    },\n    {\n      "foreground": "735c0f",\n      "token": "markup.list"\n    },\n    {\n      "foreground": "005cc5",\n      "fontStyle": "bold",\n      "token": "markup.heading"\n    },\n    {\n      "foreground": "005cc5",\n      "fontStyle": "bold",\n      "token": "markup.heading entity.name"\n    },\n    {\n      "foreground": "22863a",\n      "token": "markup.quote"\n    },\n    {\n      "foreground": "24292e",\n      "fontStyle": "italic",\n      "token": "markup.italic"\n    },\n    {\n      "foreground": "24292e",\n      "fontStyle": "bold",\n      "token": "markup.bold"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "markup.raw"\n    },\n    {\n      "foreground": "b31d28",\n      "background": "ffeef0",\n      "token": "markup.deleted"\n    },\n    {\n      "foreground": "b31d28",\n      "background": "ffeef0",\n      "token": "meta.diff.header.from-file"\n    },\n    {\n      "foreground": "b31d28",\n      "background": "ffeef0",\n      "token": "punctuation.definition.deleted"\n    },\n    {\n      "foreground": "22863a",\n      "background": "f0fff4",\n      "token": "markup.inserted"\n    },\n    {\n      "foreground": "22863a",\n      "background": "f0fff4",\n      "token": "meta.diff.header.to-file"\n    },\n    {\n      "foreground": "22863a",\n      "background": "f0fff4",\n      "token": "punctuation.definition.inserted"\n    },\n    {\n      "foreground": "e36209",\n      "background": "ffebda",\n      "token": "markup.changed"\n    },\n    {\n      "foreground": "e36209",\n      "background": "ffebda",\n      "token": "punctuation.definition.changed"\n    },\n    {\n      "foreground": "f6f8fa",\n      "background": "005cc5",\n      "token": "markup.ignored"\n    },\n    {\n      "foreground": "f6f8fa",\n      "background": "005cc5",\n      "token": "markup.untracked"\n    },\n    {\n      "foreground": "6f42c1",\n      "fontStyle": "bold",\n      "token": "meta.diff.range"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "meta.diff.header"\n    },\n    {\n      "foreground": "005cc5",\n      "fontStyle": "bold",\n      "token": "meta.separator"\n    },\n    {\n      "foreground": "005cc5",\n      "token": "meta.output"\n    },\n    {\n      "foreground": "586069",\n      "token": "brackethighlighter.tag"\n    },\n    {\n      "foreground": "586069",\n      "token": "brackethighlighter.curly"\n    },\n    {\n      "foreground": "586069",\n      "token": "brackethighlighter.round"\n    },\n    {\n      "foreground": "586069",\n      "token": "brackethighlighter.square"\n    },\n    {\n      "foreground": "586069",\n      "token": "brackethighlighter.angle"\n    },\n    {\n      "foreground": "586069",\n      "token": "brackethighlighter.quote"\n    },\n    {\n      "foreground": "b31d28",\n      "token": "brackethighlighter.unmatched"\n    },\n    {\n      "foreground": "b31d28",\n      "token": "sublimelinter.mark.error"\n    },\n    {\n      "foreground": "e36209",\n      "token": "sublimelinter.mark.warning"\n    },\n    {\n      "foreground": "959da5",\n      "token": "sublimelinter.gutter-mark"\n    },\n    {\n      "foreground": "032f62",\n      "fontStyle": "underline",\n      "token": "constant.other.reference.link"\n    },\n    {\n      "foreground": "032f62",\n      "fontStyle": "underline",\n      "token": "string.other.link"\n    }\n  ],\n  "colors": {\n    "editor.foreground": "#24292e",\n    "editor.background": "#fafafa",\n    "editor.selectionBackground": "#c8c8fa",\n    "editor.inactiveSelectionBackground": "#fafbfc",\n    "editor.lineHighlightBackground": "#fafbfc",\n    "editorCursor.foreground": "#24292e",\n    "editorWhitespace.foreground": "#959da5",\n    "editorIndentGuide.background": "#959da5",\n    "editorIndentGuide.activeBackground": "#24292e",\n    "editor.selectionHighlightBorder": "#fafbfc"\n  }\n}\n';
+
+exports.default = github_light_default;

package/cjs/vef-json-viewer/index.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var JsonViewer = require('@microlink/react-json-view');
+
+"use strict";
+function VefJsonViewer({
+  data,
+  sortKeys = false,
+  escapeStrings = false,
+  collapsed = false,
+  collapseStringsAfterLength = 200,
+  groupArraysAfterLength = 100
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    JsonViewer,
+    {
+      displayArrayKey: true,
+      displayObjectSize: true,
+      enableClipboard: true,
+      collapsed,
+      collapseStringsAfterLength,
+      displayDataTypes: false,
+      escapeStrings,
+      groupArraysAfterLength,
+      iconStyle: "square",
+      quotesOnKeys: false,
+      sortKeys,
+      src: data,
+      onAdd: false,
+      onDelete: false,
+      onEdit: false,
+      onSelect: false
+    }
+  );
+}
+
+exports.default = VefJsonViewer;

package/cjs/vef-json-viewer/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-layout/common-styles.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+
+"use strict";
+const iconStyle = react.css`
+  padding: ${shared.themeVariables.paddingXs};
+  ${shared.styles.flexCenter}
+`;
+
+exports.iconStyle = iconStyle;

package/cjs/vef-layout/components/content.cjs

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+var react = require('react');
+
+"use strict";
+const { Content } = antd.Layout;
+function VefContentBase({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Content, { children });
+}
+const VefContent = react.memo(VefContentBase);
+VefContent.displayName = "VefContent";
+
+exports.default = VefContent;

package/cjs/vef-layout/components/font-size.cjs

@@ -0,0 +1,73 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var store = require('../../vef-config-provider/store.cjs');
+var index$1 = require('../../vef-dropdown/index.cjs');
+var index = require('../../vef-icon/index.cjs');
+var commonStyles = require('../common-styles.cjs');
+
+"use strict";
+function IconFontSize(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a1 1 0 0 1 1 1v6a1 1 0 0 1-1.911.412a4 4 0 1 1 0-6.824A1 1 0 0 1 21 12M8 4c.732 0 1.381.473 1.605 1.17l4.347 13.524a1 1 0 0 1-1.904.612L10.664 15H5.336l-1.384 4.306a1 1 0 0 1-1.904-.612L6.395 5.17A1.69 1.69 0 0 1 8 4m10 10a2 2 0 1 0 0 4a2 2 0 0 0 0-4M8 6.712L5.979 13h4.042z", fill: "currentColor" })
+  ] }) });
+}
+function IconFontSizeDecrease(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      height: 24,
+      viewBox: "0 0 24 24",
+      width: 24,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 19V8.5a3.5 3.5 0 1 1 7 0V19m-7-6h7m10-1h-6", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 })
+    }
+  );
+}
+function IconFontSizeIncrease(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      height: 24,
+      viewBox: "0 0 24 24",
+      width: 24,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 19V8.5a3.5 3.5 0 1 1 7 0V19m-7-6h7m7-4v6m3-3h-6", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 })
+    }
+  );
+}
+const menuItems = [
+  {
+    key: "medium",
+    type: "item",
+    label: "默认字号",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(IconFontSizeDecrease, {}) })
+  },
+  {
+    key: "large",
+    type: "item",
+    label: "大字号",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(IconFontSizeIncrease, {}) })
+  }
+];
+function VefFontSize() {
+  const [fontSize, setFontSize] = store.useConfigStore((state) => [state.fontSize, state.setFontSize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      selectable: true,
+      items: menuItems,
+      selectedKeys: [fontSize],
+      onChange: ([fontSize2]) => setFontSize(fontSize2),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: commonStyles.iconStyle, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(IconFontSize, {}) }) })
+    }
+  );
+}
+
+exports.default = VefFontSize;

package/cjs/vef-layout/components/fullscreen.cjs

@@ -0,0 +1,28 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var index$1 = require('../../vef-icon/index.cjs');
+var index = require('../../vef-tooltip/index.cjs');
+var commonStyles = require('../common-styles.cjs');
+
+"use strict";
+function VefFullscreen() {
+  const [isFullscreen, setIsFullscreen] = react.useState(false);
+  const handleClick = react.useCallback(() => {
+    if (isFullscreen) {
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    } else {
+      document.body.requestFullscreen();
+      setIsFullscreen(true);
+    }
+  }, [isFullscreen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { content: isFullscreen ? "退出全屏" : "全屏", delay: 0.5, children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: commonStyles.iconStyle, onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { size: "large", children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MinimizeIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MaximizeIcon, {}) }) }) });
+}
+
+exports.default = VefFullscreen;

package/cjs/vef-layout/components/header-action-icons.cjs

@@ -0,0 +1,43 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var index = require('../../vef-divider/index.cjs');
+var fontSize = require('./font-size.cjs');
+var fullscreen = require('./fullscreen.cjs');
+var message = require('./message.cjs');
+var search = require('./search.cjs');
+var userAvatar = require('./user-avatar.cjs');
+
+"use strict";
+const wrapperStyle = react.css`
+  display: flex;
+  align-items: center;
+  column-gap: ${shared.themeVariables.marginXxs};
+
+  > div:not(.vef-divider) {
+    border-radius: ${shared.themeVariables.borderRadius};
+    transition: background-color ${shared.themeVariables.motionDurationMid} ${shared.themeVariables.motionEaseInOut};
+
+    &:hover {
+      cursor: pointer;
+      background-color: ${shared.themeVariables.colorFillTertiary};
+    }
+  }
+`;
+function VefHeaderActionIcons() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { orientation: "vertical" }),
+    /* @__PURE__ */ jsxRuntime.jsx(search.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(fontSize.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(fullscreen.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(message.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(userAvatar.default, {})
+  ] });
+}
+
+exports.default = VefHeaderActionIcons;

package/cjs/vef-layout/components/header-content.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var shared = require('@vef-framework/shared');
+var index = require('../../vef-breadcrumb/index.cjs');
+var useLayoutContext = require('../hooks/use-layout-context.cjs');
+
+"use strict";
+function VefHeaderContent() {
+  const [breadcrumbItems, onBreadcrumbClick] = useLayoutContext.useLayoutContextSelector((ctx) => [ctx.breadcrumbItems, ctx.onBreadcrumbClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: shared.isArray(breadcrumbItems) && breadcrumbItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      items: breadcrumbItems,
+      onClick: onBreadcrumbClick
+    }
+  ) });
+}
+VefHeaderContent.displayName = "VefHeaderContent";
+
+exports.default = VefHeaderContent;

package/cjs/vef-layout/components/header.cjs

@@ -0,0 +1,80 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react$1 = require('react');
+var index = require('../../vef-button/index.cjs');
+var index$1 = require('../../vef-icon/index.cjs');
+var index$2 = require('../../vef-popover/index.cjs');
+var store = require('../store.cjs');
+var headerActionIcons = require('./header-action-icons.cjs');
+var headerContent = require('./header-content.cjs');
+var iconMenuFoldLeft = require('./icon-menu-fold-left.cjs');
+var iconMenuUnfoldLeft = require('./icon-menu-unfold-left.cjs');
+var menuGroups = require('./menu-groups.cjs');
+
+"use strict";
+const { Header } = antd.Layout;
+const headerStyle = react.css`
+  --vef-layout-header-height: 60px;
+  --vef-layout-header-padding: 0 ${shared.themeVariables.paddingSm};
+
+  line-height: unset;
+  background-color: ${shared.themeVariables.colorBgContainer};
+  border-bottom: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
+  display: grid;
+  grid-template-columns: max-content minmax(min-content, 1fr) max-content;
+  align-items: center;
+  column-gap: ${shared.themeVariables.margin};
+`;
+function IconApps(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { height: 6.5, rx: 2, width: 6.5, x: 3.75, y: 3.75 }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.586 3.818a2 2 0 0 1 2.828 0l1.768 1.768a2 2 0 0 1 0 2.828l-1.768 1.768a2 2 0 0 1-2.828 0l-1.768-1.768a2 2 0 0 1 0-2.828z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { height: 6.5, rx: 1.5, width: 6.5, x: 3.75, y: 13.75 }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { height: 6.5, rx: 2, width: 6.5, x: 13.75, y: 13.75 })
+  ] }) });
+}
+function VefHeaderBase() {
+  const [siderCollapsed, setSiderCollapsed] = store.useLayoutStore((state) => [state.siderCollapsed, state.setSiderCollapsed]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { css: headerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { css: shared.styles.flexCenter, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          color: "default",
+          variant: "text",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { size: "huge", children: siderCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(iconMenuUnfoldLeft.default, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconMenuFoldLeft.default, {}) }),
+          onClick: () => setSiderCollapsed(!siderCollapsed)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.default,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(menuGroups.default, {}),
+          placement: "bottomRight",
+          trigger: "click",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            index.default,
+            {
+              color: "default",
+              variant: "text",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { size: "huge", children: /* @__PURE__ */ jsxRuntime.jsx(IconApps, {}) })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(headerContent.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(headerActionIcons.default, {})
+  ] });
+}
+const VefHeader = react$1.memo(VefHeaderBase);
+VefHeader.displayName = "VefHeader";
+
+exports.default = VefHeader;