@veltra/desktop 1.7.5 → 1.7.7

package/dist/types/date-range-picker.d.ts

@@ -1,9 +1,13 @@
 import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 import { Dater } from "@cat-kit/core";
 //#region src/types/date-range-picker.d.ts
+/** 绑定值类型 */
+type DateRangePickerDataType = 'date' | 'timestamp' | 'string';
+/** 日期范围绑定值 */
+type DateRangeValue = [string, string] | [number, number] | [Date, Date];
 /** date-range-picker组件属性 */
 interface DateRangePickerProps extends FormComponentProps {
-  modelValue?: [string, string];
+  modelValue?: DateRangeValue;
   /** 占位 */
   placeholder?: [string, string];
   /** 日期类型 */
@@ -12,6 +16,11 @@ interface DateRangePickerProps extends FormComponentProps {
   format?: string;
   /** 日期值格式化, 当没有指定时默认使用format属性，仅当值和显示的内容不一致时才需要使用到该属性 */
   valueFormat?: string;
+  /**
+   * 绑定值的类型，默认为字符串。
+   * 当 dataType 没有指定为字符串时，valueFormat 属性不生效
+   */
+  dataType?: DateRangePickerDataType;
   /** 最小可选日期 */
   disabledDate?: (date: Dater, raw: Date) => boolean;
   /** 是否显示清除按钮 */
@@ -19,12 +28,13 @@ interface DateRangePickerProps extends FormComponentProps {
 }
 /** date-range-picker组件定义的事件 */
 interface DateRangePickerEmits {
-  (e: 'update:modelValue', value?: [string, string]): void;
+  (e: 'update:modelValue', value?: DateRangeValue): void;
+  (e: 'change', dates?: [Date, Date]): void;
 }
 /** date-range-picker组件暴露的属性和方法(组件内部使用) */
 interface _DateRangePickerExposed {}
 /** date-range-picker组件暴露的属性和方法(组件外部使用, 引用的值会被自动解构) */
 type DateRangePickerExposed = DeconstructValue<_DateRangePickerExposed>;
 //#endregion
-export { DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, _DateRangePickerExposed };
+export { DateRangePickerDataType, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DateRangeValue, _DateRangePickerExposed };
 //# sourceMappingURL=date-range-picker.d.ts.map

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ import { TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, _TreeExposed
 import { TreeSelectEmits, TreeSelectExposed, TreeSelectProps, _TreeSelectExposed } from "./tree-select.js";
 import { LayoutEmits, LayoutExposed, LayoutProps, _LayoutExposed } from "./layout.js";
 import { TagEmits, TagExposed, TagProps } from "./tag.js";
-import { DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, _DateRangePickerExposed } from "./date-range-picker.js";
+import { DateRangePickerDataType, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DateRangeValue, _DateRangePickerExposed } from "./date-range-picker.js";
 import { RadioGroupEmits, RadioGroupExposed, RadioGroupProps, _RadioGroupExposed } from "./radio-group.js";
 import { ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, _ScrollExposed } from "./scroll.js";
 import { WatermarkEmits, WatermarkExposed, WatermarkProps, _WatermarkExposed } from "./watermark.js";
@@ -81,4 +81,4 @@ import { FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, Fil
 import { CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue } from "./collapse.js";
 import { SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, _SegmentExposed } from "./segment.js";
 export type * from "@veltra/utils";
-export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditFormStatus, BatchEditProps, BatchEditSlots, BatchEditStates, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DatePanelEmits, DatePanelProps, DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DialogEmits, DialogExposed, DialogProps, DialogTransition, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, DualNavEmits, DualNavExposed, DualNavProps, DualNavRailVariant, DualNavRootItem, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormEmits, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, GroupNavEmits, GroupNavGroup, GroupNavProps, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, Message, MessageConfirm, MessageConfirmAction, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmInstance, MessageConfirmOptions, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NavEmits, NavExposed, NavItem, NavProps, NodeRenderExposed, NodeRenderProps, Notification, NotificationEmits, NotificationExposed, NotificationInstance, NotificationOptions, NotificationPosition, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _DualNavExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NavExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SegmentExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };
+export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditFormStatus, BatchEditProps, BatchEditSlots, BatchEditStates, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DatePanelEmits, DatePanelProps, DatePickerDataType, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerDataType, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DateRangeValue, DialogEmits, DialogExposed, DialogProps, DialogTransition, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, DualNavEmits, DualNavExposed, DualNavProps, DualNavRailVariant, DualNavRootItem, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormEmits, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, GroupNavEmits, GroupNavGroup, GroupNavProps, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, Message, MessageConfirm, MessageConfirmAction, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmInstance, MessageConfirmOptions, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NavEmits, NavExposed, NavItem, NavProps, NodeRenderExposed, NodeRenderProps, Notification, NotificationEmits, NotificationExposed, NotificationInstance, NotificationOptions, NotificationPosition, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SegmentEmits, SegmentExposed, SegmentItem, SegmentProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _DualNavExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NavExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SegmentExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.5",
-    "@veltra/directives": "^1.7.5",
+    "@veltra/compositions": "^1.7.7",
+    "@veltra/directives": "^1.7.7",
     "@veltra/icons": "^1.5.0",
     "@veltra/sheet-core": "^2.5.4",
-    "@veltra/styles": "^1.7.5",
-    "@veltra/utils": "^1.7.5",
+    "@veltra/styles": "^1.7.7",
+    "@veltra/utils": "^1.7.7",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/code-editor/code-editor.vue

@@ -1,18 +1,49 @@
 <template>
-  <u-scroll :class="className" :style="rootStyle" @keyup.enter.stop>
-    <div ref="container"></div>
-
-    <u-select
-      v-if="showLangSelect"
-      :class="cls.e('lang-select')"
-      v-model="lang"
-      size="small"
-      :options="langOptions"
-      :clearable="false"
-      :disabled="disabled"
-    />
-    <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
-  </u-scroll>
+  <!-- 放大时原位置的等高占位，避免页面布局位移 -->
+  <div v-if="zoomed" :class="cls.e('placeholder')" :style="{ height: placeholderHeight }" />
+
+  <Teleport to="body" :disabled="!zoomed">
+    <div
+      ref="zoomWrap"
+      :class="[cls.e('zoom-wrap'), bem.is('zoomed', zoomed)]"
+      :style="zoomed ? { zIndex: zoomZIndex } : undefined"
+      tabindex="-1"
+      @keyup.esc="exitZoom"
+    >
+      <div ref="root" v-bind="$attrs" :class="className" :style="rootStyle" @keyup.enter.stop>
+        <div v-if="hasToolbar" :class="cls.e('toolbar')">
+          <u-select
+            v-if="showLangSelect"
+            :class="cls.e('lang-select')"
+            v-model="lang"
+            size="small"
+            :options="langOptions"
+            :clearable="false"
+            :disabled="disabled"
+          />
+          <span v-else-if="langLabel" :class="cls.e('lang-label')">{{ langLabel }}</span>
+
+          <div :class="cls.e('toolbar-actions')">
+            <u-icon v-if="zoomed" :class="cls.e('btn-close')" title="关闭" @click="exitZoom">
+              <Close />
+            </u-icon>
+            <u-icon
+              v-else-if="zoomable"
+              :class="[cls.e('btn-zoom'), bem.is('disabled', disabled)]"
+              title="放大"
+              @click="enterZoom"
+            >
+              <ZoomIn />
+            </u-icon>
+          </div>
+        </div>
+
+        <u-scroll :class="cls.e('scroll')">
+          <div ref="container"></div>
+        </u-scroll>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>
@@ -20,9 +51,11 @@ import { Compartment, EditorState, type Extension, type Text } from '@codemirror
 import { oneDark } from '@codemirror/theme-one-dark'
 import { EditorView, tooltips } from '@codemirror/view'
 import { useFormFallbackProps } from '@veltra/compositions'
+import { ZoomIn, Close } from '@veltra/icons/normal'
 import { bem, injectFormContext, zIndex } from '@veltra/utils'
 import {
   computed,
+  nextTick,
   onBeforeUnmount,
   shallowRef,
   useTemplateRef,
@@ -31,6 +64,7 @@ import {
 } from 'vue'
 
 import type { CodeEditorEmits, CodeEditorLang, CodeEditorProps } from '../../types'
+import { UIcon } from '../icon'
 import { UScroll } from '../scroll'
 import { USelect } from '../select'
 import { basicSetup } from './basic-setup'
@@ -45,12 +79,13 @@ import {
   type ShellConfig
 } from './shell-extension'
 
-defineOptions({ name: 'UCodeEditor' })
+defineOptions({ name: 'UCodeEditor', inheritAttrs: false })
 
 const props = withDefaults(defineProps<CodeEditorProps>(), {
   disabled: undefined,
   readonly: undefined,
   dark: false,
+  zoomable: true,
   defaultLines: 8
 })
 
@@ -68,11 +103,24 @@ const { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   readonly: false
 })
 
+/** 放大状态：复用同一组件根 DOM / 同一 EditorView 实例，Teleport 移入 body 全屏遮罩 */
+const zoomed = shallowRef(false)
+
+/** 放大期间原位置占位的高度（取放大前组件根高度） */
+const placeholderHeight = shallowRef('')
+
+/** 放大遮罩的 z 轴层级，进入放大时取一次，避免渲染期反复自增 */
+const zoomZIndex = shallowRef<number>()
+
+const rootRef = useTemplateRef<HTMLElement>('root')
+const zoomWrapRef = useTemplateRef<HTMLElement>('zoomWrap')
+
 const className = computed<string[]>(() => [
   cls.b,
   bem.is('disabled', disabled.value),
   bem.is('readonly', readonly.value),
-  bem.is('dark', props.dark)
+  bem.is('dark', props.dark),
+  bem.is('zoomed', zoomed.value)
 ])
 
 const rootStyle = computed<CSSProperties>(() => ({
@@ -95,6 +143,45 @@ const langLabel = computed(() =>
   langs.value.length === 1 && activeLang.value ? activeLang.value.toUpperCase() : undefined
 )
 
+/** 语言标识或放大/关闭按钮任一存在时才渲染工具栏 */
+const hasToolbar = computed(
+  () => showLangSelect.value || !!langLabel.value || props.zoomable || zoomed.value
+)
+
+function enterZoom() {
+  if (disabled.value || zoomed.value) return
+  const root = rootRef.value
+  if (root) placeholderHeight.value = `${root.offsetHeight}px`
+  zoomZIndex.value = zIndex()
+  zoomed.value = true
+  // 遮罩层级高于创建编辑器时写入的 tooltip 层级，同步抬升避免补全提示被遮罩盖住
+  editor.value?.dispatch({
+    effects: tooltipThemeCompartment.reconfigure(
+      EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })
+    )
+  })
+  // 对齐 dialog 先例：放大按钮（u-icon）不可聚焦，点击后焦点在 body 上，
+  // keyup 不会向下经过遮罩，需主动聚焦遮罩，Esc 才能冒泡到 keyup.esc
+  nextTick(() => zoomWrapRef.value?.focus())
+}
+
+function exitZoom() {
+  if (!zoomed.value) return
+  zoomed.value = false
+}
+
+/** 放大期间锁定 body 滚动，退出后恢复原值 */
+let prevBodyOverflow = ''
+
+watch(zoomed, (v) => {
+  if (v) {
+    prevBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = prevBodyOverflow
+  }
+})
+
 const shellConfig = computed<ShellConfig>(() => ({
   prefix: props.prefix ?? '',
   suffix: props.suffix ?? ''
@@ -108,6 +195,7 @@ const editableCompartment = new Compartment()
 const readOnlyCompartment = new Compartment()
 const langCompartment = new Compartment()
 const shellCompartment = new Compartment()
+const tooltipThemeCompartment = new Compartment()
 
 /** 聚焦时的正文快照，用于失焦时判断是否触发 change */
 let focusSnapshot = ''
@@ -133,7 +221,7 @@ function buildExtensions(): Extension[] {
   return [
     basicSetup,
     tooltips({ parent: document.body }),
-    EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } }),
+    tooltipThemeCompartment.of(EditorView.theme({ '.cm-tooltip': { zIndex: zIndex() } })),
     themeCompartment.of(props.dark ? oneDark : []),
     editableCompartment.of(EditorView.editable.of(!disabled.value)),
     readOnlyCompartment.of(EditorState.readOnly.of(readonly.value)),
@@ -316,5 +404,8 @@ watch(
   { immediate: true }
 )
 
-onBeforeUnmount(destroyEditor)
+onBeforeUnmount(() => {
+  destroyEditor()
+  if (zoomed.value) document.body.style.overflow = prevBodyOverflow
+})
 </script>

package/src/components/code-editor/style.scss

@@ -16,6 +16,8 @@ $root-name: code-editor;
   --u-code-editor-selection-bg: #{fn.color-a(color, 16, primary)};
 
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-height: 480px;
   border-radius: fn.use-var(radius, default);
@@ -32,31 +34,77 @@ $root-name: code-editor;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.e(toolbar) {
+    flex-shrink: 0;
+    padding: 4px fn.use-var(gap, small);
+    border-bottom: 1px solid var(--u-code-editor-border);
+    @include m.flex($justify: space-between);
+  }
+
+  @include m.e(toolbar-actions) {
+    margin-left: auto;
+    gap: fn.use-var(gap, small);
+    @include m.flex;
+  }
+
   @include m.e(lang-select) {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    z-index: 2;
     width: 88px;
     border: none;
-
-    input {
-      text-align: right;
-    }
   }
 
   @include m.e(lang-label) {
-    position: absolute;
-    top: 2px;
-    right: 8px;
-    z-index: 2;
     font-size: 12px;
-    line-height: 24px;
     color: var(--u-code-editor-gutter-fg);
-    pointer-events: none;
     user-select: none;
   }
 
+  @include m.e(btn-zoom, btn-close) {
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--u-code-editor-gutter-fg);
+    transition: color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+
+      &:hover {
+        color: var(--u-code-editor-gutter-fg);
+      }
+    }
+  }
+
+  // 编辑器滚动区：工具栏在其之外，任何滚动位置都不遮挡代码
+  @include m.e(scroll) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  // 放大时原位置的等高占位，撑起布局避免位移
+  @include m.e(placeholder) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  // 放大遮罩：平时 display: contents 不参与布局，放大时成为 body 下的全屏遮罩
+  @include m.e(zoom-wrap) {
+    display: contents;
+
+    @include m.is(zoomed) {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(0, 0, 0, 0.32);
+      // 遮罩主动聚焦承接 Esc（对齐 dialog 遮罩），不显示焦点框
+      outline: none;
+    }
+  }
+
   .cm-editor {
     background: transparent;
     color: var(--u-code-editor-fg);
@@ -127,6 +175,15 @@ $root-name: code-editor;
     --u-code-editor-selection-bg: rgba(99, 162, 255, 0.25);
   }
 
+  // 放大态：遮罩内视觉居中，脱离 480px 最大高度限制
+  @include m.is(zoomed) {
+    width: 80vw;
+    height: 80vh;
+    max-height: none;
+    border-radius: fn.use-var(radius, large);
+    box-shadow: fn.use-var(shadow, lg);
+  }
+
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
     box-shadow: none;

package/src/components/code-editor/style.ts

@@ -1,2 +1,3 @@
+import '../icon/style'
 import '../select/style'
 import './style.scss'